@signal24/vue-foundation 3.8.0 → 4.0.0

package/src/config.ts

@@ -0,0 +1,15 @@
+interface IOptions {
+    unhandledErrorSupportText: string;
+    errorHandler: (err: Error) => void;
+    defaultDateTimeFormat: string;
+}
+
+export const VfOptions: IOptions = {
+    unhandledErrorSupportText: 'please contact support',
+    errorHandler: err => console.error('Unhandled error:', err),
+    defaultDateTimeFormat: 'MM/dd/yy HH:mm'
+};
+
+export function configureVf(options: Partial<IOptions>) {
+    Object.assign(VfOptions, options);
+}

package/src/directives/autofocus.ts

@@ -0,0 +1,20 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+export const vAutofocus: ObjectDirective<HTMLElement, void> = {
+    mounted: fn,
+    updated: fn
+};
+
+const HasAutoFocused = Symbol('HasAutoFocused');
+interface AutoFocusElement {
+    [HasAutoFocused]?: boolean;
+}
+
+function fn(el: HTMLElement & AutoFocusElement, binding: DirectiveBinding<void>) {
+    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;
+    const realEl = ['BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName) > -1 ? el : (el.querySelectorAll('input')[0] as HTMLElement);
+    setTimeout(() => realEl.focus(), 10);
+}

package/src/directives/confirm-button.ts

@@ -0,0 +1,50 @@
+import type { ObjectDirective } from 'vue';
+
+export const vConfirmButton: ObjectDirective<HTMLElement, void> = {
+    mounted: fn
+};
+
+const ConfirmState = Symbol('ConfirmState');
+interface IConfirmState {
+    initTime: number;
+    preconfirmHtml: string;
+    resetHandler: () => void;
+}
+interface IConfirmElement {
+    [ConfirmState]?: IConfirmState;
+}
+
+function fn(el: HTMLElement & IConfirmElement) {
+    el.addEventListener('click', e => {
+        const now = Date.now();
+
+        if (el[ConfirmState]) {
+            if (now - el[ConfirmState].initTime < 300) {
+                return;
+            }
+
+            el[ConfirmState].resetHandler();
+            el.dispatchEvent(new Event('confirm'));
+            return;
+        }
+
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        const confirmState: IConfirmState = {
+            initTime: now,
+            preconfirmHtml: el.innerHTML,
+            resetHandler: () => {
+                el.innerHTML = confirmState.preconfirmHtml;
+                el.blur();
+
+                el.removeEventListener('mouseout', confirmState.resetHandler);
+                delete el[ConfirmState];
+            }
+        };
+        el[ConfirmState] = confirmState;
+        el.innerHTML = 'Confirm';
+
+        el.addEventListener('mouseout', confirmState.resetHandler);
+    });
+}

package/src/directives/date-input.ts

@@ -0,0 +1,19 @@
+import { format } from 'date-fns';
+import type { ObjectDirective } from 'vue';
+
+export const vDateInput: ObjectDirective<HTMLInputElement, void> = {
+    beforeMount: fn
+};
+
+function fn(el: HTMLInputElement) {
+    el.addEventListener('blur', () => {
+        let val = el.value;
+        if (/^\d{1,2}\/\d{1,2}$/.test(val)) val += '/' + format(new Date(), 'yy');
+
+        const ts = Date.parse(val);
+        if (isNaN(ts)) el.value = '';
+        else el.value = format(ts, 'MM/dd/yyyy');
+
+        el.dispatchEvent(new Event('input'));
+    });
+}

package/src/directives/datetime.ts

@@ -0,0 +1,48 @@
+import { format } from 'date-fns';
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+import { VfOptions } from '@/config';
+
+export const vDatetime: ObjectDirective<HTMLElement, string> = {
+    beforeMount: applyDateTime,
+    updated: applyDateTime
+};
+
+function applyDateTime(el: HTMLElement, binding: DirectiveBinding<string>) {
+    if (binding.value == binding.oldValue && el.innerHTML.length) return;
+    el.innerText = getDateTimeValue(el, binding);
+}
+
+function getDateTimeValue(el: HTMLElement, binding: DirectiveBinding<string>) {
+    if (!binding.value) {
+        return el.attributes.getNamedItem('placeholder')?.value ?? '';
+    }
+
+    let prefix = '';
+    const isoDateStr = binding.value.replace(/ /g, 'T').replace(/\.\d+Z$/, 'Z');
+    const tzDateStr = el.attributes.getNamedItem('local') !== null ? isoDateStr.replace(/Z$/, '') : isoDateStr.replace(/(Z|\+00:00)?$/, 'Z');
+    const theDate = new Date(tzDateStr);
+
+    if (!el.attributes.getNamedItem('display-utc') !== null) {
+        theDate.setMinutes(theDate.getMinutes() - theDate.getTimezoneOffset());
+    }
+
+    let formatSpec = el.attributes.getNamedItem('format')?.value;
+
+    if (!formatSpec && el.attributes.getNamedItem('relative-date') !== null) {
+        const now = new Date();
+        if (now.getFullYear() == theDate.getFullYear() && now.getMonth() == theDate.getMonth() && now.getDate() == theDate.getDate()) {
+            prefix = 'at';
+            formatSpec = 'HH:mm';
+        }
+    }
+
+    if (!formatSpec) {
+        formatSpec = VfOptions.defaultDateTimeFormat;
+    }
+
+    let result = format(theDate, formatSpec);
+    if (prefix) result = prefix + ' ' + result;
+
+    return result;
+}

package/src/directives/disabled.ts

@@ -0,0 +1,30 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+export const vDisabled: ObjectDirective<HTMLElement, boolean> = {
+    beforeMount: fn,
+    updated: fn,
+    unmounted
+};
+
+function fn(el: HTMLElement, binding: DirectiveBinding<boolean>) {
+    if (el.tagName === 'LABEL') {
+        if (binding.value) {
+            el.classList.remove('disabled');
+        } else {
+            el.classList.add('disabled');
+        }
+        el = el.querySelector('input')!;
+    }
+
+    if (binding.value) el.setAttribute('disabled', 'disabled');
+    else el.removeAttribute('disabled');
+}
+
+function unmounted(el: HTMLElement) {
+    if (el.tagName === 'LABEL') {
+        el.classList.remove('disabled');
+        el = el.querySelector('input')!;
+    }
+
+    el.removeAttribute('disabled');
+}

package/src/directives/duration.ts

@@ -0,0 +1,79 @@
+import { remove } from 'lodash';
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+export const vDuration: ObjectDirective<HTMLElement, number> = {
+    beforeMount: applyDuration,
+    updated: applyDuration,
+    unmounted: removeDuration
+};
+
+const DurationState = Symbol('HasAutoFocused');
+interface IDurationState {
+    startTs: number;
+    includeSeconds: boolean;
+}
+type DurationElement = HTMLElement & { [DurationState]?: IDurationState };
+
+const durationEls: DurationElement[] = [];
+
+function updateDurations() {
+    durationEls.forEach(updateDuration);
+}
+setInterval(updateDurations, 1000);
+
+function applyDuration(el: DurationElement, binding: DirectiveBinding<number>) {
+    if (binding.value == binding.oldValue) return;
+    if (!binding.value) return removeDuration(el);
+
+    const bindingDate = new Date(binding.value);
+
+    const baseTime = el.attributes.getNamedItem('base-time')?.value;
+    const startTs = bindingDate.getTime() - (baseTime ? new Date(baseTime).getTime() - binding.value * 1000 : 0);
+
+    const includeSeconds = el.getAttribute('no-seconds') === null;
+
+    if (!el[DurationState]) {
+        durationEls.push(el);
+    }
+
+    el[DurationState] = {
+        startTs,
+        includeSeconds
+    };
+
+    updateDuration(el);
+}
+
+function updateDuration(el: DurationElement) {
+    const state = el[DurationState]!;
+    const diff = Math.round((Date.now() - state.startTs) / 1000);
+    el.innerText = secondsToString(diff, state.includeSeconds);
+}
+
+function removeDuration(el: DurationElement) {
+    if (el[DurationState]) {
+        remove(durationEls, el);
+        delete el[DurationState];
+    }
+
+    el.innerText = '-';
+}
+
+function secondsToString(seconds: number, shouldSkipSeconds?: boolean) {
+    const result = [];
+    const days = Math.floor(seconds / 86400);
+    days && result.push(days + 'd');
+    seconds -= days * 86400;
+    const hours = Math.floor(seconds / 3600);
+    (days || hours) && result.push(hours + 'h');
+    seconds -= hours * 3600;
+    const 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.ts

@@ -0,0 +1,37 @@
+import type { App } from 'vue';
+
+import { vAutofocus } from './autofocus';
+import { vConfirmButton } from './confirm-button';
+import { vDateInput } from './date-input';
+import { vDatetime } from './datetime';
+import { vDisabled } from './disabled';
+import { vDuration } from './duration';
+import { vInfiniteScroll } from './infinite-scroll';
+import { vReadonly } from './readonly';
+import { vTooltip } from './tooltip';
+
+declare module 'vue' {
+    export interface ComponentCustomProperties {
+        vAutofocus: typeof vAutofocus;
+        vConfirmButton: typeof vConfirmButton;
+        vDateInput: typeof vDateInput;
+        vDatetime: typeof vDatetime;
+        vDisabled: typeof vDisabled;
+        vDuration: typeof vDuration;
+        vInfiniteScroll: typeof vInfiniteScroll;
+        vReadonly: typeof vReadonly;
+        vTooltip: typeof vTooltip;
+    }
+}
+
+export function registerDirectives(app: App<Element>): void {
+    app.directive('autofocus', vAutofocus);
+    app.directive('confirm-button', vConfirmButton);
+    app.directive('date-input', vDateInput);
+    app.directive('datetime', vDatetime);
+    app.directive('disabled', vDisabled);
+    app.directive('duration', vDuration);
+    app.directive('infinite-scroll', vInfiniteScroll);
+    app.directive('readonly', vReadonly);
+    app.directive('tooltip', vTooltip);
+}

package/src/directives/infinite-scroll.ts

@@ -0,0 +1,9 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+import { type IInfiniteScrollOptions, useInfiniteScroll } from '../hooks/infinite-scroll';
+
+export const vInfiniteScroll: ObjectDirective<Element, IInfiniteScrollOptions> = {
+    created(_el: Element, binding: DirectiveBinding<IInfiniteScrollOptions>) {
+        useInfiniteScroll(binding.value, binding.instance!.$);
+    }
+};

package/src/directives/readonly.ts

@@ -0,0 +1,15 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+export const vReadonly: ObjectDirective<HTMLElement, boolean> = {
+    beforeMount: fn,
+    updated: fn
+};
+
+function fn(el: HTMLElement, binding: DirectiveBinding<boolean>) {
+    if (el.tagName == 'LABEL') {
+        el = el.querySelector('input')!;
+    }
+
+    if (binding.value) el.setAttribute('readonly', 'readonly');
+    else el.removeAttribute('readonly');
+}

package/src/directives/tooltip.ts

@@ -0,0 +1,190 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+type TooltipValue = string | null | false | undefined;
+
+export const vTooltip: ObjectDirective<TooltipElement, TooltipValue> = {
+    mounted: createTip,
+    updated: createTip,
+    unmounted: destroyTip
+};
+
+const TooltipState = Symbol('TooltipState');
+interface ITooltipState {
+    [TooltipState]?: VfTooltip;
+}
+type TooltipElement = HTMLElement & ITooltipState;
+
+function createTip(el: TooltipElement, binding: DirectiveBinding<TooltipValue>) {
+    let tipText = el.attributes.getNamedItem('tip')?.value ?? binding.value;
+    if (!binding.value) tipText = null;
+
+    if (tipText) {
+        const config: ITooltipOptions = {
+            content: tipText,
+            html: el.getAttribute('html') !== null
+        };
+
+        if (!el[TooltipState]) {
+            el[TooltipState] = new VfTooltip(el, config);
+        } else {
+            el[TooltipState].configure(config);
+        }
+    } else {
+        destroyTip(el);
+    }
+}
+
+function destroyTip(el: TooltipElement) {
+    el[TooltipState]?.destroy();
+    delete el[TooltipState];
+}
+
+interface ITooltipOptions {
+    content: string;
+    title?: string;
+    delay?: number;
+    html?: boolean;
+    class?: string | string[];
+}
+
+class VfTooltip {
+    private lastMoveEvt?: MouseEvent;
+    private checkInterval?: ReturnType<typeof setInterval>;
+    private shouldShow = false;
+    private tipEl?: HTMLElement;
+    private titleEl?: HTMLElement;
+    private contentEl?: HTMLElement;
+
+    private mouseMoveBound = false;
+    private handleMouseMoveWithContext = this.handleMouseMove.bind(this);
+    private handleTargetMouseEnterWithContext = this.handleTargetMouseEnter.bind(this);
+    private handleTargetMouseLeaveWithContext = this.handleTargetMouseLeave.bind(this);
+
+    constructor(private el: HTMLElement, private config: ITooltipOptions) {
+        el.addEventListener('mouseenter', this.handleTargetMouseEnterWithContext);
+        el.addEventListener('mouseleave', this.handleTargetMouseLeaveWithContext);
+    }
+
+    configure(config: ITooltipOptions) {
+        this.config = config;
+    }
+
+    handleTargetMouseEnter(e: MouseEvent) {
+        this.shouldShow = true;
+        setTimeout(() => this.show(e), this.config.delay ?? 0);
+    }
+
+    handleTargetMouseLeave() {
+        this.shouldShow = false;
+        this.removeTooltip();
+    }
+
+    show(e?: MouseEvent) {
+        if (!this.shouldShow) return;
+
+        this.renderTooltip();
+
+        if (e) this.handleMouseMove(e);
+    }
+
+    renderTooltip() {
+        if (!this.tipEl) {
+            this.tipEl = document.createElement('div');
+            this.tipEl.style.position = 'absolute';
+            this.tipEl.style.zIndex = '1000000';
+            document.body.appendChild(this.tipEl);
+        }
+
+        this.tipEl.className = this.getClasses().join(' ');
+
+        if (this.config.title) {
+            if (!this.titleEl) {
+                this.titleEl = document.createElement('div');
+                this.titleEl.className = 'title';
+                this.tipEl.appendChild(this.titleEl);
+            }
+
+            this.titleEl.innerText = this.config.title;
+        } else if (this.titleEl) {
+            this.titleEl.remove();
+        }
+
+        if (!this.contentEl) {
+            this.contentEl = document.createElement('div');
+            this.contentEl.className = 'content';
+            this.tipEl.appendChild(this.contentEl);
+        }
+
+        this.contentEl[this.config.html ? 'innerHTML' : 'innerText'] = this.config.content;
+
+        if (this.checkInterval) {
+            this.checkInterval = setInterval(() => this.checkMoveEvent(), 250);
+        }
+
+        if (!this.mouseMoveBound) {
+            this.mouseMoveBound = true;
+            window.addEventListener('mousemove', this.handleMouseMoveWithContext);
+        }
+    }
+
+    getClasses() {
+        return ['vf-tooltip', ...(Array.isArray(this.config.class) ? this.config.class : this.config.class ? [this.config.class] : [])];
+    }
+
+    removeTooltip() {
+        if (this.shouldShow) return;
+        if (!this.tipEl) return;
+
+        this.tipEl.remove();
+
+        this.tipEl = undefined;
+        this.titleEl = undefined;
+        this.contentEl = undefined;
+
+        if (this.checkInterval) {
+            clearInterval(this.checkInterval);
+            this.checkInterval = undefined;
+        }
+
+        window.removeEventListener('mousemove', this.handleMouseMoveWithContext);
+        this.mouseMoveBound = false;
+    }
+
+    handleMouseMove(e: MouseEvent) {
+        const tipWidth = this.tipEl!.offsetWidth;
+        const tipHeight = this.tipEl!.offsetHeight;
+
+        const viewWidth = window.innerWidth;
+        const viewHeight = window.innerHeight;
+
+        let tipX = e.pageX + 10,
+            tipY = e.pageY + 20;
+
+        if (tipX + tipWidth > viewWidth) tipX = e.pageX - 5 - tipWidth;
+        if (tipY + tipHeight > viewHeight) tipY = e.pageY - 5 - tipHeight;
+
+        this.tipEl!.style.left = tipX + 'px';
+        this.tipEl!.style.top = tipY + 'px';
+
+        this.lastMoveEvt = e;
+    }
+
+    checkMoveEvent() {
+        if (!this.lastMoveEvt) return;
+
+        if (this.tipEl !== this.lastMoveEvt.target) {
+            if (!this.tipEl?.contains(this.lastMoveEvt.target as Node)) {
+                this.handleTargetMouseLeave();
+            }
+        }
+    }
+
+    destroy() {
+        this.shouldShow = false;
+
+        this.removeTooltip();
+
+        this.el.removeEventListener('mouseenter', this.handleTargetMouseEnterWithContext);
+        this.el.removeEventListener('mouseleave', this.handleTargetMouseLeaveWithContext);
+    }
+}

package/src/filters/index.ts

@@ -0,0 +1,79 @@
+import { startCase as _startCase, upperFirst as _upperFirst } from 'lodash';
+
+import { desnakeCase, formatNumber, formatPhone, formatUSCurrency } from '..';
+
+function bytes(value: number) {
+    const p = Math.floor(Math.log(value) / Math.log(1024));
+    const numericResult = value / Math.pow(1024, p);
+    const stringResult = numericResult.toFixed(2);
+    const unit = ['B', 'KB', 'MB', 'GB', 'TB'][p];
+    return `${stringResult} ${unit}`;
+}
+
+function dash(value: any) {
+    return value !== null && value !== undefined && String(value).length ? value : '-';
+}
+
+function dashZeros(value: number | null) {
+    return value ? value : '-';
+}
+
+function number(value: string | number | null) {
+    if (value === null) return value;
+    if (typeof value === 'string' && !/^\d+$/.test(value)) return value;
+    return formatNumber(Number(value));
+}
+
+function phone(value: string | null) {
+    if (!value) return value;
+    return formatPhone(value);
+}
+
+function upperFirst(value: null): null;
+function upperFirst(value: string): string;
+function upperFirst(value: string | null) {
+    return value ? _upperFirst(value) : null;
+}
+
+function startCase(value: null): null;
+function startCase(value: string): string;
+function startCase(value: string | null) {
+    return value ? _startCase(value) : null;
+}
+
+function upperCase(value: null): null;
+function upperCase(value: string): string;
+function upperCase(value: string | null) {
+    return value ? value.toUpperCase() : null;
+}
+
+function desnake(value: null): null;
+function desnake(value: string): string;
+function desnake(value: string | null) {
+    return value ? desnakeCase(value) : null;
+}
+
+function usCurrency(value: string | number) {
+    return formatUSCurrency(value);
+}
+
+const FilterFns = {
+    bytes,
+    dash,
+    dashZeros,
+    number,
+    phone,
+    upperFirst,
+    startCase,
+    upperCase,
+    desnake,
+    usCurrency
+};
+
+// type FilterFn = (value: any, ...unknown: any[]) => any;
+export const createFilters = <T>(factory: (baseFilters: typeof FilterFns) => T): typeof FilterFns & T => {
+    return {
+        ...FilterFns,
+        ...factory(FilterFns)
+    };
+};

package/src/helpers/array.ts

@@ -0,0 +1,7 @@
+type ArraySearchPredicate<T> = Parameters<T[]['findIndex']>[0];
+export function replaceElement<T>(array: T[], oldElement: T | ArraySearchPredicate<T>, newElement: T) {
+    const index = typeof oldElement === 'function' ? array.findIndex(oldElement as any) : array.indexOf(oldElement);
+    if (index === -1) return false;
+    array.splice(index, 1, newElement);
+    return true;
+}