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

package/dist/component/FluxKanban.vue.d.ts

@@ -1,5 +1,11 @@
-import { FluxKanbanMoveEvent } from '@flux-ui/types';
+import { FluxKanbanMoveColumnEvent, FluxKanbanMoveEvent } from '@flux-ui/types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly ariaLabel?: string;
+    readonly canMove?: (event: FluxKanbanMoveEvent) => boolean;
+    readonly disabled?: boolean;
+    readonly reorderableColumns?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -7,15 +13,21 @@ declare function __VLS_template(): {
     }> & {
         default?(): any;
     };
-    refs: {};
+    refs: {
+        root: HTMLDivElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     move: (args_0: FluxKanbanMoveEvent) => any;
-}, string, PublicProps, Readonly<{}> & Readonly<{
+    moveColumn: (args_0: FluxKanbanMoveColumnEvent) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
     onMove?: (args_0: FluxKanbanMoveEvent) => any;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+    onMoveColumn?: (args_0: FluxKanbanMoveColumnEvent) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/component/FluxKanbanCard.vue.d.ts

@@ -2,6 +2,7 @@ import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOp
 type __VLS_Props = {
     readonly cardId: string | number;
     readonly columnId: string | number;
+    readonly disabled?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/component/FluxKanbanColumn.vue.d.ts

@@ -1,6 +1,7 @@
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly columnId: string | number;
+    readonly disabled?: boolean;
     readonly label: string;
 };
 declare function __VLS_template(): {
@@ -9,16 +10,26 @@ declare function __VLS_template(): {
         default?(): any;
         header?(): any;
         actions?(): any;
+        empty?(): any;
+        footer?(): any;
     }> & {
         default?(): any;
         header?(): any;
         actions?(): any;
+        empty?(): any;
+        footer?(): any;
+    };
+    refs: {
+        root: HTMLDivElement;
+        body: HTMLDivElement;
     };
-    refs: {};
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+    body: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/composable/private/useAsyncFilterOptions.d.ts

@@ -7,7 +7,7 @@ type UseAsyncFilterOptionsParams = {
     fetchRelevant(): Promise<FluxFilterOptionRow[]>;
     fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
 };
-export default function ({ currentValueIds, modelSearch, fetchOptions: fetchOptionsProp, fetchRelevant: fetchRelevantProp, fetchSearch: fetchSearchProp }: UseAsyncFilterOptionsParams): {
+export default function (params: UseAsyncFilterOptionsParams): {
     isLoading: ComputedRef<boolean>;
     options: ComputedRef<FluxFilterOptionRow[]>;
 };

package/dist/composable/private/useKanban.d.ts

@@ -1,7 +1,17 @@
-import { FluxKanbanMoveEvent } from '@flux-ui/types';
+import { FluxKanbanMoveColumnEvent, FluxKanbanMoveEvent } from '@flux-ui/types';
+import { Ref } from 'vue';
 import { FluxKanbanInjection } from '../../data/di';
+export type UseKanbanOptions = {
+    readonly disabled: Ref<boolean>;
+    readonly reorderableColumns: Ref<boolean>;
+    readonly canMove?: Ref<((event: FluxKanbanMoveEvent) => boolean) | undefined>;
+    readonly onMove: (event: FluxKanbanMoveEvent) => void;
+    readonly onMoveColumn: (event: FluxKanbanMoveColumnEvent) => void;
+    readonly onAnnounce: (message: string) => void;
+};
 /**
  * Internal composable for managing kanban drag-and-drop state.
- * Provides card registration, drag tracking, and drop target management.
+ * Provides card registration, drag tracking, drop target management,
+ * keyboard drag-and-drop, column reordering, drop validation and auto-scroll.
  */
-export declare function useKanban(onMove: (event: FluxKanbanMoveEvent) => void): FluxKanbanInjection;
+export declare function useKanban(options: UseKanbanOptions): FluxKanbanInjection;

package/dist/data/di.d.ts

@@ -9,24 +9,53 @@ export declare const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection>;
 export declare const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection>;
 export declare const FluxTableInjectionKey: InjectionKey<FluxTableInjection>;
 export declare const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection>;
+export type FluxKanbanDragMode = 'pointer' | 'keyboard';
 export type FluxKanbanDragState = {
+    readonly mode: FluxKanbanDragMode;
     readonly cardId: string | number;
     readonly fromColumnId: string | number;
     readonly dropColumnId: string | number | null;
     readonly beforeCardId: string | number | null;
+    readonly originBeforeCardId?: string | number | null;
 };
+export type FluxKanbanColumnDragState = {
+    readonly columnId: string | number;
+    readonly dropBeforeColumnId: string | number | null;
+};
+export type FluxKanbanKeyboardDirection = 'up' | 'down' | 'left' | 'right';
 export type FluxKanbanInjection = {
+    readonly disabled: Ref<boolean>;
+    readonly reorderableColumns: Ref<boolean>;
     readonly dragState: Ref<FluxKanbanDragState | null>;
+    readonly columnDragState: Ref<FluxKanbanColumnDragState | null>;
+    readonly isDropAllowed: Ref<boolean>;
     registerCard(element: Element, cardId: string | number): void;
     unregisterCard(element: Element): void;
     getCardInfo(element: Element): {
         readonly cardId: string | number;
     } | undefined;
+    registerColumn(element: Element, columnId: string | number): void;
+    unregisterColumn(element: Element): void;
+    getColumnInfo(element: Element): {
+        readonly columnId: string | number;
+    } | undefined;
+    setBoardElement(element: Element | null): void;
+    setColumnBodyElement(columnId: string | number, element: Element | null): void;
     startDrag(cardId: string | number, fromColumnId: string | number): void;
     endDrag(): void;
     updateDropTarget(columnId: string | number, beforeCardId: string | number | null): void;
     clearDropTarget(): void;
     commitDrop(): void;
+    grabCard(cardId: string | number, fromColumnId: string | number): void;
+    moveKeyboard(direction: FluxKanbanKeyboardDirection): void;
+    commitKeyboardDrop(): void;
+    cancelKeyboardDrop(): void;
+    isCardGrabbed(cardId: string | number): boolean;
+    startColumnDrag(columnId: string | number): void;
+    endColumnDrag(): void;
+    updateColumnDropTarget(beforeColumnId: string | number | null): void;
+    commitColumnDrop(): void;
+    onPointerMove(clientX: number, clientY: number): void;
 };
 export type FluxAdaptiveGroupChild = {
     readonly priority: Ref<number>;

package/dist/index.css

@@ -5242,51 +5242,49 @@ tfoot .table-cell {
 
 .info-body {
   align-items: center;
-}.kanban {
+}/* region root */
+.kanban {
+  position: relative;
   display: flex;
   flex-flow: row;
   gap: 15px;
+  block-size: 100%;
+  inline-size: 100%;
   overflow-x: auto;
   padding-bottom: 6px;
-}.kanban-card {
-  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;
-}
-.kanban-card:active {
-  cursor: grabbing;
-}
-.kanban-card:hover {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 }
 
-.is-dragging {
-  opacity: 0.4;
-  cursor: grabbing;
+.kanban-live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
 }
 
-.is-drop-before::before {
-  content: "";
-  position: absolute;
-  inset-inline: 0;
-  top: -6px;
-  height: 2px;
-  border-radius: 999px;
-  background: var(--primary-500);
-}.kanban-column {
+/* endregion */
+/* region column */
+.kanban-column {
   display: flex;
   flex-flow: column;
-  flex-shrink: 0;
-  width: 280px;
+  flex: 1 0 300px;
   background: var(--gray-100);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius);
   overflow: hidden;
+  transition: opacity 180ms var(--swift-out);
+}
+
+.kanban-column.is-column-dragging {
+  opacity: 0.4;
+}
+
+.kanban-column.is-column-drop-before {
+  box-shadow: -3px 0 0 var(--primary-500);
 }
 
 .kanban-column-header {
@@ -5295,6 +5293,20 @@ tfoot .table-cell {
   gap: 9px;
   padding: 12px 15px;
   border-bottom: 1px solid var(--gray-200);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.kanban-column-header:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: -2;
+}
+
+.kanban-column.is-reorderable .kanban-column-header {
+  cursor: grab;
+}
+
+.kanban-column.is-reorderable .kanban-column-header:active {
+  cursor: grabbing;
 }
 
 .kanban-column-label {
@@ -5321,12 +5333,120 @@ tfoot .table-cell {
   background: rgb(from var(--primary-500) r g b/0.06);
 }
 
+.is-over.is-drop-disallowed .kanban-column-body {
+  background: rgb(from var(--danger-500) r g b/0.06);
+  cursor: not-allowed;
+}
+
+.is-board-dragging .kanban-column:not(.is-over):not(.is-disabled) .kanban-column-body {
+  background: rgb(from var(--primary-500) r g b/0.02);
+}
+
+.kanban-column.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.kanban-column.is-disabled .kanban-column-body {
+  pointer-events: none;
+}
+
+.kanban-column-empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 18px 12px;
+  font-size: 0.8125rem;
+  color: var(--gray-500);
+  text-align: center;
+}
+
+.kanban-column-footer {
+  padding: 9px 15px;
+  border-top: 1px solid var(--gray-200);
+}
+
 .kanban-drop-indicator {
+  flex-shrink: 0;
   height: 2px;
   border-radius: 999px;
+  background: transparent;
+  transition: background 180ms var(--swift-out);
+}
+
+.is-drop-end-active {
   background: var(--primary-500);
-  flex-shrink: 0;
-}.item {
+}
+
+.is-drop-end-active.is-drop-end-disallowed {
+  background: var(--danger-500);
+}
+
+/* endregion */
+/* region card */
+.kanban-card {
+  position: relative;
+  padding: 12px;
+  background: var(--gray-25);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius);
+  cursor: grab;
+  scroll-margin: 9px;
+  transition: opacity 180ms var(--swift-out), box-shadow 180ms var(--swift-out), transform 180ms var(--swift-out);
+  user-select: none;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.kanban-card:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: -2;
+}
+.kanban-card:active {
+  cursor: grabbing;
+}
+.kanban-card:hover {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.kanban-card.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.kanban-card.is-disabled:hover {
+  box-shadow: none;
+}
+.kanban-card.is-disabled:active {
+  cursor: not-allowed;
+}
+
+.is-dragging {
+  opacity: 0.4;
+  cursor: grabbing;
+}
+
+.is-grabbed {
+  transform: scale(1.04);
+  background: var(--surface);
+  box-shadow: 0 0 0 2px var(--primary-500), 0 8px 24px rgba(0, 0, 0, 0.15);
+  z-index: 1;
+}
+
+.is-drop-before::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  top: -6px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--primary-500);
+}
+
+.is-drop-before.is-drop-before-disallowed::before {
+  background: var(--danger-500);
+}
+
+/* endregion */.item {
   display: flex;
   flex-flow: row nowrap;
   gap: 18px;