@flux-ui/components 3.0.0-next.0

package/src/data/helper.ts

@@ -0,0 +1,9 @@
+import type { FluxFormSelectGroup, FluxFormSelectOption } from '@flux-ui/types';
+
+export function isFluxFormSelectGroup(item: unknown): item is FluxFormSelectGroup {
+    return item !== null && typeof item === 'object' && !('value' in item);
+}
+
+export function isFluxFormSelectOption(item: unknown): item is FluxFormSelectOption {
+    return item !== null && typeof item === 'object' && 'value' in item;
+}

package/src/data/i18n.ts

@@ -0,0 +1,55 @@
+export type FluxTranslate = (key: FluxTranslation, params?: Record<string, string | number>) => string;
+export type FluxTranslation = keyof typeof english;
+
+export const english = {
+    'flux.back': 'Back',
+    'flux.cancel': 'Cancel',
+    'flux.comingSoon': 'Coming soon',
+    'flux.continue': 'Continue',
+    'flux.customPeriod': 'Custom period',
+    'flux.filter': 'Filter',
+    'flux.filterReset': 'Reset filters',
+    'flux.justNow': 'Just now',
+    'flux.max': 'Max',
+    'flux.min': 'Min',
+    'flux.nSelected': '{n} selected',
+    'flux.ok': 'Ok',
+    'flux.optional': 'Optional',
+    'flux.preview': 'Preview',
+    'flux.previewClose': 'Close preview',
+    'flux.displayingOf': '{from}–{to} of {total}',
+    'flux.rowsPerPage': 'Rows per page',
+    'flux.next': 'Next',
+    'flux.noItems': 'There are no items (left).',
+    'flux.pagination': 'Pagination',
+    'flux.paginationNavigateTitle': 'Navigate',
+    'flux.paginationNavigateMessage': 'Please provide the desired page number you wish to navigate to.',
+    'flux.paginationNavigatePage': 'Page',
+    'flux.previous': 'Previous',
+    'flux.search': 'Search...',
+    'flux.sort': 'Sort',
+    'flux.sortAscending': 'Ascending',
+    'flux.sortDescending': 'Descending',
+    'flux.sortRemove': 'Remove sorting',
+    'flux.today': 'Today',
+    'flux.galleryPlaceholderButton': 'Pick image',
+    'flux.galleryPlaceholderMessage': 'Drop an image here or click the button to upload...',
+    'flux.galleryPlaceholderTitle': 'Gallery',
+    'flux.timezoneEurope': 'Europe',
+    'flux.timezoneAmerica': 'America',
+    'flux.timezoneUs': 'United States',
+    'flux.timezoneAustralia': 'Australia',
+    'flux.timezoneCanada': 'Canada',
+    'flux.timezoneMexico': 'Mexico',
+    'flux.timezoneAfrica': 'Africa',
+    'flux.timezoneAntarctica': 'Antarctica',
+    'flux.timezoneArctic': 'Arctic',
+    'flux.timezoneAsia': 'Asia',
+    'flux.timezoneAtlantic': 'Atlantic',
+    'flux.timezoneBrazil': 'Brazil',
+    'flux.timezoneChile': 'Chile',
+    'flux.timezoneEtc': 'ETC',
+    'flux.timezoneOther': 'Other',
+    'flux.timezoneIndian': 'Indian',
+    'flux.timezonePacific': 'Pacific'
+} as const;

package/src/data/iconRegistry.ts

@@ -0,0 +1,21 @@
+import type { FluxIconName } from '@flux-ui/types';
+import type { IconDefinition, IconPathData } from '@fortawesome/fontawesome-common-types';
+
+type Icon = [number, number, string[], string, IconPathData];
+type IconRegistry = Partial<{ [key in FluxIconName]: Icon; }>;
+type Icons = Record<string, IconDefinition>;
+
+export let iconRegistry: IconRegistry = {};
+
+export function fluxRegisterIcons(icons: Icons): void {
+    iconRegistry = Object.keys(icons).reduce((acc: IconRegistry, key: string) => {
+        const {icon, iconName} = icons[key];
+        acc[iconName] = icon;
+
+        if (Array.isArray(icon[2])) {
+            icon[2].forEach((iconName: string) => acc[iconName as FluxIconName] = icon);
+        }
+
+        return acc;
+    }, {});
+}

package/src/data/index.ts

@@ -0,0 +1,8 @@
+export * from './di';
+export * from './filter';
+export * from './helper';
+export * from './i18n';
+export * from './iconRegistry';
+export * from './store';
+
+export * as inputMask from './inputMask';

package/src/data/inputMask.ts

@@ -0,0 +1,34 @@
+import type { InputMask } from 'imask';
+import imask from 'imask/holder';
+
+import 'imask/masked/pattern';
+
+export function bic(element: HTMLInputElement): InputMask<{}> {
+    return imask(element, {
+        definitions: {
+            '#': /[A-Z0-9]/
+        },
+        mask: 'aaaaaa##[000]',
+        prepareChar: (str: string) => str.toUpperCase()
+    });
+}
+
+export function iban(element: HTMLInputElement): InputMask<{}> {
+    return imask(element, {
+        definitions: {
+            '#': /[A-Z0-9]/
+        },
+        mask: 'aa00 #### 0000 0000[ 0000 0000 0000 0000]',
+        prepareChar: (str: string) => str.toUpperCase()
+    });
+}
+
+export function vat(element: HTMLInputElement): InputMask<{}> {
+    return imask(element, {
+        definitions: {
+            '#': /[A-Z0-9]/
+        },
+        mask: 'aa########[#####]',
+        prepareChar: (str: string) => str.toUpperCase()
+    });
+}

package/src/data/store.ts

@@ -0,0 +1,233 @@
+import type { FluxAlertObject, FluxConfirmObject, FluxPromptObject, FluxSnackbarObject, FluxTooltipObject } from '@flux-ui/types';
+import type { ComputedRef } from 'vue';
+import { computed, reactive } from 'vue';
+
+export type FluxState = {
+    dialogCount: number;
+    readonly alerts: FluxAlertObject[];
+    readonly confirms: FluxConfirmObject[];
+    readonly prompts: FluxPromptObject[];
+    readonly snackbars: FluxSnackbarObject[];
+    readonly tooltips: FluxTooltipObject[];
+};
+
+export type FluxStore = FluxState & {
+    readonly inertMain: ComputedRef<boolean>;
+    readonly tooltip: ComputedRef<FluxTooltipObject | null>;
+
+    addAlert(spec: Omit<FluxAlertObject, 'id'>): number;
+    addConfirm(spec: Omit<FluxConfirmObject, 'id'>): number;
+    addPrompt(spec: Omit<FluxPromptObject, 'id'>): number;
+    addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number;
+    addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number;
+    registerDialog(): VoidFunction;
+    removeAlert(id: number): void;
+    removeConfirm(id: number): void;
+    removePrompt(id: number): void;
+    removeSnackbar(id: number): void;
+    removeTooltip(id: number): void;
+    showAlert(spec: Omit<FluxAlertObject, 'id' | 'onClose'>): Promise<void>;
+    showConfirm(spec: Omit<FluxConfirmObject, 'id' | 'onCancel' | 'onConfirm'>): Promise<boolean>;
+    showPrompt(spec: Omit<FluxPromptObject, 'id' | 'onCancel' | 'onConfirm'>): Promise<string | false>;
+    showSnackbar({duration, ...spec}: Omit<FluxSnackbarObject, 'id'> & { readonly duration?: number; }): Promise<void> | void;
+    updateSnackbar(id: number, spec: Partial<Omit<FluxSnackbarObject, 'id'>>): void;
+    updateTooltip(id: number, spec: Partial<Omit<FluxTooltipObject, 'id'>>): void;
+    showSnackbarSync({duration, ...spec}: Omit<FluxSnackbarObject, 'id'> & { readonly duration?: number; }): void;
+};
+
+const DEFAULT_SNACKBAR_DURATION = 6000;
+
+const state = reactive<FluxState>({
+    dialogCount: 0,
+    alerts: [],
+    confirms: [],
+    prompts: [],
+    snackbars: [],
+    tooltips: []
+});
+
+let alertId: number = 0;
+let tooltipId: number = 0;
+
+export function addAlert(spec: Omit<FluxAlertObject, 'id'>): number {
+    const id = ++alertId;
+
+    state.alerts.push({
+        id,
+        ...spec
+    });
+
+    return id;
+}
+
+export function addConfirm(spec: Omit<FluxConfirmObject, 'id'>): number {
+    const id = ++alertId;
+
+    state.confirms.push({
+        id,
+        ...spec
+    });
+
+    return id;
+}
+
+export function addPrompt(spec: Omit<FluxPromptObject, 'id'>): number {
+    const id = ++alertId;
+
+    state.prompts.push({
+        id,
+        ...spec
+    });
+
+    return id;
+}
+
+export function addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number {
+    const id = ++alertId;
+
+    state.snackbars.unshift({
+        id,
+        ...spec
+    });
+
+    return id;
+}
+
+export function addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number {
+    const id = ++tooltipId;
+
+    state.tooltips.push({
+        id,
+        ...spec
+    });
+
+    return id;
+}
+
+export function registerDialog(): VoidFunction {
+    ++state.dialogCount;
+    return () => --state.dialogCount;
+}
+
+export function removeAlert(id: number): void {
+    const index = state.alerts.findIndex(a => a.id === id);
+    state.alerts.splice(index, 1);
+}
+
+export function removeConfirm(id: number): void {
+    const index = state.confirms.findIndex(c => c.id === id);
+    state.confirms.splice(index, 1);
+}
+
+export function removePrompt(id: number): void {
+    const index = state.prompts.findIndex(c => c.id === id);
+    state.prompts.splice(index, 1);
+}
+
+export function removeSnackbar(id: number): void {
+    const index = state.snackbars.findIndex(s => s.id === id);
+    state.snackbars.splice(index, 1);
+}
+
+export function removeTooltip(id: number): void {
+    const index = state.tooltips.findIndex(t => t.id === id);
+    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);
+    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);
+    Object.assign(state.tooltips[index], spec);
+}
+
+export async function showAlert(spec: Omit<FluxAlertObject, 'id' | 'onClose'>): Promise<void> {
+    return new Promise(resolve => {
+        const id = addAlert({
+            ...spec,
+            onClose(): void {
+                resolve();
+                removeAlert(id);
+            }
+        });
+    });
+}
+
+export async function showConfirm(spec: Omit<FluxConfirmObject, 'id' | 'onCancel' | 'onConfirm'>): Promise<boolean> {
+    return new Promise(resolve => {
+        const id = addConfirm({
+            ...spec,
+            onCancel(): void {
+                resolve(false);
+                removeConfirm(id);
+            },
+            onConfirm(): void {
+                resolve(true);
+                removeConfirm(id);
+            }
+        });
+    });
+}
+
+export async function showPrompt(spec: Omit<FluxPromptObject, 'id' | 'onCancel' | 'onConfirm'>): Promise<string | false> {
+    return new Promise(resolve => {
+        const id = addPrompt({
+            ...spec,
+            onCancel(): void {
+                resolve(false);
+                removePrompt(id);
+            },
+            onConfirm(text: string): void {
+                resolve(text);
+                removePrompt(id);
+            }
+        });
+    });
+}
+
+export function showSnackbar({duration, ...spec}: Omit<FluxSnackbarObject, 'id'> & { readonly duration?: number; }): void;
+
+export async function showSnackbar({duration, ...spec}: Omit<FluxSnackbarObject, 'id'> & { readonly duration?: number; }): Promise<void> {
+    const id = addSnackbar(spec);
+    await new Promise(resolve => setTimeout(() => requestAnimationFrame(resolve), duration ?? DEFAULT_SNACKBAR_DURATION));
+    removeSnackbar(id);
+}
+
+export function useFluxStore(): FluxStore {
+    const inertMain = computed(() => state.dialogCount > 0);
+    const tooltip = computed(() => state.tooltips[state.tooltips.length - 1] || null);
+
+    return {
+        ...state,
+        inertMain,
+        tooltip,
+        addAlert,
+        addConfirm,
+        addPrompt,
+        addSnackbar,
+        addTooltip,
+        registerDialog,
+        removeAlert,
+        removeConfirm,
+        removePrompt,
+        removeSnackbar,
+        removeTooltip,
+        showAlert,
+        showConfirm,
+        showPrompt,
+        showSnackbar,
+        updateSnackbar,
+        updateTooltip,
+        showSnackbarSync: promiseToVoidFunction(showSnackbar)
+    };
+}
+
+type Fn = (...args: any[]) => any;
+type FnSync<T extends Fn> = (...args: Parameters<T>) => void;
+
+function promiseToVoidFunction<T extends Fn>(fn: T): FnSync<T> {
+    return (...args: any[]) => fn(...args);
+}

package/src/image/avatar-mask.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
+    <path d="M40.4 29a21 21 0 0 0 1.6-8 21 21 0 1 0-13 19.4A8 8 0 0 1 40.5 29Z"/>
+</svg>

package/src/index.ts

@@ -0,0 +1,25 @@
+import './css/index.scss';
+
+export * from './component';
+export * from './composable';
+export * from './transition';
+
+export {
+    fluxRegisterIcons,
+    isFluxFormSelectGroup,
+    isFluxFormSelectOption,
+    showAlert,
+    showConfirm,
+    showPrompt,
+    showSnackbar,
+    useFluxStore
+} from './data';
+
+export type {
+    FluxExpandableGroupInjection,
+    FluxFilterInjection,
+    FluxFlyoutInjection,
+    FluxFormFieldInjection,
+    FluxState,
+    FluxStore
+} from './data';

package/src/transition/FluxAutoHeightTransition.vue

@@ -0,0 +1,59 @@
+<template>
+    <Transition
+        @after-enter="afterEnter"
+        @enter="enter"
+        @leave="leave">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { isHtmlElement } from '@basmilius/utils';
+
+    function afterEnter(elm: Element): void {
+        if (!isHtmlElement(elm)) {
+            return;
+        }
+
+        elm.style.height = 'auto';
+    }
+
+    function enter(elm: Element): void {
+        if (!isHtmlElement(elm)) {
+            return;
+        }
+
+        const {width} = getComputedStyle(elm);
+        elm.style.position = 'absolute';
+        elm.style.width = width;
+        elm.style.height = 'auto';
+        elm.style.visibility = 'hidden';
+
+        const {height} = getComputedStyle(elm);
+        elm.style.removeProperty('position');
+        elm.style.removeProperty('width');
+        elm.style.removeProperty('visibility');
+        elm.style.height = '0';
+
+        // note: force repaint.
+        getComputedStyle(elm);
+
+        requestAnimationFrame(() => requestAnimationFrame(() => elm.style.height = height));
+    }
+
+    function leave(elm: Element): void {
+        if (!isHtmlElement(elm)) {
+            return;
+        }
+
+        const {height} = getComputedStyle(elm);
+        elm.style.height = height;
+
+        // note: force repaint.
+        getComputedStyle(elm);
+
+        requestAnimationFrame(() => requestAnimationFrame(() => elm.style.height = '0'));
+    }
+</script>

package/src/transition/FluxAutoWidthTransition.vue

@@ -0,0 +1,59 @@
+<template>
+    <Transition
+        @after-enter="afterEnter"
+        @enter="enter"
+        @leave="leave">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { isHtmlElement } from '@basmilius/utils';
+
+    function afterEnter(elm: Element): void {
+        if (!isHtmlElement(elm)) {
+            return;
+        }
+
+        elm.style.width = 'auto';
+    }
+
+    function enter(elm: Element): void {
+        if (!isHtmlElement(elm)) {
+            return;
+        }
+
+        const {height} = getComputedStyle(elm);
+        elm.style.position = 'absolute';
+        elm.style.height = height;
+        elm.style.width = 'auto';
+        elm.style.visibility = 'hidden';
+
+        const {width} = getComputedStyle(elm);
+        elm.style.removeProperty('position');
+        elm.style.removeProperty('height');
+        elm.style.removeProperty('visibility');
+        elm.style.width = '0';
+
+        // note: force repaint.
+        getComputedStyle(elm);
+
+        requestAnimationFrame(() => requestAnimationFrame(() => elm.style.width = width));
+    }
+
+    function leave(elm: Element): void {
+        if (!isHtmlElement(elm)) {
+            return;
+        }
+
+        const {width} = getComputedStyle(elm);
+        elm.style.width = width;
+
+        // note: force repaint.
+        getComputedStyle(elm);
+
+        requestAnimationFrame(() => requestAnimationFrame(() => elm.style.width = '0'));
+    }
+</script>

package/src/transition/FluxBreakthroughTransition.vue

@@ -0,0 +1,23 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="isBack ? $style.breakthroughTransitionBackEnterActive : $style.breakthroughTransitionEnterActive"
+        :enter-from-class="isBack ? $style.breakthroughTransitionBackEnterFrom : $style.breakthroughTransitionEnterFrom"
+        :leave-active-class="isBack ? $style.breakthroughTransitionBackLeaveActive : $style.breakthroughTransitionLeaveActive"
+        :leave-to-class="isBack ? $style.breakthroughTransitionBackLeaveTo : $style.breakthroughTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Transition.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly isBack?: boolean;
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>

package/src/transition/FluxFadeTransition.vue

@@ -0,0 +1,24 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="$style.fadeTransitionEnterActive"
+        :enter-from-class="$style.fadeTransitionEnterFrom"
+        :enter-to-class="$style.fadeTransitionEnterTo"
+        :leave-active-class="$style.fadeTransitionLeaveActive"
+        :leave-from-class="$style.fadeTransitionLeaveFrom"
+        :leave-to-class="$style.fadeTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Transition.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>

package/src/transition/FluxOverlayTransition.vue

@@ -0,0 +1,22 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="$style.overlayTransitionEnterActive"
+        :enter-from-class="$style.overlayTransitionEnterFrom"
+        :leave-active-class="$style.overlayTransitionLeaveActive"
+        :leave-to-class="$style.overlayTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Overlay.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>

package/src/transition/FluxRouteTransition.vue

@@ -0,0 +1,23 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="isBack ? $style.routeTransitionBackEnterActive : $style.routeTransitionEnterActive"
+        :enter-from-class="isBack ? $style.routeTransitionBackEnterFrom : $style.routeTransitionEnterFrom"
+        :leave-active-class="isBack ? $style.routeTransitionBackLeaveActive : $style.routeTransitionLeaveActive"
+        :leave-to-class="isBack ? $style.routeTransitionBackLeaveTo : $style.routeTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Transition.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly isBack?: boolean;
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>

package/src/transition/FluxSlideOverTransition.vue

@@ -0,0 +1,22 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="$style.slideOverTransitionEnterActive"
+        :enter-from-class="$style.slideOverTransitionEnterFrom"
+        :leave-active-class="$style.slideOverTransitionLeaveActive"
+        :leave-to-class="$style.slideOverTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Overlay.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>

package/src/transition/FluxTooltipTransition.vue

@@ -0,0 +1,22 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="$style.tooltipTransitionEnterActive"
+        :enter-from-class="$style.tooltipTransitionEnterFrom"
+        :leave-active-class="$style.tooltipTransitionLeaveActive"
+        :leave-to-class="$style.tooltipTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Transition.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>

package/src/transition/FluxVerticalWindowTransition.vue

@@ -0,0 +1,23 @@
+<template>
+    <Transition
+        :mode="mode"
+        :enter-active-class="isBack ? $style.verticalWindowTransitionBackEnterActive : $style.verticalWindowTransitionEnterActive"
+        :enter-from-class="isBack ? $style.verticalWindowTransitionBackEnterFrom : $style.verticalWindowTransitionEnterFrom"
+        :leave-active-class="isBack ? $style.verticalWindowTransitionBackLeaveActive : $style.verticalWindowTransitionLeaveActive"
+        :leave-to-class="isBack ? $style.verticalWindowTransitionBackLeaveTo : $style.verticalWindowTransitionLeaveTo">
+        <slot/>
+    </Transition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Transition.module.scss';
+
+    const {
+        mode = 'out-in'
+    } = defineProps<{
+        readonly isBack?: boolean;
+        readonly mode?: 'in-out' | 'out-in';
+    }>();
+</script>