@uzum-tech/ui 2.0.8 → 2.1.0

package/es/kanban/src/use-kanban-drag.mjs

@@ -0,0 +1,238 @@
+import { computed, ref } from 'vue';
+import { moveItem, reorderColumns } from "./use-kanban-data.mjs";
+const DROP_HALF_DIVISOR = 2;
+export function useKanbanDrag(deps) {
+  const {
+    dataRef,
+    columnsRef,
+    columnFieldRef,
+    orientationRef,
+    getItemKey,
+    isItemDraggable,
+    isColumnDraggable,
+    allowDropRef
+  } = deps;
+  const draggingItemKeySetRef = ref(new Set());
+  const draggingItemRef = ref(null);
+  const draggingColumnKeyRef = ref(null);
+  const droppingColumnKeyRef = ref(null);
+  const droppingItemKeyRef = ref(null);
+  const droppingPositionRef = ref(null);
+  const columnByKeyRef = 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 = 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 = 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/es/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/es/kanban/styles/dark.mjs

@@ -0,0 +1,15 @@
+import { createTheme } from "../../_mixins/index.mjs";
+import { commonDark } from "../../_styles/common/index.mjs";
+import { badgeDark } from "../../badge/styles/index.mjs";
+import { emptyDark } from "../../empty/styles/index.mjs";
+import { self } from "./light.mjs";
+const kanbanDark = createTheme({
+  name: 'Kanban',
+  common: commonDark,
+  peers: {
+    Empty: emptyDark,
+    Badge: badgeDark
+  },
+  self
+});
+export default kanbanDark;

package/es/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/es/kanban/styles/index.mjs

@@ -0,0 +1,2 @@
+export { default as kanbanDark } from "./dark.mjs";
+export { default as kanbanLight } from "./light.mjs";

package/es/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/es/kanban/styles/light.mjs

@@ -0,0 +1,64 @@
+import { createTheme } from "../../_mixins/index.mjs";
+import { commonLight } from "../../_styles/common/index.mjs";
+import { badgeLight } from "../../badge/styles/index.mjs";
+import { emptyLight } from "../../empty/styles/index.mjs";
+export 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 = createTheme({
+  name: 'Kanban',
+  common: commonLight,
+  peers: {
+    Empty: emptyLight,
+    Badge: badgeLight
+  },
+  self
+});
+export default kanbanLight;

package/es/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("../..").CardSegmented;
     hoverable: boolean;
-    draggable: boolean | ModalDraggableOptions;
     trapFocus: boolean;
     autoFocus: boolean;
     blockScroll: boolean;

package/es/themes/dark.mjs

@@ -51,6 +51,7 @@ import { iconDark } from "../icon/styles/index.mjs";
 import { imageDark } from "../image/styles/index.mjs";
 import { inputNumberDark } from "../input-number/styles/index.mjs";
 import { inputDark } from "../input/styles/index.mjs";
+import { kanbanDark } from "../kanban/styles/index.mjs";
 import { layoutDark } from "../layout/styles/index.mjs";
 import { rowDark } from "../legacy-grid/styles/index.mjs";
 import { legacyTransferDark } from "../legacy-transfer/styles/index.mjs";
@@ -105,6 +106,7 @@ export const darkTheme = {
   AccountOption: accountOptionDark,
   ActionCard: actionCardDark,
   MappingCard: mappingCardDark,
+  Kanban: kanbanDark,
   Alert: alertDark,
   Anchor: anchorDark,
   AutoComplete: autoCompleteDark,

package/es/themes/light.mjs

@@ -54,6 +54,7 @@ import { imageLight } from "../image/styles/index.mjs";
 import { inputNumberLight } from "../input-number/styles/index.mjs";
 import { inputOtpLight } from "../input-otp/styles/index.mjs";
 import { inputLight } from "../input/styles/index.mjs";
+import { kanbanLight } from "../kanban/styles/index.mjs";
 import { layoutLight } from "../layout/styles/index.mjs";
 import { rowLight } from "../legacy-grid/styles/index.mjs";
 import { legacyTransferLight } from "../legacy-transfer/styles/index.mjs";
@@ -107,6 +108,7 @@ export const lightTheme = {
   AccountOption: accountOptionLight,
   ActionCard: actionCardLight,
   MappingCard: mappingCardLight,
+  Kanban: kanbanLight,
   Alert: alertLight,
   Anchor: anchorLight,
   AutoComplete: autoCompleteLight,

package/es/tree/src/Tree.d.ts

@@ -1875,6 +1875,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly internalScrollable: boolean;
     readonly keyboard: boolean;
     readonly draggable: boolean;
+    readonly allowDrop: AllowDrop;
     readonly allowCheckingNotLoaded: boolean;
     readonly multiple: boolean;
     readonly disabledField: string;
@@ -1906,7 +1907,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly blockLine: boolean;
     readonly showLine: boolean;
     readonly selectable: boolean;
-    readonly allowDrop: AllowDrop;
     readonly ellipsis: boolean;
     readonly checkboxPlacement: "left" | "right";
 }, SlotsType<TreeSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/tree/src/TreeNode.d.ts

@@ -51,7 +51,7 @@ declare const TreeNode: import("vue").DefineComponent<import("vue").ExtractPropT
     handleDragLeave: (e: DragEvent) => void;
     handleLineClick: (e: PointerEvent) => void;
     handleContentClick: (e: PointerEvent) => void;
-    handleSwitcherClick: () => void;
+    handleSwitcherClick: (e?: MouseEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;

package/es/tree/src/TreeNode.mjs

@@ -61,7 +61,8 @@ const TreeNode = defineComponent({
     onMounted(() => {
       contentElRef.value = contentInstRef.value.$el;
     });
-    function handleSwitcherClick() {
+    function handleSwitcherClick(e) {
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
       const callback = () => {
         const {
           tmNode

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.8";
+declare const _default: "2.1.0";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.8';
+export default '2.1.0';

package/lib/carousel/src/Carousel.d.ts

@@ -332,6 +332,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     trigger: "click" | "hover";
     keyboard: boolean;
+    draggable: boolean;
     defaultIndex: number;
     showArrow: boolean;
     dotType: "line" | "dot";
@@ -346,7 +347,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     effect: "card" | "slide" | "fade" | "custom";
     showDots: boolean;
     transitionStyle: Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
-    draggable: boolean;
     touchable: boolean;
     mousewheel: boolean;
 }, SlotsType<CarouselSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;