@flux-ui/components 3.0.0-next.5 → 3.0.0-next.52

package/src/css/variables.scss

@@ -1,9 +1,5 @@
 @use 'sass:color';
 
-@function -rgb($hex) {
-    @return color.channel($hex, 'red', $space: rgb) color.channel($hex, 'green', $space: rgb) color.channel($hex, 'blue', $space: rgb);
-}
-
 @mixin animation {
     --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
     --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
@@ -12,203 +8,218 @@
 }
 
 @mixin color-light {
-    --primary-0: #{-rgb(#ffffff)};
-    --primary-1: #{-rgb(#f5f8ff)};
-    --primary-2: #{-rgb(#eff4ff)};
-    --primary-3: #{-rgb(#d1e0ff)};
-    --primary-4: #{-rgb(#b2ccff)};
-    --primary-5: #{-rgb(#84adff)};
-    --primary-6: #{-rgb(#528bff)};
-    --primary-7: #{-rgb(#2970ff)};
-    --primary-8: #{-rgb(#155eef)};
-    --primary-9: #{-rgb(#004eeb)};
-    --primary-10: #{-rgb(#0040c1)};
-    --primary-11: #{-rgb(#00359e)};
-
-    --danger-0: #{-rgb(#ffffff)};
-    --danger-1: #{-rgb(#fff1f2)};
-    --danger-2: #{-rgb(#ffe4e6)};
-    --danger-3: #{-rgb(#ffccd3)};
-    --danger-4: #{-rgb(#ffa1ad)};
-    --danger-5: #{-rgb(#ff637e)};
-    --danger-6: #{-rgb(#ff2056)};
-    --danger-7: #{-rgb(#ec003f)};
-    --danger-8: #{-rgb(#c70036)};
-    --danger-9: #{-rgb(#a50036)};
-    --danger-10: #{-rgb(#8b0836)};
-    --danger-11: #{-rgb(#4d0218)};
-
-    --info-0: #{-rgb(#ffffff)};
-    --info-1: #{-rgb(#eff6ff)};
-    --info-2: #{-rgb(#dbeafe)};
-    --info-3: #{-rgb(#bedbff)};
-    --info-4: #{-rgb(#8ec5ff)};
-    --info-5: #{-rgb(#51a2ff)};
-    --info-6: #{-rgb(#2b7fff)};
-    --info-7: #{-rgb(#155dfc)};
-    --info-8: #{-rgb(#1447e6)};
-    --info-9: #{-rgb(#193cb8)};
-    --info-10: #{-rgb(#1c398e)};
-    --info-11: #{-rgb(#162456)};
-
-    --success-0: #{-rgb(#ffffff)};
-    --success-1: #{-rgb(#f0fdf4)};
-    --success-2: #{-rgb(#dcfce7)};
-    --success-3: #{-rgb(#b9f8cf)};
-    --success-4: #{-rgb(#7bf1a8)};
-    --success-5: #{-rgb(#05df72)};
-    --success-6: #{-rgb(#00c950)};
-    --success-7: #{-rgb(#00a63e)};
-    --success-8: #{-rgb(#008236)};
-    --success-9: #{-rgb(#016630)};
-    --success-10: #{-rgb(#0d542b)};
-    --success-11: #{-rgb(#032e15)};
-
-    --warning-0: #{-rgb(#ffffff)};
-    --warning-1: #{-rgb(#fffbeb)};
-    --warning-2: #{-rgb(#fef3c6)};
-    --warning-3: #{-rgb(#fee685)};
-    --warning-4: #{-rgb(#ffd230)};
-    --warning-5: #{-rgb(#ffb900)};
-    --warning-6: #{-rgb(#fe9a00)};
-    --warning-7: #{-rgb(#e17100)};
-    --warning-8: #{-rgb(#bb4d00)};
-    --warning-9: #{-rgb(#973c00)};
-    --warning-10: #{-rgb(#7b3306)};
-    --warning-11: #{-rgb(#461901)};
-
-    --gray-0: #{-rgb(#ffffff)};
-    --gray-1: #{-rgb(#f8fafc)};
-    --gray-2: #{-rgb(#f1f5f9)};
-    --gray-3: #{-rgb(#e2e8f0)};
-    --gray-4: #{-rgb(#cad5e2)};
-    --gray-5: #{-rgb(#90a1b9)};
-    --gray-6: #{-rgb(#62748e)};
-    --gray-7: #{-rgb(#45556c)};
-    --gray-8: #{-rgb(#314158)};
-    --gray-9: #{-rgb(#1d293d)};
-    --gray-10: #{-rgb(#0f172b)};
-    --gray-11: #{-rgb(#020618)};
+    --gray-25: #ffffff;
+    --gray-50: #f7f8fc;
+    --gray-100: #eceef4;
+    --gray-200: #dee1ea;
+    --gray-300: #c6cad5;
+    --gray-400: #9da4b8;
+    --gray-500: #848ca2;
+    --gray-600: #606881;
+    --gray-700: #3f475e;
+    --gray-800: #2d3241;
+    --gray-900: #1a1f2d;
+    --gray-950: #090c19;
+
+    --primary-25: #fcfcfc;
+    --primary-50: #ebf2ff;
+    --primary-100: #d7e5ff;
+    --primary-200: #c4d8ff;
+    --primary-300: #9dbdff;
+    --primary-400: #77a2fc;
+    --primary-500: #5285f8;
+    --primary-600: #2258e5;
+    --primary-700: #0935b1;
+    --primary-800: #011e8c;
+    --primary-900: #000f60;
+    --primary-950: #000337;
+
+    --danger-25: #fefbfa;
+    --danger-50: #fff1f2;
+    --danger-100: #ffe4e6;
+    --danger-200: #ffccd3;
+    --danger-300: #ffa1ac;
+    --danger-400: #ff637e;
+    --danger-500: #ff2054;
+    --danger-600: #ec003e;
+    --danger-700: #c70036;
+    --danger-800: #a50035;
+    --danger-900: #8b0836;
+    --danger-950: #4d0218;
+
+    --info-25: #f9fcff;
+    --info-50: #eff6ff;
+    --info-100: #dbeafe;
+    --info-200: #bedbff;
+    --info-300: #8dc5ff;
+    --info-400: #52a2ff;
+    --info-500: #297fff;
+    --info-600: #165dfc;
+    --info-700: #1048e6;
+    --info-800: #163cb8;
+    --info-900: #1b398e;
+    --info-950: #162456;
+
+    --success-25: #fafdfa;
+    --success-50: #f0fdf4;
+    --success-100: #dcfce7;
+    --success-200: #b9f8cf;
+    --success-300: #7af1a9;
+    --success-400: #00df73;
+    --success-500: #00c951;
+    --success-600: #08a63d;
+    --success-700: #028236;
+    --success-800: #03662f;
+    --success-900: #0d542a;
+    --success-950: #032e15;
+
+    --warning-25: #fdfcf8;
+    --warning-50: #fffbeb;
+    --warning-100: #fef3c6;
+    --warning-200: #fee685;
+    --warning-300: #ffd22f;
+    --warning-400: #ffb902;
+    --warning-500: #ff9717;
+    --warning-600: #dd7500;
+    --warning-700: #b55500;
+    --warning-800: #934200;
+    --warning-900: #793600;
+    --warning-950: #451b00;
 }
 
 @mixin color-dark {
-    //--primary-0: #{-rgb(#182035)};
-    //--primary-1: #{-rgb(#1f2a45)};
-    //--primary-2: #{-rgb(#243254)};
-    //--primary-3: #{-rgb(#2b3c63)};
-    //--primary-4: #{-rgb(#314471)};
-    //--primary-5: #{-rgb(#385080)};
-    //--primary-6: #{-rgb(#3e5a8e)};
-    //--primary-7: #{-rgb(#44669e)};
-    //--primary-8: #{-rgb(#5077b0)};
-    //--primary-9: #{-rgb(#5a84bf)};
-    //--primary-10: #{-rgb(#6594d1)};
-    //--primary-11: #{-rgb(#709fe3)};
-
-    --danger-0: #{-rgb(#272325)};
-    --danger-1: #{-rgb(#331e23)};
-    --danger-2: #{-rgb(#3e1f28)};
-    --danger-3: #{-rgb(#4c222e)};
-    --danger-4: #{-rgb(#5b2635)};
-    --danger-5: #{-rgb(#6a2b3e)};
-    --danger-6: #{-rgb(#7a3047)};
-    --danger-7: #{-rgb(#8b3552)};
-    --danger-8: #{-rgb(#9e3a5f)};
-    --danger-9: #{-rgb(#a53d6e)};
-    --danger-10: #{-rgb(#b63e7c)};
-    --danger-11: #{-rgb(#c8408c)};
-
-    --info-0: #{-rgb(#23262c)};
-    --info-1: #{-rgb(#1f2832)};
-    --info-2: #{-rgb(#243141)};
-    --info-3: #{-rgb(#2a3d52)};
-    --info-4: #{-rgb(#2f4a66)};
-    --info-5: #{-rgb(#34567b)};
-    --info-6: #{-rgb(#3b638f)};
-    --info-7: #{-rgb(#436fa3)};
-    --info-8: #{-rgb(#4b7bb7)};
-    --info-9: #{-rgb(#5588cb)};
-    --info-10: #{-rgb(#6094df)};
-    --info-11: #{-rgb(#6aa3f3)};
-
-    --success-0: #{-rgb(#1d2620)};
-    --success-1: #{-rgb(#222d26)};
-    --success-2: #{-rgb(#26342c)};
-    --success-3: #{-rgb(#2c4435)};
-    --success-4: #{-rgb(#33543e)};
-    --success-5: #{-rgb(#3a6547)};
-    --success-6: #{-rgb(#417651)};
-    --success-7: #{-rgb(#4b875d)};
-    --success-8: #{-rgb(#589967)};
-    --success-9: #{-rgb(#6eac74)};
-    --success-10: #{-rgb(#86ba86)};
-    --success-11: #{-rgb(#9bc89b)};
-
-    --warning-0: #{-rgb(#2b261a)};
-    --warning-1: #{-rgb(#332b1b)};
-    --warning-2: #{-rgb(#3d321e)};
-    --warning-3: #{-rgb(#4a3c21)};
-    --warning-4: #{-rgb(#554825)};
-    --warning-5: #{-rgb(#63552a)};
-    --warning-6: #{-rgb(#74602f)};
-    --warning-7: #{-rgb(#8a6c34)};
-    --warning-8: #{-rgb(#a37b3a)};
-    --warning-9: #{-rgb(#c19041)};
-    --warning-10: #{-rgb(#d5a048)};
-    --warning-11: #{-rgb(#eab14f)};
-
-    --gray-0: #{-rgb(#14161a)};
-    --gray-1: #{-rgb(#1b1d21)};
-    --gray-2: #{-rgb(#22252b)};
-    --gray-3: #{-rgb(#2a2d33)};
-    --gray-4: #{-rgb(#333b3d)};
-    --gray-5: #{-rgb(#3d464a)};
-    --gray-6: #{-rgb(#475055)};
-    --gray-7: #{-rgb(#515d60)};
-    --gray-8: #{-rgb(#5c696b)};
-    --gray-9: #{-rgb(#677577)};
-    --gray-10: #{-rgb(#738180)};
-    --gray-11: #{-rgb(#7f8c8c)};
+    --gray-25: #0c0d12;
+    --gray-50: #121419;
+    --gray-100: #1a1d24;
+    --gray-200: #23262f;
+    --gray-300: #363a45;
+    --gray-400: #494f61;
+    --gray-500: #5e657b;
+    --gray-600: #7f88a2;
+    --gray-700: #a4adc8;
+    --gray-800: #c0c7da;
+    --gray-900: #dae1f5;
+    --gray-950: #f4fbff;
+
+    --primary-25: #23262c;
+    --primary-50: #262c39;
+    --primary-100: #2a3448;
+    --primary-200: #303e5a;
+    --primary-300: #36486e;
+    --primary-400: #3e5585;
+    --primary-500: #44619d;
+    --primary-600: #4d6fb6;
+    --primary-700: #5980d3;
+    --primary-800: #6a96f5;
+    --primary-900: #77a7ff;
+    --primary-950: #85b8ff;
+
+    --danger-25: #272325;
+    --danger-50: #37272b;
+    --danger-100: #452c30;
+    --danger-200: #563237;
+    --danger-300: #69393d;
+    --danger-400: #7f4145;
+    --danger-500: #94484c;
+    --danger-600: #ab5155;
+    --danger-700: #c65d64;
+    --danger-800: #e66f7a;
+    --danger-900: #fd7c8c;
+    --danger-950: #ff8ba0;
+
+    --info-25: #23262c;
+    --info-50: #252c39;
+    --info-100: #283447;
+    --info-200: #2c3f59;
+    --info-300: #2e4b6d;
+    --info-400: #315884;
+    --info-500: #33659b;
+    --info-600: #3874b4;
+    --info-700: #4285d1;
+    --info-800: #539cf3;
+    --info-900: #5dadff;
+    --info-950: #6bbfff;
+
+    --success-25: #1d2620;
+    --success-50: #223027;
+    --success-100: #243a2b;
+    --success-200: #264632;
+    --success-300: #285438;
+    --success-400: #2b643f;
+    --success-500: #2d7345;
+    --success-600: #32844c;
+    --success-700: #3b9956;
+    --success-800: #4cb265;
+    --success-900: #59c56f;
+    --success-950: #6ad87b;
+
+    --warning-25: #2b261a;
+    --warning-50: #322b1b;
+    --warning-100: #3c331e;
+    --warning-200: #493c21;
+    --warning-300: #574725;
+    --warning-400: #68532a;
+    --warning-500: #785e30;
+    --warning-600: #8c6b35;
+    --warning-700: #a47a3b;
+    --warning-800: #c28f42;
+    --warning-900: #d89e4a;
+    --warning-950: #efae52;
 }
 
-@mixin default-light {
+@mixin defaults {
     --font-monospace: jetbrains-mono, monospace;
     --font-sans: inter-variable, sans-serif;
     --font-serif: serif;
     --font-size: 15px;
-    --radius: 9px;
-
-    --background: rgb(var(--gray-2));
-
-    --foreground: rgb(var(--gray-8));
-    --foreground-prominent: rgb(var(--gray-10));
-    --foreground-secondary: rgb(var(--gray-5));
+    --radius: 12px;
+    --radius-double: 24px;
+    --radius-full: 9999px;
+    --radius-half: 6px;
+
+    --transition-default: 180ms var(--swift-out);
+
+    --background: var(--gray-25);
+    --foreground: var(--gray-700);
+    --foreground-prominent: var(--gray-900);
+    --foreground-secondary: var(--gray-500);
+    --surface: var(--gray-25);
+    --surface-loader: rgb(from var(--gray-25) r g b / .75);
+    --surface-stroke: var(--gray-200);
+    --surface-stroke-hover: var(--gray-300);
+    --surface-stroke-out: rgb(from var(--gray-900) r g b / .1);
+    --surface-stroke-out-hover: rgb(from var(--gray-950) r g b / .1);
+    --surface-hover: var(--gray-50);
+    --surface-active: var(--gray-100);
+    --surface-disabled: var(--gray-100);
+
+    --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 default-dark {
-    --background: rgb(var(--gray-2));
-
-    --foreground: #cbd5e1;
-    --foreground-prominent: #ffffff;
-    --foreground-secondary: #64748b;
+@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 {
-    --shadow-px: 0 1px 1px rgb(29 41 61 / .025);
-    --shadow-xs: 0 1px 2px 0 rgb(29 41 61 / .025);
-    --shadow-sm: 0 1px 3px rgb(29 41 61 / .05), 0 1px 2px -1px rgb(29 41 61 / .05);
-    --shadow-md: 0 4px 6px -1px rgb(29 41 61 / .05), 0 2px 4px -2px rgb(29 41 61 / .05);
-    --shadow-lg: 0 10px 15px -3px rgb(29 41 61 / .05), 0 4px 6px -4px rgb(29 41 61 / .05);
-    --shadow-xl: 0 20px 25px -5px rgb(29 41 61 / .05), 0 8px 10px -6px rgb(29 41 61 / .05);
-    --shadow-2xl: 0 25px 50px -12px rgb(29 41 61 / .125);
+    --shadow-px: 0 1px 1px rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-xs: 0 1px 2px 0 rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-sm: 0 1px 3px rgb(from var(--gray-800) r g b / 0.05), 0 1px 2px -1px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(from var(--gray-800) r g b / 0.05), 0 2px 4px -2px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-lg: 0 10px 15px -3px rgb(from var(--gray-800) r g b / 0.05), 0 4px 6px -4px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-xl: 0 20px 25px -5px rgb(from var(--gray-800) r g b / 0.05), 0 8px 10px -6px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-2xl: 0 25px 50px -12px rgb(from var(--gray-800) r g b / 0.12);
 }
 
 @mixin shadow-dark {
-    --shadow-px: 0 1px 1px rgb(0 0 0 / .05);
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
-    --shadow-sm: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
+    --shadow-px: 0 1px 1px rgb(0 0 0 / 0.1);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }

package/src/data/di.ts

@@ -1,12 +1,26 @@
 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();
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
 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;
@@ -40,3 +54,7 @@ export type FluxTableInjection = {
     readonly isSeparated: boolean;
     readonly isStriped: boolean;
 };
+
+export type FluxTooltipInjection = {
+    calculate(): void;
+};

package/src/data/filter.ts

@@ -1,4 +1,160 @@
-import type { FluxFilterOptionHeader, FluxFilterOptionItem } from '@flux-ui/types';
+import { formatNumber } from '@basmilius/utils';
+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: FluxFilterDateSpec): FluxFilterDateEntry {
+    return {
+        ...base,
+        type: 'date',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!DateTime.isDateTime(value)) {
+                return null;
+            }
+
+            return value.toLocaleString({
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric'
+            });
+        }
+    };
+}
+
+function parseDateRange(base: FluxFilterDateRangeSpec): FluxFilterDateRangeEntry {
+    return {
+        ...base,
+        type: 'dateRange',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!Array.isArray(value) || value.length !== 2) {
+                return null;
+            }
+
+            const [start, end] = value;
+
+            if (!DateTime.isDateTime(start) || !DateTime.isDateTime(end)) {
+                return null;
+            }
+
+            return createLabelForDateRange(start, end);
+        }
+    };
+}
+
+function parseOption({options, ...base}: FluxFilterOptionSpec): FluxFilterOptionEntry {
+    const items = options.filter(isFluxFilterOptionItem);
+
+    return {
+        ...base,
+        type: 'option',
+
+        async getValueLabel(value): Promise<string | null> {
+            return items.find(o => o.value === value)?.label ?? null;
+        }
+    };
+}
+
+function parseOptionAsync({fetchOptions, ...base}: FluxFilterOptionAsyncSpec): FluxFilterOptionEntry {
+    return {
+        ...base,
+        type: 'option',
+
+        async getValueLabel(value): Promise<string | null> {
+            const items = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
+
+            return items.find(o => o.value === value)?.label ?? null;
+        }
+    };
+}
+
+function parseOptions({options, ...base}: FluxFilterOptionsSpec): FluxFilterOptionsEntry {
+    const items = options.filter(isFluxFilterOptionItem);
+    const translate = useTranslate();
+
+    return {
+        ...base,
+        type: 'options',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!Array.isArray(value)) {
+                return null;
+            }
+
+            return generateMultiOptionsLabel(translate, items, value);
+        }
+    };
+}
+
+function parseOptionsAsync({fetchOptions, ...base}: FluxFilterOptionsAsyncSpec): FluxFilterOptionsEntry {
+    const translate = useTranslate();
+
+    return {
+        ...base,
+        type: 'options',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!Array.isArray(value)) {
+                return null;
+            }
+
+            const items = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
+
+            return generateMultiOptionsLabel(translate, items, value);
+        }
+    };
+}
+
+function parseRange(base: FluxFilterRangeSpec): FluxFilterRangeEntry {
+    return {
+        ...base,
+        type: 'range',
+
+        async getValueLabel(value): Promise<string | null> {
+            if (!value || !Array.isArray(value) || value.length !== 2) {
+                return null;
+            }
+
+            const [lower, upper] = value as number[];
+            const formatter = base.formatter ?? formatNumber;
+
+            return `${formatter(lower!)} – ${formatter(upper!)}`;
+        }
+    };
+}
+
+function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null {
+    const selected = options.filter(o => values.includes(o.value)).length;
+
+    if (selected <= 0) {
+        return null;
+    }
+
+    if (selected === 1) {
+        return options.find(o => values.includes(o.value))!.label;
+    }
+
+    return translate('flux.nSelected', {
+        n: selected
+    });
+}
+
+export type FluxFilterParsers = {
+    [K in keyof FluxFilterSpecMap]: (spec: FluxFilterSpecMap[K]) => FluxFilterEntryMap[K];
+};
+
+export const filterParsers: FluxFilterParsers = {
+    date: parseDate,
+    dateRange: parseDateRange,
+    option: parseOption,
+    optionAsync: parseOptionAsync,
+    options: parseOptions,
+    optionsAsync: parseOptionsAsync,
+    range: parseRange
+};
 
 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',
@@ -18,7 +20,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',
@@ -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',