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

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 type { FluxIconName, FluxTo } from '@flux-ui/types';
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import { computed, getCurrentInstance, ref, useId, type VNode, watch } from 'vue';
+    import { FluxAutoHeightTransition } from '$flux/transition';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import $style from '$flux/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,6 +9,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/css/component/Menu.module.scss';
 
     defineProps<{
@@ -16,6 +17,6 @@
     }>();
 
     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>
@@ -59,6 +68,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxButtonEmits, FluxButtonProps, FluxIconName } from '@flux-ui/types';
     import FluxButton from './FluxButton.vue';
     import FluxIcon from './FluxIcon.vue';
@@ -67,12 +77,18 @@
 
     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/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>
@@ -49,8 +50,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/Notice.module.scss';
@@ -73,7 +76,9 @@
     }>();
 
     defineSlots<{
-        default(): any;
-        end(): any;
+        default(): VNode[];
+        end(): VNode[];
     }>();
+
+    const translate = useTranslate();
 </script>

package/src/component/FluxNoticeStack.vue

@@ -9,9 +9,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxStack from './FluxStack.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/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,7 +1,7 @@
 <script lang="ts">
     import type { FluxSize } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { defineComponent, PropType } from 'vue';
+    import { defineComponent, type PropType } from 'vue';
     import { FluxOverlayTransition } from '$flux/transition';
     import { createDialogRenderer } from '$flux/util';
     import $style from '$flux/css/component/Overlay.module.scss';

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/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/css/component/Overlay.module.scss';
+
+    const {alerts, confirms, prompts} = useFluxStore();
+</script>

package/src/component/FluxPagination.vue

@@ -1,52 +1,57 @@
 <template>
-    <FluxButtonGroup
+    <nav
         :class="$style.pagination"
         role="navigation"
         :aria-label="translate('flux.pagination')">
-        <FluxSecondaryButton
+        <FluxPaginationButton
             v-if="arrows || isCompact"
             :disabled="isPreviousDisabled"
             icon-leading="angle-left"
+            is-arrow
             :aria-label="translate('flux.previous')"
             @click="previous"/>
 
         <template
             v-if="!isCompact"
             v-for="p of visiblePages">
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 v-if="p === 'dots'"
                 disabled
-                icon-leading="ellipsis-h"/>
+                icon-leading="ellipsis-h"
+                is-spacer/>
 
-            <FluxPrimaryButton
+            <FluxPaginationButton
                 v-else-if="p === page"
+                is-current
                 :label="`${p}`"
                 aria-current="page"/>
 
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 v-else
+                :aria-label="translate('flux.goToPage', {page: p})"
                 :label="`${p}`"
                 @click="navigate(p)"/>
         </template>
 
         <template v-else>
-            <FluxSecondaryButton
+            <FluxPaginationButton
                 :class="$style.paginationCurrentZZ"
                 @click="prompt"
                 #before>
                 <strong>{{ page }}</strong>
                 <span>/</span>
                 <span>{{ pages }}</span>
-            </FluxSecondaryButton>
+            </FluxPaginationButton>
         </template>
 
-        <FluxSecondaryButton
+        <FluxPaginationButton
             v-if="arrows || isCompact"
             :disabled="isNextDisabled"
             icon-leading="angle-right"
+            is-arrow
             :aria-label="translate('flux.next')"
             @click="next"/>
-    </FluxButtonGroup>
+    </nav>
 </template>
 
 <script
@@ -55,9 +60,7 @@
     import { computed, unref } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { showPrompt } from '$flux/data';
-    import FluxButtonGroup from './FluxButtonGroup.vue';
-    import FluxPrimaryButton from './FluxPrimaryButton.vue';
-    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxPaginationButton from './FluxPaginationButton.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{
@@ -89,7 +92,7 @@
 
         const sizes = {
             end: 1,
-            middle: 1
+            middle: 2
         } as const;
 
         let dots = false;

package/src/component/FluxPaginationBar.vue

@@ -1,40 +1,32 @@
 <template>
-    <FluxStack :class="$style.paginationBar">
-        <FluxFormInputGroup>
-            <FluxFormInputAddition>
-                <span>{{ translate('flux.rowsPerPage') }}</span>
-            </FluxFormInputAddition>
-
-            <FluxFormSelect
-                v-model="limit"
-                :options="limitOptions"/>
-        </FluxFormInputGroup>
+    <div :class="$style.paginationBar">
+        <FluxPagination
+            v-if="total > perPage"
+            arrows
+            :page="page"
+            :per-page="perPage"
+            :total="total"
+            @navigate="$emit('navigate', $event)"/>
 
         <FluxSpacer :class="$style.paginationBarSpacer"/>
 
-        <FluxFormInputGroup>
-            <FluxFormInputAddition>
-                <span>
-                    {{
-                        translate('flux.displayingOf', {
-                            from: (page - 1) * perPage + 1,
-                            to: Math.min(total, page * perPage),
-                            total: total
-                        })
-                    }}
-                </span>
-            </FluxFormInputAddition>
+        <div :class="$style.paginationBarLimit">
+            <span :class="$style.paginationBarLimitDisplayingOf">
+                {{
+                    translate('flux.displayingOf', {
+                        from: (page - 1) * perPage + 1,
+                        to: Math.min(total, page * perPage),
+                        total: total
+                    })
+                }}
+            </span>
 
-            <FluxPagination
-                v-if="total > perPage"
-                arrows
-                is-compact
-                :page="page"
-                :per-page="perPage"
-                :total="total"
-                @navigate="$emit('navigate', $event)"/>
-        </FluxFormInputGroup>
-    </FluxStack>
+            <FluxFormSelect
+                v-model="limit"
+                :class="$style.paginationBarLimitSelect"
+                :options="limitOptions"/>
+        </div>
+    </div>
 </template>
 
 <script
@@ -43,12 +35,9 @@
     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 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';
 
     const emit = defineEmits<{
@@ -70,9 +59,9 @@
 
     const limit = ref(perPage);
 
-    const limitOptions = computed(() => limits.map<FluxFormSelectOption>(limit => ({
-        label: limit.toString(),
-        value: limit
+    const limitOptions = computed(() => limits.map<FluxFormSelectOption>(n => ({
+        label: translate('flux.showN', {n}),
+        value: n
     })));
 
     watch(limit, limit => emit('limit', limit));