@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

package/src/component/FluxMenuCollapsible.vue

@@ -0,0 +1,187 @@
+<template>
+    <div :class="isOpen ? $style.menuCollapsibleOpened : $style.menuCollapsible">
+        <FluxMenuItem
+            :disabled="disabled"
+            :href="href"
+            :icon-leading="iconLeading"
+            :icon-trailing="isOpen ? 'angle-down' : 'angle-right'"
+            :label="label"
+            :rel="rel"
+            :target="target"
+            :to="to"
+            :aria-expanded="isOpen"
+            :aria-controls="bodyId"
+            @click="onHeaderClick">
+            <template
+                v-if="slots.before"
+                #before>
+                <slot name="before"/>
+            </template>
+        </FluxMenuItem>
+
+        <FluxAutoHeightTransition>
+            <div
+                v-if="isOpen"
+                :id="bodyId"
+                :class="$style.menuCollapsibleBody"
+                role="group">
+                <div :class="$style.menuCollapsibleContent">
+                    <slot/>
+                </div>
+            </div>
+        </FluxAutoHeightTransition>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import type { FluxIconName, FluxTo } from '@flux-ui/types';
+    import { computed, getCurrentInstance, ref, useId, type VNode, watch } from 'vue';
+    import { FluxAutoHeightTransition } from '~flux/components/transition';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import $style from '~flux/components/css/component/Menu.module.scss';
+
+    type RouteRecordLike = {
+        readonly name?: string | symbol | null | undefined;
+    };
+
+    type RouteLike = {
+        readonly path: string;
+        readonly matched: readonly RouteRecordLike[];
+    };
+
+    type RouteAwareInstance = {
+        readonly $route?: RouteLike;
+    };
+
+    const emit = defineEmits<{
+        toggle: [boolean];
+        'update:isOpened': [boolean];
+    }>();
+
+    const {
+        href,
+        isOpened,
+        to
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly href?: string;
+        readonly iconLeading?: FluxIconName | null;
+        readonly isOpened?: boolean;
+        readonly label?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+        before(): VNode[];
+    }>();
+
+    const bodyId = useId();
+    const instance = getCurrentInstance();
+    const isOpen = ref(!!isOpened);
+    const route = computed<RouteLike | undefined>(() => (instance?.proxy as RouteAwareInstance | null)?.$route);
+
+    function open(): void {
+        if (isOpen.value) {
+            return;
+        }
+
+        isOpen.value = true;
+        emit('toggle', true);
+        emit('update:isOpened', true);
+    }
+
+    function close(): void {
+        if (!isOpen.value) {
+            return;
+        }
+
+        isOpen.value = false;
+        emit('toggle', false);
+        emit('update:isOpened', false);
+    }
+
+    function toggle(): void {
+        if (isOpen.value) {
+            close();
+        } else {
+            open();
+        }
+    }
+
+    function onHeaderClick(): void {
+        if (to || href) {
+            open();
+        } else {
+            toggle();
+        }
+    }
+
+    function matchesRoute(target: unknown, currentRoute: RouteLike | undefined): boolean {
+        if (!target || !currentRoute) {
+            return false;
+        }
+
+        if (typeof target === 'string') {
+            return currentRoute.path === target || currentRoute.path.startsWith(`${target}/`);
+        }
+
+        if (typeof target === 'object') {
+            const obj = target as Record<string, unknown>;
+
+            if (typeof obj.path === 'string') {
+                return currentRoute.path === obj.path || currentRoute.path.startsWith(`${obj.path}/`);
+            }
+
+            if (obj.name && Array.isArray(currentRoute.matched)) {
+                return currentRoute.matched.some(record => record.name === obj.name);
+            }
+        }
+
+        return false;
+    }
+
+    watch(() => isOpened, value => {
+        if (value === undefined) {
+            return;
+        }
+
+        if (value) {
+            open();
+        } else {
+            close();
+        }
+    });
+
+    watch(route, currentRoute => {
+        if (!currentRoute) {
+            return;
+        }
+
+        const vnodes = flattenVNodeTree(slots.default?.() ?? []);
+
+        for (const vnode of vnodes) {
+            const childTo = vnode.props?.to;
+            const childHref = vnode.props?.href;
+
+            if (matchesRoute(childTo, currentRoute) || matchesRoute(childHref, currentRoute)) {
+                open();
+                return;
+            }
+        }
+    }, {
+        immediate: true
+    });
+
+    defineExpose({
+        isOpen,
+        open,
+        close,
+        toggle
+    });
+</script>

package/src/component/FluxMenuGroup.vue

@@ -9,13 +9,14 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Menu.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineProps<{
         readonly isHorizontal?: boolean;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxMenuItem.vue

@@ -14,6 +14,7 @@
             [$style.menuItemSelected]: isSelectable && isSelected
         }"
         :aria-checked="isSelectable ? isSelected : undefined"
+        :tabindex="tabindex"
         @click="$emit('click', $event)">
         <template
             v-if="isSelectable && (!iconLeading || isSelected)"
@@ -29,11 +30,17 @@
             <img
                 :class="$style.menuItemImage"
                 :src="imageSrc"
-                alt=""/>
+                :alt="imageAlt ?? ''"/>
         </template>
 
         <template
-            v-if="command || commandIcon || commandLoading"
+            v-else-if="slots.before"
+            #iconLeading>
+            <slot name="before"/>
+        </template>
+
+        <template
+            v-if="command || commandIcon || commandLoading || slots.after"
             #after>
             <FluxSpinner
                 v-if="commandLoading"
@@ -52,6 +59,8 @@
                     :class="$style.menuItemCommandIcon"
                     :name="commandIcon"/>
             </template>
+
+            <slot name="after"/>
         </template>
     </FluxButton>
 </template>
@@ -60,19 +69,26 @@
     lang="ts"
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxButton from './FluxButton.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Menu.module.scss';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineEmits<FluxButtonEmits>();
 
+    const slots = defineSlots<{
+        after(): VNode[];
+        before(): VNode[];
+    }>();
+
     const {
         type = 'button'
     } = defineProps<Omit<FluxButtonProps, 'isFilled' | 'isSubmit' | 'size'> & {
         readonly command?: string;
         readonly commandIcon?: FluxIconName;
         readonly commandLoading?: boolean;
+        readonly imageAlt?: string;
         readonly imageSrc?: string;
         readonly isActive?: boolean;
         readonly isDestructive?: boolean;

package/src/component/FluxMenuOptions.vue

@@ -10,7 +10,7 @@
     lang="ts"
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
-    import { cloneVNode, computed, unref, VNode } from 'vue';
+    import { cloneVNode, computed, unref, type VNode } from 'vue';
     import FluxMenuGroup from './FluxMenuGroup.vue';
 
     const modelValue = defineModel<number>({
@@ -25,7 +25,7 @@
     }>();
 
     const slots = defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const items = computed(() => flattenVNodeTree(slots.default())

package/src/component/FluxMenuSubHeader.vue

@@ -23,7 +23,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Menu.module.scss';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineProps<{
         readonly iconLeading?: FluxIconName;

package/src/component/FluxMenuTitle.vue

@@ -9,7 +9,7 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Menu.module.scss';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineProps<{
         readonly title: string;

package/src/component/FluxNotice.vue

@@ -40,6 +40,7 @@
             v-if="isCloseable"
             :class="$style.noticeClose"
             type="button"
+            :aria-label="translate('flux.close')"
             @click="emit('close')">
             <FluxIcon name="xmark"/>
         </button>
@@ -51,9 +52,11 @@
     setup>
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Notice.module.scss';
+    import $style from '~flux/components/css/component/Notice.module.scss';
 
     const emit = defineEmits<{
         close: [];
@@ -73,7 +76,9 @@
     }>();
 
     defineSlots<{
-        default(): any;
-        end(): any;
+        default(): VNode[];
+        end(): VNode[];
     }>();
+
+    const translate = useTranslate();
 </script>

package/src/component/FluxNoticeStack.vue

@@ -1,17 +1,18 @@
 <template>
-    <FluxStack
+    <FluxFlex
         direction="vertical"
         :gap="6">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
-    import FluxStack from './FluxStack.vue';
+    import type { VNode } from 'vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxOverflowBar.vue

@@ -0,0 +1,133 @@
+<template>
+    <div
+        ref="bar"
+        :class="[
+            direction === 'horizontal' && $style.overflowBarHorizontal,
+            direction === 'vertical' && $style.overflowBarVertical,
+            alignment === 'start' && $style.alignStart,
+            alignment === 'center' && $style.alignCenter,
+            alignment === 'end' && $style.alignEnd
+        ]"
+        :style="{
+            gap: `${gap}px`
+        }">
+        <template v-for="item of items.slice(0, visibleItems)">
+            <FluxDynamicView :vnode="item"/>
+        </template>
+
+        <div
+            v-if="slots.overflow"
+            ref="overflow"
+            :class="$style.overflowBarOverflow">
+            <slot
+                name="overflow"
+                v-bind="{hasOverflow: hiddenItems.length > 0, items: hiddenItems}"/>
+        </div>
+    </div>
+
+    <div
+        ref="measurer"
+        :class="$style.overflowBarMeasurer">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { animationFrameDebounce, flattenVNodeTree, unrefTemplateElement } from '@flux-ui/internals';
+    import type { FluxAlignment, FluxDirection } from '@flux-ui/types';
+    import { computed, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
+    import FluxDynamicView from './FluxDynamicView.vue';
+    import $style from '~flux/components/css/component/OverflowBar.module.scss';
+
+    const {
+        alignment = 'center',
+        direction = 'horizontal',
+        gap = 9
+    } = defineProps<{
+        readonly alignment?: FluxAlignment;
+        readonly direction?: FluxDirection;
+        readonly gap?: number;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): VNode[];
+        overflow?(props: { hasOverflow: boolean; items: VNode[] }): VNode[];
+    }>();
+
+    const barRef = useTemplateRef('bar');
+    const measurerRef = useTemplateRef('measurer');
+    const overflowRef = useTemplateRef('overflow');
+
+    const availableSize = ref(0);
+    const itemSizes = ref<number[]>([]);
+    const usedSize = ref(0);
+    const visibleItems = ref(0);
+
+    const hiddenItems = computed(() => unref(items).slice(unref(visibleItems)));
+    const items = computed(() => flattenVNodeTree(slots.default?.()));
+
+    const reflow = animationFrameDebounce(() => {
+        const bar = unref(barRef)!;
+        const measurer = unref(measurerRef)!;
+        const overflow = unrefTemplateElement(overflowRef);
+
+        availableSize.value = direction === 'horizontal' ? bar.offsetWidth : bar.offsetHeight;
+        itemSizes.value = Array.from(measurer.children)
+            .filter(item => item instanceof HTMLElement)
+            .map(item => {
+                const {display} = getComputedStyle(item);
+
+                if (display === 'contents') {
+                    item = item.children[0] as HTMLElement;
+                }
+
+                return direction === 'horizontal'
+                    ? item.offsetWidth
+                    : item.offsetHeight;
+            });
+
+        let size = 0;
+        let visible = 0;
+
+        if (overflow) {
+            size += Array.from(overflow.children)
+                .map(item => getComputedStyle(item).display === 'contents' ? item.children[0] : item)
+                .filter(item => item instanceof HTMLElement)
+                .map(item => direction === 'horizontal' ? item.offsetWidth : item.offsetHeight)
+                .reduce((acc, curr, index) => acc + curr + (index === 0 ? 0 : gap), 0);
+        }
+
+        for (let i = 0; i < itemSizes.value.length; i++) {
+            const newSize = size + itemSizes.value[i] + (size === 0 ? 0 : gap);
+
+            if (newSize > availableSize.value) {
+                break;
+            }
+
+            visible++;
+            size = newSize;
+        }
+
+        usedSize.value = size;
+        visibleItems.value = visible;
+    });
+
+    watch([barRef, measurerRef], async ([bar, measurer], _, onCleanup) => {
+        if (!bar || !measurer) {
+            return;
+        }
+
+        const observer = new ResizeObserver(reflow);
+        observer.observe(bar);
+        observer.observe(measurer);
+        observer.observe(document.documentElement); // observe font-size changes.
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+
+    watch(items, reflow);
+</script>

package/src/component/FluxOverlay.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
     import type { FluxSize } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { defineComponent, PropType } from 'vue';
-    import { FluxOverlayTransition } from '$flux/transition';
-    import { createDialogRenderer } from '$flux/util';
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import { defineComponent, type PropType } from 'vue';
+    import { FluxOverlayTransition } from '~flux/components/transition';
+    import { createDialogRenderer } from '~flux/components/util';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     export default defineComponent({
         emits: ['close'],

package/src/component/FluxOverlayProvider.vue

@@ -0,0 +1,39 @@
+<template>
+    <div :class="$style.overlayProvider">
+        <div :class="$style.overlayShade"/>
+    </div>
+
+    <FluxOverlay size="medium">
+        <FluxAlert
+            v-for="alert of alerts"
+            :key="alert.id"
+            :alert="alert"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxConfirm
+            v-for="confirm of confirms"
+            :key="confirm.id"
+            :confirm="confirm"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxPrompt
+            v-for="prompt of prompts"
+            :key="prompt.id"
+            :prompt="prompt"/>
+    </FluxOverlay>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useFluxStore } from '~flux/components/data';
+    import FluxAlert from './FluxAlert.vue';
+    import FluxConfirm from './FluxConfirm.vue';
+    import FluxOverlay from './FluxOverlay.vue';
+    import FluxPrompt from './FluxPrompt.vue';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
+
+    const {alerts, confirms, prompts} = useFluxStore();
+</script>

package/src/component/FluxPagination.vue

@@ -28,6 +28,7 @@
 
             <FluxPaginationButton
                 v-else
+                :aria-label="translate('flux.goToPage', {page: p})"
                 :label="`${p}`"
                 @click="navigate(p)"/>
         </template>
@@ -57,13 +58,10 @@
     lang="ts"
     setup>
     import { computed, unref } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { showPrompt } from '$flux/data';
-    import FluxButton from './FluxButton.vue';
-    import FluxButtonGroup from './FluxButtonGroup.vue';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { showPrompt } from '~flux/components/data';
     import FluxPaginationButton from './FluxPaginationButton.vue';
-    import FluxPrimaryButton from './FluxPrimaryButton.vue';
-    import $style from '$flux/css/component/Pagination.module.scss';
+    import $style from '~flux/components/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
         navigate: [number];

package/src/component/FluxPaginationBar.vue

@@ -34,14 +34,11 @@
     setup>
     import type { FluxFormSelectOption } from '@flux-ui/types';
     import { computed, ref, watch } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import FluxFormInputAddition from './FluxFormInputAddition.vue';
-    import FluxFormInputGroup from './FluxFormInputGroup.vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxFormSelect from './FluxFormSelect.vue';
     import FluxPagination from './FluxPagination.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import FluxStack from './FluxStack.vue';
-    import $style from '$flux/css/component/Pagination.module.scss';
+    import $style from '~flux/components/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
         limit: [number];

package/src/component/FluxPaginationButton.vue

@@ -25,7 +25,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Pagination.module.scss';
+    import $style from '~flux/components/css/component/Pagination.module.scss';
 
     defineEmits<FluxButtonEmits>();
 

package/src/component/FluxPane.vue

@@ -2,13 +2,15 @@
     <div :class="CLASS_MAP[variant]">
         <slot/>
 
-        <slot
-            v-if="isLoading"
-            name="loader">
-            <div :class="$style.paneLoader">
-                <FluxSpinner/>
-            </div>
-        </slot>
+        <FluxFadeTransition>
+            <slot
+                v-if="isLoading"
+                name="loader">
+                <div :class="$style.paneLoader">
+                    <FluxSpinner/>
+                </div>
+            </slot>
+        </FluxFadeTransition>
 
         <div
             v-if="tag"
@@ -21,8 +23,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const CLASS_MAP = {
         default: $style.paneDefault,
@@ -39,7 +43,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
-        loader(): any;
+        default(): VNode[];
+        loader(): VNode[];
     }>();
 </script>

package/src/component/FluxPaneBody.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Pane.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxPaneFooter.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Pane.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>