@uzum-tech/ui 2.0.8 → 2.1.0

package/es/kanban/src/Kanban.mjs

@@ -0,0 +1,349 @@
+import { computed, defineComponent, h, provide, ref, watch } from 'vue';
+import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { UEmpty } from "../../empty/index.mjs";
+import { kanbanLight } from "../styles/index.mjs";
+import { kanbanInjectionKey } from "./injection.mjs";
+import { kanbanProps } from "./interface.mjs";
+import UKanbanColumn from "./KanbanColumn.mjs";
+import style from "./styles/index.cssr.mjs";
+import { groupItemsByColumn, moveItem } from "./use-kanban-data.mjs";
+import { useKanbanDrag } from "./use-kanban-drag.mjs";
+export default defineComponent({
+  name: 'Kanban',
+  props: Object.assign(Object.assign({}, useTheme.props), 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
+    } = useConfig(props);
+    const themeRef = useTheme('Kanban', '-kanban', style, kanbanLight, props, mergedClsPrefixRef);
+    const selfElRef = ref(null);
+    const uncontrolledDataRef = ref(props.data);
+    const uncontrolledColumnsRef = ref(props.columns);
+    const mergedDataRef = computed(() => uncontrolledDataRef.value);
+    const mergedColumnsRef = computed(() => uncontrolledColumnsRef.value);
+    const columnFieldRef = computed(() => props.columnField);
+    const orientationRef = computed(() => props.orientation);
+    const allowDropRef = computed(() => props.allowDrop);
+    const cssVarsRef = 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 = useKanbanDrag({
+      dataRef: mergedDataRef,
+      columnsRef: mergedColumnsRef,
+      columnFieldRef,
+      orientationRef,
+      getItemKey,
+      isItemDraggable,
+      isColumnDraggable,
+      allowDropRef,
+      emitUpdateData: doUpdateData,
+      emitMove,
+      emitColumnsReorder,
+      emitDragStart,
+      emitDragEnd
+    });
+    const themeClassHandle = inlineThemeDisabled ? 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 = 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);
+    }
+    provide(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
+    });
+    watch(() => props.data, value => {
+      uncontrolledDataRef.value = value;
+    });
+    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 = groupItemsByColumn(mergedColumns, mergedData, columnFieldValue);
+    const isEmpty = !mergedColumns.length;
+    return h("div", {
+      ref: "selfElRef",
+      class: [`${mergedClsPrefix}-kanban`, this.themeClass],
+      style: this.cssVars
+    }, isEmpty ? h("div", {
+      class: `${mergedClsPrefix}-kanban__empty`
+    }, $slots.empty ? $slots.empty() : h(UEmpty, Object.assign({
+      size: "large"
+    }, emptyProps))) : 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
+    }, 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
+      }) : h(UKanbanColumn, {
+        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/es/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/es/kanban/src/KanbanCard.mjs

@@ -0,0 +1,86 @@
+import { computed, defineComponent, h, inject } from 'vue';
+import { render as resolveRenderValue, warn } from "../../_utils/index.mjs";
+import { kanbanInjectionKey } from "./injection.mjs";
+import { kanbanCardProps } from "./interface.mjs";
+export default defineComponent({
+  name: 'KanbanCard',
+  props: kanbanCardProps,
+  setup(props) {
+    const injection = inject(kanbanInjectionKey, null);
+    if (!injection) {
+      warn('kanban', '`UKanbanCard` must be used inside `UKanban`.');
+    }
+    const {
+      mergedClsPrefixRef,
+      getItemKey,
+      draggingItemKeySetRef,
+      isItemDraggable,
+      propsRef
+    } = injection;
+    const itemKeyRef = computed(() => getItemKey(props.item));
+    const draggableRef = computed(() => isItemDraggable(props.item, props.column));
+    const draggingRef = computed(() => draggingItemKeySetRef.value.has(itemKeyRef.value));
+    const clickableRef = 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 = [h("div", {
+        class: `${mergedClsPrefix}-kanban-card__title`
+      }, (_a = resolveRenderValue(item.title)) !== null && _a !== void 0 ? _a : item.name), item.description ? h("div", {
+        class: `${mergedClsPrefix}-kanban-card__description`
+      }, resolveRenderValue(item.description)) : null];
+    }
+    if (ghost) {
+      return h("div", {
+        class: [`${mergedClsPrefix}-kanban-card`, `${mergedClsPrefix}-kanban-card--ghost`],
+        "aria-hidden": "true"
+      }, body);
+    }
+    return 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/es/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/es/kanban/src/KanbanColumn.mjs

@@ -0,0 +1,176 @@
+import { computed, defineComponent, h, inject } from 'vue';
+import { render as resolveRenderValue, warn } from "../../_utils/index.mjs";
+import { UEmpty } from "../../empty/index.mjs";
+import { kanbanInjectionKey } from "./injection.mjs";
+import { kanbanColumnProps } from "./interface.mjs";
+import UKanbanCard from "./KanbanCard.mjs";
+export default defineComponent({
+  name: 'KanbanColumn',
+  props: kanbanColumnProps,
+  setup(props) {
+    const injection = inject(kanbanInjectionKey, null);
+    if (!injection) {
+      warn('kanban', '`UKanbanColumn` must be used inside `UKanban`.');
+    }
+    const {
+      mergedClsPrefixRef,
+      draggingColumnKeyRef,
+      droppingColumnKeyRef,
+      droppingPositionRef,
+      isColumnDraggable,
+      propsRef
+    } = injection;
+    const columnDraggableRef = computed(() => isColumnDraggable(props.column));
+    const draggingRef = computed(() => draggingColumnKeyRef.value === props.column.key);
+    const columnDropPositionRef = computed(() => draggingColumnKeyRef.value != null && droppingColumnKeyRef.value === props.column.key ? droppingPositionRef.value : null);
+    const verticalRef = computed(() => propsRef.orientation === 'vertical');
+    const boardScrollRef = computed(() => propsRef.scrollMode === 'board');
+    const maxReachedRef = computed(() => typeof props.column.max === 'number' && props.items.length >= props.column.max);
+    const statusRef = computed(() => {
+      const status = props.column.status;
+      return status && status !== 'neutral' ? status : null;
+    });
+    const columnStyleRef = computed(() => statusRef.value ? {
+      backgroundColor: `var(--u-status-${statusRef.value}-header-color)`
+    } : undefined);
+    const countStyleRef = 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 => h(UKanbanCard, {
+      key: getItemKey(item),
+      item: item,
+      column: column
+    }, {
+      card: $slots.card
+    });
+    const renderGhost = () => h(UKanbanCard, {
+      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 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)
+    }, 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
+    }) : [h("span", {
+      class: `${mergedClsPrefix}-kanban-column__title`
+    }, resolveRenderValue(column.title)), h("span", {
+      class: [`${mergedClsPrefix}-kanban-column__count`, {
+        [`${mergedClsPrefix}-kanban-column__count--max-reached`]: maxReached
+      }],
+      style: countStyle
+    }, typeof column.max === 'number' ? `${count}/${column.max}` : count)]), h("div", {
+      class: [`${mergedClsPrefix}-kanban-column__body`, {
+        [`${mergedClsPrefix}-kanban-column__body--board-scroll`]: boardScroll
+      }],
+      onScroll: boardScroll ? undefined : this.handleBodyScroll
+    }, hasBodyContent ? cardNodes : h("div", {
+      class: `${mergedClsPrefix}-kanban-column__empty`
+    }, $slots.columnEmpty ? $slots.columnEmpty({
+      column
+    }) : typeof emptyText === 'function' ? emptyText() : h(UEmpty, {
+      size: "small",
+      description: emptyText
+    }))), $slots.columnFooter ? h("div", {
+      class: `${mergedClsPrefix}-kanban-column__footer`
+    }, $slots.columnFooter({
+      column
+    })) : null);
+  }
+});