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

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

package/src/data/store.ts

@@ -46,11 +46,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 +60,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 +71,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 +82,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 +93,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,
@@ -113,36 +112,71 @@ export function registerDialog(): [number, VoidFunction] {
 
 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);
 }
 
@@ -227,9 +261,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);
+    };
 }