aio-entitykit 1.0.0 → 2.0.1

package/d1.css

@@ -9,12 +9,12 @@
     --d1-gray-grad: linear-gradient(0deg, #343434, #727272);
     --d1-cream: #ffe29d;
     --d1-active: #ffe29d;
+    --d1-active-grad: linear-gradient(180deg, #f7e5b3, #9a7e2f);
     --d1-cream-grad: linear-gradient(180deg, rgb(226 188 80), rgb(67 60 37));
-    --d1-active-grad: linear-gradient(0deg, #0c2e5e, #034eb9);
     --d1-green: #04ff69;
-    --d1-green-grad: linear-gradient(0deg, #005d10, #04ff69);
-    --d1-orange: #ffc800;
-    --d1-orange-grad: linear-gradient(0deg, #8f4300, #ffc800);
+    --d1-green-grad: linear-gradient(0deg, #007414, #1dd11f);
+    --d1-orange: #ff8900;
+    --d1-orange-grad: linear-gradient(0deg, #7a3900, #ff8900);
     --d1-white: #dfdfdf;
     --d1-white-grad: linear-gradient(0deg, #888, #fff);
     --d1-text-in-dark: #ddd;
@@ -34,13 +34,25 @@
     --d1-text-medium: #acacac;
     --d1-text-light: #e7e7e7;
     --d1-text-dark: #383838;
-    --d1-bg-dark-1: rgba(0, 0, 0, 0.1);
-    --d1-bg-dark-2: rgba(0, 0, 0, 0.2);
-    --d1-bg-dark-3: rgba(0, 0, 0, 0.3);
-    --d1-bg-dark-4: rgba(0, 0, 0, 0.4);
-    --d1-bg-dark-5: rgba(0, 0, 0, 0.5);
-    --d1-bg-dark-6: rgba(0, 0, 0, 0.6);
-    --active-grd: linear-gradient(0deg, #3e5701, #a2df0d);
+    --d1-bg-dark-05: rgba(0, 0, 0, 0.05);
+    --d1-bg-dark-10: rgba(0, 0, 0, 0.10);
+    --d1-bg-dark-15: rgba(0, 0, 0, 0.15);
+    --d1-bg-dark-20: rgba(0, 0, 0, 0.20);
+    --d1-bg-dark-25: rgba(0, 0, 0, 0.25);
+    --d1-bg-dark-30: rgba(0, 0, 0, 0.30);
+    --d1-bg-dark-35: rgba(0, 0, 0, 0.35);
+    --d1-bg-dark-40: rgba(0, 0, 0, 0.40);
+    --d1-bg-dark-45: rgba(0, 0, 0, 0.45);
+    --d1-bg-dark-50: rgba(0, 0, 0, 0.50);
+    --d1-bg-dark-55: rgba(0, 0, 0, 0.55);
+    --d1-bg-dark-60: rgba(0, 0, 0, 0.60);
+    --d1-bg-dark-65: rgba(0, 0, 0, 0.65);
+    --d1-bg-dark-70: rgba(0, 0, 0, 0.70);
+    --d1-bg-dark-75: rgba(0, 0, 0, 0.75);
+    --d1-bg-dark-80: rgba(0, 0, 0, 0.80);
+    --d1-bg-dark-85: rgba(0, 0, 0, 0.85);
+    --d1-bg-dark-90: rgba(0, 0, 0, 0.90);
+    --d1-bg-dark-95: rgba(0, 0, 0, 0.95);
     --d1-border-radius: 6px;
 }
 
@@ -49,35 +61,75 @@
     color: var(--d1-text-in-dark);
 }
 
-.d1 .d1-bg-dark-1 {
+.d1 .d1-bg-dark- {
     background: var(--d1-bg-dark-1)
 }
 
-.d1 .d1-bg-dark-2 {
-    background: var(--d1-bg-dark-2)
+.d1 .d1-bg-dark-05 {
+    background: var(--d1-bg-dark-05)
 }
 
-.d1 .d1-bg-dark-3 {
-    background: var(--d1-bg-dark-3)
+.d1 .d1-bg-dark-10 {
+    background: var(--d1-bg-dark-10)
 }
-
-.d1 .d1-bg-dark-4 {
-    background: var(--d1-bg-dark-4)
+.d1 .d1-bg-dark-15 {
+    background: var(--d1-bg-dark-15)
 }
-
-.d1 .d1-bg-dark-5 {
-    background: var(--d1-bg-dark-5)
+.d1 .d1-bg-dark-20 {
+    background: var(--d1-bg-dark-20)
 }
-
-.d1 .d1-bg-dark-6 {
-    background: var(--d1-bg-dark-6)
+.d1 .d1-bg-dark-25 {
+    background: var(--d1-bg-dark-25)
+}
+.d1 .d1-bg-dark-30 {
+    background: var(--d1-bg-dark-30)
+}
+.d1 .d1-bg-dark-35 {
+    background: var(--d1-bg-dark-35)
+}
+.d1 .d1-bg-dark-40 {
+    background: var(--d1-bg-dark-40)
+}
+.d1 .d1-bg-dark-45 {
+    background: var(--d1-bg-dark-45)
+}
+.d1 .d1-bg-dark-50 {
+    background: var(--d1-bg-dark-50)
+}
+.d1 .d1-bg-dark-55 {
+    background: var(--d1-bg-dark-55)
+}
+.d1 .d1-bg-dark-60 {
+    background: var(--d1-bg-dark-60)
+}
+.d1 .d1-bg-dark-65 {
+    background: var(--d1-bg-dark-65)
+}
+.d1 .d1-bg-dark-70 {
+    background: var(--d1-bg-dark-70)
+}
+.d1 .d1-bg-dark-75 {
+    background: var(--d1-bg-dark-75)
+}
+.d1 .d1-bg-dark-80 {
+    background: var(--d1-bg-dark-80)
+}
+.d1 .d1-bg-dark-85 {
+    background: var(--d1-bg-dark-85)
+}
+.d1 .d1-bg-dark-90 {
+    background: var(--d1-bg-dark-90)
 }
+.d1 .d1-bg-dark-95 {
+    background: var(--d1-bg-dark-95)
+}
+
 .d1 .d1-border-medium {
-    border: 1px solid var(--d1-border-medium)
+    border: 1px solid var(--d1-border-medium) !important;
 }
 
 .d1 .d1-border-light {
-    border: 1px solid var(--d1-border-light)
+    border: 1px solid var(--d1-border-light) !important;
 }
 
 .d1 .d1-border-dark {
@@ -139,10 +191,7 @@
 }
 
 .d1 .ai-form .aio-input {
-    border: none !important;
     color: var(--d1-text-in-dark) !important;
-    background: var(--d1-black) !important;
-    box-shadow: var(--shadow-dep) !important;
     border-radius: var(--d1-border-radius) !important;
 }
 
@@ -184,7 +233,9 @@
     box-shadow: var(--shadow-dep);
     margin: 4px 0;
 }
-
+.d1 .ai-form-panel{
+    border:1px solid var(--d1-border-medium);
+}
 
 .d1 .aio-input-switch-groove {
     background: var(--d1-black) !important;
@@ -201,8 +252,8 @@
 
 }
 
-.d1 .aio-input-switch-nutton.active {
-    background: var(--active-grd);
+.d1 .aio-input-switch-button.active {
+    background: var(--active-grad);
 }
 
 .d1 .aio-input-range {
@@ -225,7 +276,7 @@
 }
 
 .d1 .ai-range-point {
-    background: var(--active-grd);
+    background: var(--d1-active-grad);
     box-shadow: var(--thumb-shadow);
     color: var(--d1-text-in-dark);
 }
@@ -338,7 +389,7 @@
 
 .d1 .d1-bg-green-grad {
     background: var(--d1-green-grad) !important;
-    box-shadow: inset 0px 1px 0px 0px #a5ffb6;
+    box-shadow: inset 0px 1px 0px 0px #00e82c;
     color: #000 !important;
 }
 
@@ -413,20 +464,14 @@
 }
 
 .d1 .ai-indent-line {
-    stroke: var(--d1-border-medium);
+    stroke: var(--d1-border-light);
 }
 
-.d1 .ai-toggle-icon:not(.ai-leaf-icon) {
-    background: var(--d1-gray-grad);
-    border-radius: 24px;
-    width: 2em;
-    height: 2em;
-    box-shadow: var(--d1-shadow-1);
-}
+
 
 .d1 .aio-input-date-theme-active {
     background: var(--d1-active);
-    color: #fff;
+    color: #666;
 }
 
 .d1 .aio-input-date-cell.today {
@@ -602,6 +647,17 @@
     color: #fff;
     border: none !important;
 }
+.d1 .d1-panel{
+    display: flex;
+    flex-direction: column;
+    gap:1em;
+    border: 1px solid var(--d1-border-medium);
+    padding:0.4em;
+    padding-top:1.2em;
+    border-radius:0.4em;
+    width:100%;
+    position: relative;
+}
 
 .d1 .d1-panel-label {
     font-weight: bold;
@@ -645,7 +701,6 @@
 
 .d1 .aio-input-tag {
     background: var(--d1-gray);
-    color: #fff;
     border: none !important;
 }
 
@@ -779,4 +834,81 @@
 .ai-form-wizard-step-button:disabled,.ai-form-wizard-submit-button:disabled{
     cursor:pointer;
     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

@@ -0,0 +1,81 @@
+.date-filter{
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    padding: 0 0.5em;
+    padding-bottom:0.5em;
+}
+.date-filter-toolbar{
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+}
+.date-filter-toolbar-buttons{
+    display:flex;
+    flex-direction: row;
+    gap: 0.5em;
+}
+.date-filter-input{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.4em;
+    cursor:pointer;
+    font-size: 1em;
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border:none;
+}
+.date-filter-result{
+    border:none;
+    border-radius: 0.4em;
+    padding:0 1em;
+    height:2.4em;
+    font-size:1em;
+    font-weight: bold;
+    background:linear-gradient(180deg, #f7e5b3, #9a7e2f);
+}
+.time-range{
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 0;
+    padding: 0;
+    border: 1px solid #444;
+}
+.time-range-splitter{
+    width: 1px;
+    background-color: #444;
+    height: 100%;
+}
+.time-range-input{
+    border:none;
+    font-size: 1em;
+    border-radius: 0;
+    background: none;
+}
+.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);
+}
+.entity-row-title{
+    flex:1;
+    font-size:0.8em;
+    font-weight:bold;
+}
+.entity-table-selected{
+    padding:0 1em;
+    height:2.4em;
+    display:flex;
+    align-items: center;
+    color:orange;
+}
+.entity-card-title{
+    display:flex;
+    align-items: center;
+}

package/package.json

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

package/index.d.ts

@@ -1,91 +0,0 @@
-import { type FC, type ReactNode } from "react";
-import { type I_table } from 'aio-table';
-import type { AIOCordova } from 'aio-cordova';
-import type { useEntity } from 'aio-entity';
-type I_option = {
-    text: string;
-    title?: string;
-    show?: boolean;
-    body?: () => ReactNode;
-    onClick?: () => void;
-};
-type I_EntityTable<T> = {
-    root?: boolean;
-    popup?: any;
-    cordova?: AIOCordova;
-    io?: boolean;
-    sideOptions?: {
-        text: string;
-        value: any;
-        onClick?: () => void;
-        before?: ReactNode;
-    }[];
-    header?: () => ReactNode;
-    footer?: () => ReactNode;
-    entity: ReturnType<typeof useEntity<T, any>>;
-    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[];
-    getRootOptions?: () => I_option[];
-    getCardTitle: (row: T) => string;
-    archive?: boolean;
-    size?: number;
-};
-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 TimeInput: FC<{
-    value?: number;
-    onChange: (date: number) => void;
-    disabled?: boolean;
-}>;
-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 declare const dateStringToDateNumber: (dateNumber: number) => any;
-export {};

package/index.js

@@ -1,240 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AIDate, AISelect, AITime, AITree } from 'aio-input';
-import { createContext, useContext, useState } from "react";
-import AIOTable from 'aio-table';
-import { AddToAttrs, GetSvg, SplitNumber, useSide } from 'aio-utils';
-import AIODate from 'aio-date';
-import Icon from '@mdi/react';
-import { mdiDownload, mdiListBox, mdiUpload } from "@mdi/js";
-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 } = props;
-    const [showArchive, setShowArchive] = useState(false);
-    const { getId, filteredData, data } = entity;
-    const [rowForMove, setRowForMove] = useState(undefined);
-    const canMoveTo = (row) => {
-        return !!moveTo && !!rowForMove && getId(rowForMove) !== getId(row);
-    };
-    const getOptionDetails = (options) => {
-        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();
-                    }
-                }
-            };
-        });
-    };
-    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: () => {
-                    if (rowForMove && moveTo) {
-                        entity.moveTo(getId(rowForMove), getId(row));
-                        setRowForMove(undefined);
-                    }
-                }
-            },
-            { 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 }));
-                } } },
-            { show: !!moveTo, text: 'ذخیره برای انتقال', onClick: () => { if (moveTo) {
-                    setRowForMove(row);
-                } } },
-            { text: 'حذف', onClick: () => entity.remove(getId(row)) }
-        ];
-    };
-    const side = useSide({
-        options: props.sideOptions || [],
-        option: {
-            before: (o) => _jsx(Icon, { path: { reports: mdiListBox, export: mdiDownload, import: mdiUpload }[o.value], size: 1 })
-        },
-        onChange: (o) => {
-            side.close();
-        }
-    });
-    const rows = entity.hasFilter ? filteredData.rows : data;
-    const attrs = AddToAttrs(props.attrs, { className: 'entity-table' });
-    return (_jsx(Provider, { value: { getRootOptions, rootProps: props, getOptions, entity, getOptionDetails, showArchive, setShowArchive }, children: _jsxs("div", Object.assign({}, attrs, { children: [_jsx("div", { className: "text-xs w-full flex flex-row justify-center", 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(AIOTable, Object.assign({}, table, { value: rows, className: 'flex-1 overflow-hidden', 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()] })) }));
-};
-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: "flex flex-row items-center gap-4 text-sm", 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] }));
-};
-export const Card = ({ row }) => {
-    const { rootProps, getOptions, entity, showArchive } = useProvider();
-    const { size = 72 } = rootProps;
-    const { getCardContent, getCardTitle } = rootProps;
-    const [open, setOpen] = useState(false);
-    const childs = entity.getChilds(row);
-    return (_jsxs("div", { className: "d1-bg-cream p-2 flex flex-col gap-1 rounded-lg", children: [_jsxs("div", { className: "flex flex-row items-center", children: [_jsx("div", { className: "flex flex-row items-center justify-center w-[30px] h-[30px]", onClick: () => setOpen(!open), children: new GetSvg().getIcon(open ? 'mdiChevronDown' : 'mdiChevronLeft', .8) }), _jsx("div", { className: "text-[1em] cursor-pointer flex-1", children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: false, isRoot: true })] }), getCardContent(row, false, 'root'), !!childs && !!open &&
-                _jsx(AITree, { rtl: true, size: size, indent: 24, value: childs, option: {
-                        childs: (o) => entity.getChilds(o),
-                        text: (row, { parentOptions }) => {
-                            const childs = entity.getChilds(row);
-                            const parentOption = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
-                            const parent = parentOption ? parentOption.optionOrg : false;
-                            if (childs) {
-                                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-row gap-1 flex-1 font-bold items-center", children: [_jsx("div", { className: "flex-1", children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: parent })] }), getCardContent(row, parent, 'node')] }));
-                            }
-                            return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-row font-bold items-center", children: [_jsx("div", { className: "flex-1 flex flex-row items-center h-fit", children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: parent })] }), getCardContent(row, parent, 'leaf')] }));
-                        },
-                        value: (o) => entity.getId(o),
-                        show: (o) => showArchive ? true : !o.archive,
-                        className: () => {
-                            return `${'d1-bg-dark-gray'} !rounded-md`;
-                        },
-                        style: () => ({ fontSize: '0.7em', borderBottom: '2px dashed #333' })
-                    } })] }));
-};
-const CardOptions = ({ 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 } }));
-};
-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 });
-    };
-    const buttonCls = `d1-bg-cream border-none rounded-lg px-4 h-10 text-sm font-bold`;
-    return (_jsxs("div", { className: "flex flex-col gap-2 p-2", children: [_jsxs("div", { className: "flex flex-row items-center", children: [result !== undefined && _jsx("button", { className: buttonCls, children: result }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(AIDate, { className: 'flex items-center justify-center rounded-lg! cursor-pointer text-sm w-[48px] h-[48px] text-center border-none!', 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: `flex items-center justify-center !rounded-lg cursor-pointer !text-xs w-[48px] !h-[48px] text-center d1-border-light !p-0`, style: { color: '#ddd', background: 'none' }, caret: false, text: dic[unit], optionsWrap: false, 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: `flex items-center justify-center rounded-lg cursor-pointer text-xs w-[48px] h-[48px] text-center d1-border-light`, 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: '!border-none !text-sm !rounded-0 !bg-none', style: { background: 'none' }, value: time, text: text, jalali: true, caret: false, onChange: (v) => onChange({ fromDate, toDate, [field]: v }), deSelect: true }));
-    };
-    return (_jsxs("div", { className: "flex flex-row items-center d1-border-medium", children: [_jsx("div", { className: "flex-1", children: renderTime(fromDate, 'fromDate') }), _jsx("div", { className: "w-[1px] d1-bg-border-medium h-full" }), _jsx("div", { className: "flex-1", children: renderTime(toDate, 'toDate') })] }));
-};
-export const TimeInput = ({ value, onChange, disabled }) => {
-    const DATE = new AIODate();
-    const str = (_jsx("div", { className: "text-md flex flex-row items-center gap-2 justify-center", children: !!value && _jsx(_Fragment, { children: DATE.getDateByPattern(value, '{weekDay} {day} {monthString} {year}', true) }) }));
-    return (_jsxs("div", { className: "flex flex-col gap-4 w-full px-4", children: [_jsx(AITime, { jalali: true, disabled: disabled, dateType: 'dateNumber', className: 'd1-in-shadow', value: value || DATE.getTime(DATE.getToday(true)), onChange: onChange, justify: true, timeUnit: { year: true, month: true, day: true } }), str] }));
-};
-export const CardRow = ({ label, value, color, onClick }) => {
-    return (_jsxs("div", { className: `flex flex-row d1-bg-dark-2 px-3 py-2 my-0.5 rounded-md items-center`, 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 })] }));
-};
-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) => {
-                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 = `flex flex-col flex-1 items-center rounded-lg py-2`;
-    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: "text-xs", children: label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "font-bold text-sm", style: { color }, children: isPrice ? SplitNumber(value) : value })] }));
-};
-export const Panel = ({ label, content }) => {
-    const panelCls = 'flex flex-col gap-4 d1-border-medium p-4 rounded-lg relative';
-    return (_jsxs("div", { className: panelCls, children: [!!label && _jsx("div", { className: "d1-panel-label d1-panel-label-online-rtl", children: label }), content] }));
-};
-export const dateStringToDateNumber = (dateNumber) => {
-    return new AIODate().getDateByPattern(dateNumber, '{year}/{month}/{day}', true);
-};