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

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/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/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/component/Action.module.scss

@@ -1,10 +1,7 @@
 @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;
@@ -28,7 +25,7 @@
 }
 
 .actionIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground);
     font-size: 18px;
@@ -39,7 +36,7 @@
 }
 
 .actionLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     color: var(--foreground);
 }
@@ -59,7 +56,7 @@
     }
 }
 
-:local(.basePaneStructure) > .actionBar {
+.basePaneStructure > .actionBar {
     padding: 15px 21px;
     background: rgb(var(--gray-1));
     border: 1px solid rgb(var(--gray-2));
@@ -98,6 +95,10 @@
     @container actionPane (max-width: 540px) {
         grid-template-columns: 1fr;
     }
+
+    .paneBody + .paneBody {
+        padding-top: 21px;
+    }
 }
 
 .actionPaneBody {

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

@@ -3,6 +3,7 @@
 .badge {
     display: inline-flex;
     height: 28px;
+    width: max-content;
     margin-top: -2px;
     margin-bottom: -2px;
     padding-left: 9px;

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

@@ -1,9 +1,7 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel, isSmall, isMedium, isLarge, isXl from './base/Button.module.scss';
-
 .primaryButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     background: rgb(var(--primary-7));
     border-color: rgb(var(--primary-9));
@@ -26,17 +24,17 @@
 }
 
 .primaryButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: rgb(var(--primary-0));
 }
 
 .primaryButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .secondaryButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     background: rgb(var(--gray-0));
     border-color: rgb(var(--gray-3));
@@ -54,17 +52,17 @@
 }
 
 .secondaryButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground-prominent);
 }
 
 .secondaryButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .destructiveButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     background: rgb(var(--gray-0));
     border-color: rgb(var(--gray-3));
@@ -86,13 +84,13 @@
 }
 
 .destructiveButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: rgb(var(--danger-7));
 }
 
 .destructiveButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     &:only-child {
         color: rgb(var(--danger-7));
@@ -119,7 +117,7 @@
 }
 
 .linkButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     display: inline-flex;
     height: unset;
@@ -143,7 +141,7 @@
 }
 
 .linkButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: rgb(var(--primary-7));
     transition: inherit;
@@ -155,7 +153,7 @@
 }
 
 .linkButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .publishButton {

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

@@ -1,7 +1,7 @@
-@value basePaneStructure, basePaneLoader from './base/Pane.module.scss';
+@use '$flux/css/mixin';
 
 .calendar {
-    composes: basePaneStructure;
+    composes: basePaneStructure from './base/Pane.module.scss';
 
     display: flex;
     flex-flow: column;
@@ -14,7 +14,7 @@
 }
 
 .calendarLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .calendarCurrent {
@@ -32,10 +32,8 @@
     line-height: 1.5em;
     text-transform: capitalize;
 
-    @media (hover: hover) {
-        &:hover {
-            color: rgb(var(--primary-7));
-        }
+    @include mixin.hover {
+        color: rgb(var(--primary-7));
     }
 }
 
@@ -163,9 +161,7 @@
         }
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-3));
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-3));
     }
 }

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

@@ -20,6 +20,7 @@
     inset: var(--dz-inset);
     height: var(--dz-height);
     width: var(--dz-width);
+    max-width: unset;
     overflow: visible;
     pointer-events: none;
 

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

@@ -1,7 +1,5 @@
 @use '$flux/css/mixin';
 
-@value basePane from './base/Pane.module.scss';
-
 .expandable {
     display: flex;
     flex-flow: column;
@@ -71,15 +69,15 @@
     padding: 0 21px 21px;
 }
 
-:local(.basePane) > .expandable {
+.basePane > .expandable {
     border-radius: inherit;
 }
 
-:local(.basePane) > .expandable .expandableHeader {
+.basePane > .expandable .expandableHeader {
     border-radius: inherit;
 }
 
-:local(.basePane) > .expandableOpened .expandableHeader {
+.basePane > .expandableOpened .expandableHeader {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -101,12 +99,12 @@
     }
 }
 
-:local(.basePane) > .expandableGroup:first-child .expandable:first-child .expandableHeader {
+.basePane > .expandableGroup:first-child .expandable:first-child .expandableHeader {
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
 }
 
-:local(.basePane) > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
+.basePane > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
 }

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

@@ -1,5 +1,3 @@
-@value basePaneStructure from './base/Pane.module.scss';
-
 .filter {
     max-height: 50dvh;
     max-width: 100%;

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

@@ -1,8 +1,5 @@
 @use '$flux/css/mixin';
 
-@value button, buttonLabel from './base/Button.module.scss';
-@value basePaneStructure from './base/Pane.module.scss';
-
 %-form-input-group-inner-styles {
     height: 100%;
     min-height: unset;
@@ -29,6 +26,7 @@
 
 .form {
     composes: formStructureElement;
+
     gap: 42px;
 }
 
@@ -40,13 +38,14 @@
 .formColumn,
 .formSection {
     composes: formStructureElement;
+
     gap: 18px;
 }
 
 .form,
 .formColumn,
 .formSection {
-    > :local(.button) {
+    > .button {
         align-self: flex-start;
     }
 }
@@ -63,6 +62,13 @@
     font-weight: 800;
 }
 
+@include mixin.breakpoint-down(sm) {
+    .formRow {
+        flex-flow: column;
+        gap: 18px;
+    }
+}
+
 .formField {
     display: flex;
     flex: 1 1 0;
@@ -106,12 +112,15 @@
 
 .formFieldAddition {
     display: flex;
+    margin-top: 3px;
+    margin-bottom: 3px;
     gap: 9px;
     font-size: 14px;
+    line-height: 24px;
 }
 
 .formFieldAdditionIcon {
-    margin-top: 3px;
+    margin-top: 4px;
 }
 
 .formFieldAdditionError {
@@ -126,6 +135,10 @@
     color: var(--foreground-secondary);
 }
 
+.formFieldAddition + .formFieldAddition {
+    margin-top: 0;
+}
+
 .formInput {
     position: relative;
     display: block;
@@ -283,25 +296,25 @@
 
     @include mixin.focus-ring(-1px, true);
 
-    > :is(.formInput, .formSelect, :local(.button)) {
+    > :is(.formInput, .formSelect, .button) {
         @extend %-form-input-group-inner-styles;
 
-        + :is(:local(.button), :local(.buttonGroup)) {
+        + :is(.button, .buttonGroup) {
             margin: 0;
             border-left: 1px solid rgb(var(--gray-3));
         }
     }
 
-    > :local(.buttonGroup) > :local(.button) {
+    > .buttonGroup > .button {
         @extend %-form-input-group-inner-styles;
 
-        + :local(.button) {
+        + .button {
             margin: 0;
             border-left: 1px solid rgb(var(--gray-3));
         }
     }
 
-    > :local(.buttonGroup):not(:first-child) > :local(.button):first-child {
+    > .buttonGroup:not(:first-child) > .button:first-child {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
@@ -446,7 +459,7 @@
 }
 
 .formSelectPopup {
-    composes: basePaneStructure;
+    composes: basePaneStructure from './base/Pane.module.scss';
 
     position: fixed;
     display: block;
@@ -482,7 +495,7 @@
     inset: -1px;
     pointer-events: none;
 
-    :local(.buttonLabel) {
+    .buttonLabel {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -595,6 +608,7 @@
 }
 
 .quantitySelector {
+    min-width: max-content;
     align-self: center;
     justify-self: center;
     border: 1px solid rgb(var(--gray-3));

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

@@ -1,7 +1,5 @@
 @use '$flux/css/mixin';
 
-@value placeholder from './Placeholder.module.scss';
-
 .gallery {
     display: grid;
     gap: 9px;
@@ -9,7 +7,7 @@
 }
 
 .galleryAdd {
-    composes: placeholder;
+    composes: placeholder from './Placeholder.module.scss';
 
     aspect-ratio: 1 / 1;
     color: rgb(var(--gray-7));