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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.31",
+    "version": "3.0.0-next.32",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -53,8 +53,8 @@
     "dependencies": {
         "@basmilius/common": "^3.11.0",
         "@basmilius/utils": "^3.11.0",
-        "@flux-ui/internals": "3.0.0-next.31",
-        "@flux-ui/types": "3.0.0-next.31",
+        "@flux-ui/internals": "3.0.0-next.32",
+        "@flux-ui/types": "3.0.0-next.32",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

package/src/component/FluxCheckbox.vue

@@ -10,9 +10,9 @@
             :id="id"/>
 
         <button
+            aria-hidden="true"
             :class="$style.checkboxElement"
-            role="checkbox"
-            :aria-checked="modelValue ?? false">
+            tabindex="-1">
             <FluxIcon
                 v-if="isIndeterminate"
                 name="minus"

package/src/component/FluxFilterBar.vue

@@ -10,6 +10,7 @@
         <template #default="{ buttons, filters, menuItems }">
             <div :class="$style.filterBar">
                 <FluxFormInput
+                    v-if="isSearchable"
                     v-model="modelSearch"
                     :class="$style.filterBarSearch"
                     icon-leading="magnifying-glass"

package/src/component/FluxFormSlider.vue

@@ -115,7 +115,7 @@
         localValue.value = (unref(modelValue) - min) / (max - min);
     });
 
-    watch(([() => max, () => min, localValue, () => step]), () => {
+    watch([() => max, () => min, localValue, () => step], () => {
         const value = clampWithStepPrecision(unref(localValue), min, max, step);
         modelValue.value = value;
         percentage.value = (value - min) / (max - min);

package/src/component/FluxFormTreeViewSelect.vue

@@ -0,0 +1,359 @@
+<template>
+    <Anchor
+        ref="anchor"
+        :="$attrs"
+        :class="clsx(
+            $formStyle.formSelect,
+            disabled && $formStyle.isDisabled,
+            isPopupOpen && $formStyle.isFocused
+        )"
+        :id="id"
+        :aria-disabled="disabled ? true : undefined"
+        tabindex="0"
+        tag-name="div"
+        @click="toggle()"
+        @keydown="onKeyDown">
+
+        <template v-if="isMultiple && selectedOptions.length > 0">
+            <FluxTag
+                v-for="option in selectedOptions"
+                :key="option.id"
+                :label="option.label"
+                is-deletable
+                @delete="deselect(option.id)"/>
+        </template>
+
+        <template v-else-if="!isMultiple && selectedOptions[0]">
+            <span :class="$style.treeViewSelectValue">{{ selectedOptions[0].label }}</span>
+        </template>
+
+        <template v-else-if="placeholder">
+            <span :class="$formStyle.formSelectPlaceholder">{{ placeholder }}</span>
+        </template>
+
+        <FluxIcon
+            :class="$formStyle.formSelectIcon"
+            name="angle-down"/>
+    </Anchor>
+
+    <Teleport to="body">
+        <FluxFadeTransition>
+            <AnchorPopup
+                v-if="isPopupOpen && !disabled"
+                ref="anchorPopup"
+                :class="$formStyle.formSelectPopup"
+                :anchor="anchorRef"
+                direction="vertical"
+                use-anchor-width>
+
+                <FluxFormInput
+                    v-if="isSearchable"
+                    v-model="searchQuery"
+                    ref="searchInput"
+                    auto-complete="off"
+                    :class="$formStyle.formSelectInput"
+                    type="search"
+                    icon-trailing="magnifying-glass"
+                    :placeholder="translate('flux.search')"
+                    @keydown="onKeyDown"/>
+
+                <div :class="$style.treeViewSelectList">
+                    <div
+                        v-if="visibleNodes.length === 0"
+                        :class="$style.treeViewSelectEmpty">
+                        {{ translate('flux.noItems') }}
+                    </div>
+
+                    <template v-else>
+                        <div
+                            v-for="(node, nodeIndex) in visibleNodes"
+                            ref="nodeElements"
+                            :key="node.id"
+                            :class="clsx(
+                                $style.treeNode,
+                                node.selectable !== false && $style.isSelectable,
+                                node.selectable === false && !!node.children?.length && $style.isExpandable,
+                                selectedIds.has(node.id) && $style.isSelected,
+                                nodeIndex === highlightedIndex && $style.isHighlighted
+                            )"
+                            :role="node.selectable !== false ? 'option' : undefined"
+                            :tabindex="node.selectable !== false ? 0 : undefined"
+                            :aria-selected="node.selectable !== false ? selectedIds.has(node.id) : undefined"
+                            @click="onNodeClick(node)"
+                            @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)">
+                                    <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"/>
+                        </div>
+                    </template>
+                </div>
+            </AnchorPopup>
+        </FluxFadeTransition>
+    </Teleport>
+</template>
+
+<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 { 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 { 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 $formStyle from '$flux/css/component/Form.module.scss';
+    import $style from '$flux/css/component/TreeViewSelect.module.scss';
+
+    type FlatNode = TreeFlatNode<FluxFormTreeViewSelectOption>;
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const modelValue = defineModel<FluxFormTreeViewSelectValue>({ required: true });
+
+    const {
+        disabled: componentDisabled,
+        isMultiple,
+        isSearchable,
+        levelColors,
+        options,
+        placeholder
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly isMultiple?: boolean;
+        readonly isSearchable?: boolean;
+        readonly levelColors?: (FluxColor | string)[];
+        readonly options: FluxFormTreeViewSelectOption[];
+        readonly placeholder?: string;
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const {id} = useFormFieldInjection();
+    const translate = useTranslate();
+
+    const anchorRef = useTemplateRef<ComponentPublicInstance>('anchor');
+    const anchorPopupRef = useTemplateRef('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 selectedIds = computed(() => {
+        const value = unref(modelValue);
+        if (Array.isArray(value)) {
+            return new Set(value);
+        }
+        return new Set<string | number>(value !== undefined ? [value] : []);
+    });
+
+    const selectedOptions = computed(() => {
+        const ids = unref(selectedIds);
+        if (ids.size === 0) {
+            return [];
+        }
+        return flattenAll(options).filter(node => ids.has(node.id));
+    });
+
+    const visibleNodes = computed((): FlatNode[] => {
+        const query = unref(searchQuery).toLowerCase().trim();
+        if (query) {
+            return flattenAll(options)
+                .filter(node => node.label.toLowerCase().includes(query))
+                .map(node => ({...node, depth: 0, isLast: false, lineGuides: [] as boolean[]}));
+        }
+        return flattenVisible(options, 0, unref(expandedIds));
+    });
+
+    const {highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate} = useTreeView({
+        expandedIds,
+        nodeElementRefs,
+        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)];
+            if (current.includes(nodeId)) {
+                modelValue.value = current.filter(v => v !== nodeId);
+            } else {
+                modelValue.value = [...current, nodeId];
+            }
+        } else {
+            modelValue.value = nodeId;
+            isPopupOpen.value = false;
+        }
+    }
+
+    function deselect(nodeId: string | number): void {
+        const current = unref(modelValue);
+        if (Array.isArray(current)) {
+            modelValue.value = current.filter(v => v !== nodeId);
+        }
+        nextTick(() => unrefTemplateElement(anchorRef)?.focus());
+    }
+
+    function onNodeClick(node: FlatNode): void {
+        if (node.selectable !== false) {
+            select(node.id);
+            if (node.children?.length && !unref(expandedIds).has(node.id)) {
+                toggleExpand(node.id);
+            }
+        } else if (node.children?.length) {
+            toggleExpand(node.id);
+        }
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (!unref(isPopupOpen)) {
+            if (evt.key === 'Enter' || evt.key === ' ') {
+                evt.preventDefault();
+                isPopupOpen.value = true;
+            }
+            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]);
+                return;
+
+            case 'Escape':
+                isPopupOpen.value = false;
+                nextTick(() => unrefTemplateElement(anchorRef)?.focus());
+                return;
+
+            case 'Tab':
+                isPopupOpen.value = false;
+                return;
+        }
+
+        // When searchable, don't intercept letter keys — let the search input handle them
+        if (isSearchable && evt.key.length === 1 && evt.key !== 'Enter' && evt.key !== ' ') {
+            return;
+        }
+
+        onKeyNavigate(evt, onNodeClick);
+    }
+
+    watch(isPopupOpen, isOpen => {
+        if (!isOpen) {
+            searchQuery.value = '';
+            highlightedIndex.value = INITIAL_HIGHLIGHTED_INDEX;
+            return;
+        }
+
+        autoExpandSelected();
+
+        nextTick(() => {
+            const ids = unref(selectedIds);
+            if (ids.size > 0) {
+                const firstSelectedIndex = unref(visibleNodes).findIndex(n => ids.has(n.id));
+                if (firstSelectedIndex >= 0) {
+                    highlightedIndex.value = firstSelectedIndex;
+                }
+            }
+
+            unref(focusElement)?.focus();
+        });
+    });
+
+    watch(searchQuery, () => {
+        highlightedIndex.value = INITIAL_HIGHLIGHTED_INDEX;
+    });
+
+    function autoExpandSelected(): void {
+        const ids = unref(selectedIds);
+        if (ids.size === 0) {
+            return;
+        }
+
+        const expanded = new Set(unref(expandedIds));
+
+        function expandAncestors(nodes: FluxFormTreeViewSelectOption[], targetId: string | number): boolean {
+            for (const node of nodes) {
+                if (node.id === targetId) {
+                    return true;
+                }
+                if (node.children && expandAncestors(node.children, targetId)) {
+                    expanded.add(node.id);
+                    return true;
+                }
+            }
+            return false;
+        }
+
+        for (const selectedId of ids) {
+            expandAncestors(options, selectedId);
+        }
+
+        expandedIds.value = expanded;
+    }
+</script>

package/src/component/FluxOverflowBar.vue

@@ -21,7 +21,7 @@
             :class="$style.overflowBarOverflow">
             <slot
                 name="overflow"
-                v-bind="{items: hiddenItems}"/>
+                v-bind="{hasOverflow: hiddenItems.length > 0, items: hiddenItems}"/>
         </div>
     </div>
 
@@ -53,7 +53,7 @@
 
     const slots = defineSlots<{
         default?(): any;
-        overflow?(props: { items: VNode[] }): any;
+        overflow?(props: { hasOverflow: boolean; items: VNode[] }): any;
     }>();
 
     const barRef = useTemplateRef('bar');

package/src/component/FluxPressable.vue

@@ -2,42 +2,38 @@
     <router-link
         v-if="componentType === 'route'"
         v-bind="$attrs"
+        v-on="hoverListeners"
         :rel="rel"
         :target="target"
         :to="to as any"
-        @click="onClick($event)"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        @click="onClick($event)">
         <slot/>
     </router-link>
 
     <a
         v-else-if="componentType === 'link'"
         v-bind="$attrs"
+        v-on="hoverListeners"
         :href="href"
         :rel="rel"
         :target="target"
-        @click="onClick($event)"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        @click="onClick($event)">
         <slot/>
     </a>
 
     <button
         v-else-if="componentType === 'button'"
         v-bind="$attrs"
-        @click="onClick($event)"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        v-on="hoverListeners"
+        @click="onClick($event)">
         <slot/>
     </button>
 
     <div
         v-else
         v-bind="$attrs"
-        @click="onClick"
-        @mouseenter="$emit('mouseenter', $event)"
-        @mouseleave="$emit('mouseleave', $event)">
+        v-on="hoverListeners"
+        @click="onClick">
         <slot/>
     </div>
 </template>
@@ -65,6 +61,11 @@
         default(): any;
     }>();
 
+    const hoverListeners = {
+        onMouseenter: (evt: MouseEvent) => emit('mouseenter', evt),
+        onMouseleave: (evt: MouseEvent) => emit('mouseleave', evt)
+    };
+
     function onClick(evt: MouseEvent, navigate?: (evt: MouseEvent) => void): void {
         emit('click', evt);
 

package/src/component/FluxSegmentedControl.vue

@@ -41,9 +41,10 @@
 <script
     lang="ts"
     setup>
+    import { useResizeObserver } from '@basmilius/common';
     import type { FluxSegmentedControlItemObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { onMounted, onUpdated, ref, unref, useTemplateRef } from 'vue';
+    import { onBeforeUnmount, ref, unref, useTemplateRef, watchEffect } from 'vue';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/SegmentedControl.module.scss';
 
@@ -61,17 +62,43 @@
 
     const activeItemX = ref(0);
     const activeItemWidth = ref(0);
+    const isAlive = ref(true);
 
-    onMounted(() => activate(unref(modelValue)));
-    onUpdated(() => activate(unref(modelValue)));
+    onBeforeUnmount(() => {
+        isAlive.value = false;
+    });
+
+    watchEffect(() => updateHighlight(unref(modelValue)), {flush: 'post'});
+
+    useResizeObserver(controlRef, () => updateHighlight(unref(modelValue)));
 
     function activate(index: number): void {
-        const itemRef = itemRefs.value![index];
-        const {left: controlX} = controlRef.value!.getBoundingClientRect();
-        const {width, left: x} = itemRef.getBoundingClientRect();
+        modelValue.value = index;
+    }
+
+    function updateHighlight(index: number): void {
+        if (!isAlive.value) {
+            return;
+        }
 
-        activeItemX.value = x - controlX - 1;
+        const itemRef = itemRefs.value?.[index];
+        const control = controlRef.value;
+
+        if (!itemRef || !control) {
+            return;
+        }
+
+        const width = itemRef.offsetWidth;
+
+        if (width === 0) {
+            return;
+        }
+
+        const controlRect = control.getBoundingClientRect();
+        const itemRect = itemRef.getBoundingClientRect();
+        const scaleX = control.offsetWidth > 0 ? controlRect.width / control.offsetWidth : 1;
+
+        activeItemX.value = (itemRect.left - controlRect.left) / scaleX;
         activeItemWidth.value = width;
-        modelValue.value = index;
     }
 </script>

package/src/component/FluxTreeView.vue

@@ -0,0 +1,116 @@
+<template>
+    <div
+        :class="$style.treeView"
+        role="tree"
+        tabindex="0"
+        @keydown="onKeyDown">
+
+        <div
+            v-for="(node, nodeIndex) in visibleNodes"
+            ref="nodeElements"
+            :key="node.id"
+            :class="clsx(
+                $style.treeNode,
+                nodeIndex === highlightedIndex && $style.isHighlighted
+            )"
+            role="treeitem"
+            tabindex="-1"
+            :aria-expanded="node.children?.length ? expandedIds.has(node.id) : undefined"
+            @click="onNodeClick(node)"
+            @dblclick="onNodeDblClick(node)">
+
+            <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)">
+                    <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>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxTreeViewOption } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, ref, unref, useTemplateRef } from 'vue';
+    import { flattenVisible, getLevelColor, useTreeView } from '$flux/composable/private';
+    import type { TreeFlatNode } from '$flux/composable/private';
+    import FluxIcon from '$flux/component/FluxIcon.vue';
+    import $style from '$flux/css/component/TreeView.module.scss';
+
+    type FlatNode = TreeFlatNode<FluxTreeViewOption>;
+
+    const emit = defineEmits<{
+        click: [option: FluxTreeViewOption];
+        dblclick: [option: FluxTreeViewOption];
+    }>();
+
+    const {
+        levelColors,
+        options
+    } = defineProps<{
+        readonly levelColors?: (FluxColor | string)[];
+        readonly options: FluxTreeViewOption[];
+    }>();
+
+    const nodeElementRefs = useTemplateRef<HTMLDivElement[]>('nodeElements');
+
+    const expandedIds = ref(new Set<string | number>());
+
+    const visibleNodes = computed(() => flattenVisible(options, 0, unref(expandedIds)));
+
+    const {highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate} = useTreeView({
+        expandedIds,
+        nodeElementRefs,
+        visibleNodes,
+    });
+
+    function onNodeClick(node: FlatNode): void {
+        const index = unref(visibleNodes).findIndex(n => n.id === node.id);
+        highlightedIndex.value = index;
+
+        const {depth: _depth, isLast: _isLast, lineGuides: _lineGuides, ...option} = node;
+        emit('click', option as FluxTreeViewOption);
+    }
+
+    function onNodeDblClick(node: FlatNode): void {
+        if (node.children?.length) {
+            toggleExpand(node.id);
+        }
+
+        const {depth: _depth, isLast: _isLast, lineGuides: _lineGuides, ...option} = node;
+        emit('dblclick', option as FluxTreeViewOption);
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        onKeyNavigate(evt, onNodeClick);
+    }
+</script>

package/src/component/index.ts

@@ -67,6 +67,7 @@ export { default as FluxFormSelectAsync } from './FluxFormSelectAsync.vue';
 export { default as FluxFormSlider } from './FluxFormSlider.vue';
 export { default as FluxFormTextArea } from './FluxFormTextArea.vue';
 export { default as FluxFormTimeZonePicker } from './FluxFormTimeZonePicker.vue';
+export { default as FluxFormTreeViewSelect } from './FluxFormTreeViewSelect.vue';
 export { default as FluxGallery } from './FluxGallery.vue';
 export { default as FluxGalleryItem } from './FluxGalleryItem.vue';
 export { default as FluxGrid } from './FluxGrid.vue';
@@ -151,4 +152,5 @@ export { default as FluxToolbar } from './FluxToolbar.vue';
 export { default as FluxToolbarGroup } from './FluxToolbarGroup.vue';
 export { default as FluxTooltip } from './FluxTooltip.vue';
 export { default as FluxTooltipProvider } from './FluxTooltipProvider.vue';
+export { default as FluxTreeView } from './FluxTreeView.vue';
 export { default as FluxWindow } from './FluxWindow.vue';