@flux-ui/components 3.0.0-next.6 → 3.0.0-next.61

package/src/component/primitive/Anchor.vue

@@ -7,11 +7,13 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
+
     defineProps<{
         readonly tagName: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/primitive/AnchorPopup.vue

@@ -13,10 +13,10 @@
 <script
     lang="ts"
     setup>
+    import { useMutationObserver } from '@basmilius/common';
     import { isHtmlElement } from '@basmilius/utils';
-    import { useMutationObserver } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
-    import { ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
+    import { type ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, type VNode, watchEffect } from 'vue';
 
     const {
         anchor,
@@ -37,7 +37,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const anchorRef = ref<HTMLElement>();
@@ -56,7 +56,7 @@
 
     onUnmounted(() => {
         window.removeEventListener('resize', onResize);
-        window.removeEventListener('scroll', onScroll);
+        window.removeEventListener('scroll', onScroll, {capture: true});
     });
 
     useMutationObserver(popupRef, () => {
@@ -150,10 +150,14 @@
                     px = x + width / 2 - popupWidth / 2;
                     py = y + height + margin;
 
-                    if (py + popupHeight > innerHeight) {
+                    if (py + popupHeight + margin > innerHeight) {
                         py = y - popupHeight - margin;
                     }
                 }
+
+                if (py < 0 || py + popupHeight > innerHeight) {
+                    py = innerHeight / 2 - popupHeight / 2;
+                }
                 break;
         }
 
@@ -188,7 +192,9 @@
 
         anchorRef.value = isHtmlElement(anchor) ? anchor : anchor.$el;
 
-        requestAnimationFrame(resize);
-        requestAnimationFrame(reposition);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resize);
+            requestAnimationFrame(reposition);
+        });
     });
 </script>

package/src/component/primitive/CoordinatePicker.vue

@@ -2,8 +2,8 @@
     <div
         ref="root"
         :class="$style.coordinatePicker"
-        role="slider"
         :aria-disabled="disabled ? true : undefined"
+        :aria-label="ariaLabel"
         @pointerdown="onPointerDown">
         <CoordinatePickerThumb
             :disabled="disabled"
@@ -19,10 +19,10 @@
     setup>
     import { roundStep } from '@basmilius/utils';
     import { unrefTemplateElement } from '@flux-ui/internals';
-    import { computed, onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
+    import { computed, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
     import CoordinatePickerThumb from './CoordinatePickerThumb.vue';
-    import $style from '$flux/css/component/primitive/CoordinatePicker.module.scss';
+    import $style from '~flux/components/css/component/primitive/CoordinatePicker.module.scss';
 
     const emit = defineEmits<{
         dragging: [boolean];
@@ -38,6 +38,7 @@
         min: minProp = 0,
         step: stepProp = 1
     } = defineProps<{
+        readonly ariaLabel?: string;
         readonly disabled?: boolean;
         readonly max?: number | [number, number];
         readonly min?: number | [number, number];
@@ -58,16 +59,6 @@
         (unref(modelValue)[1] - unref(min)[1]) / (unref(max)[1] - unref(min)[1])
     ]);
 
-    onMounted(() => {
-        document.addEventListener('pointermove', onPointerMove);
-        document.addEventListener('pointerup', onPointerUp, {passive: true});
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('pointermove', onPointerMove);
-        document.removeEventListener('pointerup', onPointerUp);
-    });
-
     function onDecrement(x: boolean, y: boolean): void {
         if (unref(disabled)) {
             return;
@@ -116,6 +107,8 @@
         }
 
         isDragging.value = true;
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp, {passive: true});
         requestAnimationFrame(() => onPointerMove(evt));
     }
 
@@ -149,7 +142,14 @@
 
     function onPointerUp(): void {
         isDragging.value = false;
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
     }
 
     watch(isDragging, isDragging => emit('dragging', isDragging));
+
+    onUnmounted(() => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    });
 </script>

package/src/component/primitive/CoordinatePickerThumb.vue

@@ -9,7 +9,9 @@
             top: `${position[1] * 100}%`,
             left: `${position[0] * 100}%`
         }"
+        role="slider"
         :aria-disabled="disabled ? true : undefined"
+        :aria-valuetext="`X: ${Math.round(position[0] * 100)}%, Y: ${Math.round(position[1] * 100)}%`"
         :tabindex="disabled ? -1 : 0"
         type="button"
         @keydown="onKeyDown"
@@ -21,8 +23,8 @@
     setup>
     import { clsx } from 'clsx';
     import { toRef, unref } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import $style from '$flux/css/component/primitive/CoordinatePicker.module.scss';
+    import { useDisabled } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/primitive/CoordinatePicker.module.scss';
 
     const emit = defineEmits<{
         decrement: [boolean, boolean];

package/src/component/primitive/DialogLayout.vue

@@ -0,0 +1,44 @@
+<template>
+    <FluxPane>
+        <FluxPaneHeader
+            :icon="icon"
+            :title="title"/>
+
+        <FluxPaneBody
+            v-if="message"
+            v-html="message"/>
+
+        <FluxPaneBody v-if="$slots.default">
+            <slot/>
+        </FluxPaneBody>
+
+        <FluxPaneFooter>
+            <FluxSpacer/>
+
+            <slot name="footer"/>
+        </FluxPaneFooter>
+    </FluxPane>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
+    import FluxPane from '../FluxPane.vue';
+    import FluxPaneBody from '../FluxPaneBody.vue';
+    import FluxPaneFooter from '../FluxPaneFooter.vue';
+    import FluxPaneHeader from '../FluxPaneHeader.vue';
+    import FluxSpacer from '../FluxSpacer.vue';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly message?: string;
+        readonly title: string;
+    }>();
+
+    defineSlots<{
+        default?(): VNode[];
+        footer(): VNode[];
+    }>();
+</script>

package/src/component/primitive/FilterBadge.vue

@@ -0,0 +1,43 @@
+<template>
+    <FluxBadge
+        v-if="valueLabel"
+        :class="$style.filterBadge"
+        :is-loading="isLoading"
+        :label="valueLabel"
+        @click="onClick"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useLoaded } from '@basmilius/common';
+    import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+    import { computed, ref, unref, watch } from 'vue';
+    import FluxBadge from '../FluxBadge.vue';
+    import $style from '~flux/components/css/component/Filter.module.scss';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const {
+        item,
+        value
+    } = defineProps<{
+        readonly item: FluxFilterItem;
+        readonly value: FluxFilterValue;
+    }>();
+
+    const {isLoading, loaded} = useLoaded();
+    const getValueLabel = computed(() => loaded(item.getValueLabel));
+
+    const valueLabel = ref<string>();
+
+    function onClick(evt: MouseEvent): void {
+        emit('click', evt);
+    }
+
+    watch([() => item, () => value], async () => {
+        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    }, {deep: true, immediate: true});
+</script>

package/src/component/primitive/FilterItem.vue

@@ -12,10 +12,10 @@
 <script
     lang="ts"
     setup>
+    import { useLoaded } from '@basmilius/common';
     import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
-    import { useLoaded } from '$flux/composable/private';
-    import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
+    import FluxMenuItem from '../FluxMenuItem.vue';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -38,7 +38,16 @@
         emit('click', evt);
     }
 
-    watch(() => item, async () => {
-        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    watch([() => item, () => value], async ([, nextValue], _prev, onCleanup) => {
+        let cancelled = false;
+        onCleanup(() => {
+            cancelled = true;
+        });
+
+        const nextLabel = await unref(getValueLabel)(nextValue);
+
+        if (!cancelled) {
+            valueLabel.value = nextLabel ?? undefined;
+        }
     }, {deep: true, immediate: true});
 </script>

package/src/component/primitive/FilterMenuRenderer.ts

@@ -1,185 +1,23 @@
-import { formatNumber } from '@basmilius/utils';
-import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
-import type { FluxFilterBase, FluxFilterDateEntry, FluxFilterDateRangeEntry, FluxFilterItem, FluxFilterOptionEntry, FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterOptionsEntry, FluxFilterRangeEntry, FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
-import { camelCase } from 'lodash-es';
-import { DateTime } from 'luxon';
-import { computed, defineComponent, h, isVNode, unref, VNode } from 'vue';
-import { useTranslate } from '$flux/composable/private';
-import { FluxTranslate, isFluxFilterOptionItem } from '$flux/data';
-import { createLabelForDateRange } from '$flux/util';
-import FluxMenu from '$flux/component/FluxMenu.vue';
-import FluxMenuGroup from '$flux/component/FluxMenuGroup.vue';
-import FluxSeparator from '$flux/component/FluxSeparator.vue';
+import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+import { defineComponent, h, isVNode, type VNode, unref } from 'vue';
+import { useFilterInjection } from '~flux/components/composable';
+import FluxMenuGroup from '../FluxMenuGroup.vue';
+import FluxSeparator from '../FluxSeparator.vue';
 import FilterItem from './FilterItem.vue';
 
 export const FilterMenuRenderer = defineComponent({
     props: {
-        navigate: Function,
-        state: Object
+        menuItems: {required: true, type: Array},
+        navigate: {required: true, type: Function}
     },
 
-    setup(props, {slots}) {
-        const content = computed<(FluxFilterItem | VNode)[][]>(() => {
-            const children = flattenVNodeTree(slots.default?.() ?? []);
-            const content: (FluxFilterItem | VNode)[][] = [[]];
+    setup(props) {
+        const {state} = useFilterInjection();
 
-            for (const child of children) {
-                const name = getComponentName(child);
-
-                if (name === 'FluxSeparator') {
-                    content.push([]);
-                    continue;
-                }
-
-                if (name.startsWith('FluxFilter')) {
-                    const props = getComponentProps<Omit<FluxFilterItem, 'type'>>(child);
-                    const type = camelCase(name.substring(10)) as FluxFilterItem['type'];
-
-                    content[content.length - 1].push(parsers[type](props));
-                    continue;
-                }
-
-                content[content.length - 1].push(child);
-            }
-
-            return content;
-        });
-
-        return () => h(FluxMenu, {}, {
-            default: () => unref(content).map((group, index) => renderFilterGroup(group, index, props.navigate!, props.state!))
-        });
+        return () => props.menuItems.map((group, index) => renderFilterGroup(group as (FluxFilterItem | VNode)[], index, props.navigate, unref(state) as Record<string, FluxFilterValue>));
     }
 });
 
-function parseDate(base: FluxFilterBase): FluxFilterDateEntry {
-    return {
-        ...base,
-        type: 'date',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!DateTime.isDateTime(value)) {
-                return null;
-            }
-
-            return value.toLocaleString({
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric'
-            });
-        }
-    };
-}
-
-function parseDateRange(base: FluxFilterBase): FluxFilterDateRangeEntry {
-    return {
-        ...base,
-        type: 'dateRange',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [start, end] = value;
-
-            if (!DateTime.isDateTime(start) || !DateTime.isDateTime(end)) {
-                return null;
-            }
-
-            return createLabelForDateRange(start, end);
-        }
-    };
-}
-
-function parseOption(base: FluxFilterBase): FluxFilterOptionEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
-
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            return options.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptionAsync(base: FluxFilterBase): FluxFilterOptionEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
-
-    return {
-        ...base,
-        type: 'option',
-
-        async getValueLabel(value): Promise<string | null> {
-            const options = (await fetchOptions([value])).filter(isFluxFilterOptionItem);
-
-            return options.find(o => o.value === value)?.label ?? null;
-        }
-    };
-}
-
-function parseOptions(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const options = (base as any).options as FluxFilterOptionItem[];
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            return generateMultiOptionsLabel(translate, options, value);
-        }
-    };
-}
-
-function parseOptionsAsync(base: FluxFilterBase): FluxFilterOptionsEntry {
-    const fetchOptions = (base as any).fetchOptions as (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>;
-    const translate = useTranslate();
-
-    return {
-        ...base,
-        type: 'options',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!Array.isArray(value)) {
-                return null;
-            }
-
-            const options = (await fetchOptions(value)).filter(isFluxFilterOptionItem);
-
-            return generateMultiOptionsLabel(translate, options, value);
-        }
-    };
-}
-
-function parseRange(base: FluxFilterBase): FluxFilterRangeEntry {
-    return {
-        ...base,
-        type: 'range',
-
-        async getValueLabel(value): Promise<string | null> {
-            if (!value || !Array.isArray(value) || value.length !== 2) {
-                return null;
-            }
-
-            const [lower, upper] = value as number[];
-
-            if ('formatter' in base) {
-                const formatter = base.formatter as (value: number) => string;
-
-                return `${formatter(lower)} – ${formatter(upper)}`;
-            }
-
-            return `${formatNumber(lower)} – ${formatNumber(upper)}`;
-        }
-    };
-}
-
 function renderFilterGroup(group: (FluxFilterItem | VNode)[], index: number, navigate: Function, state: Record<string, FluxFilterValue>): VNode[] {
     const slot: VNode[] = [];
 
@@ -205,29 +43,3 @@ function renderFilterItem(item: FluxFilterItem | VNode, navigate: Function, stat
         onClick: () => navigate(item.name)
     });
 }
-
-function generateMultiOptionsLabel(translate: FluxTranslate, options: FluxFilterOptionItem[], values: FluxFilterValueSingle[]): string | null {
-    const selected = options.filter(o => values.includes(o.value)).length;
-
-    if (selected <= 0) {
-        return null;
-    }
-
-    if (selected === 1) {
-        return options.find(o => values.includes(o.value))!.label;
-    }
-
-    return translate('flux.nSelected', {
-        n: selected
-    });
-}
-
-const parsers = {
-    date: parseDate,
-    dateRange: parseDateRange,
-    option: parseOption,
-    optionAsync: parseOptionAsync,
-    options: parseOptions,
-    optionsAsync: parseOptionsAsync,
-    range: parseRange
-} as const;

package/src/component/primitive/FilterOptionBase.vue

@@ -38,12 +38,12 @@
     lang="ts"
     setup>
     import type { FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterValueSingle } from '@flux-ui/types';
-    import { isFluxFilterOptionHeader, isFluxFilterOptionItem } from '$flux/data';
-    import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
-    import FluxFormInput from '$flux/component/FluxFormInput.vue';
-    import FluxMenuGroup from '$flux/component/FluxMenuGroup.vue';
-    import FluxMenuSubHeader from '$flux/component/FluxMenuSubHeader.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import { isFluxFilterOptionHeader, isFluxFilterOptionItem } from '~flux/components/data';
+    import FluxFormInput from '../FluxFormInput.vue';
+    import FluxMenuGroup from '../FluxMenuGroup.vue';
+    import FluxMenuItem from '../FluxMenuItem.vue';
+    import FluxMenuSubHeader from '../FluxMenuSubHeader.vue';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
     const emit = defineEmits<{
         select: [FluxFilterValueSingle];