@uzum-tech/ui 2.0.9 → 2.1.0

package/lib/kanban/src/interface.d.ts

@@ -0,0 +1,215 @@
+import type { PropType, Ref, VNodeChild } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+import type { EmptyProps } from '../../empty';
+export interface KanbanItem {
+    key: KanbanKey;
+    column: KanbanKey;
+    disabled?: boolean;
+    title?: string | (() => VNodeChild);
+    description?: string | (() => VNodeChild);
+    name?: string;
+    render?: (item: KanbanItem, column: KanbanColumn) => VNodeChild;
+    [key: string]: unknown;
+}
+export interface KanbanColumn {
+    key: KanbanKey;
+    title?: string | (() => VNodeChild);
+    disabled?: boolean;
+    frozen?: boolean;
+    max?: number;
+    status?: KanbanColumnStatus;
+    [key: string]: unknown;
+}
+export interface KanbanMoveLocation {
+    column: KanbanKey;
+    index: number;
+}
+export interface KanbanMoveTarget {
+    column: KanbanKey;
+    index?: number;
+}
+export interface KanbanMoveContext {
+    item: KanbanItem;
+    from: KanbanMoveLocation;
+    to: KanbanMoveLocation;
+}
+export interface KanbanDragContext {
+    type: 'item' | 'column';
+    item?: KanbanItem;
+    column: KanbanColumn;
+}
+export interface KanbanScrollContext {
+    column?: KanbanKey;
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+export interface KanbanInstance {
+    moveItem: (key: KanbanKey, to: KanbanMoveTarget) => void;
+    addItem: (item: KanbanItem, index?: number) => void;
+    removeItem: (key: KanbanKey) => void;
+    scrollToColumn: (columnKey: KanbanKey) => void;
+    scrollColumnToBottom: (columnKey: KanbanKey) => void;
+}
+export interface KanbanColumnSlotProps {
+    column: KanbanColumn;
+    items: KanbanItem[];
+    index: number;
+}
+export interface KanbanColumnHeaderSlotProps {
+    column: KanbanColumn;
+    count: number;
+}
+export interface KanbanColumnFooterSlotProps {
+    column: KanbanColumn;
+}
+export interface KanbanColumnEmptySlotProps {
+    column: KanbanColumn;
+}
+export interface KanbanCardSlotProps {
+    item: KanbanItem;
+    column: KanbanColumn;
+    dragging: boolean;
+}
+export interface KanbanSlots {
+    column?: (props: KanbanColumnSlotProps) => VNodeChild;
+    columnHeader?: (props: KanbanColumnHeaderSlotProps) => VNodeChild;
+    columnFooter?: (props: KanbanColumnFooterSlotProps) => VNodeChild;
+    card?: (props: KanbanCardSlotProps) => VNodeChild;
+    empty?: () => VNodeChild;
+    columnEmpty?: (props: KanbanColumnEmptySlotProps) => VNodeChild;
+}
+export interface MoveItemResult {
+    data: KanbanItem[];
+    item: KanbanItem;
+    from: KanbanMoveLocation;
+    to: KanbanMoveLocation;
+}
+export interface ReadRef<T> {
+    readonly value: T;
+}
+export interface UseKanbanDragDeps {
+    dataRef: ReadRef<KanbanItem[]>;
+    columnsRef: ReadRef<KanbanColumn[]>;
+    columnFieldRef: ReadRef<string>;
+    orientationRef: ReadRef<KanbanOrientation>;
+    getItemKey: (item: KanbanItem) => KanbanKey;
+    isItemDraggable: (item: KanbanItem, column: KanbanColumn) => boolean;
+    isColumnDraggable: (column: KanbanColumn) => boolean;
+    allowDropRef: ReadRef<((ctx: KanbanMoveContext) => boolean) | undefined>;
+    emitUpdateData: (data: KanbanItem[]) => void;
+    emitMove: (ctx: KanbanMoveContext) => void;
+    emitColumnsReorder: (columns: KanbanColumn[]) => void;
+    emitDragStart: (ctx: KanbanDragContext) => void;
+    emitDragEnd: (ctx: KanbanDragContext) => void;
+}
+export interface UseKanbanDragReturn {
+    draggingItemKeySetRef: Ref<Set<KanbanKey>>;
+    draggingItemRef: Ref<KanbanItem | null>;
+    draggingColumnKeyRef: Ref<KanbanKey | null>;
+    droppingColumnKeyRef: Ref<KanbanKey | null>;
+    droppingItemKeyRef: Ref<KanbanKey | null>;
+    droppingPositionRef: Ref<KanbanDropPosition | null>;
+    handleItemDragStart: (event: DragEvent, item: KanbanItem) => void;
+    handleItemDragOver: (event: DragEvent, item: KanbanItem) => void;
+    handleItemDrop: (event: DragEvent, item: KanbanItem) => void;
+    handleColumnDragStart: (event: DragEvent, column: KanbanColumn) => void;
+    handleColumnDragOver: (event: DragEvent, column: KanbanColumn) => void;
+    handleColumnDrop: (event: DragEvent, column: KanbanColumn) => void;
+    handleDragEnd: VoidFunction;
+}
+export type KanbanKey = string | number;
+export type KanbanDropPosition = 'before' | 'after';
+export type KanbanOrientation = 'horizontal' | 'vertical';
+export type KanbanScrollMode = 'column' | 'board';
+export type KanbanColumnStatus = 'neutral' | 'success' | 'progress' | 'pending' | 'error';
+export type KanbanProps = ExtractPublicPropTypes<typeof kanbanProps>;
+export type KanbanColumnProps = ExtractPublicPropTypes<typeof kanbanColumnProps>;
+export type KanbanCardProps = ExtractPublicPropTypes<typeof kanbanCardProps>;
+export type KanbanItemKeyField = KanbanKey | ((item: KanbanItem) => KanbanKey);
+export type KanbanColumnByKey = Map<KanbanKey, KanbanColumn>;
+export type KanbanDropPredicate = (ctx: KanbanMoveContext) => boolean;
+export declare const kanbanProps: {
+    readonly columns: {
+        readonly type: PropType<KanbanColumn[]>;
+        readonly default: () => never[];
+    };
+    readonly data: {
+        readonly type: PropType<KanbanItem[]>;
+        readonly default: () => never[];
+    };
+    readonly itemKey: {
+        readonly type: PropType<KanbanItemKeyField>;
+        readonly default: "key";
+    };
+    readonly columnField: {
+        readonly type: StringConstructor;
+        readonly default: "column";
+    };
+    readonly orientation: {
+        readonly type: PropType<KanbanOrientation>;
+        readonly default: "horizontal";
+    };
+    readonly draggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly columnsDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: BooleanConstructor;
+    readonly allowDrop: PropType<(ctx: KanbanMoveContext) => boolean>;
+    readonly scrollMode: {
+        readonly type: PropType<KanbanScrollMode>;
+        readonly default: "board";
+    };
+    readonly scrollThreshold: {
+        readonly type: NumberConstructor;
+        readonly default: 48;
+    };
+    readonly loading: BooleanConstructor;
+    readonly emptyProps: PropType<Partial<EmptyProps>>;
+    readonly columnEmptyText: PropType<string | (() => VNodeChild)>;
+    readonly columnProps: PropType<Record<string, unknown>>;
+    readonly cardProps: PropType<Record<string, unknown>>;
+    readonly 'onUpdate:data': PropType<((data: KanbanItem[]) => void) | Array<(data: KanbanItem[]) => void>>;
+    readonly onMove: PropType<(ctx: KanbanMoveContext) => void>;
+    readonly onColumnsReorder: PropType<(columns: KanbanColumn[]) => void>;
+    readonly onDragStart: PropType<(ctx: KanbanDragContext) => void>;
+    readonly onDragEnd: PropType<(ctx: KanbanDragContext) => void>;
+    readonly onItemClick: PropType<(item: KanbanItem, column: KanbanColumn) => void>;
+    readonly onColumnScrollTop: PropType<(ctx: KanbanScrollContext) => void>;
+    readonly onColumnScrollBottom: PropType<(ctx: KanbanScrollContext) => void>;
+    readonly onScrollTop: PropType<(ctx: KanbanScrollContext) => void>;
+    readonly onScrollBottom: PropType<(ctx: KanbanScrollContext) => void>;
+};
+export declare const kanbanColumnProps: {
+    readonly column: {
+        readonly type: PropType<KanbanColumn>;
+        readonly required: true;
+    };
+    readonly items: {
+        readonly type: PropType<KanbanItem[]>;
+        readonly default: () => never[];
+    };
+    readonly index: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+};
+export declare const kanbanCardProps: {
+    readonly item: {
+        readonly type: PropType<KanbanItem>;
+        readonly required: true;
+    };
+    readonly column: {
+        readonly type: PropType<KanbanColumn>;
+        readonly required: true;
+    };
+    readonly index: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly ghost: BooleanConstructor;
+};

package/lib/kanban/src/interface.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.kanbanCardProps = exports.kanbanColumnProps = exports.kanbanProps = void 0;
+exports.kanbanProps = {
+    columns: {
+        type: Array,
+        default: () => []
+    },
+    data: {
+        type: Array,
+        default: () => []
+    },
+    itemKey: {
+        type: [String, Number, Function],
+        default: 'key'
+    },
+    columnField: {
+        type: String,
+        default: 'column'
+    },
+    orientation: {
+        type: String,
+        default: 'horizontal'
+    },
+    draggable: {
+        type: Boolean,
+        default: true
+    },
+    columnsDraggable: {
+        type: Boolean,
+        default: false
+    },
+    disabled: Boolean,
+    allowDrop: Function,
+    scrollMode: {
+        type: String,
+        default: 'board'
+    },
+    scrollThreshold: {
+        type: Number,
+        default: 48
+    },
+    loading: Boolean,
+    emptyProps: Object,
+    columnEmptyText: [String, Function],
+    columnProps: Object,
+    cardProps: Object,
+    'onUpdate:data': [Function, Array],
+    onMove: Function,
+    onColumnsReorder: Function,
+    onDragStart: Function,
+    onDragEnd: Function,
+    onItemClick: Function,
+    onColumnScrollTop: Function,
+    onColumnScrollBottom: Function,
+    onScrollTop: Function,
+    onScrollBottom: Function
+};
+exports.kanbanColumnProps = {
+    column: {
+        type: Object,
+        required: true
+    },
+    items: {
+        type: Array,
+        default: () => []
+    },
+    index: {
+        type: Number,
+        default: 0
+    }
+};
+exports.kanbanCardProps = {
+    item: {
+        type: Object,
+        required: true
+    },
+    column: {
+        type: Object,
+        required: true
+    },
+    index: {
+        type: Number,
+        default: 0
+    },
+    ghost: Boolean
+};

package/lib/kanban/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/kanban/src/styles/index.cssr.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('kanban', `
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ `, [(0, cssr_1.cE)('board', `
+ padding: var(--u-board-padding);
+ overflow-x: auto;
+ overflow-y: hidden;
+ flex: 1;
+ min-height: 0;
+ `, [(0, cssr_1.cM)('vertical', `
+ overflow-x: hidden;
+ overflow-y: auto;
+ `), (0, cssr_1.cM)('scroll-board', `
+ overflow-y: auto;
+ `)]), (0, cssr_1.cE)('board-track', `
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ gap: var(--u-column-gap);
+ width: max-content;
+ min-width: 100%;
+ min-height: 100%;
+ box-sizing: border-box;
+ `, [(0, cssr_1.cM)('vertical', `
+ flex-direction: column;
+ width: 100%;
+ min-height: 0;
+ `)]), (0, cssr_1.cE)('empty', `
+ margin: auto;
+ `)]), (0, cssr_1.cB)('kanban-column', `
+ display: flex;
+ flex-direction: column;
+ width: var(--u-column-width);
+ flex-shrink: 0;
+ max-height: 100%;
+ background-color: var(--u-column-background-color);
+ border-radius: var(--u-column-border-radius);
+ box-sizing: border-box;
+ transition: opacity .2s var(--u-bezier);
+ position: relative;
+ `, [(0, cssr_1.cM)('vertical', `
+ width: 100%;
+ `), (0, cssr_1.cM)('board-scroll', `
+ max-height: none;
+ `), (0, cssr_1.cM)('dragging', `
+ opacity: var(--u-column-dragging-opacity);
+ `), (0, cssr_1.cM)('drop-before', [(0, cssr_1.c)('&::before', `
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: -8px;
+ width: 3px;
+ border-radius: 3px;
+ background-color: var(--u-drop-indicator-color);
+ `)]), (0, cssr_1.cM)('drop-after', [(0, cssr_1.c)('&::after', `
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: -8px;
+ width: 3px;
+ border-radius: 3px;
+ background-color: var(--u-drop-indicator-color);
+ `)]), (0, cssr_1.cE)('header', `
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ padding: var(--u-column-header-padding);
+ color: var(--u-column-header-color);
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 20px;
+ border-top-left-radius: var(--u-column-border-radius);
+ border-top-right-radius: var(--u-column-border-radius);
+ cursor: default;
+ `, [(0, cssr_1.cM)('draggable', `
+ cursor: grab;
+ `)]), (0, cssr_1.cE)('title', `
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `), (0, cssr_1.cE)('count', `
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ box-sizing: border-box;
+ min-width: 24px;
+ height: 24px;
+ padding: 2px 8px;
+ border-radius: 100px;
+ background-color: var(--u-count-background-color);
+ color: var(--u-count-text-color);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 20px;
+ `, [(0, cssr_1.cM)('max-reached', `
+ background-color: var(--u-max-reached-color);
+ `)]), (0, cssr_1.cE)('body', `
+ display: flex;
+ flex-direction: column;
+ gap: var(--u-card-gap);
+ padding: var(--u-column-body-padding);
+ overflow-y: auto;
+ flex: 1;
+ min-height: 48px;
+ `, [(0, cssr_1.cM)('board-scroll', `
+ overflow-y: visible;
+ `)]), (0, cssr_1.cE)('footer', `
+ padding: var(--u-column-body-padding);
+ padding-top: 0;
+ `), (0, cssr_1.cE)('empty', `
+ padding: 32px 0 64px;
+ `)]), (0, cssr_1.cB)('kanban-card', `
+ position: relative;
+ background-color: var(--u-card-background-color);
+ border: 2px solid transparent;
+ border-radius: var(--u-card-border-radius);
+ padding: var(--u-card-padding);
+ color: var(--u-card-color);
+ box-shadow: var(--u-card-box-shadow);
+ box-sizing: border-box;
+ cursor: grab;
+ transition:
+ box-shadow .2s var(--u-bezier),
+ border-color .2s var(--u-bezier),
+ background-color .2s var(--u-bezier);
+ `, [(0, cssr_1.c)('&:hover', `
+ box-shadow: var(--u-card-box-shadow-hover);
+ `), (0, cssr_1.cM)('dragging', `
+ border: 2px dashed var(--u-drop-indicator-color);
+ background-color: var(--u-card-background-color);
+ box-shadow: none;
+ opacity: .6;
+ cursor: grabbing;
+ `), (0, cssr_1.cM)('ghost', `
+ border: 2px dashed var(--u-drop-indicator-color);
+ background-color: var(--u-card-background-color);
+ box-shadow: none;
+ opacity: .6;
+ cursor: default;
+ pointer-events: none;
+ `), (0, cssr_1.cM)('disabled', `
+ cursor: default;
+ `), (0, cssr_1.cM)('clickable', `
+ cursor: pointer;
+ `), (0, cssr_1.cE)('title', `
+ color: var(--u-card-color);
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 24px;
+ `), (0, cssr_1.cE)('description', `
+ color: var(--u-card-sub-color);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ margin-top: 2px;
+ `)])]);

package/lib/kanban/src/use-kanban-data.d.ts

@@ -0,0 +1,4 @@
+import type { KanbanColumn, KanbanItem, KanbanKey, MoveItemResult } from './interface';
+export declare function groupItemsByColumn(columns: KanbanColumn[], data: KanbanItem[], columnField: string): Map<KanbanKey, KanbanItem[]>;
+export declare function moveItem(data: KanbanItem[], getKey: (item: KanbanItem) => KanbanKey, columnField: string, movingKey: KanbanKey, toColumn: KanbanKey, toIndex: number): MoveItemResult | null;
+export declare function reorderColumns(columns: KanbanColumn[], movingKey: KanbanKey, targetKey: KanbanKey, position: 'before' | 'after'): KanbanColumn[] | null;

package/lib/kanban/src/use-kanban-data.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupItemsByColumn = groupItemsByColumn;
+exports.moveItem = moveItem;
+exports.reorderColumns = reorderColumns;
+function groupItemsByColumn(columns, data, columnField) {
+    const map = new Map();
+    for (const column of columns) {
+        map.set(column.key, []);
+    }
+    for (const item of data) {
+        const columnKey = item[columnField];
+        if (!map.has(columnKey)) {
+            map.set(columnKey, []);
+        }
+        map.get(columnKey).push(item);
+    }
+    return map;
+}
+function moveItem(data, getKey, columnField, movingKey, toColumn, toIndex) {
+    const sourceIndex = data.findIndex(item => getKey(item) === movingKey);
+    if (sourceIndex < 0) {
+        return null;
+    }
+    const moving = data[sourceIndex];
+    const fromColumn = moving[columnField];
+    const fromIndex = data
+        .filter(item => item[columnField] === fromColumn)
+        .findIndex(item => getKey(item) === movingKey);
+    const updatedMoving = Object.assign(Object.assign({}, moving), { [columnField]: toColumn });
+    const rest = data.slice();
+    rest.splice(sourceIndex, 1);
+    const targetColumnItems = rest.filter(item => item[columnField] === toColumn);
+    const clampedIndex = Math.max(0, Math.min(toIndex, targetColumnItems.length));
+    let insertAt;
+    if (targetColumnItems.length === 0) {
+        insertAt = rest.length;
+    }
+    else if (clampedIndex >= targetColumnItems.length) {
+        const anchor = targetColumnItems[targetColumnItems.length - 1];
+        insertAt = rest.findIndex(item => getKey(item) === getKey(anchor)) + 1;
+    }
+    else {
+        const anchor = targetColumnItems[clampedIndex];
+        insertAt = rest.findIndex(item => getKey(item) === getKey(anchor));
+    }
+    rest.splice(insertAt, 0, updatedMoving);
+    return {
+        data: rest,
+        item: updatedMoving,
+        from: { column: fromColumn, index: fromIndex },
+        to: { column: toColumn, index: clampedIndex }
+    };
+}
+function reorderColumns(columns, movingKey, targetKey, position) {
+    if (movingKey === targetKey) {
+        return null;
+    }
+    const sourceIndex = columns.findIndex(column => column.key === movingKey);
+    const targetIndex = columns.findIndex(column => column.key === targetKey);
+    if (sourceIndex < 0 || targetIndex < 0) {
+        return null;
+    }
+    const next = columns.slice();
+    const [moving] = next.splice(sourceIndex, 1);
+    const anchorIndex = next.findIndex(column => column.key === targetKey);
+    const insertAt = position === 'after' ? anchorIndex + 1 : anchorIndex;
+    next.splice(insertAt, 0, moving);
+    return next;
+}

package/lib/kanban/src/use-kanban-drag.d.ts

@@ -0,0 +1,2 @@
+import type { UseKanbanDragDeps, UseKanbanDragReturn } from './interface';
+export declare function useKanbanDrag(deps: UseKanbanDragDeps): UseKanbanDragReturn;