@flux-ui/components 3.0.0-next.5 → 3.0.0-next.52

package/src/component/FluxTimeline.vue

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

package/src/component/FluxTimelineItem.vue

@@ -52,6 +52,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';
@@ -68,6 +69,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxToggle.vue

@@ -4,10 +4,14 @@
             $style.toggle,
             modelValue && $style.isChecked,
             disabled && $style.isDisabled,
+            isReadonly && $style.isReadonly,
+            error && $style.isInvalid,
             isSwitch && $style.isSwitch
         )"
         :for="id"
-        :aria-disabled="disabled ? true : undefined">
+        :aria-disabled="disabled ? true : undefined"
+        :aria-readonly="isReadonly ? true : undefined"
+        :aria-invalid="error ? true : undefined">
         <FluxIcon
             v-if="iconOff"
             :class="$style.toggleIconOff"
@@ -28,6 +32,7 @@
             :checked="modelValue"
             role="switch"
             :aria-checked="modelValue"
+            @click="onClick"
             @input="toggle"/>
     </label>
 </template>
@@ -35,7 +40,7 @@
 <script
     lang="ts"
     setup>
-    import type { FluxIconName } from '@flux-ui/types';
+    import type { FluxFormInputBaseProps, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { toRef } from 'vue';
     import { useDisabled, useFormFieldInjection } from '$flux/composable';
@@ -47,18 +52,28 @@
     });
 
     const {
-        disabled: componentDisabled
-    } = defineProps<{
+        disabled: componentDisabled,
+        isReadonly
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly'> & {
         readonly iconOff?: FluxIconName;
         readonly iconOn?: FluxIconName;
-        readonly disabled?: boolean;
         readonly isSwitch?: boolean;
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
     const {id} = useFormFieldInjection();
 
+    function onClick(evt: MouseEvent): void {
+        if (isReadonly) {
+            evt.preventDefault();
+        }
+    }
+
     function toggle(evt: Event): void {
+        if (isReadonly) {
+            return;
+        }
+
         modelValue.value = (evt.target as HTMLInputElement).checked;
     }
 </script>

package/src/component/FluxToolbar.vue

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

package/src/component/FluxToolbarGroup.vue

@@ -10,9 +10,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxStack from './FluxStack.vue';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxTooltip.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, PropType, ref, SlotsType, VNode } from 'vue';
+    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, type PropType, ref, type SlotsType, type VNode } from 'vue';
     import { addTooltip, removeTooltip } from '$flux/data';
 
     export default defineComponent({
@@ -20,12 +20,14 @@
                 const elm = instance.proxy!.$el;
                 elm.addEventListener('mouseenter', onHover, {passive: true});
                 elm.addEventListener('mouseleave', onLeave, {passive: true});
+                window.addEventListener('scroll', onLeave, {capture: true});
             });
 
             onUnmounted(() => {
                 const elm = instance.proxy!.$el;
                 elm.removeEventListener('mouseenter', onHover);
                 elm.removeEventListener('mouseleave', onLeave);
+                window.removeEventListener('scroll', onLeave, {capture: true});
                 onLeave();
             });
 

package/src/component/FluxTooltipProvider.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { computed, defineComponent, h, ref, unref, watch } from 'vue';
-    import { useFluxStore } from '$flux/data';
+    import { computed, defineComponent, h, provide, ref, unref, watch } from 'vue';
+    import { FluxTooltipInjectionKey, useFluxStore } from '$flux/data';
     import { FluxTooltipTransition } from '$flux/transition';
     import $style from '$flux/css/component/Tooltip.module.scss';
 
@@ -60,7 +60,11 @@
             }
         }
 
-        watch(content, () => requestAnimationFrame(() => calculate()));
+        provide(FluxTooltipInjectionKey, {
+            calculate
+        });
+
+        watch(content, () => requestAnimationFrame(calculate));
 
         return () => h(FluxTooltipTransition, {}, {
             default: () => {

package/src/component/FluxTreeView.vue

@@ -0,0 +1,90 @@
+<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"
+            :aria-level="node.depth + 1"
+            @click="onNodeClick(node)"
+            @dblclick="onNodeDblClick(node)">
+
+            <TreeNodeRenderer
+                :node="node"
+                :expanded="expandedIds.has(node.id)"
+                :level-colors="levelColors"
+                @expand-click="onExpandClick(node, $event)"/>
+        </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 type { TreeFlatNode } from '$flux/composable/private';
+    import { flattenVisible, useTreeView } from '$flux/composable/private';
+    import TreeNodeRenderer from '$flux/component/primitive/TreeNodeRenderer.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/FluxWindow.vue

@@ -12,14 +12,14 @@
 <script
     lang="ts"
     setup>
-    import { ref } from 'vue';
+    import { ref, type VNode } from 'vue';
     import { FluxWindowTransition } from '$flux/transition';
 
     const slots = defineSlots<{
         default(props: {
             back(to?: string): void;
             navigate(to: string): void;
-        }): any;
+        }): VNode[];
 
         [key: string]: (props: {
             back(to?: string): void;

package/src/component/index.ts

@@ -1,10 +1,11 @@
 export { default as FluxAction } from './FluxAction.vue';
 export { default as FluxActionBar } from './FluxActionBar.vue';
 export { default as FluxActionPane } from './FluxActionPane.vue';
-export { default as FluxActions } from './FluxActions.vue';
+export { default as FluxActionStack } from './FluxActionStack.vue';
+export { default as FluxAdaptiveGroup } from './FluxAdaptiveGroup.vue';
+export { default as FluxAdaptiveSlot } from './FluxAdaptiveSlot.vue';
 export { default as FluxAnimatedColors } from './FluxAnimatedColors.vue';
 export { default as FluxAspectRatio } from './FluxAspectRatio.vue';
-export { default as FluxAutoGrid } from './FluxAutoGrid.vue';
 export { default as FluxAvatar } from './FluxAvatar.vue';
 export { default as FluxBadge } from './FluxBadge.vue';
 export { default as FluxBadgeStack } from './FluxBadgeStack.vue';
@@ -18,9 +19,13 @@ export { default as FluxCalendarEvent } from './FluxCalendarEvent.vue';
 export { default as FluxCheckbox } from './FluxCheckbox.vue';
 export { default as FluxChip } from './FluxChip.vue';
 export { default as FluxClickablePane } from './FluxClickablePane.vue';
+export { default as FluxCommandPalette } from './FluxCommandPalette.vue';
+export { default as FluxCommandPaletteGroup } from './FluxCommandPaletteGroup.vue';
+export { default as FluxCommandPaletteItem } from './FluxCommandPaletteItem.vue';
 export { default as FluxComment } from './FluxComment.vue';
 export { default as FluxColorPicker } from './FluxColorPicker.vue';
 export { default as FluxColorSelect } from './FluxColorSelect.vue';
+export { default as FluxColumn } from './FluxColumn.vue';
 export { default as FluxContainer } from './FluxContainer.vue';
 export { default as FluxDataTable } from './FluxDataTable.vue';
 export { default as FluxDatePicker } from './FluxDatePicker.vue';
@@ -35,6 +40,7 @@ export { default as FluxExpandableGroup } from './FluxExpandableGroup.vue';
 export { default as FluxFader } from './FluxFader.vue';
 export { default as FluxFaderItem } from './FluxFaderItem.vue';
 export { default as FluxFilter } from './FluxFilter.vue';
+export { default as FluxFilterBar } from './FluxFilterBar.vue';
 export { default as FluxFilterDate } from './FluxFilterDate.vue';
 export { default as FluxFilterDateRange } from './FluxFilterDateRange.vue';
 export { default as FluxFilterOption } from './FluxFilterOption.vue';
@@ -53,6 +59,7 @@ export { default as FluxFormDateRangeInput } from './FluxFormDateRangeInput.vue'
 export { default as FluxFormDateTimeInput } from './FluxFormDateTimeInput.vue';
 export { default as FluxFormField } from './FluxFormField.vue';
 export { default as FluxFormFieldAddition } from './FluxFormFieldAddition.vue';
+export { default as FluxFormGrid } from './FluxFormGrid.vue';
 export { default as FluxFormInput } from './FluxFormInput.vue';
 export { default as FluxFormInputAddition } from './FluxFormInputAddition.vue';
 export { default as FluxFormInputGroup } from './FluxFormInputGroup.vue';
@@ -65,6 +72,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';
@@ -73,9 +81,17 @@ export { default as FluxGridPattern } from './FluxGridPattern.vue';
 export { default as FluxIcon } from './FluxIcon.vue';
 export { default as FluxInfo } from './FluxInfo.vue';
 export { default as FluxInfoStack } from './FluxInfoStack.vue';
+export { default as FluxItem } from './FluxItem.vue';
+export { default as FluxItemActions } from './FluxItemActions.vue';
+export { default as FluxItemContent } from './FluxItemContent.vue';
+export { default as FluxItemMedia } from './FluxItemMedia.vue';
+export { default as FluxItemStack } from './FluxItemStack.vue';
+export { default as FluxLayerPane } from './FluxLayerPane.vue';
+export { default as FluxLayerPaneSecondary } from './FluxLayerPaneSecondary.vue';
 export { default as FluxLegend } from './FluxLegend.vue';
 export { default as FluxLink } from './FluxLink.vue';
 export { default as FluxMenu } from './FluxMenu.vue';
+export { default as FluxMenuCollapsible } from './FluxMenuCollapsible.vue';
 export { default as FluxMenuGroup } from './FluxMenuGroup.vue';
 export { default as FluxMenuItem } from './FluxMenuItem.vue';
 export { default as FluxMenuOptions } from './FluxMenuOptions.vue';
@@ -83,12 +99,13 @@ export { default as FluxMenuSubHeader } from './FluxMenuSubHeader.vue';
 export { default as FluxMenuTitle } from './FluxMenuTitle.vue';
 export { default as FluxNotice } from './FluxNotice.vue';
 export { default as FluxNoticeStack } from './FluxNoticeStack.vue';
+export { default as FluxOverflowBar } from './FluxOverflowBar.vue';
 export { default as FluxOverlay } from './FluxOverlay.vue';
+export { default as FluxOverlayProvider } from './FluxOverlayProvider.vue';
 export { default as FluxPagination } from './FluxPagination.vue';
 export { default as FluxPaginationBar } from './FluxPaginationBar.vue';
 export { default as FluxPane } from './FluxPane.vue';
 export { default as FluxPaneBody } from './FluxPaneBody.vue';
-export { default as FluxPaneDeck } from './FluxPaneDeck.vue';
 export { default as FluxPaneFooter } from './FluxPaneFooter.vue';
 export { default as FluxPaneGroup } from './FluxPaneGroup.vue';
 export { default as FluxPaneHeader } from './FluxPaneHeader.vue';
@@ -99,12 +116,15 @@ export { default as FluxPersona } from './FluxPersona.vue';
 export { default as FluxPlaceholder } from './FluxPlaceholder.vue';
 export { default as FluxPressable } from './FluxPressable.vue';
 export { default as FluxPrimaryButton } from './FluxPrimaryButton.vue';
+export { default as FluxPrimaryLinkButton } from './FluxPrimaryLinkButton.vue';
 export { default as FluxProgressBar } from './FluxProgressBar.vue';
 export { default as FluxPublishButton } from './FluxPublishButton.vue';
 export { default as FluxQuantitySelector } from './FluxQuantitySelector.vue';
 export { default as FluxRemove } from './FluxRemove.vue';
 export { default as FluxRoot } from './FluxRoot.vue';
+export { default as FluxRow } from './FluxRow.vue';
 export { default as FluxSecondaryButton } from './FluxSecondaryButton.vue';
+export { default as FluxSecondaryLinkButton } from './FluxSecondaryLinkButton.vue';
 export { default as FluxSegmentedControl } from './FluxSegmentedControl.vue';
 export { default as FluxSegmentedView } from './FluxSegmentedView.vue';
 export { default as FluxSeparator } from './FluxSeparator.vue';
@@ -126,6 +146,7 @@ export { default as FluxTabBarItem } from './FluxTabBarItem.vue';
 export { default as FluxTabs } from './FluxTabs.vue';
 export { default as FluxTable } from './FluxTable.vue';
 export { default as FluxTableActions } from './FluxTableActions.vue';
+export { default as FluxTableBar } from './FluxTableBar.vue';
 export { default as FluxTableCell } from './FluxTableCell.vue';
 export { default as FluxTableHeader } from './FluxTableHeader.vue';
 export { default as FluxTableRow } from './FluxTableRow.vue';
@@ -139,4 +160,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';

package/src/component/primitive/Anchor.vue

@@ -7,11 +7,13 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
+
     defineProps<{
         readonly tagName: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/primitive/AnchorPopup.vue

@@ -13,10 +13,10 @@
 <script
     lang="ts"
     setup>
+    import { useMutationObserver } from '@basmilius/common';
     import { isHtmlElement } from '@basmilius/utils';
-    import { useMutationObserver } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
-    import { ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
+    import { type ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, type VNode, watchEffect } from 'vue';
 
     const {
         anchor,
@@ -37,7 +37,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const anchorRef = ref<HTMLElement>();
@@ -56,7 +56,7 @@
 
     onUnmounted(() => {
         window.removeEventListener('resize', onResize);
-        window.removeEventListener('scroll', onScroll);
+        window.removeEventListener('scroll', onScroll, {capture: true});
     });
 
     useMutationObserver(popupRef, () => {
@@ -150,10 +150,14 @@
                     px = x + width / 2 - popupWidth / 2;
                     py = y + height + margin;
 
-                    if (py + popupHeight > innerHeight) {
+                    if (py + popupHeight + margin > innerHeight) {
                         py = y - popupHeight - margin;
                     }
                 }
+
+                if (py < 0 || py + popupHeight > innerHeight) {
+                    py = innerHeight / 2 - popupHeight / 2;
+                }
                 break;
         }
 
@@ -188,7 +192,9 @@
 
         anchorRef.value = isHtmlElement(anchor) ? anchor : anchor.$el;
 
-        requestAnimationFrame(resize);
-        requestAnimationFrame(reposition);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resize);
+            requestAnimationFrame(reposition);
+        });
     });
 </script>

package/src/component/primitive/CoordinatePicker.vue

@@ -2,8 +2,8 @@
     <div
         ref="root"
         :class="$style.coordinatePicker"
-        role="slider"
         :aria-disabled="disabled ? true : undefined"
+        :aria-label="ariaLabel"
         @pointerdown="onPointerDown">
         <CoordinatePickerThumb
             :disabled="disabled"
@@ -19,7 +19,7 @@
     setup>
     import { roundStep } from '@basmilius/utils';
     import { unrefTemplateElement } from '@flux-ui/internals';
-    import { computed, onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { computed, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
     import CoordinatePickerThumb from './CoordinatePickerThumb.vue';
     import $style from '$flux/css/component/primitive/CoordinatePicker.module.scss';
@@ -38,6 +38,7 @@
         min: minProp = 0,
         step: stepProp = 1
     } = defineProps<{
+        readonly ariaLabel?: string;
         readonly disabled?: boolean;
         readonly max?: number | [number, number];
         readonly min?: number | [number, number];
@@ -58,16 +59,6 @@
         (unref(modelValue)[1] - unref(min)[1]) / (unref(max)[1] - unref(min)[1])
     ]);
 
-    onMounted(() => {
-        document.addEventListener('pointermove', onPointerMove);
-        document.addEventListener('pointerup', onPointerUp, {passive: true});
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('pointermove', onPointerMove);
-        document.removeEventListener('pointerup', onPointerUp);
-    });
-
     function onDecrement(x: boolean, y: boolean): void {
         if (unref(disabled)) {
             return;
@@ -116,6 +107,8 @@
         }
 
         isDragging.value = true;
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp, {passive: true});
         requestAnimationFrame(() => onPointerMove(evt));
     }
 
@@ -149,7 +142,14 @@
 
     function onPointerUp(): void {
         isDragging.value = false;
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
     }
 
     watch(isDragging, isDragging => emit('dragging', isDragging));
+
+    onUnmounted(() => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    });
 </script>

package/src/component/primitive/CoordinatePickerThumb.vue

@@ -9,7 +9,9 @@
             top: `${position[1] * 100}%`,
             left: `${position[0] * 100}%`
         }"
+        role="slider"
         :aria-disabled="disabled ? true : undefined"
+        :aria-valuetext="`X: ${Math.round(position[0] * 100)}%, Y: ${Math.round(position[1] * 100)}%`"
         :tabindex="disabled ? -1 : 0"
         type="button"
         @keydown="onKeyDown"

package/src/component/primitive/DialogLayout.vue

@@ -0,0 +1,44 @@
+<template>
+    <FluxPane>
+        <FluxPaneHeader
+            :icon="icon"
+            :title="title"/>
+
+        <FluxPaneBody
+            v-if="message"
+            v-html="message"/>
+
+        <FluxPaneBody v-if="$slots.default">
+            <slot/>
+        </FluxPaneBody>
+
+        <FluxPaneFooter>
+            <FluxSpacer/>
+
+            <slot name="footer"/>
+        </FluxPaneFooter>
+    </FluxPane>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxPane from '../FluxPane.vue';
+    import FluxPaneBody from '../FluxPaneBody.vue';
+    import FluxPaneFooter from '../FluxPaneFooter.vue';
+    import FluxPaneHeader from '../FluxPaneHeader.vue';
+    import FluxSpacer from '../FluxSpacer.vue';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly message?: string;
+        readonly title: string;
+    }>();
+
+    defineSlots<{
+        default?(): VNode[];
+        footer(): VNode[];
+    }>();
+</script>

package/src/component/primitive/FilterBadge.vue

@@ -0,0 +1,43 @@
+<template>
+    <FluxBadge
+        v-if="valueLabel"
+        :class="$style.filterBadge"
+        :is-loading="isLoading"
+        :label="valueLabel"
+        @click="onClick"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useLoaded } from '@basmilius/common';
+    import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+    import { computed, ref, unref, watch } from 'vue';
+    import { FluxBadge } from '$flux/component';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        item,
+        value
+    } = defineProps<{
+        readonly item: FluxFilterItem;
+        readonly value: FluxFilterValue;
+    }>();
+
+    const {isLoading, loaded} = useLoaded();
+    const getValueLabel = computed(() => loaded(item.getValueLabel));
+
+    const valueLabel = ref<string>();
+
+    function onClick(evt: MouseEvent): void {
+        emit('click', evt);
+    }
+
+    watch([() => item, () => value], async () => {
+        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    }, {deep: true, immediate: true});
+</script>

package/src/component/primitive/FilterItem.vue

@@ -12,9 +12,9 @@
 <script
     lang="ts"
     setup>
+    import { useLoaded } from '@basmilius/common';
     import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
-    import { useLoaded } from '$flux/composable/private';
     import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
 
     const emit = defineEmits<{
@@ -38,7 +38,16 @@
         emit('click', evt);
     }
 
-    watch(() => item, async () => {
-        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    watch([() => item, () => value], async ([, nextValue], _prev, onCleanup) => {
+        let cancelled = false;
+        onCleanup(() => {
+            cancelled = true;
+        });
+
+        const nextLabel = await unref(getValueLabel)(nextValue);
+
+        if (!cancelled) {
+            valueLabel.value = nextLabel ?? undefined;
+        }
     }, {deep: true, immediate: true});
 </script>