@signal24/vue-foundation 3.7.4 → 3.8.0

package/package.json

@@ -1,28 +1,39 @@
 {
     "name": "@signal24/vue-foundation",
-    "version": "3.7.4",
+    "type": "module",
+    "version": "3.8.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
-    "main": "src/index.js",
+    "main": "dist/vue-foundation.umd.js",
+    "module": "./dist/vue-foundation.es.js",
+    "exports": {
+        ".": {
+          "import": "./dist/vue-foundation.es.js",
+          "require": "./dist/vue-foundation.umd.js"
+        },
+        "./dist/vue-foundation.css": {
+          "import": "./dist/vue-foundation.css",
+          "require": "./dist/vue-foundation.css"
+        }
+    },
     "scripts": {
-        "format": "prettier --write . && eslint src --fix"
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
     },
     "license": "MIT",
     "dependencies": {
-        "axios": "^0.26.0",
-        "jquery": "^3.6.0",
+        "axios": "^0.27.2",
+        "jquery": "^3.6.4",
         "lodash": "^4.17.21",
-        "moment": "^2.29.1",
-        "vue-stash-nested": "fergusean/vue-stash-nested#vue-foundation-3"
+        "moment": "^2.29.4",
+        "vue-stash-nested": "fergusean/vue-stash-nested#vue-foundation-3",
+        "vue": "^3.2.47"
     },
     "devDependencies": {
-        "@vue/eslint-config-prettier": "^7.0.0",
-        "eslint": "^8.10.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-simple-import-sort": "^7.0.0",
-        "eslint-plugin-vue": "^8.5.0",
-        "prettier": "^2.5.1",
-        "sass": "^1.49.9",
-        "sass-loader": "^12",
-        "vue": "^3.2.31"
+        "@vitejs/plugin-vue": "^4.1.0",
+        "autoprefixer": "^10.4.14",
+        "sass": "^1.59.3",
+        "vite": "^4.2.0",
+        "vue": "^3.2.47"
     }
 }

package/src/components/alert.vue

@@ -19,7 +19,7 @@
 
 <script>
 import app from '../app';
-import Modal from './modal';
+import Modal from './modal.vue';
 
 const classDef = {
     components: {

package/src/components/index.js

@@ -1,12 +1,12 @@
 import app from '../app';
-import AjaxSelect from './ajax-select';
+import AjaxSelect from './ajax-select.vue';
 app.component('AjaxSelect', AjaxSelect);
 
-import Alert from './alert';
+import Alert from './alert.vue';
 app.component('Alert', Alert);
 
-import Modal from './modal';
+import Modal from './modal.vue';
 app.component('Modal', Modal);
 
-import SmartSelect from './smart-select';
+import SmartSelect from './smart-select.vue';
 app.component('SmartSelect', SmartSelect);

package/src/components/modal.vue

@@ -1,6 +1,6 @@
 <template>
     <Teleport to="#vf-modal-target">
-        <div class="vf-overlay vf-modal-wrap" :class="class">
+        <div :id="id" class="vf-overlay vf-modal-wrap" :class="class">
             <form
                 action="."
                 class="vf-modal"
@@ -24,7 +24,7 @@
 
 <script>
 export default {
-    props: ['closeOnMaskClick', 'scrolls', 'closeX', 'class'],
+    props: ['id', 'closeOnMaskClick', 'scrolls', 'closeX', 'class'],
     emits: ['formSubmit'],
 
     beforeCreate() {

package/vite.config.js

@@ -0,0 +1,42 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    cssCodeSplit: true,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: "src/index.js",
+      name: 'vueFoundatation',
+      formats: ["es", "cjs", "umd"],
+      fileName: format => `vue-foundation.${format}.js`
+    },
+    rollupOptions: {
+      // make sure to externalize deps that should not be bundled
+      // into your library
+      input: {
+        main: path.resolve(__dirname, "src/index.js")
+      },
+      external: ['axios', 'jquery', 'lodash', 'moment', 'vue-stash-nested', 'vue'],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'index.css') return 'vue-foundation.css';
+          return assetInfo.name;
+        },
+        exports: "named",
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})