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

package/src/component/FluxTabBar.vue

@@ -43,16 +43,16 @@
     import { useMutationObserver } from '@basmilius/common';
     import { unrefTemplateElement, useEventListener } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { onMounted, ref, useTemplateRef } from 'vue';
+    import { onMounted, ref, useTemplateRef, type VNode } from 'vue';
     import { FluxFadeTransition } from '$flux/transition';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Tab.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
-    const tabBarRef = useTemplateRef('tabBar');
+    const tabBarRef = useTemplateRef<HTMLElement>('tabBar');
 
     useEventListener(tabBarRef, 'scroll', () => checkScroll());
     useMutationObserver(tabBarRef, () => checkScroll(), {childList: true});

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 type { VNode } from 'vue';
+    import FluxActionStack from './FluxActionStack.vue';
     import $style from '$flux/css/component/Table.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxTableBar.vue

@@ -20,12 +20,13 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { useTableInjection } from '$flux/composable';
     import { clsx } from 'clsx';
     import $style from '$flux/css/component/Table.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const {

package/src/component/FluxTableCell.vue

@@ -13,7 +13,7 @@
                 :class="$style.tableCellContent"
                 :style="{
                     flexFlow: contentDirection,
-                    gap: contentGap && `${contentGap}px`
+                    gap: contentGap != null ? `${contentGap}px` : undefined
                 }">
                 <slot/>
             </div>
@@ -24,6 +24,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { clsx } from 'clsx';
     import { useTableInjection } from '$flux/composable';
     import $style from '$flux/css/component/Table.module.scss';
@@ -36,8 +37,8 @@
     }>();
 
     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,7 +65,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed } from 'vue';
+    import { computed, type VNode } from 'vue';
     import { useTableInjection } from '$flux/composable';
     import { useTranslate } from '$flux/composable/private';
     import FluxFlyout from './FluxFlyout.vue';
@@ -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 type { VNode } from 'vue';
     import $style from '$flux/css/component/Table.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxTabs.vue

@@ -8,6 +8,8 @@
                     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,7 +35,7 @@
     setup>
     import { flattenVNodeTree, getComponentProps } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, type VNode, watch } from 'vue';
+    import { cloneVNode, computed, ref, unref, useId, type VNode, watch } from 'vue';
     import { FluxWindowTransition } from '$flux/transition';
     import { VNodeRenderer } from './primitive';
     import FluxTabBar from './FluxTabBar.vue';
@@ -45,7 +47,7 @@
     });
 
     const slots = defineSlots<{
-        default(): any;
+        default(): VNode[];
 
         content(props: {
             activate(index: number): void;
@@ -56,7 +58,7 @@
                 readonly icon?: FluxIconName;
                 readonly label?: string;
             }[];
-        }): any;
+        }): VNode[];
 
         tabs(props: {
             activate(index: number): void;
@@ -67,13 +69,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,6 +53,7 @@
     setup>
     import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
@@ -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/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

@@ -27,7 +27,7 @@
                 const elm = instance.proxy!.$el;
                 elm.removeEventListener('mouseenter', onHover);
                 elm.removeEventListener('mouseleave', onLeave);
-                window.removeEventListener('scroll', onLeave);
+                window.removeEventListener('scroll', onLeave, {capture: true});
                 onLeave();
             });
 

package/src/component/FluxTreeView.vue

@@ -16,41 +16,15 @@
             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)">
 
-            <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(node, $event)">
-                    <FluxIcon
-                        v-if="node.children?.length"
-                        :name="expandedIds.has(node.id) ? 'angle-down' : 'angle-right'"
-                        :size="12"/>
-                </span>
-            </div>
-
-            <span
-                v-if="getLevelColor(node.depth, levelColors)"
-                :class="$style.treeNodeColorDot"
-                :style="{ background: getLevelColor(node.depth, levelColors) }"/>
-
-            <FluxIcon
-                v-if="node.icon"
-                :class="$style.treeNodeIcon"
-                :name="node.icon"
-                :size="16"/>
-
-            <span :class="$style.treeNodeLabel">{{ node.label }}</span>
+            <TreeNodeRenderer
+                :node="node"
+                :expanded="expandedIds.has(node.id)"
+                :level-colors="levelColors"
+                @expand-click="onExpandClick(node, $event)"/>
         </div>
     </div>
 </template>
@@ -61,9 +35,9 @@
     import type { FluxColor, FluxTreeViewOption } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, ref, unref, useTemplateRef } from 'vue';
-    import { flattenVisible, getLevelColor, useTreeView } from '$flux/composable/private';
     import type { TreeFlatNode } from '$flux/composable/private';
-    import FluxIcon from '$flux/component/FluxIcon.vue';
+    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>;
@@ -90,7 +64,7 @@
     const {highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate} = useTreeView({
         expandedIds,
         nodeElementRefs,
-        visibleNodes,
+        visibleNodes
     });
 
     function onNodeClick(node: FlatNode): void {

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';
@@ -81,9 +86,12 @@ 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';
@@ -98,7 +106,6 @@ 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';
@@ -115,6 +122,7 @@ 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';

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

@@ -16,7 +16,7 @@
     import { useMutationObserver } from '@basmilius/common';
     import { isHtmlElement } from '@basmilius/utils';
     import type { FluxDirection } from '@flux-ui/types';
-    import { type 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, () => {

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"
@@ -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];

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>