@uzum-tech/ui 2.0.8 → 2.1.0

package/lib/kanban/src/Kanban.js

@@ -0,0 +1,291 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const empty_1 = require("../../empty");
+const styles_1 = require("../styles");
+const injection_1 = require("./injection");
+const interface_1 = require("./interface");
+const KanbanColumn_1 = __importDefault(require("./KanbanColumn"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const use_kanban_data_1 = require("./use-kanban-data");
+const use_kanban_drag_1 = require("./use-kanban-drag");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Kanban',
+    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), interface_1.kanbanProps),
+    emits: [
+        'update:data',
+        'move',
+        'columns-reorder',
+        'drag-start',
+        'drag-end',
+        'item-click',
+        'column-scroll-top',
+        'column-scroll-bottom',
+        'scroll-top',
+        'scroll-bottom'
+    ],
+    setup(props, { emit, expose }) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Kanban', '-kanban', index_cssr_1.default, styles_1.kanbanLight, props, mergedClsPrefixRef);
+        const selfElRef = (0, vue_1.ref)(null);
+        const uncontrolledDataRef = (0, vue_1.ref)(props.data);
+        const uncontrolledColumnsRef = (0, vue_1.ref)(props.columns);
+        const mergedDataRef = (0, vue_1.computed)(() => uncontrolledDataRef.value);
+        const mergedColumnsRef = (0, vue_1.computed)(() => uncontrolledColumnsRef.value);
+        const columnFieldRef = (0, vue_1.computed)(() => props.columnField);
+        const orientationRef = (0, vue_1.computed)(() => props.orientation);
+        const allowDropRef = (0, vue_1.computed)(() => props.allowDrop);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { columnWidth, columnGap, cardGap, boardPadding, columnHeaderPadding, columnBodyPadding, columnBackgroundColor, columnBorderRadius, columnHeaderColor, countBackgroundColor, countTextColor, statusSuccessHeaderColor, statusSuccessCountColor, statusProgressHeaderColor, statusProgressCountColor, statusPendingHeaderColor, statusPendingCountColor, statusErrorHeaderColor, statusErrorCountColor, columnDraggingOpacity, cardBackgroundColor, cardBackgroundColorDragging, cardBorderColorDragging, cardBorderRadius, cardPadding, cardColor, cardSubColor, cardBoxShadow, cardBoxShadowHover, cardBoxShadowDragging, dropIndicatorColor, maxReachedColor } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-column-width': columnWidth,
+                '--u-column-gap': columnGap,
+                '--u-card-gap': cardGap,
+                '--u-board-padding': boardPadding,
+                '--u-column-header-padding': columnHeaderPadding,
+                '--u-column-body-padding': columnBodyPadding,
+                '--u-column-background-color': columnBackgroundColor,
+                '--u-column-border-radius': columnBorderRadius,
+                '--u-column-header-color': columnHeaderColor,
+                '--u-count-background-color': countBackgroundColor,
+                '--u-count-text-color': countTextColor,
+                '--u-status-success-header-color': statusSuccessHeaderColor,
+                '--u-status-success-count-color': statusSuccessCountColor,
+                '--u-status-progress-header-color': statusProgressHeaderColor,
+                '--u-status-progress-count-color': statusProgressCountColor,
+                '--u-status-pending-header-color': statusPendingHeaderColor,
+                '--u-status-pending-count-color': statusPendingCountColor,
+                '--u-status-error-header-color': statusErrorHeaderColor,
+                '--u-status-error-count-color': statusErrorCountColor,
+                '--u-column-dragging-opacity': columnDraggingOpacity,
+                '--u-card-background-color': cardBackgroundColor,
+                '--u-card-background-color-dragging': cardBackgroundColorDragging,
+                '--u-card-border-color-dragging': cardBorderColorDragging,
+                '--u-card-border-radius': cardBorderRadius,
+                '--u-card-padding': cardPadding,
+                '--u-card-color': cardColor,
+                '--u-card-sub-color': cardSubColor,
+                '--u-card-box-shadow': cardBoxShadow,
+                '--u-card-box-shadow-hover': cardBoxShadowHover,
+                '--u-card-box-shadow-dragging': cardBoxShadowDragging,
+                '--u-drop-indicator-color': dropIndicatorColor,
+                '--u-max-reached-color': maxReachedColor
+            };
+        });
+        const drag = (0, use_kanban_drag_1.useKanbanDrag)({
+            dataRef: mergedDataRef,
+            columnsRef: mergedColumnsRef,
+            columnFieldRef,
+            orientationRef,
+            getItemKey,
+            isItemDraggable,
+            isColumnDraggable,
+            allowDropRef,
+            emitUpdateData: doUpdateData,
+            emitMove,
+            emitColumnsReorder,
+            emitDragStart,
+            emitDragEnd
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('kanban', undefined, cssVarsRef, props)
+            : undefined;
+        const handleItemClick = (item, column) => {
+            var _a;
+            (_a = props.onItemClick) === null || _a === void 0 ? void 0 : _a.call(props, item, column);
+            emit('item-click', item, column);
+        };
+        const buildScrollContext = (target, column) => ({
+            column,
+            scrollTop: target.scrollTop,
+            scrollHeight: target.scrollHeight,
+            clientHeight: target.clientHeight
+        });
+        const handleColumnScroll = (column, target) => {
+            var _a, _b;
+            const { scrollTop, scrollHeight, clientHeight } = target;
+            const threshold = props.scrollThreshold;
+            const ctx = buildScrollContext(target, column.key);
+            if (scrollTop <= threshold) {
+                (_a = props.onColumnScrollTop) === null || _a === void 0 ? void 0 : _a.call(props, ctx);
+                emit('column-scroll-top', ctx);
+            }
+            if (scrollHeight - scrollTop - clientHeight <= threshold) {
+                (_b = props.onColumnScrollBottom) === null || _b === void 0 ? void 0 : _b.call(props, ctx);
+                emit('column-scroll-bottom', ctx);
+            }
+        };
+        const handleBoardScroll = (event) => {
+            var _a, _b;
+            const target = event.target;
+            const { scrollTop, scrollHeight, clientHeight } = target;
+            const threshold = props.scrollThreshold;
+            const ctx = buildScrollContext(target);
+            if (scrollTop <= threshold) {
+                (_a = props.onScrollTop) === null || _a === void 0 ? void 0 : _a.call(props, ctx);
+                emit('scroll-top', ctx);
+            }
+            if (scrollHeight - scrollTop - clientHeight <= threshold) {
+                (_b = props.onScrollBottom) === null || _b === void 0 ? void 0 : _b.call(props, ctx);
+                emit('scroll-bottom', ctx);
+            }
+        };
+        const findColumnEl = (columnKey) => {
+            if (!selfElRef.value) {
+                return null;
+            }
+            return selfElRef.value.querySelector(`[data-kanban-column-key="${String(columnKey)}"]`);
+        };
+        const exposed = {
+            moveItem(key, to) {
+                var _a;
+                const result = (0, use_kanban_data_1.moveItem)(mergedDataRef.value, getItemKey, columnFieldRef.value, key, to.column, (_a = to.index) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER);
+                if (result) {
+                    doUpdateData(result.data);
+                }
+            },
+            addItem(item, index) {
+                const next = mergedDataRef.value.slice();
+                next.splice(index !== null && index !== void 0 ? index : next.length, 0, item);
+                doUpdateData(next);
+            },
+            removeItem(key) {
+                doUpdateData(mergedDataRef.value.filter(item => getItemKey(item) !== key));
+            },
+            scrollToColumn(columnKey) {
+                var _a;
+                (_a = findColumnEl(columnKey)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                    behavior: 'smooth',
+                    inline: 'nearest',
+                    block: 'nearest'
+                });
+            },
+            scrollColumnToBottom(columnKey) {
+                var _a;
+                const body = (_a = findColumnEl(columnKey)) === null || _a === void 0 ? void 0 : _a.querySelector(`.${mergedClsPrefixRef.value}-kanban-column__body`);
+                if (body) {
+                    body.scrollTop = body.scrollHeight;
+                }
+            }
+        };
+        expose(exposed);
+        function getItemKey(item) {
+            const { itemKey } = props;
+            if (typeof itemKey === 'function') {
+                return itemKey(item);
+            }
+            return item[itemKey];
+        }
+        function isItemDraggable(item, column) {
+            return (props.draggable && !props.disabled && !item.disabled && !column.frozen);
+        }
+        function isColumnDraggable(column) {
+            return props.columnsDraggable && !props.disabled && !column.disabled;
+        }
+        function doUpdateData(next) {
+            uncontrolledDataRef.value = next;
+            emit('update:data', next);
+        }
+        function doUpdateColumns(next) {
+            uncontrolledColumnsRef.value = next;
+        }
+        function emitMove(ctx) {
+            var _a;
+            (_a = props.onMove) === null || _a === void 0 ? void 0 : _a.call(props, ctx);
+            emit('move', ctx);
+        }
+        function emitColumnsReorder(columns) {
+            var _a;
+            doUpdateColumns(columns);
+            (_a = props.onColumnsReorder) === null || _a === void 0 ? void 0 : _a.call(props, columns);
+            emit('columns-reorder', columns);
+        }
+        function emitDragStart(ctx) {
+            var _a;
+            (_a = props.onDragStart) === null || _a === void 0 ? void 0 : _a.call(props, ctx);
+            emit('drag-start', ctx);
+        }
+        function emitDragEnd(ctx) {
+            var _a;
+            (_a = props.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(props, ctx);
+            emit('drag-end', ctx);
+        }
+        (0, vue_1.provide)(injection_1.kanbanInjectionKey, {
+            mergedClsPrefixRef,
+            mergedThemeRef: themeRef,
+            propsRef: props,
+            getItemKey,
+            draggingItemKeySetRef: drag.draggingItemKeySetRef,
+            draggingItemRef: drag.draggingItemRef,
+            draggingColumnKeyRef: drag.draggingColumnKeyRef,
+            droppingColumnKeyRef: drag.droppingColumnKeyRef,
+            droppingItemKeyRef: drag.droppingItemKeyRef,
+            droppingPositionRef: drag.droppingPositionRef,
+            handleItemDragStart: drag.handleItemDragStart,
+            handleItemDragOver: drag.handleItemDragOver,
+            handleItemDrop: drag.handleItemDrop,
+            handleColumnDragStart: drag.handleColumnDragStart,
+            handleColumnDragOver: drag.handleColumnDragOver,
+            handleColumnDrop: drag.handleColumnDrop,
+            handleDragEnd: drag.handleDragEnd,
+            handleItemClick,
+            handleColumnScroll,
+            isItemDraggable,
+            isColumnDraggable
+        });
+        (0, vue_1.watch)(() => props.data, (value) => {
+            uncontrolledDataRef.value = value;
+        });
+        (0, vue_1.watch)(() => props.columns, (value) => {
+            uncontrolledColumnsRef.value = value;
+        });
+        return {
+            selfElRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedColumns: mergedColumnsRef,
+            mergedData: mergedDataRef,
+            columnFieldValue: columnFieldRef,
+            handleBoardScroll,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix, mergedColumns, mergedData, columnFieldValue, orientation, scrollMode, loading, emptyProps, $slots } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const grouped = (0, use_kanban_data_1.groupItemsByColumn)(mergedColumns, mergedData, columnFieldValue);
+        const isEmpty = !mergedColumns.length;
+        return ((0, vue_1.h)("div", { ref: "selfElRef", class: [`${mergedClsPrefix}-kanban`, this.themeClass], style: this.cssVars }, isEmpty ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-kanban__empty` }, $slots.empty ? ($slots.empty()) : ((0, vue_1.h)(empty_1.UEmpty, Object.assign({ size: "large" }, emptyProps))))) : ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-kanban__board`,
+                {
+                    [`${mergedClsPrefix}-kanban__board--vertical`]: orientation === 'vertical',
+                    [`${mergedClsPrefix}-kanban__board--scroll-board`]: scrollMode === 'board'
+                }
+            ], "aria-busy": loading || undefined, onScroll: scrollMode === 'board' ? this.handleBoardScroll : undefined },
+            (0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-kanban__board-track`,
+                    {
+                        [`${mergedClsPrefix}-kanban__board-track--vertical`]: orientation === 'vertical'
+                    }
+                ] }, mergedColumns.map((column, index) => {
+                var _a, _b;
+                return $slots.column ? ($slots.column({
+                    column,
+                    items: (_a = grouped.get(column.key)) !== null && _a !== void 0 ? _a : [],
+                    index
+                })) : ((0, vue_1.h)(KanbanColumn_1.default, { key: column.key, column: column, items: (_b = grouped.get(column.key)) !== null && _b !== void 0 ? _b : [], index: index }, {
+                    columnHeader: $slots.columnHeader,
+                    columnFooter: $slots.columnFooter,
+                    columnEmpty: $slots.columnEmpty,
+                    card: $slots.card
+                }));
+            }))))));
+    }
+});

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

@@ -0,0 +1,39 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly item: {
+        readonly type: import("vue").PropType<import("./interface").KanbanItem>;
+        readonly required: true;
+    };
+    readonly column: {
+        readonly type: import("vue").PropType<import("./interface").KanbanColumn>;
+        readonly required: true;
+    };
+    readonly index: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly ghost: BooleanConstructor;
+}>, {
+    injection: import("./injection").KanbanInjection;
+    mergedClsPrefix: import("vue").Ref<string, string>;
+    draggable: import("vue").ComputedRef<boolean>;
+    dragging: import("vue").ComputedRef<boolean>;
+    clickable: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly item: {
+        readonly type: import("vue").PropType<import("./interface").KanbanItem>;
+        readonly required: true;
+    };
+    readonly column: {
+        readonly type: import("vue").PropType<import("./interface").KanbanColumn>;
+        readonly required: true;
+    };
+    readonly index: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly ghost: BooleanConstructor;
+}>> & Readonly<{}>, {
+    readonly ghost: boolean;
+    readonly index: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/kanban/src/KanbanCard.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
+const injection_1 = require("./injection");
+const interface_1 = require("./interface");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'KanbanCard',
+    props: interface_1.kanbanCardProps,
+    setup(props) {
+        const injection = (0, vue_1.inject)(injection_1.kanbanInjectionKey, null);
+        if (!injection) {
+            (0, _utils_1.warn)('kanban', '`UKanbanCard` must be used inside `UKanban`.');
+        }
+        const { mergedClsPrefixRef, getItemKey, draggingItemKeySetRef, isItemDraggable, propsRef } = injection;
+        const itemKeyRef = (0, vue_1.computed)(() => getItemKey(props.item));
+        const draggableRef = (0, vue_1.computed)(() => isItemDraggable(props.item, props.column));
+        const draggingRef = (0, vue_1.computed)(() => draggingItemKeySetRef.value.has(itemKeyRef.value));
+        const clickableRef = (0, vue_1.computed)(() => !!propsRef.onItemClick && !props.item.disabled);
+        return {
+            injection,
+            mergedClsPrefix: mergedClsPrefixRef,
+            draggable: draggableRef,
+            dragging: draggingRef,
+            clickable: clickableRef
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix, item, column, ghost, dragging, draggable, clickable, injection, $slots } = this;
+        let body;
+        if ($slots.card) {
+            body = $slots.card({ item, column, dragging: dragging || ghost });
+        }
+        else if (item.render) {
+            body = item.render(item, column);
+        }
+        else {
+            body = [
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-kanban-card__title` }, (_a = (0, _utils_1.render)(item.title)) !== null && _a !== void 0 ? _a : item.name),
+                item.description ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-kanban-card__description` }, (0, _utils_1.render)(item.description))) : null
+            ];
+        }
+        if (ghost) {
+            return ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-kanban-card`,
+                    `${mergedClsPrefix}-kanban-card--ghost`
+                ], "aria-hidden": "true" }, body));
+        }
+        return ((0, vue_1.h)("div", Object.assign({ class: [
+                `${mergedClsPrefix}-kanban-card`,
+                {
+                    [`${mergedClsPrefix}-kanban-card--dragging`]: dragging,
+                    [`${mergedClsPrefix}-kanban-card--disabled`]: item.disabled,
+                    [`${mergedClsPrefix}-kanban-card--clickable`]: clickable
+                }
+            ], "data-kanban-card-key": String(injection.getItemKey(item)), draggable: draggable || undefined, onDragstart: (event) => injection.handleItemDragStart(event, item), onDragover: (event) => injection.handleItemDragOver(event, item), onDrop: (event) => injection.handleItemDrop(event, item), onDragend: () => injection.handleDragEnd(), onClick: () => {
+                if (clickable) {
+                    injection.handleItemClick(item, column);
+                }
+            } }, injection.propsRef.cardProps), body));
+    }
+});

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

@@ -0,0 +1,45 @@
+import type { CSSProperties } from 'vue';
+import type { KanbanDropPosition, KanbanItem } from './interface';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly column: {
+        readonly type: import("vue").PropType<import("./interface").KanbanColumn>;
+        readonly required: true;
+    };
+    readonly items: {
+        readonly type: import("vue").PropType<KanbanItem[]>;
+        readonly default: () => never[];
+    };
+    readonly index: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+}>, {
+    injection: import("./injection").KanbanInjection;
+    mergedClsPrefix: import("vue").Ref<string, string>;
+    columnDraggable: import("vue").ComputedRef<boolean>;
+    dragging: import("vue").ComputedRef<boolean>;
+    columnDropPosition: import("vue").ComputedRef<KanbanDropPosition | null>;
+    vertical: import("vue").ComputedRef<boolean>;
+    boardScroll: import("vue").ComputedRef<boolean>;
+    maxReached: import("vue").ComputedRef<boolean>;
+    columnStyle: import("vue").ComputedRef<CSSProperties | undefined>;
+    countStyle: import("vue").ComputedRef<CSSProperties | undefined>;
+    handleBodyScroll: (event: Event) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly column: {
+        readonly type: import("vue").PropType<import("./interface").KanbanColumn>;
+        readonly required: true;
+    };
+    readonly items: {
+        readonly type: import("vue").PropType<KanbanItem[]>;
+        readonly default: () => never[];
+    };
+    readonly index: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+}>> & Readonly<{}>, {
+    readonly items: KanbanItem[];
+    readonly index: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/kanban/src/KanbanColumn.js

@@ -0,0 +1,141 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
+const empty_1 = require("../../empty");
+const injection_1 = require("./injection");
+const interface_1 = require("./interface");
+const KanbanCard_1 = __importDefault(require("./KanbanCard"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'KanbanColumn',
+    props: interface_1.kanbanColumnProps,
+    setup(props) {
+        const injection = (0, vue_1.inject)(injection_1.kanbanInjectionKey, null);
+        if (!injection) {
+            (0, _utils_1.warn)('kanban', '`UKanbanColumn` must be used inside `UKanban`.');
+        }
+        const { mergedClsPrefixRef, draggingColumnKeyRef, droppingColumnKeyRef, droppingPositionRef, isColumnDraggable, propsRef } = injection;
+        const columnDraggableRef = (0, vue_1.computed)(() => isColumnDraggable(props.column));
+        const draggingRef = (0, vue_1.computed)(() => draggingColumnKeyRef.value === props.column.key);
+        const columnDropPositionRef = (0, vue_1.computed)(() => draggingColumnKeyRef.value != null
+            && droppingColumnKeyRef.value === props.column.key
+            ? droppingPositionRef.value
+            : null);
+        const verticalRef = (0, vue_1.computed)(() => propsRef.orientation === 'vertical');
+        const boardScrollRef = (0, vue_1.computed)(() => propsRef.scrollMode === 'board');
+        const maxReachedRef = (0, vue_1.computed)(() => typeof props.column.max === 'number'
+            && props.items.length >= props.column.max);
+        const statusRef = (0, vue_1.computed)(() => {
+            const status = props.column.status;
+            return status && status !== 'neutral' ? status : null;
+        });
+        const columnStyleRef = (0, vue_1.computed)(() => statusRef.value
+            ? { backgroundColor: `var(--u-status-${statusRef.value}-header-color)` }
+            : undefined);
+        const countStyleRef = (0, vue_1.computed)(() => statusRef.value && !maxReachedRef.value
+            ? { backgroundColor: `var(--u-status-${statusRef.value}-count-color)` }
+            : undefined);
+        function handleBodyScroll(event) {
+            injection.handleColumnScroll(props.column, event.target);
+        }
+        return {
+            injection,
+            mergedClsPrefix: mergedClsPrefixRef,
+            columnDraggable: columnDraggableRef,
+            dragging: draggingRef,
+            columnDropPosition: columnDropPositionRef,
+            vertical: verticalRef,
+            boardScroll: boardScrollRef,
+            maxReached: maxReachedRef,
+            columnStyle: columnStyleRef,
+            countStyle: countStyleRef,
+            handleBodyScroll
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix, column, items, injection, columnDraggable, dragging, columnDropPosition, vertical, boardScroll, maxReached, columnStyle, countStyle, $slots } = this;
+        const count = items.length;
+        const emptyText = injection.propsRef.columnEmptyText;
+        const getItemKey = injection.getItemKey;
+        const draggingItem = injection.draggingItemRef.value;
+        const draggingKey = draggingItem ? getItemKey(draggingItem) : null;
+        const columnField = (_a = injection.propsRef.columnField) !== null && _a !== void 0 ? _a : 'column';
+        const sourceColumnKey = draggingItem ? draggingItem[columnField] : null;
+        const dropColumnKey = injection.droppingColumnKeyRef.value;
+        const dropKey = injection.droppingItemKeyRef.value;
+        const dropPosition = injection.droppingPositionRef.value;
+        const isTarget = !!draggingItem && dropColumnKey === column.key && !column.frozen;
+        const isSameColumnReorder = !!draggingItem && sourceColumnKey === dropColumnKey;
+        const renderCard = (item) => ((0, vue_1.h)(KanbanCard_1.default, { key: getItemKey(item), item: item, column: column }, { card: $slots.card }));
+        const renderGhost = () => ((0, vue_1.h)(KanbanCard_1.default, { key: "__kanban-ghost__", ghost: true, item: draggingItem, column: column }, { card: $slots.card }));
+        let cardNodes = [];
+        if (draggingItem && isSameColumnReorder && sourceColumnKey === column.key) {
+            const rest = items.filter(item => getItemKey(item) !== draggingKey);
+            let insertAt = rest.length;
+            if (dropKey != null) {
+                const anchor = rest.findIndex(item => getItemKey(item) === dropKey);
+                if (anchor >= 0) {
+                    insertAt = dropPosition === 'after' ? anchor + 1 : anchor;
+                }
+            }
+            const preview = rest.slice();
+            preview.splice(insertAt, 0, draggingItem);
+            cardNodes = preview.map(renderCard);
+        }
+        else {
+            items.forEach((item) => {
+                const key = getItemKey(item);
+                if (isTarget && dropKey === key && dropPosition === 'before') {
+                    cardNodes.push(renderGhost());
+                }
+                cardNodes.push(renderCard(item));
+                if (isTarget && dropKey === key && dropPosition === 'after') {
+                    cardNodes.push(renderGhost());
+                }
+            });
+            if (isTarget && dropKey == null) {
+                cardNodes.push(renderGhost());
+            }
+        }
+        const hasBodyContent = cardNodes.length > 0;
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-kanban-column`,
+                {
+                    [`${mergedClsPrefix}-kanban-column--vertical`]: vertical,
+                    [`${mergedClsPrefix}-kanban-column--board-scroll`]: boardScroll,
+                    [`${mergedClsPrefix}-kanban-column--dragging`]: dragging,
+                    [`${mergedClsPrefix}-kanban-column--drop-before`]: columnDropPosition === 'before',
+                    [`${mergedClsPrefix}-kanban-column--drop-after`]: columnDropPosition === 'after'
+                }
+            ], style: columnStyle, "data-kanban-column-key": String(column.key), onDragover: (event) => injection.handleColumnDragOver(event, column), onDrop: (event) => injection.handleColumnDrop(event, column) },
+            (0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-kanban-column__header`,
+                    {
+                        [`${mergedClsPrefix}-kanban-column__header--draggable`]: columnDraggable
+                    }
+                ], draggable: columnDraggable || undefined, onDragstart: (event) => injection.handleColumnDragStart(event, column), onDragend: () => injection.handleDragEnd() }, $slots.columnHeader
+                ? $slots.columnHeader({ column, count })
+                : [
+                    (0, vue_1.h)("span", { class: `${mergedClsPrefix}-kanban-column__title` }, (0, _utils_1.render)(column.title)),
+                    (0, vue_1.h)("span", { class: [
+                            `${mergedClsPrefix}-kanban-column__count`,
+                            {
+                                [`${mergedClsPrefix}-kanban-column__count--max-reached`]: maxReached
+                            }
+                        ], style: countStyle }, typeof column.max === 'number'
+                        ? `${count}/${column.max}`
+                        : count)
+                ]),
+            (0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-kanban-column__body`,
+                    {
+                        [`${mergedClsPrefix}-kanban-column__body--board-scroll`]: boardScroll
+                    }
+                ], onScroll: boardScroll ? undefined : this.handleBodyScroll }, hasBodyContent ? (cardNodes) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-kanban-column__empty` }, $slots.columnEmpty ? ($slots.columnEmpty({ column })) : typeof emptyText === 'function' ? (emptyText()) : ((0, vue_1.h)(empty_1.UEmpty, { size: "small", description: emptyText }))))),
+            $slots.columnFooter ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-kanban-column__footer` }, $slots.columnFooter({ column }))) : null));
+    }
+});

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

@@ -0,0 +1,28 @@
+import type { Ref } from 'vue';
+import type { MergedTheme } from '../../_mixins';
+import type { KanbanTheme } from '../styles';
+import type { KanbanColumn, KanbanDropPosition, KanbanItem, KanbanKey, KanbanProps } from './interface';
+export interface KanbanInjection {
+    mergedClsPrefixRef: Ref<string>;
+    mergedThemeRef: Ref<MergedTheme<KanbanTheme>>;
+    propsRef: KanbanProps;
+    getItemKey: (item: KanbanItem) => KanbanKey;
+    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: () => void;
+    handleItemClick: (item: KanbanItem, column: KanbanColumn) => void;
+    handleColumnScroll: (column: KanbanColumn, target: HTMLElement) => void;
+    isItemDraggable: (item: KanbanItem, column: KanbanColumn) => boolean;
+    isColumnDraggable: (column: KanbanColumn) => boolean;
+}
+export declare const kanbanInjectionKey: import("vue").InjectionKey<KanbanInjection>;

package/lib/kanban/src/injection.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.kanbanInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.kanbanInjectionKey = (0, _utils_1.createInjectionKey)('u-kanban');