@flux-ui/components 3.0.0-next.23 → 3.0.0-next.25

package/src/component/FluxFilterBase.vue

@@ -0,0 +1,141 @@
+<template>
+    <slot v-bind="{buttons, filters, menuItems}"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
+    import type { FluxFilterItem, FluxFilterOptionItem, FluxFilterState } from '@flux-ui/types';
+    import { computed, provide, unref, type VNode } from 'vue';
+    import { filterParsers, FluxFilterInjectionKey } from '$flux/data';
+    import { camelCase } from 'lodash-es';
+
+    const emit = defineEmits<{
+        back: [];
+        reset: [string]
+    }>();
+
+    const modelValue = defineModel<FluxFilterState>({
+        required: true
+    });
+
+    defineProps<{
+        readonly resettable?: string[];
+    }>();
+
+    const slots = defineSlots<{
+        default(props: {
+            readonly buttons: Record<string, FluxFilterItem>;
+            readonly filters: Record<string, VNode>;
+            readonly menuItems: (FluxFilterItem | VNode)[][];
+        }): any;
+
+        filters(): any;
+    }>();
+
+    const buttons = computed(() => {
+        const buttons: Record<string, FluxFilterItem> = {};
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            const name = getComponentName(item);
+
+            if (!name.startsWith('FluxFilter')) {
+                continue;
+            }
+
+            const props = getComponentProps<Omit<FluxFilterItem, 'type'>>(item);
+            const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
+
+            buttons[props.name] = filterParsers[type](props);
+        }
+
+        return buttons;
+    });
+
+    const flattenedFilters = computed(() => flattenVNodeTree(slots.filters?.() ?? []));
+
+    const filters = computed<Record<string, VNode>>(() => {
+        const filters: { [key: string]: VNode; } = {};
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            const name = getComponentName(item);
+
+            if (!name.startsWith('FluxFilter')) {
+                continue;
+            }
+
+            const props = getComponentProps<{ name: string; }>(item);
+
+            if (!props.name) {
+                continue;
+            }
+
+            filters[props.name] = item;
+        }
+
+        return filters;
+    });
+
+    const menuItems = computed<(FluxFilterItem | VNode)[][]>(() => {
+        const menuItems: (FluxFilterItem | VNode)[][] = [[]];
+        const items = unref(flattenedFilters);
+
+        for (const item of items) {
+            const name = getComponentName(item);
+
+            if (name === 'FluxSeparator') {
+                menuItems.push([]);
+                continue;
+            }
+
+            if (name.startsWith('FluxFilter')) {
+                const props = getComponentProps<Omit<FluxFilterItem, 'type'>>(item);
+                const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
+
+                menuItems[menuItems.length - 1].push(filterParsers[type](props));
+                continue;
+            }
+
+            menuItems[menuItems.length - 1].push(item);
+        }
+
+        return menuItems;
+    });
+
+    function back(): void {
+        emit('back');
+    }
+
+    function reset(name: string): void {
+        back();
+        emit('reset', name);
+    }
+
+    function getValue(name: string): FluxFilterOptionItem['value'] | undefined {
+        if (!hasValue(name)) {
+            return undefined;
+        }
+
+        return unref(modelValue)[name] as FluxFilterOptionItem['value'];
+    }
+
+    function hasValue(name: string): boolean {
+        return name in unref(modelValue);
+    }
+
+    function setValue(name: string, value: FluxFilterOptionItem['value']): void {
+        modelValue.value[name] = value;
+    }
+
+    provide(FluxFilterInjectionKey, {
+        state: modelValue,
+        back,
+        reset,
+        getValue,
+        hasValue,
+        setValue
+    });
+</script>

package/src/component/FluxFilterWindow.vue

@@ -0,0 +1,82 @@
+<template>
+    <div
+        v-height-transition
+        :class="$style.filter">
+        <FluxWindow ref="window">
+            <template #default="{navigate}">
+                <FluxMenu>
+                    <FilterMenuRenderer
+                        :menu-items="menuItems"
+                        :navigate="navigate"/>
+                </FluxMenu>
+            </template>
+
+            <template
+                v-for="(filter, name) of filters"
+                #[name]>
+                <FluxMenu>
+                    <FluxMenuGroup
+                        :class="$style.filterHeader"
+                        is-horizontal>
+                        <FluxMenuItem
+                            :class="$style.filterBack"
+                            :label="translate('flux.back')"
+                            icon-leading="angle-left"
+                            @click="back()"/>
+
+                        <FluxMenuItem
+                            v-if="resettable?.includes(name)"
+                            :class="$style.filterReset"
+                            icon-leading="trash"
+                            is-destructive
+                            @click="reset(name)"/>
+                    </FluxMenuGroup>
+
+                    <VNodeRenderer :vnode="filter"/>
+                </FluxMenu>
+            </template>
+        </FluxWindow>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { vHeightTransition } from '@flux-ui/internals';
+    import type { FluxFilterItem } from '@flux-ui/types';
+    import { unref, useTemplateRef, type VNode } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
+    import { FilterMenuRenderer, VNodeRenderer } from './primitive';
+    import FluxMenu from './FluxMenu.vue';
+    import FluxMenuGroup from './FluxMenuGroup.vue';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import FluxWindow from './FluxWindow.vue';
+    import $style from '$flux/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        reset: [string]
+    }>();
+
+    defineProps<{
+        readonly filters: Record<string, VNode>;
+        readonly menuItems: (FluxFilterItem | VNode)[][];
+        readonly resettable?: string[];
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const translate = useTranslate();
+
+    const windowRef = useTemplateRef<{ back(to: string): void; }>('window');
+
+    function back(): void {
+        unref(windowRef)?.back('default');
+    }
+
+    function reset(name: string): void {
+        back();
+        emit('reset', name);
+    }
+</script>

package/src/component/FluxFlyout.vue

@@ -6,8 +6,8 @@
             '--opener-width': `${openerWidth}px`,
             '--pane-mx': `${paneMarginX}px`,
             '--pane-my': `${paneMarginY}px`,
-            '--pane-x': `${paneX - 12}px`,
-            '--pane-y': `${paneY - 12}px`
+            '--pane-x': `${paneX - 24}px`,
+            '--pane-y': `${paneY - 24}px`
         }">
         <slot
             name="opener"

package/src/component/FluxForm.vue

@@ -1,12 +1,12 @@
 <template>
-    <FluxDisabled :disabled="disabled">
-        <form
-            :class="$style.form"
-            :aria-disabled="disabled ? true : undefined"
-            @submit.prevent="onSubmit()">
+    <form
+        :class="$style.form"
+        :aria-disabled="disabled ? true : undefined"
+        @submit.prevent="onSubmit()">
+        <FluxDisabled :disabled="disabled">
             <slot/>
-        </form>
-    </FluxDisabled>
+        </FluxDisabled>
+    </form>
 </template>
 
 <script

package/src/component/FluxFormGrid.vue

@@ -0,0 +1,23 @@
+<template>
+    <div
+        :class="$style.formGrid"
+        :style="{
+            '--columns': columns
+        }">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Form.module.scss';
+
+    defineProps<{
+        readonly columns?: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+</script>

package/src/component/FluxItem.vue

@@ -0,0 +1,11 @@
+<template>
+    <div :class="$style.item">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Item.module.scss';
+</script>

package/src/component/FluxItemActions.vue

@@ -0,0 +1,14 @@
+<template>
+    <FluxActionBar
+        :class="$style.itemActions"
+        #primary>
+        <slot/>
+    </FluxActionBar>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxActionBar from './FluxActionBar.vue';
+    import $style from '$flux/css/component/Item.module.scss';
+</script>

package/src/component/FluxItemContent.vue

@@ -0,0 +1,11 @@
+<template>
+    <div :class="$style.itemContent">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Item.module.scss';
+</script>

package/src/component/FluxItemMedia.vue

@@ -0,0 +1,11 @@
+<template>
+    <div :class="$style.itemMedia">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import $style from '$flux/css/component/Item.module.scss';
+</script>

package/src/component/FluxItemStack.vue

@@ -0,0 +1,14 @@
+<template>
+    <FluxStack
+        :class="$style.itemStack"
+        :gap="0">
+        <slot/>
+    </FluxStack>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import FluxStack from './FluxStack.vue';
+    import $style from '$flux/css/component/Item.module.scss';
+</script>

package/src/component/FluxMenuItem.vue

@@ -34,7 +34,7 @@
         </template>
 
         <template
-            v-if="command || commandIcon || commandLoading"
+            v-if="command || commandIcon || commandLoading || slots.after"
             #after>
             <FluxSpinner
                 v-if="commandLoading"
@@ -53,6 +53,8 @@
                     :class="$style.menuItemCommandIcon"
                     :name="commandIcon"/>
             </template>
+
+            <slot name="after"/>
         </template>
     </FluxButton>
 </template>
@@ -68,6 +70,10 @@
 
     defineEmits<FluxButtonEmits>();
 
+    const slots = defineSlots<{
+        after(): any;
+    }>();
+
     const {
         type = 'button'
     } = defineProps<Omit<FluxButtonProps, 'isFilled' | 'isSubmit' | 'size'> & {

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>({

package/src/component/FluxOverflowBar.vue

@@ -0,0 +1,123 @@
+<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="{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, watch, type VNode } 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?(): any;
+        overflow?(props: { items: VNode[] }): any;
+    }>();
+
+    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 => 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/FluxPaneMedia.vue

@@ -4,6 +4,7 @@
             v-if="imageUrl"
             :class="$style.paneMediaImage"
             :style="{
+                aspectRatio,
                 objectPosition: `${focalPointX}% ${focalPointY}%`
             }"
             :src="imageUrl"
@@ -20,6 +21,7 @@
     const {
         imageFocalPoint
     } = defineProps<{
+        readonly aspectRatio?: number;
         readonly imageAlt?: string;
         readonly imageFocalPoint?: [number, number];
         readonly imageUrl?: string;

package/src/component/FluxPrimaryLinkButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :css-class="$style.primaryLinkButton"
+        :css-class-icon="$style.primaryLinkButtonIcon"
+        :css-class-label="$style.primaryLinkButtonLabel"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <template
+            v-for="slot of SLOTS"
+            #[slot]>
+            <slot :name="slot"/>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
+    import FluxButton, { SLOTS } from './FluxButton.vue';
+    import $style from '$flux/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxSecondaryLinkButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <FluxButton
+        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, href, rel, target, to}"
+        :css-class="$style.secondaryLinkButton"
+        :css-class-icon="$style.secondaryLinkButtonIcon"
+        :css-class-label="$style.secondaryLinkButtonLabel"
+        @click="$emit('click', $event)"
+        @mouseenter="$emit('mouseenter', $event)"
+        @mouseleave="$emit('mouseleave', $event)">
+        <template
+            v-for="slot of SLOTS"
+            #[slot]>
+            <slot :name="slot"/>
+        </template>
+    </FluxButton>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
+    import FluxButton, { SLOTS } from './FluxButton.vue';
+    import $style from '$flux/css/component/Button.module.scss';
+
+    defineEmits<FluxButtonEmits>();
+    defineProps<FluxButtonProps>();
+    defineSlots<FluxButtonSlots>();
+</script>

package/src/component/FluxStatistic.vue

@@ -9,14 +9,14 @@
             color === 'info' && $style.isInfo,
             color === 'success' && $style.isSuccess,
             color === 'warning' && $style.isWarning
-        )">
-        <div
+        )"
+        :is-loading="isLoading">
+        <FluxBoxedIcon
             v-if="icon"
-            :class="$style.statisticIcon">
-            <FluxIcon
-                :name="icon"
-                :size="24"/>
-        </div>
+            :class="$style.statisticIcon"
+            :color="color"
+            :name="icon"
+            :size="48"/>
 
         <div v-else-if="imageSrc">
             <img
@@ -27,7 +27,7 @@
 
         <div :class="$style.statisticData">
             <span>{{ label }}</span>
-            <strong>{{ value }}</strong>
+            <strong>{{ value ?? MDASH }}</strong>
         </div>
 
         <div
@@ -54,11 +54,13 @@
 <script
     lang="ts"
     setup>
+    import { MDASH } from '@basmilius/utils';
     import type { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';
     import FluxPane from './FluxPane.vue';
     import $style from '$flux/css/component/Statistic.module.scss';
+    import FluxBoxedIcon from '$flux/component/FluxBoxedIcon.vue';
 
     const {
         changeColor = 'gray',
@@ -67,13 +69,14 @@
     } = defineProps<{
         readonly changeColor?: FluxColor;
         readonly changeIcon?: FluxIconName;
-        readonly changeValue?: string;
+        readonly changeValue?: string | number | null;
         readonly color?: FluxColor;
         readonly direction?: FluxDirection;
         readonly icon?: FluxIconName;
         readonly imageSrc?: string;
         readonly imageAlt?: string;
+        readonly isLoading?: boolean;
         readonly label: string;
-        readonly value: string;
+        readonly value?: string | number | null;
     }>();
 </script>

package/src/component/FluxStepper.vue

@@ -23,7 +23,7 @@
     lang="ts"
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
-    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { computed, ref, unref, type VNode, watch } from 'vue';
     import { FluxWindowTransition } from '$flux/transition';
     import FluxDynamicView from './FluxDynamicView.vue';
     import FluxStepperSteps from './FluxStepperSteps.vue';

package/src/component/FluxTabBarItem.vue

@@ -29,7 +29,7 @@
     lang="ts"
     setup>
     import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
-    import { ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { type ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';