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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.4",
+    "version": "3.0.0-next.6",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -52,9 +52,9 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^1.13.0",
-        "@flux-ui/internals": "3.0.0-next.4",
-        "@flux-ui/types": "3.0.0-next.4",
+        "@basmilius/utils": "^1.14.0",
+        "@flux-ui/internals": "3.0.0-next.6",
+        "@flux-ui/types": "3.0.0-next.6",
         "@fortawesome/fontawesome-common-types": "^6.7.2",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

package/src/component/FluxDataTable.vue

@@ -1,12 +1,19 @@
 <template>
     <FluxTable
+        :fill-columns="fillColumns"
         :is-bordered="isBordered"
         :is-hoverable="isHoverable"
         :is-loading="isLoading"
         :is-separated="isSeparated"
         :is-striped="isStriped">
         <template
-            v-if="'header' in slots"
+            v-if="slots.colgroups"
+            #colgroups>
+            <slot name="colgroups"/>
+        </template>
+
+        <template
+            v-if="slots.header"
             #header>
             <FluxTableRow>
                 <slot
@@ -16,7 +23,7 @@
         </template>
 
         <template
-            v-if="'footer' in slots"
+            v-if="slots.footer"
             #footer>
             <FluxTableRow>
                 <slot
@@ -25,12 +32,28 @@
             </FluxTableRow>
         </template>
 
+        <template
+            v-if="total > limits[0]"
+            #pagination>
+            <slot
+                name="pagination"
+                v-bind="{page, perPage, rows, 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">
             <template v-for="(_, name) of slots">
                 <slot
-                    v-if="name !== 'footer' && name !== 'header'"
+                    v-if="!IGNORED_SLOTS.includes(name as string)"
                     v-bind="{index, page, perPage, row, rows, total}"
                     :name="name"/>
             </template>
@@ -42,10 +65,19 @@
     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[] = ['header', 'footer', 'colgroups', 'pagination'];
+
+    const emit = defineEmits<{
+        limit: [number];
+        navigate: [number];
+    }>();
+
     const {
         isBordered = true,
         isHoverable = false,
@@ -56,11 +88,13 @@
         perPage
     } = defineProps<{
         readonly dataSet: T[];
+        readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
         readonly isLoading?: boolean;
         readonly isSeparated?: boolean;
         readonly isStriped?: boolean;
+        readonly limits: number[];
         readonly page: number;
         readonly perPage: number;
         readonly total: number;
@@ -75,21 +109,30 @@
             readonly row: T;
             readonly rows: T[];
             readonly total: number;
-        }) => any;
+        }) => VNode;
 
         footer(props: {
             readonly page: number;
             readonly perPage: number;
             readonly rows: T[];
             readonly total: number;
-        }): any;
+        }): VNode;
 
         header(props: {
             readonly page: number;
             readonly perPage: number;
             readonly rows: T[];
             readonly total: number;
-        }): any;
+        }): VNode;
+
+        pagination(props: {
+            readonly page: number;
+            readonly perPage: number;
+            readonly rows: T[];
+            readonly total: number;
+        }): VNode;
+
+        colgroups(): VNode;
     }>();
 
     const rows = computed(() => dataSet.slice(0, perPage));

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,10 @@
     import { computed, unref } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { showPrompt } from '$flux/data';
+    import FluxButton from './FluxButton.vue';
     import FluxButtonGroup from './FluxButtonGroup.vue';
+    import FluxPaginationButton from './FluxPaginationButton.vue';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
-    import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
@@ -89,7 +94,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
@@ -70,9 +62,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/FluxTable.vue

@@ -1,12 +1,20 @@
 <template>
     <div :class="$style.table">
         <table :class="$style.tableBase">
+            <slot name="colgroups"/>
+
             <thead v-if="slots.header">
             <slot name="header"/>
             </thead>
 
             <tbody v-if="slots.default">
             <slot/>
+
+            <FluxTableRow
+                v-if="fillColumns"
+                :class="$style.tableFill">
+                <FluxTableCell v-for="_ of fillColumns"/>
+            </FluxTableRow>
             </tbody>
 
             <tfoot v-if="slots.footer">
@@ -25,15 +33,25 @@
             :class="$style.tableLoader">
             <FluxSpinner/>
         </div>
+
+        <FluxPaneBody
+            v-if="slots.pagination"
+            :class="$style.tablePagination">
+            <slot name="pagination"/>
+        </FluxPaneBody>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { provide } from 'vue';
     import { FluxTableInjectionKey } from '$flux/data';
+    import FluxPaneBody from './FluxPaneBody.vue';
     import FluxSpinner from './FluxSpinner.vue';
+    import FluxTableCell from './FluxTableCell.vue';
+    import FluxTableRow from './FluxTableRow.vue';
     import $style from '$flux/css/component/Table.module.scss';
 
     const {
@@ -45,6 +63,7 @@
         isStriped = false
     } = defineProps<{
         readonly captionSide?: 'top' | 'bottom';
+        readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
         readonly isLoading?: boolean;
@@ -53,10 +72,12 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        caption?(): any;
-        footer?(): any;
-        header?(): any;
+        default?(): VNode;
+        colgroups?(): VNode;
+        caption?(): VNode;
+        footer?(): VNode;
+        header?(): VNode;
+        pagination?(): VNode;
     }>();
 
     provide(FluxTableInjectionKey, {

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

@@ -1,59 +1,91 @@
 @use '$flux/css/mixin';
 
 .pagination {
-    z-index: 0;
+    display: flex;
+    gap: 1px;
+}
 
-    .button {
-        min-width: 40px;
-    }
+.paginationButton {
+    composes: secondaryButton from './Button.module.scss';
+
+    height: 36px;
+    min-width: 36px;
+    padding: 0 6px;
+    background: unset;
+    border-color: transparent;
+    box-shadow: none !important;
+}
 
-    .buttonLabel {
-        margin-left: 0;
-        margin-right: 0;
-        min-width: 18px;
+.paginationButtonArrow {
+    border-color: rgb(var(--gray-3));
 
-        &:nth-child(2) {
-            min-width: unset;
-        }
+    &:first-child {
+        margin-right: 6px;
     }
 
-    .primaryButton {
-        z-index: 1;
+    &:last-child {
+        margin-left: 6px;
     }
 }
 
-.paginationCurrent {
-    gap: 3px;
-    font-variant-numeric: tabular-nums;
+.paginationButtonCurrent {
+    background: rgb(var(--primary-1));
+    border-color: rgb(var(--primary-3));
+}
+
+.paginationButtonSpacer {
+    pointer-events: none;
+}
+
+.paginationButtonIcon {
+    composes: secondaryButtonIcon from './Button.module.scss';
+
+    font-size: 16px;
+}
+
+.paginationButtonLabel {
+    composes: secondaryButtonLabel from './Button.module.scss';
+
+    margin: 0;
+    min-width: unset;
+    font-size: 12px;
 }
 
 .paginationBar {
+    display: flex;
     align-items: center;
-    flex-direction: column;
+    flex-flow: row;
+}
 
-    .formInputGroup {
-        max-width: max-content;
-    }
+.paginationBarLimit {
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    gap: 15px;
+}
 
-    .formSelect {
-        width: 78px;
-    }
+.paginationBarLimitDisplayingOf {
+    font-size: 12px;
+    font-weight: 600;
+}
 
-    .pagination .button:first-child {
-        border-radius: 0;
-    }
+.paginationBarLimitSelect {
+    min-height: 36px;
+    width: 120px;
 
-    @include mixin.breakpoint-up(lg) {
-        flex-direction: row;
+    .menuItem {
+        min-height: 36px;
     }
-}
 
-@include mixin.breakpoint-down(md) {
-    .paginationBarSpacer {
-        display: none;
+    .menuItemLabel {
+        font-size: 12px;
+        font-weight: 600;
     }
 }
 
-.paneFooter > .paginationBar {
-    flex-grow: 1;
+@include mixin.breakpoint-down(sm) {
+    .paginationBar {
+        flex-flow: column;
+        gap: 15px;
+    }
 }

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

@@ -2,6 +2,8 @@
     composes: basePaneElement from './base/Pane.module.scss';
 
     position: relative;
+    display: flex;
+    flex-flow: column;
     overflow: auto;
 
     :is(caption) {
@@ -16,6 +18,14 @@
     bottom: 0;
     border-spacing: 0;
     text-align: left;
+
+    &:has(.tableFill) {
+        flex-grow: 1;
+    }
+
+    &:has(.tableFill):has(.tablePagination) {
+        margin-bottom: -1px;
+    }
 }
 
 .tableLoader {
@@ -109,6 +119,27 @@ tfoot .tableCell {
     }
 }
 
+.tableFill {
+    pointer-events: none;
+
+    .tableCell {
+        height: 100%;
+    }
+
+    .tableCellContent {
+        padding: 0;
+    }
+}
+
+.tablePagination {
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    background: rgb(var(--gray-0));
+    border-top: 1px solid rgb(var(--gray-2));
+    z-index: 100;
+}
+
 .tableSort {
     display: flex;
     height: 24px;

package/src/data/i18n.ts

@@ -18,7 +18,7 @@ export const english = {
     'flux.preview': 'Preview',
     'flux.previewClose': 'Close preview',
     'flux.displayingOf': '{from}–{to} of {total}',
-    'flux.rowsPerPage': 'Rows per page',
+    'flux.showN': 'Show {n}',
     'flux.next': 'Next',
     'flux.noItems': 'There are no items (left).',
     'flux.pagination': 'Pagination',