@flux-ui/components 3.0.0-next.6 → 3.0.0-next.60

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, FluxFilterOptionsAsyncSpec, FluxFilterOptionsEntry, FluxFilterOptionSpec, FluxFilterOptionsSpec, FluxFilterRangeEntry, FluxFilterRangeSpec, FluxFilterSpecMap, FluxFilterValueSingle } from '@flux-ui/types';
+import { DateTime } from 'luxon';
+import { useTranslate } from '~flux/components/composable/private';
+import { createLabelForDateRange } from '~flux/components/util';
+import type { FluxTranslate } from './i18n';
+
+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',
@@ -32,6 +34,25 @@ export const english = {
     'flux.sortDescending': 'Descending',
     'flux.sortRemove': 'Remove sorting',
     'flux.today': 'Today',
+    'flux.selectMonth': 'Select month',
+    'flux.selectYear': 'Select year',
+    'flux.selectDate': 'Select date',
+    'flux.previousMonth': 'Previous month',
+    'flux.nextMonth': 'Next month',
+    'flux.previousYears': 'Previous years',
+    'flux.nextYears': 'Next years',
+    'flux.allDay': 'All day',
+    'flux.grabbedAnnounce': 'Item grabbed. Use arrow keys to move, Enter to drop, Escape to cancel.',
+    'flux.releasedAnnounce': 'Item released.',
+    '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',

package/src/data/iconRegistry.ts

@@ -9,8 +9,12 @@ export let iconRegistry: IconRegistry = {};
 
 export function fluxRegisterIcons(icons: Icons): void {
     iconRegistry = Object.keys(icons).reduce((acc: IconRegistry, key: string) => {
+        if (!icons[key]) {
+            return acc;
+        }
+
         const {icon, iconName} = icons[key];
-        acc[iconName] = icon;
+        acc[iconName as FluxIconName] = icon;
 
         if (Array.isArray(icon[2])) {
             icon[2].forEach((iconName: string) => acc[iconName as FluxIconName] = icon);

package/src/data/store.ts

@@ -1,6 +1,5 @@
 import type { FluxAlertObject, FluxConfirmObject, FluxPromptObject, FluxSnackbarObject, FluxTooltipObject } from '@flux-ui/types';
-import type { ComputedRef } from 'vue';
-import { computed, reactive } from 'vue';
+import { computed, reactive, type ComputedRef } from 'vue';
 
 export type FluxState = {
     dialogCount: number;
@@ -20,7 +19,7 @@ export type FluxStore = FluxState & {
     addPrompt(spec: Omit<FluxPromptObject, 'id'>): number;
     addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number;
     addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number;
-    registerDialog(): VoidFunction;
+    registerDialog(): [number, VoidFunction];
     removeAlert(id: number): void;
     removeConfirm(id: number): void;
     removePrompt(id: number): void;
@@ -46,11 +45,10 @@ const state = reactive<FluxState>({
     tooltips: []
 });
 
-let alertId: number = 0;
-let tooltipId: number = 0;
+let nextId: number = 0;
 
 export function addAlert(spec: Omit<FluxAlertObject, 'id'>): number {
-    const id = ++alertId;
+    const id = ++nextId;
 
     state.alerts.push({
         id,
@@ -61,7 +59,7 @@ export function addAlert(spec: Omit<FluxAlertObject, 'id'>): number {
 }
 
 export function addConfirm(spec: Omit<FluxConfirmObject, 'id'>): number {
-    const id = ++alertId;
+    const id = ++nextId;
 
     state.confirms.push({
         id,
@@ -72,7 +70,7 @@ export function addConfirm(spec: Omit<FluxConfirmObject, 'id'>): number {
 }
 
 export function addPrompt(spec: Omit<FluxPromptObject, 'id'>): number {
-    const id = ++alertId;
+    const id = ++nextId;
 
     state.prompts.push({
         id,
@@ -83,7 +81,7 @@ export function addPrompt(spec: Omit<FluxPromptObject, 'id'>): number {
 }
 
 export function addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number {
-    const id = ++alertId;
+    const id = ++nextId;
 
     state.snackbars.unshift({
         id,
@@ -94,7 +92,7 @@ export function addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number {
 }
 
 export function addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number {
-    const id = ++tooltipId;
+    const id = ++nextId;
 
     state.tooltips.push({
         id,
@@ -104,43 +102,80 @@ export function addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number {
     return id;
 }
 
-export function registerDialog(): VoidFunction {
-    ++state.dialogCount;
-    return () => --state.dialogCount;
+export function registerDialog(): [number, VoidFunction] {
+    return [
+        ++state.dialogCount,
+        () => --state.dialogCount
+    ];
 }
 
 export function removeAlert(id: number): void {
     const index = state.alerts.findIndex(a => a.id === id);
+
+    if (index < 0) {
+        return;
+    }
+
     state.alerts.splice(index, 1);
 }
 
 export function removeConfirm(id: number): void {
     const index = state.confirms.findIndex(c => c.id === id);
+
+    if (index < 0) {
+        return;
+    }
+
     state.confirms.splice(index, 1);
 }
 
 export function removePrompt(id: number): void {
     const index = state.prompts.findIndex(c => c.id === id);
+
+    if (index < 0) {
+        return;
+    }
+
     state.prompts.splice(index, 1);
 }
 
 export function removeSnackbar(id: number): void {
     const index = state.snackbars.findIndex(s => s.id === id);
+
+    if (index < 0) {
+        return;
+    }
+
     state.snackbars.splice(index, 1);
 }
 
 export function removeTooltip(id: number): void {
     const index = state.tooltips.findIndex(t => t.id === id);
+
+    if (index < 0) {
+        return;
+    }
+
     state.tooltips.splice(index, 1);
 }
 
 export function updateSnackbar(id: number, spec: Partial<Omit<FluxSnackbarObject, 'id'>>): void {
     const index = state.snackbars.findIndex(s => s.id === id);
+
+    if (index < 0) {
+        return;
+    }
+
     Object.assign(state.snackbars[index], spec);
 }
 
 export function updateTooltip(id: number, spec: Partial<Omit<FluxTooltipObject, 'id'>>): void {
     const index = state.tooltips.findIndex(s => s.id === id);
+
+    if (index < 0) {
+        return;
+    }
+
     Object.assign(state.tooltips[index], spec);
 }
 
@@ -225,9 +260,10 @@ export function useFluxStore(): FluxStore {
     };
 }
 
-type Fn = (...args: any[]) => any;
-type FnSync<T extends Fn> = (...args: Parameters<T>) => void;
+type Fn = (...args: never[]) => unknown;
 
-function promiseToVoidFunction<T extends Fn>(fn: T): FnSync<T> {
-    return (...args: any[]) => fn(...args);
+function promiseToVoidFunction<T extends Fn>(fn: T): (...args: Parameters<T>) => void {
+    return (...args) => {
+        fn(...args);
+    };
 }