@flux-ui/components 3.0.0-next.19 → 3.0.0-next.20

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.19",
+    "version": "3.0.0-next.20",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,26 +51,26 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^2.9.0",
-        "@flux-ui/internals": "3.0.0-next.19",
-        "@flux-ui/types": "3.0.0-next.19",
-        "@fortawesome/fontawesome-common-types": "^7.0.0",
+        "@basmilius/utils": "^2.13.0",
+        "@flux-ui/internals": "3.0.0-next.20",
+        "@flux-ui/types": "3.0.0-next.20",
+        "@fortawesome/fontawesome-common-types": "^7.1.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
         "lodash-es": "^4.17.21",
-        "luxon": "^3.7.1",
-        "vue": "^3.5.18"
+        "luxon": "^3.7.2",
+        "vue": "^3.5.23"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.9.0",
+        "@basmilius/vite-preset": "^2.13.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^24.2.1",
+        "@types/node": "^24.10.0",
         "@vitejs/plugin-vue": "^6.0.1",
-        "pinia": "^3.0.3",
-        "sass-embedded": "^1.90.0",
-        "typescript": "^5.9.2",
-        "vite": "^7.1.1",
-        "vue-tsc": "^3.0.5"
+        "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

@@ -15,10 +15,12 @@
         <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>
 
@@ -28,7 +30,7 @@
             <FluxTableRow>
                 <slot
                     name="footer"
-                    v-bind="{page, perPage, rows, total}"/>
+                    v-bind="{page, perPage, items: limitedItems, total}"/>
             </FluxTableRow>
         </template>
 
@@ -37,7 +39,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 +51,12 @@
         </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="!IGNORED_SLOTS.includes(name as string)"
-                    v-bind="{index, page, perPage, row, rows, total}"
+                    v-bind="{index, item, items: limitedItems, page, perPage, total}"
                     :name="name"/>
             </template>
         </FluxTableRow>
@@ -71,7 +73,7 @@
     import FluxTable from './FluxTable.vue';
     import FluxTableRow from './FluxTableRow.vue';
 
-    const IGNORED_SLOTS: string[] = ['header', 'footer', 'colgroups', 'pagination'];
+    const IGNORED_SLOTS: string[] = ['filter', 'header', 'footer', 'colgroups', 'pagination'];
 
     const emit = defineEmits<{
         limit: [number];
@@ -84,16 +86,16 @@
         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;
@@ -106,34 +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;
         }) => 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 limitedItems = computed(() => items.slice(0, perPage));
 </script>

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;

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/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/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}%`
                 }"/>

package/src/component/FluxTooltip.vue

@@ -20,12 +20,14 @@
                 const elm = instance.proxy!.$el;
                 elm.addEventListener('mouseenter', onHover, {passive: true});
                 elm.addEventListener('mouseleave', onLeave, {passive: true});
+                window.addEventListener('scroll', onLeave, {capture: true});
             });
 
             onUnmounted(() => {
                 const elm = instance.proxy!.$el;
                 elm.removeEventListener('mouseenter', onHover);
                 elm.removeEventListener('mouseleave', onLeave);
+                window.removeEventListener('scroll', onLeave);
                 onLeave();
             });
 

package/src/component/primitive/AnchorPopup.vue

@@ -150,7 +150,7 @@
                     px = x + width / 2 - popupWidth / 2;
                     py = y + height + margin;
 
-                    if (py + popupHeight > innerHeight) {
+                    if (py + popupHeight + margin > innerHeight) {
                         py = y - popupHeight - margin;
                     }
                 }
@@ -188,7 +188,9 @@
 
         anchorRef.value = isHtmlElement(anchor) ? anchor : anchor.$el;
 
-        requestAnimationFrame(resize);
-        requestAnimationFrame(reposition);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resize);
+            requestAnimationFrame(reposition);
+        });
     });
 </script>

package/src/css/component/Form.module.scss

@@ -319,6 +319,15 @@
         border-bottom-left-radius: 0;
     }
 
+    &.isCondensed,
+    &.isSecondary {
+        .formInputAddition:not(:last-child) {
+            padding-right: 0;
+            background: unset;
+            border-color: transparent;
+        }
+    }
+
     &.isSecondary {
         .formInput {
             background: transparent;
@@ -326,10 +335,6 @@
             box-shadow: none;
         }
 
-        .formInputAddition:not(:last-child) {
-            padding-right: 0;
-        }
-
         .secondaryButton {
             background: transparent;
             border-color: var(--gray-2);

package/src/css/component/Progress.module.scss

@@ -16,9 +16,20 @@
     top: 0;
     left: 0;
     height: inherit;
+    border-radius: inherit;
+}
+
+.progressBarValueComplete {
+    composes: progressBarValue;
+
+    background: var(--primary-7);
+}
+
+.progressBarValueIncomplete {
+    composes: progressBarValue;
+
     background: linear-gradient(to right, var(--primary-7) 20%, var(--primary-6), var(--primary-7) 80%);
     background-size: 150px 100%;
-    border-radius: inherit;
     animation: progressBarValue 1s linear infinite;
 }
 

package/src/css/component/Table.module.scss

@@ -3,6 +3,7 @@
 
     position: relative;
     display: flex;
+    container: table / inline-size;
     flex-flow: column;
     overflow: auto;
 
@@ -14,7 +15,7 @@
 }
 
 .tableBase {
-    min-width: 100%;
+    min-width: 100cqw;
     bottom: 0;
     border-spacing: 0;
     text-align: left;
@@ -70,6 +71,7 @@
         position: sticky;
         top: 0;
         background: var(--gray-1);
+        z-index: 1;
     }
 }
 
@@ -119,12 +121,43 @@ tfoot .tableCell {
     }
 }
 
+.tableBar {
+    composes: tableCell;
+
+    position: relative;
+    background: var(--gray-1);
+    box-shadow: 0 0 24px var(--gray-1),
+                0 0 18px var(--gray-1),
+                0 0 12px var(--gray-1),
+                0 0 9px var(--gray-1),
+                0 0 6px var(--gray-1),
+                0 0 3px var(--gray-1);
+    z-index: 2;
+}
+
+.tableBarContent {
+    composes: tableCellContent;
+
+    position: sticky;
+    left: 0;
+    max-width: 100cqw;
+    flex-flow: row nowrap;
+    gap: 15px;
+
+    > :local(.formInput) {
+        max-width: 300px;
+        min-width: 210px;
+    }
+}
+
 .tablePagination {
     position: sticky;
     bottom: 0;
     margin-top: auto;
+    margin-bottom: -1px;
     background: var(--gray-0);
     border-top: 1px solid var(--gray-2);
+    translate: 0 -1px;
     z-index: 100;
 }
 

package/src/data/iconRegistry.ts

@@ -10,7 +10,7 @@ export let iconRegistry: IconRegistry = {};
 export function fluxRegisterIcons(icons: Icons): void {
     iconRegistry = Object.keys(icons).reduce((acc: IconRegistry, key: string) => {
         const {icon, iconName} = icons[key];
-        acc[iconName] = icon;
+        acc[iconName as FluxIconName] = icon;
 
         if (Array.isArray(icon[2])) {
             icon[2].forEach((iconName: string) => acc[iconName as FluxIconName] = icon);