@signal24/vue-foundation 4.3.6 → 4.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.3.6",
+    "version": "4.4.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {

package/src/components/alert-helpers.ts

@@ -1,5 +1,5 @@
 import AlertModal from './alert-modal.vue';
-import { createModalInjection, presentModal, removeModalInjection } from './modal-container';
+import { createOverlayInjection, presentOverlay, removeOverlayInjection } from './overlay-container';
 
 function resolveAlertParams(titleOrMessage: string | Error, message?: string | Error) {
     const title = message ? (titleOrMessage as string) : undefined;
@@ -10,13 +10,13 @@ function resolveAlertParams(titleOrMessage: string | Error, message?: string | E
 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));
+    await presentOverlay(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, {
+    const result = await presentOverlay(AlertModal, {
         ...resolveAlertParams(titleOrMessage, message),
         shouldConfirm: true
     });
@@ -26,7 +26,7 @@ export async function showConfirm(titleOrMessage: string, message?: string): Pro
 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, {
+    const result = await presentOverlay(AlertModal, {
         ...resolveAlertParams(titleOrMessage, message),
         shouldConfirm: true,
         classes: ['destructive']
@@ -37,11 +37,11 @@ export async function showConfirmDestroy(titleOrMessage: string, message?: strin
 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, {
+    const injection = createOverlayInjection(AlertModal, {
         ...resolveAlertParams(titleOrMessage, message),
         isBare: true,
         classes: ['wait'],
         callback: () => {}
     });
-    return () => removeModalInjection(injection);
+    return () => removeOverlayInjection(injection);
 }

package/src/components/index.ts

@@ -5,6 +5,6 @@ import VfModal from './modal.vue';
 import VfSmartSelect from './smart-select.vue';
 
 export * from './alert-helpers';
-export * from './modal-container';
+export * from './overlay-container';
 
 export { VfAjaxSelect, VfAlertModal, VfEzSmartSelect, VfModal, VfSmartSelect };

package/src/components/modal.vue

@@ -1,27 +1,25 @@
 <template>
-    <Teleport to="#vf-modal-target">
-        <div :id="id" class="vf-overlay vf-modal-wrap" :class="props.class" ref="overlay">
-            <form action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')" ref="form">
-                <div v-if="$slots.header" class="vf-modal-header">
-                    <slot name="header" />
-                    <i v-if="props.closeX" class="close" @click="closeParent"></i>
-                </div>
-                <div class="vf-modal-content">
-                    <slot />
-                </div>
-                <div v-if="$slots.footer" class="vf-modal-footer">
-                    <slot name="footer" />
-                </div>
-            </form>
-        </div>
-    </Teleport>
+    <div :id="id" class="vf-overlay vf-modal-wrap" :class="props.class" ref="overlay">
+        <form action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')" ref="form">
+            <div v-if="$slots.header" class="vf-modal-header">
+                <slot name="header" />
+                <i v-if="props.closeX" class="close" @click="closeParent"></i>
+            </div>
+            <div class="vf-modal-content">
+                <slot />
+            </div>
+            <div v-if="$slots.footer" class="vf-modal-footer">
+                <slot name="footer" />
+            </div>
+        </form>
+    </div>
 </template>
 
 <script lang="ts" setup>
 import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
 
 import { maskForm, unmaskForm } from '../helpers/mask';
-import { removeModalInjectionByInternalInstance } from './modal-container';
+import { dismissOverlayInjectionByInternalInstance } from './overlay-container';
 
 const instance = getCurrentInstance();
 
@@ -72,7 +70,7 @@ function handleEscapeKey(e: KeyboardEvent) {
 }
 
 function closeParent() {
-    removeModalInjectionByInternalInstance(instance!);
+    dismissOverlayInjectionByInternalInstance(instance!);
 }
 
 function mask() {

package/src/components/overlay-anchor.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="vf-overlay-anchor" :class="anchorClasses" :style="anchorStyles" @click.stop="removeOverlay">
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+import { getCurrentInstance, onMounted, ref } from 'vue';
+
+import { dismissOverlayInjectionById } from '.';
+import type { OverlayAnchorOptions, OverlayAnchorOptionsObject } from './overlay-types';
+
+const props = defineProps<{
+    overlayId: string;
+    anchor: OverlayAnchorOptions;
+}>();
+
+const anchorEl = props.anchor instanceof HTMLElement ? props.anchor : props.anchor.el;
+
+const anchorStyles = ref<CSSProperties>({ visibility: 'hidden', top: '0', left: '0' });
+const anchorClasses = ref<string[]>([]);
+const instance = getCurrentInstance();
+
+onMounted(updateAttributes);
+
+function updateAttributes() {
+    const overlayEl = instance!.vnode.el as HTMLElement;
+    const { styles, classes } = computeAnchoredStyle(overlayEl, anchorEl);
+    anchorStyles.value = styles;
+    anchorClasses.value = classes;
+}
+
+function computeAnchoredStyle(
+    overlayEl: HTMLElement,
+    anchorEl: HTMLElement
+): {
+    styles: CSSProperties;
+    classes: string[];
+} {
+    const anchorOpts: Omit<OverlayAnchorOptionsObject, 'el'> = props.anchor instanceof HTMLElement ? {} : props.anchor;
+
+    const anchorRect = anchorEl.getBoundingClientRect();
+    const overlayRect = overlayEl.getBoundingClientRect();
+
+    if (anchorOpts.matchWidth) {
+        overlayRect.width = anchorRect.width;
+    }
+    if (anchorOpts.matchHeight) {
+        overlayRect.height = anchorRect.height;
+    }
+
+    const classes: string[] = anchorOpts.class ? (Array.isArray(anchorOpts.class) ? anchorOpts.class : [anchorOpts.class]) : [];
+    let top: number, left: number;
+
+    if (anchorOpts.y === 'center') {
+        top = anchorRect.top + anchorRect.height / 2 - overlayRect.height / 2;
+        classes.push('anchored-center-y');
+    } else {
+        const canDisplayBelow = anchorRect.bottom + overlayRect.height < window.innerHeight || anchorOpts.y === 'below';
+        const canDisplayBelowResolved = canDisplayBelow && anchorOpts.y !== 'above';
+        top = canDisplayBelowResolved ? anchorRect.bottom : anchorRect.top - overlayRect.height;
+        classes.push(canDisplayBelowResolved ? 'anchored-top' : 'anchored-bottom');
+    }
+
+    if (anchorOpts.x === 'center') {
+        left = anchorRect.left + anchorRect.width / 2 - overlayRect.width / 2;
+        classes.push('anchored-center-x');
+    } else {
+        const canAlignLefts = anchorRect.left + overlayRect.width < window.innerWidth || anchorOpts.x === 'left';
+        const canAlignLeftsResolved = canAlignLefts && anchorOpts.x !== 'right';
+        left = canAlignLeftsResolved ? anchorRect.left : anchorRect.right - overlayRect.width;
+        classes.push(canAlignLeftsResolved ? 'anchored-left' : 'anchored-right');
+    }
+
+    return {
+        styles: {
+            top: `${top}px`,
+            left: `${left}px`,
+            ...(anchorOpts.matchWidth ? { width: `${overlayRect.width}px` } : {}),
+            ...(anchorOpts.matchHeight ? { height: `${overlayRect.height}px` } : {})
+        },
+        classes
+    };
+}
+
+function removeOverlay() {
+    window.removeEventListener('click', removeOverlay);
+    dismissOverlayInjectionById(props.overlayId);
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        window.addEventListener('click', removeOverlay);
+    }, 10);
+});
+</script>
+
+<style lang="scss">
+.vf-overlay-anchor {
+    position: absolute;
+}
+</style>

package/src/components/overlay-container.ts

@@ -0,0 +1,176 @@
+import type { Writable } from 'type-fest';
+import {
+    type AllowedComponentProps,
+    type ComponentInternalInstance,
+    type ComponentPublicInstance,
+    type ComputedOptions,
+    defineComponent,
+    h,
+    markRaw,
+    type MethodOptions,
+    type Raw,
+    reactive,
+    renderList,
+    Teleport,
+    type VNode,
+    type VNodeProps
+} from 'vue';
+
+import OverlayAnchor from './overlay-anchor.vue';
+import type { OverlayAnchorOptions } from './overlay-types';
+
+interface OverlayOptions {
+    anchor?: OverlayAnchorOptions;
+}
+
+interface OverlayInjection<C extends OverlayComponent> {
+    id: string;
+    component: OverlayComponentUnwrapped<C>;
+    props: OverlayComponentProps<C>;
+    options: OverlayOptions;
+    vnode: VNode;
+    wrapperVnode?: VNode;
+}
+
+let overlayCount = 0;
+const OverlayInjections: OverlayInjection<any>[] = reactive([]);
+
+export const OverlayContainer = defineComponent({
+    setup() {
+        return () =>
+            h('div', [
+                renderList(OverlayInjections, injection => {
+                    return h(Teleport, { key: injection.id, to: '#vf-overlay-target' }, [injection.wrapperVnode ?? injection.vnode]);
+                })
+            ]);
+    }
+});
+
+// copied in from Vue since it's not exported
+// tood: it may be a lot easier than this. see the docs for props passed to "h"
+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 ObjectComponentConfig<T extends Vue__ComponentPublicInstanceConstructor> = T extends Vue__ComponentPublicInstanceConstructor<infer P>
+    ? P
+    : never;
+export type ObjectComponentProps<T extends Vue__ComponentPublicInstanceConstructor> = Writable<
+    Omit<ObjectComponentConfig<T>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
+>;
+
+type ObjectOrDefault<T> = T extends object ? T : PropsWithCallback<{}>;
+export type OverlayComponent = Vue__ComponentPublicInstanceConstructor | ((props: any) => any);
+export type OverlayComponentConfig<T> = T extends Vue__ComponentPublicInstanceConstructor
+    ? {
+          props: ObjectComponentProps<T>;
+          component: Raw<T>;
+      }
+    : T extends (props: infer P) => any
+    ? {
+          props: Omit<ObjectOrDefault<P>, keyof VNodeProps | keyof AllowedComponentProps>;
+          component: T;
+      }
+    : never;
+export type OverlayComponentUnwrapped<T extends OverlayComponent> = OverlayComponentConfig<T>['component'];
+export type OverlayComponentProps<T extends OverlayComponent> = OverlayComponentConfig<T>['props'];
+
+interface PropsWithCallback<T> {
+    callback?: (result: T) => void;
+}
+type ComponentReturn<M extends OverlayComponent> = OverlayComponentProps<M> extends PropsWithCallback<infer R> ? R : never;
+
+export type AnyComponentPublicInstance = { $: ComponentInternalInstance };
+
+export function createOverlayInjection<C extends OverlayComponent>(
+    component: C,
+    props: OverlayComponentProps<C>,
+    options?: OverlayOptions
+): OverlayInjection<C> {
+    // create or reconfigure the existing overlay target
+    // re-injecting every time keeps the overlay container at the very end of the DOM
+    const targetEl = document.getElementById('vf-overlay-target') ?? document.createElement('div');
+    targetEl.id = 'vf-overlay-target';
+    targetEl.removeAttribute('inert');
+    document.body.appendChild(targetEl);
+
+    const overlayId = String(++overlayCount);
+    const rawComponent = markRaw(component);
+    const vnode = h(rawComponent, props);
+    const wrapperVnode = options?.anchor ? h(OverlayAnchor, { overlayId, anchor: options.anchor }, () => [vnode]) : undefined;
+
+    // todo: dunno what's going on with types here
+    const injection: OverlayInjection<C> = {
+        id: overlayId,
+        component: rawComponent as any,
+        props,
+        options: options ?? {},
+        vnode,
+        wrapperVnode
+    };
+    OverlayInjections.push(injection);
+
+    return injection;
+}
+
+export function dismissOverlayInjectionByInstance(instance: AnyComponentPublicInstance) {
+    dismissOverlayInjectionByInternalInstance(instance.$);
+}
+
+export function dismissOverlayInjectionByInternalInstance(instance: ComponentInternalInstance) {
+    let targetInstance: ComponentInternalInstance | null = instance;
+    while (targetInstance && !dismissOverlayInjectionByVnode(targetInstance.vnode)) {
+        targetInstance = targetInstance.parent;
+    }
+}
+
+export function dismissOverlayInjectionByVnode(vnode: VNode) {
+    const injectionIdx = OverlayInjections.findIndex(i => i.vnode.component === vnode.component);
+    if (injectionIdx >= 0) {
+        OverlayInjections[injectionIdx].props.callback();
+        return true;
+    }
+    return false;
+}
+
+export function dismissOverlayInjectionById(id: string) {
+    const injectionIdx = OverlayInjections.findIndex(i => i.id === id);
+    if (injectionIdx >= 0) {
+        OverlayInjections[injectionIdx].props.callback();
+        return true;
+    }
+    return false;
+}
+
+export function removeOverlayInjection(injection: OverlayInjection<any>) {
+    const index = OverlayInjections.indexOf(injection);
+    if (index >= 0) {
+        OverlayInjections.splice(index, 1);
+    }
+}
+
+export async function presentOverlay<C extends OverlayComponent, R extends ComponentReturn<C>>(
+    component: C,
+    props: Omit<OverlayComponentProps<C>, 'callback'>,
+    options?: OverlayOptions
+): Promise<R | undefined> {
+    return new Promise<R>(resolve => {
+        let overlayInjection: OverlayInjection<C> | null = null;
+        const callback = (result: R) => {
+            removeOverlayInjection(overlayInjection!);
+            resolve(result);
+        };
+        const resolvedProps = { ...props, callback } as OverlayComponentProps<C>;
+        overlayInjection = createOverlayInjection(component, resolvedProps, options);
+    });
+}

package/src/components/overlay-types.ts

@@ -0,0 +1,10 @@
+export interface OverlayAnchorOptionsObject {
+    el: HTMLElement;
+    class?: string | string[];
+    x?: 'auto' | 'left' | 'center' | 'right';
+    y?: 'auto' | 'above' | 'center' | 'below';
+    matchWidth?: boolean;
+    matchHeight?: boolean;
+}
+
+export type OverlayAnchorOptions = HTMLElement | OverlayAnchorOptionsObject;

package/src/helpers/mask.ts

@@ -1,4 +1,4 @@
-import type { AnyComponentPublicInstance } from '../components/modal-container';
+import type { AnyComponentPublicInstance } from '../components/overlay-container';
 
 /*///////////////////////////////////////////////
 Component Overlay Masking

package/dist/src/components/modal-container.d.ts

@@ -1,33 +0,0 @@
-import type { Writable } from 'type-fest';
-import { type AllowedComponentProps, type ComponentInternalInstance, type ComponentPublicInstance, type ComputedOptions, type MethodOptions, type Raw, type VNode, type VNodeProps } from 'vue';
-interface ModalInjection<C extends Vue__ComponentPublicInstanceConstructor> {
-    id: string;
-    component: Raw<C>;
-    props: ComponentProps<C>;
-    vnode: VNode;
-}
-export declare const ModalContainer: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-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 declare function createModalInjection<C extends Vue__ComponentPublicInstanceConstructor>(component: C, props: ComponentProps<C>): ModalInjection<C>;
-export declare function removeModalInjection(injection: ModalInjection<any>): void;
-export declare function removeModalInjectionByInstance(instance: AnyComponentPublicInstance): void;
-export declare function removeModalInjectionByInternalInstance(instance: ComponentInternalInstance): void;
-export declare function removeModalInjectionByVnode(vnode: VNode): boolean;
-export declare function presentModal<C extends Vue__ComponentPublicInstanceConstructor, R extends ComponentReturn<C>>(component: C, props: Omit<ComponentProps<C>, 'callback'>): Promise<R | undefined>;
-export {};

package/src/components/modal-container.ts

@@ -1,131 +0,0 @@
-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);
-    });
-}