@flux-ui/components 3.0.0-next.51 → 3.0.0-next.53

package/package.json

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

package/src/component/FluxKanban.vue

@@ -0,0 +1,25 @@
+<template>
+    <div :class="$style.kanban">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxKanbanMoveEvent } from '@flux-ui/types';
+    import { provide } from 'vue';
+    import { FluxKanbanInjectionKey } from '$flux/data/di';
+    import { useKanban } from '$flux/composable/private/useKanban';
+    import $style from '$flux/css/component/FluxKanban.module.scss';
+
+    const emit = defineEmits<{
+        move: [FluxKanbanMoveEvent];
+    }>();
+
+    defineSlots<{
+        default?(): any;
+    }>();
+
+    provide(FluxKanbanInjectionKey, useKanban(event => emit('move', event)));
+</script>

package/src/component/FluxKanbanCard.vue

@@ -0,0 +1,105 @@
+<template>
+    <div
+        ref="root"
+        data-kanban-card
+        :class="[
+            $style.kanbanCard,
+            isDragging && $style.isDragging,
+            isDropBefore && $style.isDropBefore
+        ]"
+        draggable="true"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+        @dragover.prevent.stop="onDragOver">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { computed, inject, onMounted, onUnmounted, unref, useTemplateRef } from 'vue';
+    import { FluxKanbanInjectionKey } from '$flux/data/di';
+    import $style from '$flux/css/component/FluxKanbanCard.module.scss';
+
+    const {cardId, columnId} = defineProps<{
+        readonly cardId: string | number;
+        readonly columnId: string | number;
+    }>();
+
+    defineSlots<{
+        default?(): any;
+    }>();
+
+    const kanban = inject(FluxKanbanInjectionKey)!;
+    const root = useTemplateRef('root');
+
+    const isDragging = computed(() => unref(kanban.dragState)?.cardId === cardId);
+
+    const isDropBefore = computed(() => {
+        const state = unref(kanban.dragState);
+
+        if (!state || state.dropColumnId === null || state.beforeCardId === null) {
+            return false;
+        }
+
+        return state.beforeCardId === cardId && state.cardId !== cardId;
+    });
+
+    onMounted(() => {
+        if (root.value) {
+            kanban.registerCard(root.value, cardId);
+        }
+    });
+
+    onUnmounted(() => {
+        if (root.value) {
+            kanban.unregisterCard(root.value);
+        }
+    });
+
+    function onDragStart(evt: DragEvent): void {
+        kanban.startDrag(cardId, columnId);
+
+        if (evt.dataTransfer) {
+            evt.dataTransfer.effectAllowed = 'move';
+        }
+    }
+
+    function onDragEnd(): void {
+        kanban.endDrag();
+    }
+
+    function onDragOver(evt: DragEvent): void {
+        const state = unref(kanban.dragState);
+
+        if (!state) {
+            return;
+        }
+
+        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) {
+                const info = kanban.getCardInfo(next);
+
+                if (info) {
+                    kanban.updateDropTarget(columnId, info.cardId);
+                    return;
+                }
+
+                next = next.nextElementSibling;
+            }
+
+            // No next sibling → append to end of column
+            kanban.updateDropTarget(columnId, null);
+        }
+    }
+</script>

package/src/component/FluxKanbanColumn.vue

@@ -0,0 +1,84 @@
+<template>
+    <div
+        data-kanban-column
+        :class="[$style.kanbanColumn, isOver && $style.isOver]">
+        <div :class="$style.kanbanColumnHeader">
+            <slot name="header">
+                <span :class="$style.kanbanColumnLabel">{{ label }}</span>
+            </slot>
+
+            <slot name="actions"/>
+        </div>
+
+        <div
+            :class="$style.kanbanColumnBody"
+            @dragenter="onDragEnter"
+            @dragleave="onDragLeave"
+            @dragover.prevent="onDragOver"
+            @drop.prevent="onDrop">
+            <slot/>
+
+            <div
+                v-if="isDropEnd"
+                :class="$style.kanbanDropIndicator"/>
+        </div>
+    </div>
+</template>
+
+<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';
+
+    const {columnId, label} = defineProps<{
+        readonly columnId: string | number;
+        readonly label: string;
+    }>();
+
+    defineSlots<{
+        default?(): any;
+        header?(): any;
+        actions?(): any;
+    }>();
+
+    const kanban = inject(FluxKanbanInjectionKey)!;
+
+    let dragEnterCount = 0;
+    const isOver = ref(false);
+
+    const isDropEnd = computed(() => {
+        const state = unref(kanban.dragState);
+        return state !== null && state.dropColumnId === columnId && state.beforeCardId === null;
+    });
+
+    function onDragEnter(): void {
+        dragEnterCount++;
+        isOver.value = true;
+    }
+
+    function onDragLeave(): void {
+        if (--dragEnterCount <= 0) {
+            dragEnterCount = 0;
+            isOver.value = false;
+            kanban.clearDropTarget();
+        }
+    }
+
+    function onDragOver(evt: DragEvent): void {
+        // Only handle empty-area drops; cards stop propagation on their own dragover
+        const target = evt.target as Element;
+        const isOverCard = !!target.closest('[data-kanban-card]');
+
+        if (!isOverCard) {
+            kanban.updateDropTarget(columnId, null);
+        }
+    }
+
+    function onDrop(): void {
+        dragEnterCount = 0;
+        isOver.value = false;
+        kanban.commitDrop();
+    }
+</script>

package/src/component/index.ts

@@ -80,6 +80,9 @@ 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 FluxKanban } from './FluxKanban.vue';
+export { default as FluxKanbanCard } from './FluxKanbanCard.vue';
+export { default as FluxKanbanColumn } from './FluxKanbanColumn.vue';
 export { default as FluxInfoStack } from './FluxInfoStack.vue';
 export { default as FluxItem } from './FluxItem.vue';
 export { default as FluxItemActions } from './FluxItemActions.vue';

package/src/composable/private/useKanban.ts

@@ -0,0 +1,68 @@
+import type { FluxKanbanMoveEvent } from '@flux-ui/types';
+import { ref } from 'vue';
+import type { FluxKanbanDragState, FluxKanbanInjection } from '$flux/data/di';
+
+/**
+ * Internal composable for managing kanban drag-and-drop state.
+ * Provides card registration, drag tracking, and drop target management.
+ */
+export function useKanban(onMove: (event: FluxKanbanMoveEvent) => void): FluxKanbanInjection {
+    const dragState = ref<FluxKanbanDragState | null>(null);
+    const cardRegistry = new WeakMap<Element, { readonly cardId: string | number }>();
+
+    function registerCard(element: Element, cardId: string | number): void {
+        cardRegistry.set(element, {cardId});
+    }
+
+    function unregisterCard(element: Element): void {
+        cardRegistry.delete(element);
+    }
+
+    function getCardInfo(element: Element): { readonly cardId: string | number } | undefined {
+        return cardRegistry.get(element);
+    }
+
+    function startDrag(cardId: string | number, fromColumnId: string | number): void {
+        dragState.value = {cardId, fromColumnId, dropColumnId: null, beforeCardId: null};
+    }
+
+    function endDrag(): void {
+        dragState.value = null;
+    }
+
+    function updateDropTarget(columnId: string | number, beforeCardId: string | number | null): void {
+        if (!dragState.value) {
+            return;
+        }
+
+        dragState.value = {...dragState.value, dropColumnId: columnId, beforeCardId};
+    }
+
+    function clearDropTarget(): void {
+        if (!dragState.value) {
+            return;
+        }
+
+        dragState.value = {...dragState.value, dropColumnId: null, beforeCardId: null};
+    }
+
+    function commitDrop(): void {
+        const state = dragState.value;
+
+        if (!state || state.dropColumnId === null) {
+            dragState.value = null;
+            return;
+        }
+
+        onMove({
+            cardId: state.cardId,
+            fromColumnId: state.fromColumnId,
+            toColumnId: state.dropColumnId,
+            beforeCardId: state.beforeCardId ?? undefined
+        });
+
+        dragState.value = null;
+    }
+
+    return {dragState, registerCard, unregisterCard, getCardInfo, startDrag, endDrag, updateDropTarget, clearDropTarget, commitDrop};
+}

package/src/css/component/FluxKanban.module.scss

@@ -0,0 +1,7 @@
+.kanban {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    overflow-x: auto;
+    padding-bottom: 6px;
+}

package/src/css/component/FluxKanbanCard.module.scss

@@ -0,0 +1,35 @@
+.kanbanCard {
+    position: relative;
+    padding: 12px;
+    background: var(--gray-25);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius);
+    cursor: grab;
+    transition: opacity 180ms var(--swift-out), box-shadow 180ms var(--swift-out);
+    user-select: none;
+
+    &:active {
+        cursor: grabbing;
+    }
+
+    &:hover {
+        box-shadow: 0 1px 4px rgb(0 0 0 / .08);
+    }
+}
+
+.isDragging {
+    opacity: .4;
+    cursor: grabbing;
+}
+
+.isDropBefore {
+    &::before {
+        content: '';
+        position: absolute;
+        inset-inline: 0;
+        top: -6px;
+        height: 2px;
+        border-radius: 999px;
+        background: var(--primary-500);
+    }
+}

package/src/css/component/FluxKanbanColumn.module.scss

@@ -0,0 +1,49 @@
+.kanbanColumn {
+    display: flex;
+    flex-flow: column;
+    flex-shrink: 0;
+    width: 280px;
+    background: var(--gray-100);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+
+.kanbanColumnHeader {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 12px 15px;
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.kanbanColumnLabel {
+    flex: 1;
+    font-size: .8125rem;
+    font-weight: 600;
+    color: var(--foreground);
+    letter-spacing: .01em;
+    text-transform: uppercase;
+}
+
+.kanbanColumnBody {
+    display: flex;
+    flex-flow: column;
+    gap: 9px;
+    padding: 9px;
+    min-height: 60px;
+    flex: 1;
+    overflow-y: auto;
+    transition: background 180ms var(--swift-out);
+}
+
+.isOver .kanbanColumnBody {
+    background: rgb(from var(--primary-500) r g b / .06);
+}
+
+.kanbanDropIndicator {
+    height: 2px;
+    border-radius: 999px;
+    background: var(--primary-500);
+    flex-shrink: 0;
+}

package/src/data/di.ts

@@ -3,6 +3,7 @@ import type { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
 
 export const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection> = Symbol();
 export const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>> = Symbol();
+export const FluxKanbanInjectionKey: InjectionKey<FluxKanbanInjection> = Symbol();
 export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection> = Symbol();
 export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
@@ -10,6 +11,26 @@ export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = S
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
 export const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection> = Symbol();
 
+export type FluxKanbanDragState = {
+    readonly cardId: string | number;
+    readonly fromColumnId: string | number;
+    readonly dropColumnId: string | number | null;
+    readonly beforeCardId: string | number | null;
+};
+
+export type FluxKanbanInjection = {
+    readonly dragState: Ref<FluxKanbanDragState | null>;
+
+    registerCard(element: Element, cardId: string | number): void;
+    unregisterCard(element: Element): void;
+    getCardInfo(element: Element): { readonly cardId: string | number } | undefined;
+    startDrag(cardId: string | number, fromColumnId: string | number): void;
+    endDrag(): void;
+    updateDropTarget(columnId: string | number, beforeCardId: string | number | null): void;
+    clearDropTarget(): void;
+    commitDrop(): void;
+};
+
 export type FluxAdaptiveGroupChild = {
     readonly priority: Ref<number>;
     readonly desiredDefaultWidth: Ref<number>;