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

package/src/component/FluxFilterBase.vue

@@ -1,109 +1,93 @@
 <template>
-    <slot v-bind="{buttons, filters, menuItems}"/>
+    <slot v-bind="{buttons, filters, menuItems, clear, reset}"/>
 </template>
 
 <script
     lang="ts"
     setup>
     import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
-    import type { FluxFilterItem, FluxFilterOptionItem, FluxFilterSpecMap, FluxFilterState } from '@flux-ui/types';
-    import { camelCase } from 'lodash-es';
-    import { computed, provide, unref, type VNode } from 'vue';
-    import { filterParsers, FluxFilterInjectionKey } from '~flux/components/data';
-
-    type FluxFilterType = keyof FluxFilterSpecMap;
-
-    function applyParser<K extends FluxFilterType>(type: K, spec: FluxFilterSpecMap[K]): FluxFilterItem {
-        const parser = filterParsers[type] as (spec: FluxFilterSpecMap[K]) => FluxFilterItem;
-
-        return parser(spec);
-    }
+    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: [];
-        reset: [string]
+        clear: [string];
+        reset: [string];
     }>();
 
     const modelValue = defineModel<FluxFilterState>({
         required: true
     });
 
-    defineProps<{
-        readonly resettable?: string[];
-    }>();
-
     const slots = defineSlots<{
         default(props: {
-            readonly buttons: Record<string, FluxFilterItem>;
+            readonly buttons: Record<string, FluxFilterDefinition>;
             readonly filters: Record<string, VNode>;
-            readonly menuItems: (FluxFilterItem | 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, FluxFilterItem> = {};
+        const buttons: Record<string, FluxFilterDefinition> = {};
         const items = unref(flattenedFilters);
 
         for (const item of items) {
-            const name = getComponentName(item);
+            const definition = resolveDefinition(item);
 
-            if (!name.startsWith('FluxFilter')) {
+            if (!definition) {
                 continue;
             }
 
-            const type = camelCase(name.substring(10)) as FluxFilterType;
-            const props = getComponentProps<FluxFilterSpecMap[FluxFilterType]>(item);
-
-            buttons[props.name] = applyParser(type, props);
+            buttons[definition.name] = definition;
         }
 
         return buttons;
     });
 
-    const flattenedFilters = computed(() => flattenVNodeTree(slots.filters?.() ?? []));
-
     const filters = computed<Record<string, VNode>>(() => {
         const filters: { [key: string]: VNode; } = {};
         const items = unref(flattenedFilters);
 
         for (const item of items) {
-            const name = getComponentName(item);
+            const definition = resolveDefinition(item);
 
-            if (!name.startsWith('FluxFilter')) {
+            if (!definition) {
                 continue;
             }
 
-            const props = getComponentProps<{ name: string; }>(item);
-
-            if (!props.name) {
-                continue;
-            }
-
-            filters[props.name] = item;
+            filters[definition.name] = item;
         }
 
         return filters;
     });
 
-    const menuItems = computed<(FluxFilterItem | VNode)[][]>(() => {
-        const menuItems: (FluxFilterItem | VNode)[][] = [[]];
+    const menuItems = computed<(FluxFilterDefinition | VNode)[][]>(() => {
+        const menuItems: (FluxFilterDefinition | VNode)[][] = [[]];
         const items = unref(flattenedFilters);
 
         for (const item of items) {
-            const name = getComponentName(item);
-
-            if (name === 'FluxSeparator') {
+            if (getComponentName(item) === 'FluxSeparator') {
                 menuItems.push([]);
                 continue;
             }
 
-            if (name.startsWith('FluxFilter')) {
-                const type = camelCase(name.substring(10)) as FluxFilterType;
-                const props = getComponentProps<FluxFilterSpecMap[FluxFilterType]>(item);
+            const definition = resolveDefinition(item);
 
-                menuItems[menuItems.length - 1].push(applyParser(type, props));
+            if (definition) {
+                menuItems[menuItems.length - 1].push(definition);
                 continue;
             }
 
@@ -113,37 +97,67 @@
         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 getValue(name: string): FluxFilterOptionItem['value'] | undefined {
+    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 FluxFilterOptionItem['value'];
+        return unref(modelValue)[name] as FluxFilterValue;
     }
 
     function hasValue(name: string): boolean {
         return name in unref(modelValue);
     }
 
-    function setValue(name: string, value: FluxFilterOptionItem['value']): void {
+    function setValue(name: string, value: FluxFilterValue): void {
         modelValue.value[name] = value;
+        unref(buttons)[name]?.onChange?.(value);
     }
 
     provide(FluxFilterInjectionKey, {
         state: modelValue,
         back,
-        reset,
+        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/components/composable';
+    import { defineFilter, pickFilterCommon } from '~flux/components/util';
     import FluxDatePicker from './FluxDatePicker.vue';
     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/components/composable';
+    import { createLabelForDateRange, defineFilter, pickFilterCommon } from '~flux/components/util';
     import FluxDatePicker from './FluxDatePicker.vue';
     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,25 +11,35 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterOptionSpec } from '@flux-ui/types';
     import { computed, unref } from 'vue';
     import { useFilterOptionSingle } from '~flux/components/composable/private';
-    import { isFluxFilterOptionHeader } from '~flux/components/data';
+    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 {currentValue, onSelect} = useFilterOptionSingle(name);
 

package/src/component/FluxFilterOptionAsync.vue

@@ -12,11 +12,28 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxIconName } from '@flux-ui/types';
+    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: ''
     });
@@ -26,16 +43,7 @@
         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;
-    }>();
+    } = defineProps<Props>();
 
     const {currentValue, onSelect} = useFilterOptionSingle(name);
 

package/src/component/FluxFilterOptions.vue

@@ -11,12 +11,34 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterOptionsSpec } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterOptionMulti } from '~flux/components/composable/private';
-    import { isFluxFilterOptionHeader } from '~flux/components/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,14 +46,7 @@
     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 {currentValue, onSelect} = useFilterOptionMulti(name);
 

package/src/component/FluxFilterOptionsAsync.vue

@@ -12,10 +12,35 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxIconName } from '@flux-ui/types';
-    import { useAsyncFilterOptions, useFilterOptionMulti } from '~flux/components/composable/private';
+    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';
 
+    type Props = FluxFilterOptionsAsyncSpec & {
+        fetchRelevant(): Promise<FluxFilterOptionRow[]>;
+        fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
+        readonly searchPlaceholder?: string;
+    };
+
+    defineFilter<Props>(p => {
+        const translate = useTranslate();
+
+        return {
+            ...pickFilterCommon(p),
+            type: 'options',
+            async getValueLabel(value) {
+                if (!Array.isArray(value)) {
+                    return null;
+                }
+
+                const items = (await p.fetchOptions(value)).filter(isFluxFilterOptionItem);
+
+                return generateMultiOptionsLabel(translate, items, value);
+            }
+        };
+    });
+
     const modelSearch = defineModel<string>('searchQuery', {
         default: ''
     });
@@ -25,16 +50,7 @@
         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;
-    }>();
+    } = defineProps<Props>();
 
     const {currentValue, onSelect} = useFilterOptionMulti(name);
 

package/src/component/FluxFilterRange.vue

@@ -38,31 +38,45 @@
     lang="ts"
     setup>
     import { formatNumber } from '@basmilius/utils';
-    import type { FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterRangeSpec } from '@flux-ui/types';
     import { computed, unref } from 'vue';
     import { useFilterInjection } from '~flux/components/composable';
     import { useTranslate } from '~flux/components/composable/private';
+    import { defineFilter, pickFilterCommon } from '~flux/components/util';
     import FluxFormColumn from './FluxFormColumn.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormSlider from './FluxFormSlider.vue';
     import FluxPaneBody from './FluxPaneBody.vue';
 
+    type Props = FluxFilterRangeSpec & {
+        readonly isTicksVisible?: boolean;
+        readonly max: number;
+        readonly min: number;
+        readonly step?: number;
+    };
+
+    defineFilter<Props>(p => ({
+        ...pickFilterCommon(p),
+        type: 'range',
+        async getValueLabel(value) {
+            if (!value || !Array.isArray(value) || value.length !== 2) {
+                return null;
+            }
+
+            const [lower, upper] = value as number[];
+            const format = p.formatter ?? formatNumber;
+
+            return `${format(lower!)} – ${format(upper!)}`;
+        }
+    }));
+
     const {
         formatter = formatNumber,
         max,
         min,
         name,
         step = 1
-    } = defineProps<{
-        readonly icon?: FluxIconName;
-        readonly isTicksVisible?: boolean;
-        readonly label: string;
-        readonly name: string;
-        readonly max: number;
-        readonly min: number;
-        readonly step?: number;
-        readonly formatter?: (value: number) => string;
-    }>();
+    } = defineProps<Props>();
 
     const {state, setValue} = useFilterInjection();
     const translate = useTranslate();

package/src/component/FluxFilterWindow.vue

@@ -25,11 +25,17 @@
                             @click="back()"/>
 
                         <FluxMenuItem
-                            v-if="resettable?.includes(name)"
-                            :class="$style.filterReset"
+                            v-if="canReset(name)"
+                            :class="$style.filterAction"
+                            icon-leading="rotate-left"
+                            @click="reset(name)"
+                            style="flex-grow: 0"/>
+
+                        <FluxMenuItem
+                            :class="$style.filterAction"
                             icon-leading="trash"
                             is-destructive
-                            @click="reset(name)"
+                            @click="clear(name)"
                             style="flex-grow: 0"/>
                     </FluxMenuGroup>
 
@@ -44,9 +50,11 @@
     lang="ts"
     setup>
     import { vHeightTransition } from '@flux-ui/internals';
-    import type { FluxFilterItem } from '@flux-ui/types';
+    import type { FluxFilterDefinition } from '@flux-ui/types';
     import { unref, useTemplateRef, type VNode } from 'vue';
+    import { useFilterInjection } from '~flux/components/composable';
     import { useTranslate } from '~flux/components/composable/private';
+    import { isResettable } from '~flux/components/util';
     import FluxMenu from './FluxMenu.vue';
     import FluxMenuGroup from './FluxMenuGroup.vue';
     import FluxMenuItem from './FluxMenuItem.vue';
@@ -54,20 +62,17 @@
     import { FilterMenuRenderer, VNodeRenderer } from './primitive';
     import $style from '~flux/components/css/component/Filter.module.scss';
 
-    const emit = defineEmits<{
-        reset: [string]
-    }>();
-
     defineProps<{
         readonly filters: Record<string, VNode>;
-        readonly menuItems: (FluxFilterItem | VNode)[][];
-        readonly resettable?: string[];
+        readonly menuItems: (FluxFilterDefinition | VNode)[][];
     }>();
 
     defineSlots<{
         default(): VNode[];
     }>();
 
+    const {clear: clearFilter, getDefinition, getValue, reset: resetFilter} = useFilterInjection();
+
     const translate = useTranslate();
 
     const windowRef = useTemplateRef<{ back(to: string): void; }>('window');
@@ -76,8 +81,17 @@
         unref(windowRef)?.back('default');
     }
 
+    function clear(name: string): void {
+        back();
+        clearFilter(name);
+    }
+
     function reset(name: string): void {
         back();
-        emit('reset', name);
+        resetFilter(name);
+    }
+
+    function canReset(name: string): boolean {
+        return isResettable(getDefinition(name), getValue(name));
     }
 </script>