@flux-ui/components 3.0.0-next.0 → 3.0.0-next.11

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/FluxRoot.vue

@@ -1,5 +1,6 @@
 <template>
     <div
+        v-bind="$attrs"
         :class="$style.root"
         :inert="inertMain">
         <slot/>
@@ -43,6 +44,10 @@
     import FluxTooltipProvider from './FluxTooltipProvider.vue';
     import $style from '$flux/css/component/Root.module.scss';
 
+    defineOptions({
+        inheritAttrs: false
+    });
+
     defineSlots<{
         default(): any;
     }>();

package/src/component/FluxTabBar.vue

@@ -3,14 +3,16 @@
         :class="$style.tabBar"
         role="tablist"
         aria-orientation="horizontal">
-        <button
-            v-if="isStartArrowVisible"
-            :class="$style.tabBarArrowStart"
-            tabindex="-1"
-            type="button"
-            @click="scrollToStart">
-            <FluxIcon name="angle-left"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isStartArrowVisible"
+                :class="$style.tabBarArrowStart"
+                tabindex="-1"
+                type="button"
+                @click="scrollToStart">
+                <FluxIcon name="angle-left"/>
+            </button>
+        </FluxFadeTransition>
 
         <div
             ref="tabBar"
@@ -22,14 +24,16 @@
             <slot/>
         </div>
 
-        <button
-            v-if="isEndArrowVisible"
-            :class="$style.tabBarArrowEnd"
-            tabindex="-1"
-            type="button"
-            @click="scrollToEnd">
-            <FluxIcon name="angle-right"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isEndArrowVisible"
+                :class="$style.tabBarArrowEnd"
+                tabindex="-1"
+                type="button"
+                @click="scrollToEnd">
+                <FluxIcon name="angle-right"/>
+            </button>
+        </FluxFadeTransition>
     </nav>
 </template>
 
@@ -39,6 +43,7 @@
     import { unrefTemplateElement, useEventListener, useMutationObserver } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { onMounted, ref, useTemplateRef } from 'vue';
+    import { FluxFadeTransition } from '$flux/transition';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Tab.module.scss';
 

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/composable/private/useFormSelect.ts

@@ -1,9 +1,9 @@
 import type { FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectOptions, FluxFormSelectValue } from '@flux-ui/types';
-import type { MaybeRef, Ref } from 'vue';
+import type { Ref } from 'vue';
 import { computed, unref } from 'vue';
 import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';
 
-export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: MaybeRef<FluxFormSelectEntry[]>, searchQuery?: Ref<string>) {
+export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: Ref<FluxFormSelectEntry[]>, searchQuery?: Ref<string>) {
     const values = computed(() => {
         const model = unref(modelValue);
         return Array.isArray(model) ? model : [model];

package/src/css/base.scss

@@ -1,16 +1,18 @@
 @use 'variables';
 
 @layer flux-base {
-    :root, [light] {
+    :root {
         @include variables.animation;
+        @include variables.defaults;
+    }
+
+    :root, [light] {
         @include variables.color-light;
-        @include variables.default-light;
         @include variables.shadow-light;
     }
 
     [dark] {
         @include variables.color-dark;
-        @include variables.default-dark;
         @include variables.shadow-dark;
     }
 

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

@@ -1,25 +1,22 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel from './base/Button.module.scss';
-@value basePaneStructure from './base/Pane.module.scss';
-
 .action {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     height: 30px;
     width: 30px;
     padding-left: 6px;
     padding-right: 6px;
     border: 0;
-    border-radius: calc(var(--radius) / 2);
+    border-radius: var(--radius);
     box-shadow: none;
 
     @include mixin.hover {
-        background: rgb(var(--gray-3));
+        background: var(--gray-2);
     }
 
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--gray-3);
     }
 
     .spinner {
@@ -28,18 +25,18 @@
 }
 
 .actionIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground);
     font-size: 18px;
 }
 
 .action.isDestructive .actionIcon {
-    color: rgb(var(--danger-7));
+    color: var(--danger-7);
 }
 
 .actionLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     color: var(--foreground);
 }
@@ -59,10 +56,10 @@
     }
 }
 
-:local(.basePaneStructure) > .actionBar {
+.basePaneStructure > .actionBar {
     padding: 15px 21px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-2));
+    background: var(--gray-1);
+    border: 1px solid var(--gray-2);
     border-left: 0;
     border-right: 0;
 
@@ -102,6 +99,9 @@
 
 .actionPaneBody {
     position: relative;
-    padding: 0;
     text-wrap: pretty;
+
+    &:local(.paneBody) {
+        padding: 0;
+    }
 }

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

@@ -14,9 +14,9 @@
     display: block;
     height: inherit;
     width: inherit;
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    box-shadow: inset 0 0 0 1px var(--gray-2);
 }
 
 .avatarFallback {
@@ -41,18 +41,18 @@
 .avatarFallbackColorized {
     composes: avatarFallback;
 
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 80%);
+    background: color-mix(in srgb, var(--color), var(--gray-0) 80%);
     color: var(--color);
 }
 
 [dark] .avatarFallbackColorized {
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 70%);
+    background: color-mix(in srgb, var(--color), var(--gray-0) 70%);
 }
 
 .avatarFallbackNeutral {
     composes: avatarFallback;
 
-    background: rgb(var(--gray-3));
+    background: var(--gray-2);
     color: var(--foreground-secondary);
 }
 
@@ -62,8 +62,8 @@
     inset: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-1) / .84);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    background: oklch(from var(--gray-1) l c h / .84);
+    box-shadow: inset 0 0 0 1px var(--gray-2);
     border-radius: inherit;
     backdrop-filter: blur(3px) saturate(180%);
 
@@ -86,37 +86,37 @@
 .avatarStatusGray {
     composes: avatarStatus;
 
-    background: rgb(var(--gray-6));
+    background: var(--gray-6);
 }
 
 .avatarStatusPrimary {
     composes: avatarStatus;
 
-    background: rgb(var(--primary-7));
+    background: var(--primary-7);
 }
 
 .avatarStatusDanger {
     composes: avatarStatus;
 
-    background: rgb(var(--danger-7));
+    background: var(--danger-7);
 }
 
 .avatarStatusInfo {
     composes: avatarStatus;
 
-    background: rgb(var(--info-7));
+    background: var(--info-7);
 }
 
 .avatarStatusSuccess {
     composes: avatarStatus;
 
-    background: rgb(var(--success-7));
+    background: var(--success-7);
 }
 
 .avatarStatusWarning {
     composes: avatarStatus;
 
-    background: rgb(var(--warning-7));
+    background: var(--warning-7);
 }
 
 .avatarClickable {
@@ -154,7 +154,7 @@
     @include mixin.focus-ring(2px);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 }
 

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

@@ -3,14 +3,15 @@
 .badge {
     display: inline-flex;
     height: 28px;
+    width: max-content;
     margin-top: -2px;
     margin-bottom: -2px;
     padding-left: 9px;
     padding-right: 9px;
     align-items: center;
     gap: 6px;
-    background: rgb(var(--gray-0));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-0);
+    border: 1px solid var(--gray-2);
     border-radius: 99px;
     color: var(--foreground-prominent);
     font-size: 13px;
@@ -23,7 +24,7 @@
         transition: background 180ms var(--swift-out);
 
         @include mixin.hover {
-            background: rgb(var(--gray-1));
+            background: var(--gray-1);
             color: var(--foreground-prominent);
         }
     }
@@ -48,12 +49,12 @@
     cursor: pointer;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
         color: var(--foreground);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-3);
         color: var(--foreground);
     }
 
@@ -90,52 +91,52 @@
 .badgeGray {
     composes: badge;
 
-    --color: rgb(var(--gray-8));
+    --color: var(--gray-8);
 
     .badgeLabel {
         color: var(--foreground-prominent);
     }
 
     .spinner {
-        --value: rgb(var(--primary-7));
+        --value: var(--primary-7);
     }
 }
 
 .badgePrimary {
     composes: badge;
 
-    --color: rgb(var(--primary-7));
+    --color: var(--primary-7);
 }
 
 .badgeDanger {
     composes: badge;
 
-    --color: rgb(var(--danger-7));
+    --color: var(--danger-7);
 }
 
 .badgeInfo {
     composes: badge;
 
-    --color: rgb(var(--info-7));
+    --color: var(--info-7);
 }
 
 .badgeSuccess {
     composes: badge;
 
-    --color: rgb(var(--success-7));
+    --color: var(--success-7);
 }
 
 .badgeWarning {
     composes: badge;
 
-    --color: rgb(var(--warning-7));
+    --color: var(--warning-7);
 }
 
 .tag {
     composes: badge;
 
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-1);
+    border-color: var(--gray-2);
     border-radius: calc(var(--radius) / 2);
     font-weight: 400;
 }