@flux-ui/components 3.0.0-next.9 → 3.1.0

package/src/component/FluxFormTreeViewSelect.vue

@@ -0,0 +1,336 @@
+<template>
+    <Anchor
+        ref="anchor"
+        :="$attrs"
+        :class="clsx(
+            $formStyle.formSelect,
+            disabled && $formStyle.isDisabled,
+            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()"
+        @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)">
+
+                            <TreeNodeRenderer
+                                :node="node"
+                                :expanded="expandedIds.has(node.id)"
+                                :level-colors="levelColors"
+                                @expand-click="onExpandClick(node, $event)">
+                                <template #trailing>
+                                    <FluxIcon
+                                        v-if="selectedIds.has(node.id)"
+                                        :class="$style.treeNodeCheck"
+                                        name="check"
+                                        :size="14"/>
+                                </template>
+                            </TreeNodeRenderer>
+                        </div>
+                    </template>
+                </div>
+            </AnchorPopup>
+        </FluxFadeTransition>
+    </Teleport>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    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/components/composable';
+    import { flattenAll, flattenVisible, INITIAL_HIGHLIGHTED_INDEX, type TreeFlatNode, useDropdownPopup, useTranslate, useTreeView } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import FluxFormInput from './FluxFormInput.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxTag from './FluxTag.vue';
+    import { Anchor, AnchorPopup, TreeNodeRenderer } from './primitive';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/TreeViewSelect.module.scss';
+
+    type FlatNode = TreeFlatNode<FluxFormTreeViewSelectOption>;
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const modelValue = defineModel<FluxFormTreeViewSelectValue>({required: true});
+
+    const {
+        disabled: componentDisabled,
+        isMultiple,
+        isReadonly,
+        isSearchable,
+        levelColors,
+        options,
+        placeholder
+    } = 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[];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const {id} = useFormFieldInjection();
+    const translate = useTranslate();
+
+    const anchorRef = useTemplateRef<ComponentPublicInstance>('anchor');
+    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 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)) {
+            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
+    });
+
+    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);
+        }
+        focusAnchor();
+    }
+
+    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;
+        }
+
+        if (evt.key === '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;
+        }
+
+        if (onKeyDownBase(evt)) {
+            return;
+        }
+
+        // When searchable, don't intercept letter keys — let the search input handle them
+        if (isSearchable && evt.key.length === 1 && evt.key !== 'Enter') {
+            if (evt.key !== ' ') {
+                return;
+            }
+
+            const searchElement = unrefTemplateElement(searchInputRef);
+
+            if (searchElement && evt.target instanceof Node && searchElement.contains(evt.target)) {
+                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;
+                }
+            }
+        });
+    });
+
+    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/FluxGallery.vue

@@ -1,8 +1,8 @@
 <template>
     <FluxDropZone
+        :class="$style.gallery"
         accept="image/*"
         :disabled="!isEditable"
-        :is-empty="items && items.length === 0"
         is-multiple
         placeholder-icon="image"
         :placeholder-button="translate('flux.galleryPlaceholderButton')"
@@ -11,7 +11,7 @@
         @select-multiple="onFilesSelected">
         <template #default="{showPicker}">
             <TransitionGroup
-                :class="$style.gallery"
+                :class="$style.galleryGrid"
                 :move-class="$style.galleryMove"
                 tag="div">
                 <template
@@ -58,11 +58,12 @@
     lang="ts"
     setup>
     import type { FluxFocalPointObject } from '@flux-ui/types';
-    import { useTranslate } from '$flux/composable/private';
+    import type { VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxDropZone from './FluxDropZone.vue';
     import FluxGalleryItem from './FluxGalleryItem.vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Gallery.module.scss';
+    import $style from '~flux/components/css/component/Gallery.module.scss';
 
     const emit = defineEmits<{
         delete: [number];
@@ -76,7 +77,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const translate = useTranslate();

package/src/component/FluxGalleryItem.vue

@@ -30,7 +30,7 @@
     import FluxFocalPointImage from './FluxFocalPointImage.vue';
     import FluxRemove from './FluxRemove.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Gallery.module.scss';
+    import $style from '~flux/components/css/component/Gallery.module.scss';
 
     const emit = defineEmits<{
         delete: [];

package/src/component/FluxGrid.vue

@@ -1,28 +1,31 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.grid"
         :style="{
             '--gap': `${gap}px`,
             '--columns': columns
         }">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Grid.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Grid.module.scss';
 
     const {
         columns = 12,
-        gap = 30
+        gap = 18
     } = defineProps<{
         readonly columns?: number;
         readonly gap?: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxGridColumn.vue

@@ -1,5 +1,6 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.gridColumn"
         :style="{
             '--xs': xs ?? 12,
@@ -9,13 +10,14 @@
             '--xl': xl ?? lg ?? md ?? sm ?? xs ?? 12
         }">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Grid.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Grid.module.scss';
 
     defineProps<{
         readonly xs?: number;
@@ -23,9 +25,10 @@
         readonly md?: number;
         readonly lg?: number;
         readonly xl?: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxGridPattern.vue

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

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"
@@ -17,18 +18,6 @@
             fill="currentColor"/>
     </svg>
 
-    <i
-        v-else-if="name"
-        :class="$style.materialSymbolIcon"
-        :style="{
-            fontSize: size && `${size}px`
-        }"
-        role="img"
-        aria-hidden="true"
-        @click="onClick">
-        {{ name }}
-    </i>
-
     <i
         v-else
         :class="$style.icon"/>
@@ -40,8 +29,8 @@
     import { warn } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { iconRegistry } from '$flux/data';
-    import $style from '$flux/css/component/Icon.module.scss';
+    import { iconRegistry } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Icon.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -50,6 +39,7 @@
     const {
         name
     } = defineProps<{
+        readonly ariaLabel?: string;
         readonly size?: number | string;
         readonly name?: FluxIconName;
     }>();

package/src/component/FluxInfo.vue

@@ -12,17 +12,18 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Info.module.scss';
+    import $style from '~flux/components/css/component/Info.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxInfoStack.vue

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

package/src/component/FluxItem.vue

@@ -0,0 +1,11 @@
+<template>
+    <div :class="$style.item">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '~flux/components/css/component/Item.module.scss';
+</script>

package/src/component/FluxItemActions.vue

@@ -0,0 +1,18 @@
+<template>
+    <FluxActionBar
+        :class="[$style.itemActions, isCenter && $style.isCenter]"
+        #primary>
+        <slot/>
+    </FluxActionBar>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxActionBar from './FluxActionBar.vue';
+    import $style from '~flux/components/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
+</script>

package/src/component/FluxItemContent.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="[$style.itemContent, isCenter && $style.isCenter]">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '~flux/components/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
+</script>

package/src/component/FluxItemMedia.vue

@@ -0,0 +1,20 @@
+<template>
+    <div
+        :class="[$style.itemMedia, isCenter && $style.isCenter]"
+        :style="{
+            '--size': size && `${size}px`
+        }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '~flux/components/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+        readonly size?: number;
+    }>();
+</script>

package/src/component/FluxItemStack.vue

@@ -0,0 +1,14 @@
+<template>
+    <FluxFlex
+        :class="$style.itemStack"
+        direction="vertical">
+        <slot/>
+    </FluxFlex>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxFlex from './FluxFlex.vue';
+    import $style from '~flux/components/css/component/Item.module.scss';
+</script>