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

package/src/component/FluxFormTreeViewSelect.vue

@@ -5,10 +5,15 @@
         :class="clsx(
             $formStyle.formSelect,
             disabled && $formStyle.isDisabled,
-            isPopupOpen && $formStyle.isFocused
+            isPopupOpen && $formStyle.isFocused,
+            isCondensed && $formStyle.isCondensed,
+            isSecondary && $formStyle.isSecondary,
+            error && $formStyle.isInvalid
         )"
         :id="id"
         :aria-disabled="disabled ? true : undefined"
+        :aria-readonly="isReadonly ? true : undefined"
+        :aria-invalid="error ? true : undefined"
         tabindex="0"
         tag-name="div"
         @click="toggle()"
@@ -83,45 +88,19 @@
                             @keydown.enter.prevent="onNodeClick(node)"
                             @keydown.space.prevent="onNodeClick(node)">
 
-                            <!-- Line guides and expand button grouped without gap -->
-                            <div :class="$style.treeNodeLineArea">
-                                <span
-                                    v-for="(showLine, guideIndex) in node.lineGuides"
-                                    :key="`g-${guideIndex}`"
-                                    :class="[$style.treeIndent, showLine && $style.hasLine]"/>
-
-                                <span
-                                    v-if="node.depth > 0"
-                                    :class="[$style.treeConnector, node.isLast && $style.isLast]"/>
-
-                                <span
-                                    :class="$style.treeNodeExpand"
-                                    @click="onExpandClick(node, $event)">
+                            <TreeNodeRenderer
+                                :node="node"
+                                :expanded="expandedIds.has(node.id)"
+                                :level-colors="levelColors"
+                                @expand-click="onExpandClick(node, $event)">
+                                <template #trailing>
                                     <FluxIcon
-                                        v-if="node.children?.length"
-                                        :name="expandedIds.has(node.id) ? 'angle-down' : 'angle-right'"
-                                        :size="12"/>
-                                </span>
-                            </div>
-
-                            <span
-                                v-if="getLevelColor(node.depth, levelColors)"
-                                :class="$style.treeNodeColorDot"
-                                :style="{ background: getLevelColor(node.depth, levelColors) }"/>
-
-                            <FluxIcon
-                                v-if="node.icon"
-                                :class="$style.treeNodeIcon"
-                                :name="node.icon"
-                                :size="16"/>
-
-                            <span :class="$style.treeNodeLabel">{{ node.label }}</span>
-
-                            <FluxIcon
-                                v-if="selectedIds.has(node.id)"
-                                :class="$style.treeNodeCheck"
-                                name="check"
-                                :size="14"/>
+                                        v-if="selectedIds.has(node.id)"
+                                        :class="$style.treeNodeCheck"
+                                        name="check"
+                                        :size="14"/>
+                                </template>
+                            </TreeNodeRenderer>
                         </div>
                     </template>
                 </div>
@@ -133,20 +112,20 @@
 <script
     lang="ts"
     setup>
-    import { useClickOutside } from '@basmilius/common';
     import { unrefTemplateElement } from '@flux-ui/internals';
-    import type { FluxColor, FluxFormTreeViewSelectOption, FluxFormTreeViewSelectValue } from '@flux-ui/types';
+    import type { FluxColor, FluxFormInputBaseProps, FluxFormTreeViewSelectOption, FluxFormTreeViewSelectValue } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { type ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import { flattenAll, flattenVisible, getLevelColor, INITIAL_HIGHLIGHTED_INDEX, useTranslate, useTreeView } from '$flux/composable/private';
     import type { TreeFlatNode } from '$flux/composable/private';
+    import { flattenAll, flattenVisible, INITIAL_HIGHLIGHTED_INDEX, useDropdownPopup, useTranslate, useTreeView } from '$flux/composable/private';
     import { FluxFadeTransition } from '$flux/transition';
     import FluxFormInput from '$flux/component/FluxFormInput.vue';
     import FluxIcon from '$flux/component/FluxIcon.vue';
     import FluxTag from '$flux/component/FluxTag.vue';
     import Anchor from '$flux/component/primitive/Anchor.vue';
     import AnchorPopup from '$flux/component/primitive/AnchorPopup.vue';
+    import TreeNodeRenderer from '$flux/component/primitive/TreeNodeRenderer.vue';
     import $formStyle from '$flux/css/component/Form.module.scss';
     import $style from '$flux/css/component/TreeViewSelect.module.scss';
 
@@ -156,22 +135,21 @@
         inheritAttrs: false
     });
 
-    const modelValue = defineModel<FluxFormTreeViewSelectValue>({ required: true });
+    const modelValue = defineModel<FluxFormTreeViewSelectValue>({required: true});
 
     const {
         disabled: componentDisabled,
         isMultiple,
+        isReadonly,
         isSearchable,
         levelColors,
         options,
         placeholder
-    } = defineProps<{
-        readonly disabled?: boolean;
+    } = defineProps<Pick<FluxFormInputBaseProps, 'autoFocus' | 'disabled' | 'error' | 'isCondensed' | 'isLoading' | 'isReadonly' | 'isSecondary' | 'name' | 'placeholder'> & {
         readonly isMultiple?: boolean;
         readonly isSearchable?: boolean;
         readonly levelColors?: (FluxColor | string)[];
         readonly options: FluxFormTreeViewSelectOption[];
-        readonly placeholder?: string;
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
@@ -179,16 +157,28 @@
     const translate = useTranslate();
 
     const anchorRef = useTemplateRef<ComponentPublicInstance>('anchor');
-    const anchorPopupRef = useTemplateRef('anchorPopup');
+    const anchorPopupRef = useTemplateRef<ComponentPublicInstance>('anchorPopup');
     const nodeElementRefs = useTemplateRef<HTMLDivElement[]>('nodeElements');
     const searchInputRef = useTemplateRef<ComponentPublicInstance<typeof FluxFormInput>>('searchInput');
 
     const expandedIds = ref(new Set<string | number>());
-    const isPopupOpen = ref(false);
     const searchQuery = ref('');
 
     const focusElement = computed(() => unrefTemplateElement(searchInputRef) ?? unrefTemplateElement(anchorRef));
 
+    const {
+        isOpen: isPopupOpen,
+        toggle,
+        focusAnchor,
+        onKeyDownBase
+    } = useDropdownPopup({
+        anchorRef,
+        popupRef: anchorPopupRef,
+        focusElement,
+        disabled,
+        readonly: toRef(() => !!isReadonly)
+    });
+
     const selectedIds = computed(() => {
         const value = unref(modelValue);
         if (Array.isArray(value)) {
@@ -218,19 +208,9 @@
     const {highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate} = useTreeView({
         expandedIds,
         nodeElementRefs,
-        visibleNodes,
+        visibleNodes
     });
 
-    useClickOutside([anchorRef, anchorPopupRef], isPopupOpen, () => isPopupOpen.value = false);
-    useClickOutside(anchorRef, isPopupOpen, () => unref(focusElement)?.focus());
-
-    function toggle(): void {
-        if (unref(disabled)) {
-            return;
-        }
-        isPopupOpen.value = !unref(isPopupOpen);
-    }
-
     function select(nodeId: string | number): void {
         if (unref(isMultiple)) {
             const current = [...unref(selectedIds)];
@@ -250,7 +230,7 @@
         if (Array.isArray(current)) {
             modelValue.value = current.filter(v => v !== nodeId);
         }
-        nextTick(() => unrefTemplateElement(anchorRef)?.focus());
+        focusAnchor();
     }
 
     function onNodeClick(node: FlatNode): void {
@@ -273,26 +253,20 @@
             return;
         }
 
-        switch (evt.key) {
-            case 'Backspace':
-                if (!unref(isMultiple)) {
-                    return;
-                }
-                if (unref(searchQuery).length > 0 || unref(selectedIds).size === 0) {
-                    return;
-                }
-                const selectedList = [...unref(selectedIds)];
-                deselect(selectedList[selectedList.length - 1]);
+        if (evt.key === 'Backspace') {
+            if (!unref(isMultiple)) {
                 return;
-
-            case 'Escape':
-                isPopupOpen.value = false;
-                nextTick(() => unrefTemplateElement(anchorRef)?.focus());
+            }
+            if (unref(searchQuery).length > 0 || unref(selectedIds).size === 0) {
                 return;
+            }
+            const selectedList = [...unref(selectedIds)];
+            deselect(selectedList[selectedList.length - 1]);
+            return;
+        }
 
-            case 'Tab':
-                isPopupOpen.value = false;
-                return;
+        if (onKeyDownBase(evt)) {
+            return;
         }
 
         // When searchable, don't intercept letter keys — let the search input handle them
@@ -320,8 +294,6 @@
                     highlightedIndex.value = firstSelectedIndex;
                 }
             }
-
-            unref(focusElement)?.focus();
         });
     });
 

package/src/component/FluxGallery.vue

@@ -57,6 +57,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxFocalPointObject } from '@flux-ui/types';
     import { useTranslate } from '$flux/composable/private';
     import FluxDropZone from './FluxDropZone.vue';
@@ -76,7 +77,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const translate = useTranslate();

package/src/component/FluxGrid.vue

@@ -12,17 +12,18 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/css/component/Grid.module.scss';
 
     const {
         columns = 12,
-        gap = 21
+        gap = 18
     } = defineProps<{
         readonly columns?: number;
         readonly gap?: number;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxGridColumn.vue

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

package/src/component/FluxIcon.vue

@@ -8,8 +8,9 @@
             scale: definition.scale > 1 ? definition.scale : undefined
         }"
         focusable="false"
-        role="img"
-        aria-hidden="true"
+        :role="ariaLabel ? 'img' : undefined"
+        :aria-hidden="ariaLabel ? undefined : true"
+        :aria-label="ariaLabel"
         @click="onClick">
         <path
             v-for="path in definition.paths"
@@ -38,6 +39,7 @@
     const {
         name
     } = defineProps<{
+        readonly ariaLabel?: string;
         readonly size?: number | string;
         readonly name?: FluxIconName;
     }>();

package/src/component/FluxInfo.vue

@@ -14,6 +14,7 @@
 <script
     setup
     lang="ts">
+    import type { VNode } from 'vue';
     import type { FluxIconName } from '@flux-ui/types';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Info.module.scss';
@@ -23,6 +24,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxInfoStack.vue

@@ -1,7 +1,7 @@
 <template>
     <FluxStack
         direction="vertical"
-        :gap="21">
+        :gap="18">
         <slot/>
     </FluxStack>
 </template>
@@ -9,9 +9,10 @@
 <script
     setup
     lang="ts">
+    import type { VNode } from 'vue';
     import FluxStack from './FluxStack.vue';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxLayerPane.vue

@@ -0,0 +1,16 @@
+<template>
+    <div :class="$style.layerPane">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '$flux/css/component/LayerPane.module.scss';
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxLayerPaneSecondary.vue

@@ -0,0 +1,16 @@
+<template>
+    <div :class="$style.layerPaneSecondary">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '$flux/css/component/LayerPane.module.scss';
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxLegend.vue

@@ -1,14 +1,14 @@
 <template>
     <div :class="direction === 'horizontal' ? $style.legendHorizontal : $style.legendVertical">
-        <template v-for="item of items">
-            <span
-                :class="$style.legendItem"
-                :style="{
-                    '--color': item.color
-                }">
-                {{ item.label }}
-            </span>
-        </template>
+        <span
+            v-for="(item, index) of items"
+            :key="index"
+            :class="$style.legendItem"
+            :style="{
+                '--color': item.color
+            }">
+            {{ item.label }}
+        </span>
     </div>
 </template>
 

package/src/component/FluxMenu.vue

@@ -12,7 +12,7 @@
     lang="ts"
     setup>
     import { useFocusZone } from '@flux-ui/internals';
-    import { useTemplateRef } from 'vue';
+    import { useTemplateRef, type VNode } from 'vue';
     import $style from '$flux/css/component/Menu.module.scss';
 
     defineProps<{
@@ -20,7 +20,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const elementRef = useTemplateRef('element');

package/src/component/FluxMenuCollapsible.vue

@@ -0,0 +1,187 @@
+<template>
+    <div :class="isOpen ? $style.menuCollapsibleOpened : $style.menuCollapsible">
+        <FluxMenuItem
+            :disabled="disabled"
+            :href="href"
+            :icon-leading="iconLeading"
+            :icon-trailing="isOpen ? 'angle-down' : 'angle-right'"
+            :label="label"
+            :rel="rel"
+            :target="target"
+            :to="to"
+            :aria-expanded="isOpen"
+            :aria-controls="bodyId"
+            @click="onHeaderClick">
+            <template
+                v-if="slots.before"
+                #before>
+                <slot name="before"/>
+            </template>
+        </FluxMenuItem>
+
+        <FluxAutoHeightTransition>
+            <div
+                v-if="isOpen"
+                :id="bodyId"
+                :class="$style.menuCollapsibleBody"
+                role="group">
+                <div :class="$style.menuCollapsibleContent">
+                    <slot/>
+                </div>
+            </div>
+        </FluxAutoHeightTransition>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName, FluxTo } from '@flux-ui/types';
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import { computed, getCurrentInstance, ref, useId, type VNode, watch } from 'vue';
+    import { FluxAutoHeightTransition } from '$flux/transition';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import $style from '$flux/css/component/Menu.module.scss';
+
+    type RouteRecordLike = {
+        readonly name?: string | symbol | null | undefined;
+    };
+
+    type RouteLike = {
+        readonly path: string;
+        readonly matched: readonly RouteRecordLike[];
+    };
+
+    type RouteAwareInstance = {
+        readonly $route?: RouteLike;
+    };
+
+    const emit = defineEmits<{
+        toggle: [boolean];
+        'update:isOpened': [boolean];
+    }>();
+
+    const {
+        href,
+        isOpened,
+        to
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly href?: string;
+        readonly iconLeading?: FluxIconName | null;
+        readonly isOpened?: boolean;
+        readonly label?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+        before(): VNode[];
+    }>();
+
+    const bodyId = useId();
+    const instance = getCurrentInstance();
+    const isOpen = ref(!!isOpened);
+    const route = computed<RouteLike | undefined>(() => (instance?.proxy as RouteAwareInstance | null)?.$route);
+
+    function open(): void {
+        if (isOpen.value) {
+            return;
+        }
+
+        isOpen.value = true;
+        emit('toggle', true);
+        emit('update:isOpened', true);
+    }
+
+    function close(): void {
+        if (!isOpen.value) {
+            return;
+        }
+
+        isOpen.value = false;
+        emit('toggle', false);
+        emit('update:isOpened', false);
+    }
+
+    function toggle(): void {
+        if (isOpen.value) {
+            close();
+        } else {
+            open();
+        }
+    }
+
+    function onHeaderClick(): void {
+        if (to || href) {
+            open();
+        } else {
+            toggle();
+        }
+    }
+
+    function matchesRoute(target: unknown, currentRoute: RouteLike | undefined): boolean {
+        if (!target || !currentRoute) {
+            return false;
+        }
+
+        if (typeof target === 'string') {
+            return currentRoute.path === target || currentRoute.path.startsWith(`${target}/`);
+        }
+
+        if (typeof target === 'object') {
+            const obj = target as Record<string, unknown>;
+
+            if (typeof obj.path === 'string') {
+                return currentRoute.path === obj.path || currentRoute.path.startsWith(`${obj.path}/`);
+            }
+
+            if (obj.name && Array.isArray(currentRoute.matched)) {
+                return currentRoute.matched.some(record => record.name === obj.name);
+            }
+        }
+
+        return false;
+    }
+
+    watch(() => isOpened, value => {
+        if (value === undefined) {
+            return;
+        }
+
+        if (value) {
+            open();
+        } else {
+            close();
+        }
+    });
+
+    watch(route, currentRoute => {
+        if (!currentRoute) {
+            return;
+        }
+
+        const vnodes = flattenVNodeTree(slots.default?.() ?? []);
+
+        for (const vnode of vnodes) {
+            const childTo = vnode.props?.to;
+            const childHref = vnode.props?.href;
+
+            if (matchesRoute(childTo, currentRoute) || matchesRoute(childHref, currentRoute)) {
+                open();
+                return;
+            }
+        }
+    }, {
+        immediate: true
+    });
+
+    defineExpose({
+        isOpen,
+        open,
+        close,
+        toggle
+    });
+</script>

package/src/component/FluxMenuGroup.vue

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

package/src/component/FluxMenuItem.vue

@@ -33,6 +33,12 @@
                 :alt="imageAlt ?? ''"/>
         </template>
 
+        <template
+            v-else-if="slots.before"
+            #iconLeading>
+            <slot name="before"/>
+        </template>
+
         <template
             v-if="command || commandIcon || commandLoading || slots.after"
             #after>
@@ -62,6 +68,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxButtonEmits, FluxButtonProps, FluxIconName } from '@flux-ui/types';
     import FluxButton from './FluxButton.vue';
     import FluxIcon from './FluxIcon.vue';
@@ -71,7 +78,8 @@
     defineEmits<FluxButtonEmits>();
 
     const slots = defineSlots<{
-        after(): any;
+        after(): VNode[];
+        before(): VNode[];
     }>();
 
     const {

package/src/component/FluxMenuOptions.vue

@@ -25,7 +25,7 @@
     }>();
 
     const slots = defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const items = computed(() => flattenVNodeTree(slots.default())