@flux-ui/components 3.1.2 → 3.1.3

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.3",
     "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.3",
+        "@flux-ui/types": "3.1.3",
         "@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/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/FluxFormCombobox.vue

@@ -0,0 +1,98 @@
+<template>
+    <SelectBase
+        v-model:searchQuery="modelSearch"
+        :aria-invalid="error ? true : undefined"
+        :class="clsx(
+            isCondensed && $formStyle.isCondensed,
+            isSecondary && $formStyle.isSecondary,
+            error && $formStyle.isInvalid
+        )"
+        :disabled="disabled"
+        is-searchable
+        :is-creatable="isCreatable"
+        :is-loading="isLoading"
+        :is-multiple="isMultiple"
+        :options="groups"
+        :placeholder="placeholder"
+        :selected="selected"
+        @create="onCreate"
+        @deselect="onDeselect"
+        @select="onSelect"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps, FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectValue } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, ref, toRef, unref } from 'vue';
+    import { SelectBase } from '~flux/components/component/primitive';
+    import { useDisabled } from '~flux/components/composable';
+    import { useFormSelect } from '~flux/components/composable/private';
+    import { isFluxFormSelectGroup, isFluxFormSelectOption } from '~flux/components/data';
+    import $formStyle from '~flux/components/css/component/Form.module.scss';
+
+    const modelSearch = defineModel<string>('searchQuery', {
+        default: ''
+    });
+
+    const modelValue = defineModel<FluxFormSelectValue>({
+        required: true
+    });
+
+    const {
+        disabled: componentDisabled,
+        isMultiple,
+        options
+    } = defineProps<Pick<FluxFormInputBaseProps, 'autoFocus' | 'disabled' | 'error' | 'isCondensed' | 'isLoading' | 'isReadonly' | 'isSecondary' | 'name' | 'placeholder'> & {
+        readonly isCreatable?: boolean;
+        readonly isMultiple?: boolean;
+        readonly options: FluxFormSelectEntry[];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const createdOptions = ref<FluxFormSelectOption[]>([]);
+
+    const allOptions = computed<FluxFormSelectEntry[]>(() => {
+        const seen = new Set<string | number | null>();
+
+        return [...options, ...createdOptions.value].filter(o => {
+            if (isFluxFormSelectGroup(o)) {
+                return true;
+            }
+
+            if (seen.has(o.value)) {
+                return false;
+            }
+
+            seen.add(o.value);
+            return true;
+        });
+    });
+
+    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, allOptions, modelSearch);
+
+    function onDeselect(id: string | number | null): void {
+        if (isMultiple) {
+            modelValue.value = unref(values).filter(v => v !== id);
+        }
+    }
+
+    function onSelect(id: string | number | null): void {
+        if (isMultiple) {
+            modelValue.value = [...unref(values), id];
+        } else {
+            modelValue.value = id;
+        }
+    }
+
+    function onCreate(query: string): void {
+        const exists = unref(allOptions).some(o => isFluxFormSelectOption(o) && o.value === query);
+
+        if (!exists) {
+            createdOptions.value = [...createdOptions.value, {label: query, value: query}];
+        }
+
+        onSelect(query);
+    }
+</script>