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

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

@@ -1,7 +1,17 @@
-import { FluxKanbanMoveEvent } from '@flux-ui/types';
-import { FluxKanbanInjection } from '../../data/di';
+import { FluxKanbanMoveColumnEvent, FluxKanbanMoveEvent } from '@flux-ui/types';
+import { Ref } from 'vue';
+import { FluxKanbanInjection } from '../../data';
+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 item 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/composable/private/useKanbanAutoScroll.d.ts

@@ -0,0 +1,13 @@
+export type UseKanbanAutoScrollOptions = {
+    getBoardElement(): Element | null;
+    getVerticalTarget(): Element | null;
+};
+export type UseKanbanAutoScrollReturn = {
+    onPointerMove(clientX: number, clientY: number): void;
+    stop(): void;
+};
+/**
+ * Drives horizontal (board) and vertical (column body) auto-scroll while a drag
+ * is in progress. Reads the active scroll containers via the option callbacks.
+ */
+export declare function useKanbanAutoScroll(options: UseKanbanAutoScrollOptions): UseKanbanAutoScrollReturn;

package/dist/composable/useCalendarInjection.d.ts

@@ -0,0 +1,2 @@
+import { FluxCalendarInjection } from '../data';
+export default function (): FluxCalendarInjection | null;

package/dist/composable/useKanbanInjection.d.ts

@@ -0,0 +1,2 @@
+import { FluxKanbanInjection } from '../data';
+export default function (): FluxKanbanInjection;

package/dist/composable/useTabBarInjection.d.ts

@@ -0,0 +1,2 @@
+import { FluxTabBarInjection } from '../data';
+export default function (): FluxTabBarInjection;

package/dist/data/di.d.ts

@@ -1,32 +1,69 @@
 import { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
-import { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
+import { DateTime } from 'luxon';
+import { ComponentInternalInstance, ComputedRef, InjectionKey, Ref, VNode } from 'vue';
 export declare const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection>;
+export declare const FluxCalendarInjectionKey: InjectionKey<FluxCalendarInjection>;
 export declare const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>>;
 export declare const FluxKanbanInjectionKey: InjectionKey<FluxKanbanInjection>;
 export declare const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection>;
 export declare const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection>;
 export declare const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection>;
 export declare const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection>;
+export declare const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection>;
 export declare const FluxTableInjectionKey: InjectionKey<FluxTableInjection>;
 export declare const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection>;
+export type FluxKanbanDragMode = 'pointer' | 'keyboard';
 export type FluxKanbanDragState = {
-    readonly cardId: string | number;
+    readonly mode: FluxKanbanDragMode;
+    readonly itemId: string | number;
     readonly fromColumnId: string | number;
     readonly dropColumnId: string | number | null;
-    readonly beforeCardId: string | number | null;
+    readonly beforeItemId: string | number | null;
+    readonly originBeforeItemId?: 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>;
-    registerCard(element: Element, cardId: string | number): void;
-    unregisterCard(element: Element): void;
-    getCardInfo(element: Element): {
-        readonly cardId: string | number;
+    readonly columnDragState: Ref<FluxKanbanColumnDragState | null>;
+    readonly grabbedId: Ref<string | number | null>;
+    readonly isOverColumnId: Ref<string | number | null>;
+    readonly isDropAllowed: Ref<boolean>;
+    registerItem(element: Element, itemId: string | number): void;
+    unregisterItem(element: Element): void;
+    getItemInfo(element: Element): {
+        readonly itemId: string | number;
+    } | undefined;
+    registerColumn(element: Element, columnId: string | number): void;
+    unregisterColumn(element: Element): void;
+    getColumnInfo(element: Element): {
+        readonly columnId: string | number;
     } | undefined;
-    startDrag(cardId: string | number, fromColumnId: string | number): void;
+    setBoardElement(element: Element | null): void;
+    setColumnBodyElement(columnId: string | number, element: Element | null): void;
+    enterColumn(columnId: string | number): void;
+    leaveColumn(columnId: string | number): void;
+    startDrag(itemId: string | number, fromColumnId: string | number): void;
     endDrag(): void;
-    updateDropTarget(columnId: string | number, beforeCardId: string | number | null): void;
+    updateDropTarget(columnId: string | number, beforeItemId: string | number | null): void;
     clearDropTarget(): void;
     commitDrop(): void;
+    grabItem(itemId: string | number, fromColumnId: string | number): void;
+    moveKeyboard(direction: FluxKanbanKeyboardDirection): void;
+    commitKeyboardDrop(): void;
+    cancelKeyboardDrop(): void;
+    isItemGrabbed(itemId: string | number): boolean;
+    startColumnDrag(columnId: string | number): void;
+    endColumnDrag(): void;
+    updateColumnDropTarget(beforeColumnId: string | number | null): void;
+    commitColumnDrop(): void;
+    cancelAll(): void;
+    onPointerMove(clientX: number, clientY: number): void;
 };
 export type FluxAdaptiveGroupChild = {
     readonly priority: Ref<number>;
@@ -38,6 +75,35 @@ export type FluxAdaptiveGroupInjection = {
     register(uid: number, child: FluxAdaptiveGroupChild): void;
     unregister(uid: number): void;
 };
+export type FluxCalendarView = 'month' | 'week' | 'two-days' | 'day';
+export type FluxCalendarKeyboardDirection = 'up' | 'down' | 'left' | 'right';
+export type FluxCalendarItemData = {
+    readonly id: string | number;
+    readonly date: DateTime;
+    readonly duration?: number;
+    readonly allDay: boolean;
+    readonly isClickable: boolean;
+    renderContent(): VNode[];
+    handleClick(evt: MouseEvent): void;
+};
+export type FluxCalendarInjection = {
+    readonly isDraggable: ComputedRef<boolean>;
+    readonly resolvedView: ComputedRef<FluxCalendarView>;
+    readonly hourRange: ComputedRef<readonly [number, number]>;
+    readonly pixelsPerMinute: ComputedRef<number>;
+    readonly snapMinutes: ComputedRef<number>;
+    readonly grabbedId: Ref<string | number | null>;
+    registerItem(id: string | number, data: FluxCalendarItemData): void;
+    unregisterItem(id: string | number): void;
+    registerItemElement(element: Element, id: string | number): void;
+    unregisterItemElement(element: Element): void;
+    onItemDragStart(id: string | number, fromDate: DateTime, evt: DragEvent): void;
+    onItemDragEnd(id: string | number): void;
+    onItemKeyboardGrab(id: string | number, fromDate: DateTime): void;
+    onItemKeyboardMove(direction: FluxCalendarKeyboardDirection): void;
+    onItemKeyboardCommit(): void;
+    onItemKeyboardCancel(): void;
+};
 export type FluxExpandableGroupInjection = {
     closeAll(): void;
     register(uid: number, expandable: ComponentInternalInstance): void;
@@ -59,6 +125,11 @@ export type FluxFlyoutInjection = {
 export type FluxFormFieldInjection = {
     readonly id?: string;
 };
+export type FluxTabBarInjection = {
+    readonly isPills: Ref<boolean>;
+    registerItem(element: Element, isActive: Ref<boolean>): void;
+    unregisterItem(element: Element): void;
+};
 export type FluxTableInjection = {
     readonly isBordered: boolean;
     readonly isHoverable: boolean;

package/dist/data/i18n.d.ts

@@ -35,10 +35,14 @@ export declare const english: {
     readonly 'flux.today': "Today";
     readonly 'flux.selectMonth': "Select month";
     readonly 'flux.selectYear': "Select year";
+    readonly 'flux.selectDate': "Select date";
     readonly 'flux.previousMonth': "Previous month";
     readonly 'flux.nextMonth': "Next month";
     readonly 'flux.previousYears': "Previous years";
     readonly 'flux.nextYears': "Next years";
+    readonly 'flux.allDay': "All day";
+    readonly 'flux.grabbedAnnounce': "Item grabbed. Use arrow keys to move, Enter to drop, Escape to cancel.";
+    readonly 'flux.releasedAnnounce': "Item released.";
     readonly 'flux.goToPage': "Go to page {page}";
     readonly 'flux.pinDigit': "Digit {index} of {total}";
     readonly 'flux.dropFilesOrClick': "Drop files here or click to upload";