@flux-ui/components 3.0.0-next.2 → 3.0.0-next.21

package/dist/util/createDialogRenderer.d.ts

@@ -1,4 +1,4 @@
-import { Component, RenderFunction, Slots, SetupContext } from 'vue';
+import { Component, RenderFunction, SetupContext, Slots } from 'vue';
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
     readonly isCloseable?: boolean;

package/dist/util/createDialogRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDialogRenderer.d.ts","sourceRoot":"","sources":["../../src/util/createDialogRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAsB,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAsC,YAAY,EAAmB,MAAM,KAAK,CAAC;AAGxF,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG;IACT,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,CAqDxI"}
+{"version":3,"file":"createDialogRenderer.d.ts","sourceRoot":"","sources":["../../src/util/createDialogRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAS,MAAM,KAAK,CAAC;AAKjF,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG;IACT,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAIF,MAAM,CAAC,OAAO,WAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,CAiExI"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.2",
+    "version": "3.0.0-next.21",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -23,8 +23,7 @@
     ],
     "scripts": {
         "build": "vue-tsc && vite build",
-        "dev": "vite build --mode dev --watch",
-        "prepublishOnly": "cp ../../README.md ."
+        "dev": "vite build --mode dev --watch"
     },
     "engines": {
         "node": ">=23"
@@ -32,9 +31,9 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "default": "./dist/flux.js"
+            "default": "./dist/index.js"
         },
-        "./style.css": "./dist/flux.css",
+        "./style.css": "./dist/index.css",
         "./*": "./*"
     },
     "publishConfig": {
@@ -46,32 +45,32 @@
         "src",
         "tsconfig.json"
     ],
-    "main": "./dist/flux.js",
-    "module": "./dist/flux.js",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^1.12.0",
-        "@flux-ui/internals": "3.0.0-next.0",
-        "@flux-ui/types": "3.0.0-next.0",
-        "@fortawesome/fontawesome-common-types": "^6.7.2",
+        "@basmilius/utils": "^2.13.0",
+        "@flux-ui/internals": "3.0.0-next.21",
+        "@flux-ui/types": "3.0.0-next.21",
+        "@fortawesome/fontawesome-common-types": "^7.1.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
         "lodash-es": "^4.17.21",
-        "luxon": "^3.6.1",
-        "vue": "^3.5.13"
+        "luxon": "^3.7.2",
+        "vue": "^3.5.23"
     },
     "devDependencies": {
-        "@basmilius/vite-vue-preset": "^2.6.0",
+        "@basmilius/vite-preset": "^2.13.0",
         "@types/lodash-es": "^4.17.12",
-        "@types/luxon": "^3.6.2",
-        "@types/node": "^22.14.1",
-        "@vitejs/plugin-vue": "^5.2.3",
-        "pinia": "^3.0.2",
-        "sass-embedded": "^1.86.3",
-        "typescript": "^5.8.3",
-        "vite": "^6.2.6",
-        "vue-tsc": "^2.2.8"
+        "@types/luxon": "^3.7.1",
+        "@types/node": "^24.10.0",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "pinia": "^3.0.4",
+        "sass-embedded": "^1.93.3",
+        "typescript": "^5.9.3",
+        "vite": "^7.2.1",
+        "vue-tsc": "^3.1.3"
     }
 }

package/src/component/FluxDataTable.vue

@@ -1,17 +1,26 @@
 <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 +30,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 +67,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 +108,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

@@ -131,7 +131,7 @@
     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';
@@ -198,6 +198,10 @@
         }
     });
 
+    watch(modelValue, () => {
+        setViewDate(getInitialDate());
+    });
+
     function getInitialDate(): DateTime {
         const value = unref(modelValue);
         let date: DateTime;

package/src/component/FluxFlyout.vue

@@ -39,7 +39,7 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useFocusTrap } from '@flux-ui/internals';
+    import { isSSR, unrefTemplateElement, useEventListener, useFocusTrap } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { provide, ref, unref, useTemplateRef, watch } from 'vue';
@@ -88,6 +88,7 @@
     const paneMarginX = ref(0);
     const paneMarginY = ref(0);
 
+    !isSSR && useEventListener(ref(window), 'resize', () => unref(isOpen) && reposition());
     useFocusTrap(paneRef);
 
     function close(): void {

package/src/component/FluxFormInput.vue

@@ -2,6 +2,7 @@
     <div
         :class="clsx(
             disabled ? $style.formInputDisabled : $style.formInputEnabled,
+            isCondensed && $style.isCondensed,
             isSecondary && $style.isSecondary
         )"
         :aria-disabled="disabled ? true : undefined">
@@ -85,6 +86,7 @@
         readonly iconLeading?: FluxIconName;
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
+        readonly isCondensed?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;
@@ -208,7 +210,7 @@
 
         if (value) {
             mask.value = value;
-            localValue.value = mask.value;
+            modelValue.value = mask.value;
         }
 
         onCleanup(() => mask.destroy());

package/src/component/FluxFormInputGroup.vue

@@ -2,6 +2,7 @@
     <div
         :class="clsx(
             $style.formInputGroup,
+            isCondensed && $style.isCondensed,
             isSecondary && $style.isSecondary
         )"
         role="textbox">
@@ -17,6 +18,7 @@
 
     defineProps<{
         readonly isSecondary?: boolean;
+        readonly isCondensed?: boolean;
     }>();
 
     defineSlots<{

package/src/component/FluxFormSelect.vue

@@ -41,7 +41,7 @@
     }>();
 
     const disabled = useDisabled(toRef(() => componentDisabled));
-    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, options, modelSearch);
+    const {groups, selected, values} = useFormSelect(modelValue, isMultiple, toRef(() => options), modelSearch);
 
     function onDeselect(id: string | number | null): void {
         if (unref(isMultiple)) {

package/src/component/FluxFormTimeZonePicker.vue

@@ -10,6 +10,7 @@
 <script
     lang="ts"
     setup>
+    import { isSSR } from '@flux-ui/internals';
     import type { FluxFormSelectEntry } from '@flux-ui/types';
     import { upperFirst } from 'lodash-es';
     import { computed, toRef } from 'vue';
@@ -651,6 +652,10 @@
     const translate = useTranslate();
 
     const options = computed<FluxFormSelectEntry[]>(() => {
+        if (isSSR) {
+            return [];
+        }
+
         const groups: Record<string, FluxFormSelectEntry[]> = {};
         const options: FluxFormSelectEntry[] = [];
 

package/src/component/FluxGallery.vue

@@ -1,8 +1,8 @@
 <template>
     <FluxDropZone
+        :class="$style.gallery"
         accept="image/*"
         :disabled="!isEditable"
-        :is-empty="items && items.length === 0"
         is-multiple
         placeholder-icon="image"
         :placeholder-button="translate('flux.galleryPlaceholderButton')"
@@ -11,7 +11,7 @@
         @select-multiple="onFilesSelected">
         <template #default="{showPicker}">
             <TransitionGroup
-                :class="$style.gallery"
+                :class="$style.galleryGrid"
                 :move-class="$style.galleryMove"
                 tag="div">
                 <template

package/src/component/FluxMenuItem.vue

@@ -14,6 +14,7 @@
             [$style.menuItemSelected]: isSelectable && isSelected
         }"
         :aria-checked="isSelectable ? isSelected : undefined"
+        :tabindex="tabindex"
         @click="$emit('click', $event)">
         <template
             v-if="isSelectable && (!iconLeading || isSelected)"

package/src/component/FluxOverlayProvider.vue

@@ -0,0 +1,39 @@
+<template>
+    <div :class="$style.overlayProvider">
+        <div :class="$style.overlayShade"/>
+    </div>
+
+    <FluxOverlay size="medium">
+        <FluxAlert
+            v-for="alert of alerts"
+            :key="alert.id"
+            :alert="alert"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxConfirm
+            v-for="confirm of confirms"
+            :key="confirm.id"
+            :confirm="confirm"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxPrompt
+            v-for="prompt of prompts"
+            :key="prompt.id"
+            :prompt="prompt"/>
+    </FluxOverlay>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useFluxStore } from '$flux/data';
+    import FluxAlert from './FluxAlert.vue';
+    import FluxConfirm from './FluxConfirm.vue';
+    import FluxOverlay from './FluxOverlay.vue';
+    import FluxPrompt from './FluxPrompt.vue';
+    import $style from '$flux/css/component/Overlay.module.scss';
+
+    const {alerts, confirms, prompts} = useFluxStore();
+</script>

package/src/component/FluxPagination.vue

@@ -1,52 +1,56 @@
 <template>
-    <FluxButtonGroup
+    <nav
         :class="$style.pagination"
         role="navigation"
         :aria-label="translate('flux.pagination')">
-        <FluxSecondaryButton
+        <FluxPaginationButton
             v-if="arrows || isCompact"
             :disabled="isPreviousDisabled"
             icon-leading="angle-left"
+            is-arrow
             :aria-label="translate('flux.previous')"
             @click="previous"/>
 
         <template
             v-if="!isCompact"
             v-for="p of visiblePages">
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 v-if="p === 'dots'"
                 disabled
-                icon-leading="ellipsis-h"/>
+                icon-leading="ellipsis-h"
+                is-spacer/>
 
-            <FluxPrimaryButton
+            <FluxPaginationButton
                 v-else-if="p === page"
+                is-current
                 :label="`${p}`"
                 aria-current="page"/>
 
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 v-else
                 :label="`${p}`"
                 @click="navigate(p)"/>
         </template>
 
         <template v-else>
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 :class="$style.paginationCurrentZZ"
                 @click="prompt"
                 #before>
                 <strong>{{ page }}</strong>
                 <span>/</span>
                 <span>{{ pages }}</span>
-            </FluxSecondaryButton>
+            </FluxPaginationButton>
         </template>
 
-        <FluxSecondaryButton
+        <FluxPaginationButton
             v-if="arrows || isCompact"
             :disabled="isNextDisabled"
             icon-leading="angle-right"
+            is-arrow
             :aria-label="translate('flux.next')"
             @click="next"/>
-    </FluxButtonGroup>
+    </nav>
 </template>
 
 <script
@@ -55,9 +59,7 @@
     import { computed, unref } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { showPrompt } from '$flux/data';
-    import FluxButtonGroup from './FluxButtonGroup.vue';
-    import FluxPrimaryButton from './FluxPrimaryButton.vue';
-    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxPaginationButton from './FluxPaginationButton.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
@@ -89,7 +91,7 @@
 
         const sizes = {
             end: 1,
-            middle: 1
+            middle: 2
         } as const;
 
         let dots = false;

package/src/component/FluxPaginationBar.vue

@@ -1,40 +1,32 @@
 <template>
-    <FluxStack :class="$style.paginationBar">
-        <FluxFormInputGroup>
-            <FluxFormInputAddition>
-                <span>{{ translate('flux.rowsPerPage') }}</span>
-            </FluxFormInputAddition>
-
-            <FluxFormSelect
-                v-model="limit"
-                :options="limitOptions"/>
-        </FluxFormInputGroup>
+    <div :class="$style.paginationBar">
+        <FluxPagination
+            v-if="total > perPage"
+            arrows
+            :page="page"
+            :per-page="perPage"
+            :total="total"
+            @navigate="$emit('navigate', $event)"/>
 
         <FluxSpacer :class="$style.paginationBarSpacer"/>
 
-        <FluxFormInputGroup>
-            <FluxFormInputAddition>
-                <span>
-                    {{
-                        translate('flux.displayingOf', {
-                            from: (page - 1) * perPage + 1,
-                            to: Math.min(total, page * perPage),
-                            total: total
-                        })
-                    }}
-                </span>
-            </FluxFormInputAddition>
+        <div :class="$style.paginationBarLimit">
+            <span :class="$style.paginationBarLimitDisplayingOf">
+                {{
+                    translate('flux.displayingOf', {
+                        from: (page - 1) * perPage + 1,
+                        to: Math.min(total, page * perPage),
+                        total: total
+                    })
+                }}
+            </span>
 
-            <FluxPagination
-                v-if="total > perPage"
-                arrows
-                is-compact
-                :page="page"
-                :per-page="perPage"
-                :total="total"
-                @navigate="$emit('navigate', $event)"/>
-        </FluxFormInputGroup>
-    </FluxStack>
+            <FluxFormSelect
+                v-model="limit"
+                :class="$style.paginationBarLimitSelect"
+                :options="limitOptions"/>
+        </div>
+    </div>
 </template>
 
 <script
@@ -43,12 +35,9 @@
     import type { FluxFormSelectOption } from '@flux-ui/types';
     import { computed, ref, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
-    import FluxFormInputAddition from './FluxFormInputAddition.vue';
-    import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxFormSelect from './FluxFormSelect.vue';
     import FluxPagination from './FluxPagination.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import FluxStack from './FluxStack.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
@@ -70,9 +59,9 @@
 
     const limit = ref(perPage);
 
-    const limitOptions = computed(() => limits.map<FluxFormSelectOption>(limit => ({
-        label: limit.toString(),
-        value: limit
+    const limitOptions = computed(() => limits.map<FluxFormSelectOption>(n => ({
+        label: translate('flux.showN', {n}),
+        value: n
     })));
 
     watch(limit, limit => emit('limit', limit));

package/src/component/FluxPaginationButton.vue

@@ -0,0 +1,39 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :class="[
+            isArrow && $style.paginationButtonArrow,
+            isCurrent && $style.paginationButtonCurrent,
+            isSpacer && $style.paginationButtonSpacer
+        ]"
+        :css-class="$style.paginationButton"
+        :css-class-icon="$style.paginationButtonIcon"
+        :css-class-label="$style.paginationButtonLabel"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <template
+            v-for="slot of SLOTS"
+            #[slot]>
+            <slot :name="slot"/>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
+    import FluxButton, { SLOTS } from './FluxButton.vue';
+    import $style from '$flux/css/component/Pagination.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+
+    defineProps<FluxButtonProps & {
+        readonly isArrow?: boolean;
+        readonly isCurrent?: boolean;
+        readonly isSpacer?: boolean;
+    }>();
+
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxProgressBar.vue

@@ -8,7 +8,7 @@
         :aria-valuemin="min">
         <div :class="isIndeterminate ? $style.progressBarTrackIndeterminate : $style.progressBarTrack">
             <div
-                :class="$style.progressBarValue"
+                :class="position >= 1 ? $style.progressBarValueComplete : $style.progressBarValueIncomplete"
                 :style="{
                     width: `${isIndeterminate ? 100 : position * 100}%`
                 }"/>