@flux-ui/components 3.1.2 → 3.1.3

package/src/component/FluxMenuFlyout.vue

@@ -0,0 +1,118 @@
+<template>
+    <FluxMenuItem
+        ref="trigger"
+        :class="isOpen && $style.menuFlyoutTriggerOpen"
+        command-icon="angle-right"
+        :disabled="disabled"
+        :icon-leading="icon"
+        :is-active="isActive"
+        :is-destructive="isDestructive"
+        :label="label"
+        aria-haspopup="menu"
+        :aria-expanded="isOpen ? 'true' : 'false'"
+        @click="onTriggerClick"
+        @keydown="onTriggerKeydown">
+        <template
+            v-if="$slots.trigger"
+            #label>
+            <slot name="trigger"/>
+        </template>
+    </FluxMenuItem>
+
+    <Teleport to="body">
+        <AnchorPopup
+            v-if="isOpen"
+            ref="popup"
+            :anchor="popupAnchor"
+            :class="$style.menuFlyoutPopup"
+            clamp-to-viewport
+            :margin="2"
+            :position="position"
+            role="menu"
+            :aria-label="translate('flux.submenu')"
+            @keydown="onPopupKeydown">
+            <slot/>
+        </AnchorPopup>
+
+        <svg
+            v-if="showDebugCone"
+            :class="$style.menuFlyoutConeDebug">
+            <polygon :points="conePoints"/>
+            <circle
+                :cx="coneApex.x"
+                :cy="coneApex.y"
+                r="4"/>
+        </svg>
+    </Teleport>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { computed, type ComponentPublicInstance, toRef, useTemplateRef, type VNode } from 'vue';
+    import { useMenuFlyout, useTranslate } from '~flux/components/composable/private';
+    import { AnchorPopup } from '~flux/components/component/primitive';
+    import FluxMenuItem from './FluxMenuItem.vue';
+    import $style from '~flux/components/css/component/MenuFlyout.module.scss';
+
+    const {
+        disabled,
+        position = 'right-top'
+    } = defineProps<{
+        readonly disabled?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isActive?: boolean;
+        readonly isDestructive?: boolean;
+        readonly label?: string;
+        readonly position?:
+            | 'top' | 'top-left' | 'top-right'
+            | 'left' | 'left-top' | 'left-bottom'
+            | 'right' | 'right-top' | 'right-bottom'
+            | 'bottom' | 'bottom-left' | 'bottom-right';
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+        trigger(): VNode[];
+    }>();
+
+    // The top chrome of a menu inside a pane: 1px pane border + 9px menu margin
+    // (see `.basePane > .menu` in Menu.module.scss). Subtracting it aligns the first
+    // submenu item with the opener item instead of dropping it lower.
+    const MENU_CHROME_TOP = 10;
+
+    const translate = useTranslate();
+
+    const triggerRef = useTemplateRef<ComponentPublicInstance>('trigger');
+    const popupRef = useTemplateRef<ComponentPublicInstance>('popup');
+
+    const popupAnchor = {
+        $el: {
+            getBoundingClientRect(): DOMRect {
+                const element = triggerRef.value?.$el as HTMLElement | undefined;
+
+                if (!element) {
+                    return new DOMRect();
+                }
+
+                const rect = element.getBoundingClientRect();
+
+                return new DOMRect(rect.x, rect.y - MENU_CHROME_TOP, rect.width, rect.height);
+            }
+        }
+    } as unknown as ComponentPublicInstance;
+
+    const {
+        context,
+        cone,
+        isOpen,
+        onPopupKeydown,
+        onTriggerClick,
+        onTriggerKeydown
+    } = useMenuFlyout({triggerRef, popupRef, disabled: toRef(() => disabled)});
+
+    const showDebugCone = computed(() => !!context && context.debugCone.value && isOpen.value && !!cone.value);
+    const conePoints = computed(() => cone.value ? `${cone.value.ax},${cone.value.ay} ${cone.value.bx},${cone.value.by} ${cone.value.cx},${cone.value.cy}` : '');
+    const coneApex = computed(() => ({x: cone.value?.ax ?? 0, y: cone.value?.ay ?? 0}));
+</script>

package/src/component/FluxTableCell.vue

@@ -7,6 +7,7 @@
             isSeparated && $style.isSeparated,
             isStriped && $style.isStriped
         )"
+        :colspan="colspan"
         role="cell">
         <slot name="content">
             <div
@@ -32,6 +33,7 @@
     const {
         contentDirection = 'row'
     } = defineProps<{
+        readonly colspan?: number;
         readonly contentDirection?: 'column' | 'row';
         readonly contentGap?: number;
     }>();

package/src/component/FluxTour.vue

@@ -0,0 +1,332 @@
+<template>
+    <Teleport to="body">
+        <FluxFadeTransition>
+            <div
+                v-if="active"
+                :class="$style.tour">
+                <div
+                    v-if="targetRect"
+                    :class="$style.tourSpotlight"
+                    :style="{
+                        '--x': `${targetRect.x - maskPadding}px`,
+                        '--y': `${targetRect.y - maskPadding}px`,
+                        '--w': `${targetRect.width + maskPadding * 2}px`,
+                        '--h': `${targetRect.height + maskPadding * 2}px`
+                    }"/>
+
+                <AnchorPopup
+                    v-if="targetRect && currentItem"
+                    ref="popup"
+                    :anchor="virtualAnchor"
+                    :class="clsx($style.tourPopover, isStepping && $style.isStepping)"
+                    :position="currentItem.position ?? 'bottom'"
+                    aria-modal="true"
+                    role="dialog">
+                    <FluxPane :class="$style.tourPane">
+                        <div
+                            ref="bodyViewport"
+                            :class="$style.tourBodyViewport">
+                            <Transition
+                                @after-enter="onBodyAfterEnter"
+                                @enter="onBodyEnter">
+                                <div
+                                    :key="step"
+                                    :class="$style.tourBody">
+                                    <strong
+                                        v-if="currentItem.title"
+                                        :class="$style.tourTitle">
+                                        {{ currentItem.title }}
+                                    </strong>
+
+                                    <div :class="$style.tourContent">
+                                        <VNodeRenderer :vnode="currentContent"/>
+                                    </div>
+                                </div>
+                            </Transition>
+                        </div>
+
+                        <div :class="$style.tourFooter">
+                            <span :class="$style.tourProgress">
+                                {{ step + 1 }} / {{ total }}
+                            </span>
+
+                            <FluxSpacer/>
+
+                            <button
+                                :class="$style.tourSkip"
+                                type="button"
+                                @click="skip">
+                                {{ translate('flux.skip') }}
+                            </button>
+
+                            <FluxSecondaryButton
+                                v-if="step > 0"
+                                :aria-label="translate('flux.previous')"
+                                icon-leading="angle-left"
+                                size="small"
+                                @click="previous"/>
+
+                            <FluxPrimaryButton
+                                v-if="step < total - 1"
+                                :aria-label="translate('flux.next')"
+                                icon-leading="angle-right"
+                                size="small"
+                                @click="next"/>
+
+                            <FluxPrimaryButton
+                                v-else
+                                :aria-label="translate('flux.done')"
+                                icon-leading="check"
+                                size="small"
+                                @click="next"/>
+                        </div>
+                    </FluxPane>
+                </AnchorPopup>
+            </div>
+        </FluxFadeTransition>
+    </Teleport>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { isHtmlElement } from '@basmilius/utils';
+    import { flattenVNodeTree, isSSR, useEventListener } from '@flux-ui/internals';
+    import { clsx } from 'clsx';
+    import { type ComponentPublicInstance, computed, Fragment, h, nextTick, ref, useTemplateRef, type VNode, watch } from 'vue';
+    import { AnchorPopup, VNodeRenderer } from '~flux/components/component/primitive';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import FluxPane from './FluxPane.vue';
+    import FluxPrimaryButton from './FluxPrimaryButton.vue';
+    import FluxSecondaryButton from './FluxSecondaryButton.vue';
+    import FluxSpacer from './FluxSpacer.vue';
+    import FluxTourItem from './FluxTourItem.vue';
+    import $style from '~flux/components/css/component/Tour.module.scss';
+
+    type FluxTourPosition =
+        | 'top' | 'top-left' | 'top-right'
+        | 'left' | 'left-top' | 'left-bottom'
+        | 'right' | 'right-top' | 'right-bottom'
+        | 'bottom' | 'bottom-left' | 'bottom-right';
+
+    type TourItem = {
+        readonly target: string | (() => HTMLElement | null);
+        readonly title?: string;
+        readonly position?: FluxTourPosition;
+        readonly content?: () => VNode[];
+    };
+
+    const active = defineModel<boolean>('active', {
+        required: true
+    });
+
+    const step = defineModel<number>('step', {
+        default: 0
+    });
+
+    const {
+        maskPadding = 8,
+        root
+    } = defineProps<{
+        readonly maskPadding?: number;
+        readonly root?: string | HTMLElement | (() => HTMLElement | null);
+    }>();
+
+    const emit = defineEmits<{
+        finish: [];
+        skip: [];
+        next: [number];
+        prev: [number];
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const translate = useTranslate();
+
+    const popup = useTemplateRef<{ reposition(): void; resize(): void }>('popup');
+    const bodyViewport = useTemplateRef<HTMLElement>('bodyViewport');
+    const targetRect = ref<DOMRect | null>(null);
+    const isStepping = ref(false);
+
+    let steppingTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const items = computed<readonly TourItem[]>(() => {
+        const vnodes = flattenVNodeTree(slots.default?.() ?? []);
+        const out: TourItem[] = [];
+
+        for (const vnode of vnodes) {
+            if (vnode.type !== FluxTourItem) {
+                continue;
+            }
+
+            const props = vnode.props ?? {};
+            const children = vnode.children as { default?: () => VNode[] } | null;
+
+            out.push({
+                target: props.target,
+                title: props.title,
+                position: props.position,
+                content: children?.default
+            });
+        }
+
+        return out;
+    });
+
+    const total = computed(() => items.value.length);
+    const currentItem = computed(() => items.value[step.value]);
+    const currentContent = computed(() => {
+        const content = currentItem.value?.content?.();
+        return content ? h(Fragment, content) : null;
+    });
+
+    const virtualAnchor = {
+        $el: {
+            getBoundingClientRect: () => {
+                const rect = targetRect.value;
+
+                if (!rect) {
+                    return new DOMRect(0, 0, 0, 0);
+                }
+
+                return new DOMRect(rect.x - maskPadding, rect.y - maskPadding, rect.width + maskPadding * 2, rect.height + maskPadding * 2);
+            }
+        }
+    } as unknown as ComponentPublicInstance;
+
+    function resolveScope(): ParentNode {
+        if (!root) {
+            return document;
+        }
+
+        if (typeof root === 'string') {
+            return document.querySelector(root) ?? document;
+        }
+
+        if (typeof root === 'function') {
+            return root() ?? document;
+        }
+
+        return root;
+    }
+
+    function resolveTarget(): HTMLElement | null {
+        const current = items.value[step.value];
+
+        if (!current) {
+            return null;
+        }
+
+        return typeof current.target === 'function' ? current.target() : resolveScope().querySelector<HTMLElement>(current.target);
+    }
+
+    function measure(): void {
+        const element = resolveTarget();
+
+        if (!element) {
+            targetRect.value = null;
+            return;
+        }
+
+        element.scrollIntoView({block: 'center', inline: 'center'});
+
+        requestAnimationFrame(() => {
+            const resolved = resolveTarget();
+            targetRect.value = resolved ? resolved.getBoundingClientRect() : null;
+            popup.value?.reposition();
+        });
+    }
+
+    function next(): void {
+        if (step.value < total.value - 1) {
+            step.value++;
+            emit('next', step.value);
+            return;
+        }
+
+        finish();
+    }
+
+    function previous(): void {
+        if (step.value > 0) {
+            step.value--;
+            emit('prev', step.value);
+        }
+    }
+
+    function skip(): void {
+        active.value = false;
+        emit('skip');
+    }
+
+    function finish(): void {
+        active.value = false;
+        emit('finish');
+    }
+
+    function onBodyEnter(el: Element): void {
+        if (!isHtmlElement(el) || !bodyViewport.value) {
+            return;
+        }
+
+        const height = el.offsetHeight;
+
+        requestAnimationFrame(() => {
+            if (bodyViewport.value) {
+                bodyViewport.value.style.height = `${height}px`;
+            }
+        });
+    }
+
+    function onBodyAfterEnter(): void {
+        if (bodyViewport.value) {
+            bodyViewport.value.style.height = 'auto';
+        }
+    }
+
+    watch(step, (newStep, oldStep) => {
+        if (active.value && newStep !== oldStep) {
+            if (bodyViewport.value) {
+                bodyViewport.value.style.height = `${bodyViewport.value.offsetHeight}px`;
+            }
+
+            isStepping.value = true;
+            clearTimeout(steppingTimer);
+            steppingTimer = setTimeout(() => {
+                isStepping.value = false;
+            }, 300);
+        }
+    });
+
+    watch([active, step], async () => {
+        if (!active.value) {
+            targetRect.value = null;
+            isStepping.value = false;
+            clearTimeout(steppingTimer);
+            return;
+        }
+
+        await nextTick();
+        measure();
+    }, {immediate: true});
+
+    if (!isSSR) {
+        const onRemeasure = () => {
+            if (active.value && targetRect.value) {
+                const resolved = resolveTarget();
+                targetRect.value = resolved ? resolved.getBoundingClientRect() : null;
+            }
+        };
+
+        useEventListener(ref(window), 'resize', onRemeasure);
+        useEventListener(ref(window), 'scroll', onRemeasure, {capture: true, passive: true});
+        useEventListener(ref(window), 'keydown', (evt: KeyboardEvent) => {
+            if (active.value && evt.key === 'Escape') {
+                skip();
+            }
+        });
+    }
+</script>

package/src/component/FluxTourItem.vue

@@ -0,0 +1,27 @@
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+
+    type FluxTourPosition =
+        | 'top' | 'top-left' | 'top-right'
+        | 'left' | 'left-top' | 'left-bottom'
+        | 'right' | 'right-top' | 'right-bottom'
+        | 'bottom' | 'bottom-left' | 'bottom-right';
+
+    defineProps<{
+        readonly target: string | (() => HTMLElement | null);
+        readonly title?: string;
+        readonly position?: FluxTourPosition;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>
+
+<template>
+    <span
+        aria-hidden="true"
+        style="display: none"/>
+</template>

package/src/component/FluxVirtualScroller.vue

@@ -0,0 +1,96 @@
+<template>
+    <div
+        ref="viewport"
+        :class="$style.virtualScroller">
+        <div
+            :class="$style.virtualScrollerSpacer"
+            :style="{
+                height: `${totalHeight}px`
+            }">
+            <div
+                :class="$style.virtualScrollerWindow"
+                :style="{
+                    transform: `translateY(${offsetY}px)`
+                }">
+                <div
+                    v-for="entry of visibleEntries"
+                    :key="entry.index"
+                    :style="{
+                        height: `${estimatedItemHeight}px`
+                    }">
+                    <slot
+                        :index="entry.index"
+                        :item="entry.item"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup
+    generic="T">
+    import { computed, onMounted, onUnmounted, ref, useTemplateRef, type VNode } from 'vue';
+    import { useScrollPosition } from '@flux-ui/internals';
+    import $style from '~flux/components/css/component/VirtualScroller.module.scss';
+
+    const {
+        estimatedItemHeight = 40,
+        items,
+        overscan = 4
+    } = defineProps<{
+        readonly estimatedItemHeight?: number;
+        readonly items: T[];
+        readonly overscan?: number;
+    }>();
+
+    defineSlots<{
+        default(props: {readonly index: number; readonly item: T}): VNode[];
+    }>();
+
+    const viewport = useTemplateRef<HTMLElement>('viewport');
+    const {y} = useScrollPosition(viewport);
+
+    const viewportHeight = ref(0);
+
+    const totalHeight = computed(() => items.length * estimatedItemHeight);
+    const startIndex = computed(() => Math.max(0, Math.floor(y.value / estimatedItemHeight) - overscan));
+    const endIndex = computed(() => Math.min(items.length, Math.ceil((y.value + viewportHeight.value) / estimatedItemHeight) + overscan));
+    const offsetY = computed(() => startIndex.value * estimatedItemHeight);
+
+    const visibleEntries = computed(() => {
+        const entries: {index: number; item: T}[] = [];
+
+        for (let index = startIndex.value; index < endIndex.value; ++index) {
+            entries.push({index, item: items[index]});
+        }
+
+        return entries;
+    });
+
+    let observer: ResizeObserver | null = null;
+
+    onMounted(() => {
+        const element = viewport.value;
+
+        if (!element) {
+            return;
+        }
+
+        viewportHeight.value = element.clientHeight;
+
+        observer = new ResizeObserver(() => {
+            if (viewport.value) {
+                viewportHeight.value = viewport.value.clientHeight;
+            }
+        });
+
+        observer.observe(element);
+    });
+
+    onUnmounted(() => {
+        observer?.disconnect();
+        observer = null;
+    });
+</script>

package/src/component/index.ts

@@ -7,6 +7,7 @@ export { default as FluxAdaptiveSlot } from './FluxAdaptiveSlot.vue';
 export { default as FluxAnimatedColors } from './FluxAnimatedColors.vue';
 export { default as FluxAspectRatio } from './FluxAspectRatio.vue';
 export { default as FluxAvatar } from './FluxAvatar.vue';
+export { default as FluxAvatarGroup } from './FluxAvatarGroup.vue';
 export { default as FluxBadge } from './FluxBadge.vue';
 export { default as FluxBadgeStack } from './FluxBadgeStack.vue';
 export { default as FluxBorderBeam } from './FluxBorderBeam.vue';
@@ -28,8 +29,11 @@ export { default as FluxComment } from './FluxComment.vue';
 export { default as FluxColorPicker } from './FluxColorPicker.vue';
 export { default as FluxColorSelect } from './FluxColorSelect.vue';
 export { default as FluxContainer } from './FluxContainer.vue';
+export { default as FluxContextMenu } from './FluxContextMenu.vue';
 export { default as FluxDataTable } from './FluxDataTable.vue';
 export { default as FluxDatePicker } from './FluxDatePicker.vue';
+export { default as FluxDescriptionItem } from './FluxDescriptionItem.vue';
+export { default as FluxDescriptionList } from './FluxDescriptionList.vue';
 export { default as FluxDestructiveButton } from './FluxDestructiveButton.vue';
 export { default as FluxDisabled } from './FluxDisabled.vue';
 export { default as FluxDivider } from './FluxDivider.vue';
@@ -59,6 +63,7 @@ export { default as FluxForm } from './FluxForm.vue';
 export { default as FluxFormCheckbox } from './FluxFormCheckbox.vue';
 export { default as FluxFormCheckboxGroup } from './FluxFormCheckboxGroup.vue';
 export { default as FluxFormColumn } from './FluxFormColumn.vue';
+export { default as FluxFormCombobox } from './FluxFormCombobox.vue';
 export { default as FluxFormDateInput } from './FluxFormDateInput.vue';
 export { default as FluxFormDateRangeInput } from './FluxFormDateRangeInput.vue';
 export { default as FluxFormDateTimeInput } from './FluxFormDateTimeInput.vue';
@@ -73,11 +78,13 @@ export { default as FluxFormPinInput } from './FluxFormPinInput.vue';
 export { default as FluxFormRadio } from './FluxFormRadio.vue';
 export { default as FluxFormRadioGroup } from './FluxFormRadioGroup.vue';
 export { default as FluxFormRangeSlider } from './FluxFormRangeSlider.vue';
+export { default as FluxFormRating } from './FluxFormRating.vue';
 export { default as FluxFormRow } from './FluxFormRow.vue';
 export { default as FluxFormSection } from './FluxFormSection.vue';
 export { default as FluxFormSelect } from './FluxFormSelect.vue';
 export { default as FluxFormSelectAsync } from './FluxFormSelectAsync.vue';
 export { default as FluxFormSlider } from './FluxFormSlider.vue';
+export { default as FluxFormTagsInput } from './FluxFormTagsInput.vue';
 export { default as FluxFormTextArea } from './FluxFormTextArea.vue';
 export { default as FluxFormTimeZonePicker } from './FluxFormTimeZonePicker.vue';
 export { default as FluxFormTreeViewSelect } from './FluxFormTreeViewSelect.vue';
@@ -88,6 +95,7 @@ export { default as FluxGridColumn } from './FluxGridColumn.vue';
 export { default as FluxGridPattern } from './FluxGridPattern.vue';
 export { default as FluxIcon } from './FluxIcon.vue';
 export { default as FluxInfo } from './FluxInfo.vue';
+export { default as FluxInlineEdit } from './FluxInlineEdit.vue';
 export { default as FluxKanban } from './FluxKanban.vue';
 export { default as FluxKanbanColumn } from './FluxKanbanColumn.vue';
 export { default as FluxKanbanItem } from './FluxKanbanItem.vue';
@@ -102,6 +110,7 @@ export { default as FluxLayerPaneSecondary } from './FluxLayerPaneSecondary.vue'
 export { default as FluxLink } from './FluxLink.vue';
 export { default as FluxMenu } from './FluxMenu.vue';
 export { default as FluxMenuCollapsible } from './FluxMenuCollapsible.vue';
+export { default as FluxMenuFlyout } from './FluxMenuFlyout.vue';
 export { default as FluxMenuGroup } from './FluxMenuGroup.vue';
 export { default as FluxMenuItem } from './FluxMenuItem.vue';
 export { default as FluxMenuOptions } from './FluxMenuOptions.vue';
@@ -171,5 +180,8 @@ export { default as FluxToolbar } from './FluxToolbar.vue';
 export { default as FluxToolbarGroup } from './FluxToolbarGroup.vue';
 export { default as FluxTooltip } from './FluxTooltip.vue';
 export { default as FluxTooltipProvider } from './FluxTooltipProvider.vue';
+export { default as FluxTour } from './FluxTour.vue';
+export { default as FluxTourItem } from './FluxTourItem.vue';
 export { default as FluxTreeView } from './FluxTreeView.vue';
+export { default as FluxVirtualScroller } from './FluxVirtualScroller.vue';
 export { default as FluxWindow } from './FluxWindow.vue';