@flux-ui/components 3.1.2 → 3.1.4

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';

package/src/component/primitive/AnchorPopup.vue

@@ -20,12 +20,14 @@
 
     const {
         anchor,
+        clampToViewport,
         direction = 'vertical',
         margin = 12,
         position,
         useAnchorWidth
     } = defineProps<{
         readonly anchor?: ComponentPublicInstance | HTMLElement | null;
+        readonly clampToViewport?: boolean;
         readonly direction?: FluxDirection;
         readonly margin?: number;
         readonly position?:
@@ -52,6 +54,9 @@
     onMounted(() => {
         window.addEventListener('resize', onResize, {passive: true});
         window.addEventListener('scroll', onScroll, {capture: true, passive: true});
+
+        resize();
+        reposition();
     });
 
     onUnmounted(() => {
@@ -161,6 +166,23 @@
                 break;
         }
 
+        if (clampToViewport) {
+            if (position?.startsWith('right') && px + popupWidth > innerWidth - margin) {
+                px = x - popupWidth - margin;
+            } else if (position?.startsWith('left') && px < margin) {
+                px = x + width + margin;
+            }
+
+            if (position?.startsWith('bottom') && py + popupHeight > innerHeight - margin) {
+                py = y - popupHeight - margin;
+            } else if (position?.startsWith('top') && py < margin) {
+                py = y + height + margin;
+            }
+
+            px = Math.min(Math.max(px, margin), Math.max(margin, innerWidth - popupWidth - margin));
+            py = Math.min(Math.max(py, margin), Math.max(margin, innerHeight - popupHeight - margin));
+        }
+
         state.x = px;
         state.y = py;
     }
@@ -185,6 +207,11 @@
         reposition();
     }
 
+    defineExpose({
+        reposition,
+        resize
+    });
+
     watchEffect(() => {
         if (!anchor || (!isHtmlElement(anchor) && !anchor.$el)) {
             return;

package/src/component/primitive/SelectBase.vue

@@ -80,11 +80,19 @@
                     :placeholder="translate('flux.search')"
                     @keydown="onKeyDown"/>
 
-                <FluxMenu v-if="!isLoading && options.length === 0">
+                <FluxMenu v-if="canCreate">
+                    <FluxMenuItem
+                        icon-leading="plus"
+                        :label="translate('flux.createOption', {value: trimmedSearch})"
+                        type="button"
+                        @click="create()"/>
+                </FluxMenu>
+
+                <FluxMenu v-if="!isLoading && options.length === 0 && !canCreate">
                     <FluxMenuSubHeader :label="translate('flux.noItems')"/>
                 </FluxMenu>
 
-                <FluxMenu v-else>
+                <FluxMenu v-else-if="options.length > 0">
                     <template
                         v-for="([item, subItems], index) of options"
                         :key="`group-${index}`">
@@ -162,6 +170,7 @@
         keyDown: [KeyboardEvent];
         deselect: [string | number | null];
         select: [string | number | null];
+        create: [string];
         search: [string];
         close: [];
         open: [];
@@ -177,11 +186,13 @@
 
     const {
         disabled: componentDisabled,
+        isCreatable,
         isMultiple,
         options,
         selected
     } = defineProps<{
         readonly disabled?: boolean;
+        readonly isCreatable?: boolean;
         readonly isLoading?: boolean;
         readonly isMultiple?: boolean;
         readonly isSearchable?: boolean;
@@ -205,6 +216,15 @@
     const focusElement = computed(() => unrefTemplateElement(searchInputElementRef) ?? unrefTemplateElement(anchorRef));
     const highlightedId = computed(() => unref(rawOptions)[unref(highlightedIndex)]?.value);
     const rawOptions = computed(() => options.map(group => group[1]).flat());
+    const trimmedSearch = computed(() => unref(modelSearch).trim());
+    const canCreate = computed(() => {
+        if (!isCreatable || trimmedSearch.value === '') {
+            return false;
+        }
+
+        const query = trimmedSearch.value.toLowerCase();
+        return !unref(rawOptions).some(o => o.label.toLowerCase() === query);
+    });
 
     const {
         isOpen: isPopupOpen,
@@ -236,6 +256,19 @@
         nextTick(() => unref(focusElement)?.focus());
     }
 
+    function create(): void {
+        emit('create', trimmedSearch.value);
+
+        if (!isMultiple) {
+            isPopupOpen.value = false;
+        }
+
+        highlightedIndex.value = INITIAL_HIGHLIGHTED_INDEX;
+        modelSearch.value = '';
+
+        nextTick(() => unref(focusElement)?.focus());
+    }
+
     function onKeyDown(evt: KeyboardEvent): void {
         emit('keyDown', evt);
 
@@ -284,6 +317,8 @@
 
                 if (id !== undefined) {
                     select(id);
+                } else if (unref(canCreate)) {
+                    create();
                 }
                 break;
 

package/src/composable/private/index.ts

@@ -4,6 +4,7 @@ export { default as useDateFlyout } from './useDateFlyout';
 export { default as useDropdownPopup, type UseDropdownPopupOptions, type UseDropdownPopupReturn } from './useDropdownPopup';
 export { default as useFormSelect } from './useFormSelect';
 export { useKanban } from './useKanban';
+export { default as useMenuFlyout, useMenuFlyoutContext, useMenuFlyoutProvider, type UseMenuFlyoutOptions, type UseMenuFlyoutProviderOptions, type UseMenuFlyoutReturn } from './useMenuFlyout';
 export { useSplitView, type SplitViewPane, type UseSplitViewOptions, type UseSplitViewReturn } from './useSplitView';
 export { default as useTranslate } from './useTranslate';
 export { useCommandPalette, type CommandPaletteGroup, type CommandPaletteResultItem } from './useCommandPalette';