@flux-ui/components 3.0.0-next.5 → 3.0.0-next.52

package/src/component/FluxFilterBar.vue

@@ -0,0 +1,119 @@
+<template>
+    <FluxFilterBase
+        v-model="modelValue"
+        :resettable="resettable"
+        @reset="reset">
+        <template #filters>
+            <slot/>
+        </template>
+
+        <template #default="{ buttons, filters, menuItems }">
+            <div :class="$style.filterBar">
+                <FluxFormInput
+                    v-if="isSearchable"
+                    v-model="modelSearch"
+                    :class="$style.filterBarSearch"
+                    icon-leading="magnifying-glass"
+                    :placeholder="searchPlaceholder"
+                    type="search"/>
+
+                <FluxOverflowBar alignment="end">
+                    <template
+                        v-for="button of buttons"
+                        :key="button.name">
+                        <FluxFlyout>
+                            <template #opener="{open}">
+                                <FluxSecondaryButton
+                                    v-if="modelValue[button.name]"
+                                    :class="$style.filterButton"
+                                    :icon-leading="button.icon"
+                                    :label="button.label"
+                                    @click="open()">
+                                    <template #after>
+                                        <FilterBadge
+                                            :item="button"
+                                            :value="modelValue[button.name]"/>
+                                    </template>
+                                </FluxSecondaryButton>
+                            </template>
+
+                            <div :class="$style.filter">
+                                <FluxMenu>
+                                    <VNodeRenderer :vnode="filters[button.name]"/>
+                                </FluxMenu>
+                            </div>
+                        </FluxFlyout>
+                    </template>
+
+                    <template #overflow>
+                        <FluxSeparator
+                            v-if="isFiltered"
+                            direction="vertical"
+                            style="margin-top: 9px; margin-bottom: 9px"/>
+
+                        <FluxFlyout>
+                            <template #opener="{open}">
+                                <FluxSecondaryButton
+                                    icon-leading="sliders-simple"
+                                    label="Filter"
+                                    @click="open()"/>
+                            </template>
+
+                            <FluxFilterWindow
+                                :filters="filters"
+                                :menu-items="menuItems"
+                                :resettable="resettable"
+                                @reset="reset"/>
+                        </FluxFlyout>
+                    </template>
+                </FluxOverflowBar>
+            </div>
+        </template>
+    </FluxFilterBase>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import { computed, unref } from 'vue';
+    import type { FluxFilterState } from '@flux-ui/types';
+    import { FilterBadge, VNodeRenderer } from '$flux/component/primitive';
+    import FluxFilterBase from './FluxFilterBase.vue';
+    import FluxFilterWindow from './FluxFilterWindow.vue';
+    import FluxFlyout from './FluxFlyout.vue';
+    import FluxFormInput from './FluxFormInput.vue';
+    import FluxMenu from '$flux/component/FluxMenu.vue';
+    import FluxOverflowBar from './FluxOverflowBar.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxSeparator from '$flux/component/FluxSeparator.vue';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        reset: [string];
+    }>();
+
+    const modelSearch = defineModel<string>('search', {
+        default: ''
+    });
+
+    const modelValue = defineModel<FluxFilterState>({
+        required: true
+    });
+
+    defineProps<{
+        readonly isSearchable?: boolean;
+        readonly resettable?: string[];
+        readonly searchPlaceholder?: string;
+    }>();
+
+    defineSlots<{
+        default?(): VNode[];
+    }>();
+
+    const isFiltered = computed(() => Object.entries(unref(modelValue)).filter(([, val]) => Boolean(val)).length > 0);
+
+    function reset(name: string): void {
+        emit('reset', name);
+    }
+</script>

package/src/component/FluxFilterBase.vue

@@ -0,0 +1,149 @@
+<template>
+    <slot v-bind="{buttons, filters, menuItems}"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
+    import type { FluxFilterItem, FluxFilterOptionItem, FluxFilterSpecMap, FluxFilterState } from '@flux-ui/types';
+    import { computed, provide, unref, type VNode } from 'vue';
+    import { filterParsers, FluxFilterInjectionKey } from '$flux/data';
+    import { camelCase } from 'lodash-es';
+
+    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);
+    }
+
+    const emit = defineEmits<{
+        back: [];
+        reset: [string]
+    }>();
+
+    const modelValue = defineModel<FluxFilterState>({
+        required: true
+    });
+
+    defineProps<{
+        readonly resettable?: string[];
+    }>();
+
+    const slots = defineSlots<{
+        default(props: {
+            readonly buttons: Record<string, FluxFilterItem>;
+            readonly filters: Record<string, VNode>;
+            readonly menuItems: (FluxFilterItem | VNode)[][];
+        }): VNode[];
+
+        filters(): VNode[];
+    }>();
+
+    const buttons = computed(() => {
+        const buttons: Record<string, FluxFilterItem> = {};
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            const name = getComponentName(item);
+
+            if (!name.startsWith('FluxFilter')) {
+                continue;
+            }
+
+            const type = camelCase(name.substring(10)) as FluxFilterType;
+            const props = getComponentProps<FluxFilterSpecMap[FluxFilterType]>(item);
+
+            buttons[props.name] = applyParser(type, props);
+        }
+
+        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);
+
+            if (!name.startsWith('FluxFilter')) {
+                continue;
+            }
+
+            const props = getComponentProps<{ name: string; }>(item);
+
+            if (!props.name) {
+                continue;
+            }
+
+            filters[props.name] = item;
+        }
+
+        return filters;
+    });
+
+    const menuItems = computed<(FluxFilterItem | VNode)[][]>(() => {
+        const menuItems: (FluxFilterItem | VNode)[][] = [[]];
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            const name = getComponentName(item);
+
+            if (name === 'FluxSeparator') {
+                menuItems.push([]);
+                continue;
+            }
+
+            if (name.startsWith('FluxFilter')) {
+                const type = camelCase(name.substring(10)) as FluxFilterType;
+                const props = getComponentProps<FluxFilterSpecMap[FluxFilterType]>(item);
+
+                menuItems[menuItems.length - 1].push(applyParser(type, props));
+                continue;
+            }
+
+            menuItems[menuItems.length - 1].push(item);
+        }
+
+        return menuItems;
+    });
+
+    function back(): void {
+        emit('back');
+    }
+
+    function reset(name: string): void {
+        back();
+        emit('reset', name);
+    }
+
+    function getValue(name: string): FluxFilterOptionItem['value'] | undefined {
+        if (!hasValue(name)) {
+            return undefined;
+        }
+
+        return unref(modelValue)[name] as FluxFilterOptionItem['value'];
+    }
+
+    function hasValue(name: string): boolean {
+        return name in unref(modelValue);
+    }
+
+    function setValue(name: string, value: FluxFilterOptionItem['value']): void {
+        modelValue.value[name] = value;
+    }
+
+    provide(FluxFilterInjectionKey, {
+        state: modelValue,
+        back,
+        reset,
+        getValue,
+        hasValue,
+        setValue
+    });
+</script>

package/src/component/FluxFilterOption.vue

@@ -11,9 +11,9 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterOptionRow, FluxIconName } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
+    import { useFilterOptionSingle } from '$flux/composable/private';
     import { isFluxFilterOptionHeader } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 
@@ -31,19 +31,8 @@
         readonly searchPlaceholder?: string;
     }>();
 
-    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,12 +12,9 @@
 <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, FluxFilterValue, FluxIconName } from '@flux-ui/types';
+    import { computed, unref } from 'vue';
+    import { useAsyncFilterOptions, useFilterOptionSingle } from '$flux/composable/private';
     import { FilterOptionBase } from './primitive';
 
     const modelSearch = defineModel<string>('searchQuery', {
@@ -40,64 +37,23 @@
         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 {currentValue, onSelect} = useFilterOptionSingle(name);
 
-    const selectedOptions = ref<FluxFilterOptionRow[]>([]);
-    const visibleOptions = ref<FluxFilterOptionRow[]>([]);
+    const currentValueIds = computed<FluxFilterValue[]>(() => {
+        const value = unref(currentValue);
 
-    const currentValue = computed(() => unref(state)[name] as FluxFilterValueSingle);
-
-    const options = computed(() => {
-        const options: FluxFilterOptionRow[] = [];
-        const search = unref(modelSearch);
-        const selected = unref(selectedOptions);
-        const visible = unref(visibleOptions);
-
-        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);
-        }
-
-        back();
-    }
-
-    watch(currentValue, async value => {
-        if (!value && value !== 0) {
-            return;
+        if (value === null || value === undefined) {
+            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,9 +11,9 @@
 <script
     lang="ts"
     setup>
-    import type { FluxFilterOptionRow, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
+    import type { FluxFilterOptionRow, FluxIconName } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
+    import { useFilterOptionMulti } from '$flux/composable/private';
     import { isFluxFilterOptionHeader } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 
@@ -33,30 +33,8 @@
         readonly searchPlaceholder?: string;
     }>();
 
-    const {state, setValue} = useFilterInjection();
-
-    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,12 +12,8 @@
 <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, FluxFilterValue, FluxIconName } from '@flux-ui/types';
+    import { useAsyncFilterOptions, useFilterOptionMulti } from '$flux/composable/private';
     import { FilterOptionBase } from './primitive';
 
     const modelSearch = defineModel<string>('searchQuery', {
@@ -40,74 +36,13 @@
         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 {currentValue, onSelect} = useFilterOptionMulti(name);
 
-    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);
-
-        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;
+    const {isLoading, options} = useAsyncFilterOptions({
+        currentValueIds: currentValue,
+        modelSearch,
+        fetchOptions: (ids: FluxFilterValue[]) => fetchOptionsProp(ids),
+        fetchRelevant: () => fetchRelevantProp(),
+        fetchSearch: (searchQuery: string) => fetchSearchProp(searchQuery)
     });
-
-    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);
-    }
-
-    watch(currentValue, async value => {
-        if (value.length === 0) {
-            return;
-        }
-
-        selectedOptions.value = await unref(fetchOptions)(value);
-    }, {immediate: true});
-
-    watch(debouncedModelSearch, async searchQuery => {
-        if (searchQuery.length > 0) {
-            visibleOptions.value = await unref(fetchSearch)(searchQuery);
-        } else {
-            visibleOptions.value = await unref(fetchRelevant)();
-        }
-    }, {immediate: true});
 </script>

package/src/component/FluxFilterWindow.vue

@@ -0,0 +1,83 @@
+<template>
+    <div
+        v-height-transition
+        :class="$style.filter">
+        <FluxWindow ref="window">
+            <template #default="{navigate}">
+                <FluxMenu>
+                    <FilterMenuRenderer
+                        :menu-items="menuItems"
+                        :navigate="navigate"/>
+                </FluxMenu>
+            </template>
+
+            <template
+                v-for="(filter, name) of filters"
+                #[name]>
+                <FluxMenu>
+                    <FluxMenuGroup
+                        :class="$style.filterHeader"
+                        is-horizontal>
+                        <FluxMenuItem
+                            :class="$style.filterBack"
+                            :label="translate('flux.back')"
+                            icon-leading="angle-left"
+                            @click="back()"/>
+
+                        <FluxMenuItem
+                            v-if="resettable?.includes(name)"
+                            :class="$style.filterReset"
+                            icon-leading="trash"
+                            is-destructive
+                            @click="reset(name)"
+                            style="flex-grow: 0"/>
+                    </FluxMenuGroup>
+
+                    <VNodeRenderer :vnode="filter"/>
+                </FluxMenu>
+            </template>
+        </FluxWindow>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { vHeightTransition } from '@flux-ui/internals';
+    import type { FluxFilterItem } from '@flux-ui/types';
+    import { unref, useTemplateRef, type VNode } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import { FilterMenuRenderer, VNodeRenderer } from './primitive';
+    import FluxMenu from './FluxMenu.vue';
+    import FluxMenuGroup from './FluxMenuGroup.vue';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import FluxWindow from './FluxWindow.vue';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        reset: [string]
+    }>();
+
+    defineProps<{
+        readonly filters: Record<string, VNode>;
+        readonly menuItems: (FluxFilterItem | VNode)[][];
+        readonly resettable?: string[];
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const translate = useTranslate();
+
+    const windowRef = useTemplateRef<{ back(to: string): void; }>('window');
+
+    function back(): void {
+        unref(windowRef)?.back('default');
+    }
+
+    function reset(name: string): void {
+        back();
+        emit('reset', name);
+    }
+</script>