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

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

@@ -1,91 +1,86 @@
-@value baseAutoGrid from './base/Grid.module.scss';
-@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
-
-@layer flux-base {
-    .pane {
-        composes: basePaneStructure;
-    }
+.pane {
+    composes: basePaneStructure from './base/Pane.module.scss';
+}
 
-    .paneDefault {
-        composes: pane;
+.paneDefault {
+    composes: pane;
 
-        box-shadow: var(--shadow-sm);
-    }
+    box-shadow: var(--shadow-sm);
+}
 
-    .paneFlat {
-        composes: pane;
-    }
+.paneFlat {
+    composes: pane;
+}
 
-    .paneWell {
-        composes: pane;
+.paneWell {
+    composes: pane;
 
-        background: rgb(var(--gray-1));
-    }
-
-    .paneHeader {
-        composes: basePaneElement;
+    background: rgb(var(--gray-1));
+}
 
-        display: flex;
-        padding: 21px 21px 0;
-        gap: 15px;
+.paneHeader {
+    composes: basePaneElement from './base/Pane.module.scss';
 
-        &:only-child {
-            padding: 21px;
-        }
+    display: flex;
+    padding: 21px 21px 0;
+    gap: 15px;
 
-        &:has(+ :local(.basePaneElement):not(.paneBody)) {
-            padding: 21px;
-        }
+    &:only-child {
+        padding: 21px;
     }
 
-    .paneHeaderCaption {
-        display: flex;
-        flex-flow: column;
-        flex-grow: 1;
-        line-height: 24px;
+    &:has(+ .basePaneElement:not(.paneBody)) {
+        padding: 21px;
+    }
+}
 
-        :is(strong) {
-            color: var(--foreground-prominent);
-            font-weight: 600;
+.paneHeaderCaption {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    line-height: 24px;
 
-            &:has(+ :is(span)) {
-                font-size: 16px;
-            }
-        }
+    :is(strong) {
+        color: var(--foreground-prominent);
+        font-weight: 600;
 
-        :is(span) {
-            font-size: 14px;
+        &:has(+ :is(span)) {
+            font-size: 16px;
         }
     }
 
-    .paneHeaderIcon {
-        margin-top: 2px;
-        color: rgb(var(--primary-7));
+    :is(span) {
+        font-size: 14px;
     }
+}
 
-    .paneBody {
-        composes: basePaneElement;
+.paneHeaderIcon {
+    margin-top: 2px;
+    color: rgb(var(--primary-7));
+}
 
-        padding: 21px;
-    }
+.paneBody {
+    composes: basePaneElement from './base/Pane.module.scss';
 
-    .paneBody + .paneBody {
-        padding-top: 0;
-    }
+    padding: 21px;
+}
 
-    .paneFooter {
-        composes: basePaneElement;
+.paneBody + .paneBody {
+    padding-top: 0;
+}
 
-        display: flex;
-        padding: 21px;
-        gap: 9px;
-        background: rgb(var(--gray-1));
-        border-top: 1px solid rgb(var(--gray-2));
-    }
+.paneFooter {
+    composes: basePaneElement from './base/Pane.module.scss';
+
+    display: flex;
+    padding: 21px;
+    gap: 9px;
+    background: rgb(var(--gray-1));
+    border-top: 1px solid rgb(var(--gray-2));
 }
 
 .paneLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .paneTag {
@@ -138,7 +133,7 @@
 
     overflow: hidden;
 
-    > :local(.baseAutoGrid) {
+    > .baseAutoGrid {
         margin-right: -1px;
         margin-bottom: -1px;
 

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

@@ -4,7 +4,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    flex: 1 1 0;
+    flex: 1 0 auto;
     flex-flow: column;
     justify-content: center;
     background: rgb(var(--gray-1));

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

@@ -1,5 +1,3 @@
-@value basePaneStructure from './base/Pane.module.scss';
-
 .progressBar {
     position: relative;
 }
@@ -55,11 +53,11 @@
     white-space: nowrap;
 }
 
-:local(.basePaneStructure) > .progressBar:first-child {
+.basePaneStructure > .progressBar:first-child {
     margin: 9px 9px 0;
 }
 
-:local(.basePaneStructure) > .progressBar:last-child {
+.basePaneStructure > .progressBar:last-child {
     margin: 0 9px 9px;
 }
 

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

@@ -1,9 +1,7 @@
 @use '$flux/css/mixin';
 
-@value basePane from './base/Pane.module.scss';
-
 .snackbar {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
 
     display: flex;
     box-shadow: var(--shadow-xl), var(--shadow-2xl);
@@ -197,9 +195,9 @@
     }
 
     @include mixin.breakpoint-up(md) {
-        width: 540px;
+        width: 570px;
         top: 30px;
-        left: calc(50dvw - 270px);
+        left: calc(50dvw - 285px);
     }
 }
 

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

@@ -1,5 +1,3 @@
-@value sparklesContainer, sparklesContainerActive, sparklesParticles from './base/Effect.module.scss';
-
 .stepperStep {
     position: relative;
 }
@@ -42,7 +40,7 @@
 }
 
 .stepperStepsItem {
-    composes: sparklesContainer;
+    composes: sparklesContainer from './base/Effect.module.scss';
 
     position: relative;
     display: flex;
@@ -74,7 +72,7 @@
 }
 
 .stepperStepsItemComplete {
-    composes: sparklesContainerActive;
+    composes: sparklesContainerActive from './base/Effect.module.scss';
     composes: stepperStepsItem;
 
     background: rgb(var(--primary-7));
@@ -99,5 +97,5 @@
 }
 
 .stepperStepsItemParticles {
-    composes: sparklesParticles;
+    composes: sparklesParticles from './base/Effect.module.scss';
 }

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

@@ -1,9 +1,9 @@
-@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
-
 .table {
-    composes: basePaneElement;
+    composes: basePaneElement from './base/Pane.module.scss';
 
     position: relative;
+    display: flex;
+    flex-flow: column;
     overflow: auto;
 
     :is(caption) {
@@ -18,10 +18,18 @@
     bottom: 0;
     border-spacing: 0;
     text-align: left;
+
+    &:has(.tableFill) {
+        flex-grow: 1;
+    }
+
+    &:has(.tableFill):has(.tablePagination) {
+        margin-bottom: -1px;
+    }
 }
 
 .tableLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .tableRow {
@@ -111,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;
@@ -134,31 +163,31 @@ tfoot .tableCell {
     }
 }
 
-:local(.basePaneStructure) > .table .tableCell:first-child .tableCellContent {
+.basePaneStructure > .table .tableCell:first-child .tableCellContent {
     padding-left: 21px;
 }
 
-:local(.basePaneStructure) > .table .tableCell:last-child .tableCellContent {
+.basePaneStructure > .table .tableCell:last-child .tableCellContent {
     padding-right: 21px;
 }
 
-:local(.basePaneStructure) > .table .tableActions {
+.basePaneStructure > .table .tableActions {
     margin-right: -3px;
 }
 
-:local(.basePaneStructure) > .table :is(caption) {
+.basePaneStructure > .table :is(caption) {
     padding: 12px 21px;
     border-top: 1px solid rgb(var(--gray-3));
 }
 
-:local(.basePaneStructure) > .table .tableLoader {
+.basePaneStructure > .table .tableLoader {
     border-radius: var(--radius);
 }
 
-:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):first-child .tableCellContent {
+:not(.basePaneStructure) > .table .tableCell:not(.isBordered):first-child .tableCellContent {
     padding-left: 0;
 }
 
-:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
+:not(.basePaneStructure) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
     padding-right: 0;
 }

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

@@ -1,5 +1,3 @@
-@value basePane, basePaneStructure from './base/Pane.module.scss';
-
 .toolbar {
     padding: 6px;
     contain: paint;
@@ -12,7 +10,7 @@
 }
 
 .toolbarFlat {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
     composes: toolbar;
 
     position: relative;
@@ -21,7 +19,7 @@
 }
 
 .toolbarFloating {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
     composes: toolbar;
 
     position: absolute;
@@ -55,7 +53,7 @@
     }
 }
 
-:local(.basePaneStructure) > .toolbarFlat {
+.basePaneStructure > .toolbarFlat {
     padding: 12px 15px;
     background: rgb(var(--gray-1));
     border: 1px solid rgb(var(--gray-11) / .05);

package/src/css/component/base/Pane.module.scss

@@ -1,38 +1,36 @@
-@layer flux-base {
-    .basePane {
-        background: rgb(var(--gray-0));
-        background-clip: padding-box;
-        border: 1px solid rgb(var(--gray-11) / .05);
-        border-radius: var(--radius);
-    }
+.basePane {
+    background: rgb(var(--gray-0));
+    background-clip: padding-box;
+    border: 1px solid rgb(var(--gray-11) / .05);
+    border-radius: var(--radius);
+}
 
-    [dark] .basePane {
-        border-color: rgb(var(--gray-3));
-    }
+[dark] .basePane {
+    border-color: rgb(var(--gray-3));
+}
 
-    .basePaneLoader {
-        position: absolute;
-        display: flex;
-        inset: 0;
-        align-items: center;
-        justify-content: center;
-        backdrop-filter: blur(2px) saturate(180%);
-        background: rgb(var(--gray-0) / .75);
-        border-radius: inherit;
-        z-index: 100;
-    }
+.basePaneLoader {
+    position: absolute;
+    display: flex;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(2px) saturate(180%);
+    background: rgb(var(--gray-0) / .75);
+    border-radius: inherit;
+    z-index: 100;
+}
 
-    .basePaneStructure {
-        composes: basePane;
+.basePaneStructure {
+    composes: basePane;
 
-        position: relative;
-    }
+    position: relative;
+}
 
-    .basePaneStructure > .basePaneStructure {
-        background: unset;
-        border: 0;
-        box-shadow: none;
-    }
+.basePaneStructure > .basePaneStructure {
+    background: unset;
+    border: 0;
+    box-shadow: none;
 }
 
 .basePane > .basePaneElement,

package/src/css/component/primitive/CoordinatePicker.module.scss

@@ -1,5 +1,3 @@
-@value sliderThumb from './Slider.module.scss';
-
 .coordinatePicker {
     position: relative;
     aspect-ratio: 5 / 3;
@@ -10,7 +8,7 @@
 }
 
 .coordinatePickerThumb {
-    composes: sliderThumb;
+    composes: sliderThumb from './Slider.module.scss';
 
     z-index: 1;
 

package/src/css/reset.scss

@@ -60,6 +60,12 @@
         text-transform: none;
     }
 
+    // Inherit anchor color and remove default underline.
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
     // Create a new root stacking context.
     #app {
         isolation: isolate;

package/src/css/typography.scss

@@ -65,9 +65,12 @@
         }
     }
 
+    code, kbd, samp, pre {
+        font-family: var(--font-monospace), monospace;
+    }
+
     img:not([class]) {
         height: unset;
-        max-width: 100%;
         border-radius: calc(var(--radius) / 2);
         outline: 1px solid rgb(0 0 0 / .025);
         outline-offset: -1px;

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',

package/src/util/createDialogRenderer.ts

@@ -1,5 +1,5 @@
 import { flattenVNodeTree } from '@flux-ui/internals';
-import type { Component, RenderFunction, Slots } from 'vue';
+import { Component, getCurrentInstance, RenderFunction, Slots } from 'vue';
 import { Comment, h, onMounted, onUnmounted, SetupContext, Teleport, VNode } from 'vue';
 import { registerDialog, useFluxStore } from '$flux/data';
 
@@ -9,7 +9,8 @@ type Props = {
     readonly viewKey?: string;
 };
 
-export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component, to: string = 'body'): RenderFunction {
+export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction {
+    const instance = getCurrentInstance();
     let unregister: Function | null = null;
     let zIndex = 0;
 
@@ -55,7 +56,7 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
             unregister = null;
         }
 
-        return h(Teleport, {disabled: content.length === 0, to}, [
+        return h(Teleport, {disabled: content.length === 0, to: instance?.appContext.app._container}, [
             h(transition, attrs, {
                 default: () => content
             })