@flux-ui/components 3.0.0-next.57 → 3.0.0-next.58

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.57",
+    "version": "3.0.0-next.58",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -49,8 +49,8 @@
     "dependencies": {
         "@basmilius/common": "^3.21.0",
         "@basmilius/utils": "^3.21.0",
-        "@flux-ui/internals": "3.0.0-next.57",
-        "@flux-ui/types": "3.0.0-next.57",
+        "@flux-ui/internals": "3.0.0-next.58",
+        "@flux-ui/types": "3.0.0-next.58",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

package/src/component/FluxKanban.vue

@@ -1,25 +1,103 @@
 <template>
-    <div :class="$style.kanban">
+    <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 { FluxKanbanMoveEvent } from '@flux-ui/types';
-    import { provide } from 'vue';
-    import { FluxKanbanInjectionKey } from '$flux/data/di';
+    import type { FluxKanbanMoveColumnEvent, FluxKanbanMoveEvent } from '@flux-ui/types';
+    import { computed, onBeforeUnmount, onMounted, provide, ref, toRef, useTemplateRef, watch } from 'vue';
+    import { FluxDisabledInjectionKey, FluxKanbanInjectionKey } from '$flux/data/di';
     import { useKanban } from '$flux/composable/private/useKanban';
     import $style from '$flux/css/component/FluxKanban.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;
     }>();
 
-    provide(FluxKanbanInjectionKey, useKanban(event => emit('move', event)));
+    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);
+    }
+
+    function onWindowDrop(): void {
+        kanban.endDrag();
+        kanban.endColumnDrag();
+    }
+
+    onMounted(() => {
+        kanban.setBoardElement(root.value);
+        window.addEventListener('drag', onPointerMove);
+        window.addEventListener('dragend', onWindowDrop);
+    });
+
+    onBeforeUnmount(() => {
+        kanban.setBoardElement(null);
+        window.removeEventListener('drag', onPointerMove);
+        window.removeEventListener('dragend', onWindowDrop);
+    });
+
+    watch(() => disabled, value => {
+        if (value) {
+            kanban.endDrag();
+            kanban.endColumnDrag();
+            kanban.cancelKeyboardDrop();
+        }
+    });
+
+    provide(FluxKanbanInjectionKey, kanban);
+    provide(FluxDisabledInjectionKey, disabledRef);
 </script>

package/src/component/FluxKanbanCard.vue

@@ -2,15 +2,25 @@
     <div
         ref="root"
         data-kanban-card
+        role="listitem"
+        aria-roledescription="Kanban card"
+        :aria-disabled="disabledState ? true : undefined"
+        :aria-grabbed="isGrabbed ? true : undefined"
         :class="[
             $style.kanbanCard,
             isDragging && $style.isDragging,
-            isDropBefore && $style.isDropBefore
+            isGrabbed && $style.isGrabbed,
+            isDropBefore && $style.isDropBefore,
+            isDropBefore && !kanban.isDropAllowed.value && $style.isDropBeforeDisallowed,
+            disabledState && $style.isDisabled
         ]"
-        draggable="true"
+        :draggable="!disabledState"
+        :tabindex="disabledState ? -1 : 0"
         @dragstart="onDragStart"
         @dragend="onDragEnd"
-        @dragover.prevent.stop="onDragOver">
+        @dragover.stop="onDragOver"
+        @focus="onFocus"
+        @keydown="onKeyDown">
         <slot/>
     </div>
 </template>
@@ -18,13 +28,19 @@
 <script
     lang="ts"
     setup>
-    import { computed, inject, onMounted, onUnmounted, unref, useTemplateRef } from 'vue';
+    import { computed, inject, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef, watch } from 'vue';
     import { FluxKanbanInjectionKey } from '$flux/data/di';
-    import $style from '$flux/css/component/FluxKanbanCard.module.scss';
-
-    const {cardId, columnId} = defineProps<{
+    import useDisabled from '$flux/composable/useDisabled';
+    import $style from '$flux/css/component/FluxKanban.module.scss';
+
+    const {
+        cardId,
+        columnId,
+        disabled = false
+    } = defineProps<{
         readonly cardId: string | number;
         readonly columnId: string | number;
+        readonly disabled?: boolean;
     }>();
 
     defineSlots<{
@@ -33,8 +49,10 @@
 
     const kanban = inject(FluxKanbanInjectionKey)!;
     const root = useTemplateRef('root');
+    const disabledState = useDisabled(toRef(() => disabled));
 
-    const isDragging = computed(() => unref(kanban.dragState)?.cardId === cardId);
+    const isDragging = computed(() => unref(kanban.dragState)?.cardId === cardId && unref(kanban.dragState)?.mode === 'pointer');
+    const isGrabbed = computed(() => kanban.isCardGrabbed(cardId));
 
     const isDropBefore = computed(() => {
         const state = unref(kanban.dragState);
@@ -50,19 +68,42 @@
         if (root.value) {
             kanban.registerCard(root.value, cardId);
         }
+
+        if (kanban.isCardGrabbed(cardId)) {
+            root.value?.focus();
+        }
     });
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
         if (root.value) {
             kanban.unregisterCard(root.value);
         }
     });
 
+    watch(() => cardId, (newId, oldId) => {
+        if (root.value && oldId !== undefined) {
+            kanban.unregisterCard(root.value);
+            kanban.registerCard(root.value, newId);
+        }
+    });
+
     function onDragStart(evt: DragEvent): void {
+        if (unref(disabledState)) {
+            evt.preventDefault();
+            return;
+        }
+
         kanban.startDrag(cardId, columnId);
 
         if (evt.dataTransfer) {
             evt.dataTransfer.effectAllowed = 'move';
+            evt.dataTransfer.setData('text/plain', `card:${String(cardId)}`);
+
+            if (root.value) {
+                const offsetX = evt.offsetX || root.value.getBoundingClientRect().width / 2;
+                const offsetY = evt.offsetY || 12;
+                evt.dataTransfer.setDragImage(root.value, offsetX, offsetY);
+            }
         }
     }
 
@@ -70,21 +111,25 @@
         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) {
+        if (!state || unref(disabledState)) {
             return;
         }
 
+        evt.preventDefault();
+
         const cardEl = evt.currentTarget as Element;
         const rect = cardEl.getBoundingClientRect();
 
         if (evt.clientY < rect.top + rect.height / 2) {
-            // Drop before this card
             kanban.updateDropTarget(columnId, cardId);
         } else {
-            // Drop after this card = before the next sibling card
             let next = cardEl.nextElementSibling;
 
             while (next) {
@@ -98,8 +143,57 @@
                 next = next.nextElementSibling;
             }
 
-            // No next sibling → append to end of column
             kanban.updateDropTarget(columnId, null);
         }
     }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (unref(disabledState)) {
+            return;
+        }
+
+        const state = unref(kanban.dragState);
+        const grabbed = state !== null && state.mode === 'keyboard' && state.cardId === cardId;
+
+        if (!grabbed) {
+            if (evt.key === ' ' || evt.key === 'Enter') {
+                evt.preventDefault();
+                kanban.grabCard(cardId, columnId);
+            }
+            return;
+        }
+
+        switch (evt.key) {
+            case 'ArrowUp':
+                evt.preventDefault();
+                kanban.moveKeyboard('up');
+                break;
+
+            case 'ArrowDown':
+                evt.preventDefault();
+                kanban.moveKeyboard('down');
+                break;
+
+            case 'ArrowLeft':
+                evt.preventDefault();
+                kanban.moveKeyboard('left');
+                break;
+
+            case 'ArrowRight':
+                evt.preventDefault();
+                kanban.moveKeyboard('right');
+                break;
+
+            case ' ':
+            case 'Enter':
+                evt.preventDefault();
+                kanban.commitKeyboardDrop();
+                break;
+
+            case 'Escape':
+                evt.preventDefault();
+                kanban.cancelKeyboardDrop();
+                break;
+        }
+    }
 </script>

package/src/component/FluxKanbanColumn.vue

@@ -1,8 +1,27 @@
 <template>
     <div
-        data-kanban-column
-        :class="[$style.kanbanColumn, isOver && $style.isOver]">
-        <div :class="$style.kanbanColumnHeader">
+        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
+        ]">
+        <div
+            :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>
@@ -11,16 +30,32 @@
         </div>
 
         <div
+            ref="body"
             :class="$style.kanbanColumnBody"
             @dragenter="onDragEnter"
             @dragleave="onDragLeave"
-            @dragover.prevent="onDragOver"
-            @drop.prevent="onDrop">
+            @dragover="onDragOver"
+            @drop="onDrop">
             <slot/>
 
             <div
-                v-if="isDropEnd"
-                :class="$style.kanbanDropIndicator"/>
+                v-if="isEmpty"
+                :class="$style.kanbanColumnEmpty">
+                <slot name="empty"/>
+            </div>
+
+            <div
+                :class="[
+                    $style.kanbanDropIndicator,
+                    isDropEnd && $style.isDropEndActive,
+                    isDropEnd && !kanban.isDropAllowed.value && $style.isDropEndDisallowed
+                ]"/>
+        </div>
+
+        <div
+            v-if="hasFooter"
+            :class="$style.kanbanColumnFooter">
+            <slot name="footer"/>
         </div>
     </div>
 </template>
@@ -28,12 +63,19 @@
 <script
     lang="ts"
     setup>
-    import { computed, inject, ref, unref } from 'vue';
-    import { FluxKanbanInjectionKey } from '$flux/data/di';
-    import $style from '$flux/css/component/FluxKanbanColumn.module.scss';
+    import { Comment, Text, computed, inject, onBeforeUnmount, onMounted, provide, ref, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import { FluxDisabledInjectionKey, FluxKanbanInjectionKey } from '$flux/data/di';
+    import useDisabled from '$flux/composable/useDisabled';
+    import $style from '$flux/css/component/FluxKanban.module.scss';
 
-    const {columnId, label} = defineProps<{
+    const {
+        columnId,
+        disabled = false,
+        label
+    } = defineProps<{
         readonly columnId: string | number;
+        readonly disabled?: boolean;
         readonly label: string;
     }>();
 
@@ -41,19 +83,62 @@
         default?(): any;
         header?(): any;
         actions?(): any;
+        empty?(): any;
+        footer?(): any;
     }>();
 
     const kanban = inject(FluxKanbanInjectionKey)!;
+    const root = useTemplateRef('root');
+    const body = useTemplateRef('body');
+    const slots = useSlots();
+
+    const disabledState = useDisabled(toRef(() => disabled));
+    provide(FluxDisabledInjectionKey, disabledState);
 
     let dragEnterCount = 0;
     const isOver = ref(false);
 
+    const isReorderable = computed(() => unref(kanban.reorderableColumns) && !unref(disabledState));
+
     const isDropEnd = computed(() => {
         const state = unref(kanban.dragState);
         return state !== null && state.dropColumnId === columnId && state.beforeCardId === 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 {
+        if (unref(disabledState)) {
+            return;
+        }
+
         dragEnterCount++;
         isOver.value = true;
     }
@@ -67,7 +152,12 @@
     }
 
     function onDragOver(evt: DragEvent): void {
-        // Only handle empty-area drops; cards stop propagation on their own dragover
+        if (unref(disabledState) || !unref(kanban.dragState)) {
+            return;
+        }
+
+        evt.preventDefault();
+
         const target = evt.target as Element;
         const isOverCard = !!target.closest('[data-kanban-card]');
 
@@ -76,9 +166,106 @@
         }
     }
 
-    function onDrop(): void {
+    function onDrop(evt: DragEvent): void {
         dragEnterCount = 0;
         isOver.value = false;
+
+        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/composable/private/useAsyncFilterOptions.ts

@@ -1,6 +1,6 @@
 import { useDebouncedRef, useLoaded } from '@basmilius/common';
 import type { FluxFilterOptionRow, FluxFilterValue } from '@flux-ui/types';
-import { type ComputedRef, type ModelRef, computed, type Ref, ref, unref, watch } from 'vue';
+import { computed, type ComputedRef, type ModelRef, type Ref, ref, unref, watch } from 'vue';
 import { isFluxFilterOptionItem } from '$flux/data';
 
 type UseAsyncFilterOptionsParams = {
@@ -11,25 +11,19 @@ type UseAsyncFilterOptionsParams = {
     fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
 };
 
-export default function ({
-    currentValueIds,
-    modelSearch,
-    fetchOptions: fetchOptionsProp,
-    fetchRelevant: fetchRelevantProp,
-    fetchSearch: fetchSearchProp
-}: UseAsyncFilterOptionsParams) {
+export default function (params: UseAsyncFilterOptionsParams) {
     const {isLoading, loaded} = useLoaded();
-    const debouncedModelSearch = useDebouncedRef(modelSearch, 150) as unknown as Ref<string>;
-    const fetchOptions = computed(() => loaded(fetchOptionsProp));
-    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
-    const fetchSearch = computed(() => loaded(fetchSearchProp));
+    const debouncedModelSearch = useDebouncedRef(params.modelSearch, 150) as unknown as Ref<string>;
+    const fetchOptions = computed(() => loaded(params.fetchOptions));
+    const fetchRelevant = computed(() => loaded(params.fetchRelevant));
+    const fetchSearch = computed(() => loaded(params.fetchSearch));
 
     const selectedOptions = ref<FluxFilterOptionRow[]>([]);
     const visibleOptions = ref<FluxFilterOptionRow[]>([]);
 
     const options = computed(() => {
         const options: FluxFilterOptionRow[] = [];
-        const search = unref(modelSearch);
+        const search = unref(params.modelSearch);
         const selected = unref(selectedOptions);
         const visible = unref(visibleOptions);
 
@@ -50,7 +44,7 @@ export default function ({
         return options;
     });
 
-    watch(currentValueIds, async ids => {
+    watch(params.currentValueIds, async ids => {
         if (ids.length === 0) {
             return;
         }

package/src/composable/private/useFilterOption.ts

@@ -1,5 +1,5 @@
 import type { FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
-import { type ComputedRef, computed, unref } from 'vue';
+import { computed, type ComputedRef, unref } from 'vue';
 import { useFilterInjection } from '$flux/composable';
 
 export type FilterOptionSingle = {