@flux-ui/components 3.0.0-next.9 → 3.1.0

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">
+                    <FluxFormCheckbox
+                        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">
+                <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, 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 FluxFormCheckbox from './FluxFormCheckbox.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;
@@ -277,7 +278,18 @@
         return date >= selectionStart && date <= selectionEnd;
     }
 
+    function clampRange(start: DateTime, end: DateTime): [DateTime, DateTime] {
+        return [
+            DateTime.max(start, unref(minDate)),
+            DateTime.min(end, unref(maxDate).endOf('day'))
+        ];
+    }
+
     function setDate(date: DateTime): void {
+        if (isDisabled(date)) {
+            return;
+        }
+
         switch (rangeMode) {
             case 'range':
                 const [start] = unref(selection);
@@ -296,11 +308,11 @@
                 break;
 
             case 'month':
-                modelValue.value = [date.startOf('month'), date.endOf('month')];
+                modelValue.value = clampRange(date.startOf('month'), date.endOf('month'));
                 break;
 
             case 'week':
-                modelValue.value = [date.startOf('week'), date.endOf('week')];
+                modelValue.value = clampRange(date.startOf('week'), date.endOf('week'));
                 break;
 
             default:

package/src/component/FluxDestructiveButton.vue

@@ -1,6 +1,6 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.destructiveButton"
         :css-class-icon="$style.destructiveButtonIcon"
         :css-class-label="$style.destructiveButtonLabel"
@@ -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,

package/src/component/FluxDropZone.vue

@@ -5,7 +5,10 @@
             isDragging && $style.isDragging,
             isDraggingOver && $style.isDraggingOver
         ]"
-        :aria-disabled="disabled ? true : undefined">
+        :aria-disabled="disabled ? true : undefined"
+        :aria-label="ariaLabel ?? translate('flux.dropFilesOrClick')"
+        :tabindex="disabled ? -1 : 0"
+        @keydown.self="onKeyDown">
         <div
             :class="$style.dropZoneContent"
             @dragleave.capture="onDragLeave"
@@ -52,11 +55,12 @@
     lang="ts"
     setup>
     import { roundStep } from '@basmilius/utils';
-    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, type VNode, watch } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/DropZone.module.scss';
+    import $style from '~flux/components/css/component/DropZone.module.scss';
 
     const emit = defineEmits<{
         select: [File];
@@ -65,10 +69,12 @@
 
     const {
         accept,
+        ariaLabel,
         disabled: componentDisabled,
         isMultiple
     } = defineProps<{
         readonly accept?: string;
+        readonly ariaLabel?: string;
         readonly disabled?: boolean;
         readonly isLoading?: boolean;
         readonly isMultiple?: boolean;
@@ -80,25 +86,26 @@
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
 
         actions?(props: {
             readonly isDragging: boolean;
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
 
         extra?(props: {
             readonly isDragging: boolean;
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
     }>();
 
     const contentRef = useTemplateRef('content');
     const disabled = useDisabled(toRef(() => componentDisabled));
+    const translate = useTranslate();
 
     const isDragging = ref(false);
     const isDraggingOver = ref(false);
@@ -111,12 +118,23 @@
     });
 
     onUnmounted(() => {
-        window.removeEventListener('dragleave', onWindowDragEnd);
-        window.removeEventListener('dragover', onWindowDragStart);
-        window.removeEventListener('drop', onWindowDrop);
+        window.removeEventListener('dragleave', onWindowDragEnd, {capture: true});
+        window.removeEventListener('dragover', onWindowDragStart, {capture: true});
+        window.removeEventListener('drop', onWindowDrop, {capture: true});
     });
 
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            showPicker();
+            evt.preventDefault();
+        }
+    }
+
     function onDragEnter(evt: DragEvent): void {
+        if (unref(disabled)) {
+            return;
+        }
+
         isDraggingOver.value = true;
         evt.preventDefault();
     }
@@ -129,7 +147,7 @@
         isDragging.value = false;
         isDraggingOver.value = false;
 
-        if (!evt.dataTransfer) {
+        if (unref(disabled) || !evt.dataTransfer) {
             return;
         }
 
@@ -199,4 +217,3 @@
         pathLength.value = roundStep(width * 2 + height * 2, 6);
     }, {immediate: true});
 </script>
-

package/src/component/FluxDynamicView.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script
-    setup
-    lang="ts">
-    import { VNode } from 'vue';
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
     import { VNodeRenderer } from './primitive';
 
     defineProps<{

package/src/component/FluxExpandable.vue

@@ -34,6 +34,7 @@
                 v-if="isOpen"
                 :class="$style.expandableBody"
                 :id="contentId"
+                role="region"
                 :aria-labelledby="headerId">
                 <slot
                     v-bind="{label, close}"
@@ -50,13 +51,13 @@
 <script
     lang="ts"
     setup>
-    import { useComponentId } from '@flux-ui/internals';
+    import { useComponentId } from '@basmilius/common';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed, getCurrentInstance, onBeforeMount, onUnmounted, ref, unref, useId, watch } from 'vue';
-    import { useExpandableGroupInjection } from '$flux/composable';
-    import { FluxAutoHeightTransition, FluxFadeTransition } from '$flux/transition';
+    import { useExpandableGroupInjection } from '~flux/components/composable';
+    import { FluxAutoHeightTransition, FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Expandable.module.scss';
+    import $style from '~flux/components/css/component/Expandable.module.scss';
 
     const emit = defineEmits<{
         toggle: [boolean];
@@ -80,8 +81,8 @@
 
     const expandIcon = computed<FluxIconName>(() => unref(isOpen) ? 'minus' : 'plus');
 
-    onBeforeMount(() => register?.(unref(componentId), instance));
-    onUnmounted(() => unregister?.(unref(componentId)));
+    onBeforeMount(() => register?.(componentId.value, instance));
+    onUnmounted(() => unregister?.(componentId.value));
 
     function close(): void {
         isOpen.value = false;

package/src/component/FluxExpandableGroup.vue

@@ -8,9 +8,9 @@
     lang="ts"
     setup>
     import { getExposedRef } from '@flux-ui/internals';
-    import { ComponentInternalInstance, provide } from 'vue';
-    import { FluxExpandableGroupInjectionKey } from '$flux/data';
-    import $style from '$flux/css/component/Expandable.module.scss';
+    import { type ComponentInternalInstance, provide, type VNode } from 'vue';
+    import { FluxExpandableGroupInjectionKey } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Expandable.module.scss';
 
     const {
         isControlled
@@ -18,9 +18,8 @@
         readonly isControlled?: boolean;
     }>();
 
-
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const expandables: { [key: number]: ComponentInternalInstance; } = {};