@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

package/src/transition/FluxFadeTransition.vue

@@ -14,11 +14,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxOverlayTransition.vue

@@ -12,11 +12,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxRouteTransition.vue

@@ -12,7 +12,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
@@ -20,4 +21,8 @@
         readonly isBack?: boolean;
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxSlideOverTransition.vue

@@ -12,11 +12,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxTooltipTransition.vue

@@ -12,11 +12,16 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
     } = defineProps<{
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxVerticalWindowTransition.vue

@@ -12,7 +12,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
@@ -20,4 +21,8 @@
         readonly isBack?: boolean;
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/transition/FluxWindowTransition.vue

@@ -12,7 +12,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Transition.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Transition.module.scss';
 
     const {
         mode = 'out-in'
@@ -20,4 +21,8 @@
         readonly isBack?: boolean;
         readonly mode?: 'in-out' | 'out-in';
     }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
 </script>

package/src/util/createDialogRenderer.ts

@@ -1,7 +1,7 @@
-import { flattenVNodeTree } from '@flux-ui/internals';
-import { Component, getCurrentInstance, RenderFunction, Slots } from 'vue';
-import { Comment, h, onMounted, onUnmounted, SetupContext, Teleport, VNode } from 'vue';
-import { registerDialog, useFluxStore } from '$flux/data';
+import { flattenVNodeTree, useFocusTrap } from '@flux-ui/internals';
+import { Comment, h, onUnmounted, ref, Teleport, watch, type Component, type RenderFunction, type SetupContext, type Slots, type VNode } from 'vue';
+import { registerDialog, useFluxStore } from '~flux/components/data';
+import $style from '~flux/components/css/component/Overlay.module.scss';
 
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
@@ -9,27 +9,39 @@ type Props = {
     readonly viewKey?: string;
 };
 
+const TARGET_SELECTOR = `.${$style.overlayProvider.replaceAll(' ', '.')}`;
+let DIALOG_ID = 0;
+
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction {
-    const instance = getCurrentInstance();
+    const dialogId = `flux-dialog:${DIALOG_ID++}`;
     let unregister: Function | null = null;
     let zIndex = 0;
 
-    onMounted(() => {
-        window.addEventListener('keydown', onKeyDown);
-    });
+    const dialogRef = ref<HTMLElement>();
+
+    useFocusTrap(dialogRef);
 
     onUnmounted(() => {
-        window.removeEventListener('keydown', onKeyDown);
         unregister?.();
     });
 
+    watch(dialogRef, (dialog, _, onCleanup) => {
+        if (!dialog) {
+            return;
+        }
+
+        dialog.addEventListener('keydown', onKeyDown, {passive: true});
+
+        onCleanup(() => {
+            dialog.removeEventListener('keydown', onKeyDown);
+        });
+    });
+
     function onKeyDown(evt: KeyboardEvent): void {
         if (evt.key !== 'Escape' || !unregister || !props.isCloseable) {
             return;
         }
 
-        evt.preventDefault();
-        evt.stopPropagation();
         emit('close');
     }
 
@@ -38,25 +50,28 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
 
         const children = flattenVNodeTree(slots.default?.() ?? []);
         const isVisible = children.length > 0 && children.some(child => child.type !== Comment);
-        const content: VNode[] = [];
+        let content: VNode | undefined;
 
         if (isVisible) {
             if (!unregister) {
-                unregister = registerDialog();
-                zIndex = dialogCount + 1000;
+                [zIndex, unregister] = registerDialog();
             }
 
-            content.push(h('div', {
-                key: props.viewKey,
-                class: className,
-                style: {zIndex}
-            }, children));
+            content = h('div', {
+                key: props.viewKey ?? dialogId,
+                ref: dialogRef,
+                class: [className, zIndex === dialogCount && $style.isCurrent],
+                style: {
+                    zIndex: zIndex + 1000
+                },
+                tabindex: 0
+            }, children);
         } else {
             unregister?.();
             unregister = null;
         }
 
-        return h(Teleport, {disabled: content.length === 0, to: instance?.appContext.app._container}, [
+        return h(Teleport, {defer: true, disabled: !content, to: TARGET_SELECTOR}, [
             h(transition, attrs, {
                 default: () => content
             })

package/src/util/createLabelForDateRange.ts

@@ -1,5 +1,5 @@
 import type { DateTime } from 'luxon';
-import { useTranslate } from '$flux/composable/private';
+import { useTranslate } from '~flux/components/composable/private';
 
 export default function (start: DateTime, end: DateTime, preventCustom: boolean = false): string {
     const translate = useTranslate();

package/src/util/defineFilter.ts

@@ -0,0 +1,10 @@
+import type { FluxFilterDefinition, FluxFilterValue } from '@flux-ui/types';
+
+export type FluxFilterDefinitionFactory<TProps = any, TValue extends FluxFilterValue = FluxFilterValue> =
+    (props: TProps) => FluxFilterDefinition<TValue>;
+
+export default function defineFilter<TProps, TValue extends FluxFilterValue = FluxFilterValue>(
+    factory: FluxFilterDefinitionFactory<TProps, TValue>
+): FluxFilterDefinitionFactory<TProps, TValue> {
+    return factory;
+}

package/src/util/filter.ts

@@ -0,0 +1,63 @@
+import type { FluxFilterDefinition, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterSpec, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
+import { DateTime } from 'luxon';
+import type { FluxTranslate } from '~flux/components/data';
+
+export function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader {
+    return 'title' in obj;
+}
+
+export function isFluxFilterOptionItem(obj: object): obj is FluxFilterOptionItem {
+    return 'label' in obj && 'value' in obj;
+}
+
+export function isResettable(definition: FluxFilterDefinition | undefined, value: FluxFilterValue | undefined): boolean {
+    if (!definition || definition.defaultValue === undefined) {
+        return false;
+    }
+
+    return !isFilterValueEqual(value, definition.defaultValue);
+}
+
+function isFilterValueEqual(a: FluxFilterValue | undefined, b: FluxFilterValue | undefined): boolean {
+    if (a === b) {
+        return true;
+    }
+
+    if (DateTime.isDateTime(a) && DateTime.isDateTime(b)) {
+        return a.equals(b);
+    }
+
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((value, index) => isFilterValueEqual(value, b[index]));
+    }
+
+    return false;
+}
+
+export function pickFilterCommon<T extends FluxFilterSpec>(props: T): FluxFilterSpec {
+    return {
+        name: props.name,
+        label: props.label,
+        icon: props.icon,
+        disabled: props.disabled,
+        defaultValue: props.defaultValue,
+        onChange: props.onChange,
+        onClear: props.onClear
+    };
+}
+
+export function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null {
+    const selected = options.filter(o => values.includes(o.value)).length;
+
+    if (selected <= 0) {
+        return null;
+    }
+
+    if (selected === 1) {
+        return options.find(o => values.includes(o.value))!.label;
+    }
+
+    return translate('flux.nSelected', {
+        n: selected
+    });
+}

package/src/util/index.ts

@@ -1,2 +1,4 @@
 export { default as createDialogRenderer } from './createDialogRenderer';
 export { default as createLabelForDateRange } from './createLabelForDateRange';
+export { default as defineFilter, type FluxFilterDefinitionFactory } from './defineFilter';
+export { generateMultiOptionsLabel, isFluxFilterOptionHeader, isFluxFilterOptionItem, isResettable, pickFilterCommon } from './filter';

package/src/vite/defineFilterMacro.ts

@@ -0,0 +1,335 @@
+import type { Plugin } from 'vite';
+
+const SCRIPT_SETUP_REGEX = /<script\b([^>]*)\bsetup\b([^>]*)>([\s\S]*?)<\/script>/gi;
+
+function defineFilterMacro(): Plugin {
+    return {
+        name: '@flux-ui/components/define-filter-macro',
+        enforce: 'pre',
+
+        transform(code, id) {
+            if (!id.endsWith('.vue')) {
+                return;
+            }
+
+            if (!code.includes('defineFilter')) {
+                return;
+            }
+
+            let transformed = false;
+
+            const newCode = code.replace(SCRIPT_SETUP_REGEX, (match, before, after, content) => {
+                if (!content.includes('defineFilter')) {
+                    return match;
+                }
+
+                if (content.includes('__filterDefinitionFactory')) {
+                    return match;
+                }
+
+                if (containsTopLevelCall(content, 'defineOptions')) {
+                    return match;
+                }
+
+                const wrapped = wrapDefineFilter(content);
+
+                if (wrapped === content) {
+                    return match;
+                }
+
+                transformed = true;
+                return `<script${before}setup${after}>${wrapped}</script>`;
+            });
+
+            if (!transformed) {
+                return;
+            }
+
+            return {
+                code: newCode,
+                map: null
+            };
+        }
+    };
+}
+
+export default defineFilterMacro;
+
+function wrapDefineFilter(content: string): string {
+    const range = findTopLevelCall(content, 'defineFilter');
+
+    if (!range) {
+        return content;
+    }
+
+    const callExpression = content.slice(range.callStart, range.callEnd);
+    const replacement = `defineOptions({\n    __filterDefinitionFactory: ${callExpression}\n})`;
+
+    return content.slice(0, range.callStart) + replacement + content.slice(range.callEnd);
+}
+
+function containsTopLevelCall(content: string, name: string): boolean {
+    return findTopLevelCall(content, name) !== null;
+}
+
+type CallRange = {
+    readonly callStart: number;
+    readonly callEnd: number;
+};
+
+function findTopLevelCall(content: string, name: string): CallRange | null {
+    let parenDepth = 0;
+    let braceDepth = 0;
+    let bracketDepth = 0;
+    let inString: string | null = null;
+    let inComment: 'single' | 'multi' | null = null;
+
+    let i = 0;
+
+    while (i < content.length) {
+        const c = content[i];
+        const n = content[i + 1];
+
+        if (inComment === 'single') {
+            if (c === '\n') {
+                inComment = null;
+            }
+
+            i++;
+            continue;
+        }
+
+        if (inComment === 'multi') {
+            if (c === '*' && n === '/') {
+                inComment = null;
+                i += 2;
+                continue;
+            }
+
+            i++;
+            continue;
+        }
+
+        if (inString) {
+            if (c === '\\') {
+                i += 2;
+                continue;
+            }
+
+            if (c === inString) {
+                inString = null;
+            }
+
+            i++;
+            continue;
+        }
+
+        if (c === '/' && n === '/') {
+            inComment = 'single';
+            i += 2;
+            continue;
+        }
+
+        if (c === '/' && n === '*') {
+            inComment = 'multi';
+            i += 2;
+            continue;
+        }
+
+        if (c === '"' || c === '\'' || c === '`') {
+            inString = c;
+            i++;
+            continue;
+        }
+
+        if (c === '(') {
+            parenDepth++;
+            i++;
+            continue;
+        }
+
+        if (c === ')') {
+            parenDepth--;
+            i++;
+            continue;
+        }
+
+        if (c === '{') {
+            braceDepth++;
+            i++;
+            continue;
+        }
+
+        if (c === '}') {
+            braceDepth--;
+            i++;
+            continue;
+        }
+
+        if (c === '[') {
+            bracketDepth++;
+            i++;
+            continue;
+        }
+
+        if (c === ']') {
+            bracketDepth--;
+            i++;
+            continue;
+        }
+
+        const isTopLevel = parenDepth === 0 && braceDepth === 0 && bracketDepth === 0;
+
+        if (!isTopLevel || !content.startsWith(name, i)) {
+            i++;
+            continue;
+        }
+
+        const prevChar = i > 0 ? content[i - 1] : '';
+
+        if (/[A-Za-z0-9_$]/.test(prevChar)) {
+            i++;
+            continue;
+        }
+
+        const afterName = i + name.length;
+        const nextChar = content[afterName];
+
+        if (nextChar && /[A-Za-z0-9_$]/.test(nextChar)) {
+            i++;
+            continue;
+        }
+
+        const callOpen = skipGenericAndWhitespace(content, afterName);
+
+        if (callOpen === -1 || content[callOpen] !== '(') {
+            i++;
+            continue;
+        }
+
+        const callClose = matchClosingParen(content, callOpen);
+
+        if (callClose === -1) {
+            return null;
+        }
+
+        return {
+            callStart: i,
+            callEnd: callClose + 1
+        };
+    }
+
+    return null;
+}
+
+function skipGenericAndWhitespace(content: string, start: number): number {
+    let i = start;
+
+    while (i < content.length && /\s/.test(content[i])) {
+        i++;
+    }
+
+    if (content[i] !== '<') {
+        return i;
+    }
+
+    let depth = 1;
+    i++;
+
+    while (i < content.length && depth > 0) {
+        const c = content[i];
+
+        if (c === '<') {
+            depth++;
+        } else if (c === '>') {
+            depth--;
+        }
+
+        i++;
+    }
+
+    while (i < content.length && /\s/.test(content[i])) {
+        i++;
+    }
+
+    return i;
+}
+
+function matchClosingParen(content: string, openIndex: number): number {
+    let depth = 1;
+    let inString: string | null = null;
+    let inComment: 'single' | 'multi' | null = null;
+
+    let i = openIndex + 1;
+
+    while (i < content.length) {
+        const c = content[i];
+        const n = content[i + 1];
+
+        if (inComment === 'single') {
+            if (c === '\n') {
+                inComment = null;
+            }
+
+            i++;
+            continue;
+        }
+
+        if (inComment === 'multi') {
+            if (c === '*' && n === '/') {
+                inComment = null;
+                i += 2;
+                continue;
+            }
+
+            i++;
+            continue;
+        }
+
+        if (inString) {
+            if (c === '\\') {
+                i += 2;
+                continue;
+            }
+
+            if (c === inString) {
+                inString = null;
+            }
+
+            i++;
+            continue;
+        }
+
+        if (c === '/' && n === '/') {
+            inComment = 'single';
+            i += 2;
+            continue;
+        }
+
+        if (c === '/' && n === '*') {
+            inComment = 'multi';
+            i += 2;
+            continue;
+        }
+
+        if (c === '"' || c === '\'' || c === '`') {
+            inString = c;
+            i++;
+            continue;
+        }
+
+        if (c === '(') {
+            depth++;
+        } else if (c === ')') {
+            depth--;
+
+            if (depth === 0) {
+                return i;
+            }
+        }
+
+        i++;
+    }
+
+    return -1;
+}

package/src/vite/index.ts

@@ -0,0 +1 @@
+export { default as defineFilterMacro } from './defineFilterMacro';

package/src/vite.d.ts

@@ -1,11 +1,5 @@
-declare module '*.module.css' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.module.scss' {
-    const content: Record<string, string>;
-    export default content;
+declare module '*.scss' {
+    export = string;
 }
 
 declare module '*.svg' {

package/dist/0db98648.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
-    <path d="M40.4 29a21 21 0 0 0 1.6-8 21 21 0 1 0-13 19.4A8 8 0 0 1 40.5 29Z"/>
-</svg>

package/dist/component/FluxAction.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FluxAction.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxAction.vue"],"names":[],"mappings":"AA6BI,OAAO,KAAK,EAAmB,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAOrF,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAAC,GAAG;IAC7F,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;;;;;;;;;;AAiFN,wBAQG"}

package/dist/component/FluxActionBar.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FluxActionBar.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxActionBar.vue"],"names":[],"mappings":"AA+GI,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AA+BN,iBAAS,cAAc;WA6IT,OAAO,IAA6B;;oBAxK9B,GAAG;uBACA,GAAG;yBACD,GAAG;+BACG,GAAG;gCACF,GAAG;mBAChB,GAAG;uBAEC;YACX,KAAK,IAAI,IAAI,CAAC;YAEd,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;YAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;SACjC,GAAG,GAAG;6BAEc;YACjB,KAAK,IAAI,IAAI,CAAC;YACd,IAAI,IAAI,IAAI,CAAC;YACb,MAAM,IAAI,IAAI,CAAC;SAClB,GAAG,GAAG;;oBApBK,GAAG;uBACA,GAAG;yBACD,GAAG;+BACG,GAAG;gCACF,GAAG;mBAChB,GAAG;uBAEC;YACX,KAAK,IAAI,IAAI,CAAC;YAEd,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;YAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;SACjC,GAAG,GAAG;6BAEc;YACjB,KAAK,IAAI,IAAI,CAAC;YACd,IAAI,IAAI,IAAI,CAAC;YACb,MAAM,IAAI,IAAI,CAAC;SAClB,GAAG,GAAG;;;;EAyJd;AAkBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;kFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/component/FluxActionPane.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FluxActionPane.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxActionPane.vue"],"names":[],"mappings":"AA+CI,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;CACtD,CAAC;AAWN,iBAAS,cAAc;WAyET,OAAO,IAA6B;;oBAhF9B,GAAG;oBACH,GAAG;iBACN,GAAG;;oBAFA,GAAG;oBACH,GAAG;iBACN,GAAG;;;;EAmFnB;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,6SAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}