@flux-ui/components 3.1.2 → 3.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.1.2",
+    "version": "3.1.4",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -55,10 +55,10 @@
         "**/dist/index.css"
     ],
     "dependencies": {
-        "@basmilius/common": "^3.41.0",
-        "@basmilius/utils": "^3.41.0",
-        "@flux-ui/internals": "3.1.2",
-        "@flux-ui/types": "3.1.2",
+        "@basmilius/common": "^3.43.0",
+        "@basmilius/utils": "^3.43.0",
+        "@flux-ui/internals": "3.1.4",
+        "@flux-ui/types": "3.1.4",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -66,10 +66,10 @@
     },
     "peerDependencies": {
         "luxon": "^3.7.2",
-        "vue": "^3.6.0-beta.15"
+        "vue": "^3.6.0-beta.16"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.41.0",
+        "@basmilius/vite-preset": "^3.43.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
         "@types/node": "^25.9.3",

package/src/component/FluxAvatarGroup.vue

@@ -0,0 +1,52 @@
+<template>
+    <div
+        :class="$style.avatarGroup"
+        :style="{
+            fontSize: `${size}px`,
+            '--overlap': overlap
+        }">
+        <component :is="renderVisible"/>
+
+        <span
+            v-if="overflowCount > 0"
+            :class="$style.avatarGroupItem">
+            <FluxAvatar
+                :alt="overflowLabel"
+                fallback="neutral"
+                :fallback-initials="`+${overflowCount}`"/>
+        </span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import { computed, h, type VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
+    import FluxAvatar from './FluxAvatar.vue';
+    import $style from '~flux/components/css/component/AvatarGroup.module.scss';
+
+    const {
+        max,
+        overlap = 0.3,
+        size = 32
+    } = defineProps<{
+        readonly max?: number;
+        readonly overlap?: number;
+        readonly size?: number;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const translate = useTranslate();
+
+    const children = computed(() => flattenVNodeTree(slots.default?.() ?? []).filter(vnode => typeof vnode.type !== 'symbol'));
+    const visibleNodes = computed(() => max !== undefined && children.value.length > max ? children.value.slice(0, max) : children.value);
+    const overflowCount = computed(() => max !== undefined ? Math.max(0, children.value.length - max) : 0);
+    const overflowLabel = computed(() => translate('flux.andNMore', {n: overflowCount.value}));
+
+    const renderVisible = () => visibleNodes.value.map(vnode => h('span', {class: $style.avatarGroupItem}, [vnode]));
+</script>

package/src/component/FluxButton.vue

@@ -3,6 +3,7 @@
         :component-type="type"
         :class="clsx(
             cssClass,
+            isActive && cssClassActive,
             isFilled && $style.isFilled,
             size === 'small' && $style.isSmall,
             size === 'medium' && $style.isMedium,
@@ -11,6 +12,7 @@
         )"
         :type="isSubmit ? 'submit' : 'button'"
         :aria-disabled="disabled ? true : undefined"
+        :aria-pressed="isActive && type === 'button' ? true : undefined"
         :disabled="disabled ? true : undefined"
         :tabindex="disabled ? -1 : tabindex"
         :href="href"
@@ -82,6 +84,7 @@
         type = 'button'
     } = defineProps<FluxButtonProps & {
         readonly cssClass: string;
+        readonly cssClassActive?: string;
         readonly cssClassIcon: string;
         readonly cssClassLabel: string;
     }>();

package/src/component/FluxContextMenu.vue

@@ -0,0 +1,134 @@
+<template>
+    <div
+        :class="$style.contextMenu"
+        @contextmenu="onContextMenu">
+        <slot/>
+
+        <Teleport to="body">
+            <FluxFadeTransition>
+                <AnchorPopup
+                    v-if="isOpen"
+                    ref="popup"
+                    :anchor="virtualAnchor"
+                    :class="$style.contextMenuPopup"
+                    clamp-to-viewport
+                    :margin="2"
+                    :position="position"
+                    role="menu"
+                    @click="close()">
+                    <slot
+                        name="menu"
+                        v-bind="{close}"/>
+                </AnchorPopup>
+            </FluxFadeTransition>
+        </Teleport>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { isSSR, useEventListener, useFocusTrap } from '@flux-ui/internals';
+    import { computed, type ComponentPublicInstance, reactive, ref, toRef, useTemplateRef, type VNode } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useMenuFlyoutProvider } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import { AnchorPopup } from '~flux/components/component/primitive';
+    import $style from '~flux/components/css/component/ContextMenu.module.scss';
+
+    const {
+        debugCone = false,
+        disabled: componentDisabled,
+        position = 'bottom-left'
+    } = defineProps<{
+        readonly debugCone?: boolean;
+        readonly disabled?: boolean;
+        readonly position?:
+            | 'top' | 'top-left' | 'top-right'
+            | 'left' | 'left-top' | 'left-bottom'
+            | 'right' | 'right-top' | 'right-bottom'
+            | 'bottom' | 'bottom-left' | 'bottom-right';
+    }>();
+
+    const emit = defineEmits<{
+        open: [MouseEvent];
+        close: [];
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+        menu(props: {close(): void}): VNode[];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const popupRef = useTemplateRef<ComponentPublicInstance>('popup');
+
+    const isOpen = ref(false);
+    const cursor = reactive({x: 0, y: 0});
+    const virtualAnchor = {
+        $el: {
+            getBoundingClientRect: () => new DOMRect(cursor.x, cursor.y, 0, 0)
+        }
+    } as unknown as ComponentPublicInstance;
+
+    const menuFlyout = useMenuFlyoutProvider({
+        debugCone: toRef(() => debugCone),
+        onCloseAll: () => close()
+    });
+
+    useFocusTrap(popupRef, {
+        disable: computed(() => menuFlyout.keyboardStack.value.length > 0)
+    });
+
+    function onContextMenu(evt: MouseEvent): void {
+        if (disabled.value) {
+            return;
+        }
+
+        evt.preventDefault();
+
+        cursor.x = evt.clientX;
+        cursor.y = evt.clientY;
+        isOpen.value = true;
+
+        emit('open', evt);
+    }
+
+    function close(): void {
+        if (!isOpen.value) {
+            return;
+        }
+
+        isOpen.value = false;
+        emit('close');
+    }
+
+    if (!isSSR) {
+        useEventListener(ref(window), 'pointerdown', (evt: PointerEvent) => {
+            if (!isOpen.value) {
+                return;
+            }
+
+            const target = evt.target as Node | null;
+            const root = (popupRef.value?.$el ?? null) as HTMLElement | null;
+
+            if ((root && target && root.contains(target)) || menuFlyout.isInsidePopups(target)) {
+                return;
+            }
+
+            close();
+        }, {capture: true});
+
+        useEventListener(ref(window), 'keydown', (evt: KeyboardEvent) => {
+            if (isOpen.value && evt.key === 'Escape') {
+                close();
+            }
+        });
+
+        useEventListener(ref(window), 'scroll', () => {
+            if (isOpen.value) {
+                close();
+            }
+        }, {capture: true});
+    }
+</script>

package/src/component/FluxDataTable.vue

@@ -14,7 +14,7 @@
         </template>
 
         <template
-            v-if="'header' in slots || selectionMode"
+            v-if="'header' in slots || selectionMode || hasExpandable"
             #header>
             <slot
                 name="filter"
@@ -31,6 +31,11 @@
                         @update:model-value="onSelectAll"/>
                 </FluxTableHeader>
 
+                <FluxTableHeader
+                    v-if="hasExpandable"
+                    is-shrinking
+                    :class="$style.tableCellExpand"/>
+
                 <slot
                     name="header"
                     v-bind="{page, perPage, items: limitedItems, total}"/>
@@ -63,27 +68,54 @@
             </slot>
         </template>
 
-        <FluxTableRow
+        <template
             v-for="(item, index) of limitedItems"
-            :key="uniqueKey ? item[uniqueKey] : index"
-            :class="selectionMode && !treeDisabled && $style.isSelectableRow"
-            :is-selected="selectionMode ? isItemSelected(item) : false"
-            @click="onRowClick(item, $event)">
-            <FluxTableCell
-                v-if="selectionMode"
-                :class="$style.tableCellSelection">
-                <FluxFormCheckbox
-                    :model-value="isItemSelected(item)"
-                    @update:model-value="onSelectRow(item)"/>
-            </FluxTableCell>
-
-            <template v-for="(_, name) of slots">
-                <slot
-                    v-if="!IGNORED_SLOTS.includes(name as string)"
-                    v-bind="{index, item, items: limitedItems, page, perPage, total, isSelected: isItemSelected(item)}"
-                    :name="name"/>
-            </template>
-        </FluxTableRow>
+            :key="uniqueKey ? item[uniqueKey] : index">
+            <FluxTableRow
+                :class="selectionMode && !treeDisabled && $style.isSelectableRow"
+                :is-selected="selectionMode ? isItemSelected(item) : false"
+                @click="onRowClick(item, $event)">
+                <FluxTableCell
+                    v-if="selectionMode"
+                    :class="$style.tableCellSelection">
+                    <FluxFormCheckbox
+                        :model-value="isItemSelected(item)"
+                        @update:model-value="onSelectRow(item)"/>
+                </FluxTableCell>
+
+                <FluxTableCell
+                    v-if="hasExpandable"
+                    :class="$style.tableCellExpand">
+                    <FluxAction
+                        :class="clsx($style.tableExpandToggle, isItemExpanded(item) && $style.isExpanded)"
+                        icon="chevron-right"
+                        :aria-expanded="isItemExpanded(item)"
+                        :aria-label="isItemExpanded(item) ? translate('flux.collapseRow') : translate('flux.expandRow')"
+                        @click="toggleExpand(item)"/>
+                </FluxTableCell>
+
+                <template v-for="(_, name) of slots">
+                    <slot
+                        v-if="!IGNORED_SLOTS.includes(name as string)"
+                        v-bind="{index, item, items: limitedItems, page, perPage, total, isSelected: isItemSelected(item)}"
+                        :name="name"/>
+                </template>
+            </FluxTableRow>
+
+            <FluxTableRow
+                v-if="hasExpandable && isItemExpanded(item)"
+                :class="$style.tableExpandRow">
+                <FluxTableCell :colspan="columnCount">
+                    <template #content>
+                        <div :class="$style.tableExpandContent">
+                            <slot
+                                name="expandable"
+                                v-bind="{index, item, isExpanded: true, toggle: () => toggleExpand(item)}"/>
+                        </div>
+                    </template>
+                </FluxTableCell>
+            </FluxTableRow>
+        </template>
     </FluxTable>
 </template>
 
@@ -91,8 +123,11 @@
     lang="ts"
     setup
     generic="T extends Record<string, any>">
+    import { clsx } from 'clsx';
     import { computed, unref, useTemplateRef, type VNode, watch } from 'vue';
     import { useDisabledInjection } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import FluxAction from './FluxAction.vue';
     import FluxFormCheckbox from './FluxFormCheckbox.vue';
     import FluxPaginationBar from './FluxPaginationBar.vue';
     import FluxTable from './FluxTable.vue';
@@ -104,7 +139,7 @@
     type SelectionId = string | number;
     type SelectionValue = SelectionId | null | SelectionId[];
 
-    const IGNORED_SLOTS: string[] = ['filter', 'header', 'footer', 'colgroups', 'pagination'];
+    const IGNORED_SLOTS: string[] = ['filter', 'header', 'footer', 'colgroups', 'pagination', 'expandable'];
 
     const emit = defineEmits<{
         limit: [number];
@@ -112,8 +147,12 @@
     }>();
 
     const selected = defineModel<SelectionValue>('selected');
+    const expanded = defineModel<SelectionId[]>('expanded', {
+        default: () => []
+    });
 
     const {
+        expandMode = 'multiple',
         isBordered = true,
         isHoverable = false,
         isLoading = false,
@@ -124,6 +163,7 @@
         selectionMode,
         uniqueKey
     } = defineProps<{
+        readonly expandMode?: 'single' | 'multiple';
         readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
@@ -140,16 +180,6 @@
     }>();
 
     const slots = defineSlots<{
-        [key: string]: (props: {
-            readonly index: number;
-            readonly page: number;
-            readonly perPage: number;
-            readonly item: T;
-            readonly items: T[];
-            readonly total: number;
-            readonly isSelected: boolean;
-        }) => VNode;
-
         filter(props: {
             readonly page: number;
             readonly perPage: number;
@@ -179,13 +209,38 @@
         }): VNode;
 
         colgroups(): VNode;
+
+        expandable(props: {
+            readonly index: number;
+            readonly item: T;
+            readonly isExpanded: boolean;
+
+            toggle(): void;
+        }): VNode;
+    } & {
+        [key: string]: (props: {
+            readonly index: number;
+            readonly page: number;
+            readonly perPage: number;
+            readonly item: T;
+            readonly items: T[];
+            readonly total: number;
+            readonly isSelected: boolean;
+        }) => VNode;
     }>();
 
     const table = useTemplateRef('table');
     const treeDisabled = useDisabledInjection();
+    const translate = useTranslate();
 
     const limitedItems = computed(() => items.slice(0, perPage));
 
+    const hasExpandable = computed(() => 'expandable' in slots);
+    const columnCount = computed(() => {
+        const userColumns = Object.keys(slots).filter(name => !IGNORED_SLOTS.includes(name)).length;
+        return userColumns + (selectionMode ? 1 : 0) + (unref(hasExpandable) ? 1 : 0);
+    });
+
     const currentPageIds = computed<SelectionId[]>(() => {
         if (!uniqueKey) {
             return [];
@@ -294,10 +349,36 @@
         selected.value = current.filter(id => !ids.includes(id));
     }
 
+    function isItemExpanded(item: T): boolean {
+        const id = getItemId(item);
+        return id !== undefined && unref(expanded).includes(id);
+    }
+
+    function toggleExpand(item: T): void {
+        const id = getItemId(item);
+
+        if (id === undefined) {
+            return;
+        }
+
+        const current = unref(expanded);
+
+        if (current.includes(id)) {
+            expanded.value = current.filter(v => v !== id);
+            return;
+        }
+
+        expanded.value = expandMode === 'single' ? [id] : [...current, id];
+    }
+
     if (import.meta.env.DEV && selectionMode && !uniqueKey) {
         console.warn('[FluxDataTable] `uniqueKey` is required when `selectionMode` is set, otherwise rows cannot be tracked across renders.');
     }
 
+    if (import.meta.env.DEV && unref(hasExpandable) && !uniqueKey) {
+        console.warn('[FluxDataTable] `uniqueKey` is required when the `expandable` slot is used, otherwise rows cannot be tracked across renders.');
+    }
+
     watch(() => items, () => {
         unref(table)?.$el.scrollTo(0, 0);
     });

package/src/component/FluxDescriptionItem.vue

@@ -0,0 +1,43 @@
+<template>
+    <div
+        :class="clsx(
+            $style.descriptionItem,
+            isStacked && $style.isStacked
+        )">
+        <dt :class="$style.descriptionItemTerm">
+            <FluxIcon
+                v-if="icon"
+                :class="$style.descriptionItemIcon"
+                :name="icon"/>
+
+            <span :class="$style.descriptionItemLabel">
+                <slot name="label">{{ label }}</slot>
+            </span>
+        </dt>
+
+        <dd :class="$style.descriptionItemValue">
+            <slot/>
+        </dd>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/DescriptionList.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly isStacked?: boolean;
+        readonly label?: string;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+        label(): VNode[];
+    }>();
+</script>

package/src/component/FluxDescriptionList.vue

@@ -0,0 +1,37 @@
+<template>
+    <div :class="$style.descriptionList">
+        <div
+            v-if="title || slots.header"
+            :class="$style.descriptionListHeader">
+            <slot name="header">{{ title }}</slot>
+        </div>
+
+        <dl
+            :class="clsx(
+                $style.descriptionListItems,
+                direction === 'horizontal' && $style.isHorizontal
+            )">
+            <slot/>
+        </dl>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/DescriptionList.module.scss';
+
+    const {
+        direction = 'vertical'
+    } = defineProps<{
+        readonly direction?: 'horizontal' | 'vertical';
+        readonly title?: string;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+        header(): VNode[];
+    }>();
+</script>

package/src/component/FluxDestructiveButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.destructiveButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.destructiveButtonIcon"
         :css-class-label="$style.destructiveButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxFlyout.vue

@@ -16,8 +16,7 @@
         <dialog
             ref="dialog"
             :class="$style.flyoutDialog"
-            @click="onDialogBackdropClick"
-            @keydown.prevent.esc="close">
+            @click="onDialogBackdropClick">
             <FluxPane
                 v-if="isOpen"
                 ref="pane"
@@ -46,6 +45,12 @@
     import { FluxFlyoutInjectionKey } from '~flux/components/data';
     import FluxPane from './FluxPane.vue';
     import $style from '~flux/components/css/component/Flyout.module.scss';
+    import { useHotKey } from '@basmilius/common';
+
+    const emit = defineEmits<{
+        close: [];
+        open: [];
+    }>();
 
     const {
         direction = 'vertical',
@@ -93,6 +98,11 @@
     !isSSR && useEventListener(ref(window), 'resize', () => unref(isOpen) && reposition());
     useFocusTrap(paneRef);
 
+    useHotKey('esc', () => close(), {
+        enabled: isOpen,
+        target: dialogRef
+    });
+
     let closeAnimationEndListener: ((evt: AnimationEvent) => void) | null = null;
     let openAnimationEndListener: ((evt: AnimationEvent) => void) | null = null;
 
@@ -233,11 +243,13 @@
 
         if (isOpen && !dialog.open) {
             dialog.showModal();
+            emit('open');
 
             window.addEventListener('scroll', reposition, {passive: true});
             onCleanup(() => window.removeEventListener('scroll', reposition));
         } else if (!isOpen && dialog.open) {
             dialog.close();
+            emit('close');
         }
     });
 
@@ -250,6 +262,7 @@
     defineExpose({
         close,
         open,
-        toggle
+        toggle,
+        isOpen
     });
 </script>