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

package/src/component/primitive/SelectBase.vue

@@ -9,7 +9,10 @@
             isSearchable && $style.isSearchable
         )"
         :id="id"
+        role="combobox"
         :aria-disabled="disabled ? true : undefined"
+        :aria-expanded="isPopupOpen"
+        aria-haspopup="listbox"
         tabindex="0"
         tag-name="div"
         @click="toggle()"
@@ -133,13 +136,12 @@
 <script
     lang="ts"
     setup>
-    import { useClickOutside } from '@basmilius/common';
     import { unrefTemplateElement } from '@flux-ui/internals';
     import type { FluxFormSelectOption, FluxFormSelectOptions } 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 { useTranslate } from '$flux/composable/private';
+    import { useDropdownPopup, useTranslate } from '$flux/composable/private';
     import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';
     import { FluxFadeTransition } from '$flux/transition';
     import FluxFormInput from '$flux/component/FluxFormInput.vue';
@@ -193,20 +195,27 @@
     const translate = useTranslate();
 
     const anchorRef = useTemplateRef<ComponentPublicInstance>('anchor');
-    const anchorPopupRef = useTemplateRef('anchorPopup');
+    const anchorPopupRef = useTemplateRef<ComponentPublicInstance>('anchorPopup');
     const optionElementRefs = useTemplateRef<typeof FluxMenuItem[]>('optionElements');
     const searchInputElementRef = useTemplateRef<ComponentPublicInstance<typeof FluxFormInput>>('searchInputElement');
 
     const highlightedIndex = ref(INITIAL_HIGHLIGHTED_INDEX);
     const isKeyboardAction = ref(false);
-    const isPopupOpen = ref(false);
 
     const focusElement = computed(() => unrefTemplateElement(searchInputElementRef) ?? unrefTemplateElement(anchorRef));
     const highlightedId = computed(() => unref(rawOptions)[unref(highlightedIndex)]?.value);
     const rawOptions = computed(() => options.map(group => group[1]).flat());
 
-    useClickOutside([anchorRef, anchorPopupRef], isPopupOpen, () => isPopupOpen.value = false);
-    useClickOutside(anchorRef, isPopupOpen, () => unref(focusElement)?.focus());
+    const {
+        isOpen: isPopupOpen,
+        toggle,
+        onKeyDownBase
+    } = useDropdownPopup({
+        anchorRef,
+        popupRef: anchorPopupRef,
+        focusElement,
+        disabled
+    });
 
     function deselect(id: string | number | null): void {
         emit('deselect', id);
@@ -217,7 +226,9 @@
     function select(id: string | number | null): void {
         emit('select', id);
 
-        !isMultiple && (isPopupOpen.value = false);
+        if (!isMultiple) {
+            isPopupOpen.value = false;
+        }
 
         highlightedIndex.value = INITIAL_HIGHLIGHTED_INDEX;
         modelSearch.value = '';
@@ -225,14 +236,6 @@
         nextTick(() => unref(focusElement)?.focus());
     }
 
-    function toggle(): void {
-        if (unref(disabled)) {
-            return;
-        }
-
-        isPopupOpen.value = !unref(isPopupOpen);
-    }
-
     function onKeyDown(evt: KeyboardEvent): void {
         emit('keyDown', evt);
 
@@ -246,6 +249,10 @@
 
         isKeyboardAction.value = true;
 
+        if (onKeyDownBase(evt)) {
+            return;
+        }
+
         if (unref(highlightedIndex) === INITIAL_HIGHLIGHTED_INDEX && ['ArrowDown', 'ArrowUp'].includes(evt.key)) {
             const options = unref(optionElementRefs);
             const selectedIndex = options?.findIndex(o => 'isActive' in o.$props && o.$props.isActive);
@@ -277,14 +284,6 @@
                 id && select(id);
                 break;
 
-            case 'Escape':
-                isPopupOpen.value = false;
-                break;
-
-            case 'Tab':
-                isPopupOpen.value = false;
-                return;
-
             default:
                 if (evt.key.length === 1) {
                     highlightedIndex.value = unref(rawOptions).findIndex(o => o.label.toLowerCase().startsWith(evt.key.toLowerCase()));
@@ -314,11 +313,6 @@
             return;
         }
 
-        nextTick(() => {
-            const searchInput = unref(searchInputElementRef);
-            searchInput?.focus();
-        });
-
         nextTick(() => {
             const options = unref(optionElementRefs);
 

package/src/component/primitive/SliderBase.vue

@@ -6,7 +6,6 @@
             disabled && $style.isDisabled,
             isDragging && $style.isDragging
         )"
-        role="slider"
         :aria-disabled="disabled ? true : undefined"
         @pointerdown="onPointerDown">
         <FluxTicks

package/src/component/primitive/SliderThumb.vue

@@ -8,7 +8,12 @@
         :style="{
             left: `${position * 100}%`
         }"
+        role="slider"
         :aria-disabled="disabled ? true : undefined"
+        :aria-label="ariaLabel"
+        :aria-valuemax="ariaValuemax"
+        :aria-valuemin="ariaValuemin"
+        :aria-valuenow="ariaValuenow"
         :tabindex="disabled ? -1 : 0"
         type="button"
         @keydown="onKeyDown"
@@ -32,6 +37,10 @@
     const {
         disabled: componentDisabled
     } = defineProps<{
+        readonly ariaLabel?: string;
+        readonly ariaValuemax?: number;
+        readonly ariaValuemin?: number;
+        readonly ariaValuenow?: number;
         readonly disabled?: boolean;
         readonly isDragging?: boolean;
         readonly position: number;

package/src/component/primitive/TreeNodeRenderer.vue

@@ -0,0 +1,77 @@
+<template>
+    <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($event)">
+            <FluxIcon
+                v-if="node.children?.length"
+                :name="expanded ? 'angle-down' : 'angle-right'"
+                :size="12"/>
+        </span>
+    </div>
+
+    <span
+        v-if="dotColor"
+        :class="$style.treeNodeColorDot"
+        :style="{ background: dotColor }"/>
+
+    <FluxIcon
+        v-if="node.icon"
+        :class="$style.treeNodeIcon"
+        :name="node.icon"
+        :size="16"/>
+
+    <span :class="$style.treeNodeLabel">{{ node.label }}</span>
+
+    <slot
+        name="trailing"
+        :node="node"/>
+</template>
+
+<script
+    lang="ts"
+    setup
+    generic="TOption extends TreeBaseOption">
+    import type { FluxColor } from '@flux-ui/types';
+    import { computed } from 'vue';
+    import type { TreeBaseOption, TreeFlatNode } from '$flux/composable/private';
+    import { getLevelColor } from '$flux/composable/private';
+    import FluxIcon from '$flux/component/FluxIcon.vue';
+    import $style from '$flux/css/component/primitive/TreeNode.module.scss';
+
+    const emit = defineEmits<{
+        expandClick: [MouseEvent];
+    }>();
+
+    const {
+        levelColors,
+        node
+    } = defineProps<{
+        readonly node: TreeFlatNode<TOption>;
+        readonly expanded: boolean;
+        readonly levelColors?: (FluxColor | string)[];
+    }>();
+
+    defineSlots<{
+        trailing?(props: { node: TreeFlatNode<TOption> }): any;
+    }>();
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const dotColor = computed(() => getLevelColor(node.depth, levelColors));
+
+    function onExpandClick(evt: MouseEvent): void {
+        emit('expandClick', evt);
+    }
+</script>

package/src/component/primitive/index.ts

@@ -1,5 +1,6 @@
 export { default as Anchor } from './Anchor.vue';
 export { default as AnchorPopup } from './AnchorPopup.vue';
+export { default as DialogLayout } from './DialogLayout.vue';
 export { default as FilterBadge } from './FilterBadge.vue';
 export { default as FilterItem } from './FilterItem.vue';
 export { default as FilterOptionBase } from './FilterOptionBase.vue';
@@ -7,6 +8,7 @@ export { default as SelectBase } from './SelectBase.vue';
 export { default as SliderBase } from './SliderBase.vue';
 export { default as SliderThumb } from './SliderThumb.vue';
 export { default as SliderTrack } from './SliderTrack.vue';
+export { default as TreeNodeRenderer } from './TreeNodeRenderer.vue';
 
 export { FilterMenuRenderer } from './FilterMenuRenderer';
 export { VNodeRenderer } from './VNodeRenderer';

package/src/composable/index.ts

@@ -1,6 +1,7 @@
 export { default as useBreakpoints } from './useBreakpoints';
 export { default as useDisabled } from './useDisabled';
 
+export { default as useAdaptiveGroupInjection } from './useAdaptiveGroupInjection';
 export { default as useDisabledInjection } from './useDisabledInjection';
 export { default as useExpandableGroupInjection } from './useExpandableGroupInjection';
 export { default as useFilterInjection } from './useFilterInjection';

package/src/composable/private/index.ts

@@ -1,4 +1,12 @@
+export { default as useAsyncFilterOptions } from './useAsyncFilterOptions';
+export { default as useDateFlyout } from './useDateFlyout';
+export { default as useDropdownPopup } from './useDropdownPopup';
+export type { UseDropdownPopupOptions, UseDropdownPopupReturn } from './useDropdownPopup';
 export { default as useFormSelect } from './useFormSelect';
 export { default as useTranslate } from './useTranslate';
+export { useCommandPalette } from './useCommandPalette';
+export type { CommandPaletteGroup, CommandPaletteResultItem } from './useCommandPalette';
+export { useFilterOptionMulti, useFilterOptionSingle } from './useFilterOption';
+export type { FilterOptionMulti, FilterOptionSingle } from './useFilterOption';
 export { flattenAll, flattenVisible, getLevelColor, INITIAL_HIGHLIGHTED_INDEX, useTreeView } from './useTreeView';
 export type { TreeBaseOption, TreeFlatNode } from './useTreeView';

package/src/composable/private/useAsyncFilterOptions.ts

@@ -0,0 +1,70 @@
+import { useDebouncedRef, useLoaded } from '@basmilius/common';
+import type { FluxFilterOptionRow, FluxFilterValue } from '@flux-ui/types';
+import { type ComputedRef, type ModelRef, computed, type Ref, ref, unref, watch } from 'vue';
+import { isFluxFilterOptionItem } from '$flux/data';
+
+type UseAsyncFilterOptionsParams = {
+    readonly currentValueIds: ComputedRef<FluxFilterValue[]>;
+    readonly modelSearch: ModelRef<string, string, string, string>;
+    fetchOptions(ids: FluxFilterValue[]): Promise<FluxFilterOptionRow[]>;
+    fetchRelevant(): Promise<FluxFilterOptionRow[]>;
+    fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
+};
+
+export default function ({
+    currentValueIds,
+    modelSearch,
+    fetchOptions: fetchOptionsProp,
+    fetchRelevant: fetchRelevantProp,
+    fetchSearch: fetchSearchProp
+}: UseAsyncFilterOptionsParams) {
+    const {isLoading, loaded} = useLoaded();
+    const debouncedModelSearch = useDebouncedRef(modelSearch, 150) as unknown as Ref<string>;
+    const fetchOptions = computed(() => loaded(fetchOptionsProp));
+    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
+    const fetchSearch = computed(() => loaded(fetchSearchProp));
+
+    const selectedOptions = ref<FluxFilterOptionRow[]>([]);
+    const visibleOptions = ref<FluxFilterOptionRow[]>([]);
+
+    const options = computed(() => {
+        const options: FluxFilterOptionRow[] = [];
+        const search = unref(modelSearch);
+        const selected = unref(selectedOptions);
+        const visible = unref(visibleOptions);
+
+        visible.forEach(vo => options.push(vo));
+
+        selected.forEach(so => {
+            if (isFluxFilterOptionItem(so) && visible.find(vo => isFluxFilterOptionItem(vo) && vo.value === so.value)) {
+                return;
+            }
+
+            if (isFluxFilterOptionItem(so) && !so.label.toLowerCase().includes(search.toLowerCase())) {
+                return;
+            }
+
+            options.push(so);
+        });
+
+        return options;
+    });
+
+    watch(currentValueIds, async ids => {
+        if (ids.length === 0) {
+            return;
+        }
+
+        selectedOptions.value = await unref(fetchOptions)(ids);
+    }, {immediate: true});
+
+    watch(debouncedModelSearch, async searchQuery => {
+        if (searchQuery.length > 0) {
+            visibleOptions.value = await unref(fetchSearch)(searchQuery);
+        } else {
+            visibleOptions.value = await unref(fetchRelevant)();
+        }
+    }, {immediate: true});
+
+    return {isLoading, options};
+}

package/src/composable/private/useCommandPalette.ts

@@ -47,7 +47,7 @@ export function useCommandPalette(params: {
     const isTransitioningBack = ref(false);
     const savedState = ref<{ readonly search: string; readonly highlightedIndex: number; } | null>(null);
     const asyncResults = ref<Map<string, FluxCommandSourceItem[]>>(new Map());
-    const debouncedSearch = useDebouncedRef(search, 300);
+    const debouncedSearch = useDebouncedRef(search, 300) as unknown as Ref<string>;
     let fetchGeneration = 0;
 
     const filteredItems = computed<CommandPaletteResultItem[]>(() => {

package/src/composable/private/useDateFlyout.ts

@@ -0,0 +1,34 @@
+import { type ModelRef, type Ref, ref, unref, watch } from 'vue';
+
+type FlyoutLike = {
+    close(): void;
+};
+
+type UseDateFlyoutOptions<T> = {
+    compareKey?(value: T | null): string | number | null | undefined;
+    transformIn?(value: T | null): T | null;
+};
+
+export default function <T>(
+    modelValue: ModelRef<T | null>,
+    flyoutRef: Readonly<Ref<FlyoutLike | null>>,
+    options: UseDateFlyoutOptions<T> = {}
+): Ref<T | null> {
+    const localValue = ref<T | null>(null) as Ref<T | null>;
+
+    watch(modelValue, value => {
+        localValue.value = options.transformIn ? options.transformIn(value) : value;
+    }, {immediate: true});
+
+    watch(localValue, value => {
+        unref(flyoutRef)?.close();
+
+        if (options.compareKey && options.compareKey(modelValue.value) === options.compareKey(value)) {
+            return;
+        }
+
+        modelValue.value = value;
+    });
+
+    return localValue;
+}

package/src/composable/private/useDropdownPopup.ts

@@ -0,0 +1,99 @@
+import { useClickOutside } from '@basmilius/common';
+import { unrefTemplateElement } from '@flux-ui/internals';
+import { type ComponentPublicInstance, nextTick, ref, type Ref, unref, watch } from 'vue';
+
+export type UseDropdownPopupOptions = {
+    readonly anchorRef: Readonly<Ref<ComponentPublicInstance | null | undefined>>;
+    readonly popupRef: Readonly<Ref<ComponentPublicInstance | null | undefined>>;
+    readonly focusElement: Readonly<Ref<HTMLElement | null | undefined>>;
+    readonly disabled?: Readonly<Ref<boolean>>;
+    readonly readonly?: Readonly<Ref<boolean>>;
+    readonly onOpen?: () => void;
+    readonly onClose?: () => void;
+};
+
+export type UseDropdownPopupReturn = {
+    readonly isOpen: Ref<boolean>;
+    readonly open: () => void;
+    readonly close: () => void;
+    readonly toggle: () => void;
+    readonly focusAnchor: () => void;
+    readonly onKeyDownBase: (evt: KeyboardEvent) => boolean;
+};
+
+/**
+ * Shared dropdown-popup infrastructure for select-like components. Manages:
+ * - open/close state
+ * - click-outside (close when clicking outside popup + anchor)
+ * - focus-back-to-anchor on close
+ * - focus-the-inner-focus-element on open
+ * - Escape/Tab keyboard handling
+ */
+export default function useDropdownPopup(options: UseDropdownPopupOptions): UseDropdownPopupReturn {
+    const isOpen = ref(false);
+
+    function open(): void {
+        if (unref(options.disabled) || unref(options.readonly)) {
+            return;
+        }
+
+        isOpen.value = true;
+    }
+
+    function close(): void {
+        isOpen.value = false;
+    }
+
+    function toggle(): void {
+        if (unref(options.disabled) || unref(options.readonly)) {
+            return;
+        }
+
+        isOpen.value = !unref(isOpen);
+    }
+
+    function focusAnchor(): void {
+        nextTick(() => unrefTemplateElement(options.anchorRef)?.focus());
+    }
+
+    function onKeyDownBase(evt: KeyboardEvent): boolean {
+        if (evt.key === 'Escape' && unref(isOpen)) {
+            evt.preventDefault();
+            isOpen.value = false;
+            focusAnchor();
+            return true;
+        }
+
+        if (evt.key === 'Tab' && unref(isOpen)) {
+            isOpen.value = false;
+            return true;
+        }
+
+        return false;
+    }
+
+    if (typeof window !== 'undefined') {
+        useClickOutside([options.anchorRef, options.popupRef], isOpen, () => isOpen.value = false);
+        useClickOutside(options.anchorRef, isOpen, () => unref(options.focusElement)?.focus());
+    }
+
+    watch(isOpen, opened => {
+        if (!opened) {
+            options.onClose?.();
+            return;
+        }
+
+        nextTick(() => unref(options.focusElement)?.focus());
+
+        options.onOpen?.();
+    });
+
+    return {
+        isOpen,
+        open,
+        close,
+        toggle,
+        focusAnchor,
+        onKeyDownBase
+    };
+}

package/src/composable/private/useFilterOption.ts

@@ -0,0 +1,59 @@
+import type { FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
+import { type ComputedRef, computed, unref } from 'vue';
+import { useFilterInjection } from '$flux/composable';
+
+export type FilterOptionSingle = {
+    readonly currentValue: ComputedRef<FluxFilterValueSingle>;
+    onSelect(value: FluxFilterValue): void;
+};
+
+export type FilterOptionMulti = {
+    readonly currentValue: ComputedRef<FluxFilterValueSingle[]>;
+    onSelect(value: FluxFilterValueSingle): void;
+};
+
+export function useFilterOptionSingle(name: string): FilterOptionSingle {
+    const {back, state, setValue} = useFilterInjection();
+
+    const currentValue = computed(() => unref(state)[name] as FluxFilterValueSingle);
+
+    function onSelect(value: FluxFilterValue): void {
+        if (unref(currentValue) === value) {
+            setValue(name, null);
+        } else {
+            setValue(name, value);
+        }
+
+        back();
+    }
+
+    return {currentValue, onSelect};
+}
+
+export function useFilterOptionMulti(name: string): FilterOptionMulti {
+    const {state, setValue} = useFilterInjection();
+
+    const currentValue = computed<FluxFilterValueSingle[]>(() => {
+        const value = unref(state)[name];
+
+        if (Array.isArray(value)) {
+            return value;
+        }
+
+        return [];
+    });
+
+    function onSelect(value: FluxFilterValueSingle): void {
+        let values = Array.from(unref(currentValue));
+
+        if (values.includes(value)) {
+            values = values.filter(v => v !== value);
+        } else {
+            values.push(value);
+        }
+
+        setValue(name, values);
+    }
+
+    return {currentValue, onSelect};
+}

package/src/composable/useAdaptiveGroupInjection.ts

@@ -0,0 +1,6 @@
+import { inject } from 'vue';
+import { FluxAdaptiveGroupInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxAdaptiveGroupInjectionKey, null);
+}

package/src/css/component/Action.module.scss

@@ -57,7 +57,7 @@
 }
 
 .basePaneStructure > .actionBar {
-    padding: 15px 21px;
+    padding: 12px 18px;
     background: var(--gray-50);
     border: 1px solid var(--gray-100);
     border-left: 0;
@@ -77,7 +77,7 @@
 }
 
 .paneHeader + .actionBar {
-    margin-top: 21px;
+    margin-top: 18px;
 }
 
 .actionPane {

package/src/css/component/AdaptiveSlot.module.scss

@@ -0,0 +1,25 @@
+.adaptiveGroup {
+    display: flex;
+    overflow: hidden;
+    flex-flow: row nowrap;
+    gap: var(--gap, 9px);
+    min-width: 0;
+}
+
+.adaptiveSlot {
+    display: flex;
+    overflow: hidden;
+    flex-flow: row nowrap;
+    min-width: 0;
+}
+
+.adaptiveSlotMeasurer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    visibility: hidden;
+    flex-flow: row nowrap;
+    width: max-content;
+    pointer-events: none;
+}

package/src/css/component/Avatar.module.scss

@@ -6,7 +6,7 @@
     height: 1em;
     width: 1em;
     flex: 0 0 1em;
-    border-radius: .5em;
+    border-radius: .3em;
     user-select: none;
 }
 
@@ -68,19 +68,18 @@
     backdrop-filter: blur(3px) saturate(180%);
 
     :local(.spinner) {
-        --track: rgb(0 0 0 / .12);
+        --track: rgb(from var(--gray-950) r g b / .12);
     }
 }
 
 .avatarStatus {
     position: absolute;
     display: block;
-    right: 0.0238095238em;
-    bottom: 0.0238095238em;
-    height: 0.285714286em;
-    width: 0.285714286em;
-    background: black;
-    border-radius: 99px;
+    right: .021em;
+    bottom: .021em;
+    height: .27em;
+    width: .27em;
+    border-radius: var(--radius-full);
 }
 
 .avatarStatusGray {
@@ -134,8 +133,8 @@
 
 .statusAvatar .avatarFallback,
 .statusAvatar .avatarImage {
-    mask: url('$flux/image/avatar-mask.svg') no-repeat center center / cover;
-    -webkit-mask: url('$flux/image/avatar-mask.svg') no-repeat center center / cover;
+    mask: radial-gradient(circle .18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
+    -webkit-mask: radial-gradient(circle .18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
 }
 
 .persona {
@@ -148,7 +147,7 @@
     border-radius: var(--radius);
     cursor: pointer;
     text-align: left;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, mixin.focus-ring-transition-properties();
 
     @include mixin.focus-ring(2px);