aio-entitykit 2.0.2 → 2.0.3

package/d1.css

@@ -822,7 +822,7 @@
     height: 2.4em;
     cursor:pointer;
 }
-.ai-form-submit-button{
+.d1 .ai-form-submit-button{
     background: var(--d1-active);
     color:#555;
     border: none;
@@ -832,83 +832,9 @@
     cursor:pointer;
 }
 .ai-form-wizard-step-button:disabled,.ai-form-wizard-submit-button:disabled{
-    cursor:pointer;
+    cursor:not-allowed;
     opacity:0.5;
 }
-.d1 .entity-card{
-    background: var(--d1-active);
-    padding:0.5em;
-    display:flex;
-    flex-direction: column;
-    gap:0.5em;
-    border-radius:0.8em;
-    color:#333;
-}
-.d1 .entity-card-header{
-    display: flex;
-    align-items: center;
-}
-.d1 .entity-card-toggle-icon{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width:24px;
-    height:30px;
-}
-.d1 .entity-card-title{
-    cursor: pointer;
-    flex:1;
-    font-weight:bold;
-}
-.d1 .entity-row{
-    display: flex;
-    flex-direction: column;
-    padding: 0.2em;
-    justify-content: center;
-    gap:0.4em;
-}
-.d1 .entity-row-header{
-    display: flex;
-    align-items: center;
-}
-.d1 .entity-table-deselect-all{
-    height:30px;
-    width: 30px;
-    display:flex;
-    align-items: center; 
-    justify-content: center;
-}
-.d1 .entity-table-selected-options{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.d1 .entity-table-today{
-    font-size:0.7em;
-    width:100%;
-    display: flex;
-    justify-content: center;
-}
-.d1 .entity-table .aio-table{
-    flex:1;
-    overflow: hidden;
-}
-.d1 .entity-table-toolbar{
-    display: flex;
-    align-items: center;
-    gap:3em;
-    font-size:0.8em;
-}
 .d1 .date-box{
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    border-radius:1em;
-    cursor:pointer;
-    font-size:0.8em;
-    width:48px;
-    height:48px;
-    text-align: center;
     border:1px solid var(--d1-border-medium);
-    padding:0;
-}
+}

package/index.css

@@ -1,81 +1,232 @@
-.date-filter{
+.date-filter {
     display: flex;
     flex-direction: column;
     gap: 0.5em;
     padding: 0 0.5em;
-    padding-bottom:0.5em;
+    padding-bottom: 0.5em;
 }
-.date-filter-toolbar{
-    display:flex;
+
+.date-filter-toolbar {
+    display: flex;
     flex-direction: row;
     align-items: center;
 }
-.date-filter-toolbar-buttons{
-    display:flex;
+
+.date-filter-toolbar-buttons {
+    display: flex;
     flex-direction: row;
     gap: 0.5em;
 }
-.date-filter-input{
-    display:flex;
+
+.date-filter-input {
+    display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.4em;
-    cursor:pointer;
-    font-size: 1em;
+    cursor: pointer;
     width: 48px;
     height: 48px;
     text-align: center;
-    border:none;
+    border: none;
 }
-.date-filter-result{
-    border:none;
+
+.date-filter-result {
+    border: none;
     border-radius: 0.4em;
-    padding:0 1em;
-    height:2.4em;
-    font-size:1em;
+    padding: 0 1em;
+    height: 2.4em;
     font-weight: bold;
-    background:linear-gradient(180deg, #f7e5b3, #9a7e2f);
+    background: linear-gradient(180deg, #f7e5b3, #9a7e2f);
 }
-.time-range{
-    display:flex;
+
+.time-range {
+    display: flex;
     flex-direction: row;
     align-items: center;
     border-radius: 0;
     padding: 0;
     border: 1px solid #444;
 }
-.time-range-splitter{
+
+.time-range-splitter {
     width: 1px;
     background-color: #444;
     height: 100%;
 }
-.time-range-input{
-    border:none;
-    font-size: 1em;
+
+.time-range-input {
+    border: none;
     border-radius: 0;
     background: none;
 }
-.card-row{
+
+.card-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+.card-rows-placeholder {
+    font-size: 80%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card-row {
     display: flex;
     padding: 0.5em 0.75em;
     margin: 0.25em 0;
     border-radius: 0.4em;
     align-items: center;
-    background:rgba(0,0,0,0.2);
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.card-row-value {
+    font-weight: bold;
+    font-size: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card-row-label {
+    font-size: 80%;
 }
-.entity-row-title{
-    flex:1;
-    font-size:0.8em;
-    font-weight:bold;
+
+.entity-row {
+    display: flex;
+    flex-direction: column;
+    padding: 0.6em 0.2em !important;
+    justify-content: center;
+    gap: 0.4em;
 }
-.entity-table-selected{
-    padding:0 1em;
-    height:2.4em;
-    display:flex;
+
+.entity-row-header {
+    display: flex;
+    align-items: center;
+}
+
+.entity-card {
+    background: var(--d1-active);
+    padding: 0.5em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    border-radius: 0.8em;
+    color: #333;
+}
+
+.entity-card-toggle-icon {
+    display: flex;
     align-items: center;
-    color:orange;
+    justify-content: center;
+    width: 24px;
+    height: 30px;
 }
-.entity-card-title{
-    display:flex;
+
+.entity-card-header {
+    display: flex;
     align-items: center;
+}
+.entity-card-title {
+    cursor: pointer;
+    flex: 1;
+    padding: 0;
+    background: none;
+}
+.entity-table-deselect-all {
+    height: 30px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.entity-table-selected-options {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.entity-table-today {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.entity-table .aio-table {
+    flex: 1;
+    overflow: hidden;
+}
+
+.entity-table-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 3em;
+}
+
+.date-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1em;
+    cursor: pointer;
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 1px solid var(--d1-border-medium);
+    padding: 0;
+}
+
+.entity-row-title {
+    flex: 1;
+}
+
+.entity-table-selected {
+    padding: 0 1em;
+    height: 2.4em;
+    display: flex;
+    align-items: center;
+    color: orange;
+}
+
+.entity-card-title {
+    display: flex;
+    align-items: center;
+}
+
+.entity-table-header {
+    display: flex;
+}
+
+.entity-table-side-button {
+    margin-inline-end: 1em;
+    padding: 1em;
+    border-radius: 100%;
+}
+
+.entity-table-align-vh {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card-box {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    border-radius: 0.8em;
+    align-items: center;
+    font-size: 80%;
+    opacity: 0.9;
+}
+
+.card-box-value {
+    font-weight: bold;
+}
+
+.entity-table .aio-input-tree-option {
+    min-height: 2.4em !important;
 }

package/index.d.ts

@@ -14,7 +14,6 @@ type I_EntityTable<T> = {
     root?: boolean;
     popup?: any;
     cordova?: AIOCordova;
-    io?: boolean;
     sideOptions?: {
         text: string;
         value: any;
@@ -31,8 +30,17 @@ type I_EntityTable<T> = {
     getCardOptions?: (row: T, parent: T | false) => I_option[];
     getSelectedOptions?: (selected: T[], parent?: T) => I_option[];
     getRootOptions?: () => I_option[];
-    getCardTitle: (row: T) => string;
+    getCardTitle: (row: T) => ReactNode;
+    getCardOptionsType?: (row: T) => 'button' | 'onTitle';
+    getCardSubtitle?: (row: T) => ReactNode;
+    onSearch?: (searchValue: string) => void;
+    toggleIcon?: (row: T) => {
+        close?: ReactNode;
+        open?: ReactNode;
+        leaf?: ReactNode;
+    } | undefined;
     archive?: boolean;
+    reOrder?: 'dir';
     filteredData?: T[];
 };
 export declare const EntityTable: <T>(props: I_EntityTable<T>) => import("react/jsx-runtime").JSX.Element;
@@ -79,7 +87,6 @@ export declare const CardBox: FC<{
     onClick?: () => void;
     type: number;
     isPrice?: boolean;
-    thin?: boolean;
 }>;
 export declare const Panel: FC<{
     label?: ReactNode;

package/index.js

@@ -9,12 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from "react";
-import { AIDate, AISelect, AITime, AITree } from 'aio-input';
+import AIOInput, { AIDate, AISelect, AITime, AITree } from 'aio-input';
 import AIOTable from 'aio-table';
 import { AddToAttrs, classListToString, GetSvg, SplitNumber, useSide } from 'aio-utils';
 import AIODate from 'aio-date';
 import Icon from '@mdi/react';
-import { mdiCheckboxMarked, mdiClose, mdiDownload, mdiListBox, mdiUpload } from "@mdi/js";
+import { mdiCheckboxMarked, mdiClose, mdiDownload, mdiListBox, mdiSelect, mdiUpload } from "@mdi/js";
 import './index.css';
 const Context = createContext({});
 const Provider = ({ children, value }) => {
@@ -23,7 +23,7 @@ const Provider = ({ children, value }) => {
 const useProvider = () => useContext(Context);
 export const EntityTable = (props) => {
     const DATE = new AIODate();
-    const { table, moveTo, entity, popup, archive, filteredData } = props;
+    const { table, moveTo, entity, popup, archive, filteredData, onSearch } = props;
     const [showArchive, setShowArchive] = useState(false);
     const { data } = entity;
     const [selected, setSelected] = useState({});
@@ -129,6 +129,8 @@ export const EntityTable = (props) => {
                     setSelected({});
                 })
             },
+            { show: props.reOrder === 'dir', text: 'جابجایی به بالا', onClick: () => entity.changeOrderByDir(row, -1) },
+            { show: props.reOrder === 'dir', text: 'جابجایی به پایین', onClick: () => entity.changeOrderByDir(row, 1) },
             { show: !!archive && !row.archive, text: 'انتقال به آرشیو', onClick: () => { if (!!archive) {
                     entity.edit(Object.assign(Object.assign({}, row), { archive: true }));
                 } } },
@@ -149,8 +151,8 @@ export const EntityTable = (props) => {
     });
     const rows = filteredData ? filteredData : data;
     const attrs = AddToAttrs(props.attrs, { className: 'entity-table' });
-    return (_jsx(Provider, { value: { selected, setSelected, getRootOptions, rootProps: props, getOptions, entity, getOptionDetails, showArchive, setShowArchive, select }, children: _jsxs("div", Object.assign({}, attrs, { children: [_jsx("div", { className: "entity-table-today", style: { background: 'rgba(0,0,0,0.2)' }, children: DATE.getDateByPattern(DATE.getToday(true), 'امروز {weekDay} {day} {monthString} {year}') }), _jsxs("div", { className: "flex flex-row", children: [!!props.sideOptions && !!props.sideOptions.length &&
-                            _jsx("div", { className: "border-0 ml-2 px-2 py-2 rounded-full", onClick: () => side.open(), children: _jsx(Icon, { path: mdiListBox, size: 1 }) }), !!props.header && props.header()] }), _jsx(Selected, {}), _jsx(AIOTable, Object.assign({}, table, { value: rows, headerAttrs: { style: { display: 'none' } }, rowTemplate: ({ row, rowIndex }) => _jsx(Card, { row: row, index: rowIndex }), toolbar: () => _jsx(TableToolbar, {}) })), _jsx("div", { className: "mb-2" }), !!props.footer && props.footer(), side.render()] })) }));
+    return (_jsx(Provider, { value: { selected, setSelected, getRootOptions, rootProps: props, getOptions, entity, getOptionDetails, showArchive, setShowArchive, select }, children: _jsxs("div", Object.assign({}, attrs, { children: [_jsx("div", { className: "entity-table-today", style: { background: 'rgba(0,0,0,0.2)' }, children: DATE.getDateByPattern(DATE.getToday(true), 'امروز {weekDay} {day} {monthString} {year}') }), _jsxs("div", { className: "entity-table-header", children: [!!props.sideOptions && !!props.sideOptions.length &&
+                            _jsx("div", { className: "entity-table-side-button", onClick: () => side.open(), children: _jsx(Icon, { path: mdiListBox, size: 1 }) }), !!props.header && props.header()] }), _jsx(Selected, {}), _jsx(AIOTable, Object.assign({}, table, { onSearch: onSearch, value: rows, headerAttrs: { style: { display: 'none' } }, rowTemplate: ({ row, rowIndex }) => _jsx(Card, { row: row, index: rowIndex }), toolbar: () => _jsx(TableToolbar, {}) })), _jsx("div", { style: { marginBottom: '1em' } }), !!props.footer && props.footer(), side.render()] })) }));
 };
 const Selected = () => {
     const { selected, rootProps, getOptionDetails, entity, setSelected } = useProvider();
@@ -188,19 +190,18 @@ const TableToolbar = () => {
     const options = getRootOptions();
     const res = getOptionDetails(options);
     return (_jsxs("div", { className: "entity-table-toolbar", children: [!!res.length &&
-                _jsx(AISelect, { rtl: true, options: res, text: new GetSvg().getIcon('mdiPlusThick', .8), caret: false, justify: true, className: 'd1-bg-cream flex flex-row items-center justify-center', style: { background: 'none', border: 'none', height: 30, width: 30, padding: 0, } }), node] }));
+                _jsx(AISelect, { rtl: true, options: res, text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, justify: true, className: 'd1-bg-cream entity-table-align-vh', style: { background: 'none', border: 'none', height: 30, width: 30, padding: 0, } }), node] }));
 };
 export const Card = ({ row }) => {
-    const { rootProps, getOptions, entity, showArchive, select, selected } = useProvider();
+    const { rootProps, entity, selected } = useProvider();
     const rowId = entity.id.get(row);
     const isSelected = selected[rowId];
-    const { getCardContent, getCardTitle } = rootProps;
+    const { getCardContent } = rootProps;
     const [open, setOpen] = useState(false);
-    //const tree = useMemo(() => {return <CardTree<T> row={row as any} open={open} />}, [row, selected, open])
-    return (_jsxs("div", { className: "entity-card", children: [_jsxs("div", { className: "entity-card-header", children: [_jsx("div", { className: "entity-card-toggle-icon", onClick: () => setOpen(!open), children: new GetSvg().getIcon(open ? 'mdiChevronDown' : 'mdiChevronLeft', .8) }), _jsxs("div", { className: "entity-card-title", style: { flex: 1, color: isSelected ? 'orange' : undefined }, onClick: () => select(row), children: [!!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' }), getCardTitle(row)] }), !!getOptions && _jsx(CardOptions, { row: row, parent: false, isRoot: true })] }), getCardContent(row, false, 'root'), _jsx(CardTree, { row: row, open: open })] }));
+    return (_jsxs("div", { className: "entity-card", children: [_jsx(CardHeader, { isRoot: true, row: row, before: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4em' }, children: [_jsx("div", { className: "entity-card-toggle-icon", onClick: (e) => { e.stopPropagation(); setOpen(!open); }, children: new GetSvg().getIcon(open ? 'mdiChevronDown' : 'mdiChevronLeft', .8) }), !!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' })] }) }), getCardContent(row, false, 'root'), _jsx(CardTree, { row: row, open: open })] }));
 };
 const CardTree = ({ row, open }) => {
-    const { entity, showArchive } = useProvider();
+    const { entity, showArchive, rootProps } = useProvider();
     const childs = entity.childs.get(row);
     if (!childs || !childs.length || !open) {
         return null;
@@ -210,24 +211,50 @@ const CardTree = ({ row, open }) => {
             text: (row, { parentOptions }) => _jsx(CardTreeRow, { row: row, parentOptions: parentOptions }),
             value: (o) => entity.id.get(o),
             show: (o) => showArchive ? true : !o.archive,
-            className: () => `${'d1-bg-dark-gray'} !rounded-md`,
-            style: () => ({ borderBottom: '2px dashed #333' })
+            className: () => `${'d1-bg-dark-gray'}`,
+            style: () => ({ borderBottom: '2px dashed #333', borderRadius: '0.5em' }),
+            toggleIcon: rootProps.toggleIcon ? (row) => rootProps.toggleIcon(row) : undefined
         } }));
 };
 const CardTreeRow = ({ row, parentOptions }) => {
-    const { rootProps, getOptions, entity, select, selected } = useProvider();
-    const { getCardContent, getCardTitle } = rootProps;
+    const { rootProps, entity, selected } = useProvider();
+    const { getCardContent } = rootProps;
     const rowId = entity.id.get(row);
     const isSelected = selected[rowId];
     const childs = entity.childs.get(row);
     const parentOption = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
     const parent = parentOption ? parentOption.optionOrg : false;
-    console.log('tree row');
-    return (_jsxs("div", { className: classListToString(["entity-row", isSelected ? 'selected' : undefined]), children: [_jsxs("div", { className: "entity-row-header", children: [!!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' }), _jsx("div", { className: 'entity-row-title', style: { color: isSelected ? 'orange' : undefined }, onClick: () => select(row), children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: parent })] }), getCardContent(row, parent, childs ? 'node' : 'leaf')] }));
+    return (_jsxs("div", { className: classListToString(["entity-row", isSelected ? 'selected' : undefined]), children: [_jsx(CardHeader, { row: row, isRoot: false }), getCardContent(row, parent, childs ? 'node' : 'leaf')] }));
 };
-const CardOptions = ({ row, parent, isRoot }) => {
+const CardHeader = ({ row, before, isRoot }) => {
+    const { entity, selected, rootProps, select } = useProvider();
+    const { getCardOptionsType = (() => 'button') } = rootProps;
+    const rowId = entity.id.get(row);
+    const isSelected = selected[rowId];
+    const cardOptionsType = getCardOptionsType(row);
+    if (cardOptionsType === 'onTitle') {
+        return (_jsxs("div", { className: "entity-card-header", children: [_jsx(CardOptionsOnTitle, { row: row, parent: false, isRoot: isRoot, isSelected: isSelected, before: before }), !!rootProps.getSelectedOptions && _jsx("div", { className: "entity-card-select-icon", onClick: () => select(row), children: _jsx(Icon, { path: mdiSelect, size: 0.7 }) })] }));
+    }
+    else {
+        return (_jsxs("div", { className: "entity-card-header", children: [_jsx(CardTitle, { isSelected: isSelected, before: before, row: row }), _jsx(CardOptionsButton, { row: row, parent: false, isRoot: true })] }));
+    }
+};
+const CardTitle = ({ row, before, isSelected }) => {
+    const { rootProps, select } = useProvider();
+    const { getCardTitle } = rootProps;
+    const hasBefore = !!before || !!isSelected;
+    return (_jsx(AIOInput, { type: 'button', text: getCardTitle(row), before: !hasBefore ? undefined :
+            _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4em' }, children: [!!before && before, !!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' })] }), className: "entity-card-title", style: { flex: 1, color: isSelected ? 'orange' : undefined }, onClick: () => select(row) }));
+};
+const CardOptionsButton = ({ row, parent, isRoot }) => {
     const { getOptions } = useProvider();
-    return (_jsx(AISelect, { text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, options: getOptions(row, parent, !!isRoot), justify: true, className: `${!isRoot ? 'd1-bg-cream' : 'd1-bg-gray'}`, style: { background: 'none', border: 'none', height: 30, width: 42, fontSize: '0.7em' }, popover: { modalAttrs: { style: { fontSize: '0.8em' } } } }));
+    return (_jsx(AISelect, { text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, options: getOptions(row, parent, !!isRoot), justify: true, className: `${!isRoot ? 'd1-bg-cream' : 'd1-bg-gray'}`, style: { background: 'none', border: 'none', height: 24, width: 42, fontSize: '0.7em' }, popover: { modalAttrs: { style: { fontSize: '0.8em' } } } }));
+};
+const CardOptionsOnTitle = ({ row, parent, isRoot, isSelected, before }) => {
+    const { getOptions, rootProps } = useProvider();
+    const { getCardSubtitle } = rootProps;
+    const subtitle = getCardSubtitle ? getCardSubtitle(row) : undefined;
+    return (_jsx(AISelect, { className: "entity-card-title", rtl: true, subtext: subtitle, text: rootProps.getCardTitle(row), caret: false, options: getOptions(row, parent, !!isRoot), style: { flex: 1, color: isSelected ? 'orange' : undefined, border: 'none', height: 'fit-content' }, before: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4em' }, children: [!!before && before, !!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' })] }), popover: { modalAttrs: { style: { fontSize: '0.8em' } } } }));
 };
 export const DateFilter = ({ result, fromDate, toDate, onChange }) => {
     const DATE = new AIODate();
@@ -294,10 +321,10 @@ export const TimeRange = ({ fromDate, toDate, onChange }) => {
 export const CardRow = ({ label, value, color, onClick }) => {
     return (_jsxs("div", { className: 'card-row', onClick: () => { if (onClick) {
             onClick();
-        } }, children: [_jsx("div", { className: "text-sm", children: label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "font-bold text-sm flex flex-row items-center justify-center", style: { color }, children: value })] }));
+        } }, children: [_jsx("div", { className: "card-row-label", children: label }), _jsx("div", { style: { flex: 1 } }), _jsx("div", { className: "card-row-value", style: { color }, children: value })] }));
 };
 export const CardRows = ({ rows, placeholder = 'موردی وجود ندارد' }) => {
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [!rows.length && _jsx("div", { className: "text-xs w-full flex flex-row items-center justify-center", children: placeholder }), rows.map((r, i) => {
+    return (_jsxs("div", { className: "card-rows", children: [!rows.length && _jsx("div", { className: "card-rows-placeholder", children: placeholder }), rows.map((r, i) => {
                 const { onClick, isPrice } = r[2] || {};
                 let value = r[1];
                 if (isPrice && (typeof r[1] === 'number' || typeof r[1] === 'string')) {
@@ -306,8 +333,8 @@ export const CardRows = ({ rows, placeholder = 'موردی وجود ندارد'
                 return _jsx(CardRow, { label: r[0], value: value, onClick: onClick }, i);
             })] }));
 };
-export const CardBox = ({ thin, type, label, value, color, onClick, isPrice }) => {
-    let cls = `flex flex-col flex-1 items-center rounded-lg${!thin ? ' py-2' : ''}`;
+export const CardBox = ({ type, label, value, color, onClick, isPrice }) => {
+    let cls = `card-box`;
     if (type === 0) {
         cls += ' d1-bg-cream';
     }
@@ -321,7 +348,7 @@ export const CardBox = ({ thin, type, label, value, color, onClick, isPrice }) =
     }
     return (_jsxs("div", { className: cls, style: style, onClick: () => { if (onClick) {
             onClick();
-        } }, children: [_jsx("div", { className: "text-xs", children: label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "font-bold text-sm", style: { color }, children: isPrice ? SplitNumber(value) : value })] }));
+        } }, children: [_jsx("div", { className: 'card-box-label', children: label }), _jsx("div", { style: { flex: 1 } }), _jsx("div", { className: "card-box-value", style: { color }, children: isPrice ? SplitNumber(value) : value })] }));
 };
 export const Panel = ({ label, content }) => {
     return (_jsxs("div", { className: 'd1-panel', children: [!!label && _jsx("div", { className: "d1-panel-label d1-panel-label-online-rtl", children: label }), content] }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-entitykit",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "description": "kit",
     "main": "index.js",
     "scripts": {