@uzum-tech/ui 2.0.8 → 2.1.0

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

@@ -0,0 +1,220 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKanbanDrag = useKanbanDrag;
+const vue_1 = require("vue");
+const use_kanban_data_1 = require("./use-kanban-data");
+const DROP_HALF_DIVISOR = 2;
+function useKanbanDrag(deps) {
+    const { dataRef, columnsRef, columnFieldRef, orientationRef, getItemKey, isItemDraggable, isColumnDraggable, allowDropRef } = deps;
+    const draggingItemKeySetRef = (0, vue_1.ref)(new Set());
+    const draggingItemRef = (0, vue_1.ref)(null);
+    const draggingColumnKeyRef = (0, vue_1.ref)(null);
+    const droppingColumnKeyRef = (0, vue_1.ref)(null);
+    const droppingItemKeyRef = (0, vue_1.ref)(null);
+    const droppingPositionRef = (0, vue_1.ref)(null);
+    const columnByKeyRef = (0, vue_1.computed)(() => {
+        const map = new Map();
+        for (const column of columnsRef.value) {
+            map.set(column.key, column);
+        }
+        return map;
+    });
+    function resetDropState() {
+        droppingColumnKeyRef.value = null;
+        droppingItemKeyRef.value = null;
+        droppingPositionRef.value = null;
+    }
+    function handleDragEnd() {
+        draggingItemKeySetRef.value = new Set();
+        draggingItemRef.value = null;
+        draggingColumnKeyRef.value = null;
+        resetDropState();
+    }
+    function getColumnOf(item) {
+        return columnByKeyRef.value.get(item[columnFieldRef.value]);
+    }
+    function resolvePosition(event, target) {
+        const rect = target.getBoundingClientRect();
+        if (orientationRef.value === 'vertical') {
+            const offset = event.clientX - rect.left;
+            return offset < rect.width / DROP_HALF_DIVISOR ? 'before' : 'after';
+        }
+        const offset = event.clientY - rect.top;
+        return offset < rect.height / DROP_HALF_DIVISOR ? 'before' : 'after';
+    }
+    function handleItemDragStart(event, item) {
+        const column = getColumnOf(item);
+        if (!column || !isItemDraggable(item, column)) {
+            event.preventDefault();
+            return;
+        }
+        draggingItemKeySetRef.value = new Set([getItemKey(item)]);
+        draggingItemRef.value = item;
+        draggingColumnKeyRef.value = null;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', String(getItemKey(item)));
+        }
+        deps.emitDragStart({ type: 'item', item, column });
+    }
+    function handleItemDragOver(event, item) {
+        if (!draggingItemKeySetRef.value.size) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        const column = getColumnOf(item);
+        if (column === null || column === void 0 ? void 0 : column.frozen) {
+            resetDropState();
+            return;
+        }
+        droppingColumnKeyRef.value = item[columnFieldRef.value];
+        if (draggingItemKeySetRef.value.has(getItemKey(item))) {
+            return;
+        }
+        const target = event.currentTarget;
+        if (!target) {
+            return;
+        }
+        droppingItemKeyRef.value = getItemKey(item);
+        droppingPositionRef.value = resolvePosition(event, target);
+    }
+    function handleItemDrop(event, item) {
+        if (!draggingItemKeySetRef.value.size) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        finishItemDrop(item[columnFieldRef.value]);
+    }
+    function handleColumnDragStart(event, column) {
+        if (!isColumnDraggable(column)) {
+            event.preventDefault();
+            return;
+        }
+        draggingColumnKeyRef.value = column.key;
+        draggingItemKeySetRef.value = new Set();
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', String(column.key));
+        }
+        deps.emitDragStart({ type: 'column', column });
+    }
+    function handleColumnDragOver(event, column) {
+        if (draggingColumnKeyRef.value != null) {
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+            const target = event.currentTarget;
+            droppingColumnKeyRef.value = column.key;
+            droppingItemKeyRef.value = null;
+            droppingPositionRef.value = target ? resolvePosition(event, target) : null;
+            return;
+        }
+        if (draggingItemKeySetRef.value.size) {
+            if (column.frozen) {
+                return;
+            }
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+            if (droppingColumnKeyRef.value !== column.key) {
+                droppingColumnKeyRef.value = column.key;
+                droppingItemKeyRef.value = null;
+                droppingPositionRef.value = null;
+            }
+        }
+    }
+    function handleColumnDrop(event, column) {
+        var _a;
+        event.preventDefault();
+        if (draggingColumnKeyRef.value != null) {
+            const next = (0, use_kanban_data_1.reorderColumns)(columnsRef.value, draggingColumnKeyRef.value, column.key, (_a = droppingPositionRef.value) !== null && _a !== void 0 ? _a : 'before');
+            const movedColumn = columnByKeyRef.value.get(draggingColumnKeyRef.value);
+            handleDragEnd();
+            if (next && movedColumn) {
+                deps.emitColumnsReorder(next);
+                deps.emitDragEnd({ type: 'column', column: movedColumn });
+            }
+            return;
+        }
+        finishItemDrop(column.key);
+    }
+    function finishItemDrop(targetColumnKey) {
+        const draggingKey = draggingItemKeySetRef.value.values().next().value;
+        const targetColumn = columnByKeyRef.value.get(targetColumnKey);
+        if (draggingKey === undefined || !targetColumn || targetColumn.frozen) {
+            handleDragEnd();
+            return;
+        }
+        const columnField = columnFieldRef.value;
+        const targetIndex = computeTargetIndex(targetColumnKey, draggingKey);
+        const result = (0, use_kanban_data_1.moveItem)(dataRef.value, getItemKey, columnField, draggingKey, targetColumnKey, targetIndex);
+        if (!result) {
+            handleDragEnd();
+            return;
+        }
+        const ctx = {
+            item: result.item,
+            from: result.from,
+            to: result.to
+        };
+        if (ctx.from.column === ctx.to.column && ctx.from.index === ctx.to.index) {
+            handleDragEnd();
+            return;
+        }
+        if (ctx.from.column !== ctx.to.column
+            && typeof targetColumn.max === 'number') {
+            const targetCount = dataRef.value.filter(item => item[columnField] === targetColumnKey).length;
+            if (targetCount >= targetColumn.max) {
+                handleDragEnd();
+                return;
+            }
+        }
+        if (allowDropRef.value && !allowDropRef.value(ctx)) {
+            handleDragEnd();
+            return;
+        }
+        const movedColumn = columnByKeyRef.value.get(ctx.from.column);
+        handleDragEnd();
+        deps.emitUpdateData(result.data);
+        deps.emitMove(ctx);
+        if (movedColumn) {
+            deps.emitDragEnd({ type: 'item', item: ctx.item, column: movedColumn });
+        }
+    }
+    function computeTargetIndex(targetColumnKey, draggingKey) {
+        const columnField = columnFieldRef.value;
+        const columnItems = dataRef.value.filter(item => item[columnField] === targetColumnKey
+            && getItemKey(item) !== draggingKey);
+        const dropItemKey = droppingItemKeyRef.value;
+        if (dropItemKey == null) {
+            return columnItems.length;
+        }
+        const index = columnItems.findIndex(item => getItemKey(item) === dropItemKey);
+        if (index < 0) {
+            return columnItems.length;
+        }
+        return droppingPositionRef.value === 'after' ? index + 1 : index;
+    }
+    return {
+        draggingItemKeySetRef,
+        draggingItemRef,
+        draggingColumnKeyRef,
+        droppingColumnKeyRef,
+        droppingItemKeyRef,
+        droppingPositionRef,
+        handleItemDragStart,
+        handleItemDragOver,
+        handleItemDrop,
+        handleColumnDragStart,
+        handleColumnDragOver,
+        handleColumnDrop,
+        handleDragEnd
+    };
+}

package/lib/kanban/styles/dark.d.ts

@@ -0,0 +1,73 @@
+declare const kanbanDark: import("../../_mixins").Theme<"Kanban", {
+    columnWidth: string;
+    columnGap: string;
+    cardGap: string;
+    boardPadding: string;
+    columnHeaderPadding: string;
+    columnBodyPadding: string;
+    columnBackgroundColor: string;
+    columnBorderRadius: string;
+    columnHeaderColor: string;
+    countBackgroundColor: string;
+    countTextColor: string;
+    statusSuccessHeaderColor: string;
+    statusSuccessCountColor: string;
+    statusProgressHeaderColor: string;
+    statusProgressCountColor: string;
+    statusPendingHeaderColor: string;
+    statusPendingCountColor: string;
+    statusErrorHeaderColor: string;
+    statusErrorCountColor: string;
+    columnDraggingOpacity: string;
+    cardBackgroundColor: string;
+    cardBackgroundColorDragging: string;
+    cardBorderColorDragging: string;
+    cardBorderRadius: string;
+    cardPadding: string;
+    cardColor: string;
+    cardSubColor: string;
+    cardBoxShadow: string;
+    cardBoxShadowHover: string;
+    cardBoxShadowDragging: string;
+    dropIndicatorColor: string;
+    maxReachedColor: string;
+}, {
+    Empty: import("../../_mixins").Theme<"Empty", {
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconSizeHuge: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
+        iconColor: string;
+        iconBgColor: string;
+        extraTextColor: string;
+    }, any>;
+    Badge: import("../../_mixins").Theme<"Badge", {
+        color: string;
+        colorPrime: string;
+        colorInfo: string;
+        colorSuccess: string;
+        colorError: string;
+        colorWarning: string;
+        fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
+        borderColor: string;
+        dotSize: string;
+    }, any>;
+}>;
+export default kanbanDark;
+export type KanbanTheme = typeof kanbanDark;

package/lib/kanban/styles/dark.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const _mixins_1 = require("../../_mixins");
+const common_1 = require("../../_styles/common");
+const styles_1 = require("../../badge/styles");
+const styles_2 = require("../../empty/styles");
+const light_1 = require("./light");
+const kanbanDark = (0, _mixins_1.createTheme)({
+    name: 'Kanban',
+    common: common_1.commonDark,
+    peers: {
+        Empty: styles_2.emptyDark,
+        Badge: styles_1.badgeDark
+    },
+    self: light_1.self
+});
+exports.default = kanbanDark;

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

@@ -0,0 +1,3 @@
+export { default as kanbanDark } from './dark';
+export { default as kanbanLight } from './light';
+export type { KanbanTheme, KanbanThemeVars } from './light';

package/lib/kanban/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.kanbanLight = exports.kanbanDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "kanbanDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "kanbanLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/kanban/styles/light.d.ts

@@ -0,0 +1,109 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+export declare function self(vars: ThemeCommonVars): {
+    columnWidth: string;
+    columnGap: string;
+    cardGap: string;
+    boardPadding: string;
+    columnHeaderPadding: string;
+    columnBodyPadding: string;
+    columnBackgroundColor: string;
+    columnBorderRadius: string;
+    columnHeaderColor: string;
+    countBackgroundColor: string;
+    countTextColor: string;
+    statusSuccessHeaderColor: string;
+    statusSuccessCountColor: string;
+    statusProgressHeaderColor: string;
+    statusProgressCountColor: string;
+    statusPendingHeaderColor: string;
+    statusPendingCountColor: string;
+    statusErrorHeaderColor: string;
+    statusErrorCountColor: string;
+    columnDraggingOpacity: string;
+    cardBackgroundColor: string;
+    cardBackgroundColorDragging: string;
+    cardBorderColorDragging: string;
+    cardBorderRadius: string;
+    cardPadding: string;
+    cardColor: string;
+    cardSubColor: string;
+    cardBoxShadow: string;
+    cardBoxShadowHover: string;
+    cardBoxShadowDragging: string;
+    dropIndicatorColor: string;
+    maxReachedColor: string;
+};
+export type KanbanThemeVars = ReturnType<typeof self>;
+declare const kanbanLight: import("../../_mixins").Theme<"Kanban", {
+    columnWidth: string;
+    columnGap: string;
+    cardGap: string;
+    boardPadding: string;
+    columnHeaderPadding: string;
+    columnBodyPadding: string;
+    columnBackgroundColor: string;
+    columnBorderRadius: string;
+    columnHeaderColor: string;
+    countBackgroundColor: string;
+    countTextColor: string;
+    statusSuccessHeaderColor: string;
+    statusSuccessCountColor: string;
+    statusProgressHeaderColor: string;
+    statusProgressCountColor: string;
+    statusPendingHeaderColor: string;
+    statusPendingCountColor: string;
+    statusErrorHeaderColor: string;
+    statusErrorCountColor: string;
+    columnDraggingOpacity: string;
+    cardBackgroundColor: string;
+    cardBackgroundColorDragging: string;
+    cardBorderColorDragging: string;
+    cardBorderRadius: string;
+    cardPadding: string;
+    cardColor: string;
+    cardSubColor: string;
+    cardBoxShadow: string;
+    cardBoxShadowHover: string;
+    cardBoxShadowDragging: string;
+    dropIndicatorColor: string;
+    maxReachedColor: string;
+}, {
+    Empty: import("../../_mixins").Theme<"Empty", {
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconSizeHuge: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
+        iconColor: string;
+        iconBgColor: string;
+        extraTextColor: string;
+    }, any>;
+    Badge: import("../../_mixins").Theme<"Badge", {
+        color: string;
+        colorPrime: string;
+        colorInfo: string;
+        colorSuccess: string;
+        colorError: string;
+        colorWarning: string;
+        fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
+        borderColor: string;
+        dotSize: string;
+    }, any>;
+}>;
+export default kanbanLight;
+export type KanbanTheme = typeof kanbanLight;

package/lib/kanban/styles/light.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = self;
+const _mixins_1 = require("../../_mixins");
+const common_1 = require("../../_styles/common");
+const styles_1 = require("../../badge/styles");
+const styles_2 = require("../../empty/styles");
+function self(vars) {
+    const { borderRadiusLarge, surfacePrimary, containerSecondary, elementsQuinary, staticBlack, staticWhite, staticDeepBlue, textPrimary, successColor, warningColor, errorColor, staticErrorAccent } = vars;
+    return {
+        columnWidth: '316px',
+        columnGap: '4px',
+        cardGap: '8px',
+        boardPadding: '4px',
+        columnHeaderPadding: '16px 16px 12px',
+        columnBodyPadding: '8px',
+        columnBackgroundColor: containerSecondary,
+        columnBorderRadius: borderRadiusLarge,
+        columnHeaderColor: textPrimary,
+        countBackgroundColor: staticBlack,
+        countTextColor: staticWhite,
+        statusSuccessHeaderColor: '#eefaf2',
+        statusSuccessCountColor: successColor,
+        statusProgressHeaderColor: '#f0f3fb',
+        statusProgressCountColor: staticDeepBlue,
+        statusPendingHeaderColor: '#fef7f0',
+        statusPendingCountColor: warningColor,
+        statusErrorHeaderColor: '#fef2f1',
+        statusErrorCountColor: staticErrorAccent,
+        columnDraggingOpacity: '0.5',
+        cardBackgroundColor: surfacePrimary,
+        cardBackgroundColorDragging: containerSecondary,
+        cardBorderColorDragging: elementsQuinary,
+        cardBorderRadius: borderRadiusLarge,
+        cardPadding: '16px',
+        cardColor: textPrimary,
+        cardSubColor: '#83888b',
+        cardBoxShadow: '0px 2px 4px 0px rgba(68, 83, 113, 0.05), 0px 0px 8px 0px rgba(68, 83, 113, 0.1)',
+        cardBoxShadowHover: '0px 4px 8px 0px rgba(68, 83, 113, 0.05), 0px 0px 16px 0px rgba(68, 83, 113, 0.1)',
+        cardBoxShadowDragging: '0px 12px 20px 0px rgba(68, 83, 113, 0.05), 0px 0px 20px 0px rgba(68, 83, 113, 0.1)',
+        dropIndicatorColor: containerSecondary,
+        maxReachedColor: errorColor
+    };
+}
+const kanbanLight = (0, _mixins_1.createTheme)({
+    name: 'Kanban',
+    common: common_1.commonLight,
+    peers: {
+        Empty: styles_2.emptyLight,
+        Badge: styles_1.badgeLight
+    },
+    self
+});
+exports.default = kanbanLight;

package/lib/modal/src/BodyWrapper.d.ts

@@ -1347,11 +1347,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     tag: keyof HTMLElementTagNameMap;
     showIcon: boolean;
     closable: boolean;
+    draggable: boolean | ModalDraggableOptions;
     contentScrollable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card").CardSegmented;
     hoverable: boolean;
-    draggable: boolean | ModalDraggableOptions;
     trapFocus: boolean;
     autoFocus: boolean;
     blockScroll: boolean;