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

package/src/component/FluxKanban.vue

@@ -0,0 +1,96 @@
+<template>
+    <div
+        ref="root"
+        role="application"
+        aria-roledescription="Kanban board"
+        :aria-label="ariaLabel"
+        :class="[$style.kanban, isDragging && $style.isBoardDragging]">
+        <slot/>
+
+        <div
+            aria-live="polite"
+            aria-atomic="true"
+            :class="$style.kanbanLiveRegion">
+            {{ liveMessage }}
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxKanbanMoveColumnEvent, FluxKanbanMoveEvent } from '@flux-ui/types';
+    import { computed, onBeforeUnmount, onMounted, provide, ref, toRef, useTemplateRef, watch } from 'vue';
+    import { useKanban } from '~flux/components/composable/private';
+    import { FluxDisabledInjectionKey, FluxKanbanInjectionKey } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Kanban.module.scss';
+
+    const {
+        ariaLabel,
+        canMove,
+        disabled = false,
+        reorderableColumns = false
+    } = defineProps<{
+        readonly ariaLabel?: string;
+        readonly canMove?: (event: FluxKanbanMoveEvent) => boolean;
+        readonly disabled?: boolean;
+        readonly reorderableColumns?: boolean;
+    }>();
+
+    const emit = defineEmits<{
+        move: [FluxKanbanMoveEvent];
+        moveColumn: [FluxKanbanMoveColumnEvent];
+    }>();
+
+    defineSlots<{
+        default?(): any;
+    }>();
+
+    const root = useTemplateRef('root');
+    const liveMessage = ref('');
+
+    const disabledRef = toRef(() => disabled);
+    const reorderableColumnsRef = toRef(() => reorderableColumns);
+    const canMoveRef = toRef(() => canMove);
+
+    const kanban = useKanban({
+        disabled: disabledRef,
+        reorderableColumns: reorderableColumnsRef,
+        canMove: canMoveRef,
+        onMove: event => emit('move', event),
+        onMoveColumn: event => emit('moveColumn', event),
+        onAnnounce: message => {
+            liveMessage.value = '';
+            requestAnimationFrame(() => {
+                liveMessage.value = message;
+            });
+        }
+    });
+
+    const isDragging = computed(() => kanban.dragState.value !== null || kanban.columnDragState.value !== null);
+
+    function onPointerMove(evt: DragEvent | PointerEvent): void {
+        kanban.onPointerMove(evt.clientX, evt.clientY);
+    }
+
+    onMounted(() => {
+        kanban.setBoardElement(root.value);
+        window.addEventListener('drag', onPointerMove);
+        window.addEventListener('dragend', kanban.cancelAll);
+    });
+
+    onBeforeUnmount(() => {
+        kanban.setBoardElement(null);
+        window.removeEventListener('drag', onPointerMove);
+        window.removeEventListener('dragend', kanban.cancelAll);
+    });
+
+    watch(() => disabled, value => {
+        if (value) {
+            kanban.cancelAll();
+        }
+    });
+
+    provide(FluxKanbanInjectionKey, kanban);
+    provide(FluxDisabledInjectionKey, disabledRef);
+</script>

package/src/component/FluxKanbanColumn.vue

@@ -0,0 +1,277 @@
+<template>
+    <div
+        ref="root"
+        role="list"
+        aria-roledescription="Kanban column"
+        :aria-label="label"
+        :aria-disabled="disabledState ? true : undefined"
+        :class="[
+            $style.kanbanColumn,
+            isOver && $style.isOver,
+            isOver && !kanban.isDropAllowed.value && $style.isDropDisallowed,
+            isReorderable && $style.isReorderable,
+            isColumnDragging && $style.isColumnDragging,
+            isColumnDropBefore && $style.isColumnDropBefore,
+            disabledState && $style.isDisabled
+        ]">
+        <header
+            :class="$style.kanbanColumnHeader"
+            :draggable="isReorderable && !disabledState"
+            :tabindex="isReorderable && !disabledState ? 0 : undefined"
+            @dragstart="onColumnDragStart"
+            @dragend="onColumnDragEnd"
+            @dragover="onColumnDragOver"
+            @drop="onColumnDrop">
+            <slot name="header">
+                <span :class="$style.kanbanColumnLabel">{{ label }}</span>
+            </slot>
+
+            <slot name="actions"/>
+        </header>
+
+        <main
+            ref="body"
+            :class="$style.kanbanColumnBody"
+            @dragenter="onDragEnter"
+            @dragleave="onDragLeave"
+            @dragover="onDragOver"
+            @drop="onDrop">
+            <slot/>
+
+            <div
+                v-if="isEmpty"
+                :class="$style.kanbanColumnEmpty">
+                <slot name="empty"/>
+            </div>
+
+            <div
+                aria-hidden="true"
+                :class="[
+                    $style.kanbanDropIndicator,
+                    dropIndicator !== null && $style.isVisible,
+                    dropIndicator !== null && !kanban.isDropAllowed.value && $style.isDisallowed
+                ]"
+                :style="dropIndicator !== null ? { transform: `translateY(${dropIndicator}px)` } : undefined"/>
+        </main>
+
+        <footer
+            v-if="hasFooter"
+            :class="$style.kanbanColumnFooter">
+            <slot
+                v-if="hasFooter"
+                name="footer"/>
+        </footer>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    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';
+
+    const {
+        columnId,
+        disabled = false,
+        label
+    } = defineProps<{
+        readonly columnId: string | number;
+        readonly disabled?: boolean;
+        readonly label: string;
+    }>();
+
+    defineSlots<{
+        default?(): any;
+        header?(): any;
+        actions?(): any;
+        empty?(): any;
+        footer?(): any;
+    }>();
+
+    const kanban = useKanbanInjection();
+    const root = useTemplateRef('root');
+    const body = useTemplateRef('body');
+    const slots = useSlots();
+
+    const disabledState = useDisabled(toRef(() => disabled));
+    provide(FluxDisabledInjectionKey, disabledState);
+
+    const isOver = computed(() => kanban.isOverColumnId.value === columnId);
+    const isReorderable = computed(() => unref(kanban.reorderableColumns) && !unref(disabledState));
+
+    const dropIndicator = computed<number | null>(() => {
+        const state = unref(kanban.dragState);
+        const bodyEl = body.value;
+
+        if (!state || state.dropColumnId !== columnId || !(bodyEl instanceof HTMLElement)) {
+            return null;
+        }
+
+        const items = Array.from(bodyEl.children).filter(
+            (child): child is HTMLElement => child instanceof HTMLElement && kanban.getItemInfo(child) !== undefined
+        );
+
+        if (state.beforeItemId === null) {
+            const last = items[items.length - 1];
+            return last ? last.offsetTop + last.offsetHeight + 4 : 4;
+        }
+
+        const target = items.find(el => kanban.getItemInfo(el)?.itemId === state.beforeItemId);
+        return target ? target.offsetTop - 5 : null;
+    });
+
+    const isColumnDragging = computed(() => unref(kanban.columnDragState)?.columnId === columnId);
+
+    const isColumnDropBefore = computed(() => {
+        const state = unref(kanban.columnDragState);
+
+        if (!state || state.dropBeforeColumnId !== columnId || state.columnId === columnId) {
+            return false;
+        }
+
+        return true;
+    });
+
+    const isEmpty = computed(() => {
+        if (!slots.empty) {
+            return false;
+        }
+
+        const defaultSlot = slots.default?.();
+
+        if (!defaultSlot || defaultSlot.length === 0) {
+            return true;
+        }
+
+        const hasContent = flattenVNodeTree(defaultSlot).some(vnode => vnode.type !== Comment && vnode.type !== Text);
+        return !hasContent;
+    });
+
+    const hasFooter = computed(() => !!slots.footer);
+
+    function onDragEnter(): void {
+        kanban.enterColumn(columnId);
+    }
+
+    function onDragLeave(): void {
+        kanban.leaveColumn(columnId);
+    }
+
+    function onDragOver(evt: DragEvent): void {
+        if (unref(disabledState) || !unref(kanban.dragState)) {
+            return;
+        }
+
+        evt.preventDefault();
+
+        const target = evt.target as Element;
+        const isOverItem = !!target.closest('[data-kanban-item]');
+
+        if (!isOverItem) {
+            kanban.updateDropTarget(columnId, null);
+        }
+    }
+
+    function onDrop(evt: DragEvent): void {
+        if (unref(disabledState) || !unref(kanban.dragState)) {
+            return;
+        }
+
+        evt.preventDefault();
+        kanban.commitDrop();
+    }
+
+    function onColumnDragStart(evt: DragEvent): void {
+        if (!unref(isReorderable)) {
+            return;
+        }
+
+        if (evt.dataTransfer) {
+            evt.dataTransfer.effectAllowed = 'move';
+            evt.dataTransfer.setData('text/plain', `column:${String(columnId)}`);
+        }
+
+        kanban.startColumnDrag(columnId);
+    }
+
+    function onColumnDragEnd(): void {
+        kanban.endColumnDrag();
+    }
+
+    function onColumnDragOver(evt: DragEvent): void {
+        const state = unref(kanban.columnDragState);
+
+        if (!state || state.columnId === columnId) {
+            return;
+        }
+
+        evt.preventDefault();
+
+        const headerEl = evt.currentTarget as Element;
+        const rect = headerEl.getBoundingClientRect();
+
+        if (evt.clientX < rect.left + rect.width / 2) {
+            kanban.updateColumnDropTarget(columnId);
+        } else {
+            let next = root.value?.nextElementSibling ?? null;
+
+            while (next) {
+                const info = kanban.getColumnInfo(next);
+
+                if (info) {
+                    kanban.updateColumnDropTarget(info.columnId);
+                    return;
+                }
+
+                next = next.nextElementSibling;
+            }
+
+            kanban.updateColumnDropTarget(null);
+        }
+    }
+
+    function onColumnDrop(evt: DragEvent): void {
+        if (!unref(kanban.columnDragState)) {
+            return;
+        }
+
+        evt.preventDefault();
+        kanban.commitColumnDrop();
+    }
+
+    onMounted(() => {
+        if (root.value) {
+            kanban.registerColumn(root.value, columnId);
+        }
+
+        if (body.value) {
+            kanban.setColumnBodyElement(columnId, body.value);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (root.value) {
+            kanban.unregisterColumn(root.value);
+        }
+
+        kanban.setColumnBodyElement(columnId, null);
+    });
+
+    watch(() => columnId, (newId, oldId) => {
+        if (oldId !== undefined) {
+            kanban.setColumnBodyElement(oldId, null);
+        }
+
+        if (root.value) {
+            kanban.unregisterColumn(root.value);
+            kanban.registerColumn(root.value, newId);
+        }
+
+        if (body.value) {
+            kanban.setColumnBodyElement(newId, body.value);
+        }
+    });
+</script>

package/src/component/FluxKanbanItem.vue

@@ -0,0 +1,162 @@
+<template>
+    <div
+        ref="root"
+        data-kanban-item
+        role="listitem"
+        aria-roledescription="Kanban item"
+        :aria-disabled="disabledState ? true : undefined"
+        :class="[
+            $style.kanbanItem,
+            isDragging && $style.isDragging,
+            isGrabbed && $style.isGrabbed,
+            disabledState && $style.isDisabled
+        ]"
+        :draggable="!disabledState"
+        :tabindex="disabledState ? -1 : 0"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+        @dragover.stop="onDragOver"
+        @focus="onFocus"
+        @keydown="handleKeyDown">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useKeyboardGrab } from '@flux-ui/internals';
+    import { computed, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { useDisabled, useKanbanInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/Kanban.module.scss';
+
+    const {
+        columnId,
+        disabled = false,
+        itemId
+    } = defineProps<{
+        readonly columnId: string | number;
+        readonly disabled?: boolean;
+        readonly itemId: string | number;
+    }>();
+
+    defineSlots<{
+        default?(): any;
+    }>();
+
+    const kanban = useKanbanInjection();
+    const root = useTemplateRef('root');
+    const disabledState = useDisabled(toRef(() => disabled));
+
+    const isDragging = computed(() => {
+        const state = unref(kanban.dragState);
+        return state?.itemId === itemId && state?.mode === 'pointer';
+    });
+
+    const {isGrabbed, handleKeyDown, release} = useKeyboardGrab<true>({
+        isDraggable: computed(() => !unref(disabledState)),
+        itemId: toRef(() => itemId),
+        grabbedId: kanban.grabbedId,
+        onGrab() {
+            kanban.grabItem(itemId, columnId);
+            return true;
+        },
+        onMove(direction) {
+            kanban.moveKeyboard(direction);
+        },
+        onCommit() {
+            kanban.commitKeyboardDrop();
+        },
+        onCancel() {
+            kanban.cancelKeyboardDrop();
+        }
+    });
+
+    onMounted(() => {
+        if (root.value) {
+            kanban.registerItem(root.value, itemId);
+        }
+
+        if (kanban.isItemGrabbed(itemId)) {
+            root.value?.focus();
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (root.value) {
+            kanban.unregisterItem(root.value);
+        }
+    });
+
+    watch(() => itemId, (newId, oldId) => {
+        if (root.value && oldId !== undefined) {
+            kanban.unregisterItem(root.value);
+            kanban.registerItem(root.value, newId);
+        }
+    });
+
+    function onDragStart(evt: DragEvent): void {
+        if (unref(disabledState)) {
+            evt.preventDefault();
+            return;
+        }
+
+        if (isGrabbed.value) {
+            kanban.cancelKeyboardDrop();
+            release();
+        }
+
+        kanban.startDrag(itemId, columnId);
+
+        if (evt.dataTransfer) {
+            evt.dataTransfer.effectAllowed = 'move';
+            evt.dataTransfer.setData('text/plain', `item:${String(itemId)}`);
+
+            if (root.value) {
+                const offsetX = evt.offsetX || root.value.getBoundingClientRect().width / 2;
+                const offsetY = evt.offsetY || 12;
+                evt.dataTransfer.setDragImage(root.value, offsetX, offsetY);
+            }
+        }
+    }
+
+    function onDragEnd(): void {
+        kanban.endDrag();
+    }
+
+    function onFocus(): void {
+        root.value?.scrollIntoView({block: 'nearest', inline: 'nearest', behavior: 'smooth'});
+    }
+
+    function onDragOver(evt: DragEvent): void {
+        const state = unref(kanban.dragState);
+
+        if (!state || unref(disabledState)) {
+            return;
+        }
+
+        evt.preventDefault();
+
+        const itemEl = evt.currentTarget as Element;
+        const rect = itemEl.getBoundingClientRect();
+
+        if (evt.clientY < rect.top + rect.height / 2) {
+            kanban.updateDropTarget(columnId, itemId);
+        } else {
+            let next = itemEl.nextElementSibling;
+
+            while (next) {
+                const info = kanban.getItemInfo(next);
+
+                if (info) {
+                    kanban.updateDropTarget(columnId, info.itemId);
+                    return;
+                }
+
+                next = next.nextElementSibling;
+            }
+
+            kanban.updateDropTarget(columnId, null);
+        }
+    }
+</script>

package/src/component/FluxLayerPane.vue

@@ -0,0 +1,16 @@
+<template>
+    <div :class="$style.layerPane">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/LayerPane.module.scss';
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxLayerPaneSecondary.vue

@@ -0,0 +1,16 @@
+<template>
+    <div :class="$style.layerPaneSecondary">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/LayerPane.module.scss';
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxLegend.vue

@@ -1,14 +1,14 @@
 <template>
     <div :class="direction === 'horizontal' ? $style.legendHorizontal : $style.legendVertical">
-        <template v-for="item of items">
-            <span
-                :class="$style.legendItem"
-                :style="{
-                    '--color': item.color
-                }">
-                {{ item.label }}
-            </span>
-        </template>
+        <span
+            v-for="(item, index) of items"
+            :key="index"
+            :class="$style.legendItem"
+            :style="{
+                '--color': item.color
+            }">
+            {{ item.label }}
+        </span>
     </div>
 </template>
 
@@ -16,7 +16,7 @@
     lang="ts"
     setup>
     import type { FluxDirection, FluxLegendObject } from '@flux-ui/types';
-    import $style from '$flux/css/component/Legend.module.scss';
+    import $style from '~flux/components/css/component/Legend.module.scss';
 
     const {
         direction = 'horizontal'

package/src/component/FluxLink.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots, FluxIconName } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     const emit = defineEmits<FluxButtonEmits>();
 

package/src/component/FluxMenu.vue

@@ -12,15 +12,15 @@
     lang="ts"
     setup>
     import { useFocusZone } from '@flux-ui/internals';
-    import { useTemplateRef } from 'vue';
-    import $style from '$flux/css/component/Menu.module.scss';
+    import { useTemplateRef, type VNode } from 'vue';
+    import $style from '~flux/components/css/component/Menu.module.scss';
 
     defineProps<{
         readonly isLarge?: boolean;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const elementRef = useTemplateRef('element');