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

package/src/component/FluxFilterBase.vue

@@ -0,0 +1,163 @@
+<template>
+    <slot v-bind="{buttons, filters, menuItems, clear, reset}"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
+    import type { FluxFilterDefinition, FluxFilterState, FluxFilterValue } from '@flux-ui/types';
+    import { computed, provide, unref, watchEffect, type VNode } from 'vue';
+    import { FluxFilterInjectionKey } from '~flux/components/data';
+
+    const emit = defineEmits<{
+        back: [];
+        clear: [string];
+        reset: [string];
+    }>();
+
+    const modelValue = defineModel<FluxFilterState>({
+        required: true
+    });
+
+    const slots = defineSlots<{
+        default(props: {
+            readonly buttons: Record<string, FluxFilterDefinition>;
+            readonly filters: Record<string, VNode>;
+            readonly menuItems: (FluxFilterDefinition | VNode)[][];
+            clear(name: string): void;
+            reset(name: string): void;
+        }): VNode[];
+
+        filters(): VNode[];
+    }>();
+
+    function resolveDefinition(vnode: VNode): FluxFilterDefinition | null {
+        const factory = (vnode.type as { __filterDefinitionFactory?: (props: unknown) => FluxFilterDefinition })?.__filterDefinitionFactory;
+
+        return typeof factory === 'function' ? factory(getComponentProps(vnode)) : null;
+    }
+
+    const flattenedFilters = computed(() => flattenVNodeTree(slots.filters?.() ?? []));
+
+    const buttons = computed(() => {
+        const buttons: Record<string, FluxFilterDefinition> = {};
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            const definition = resolveDefinition(item);
+
+            if (!definition) {
+                continue;
+            }
+
+            buttons[definition.name] = definition;
+        }
+
+        return buttons;
+    });
+
+    const filters = computed<Record<string, VNode>>(() => {
+        const filters: { [key: string]: VNode; } = {};
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            const definition = resolveDefinition(item);
+
+            if (!definition) {
+                continue;
+            }
+
+            filters[definition.name] = item;
+        }
+
+        return filters;
+    });
+
+    const menuItems = computed<(FluxFilterDefinition | VNode)[][]>(() => {
+        const menuItems: (FluxFilterDefinition | VNode)[][] = [[]];
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            if (getComponentName(item) === 'FluxSeparator') {
+                menuItems.push([]);
+                continue;
+            }
+
+            const definition = resolveDefinition(item);
+
+            if (definition) {
+                menuItems[menuItems.length - 1].push(definition);
+                continue;
+            }
+
+            menuItems[menuItems.length - 1].push(item);
+        }
+
+        return menuItems;
+    });
+
+    watchEffect(() => {
+        const state = unref(modelValue);
+
+        for (const definition of Object.values(unref(buttons))) {
+            if (definition.defaultValue !== undefined && state[definition.name] === undefined) {
+                modelValue.value[definition.name] = definition.defaultValue as FluxFilterValue;
+            }
+        }
+    });
+
+    function back(): void {
+        emit('back');
+    }
+
+    function clear(name: string): void {
+        const definition = unref(buttons)[name];
+
+        back();
+        modelValue.value[name] = null;
+        definition?.onClear?.();
+        emit('clear', name);
+    }
+
+    function reset(name: string): void {
+        const definition = unref(buttons)[name];
+
+        back();
+        modelValue.value[name] = (definition?.defaultValue ?? null) as FluxFilterValue;
+        definition?.onClear?.();
+        emit('reset', name);
+    }
+
+    function getDefinition(name: string): FluxFilterDefinition | undefined {
+        return unref(buttons)[name];
+    }
+
+    function getValue(name: string): FluxFilterValue | undefined {
+        if (!hasValue(name)) {
+            return undefined;
+        }
+
+        return unref(modelValue)[name] as FluxFilterValue;
+    }
+
+    function hasValue(name: string): boolean {
+        return name in unref(modelValue);
+    }
+
+    function setValue(name: string, value: FluxFilterValue): void {
+        modelValue.value[name] = value;
+        unref(buttons)[name]?.onChange?.(value);
+    }
+
+    provide(FluxFilterInjectionKey, {
+        state: modelValue,
+        back,
+        clear,
+        getDefinition,
+        getValue,
+        hasValue,
+        reset,
+        setValue
+    });
+</script>

package/src/component/FluxFilterDate.vue

@@ -10,22 +10,38 @@
 <script
     lang="ts"
     setup>
-    import type { FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterDateSpec } from '@flux-ui/types';
     import { DateTime } from 'luxon';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
+    import { useFilterInjection } from '~flux/components/composable';
+    import { defineFilter, pickFilterCommon } from '~flux/components/util';
     import FluxDatePicker from './FluxDatePicker.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
-    const {
-        name
-    } = defineProps<{
-        readonly icon?: FluxIconName;
-        readonly label: string;
+    type Props = FluxFilterDateSpec & {
         readonly max?: DateTime;
         readonly min?: DateTime;
-        readonly name: string;
-    }>();
+    };
+
+    defineFilter<Props>(p => ({
+        ...pickFilterCommon(p),
+        type: 'date',
+        async getValueLabel(value) {
+            if (!DateTime.isDateTime(value)) {
+                return null;
+            }
+
+            return value.toLocaleString({
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric'
+            });
+        }
+    }));
+
+    const {
+        name
+    } = defineProps<Props>();
 
     const {back, state, setValue} = useFilterInjection();
 

package/src/component/FluxFilterDateRange.vue

@@ -11,24 +11,42 @@
 <script
     lang="ts"
     setup>
-    import type { FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterDateRangeSpec } from '@flux-ui/types';
     import { DateTime } from 'luxon';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
+    import { useFilterInjection } from '~flux/components/composable';
+    import { createLabelForDateRange, defineFilter, pickFilterCommon } from '~flux/components/util';
     import FluxDatePicker from './FluxDatePicker.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
-    const {
-        name,
-        rangeMode = 'range'
-    } = defineProps<{
-        readonly icon?: FluxIconName;
-        readonly label: string;
+    type Props = FluxFilterDateRangeSpec & {
         readonly max?: DateTime;
         readonly min?: DateTime;
-        readonly name: string;
         readonly rangeMode?: 'range' | 'week' | 'month';
-    }>();
+    };
+
+    defineFilter<Props>(p => ({
+        ...pickFilterCommon(p),
+        type: 'dateRange',
+        async getValueLabel(value) {
+            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);
+        }
+    }));
+
+    const {
+        name,
+        rangeMode = 'range'
+    } = defineProps<Props>();
 
     const {back, state, setValue} = useFilterInjection();
 

package/src/component/FluxFilterOption.vue

@@ -11,39 +11,38 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterOptionSpec } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
-    import { isFluxFilterOptionHeader } from '$flux/data';
+    import { useFilterOptionSingle } from '~flux/components/composable/private';
+    import { defineFilter, isFluxFilterOptionHeader, isFluxFilterOptionItem, pickFilterCommon } from '~flux/components/util';
     import { FilterOptionBase } from './primitive';
 
+    type Props = FluxFilterOptionSpec & {
+        readonly isSearchable?: boolean;
+        readonly searchPlaceholder?: string;
+    };
+
+    defineFilter<Props>(p => {
+        const items = p.options.filter(isFluxFilterOptionItem);
+
+        return {
+            ...pickFilterCommon(p),
+            type: 'option',
+            async getValueLabel(value) {
+                return items.find(o => o.value === value)?.label ?? null;
+            }
+        };
+    });
+
     const modelSearch = defineModel<string>('searchQuery', {default: ''});
 
     const {
         name,
         options
-    } = defineProps<{
-        readonly icon?: FluxIconName;
-        readonly isSearchable?: boolean;
-        readonly label: string;
-        readonly name: string;
-        readonly options: FluxFilterOptionRow[];
-        readonly searchPlaceholder?: string;
-    }>();
+    } = defineProps<Props>();
 
-    const {back, state, setValue} = useFilterInjection();
+    const {currentValue, onSelect} = useFilterOptionSingle(name);
 
-    const currentValue = computed(() => unref(state)[name] as FluxFilterValueSingle);
     const filteredOptions = computed(() => options
         .filter(o => isFluxFilterOptionHeader(o) || unref(modelSearch).length === 0 || o.label.toLowerCase().includes(unref(modelSearch).toLowerCase())));
-
-    function onSelect(value: FluxFilterValue): void {
-        if (unref(currentValue) === value) {
-            setValue(name, null);
-        } else {
-            setValue(name, value);
-        }
-
-        back();
-    }
 </script>

package/src/component/FluxFilterOptionAsync.vue

@@ -12,14 +12,28 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, watch } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
-    import { useLoaded } from '$flux/composable/private';
-    import { isFluxFilterOptionItem } from '$flux/data';
+    import type { FluxFilterOptionAsyncSpec, FluxFilterOptionRow, FluxFilterValue } from '@flux-ui/types';
+    import { computed, unref } from 'vue';
+    import { useAsyncFilterOptions, useFilterOptionSingle } from '~flux/components/composable/private';
+    import { defineFilter, isFluxFilterOptionItem, pickFilterCommon } from '~flux/components/util';
     import { FilterOptionBase } from './primitive';
 
+    type Props = FluxFilterOptionAsyncSpec & {
+        fetchRelevant(): Promise<FluxFilterOptionRow[]>;
+        fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
+        readonly searchPlaceholder?: string;
+    };
+
+    defineFilter<Props>(p => ({
+        ...pickFilterCommon(p),
+        type: 'option',
+        async getValueLabel(value) {
+            const items = (await p.fetchOptions([value])).filter(isFluxFilterOptionItem);
+
+            return items.find(o => o.value === value)?.label ?? null;
+        }
+    }));
+
     const modelSearch = defineModel<string>('searchQuery', {
         default: ''
     });
@@ -29,75 +43,25 @@
         fetchRelevant: fetchRelevantProp,
         fetchSearch: fetchSearchProp,
         name
-    } = defineProps<{
-        fetchOptions(ids: FluxFilterValue[]): Promise<FluxFilterOptionRow[]>;
-        fetchRelevant(): Promise<FluxFilterOptionRow[]>;
-        fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
-
-        readonly icon?: FluxIconName;
-        readonly label: string;
-        readonly name: string;
-        readonly searchPlaceholder?: string;
-    }>();
-
-    const {back, state, setValue} = useFilterInjection();
-    const {isLoading, loaded} = useLoaded();
-    const debouncedModelSearch = useDebouncedRef(modelSearch, 150);
-    const fetchOptions = computed(() => loaded(fetchOptionsProp));
-    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
-    const fetchSearch = computed(() => loaded(fetchSearchProp));
-
-    const selectedOptions = ref<FluxFilterOptionRow[]>([]);
-    const visibleOptions = ref<FluxFilterOptionRow[]>([]);
+    } = defineProps<Props>();
 
-    const currentValue = computed(() => unref(state)[name] as FluxFilterValueSingle);
+    const {currentValue, onSelect} = useFilterOptionSingle(name);
 
-    const options = computed(() => {
-        const options: FluxFilterOptionRow[] = [];
-        const search = unref(modelSearch);
-        const selected = unref(selectedOptions);
-        const visible = unref(visibleOptions);
+    const currentValueIds = computed<FluxFilterValue[]>(() => {
+        const value = unref(currentValue);
 
-        visible.forEach(vo => options.push(vo));
-
-        selected.forEach(so => {
-            if (isFluxFilterOptionItem(so) && visible.find(vo => isFluxFilterOptionItem(vo) && vo.value === so.value)) {
-                return;
-            }
-
-            if (isFluxFilterOptionItem(so) && !so.label.toLowerCase().includes(search.toLowerCase())) {
-                return;
-            }
-
-            options.push(so);
-        });
-
-        return options;
-    });
-
-    function onSelect(value: FluxFilterValue): void {
-        if (unref(currentValue) === value) {
-            setValue(name, null);
-        } else {
-            setValue(name, value);
+        if (value === null || value === undefined) {
+            return [];
         }
 
-        back();
-    }
-
-    watch(currentValue, async value => {
-        if (!value && value !== 0) {
-            return;
-        }
-
-        selectedOptions.value = await unref(fetchOptions)([value]);
-    }, {immediate: true});
+        return [value];
+    });
 
-    watch(debouncedModelSearch, async searchQuery => {
-        if (searchQuery.length > 0) {
-            visibleOptions.value = await unref(fetchSearch)(searchQuery);
-        } else {
-            visibleOptions.value = await unref(fetchRelevant)();
-        }
-    }, {immediate: true});
+    const {isLoading, options} = useAsyncFilterOptions({
+        currentValueIds,
+        modelSearch,
+        fetchOptions: (ids: FluxFilterValue[]) => fetchOptionsProp(ids),
+        fetchRelevant: () => fetchRelevantProp(),
+        fetchSearch: (searchQuery: string) => fetchSearchProp(searchQuery)
+    });
 </script>

package/src/component/FluxFilterOptions.vue

@@ -11,12 +11,34 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterOptionsSpec } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
-    import { isFluxFilterOptionHeader } from '$flux/data';
+    import { useFilterOptionMulti, useTranslate } from '~flux/components/composable/private';
+    import { defineFilter, generateMultiOptionsLabel, isFluxFilterOptionHeader, isFluxFilterOptionItem, pickFilterCommon } from '~flux/components/util';
     import { FilterOptionBase } from './primitive';
 
+    type Props = FluxFilterOptionsSpec & {
+        readonly isSearchable?: boolean;
+        readonly searchPlaceholder?: string;
+    };
+
+    defineFilter<Props>(p => {
+        const items = p.options.filter(isFluxFilterOptionItem);
+        const translate = useTranslate();
+
+        return {
+            ...pickFilterCommon(p),
+            type: 'options',
+            async getValueLabel(value) {
+                if (!Array.isArray(value)) {
+                    return null;
+                }
+
+                return generateMultiOptionsLabel(translate, items, value);
+            }
+        };
+    });
+
     const modelSearch = defineModel<string>('searchQuery', {
         default: ''
     });
@@ -24,39 +46,10 @@
     const {
         name,
         options
-    } = defineProps<{
-        readonly icon?: FluxIconName;
-        readonly isSearchable?: boolean;
-        readonly label: string;
-        readonly name: string;
-        readonly options: FluxFilterOptionRow[];
-        readonly searchPlaceholder?: string;
-    }>();
-
-    const {state, setValue} = useFilterInjection();
+    } = defineProps<Props>();
 
-    const currentValue = computed(() => {
-        const value = unref(state)[name];
-
-        if (Array.isArray(value)) {
-            return value;
-        }
-
-        return [];
-    });
+    const {currentValue, onSelect} = useFilterOptionMulti(name);
 
     const filteredOptions = computed(() => options
         .filter(o => isFluxFilterOptionHeader(o) || unref(modelSearch).length === 0 || o.label.toLowerCase().includes(unref(modelSearch).toLowerCase())));
-
-    function onSelect(value: FluxFilterValueSingle): void {
-        let values = Array.from(unref(currentValue));
-
-        if (values.includes(value)) {
-            values = values.filter(v => v !== value);
-        } else {
-            values.push(value);
-        }
-
-        setValue(name, values);
-    }
 </script>

package/src/component/FluxFilterOptionsAsync.vue

@@ -12,102 +12,53 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, watch } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
-    import { useLoaded } from '$flux/composable/private';
-    import { isFluxFilterOptionItem } from '$flux/data';
+    import type { FluxFilterOptionRow, FluxFilterOptionsAsyncSpec, FluxFilterValue } from '@flux-ui/types';
+    import { useAsyncFilterOptions, useFilterOptionMulti, useTranslate } from '~flux/components/composable/private';
+    import { defineFilter, generateMultiOptionsLabel, isFluxFilterOptionItem, pickFilterCommon } from '~flux/components/util';
     import { FilterOptionBase } from './primitive';
 
-    const modelSearch = defineModel<string>('searchQuery', {
-        default: ''
-    });
-
-    const {
-        fetchOptions: fetchOptionsProp,
-        fetchRelevant: fetchRelevantProp,
-        fetchSearch: fetchSearchProp,
-        name
-    } = defineProps<{
-        fetchOptions(ids: FluxFilterValue[]): Promise<FluxFilterOptionRow[]>;
+    type Props = FluxFilterOptionsAsyncSpec & {
         fetchRelevant(): Promise<FluxFilterOptionRow[]>;
         fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
-
-        readonly icon?: FluxIconName;
-        readonly label: string;
-        readonly name: string;
         readonly searchPlaceholder?: string;
-    }>();
-
-    const {state, setValue} = useFilterInjection();
-    const {isLoading, loaded} = useLoaded();
-    const debouncedModelSearch = useDebouncedRef(modelSearch, 150);
-    const fetchOptions = computed(() => loaded(fetchOptionsProp));
-    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
-    const fetchSearch = computed(() => loaded(fetchSearchProp));
-
-    const selectedOptions = ref<FluxFilterOptionRow[]>([]);
-    const visibleOptions = ref<FluxFilterOptionRow[]>([]);
-
-    const currentValue = computed(() => {
-        const value = unref(state)[name];
-
-        if (Array.isArray(value)) {
-            return value;
-        }
-
-        return [];
-    });
+    };
 
-    const options = computed(() => {
-        const options: FluxFilterOptionRow[] = [];
-        const search = unref(modelSearch);
-        const selected = unref(selectedOptions);
-        const visible = unref(visibleOptions);
+    defineFilter<Props>(p => {
+        const translate = useTranslate();
 
-        visible.forEach(vo => options.push(vo));
+        return {
+            ...pickFilterCommon(p),
+            type: 'options',
+            async getValueLabel(value) {
+                if (!Array.isArray(value)) {
+                    return null;
+                }
 
-        selected.forEach(so => {
-            if (isFluxFilterOptionItem(so) && visible.find(vo => isFluxFilterOptionItem(vo) && vo.value === so.value)) {
-                return;
-            }
+                const items = (await p.fetchOptions(value)).filter(isFluxFilterOptionItem);
 
-            if (isFluxFilterOptionItem(so) && !so.label.toLowerCase().includes(search.toLowerCase())) {
-                return;
+                return generateMultiOptionsLabel(translate, items, value);
             }
-
-            options.push(so);
-        });
-
-        return options;
+        };
     });
 
-    function onSelect(value: FluxFilterValueSingle): void {
-        let values = Array.from(unref(currentValue));
-
-        if (values.includes(value)) {
-            values = values.filter(v => v !== value);
-        } else {
-            values.push(value);
-        }
-
-        setValue(name, values);
-    }
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
 
-    watch(currentValue, async value => {
-        if (value.length === 0) {
-            return;
-        }
+    const {
+        fetchOptions: fetchOptionsProp,
+        fetchRelevant: fetchRelevantProp,
+        fetchSearch: fetchSearchProp,
+        name
+    } = defineProps<Props>();
 
-        selectedOptions.value = await unref(fetchOptions)(value);
-    }, {immediate: true});
+    const {currentValue, onSelect} = useFilterOptionMulti(name);
 
-    watch(debouncedModelSearch, async searchQuery => {
-        if (searchQuery.length > 0) {
-            visibleOptions.value = await unref(fetchSearch)(searchQuery);
-        } else {
-            visibleOptions.value = await unref(fetchRelevant)();
-        }
-    }, {immediate: true});
+    const {isLoading, options} = useAsyncFilterOptions({
+        currentValueIds: currentValue,
+        modelSearch,
+        fetchOptions: (ids: FluxFilterValue[]) => fetchOptionsProp(ids),
+        fetchRelevant: () => fetchRelevantProp(),
+        fetchSearch: (searchQuery: string) => fetchSearchProp(searchQuery)
+    });
 </script>