@signal24/vue-foundation 3.8.0 → 4.0.0

package/tsconfig.vite-plugins.json

@@ -0,0 +1,10 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.node.json",
+    "include": ["src/vite-plugins/*"],
+    "compilerOptions": {
+        "composite": true,
+        "types": ["node"],
+        "noImplicitAny": true,
+        "outDir": "dist"
+    }
+}

package/tsconfig.vitest.json

@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.app.json",
+    "exclude": [],
+    "compilerOptions": {
+        "composite": true,
+        "lib": [],
+        "types": ["node", "jsdom"],
+    }
+}

package/vite.config.js

@@ -1,42 +1,44 @@
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url';
+
+import eslintPlugin from '@nabla/vite-plugin-eslint';
+import vue from '@vitejs/plugin-vue';
 import path from 'path';
+import { defineConfig } from 'vite';
 
 // 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',
+    plugins: [vue(), eslintPlugin()],
+    build: {
+        cssCodeSplit: true,
+        lib: {
+            // Could also be a dictionary or array of multiple entry points
+            entry: 'src/index.ts',
+            name: 'VueFoundatation',
+            formats: ['es'],
+            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.ts')
+            },
+            external: ['date-fns', 'lodash', 'vue', '@vue/shared'],
+            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))
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
     }
-  }
-})
+});

package/vitest.config.js

@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url';
+
+import { mergeConfig } from 'vite';
+import { configDefaults, defineConfig } from 'vitest/config';
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+    viteConfig,
+    defineConfig({
+        test: {
+            environment: 'jsdom',
+            exclude: [...configDefaults.exclude, 'e2e/*'],
+            root: fileURLToPath(new URL('./', import.meta.url))
+        }
+    })
+);

package/.eslintrc.js

@@ -1,16 +0,0 @@
-module.exports = {
-    root: true,
-    env: {
-        node: true
-    },
-    extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
-    rules: {
-        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-        'simple-import-sort/imports': 'error',
-        'simple-import-sort/exports': 'error',
-        'prettier/prettier': 'warn',
-        'no-unused-vars': 'warn'
-    },
-    plugins: ['simple-import-sort']
-};

package/CHANGES.md

@@ -1,13 +0,0 @@
-# Release notes
-
-All notable changes to this project will be documented in this file.
-This project adheres to [Semantic Versioning](http://semver.org/).
-
-## 1.0.1
-
--   Update dependencies
--   Fix $confirmDestroy
-
-## 1.0.0
-
--   Initial public release

package/postcss.config.cjs

@@ -1,5 +0,0 @@
-module.exports = {
-    plugins: {
-        autoprefixer: {}
-    }
-};

package/src/app.js

@@ -1,25 +0,0 @@
-import { createApp, h } from 'vue';
-
-let rootComponent;
-function setRootComponent(inComponent) {
-    rootComponent = inComponent;
-}
-
-const app = createApp({
-    data() {
-        return {
-            store: {
-                session: null,
-                globalError: window.gErr || null,
-                rootInjections: []
-            }
-        };
-    },
-
-    render() {
-        return h(rootComponent);
-    }
-});
-
-export { setRootComponent };
-export default app;

package/src/components/alert.vue

@@ -1,130 +0,0 @@
-<template>
-    <Modal class="vf-alert" :class="classes">
-        <template v-if="!this.isBare" v-slot:header>
-            <h1>{{ title }}</h1>
-        </template>
-
-        <div v-if="isHtml" v-html="message" class="user-message"></div>
-        <div v-else v-user-text="message"></div>
-
-        <template v-if="!this.isBare" v-slot:footer>
-            <template v-if="shouldConfirm">
-                <button class="primary" @click="ok" v-autofocus>Confirm</button>
-                <button class="default" @click="$dismiss()">Cancel</button>
-            </template>
-            <button v-else class="default" @click="ok" v-autofocus>OK</button>
-        </template>
-    </Modal>
-</template>
-
-<script>
-import app from '../app';
-import Modal from './modal.vue';
-
-const classDef = {
-    components: {
-        Modal
-    },
-
-    data() {
-        return {
-            isBare: false,
-            isHtml: false,
-            classes: [],
-            title: null,
-            message: null,
-            shouldConfirm: false
-        };
-    },
-
-    created() {
-        if (typeof this.message == 'object') {
-            if (this.message.html) {
-                this.isHtml = true;
-                this.message = this.message.html;
-            } else if (this.message instanceof Error) {
-                let err = this.message;
-                err.handle();
-
-                this.message = err.userMessage;
-            }
-        }
-    },
-
-    methods: {
-        ok() {
-            this.$dismiss(true);
-        }
-    }
-};
-
-export default classDef;
-
-async function launchModal(context, classDef, ...args) {
-    classDef = { ...classDef, __modalId: Math.random().toString(36).substring(2, 10) };
-    return await context.$modal.apply(context, [classDef, ...args]);
-}
-
-app.config.globalProperties.$alert = async function (title, message) {
-    return await launchModal(this, classDef, { title, message });
-};
-
-app.config.globalProperties.$confirm = async function (title, message, options) {
-    options = options || {};
-    const result = await launchModal(this, classDef, { title, message, shouldConfirm: true, ...options });
-    return !!result;
-};
-
-app.config.globalProperties.$confirmDestroy = function (title, message, options) {
-    options = options || {};
-    options.classes = options.classes || [];
-    options.classes.push('destructive');
-    return this.$confirm(title, message, options);
-};
-
-app.config.globalProperties.$wait = function (title, message) {
-    if (title && !message) {
-        message = title;
-        title = undefined;
-    } else if (!title && !message) {
-        message = 'Please wait...';
-    }
-
-    let resolved = null;
-    let promise = new Promise((resolve, reject) => {
-        launchModal(this, classDef, { title, message, isBare: true, classes: ['wait'] }, resolve);
-    }).then(inResolved => (resolved = inResolved));
-
-    this.$endWait = async () => {
-        delete this.$endWait;
-        if (resolved) await resolved.$dismiss();
-        else await promise.then(() => resolved.$dismiss());
-    };
-
-    return this.$endWait;
-};
-</script>
-
-<style lang="scss">
-.vf-modal-wrap.vf-alert {
-    .vf-modal {
-        max-width: 800px;
-
-        > .vf-modal-content {
-            padding: 12px;
-        }
-    }
-
-    &.wait {
-        .vf-modal-content {
-            text-align: center;
-        }
-    }
-
-    &.destructive {
-        button.primary {
-            color: red;
-        }
-    }
-}
-</style>

package/src/components/index.js

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

package/src/config.js

@@ -1,11 +0,0 @@
-let options = {
-    unhandledErrorSupportText: 'please contact support'
-};
-
-function applyConfiguration(inOptions) {
-    Object.assign(options, inOptions);
-}
-
-Object.defineProperty(options, 'set', { value: applyConfiguration, enumerable: false });
-
-export default options;

package/src/directives/autofocus.js

@@ -1,17 +0,0 @@
-import $ from 'jquery';
-
-import app from '../app';
-
-app.directive('autofocus', {
-    mounted: fn,
-    updated: fn
-});
-
-function fn(el, binding) {
-    if (binding.value === undefined && el.hasAutoFocused) return;
-    if (binding.value !== undefined && !binding.value) return;
-    if (binding.oldValue !== undefined && binding.value == binding.oldValue) return;
-    el.hasAutoFocused = true;
-    el = ['BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName) > -1 ? el : $(el).find('input:first')[0];
-    setTimeout(() => el.focus(), 10);
-}

package/src/directives/confirm-button.js

@@ -1,40 +0,0 @@
-import app from '../app';
-
-app.directive('confirm-button', {
-    mounted(el) {
-        el.addEventListener('click', e => {
-            let now = Date.now();
-
-            if (el._isConfirming) {
-                if (now - el._confirmInitTime < 300) {
-                    return;
-                }
-
-                el._resetHandler();
-                el.dispatchEvent(new Event('confirm'));
-                return;
-            }
-
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
-            el._resetHandler = () => {
-                el.innerHTML = el._preConfirmHTML;
-                el.blur();
-
-                el.removeEventListener('mouseout', el._resetHandler);
-
-                delete el._isConfirming;
-                delete el._preConfirmHTML;
-                delete el._resetHandler;
-            };
-
-            el._isConfirming = true;
-            el._confirmInitTime = now;
-            el._preConfirmHTML = el.innerHTML;
-            el.innerHTML = 'Confirm';
-
-            el.addEventListener('mouseout', el._resetHandler);
-        });
-    }
-});

package/src/directives/date-input.js

@@ -1,18 +0,0 @@
-import moment from 'moment';
-
-import app from '../app';
-
-app.directive('date-input', {
-    beforeMount: fn
-});
-
-function fn(el) {
-    el.addEventListener('blur', () => {
-        let val = el.value;
-        if (/^[0-9]{1,2}\/[0-9]{1,2}$/.test(val)) val += '/' + moment().format('YY');
-        let ts = Date.parse(val);
-        if (isNaN(ts)) el.value = '';
-        else el.value = moment(ts).format('MM/DD/YYYY');
-        el.dispatchEvent(new Event('input'));
-    });
-}

package/src/directives/datetime.js

@@ -1,46 +0,0 @@
-import moment from 'moment';
-
-import app from '../app';
-
-app.directive('datetime', {
-    beforeMount: applyDateTime,
-    updated: applyDateTime
-});
-
-function applyDateTime(el, binding) {
-    if (binding.value == binding.oldValue && el.innerHTML.length) return;
-    el.innerText = getDateTimeValue(el, binding);
-}
-
-function getDateTimeValue(el, binding) {
-    if (!binding.value) {
-        return el.attributes.placeholder ? el.attributes.placeholder.value : '';
-    }
-
-    let prefix = '';
-    let thatMoment = el.attributes.local ? moment(binding.value) : moment.utc(binding.value);
-
-    if (!el.attributes['display-utc']) thatMoment.local();
-
-    let format = el.attributes.format ? el.attributes.format.value : null;
-
-    if (!format && el.attributes['relative-date']) {
-        let thisMoment = moment();
-        if (
-            thisMoment.year() == thatMoment.year() &&
-            thisMoment.month() == thatMoment.month() &&
-            thisMoment.date() == thatMoment.date()
-        ) {
-            prefix = 'at';
-            format = 'HH:mm';
-        }
-    }
-
-    if (!format) format = 'MM/DD/YY HH:mm';
-
-    let result = thatMoment.format(format);
-
-    if (prefix) result = prefix + ' ' + result;
-
-    return result;
-}

package/src/directives/disabled.js

@@ -1,28 +0,0 @@
-import $ from 'jquery';
-
-import app from '../app';
-
-app.directive('disabled', {
-    beforeMount: fn,
-    updated: fn,
-    unmounted
-});
-
-function fn(el, binding) {
-    if (el.tagName == 'LABEL') {
-        $(el).toggleClass('disabled', !!binding.value);
-        el = $(el).find('input')[0];
-    }
-
-    if (binding.value) $(el).attr('disabled', 'disabled');
-    else $(el).removeAttr('disabled');
-}
-
-function unmounted(el) {
-    if (el.tagName == 'LABEL') {
-        $(el).removeClass('disabled');
-        el = $(el).find('input')[0];
-    }
-
-    $(el).removeAttr('disabled');
-}

package/src/directives/duration.js

@@ -1,72 +0,0 @@
-import moment from 'moment';
-
-import app from '../app';
-
-let durationEls = [];
-
-function updateDurations() {
-    durationEls.forEach(updateDuration);
-}
-
-setInterval(updateDurations, 1000);
-
-app.directive('duration', {
-    beforeMount: applyDuration,
-    updated: applyDuration,
-    unmounted: removeDuration
-});
-
-function applyDuration(el, binding) {
-    if (binding.value == binding.oldValue) return;
-    if (!binding.value) return removeDuration(el);
-
-    el.$includeSeconds = typeof el.attributes['no-seconds'] === 'undefined';
-
-    let baseTimeAttr = el.attributes['base-time'];
-    if (baseTimeAttr) {
-        el.$startTs = moment(baseTimeAttr.value).valueOf() - binding.value * 1000;
-    } else {
-        el.$startTs = moment(binding.value).valueOf();
-    }
-
-    if (!el.$isConfigured) {
-        el.$isConfigured = true;
-        durationEls.push(el);
-    }
-
-    updateDuration(el);
-}
-
-function updateDuration(el) {
-    let ts = el.$startTs;
-    let diff = Math.round((Date.now() - ts) / 1000);
-    el.innerText = secondsToString(diff, el.$includeSeconds === false);
-}
-
-function removeDuration(el) {
-    if (el.$isConfigured) {
-        durationEls.remove(el);
-        el.$isConfigured = false;
-    }
-
-    el.innerText = '-';
-}
-
-function secondsToString(seconds, shouldSkipSeconds) {
-    let result = [];
-    let days = Math.floor(seconds / 86400);
-    days && result.push(days + 'd');
-    seconds -= days * 86400;
-    let hours = Math.floor(seconds / 3600);
-    (days || hours) && result.push(hours + 'h');
-    seconds -= hours * 3600;
-    let minutes = Math.floor(seconds / 60);
-    (days || hours || minutes) && result.push(minutes + 'm');
-    if (!shouldSkipSeconds) {
-        seconds -= minutes * 60;
-        result.push(seconds + 's');
-    } else if (!result.length) {
-        result.push('0m');
-    }
-    return result.join(' ');
-}

package/src/directives/index.js

@@ -1,10 +0,0 @@
-import './autofocus';
-import './confirm-button';
-import './datetime';
-import './date-input';
-import './disabled';
-import './duration';
-import './infinite-scroll';
-import './readonly';
-import './tooltip';
-import './user-text';

package/src/directives/infinite-scroll.js

@@ -1,17 +0,0 @@
-import app from '../app';
-import InfiniteScrollHook from '../plugins/infinite-scroll/hook';
-
-app.directive('infinite-scroll', {
-    beforeMount(el, binding) {
-        if (binding.value) {
-            el._infiniteScrollHook = new InfiniteScrollHook(el, binding.value);
-            el._infiniteScrollHook.install();
-        }
-    },
-
-    unmounted(el) {
-        if (el._infiniteScrollHook) {
-            el._infiniteScrollHook.uninstall();
-        }
-    }
-});

package/src/directives/readonly.js

@@ -1,17 +0,0 @@
-import $ from 'jquery';
-
-import app from '../app';
-
-app.directive('readonly', {
-    beforeMount: fn,
-    updated: fn
-});
-
-function fn(el, binding) {
-    if (el.tagName == 'LABEL') {
-        el = $(el).find('input')[0];
-    }
-
-    if (binding.value) $(el).attr('readonly', 'readonly');
-    else $(el).removeAttr('readonly');
-}