@uzum-tech/ui 2.0.4 → 2.0.6

package/lib/data-table/src/use-sorter.js

@@ -59,6 +59,7 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         // If one of the columns's sort order is false or 'ascend' or 'descend',
         // the table's controll functionality should work in controlled manner.
         const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(column => column.type !== 'selection'
+            && column.type !== 'draggable'
             && column.sorter !== undefined
             && (column.sortOrder === 'ascend'
                 || column.sortOrder === 'descend'
@@ -116,6 +117,18 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
                 return compareResult;
             });
         }
+        const draggableColumn = dataRelatedColsRef.value.find((column) => column.type === 'draggable' && column.sortByKey !== false);
+        if (draggableColumn) {
+            const orderKey = draggableColumn.key;
+            return filteredDataRef.value.slice().sort((tmNode1, tmNode2) => {
+                const order1 = tmNode1.rawNode[orderKey];
+                const order2 = tmNode2.rawNode[orderKey];
+                if (typeof order1 === 'number' && typeof order2 === 'number') {
+                    return order1 - order2;
+                }
+                return 0;
+            });
+        }
         return filteredDataRef.value;
     });
     function getUpdatedSorterState(sortState) {
@@ -158,6 +171,7 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         else {
             const columnToSort = dataRelatedColsRef.value.find(column => column.type !== 'selection'
                 && column.type !== 'expand'
+                && column.type !== 'draggable'
                 && column.key === columnKey);
             if (!(columnToSort === null || columnToSort === void 0 ? void 0 : columnToSort.sorter))
                 return;

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

@@ -1,16 +1,13 @@
-import type { ComputedRef } from 'vue';
 import type { PaginationProps } from '../../pagination/src/Pagination';
-import type { ColumnKey, DataTableSetupProps, FilterState, InternalRowData, RowKey, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn, TmNode } from './interface';
-export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: {
-    dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
-}): {
-    treeMateRef: ComputedRef<import("treemate").TreeMate<InternalRowData, InternalRowData, InternalRowData>>;
-    mergedCurrentPageRef: ComputedRef<number>;
-    mergedPaginationRef: ComputedRef<PaginationProps>;
-    paginatedDataRef: ComputedRef<TmNode[]>;
-    rawPaginatedDataRef: ComputedRef<InternalRowData[]>;
-    mergedFilterStateRef: ComputedRef<FilterState>;
-    mergedSortStateRef: ComputedRef<{
+import type { ColumnKey, DataTableSetupProps, FilterState, InternalRowData, RowKey, SortState, TableBaseColumn, TableSelectionColumn, TmNode, UseTableDataDeps } from './interface';
+export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: UseTableDataDeps): {
+    treeMateRef: import("vue").ComputedRef<import("treemate").TreeMate<InternalRowData, InternalRowData, InternalRowData>>;
+    mergedCurrentPageRef: import("vue").ComputedRef<number>;
+    mergedPaginationRef: import("vue").ComputedRef<PaginationProps>;
+    paginatedDataRef: import("vue").ComputedRef<TmNode[]>;
+    rawPaginatedDataRef: import("vue").ComputedRef<InternalRowData[]>;
+    mergedFilterStateRef: import("vue").ComputedRef<FilterState>;
+    mergedSortStateRef: import("vue").ComputedRef<{
         columnKey: ColumnKey;
         order: import("./interface").SortOrder;
         sorter: boolean | "default" | import("./interface").CompareFn<InternalRowData> | {
@@ -19,8 +16,8 @@ export declare function useTableData(props: DataTableSetupProps, { dataRelatedCo
         };
     }[]>;
     hoverKeyRef: import("vue").Ref<RowKey | null, RowKey | null>;
-    selectionColumnRef: ComputedRef<TableSelectionColumn | null>;
-    childTriggerColIndexRef: ComputedRef<number>;
+    selectionColumnRef: import("vue").ComputedRef<TableSelectionColumn | null>;
+    childTriggerColIndexRef: import("vue").ComputedRef<number>;
     doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void;
     deriveNextSorter: (sortState: SortState | null) => void;
     doUpdatePageSize: (pageSize: number) => void;

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

@@ -65,8 +65,11 @@ function useTableData(props, { dataRelatedColsRef }) {
         const controlledFilterState = {};
         columnsWithControlledFilter.forEach((column) => {
             var _a;
-            if (column.type === 'selection' || column.type === 'expand')
+            if (column.type === 'selection'
+                || column.type === 'expand'
+                || column.type === 'draggable') {
                 return;
+            }
             if (column.filterOptionValues === undefined) {
                 controlledFilterState[column.key] = (_a = column.filterOptionValue) !== null && _a !== void 0 ? _a : null;
             }
@@ -88,6 +91,7 @@ function useTableData(props, { dataRelatedColsRef }) {
         columns.forEach((column) => {
             if (column.type === 'selection'
                 || column.type === 'expand'
+                || column.type === 'draggable'
                 || 'children' in column) {
                 return;
             }

package/lib/data-table/src/use-table-storage.d.ts

@@ -1,4 +1,4 @@
-import type { DataTableStorageState, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from './interface';
+import type { DataRelatedColumn, DataTableStorageState, SortState } from './interface';
 export declare function loadTableState(localStorageKey: string): DataTableStorageState | null;
 export declare function saveTableState(localStorageKey: string, state: DataTableStorageState): void;
-export declare function restoreSortStateFromStored(stored: DataTableStorageState['sortState'], dataRelatedCols: Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>): SortState[] | null;
+export declare function restoreSortStateFromStored(stored: DataTableStorageState['sortState'], dataRelatedCols: DataRelatedColumn[]): SortState[] | null;

package/lib/data-table/src/use-table-storage.js

@@ -33,6 +33,7 @@ function restoreSortStateFromStored(stored, dataRelatedCols) {
     for (const item of stored) {
         const column = dataRelatedCols.find(col => col.type !== 'selection'
             && col.type !== 'expand'
+            && col.type !== 'draggable'
             && 'key' in col
             && col.key === item.columnKey
             && col.sorter !== undefined);

package/lib/data-table/src/utils/column-utils.d.ts

@@ -1,11 +1,12 @@
 import type { CSSProperties } from 'vue';
-import type { CreateRowClassName, InternalRowData, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from '../interface';
+import type { CreateRowClassName, DataRelatedColumn, InternalRowData, TableColumn } from '../interface';
 export declare const SELECTION_COL_WIDTH = 40;
 export declare const EXPAND_COL_WIDTH = 40;
+export declare const DRAGGABLE_COL_WIDTH = 40;
 export declare function getNumberColWidth(column: TableColumn): number | undefined;
 export declare function getStringColWidth(column: TableColumn): string | undefined;
 export declare function getColKey(column: TableColumn): string | number;
-export declare function createCustomWidthStyle(column: TableBaseColumn | TableSelectionColumn | TableExpandColumn, resizedWidth?: string): CSSProperties;
+export declare function createCustomWidthStyle(column: DataRelatedColumn, resizedWidth?: string): CSSProperties;
 export declare function createRowClassName(row: InternalRowData, index: number, rowClassName?: string | CreateRowClassName): string;
 export declare function isColumnSortable(column: TableColumn): boolean;
 export declare function isColumnEllipsisEnabled(column: Pick<TableColumn, 'ellipsis'>): boolean;

package/lib/data-table/src/utils/column-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EXPAND_COL_WIDTH = exports.SELECTION_COL_WIDTH = void 0;
+exports.DRAGGABLE_COL_WIDTH = exports.EXPAND_COL_WIDTH = exports.SELECTION_COL_WIDTH = void 0;
 exports.getNumberColWidth = getNumberColWidth;
 exports.getStringColWidth = getStringColWidth;
 exports.getColKey = getColKey;
@@ -15,6 +15,7 @@ const _utils_1 = require("../../../_utils");
 const width_utils_1 = require("./width-utils");
 exports.SELECTION_COL_WIDTH = 40;
 exports.EXPAND_COL_WIDTH = 40;
+exports.DRAGGABLE_COL_WIDTH = 40;
 function getNumberColWidth(column) {
     if (column.type === 'selection') {
         return column.width === undefined ? exports.SELECTION_COL_WIDTH : (0, seemly_1.depx)(column.width);
@@ -22,6 +23,9 @@ function getNumberColWidth(column) {
     if (column.type === 'expand') {
         return column.width === undefined ? exports.EXPAND_COL_WIDTH : (0, seemly_1.depx)(column.width);
     }
+    if (column.type === 'draggable') {
+        return column.width === undefined ? exports.DRAGGABLE_COL_WIDTH : (0, seemly_1.depx)(column.width);
+    }
     if ('children' in column)
         return undefined;
     if (typeof column.width === 'string') {
@@ -30,13 +34,16 @@ function getNumberColWidth(column) {
     return column.width;
 }
 function getStringColWidth(column) {
-    var _a, _b;
+    var _a, _b, _c;
     if (column.type === 'selection') {
         return (0, _utils_1.formatLength)((_a = column.width) !== null && _a !== void 0 ? _a : exports.SELECTION_COL_WIDTH);
     }
     if (column.type === 'expand') {
         return (0, _utils_1.formatLength)((_b = column.width) !== null && _b !== void 0 ? _b : exports.EXPAND_COL_WIDTH);
     }
+    if (column.type === 'draggable') {
+        return (0, _utils_1.formatLength)((_c = column.width) !== null && _c !== void 0 ? _c : exports.DRAGGABLE_COL_WIDTH);
+    }
     if ('children' in column) {
         return undefined;
     }
@@ -47,6 +54,8 @@ function getColKey(column) {
         return '__n_selection__';
     if (column.type === 'expand')
         return '__n_expand__';
+    if (column.type === 'draggable')
+        return '__n_draggable__';
     return column.key;
 }
 function createCustomWidthStyle(column, resizedWidth) {

package/lib/data-table/src/utils/csv-utils.js

@@ -15,6 +15,7 @@ function formatCsvCell(value) {
 function generateCsv(columns, data, getCsvCell, getCsvHeader) {
     const exportableColumns = columns.filter(column => column.type !== 'expand'
         && column.type !== 'selection'
+        && column.type !== 'draggable'
         && column.allowExport !== false);
     const header = exportableColumns
         .map((col) => {

package/lib/data-table/src/utils/flatten-rows.d.ts

@@ -0,0 +1,2 @@
+import type { NormalRowRenderInfo, RowKey } from '../interface';
+export declare function flattenExpandedRows(rowInfos: NormalRowRenderInfo[], expandedRowKeys: Set<RowKey>): NormalRowRenderInfo[];

package/lib/data-table/src/utils/flatten-rows.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenExpandedRows = flattenExpandedRows;
+function flattenExpandedRows(rowInfos, expandedRowKeys) {
+    const flattenedRows = [];
+    function traverse(nodes, rootIndex) {
+        nodes.forEach((node) => {
+            if (node.children && expandedRowKeys.has(node.key)) {
+                flattenedRows.push({
+                    tmNode: node,
+                    striped: false,
+                    key: node.key,
+                    index: rootIndex
+                });
+                traverse(node.children, rootIndex);
+            }
+            else {
+                flattenedRows.push({
+                    key: node.key,
+                    tmNode: node,
+                    striped: false,
+                    index: rootIndex
+                });
+            }
+        });
+    }
+    rowInfos.forEach((rowInfo) => {
+        flattenedRows.push(rowInfo);
+        const { children } = rowInfo.tmNode;
+        if (children && expandedRowKeys.has(rowInfo.key)) {
+            traverse(children, rowInfo.index);
+        }
+    });
+    return flattenedRows;
+}

package/lib/data-table/src/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './column-utils';
 export * from './csv-utils';
+export * from './flatten-rows';
 export * from './mask-defaults';
 export * from './resize-orchestrator-utils';
 export * from './sort-filter-utils';

package/lib/data-table/src/utils/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.pickValidColumnWidths = exports.getLengthNumber = void 0;
 __exportStar(require("./column-utils"), exports);
 __exportStar(require("./csv-utils"), exports);
+__exportStar(require("./flatten-rows"), exports);
 __exportStar(require("./mask-defaults"), exports);
 __exportStar(require("./resize-orchestrator-utils"), exports);
 __exportStar(require("./sort-filter-utils"), exports);

package/lib/data-table/src/utils/resize-orchestrator-utils.d.ts

@@ -1,6 +1,4 @@
-import type { ColumnWidthComputationItem, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from '../interface';
-type ResizableLeafColumn = TableSelectionColumn | TableBaseColumn | TableExpandColumn;
-export declare function deriveVisibleLeafColumnWidthItems(columns: ResizableLeafColumn[]): ColumnWidthComputationItem[];
-export declare function deriveResizableColumnWidthItems(columns: ResizableLeafColumn[]): ColumnWidthComputationItem[];
+import type { ColumnWidthComputationItem, DataRelatedColumn } from '../interface';
+export declare function deriveVisibleLeafColumnWidthItems(columns: DataRelatedColumn[]): ColumnWidthComputationItem[];
+export declare function deriveResizableColumnWidthItems(columns: DataRelatedColumn[]): ColumnWidthComputationItem[];
 export declare function deriveColumnWidthSignature(columns: ColumnWidthComputationItem[]): string;
-export {};

package/lib/data-table/src/utils/width-utils.d.ts

@@ -1,11 +1,11 @@
-import type { ColumnKey, ColumnWidthComputationItem, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from '../interface';
+import type { ColumnKey, ColumnWidthComputationItem, DataRelatedColumn } from '../interface';
 export interface ColumnWidthConstraint {
     min?: number;
     max?: number;
 }
 export declare function clampValueFollowCSSRules(value: number, min?: number | string, max?: number | string): number;
 export declare function parseLengthToNumber(value: number | string | undefined): number | undefined;
-export declare function resolveColumnWidthConstraint(column: TableBaseColumn | TableSelectionColumn | TableExpandColumn | ColumnWidthComputationItem, systemMinWidth?: number | string, systemMaxWidth?: number | string): ColumnWidthConstraint;
+export declare function resolveColumnWidthConstraint(column: DataRelatedColumn | ColumnWidthComputationItem, systemMinWidth?: number | string, systemMaxWidth?: number | string): ColumnWidthConstraint;
 export declare function computeFixedTableColumnWidths(columns: ColumnWidthComputationItem[], { containerWidth, systemMinWidth, systemMaxWidth, preferredWidths }: {
     containerWidth?: number;
     systemMinWidth?: number | string;

package/lib/data-table/styles/light.d.ts

@@ -41,6 +41,9 @@ export declare function self(vars: ThemeCommonVars): {
     thButtonColorHover: string;
     thIconColor: string;
     thIconColorActive: string;
+    dropMarkColor: string;
+    dragGhostOpacity: string;
+    dragGhostFilter: string;
     borderColorModal: string;
     tdColorHoverModal: string;
     tdColorStripedModal: string;
@@ -102,6 +105,9 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
     thButtonColorHover: string;
     thIconColor: string;
     thIconColorActive: string;
+    dropMarkColor: string;
+    dragGhostOpacity: string;
+    dragGhostFilter: string;
     borderColorModal: string;
     tdColorHoverModal: string;
     tdColorStripedModal: string;

package/lib/data-table/styles/light.js

@@ -56,6 +56,9 @@ function self(vars) {
         thButtonColorHover: elementsTertiary,
         thIconColor: elementsPrimary,
         thIconColorActive: brandPrimary500,
+        dropMarkColor: brandPrimary500,
+        dragGhostOpacity: '0.85',
+        dragGhostFilter: 'drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18))',
         // modal
         borderColorModal: elementsQuaternary,
         tdColorHoverModal: elementsTertiary,

package/lib/mapping-card/src/MappingCard.d.ts

@@ -1,6 +1,10 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: import("vue").PropType<import("./interface").MappingCardInterface["title"]>;
     description: import("vue").PropType<import("./interface").MappingCardInterface["description"]>;
+    subTitle: import("vue").PropType<import("./interface").MappingCardInterface["subTitle"]>;
+    subDescription: import("vue").PropType<import("./interface").MappingCardInterface["subDescription"]>;
+    headerInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerInfo"]>;
+    headerSubInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerSubInfo"]>;
     rows: import("vue").PropType<import("./interface").MappingCardInterface["rows"]>;
     cols: {
         readonly type: import("vue").PropType<import("./interface").MappingCardInterface["cols"]>;
@@ -1055,6 +1059,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: import("vue").PropType<import("./interface").MappingCardInterface["title"]>;
     description: import("vue").PropType<import("./interface").MappingCardInterface["description"]>;
+    subTitle: import("vue").PropType<import("./interface").MappingCardInterface["subTitle"]>;
+    subDescription: import("vue").PropType<import("./interface").MappingCardInterface["subDescription"]>;
+    headerInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerInfo"]>;
+    headerSubInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerSubInfo"]>;
     rows: import("vue").PropType<import("./interface").MappingCardInterface["rows"]>;
     cols: {
         readonly type: import("vue").PropType<import("./interface").MappingCardInterface["cols"]>;

package/lib/mapping-card/src/MappingCard.js

@@ -52,7 +52,11 @@ exports.default = (0, vue_1.defineComponent)({
         const { cssVars, themeClass, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefix}-mapping-card`, themeClass], style: cssVars },
-            (0, vue_1.h)(Header_1.default, null, { headerActions: this.$slots.headerActions }),
+            (0, vue_1.h)(Header_1.default, null, {
+                headerActions: this.$slots.headerActions,
+                headerInfo: this.$slots.headerInfo,
+                headerSubInfo: this.$slots.headerSubInfo
+            }),
             (0, vue_1.h)(Body_1.default, null)));
     }
 });

package/lib/mapping-card/src/MappingCardParts/Header.js

@@ -22,12 +22,34 @@ exports.default = (0, vue_1.defineComponent)({
         const theme = mergedThemeRef.value;
         const locale = localeRef.value;
         const renderTextProp = (value) => typeof value === 'function' ? value() : value;
+        const renderInfoText = (title, description) => {
+            if (!title && !description)
+                return null;
+            return ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-info-text` },
+                title && ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-title` }, renderTextProp(title))),
+                description && ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-description` }, renderTextProp(description)))));
+        };
+        const mainInfo = (0, _utils_1.resolveSlot)(slots.headerInfo, () => {
+            var _a;
+            const fromProp = (_a = props.headerInfo) === null || _a === void 0 ? void 0 : _a.call(props);
+            if (fromProp)
+                return [fromProp];
+            const fallback = renderInfoText(props.title, props.description);
+            return fallback ? [fallback] : [];
+        });
+        const subInfo = (0, _utils_1.resolveSlot)(slots.headerSubInfo, () => {
+            var _a;
+            const fromProp = (_a = props.headerSubInfo) === null || _a === void 0 ? void 0 : _a.call(props);
+            if (fromProp)
+                return [fromProp];
+            const fallback = renderInfoText(props.subTitle, props.subDescription);
+            return fallback ? [fallback] : [];
+        });
+        const hasSubInfo = subInfo.length > 0;
         return ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header` },
             (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${prefix}-mapping-card__header-info` }, {
                 default: () => ((0, vue_1.h)(vue_1.Fragment, null,
-                    (0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-info-text` },
-                        (0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-title` }, renderTextProp(props.title)),
-                        props.description && ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-description` }, renderTextProp(props.description)))),
+                    mainInfo,
                     !props.hideCopy && ((0, vue_1.h)(tooltip_1.UTooltip, null, {
                         trigger: () => {
                             var _a;
@@ -39,7 +61,9 @@ exports.default = (0, vue_1.defineComponent)({
                             }));
                         },
                         default: () => locale.copyTooltip
-                    }))))
+                    })),
+                    hasSubInfo && ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-info-divider` })),
+                    hasSubInfo && subInfo))
             }),
             !props.hideHeaderActions && ((0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small" }, {
                 default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => {
@@ -48,7 +72,7 @@ exports.default = (0, vue_1.defineComponent)({
                     buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
                         trigger: () => {
                             var _a;
-                            return ((0, vue_1.h)(switch_1.USwitch, Object.assign({}, ((_a = props.headerSwitchProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.Switch, themeOverrides: theme.peerOverrides.Switch, onUpdateValue: (val) => { var _a; return (_a = props.onSwitchChange) === null || _a === void 0 ? void 0 : _a.call(props, val); } })));
+                            return ((0, vue_1.h)(switch_1.USwitch, Object.assign({}, ((_a = props.headerSwitchProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.Switch, themeOverrides: theme.peerOverrides.Switch, onUpdateValue: (value) => { var _a; return (_a = props.onSwitchChange) === null || _a === void 0 ? void 0 : _a.call(props, value); } })));
                         },
                         default: () => locale.switchTooltip
                     }));

package/lib/mapping-card/src/interface.d.ts

@@ -32,6 +32,10 @@ export interface MappingRow {
 export interface MappingCardInterface {
     title: string | (() => VNodeChild);
     description: string | (() => VNodeChild);
+    subTitle?: string | (() => VNodeChild);
+    subDescription?: string | (() => VNodeChild);
+    headerInfo?: () => VNodeChild;
+    headerSubInfo?: () => VNodeChild;
     rows: MappingRow[];
     cols?: number;
     defaultSpan?: number;
@@ -61,6 +65,10 @@ export interface MappingCardListInterface {
 export declare const mappingCardProps: {
     readonly title: PropType<MappingCardInterface["title"]>;
     readonly description: PropType<MappingCardInterface["description"]>;
+    readonly subTitle: PropType<MappingCardInterface["subTitle"]>;
+    readonly subDescription: PropType<MappingCardInterface["subDescription"]>;
+    readonly headerInfo: PropType<MappingCardInterface["headerInfo"]>;
+    readonly headerSubInfo: PropType<MappingCardInterface["headerSubInfo"]>;
     readonly rows: PropType<MappingCardInterface["rows"]>;
     readonly cols: {
         readonly type: PropType<MappingCardInterface["cols"]>;

package/lib/mapping-card/src/interface.js

@@ -4,6 +4,10 @@ exports.mappingCardListProps = exports.mappingCardProps = void 0;
 exports.mappingCardProps = {
     title: [String, Function],
     description: [String, Function],
+    subTitle: [String, Function],
+    subDescription: [String, Function],
+    headerInfo: Function,
+    headerSubInfo: Function,
     rows: Array,
     cols: {
         type: Number,

package/lib/mapping-card/src/styles/index.cssr.js

@@ -19,7 +19,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('mapping-card', `
  border-radius: var(--u-border-radius);
  overflow: hidden;
  box-sizing: border-box;
-`, [(0, cssr_1.cE)('header', `
+ `, [(0, cssr_1.cE)('header', `
  padding: var(--u-header-padding);
  display: flex;
  align-items: center;
@@ -38,11 +38,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('mapping-card', `
  min-width: 0;
  `), (0, cssr_1.cE)('header-info-text', `
  min-width: 0;
+ margin-right: 12px;
  `), (0, cssr_1.cE)('header-title', `
  color: var(--u-title-color);
  `), (0, cssr_1.cE)('header-description', `
  color: var(--u-description-color);
  margin-top: 2px;
+ `), (0, cssr_1.cE)('header-info-divider', `
+ margin-right: 12px;
+ width: 1px;
+ align-self: stretch;
+ background: var(--u-border-color);
+ flex-shrink: 0;
  `), (0, cssr_1.cE)('body', `
  display: flex;
  padding: var(--u-body-padding);

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.4";
+declare const _default: "2.0.6";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.0.4';
+exports.default = '2.0.6';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": {
     "name": "KapitalLab",
@@ -109,8 +109,8 @@
     "date-fns-tz": "3.2.0",
     "evtd": "0.2.4",
     "highlight.js": "11.11.1",
-    "lodash": "4.17.23",
-    "lodash-es": "4.17.23",
+    "lodash": "4.18.1",
+    "lodash-es": "4.18.1",
     "seemly": "0.3.10",
     "treemate": "0.3.11",
     "vdirs": "0.1.8",
@@ -122,7 +122,7 @@
     "@babel/core": "7.29.0",
     "@babel/generator": "7.29.1",
     "@babel/parser": "7.29.2",
-    "@babel/preset-env": "7.29.2",
+    "@babel/preset-env": "7.29.5",
     "@babel/traverse": "7.29.0",
     "@lylajs/web": "2.1.0",
     "@rollup/plugin-babel": "6.0.4",
@@ -137,7 +137,7 @@
     "@types/fs-extra": "11.0.4",
     "@types/node": "24.0.12",
     "@types/superagent": "8.1.9",
-    "@uzum-tech/icons": "1.0.0",
+    "@uzum-tech/icons": "1.1.0",
     "@vicons/fluent": "0.13.0",
     "@vicons/ionicons4": "0.13.0",
     "@vicons/ionicons5": "0.13.0",
@@ -147,7 +147,6 @@
     "@vue/server-renderer": "3.5.31",
     "@vue/test-utils": "2.4.6",
     "autoprefixer": "10.4.27",
-    "codesandbox": "2.2.3",
     "cssnano": "7.1.3",
     "deepmerge": "4.3.1",
     "esbuild": "0.25.10",
@@ -171,7 +170,7 @@
     "tsx": "4.21.0",
     "typescript": "5.9.2",
     "vfonts": "0.0.3",
-    "vite": "7.1.12",
+    "vite": "7.3.3",
     "vitest": "3.2.4",
     "vue": "3.5.31",
     "vue-router": "4.5.1",
@@ -179,7 +178,9 @@
   },
   "pnpm": {
     "overrides": {
-      "cssstyle": "5.2.1"
+      "cssstyle": "5.2.1",
+      "serialize-javascript": "7.0.5",
+      "yaml": "2.9.0"
     },
     "onlyBuiltDependencies": [
       "esbuild"

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {