aio-entitykit 2.0.1 → 2.0.3

package/d1.css

@@ -464,7 +464,7 @@
 }
 
 .d1 .ai-indent-line {
-    stroke: var(--d1-border-light);
+    color: var(--d1-border-light);
 }
 
 
@@ -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

@@ -0,0 +1,95 @@
+import { type FC, type ReactNode } from "react";
+import { type I_table } from 'aio-table';
+import type { AIOCordova } from 'aio-cordova';
+import { useEntity } from 'aio-entity';
+import './index.css';
+type I_option = {
+    text: string;
+    title?: string;
+    show?: boolean;
+    body?: () => ReactNode;
+    onClick?: () => void;
+};
+type I_EntityTable<T> = {
+    root?: boolean;
+    popup?: any;
+    cordova?: AIOCordova;
+    sideOptions?: {
+        text: string;
+        value: any;
+        onClick?: () => void;
+        before?: ReactNode;
+    }[];
+    header?: () => ReactNode;
+    footer?: () => ReactNode;
+    entity: ReturnType<typeof useEntity<T>>;
+    table: Partial<I_table<T>>;
+    attrs?: any;
+    moveTo?: (moveFrom: T, moveTo: T) => boolean;
+    getCardContent: (row: T, parent: T | false, type: 'root' | 'leaf' | 'node') => ReactNode;
+    getCardOptions?: (row: T, parent: T | false) => I_option[];
+    getSelectedOptions?: (selected: T[], parent?: T) => I_option[];
+    getRootOptions?: () => I_option[];
+    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;
+export declare const Card: <T>({ row }: {
+    row: T;
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element;
+type I_DateFilter = {
+    result?: any;
+    fromDate?: number;
+    toDate?: number;
+    onChange: (p: {
+        fromDate?: number;
+        toDate?: number;
+    }) => void;
+};
+export declare const DateFilter: FC<I_DateFilter>;
+export declare const TimeRange: FC<{
+    fromDate?: number;
+    toDate?: number;
+    onChange: (p: {
+        fromDate?: number;
+        toDate?: number;
+    }) => void;
+}>;
+export declare const CardRow: FC<{
+    label: string;
+    value: ReactNode;
+    color?: string;
+    onClick?: () => void;
+}>;
+export type I_CardRow = [label: string, value: ReactNode, config?: {
+    isPrice?: boolean;
+    onClick?: () => void;
+}];
+export declare const CardRows: FC<{
+    rows: I_CardRow[];
+    placeholder?: string;
+}>;
+export declare const CardBox: FC<{
+    label: string;
+    value: ReactNode;
+    color?: string;
+    onClick?: () => void;
+    type: number;
+    isPrice?: boolean;
+}>;
+export declare const Panel: FC<{
+    label?: ReactNode;
+    content: ReactNode;
+}>;
+export {};

package/index.js

@@ -0,0 +1,355 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+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, mdiSelect, mdiUpload } from "@mdi/js";
+import './index.css';
+const Context = createContext({});
+const Provider = ({ children, value }) => {
+    return _jsx(Context.Provider, { value: value, children: children });
+};
+const useProvider = () => useContext(Context);
+export const EntityTable = (props) => {
+    const DATE = new AIODate();
+    const { table, moveTo, entity, popup, archive, filteredData, onSearch } = props;
+    const [showArchive, setShowArchive] = useState(false);
+    const { data } = entity;
+    const [selected, setSelected] = useState({});
+    const select = (row) => {
+        if (!props.getSelectedOptions) {
+            return;
+        }
+        const rowId = entity.id.get(row);
+        const keys = Object.keys(selected);
+        const firstSelected = keys.length ? selected[keys[0]] : undefined;
+        if (firstSelected) {
+            const firstSelectedParent = entity.getParentByRowId(entity.data, entity.id.get(firstSelected));
+            const firstSelectedParentId = firstSelectedParent ? entity.id.get(firstSelectedParent) : undefined;
+            const rowParent = entity.getParentByRowId(entity.data, entity.id.get(row));
+            const rowParentId = rowParent ? entity.id.get(rowParent) : undefined;
+            if (firstSelectedParentId !== rowParentId) {
+                setSelected({ [rowId]: row });
+                return;
+            }
+        }
+        if (selected[rowId]) {
+            setSelected((prev) => {
+                const newSelected = {};
+                for (let prop in prev) {
+                    if (rowId.toString() !== prop.toString()) {
+                        newSelected[prop] = prev[prop];
+                    }
+                }
+                return newSelected;
+            });
+        }
+        else {
+            setSelected((prev) => (Object.assign(Object.assign({}, prev), { [rowId]: row })));
+        }
+    };
+    const canMoveTo = (row) => {
+        const rowId = entity.id.get(row);
+        if (selected[rowId.toString()]) {
+            return false;
+        }
+        if (!moveTo) {
+            return false;
+        }
+        const keys = Object.keys(selected);
+        if (!keys.length) {
+            return false;
+        }
+        return true;
+    };
+    const getOptionDetails = (options, deselect) => {
+        return options.map((o) => {
+            return {
+                text: o.text, show: o.show,
+                onClick: () => {
+                    if (o.body) {
+                        popup.addModal({ header: { title: o.title || o.text }, body: o.body() });
+                    }
+                    if (o.onClick) {
+                        o.onClick();
+                    }
+                    if (deselect) {
+                        setTimeout(() => setSelected({}), 0);
+                    }
+                }
+            };
+        });
+    };
+    const getRootOptions = () => {
+        const options = props.getRootOptions ? props.getRootOptions() : [];
+        const res = [];
+        if (props.archive) {
+            res.push({
+                text: showArchive ? 'مخفی سازی آرشیو' : 'نمایش آرشیو', onClick: () => {
+                    setShowArchive(!showArchive);
+                }
+            });
+        }
+        return [...options, ...res];
+    };
+    const getOptions = (row, parent) => {
+        const options = props.getCardOptions ? props.getCardOptions(row, parent) : [];
+        const res = getOptionDetails(options);
+        return [
+            ...res,
+            {
+                show: canMoveTo(row), text: 'انتقال به اینجا', onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    const keys = Object.keys(selected);
+                    const toRow = row;
+                    const toId = entity.id.get(toRow);
+                    if (!moveTo || !keys.length) {
+                        return;
+                    }
+                    const { parents } = entity.getRowAndParentsById(toId);
+                    for (let i = 0; i < parents.length; i++) {
+                        const id = entity.id.get(parents[i]).toString();
+                        if (selected[id]) {
+                            return;
+                        }
+                    }
+                    const rows = keys.map((key) => selected[key]).filter((fromRow) => !!moveTo(fromRow, toRow));
+                    const fromIds = rows.map((o) => entity.id.get(o));
+                    yield entity.moveTo(fromIds, toId);
+                    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 }));
+                } } },
+            { show: !!archive && !!row.archive, text: 'خروج از آرشیو', onClick: () => { if (!!archive) {
+                    entity.edit(Object.assign(Object.assign({}, row), { archive: false }));
+                } } },
+            { text: 'حذف', onClick: () => entity.remove(entity.id.get(row)) }
+        ];
+    };
+    const side = useSide({
+        options: props.sideOptions || [],
+        option: {
+            before: (o) => _jsx(Icon, { path: { reports: mdiListBox, export: mdiDownload, import: mdiUpload }[o.value], size: 1 })
+        },
+        onChange: () => {
+            side.close();
+        }
+    });
+    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: "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();
+    const keys = Object.keys(selected);
+    const [options, setOptions] = useState([]);
+    function getOptions() {
+        const { getSelectedOptions } = rootProps;
+        if (!getSelectedOptions || !keys.length) {
+            return [];
+        }
+        const parent = keys.length ? entity.getParentByRowId(entity.data, entity.id.get(selected[keys[0]])) : undefined;
+        const list = [];
+        for (let prop in selected) {
+            list.push(selected[prop]);
+        }
+        const options = getSelectedOptions(list, parent);
+        return getOptionDetails(options, true);
+    }
+    useEffect(() => { setOptions(getOptions); }, [selected]);
+    if (!options.length) {
+        return null;
+    }
+    return (_jsxs("div", { className: "entity-table-selected", children: [_jsx("div", { className: "entity-table-deselect-all", onClick: () => setSelected({}), children: _jsx(Icon, { path: mdiClose, size: 0.8 }) }), _jsx("div", { className: "msf", children: `${keys.length} مورد انتخاب شده` }), _jsx("div", { style: { flex: 1 } }), _jsx(AISelect, { rtl: true, options: options, text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, justify: true, className: 'entity-table-selected-options', style: { background: 'orange', color: '#000', border: 'none', height: 30, width: 30, padding: 0, } })] }));
+};
+const TableToolbar = () => {
+    const { rootProps, getOptionDetails, getRootOptions } = useProvider();
+    const { table } = rootProps;
+    let node = null;
+    if (typeof table.toolbar === 'function') {
+        node = table.toolbar() || null;
+    }
+    else if (table.toolbar) {
+        node = table.toolbar || null;
+    }
+    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('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, entity, selected } = useProvider();
+    const rowId = entity.id.get(row);
+    const isSelected = selected[rowId];
+    const { getCardContent } = rootProps;
+    const [open, setOpen] = useState(false);
+    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, rootProps } = useProvider();
+    const childs = entity.childs.get(row);
+    if (!childs || !childs.length || !open) {
+        return null;
+    }
+    return (_jsx(AITree, { rtl: true, autoHeight: true, indent: 24, value: childs, option: {
+            childs: (o) => entity.childs.get(o),
+            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'}`,
+            style: () => ({ borderBottom: '2px dashed #333', borderRadius: '0.5em' }),
+            toggleIcon: rootProps.toggleIcon ? (row) => rootProps.toggleIcon(row) : undefined
+        } }));
+};
+const CardTreeRow = ({ row, parentOptions }) => {
+    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;
+    return (_jsxs("div", { className: classListToString(["entity-row", isSelected ? 'selected' : undefined]), children: [_jsx(CardHeader, { row: row, isRoot: false }), getCardContent(row, parent, childs ? 'node' : 'leaf')] }));
+};
+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: 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();
+    const changeDateByDay = (date) => {
+        const [year, month, day] = date;
+        const fromDate = DATE.getTime([year, month, day, 0, 0]);
+        const toDate = DATE.getTime([year, month, day, 23, 59]);
+        onChange({ fromDate, toDate });
+    };
+    return (_jsxs("div", { className: "date-filter", children: [_jsxs("div", { className: "date-filter-toolbar", children: [result !== undefined && _jsx("button", { className: 'date-filter-result', children: result }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { className: "date-filter-toolbar-buttons", children: [_jsx(AIDate, { className: 'date-filter-input', style: { background: 'none' }, caret: false, justify: true, jalali: true, calendarClose: true, text: _jsx(CalendarIcon, {}), dateUnit: 'day', dateType: 'dateArray', onChange: (v) => { changeDateByDay(v); }, popover: { position: 'center' } }), _jsx(DateBox, { unit: 'day', className: 'd1-bg-blue-grad', onChange: onChange }), _jsx(DateBox, { unit: 'month', className: 'd1-bg-green-grad', onChange: onChange }), _jsx(DateBox, { unit: 'year', className: 'd1-bg-red-grad', onChange: onChange })] })] }), _jsx(TimeRange, { fromDate: fromDate, toDate: toDate, onChange: ({ fromDate, toDate }) => { onChange({ fromDate, toDate }); } })] }));
+};
+const DateBox = ({ unit, onChange }) => {
+    const DATE = new AIODate();
+    const dic = { day: 'امروز', week: 'هفته جاری', month: 'انتخاب ماه', year: 'سال جاری' };
+    const changeDateByUnit = (unit) => {
+        let [fromArray, toArray] = DATE.getCurrentRange(unit, true);
+        const fromDate = DATE.getTime(fromArray);
+        const toDate = DATE.getTime(toArray);
+        onChange({ fromDate, toDate });
+    };
+    const changeDateByMonth = (month) => {
+        const [year] = DATE.getToday(true);
+        const dateArray = [year, month];
+        const monthDaysLength = DATE.getMonthDaysLength(dateArray);
+        const fromArray = [dateArray[0], dateArray[1], 1, 0, 0];
+        const toArray = [dateArray[0], dateArray[1], monthDaysLength, 23, 59];
+        const fromDate = DATE.getTime(fromArray);
+        const toDate = DATE.getTime(toArray);
+        onChange({ fromDate, toDate });
+    };
+    if (unit === 'month') {
+        return (_jsx(AISelect, { className: `date-box`, style: { color: '#ddd', background: 'none' }, caret: false, text: dic[unit], popover: { modalAttrs: { style: { width: '100vw' } } }, options: [
+                { text: 'ماه جاری', onClick: () => changeDateByUnit('month') },
+                ...DATE.getMonths(true).map((o, i) => ({ text: o, onClick: () => changeDateByMonth(i + 1) }))
+            ] }));
+    }
+    return (_jsx("div", { className: `date-box`, style: { color: '#ddd' }, onClick: () => {
+            if (unit === 'day') {
+                changeDateByUnit('day');
+            }
+            if (unit === 'year') {
+                changeDateByUnit('year');
+            }
+        }, children: dic[unit] }));
+};
+const CalendarIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 24 24", role: "presentation", style: { width: '1.5rem', height: '1.5rem' }, children: _jsx("path", { d: "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z", style: { fill: 'currentcolor' } }) }));
+};
+export const TimeRange = ({ fromDate, toDate, onChange }) => {
+    const getText = (time, field) => {
+        if (!time) {
+            return field === 'fromDate' ? 'از تاریخ' : 'تا تاریخ';
+        }
+        const DATE = new AIODate();
+        const { weekDay, monthString, yearStr, dayStr } = DATE.getDetails(time, true);
+        return `${weekDay} ${dayStr} ${monthString} ${yearStr}`;
+    };
+    const renderTime = (time, field) => {
+        const text = getText(time, field);
+        return (_jsx(AITime, { dateType: "dateNumber", className: 'time-range-input', style: { background: 'none' }, value: time, text: text, jalali: true, caret: false, onChange: (v) => onChange({ fromDate, toDate, [field]: v }), deSelect: true }));
+    };
+    return (_jsxs("div", { className: "time-range", children: [_jsx("div", { style: { flex: 1 }, children: renderTime(fromDate, 'fromDate') }), _jsx("div", { className: "time-range-splitter" }), _jsx("div", { style: { flex: 1 }, children: renderTime(toDate, 'toDate') })] }));
+};
+export const CardRow = ({ label, value, color, onClick }) => {
+    return (_jsxs("div", { className: 'card-row', onClick: () => { if (onClick) {
+            onClick();
+        } }, 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: "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')) {
+                    value = SplitNumber(r[1]);
+                }
+                return _jsx(CardRow, { label: r[0], value: value, onClick: onClick }, i);
+            })] }));
+};
+export const CardBox = ({ type, label, value, color, onClick, isPrice }) => {
+    let cls = `card-box`;
+    if (type === 0) {
+        cls += ' d1-bg-cream';
+    }
+    const style = {};
+    if (type === 1) {
+        style.boxShadow = 'inset 2px 2px 5px 0px rgb(110 85 27 / 40%)';
+    }
+    else if (type === 2) {
+        style.background = 'rgba(0,0,0,0.2)';
+        style.color = '#fff';
+    }
+    return (_jsxs("div", { className: cls, style: style, onClick: () => { if (onClick) {
+            onClick();
+        } }, 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.1",
+    "version": "2.0.3",
     "description": "kit",
     "main": "index.js",
     "scripts": {