@flux-ui/components 3.0.0-next.4 → 3.0.0-next.40

package/dist/composable/private/useCommandPalette.d.ts

@@ -0,0 +1,38 @@
+import { FluxCommandSource, FluxCommandSourceItem, FluxCommandSubAction } from '@flux-ui/types';
+import { Ref } from 'vue';
+export type CommandPaletteResultItem = {
+    readonly globalIndex: number;
+    readonly sourceKey: string;
+    readonly sourceLabel: string;
+    readonly item: FluxCommandSourceItem;
+};
+export type CommandPaletteGroup = {
+    readonly sourceKey: string;
+    readonly sourceLabel: string;
+    readonly startIndex: number;
+    readonly items: CommandPaletteResultItem[];
+};
+export declare function useCommandPalette(params: {
+    readonly sources: Ref<FluxCommandSource[]>;
+    readonly itemRefs: Readonly<Ref<Array<{
+        readonly $el: HTMLElement;
+    }> | null | undefined>>;
+}): {
+    readonly search: Ref<string>;
+    readonly activeTab: Ref<string | null>;
+    readonly highlightedIndex: Ref<number>;
+    readonly isLoading: Ref<boolean>;
+    readonly isTransitioningBack: Ref<boolean>;
+    readonly subActionTarget: Ref<FluxCommandSourceItem | null>;
+    readonly filteredItems: Ref<CommandPaletteResultItem[]>;
+    readonly groupedItems: Ref<CommandPaletteGroup[]>;
+    readonly subActions: Ref<FluxCommandSubAction[]>;
+    readonly activeTabSource: Ref<FluxCommandSource | null>;
+    readonly tabs: Ref<FluxCommandSource[]>;
+    readonly totalItems: Ref<number>;
+    setSearch: (value: string) => void;
+    setActiveTab: (key: string | null) => void;
+    enterSubActions: (item: FluxCommandSourceItem) => void;
+    onKeyNavigate: (evt: KeyboardEvent, onClose: () => void, onActivate: (item: FluxCommandSourceItem) => void) => void;
+    reset: () => void;
+};

package/dist/composable/private/useDateFlyout.d.ts

@@ -0,0 +1,10 @@
+import { ModelRef, Ref } from 'vue';
+type FlyoutLike = {
+    close(): void;
+};
+type UseDateFlyoutOptions<T> = {
+    compareKey?(value: T | null): string | number | null | undefined;
+    transformIn?(value: T | null): T | null;
+};
+export default function <T>(modelValue: ModelRef<T | null>, flyoutRef: Readonly<Ref<FlyoutLike | null>>, options?: UseDateFlyoutOptions<T>): Ref<T | null>;
+export {};

package/dist/composable/private/useDropdownPopup.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPublicInstance, Ref } from 'vue';
+export type UseDropdownPopupOptions = {
+    readonly anchorRef: Readonly<Ref<ComponentPublicInstance | null | undefined>>;
+    readonly popupRef: Readonly<Ref<ComponentPublicInstance | null | undefined>>;
+    readonly focusElement: Readonly<Ref<HTMLElement | null | undefined>>;
+    readonly disabled?: Readonly<Ref<boolean>>;
+    readonly readonly?: Readonly<Ref<boolean>>;
+    readonly onOpen?: () => void;
+    readonly onClose?: () => void;
+};
+export type UseDropdownPopupReturn = {
+    readonly isOpen: Ref<boolean>;
+    readonly open: () => void;
+    readonly close: () => void;
+    readonly toggle: () => void;
+    readonly focusAnchor: () => void;
+    readonly onKeyDownBase: (evt: KeyboardEvent) => boolean;
+};
+/**
+ * Shared dropdown-popup infrastructure for select-like components. Manages:
+ * - open/close state
+ * - click-outside (close when clicking outside popup + anchor)
+ * - focus-back-to-anchor on close
+ * - focus-the-inner-focus-element on open
+ * - Escape/Tab keyboard handling
+ */
+export default function useDropdownPopup(options: UseDropdownPopupOptions): UseDropdownPopupReturn;

package/dist/composable/private/useFilterOption.d.ts

@@ -0,0 +1,12 @@
+import { FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
+import { ComputedRef } from 'vue';
+export type FilterOptionSingle = {
+    readonly currentValue: ComputedRef<FluxFilterValueSingle>;
+    onSelect(value: FluxFilterValue): void;
+};
+export type FilterOptionMulti = {
+    readonly currentValue: ComputedRef<FluxFilterValueSingle[]>;
+    onSelect(value: FluxFilterValueSingle): void;
+};
+export declare function useFilterOptionSingle(name: string): FilterOptionSingle;
+export declare function useFilterOptionMulti(name: string): FilterOptionMulti;

package/dist/composable/private/useFormSelect.d.ts

@@ -1,8 +1,7 @@
-import { FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectOptions, FluxFormSelectValue } from '@flux-ui/types';
-import { MaybeRef, Ref } from 'vue';
-export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: MaybeRef<FluxFormSelectEntry[]>, searchQuery?: Ref<string>): {
-    groups: import('vue').ComputedRef<FluxFormSelectOptions[]>;
-    selected: import('vue').ComputedRef<FluxFormSelectOption[]>;
-    values: import('vue').ComputedRef<import('@flux-ui/types').FluxFormSelectValueSingle[]>;
+import { FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectOptions, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
+import { Ref, ComputedRef } from 'vue';
+export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: Ref<FluxFormSelectEntry[]>, searchQuery?: Ref<string>): {
+    groups: ComputedRef<FluxFormSelectOptions[]>;
+    selected: ComputedRef<FluxFormSelectOption[]>;
+    values: ComputedRef< FluxFormSelectValueSingle[]>;
 };
-//# sourceMappingURL=useFormSelect.d.ts.map

package/dist/composable/private/useTranslate.d.ts

@@ -1,4 +1,3 @@
 import { FluxTranslate } from '../../data';
 declare const _default: () => FluxTranslate;
 export default _default;
-//# sourceMappingURL=useTranslate.d.ts.map

package/dist/composable/private/useTreeView.d.ts

@@ -0,0 +1,28 @@
+import { FluxColor, FluxIconName } from '@flux-ui/types';
+import { ComputedRef, Ref } from 'vue';
+export type TreeBaseOption = {
+    readonly id: string | number;
+    readonly label: string;
+    readonly icon?: FluxIconName;
+    readonly children?: TreeBaseOption[];
+};
+export type TreeFlatNode<TOption extends TreeBaseOption = TreeBaseOption> = TOption & {
+    readonly depth: number;
+    readonly isLast: boolean;
+    readonly lineGuides: boolean[];
+};
+export declare const FLUX_COLORS: FluxColor[];
+export declare const INITIAL_HIGHLIGHTED_INDEX = -1;
+export declare function flattenVisible<TOption extends TreeBaseOption>(nodes: TOption[], depth: number, expanded: Set<string | number>, parentGuides?: boolean[]): TreeFlatNode<TOption>[];
+export declare function flattenAll<TOption extends TreeBaseOption>(nodes: TOption[], depth?: number): TreeFlatNode<TOption>[];
+export declare function getLevelColor(depth: number, levelColors?: (FluxColor | string)[]): string | undefined;
+export declare function useTreeView<TNode extends TreeFlatNode>(params: {
+    readonly expandedIds: Ref<Set<string | number>>;
+    readonly nodeElementRefs: Readonly<Ref<HTMLDivElement[] | null | undefined>>;
+    readonly visibleNodes: ComputedRef<TNode[]>;
+}): {
+    readonly highlightedIndex: Ref<number>;
+    toggleExpand: (nodeId: string | number) => void;
+    onExpandClick: (node: TNode, evt: MouseEvent) => void;
+    onKeyNavigate: (evt: KeyboardEvent, onActivate: (node: TNode) => void) => boolean;
+};

package/dist/composable/useAdaptiveGroupInjection.d.ts

@@ -0,0 +1,2 @@
+import { FluxAdaptiveGroupInjection } from '../data';
+export default function (): FluxAdaptiveGroupInjection;

package/dist/composable/useBreakpoints.d.ts

@@ -5,6 +5,5 @@ export default function (): {
     sm: Ref<boolean, boolean>;
     md: Ref<boolean, boolean>;
     lg: Ref<boolean, boolean>;
-    currentBreakpoint: Ref<"xl" | "xs" | "sm" | "md" | "lg" | null, "xl" | "xs" | "sm" | "md" | "lg" | null>;
+    currentBreakpoint: Ref<"xl" | "xs" | "sm" | "md" | "lg", "xl" | "xs" | "sm" | "md" | "lg">;
 };
-//# sourceMappingURL=useBreakpoints.d.ts.map

package/dist/composable/useDisabled.d.ts

@@ -1,3 +1,2 @@
-import { Ref } from 'vue';
-export default function (componentDisabled: Ref<boolean>): import('vue').ComputedRef<boolean>;
-//# sourceMappingURL=useDisabled.d.ts.map
+import { Ref, ComputedRef } from 'vue';
+export default function (componentDisabled: Ref<boolean>): ComputedRef<boolean>;

package/dist/composable/useDisabledInjection.d.ts

@@ -1,2 +1,2 @@
-export default function (): import('vue').Ref<boolean, boolean>;
-//# sourceMappingURL=useDisabledInjection.d.ts.map
+import { Ref } from 'vue';
+export default function (): Ref<boolean, boolean>;

package/dist/composable/useExpandableGroupInjection.d.ts

@@ -1,2 +1,2 @@
-export default function (): import('../data').FluxExpandableGroupInjection;
-//# sourceMappingURL=useExpandableGroupInjection.d.ts.map
+import { FluxExpandableGroupInjection } from '../data';
+export default function (): FluxExpandableGroupInjection;

package/dist/composable/useFilterInjection.d.ts

@@ -1,2 +1,2 @@
-export default function (): import('../data').FluxFilterInjection;
-//# sourceMappingURL=useFilterInjection.d.ts.map
+import { FluxFilterInjection } from '../data';
+export default function (): FluxFilterInjection;

package/dist/composable/useFlyoutInjection.d.ts

@@ -1,6 +1,2 @@
-export default function (): {
-    isClosing: import('vue').Ref<boolean, boolean>;
-    isOpen: import('vue').Ref<boolean, boolean>;
-    isOpening: import('vue').Ref<boolean, boolean>;
-};
-//# sourceMappingURL=useFlyoutInjection.d.ts.map
+import { FluxFlyoutInjection } from '../data';
+export default function (): FluxFlyoutInjection;

package/dist/composable/useFormFieldInjection.d.ts

@@ -1,2 +1,2 @@
-export default function (): import('../data').FluxFormFieldInjection;
-//# sourceMappingURL=useFormFieldInjection.d.ts.map
+import { FluxFormFieldInjection } from '../data';
+export default function (): FluxFormFieldInjection;

package/dist/composable/useTableInjection.d.ts

@@ -1,7 +1,2 @@
-export default function (): {
-    isBordered: boolean;
-    isHoverable: boolean;
-    isSeparated: boolean;
-    isStriped: boolean;
-};
-//# sourceMappingURL=useTableInjection.d.ts.map
+import { FluxTableInjection } from '../data';
+export default function (): FluxTableInjection;

package/dist/composable/useTooltipInjection.d.ts

@@ -0,0 +1,3 @@
+export default function (): {
+    calculate: () => any;
+};

package/dist/data/di.d.ts

@@ -1,11 +1,23 @@
 import { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
 import { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
+export declare const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection>;
 export declare const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>>;
 export declare const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection>;
 export declare const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection>;
 export declare const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection>;
 export declare const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection>;
 export declare const FluxTableInjectionKey: InjectionKey<FluxTableInjection>;
+export declare const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection>;
+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;
@@ -33,4 +45,6 @@ export type FluxTableInjection = {
     readonly isSeparated: boolean;
     readonly isStriped: boolean;
 };
-//# sourceMappingURL=di.d.ts.map
+export type FluxTooltipInjection = {
+    calculate(): void;
+};

package/dist/data/filter.d.ts

@@ -1,4 +1,7 @@
-import { FluxFilterOptionHeader, FluxFilterOptionItem } from '@flux-ui/types';
+import { FluxFilterEntryMap, FluxFilterOptionHeader, FluxFilterOptionItem, FluxFilterSpecMap } from '@flux-ui/types';
+export type FluxFilterParsers = {
+    [K in keyof FluxFilterSpecMap]: (spec: FluxFilterSpecMap[K]) => FluxFilterEntryMap[K];
+};
+export declare const filterParsers: FluxFilterParsers;
 export declare function isFluxFilterOptionHeader(obj: object): obj is FluxFilterOptionHeader;
 export declare function isFluxFilterOptionItem(obj: object): obj is FluxFilterOptionItem;
-//# sourceMappingURL=filter.d.ts.map

package/dist/data/helper.d.ts

@@ -1,4 +1,3 @@
 import { FluxFormSelectGroup, FluxFormSelectOption } from '@flux-ui/types';
 export declare function isFluxFormSelectGroup(item: unknown): item is FluxFormSelectGroup;
 export declare function isFluxFormSelectOption(item: unknown): item is FluxFormSelectOption;
-//# sourceMappingURL=helper.d.ts.map

package/dist/data/i18n.d.ts

@@ -3,9 +3,11 @@ export type FluxTranslation = keyof typeof english;
 export declare const english: {
     readonly 'flux.back': "Back";
     readonly 'flux.cancel': "Cancel";
+    readonly 'flux.close': "Close";
     readonly 'flux.comingSoon': "Coming soon";
     readonly 'flux.continue': "Continue";
     readonly 'flux.customPeriod': "Custom period";
+    readonly 'flux.delete': "Delete";
     readonly 'flux.filter': "Filter";
     readonly 'flux.filterReset': "Reset filters";
     readonly 'flux.justNow': "Just now";
@@ -17,7 +19,7 @@ export declare const english: {
     readonly 'flux.preview': "Preview";
     readonly 'flux.previewClose': "Close preview";
     readonly 'flux.displayingOf': "{from}–{to} of {total}";
-    readonly 'flux.rowsPerPage': "Rows per page";
+    readonly 'flux.showN': "Show {n}";
     readonly 'flux.next': "Next";
     readonly 'flux.noItems': "There are no items (left).";
     readonly 'flux.pagination': "Pagination";
@@ -31,6 +33,21 @@ export declare const english: {
     readonly 'flux.sortDescending': "Descending";
     readonly 'flux.sortRemove': "Remove sorting";
     readonly 'flux.today': "Today";
+    readonly 'flux.selectMonth': "Select month";
+    readonly 'flux.selectYear': "Select year";
+    readonly 'flux.previousMonth': "Previous month";
+    readonly 'flux.nextMonth': "Next month";
+    readonly 'flux.previousYears': "Previous years";
+    readonly 'flux.nextYears': "Next years";
+    readonly 'flux.goToPage': "Go to page {page}";
+    readonly 'flux.pinDigit': "Digit {index} of {total}";
+    readonly 'flux.dropFilesOrClick': "Drop files here or click to upload";
+    readonly 'flux.colorSaturationBrightness': "Color saturation and brightness";
+    readonly 'flux.customColor': "Custom color";
+    readonly 'flux.hue': "Hue";
+    readonly 'flux.opacity': "Opacity";
+    readonly 'flux.lowerBound': "Lower bound";
+    readonly 'flux.upperBound': "Upper bound";
     readonly 'flux.galleryPlaceholderButton': "Pick image";
     readonly 'flux.galleryPlaceholderMessage': "Drop an image here or click the button to upload...";
     readonly 'flux.galleryPlaceholderTitle': "Gallery";
@@ -52,4 +69,3 @@ export declare const english: {
     readonly 'flux.timezoneIndian': "Indian";
     readonly 'flux.timezonePacific': "Pacific";
 };
-//# sourceMappingURL=i18n.d.ts.map

package/dist/data/iconRegistry.d.ts

@@ -8,4 +8,3 @@ type Icons = Record<string, IconDefinition>;
 export declare let iconRegistry: IconRegistry;
 export declare function fluxRegisterIcons(icons: Icons): void;
 export {};
-//# sourceMappingURL=iconRegistry.d.ts.map

package/dist/data/index.d.ts

@@ -5,4 +5,3 @@ export * from './i18n';
 export * from './iconRegistry';
 export * from './store';
 export * as inputMask from './inputMask';
-//# sourceMappingURL=index.d.ts.map

package/dist/data/inputMask.d.ts

@@ -2,4 +2,3 @@ import { InputMask } from 'imask';
 export declare function bic(element: HTMLInputElement): InputMask<{}>;
 export declare function iban(element: HTMLInputElement): InputMask<{}>;
 export declare function vat(element: HTMLInputElement): InputMask<{}>;
-//# sourceMappingURL=inputMask.d.ts.map

package/dist/data/store.d.ts

@@ -16,7 +16,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;
@@ -39,7 +39,7 @@ export declare function addConfirm(spec: Omit<FluxConfirmObject, 'id'>): number;
 export declare function addPrompt(spec: Omit<FluxPromptObject, 'id'>): number;
 export declare function addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number;
 export declare function addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number;
-export declare function registerDialog(): VoidFunction;
+export declare function registerDialog(): [number, VoidFunction];
 export declare function removeAlert(id: number): void;
 export declare function removeConfirm(id: number): void;
 export declare function removePrompt(id: number): void;
@@ -54,4 +54,3 @@ export declare function showSnackbar({ duration, ...spec }: Omit<FluxSnackbarObj
     readonly duration?: number;
 }): void;
 export declare function useFluxStore(): FluxStore;
-//# sourceMappingURL=store.d.ts.map

package/dist/data/timeZones.d.ts

@@ -0,0 +1,3 @@
+import { FluxTranslation } from './i18n';
+export declare const TIME_ZONES: readonly string[];
+export declare const TIME_ZONE_GROUP_ORDER: readonly FluxTranslation[];