@flux-ui/components 3.0.0-next.6 → 3.0.0-next.61

package/src/component/FluxTabBarItem.vue

@@ -2,7 +2,7 @@
     <FluxPressable
         ref="tab"
         :component-type="type"
-        :class="isActive ? $style.tabBarItemActive : $style.tabBarItem"
+        :class="itemClass"
         type="button"
         role="tab"
         :aria-disabled="disabled ? true : undefined"
@@ -29,11 +29,11 @@
     lang="ts"
     setup>
     import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
-    import { ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled, useTabBarInjection } from '~flux/components/composable';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import $style from '~flux/components/css/component/Tab.module.scss';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -58,8 +58,39 @@
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
+    const tabBar = useTabBarInjection();
     const tabRef = useTemplateRef<ComponentPublicInstance>('tab');
 
+    const itemClass = computed(() => {
+        if (tabBar.isPills.value) {
+            return isActive ? $style.tabBarItemPillsActive : $style.tabBarItemPills;
+        }
+
+        return isActive ? $style.tabBarItemDefaultActive : $style.tabBarItemDefault;
+    });
+
+    let registeredElement: Element | null = null;
+
+    onMounted(() => {
+        const tab = unref(tabRef);
+
+        if (!tab) {
+            return;
+        }
+
+        registeredElement = tab.$el;
+        tabBar.registerItem(registeredElement!, toRef(() => !!isActive));
+    });
+
+    onBeforeUnmount(() => {
+        if (!registeredElement) {
+            return;
+        }
+
+        tabBar.unregisterItem(registeredElement);
+        registeredElement = null;
+    });
+
     function onClick(evt: MouseEvent): void {
         if (unref(disabled)) {
             evt.preventDefault();

package/src/component/FluxTable.vue

@@ -45,14 +45,13 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
-    import { provide } from 'vue';
-    import { FluxTableInjectionKey } from '$flux/data';
+    import { provide, type VNode } from 'vue';
+    import { FluxTableInjectionKey } from '~flux/components/data';
     import FluxPaneBody from './FluxPaneBody.vue';
     import FluxSpinner from './FluxSpinner.vue';
     import FluxTableCell from './FluxTableCell.vue';
     import FluxTableRow from './FluxTableRow.vue';
-    import $style from '$flux/css/component/Table.module.scss';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     const {
         captionSide = 'bottom',

package/src/component/FluxTableActions.vue

@@ -1,16 +1,17 @@
 <template>
-    <FluxActions :class="$style.tableActions">
+    <FluxActionStack :class="$style.tableActions">
         <slot/>
-    </FluxActions>
+    </FluxActionStack>
 </template>
 
 <script
     lang="ts"
     setup>
-    import FluxActions from './FluxActions.vue';
-    import $style from '$flux/css/component/Table.module.scss';
+    import type { VNode } from 'vue';
+    import FluxActionStack from './FluxActionStack.vue';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxTableBar.vue

@@ -0,0 +1,38 @@
+<template>
+    <tr :class="$style.tableRow">
+        <td
+            :class="clsx(
+                $style.tableBar,
+                isBordered && $style.isBordered,
+                isHoverable && $style.isHoverable,
+                isSeparated && $style.isSeparated,
+                isStriped && $style.isStriped
+            )"
+            colspan="100%"
+            role="cell">
+            <div :class="$style.tableBarContent">
+                <slot/>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
+    import { useTableInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/Table.module.scss';
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const {
+        isBordered,
+        isHoverable,
+        isSeparated,
+        isStriped
+    } = useTableInjection();
+</script>

package/src/component/FluxTableCell.vue

@@ -12,7 +12,8 @@
             <div
                 :class="$style.tableCellContent"
                 :style="{
-                    flexFlow: contentDirection
+                    flexFlow: contentDirection,
+                    gap: contentGap != null ? `${contentGap}px` : undefined
                 }">
                 <slot/>
             </div>
@@ -24,18 +25,20 @@
     lang="ts"
     setup>
     import { clsx } from 'clsx';
-    import { useTableInjection } from '$flux/composable';
-    import $style from '$flux/css/component/Table.module.scss';
+    import type { VNode } from 'vue';
+    import { useTableInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     const {
         contentDirection = 'row'
     } = defineProps<{
         readonly contentDirection?: 'column' | 'row';
+        readonly contentGap?: number;
     }>();
 
     defineSlots<{
-        default(): any;
-        content(): any;
+        default(): VNode[];
+        content(): VNode[];
     }>();
 
     const {

package/src/component/FluxTableHeader.vue

@@ -6,6 +6,8 @@
             isShrinking && $style.isShrinking,
             isSticky && $style.isSticky
         )"
+        scope="col"
+        :aria-sort="isSortable ? (sort ?? 'none') : undefined"
         :style="{
             minWidth: `${minWidth}px`
         }">
@@ -63,16 +65,16 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed } from 'vue';
-    import { useTableInjection } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
+    import { computed, type VNode } from 'vue';
+    import { useTableInjection } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxMenu from './FluxMenu.vue';
     import FluxMenuGroup from './FluxMenuGroup.vue';
     import FluxMenuItem from './FluxMenuItem.vue';
     import FluxSeparator from './FluxSeparator.vue';
-    import $style from '$flux/css/component/Table.module.scss';
+    import $style from '~flux/components/css/component/Table.module.scss';
 
     defineEmits<{
         sort: ['ascending' | 'descending' | null];
@@ -90,7 +92,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const {isBordered} = useTableInjection();

package/src/component/FluxTableRow.vue

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

package/src/component/FluxTabs.vue

@@ -3,11 +3,15 @@
         <slot
             v-bind="{children, modelValue, tabs, activate}"
             name="tabs">
-            <FluxTabBar :class="$style.tabsBar">
+            <FluxTabBar
+                :class="$style.tabsBar"
+                :is-pills="isPills">
                 <template
                     v-for="(tab, index) of tabs"
                     :key="index">
                     <FluxTabBarItem
+                        :id="`${baseId}-tab-${index}`"
+                        :aria-controls="`${baseId}-panel-${index}`"
                         :icon="tab.icon"
                         :is-active="modelValue === index"
                         :label="tab.label"
@@ -33,19 +37,23 @@
     setup>
     import { flattenVNodeTree, getComponentProps } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, VNode, watch } from 'vue';
-    import { FluxWindowTransition } from '$flux/transition';
-    import { VNodeRenderer } from './primitive';
+    import { cloneVNode, computed, ref, unref, useId, type VNode, watch } from 'vue';
+    import { FluxWindowTransition } from '~flux/components/transition';
     import FluxTabBar from './FluxTabBar.vue';
     import FluxTabBarItem from './FluxTabBarItem.vue';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import { VNodeRenderer } from './primitive';
+    import $style from '~flux/components/css/component/Tab.module.scss';
 
     const modelValue = defineModel<number>({
         default: 0
     });
 
+    defineProps<{
+        readonly isPills?: boolean;
+    }>();
+
     const slots = defineSlots<{
-        default(): any;
+        default(): VNode[];
 
         content(props: {
             activate(index: number): void;
@@ -56,7 +64,7 @@
                 readonly icon?: FluxIconName;
                 readonly label?: string;
             }[];
-        }): any;
+        }): VNode[];
 
         tabs(props: {
             activate(index: number): void;
@@ -67,13 +75,20 @@
                 readonly icon?: FluxIconName;
                 readonly label?: string;
             }[];
-        }): any;
+        }): VNode[];
     }>();
 
+    const baseId = useId();
     const isTransitioningBack = ref(false);
 
-    const children = computed(() => flattenVNodeTree(slots.default?.() ?? []));
-    const tabs = computed<{ icon?: FluxIconName; label?: string; }[]>(() => unref(children)
+    const rawChildren = computed(() => flattenVNodeTree(slots.default?.() ?? []));
+
+    const children = computed(() => unref(rawChildren).map((child, index) => cloneVNode(child, {
+        id: `${baseId}-panel-${index}`,
+        'aria-labelledby': `${baseId}-tab-${index}`
+    })));
+
+    const tabs = computed<{ icon?: FluxIconName; label?: string; }[]>(() => unref(rawChildren)
         .filter((child: VNode) => getComponentProps<any>(child).icon || getComponentProps<any>(child).label)
         .map((child: VNode) => ({
             icon: getComponentProps<any>(child).icon,

package/src/component/FluxTag.vue

@@ -6,7 +6,8 @@
             color === 'danger' && $style.tagDanger,
             color === 'info' && $style.tagInfo,
             color === 'success' && $style.tagSuccess,
-            color === 'warning' && $style.tagWarning
+            color === 'warning' && $style.tagWarning,
+            isKeyboardShortcut && $style.tagKeyboardShortcut
         )"
         :component-type="type"
         :tabindex="tabindex"
@@ -40,7 +41,8 @@
             v-if="!isClickable && isDeletable"
             :class="$style.tagClose"
             type="button"
-            @click="onDeleteClick()">
+            :aria-label="translate('flux.delete')"
+            @click.stop="onDeleteClick()">
             <FluxIcon name="xmark"/>
         </button>
     </FluxPressable>
@@ -51,10 +53,11 @@
     setup>
     import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Badge.module.scss';
+    import $style from '~flux/components/css/component/Badge.module.scss';
 
     const emit = defineEmits<FluxButtonEmits & {
         delete: [];
@@ -69,6 +72,7 @@
         readonly icon?: FluxIconName;
         readonly isClickable?: boolean;
         readonly isDeletable?: boolean;
+        readonly isKeyboardShortcut?: boolean;
         readonly isLoading?: boolean;
         readonly label: string;
         readonly type?: FluxPressableType;
@@ -79,6 +83,8 @@
         readonly to?: FluxTo;
     }>();
 
+    const translate = useTranslate();
+
     function onDeleteClick(): void {
         emit('delete');
     }

package/src/component/FluxTagStack.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/FluxTicks.vue

@@ -29,7 +29,7 @@
     setup>
     import { generateStepTicks } from '@basmilius/utils';
     import { computed } from 'vue';
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     const {
         lower,

package/src/component/FluxTimeline.vue

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

package/src/component/FluxTimelineItem.vue

@@ -54,8 +54,9 @@
     setup>
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Timeline.module.scss';
+    import $style from '~flux/components/css/component/Timeline.module.scss';
 
     const {
         color = 'gray'
@@ -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,30 +40,40 @@
 <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';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<boolean>({
         default: false
     });
 
     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

@@ -19,14 +19,15 @@
     lang="ts"
     setup>
     import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
     import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Toolbar.module.scss';
+    import $style from '~flux/components/css/component/Toolbar.module.scss';
 
     defineProps<{
         readonly floatingMode?: 'free' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     }>();
 
     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,6 +1,6 @@
 <script lang="ts">
-    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, PropType, ref, SlotsType, VNode } from 'vue';
-    import { addTooltip, removeTooltip } from '$flux/data';
+    import { defineComponent, getCurrentInstance, onMounted, onUnmounted, type PropType, ref, type SlotsType, type VNode } from 'vue';
+    import { addTooltip, removeTooltip } from '~flux/components/data';
 
     export default defineComponent({
         props: {
@@ -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,10 +1,10 @@
 <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 { FluxTooltipTransition } from '$flux/transition';
-    import $style from '$flux/css/component/Tooltip.module.scss';
+    import { computed, defineComponent, h, provide, ref, unref, watch } from 'vue';
+    import { FluxTooltipInjectionKey, useFluxStore } from '~flux/components/data';
+    import { FluxTooltipTransition } from '~flux/components/transition';
+    import $style from '~flux/components/css/component/Tooltip.module.scss';
 
     type Transition = 'above' | 'below' | 'end' | 'start';
 
@@ -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,89 @@
+<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 { flattenVisible, type TreeFlatNode, useTreeView } from '~flux/components/composable/private';
+    import { TreeNodeRenderer } from './primitive';
+    import $style from '~flux/components/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>