@flux-ui/components 3.0.0-next.34 → 3.0.0-next.38

package/src/component/FluxFilterBar.vue

@@ -75,8 +75,9 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
+    import { computed, unref } from 'vue';
     import type { FluxFilterState } from '@flux-ui/types';
-    import { computed, unref } from "vue";
     import { FilterBadge, VNodeRenderer } from '$flux/component/primitive';
     import FluxFilterBase from './FluxFilterBase.vue';
     import FluxFilterWindow from './FluxFilterWindow.vue';
@@ -107,7 +108,7 @@
     }>();
 
     defineSlots<{
-        default?(): any;
+        default?(): VNode[];
     }>();
 
     const isFiltered = computed(() => Object.entries(unref(modelValue)).filter(([, val]) => Boolean(val)).length > 0);

package/src/component/FluxFilterBase.vue

@@ -6,11 +6,19 @@
     lang="ts"
     setup>
     import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
-    import type { FluxFilterItem, FluxFilterOptionItem, FluxFilterState } from '@flux-ui/types';
+    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]
@@ -29,9 +37,9 @@
             readonly buttons: Record<string, FluxFilterItem>;
             readonly filters: Record<string, VNode>;
             readonly menuItems: (FluxFilterItem | VNode)[][];
-        }): any;
+        }): VNode[];
 
-        filters(): any;
+        filters(): VNode[];
     }>();
 
     const buttons = computed(() => {
@@ -45,10 +53,10 @@
                 continue;
             }
 
-            const props = getComponentProps<Omit<FluxFilterItem, 'type'>>(item);
-            const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
+            const type = camelCase(name.substring(10)) as FluxFilterType;
+            const props = getComponentProps<FluxFilterSpecMap[FluxFilterType]>(item);
 
-            buttons[props.name] = filterParsers[type](props);
+            buttons[props.name] = applyParser(type, props);
         }
 
         return buttons;
@@ -92,10 +100,10 @@
             }
 
             if (name.startsWith('FluxFilter')) {
-                const props = getComponentProps<Omit<FluxFilterItem, 'type'>>(item);
-                const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
+                const type = camelCase(name.substring(10)) as FluxFilterType;
+                const props = getComponentProps<FluxFilterSpecMap[FluxFilterType]>(item);
 
-                menuItems[menuItems.length - 1].push(filterParsers[type](props));
+                menuItems[menuItems.length - 1].push(applyParser(type, props));
                 continue;
             }
 

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,11 +12,9 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef, useLoaded } from '@basmilius/common';
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, watch } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
-    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', {
@@ -39,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,11 +12,8 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef, useLoaded } from '@basmilius/common';
-    import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, watch } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
-    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', {
@@ -39,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

@@ -65,7 +65,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const translate = useTranslate();

package/src/component/FluxFlyout.vue

@@ -6,12 +6,12 @@
             '--opener-width': `${openerWidth}px`,
             '--pane-mx': `${paneMarginX}px`,
             '--pane-my': `${paneMarginY}px`,
-            '--pane-x': `${paneX - 24}px`,
-            '--pane-y': `${paneY - 24}px`
+            '--pane-x': `${paneX - 30}px`,
+            '--pane-y': `${paneY - 30}px`
         }">
         <slot
             name="opener"
-            v-bind="{close, open, toggle}"/>
+            v-bind="{close, open, toggle, isOpen: isOpen || isOpening || isClosing}"/>
 
         <dialog
             ref="dialog"
@@ -42,7 +42,7 @@
     import { isSSR, unrefTemplateElement, useEventListener, useFocusTrap } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { provide, ref, unref, useTemplateRef, watch } from 'vue';
+    import { provide, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
     import { FluxFlyoutInjectionKey } from '$flux/data';
     import FluxPane from './FluxPane.vue';
     import $style from '$flux/css/component/Flyout.module.scss';
@@ -65,13 +65,15 @@
             readonly paneY: number;
             readonly openerWidth: number;
             readonly openerHeight: number;
-        }): any;
+        }): VNode[];
 
         opener(props: {
             close(): void;
             open(): void;
             toggle(): void;
-        }): any;
+
+            readonly isOpen: boolean;
+        }): VNode[];
     }>();
 
     const dialogRef = useTemplateRef('dialog');
@@ -133,14 +135,14 @@
         const {top, left, width, height} = mount.children[0].getBoundingClientRect();
         const {width: paneWidth, height: paneHeight} = pane.getBoundingClientRect();
 
-        let x, y, mx = 0, my = 0;
+        let x: number, y: number, mx = 0, my = 0;
 
         if (direction === 'horizontal') {
             x = left + width;
             y = top + height / 2 - paneHeight / 2;
             mx = margin;
 
-            if (x + paneWidth > innerWidth - 30) {
+            if (x + paneWidth > innerWidth - 12) {
                 x = left - paneWidth;
                 mx = -mx;
             }
@@ -149,14 +151,14 @@
             y = top + height;
             my = margin;
 
-            if (y + paneHeight > innerHeight - 30) {
+            if (y + paneHeight > innerHeight - 12) {
                 y = top - paneHeight;
                 my = -my;
             }
         }
 
-        paneX.value = Math.max(30, Math.min(innerWidth - paneWidth - 30, x));
-        paneY.value = Math.max(30, Math.min(innerHeight - paneHeight - 30, y));
+        paneX.value = Math.max(12, Math.min(innerWidth - paneWidth - 12, x));
+        paneY.value = Math.max(12, Math.min(innerHeight - paneHeight - 12, y));
         paneMarginX.value = mx;
         paneMarginY.value = my;
     }

package/src/component/FluxForm.vue

@@ -12,6 +12,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxDisabled from './FluxDisabled.vue';
     import $style from '$flux/css/component/Form.module.scss';
 
@@ -26,7 +27,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     function onSubmit(): void {

package/src/component/FluxFormColumn.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/css/component/Form.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxFormDateInput.vue

@@ -5,7 +5,7 @@
         <template #opener="{open}">
             <FluxFormInputGroup>
                 <FluxFormInput
-                    :="{autoComplete, autoFocus, disabled, isReadonly, modelValue, placeholder}"
+                    :="{autoComplete, autoFocus, error, isCondensed, isLoading, isReadonly, isSecondary, name, placeholder}"
                     v-model="localValue"
                     :class="$style.formDateInput"
                     :disabled="disabled"
@@ -17,7 +17,7 @@
                     @show-picker="open"/>
 
                 <FluxSecondaryButton
-                    :disabled="disabled"
+                    :disabled="disabled || isReadonly"
                     icon-leading="calendar"
                     @click.prevent="open"/>
             </FluxFormInputGroup>
@@ -33,10 +33,11 @@
 <script
     lang="ts"
     setup>
-    import type { FluxAutoCompleteType } from '@flux-ui/types';
+    import type { FluxAutoCompleteType, FluxFormInputBaseProps } from '@flux-ui/types';
     import type { DateTime } from 'luxon';
-    import { ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { toRef, useTemplateRef } from 'vue';
     import { useDisabled } from '$flux/composable';
+    import { useDateFlyout } from '$flux/composable/private';
     import FluxDatePicker from './FluxDatePicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
@@ -55,20 +56,18 @@
 
     const {
         disabled: componentDisabled
-    } = defineProps<{
+    } = defineProps<FluxFormInputBaseProps & {
         readonly autoComplete?: FluxAutoCompleteType;
-        readonly autoFocus?: boolean;
-        readonly disabled?: boolean;
-        readonly isReadonly?: boolean;
         readonly max?: DateTime;
         readonly min?: DateTime;
-        readonly placeholder?: string;
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
     const flyoutRef = useTemplateRef('flyout');
 
-    const localValue = ref<DateTime | null>(null);
+    const localValue = useDateFlyout(modelValue, flyoutRef, {
+        compareKey: value => value?.toISODate()
+    });
 
     function onBlur(): void {
         emit('blur');
@@ -77,16 +76,4 @@
     function onFocus(): void {
         emit('focus');
     }
-
-    watch(modelValue, modelValue => localValue.value = modelValue, {immediate: true});
-
-    watch(localValue, localValue => {
-        unref(flyoutRef)?.close();
-
-        if (modelValue.value?.toISODate() === localValue?.toISODate()) {
-            return;
-        }
-
-        modelValue.value = localValue;
-    });
 </script>

package/src/component/FluxFormDateRangeInput.vue

@@ -3,18 +3,29 @@
         ref="flyout"
         :width="300">
         <template #opener="{open}">
-            <FluxFormInputGroup :aria-disabled="disabled ? true : undefined">
+            <FluxFormInputGroup
+                :aria-disabled="disabled ? true : undefined"
+                :aria-readonly="isReadonly ? true : undefined"
+                :aria-invalid="error ? true : undefined">
                 <div
                     :class="clsx(
                         $style.formDateRangeInput,
-                        disabled && $style.isDisabled
+                        disabled && $style.isDisabled,
+                        isCondensed && $style.isCondensed,
+                        isSecondary && $style.isSecondary,
+                        error && $style.isInvalid
                     )"
                     role="presentation">
-                    <span>{{ label }}</span>
+                    <span v-if="label">{{ label }}</span>
+                    <span
+                        v-else-if="placeholder"
+                        :class="$style.formSelectPlaceholder">
+                        {{ placeholder }}
+                    </span>
                 </div>
 
                 <FluxSecondaryButton
-                    :disabled="disabled"
+                    :disabled="disabled || isReadonly"
                     icon-leading="calendar"
                     @click.prevent="open"/>
             </FluxFormInputGroup>
@@ -31,10 +42,12 @@
 <script
     lang="ts"
     setup>
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import type { DateTime } from 'luxon';
-    import { computed, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { computed, toRef, unref, useTemplateRef } from 'vue';
     import { useDisabled } from '$flux/composable';
+    import { useDateFlyout } from '$flux/composable/private';
     import { createLabelForDateRange } from '$flux/util';
     import FluxDatePicker from './FluxDatePicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
@@ -49,8 +62,7 @@
     const {
         disabled: componentDisabled,
         rangeMode = 'range'
-    } = defineProps<{
-        readonly disabled?: boolean;
+    } = defineProps<FluxFormInputBaseProps & {
         readonly max?: DateTime;
         readonly min?: DateTime;
         readonly rangeMode?: 'range' | 'week' | 'month';
@@ -59,7 +71,7 @@
     const disabled = useDisabled(toRef(() => componentDisabled));
     const flyoutRef = useTemplateRef('flyout');
 
-    const localValue = ref<[DateTime, DateTime] | null>(null);
+    const localValue = useDateFlyout(modelValue, flyoutRef);
 
     const label = computed(() => {
         const value = unref(localValue);
@@ -72,11 +84,4 @@
 
         return createLabelForDateRange(start, end, true);
     });
-
-    watch(localValue, localValue => {
-        unref(flyoutRef)?.close();
-        modelValue.value = localValue;
-    });
-
-    watch(modelValue, modelValue => localValue.value = modelValue, {immediate: true});
 </script>