@signal24/vue-foundation 3.8.0 → 4.0.0

package/package.json

@@ -1,39 +1,67 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "3.8.0",
+    "version": "4.0.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
-    "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"
+            "import": "./dist/vue-foundation.es.js"
         },
         "./dist/vue-foundation.css": {
-          "import": "./dist/vue-foundation.css",
-          "require": "./dist/vue-foundation.css"
+            "import": "./dist/vue-foundation.css",
+            "require": "./dist/vue-foundation.css"
+        },
+        "./vite-plugins": {
+            "import": "./dist/src/vite-plugins/index.js",
+            "types": "./dist/src/vite-plugins/index.d.ts"
         }
     },
+    "typings": "./dist/src/index.d.ts",
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview"
+        "build": "rm -rf dist && vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.app.json && tsc -p tsconfig.vite-plugins.json && find dist -name '*.tsbuildinfo' -delete",
+        "preview": "vite preview",
+        "test:types": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+        "test:unit": "vitest",
+        "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+        "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+        "test:e2e:dev:remote": "DISPLAY=:0 yarn test:e2e:dev",
+        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts --fix --ignore-path .gitignore",
+        "format": "prettier --write ."
     },
     "license": "MIT",
     "dependencies": {
-        "axios": "^0.27.2",
-        "jquery": "^3.6.4",
+        "date-fns": "^2.29.3",
         "lodash": "^4.17.21",
-        "moment": "^2.29.4",
-        "vue-stash-nested": "fergusean/vue-stash-nested#vue-foundation-3",
+        "type-fest": "^3.8.0",
         "vue": "^3.2.47"
     },
     "devDependencies": {
+        "@nabla/vite-plugin-eslint": "^1.5.0",
+        "@rushstack/eslint-patch": "^1.2.0",
+        "@types/jsdom": "^21.1.1",
+        "@types/lodash": "^4.14.192",
+        "@types/node": "^18.15.11",
         "@vitejs/plugin-vue": "^4.1.0",
-        "autoprefixer": "^10.4.14",
-        "sass": "^1.59.3",
-        "vite": "^4.2.0",
-        "vue": "^3.2.47"
+        "@vue/eslint-config-prettier": "^7.1.0",
+        "@vue/eslint-config-typescript": "^11.0.2",
+        "@vue/test-utils": "^2.3.2",
+        "@vue/tsconfig": "^0.1.3",
+        "cypress": "^12.9.0",
+        "eslint": "^8.37.0",
+        "eslint-plugin-cypress": "^2.13.2",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
+        "eslint-plugin-unused-imports": "^2.0.0",
+        "eslint-plugin-vue": "^9.10.0",
+        "jsdom": "^21.1.1",
+        "openapi-typescript-codegen": "^0.23.0",
+        "prettier": "^2.8.7",
+        "sass": "^1.60.0",
+        "start-server-and-test": "^2.0.0",
+        "typescript": "~4.9.5",
+        "vite": "^4.2.1",
+        "vitest": "^0.29.8",
+        "vue-tsc": "^1.3.12"
     }
 }

package/src/components/ajax-select.vue

@@ -1,28 +1,55 @@
 <template>
-    <select v-if="!options" disabled>
-        <option>{{ loadingText || 'Loading...' }}</option>
+    <select v-if="!renderOptions" disabled>
+        <option>{{ props.loadingText || 'Loading...' }}</option>
     </select>
     <select v-else v-model="selectedItem">
-        <option v-if="nullText" :value="null">{{ nullText }}</option>
-        <option v-for="option in options" :key="option.id" :value="option">
-            {{ textKey ? option[textKey] : option }}
+        <option v-if="props.nullText" :value="null">{{ props.nullText }}</option>
+        <option v-for="(renderOption, index) in renderOptions" :key="index" :value="options?.[index]">
+            {{ renderOption }}
         </option>
     </select>
 </template>
 
-<script>
-export default {
-    props: ['modelValue', 'url', 'params', 'itemsKey', 'preprocessor', 'textKey', 'nullText', 'loadingText'],
+<script lang="ts">
+import { computed, defineComponent, defineEmits, defineProps, ref } from 'vue';
 
-    data() {
-        return {
-            options: null,
-            selectedItem: null
-        };
+// todo: make type safe when Vue alpha is released
+
+type GenericObject = { [key: string]: any };
+
+export default defineComponent({
+    setup() {
+        const props = defineProps<{
+            modelValue: any;
+            loadFn: () => Promise<GenericObject[]>;
+            nullText?: string;
+            loadingText?: string;
+            displayKey?: string;
+            preprocesor?: (option: GenericObject) => string;
+        }>();
+
+        defineEmits(['update:modelValue']);
+
+        const options = ref<GenericObject[] | null>(null);
+        const renderOptions = computed(() => {
+            if (!options.value) {
+                return null;
+            }
+
+            const result = options.value.map(option => {
+                return props.preprocesor ? props.preprocesor(option) : option[props.displayKey ?? ''];
+            });
+
+            return result;
+        });
+
+        const selectedItem = ref<GenericObject | null>(props.modelValue ?? null);
+
+        return { props, options, renderOptions, selectedItem };
     },
 
     watch: {
-        params() {
+        loadFn() {
             this.load();
         },
 
@@ -31,7 +58,7 @@ export default {
         },
 
         modelValue() {
-            this.selectedItem = this.modelValue;
+            this.selectedItem = this.props.modelValue;
         }
     },
 
@@ -41,14 +68,8 @@ export default {
 
     methods: {
         async load() {
-            this.options = null;
-            let params = this.params ? { params: this.params } : undefined;
-            let result = await this.$http.get(this.url, params);
-            let options = this.itemsKey ? result.data[this.itemsKey] : result.data;
-            this.preprocessor && this.preprocessor(options);
-            this.options = options;
-            this.selectedItem = this.modelValue;
+            this.options = await this.props.loadFn();
         }
     }
-};
+});
 </script>

package/src/components/alert-helpers.ts

@@ -0,0 +1,45 @@
+import AlertModal from './alert-modal.vue';
+import { createModalInjection, presentModal, removeModalInjection } from './modal-container';
+
+function resolveAlertParams(titleOrMessage: string | Error, message?: string | Error) {
+    const title = message ? (titleOrMessage as string) : undefined;
+    const resolvedMessage = message ?? titleOrMessage;
+    return { title, message: resolvedMessage };
+}
+
+export async function showAlert(title: string, message: string | Error): Promise<void>;
+export async function showAlert(message: string | Error): Promise<void>;
+export async function showAlert(titleOrMessage: string | Error, message?: string | Error): Promise<void> {
+    await presentModal(AlertModal, resolveAlertParams(titleOrMessage, message));
+}
+
+export async function showConfirm(title: string, message: string): Promise<boolean>;
+export async function showConfirm(message: string): Promise<boolean>;
+export async function showConfirm(titleOrMessage: string, message?: string): Promise<boolean> {
+    const result = await presentModal(AlertModal, {
+        ...resolveAlertParams(titleOrMessage, message),
+        shouldConfirm: true
+    });
+    return result === true;
+}
+
+export async function showConfirmDestroy(title: string, message: string): Promise<boolean>;
+export async function showConfirmDestroy(message: string): Promise<boolean>;
+export async function showConfirmDestroy(titleOrMessage: string, message?: string): Promise<boolean> {
+    const result = await presentModal(AlertModal, {
+        ...resolveAlertParams(titleOrMessage, message),
+        shouldConfirm: true,
+        classes: ['destructive']
+    });
+    return result === true;
+}
+
+export function showWait(title: string, message: string): () => void;
+export function showWait(message: string): () => void;
+export function showWait(titleOrMessage: string, message?: string): () => void {
+    const injection = createModalInjection(AlertModal, {
+        ...resolveAlertParams(titleOrMessage, message),
+        callback: () => {}
+    });
+    return () => removeModalInjection(injection);
+}

package/src/components/alert-modal.vue

@@ -0,0 +1,68 @@
+<template>
+    <Modal class="vf-alert" :class="classes">
+        <template v-if="!isBare" v-slot:header>
+            <h1>{{ title }}</h1>
+        </template>
+
+        <div v-if="isHtml" :innerHtml="message" class="user-message"></div>
+        <div v-else :innerText="textMessage"></div>
+
+        <template v-if="!isBare" v-slot:footer>
+            <template v-if="shouldConfirm">
+                <button class="primary" @click="() => callback(true)" v-autofocus>Confirm</button>
+                <button class="default" @click="() => callback(false)">Cancel</button>
+            </template>
+            <button v-else class="default" @click="() => callback(true)" v-autofocus>OK</button>
+        </template>
+    </Modal>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps } from 'vue';
+
+import { formatError } from '@/helpers/error';
+
+import Modal from './modal.vue';
+
+const props = defineProps<{
+    isBare?: boolean;
+    isHtml?: boolean;
+    classes?: string[];
+    title?: string;
+    message: string | Error;
+    shouldConfirm?: boolean;
+    callback: (ok: boolean) => void;
+}>();
+
+const textMessage = computed(() => {
+    if (props.message instanceof Error) {
+        return formatError(props.message);
+    }
+
+    return props.message;
+});
+</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/ez-smart-select.vue

@@ -0,0 +1,51 @@
+<template>
+    <VfSmartSelect v-model="selectedItem" :options="options" :formatter="ezFormatter" :null-title="nullTitle" />
+</template>
+
+<script lang="ts" setup>
+import { isEqual } from 'lodash';
+import { computed, defineEmits, defineProps, ref, watch } from 'vue';
+
+import VfSmartSelect from './smart-select.vue';
+
+type GenericObject = { [key: string]: any };
+
+const props = defineProps<{
+    modelValue: string | null | undefined;
+    nullTitle?: string;
+    placeholder?: string;
+    options: Record<string, string> | string[];
+    formatter?: (value: any) => string;
+}>();
+
+const options = computed(() => {
+    return Array.isArray(props.options)
+        ? props.options.map(o => ({ value: o, label: o }))
+        : Object.entries(props.options).map(([value, label]) => ({
+              value,
+              label
+          }));
+});
+
+const ezFormatter = computed(() => {
+    if (props.formatter) {
+        return (o: GenericObject) => props.formatter?.(o.label);
+    }
+    return (o: GenericObject) => o.label;
+});
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string | null): void;
+}>();
+
+const selectedItem = ref<GenericObject | null>(options.value.find(o => o.value === props.modelValue) ?? null);
+watch(
+    () => props.modelValue,
+    value => {
+        selectedItem.value = options.value.find(o => o.value === value) ?? null;
+    }
+);
+watch(selectedItem, value => {
+    emit('update:modelValue', value ? options.value.find(o => isEqual(o, value))?.value ?? null : null);
+});
+</script>

package/src/components/index.ts

@@ -0,0 +1,10 @@
+import VfAjaxSelect from './ajax-select.vue';
+import VfAlertModal from './alert-modal.vue';
+import VfEzSmartSelect from './ez-smart-select.vue';
+import VfModal from './modal.vue';
+import VfSmartSelect from './smart-select.vue';
+
+export * from './alert-helpers';
+export * from './modal-container';
+
+export { VfAjaxSelect, VfAlertModal, VfEzSmartSelect, VfModal, VfSmartSelect };

package/src/components/modal-container.ts

@@ -0,0 +1,131 @@
+import type { Writable } from 'type-fest';
+import {
+    type AllowedComponentProps,
+    type ComponentInternalInstance,
+    type ComponentPublicInstance,
+    type ComputedOptions,
+    defineComponent,
+    h,
+    markRaw,
+    type MethodOptions,
+    type Raw,
+    reactive,
+    renderList,
+    type VNode,
+    type VNodeProps
+} from 'vue';
+
+interface ModalInjection<C extends Vue__ComponentPublicInstanceConstructor> {
+    id: string;
+    component: Raw<C>;
+    props: ComponentProps<C>;
+    vnode: VNode;
+}
+
+let modalCount = 0;
+const ModalInjections: ModalInjection<any>[] = reactive([]);
+
+export const ModalContainer = defineComponent({
+    setup() {
+        return () =>
+            h('div', { id: 'modal-container' }, [
+                renderList(ModalInjections, injection => {
+                    return injection.vnode;
+                })
+            ]);
+    }
+});
+
+// copied in from Vue since it's not exported
+export type Vue__ComponentPublicInstanceConstructor<
+    T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
+    Props = any,
+    RawBindings = any,
+    D = any,
+    C extends ComputedOptions = ComputedOptions,
+    M extends MethodOptions = MethodOptions
+> = {
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+    new (...args: any[]): T;
+};
+
+export type ComponentConfig<T extends Vue__ComponentPublicInstanceConstructor> = T extends Vue__ComponentPublicInstanceConstructor<infer P>
+    ? P
+    : never;
+export type ComponentProps<T extends Vue__ComponentPublicInstanceConstructor> = Writable<
+    Omit<ComponentConfig<T>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
+>;
+
+export type AnyComponentPublicInstance = { $: ComponentInternalInstance };
+
+interface PropsWithCallback<T> {
+    callback?: (result: T) => void;
+}
+type ComponentReturn<C extends Vue__ComponentPublicInstanceConstructor> = ComponentProps<C> extends PropsWithCallback<infer R> ? R : never;
+
+export function createModalInjection<C extends Vue__ComponentPublicInstanceConstructor>(component: C, props: ComponentProps<C>): ModalInjection<C> {
+    // create or reconfigure the existing modal target
+    // re-injecting every time keeps the modal container at the very end of the DOM
+    const targetEl = document.getElementById('vf-modal-target') ?? document.createElement('div');
+    targetEl.id = 'vf-modal-target';
+    targetEl.removeAttribute('inert');
+    document.body.appendChild(targetEl);
+
+    const rawComponent = markRaw(component);
+
+    // todo: dunno what's going on with types here
+    const injection: ModalInjection<C> = {
+        id: String(++modalCount),
+        component: rawComponent as any,
+        props,
+        vnode: h(rawComponent, props)
+    };
+    ModalInjections.push(injection);
+
+    return injection;
+}
+
+export function removeModalInjection(injection: ModalInjection<any>) {
+    const index = ModalInjections.indexOf(injection);
+    if (index >= 0) {
+        ModalInjections.splice(index, 1);
+    }
+}
+
+export function removeModalInjectionByInstance(instance: AnyComponentPublicInstance) {
+    removeModalInjectionByInternalInstance(instance.$);
+}
+
+export function removeModalInjectionByInternalInstance(instance: ComponentInternalInstance) {
+    let targetInstance: ComponentInternalInstance | null = instance;
+    while (targetInstance && !removeModalInjectionByVnode(targetInstance.vnode)) {
+        targetInstance = targetInstance.parent;
+    }
+}
+
+export function removeModalInjectionByVnode(vnode: VNode) {
+    const injectionIdx = ModalInjections.findIndex(i => i.vnode.component === vnode.component);
+    if (injectionIdx >= 0) {
+        ModalInjections[injectionIdx].props.callback?.(undefined);
+        ModalInjections.splice(injectionIdx, 1);
+        return true;
+    }
+    return false;
+}
+
+export async function presentModal<C extends Vue__ComponentPublicInstanceConstructor, R extends ComponentReturn<C>>(
+    component: C,
+    props: Omit<ComponentProps<C>, 'callback'>
+): Promise<R | undefined> {
+    return new Promise<R>(resolve => {
+        let modalInjection: ModalInjection<C> | null = null;
+        const callback = (result: R) => {
+            removeModalInjection(modalInjection!);
+            resolve(result);
+        };
+        const resolvedProps = { ...props, callback } as ComponentProps<C>;
+        modalInjection = createModalInjection(component, resolvedProps);
+    });
+}