@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

package/src/component/primitive/FilterMenuRenderer.ts

@@ -1,186 +1,24 @@
-import { formatNumber } from '@basmilius/utils';
-import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
-import type { FluxFilterBase, FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterItem, FluxFilterOptionEntry, FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterOptionsEntry, FluxFilterRangeEntry, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
-import { camelCase } from 'lodash-es';
-import { DateTime } from 'luxon';
-import { computed, defineComponent, h, isVNode, unref, VNode } from 'vue';
-import { useTranslate } from '$flux/composable/private';
-import { FluxTranslate, isFluxFilterOptionItem } from '$flux/data';
-import { createLabelForDateRange } from '$flux/util';
-import FluxMenu from '$flux/component/FluxMenu.vue';
-import FluxMenuGroup from '$flux/component/FluxMenuGroup.vue';
-import FluxSeparator from '$flux/component/FluxSeparator.vue';
+import type { FluxFilterDefinition, FluxFilterValue } from '@flux-ui/types';
+import { defineComponent, h, isVNode, type VNode, unref } from 'vue';
+import { useFilterInjection } from '~flux/components/composable';
+import FluxMenuGroup from '../FluxMenuGroup.vue';
+import FluxSeparator from '../FluxSeparator.vue';
 import FilterItem from './FilterItem.vue';
 
 export const FilterMenuRenderer = defineComponent({
     props: {
-        navigate: Function,
-        state: Object
+        menuItems: {required: true, type: Array},
+        navigate: {required: true, type: Function}
     },
 
-    setup(props, {slots}) {
-        const content = computed<(FluxFilterItem | VNode)[][]>(() => {
-            const children = flattenVNodeTree(slots.default?.() ?? []);
-            const content: (FluxFilterItem | VNode)[][] = [[]];
+    setup(props) {
+        const {state} = useFilterInjection();
 
-            for (const child of children) {
-                const name = getComponentName(child);
-
-                if (name === 'FluxSeparator') {
-                    content.push([]);
-                    continue;
-                }
-
-                if (name.startsWith('FluxFilter')) {
-                    const props = getComponentProps<Omit<FluxFilterItem, 'type'>>(child);
-                    const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
-
-                    content[content.length - 1].push(parsers[type](props));
-                    continue;
-                }
-
-                content[content.length - 1].push(child);
-            }
-
-            return content;
-        });
-
-        return () => h(FluxMenu, {}, {
-            default: () => unref(content).map((group, index) => renderFilterGroup(group, index, props.navigate!, props.state!))
-        });
+        return () => props.menuItems.map((group, index) => renderFilterGroup(group as (FluxFilterDefinition | VNode)[], index, props.navigate, unref(state) as Record<string, FluxFilterValue>));
     }
 });
 
-function parseDate(base: FluxFilterBase): FluxFilterDateEntry {
-    return {
-        ...base,
-        type: 'date',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!DateTime.isDateTime(value)) {
-                return null;
-            }
-
-            return value.toLocaleString({
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric'
-            });
-        }
-    };
-}
-
-function parseDateRange(base: FluxFilterBase): FluxFilterDateRangeEntry {
-    return {
-        ...base,
-        type: 'dateRange',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [start, end] = value;
-
-            if (!DateTime.isDateTime(start) || !DateTime.isDateTime(end)) {
-                return null;
-            }
-
-            return createLabelForDateRange(start, end);
-        }
-    };
-}
-
-function parseOption(base: FluxFilterBase): FluxFilterOptionEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
-
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            return options.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptionAsync(base: FluxFilterBase): FluxFilterOptionEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
-
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            const options = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
-
-            return options.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptions(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            return generateMultiOptionsLabel(translate, options, value);
-        }
-    };
-}
-
-function parseOptionsAsync(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            const options = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
-
-            return generateMultiOptionsLabel(translate, options, value);
-        }
-    };
-}
-
-function parseRange(base: FluxFilterBase): FluxFilterRangeEntry {
-    return {
-        ...base,
-        type: 'range',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!value || !Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [lower, upper] = value as number[];
-
-            if ('formatter' in base) {
-                const formatter = base.formatter as (value: number) => string;
-
-                return `${formatter(lower)} – ${formatter(upper)}`;
-            }
-
-            return `${formatNumber(lower)} – ${formatNumber(upper)}`;
-        }
-    };
-}
-
-function renderFilterGroup(group: (FluxFilterItem | VNode)[], index: number, navigate: Function, state: Record<string, FluxFilterValue>): VNode[] {
+function renderFilterGroup(group: (FluxFilterDefinition | VNode)[], index: number, navigate: Function, state: Record<string, FluxFilterValue>): VNode[] {
     const slot: VNode[] = [];
 
     if (index > 0) {
@@ -194,7 +32,7 @@ function renderFilterGroup(group: (FluxFilterItem | VNode)[], index: number, nav
     return slot;
 }
 
-function renderFilterItem(item: FluxFilterItem | VNode, navigate: Function, state: Record<string, FluxFilterValue>): VNode {
+function renderFilterItem(item: FluxFilterDefinition | VNode, navigate: Function, state: Record<string, FluxFilterValue>): VNode {
     if (isVNode(item)) {
         return item;
     }
@@ -202,32 +40,11 @@ function renderFilterItem(item: FluxFilterItem | VNode, navigate: Function, stat
     return h(FilterItem, {
         item,
         value: state[item.name] ?? null,
-        onClick: () => navigate(item.name)
-    });
-}
-
-function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null {
-    const selected = options.filter(o => values.includes(o.value)).length;
-
-    if (selected <= 0) {
-        return null;
-    }
-
-    if (selected === 1) {
-        return options.find(o => values.includes(o.value))!.label;
-    }
-
-    return translate('flux.nSelected', {
-        n: selected
+        disabled: item.disabled,
+        onClick: () => {
+            if (!item.disabled) {
+                navigate(item.name);
+            }
+        }
     });
 }
-
-const parsers = {
-    date: parseDate,
-    dateRange: parseDateRange,
-    option: parseOption,
-    optionAsync: parseOptionAsync,
-    options: parseOptions,
-    optionsAsync: parseOptionsAsync,
-    range: parseRange
-} as const;

package/src/component/primitive/FilterOptionBase.vue

@@ -38,12 +38,12 @@
     lang="ts"
     setup>
     import type { FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterValueSingle } from '@flux-ui/types';
-    import { isFluxFilterOptionHeader, isFluxFilterOptionItem } from '$flux/data';
-    import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
-    import FluxFormInput from '$flux/component/FluxFormInput.vue';
-    import FluxMenuGroup from '$flux/component/FluxMenuGroup.vue';
-    import FluxMenuSubHeader from '$flux/component/FluxMenuSubHeader.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import { isFluxFilterOptionHeader, isFluxFilterOptionItem } from '~flux/components/util';
+    import FluxFormInput from '../FluxFormInput.vue';
+    import FluxMenuGroup from '../FluxMenuGroup.vue';
+    import FluxMenuItem from '../FluxMenuItem.vue';
+    import FluxMenuSubHeader from '../FluxMenuSubHeader.vue';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
     const emit = defineEmits<{
         select: [FluxFilterValueSingle];

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()"
@@ -21,6 +24,8 @@
                 :command="selected[0].command"
                 :command-icon="selected[0].commandIcon"
                 :icon-leading="selected[0].icon"
+                :image-alt="selected[0].imageAlt"
+                :image-src="selected[0].imageSrc"
                 :label="selected[0].label"
                 tabindex="-1"/>
         </template>
@@ -97,6 +102,8 @@
                                     :command="subItem.command"
                                     :command-icon="subItem.commandIcon"
                                     :icon-leading="subItem.icon"
+                                    :image-alt="subItem.imageAlt"
+                                    :image-src="subItem.imageSrc"
                                     :is-active="!!selected.find(so => so.value === subItem.value)"
                                     :is-highlighted="highlightedId === subItem.value"
                                     :label="subItem.label"
@@ -112,6 +119,8 @@
                             :command="item.command"
                             :command-icon="item.commandIcon"
                             :icon-leading="item.icon"
+                            :image-alt="item.imageAlt"
+                            :image-src="item.imageSrc"
                             :is-active="!!selected.find(so => so.value === item.value)"
                             :is-highlighted="highlightedId === item.value"
                             :label="item.label"
@@ -127,25 +136,25 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useClickOutside } from '@flux-ui/internals';
+    import { unrefTemplateElement } from '@flux-ui/internals';
     import type { FluxFormSelectOption, FluxFormSelectOptions } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
-    import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';
-    import { FluxFadeTransition } from '$flux/transition';
-    import FluxFormInput from '$flux/component/FluxFormInput.vue';
-    import FluxIcon from '$flux/component/FluxIcon.vue';
-    import FluxMenu from '$flux/component/FluxMenu.vue';
-    import FluxMenuGroup from '$flux/component/FluxMenuGroup.vue';
-    import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
-    import FluxMenuSubHeader from '$flux/component/FluxMenuSubHeader.vue';
-    import FluxSpinner from '$flux/component/FluxSpinner.vue';
-    import FluxTag from '$flux/component/FluxTag.vue';
+    import { type ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { useDropdownPopup, useTranslate } from '~flux/components/composable/private';
+    import { isFluxFormSelectGroup, isFluxFormSelectOption } from '~flux/components/data';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import FluxFormInput from '../FluxFormInput.vue';
+    import FluxIcon from '../FluxIcon.vue';
+    import FluxMenu from '../FluxMenu.vue';
+    import FluxMenuGroup from '../FluxMenuGroup.vue';
+    import FluxMenuItem from '../FluxMenuItem.vue';
+    import FluxMenuSubHeader from '../FluxMenuSubHeader.vue';
+    import FluxSpinner from '../FluxSpinner.vue';
+    import FluxTag from '../FluxTag.vue';
     import Anchor from './Anchor.vue';
     import AnchorPopup from './AnchorPopup.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const INITIAL_HIGHLIGHTED_INDEX = -1;
 
@@ -186,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);
@@ -210,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 = '';
@@ -218,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);
 
@@ -239,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);
@@ -270,17 +284,9 @@
                 id && select(id);
                 break;
 
-            case 'Escape':
-                isPopupOpen.value = false;
-                break;
-
-            case 'Tab':
-                isPopupOpen.value = false;
-                return;
-
             default:
-                if (evt.key.match(/[a-z]/)) {
-                    highlightedIndex.value = unref(rawOptions).findIndex(o => o.label.toLowerCase().startsWith(evt.key));
+                if (evt.key.length === 1) {
+                    highlightedIndex.value = unref(rawOptions).findIndex(o => o.label.toLowerCase().startsWith(evt.key.toLowerCase()));
                 } else {
                     highlightedIndex.value = -1;
                 }
@@ -307,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
@@ -22,10 +21,10 @@
     setup>
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { onMounted, onUnmounted, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import FluxTicks from '$flux/component/FluxTicks.vue';
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import { onUnmounted, toRef, unref, useTemplateRef } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import FluxTicks from '../FluxTicks.vue';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     const emit = defineEmits<{
         dragging: [boolean];
@@ -47,22 +46,14 @@
     const disabled = useDisabled(toRef(() => componentDisabled));
     const rootRef = useTemplateRef('root');
 
-    onMounted(() => {
-        document.addEventListener('pointermove', onPointerMove);
-        document.addEventListener('pointerup', onPointerUp, {passive: true});
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('pointermove', onPointerMove);
-        document.removeEventListener('pointerup', onPointerUp);
-    });
-
     function onPointerDown(evt: PointerEvent): void {
         if (unref(disabled)) {
             return;
         }
 
         emit('dragging', true);
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp, {passive: true});
         requestAnimationFrame(() => onPointerMove(evt));
     }
 
@@ -77,13 +68,18 @@
         left += 6; // margin.
         width -= 12; // margin times two.
 
-        emit('update', Math.max(0, Math.min(1, (evt.pageX - left) / width)));
+        emit('update', Math.max(0, Math.min(1, (evt.clientX - left) / width)));
         evt.preventDefault();
     }
 
     function onPointerUp(): void {
         emit('dragging', false);
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
     }
 
-    watch(() => isDragging, () => emit('dragging', isDragging));
+    onUnmounted(() => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    });
 </script>

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"
@@ -20,8 +25,8 @@
     setup>
     import { clsx } from 'clsx';
     import { toRef, unref } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import { useDisabled } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     const emit = defineEmits<{
         decrement: [];
@@ -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/SliderTrack.vue

@@ -13,7 +13,7 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     defineProps<{
         readonly percentageLower: number;

package/src/component/primitive/TreeNodeRenderer.vue

@@ -0,0 +1,76 @@
+<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 { getLevelColor, type TreeBaseOption, type TreeFlatNode } from '~flux/components/composable/private';
+    import FluxIcon from '../FluxIcon.vue';
+    import $style from '~flux/components/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/VNodeRenderer.ts

@@ -1,5 +1,4 @@
-import type { PropType, VNode } from 'vue';
-import { defineComponent } from 'vue';
+import { defineComponent, type PropType, type VNode } from 'vue';
 
 export const VNodeRenderer = defineComponent({
     props: {

package/src/component/primitive/index.ts

@@ -1,10 +1,14 @@
 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';
 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,9 +1,14 @@
 export { default as useBreakpoints } from './useBreakpoints';
 export { default as useDisabled } from './useDisabled';
 
+export { default as useAdaptiveGroupInjection } from './useAdaptiveGroupInjection';
+export { default as useCalendarInjection } from './useCalendarInjection';
 export { default as useDisabledInjection } from './useDisabledInjection';
 export { default as useExpandableGroupInjection } from './useExpandableGroupInjection';
 export { default as useFilterInjection } from './useFilterInjection';
 export { default as useFlyoutInjection } from './useFlyoutInjection';
 export { default as useFormFieldInjection } from './useFormFieldInjection';
+export { default as useKanbanInjection } from './useKanbanInjection';
+export { default as useTabBarInjection } from './useTabBarInjection';
 export { default as useTableInjection } from './useTableInjection';
+export { default as useTooltipInjection } from './useTooltipInjection';