@flux-ui/components 3.0.0-next.3 → 3.0.0-next.31

package/src/component/FluxExpandable.vue

@@ -50,7 +50,7 @@
 <script
     lang="ts"
     setup>
-    import { useComponentId } from '@flux-ui/internals';
+    import { useComponentId } from '@basmilius/common';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed, getCurrentInstance, onBeforeMount, onUnmounted, ref, unref, useId, watch } from 'vue';
     import { useExpandableGroupInjection } from '$flux/composable';

package/src/component/FluxExpandableGroup.vue

@@ -8,7 +8,7 @@
     lang="ts"
     setup>
     import { getExposedRef } from '@flux-ui/internals';
-    import { ComponentInternalInstance, provide } from 'vue';
+    import { type ComponentInternalInstance, provide } from 'vue';
     import { FluxExpandableGroupInjectionKey } from '$flux/data';
     import $style from '$flux/css/component/Expandable.module.scss';
 

package/src/component/FluxFader.vue

@@ -9,7 +9,8 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useInterval } from '@flux-ui/internals';
+    import { useInterval } from '@basmilius/common';
+    import { unrefTemplateElement } from '@flux-ui/internals';
     import { computed, ref, unref, useTemplateRef, watch } from 'vue';
     import $style from '$flux/css/component/Fader.module.scss';
 

package/src/component/FluxFilter.vue

@@ -1,58 +1,28 @@
 <template>
-    <div
-        v-height-transition
-        :class="$style.filter">
-        <FluxWindow ref="window">
-            <template #default="{navigate}">
-                <FilterMenuRenderer
-                    :navigate="navigate"
-                    :state="modelValue">
-                    <slot/>
-                </FilterMenuRenderer>
-            </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)"/>
-                    </FluxMenuGroup>
-
-                    <VNodeRenderer :vnode="filter"/>
-                </FluxMenu>
-            </template>
-        </FluxWindow>
-    </div>
+    <FluxFilterBase
+        v-model="modelValue"
+        :resettable="resettable"
+        @reset="reset">
+        <template #filters>
+            <slot/>
+        </template>
+
+        <template #default="{ filters, menuItems }">
+            <FluxFilterWindow
+                :filters="filters"
+                :menu-items="menuItems"
+                :resettable="resettable"
+                @reset="reset"/>
+        </template>
+    </FluxFilterBase>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { flattenVNodeTree, getComponentName, getComponentProps, vHeightTransition } from '@flux-ui/internals';
-    import type { FluxFilterOptionItem, FluxFilterState } from '@flux-ui/types';
-    import { computed, provide, unref, useTemplateRef, VNode } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFilterInjectionKey } from '$flux/data';
-    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';
+    import type { FluxFilterState } from '@flux-ui/types';
+    import FluxFilterBase from './FluxFilterBase.vue';
+    import FluxFilterWindow from '$flux/component/FluxFilterWindow.vue';
 
     const emit = defineEmits<{
         reset: [string]
@@ -66,68 +36,11 @@
         readonly resettable?: string[];
     }>();
 
-    const slots = defineSlots<{
+    defineSlots<{
         default(): any;
     }>();
 
-    const translate = useTranslate();
-
-    const windowRef = useTemplateRef<{ back(to: string): void; }>('window');
-
-    const filters = computed<Record<string, VNode>>(() => {
-        const filters: { [key: string]: VNode; } = {};
-        const items = flattenVNodeTree(slots.default?.() ?? []);
-
-        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;
-    });
-
-    function back(): void {
-        unref(windowRef)?.back('default');
-    }
-
     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/FluxFilterBar.vue

@@ -0,0 +1,117 @@
+<template>
+    <FluxFilterBase
+        v-model="modelValue"
+        :resettable="resettable"
+        @reset="reset">
+        <template #filters>
+            <slot/>
+        </template>
+
+        <template #default="{ buttons, filters, menuItems }">
+            <div :class="$style.filterBar">
+                <FluxFormInput
+                    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 { 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';
+    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?(): any;
+    }>();
+
+    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,141 @@
+<template>
+    <slot v-bind="{buttons, filters, menuItems}"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
+    import type { FluxFilterItem, FluxFilterOptionItem, FluxFilterState } from '@flux-ui/types';
+    import { computed, provide, unref, type VNode } from 'vue';
+    import { filterParsers, FluxFilterInjectionKey } from '$flux/data';
+    import { camelCase } from 'lodash-es';
+
+    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)[][];
+        }): any;
+
+        filters(): any;
+    }>();
+
+    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 props = getComponentProps<Omit<FluxFilterItem, 'type'>>(item);
+            const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
+
+            buttons[props.name] = filterParsers[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 props = getComponentProps<Omit<FluxFilterItem, 'type'>>(item);
+                const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
+
+                menuItems[menuItems.length - 1].push(filterParsers[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/FluxFilterOptionAsync.vue

@@ -12,11 +12,10 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    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 { useLoaded } from '$flux/composable/private';
     import { isFluxFilterOptionItem } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 

package/src/component/FluxFilterOptionsAsync.vue

@@ -12,11 +12,10 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    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 { useLoaded } from '$flux/composable/private';
     import { isFluxFilterOptionItem } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 

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(): any;
+    }>();
+
+    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>

package/src/component/FluxFlyout.vue

@@ -6,8 +6,8 @@
             '--opener-width': `${openerWidth}px`,
             '--pane-mx': `${paneMarginX}px`,
             '--pane-my': `${paneMarginY}px`,
-            '--pane-x': `${paneX - 12}px`,
-            '--pane-y': `${paneY - 12}px`
+            '--pane-x': `${paneX - 24}px`,
+            '--pane-y': `${paneY - 24}px`
         }">
         <slot
             name="opener"
@@ -39,7 +39,7 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useFocusTrap } from '@flux-ui/internals';
+    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';
@@ -88,6 +88,7 @@
     const paneMarginX = ref(0);
     const paneMarginY = ref(0);
 
+    !isSSR && useEventListener(ref(window), 'resize', () => unref(isOpen) && reposition());
     useFocusTrap(paneRef);
 
     function close(): void {

package/src/component/FluxForm.vue

@@ -1,12 +1,12 @@
 <template>
-    <FluxDisabled :disabled="disabled">
-        <form
-            :class="$style.form"
-            :aria-disabled="disabled ? true : undefined"
-            @submit.prevent="onSubmit()">
+    <form
+        :class="$style.form"
+        :aria-disabled="disabled ? true : undefined"
+        @submit.prevent="onSubmit()">
+        <FluxDisabled :disabled="disabled">
             <slot/>
-        </form>
-    </FluxDisabled>
+        </FluxDisabled>
+    </form>
 </template>
 
 <script

package/src/component/FluxFormGrid.vue

@@ -0,0 +1,23 @@
+<template>
+    <div
+        :class="$style.formGrid"
+        :style="{
+            '--columns': columns
+        }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Form.module.scss';
+
+    defineProps<{
+        readonly columns?: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxFormInput.vue

@@ -2,6 +2,7 @@
     <div
         :class="clsx(
             disabled ? $style.formInputDisabled : $style.formInputEnabled,
+            isCondensed && $style.isCondensed,
             isSecondary && $style.isSecondary
         )"
         :aria-disabled="disabled ? true : undefined">
@@ -48,6 +49,11 @@
             :class="$style.formInputIconTrailing"
             :name="iconTrailing"
             :size="18"/>
+
+        <FluxSpinner
+            v-if="isLoading"
+            :class="$style.formInputIconTrailing"
+            :size="18"/>
     </div>
 </template>
 
@@ -62,6 +68,7 @@
     import { useDisabled, useFormFieldInjection } from '$flux/composable';
     import { inputMask } from '$flux/data';
     import FluxIcon from './FluxIcon.vue';
+    import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/Form.module.scss';
 
     const emit = defineEmits<{
@@ -85,6 +92,8 @@
         readonly iconLeading?: FluxIconName;
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
+        readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;
@@ -208,7 +217,7 @@
 
         if (value) {
             mask.value = value;
-            localValue.value = mask.value;
+            modelValue.value = mask.value;
         }
 
         onCleanup(() => mask.destroy());

package/src/component/FluxFormInputGroup.vue

@@ -2,6 +2,7 @@
     <div
         :class="clsx(
             $style.formInputGroup,
+            isCondensed && $style.isCondensed,
             isSecondary && $style.isSecondary
         )"
         role="textbox">
@@ -17,6 +18,7 @@
 
     defineProps<{
         readonly isSecondary?: boolean;
+        readonly isCondensed?: boolean;
     }>();
 
     defineSlots<{