Feature/esm transpiled dist

README.md

@@ -24,7 +24,7 @@ npm install -S @dreipol/vue-ui
 Pick any of the modules by importing them in your project, for example:
 
 ```js
-import { UiInput } from '@dreipol/vue-ui/src/components'
+import { UiInput } from '@dreipol/vue-ui'
 
 export default {
     components: { UiInput },

babel.config.js

@@ -1,15 +1,21 @@
 module.exports = {
     plugins: [
         '@babel/plugin-proposal-object-rest-spread',
-        [
-            'istanbul',
-            {
-                exclude: [
-                    '**/*.spec.js',
-                ],
-            },
-        ],
+        '@babel/plugin-proposal-export-namespace-from',
+
     ],
+    env: {
+        test: {
+            plugins: [[
+                'istanbul',
+                {
+                    exclude: [
+                        '**/*.spec.js',
+                    ],
+                },
+            ]],
+        },
+    },
     presets: [
         [
             '@babel/preset-env',

package.json

@@ -3,17 +3,15 @@
   "version": "2.0.2",
   "description": "",
   "main": "index.js",
-  "jsnext:main": "src/index.js",
-  "module": "src/index.js",
   "scripts": {
     "prepare": "npm run build && npm test",
     "lint": "npx eslint --ext .js,.vue --max-warnings 0 ./src *.config.js",
     "coveralls": "cat ./coverage/report-lcov/lcov.info | coveralls",
     "ci-test-lint": "npx eslint --ext .js,.vue -f junit --max-warnings 0 ./src *.config.js > reports/eslint.xml",
     "build": "npx webpack --config webpack.config.js",
     "prepublishOnly": "npm run build && npm test",
-    "test": "npm run lint && karma start karma.config.js",
-    "debug": "karma start karma.config.js --single-run 0 --browsers Chrome"
+    "test": "npm run lint && BABEL_ENV=test karma start karma.config.js",
+    "debug": "BABEL_ENV=test karma start karma.config.js --single-run 0 --browsers Chrome"
   },
   "files": [
     "src"
@@ -33,6 +31,7 @@
   "homepage": "https://github.com/dreipol/vue-ui#readme",
   "devDependencies": {
     "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/preset-env": "^7.1.0",
     "@dreipol/eslint-config": "^6.0.4",

src/components/accordion/README.md

@@ -3,7 +3,7 @@ Accordion component that could be used in a SPA or even as simple enhancement fo
 
 ## Usage
 ```js
-import { UiAccordion } from '@dreipol/vue-ui/src/components';
+import { UiAccordion } from '@dreipol/vue-ui';
 ```
 
 ## Props

src/components/form/README.md

@@ -10,7 +10,7 @@ Let's assume for example that you want to use the checkbox component in your vue
 </template>
 
 <script>
-    import { UiCheckbox } from '@dreipol/vue-ui/src/components';
+    import { UiCheckbox } from '@dreipol/vue-ui';
     export default {
         components: {
             UiCheckbox,
@@ -22,7 +22,7 @@ Let's assume for example that you want to use the checkbox component in your vue
 In case you want to use these components globally, without always importing them in any of your forms, you will need to register them via Vue:
 
 ```js
-import { UiInput } from '@dreipol/vue-ui/src/components';
+import { UiInput } from '@dreipol/vue-ui';
 import Vue from 'vue';
 
 // This component will now be globally available
@@ -204,7 +204,7 @@ The optional `ui-optgroup` component may be used to render native option groups.
 </template>
 
 <script>
-    import { UiSelect, UiOption, UiOptgroup } from '@dreipol/vue-ui/src/components';
+    import { UiSelect, UiOption, UiOptgroup } from '@dreipol/vue-ui';
     export default {
         components: {
             UiSelect,
@@ -249,12 +249,12 @@ The select checkmark icon can be defined not only via `actions` slot but also vi
 </ui-select>
 ```
 
-You can also override the default select icon once and for all via `@dreipol/vue-ui/src/settings`:
+You can also override the default select icon once and for all via `@dreipol/vue-ui`:
 
 ```js
-import settings, { SELECT_ICON } from '@dreipol/vue-ui/src/settings';
+import { settings } from '@dreipol/vue-ui';
 
-settings.set(SELECT_ICON, {
+settings.set(settings.SELECT_ICON, {
     symbol: 'arrow-down',
     size: 'medium'
 });
@@ -280,7 +280,7 @@ In a nutshell: The input fields are responsible for user events and rendering wh
 </template>
 
 <script>
-    import { UiInput, UiModelProvider } from '@dreipol/vue-ui/src/components';
+    import { UiInput, UiModelProvider } from '@dreipol/vue-ui';
     export default {
         components: {
             UiInput,

src/components/intersection-observer/README.md

@@ -3,7 +3,7 @@ A simple implementation of the [`intersectionObserverMixin`](/src/mixins/interse
 
 ## Usage
 ```js
-    import { UiIntersectionObserver } from '@dreipol/vue-ui/src/components';
+    import { UiIntersectionObserver } from '@dreipol/vue-ui';
 ```
 
 ## Props

src/components/overlay/README.md

@@ -9,7 +9,7 @@ You can also choose to add multiple instances of this component in different loc
 ```vue
 <script>
     import { mapState } from 'vuex';
-    import { UiOverlay } from '@dreipol/vue-ui/src/components';
+    import { UiOverlay } from '@dreipol/vue-ui';
 
     export default {
         components: {
@@ -32,13 +32,13 @@ You can also choose to add multiple instances of this component in different loc
 
 ```js
 import Vuex from 'vuex';
-import overlay from '@dreipol/vue-ui/src/vuex/modules/overlay';
+import { uiOverlayVuexModule } from '@dreipol/vue-ui';
 
 const store = new Vuex.Store({
     modules: {
         'vue-ui': {
             namespaced: true,
-            modules: { overlay },
+            modules: { overlay: uiOverlayVuexModule },
         },
     },
 });

src/index.js

@@ -1,15 +1,46 @@
-import * as components from './components';
-import * as mixins from './mixins';
-import * as filters from './filters';
-import * as util from './util';
-import * as vuex from './vuex';
-import * as settings from './settings';
-
-export default {
-    components,
-    mixins,
-    filters,
-    util,
-    vuex,
-    settings,
-};
+// global exports
+export * as components from './components';
+export * as mixins from './mixins';
+export * as filters from './filters';
+export * as util from './util';
+export * as vuex from './vuex';
+export * as settings from './settings';
+
+// vuex modules
+export { default as uiOverlayVuexModule } from './vuex/modules/overlay';
+export { default as uiScrollVuexModule } from './vuex/modules/scroll';
+
+// utils
+export { isEdge } from './util/detect/edge-detect';
+export { isIE, version as ieVersion } from './util/detect/ie-detect';
+export { isIos } from './util/detect/ios-detect';
+
+// mixins
+export { default as scrollMixin } from './mixins/scroll';
+export { default as uuidMixin } from './mixins/uuid';
+export { default as scrollLockHelperMixin } from './mixins/scroll-lock-helper';
+export { default as isMountedMixin } from './mixins/is-mounted';
+export { default as intersectionObserverMixin } from './mixins/intersection-observer';
+export { default as bemMixin } from './mixins/bem';
+
+// filters
+export { default as srcsetFilter } from './filters/srcset';
+export { default as backgrundImageFilter } from './filters/background-image';
+
+// components
+export { default as UiOverlay } from './components/overlay/overlay.vue';
+export { default as UiScrollReveal } from './components/scroll-reveal/scroll-reveal.vue';
+export { default as UiIntersectionObserver } from './components/intersection-observer/intersection-observer.vue';
+export { default as UiIcon } from './components/icon/icon.vue';
+export { default as UiAccordion } from './components/accordion/accordion.vue';
+// form components
+export { default as UiInput } from './components/form/input/input.vue';
+export { default as UiTextarea } from './components/form/textarea/textarea.vue';
+export { default as UiCheckbox } from './components/form/checkbox/checkbox.vue';
+export { default as UiRadio } from './components/form/radio/radio.vue';
+export { default as UiHidden } from './components/form/hidden/hidden.vue';
+export { default as UiOptgroup } from './components/form/optgroup/optgroup.vue';
+export { default as UiOption } from './components/form/option/option.vue';
+export { default as UiSelect } from './components/form/select/select.vue';
+export { default as UiModelProvider } from './components/form/model-provider/model-provider.vue';
+

src/mixins/intersection-observer/README.md

@@ -1,6 +1,6 @@
 # intersectionObserverMixin
 [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)
-Load via `import { interactionObserverMixin } from '@dreipol/vue-ui/src/components';` and add it to the `mixins`.
+Load via `import { interactionObserverMixin } from '@dreipol/vue-ui';` and add it to the `mixins`.
 
 Now you can start observing an element:
 

src/vuex/README.md

@@ -5,7 +5,7 @@ These vuex modules provide functionality for some components and are necessary f
 These modules can be added to your project store. They are scoped within the `vue-ui` namespace.
 
 ```js
-import { uiScrollVuexModule } from '@dreipol/vue-ui/src/vuex';
+import { uiScrollVuexModule } from '@dreipol/vue-ui';
 
 const store = new Vuex.Store({
     modules: {

webpack.config.js

@@ -8,6 +8,9 @@ module.exports = {
     output: {
         path: root,
         filename: 'index.js',
+        library: 'VueUI',
+        // the "module" option will be soon available also for webpack https://github.com/webpack/webpack/issues/2933
+        libraryTarget: 'umd',
     },
     externals: {
         vue: 'Vue',