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

package/src/component/FluxCommandPaletteGroup.vue

@@ -0,0 +1,23 @@
+<template>
+    <div :class="$style.commandPaletteGroup">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.commandPaletteGroupIcon"
+            :name="icon"/>
+
+        <span>{{ label }}</span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/CommandPalette.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly label: string;
+    }>();
+</script>

package/src/component/FluxCommandPaletteItem.vue

@@ -0,0 +1,60 @@
+<template>
+    <button
+        :class="isHighlighted ? $style.commandPaletteItemHighlighted : $style.commandPaletteItem"
+        tabindex="-1"
+        type="button"
+        @click="$emit('activate')"
+        @mousedown.prevent
+        @mouseenter="$emit('highlight')">
+        <div
+            v-if="icon"
+            :class="$style.commandPaletteItemIcon">
+            <FluxIcon :name="icon"/>
+        </div>
+
+        <div :class="$style.commandPaletteItemContent">
+            <div :class="$style.commandPaletteItemLabel">
+                {{ label }}
+            </div>
+
+            <div
+                v-if="subLabel"
+                :class="$style.commandPaletteItemSubLabel">
+                {{ subLabel }}
+            </div>
+        </div>
+
+        <FluxTag
+            v-if="command"
+            is-keyboard-shortcut
+            :label="command"/>
+
+        <FluxIcon
+            v-if="hasSubActions"
+            :class="$style.commandPaletteItemSubActionIndicator"
+            name="chevron-right"/>
+    </button>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxTag from './FluxTag.vue';
+    import $style from '~flux/components/css/component/CommandPalette.module.scss';
+
+    defineEmits<{
+        activate: [];
+        highlight: [];
+    }>();
+
+    defineProps<{
+        readonly command?: string;
+        readonly hasSubActions?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isHighlighted?: boolean;
+        readonly label: string;
+        readonly subLabel?: string;
+    }>();
+</script>

package/src/component/FluxComment.vue

@@ -38,10 +38,10 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import type { DateTime } from 'luxon';
-    import { computed } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
+    import { computed, type VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxAvatar from './FluxAvatar.vue';
-    import $style from '$flux/css/component/Comment.module.scss';
+    import $style from '~flux/components/css/component/Comment.module.scss';
 
     const {
         avatarFallback = 'colorized',
@@ -60,7 +60,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const translate = useTranslate();

package/src/component/FluxConfirm.vue

@@ -1,14 +1,9 @@
 <template>
-    <FluxPane>
-        <FluxPaneHeader
-            :icon="confirm.icon"
-            :title="confirm.title"/>
-
-        <FluxPaneBody v-html="confirm.message"/>
-
-        <FluxPaneFooter>
-            <FluxSpacer/>
-
+    <DialogLayout
+        :icon="confirm.icon"
+        :message="confirm.message"
+        :title="confirm.title">
+        <template #footer>
             <FluxSecondaryButton
                 :label="translate('flux.cancel')"
                 @click="confirm.onCancel()"/>
@@ -17,22 +12,18 @@
                 icon-leading="circle-check"
                 :label="translate('flux.ok')"
                 @click="confirm.onConfirm()"/>
-        </FluxPaneFooter>
-    </FluxPane>
+        </template>
+    </DialogLayout>
 </template>
 
 <script
     lang="ts"
     setup>
     import type { FluxConfirmObject } from '@flux-ui/types';
-    import { useTranslate } from '$flux/composable/private';
-    import FluxPane from './FluxPane.vue';
-    import FluxPaneBody from './FluxPaneBody.vue';
-    import FluxPaneFooter from './FluxPaneFooter.vue';
-    import FluxPaneHeader from './FluxPaneHeader.vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import FluxSpacer from './FluxSpacer.vue';
+    import { DialogLayout } from './primitive';
 
     defineProps<{
         readonly confirm: FluxConfirmObject;

package/src/component/FluxContainer.vue

@@ -1,23 +1,26 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.container"
         :style="{'--gutter': `${gutter}px`}">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Layout.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 
     const {
-        gutter = 30
+        gutter = 18
     } = defineProps<{
         readonly gutter?: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxDataTable.vue

@@ -1,5 +1,6 @@
 <template>
     <FluxTable
+        ref="table"
         :fill-columns="fillColumns"
         :is-bordered="isBordered"
         :is-hoverable="isHoverable"
@@ -13,12 +14,26 @@
         </template>
 
         <template
-            v-if="'header' in slots"
+            v-if="'header' in slots || selectionMode"
             #header>
+            <slot
+                name="filter"
+                v-bind="{page, perPage, items: limitedItems, total}"/>
+
             <FluxTableRow>
+                <FluxTableHeader
+                    v-if="selectionMode"
+                    is-shrinking
+                    :class="$style.tableCellSelection">
+                    <FluxCheckbox
+                        v-if="selectionMode === 'multiple'"
+                        :model-value="selectAllState"
+                        @update:model-value="onSelectAll"/>
+                </FluxTableHeader>
+
                 <slot
                     name="header"
-                    v-bind="{page, perPage, rows, total}"/>
+                    v-bind="{page, perPage, items: limitedItems, total}"/>
             </FluxTableRow>
         </template>
 
@@ -28,7 +43,7 @@
             <FluxTableRow>
                 <slot
                     name="footer"
-                    v-bind="{page, perPage, rows, total}"/>
+                    v-bind="{page, perPage, items: limitedItems, total}"/>
             </FluxTableRow>
         </template>
 
@@ -37,7 +52,7 @@
             #pagination>
             <slot
                 name="pagination"
-                v-bind="{page, perPage, rows, total}">
+                v-bind="{page, perPage, items: limitedItems, total}">
                 <FluxPaginationBar
                     :limits="limits"
                     :page="page"
@@ -49,12 +64,23 @@
         </template>
 
         <FluxTableRow
-            v-for="(row, index) of rows"
-            :key="uniqueKey ? row[uniqueKey] : index">
+            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">
+                <FluxCheckbox
+                    :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, page, perPage, row, rows, total}"
+                    v-bind="{index, item, items: limitedItems, page, perPage, total, isSelected: isItemSelected(item)}"
                     :name="name"/>
             </template>
         </FluxTableRow>
@@ -65,38 +91,50 @@
     lang="ts"
     setup
     generic="T extends Record<string, any>">
-    import type { VNode } from 'vue';
-    import { computed } from 'vue';
+    import { computed, unref, useTemplateRef, type VNode, watch } from 'vue';
+    import { useDisabledInjection } from '~flux/components/composable';
+    import FluxCheckbox from './FluxCheckbox.vue';
     import FluxPaginationBar from './FluxPaginationBar.vue';
     import FluxTable from './FluxTable.vue';
+    import FluxTableCell from './FluxTableCell.vue';
+    import FluxTableHeader from './FluxTableHeader.vue';
     import FluxTableRow from './FluxTableRow.vue';
+    import $style from '~flux/components/css/component/Table.module.scss';
+
+    type SelectionId = string | number;
+    type SelectionValue = SelectionId | null | SelectionId[];
 
-    const IGNORED_SLOTS: string[] = ['header', 'footer', 'colgroups', 'pagination'];
+    const IGNORED_SLOTS: string[] = ['filter', 'header', 'footer', 'colgroups', 'pagination'];
 
     const emit = defineEmits<{
         limit: [number];
         navigate: [number];
     }>();
 
+    const selected = defineModel<SelectionValue>('selected');
+
     const {
         isBordered = true,
         isHoverable = false,
         isLoading = false,
         isSeparated = true,
         isStriped = false,
-        dataSet,
-        perPage
+        items,
+        perPage,
+        selectionMode,
+        uniqueKey
     } = defineProps<{
-        readonly dataSet: T[];
         readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
         readonly isLoading?: boolean;
         readonly isSeparated?: boolean;
         readonly isStriped?: boolean;
+        readonly items: T[];
         readonly limits: number[];
         readonly page: number;
         readonly perPage: number;
+        readonly selectionMode?: 'single' | 'multiple';
         readonly total: number;
         readonly uniqueKey?: string;
     }>();
@@ -106,34 +144,161 @@
             readonly index: number;
             readonly page: number;
             readonly perPage: number;
-            readonly row: T;
-            readonly rows: T[];
+            readonly item: T;
+            readonly items: T[];
             readonly total: number;
+            readonly isSelected: boolean;
         }) => VNode;
 
+        filter(props: {
+            readonly page: number;
+            readonly perPage: number;
+            readonly items: T[];
+            readonly total: number;
+        }): VNode;
+
         footer(props: {
             readonly page: number;
             readonly perPage: number;
-            readonly rows: T[];
+            readonly items: T[];
             readonly total: number;
         }): VNode;
 
         header(props: {
             readonly page: number;
             readonly perPage: number;
-            readonly rows: T[];
+            readonly items: T[];
             readonly total: number;
         }): VNode;
 
         pagination(props: {
             readonly page: number;
             readonly perPage: number;
-            readonly rows: T[];
+            readonly items: T[];
             readonly total: number;
         }): VNode;
 
         colgroups(): VNode;
     }>();
 
-    const rows = computed(() => dataSet.slice(0, perPage));
+    const table = useTemplateRef('table');
+    const treeDisabled = useDisabledInjection();
+
+    const limitedItems = computed(() => items.slice(0, perPage));
+
+    const currentPageIds = computed<SelectionId[]>(() => {
+        if (!uniqueKey) {
+            return [];
+        }
+
+        return unref(limitedItems).map(item => item[uniqueKey] as SelectionId);
+    });
+
+    const selectAllState = computed<boolean | null>(() => {
+        const ids = unref(currentPageIds);
+        const value = unref(selected);
+
+        if (ids.length === 0 || !Array.isArray(value)) {
+            return false;
+        }
+
+        const selectedOnPage = ids.filter(id => value.includes(id)).length;
+
+        if (selectedOnPage === 0) {
+            return false;
+        }
+
+        if (selectedOnPage === ids.length) {
+            return true;
+        }
+
+        return null;
+    });
+
+    function getItemId(item: T): SelectionId | undefined {
+        if (!uniqueKey) {
+            return undefined;
+        }
+
+        return item[uniqueKey] as SelectionId;
+    }
+
+    function isItemSelected(item: T): boolean {
+        if (!selectionMode) {
+            return false;
+        }
+
+        const id = getItemId(item);
+
+        if (id === undefined) {
+            return false;
+        }
+
+        const value = unref(selected);
+
+        if (Array.isArray(value)) {
+            return value.includes(id);
+        }
+
+        return value === id;
+    }
+
+    function onRowClick(item: T, event: MouseEvent): void {
+        if (!selectionMode || unref(treeDisabled)) {
+            return;
+        }
+
+        const target = event.target as HTMLElement | null;
+
+        if (target?.closest('a, button, input, label, select, textarea, [role="button"]')) {
+            return;
+        }
+
+        onSelectRow(item);
+    }
+
+    function onSelectRow(item: T): void {
+        const id = getItemId(item);
+
+        if (id === undefined) {
+            return;
+        }
+
+        if (selectionMode === 'multiple') {
+            const current = Array.isArray(unref(selected)) ? unref(selected) as SelectionId[] : [];
+            selected.value = current.includes(id)
+                ? current.filter(v => v !== id)
+                : [...current, id];
+            return;
+        }
+
+        if (selectionMode === 'single') {
+            selected.value = isItemSelected(item) ? null : id;
+        }
+    }
+
+    function onSelectAll(value: boolean | null): void {
+        if (selectionMode !== 'multiple') {
+            return;
+        }
+
+        const ids = unref(currentPageIds);
+        const current = Array.isArray(unref(selected)) ? unref(selected) as SelectionId[] : [];
+
+        if (value) {
+            const additions = ids.filter(id => !current.includes(id));
+            selected.value = [...current, ...additions];
+            return;
+        }
+
+        selected.value = current.filter(id => !ids.includes(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.');
+    }
+
+    watch(() => items, () => {
+        unref(table)?.$el.scrollTo(0, 0);
+    });
 </script>

package/src/component/FluxDatePicker.vue

@@ -56,9 +56,7 @@
                             <span :class="$style.datePickerDay">{{ day }}</span>
                         </template>
 
-                        <template
-                            v-for="date of dates"
-                            :key="date">
+                        <template v-for="date of dates">
                             <button
                                 :class="clsx(
                                     $style.datePickerDate,
@@ -89,7 +87,7 @@
                 :class="$style.datePickerMonths">
                 <template
                     v-for="month of months"
-                    :key="month">
+                    :key="month.label">
                     <FluxSecondaryButton
                         :disabled="!isWithinBoundary(month.date, 'month')"
                         :label="month.label"
@@ -131,14 +129,13 @@
     import { useCalendar, useCalendarMonthSwitcher, useCalendarYearSwitcher } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
-    import { computed, ref, unref, useId } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFadeTransition, FluxVerticalWindowTransition, FluxWindowTransition } from '$flux/transition';
+    import { computed, ref, unref, useId, watch } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition, FluxVerticalWindowTransition, FluxWindowTransition } from '~flux/components/transition';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/DatePicker.module.scss';
+    import $style from '~flux/components/css/component/DatePicker.module.scss';
 
     const modelValue = defineModel<DateTime | DateTime[] | null>({
-        default: null,
         required: true
     });
 
@@ -198,6 +195,10 @@
         }
     });
 
+    watch(modelValue, () => {
+        setViewDate(getInitialDate());
+    });
+
     function getInitialDate(): DateTime {
         const value = unref(modelValue);
         let date: DateTime;

package/src/component/FluxDestructiveButton.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxDisabled.vue

@@ -6,7 +6,7 @@
     lang="ts"
     setup>
     import { provide, toRef } from 'vue';
-    import { FluxDisabledInjectionKey } from '$flux/data';
+    import { FluxDisabledInjectionKey } from '~flux/components/data';
 
     defineOptions({
         inheritAttrs: false

package/src/component/FluxDivider.vue

@@ -6,7 +6,7 @@
             contentPlacement === 'end' && $style.dividerContentEnd
         )"
         role="separator"
-        aria-orientation="horizontal">
+        :aria-orientation="direction">
         <div
             v-if="slots.default"
             :class="$style.dividerContent">
@@ -22,16 +22,20 @@
 <script
     lang="ts"
     setup>
+    import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Divider.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Divider.module.scss';
 
     const {
-        contentPlacement = 'center'
+        contentPlacement = 'center',
+        direction = 'horizontal'
     } = defineProps<{
         readonly contentPlacement?: 'start' | 'center' | 'end';
+        readonly direction?: FluxDirection;
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
+        default?(): VNode[];
     }>();
 </script>

package/src/component/FluxDotPattern.vue

@@ -30,7 +30,7 @@
     lang="ts"
     setup>
     import { ref, useId, useTemplateRef, watch } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     const {
         width = 16,