@mamrp/components 1.4.10 → 1.4.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts/index.d.mts +0 -0
- package/dist/charts/index.d.ts +0 -0
- package/dist/charts/index.js +0 -0
- package/dist/charts/index.js.map +1 -1
- package/dist/charts/index.mjs +0 -0
- package/dist/charts/index.mjs.map +1 -1
- package/dist/date-pickers/index.d.mts +0 -0
- package/dist/date-pickers/index.d.ts +0 -0
- package/dist/date-pickers/index.js +0 -0
- package/dist/date-pickers/index.js.map +0 -0
- package/dist/date-pickers/index.mjs +0 -0
- package/dist/date-pickers/index.mjs.map +0 -0
- package/dist/index.d.mts +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +105 -15
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +105 -15
- package/dist/index.mjs.map +1 -1
- package/dist/pagination/index.d.mts +0 -0
- package/dist/pagination/index.d.ts +0 -0
- package/dist/pagination/index.js +0 -0
- package/dist/pagination/index.js.map +0 -0
- package/dist/pagination/index.mjs +0 -0
- package/dist/pagination/index.mjs.map +0 -0
- package/dist/selectors/index.d.mts +0 -0
- package/dist/selectors/index.d.ts +0 -0
- package/dist/selectors/index.js +0 -0
- package/dist/selectors/index.js.map +1 -1
- package/dist/selectors/index.mjs +0 -0
- package/dist/selectors/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/charts/index.d.mts
CHANGED
|
File without changes
|
package/dist/charts/index.d.ts
CHANGED
|
File without changes
|
package/dist/charts/index.js
CHANGED
|
File without changes
|
package/dist/charts/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/charts/index.ts","../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["export { default as BarChart } from \"./bar\";\nexport { default as PieChart } from \"./pie\";\n","import * as React from \"react\";\nexport { React };\n","\"use client\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\n BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController,\n Chart as ChartType,\n} from \"chart.js\";\nimport { Box } from \"@mui/material\";\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController\n);\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: (number | null)[];\n backgroundColor: string;\n borderColor?: string;\n borderWidth?: number;\n type?: \"line\";\n order?: number;\n tension?: number;\n pointRadius?: number;\n fill?: boolean;\n }[];\n height?: number;\n}\n/**\n * 📊 BarChart — کامپوننت نمودار میلهای (Bar/Combo)\n *\n * @component BarChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای محور افقی (X).\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string,\n * borderColor?: string,\n * borderWidth?: number,\n * type?: \"line\",\n * order?: number,\n * tension?: number,\n * pointRadius?: number,\n * fill?: boolean\n * }>} datasets - آرایهای از آبجکتهای داده برای هر سری نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر سری\n * - backgroundColor: رنگ میله یا خط\n * - borderColor: (اختیاری) رنگ خط دور میله یا خط\n * - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\n * - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده میشود (نمودار ترکیبی)\n * - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار میگیرد)\n * - tension: (اختیاری) میزان خمیدگی خط (برای سریهای خطی)\n * - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سریهای خطی)\n * - fill: (اختیاری) پر شدن زیر خط (برای سریهای خطی)\n *\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار میلهای (Bar) یا ترکیبی Bar/Line با قابلیت شخصیسازی کامل است.\n * - پشتیبانی از فونت وزیر و راستچین\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش چند سری داده به صورت میلهای و خطی همزمان (Combo)\n * - شخصیسازی رنگ، ضخامت، ترتیب و استایل هر سری\n *\n * @returns {JSX.Element} یک نمودار میلهای یا ترکیبی با دادههای ورودی\n *\n * @example\n * ```jsx\n * <BarChart\n * labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\n * datasets={[\n * {\n * label: \"فروش\",\n * data: [10, 20, 15],\n * backgroundColor: \"rgba(75,192,192,0.7)\",\n * },\n * {\n * label: \"میانگین\",\n * data: [12, 18, 14],\n * borderColor: \"red\",\n * backgroundColor: \"transparent\",\n * type: \"line\",\n * order: 0,\n * borderWidth: 3,\n * tension: 0.4,\n * pointRadius: 4,\n * fill: false,\n * },\n * ]}\n * height={400}\n * />\n * ```\n */\nexport default function BarChart({ labels, datasets, height }: Props) {\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n ticks: {\n font: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n },\n },\n x: {\n ticks: {\n autoSkip: false,\n font: {\n family: \"'Vazir', sans-serif\",\n size: 13,\n },\n },\n },\n },\n plugins: {\n datalabels: {\n display: false, // ← غیرفعال\n },\n tooltip: {\n bodyFont: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"'Vazir', sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n generateLabels: function (chart: ChartType) {\n const labels =\n ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\n return labels.map((label) => ({\n ...label,\n text: \" \" + label.text + \" \",\n boxWidth: 40,\n boxHeight: 20,\n }));\n },\n padding: 15,\n usePointStyle: true,\n font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n },\n };\n\n return (\n <Box height={height ?? 600}>\n <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\n </Box>\n );\n}\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: number[];\n backgroundColor: string | string[];\n borderWidth?: number;\n }[];\n height?: number;\n disableLogo?: boolean;\n logoSRC?: string;\n showDataLabels?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسبهای دادهها\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string[],\n * borderWidth?: number\n * }>} datasets - آرایهای شامل یک آبجکت داده برای مقداردهی بخشهای نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر بخش\n * - backgroundColor: آرایهای از رنگها برای هر بخش\n * - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایرهای با قابلیت شخصیسازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n *\n * @returns {JSX.Element} یک نمودار دایرهای با دادههای ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n * labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n * datasets={[\n * {\n * label: \"مقدار\",\n * data: [10, 20, 30],\n * backgroundColor: [\n * \"rgba(75,192,192,1)\",\n * \"rgba(255,99,132,1)\",\n * \"rgba(153,102,255,1)\",\n * ],\n * borderWidth: 2,\n * },\n * ]}\n * />\n * ```\n */\nexport default function PieChart({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = false,\n}: Props) {\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n cutout: !disableLogo ? \"59%\" : \"0%\",\n plugins: {\n tooltip: {\n bodyFont: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"'Vazir', sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n padding: 15,\n usePointStyle: true,\n font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\n color: \"#fff\",\n font: {\n size: 14,\n weight: \"bold\",\n family: \"'Vazir', sans-serif\",\n } as const,\n anchor: \"center\" as const, // ← روی مرکز هر تکه\n align: \"center\" as const,\n offset: 20, // فاصله از مرکز (میتونی کم/زیاد کنی)\n formatter: (value: number) => (value === 0 ? \"\" : value),\n },\n },\n };\n\n // کامپوننتی که میخواهید در مرکز نمودار نمایش داده شود\n const CenterComponent = () => {\n return (\n <div\n style={{\n padding: \"10px\",\n borderRadius: \"8px\",\n textAlign: \"center\",\n width: 220,\n }}\n >\n <Image\n alt=\"\"\n width={220}\n height={220}\n src={logoSRC ?? \"/assets/images/pilogo.png\"}\n unoptimized\n />\n </div>\n );\n };\n\n return (\n <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n <Pie\n data={{\n labels: labels,\n datasets: datasets,\n }}\n options={options}\n />\n {!disableLogo && (\n <div\n style={{\n position: \"absolute\",\n top: \"53%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n }}\n >\n <CenterComponent />\n </div>\n )}\n </Box>\n );\n}\n"],"mappings":"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","names":["ChartJS","labels","import_react_chartjs_2","import_chart","import_material","ChartJS","ChartDataLabels","Image"]}
|
|
1
|
+
{"version":3,"sources":["../../src/charts/index.ts","../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["export { default as BarChart } from \"./bar\";\nexport { default as PieChart } from \"./pie\";\n","import * as React from \"react\";\nexport { React };\n","\"use client\";\r\nimport { Chart } from \"react-chartjs-2\";\r\nimport {\r\n Chart as ChartJS,\r\n CategoryScale,\r\n LinearScale,\r\n BarElement,\r\n LineElement,\r\n PointElement,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n LineController,\r\n Chart as ChartType,\r\n} from \"chart.js\";\r\nimport { Box } from \"@mui/material\";\r\n\r\nChartJS.register(\r\n CategoryScale,\r\n LinearScale,\r\n BarElement,\r\n LineElement,\r\n PointElement,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n LineController\r\n);\r\n\r\ninterface Props {\r\n labels: string[];\r\n datasets: {\r\n label: string;\r\n data: (number | null)[];\r\n backgroundColor: string;\r\n borderColor?: string;\r\n borderWidth?: number;\r\n type?: \"line\";\r\n order?: number;\r\n tension?: number;\r\n pointRadius?: number;\r\n fill?: boolean;\r\n }[];\r\n height?: number;\r\n}\r\n/**\r\n * 📊 BarChart — کامپوننت نمودار میلهای (Bar/Combo)\r\n *\r\n * @component BarChart\r\n *\r\n * @param {string[]} labels - آرایهای از برچسبها برای محور افقی (X).\r\n * @param {Array<{\r\n * label: string,\r\n * data: number[],\r\n * backgroundColor: string,\r\n * borderColor?: string,\r\n * borderWidth?: number,\r\n * type?: \"line\",\r\n * order?: number,\r\n * tension?: number,\r\n * pointRadius?: number,\r\n * fill?: boolean\r\n * }>} datasets - آرایهای از آبجکتهای داده برای هر سری نمودار.\r\n * - label: عنوان دادهها (نمایش در legend)\r\n * - data: آرایهای از مقادیر هر سری\r\n * - backgroundColor: رنگ میله یا خط\r\n * - borderColor: (اختیاری) رنگ خط دور میله یا خط\r\n * - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\r\n * - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده میشود (نمودار ترکیبی)\r\n * - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار میگیرد)\r\n * - tension: (اختیاری) میزان خمیدگی خط (برای سریهای خطی)\r\n * - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سریهای خطی)\r\n * - fill: (اختیاری) پر شدن زیر خط (برای سریهای خطی)\r\n *\r\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\r\n *\r\n * @description\r\n * این کامپوننت یک نمودار میلهای (Bar) یا ترکیبی Bar/Line با قابلیت شخصیسازی کامل است.\r\n * - پشتیبانی از فونت وزیر و راستچین\r\n * - ریسپانسیو و مناسب صفحات فارسی\r\n * - امکان نمایش چند سری داده به صورت میلهای و خطی همزمان (Combo)\r\n * - شخصیسازی رنگ، ضخامت، ترتیب و استایل هر سری\r\n *\r\n * @returns {JSX.Element} یک نمودار میلهای یا ترکیبی با دادههای ورودی\r\n *\r\n * @example\r\n * ```jsx\r\n * <BarChart\r\n * labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\r\n * datasets={[\r\n * {\r\n * label: \"فروش\",\r\n * data: [10, 20, 15],\r\n * backgroundColor: \"rgba(75,192,192,0.7)\",\r\n * },\r\n * {\r\n * label: \"میانگین\",\r\n * data: [12, 18, 14],\r\n * borderColor: \"red\",\r\n * backgroundColor: \"transparent\",\r\n * type: \"line\",\r\n * order: 0,\r\n * borderWidth: 3,\r\n * tension: 0.4,\r\n * pointRadius: 4,\r\n * fill: false,\r\n * },\r\n * ]}\r\n * height={400}\r\n * />\r\n * ```\r\n */\r\nexport default function BarChart({ labels, datasets, height }: Props) {\r\n const options = {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n y: {\r\n ticks: {\r\n font: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 14,\r\n },\r\n },\r\n },\r\n x: {\r\n ticks: {\r\n autoSkip: false,\r\n font: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 13,\r\n },\r\n },\r\n },\r\n },\r\n plugins: {\r\n datalabels: {\r\n display: false, // ← غیرفعال\r\n },\r\n tooltip: {\r\n bodyFont: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 14,\r\n },\r\n titleFont: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 16,\r\n },\r\n },\r\n legend: {\r\n labels: {\r\n generateLabels: function (chart: ChartType) {\r\n const labels =\r\n ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\r\n return labels.map((label) => ({\r\n ...label,\r\n text: \" \" + label.text + \" \",\r\n boxWidth: 40,\r\n boxHeight: 20,\r\n }));\r\n },\r\n padding: 15,\r\n usePointStyle: true,\r\n font: {\r\n size: 16,\r\n family: \"'Vazir', sans-serif\",\r\n },\r\n boxWidth: 40,\r\n paddingBottom: 10,\r\n },\r\n },\r\n },\r\n };\r\n\r\n return (\r\n <Box height={height ?? 600}>\r\n <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\r\n </Box>\r\n );\r\n}\r\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: number[];\n backgroundColor: string | string[];\n borderWidth?: number;\n }[];\n height?: number;\n disableLogo?: boolean;\n logoSRC?: string;\n showDataLabels?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسبهای دادهها\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string[],\n * borderWidth?: number\n * }>} datasets - آرایهای شامل یک آبجکت داده برای مقداردهی بخشهای نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر بخش\n * - backgroundColor: آرایهای از رنگها برای هر بخش\n * - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایرهای با قابلیت شخصیسازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n *\n * @returns {JSX.Element} یک نمودار دایرهای با دادههای ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n * labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n * datasets={[\n * {\n * label: \"مقدار\",\n * data: [10, 20, 30],\n * backgroundColor: [\n * \"rgba(75,192,192,1)\",\n * \"rgba(255,99,132,1)\",\n * \"rgba(153,102,255,1)\",\n * ],\n * borderWidth: 2,\n * },\n * ]}\n * />\n * ```\n */\nexport default function PieChart({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = false,\n}: Props) {\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n cutout: !disableLogo ? \"59%\" : \"0%\",\n plugins: {\n tooltip: {\n bodyFont: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"'Vazir', sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n padding: 15,\n usePointStyle: true,\n font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\n color: \"#fff\",\n font: {\n size: 14,\n weight: \"bold\",\n family: \"'Vazir', sans-serif\",\n } as const,\n anchor: \"center\" as const, // ← روی مرکز هر تکه\n align: \"center\" as const,\n offset: 20, // فاصله از مرکز (میتونی کم/زیاد کنی)\n formatter: (value: number) => (value === 0 ? \"\" : value),\n },\n },\n };\n\n // کامپوننتی که میخواهید در مرکز نمودار نمایش داده شود\n const CenterComponent = () => {\n return (\n <div\n style={{\n padding: \"10px\",\n borderRadius: \"8px\",\n textAlign: \"center\",\n width: 220,\n }}\n >\n <Image\n alt=\"\"\n width={220}\n height={220}\n src={logoSRC ?? \"/assets/images/pilogo.png\"}\n unoptimized\n />\n </div>\n );\n };\n\n return (\n <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n <Pie\n data={{\n labels: labels,\n datasets: datasets,\n }}\n options={options}\n />\n {!disableLogo && (\n <div\n style={{\n position: \"absolute\",\n top: \"53%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n }}\n >\n <CenterComponent />\n </div>\n )}\n </Box>\n );\n}\n"],"mappings":"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","names":["ChartJS","labels","import_react_chartjs_2","import_chart","import_material","ChartJS","ChartDataLabels","Image"]}
|
package/dist/charts/index.mjs
CHANGED
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","\"use client\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\n BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController,\n Chart as ChartType,\n} from \"chart.js\";\nimport { Box } from \"@mui/material\";\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n BarElement,\n LineElement,\n PointElement,\n Tooltip,\n Legend,\n BarController,\n LineController\n);\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: (number | null)[];\n backgroundColor: string;\n borderColor?: string;\n borderWidth?: number;\n type?: \"line\";\n order?: number;\n tension?: number;\n pointRadius?: number;\n fill?: boolean;\n }[];\n height?: number;\n}\n/**\n * 📊 BarChart — کامپوننت نمودار میلهای (Bar/Combo)\n *\n * @component BarChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای محور افقی (X).\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string,\n * borderColor?: string,\n * borderWidth?: number,\n * type?: \"line\",\n * order?: number,\n * tension?: number,\n * pointRadius?: number,\n * fill?: boolean\n * }>} datasets - آرایهای از آبجکتهای داده برای هر سری نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر سری\n * - backgroundColor: رنگ میله یا خط\n * - borderColor: (اختیاری) رنگ خط دور میله یا خط\n * - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\n * - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده میشود (نمودار ترکیبی)\n * - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار میگیرد)\n * - tension: (اختیاری) میزان خمیدگی خط (برای سریهای خطی)\n * - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سریهای خطی)\n * - fill: (اختیاری) پر شدن زیر خط (برای سریهای خطی)\n *\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار میلهای (Bar) یا ترکیبی Bar/Line با قابلیت شخصیسازی کامل است.\n * - پشتیبانی از فونت وزیر و راستچین\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش چند سری داده به صورت میلهای و خطی همزمان (Combo)\n * - شخصیسازی رنگ، ضخامت، ترتیب و استایل هر سری\n *\n * @returns {JSX.Element} یک نمودار میلهای یا ترکیبی با دادههای ورودی\n *\n * @example\n * ```jsx\n * <BarChart\n * labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\n * datasets={[\n * {\n * label: \"فروش\",\n * data: [10, 20, 15],\n * backgroundColor: \"rgba(75,192,192,0.7)\",\n * },\n * {\n * label: \"میانگین\",\n * data: [12, 18, 14],\n * borderColor: \"red\",\n * backgroundColor: \"transparent\",\n * type: \"line\",\n * order: 0,\n * borderWidth: 3,\n * tension: 0.4,\n * pointRadius: 4,\n * fill: false,\n * },\n * ]}\n * height={400}\n * />\n * ```\n */\nexport default function BarChart({ labels, datasets, height }: Props) {\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n ticks: {\n font: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n },\n },\n x: {\n ticks: {\n autoSkip: false,\n font: {\n family: \"'Vazir', sans-serif\",\n size: 13,\n },\n },\n },\n },\n plugins: {\n datalabels: {\n display: false, // ← غیرفعال\n },\n tooltip: {\n bodyFont: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"'Vazir', sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n generateLabels: function (chart: ChartType) {\n const labels =\n ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\n return labels.map((label) => ({\n ...label,\n text: \" \" + label.text + \" \",\n boxWidth: 40,\n boxHeight: 20,\n }));\n },\n padding: 15,\n usePointStyle: true,\n font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n },\n };\n\n return (\n <Box height={height ?? 600}>\n <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\n </Box>\n );\n}\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: number[];\n backgroundColor: string | string[];\n borderWidth?: number;\n }[];\n height?: number;\n disableLogo?: boolean;\n logoSRC?: string;\n showDataLabels?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسبهای دادهها\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string[],\n * borderWidth?: number\n * }>} datasets - آرایهای شامل یک آبجکت داده برای مقداردهی بخشهای نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر بخش\n * - backgroundColor: آرایهای از رنگها برای هر بخش\n * - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایرهای با قابلیت شخصیسازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n *\n * @returns {JSX.Element} یک نمودار دایرهای با دادههای ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n * labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n * datasets={[\n * {\n * label: \"مقدار\",\n * data: [10, 20, 30],\n * backgroundColor: [\n * \"rgba(75,192,192,1)\",\n * \"rgba(255,99,132,1)\",\n * \"rgba(153,102,255,1)\",\n * ],\n * borderWidth: 2,\n * },\n * ]}\n * />\n * ```\n */\nexport default function PieChart({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = false,\n}: Props) {\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n cutout: !disableLogo ? \"59%\" : \"0%\",\n plugins: {\n tooltip: {\n bodyFont: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"'Vazir', sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n padding: 15,\n usePointStyle: true,\n font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\n color: \"#fff\",\n font: {\n size: 14,\n weight: \"bold\",\n family: \"'Vazir', sans-serif\",\n } as const,\n anchor: \"center\" as const, // ← روی مرکز هر تکه\n align: \"center\" as const,\n offset: 20, // فاصله از مرکز (میتونی کم/زیاد کنی)\n formatter: (value: number) => (value === 0 ? \"\" : value),\n },\n },\n };\n\n // کامپوننتی که میخواهید در مرکز نمودار نمایش داده شود\n const CenterComponent = () => {\n return (\n <div\n style={{\n padding: \"10px\",\n borderRadius: \"8px\",\n textAlign: \"center\",\n width: 220,\n }}\n >\n <Image\n alt=\"\"\n width={220}\n height={220}\n src={logoSRC ?? \"/assets/images/pilogo.png\"}\n unoptimized\n />\n </div>\n );\n };\n\n return (\n <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n <Pie\n data={{\n labels: labels,\n datasets: datasets,\n }}\n options={options}\n />\n {!disableLogo && (\n <div\n style={{\n position: \"absolute\",\n top: \"53%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n }}\n >\n <CenterComponent />\n </div>\n )}\n </Box>\n );\n}\n"],"mappings":"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","names":["labels","ChartJS","Tooltip","Legend","Box"]}
|
|
1
|
+
{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","\"use client\";\r\nimport { Chart } from \"react-chartjs-2\";\r\nimport {\r\n Chart as ChartJS,\r\n CategoryScale,\r\n LinearScale,\r\n BarElement,\r\n LineElement,\r\n PointElement,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n LineController,\r\n Chart as ChartType,\r\n} from \"chart.js\";\r\nimport { Box } from \"@mui/material\";\r\n\r\nChartJS.register(\r\n CategoryScale,\r\n LinearScale,\r\n BarElement,\r\n LineElement,\r\n PointElement,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n LineController\r\n);\r\n\r\ninterface Props {\r\n labels: string[];\r\n datasets: {\r\n label: string;\r\n data: (number | null)[];\r\n backgroundColor: string;\r\n borderColor?: string;\r\n borderWidth?: number;\r\n type?: \"line\";\r\n order?: number;\r\n tension?: number;\r\n pointRadius?: number;\r\n fill?: boolean;\r\n }[];\r\n height?: number;\r\n}\r\n/**\r\n * 📊 BarChart — کامپوننت نمودار میلهای (Bar/Combo)\r\n *\r\n * @component BarChart\r\n *\r\n * @param {string[]} labels - آرایهای از برچسبها برای محور افقی (X).\r\n * @param {Array<{\r\n * label: string,\r\n * data: number[],\r\n * backgroundColor: string,\r\n * borderColor?: string,\r\n * borderWidth?: number,\r\n * type?: \"line\",\r\n * order?: number,\r\n * tension?: number,\r\n * pointRadius?: number,\r\n * fill?: boolean\r\n * }>} datasets - آرایهای از آبجکتهای داده برای هر سری نمودار.\r\n * - label: عنوان دادهها (نمایش در legend)\r\n * - data: آرایهای از مقادیر هر سری\r\n * - backgroundColor: رنگ میله یا خط\r\n * - borderColor: (اختیاری) رنگ خط دور میله یا خط\r\n * - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\r\n * - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده میشود (نمودار ترکیبی)\r\n * - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار میگیرد)\r\n * - tension: (اختیاری) میزان خمیدگی خط (برای سریهای خطی)\r\n * - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سریهای خطی)\r\n * - fill: (اختیاری) پر شدن زیر خط (برای سریهای خطی)\r\n *\r\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\r\n *\r\n * @description\r\n * این کامپوننت یک نمودار میلهای (Bar) یا ترکیبی Bar/Line با قابلیت شخصیسازی کامل است.\r\n * - پشتیبانی از فونت وزیر و راستچین\r\n * - ریسپانسیو و مناسب صفحات فارسی\r\n * - امکان نمایش چند سری داده به صورت میلهای و خطی همزمان (Combo)\r\n * - شخصیسازی رنگ، ضخامت، ترتیب و استایل هر سری\r\n *\r\n * @returns {JSX.Element} یک نمودار میلهای یا ترکیبی با دادههای ورودی\r\n *\r\n * @example\r\n * ```jsx\r\n * <BarChart\r\n * labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\r\n * datasets={[\r\n * {\r\n * label: \"فروش\",\r\n * data: [10, 20, 15],\r\n * backgroundColor: \"rgba(75,192,192,0.7)\",\r\n * },\r\n * {\r\n * label: \"میانگین\",\r\n * data: [12, 18, 14],\r\n * borderColor: \"red\",\r\n * backgroundColor: \"transparent\",\r\n * type: \"line\",\r\n * order: 0,\r\n * borderWidth: 3,\r\n * tension: 0.4,\r\n * pointRadius: 4,\r\n * fill: false,\r\n * },\r\n * ]}\r\n * height={400}\r\n * />\r\n * ```\r\n */\r\nexport default function BarChart({ labels, datasets, height }: Props) {\r\n const options = {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n y: {\r\n ticks: {\r\n font: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 14,\r\n },\r\n },\r\n },\r\n x: {\r\n ticks: {\r\n autoSkip: false,\r\n font: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 13,\r\n },\r\n },\r\n },\r\n },\r\n plugins: {\r\n datalabels: {\r\n display: false, // ← غیرفعال\r\n },\r\n tooltip: {\r\n bodyFont: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 14,\r\n },\r\n titleFont: {\r\n family: \"'Vazir', sans-serif\",\r\n size: 16,\r\n },\r\n },\r\n legend: {\r\n labels: {\r\n generateLabels: function (chart: ChartType) {\r\n const labels =\r\n ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\r\n return labels.map((label) => ({\r\n ...label,\r\n text: \" \" + label.text + \" \",\r\n boxWidth: 40,\r\n boxHeight: 20,\r\n }));\r\n },\r\n padding: 15,\r\n usePointStyle: true,\r\n font: {\r\n size: 16,\r\n family: \"'Vazir', sans-serif\",\r\n },\r\n boxWidth: 40,\r\n paddingBottom: 10,\r\n },\r\n },\r\n },\r\n };\r\n\r\n return (\r\n <Box height={height ?? 600}>\r\n <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\r\n </Box>\r\n );\r\n}\r\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n labels: string[];\n datasets: {\n label: string;\n data: number[];\n backgroundColor: string | string[];\n borderWidth?: number;\n }[];\n height?: number;\n disableLogo?: boolean;\n logoSRC?: string;\n showDataLabels?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایرهای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایهای از برچسبها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسبهای دادهها\n * @param {Array<{\n * label: string,\n * data: number[],\n * backgroundColor: string[],\n * borderWidth?: number\n * }>} datasets - آرایهای شامل یک آبجکت داده برای مقداردهی بخشهای نمودار.\n * - label: عنوان دادهها (نمایش در legend)\n * - data: آرایهای از مقادیر هر بخش\n * - backgroundColor: آرایهای از رنگها برای هر بخش\n * - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیشفرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایرهای با قابلیت شخصیسازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n *\n * @returns {JSX.Element} یک نمودار دایرهای با دادههای ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n * labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n * datasets={[\n * {\n * label: \"مقدار\",\n * data: [10, 20, 30],\n * backgroundColor: [\n * \"rgba(75,192,192,1)\",\n * \"rgba(255,99,132,1)\",\n * \"rgba(153,102,255,1)\",\n * ],\n * borderWidth: 2,\n * },\n * ]}\n * />\n * ```\n */\nexport default function PieChart({\n labels,\n datasets,\n height,\n disableLogo,\n logoSRC,\n showDataLabels = false,\n}: Props) {\n const options = {\n responsive: true,\n maintainAspectRatio: false,\n cutout: !disableLogo ? \"59%\" : \"0%\",\n plugins: {\n tooltip: {\n bodyFont: {\n family: \"'Vazir', sans-serif\",\n size: 14,\n },\n titleFont: {\n family: \"'Vazir', sans-serif\",\n size: 16,\n },\n },\n legend: {\n labels: {\n padding: 15,\n usePointStyle: true,\n font: {\n size: 16,\n family: \"'Vazir', sans-serif\",\n },\n boxWidth: 40,\n paddingBottom: 10,\n },\n },\n datalabels: {\n display: showDataLabels,\n color: \"#fff\",\n font: {\n size: 14,\n weight: \"bold\",\n family: \"'Vazir', sans-serif\",\n } as const,\n anchor: \"center\" as const, // ← روی مرکز هر تکه\n align: \"center\" as const,\n offset: 20, // فاصله از مرکز (میتونی کم/زیاد کنی)\n formatter: (value: number) => (value === 0 ? \"\" : value),\n },\n },\n };\n\n // کامپوننتی که میخواهید در مرکز نمودار نمایش داده شود\n const CenterComponent = () => {\n return (\n <div\n style={{\n padding: \"10px\",\n borderRadius: \"8px\",\n textAlign: \"center\",\n width: 220,\n }}\n >\n <Image\n alt=\"\"\n width={220}\n height={220}\n src={logoSRC ?? \"/assets/images/pilogo.png\"}\n unoptimized\n />\n </div>\n );\n };\n\n return (\n <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n <Pie\n data={{\n labels: labels,\n datasets: datasets,\n }}\n options={options}\n />\n {!disableLogo && (\n <div\n style={{\n position: \"absolute\",\n top: \"53%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n }}\n >\n <CenterComponent />\n </div>\n )}\n </Box>\n );\n}\n"],"mappings":"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","names":["labels","ChartJS","Tooltip","Legend","Box"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -706,6 +706,7 @@ function MultipleSelectChip({
|
|
|
706
706
|
inputRef: ref,
|
|
707
707
|
variant,
|
|
708
708
|
placeholder,
|
|
709
|
+
InputLabelProps: { shrink: true },
|
|
709
710
|
InputProps: {
|
|
710
711
|
...params.InputProps,
|
|
711
712
|
endAdornment: /* @__PURE__ */ React3.createElement(React3.Fragment, null, isLoading ? /* @__PURE__ */ React3.createElement(import_material3.CircularProgress, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)
|
|
@@ -1239,8 +1240,7 @@ var JalaliDatePicker = ({
|
|
|
1239
1240
|
maxDate,
|
|
1240
1241
|
minDate,
|
|
1241
1242
|
clear = true,
|
|
1242
|
-
views
|
|
1243
|
-
showArrows = false
|
|
1243
|
+
views
|
|
1244
1244
|
}) => {
|
|
1245
1245
|
const today = (0, import_moment_jalaali.default)();
|
|
1246
1246
|
const customLocaleText = {
|
|
@@ -1251,7 +1251,21 @@ var JalaliDatePicker = ({
|
|
|
1251
1251
|
start: "\u0634\u0631\u0648\u0639",
|
|
1252
1252
|
end: "\u067E\u0627\u06CC\u0627\u0646",
|
|
1253
1253
|
previousMonth: "\u0645\u0627\u0647 \u0642\u0628\u0644",
|
|
1254
|
-
nextMonth: "\u0645\u0627\u0647 \u0628\u0639\u062F"
|
|
1254
|
+
nextMonth: "\u0645\u0627\u0647 \u0628\u0639\u062F",
|
|
1255
|
+
openDatePickerDialogue: (date, utils, formattedDate) => `\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E ${formattedDate ? `(${formattedDate})` : ""}`,
|
|
1256
|
+
openTimePickerDialogue: (date, utils, formattedTime) => `\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646 ${formattedTime ? `(${formattedTime})` : ""}`,
|
|
1257
|
+
selectDate: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E",
|
|
1258
|
+
selectTime: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646",
|
|
1259
|
+
datePickerToolbarTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E",
|
|
1260
|
+
timePickerToolbarTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646",
|
|
1261
|
+
dateTimePickerToolbarTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E \u0648 \u0632\u0645\u0627\u0646",
|
|
1262
|
+
hoursClockNumberText: (hours) => `${hours} \u0633\u0627\u0639\u062A`,
|
|
1263
|
+
minutesClockNumberText: (minutes) => `${minutes} \u062F\u0642\u06CC\u0642\u0647`,
|
|
1264
|
+
secondsClockNumberText: (seconds) => `${seconds} \u062B\u0627\u0646\u06CC\u0647`,
|
|
1265
|
+
calendarWeekNumberHeaderLabel: "\u0647\u0641\u062A\u0647",
|
|
1266
|
+
calendarWeekNumberHeaderText: "#",
|
|
1267
|
+
calendarWeekNumberAriaLabelText: (weekNumber) => `\u0647\u0641\u062A\u0647 ${weekNumber}`,
|
|
1268
|
+
calendarWeekNumberText: (weekNumber) => `${weekNumber}`
|
|
1255
1269
|
};
|
|
1256
1270
|
return /* @__PURE__ */ import_react7.default.createElement(
|
|
1257
1271
|
import_x_date_pickers.LocalizationProvider,
|
|
@@ -1270,8 +1284,9 @@ var JalaliDatePicker = ({
|
|
|
1270
1284
|
e.stopPropagation();
|
|
1271
1285
|
const currentValue = field.value ? (0, import_moment_jalaali.default)(field.value) : (0, import_moment_jalaali.default)();
|
|
1272
1286
|
const previousDate = currentValue.clone().subtract(1, "day");
|
|
1273
|
-
if (minDate && previousDate.isBefore((0, import_moment_jalaali.default)(minDate), "day"))
|
|
1287
|
+
if (minDate && previousDate.isBefore((0, import_moment_jalaali.default)(minDate), "day")) {
|
|
1274
1288
|
return;
|
|
1289
|
+
}
|
|
1275
1290
|
const nowUTC3 = /* @__PURE__ */ new Date();
|
|
1276
1291
|
const iranHour = nowUTC3.getUTCHours();
|
|
1277
1292
|
const iranMinute = nowUTC3.getUTCMinutes();
|
|
@@ -1283,7 +1298,9 @@ var JalaliDatePicker = ({
|
|
|
1283
1298
|
const currentValue = field.value ? (0, import_moment_jalaali.default)(field.value) : (0, import_moment_jalaali.default)();
|
|
1284
1299
|
const nextDate = currentValue.clone().add(1, "day");
|
|
1285
1300
|
const maxDateValue = maxDate ? maxDate : today;
|
|
1286
|
-
if (nextDate.isAfter((0, import_moment_jalaali.default)(maxDateValue), "day"))
|
|
1301
|
+
if (nextDate.isAfter((0, import_moment_jalaali.default)(maxDateValue), "day")) {
|
|
1302
|
+
return;
|
|
1303
|
+
}
|
|
1287
1304
|
const nowUTC3 = /* @__PURE__ */ new Date();
|
|
1288
1305
|
const iranHour = nowUTC3.getUTCHours();
|
|
1289
1306
|
const iranMinute = nowUTC3.getUTCMinutes();
|
|
@@ -1304,6 +1321,22 @@ var JalaliDatePicker = ({
|
|
|
1304
1321
|
value: field.value ? (0, import_moment_jalaali.default)(field.value) : null,
|
|
1305
1322
|
slotProps: {
|
|
1306
1323
|
...clear && !disabled ? { field: { clearable: true } } : {},
|
|
1324
|
+
popper: {
|
|
1325
|
+
modifiers: [
|
|
1326
|
+
{
|
|
1327
|
+
name: "preventOverflow",
|
|
1328
|
+
options: {
|
|
1329
|
+
boundary: "window"
|
|
1330
|
+
}
|
|
1331
|
+
},
|
|
1332
|
+
{
|
|
1333
|
+
name: "flip",
|
|
1334
|
+
options: {
|
|
1335
|
+
fallbackPlacements: ["right", "left", "top"]
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1338
|
+
]
|
|
1339
|
+
},
|
|
1307
1340
|
textField: {
|
|
1308
1341
|
size,
|
|
1309
1342
|
placeholder: field.value || isLoading ? "" : "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E ",
|
|
@@ -1317,7 +1350,7 @@ var JalaliDatePicker = ({
|
|
|
1317
1350
|
style: { cursor: "pointer" }
|
|
1318
1351
|
},
|
|
1319
1352
|
InputProps: {
|
|
1320
|
-
startAdornment:
|
|
1353
|
+
startAdornment: !isLoading && /* @__PURE__ */ import_react7.default.createElement(
|
|
1321
1354
|
import_material9.Box,
|
|
1322
1355
|
{
|
|
1323
1356
|
sx: {
|
|
@@ -1332,12 +1365,14 @@ var JalaliDatePicker = ({
|
|
|
1332
1365
|
{
|
|
1333
1366
|
onClick: handlePreviousDate,
|
|
1334
1367
|
disabled: isLoading || disabled,
|
|
1335
|
-
sx: {
|
|
1368
|
+
sx: {
|
|
1369
|
+
padding: "2px"
|
|
1370
|
+
}
|
|
1336
1371
|
},
|
|
1337
1372
|
/* @__PURE__ */ import_react7.default.createElement(import_md3.MdChevronRight, { size: 26 })
|
|
1338
1373
|
))
|
|
1339
|
-
)
|
|
1340
|
-
endAdornment: isLoading ? /* @__PURE__ */ import_react7.default.createElement(import_CircularProgress.default, { color: "secondary", size: 20 }) :
|
|
1374
|
+
),
|
|
1375
|
+
endAdornment: isLoading ? /* @__PURE__ */ import_react7.default.createElement(import_CircularProgress.default, { color: "secondary", size: 20 }) : disabled ? null : /* @__PURE__ */ import_react7.default.createElement(
|
|
1341
1376
|
import_material9.Box,
|
|
1342
1377
|
{
|
|
1343
1378
|
sx: { display: "flex", alignItems: "center", ml: 1 }
|
|
@@ -1347,11 +1382,13 @@ var JalaliDatePicker = ({
|
|
|
1347
1382
|
{
|
|
1348
1383
|
onClick: handleNextDate,
|
|
1349
1384
|
disabled: isLoading || disabled,
|
|
1350
|
-
sx: {
|
|
1385
|
+
sx: {
|
|
1386
|
+
padding: "2px"
|
|
1387
|
+
}
|
|
1351
1388
|
},
|
|
1352
1389
|
/* @__PURE__ */ import_react7.default.createElement(import_md3.MdChevronLeft, { size: 26 })
|
|
1353
1390
|
))
|
|
1354
|
-
)
|
|
1391
|
+
),
|
|
1355
1392
|
...field.value && {
|
|
1356
1393
|
value: persian ? `${(0, import_moment_jalaali.default)(field.value).format(
|
|
1357
1394
|
"dddd - jDD/jMMMM/jYYYY"
|
|
@@ -1365,17 +1402,22 @@ var JalaliDatePicker = ({
|
|
|
1365
1402
|
}
|
|
1366
1403
|
}
|
|
1367
1404
|
}
|
|
1405
|
+
},
|
|
1406
|
+
actionBar: {
|
|
1407
|
+
actions: ["cancel", "accept"]
|
|
1368
1408
|
}
|
|
1369
1409
|
},
|
|
1370
1410
|
onChange: (value) => {
|
|
1371
|
-
if (value == null)
|
|
1411
|
+
if (value == null) {
|
|
1412
|
+
field.onChange(null);
|
|
1413
|
+
}
|
|
1372
1414
|
},
|
|
1373
1415
|
onAccept: (newValue) => {
|
|
1374
1416
|
if (newValue) {
|
|
1375
1417
|
const currentDate = (0, import_dayjs.default)(newValue);
|
|
1376
1418
|
const nowUTC3 = /* @__PURE__ */ new Date();
|
|
1377
|
-
|
|
1378
|
-
|
|
1419
|
+
let iranHour = nowUTC3.getUTCHours();
|
|
1420
|
+
let iranMinute = nowUTC3.getUTCMinutes();
|
|
1379
1421
|
const dateTimeWithIranTime4 = currentDate.hour(iranHour).minute(iranMinute).second(nowUTC3.getUTCSeconds());
|
|
1380
1422
|
field.onChange(
|
|
1381
1423
|
dateTimeWithIranTime4.format("YYYY-MM-DDTHH:mm:ss")
|
|
@@ -1386,13 +1428,61 @@ var JalaliDatePicker = ({
|
|
|
1386
1428
|
},
|
|
1387
1429
|
sx: {
|
|
1388
1430
|
width: "100%",
|
|
1431
|
+
borderColor: error ? "#D32F2F" : "#C4C4C4",
|
|
1389
1432
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
1390
1433
|
borderColor: error ? "#D32F2F" : "#C4C4C4"
|
|
1391
1434
|
},
|
|
1392
1435
|
"& .MuiInputBase-root": {
|
|
1393
1436
|
height: size === "small" ? 40 : 56
|
|
1394
1437
|
}
|
|
1395
|
-
}
|
|
1438
|
+
},
|
|
1439
|
+
slots: {
|
|
1440
|
+
...!clear && {
|
|
1441
|
+
clearButton: import_react7.default.Fragment,
|
|
1442
|
+
clearIcon: import_react7.default.Fragment
|
|
1443
|
+
},
|
|
1444
|
+
toolbar: () => {
|
|
1445
|
+
const currentDate = (0, import_moment_jalaali.default)(field.value);
|
|
1446
|
+
const formattedDate = currentDate.format("dddd, jDD jMMMM");
|
|
1447
|
+
return /* @__PURE__ */ import_react7.default.createElement(
|
|
1448
|
+
import_material9.Box,
|
|
1449
|
+
{
|
|
1450
|
+
sx: {
|
|
1451
|
+
my: 2,
|
|
1452
|
+
mx: 4
|
|
1453
|
+
}
|
|
1454
|
+
},
|
|
1455
|
+
/* @__PURE__ */ import_react7.default.createElement(import_material9.Typography, { variant: "overline", color: "primary" }, "\u062A\u0627\u0631\u06CC\u062E \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"),
|
|
1456
|
+
/* @__PURE__ */ import_react7.default.createElement(import_material9.Typography, { variant: "h4" }, formattedDate == "Invalid date" ? "" : formattedDate)
|
|
1457
|
+
);
|
|
1458
|
+
},
|
|
1459
|
+
monthButton: (props) => {
|
|
1460
|
+
return /* @__PURE__ */ import_react7.default.createElement(
|
|
1461
|
+
"button",
|
|
1462
|
+
{
|
|
1463
|
+
className: `${props.className}`,
|
|
1464
|
+
style: {
|
|
1465
|
+
width: "80%",
|
|
1466
|
+
padding: "10px",
|
|
1467
|
+
marginBottom: "20px",
|
|
1468
|
+
border: "1px solid #ccc",
|
|
1469
|
+
borderRadius: "12px",
|
|
1470
|
+
backgroundColor: props.disabled ? "#f0f0f0" : "#f0000",
|
|
1471
|
+
fontSize: "14px",
|
|
1472
|
+
cursor: props.disabled ? "default" : "pointer"
|
|
1473
|
+
},
|
|
1474
|
+
disabled: props.disabled,
|
|
1475
|
+
onFocus: props.onFocus,
|
|
1476
|
+
onBlur: props.onBlur,
|
|
1477
|
+
onClick: props.onClick,
|
|
1478
|
+
ref: props.ref
|
|
1479
|
+
},
|
|
1480
|
+
props["aria-label"]
|
|
1481
|
+
);
|
|
1482
|
+
}
|
|
1483
|
+
},
|
|
1484
|
+
minDate: minDate ? minDate : null,
|
|
1485
|
+
maxDate: maxDate ? maxDate : today
|
|
1396
1486
|
}
|
|
1397
1487
|
), error && /* @__PURE__ */ import_react7.default.createElement(import_material9.Typography, { fontSize: 13, color: "error", sx: { mt: 0.6, ml: 1 } }, error.message));
|
|
1398
1488
|
}
|