@flux-ui/components 3.0.0-next.4 → 3.0.0-next.40

package/src/component/FluxDataTable.vue

@@ -1,17 +1,28 @@
 <template>
     <FluxTable
+        :fill-columns="fillColumns"
         :is-bordered="isBordered"
         :is-hoverable="isHoverable"
         :is-loading="isLoading"
         :is-separated="isSeparated"
         :is-striped="isStriped">
+        <template
+            v-if="'colgroups' in slots"
+            #colgroups>
+            <slot name="colgroups"/>
+        </template>
+
         <template
             v-if="'header' in slots"
             #header>
+            <slot
+                name="filter"
+                v-bind="{page, perPage, items: limitedItems, total}"/>
+
             <FluxTableRow>
                 <slot
                     name="header"
-                    v-bind="{page, perPage, rows, total}"/>
+                    v-bind="{page, perPage, items: limitedItems, total}"/>
             </FluxTableRow>
         </template>
 
@@ -21,17 +32,33 @@
             <FluxTableRow>
                 <slot
                     name="footer"
-                    v-bind="{page, perPage, rows, total}"/>
+                    v-bind="{page, perPage, items: limitedItems, total}"/>
             </FluxTableRow>
         </template>
 
+        <template
+            v-if="total > limits[0]"
+            #pagination>
+            <slot
+                name="pagination"
+                v-bind="{page, perPage, items: limitedItems, total}">
+                <FluxPaginationBar
+                    :limits="limits"
+                    :page="page"
+                    :per-page="perPage"
+                    :total="total"
+                    @limit="emit('limit', $event)"
+                    @navigate="emit('navigate', $event)"/>
+            </slot>
+        </template>
+
         <FluxTableRow
-            v-for="(row, index) of rows"
-            :key="uniqueKey ? row[uniqueKey] : index">
+            v-for="(item, index) of limitedItems"
+            :key="uniqueKey ? item[uniqueKey] : index">
             <template v-for="(_, name) of slots">
                 <slot
-                    v-if="name !== 'footer' && name !== 'header'"
-                    v-bind="{index, page, perPage, row, rows, total}"
+                    v-if="!IGNORED_SLOTS.includes(name as string)"
+                    v-bind="{index, item, items: limitedItems, page, perPage, total}"
                     :name="name"/>
             </template>
         </FluxTableRow>
@@ -42,25 +69,36 @@
     lang="ts"
     setup
     generic="T extends Record<string, any>">
+    import type { VNode } from 'vue';
     import { computed } from 'vue';
+    import FluxPaginationBar from './FluxPaginationBar.vue';
     import FluxTable from './FluxTable.vue';
     import FluxTableRow from './FluxTableRow.vue';
 
+    const IGNORED_SLOTS: string[] = ['filter', 'header', 'footer', 'colgroups', 'pagination'];
+
+    const emit = defineEmits<{
+        limit: [number];
+        navigate: [number];
+    }>();
+
     const {
         isBordered = true,
         isHoverable = false,
         isLoading = false,
         isSeparated = true,
         isStriped = false,
-        dataSet,
+        items,
         perPage
     } = 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 total: number;
@@ -72,25 +110,41 @@
             readonly index: number;
             readonly page: number;
             readonly perPage: number;
-            readonly row: T;
-            readonly rows: T[];
+            readonly item: T;
+            readonly items: T[];
             readonly total: number;
-        }) => any;
+        }) => 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;
-        }): any;
+        }): VNode;
 
         header(props: {
             readonly page: number;
             readonly perPage: number;
-            readonly rows: T[];
+            readonly items: T[];
             readonly total: number;
-        }): any;
+        }): VNode;
+
+        pagination(props: {
+            readonly page: number;
+            readonly perPage: number;
+            readonly items: T[];
+            readonly total: number;
+        }): VNode;
+
+        colgroups(): VNode;
     }>();
 
-    const rows = computed(() => dataSet.slice(0, perPage));
+    const limitedItems = computed(() => items.slice(0, perPage));
 </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 { computed, ref, unref, useId, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { FluxFadeTransition, FluxVerticalWindowTransition, FluxWindowTransition } from '$flux/transition';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import $style from '$flux/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/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 { VNode } from 'vue';
+    import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import $style from '$flux/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/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,8 +55,9 @@
     lang="ts"
     setup>
     import { roundStep } from '@basmilius/utils';
-    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, type VNode, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
+    import { useTranslate } from '$flux/composable/private';
     import { FluxFadeTransition } from '$flux/transition';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/DropZone.module.scss';
@@ -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,11 +118,18 @@
     });
 
     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 {
         isDraggingOver.value = true;
         evt.preventDefault();

package/src/component/FluxDynamicView.vue

@@ -7,7 +7,7 @@
 <script
     setup
     lang="ts">
-    import { VNode } from 'vue';
+    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,7 +51,7 @@
 <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';
@@ -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,7 +8,7 @@
     lang="ts"
     setup>
     import { getExposedRef } from '@flux-ui/internals';
-    import { ComponentInternalInstance, provide } from 'vue';
+    import { type ComponentInternalInstance, provide, type VNode } from 'vue';
     import { FluxExpandableGroupInjectionKey } from '$flux/data';
     import $style from '$flux/css/component/Expandable.module.scss';
 
@@ -20,7 +20,7 @@
 
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const expandables: { [key: number]: ComponentInternalInstance; } = {};

package/src/component/FluxFader.vue

@@ -9,8 +9,9 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useInterval } from '@flux-ui/internals';
-    import { computed, ref, unref, useTemplateRef, watch } from 'vue';
+    import { useInterval } from '@basmilius/common';
+    import { unrefTemplateElement } from '@flux-ui/internals';
+    import { computed, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
     import $style from '$flux/css/component/Fader.module.scss';
 
     const emit = defineEmits<{
@@ -29,7 +30,7 @@
             previous(): void;
 
             readonly current: number;
-        }): any;
+        }): VNode[];
     }>();
 
     const faderRef = useTemplateRef('fader');
@@ -47,13 +48,13 @@
     }
 
     function previous(): void {
-        current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) + 1;
+        current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) - 1;
     }
 
     watch(current, current => {
         const fader = unrefTemplateElement(faderRef);
 
-        if (!fader || fader.children.length === 0) {
+        if (!fader || fader.children.length === 0 || current < 0) {
             return;
         }
 

package/src/component/FluxFaderItem.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/css/component/Fader.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxFilter.vue

@@ -1,58 +1,29 @@
 <template>
-    <div
-        v-height-transition
-        :class="$style.filter">
-        <FluxWindow ref="window">
-            <template #default="{navigate}">
-                <FilterMenuRenderer
-                    :navigate="navigate"
-                    :state="modelValue">
-                    <slot/>
-                </FilterMenuRenderer>
-            </template>
-
-            <template
-                v-for="(filter, name) of filters"
-                #[name]>
-                <FluxMenu>
-                    <FluxMenuGroup
-                        :class="$style.filterHeader"
-                        is-horizontal>
-                        <FluxMenuItem
-                            :class="$style.filterBack"
-                            :label="translate('flux.back')"
-                            icon-leading="angle-left"
-                            @click="back()"/>
-
-                        <FluxMenuItem
-                            v-if="resettable?.includes(name)"
-                            :class="$style.filterReset"
-                            icon-leading="trash"
-                            is-destructive
-                            @click="reset(name)"/>
-                    </FluxMenuGroup>
-
-                    <VNodeRenderer :vnode="filter"/>
-                </FluxMenu>
-            </template>
-        </FluxWindow>
-    </div>
+    <FluxFilterBase
+        v-model="modelValue"
+        :resettable="resettable"
+        @reset="reset">
+        <template #filters>
+            <slot/>
+        </template>
+
+        <template #default="{ filters, menuItems }">
+            <FluxFilterWindow
+                :filters="filters"
+                :menu-items="menuItems"
+                :resettable="resettable"
+                @reset="reset"/>
+        </template>
+    </FluxFilterBase>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { flattenVNodeTree, getComponentName, getComponentProps, vHeightTransition } from '@flux-ui/internals';
-    import type { FluxFilterOptionItem, FluxFilterState } from '@flux-ui/types';
-    import { computed, provide, unref, useTemplateRef, VNode } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFilterInjectionKey } from '$flux/data';
-    import { FilterMenuRenderer, VNodeRenderer } from './primitive';
-    import FluxMenu from './FluxMenu.vue';
-    import FluxMenuGroup from './FluxMenuGroup.vue';
-    import FluxMenuItem from './FluxMenuItem.vue';
-    import FluxWindow from './FluxWindow.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import type { VNode } from 'vue';
+    import type { FluxFilterState } from '@flux-ui/types';
+    import FluxFilterBase from './FluxFilterBase.vue';
+    import FluxFilterWindow from '$flux/component/FluxFilterWindow.vue';
 
     const emit = defineEmits<{
         reset: [string]
@@ -66,68 +37,11 @@
         readonly resettable?: string[];
     }>();
 
-    const slots = defineSlots<{
-        default(): any;
+    defineSlots<{
+        default(): VNode[];
     }>();
 
-    const translate = useTranslate();
-
-    const windowRef = useTemplateRef<{ back(to: string): void; }>('window');
-
-    const filters = computed<Record<string, VNode>>(() => {
-        const filters: { [key: string]: VNode; } = {};
-        const items = flattenVNodeTree(slots.default?.() ?? []);
-
-        for (const item of items) {
-            const name = getComponentName(item);
-
-            if (!name.startsWith('FluxFilter')) {
-                continue;
-            }
-
-            const props = getComponentProps<{ name: string; }>(item);
-
-            if (!props.name) {
-                continue;
-            }
-
-            filters[props.name] = item;
-        }
-
-        return filters;
-    });
-
-    function back(): void {
-        unref(windowRef)?.back('default');
-    }
-
     function reset(name: string): void {
-        back();
         emit('reset', name);
     }
-
-    function getValue(name: string): FluxFilterOptionItem['value'] | undefined {
-        if (!hasValue(name)) {
-            return undefined;
-        }
-
-        return unref(modelValue)[name] as FluxFilterOptionItem['value'];
-    }
-
-    function hasValue(name: string): boolean {
-        return name in unref(modelValue);
-    }
-
-    function setValue(name: string, value: FluxFilterOptionItem['value']): void {
-        modelValue.value[name] = value;
-    }
-
-    provide(FluxFilterInjectionKey, {
-        state: modelValue,
-        back,
-        reset,
-        getValue,
-        hasValue,
-        setValue
-    });
 </script>