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

package/src/component/FluxFlex.vue

@@ -0,0 +1,53 @@
+<template>
+    <Component
+        :is="tag ?? 'div'"
+        :class="clsx(
+            isInline ? $style.flexInline : $style.flex,
+            direction === 'horizontal' && $style.flexDirectionHorizontal,
+            direction === 'vertical' && $style.flexDirectionVertical,
+            align === 'start' && $style.flexAlignStart,
+            align === 'center' && $style.flexAlignCenter,
+            align === 'end' && $style.flexAlignEnd,
+            align === 'stretch' && $style.flexAlignStretch,
+            align === 'baseline' && $style.flexAlignBaseline,
+            justify === 'start' && $style.flexJustifyStart,
+            justify === 'center' && $style.flexJustifyCenter,
+            justify === 'end' && $style.flexJustifyEnd,
+            justify === 'between' && $style.flexJustifyBetween,
+            justify === 'around' && $style.flexJustifyAround,
+            justify === 'evenly' && $style.flexJustifyEvenly,
+            wrap === 'wrap' && $style.flexWrapWrap,
+            wrap === 'nowrap' && $style.flexWrapNowrap,
+            wrap === 'wrap-reverse' && $style.flexWrapWrapReverse
+        )"
+        :style="{
+            '--gap': gap != null ? `${gap}px` : undefined
+        }">
+        <slot/>
+    </Component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxAlign, FluxDirection, FluxFlexWrap, FluxJustify } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Flex.module.scss';
+
+    const {
+        direction = 'horizontal'
+    } = defineProps<{
+        readonly align?: FluxAlign;
+        readonly direction?: FluxDirection;
+        readonly gap?: number;
+        readonly isInline?: boolean;
+        readonly justify?: FluxJustify;
+        readonly tag?: keyof HTMLElementTagNameMap;
+        readonly wrap?: FluxFlexWrap;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxFlexItem.vue

@@ -0,0 +1,40 @@
+<template>
+    <component :is="rendered"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import { cloneVNode, computed, h, useSlots, type VNode } from 'vue';
+    import $style from '~flux/components/css/component/Flex.module.scss';
+
+    const props = defineProps<{
+        readonly basis?: number | string;
+        readonly grow?: number;
+        readonly shrink?: number;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const slots = useSlots();
+
+    const flexStyle = computed(() => ({
+        flexBasis: typeof props.basis === 'number' ? `${props.basis}px` : props.basis,
+        flexGrow: props.grow,
+        flexShrink: props.shrink
+    }));
+
+    const rendered = computed(() => {
+        const children = flattenVNodeTree(slots.default?.() ?? []);
+        const extra = {class: $style.flexItem, style: flexStyle.value};
+
+        if (children.length === 1) {
+            return cloneVNode(children[0], extra);
+        }
+
+        return h('div', extra, children);
+    });
+</script>

package/src/component/FluxFormDateTimeInput.vue

@@ -1,7 +1,6 @@
 <template>
-    <FluxStack
+    <FluxFlex
         :class="$style.formDateTimeInput"
-        direction="horizontal"
         :gap="15"
         :aria-disabled="disabled ? true : undefined">
         <FluxFlyout
@@ -40,7 +39,7 @@
             type="time"
             :model-value="localValue"
             @update:model-value="setTime"/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
@@ -52,11 +51,11 @@
     import { useDisabled } from '~flux/components/composable';
     import { useDateFlyout } from '~flux/components/composable/private';
     import FluxDatePicker from './FluxDatePicker.vue';
+    import FluxFlex from './FluxFlex.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import FluxStack from './FluxStack.vue';
     import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<DateTime | null>({

package/src/component/FluxGrid.vue

@@ -1,12 +1,13 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.grid"
         :style="{
             '--gap': `${gap}px`,
             '--columns': columns
         }">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
@@ -21,6 +22,7 @@
     } = defineProps<{
         readonly columns?: number;
         readonly gap?: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{

package/src/component/FluxGridColumn.vue

@@ -1,5 +1,6 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.gridColumn"
         :style="{
             '--xs': xs ?? 12,
@@ -9,7 +10,7 @@
             '--xl': xl ?? lg ?? md ?? sm ?? xs ?? 12
         }">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
@@ -24,6 +25,7 @@
         readonly md?: number;
         readonly lg?: number;
         readonly xl?: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{

package/src/component/FluxInfoStack.vue

@@ -1,16 +1,16 @@
 <template>
-    <FluxStack
+    <FluxFlex
         direction="vertical"
         :gap="18">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     setup
     lang="ts">
     import type { VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxItemStack.vue

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

package/src/component/FluxKanbanColumn.vue

@@ -22,9 +22,17 @@
             @dragend="onColumnDragEnd"
             @dragover="onColumnDragOver"
             @drop="onColumnDrop">
-            <slot name="header">
-                <span :class="$style.kanbanColumnLabel">{{ label }}</span>
-            </slot>
+            <div :class="$style.kanbanColumnHeaderCaption">
+                <FluxIcon
+                    v-if="icon"
+                    :name="icon"/>
+
+                <span>{{ label }}</span>
+
+                <FluxBadge
+                    v-if="count"
+                    :label="String(count)"/>
+            </div>
 
             <slot name="actions"/>
         </header>
@@ -68,10 +76,13 @@
     lang="ts"
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
+    import type { FluxIconName } from '@flux-ui/types';
     import { Comment, computed, onBeforeUnmount, onMounted, provide, Text, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';
     import { useDisabled, useKanbanInjection } from '~flux/components/composable';
     import { FluxDisabledInjectionKey } from '~flux/components/data';
     import $style from '~flux/components/css/component/Kanban.module.scss';
+    import FluxBadge from './FluxBadge.vue';
+    import FluxIcon from './FluxIcon.vue';
 
     const {
         columnId,
@@ -79,7 +90,9 @@
         label
     } = defineProps<{
         readonly columnId: string | number;
+        readonly count: string | number;
         readonly disabled?: boolean;
+        readonly icon?: FluxIconName;
         readonly label: string;
     }>();
 

package/src/component/FluxNoticeStack.vue

@@ -1,16 +1,16 @@
 <template>
-    <FluxStack
+    <FluxFlex
         direction="vertical"
         :gap="6">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxPane.vue

@@ -2,13 +2,15 @@
     <div :class="CLASS_MAP[variant]">
         <slot/>
 
-        <slot
-            v-if="isLoading"
-            name="loader">
-            <div :class="$style.paneLoader">
-                <FluxSpinner/>
-            </div>
-        </slot>
+        <FluxFadeTransition>
+            <slot
+                v-if="isLoading"
+                name="loader">
+                <div :class="$style.paneLoader">
+                    <FluxSpinner/>
+                </div>
+            </slot>
+        </FluxFadeTransition>
 
         <div
             v-if="tag"
@@ -22,6 +24,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '~flux/components/css/component/Pane.module.scss';
 

package/src/component/FluxProgressBar.vue

@@ -1,6 +1,7 @@
 <template>
-    <FluxStack
+    <FluxFlex
         :class="$style.progressBar"
+        direction="vertical"
         :gap="6"
         role="progressbar"
         :aria-valuenow="value"
@@ -34,7 +35,7 @@
                 </span>
             </FluxFadeTransition>
         </div>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
@@ -42,7 +43,7 @@
     setup>
     import { computed, unref } from 'vue';
     import { FluxFadeTransition } from '~flux/components/transition';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
     import $style from '~flux/components/css/component/Progress.module.scss';
 
     const {

package/src/component/FluxScroller.vue

@@ -0,0 +1,63 @@
+<template>
+    <Component
+        :is="tag ?? 'div'"
+        ref="element"
+        :class="clsx(
+            $style.scroller,
+            direction === 'vertical' && $style.scrollerDirectionVertical,
+            direction === 'horizontal' && $style.scrollerDirectionHorizontal,
+            direction === 'both' && $style.scrollerDirectionBoth,
+            snap && direction === 'vertical' && (snap === 'mandatory' ? $style.scrollerSnapMandatoryVertical : $style.scrollerSnapProximityVertical),
+            snap && direction === 'horizontal' && (snap === 'mandatory' ? $style.scrollerSnapMandatoryHorizontal : $style.scrollerSnapProximityHorizontal),
+            snap && direction === 'both' && (snap === 'mandatory' ? $style.scrollerSnapMandatoryBoth : $style.scrollerSnapProximityBoth),
+            snapAlign === 'start' && $style.scrollerSnapAlignStart,
+            snapAlign === 'center' && $style.scrollerSnapAlignCenter,
+            snapAlign === 'end' && $style.scrollerSnapAlignEnd,
+            hasFade && direction === 'horizontal' && $style.scrollerFadeHorizontal,
+            hasFade && direction !== 'horizontal' && $style.scrollerFadeVertical
+        )"
+        :style="hasFade ? fadeStyle : undefined">
+        <slot/>
+    </Component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useScrollEdges } from '@flux-ui/internals';
+    import type { FluxAlignment, FluxDirection } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, useTemplateRef, type VNode } from 'vue';
+    import $style from '~flux/components/css/component/Scroller.module.scss';
+
+    const FADE_DISTANCE = 24;
+
+    const {
+        direction = 'vertical',
+        hasFade = false
+    } = defineProps<{
+        readonly direction?: FluxDirection | 'both';
+        readonly hasFade?: boolean;
+        readonly snap?: 'mandatory' | 'proximity';
+        readonly snapAlign?: FluxAlignment;
+        readonly tag?: keyof HTMLElementTagNameMap;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const elementRef = useTemplateRef<HTMLElement>('element');
+    const {isAtStart, isAtEnd, isAtLeft, isAtRight} = useScrollEdges(elementRef);
+
+    const fadeStyle = computed(() => {
+        const isHorizontal = direction === 'horizontal';
+        const startEdge = isHorizontal ? isAtLeft.value : isAtStart.value;
+        const endEdge = isHorizontal ? isAtRight.value : isAtEnd.value;
+
+        return {
+            '--fade-start': startEdge ? '0px' : `${FADE_DISTANCE}px`,
+            '--fade-end': endEdge ? '0px' : `${FADE_DISTANCE}px`
+        };
+    });
+</script>

package/src/component/FluxSplitView.vue

@@ -0,0 +1,101 @@
+<template>
+    <Component
+        :is="tag ?? 'div'"
+        ref="container"
+        :class="clsx(
+            direction === 'horizontal' && $style.splitViewHorizontal,
+            direction === 'vertical' && $style.splitViewVertical,
+            isDragging && $style.splitViewDragging
+        )"
+        :style="templateStyle">
+        <template v-for="(pane, index) in panes" :key="pane.id">
+            <component :is="pane.vnode"/>
+
+            <button
+                v-if="index < panes.length - 1"
+                :class="direction === 'horizontal' ? $style.splitViewHandle : $style.splitViewHandleVertical"
+                type="button"
+                role="separator"
+                :aria-orientation="direction === 'horizontal' ? 'vertical' : 'horizontal'"
+                :aria-valuemin="0"
+                :aria-valuenow="Math.round(sizes[index] ?? 0)"
+                :tabindex="pane.isResizable ? 0 : -1"
+                @pointerdown="onHandlePointerDown($event, index)"
+                @keydown="onHandleKeyDown($event, index)"/>
+        </template>
+    </Component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import type { FluxDirection } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, toRef, useTemplateRef, type VNode } from 'vue';
+    import { type SplitViewPane, useSplitView } from '~flux/components/composable/private';
+    import FluxSplitViewPane from './FluxSplitViewPane.vue';
+    import $style from '~flux/components/css/component/SplitView.module.scss';
+
+    type ParsedPane = SplitViewPane & {
+        readonly vnode: VNode;
+    };
+
+    const {
+        direction = 'horizontal',
+        rememberKey
+    } = defineProps<{
+        readonly direction?: FluxDirection;
+        readonly rememberKey?: string;
+        readonly tag?: keyof HTMLElementTagNameMap;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const containerRef = useTemplateRef<HTMLElement>('container');
+
+    const panes = computed<readonly ParsedPane[]>(() => {
+        const vnodes = flattenVNodeTree(slots.default?.() ?? []);
+        const out: ParsedPane[] = [];
+
+        for (const vnode of vnodes) {
+            if (vnode.type !== FluxSplitViewPane) {
+                continue;
+            }
+
+            const props = vnode.props ?? {};
+            const defaultSize = props.defaultSize ?? props['default-size'];
+            const minSize = props.minSize ?? props['min-size'];
+            const maxSize = props.maxSize ?? props['max-size'];
+            const isResizable = props.isResizable ?? props['is-resizable'];
+
+            out.push({
+                id: out.length,
+                vnode,
+                defaultSize: defaultSize as number | string | undefined,
+                minSize: typeof minSize === 'number' ? minSize : 64,
+                maxSize: typeof maxSize === 'number' ? maxSize : undefined,
+                isResizable: isResizable !== false && isResizable !== 'false'
+            });
+        }
+
+        return out;
+    });
+
+    const paneSpecs = computed<readonly SplitViewPane[]>(() => panes.value);
+
+    const {
+        sizes,
+        templateStyle,
+        isDragging,
+        onHandlePointerDown,
+        onHandleKeyDown
+    } = useSplitView({
+        containerRef,
+        direction: toRef(() => direction),
+        panes: paneSpecs,
+        rememberKey
+    });
+</script>

package/src/component/FluxSplitViewPane.vue

@@ -0,0 +1,23 @@
+<template>
+    <div :class="$style.splitViewPane">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/SplitView.module.scss';
+
+    defineProps<{
+        readonly defaultSize?: number | string;
+        readonly minSize?: number;
+        readonly maxSize?: number;
+        readonly isResizable?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxSticky.vue

@@ -0,0 +1,67 @@
+<template>
+    <div
+        v-if="position === 'top'"
+        ref="sentinel"
+        :class="$style.stickySentinel"
+        aria-hidden="true"/>
+
+    <Component
+        :is="tag ?? 'div'"
+        :class="clsx(
+            position === 'top' ? $style.stickyTop : $style.stickyBottom,
+            hasShadowOnStick && $style.hasShadow
+        )"
+        :data-stuck="isStuck"
+        :style="{'--offset': `${offset}px`}">
+        <slot v-bind="{isStuck}"/>
+    </Component>
+
+    <div
+        v-if="position === 'bottom'"
+        ref="sentinel"
+        :class="$style.stickySentinel"
+        aria-hidden="true"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { ref, useTemplateRef, type VNode, watch } from 'vue';
+    import $style from '~flux/components/css/component/Sticky.module.scss';
+
+    const {
+        offset = 0,
+        position = 'top'
+    } = defineProps<{
+        readonly hasShadowOnStick?: boolean;
+        readonly offset?: number;
+        readonly position?: 'top' | 'bottom';
+        readonly tag?: keyof HTMLElementTagNameMap;
+    }>();
+
+    defineSlots<{
+        default(props: { isStuck: boolean }): VNode[];
+    }>();
+
+    const sentinelRef = useTemplateRef<HTMLElement>('sentinel');
+    const isStuck = ref(false);
+
+    watch(sentinelRef, (sentinel, _, onCleanup) => {
+        if (!sentinel) {
+            return;
+        }
+
+        const observer = new IntersectionObserver(([entry]) => {
+            isStuck.value = !entry.isIntersecting;
+        }, {
+            threshold: 0
+        });
+
+        observer.observe(sentinel);
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+</script>

package/src/component/FluxTagStack.vue

@@ -1,17 +1,17 @@
 <template>
-    <FluxStack
+    <FluxFlex
         direction="horizontal"
         :gap="6"
-        is-wrapping>
+        wrap="wrap">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <FluxStack
+    <FluxFlex
         :class="clsx(
             !!floatingMode ? $style.toolbarFloating : $style.toolbarFlat,
             floatingMode === 'free' && $style.isFree,
@@ -8,11 +8,10 @@
             floatingMode === 'bottom-end' && $style.isBottomEnd,
             floatingMode === 'bottom-start' && $style.isBottomStart,
         )"
-        direction="horizontal"
         :gap="6"
         tag="nav">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
@@ -20,7 +19,7 @@
     setup>
     import { clsx } from 'clsx';
     import type { VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
     import $style from '~flux/components/css/component/Toolbar.module.scss';
 
     defineProps<{

package/src/component/FluxToolbarGroup.vue

@@ -1,17 +1,16 @@
 <template>
-    <FluxStack
-        direction="horizontal"
+    <FluxFlex
         :gap="3"
         tag="nav">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
         default(): VNode[];