@flux-ui/components 3.0.0-next.61 → 3.0.0-next.63

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/dist/data/filter.d.ts

@@ -1,7 +0,0 @@
-import { FluxFilterEntryMap, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterSpecMap } from '@flux-ui/types';
-export type FluxFilterParsers = {
-    [K in keyof FluxFilterSpecMap]: (spec: FluxFilterSpecMap[K]) => FluxFilterEntryMap[K];
-};
-export declare const filterParsers: FluxFilterParsers;
-export declare function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader;
-export declare function isFluxFilterOptionItem(obj: object): obj is FluxFilterOptionItem;

package/src/component/FluxColumn.vue

@@ -1,24 +0,0 @@
-<template>
-    <div
-        :class="$style.column"
-        :style="{'--gap': `${gap}px`}">
-        <slot/>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import type { VNode } from 'vue';
-    import $style from '~flux/components/css/component/Layout.module.scss';
-
-    const {
-        gap = 18
-    } = defineProps<{
-        readonly gap?: number;
-    }>();
-
-    defineSlots<{
-        default(): VNode[];
-    }>();
-</script>

package/src/component/FluxRow.vue

@@ -1,24 +0,0 @@
-<template>
-    <div
-        :class="$style.row"
-        :style="{'--gap': `${gap}px`}">
-        <slot/>
-    </div>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import type { VNode } from 'vue';
-    import $style from '~flux/components/css/component/Layout.module.scss';
-
-    const {
-        gap = 18
-    } = defineProps<{
-        readonly gap?: number;
-    }>();
-
-    defineSlots<{
-        default(): VNode[];
-    }>();
-</script>

package/src/component/FluxStack.vue

@@ -1,41 +0,0 @@
-<template>
-    <Component
-        :is="tag ?? 'div'"
-        :class="clsx(
-            direction === 'horizontal' && $style.stackHorizontal,
-            direction === 'vertical' && $style.stackVertical,
-            isCentered && $style.isCentered,
-            isFill && $style.isFill,
-            isWrapping && $style.isWrapping
-        )"
-        :style="{
-            '--gap': gap != null ? `${gap}px` : undefined
-        }">
-        <slot/>
-    </Component>
-</template>
-
-<script
-    lang="ts"
-    setup>
-    import type { FluxDirection } from '@flux-ui/types';
-    import { clsx } from 'clsx';
-    import type { VNode } from 'vue';
-    import $style from '~flux/components/css/component/Layout.module.scss';
-
-    const {
-        direction = 'vertical',
-        gap = 18
-    } = defineProps<{
-        readonly direction?: FluxDirection;
-        readonly gap?: number;
-        readonly isCentered?: boolean;
-        readonly isFill?: boolean;
-        readonly isWrapping?: boolean;
-        readonly tag?: keyof HTMLElementTagNameMap;
-    }>();
-
-    defineSlots<{
-        default(): VNode[];
-    }>();
-</script>

package/src/data/filter.ts

@@ -1,165 +0,0 @@
-import { formatNumber } from '@basmilius/utils';
-import type { FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterDateRangeSpec, FluxFilterDateSpec, FluxFilterEntryMap, FluxFilterOptionAsyncSpec, FluxFilterOptionEntry, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterOptionsAsyncSpec, FluxFilterOptionsEntry, FluxFilterOptionSpec, FluxFilterOptionsSpec, FluxFilterRangeEntry, FluxFilterRangeSpec, FluxFilterSpecMap, FluxFilterValueSingle } from '@flux-ui/types';
-import { DateTime } from 'luxon';
-import { useTranslate } from '~flux/components/composable/private';
-import { createLabelForDateRange } from '~flux/components/util';
-import type { FluxTranslate } from './i18n';
-
-function parseDate(base: FluxFilterDateSpec): FluxFilterDateEntry {
-    return {
-        ...base,
-        type: 'date',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!DateTime.isDateTime(value)) {
-                return null;
-            }
-
-            return value.toLocaleString({
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric'
-            });
-        }
-    };
-}
-
-function parseDateRange(base: FluxFilterDateRangeSpec): FluxFilterDateRangeEntry {
-    return {
-        ...base,
-        type: 'dateRange',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [start, end] = value;
-
-            if (!DateTime.isDateTime(start) || !DateTime.isDateTime(end)) {
-                return null;
-            }
-
-            return createLabelForDateRange(start, end);
-        }
-    };
-}
-
-function parseOption({options, ...base}: FluxFilterOptionSpec): FluxFilterOptionEntry {
-    const items = options.filter(isFluxFilterOptionItem);
-
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            return items.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptionAsync({fetchOptions, ...base}: FluxFilterOptionAsyncSpec): FluxFilterOptionEntry {
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            const items = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
-
-            return items.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptions({options, ...base}: FluxFilterOptionsSpec): FluxFilterOptionsEntry {
-    const items = options.filter(isFluxFilterOptionItem);
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            return generateMultiOptionsLabel(translate, items, value);
-        }
-    };
-}
-
-function parseOptionsAsync({fetchOptions, ...base}: FluxFilterOptionsAsyncSpec): FluxFilterOptionsEntry {
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            const items = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
-
-            return generateMultiOptionsLabel(translate, items, value);
-        }
-    };
-}
-
-function parseRange(base: FluxFilterRangeSpec): FluxFilterRangeEntry {
-    return {
-        ...base,
-        type: 'range',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!value || !Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [lower, upper] = value as number[];
-            const formatter = base.formatter ?? formatNumber;
-
-            return `${formatter(lower!)} – ${formatter(upper!)}`;
-        }
-    };
-}
-
-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
-    });
-}
-
-export type FluxFilterParsers = {
-    [K in keyof FluxFilterSpecMap]: (spec: FluxFilterSpecMap[K]) => FluxFilterEntryMap[K];
-};
-
-export const filterParsers: FluxFilterParsers = {
-    date: parseDate,
-    dateRange: parseDateRange,
-    option: parseOption,
-    optionAsync: parseOptionAsync,
-    options: parseOptions,
-    optionsAsync: parseOptionsAsync,
-    range: parseRange
-};
-
-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;
-}