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

package/src/component/FluxDivider.vue

@@ -6,7 +6,7 @@
             contentPlacement === 'end' && $style.dividerContentEnd
         )"
         role="separator"
-        aria-orientation="horizontal">
+        :aria-orientation="direction">
         <div
             v-if="slots.default"
             :class="$style.dividerContent">
@@ -22,16 +22,20 @@
 <script
     lang="ts"
     setup>
+    import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Divider.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Divider.module.scss';
 
     const {
-        contentPlacement = 'center'
+        contentPlacement = 'center',
+        direction = 'horizontal'
     } = defineProps<{
         readonly contentPlacement?: 'start' | 'center' | 'end';
+        readonly direction?: FluxDirection;
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
+        default?(): VNode[];
     }>();
 </script>

package/src/component/FluxDotPattern.vue

@@ -30,7 +30,7 @@
     lang="ts"
     setup>
     import { ref, useId, useTemplateRef, watch } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     const {
         width = 16,

package/src/component/FluxDropZone.vue

@@ -5,7 +5,10 @@
             isDragging && $style.isDragging,
             isDraggingOver && $style.isDraggingOver
         ]"
-        :aria-disabled="disabled ? true : undefined">
+        :aria-disabled="disabled ? true : undefined"
+        :aria-label="ariaLabel ?? translate('flux.dropFilesOrClick')"
+        :tabindex="disabled ? -1 : 0"
+        @keydown.self="onKeyDown">
         <div
             :class="$style.dropZoneContent"
             @dragleave.capture="onDragLeave"
@@ -52,11 +55,12 @@
     lang="ts"
     setup>
     import { roundStep } from '@basmilius/utils';
-    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, type VNode, watch } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/DropZone.module.scss';
+    import $style from '~flux/components/css/component/DropZone.module.scss';
 
     const emit = defineEmits<{
         select: [File];
@@ -65,10 +69,12 @@
 
     const {
         accept,
+        ariaLabel,
         disabled: componentDisabled,
         isMultiple
     } = defineProps<{
         readonly accept?: string;
+        readonly ariaLabel?: string;
         readonly disabled?: boolean;
         readonly isLoading?: boolean;
         readonly isMultiple?: boolean;
@@ -80,25 +86,26 @@
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
 
         actions?(props: {
             readonly isDragging: boolean;
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
 
         extra?(props: {
             readonly isDragging: boolean;
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
     }>();
 
     const contentRef = useTemplateRef('content');
     const disabled = useDisabled(toRef(() => componentDisabled));
+    const translate = useTranslate();
 
     const isDragging = ref(false);
     const isDraggingOver = ref(false);
@@ -111,11 +118,18 @@
     });
 
     onUnmounted(() => {
-        window.removeEventListener('dragleave', onWindowDragEnd);
-        window.removeEventListener('dragover', onWindowDragStart);
-        window.removeEventListener('drop', onWindowDrop);
+        window.removeEventListener('dragleave', onWindowDragEnd, {capture: true});
+        window.removeEventListener('dragover', onWindowDragStart, {capture: true});
+        window.removeEventListener('drop', onWindowDrop, {capture: true});
     });
 
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            showPicker();
+            evt.preventDefault();
+        }
+    }
+
     function onDragEnter(evt: DragEvent): void {
         isDraggingOver.value = true;
         evt.preventDefault();

package/src/component/FluxDynamicView.vue

@@ -7,7 +7,7 @@
 <script
     setup
     lang="ts">
-    import { VNode } from 'vue';
+    import type { VNode } from 'vue';
     import { VNodeRenderer } from './primitive';
 
     defineProps<{

package/src/component/FluxExpandable.vue

@@ -34,6 +34,7 @@
                 v-if="isOpen"
                 :class="$style.expandableBody"
                 :id="contentId"
+                role="region"
                 :aria-labelledby="headerId">
                 <slot
                     v-bind="{label, close}"
@@ -50,13 +51,13 @@
 <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';
-    import { FluxAutoHeightTransition, FluxFadeTransition } from '$flux/transition';
+    import { useExpandableGroupInjection } from '~flux/components/composable';
+    import { FluxAutoHeightTransition, FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Expandable.module.scss';
+    import $style from '~flux/components/css/component/Expandable.module.scss';
 
     const emit = defineEmits<{
         toggle: [boolean];
@@ -80,8 +81,8 @@
 
     const expandIcon = computed<FluxIconName>(() => unref(isOpen) ? 'minus' : 'plus');
 
-    onBeforeMount(() => register?.(unref(componentId), instance));
-    onUnmounted(() => unregister?.(unref(componentId)));
+    onBeforeMount(() => register?.(componentId.value, instance));
+    onUnmounted(() => unregister?.(componentId.value));
 
     function close(): void {
         isOpen.value = false;

package/src/component/FluxExpandableGroup.vue

@@ -8,9 +8,9 @@
     lang="ts"
     setup>
     import { getExposedRef } from '@flux-ui/internals';
-    import { ComponentInternalInstance, provide } from 'vue';
-    import { FluxExpandableGroupInjectionKey } from '$flux/data';
-    import $style from '$flux/css/component/Expandable.module.scss';
+    import { type ComponentInternalInstance, provide, type VNode } from 'vue';
+    import { FluxExpandableGroupInjectionKey } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Expandable.module.scss';
 
     const {
         isControlled
@@ -20,7 +20,7 @@
 
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const expandables: { [key: number]: ComponentInternalInstance; } = {};

package/src/component/FluxFader.vue

@@ -9,9 +9,10 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useInterval } from '@flux-ui/internals';
-    import { computed, ref, unref, useTemplateRef, watch } from 'vue';
-    import $style from '$flux/css/component/Fader.module.scss';
+    import { useInterval } from '@basmilius/common';
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import { computed, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
+    import $style from '~flux/components/css/component/Fader.module.scss';
 
     const emit = defineEmits<{
         update: [number];
@@ -29,7 +30,7 @@
             previous(): void;
 
             readonly current: number;
-        }): any;
+        }): VNode[];
     }>();
 
     const faderRef = useTemplateRef('fader');
@@ -47,13 +48,13 @@
     }
 
     function previous(): void {
-        current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) + 1;
+        current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) - 1;
     }
 
     watch(current, current => {
         const fader = unrefTemplateElement(faderRef);
 
-        if (!fader || fader.children.length === 0) {
+        if (!fader || fader.children.length === 0 || current < 0) {
             return;
         }
 

package/src/component/FluxFaderItem.vue

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

package/src/component/FluxFilter.vue

@@ -1,58 +1,29 @@
 <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 type { VNode } from 'vue';
+    import FluxFilterBase from './FluxFilterBase.vue';
+    import FluxFilterWindow from './FluxFilterWindow.vue';
 
     const emit = defineEmits<{
         reset: [string]
@@ -66,68 +37,11 @@
         readonly resettable?: string[];
     }>();
 
-    const slots = defineSlots<{
-        default(): any;
+    defineSlots<{
+        default(): VNode[];
     }>();
 
-    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,118 @@
+<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 { FluxFilterState } from '@flux-ui/types';
+    import { computed, unref, type VNode } from 'vue';
+    import { FilterBadge, VNodeRenderer } from '~flux/components/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 './FluxMenu.vue';
+    import FluxOverflowBar from './FluxOverflowBar.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxSeparator from './FluxSeparator.vue';
+    import $style from '~flux/components/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 { 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);
+    }
+
+    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>