@flux-ui/components 3.0.0-next.34 → 3.0.0-next.38

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

@@ -1,3 +1,5 @@
+@use '$flux/css/mixin';
+
 .table {
     composes: basePaneElement from './base/Pane.module.scss';
 
@@ -127,11 +129,11 @@ tfoot .tableCell {
     position: relative;
     background: var(--gray-50);
     box-shadow: 0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50);
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50);
     z-index: 2;
 }
 
@@ -171,20 +173,18 @@ tfoot .tableCell {
     cursor: pointer;
     outline: 0;
 
-    @media (hover: hover) {
-        &:hover {
-            background: var(--gray-100);
-            color: var(--foreground);
-        }
+    @include mixin.hover {
+        background: var(--gray-100);
+        color: var(--foreground);
     }
 }
 
 .basePaneStructure > .table .tableCell:first-child .tableCellContent {
-    padding-left: 21px;
+    padding-left: 18px;
 }
 
 .basePaneStructure > .table .tableCell:last-child .tableCellContent {
-    padding-right: 21px;
+    padding-right: 18px;
 }
 
 .basePaneStructure > .table .tableActions {
@@ -192,7 +192,7 @@ tfoot .tableCell {
 }
 
 .basePaneStructure > .table :is(caption) {
-    padding: 12px 21px;
+    padding: 12px 18px;
     border-top: 1px solid var(--gray-100);
 }
 

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

@@ -17,7 +17,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     outline: 6px solid var(--surface);
 }
 
@@ -42,7 +42,7 @@
     align-items: center;
     justify-content: center;
     background: var(--gray-25);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
 }
 
 .timelineItemPhotoImage {

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

@@ -44,12 +44,12 @@
 
     &.isTopEnd,
     &.isBottomEnd {
-        right: 21px;
+        right: 18px;
     }
 
     &.isTopStart,
     &.isBottomStart {
-        left: 21px;
+        left: 18px;
     }
 }
 
@@ -81,5 +81,5 @@
 }
 
 .paneHeader + .toolbarFlat {
-    margin-top: 21px;
+    margin-top: 18px;
 }

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

@@ -6,8 +6,8 @@
     max-width: 360px;
     padding: 9px 15px;
     flex-flow: column;
-    background: rgb(from var(--gray-950) r g b / .9);
-    backdrop-filter: blur(6px) saturate(180%);
+    background: var(--overlay-strong);
+    backdrop-filter: blur(3px) saturate(180%);
     border-radius: var(--radius);
     color: var(--gray-25);
     font-size: 14px;
@@ -35,8 +35,7 @@
 }
 
 [dark] .tooltip {
-    background: rgb(0 0 0 / .9);
-    color: white;
+    color: var(--gray-700);
 }
 
 .tooltipAbove {

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

@@ -32,7 +32,7 @@
 
 .fadeTransitionEnterActive,
 .fadeTransitionLeaveActive {
-    transition: opacity 180ms var(--swift-out) !important;
+    transition: opacity var(--transition-default) !important;
 }
 
 .fadeTransitionEnterFrom,

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

@@ -7,20 +7,9 @@
 }
 
 .treeNode {
-    display: flex;
-    width: 100%;
-    min-height: 36px;
-    padding: 0 8px;
-    align-items: center;
-    border-radius: var(--radius-half);
-    color: var(--foreground);
+    composes: treeNode from './primitive/TreeNode.module.scss';
+
     cursor: pointer;
-    font-size: 14px;
-    gap: 8px;
-    outline: 0;
-    transition: 150ms var(--swift-out);
-    transition-property: background, color;
-    user-select: none;
 
     @include mixin.hover {
         background: var(--surface-hover);
@@ -30,5 +19,3 @@
         background: var(--surface-hover);
     }
 }
-
-@include mixin.tree-node-classes();

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

@@ -21,19 +21,7 @@
 }
 
 .treeNode {
-    display: flex;
-    width: 100%;
-    min-height: 36px;
-    padding: 0 8px;
-    align-items: center;
-    border-radius: var(--radius-half);
-    color: var(--foreground);
-    font-size: 14px;
-    gap: 8px;
-    outline: 0;
-    transition: 150ms var(--swift-out);
-    transition-property: background, color;
-    user-select: none;
+    composes: treeNode from './primitive/TreeNode.module.scss';
 
     &.isSelectable,
     &.isExpandable {
@@ -69,5 +57,3 @@
     color: var(--primary-600);
     flex-shrink: 0;
 }
-
-@include mixin.tree-node-classes();

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

@@ -3,8 +3,6 @@
 @layer flux-base {
     .button {
         display: inline-flex;
-        height: 42px;
-        padding: 0 12px;
         align-items: center;
         flex-grow: 0;
         flex-shrink: 0;
@@ -17,7 +15,7 @@
         cursor: pointer;
         font: inherit;
         text-decoration: none;
-        transition: 180ms var(--swift-out);
+        transition: var(--transition-default);
         transition-property: background, border, box-shadow, color, scale, mixin.focus-ring-transition-properties();
         user-select: none;
 
@@ -64,12 +62,13 @@
     }
 
     .buttonIcon {
+        margin: 1px;
         flex-shrink: 0;
-        font-size: 20px;
+        font-size: 18px;
 
         &:only-child {
-            margin-left: -2px;
-            margin-right: -2px;
+            margin-left: -1px;
+            margin-right: -1px;
         }
     }
 
@@ -85,7 +84,7 @@
         }
     }
 
-    .badge {
+    .button .badge {
         &:first-child {
             margin-left: -6px;
         }

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

@@ -31,7 +31,8 @@ $-sparkle-r: .5 * $-sparkle-d;
             $-xs: $-xg + $-sparkle-d * cos($-sparkle-curr-angle);
             $-ys: $-yg + $-sparkle-d * sin($-sparkle-curr-angle);
 
-            $-shadow-list: $-shadow-list, $-xs $-ys 0 $-spread-r hsl(($i + $j) * $-group-base-angle, 100%, 75%);
+            $-hue: ($i + $j) * $-group-base-angle;
+            $-shadow-list: $-shadow-list, $-xs $-ys 0 $-spread-r hsl($-hue, 100%, 75%);
         }
     }
 

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

@@ -26,7 +26,7 @@
     background: var(--surface);
     background-clip: padding-box;
     border: 1px solid var(--surface-stroke-out);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     box-shadow: var(--shadow-sm);
     cursor: grab;
     outline: 0;
@@ -34,10 +34,8 @@
 
     @include mixin.focus-ring-transition(2px);
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--surface-hover);
-        }
+    @include mixin.hover {
+        background-color: var(--surface-hover);
     }
 
     &.isDisabled {
@@ -56,8 +54,9 @@
     position: relative;
     height: 12px;
     background: var(--gray-50);
+    background-clip: padding-box;
     border-radius: var(--radius-half);
-    box-shadow: inset 0 0 0 1px var(--surface-stroke);
+    box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
 }
 
 .sliderTrackValue {
@@ -80,7 +79,7 @@
     height: 9px;
     width: 2px;
     background: var(--gray-300);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-prominent);
     font-size: 10px;
     font-weight: 600;

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

@@ -0,0 +1,19 @@
+@use '$flux/css/mixin';
+
+.treeNode {
+    display: flex;
+    width: 100%;
+    min-height: 36px;
+    padding: 0 8px;
+    align-items: center;
+    border-radius: var(--radius-half);
+    color: var(--foreground);
+    font-size: 14px;
+    gap: 8px;
+    outline: 0;
+    transition: 150ms var(--swift-out);
+    transition-property: background, color;
+    user-select: none;
+}
+
+@include mixin.tree-node-classes();

package/src/css/mixin/button-active.scss

@@ -0,0 +1,6 @@
+@mixin button-active($background) {
+    &:active {
+        background: $background;
+        scale: .9875;
+    }
+}

package/src/css/mixin/focus-ring.scss

@@ -45,7 +45,7 @@
 }
 
 @mixin focus-ring-transition($offset: 0, $within: false) {
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: focus-ring-transition-properties();
 
     @include focus-ring($offset, $within);

package/src/css/mixin/index.scss

@@ -1,4 +1,5 @@
 @forward 'breakpoints';
+@forward 'button-active';
 @forward 'focus-ring';
 @forward 'hover';
 @forward 'tree-node';

package/src/css/typography.scss

@@ -1,6 +1,6 @@
 @layer flux-base {
     h1, h2, h3, h4, h5, h6 {
-        font-weight: 700;
+        font-weight: 600;
         line-height: 1.6;
         text-wrap: balance;
     }
@@ -33,9 +33,10 @@
     }
 
     a:not([class]), a[class=""] {
+        align-self: start;
         color: var(--primary-600);
         text-decoration: underline;
-        text-decoration-color: var(--primary-400);
+        text-decoration-color: currentColor;
         text-decoration-skip: auto;
         text-decoration-thickness: 1px;
         text-underline-offset: 2px;

package/src/css/variables.scss

@@ -174,9 +174,12 @@
     --font-size: 15px;
     --radius: 12px;
     --radius-double: 24px;
+    --radius-full: 9999px;
     --radius-half: 6px;
 
-    --background: var(--gray-50);
+    --transition-default: 180ms var(--swift-out);
+
+    --background: var(--gray-25);
     --foreground: var(--gray-700);
     --foreground-prominent: var(--gray-900);
     --foreground-secondary: var(--gray-500);
@@ -190,13 +193,15 @@
     --surface-active: var(--gray-100);
     --surface-disabled: var(--gray-100);
 
-    --overlay: rgb(from var(--gray-950) r g b / .3);
+    --overlay: rgb(from var(--gray-950) r g b / .5);
     --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
+    --overlay-strong: rgb(from var(--gray-950) r g b / .9);
 }
 
 @mixin defaults-dark {
     --overlay: rgb(0 0 0 / .6);
     --overlay-secondary: rgb(0 0 0 / .4);
+    --overlay-strong: rgb(0 0 0 / .9);
 }
 
 @mixin shadow-light {

package/src/data/di.ts

@@ -1,6 +1,7 @@
 import type { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
 import type { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
 
+export const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection> = Symbol();
 export const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>> = Symbol();
 export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection> = Symbol();
 export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
@@ -9,6 +10,18 @@ export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = S
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
 export const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection> = Symbol();
 
+export type FluxAdaptiveGroupChild = {
+    readonly priority: Ref<number>;
+    readonly desiredDefaultWidth: Ref<number>;
+    readonly desiredFallbackWidth: Ref<number>;
+    readonly isDefaultVisible: Ref<boolean>;
+};
+
+export type FluxAdaptiveGroupInjection = {
+    register(uid: number, child: FluxAdaptiveGroupChild): void;
+    unregister(uid: number): void;
+};
+
 export type FluxExpandableGroupInjection = {
     closeAll(): void;
     register(uid: number, expandable: ComponentInternalInstance): void;

package/src/data/filter.ts

@@ -1,11 +1,11 @@
 import { formatNumber } from '@basmilius/utils';
-import type { FluxFilterBase, FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterOptionEntry, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterOptionsEntry, FluxFilterRangeEntry, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
+import type { FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterDateRangeSpec, FluxFilterDateSpec, FluxFilterEntryMap, FluxFilterOptionAsyncSpec, FluxFilterOptionEntry, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterOptionSpec, FluxFilterOptionsAsyncSpec, FluxFilterOptionsEntry, FluxFilterOptionsSpec, FluxFilterRangeEntry, FluxFilterRangeSpec, FluxFilterSpecMap, FluxFilterValueSingle } from '@flux-ui/types';
 import { DateTime } from 'luxon';
 import { useTranslate } from '$flux/composable/private';
 import type { FluxTranslate } from '$flux/data';
 import { createLabelForDateRange } from '$flux/util';
 
-function parseDate(base: FluxFilterBase): FluxFilterDateEntry {
+function parseDate(base: FluxFilterDateSpec): FluxFilterDateEntry {
     return {
         ...base,
         type: 'date',
@@ -24,7 +24,7 @@ function parseDate(base: FluxFilterBase): FluxFilterDateEntry {
     };
 }
 
-function parseDateRange(base: FluxFilterBase): FluxFilterDateRangeEntry {
+function parseDateRange(base: FluxFilterDateRangeSpec): FluxFilterDateRangeEntry {
     return {
         ...base,
         type: 'dateRange',
@@ -45,36 +45,34 @@ function parseDateRange(base: FluxFilterBase): FluxFilterDateRangeEntry {
     };
 }
 
-function parseOption(base: FluxFilterBase): FluxFilterOptionEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
+function parseOption({options, ...base}: FluxFilterOptionSpec): FluxFilterOptionEntry {
+    const items = options.filter(isFluxFilterOptionItem);
 
     return {
         ...base,
         type: 'option',
 
         async getValueLabel(value): Promise<string | null> {
-            return options.find(o => o.value === value)?.label ?? null;
+            return items.find(o => o.value === value)?.label ?? null;
         }
     };
 }
 
-function parseOptionAsync(base: FluxFilterBase): FluxFilterOptionEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
-
+function parseOptionAsync({fetchOptions, ...base}: FluxFilterOptionAsyncSpec): FluxFilterOptionEntry {
     return {
         ...base,
         type: 'option',
 
         async getValueLabel(value): Promise<string | null> {
-            const options = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
+            const items = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
 
-            return options.find(o => o.value === value)?.label ?? null;
+            return items.find(o => o.value === value)?.label ?? null;
         }
     };
 }
 
-function parseOptions(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
+function parseOptions({options, ...base}: FluxFilterOptionsSpec): FluxFilterOptionsEntry {
+    const items = options.filter(isFluxFilterOptionItem);
     const translate = useTranslate();
 
     return {
@@ -86,13 +84,12 @@ function parseOptions(base: FluxFilterBase): FluxFilterOptionsEntry {
                 return null;
             }
 
-            return generateMultiOptionsLabel(translate, options, value);
+            return generateMultiOptionsLabel(translate, items, value);
         }
     };
 }
 
-function parseOptionsAsync(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
+function parseOptionsAsync({fetchOptions, ...base}: FluxFilterOptionsAsyncSpec): FluxFilterOptionsEntry {
     const translate = useTranslate();
 
     return {
@@ -104,14 +101,14 @@ function parseOptionsAsync(base: FluxFilterBase): FluxFilterOptionsEntry {
                 return null;
             }
 
-            const options = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
+            const items = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
 
-            return generateMultiOptionsLabel(translate, options, value);
+            return generateMultiOptionsLabel(translate, items, value);
         }
     };
 }
 
-function parseRange(base: FluxFilterBase): FluxFilterRangeEntry {
+function parseRange(base: FluxFilterRangeSpec): FluxFilterRangeEntry {
     return {
         ...base,
         type: 'range',
@@ -122,14 +119,9 @@ function parseRange(base: FluxFilterBase): FluxFilterRangeEntry {
             }
 
             const [lower, upper] = value as number[];
+            const formatter = base.formatter ?? formatNumber;
 
-            if ('formatter' in base) {
-                const formatter = base.formatter as (value: number) => string;
-
-                return `${formatter(lower!)} – ${formatter(upper!)}`;
-            }
-
-            return `${formatNumber(lower!)} – ${formatNumber(upper!)}`;
+            return `${formatter(lower!)} – ${formatter(upper!)}`;
         }
     };
 }
@@ -150,7 +142,11 @@ function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilter
     });
 }
 
-export const filterParsers = {
+export type FluxFilterParsers = {
+    [K in keyof FluxFilterSpecMap]: (spec: FluxFilterSpecMap[K]) => FluxFilterEntryMap[K];
+};
+
+export const filterParsers: FluxFilterParsers = {
     date: parseDate,
     dateRange: parseDateRange,
     option: parseOption,
@@ -158,7 +154,7 @@ export const filterParsers = {
     options: parseOptions,
     optionsAsync: parseOptionsAsync,
     range: parseRange
-} as const;
+};
 
 export function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader {
     return 'title' in obj;

package/src/data/i18n.ts

@@ -4,9 +4,11 @@ export type FluxTranslation = keyof typeof english;
 export const english = {
     'flux.back': 'Back',
     'flux.cancel': 'Cancel',
+    'flux.close': 'Close',
     'flux.comingSoon': 'Coming soon',
     'flux.continue': 'Continue',
     'flux.customPeriod': 'Custom period',
+    'flux.delete': 'Delete',
     'flux.filter': 'Filter',
     'flux.filterReset': 'Reset filters',
     'flux.justNow': 'Just now',
@@ -32,6 +34,21 @@ export const english = {
     'flux.sortDescending': 'Descending',
     'flux.sortRemove': 'Remove sorting',
     'flux.today': 'Today',
+    'flux.selectMonth': 'Select month',
+    'flux.selectYear': 'Select year',
+    'flux.previousMonth': 'Previous month',
+    'flux.nextMonth': 'Next month',
+    'flux.previousYears': 'Previous years',
+    'flux.nextYears': 'Next years',
+    'flux.goToPage': 'Go to page {page}',
+    'flux.pinDigit': 'Digit {index} of {total}',
+    'flux.dropFilesOrClick': 'Drop files here or click to upload',
+    'flux.colorSaturationBrightness': 'Color saturation and brightness',
+    'flux.customColor': 'Custom color',
+    'flux.hue': 'Hue',
+    'flux.opacity': 'Opacity',
+    'flux.lowerBound': 'Lower bound',
+    'flux.upperBound': 'Upper bound',
     'flux.galleryPlaceholderButton': 'Pick image',
     'flux.galleryPlaceholderMessage': 'Drop an image here or click the button to upload...',
     'flux.galleryPlaceholderTitle': 'Gallery',