@esic-lab/data-core-ui 0.0.36 → 0.0.38
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/index.d.mts +529 -0
- package/dist/index.d.ts +1 -45
- package/dist/index.js +590 -867
- package/dist/index.mjs +3688 -0
- package/package.json +2 -11
package/dist/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -7,6 +8,10 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
|
7
8
|
var __commonJS = (cb, mod) => function __require() {
|
|
8
9
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
10
|
};
|
|
11
|
+
var __export = (target, all) => {
|
|
12
|
+
for (var name in all)
|
|
13
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
14
|
+
};
|
|
10
15
|
var __copyProps = (to, from, except, desc) => {
|
|
11
16
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
17
|
for (let key of __getOwnPropNames(from))
|
|
@@ -23,14 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
23
28
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
29
|
mod
|
|
25
30
|
));
|
|
31
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
26
32
|
|
|
27
33
|
// node_modules/dayjs/dayjs.min.js
|
|
28
34
|
var require_dayjs_min = __commonJS({
|
|
29
|
-
"node_modules/dayjs/dayjs.min.js"(
|
|
35
|
+
"node_modules/dayjs/dayjs.min.js"(exports2, module2) {
|
|
30
36
|
"use strict";
|
|
31
37
|
!(function(t, e) {
|
|
32
|
-
"object" == typeof
|
|
33
|
-
})(
|
|
38
|
+
"object" == typeof exports2 && "undefined" != typeof module2 ? module2.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs = e();
|
|
39
|
+
})(exports2, (function() {
|
|
34
40
|
"use strict";
|
|
35
41
|
var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
|
|
36
42
|
var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
|
|
@@ -307,11 +313,11 @@ var require_dayjs_min = __commonJS({
|
|
|
307
313
|
|
|
308
314
|
// node_modules/dayjs/locale/th.js
|
|
309
315
|
var require_th = __commonJS({
|
|
310
|
-
"node_modules/dayjs/locale/th.js"(
|
|
316
|
+
"node_modules/dayjs/locale/th.js"(exports2, module2) {
|
|
311
317
|
"use strict";
|
|
312
318
|
!(function(_, e) {
|
|
313
|
-
"object" == typeof
|
|
314
|
-
})(
|
|
319
|
+
"object" == typeof exports2 && "undefined" != typeof module2 ? module2.exports = e(require_dayjs_min()) : "function" == typeof define && define.amd ? define(["dayjs"], e) : (_ = "undefined" != typeof globalThis ? globalThis : _ || self).dayjs_locale_th = e(_.dayjs);
|
|
320
|
+
})(exports2, (function(_) {
|
|
315
321
|
"use strict";
|
|
316
322
|
function e(_2) {
|
|
317
323
|
return _2 && "object" == typeof _2 && "default" in _2 ? _2 : { default: _2 };
|
|
@@ -326,11 +332,11 @@ var require_th = __commonJS({
|
|
|
326
332
|
|
|
327
333
|
// node_modules/dayjs/plugin/buddhistEra.js
|
|
328
334
|
var require_buddhistEra = __commonJS({
|
|
329
|
-
"node_modules/dayjs/plugin/buddhistEra.js"(
|
|
335
|
+
"node_modules/dayjs/plugin/buddhistEra.js"(exports2, module2) {
|
|
330
336
|
"use strict";
|
|
331
337
|
!(function(t, e) {
|
|
332
|
-
"object" == typeof
|
|
333
|
-
})(
|
|
338
|
+
"object" == typeof exports2 && "undefined" != typeof module2 ? module2.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs_plugin_buddhistEra = e();
|
|
339
|
+
})(exports2, (function() {
|
|
334
340
|
"use strict";
|
|
335
341
|
return function(t, e) {
|
|
336
342
|
var n = e.prototype, i = n.format;
|
|
@@ -346,136 +352,59 @@ var require_buddhistEra = __commonJS({
|
|
|
346
352
|
}
|
|
347
353
|
});
|
|
348
354
|
|
|
349
|
-
//
|
|
350
|
-
var
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
if (this.day = n2[0], t2) for (var r2 = 1; r2 <= 31; r2 += 1) t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2);
|
|
398
|
-
}], w: [i, f("week")], ww: [r, f("week")], M: [i, f("month")], MM: [r, f("month")], MMM: [o, function(e2) {
|
|
399
|
-
var t2 = u("months"), n2 = (u("monthsShort") || t2.map((function(e3) {
|
|
400
|
-
return e3.slice(0, 3);
|
|
401
|
-
}))).indexOf(e2) + 1;
|
|
402
|
-
if (n2 < 1) throw new Error();
|
|
403
|
-
this.month = n2 % 12 || n2;
|
|
404
|
-
}], MMMM: [o, function(e2) {
|
|
405
|
-
var t2 = u("months").indexOf(e2) + 1;
|
|
406
|
-
if (t2 < 1) throw new Error();
|
|
407
|
-
this.month = t2 % 12 || t2;
|
|
408
|
-
}], Y: [/[+-]?\d+/, f("year")], YY: [r, function(e2) {
|
|
409
|
-
this.year = a(e2);
|
|
410
|
-
}], YYYY: [/\d{4}/, f("year")], Z: h, ZZ: h };
|
|
411
|
-
function l(n2) {
|
|
412
|
-
var r2, i2;
|
|
413
|
-
r2 = n2, i2 = s && s.formats;
|
|
414
|
-
for (var o2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (function(t2, n3, r3) {
|
|
415
|
-
var o3 = r3 && r3.toUpperCase();
|
|
416
|
-
return n3 || i2[r3] || e[r3] || i2[o3].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (function(e2, t3, n4) {
|
|
417
|
-
return t3 || n4.slice(1);
|
|
418
|
-
}));
|
|
419
|
-
}))).match(t), a2 = o2.length, f2 = 0; f2 < a2; f2 += 1) {
|
|
420
|
-
var h2 = o2[f2], u2 = c[h2], d2 = u2 && u2[0], l2 = u2 && u2[1];
|
|
421
|
-
o2[f2] = l2 ? { regex: d2, parser: l2 } : h2.replace(/^\[|\]$/g, "");
|
|
422
|
-
}
|
|
423
|
-
return function(e2) {
|
|
424
|
-
for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) {
|
|
425
|
-
var i3 = o2[n3];
|
|
426
|
-
if ("string" == typeof i3) r3 += i3.length;
|
|
427
|
-
else {
|
|
428
|
-
var s2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = s2.exec(h3)[0];
|
|
429
|
-
f3.call(t2, u3), e2 = e2.replace(u3, "");
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
return (function(e3) {
|
|
433
|
-
var t3 = e3.afternoon;
|
|
434
|
-
if (void 0 !== t3) {
|
|
435
|
-
var n4 = e3.hours;
|
|
436
|
-
t3 ? n4 < 12 && (e3.hours += 12) : 12 === n4 && (e3.hours = 0), delete e3.afternoon;
|
|
437
|
-
}
|
|
438
|
-
})(t2), t2;
|
|
439
|
-
};
|
|
440
|
-
}
|
|
441
|
-
return function(e2, t2, n2) {
|
|
442
|
-
n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (a = e2.parseTwoDigitYear);
|
|
443
|
-
var r2 = t2.prototype, i2 = r2.parse;
|
|
444
|
-
r2.parse = function(e3) {
|
|
445
|
-
var t3 = e3.date, r3 = e3.utc, o2 = e3.args;
|
|
446
|
-
this.$u = r3;
|
|
447
|
-
var a2 = o2[1];
|
|
448
|
-
if ("string" == typeof a2) {
|
|
449
|
-
var f2 = true === o2[2], h2 = true === o2[3], u2 = f2 || h2, d2 = o2[2];
|
|
450
|
-
h2 && (d2 = o2[2]), s = this.$locale(), !f2 && d2 && (s = n2.Ls[d2]), this.$d = (function(e4, t4, n3, r4) {
|
|
451
|
-
try {
|
|
452
|
-
if (["x", "X"].indexOf(t4) > -1) return new Date(("X" === t4 ? 1e3 : 1) * e4);
|
|
453
|
-
var i3 = l(t4)(e4), o3 = i3.year, s2 = i3.month, a3 = i3.day, f3 = i3.hours, h3 = i3.minutes, u3 = i3.seconds, d3 = i3.milliseconds, c3 = i3.zone, m2 = i3.week, M2 = /* @__PURE__ */ new Date(), Y = a3 || (o3 || s2 ? 1 : M2.getDate()), p = o3 || M2.getFullYear(), v = 0;
|
|
454
|
-
o3 && !s2 || (v = s2 > 0 ? s2 - 1 : M2.getMonth());
|
|
455
|
-
var D, w = f3 || 0, g = h3 || 0, y = u3 || 0, L = d3 || 0;
|
|
456
|
-
return c3 ? new Date(Date.UTC(p, v, Y, w, g, y, L + 60 * c3.offset * 1e3)) : n3 ? new Date(Date.UTC(p, v, Y, w, g, y, L)) : (D = new Date(p, v, Y, w, g, y, L), m2 && (D = r4(D).week(m2).toDate()), D);
|
|
457
|
-
} catch (e5) {
|
|
458
|
-
return /* @__PURE__ */ new Date("");
|
|
459
|
-
}
|
|
460
|
-
})(t3, a2, r3, n2), this.init(), d2 && true !== d2 && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = /* @__PURE__ */ new Date("")), s = {};
|
|
461
|
-
} else if (a2 instanceof Array) for (var c2 = a2.length, m = 1; m <= c2; m += 1) {
|
|
462
|
-
o2[1] = a2[m - 1];
|
|
463
|
-
var M = n2.apply(this, o2);
|
|
464
|
-
if (M.isValid()) {
|
|
465
|
-
this.$d = M.$d, this.$L = M.$L, this.init();
|
|
466
|
-
break;
|
|
467
|
-
}
|
|
468
|
-
m === c2 && (this.$d = /* @__PURE__ */ new Date(""));
|
|
469
|
-
}
|
|
470
|
-
else i2.call(this, e3);
|
|
471
|
-
};
|
|
472
|
-
};
|
|
473
|
-
}));
|
|
474
|
-
}
|
|
355
|
+
// src/index.ts
|
|
356
|
+
var index_exports = {};
|
|
357
|
+
__export(index_exports, {
|
|
358
|
+
AntDModal: () => AntDModal,
|
|
359
|
+
AntDataTable: () => AntDataTable,
|
|
360
|
+
Breadcrumbs: () => Breadcrumbs,
|
|
361
|
+
Calendar: () => Calendar,
|
|
362
|
+
Checkbox: () => Checkbox,
|
|
363
|
+
CheckboxGroup: () => CheckboxGroup,
|
|
364
|
+
ColorPalettePickerBasic: () => ColorPalettePickerBasic,
|
|
365
|
+
ColorPickerBasic: () => ColorPickerBasic,
|
|
366
|
+
DataTable: () => DataTable,
|
|
367
|
+
DatePickerBasic: () => DatePickerBasic,
|
|
368
|
+
FileUploader: () => FileUploader,
|
|
369
|
+
FilterPopUp: () => FilterPopUp,
|
|
370
|
+
GhostButton: () => GhostButton,
|
|
371
|
+
HeadingPage: () => HeadingPage,
|
|
372
|
+
Indicator: () => Indicator,
|
|
373
|
+
InputField: () => InputField,
|
|
374
|
+
InputFieldNumber: () => InputFieldNumber,
|
|
375
|
+
KpiSection: () => KpiSection,
|
|
376
|
+
Loader: () => Loader,
|
|
377
|
+
MenuNavBar: () => MenuNavBar,
|
|
378
|
+
PrimaryButton: () => PrimaryButton,
|
|
379
|
+
ProgressBar: () => ProgressBar,
|
|
380
|
+
Radio: () => Radio,
|
|
381
|
+
RadioGroup: () => RadioGroup,
|
|
382
|
+
SecondaryButton: () => SecondaryButton,
|
|
383
|
+
SelectCustom: () => SelectCustom,
|
|
384
|
+
SelectField: () => SelectField,
|
|
385
|
+
SelectFieldGroup: () => SelectFieldGroup,
|
|
386
|
+
SelectFieldStatus: () => SelectFieldStatus,
|
|
387
|
+
SelectFieldStatusReport: () => SelectFieldStatusReport,
|
|
388
|
+
SelectFieldTag: () => SelectFieldTag,
|
|
389
|
+
Sidebar: () => Sidebar,
|
|
390
|
+
SortFilter: () => SortFilter,
|
|
391
|
+
Switch: () => Switch,
|
|
392
|
+
SwitchSelect: () => SwitchSelect,
|
|
393
|
+
TabSelectionButton: () => TabSelectionButton,
|
|
394
|
+
TextAreaInput: () => TextAreaInput,
|
|
395
|
+
TextInput: () => TextInput,
|
|
396
|
+
TopNavBar: () => TopNavBar,
|
|
397
|
+
messageError: () => messageError,
|
|
398
|
+
messageInfo: () => messageInfo,
|
|
399
|
+
messageLoading: () => messageLoading,
|
|
400
|
+
messageSuccess: () => messageSuccess,
|
|
401
|
+
messageWarning: () => messageWarning,
|
|
402
|
+
setMessageApi: () => setMessageApi
|
|
475
403
|
});
|
|
404
|
+
module.exports = __toCommonJS(index_exports);
|
|
476
405
|
|
|
477
406
|
// src/Button/PrimaryButton/PrimaryButton.tsx
|
|
478
|
-
|
|
407
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
479
408
|
function PrimaryButton({
|
|
480
409
|
title,
|
|
481
410
|
onClick,
|
|
@@ -485,7 +414,7 @@ function PrimaryButton({
|
|
|
485
414
|
textColor = "black",
|
|
486
415
|
disabled
|
|
487
416
|
}) {
|
|
488
|
-
return /* @__PURE__ */ jsx(
|
|
417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
489
418
|
"button",
|
|
490
419
|
{
|
|
491
420
|
onClick,
|
|
@@ -493,57 +422,57 @@ function PrimaryButton({
|
|
|
493
422
|
className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] body-1 transition
|
|
494
423
|
${disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : `${bgColor} text-${textColor} cursor-pointer
|
|
495
424
|
hover:brightness-95 active:brightness-90`}`,
|
|
496
|
-
children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-[10px]", children: [
|
|
497
|
-
iconLeft && /* @__PURE__ */ jsx("div", { children: iconLeft }),
|
|
425
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
|
|
426
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: iconLeft }),
|
|
498
427
|
title,
|
|
499
|
-
iconRight && /* @__PURE__ */ jsx("div", { children: iconRight })
|
|
428
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: iconRight })
|
|
500
429
|
] })
|
|
501
430
|
}
|
|
502
431
|
);
|
|
503
432
|
}
|
|
504
433
|
|
|
505
434
|
// src/Button/SecondaryButton/SecondaryButton.tsx
|
|
506
|
-
|
|
435
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
507
436
|
function SecondaryButton({ title, onClick, iconLeft, iconRight, disabled }) {
|
|
508
|
-
return /* @__PURE__ */
|
|
437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
509
438
|
"button",
|
|
510
439
|
{
|
|
511
440
|
onClick,
|
|
512
441
|
disabled,
|
|
513
442
|
className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] body-1 transition ${disabled ? "text-gray-400 border-gray-400 bg-gray-100 cursor-not-allowed" : "cursor-pointer bg-white border-black text-black hover:bg-gray-100 active:bg-gray-200"}`,
|
|
514
|
-
children: /* @__PURE__ */
|
|
515
|
-
iconLeft && /* @__PURE__ */
|
|
443
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
|
|
444
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: iconLeft }),
|
|
516
445
|
title,
|
|
517
|
-
iconRight && /* @__PURE__ */
|
|
446
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: iconRight })
|
|
518
447
|
] })
|
|
519
448
|
}
|
|
520
449
|
);
|
|
521
450
|
}
|
|
522
451
|
|
|
523
452
|
// src/Button/GhostButton/GhostButton.tsx
|
|
524
|
-
|
|
453
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
525
454
|
function GhostButton({ title, onClick, iconLeft, iconRight, disabled }) {
|
|
526
|
-
return /* @__PURE__ */
|
|
455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
527
456
|
"button",
|
|
528
457
|
{
|
|
529
458
|
onClick,
|
|
530
459
|
disabled,
|
|
531
460
|
className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] body-1 transition
|
|
532
461
|
${disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "bg-[#E9E9E9] cursor-pointer hover:bg-[#d6d6d6] active:bg-[#c4c4c4]"}`,
|
|
533
|
-
children: /* @__PURE__ */
|
|
534
|
-
iconLeft && /* @__PURE__ */
|
|
462
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
|
|
463
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: iconLeft }),
|
|
535
464
|
title,
|
|
536
|
-
iconRight && /* @__PURE__ */
|
|
465
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: iconRight })
|
|
537
466
|
] })
|
|
538
467
|
}
|
|
539
468
|
);
|
|
540
469
|
}
|
|
541
470
|
|
|
542
471
|
// src/Button/TabSelectionButton/TabSelectionButton.tsx
|
|
543
|
-
|
|
472
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
544
473
|
var TabSelectionButton = ({ title, now, onClickGoto }) => {
|
|
545
|
-
return /* @__PURE__ */
|
|
546
|
-
title.map((text) => /* @__PURE__ */
|
|
474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex subtitle-2", children: [
|
|
475
|
+
title.map((text) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
547
476
|
"button",
|
|
548
477
|
{
|
|
549
478
|
onClick: () => onClickGoto(text.path),
|
|
@@ -551,14 +480,14 @@ var TabSelectionButton = ({ title, now, onClickGoto }) => {
|
|
|
551
480
|
children: text.name
|
|
552
481
|
}
|
|
553
482
|
)),
|
|
554
|
-
/* @__PURE__ */
|
|
483
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-b-gray-200 border-b-2 w-full" })
|
|
555
484
|
] });
|
|
556
485
|
};
|
|
557
486
|
|
|
558
487
|
// src/Loader/Loader/Loader.tsx
|
|
559
|
-
|
|
488
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
560
489
|
function Loader({ size = 25, color = "#000000" }) {
|
|
561
|
-
return /* @__PURE__ */
|
|
490
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
562
491
|
"div",
|
|
563
492
|
{
|
|
564
493
|
style: {
|
|
@@ -575,15 +504,15 @@ function Loader({ size = 25, color = "#000000" }) {
|
|
|
575
504
|
}
|
|
576
505
|
|
|
577
506
|
// src/Checkbox/Checkbox/Checkbox.tsx
|
|
578
|
-
|
|
579
|
-
|
|
507
|
+
var import_icons_react = require("@tabler/icons-react");
|
|
508
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
580
509
|
function Checkbox({ label, checked, onChange, disabled }) {
|
|
581
510
|
const handleClick = () => {
|
|
582
511
|
if (!disabled) {
|
|
583
512
|
onChange(!checked);
|
|
584
513
|
}
|
|
585
514
|
};
|
|
586
|
-
return /* @__PURE__ */
|
|
515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
587
516
|
"div",
|
|
588
517
|
{
|
|
589
518
|
className: `flex gap-[10px] items-center
|
|
@@ -591,32 +520,32 @@ function Checkbox({ label, checked, onChange, disabled }) {
|
|
|
591
520
|
"aria-disabled": disabled,
|
|
592
521
|
onClick: handleClick,
|
|
593
522
|
children: [
|
|
594
|
-
/* @__PURE__ */
|
|
523
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
595
524
|
"div",
|
|
596
525
|
{
|
|
597
526
|
className: `flex justify-center items-center border-[1px] border-black w-[24px] h-[24px] rounded-[8px] transition-colors duration-100
|
|
598
527
|
${checked ? "bg-black text-white" : "bg-white text-black"}
|
|
599
528
|
${disabled ? "pointer-events-none" : ""}`,
|
|
600
|
-
children: /* @__PURE__ */
|
|
529
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
601
530
|
"span",
|
|
602
531
|
{
|
|
603
532
|
className: `flex justify-center items-center transition-transform duration-150
|
|
604
533
|
${checked ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
|
|
605
|
-
children: /* @__PURE__ */
|
|
534
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_react.IconCheck, { size: 20 })
|
|
606
535
|
}
|
|
607
536
|
)
|
|
608
537
|
}
|
|
609
538
|
),
|
|
610
|
-
label && /* @__PURE__ */
|
|
539
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "body-1 select-none", children: label })
|
|
611
540
|
]
|
|
612
541
|
}
|
|
613
542
|
);
|
|
614
543
|
}
|
|
615
544
|
|
|
616
545
|
// src/Checkbox/CheckboxGroup/CheckboxGroup.tsx
|
|
617
|
-
|
|
546
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
618
547
|
function CheckboxGroup({ options, onChange, alignment = "vertical" }) {
|
|
619
|
-
return /* @__PURE__ */
|
|
548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `flex gap-4 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
620
549
|
Checkbox,
|
|
621
550
|
{
|
|
622
551
|
checked: opt.checked,
|
|
@@ -629,14 +558,14 @@ function CheckboxGroup({ options, onChange, alignment = "vertical" }) {
|
|
|
629
558
|
}
|
|
630
559
|
|
|
631
560
|
// src/Radio/Radio/Radio.tsx
|
|
632
|
-
|
|
561
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
633
562
|
function Radio({ selected, onChange, disabled }) {
|
|
634
563
|
const handleClick = () => {
|
|
635
564
|
if (!disabled) {
|
|
636
565
|
onChange(!selected);
|
|
637
566
|
}
|
|
638
567
|
};
|
|
639
|
-
return /* @__PURE__ */
|
|
568
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
640
569
|
"div",
|
|
641
570
|
{
|
|
642
571
|
className: `
|
|
@@ -645,31 +574,31 @@ function Radio({ selected, onChange, disabled }) {
|
|
|
645
574
|
`,
|
|
646
575
|
onClick: handleClick,
|
|
647
576
|
"aria-disabled": disabled,
|
|
648
|
-
children: selected && /* @__PURE__ */
|
|
577
|
+
children: selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `bg-black w-[10px] h-[10px] rounded-full transition-all duration-300` })
|
|
649
578
|
}
|
|
650
579
|
);
|
|
651
580
|
}
|
|
652
581
|
|
|
653
582
|
// src/Radio/RadioGroup/RadioGroup.tsx
|
|
654
|
-
|
|
583
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
655
584
|
function RadioGroup({ options, value, onChange, alignment = "horizontal" }) {
|
|
656
|
-
return /* @__PURE__ */
|
|
657
|
-
/* @__PURE__ */
|
|
658
|
-
/* @__PURE__ */
|
|
585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
|
|
586
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value), disabled: opt.disabled }),
|
|
587
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `body-1 ${opt.disabled ? "text-gray-400 cursor-not-allowed" : ""}`, children: opt.label })
|
|
659
588
|
] }, opt.value)) });
|
|
660
589
|
}
|
|
661
590
|
|
|
662
591
|
// src/Switch/Switch/Switch.tsx
|
|
663
|
-
|
|
592
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
664
593
|
function Switch({ label, checked, onChange, disabled }) {
|
|
665
594
|
const handleClick = () => {
|
|
666
595
|
if (!disabled) {
|
|
667
596
|
onChange(!checked);
|
|
668
597
|
}
|
|
669
598
|
};
|
|
670
|
-
return /* @__PURE__ */
|
|
671
|
-
label && /* @__PURE__ */
|
|
672
|
-
/* @__PURE__ */
|
|
599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-[10px]", children: [
|
|
600
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `body-1 ${disabled ? "opacity-50 select-none" : ""}`, children: label }),
|
|
601
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
673
602
|
"button",
|
|
674
603
|
{
|
|
675
604
|
type: "button",
|
|
@@ -681,7 +610,7 @@ function Switch({ label, checked, onChange, disabled }) {
|
|
|
681
610
|
${checked ? "bg-blue-500" : "bg-gray-300"}
|
|
682
611
|
${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
|
|
683
612
|
`,
|
|
684
|
-
children: /* @__PURE__ */
|
|
613
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
685
614
|
"div",
|
|
686
615
|
{
|
|
687
616
|
className: `bg-white w-5 h-5 rounded-full shadow-md transform transition-transform duration-300
|
|
@@ -694,7 +623,7 @@ function Switch({ label, checked, onChange, disabled }) {
|
|
|
694
623
|
}
|
|
695
624
|
|
|
696
625
|
// src/Switch/SwitchSelect/SwitchSelect.tsx
|
|
697
|
-
|
|
626
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
698
627
|
function SwitchSelect({
|
|
699
628
|
option,
|
|
700
629
|
onClick,
|
|
@@ -703,13 +632,13 @@ function SwitchSelect({
|
|
|
703
632
|
required,
|
|
704
633
|
color
|
|
705
634
|
}) {
|
|
706
|
-
return /* @__PURE__ */
|
|
707
|
-
label && /* @__PURE__ */
|
|
635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col container-input", children: [
|
|
636
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: `body-1`, children: [
|
|
708
637
|
label,
|
|
709
638
|
" ",
|
|
710
|
-
required && /* @__PURE__ */
|
|
639
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-red-500", children: "*" })
|
|
711
640
|
] }),
|
|
712
|
-
/* @__PURE__ */
|
|
641
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex", children: option.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
713
642
|
"button",
|
|
714
643
|
{
|
|
715
644
|
onClick: () => onClick(item.value),
|
|
@@ -726,22 +655,22 @@ function SwitchSelect({
|
|
|
726
655
|
}
|
|
727
656
|
|
|
728
657
|
// src/NavBar/MenuNavBar/MenuNavBar.tsx
|
|
729
|
-
|
|
658
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
730
659
|
function MenuNavBar({ menus, onClick }) {
|
|
731
|
-
return /* @__PURE__ */
|
|
732
|
-
/* @__PURE__ */
|
|
733
|
-
menu?.subMenus.map((subMenu) => /* @__PURE__ */
|
|
660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
|
|
661
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
|
|
662
|
+
menu?.subMenus.map((subMenu) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
734
663
|
"div",
|
|
735
664
|
{
|
|
736
665
|
className: "group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer hover:bg-red-100 active:bg-primary-500 hover:text-white active:text-white",
|
|
737
666
|
onClick: () => onClick(subMenu.path),
|
|
738
667
|
children: [
|
|
739
|
-
/* @__PURE__ */
|
|
740
|
-
subMenu.icon && /* @__PURE__ */
|
|
741
|
-
subMenu.iconActive && /* @__PURE__ */
|
|
668
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
|
|
669
|
+
subMenu.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
|
|
670
|
+
subMenu.iconActive && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "hidden group-active:block", children: subMenu.iconActive })
|
|
742
671
|
] }),
|
|
743
672
|
subMenu.title,
|
|
744
|
-
/* @__PURE__ */
|
|
673
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
|
|
745
674
|
]
|
|
746
675
|
},
|
|
747
676
|
`sub_${subMenu.title}`
|
|
@@ -750,56 +679,56 @@ function MenuNavBar({ menus, onClick }) {
|
|
|
750
679
|
}
|
|
751
680
|
|
|
752
681
|
// src/NavBar/MenuNavBar/Sidebar.tsx
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
var SidebarContext = createContext({ expanded: false });
|
|
682
|
+
var import_icons_react2 = require("@tabler/icons-react");
|
|
683
|
+
var import_react = require("react");
|
|
684
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
685
|
+
var SidebarContext = (0, import_react.createContext)({ expanded: false });
|
|
757
686
|
function Sidebar({ children, logo }) {
|
|
758
|
-
const [expanded, setExpanded] = useState(true);
|
|
759
|
-
return /* @__PURE__ */
|
|
760
|
-
/* @__PURE__ */
|
|
761
|
-
expanded && logo && /* @__PURE__ */
|
|
762
|
-
/* @__PURE__ */
|
|
687
|
+
const [expanded, setExpanded] = (0, import_react.useState)(true);
|
|
688
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("aside", { className: "h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
|
|
689
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
|
|
690
|
+
expanded && logo && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logo, width: 120, className: "ml-auto" }),
|
|
691
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
763
692
|
"button",
|
|
764
693
|
{
|
|
765
694
|
className: "p-1.5 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer ml-auto",
|
|
766
695
|
onClick: () => setExpanded((curr) => !curr),
|
|
767
|
-
children: expanded ? /* @__PURE__ */
|
|
696
|
+
children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons_react2.IconChevronLeftPipe, {}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons_react2.IconChevronRightPipe, {})
|
|
768
697
|
}
|
|
769
698
|
)
|
|
770
699
|
] }),
|
|
771
|
-
/* @__PURE__ */
|
|
700
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex-1 px-3", children }) })
|
|
772
701
|
] }) });
|
|
773
702
|
}
|
|
774
703
|
|
|
775
704
|
// src/NavBar/TopNavBar/TopNavBar.tsx
|
|
776
|
-
|
|
777
|
-
|
|
705
|
+
var import_icons_react3 = require("@tabler/icons-react");
|
|
706
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
778
707
|
function TopNavBar({ onClickNoti, logo }) {
|
|
779
|
-
return /* @__PURE__ */
|
|
780
|
-
/* @__PURE__ */
|
|
708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-full h-full flex", children: [
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
|
|
781
710
|
logo,
|
|
782
|
-
/* @__PURE__ */
|
|
711
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "subtitle-1", children: "Project Management" })
|
|
783
712
|
] }),
|
|
784
|
-
/* @__PURE__ */
|
|
785
|
-
/* @__PURE__ */
|
|
786
|
-
/* @__PURE__ */
|
|
787
|
-
/* @__PURE__ */
|
|
713
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
|
|
714
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: "Search" }),
|
|
715
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_react3.IconBellRinging, { onClick: onClickNoti, className: "cursor-pointer" }) }),
|
|
716
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-[40px] h-[40px] bg-gray-400 rounded-full cursor-pointer" })
|
|
788
717
|
] })
|
|
789
718
|
] });
|
|
790
719
|
}
|
|
791
720
|
|
|
792
721
|
// src/Table/DataTable/DataTable.tsx
|
|
793
|
-
|
|
794
|
-
|
|
722
|
+
var import_icons_react5 = require("@tabler/icons-react");
|
|
723
|
+
var import_react3 = require("react");
|
|
795
724
|
|
|
796
725
|
// src/Table/Pagination/Pagination.tsx
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
726
|
+
var import_icons_react4 = require("@tabler/icons-react");
|
|
727
|
+
var import_react2 = require("react");
|
|
728
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
800
729
|
function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
|
|
801
730
|
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
802
|
-
const getPages = useMemo(() => {
|
|
731
|
+
const getPages = (0, import_react2.useMemo)(() => {
|
|
803
732
|
if (totalPages <= 7) {
|
|
804
733
|
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
805
734
|
}
|
|
@@ -820,21 +749,21 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
|
|
|
820
749
|
return pages;
|
|
821
750
|
}, [totalPages, currentPage]);
|
|
822
751
|
if (totalPages <= 1) return null;
|
|
823
|
-
return /* @__PURE__ */
|
|
824
|
-
/* @__PURE__ */
|
|
752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-center gap-2 mt-4 body-1", children: [
|
|
753
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
825
754
|
"button",
|
|
826
755
|
{
|
|
827
756
|
className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
|
|
828
757
|
disabled: currentPage === 1,
|
|
829
758
|
onClick: () => onPageChange(currentPage - 1),
|
|
830
759
|
children: [
|
|
831
|
-
/* @__PURE__ */
|
|
760
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_react4.IconArrowLeft, {}),
|
|
832
761
|
"\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A"
|
|
833
762
|
]
|
|
834
763
|
}
|
|
835
764
|
),
|
|
836
765
|
getPages.map(
|
|
837
|
-
(page, i) => typeof page === "string" ? /* @__PURE__ */
|
|
766
|
+
(page, i) => typeof page === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "px-2", children: page }, i) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
838
767
|
"button",
|
|
839
768
|
{
|
|
840
769
|
className: `w-[32px] h-[32px] rounded-[8px] px-3 py-1 cursor-pointer
|
|
@@ -845,7 +774,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
|
|
|
845
774
|
i
|
|
846
775
|
)
|
|
847
776
|
),
|
|
848
|
-
/* @__PURE__ */
|
|
777
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
849
778
|
"button",
|
|
850
779
|
{
|
|
851
780
|
className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
|
|
@@ -853,7 +782,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
|
|
|
853
782
|
onClick: () => onPageChange(currentPage + 1),
|
|
854
783
|
children: [
|
|
855
784
|
"\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
856
|
-
/* @__PURE__ */
|
|
785
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_react4.IconArrowRight, {})
|
|
857
786
|
]
|
|
858
787
|
}
|
|
859
788
|
)
|
|
@@ -861,43 +790,43 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
|
|
|
861
790
|
}
|
|
862
791
|
|
|
863
792
|
// src/Table/DataTable/DataTable.tsx
|
|
864
|
-
|
|
793
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
865
794
|
function DataTable({ columns, data, onSort, isLoading }) {
|
|
866
795
|
const cols = Math.max(1, columns.length);
|
|
867
796
|
const gridClass = "grid [grid-template-columns:repeat(var(--cols),minmax(0,1fr))]";
|
|
868
|
-
const [sortConfig, setSortConfig] =
|
|
869
|
-
const [page, setPage] =
|
|
797
|
+
const [sortConfig, setSortConfig] = (0, import_react3.useState)(null);
|
|
798
|
+
const [page, setPage] = (0, import_react3.useState)(1);
|
|
870
799
|
const onSorting = (config) => {
|
|
871
800
|
if (config) {
|
|
872
801
|
setSortConfig({ key: config?.key, direction: config?.direction });
|
|
873
802
|
onSort();
|
|
874
803
|
}
|
|
875
804
|
};
|
|
876
|
-
return /* @__PURE__ */
|
|
877
|
-
/* @__PURE__ */
|
|
805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "border rounded-md w-full h-full", children: [
|
|
806
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => {
|
|
878
807
|
const isActive = sortConfig?.key === col.accessor;
|
|
879
808
|
const direction = isActive ? sortConfig?.direction : null;
|
|
880
|
-
return /* @__PURE__ */
|
|
809
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-[8px] py-[8px] px-[16px] body-4 truncate", children: [
|
|
881
810
|
col.header,
|
|
882
|
-
col.sortable && /* @__PURE__ */
|
|
883
|
-
direction === null && /* @__PURE__ */
|
|
884
|
-
IconSelector,
|
|
811
|
+
col.sortable && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
812
|
+
direction === null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
813
|
+
import_icons_react5.IconSelector,
|
|
885
814
|
{
|
|
886
815
|
size: 15,
|
|
887
816
|
className: "hover:text-red-400 cursor-pointer",
|
|
888
817
|
onClick: () => onSorting({ key: col.accessor, direction: "asc" })
|
|
889
818
|
}
|
|
890
819
|
),
|
|
891
|
-
direction === "asc" && /* @__PURE__ */
|
|
892
|
-
IconSortAscending,
|
|
820
|
+
direction === "asc" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
821
|
+
import_icons_react5.IconSortAscending,
|
|
893
822
|
{
|
|
894
823
|
size: 15,
|
|
895
824
|
className: "cursor-pointer text-red-500",
|
|
896
825
|
onClick: () => onSorting({ key: col.accessor, direction: "desc" })
|
|
897
826
|
}
|
|
898
827
|
),
|
|
899
|
-
direction === "desc" && /* @__PURE__ */
|
|
900
|
-
IconSortDescending,
|
|
828
|
+
direction === "desc" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
829
|
+
import_icons_react5.IconSortDescending,
|
|
901
830
|
{
|
|
902
831
|
size: 15,
|
|
903
832
|
className: "cursor-pointer text-red-500",
|
|
@@ -907,23 +836,23 @@ function DataTable({ columns, data, onSort, isLoading }) {
|
|
|
907
836
|
] })
|
|
908
837
|
] }, i);
|
|
909
838
|
}) }),
|
|
910
|
-
isLoading ? /* @__PURE__ */
|
|
839
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-center items-center w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Loader, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
911
840
|
"div",
|
|
912
841
|
{
|
|
913
842
|
className: `${gridClass} ${data.length - 1 !== i ? "border-b border-gray-200" : ""} items-center`,
|
|
914
843
|
style: { ["--cols"]: cols },
|
|
915
|
-
children: columns.map((col, c) => /* @__PURE__ */
|
|
844
|
+
children: columns.map((col, c) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
|
|
916
845
|
},
|
|
917
846
|
i
|
|
918
847
|
)) }),
|
|
919
|
-
/* @__PURE__ */
|
|
848
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Pagination, { currentPage: page, itemsPerPage: 5, totalItems: 10, onPageChange: setPage }) })
|
|
920
849
|
] });
|
|
921
850
|
}
|
|
922
851
|
|
|
923
852
|
// src/Table/DataTable/AntDataTable.tsx
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
853
|
+
var import_antd = require("antd");
|
|
854
|
+
var import_react4 = require("react");
|
|
855
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
927
856
|
function AntDataTable({
|
|
928
857
|
dataSource,
|
|
929
858
|
columns,
|
|
@@ -937,7 +866,7 @@ function AntDataTable({
|
|
|
937
866
|
height,
|
|
938
867
|
pagination
|
|
939
868
|
}) {
|
|
940
|
-
const [selectedRowKeys, setSelectedRowKeys] =
|
|
869
|
+
const [selectedRowKeys, setSelectedRowKeys] = (0, import_react4.useState)([]);
|
|
941
870
|
const rowSelection = {
|
|
942
871
|
selectedRowKeys,
|
|
943
872
|
onChange: (newSelectedRowKeys) => {
|
|
@@ -949,8 +878,8 @@ function AntDataTable({
|
|
|
949
878
|
onChange?.(paginationArgs, filters, sorter, extra);
|
|
950
879
|
onFilter(filters);
|
|
951
880
|
};
|
|
952
|
-
return /* @__PURE__ */
|
|
953
|
-
ConfigProvider,
|
|
881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
882
|
+
import_antd.ConfigProvider,
|
|
954
883
|
{
|
|
955
884
|
theme: {
|
|
956
885
|
components: {},
|
|
@@ -959,8 +888,8 @@ function AntDataTable({
|
|
|
959
888
|
fontSize: 14
|
|
960
889
|
}
|
|
961
890
|
},
|
|
962
|
-
children: /* @__PURE__ */
|
|
963
|
-
Table,
|
|
891
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
892
|
+
import_antd.Table,
|
|
964
893
|
{
|
|
965
894
|
dataSource,
|
|
966
895
|
columns,
|
|
@@ -976,19 +905,19 @@ function AntDataTable({
|
|
|
976
905
|
}
|
|
977
906
|
|
|
978
907
|
// src/Calendar/Calendar/Calendar.tsx
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
908
|
+
var import_react5 = require("react");
|
|
909
|
+
var import_react6 = __toESM(require("@fullcalendar/react"));
|
|
910
|
+
var import_daygrid = __toESM(require("@fullcalendar/daygrid"));
|
|
911
|
+
var import_timegrid = __toESM(require("@fullcalendar/timegrid"));
|
|
912
|
+
var import_interaction = __toESM(require("@fullcalendar/interaction"));
|
|
913
|
+
var import_th = __toESM(require("@fullcalendar/core/locales/th"));
|
|
914
|
+
var import_icons_react6 = require("@tabler/icons-react");
|
|
915
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
987
916
|
function Calendar({ events }) {
|
|
988
|
-
const calendarRef = useRef(null);
|
|
989
|
-
const [monthTitle, setMonthTitle] =
|
|
990
|
-
const [openPopup, setOpenPopup] =
|
|
991
|
-
const [selectedEvent, setSelectedEvent] =
|
|
917
|
+
const calendarRef = (0, import_react5.useRef)(null);
|
|
918
|
+
const [monthTitle, setMonthTitle] = (0, import_react5.useState)("");
|
|
919
|
+
const [openPopup, setOpenPopup] = (0, import_react5.useState)(false);
|
|
920
|
+
const [selectedEvent, setSelectedEvent] = (0, import_react5.useState)(null);
|
|
992
921
|
const updateTitle = () => {
|
|
993
922
|
const calendarApi = calendarRef.current?.getApi();
|
|
994
923
|
if (calendarApi) {
|
|
@@ -999,14 +928,14 @@ function Calendar({ events }) {
|
|
|
999
928
|
const calendarApi = calendarRef.current?.getApi();
|
|
1000
929
|
calendarApi?.changeView(viewName);
|
|
1001
930
|
};
|
|
1002
|
-
useEffect(() => {
|
|
931
|
+
(0, import_react5.useEffect)(() => {
|
|
1003
932
|
updateTitle();
|
|
1004
933
|
}, []);
|
|
1005
|
-
return /* @__PURE__ */
|
|
1006
|
-
/* @__PURE__ */
|
|
1007
|
-
/* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1009
|
-
/* @__PURE__ */
|
|
934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fc w-full h-full relative z-10", children: [
|
|
935
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex mb-[8px]", children: [
|
|
936
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "headline-5", children: monthTitle }),
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-[10px] ml-auto", children: [
|
|
938
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1010
939
|
"p",
|
|
1011
940
|
{
|
|
1012
941
|
className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
|
|
@@ -1017,7 +946,7 @@ function Calendar({ events }) {
|
|
|
1017
946
|
children: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49"
|
|
1018
947
|
}
|
|
1019
948
|
),
|
|
1020
|
-
/* @__PURE__ */
|
|
949
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1021
950
|
"p",
|
|
1022
951
|
{
|
|
1023
952
|
className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
|
|
@@ -1028,7 +957,7 @@ function Calendar({ events }) {
|
|
|
1028
957
|
children: "Month"
|
|
1029
958
|
}
|
|
1030
959
|
),
|
|
1031
|
-
/* @__PURE__ */
|
|
960
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1032
961
|
"p",
|
|
1033
962
|
{
|
|
1034
963
|
className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
|
|
@@ -1039,7 +968,7 @@ function Calendar({ events }) {
|
|
|
1039
968
|
children: "Week"
|
|
1040
969
|
}
|
|
1041
970
|
),
|
|
1042
|
-
/* @__PURE__ */
|
|
971
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1043
972
|
"p",
|
|
1044
973
|
{
|
|
1045
974
|
className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
|
|
@@ -1050,7 +979,7 @@ function Calendar({ events }) {
|
|
|
1050
979
|
children: "Day"
|
|
1051
980
|
}
|
|
1052
981
|
),
|
|
1053
|
-
/* @__PURE__ */
|
|
982
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1054
983
|
"button",
|
|
1055
984
|
{
|
|
1056
985
|
className: "cursor-pointer",
|
|
@@ -1058,10 +987,10 @@ function Calendar({ events }) {
|
|
|
1058
987
|
calendarRef.current?.getApi().prev();
|
|
1059
988
|
updateTitle();
|
|
1060
989
|
},
|
|
1061
|
-
children: /* @__PURE__ */
|
|
990
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react6.IconChevronLeft, {})
|
|
1062
991
|
}
|
|
1063
992
|
),
|
|
1064
|
-
/* @__PURE__ */
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1065
994
|
"button",
|
|
1066
995
|
{
|
|
1067
996
|
className: "cursor-pointer",
|
|
@@ -1069,18 +998,18 @@ function Calendar({ events }) {
|
|
|
1069
998
|
calendarRef.current?.getApi().next();
|
|
1070
999
|
updateTitle();
|
|
1071
1000
|
},
|
|
1072
|
-
children: /* @__PURE__ */
|
|
1001
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react6.IconChevronRight, {})
|
|
1073
1002
|
}
|
|
1074
1003
|
)
|
|
1075
1004
|
] })
|
|
1076
1005
|
] }),
|
|
1077
|
-
/* @__PURE__ */
|
|
1078
|
-
|
|
1006
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1007
|
+
import_react6.default,
|
|
1079
1008
|
{
|
|
1080
1009
|
ref: calendarRef,
|
|
1081
|
-
plugins: [
|
|
1010
|
+
plugins: [import_daygrid.default, import_timegrid.default, import_interaction.default],
|
|
1082
1011
|
events,
|
|
1083
|
-
locale:
|
|
1012
|
+
locale: import_th.default,
|
|
1084
1013
|
slotLabelFormat: {
|
|
1085
1014
|
hour: "numeric",
|
|
1086
1015
|
minute: "2-digit"
|
|
@@ -1103,36 +1032,36 @@ function Calendar({ events }) {
|
|
|
1103
1032
|
});
|
|
1104
1033
|
},
|
|
1105
1034
|
eventContent: (arg) => {
|
|
1106
|
-
return /* @__PURE__ */
|
|
1035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
|
|
1107
1036
|
},
|
|
1108
1037
|
moreLinkContent: (arg) => `+${arg.num} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`
|
|
1109
1038
|
}
|
|
1110
1039
|
) }),
|
|
1111
|
-
openPopup && /* @__PURE__ */
|
|
1040
|
+
openPopup && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fixed inset-0 flex justify-center items-center bg-black/50 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EventPopUp, { event: selectedEvent, onClose: () => setOpenPopup(false) }) })
|
|
1112
1041
|
] });
|
|
1113
1042
|
}
|
|
1114
1043
|
function EventPopUp({ event, onClose }) {
|
|
1115
|
-
return /* @__PURE__ */
|
|
1116
|
-
/* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
-
/* @__PURE__ */
|
|
1044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "w-[500px] h-auto rounded-2xl bg-white relative z-50 shadow-2xl overflow-hidden", children: [
|
|
1045
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { className: "absolute top-3 right-3 rounded-full p-1 hover:bg-gray-200 transition", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react6.IconX, { className: "w-6 h-6 text-gray-600" }) }),
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "bg-red-400 text-left text-white px-6 py-4 headline-5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "text-lg font-semibold", children: event.title }) }),
|
|
1047
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col w-full p-6 gap-3 text-gray-700 body-3", children: [
|
|
1048
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { children: [
|
|
1049
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-medium", children: "\u0E40\u0E23\u0E34\u0E48\u0E21: " }),
|
|
1121
1050
|
event?.start?.toLocaleString?.() || String(event?.start)
|
|
1122
1051
|
] }),
|
|
1123
|
-
/* @__PURE__ */
|
|
1124
|
-
/* @__PURE__ */
|
|
1052
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { children: [
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-medium", children: "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14: " }),
|
|
1125
1054
|
event?.end?.toLocaleString?.() || String(event?.end)
|
|
1126
1055
|
] }),
|
|
1127
|
-
/* @__PURE__ */
|
|
1056
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-sm font-semibold text-gray-500 uppercase mb-2 hover:underline cursor-pointer", children: "\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21" })
|
|
1128
1057
|
] })
|
|
1129
1058
|
] });
|
|
1130
1059
|
}
|
|
1131
1060
|
|
|
1132
1061
|
// src/Input/TextInput/TextInput.tsx
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1062
|
+
var import_icons_react7 = require("@tabler/icons-react");
|
|
1063
|
+
var import_react7 = require("react");
|
|
1064
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1136
1065
|
function TextInput({
|
|
1137
1066
|
label,
|
|
1138
1067
|
placeholder,
|
|
@@ -1144,23 +1073,23 @@ function TextInput({
|
|
|
1144
1073
|
onChange,
|
|
1145
1074
|
disabled
|
|
1146
1075
|
}) {
|
|
1147
|
-
const [showPassword, setShowPassword] =
|
|
1076
|
+
const [showPassword, setShowPassword] = (0, import_react7.useState)(false);
|
|
1148
1077
|
const onShowPassword = () => {
|
|
1149
1078
|
setShowPassword(!showPassword);
|
|
1150
1079
|
};
|
|
1151
1080
|
const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
|
|
1152
|
-
return /* @__PURE__ */
|
|
1153
|
-
label && /* @__PURE__ */
|
|
1081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
|
|
1082
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "body-1 mb-[8px]", children: [
|
|
1154
1083
|
label,
|
|
1155
|
-
required && /* @__PURE__ */
|
|
1084
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-red-500", children: "\xA0*" })
|
|
1156
1085
|
] }),
|
|
1157
|
-
/* @__PURE__ */
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1158
1087
|
"div",
|
|
1159
1088
|
{
|
|
1160
1089
|
className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center
|
|
1161
1090
|
${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-500" : ""}`,
|
|
1162
1091
|
children: [
|
|
1163
|
-
/* @__PURE__ */
|
|
1092
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1164
1093
|
"input",
|
|
1165
1094
|
{
|
|
1166
1095
|
className: `w-full h-full px-[16px] ${disabled ? "cursor-not-allowed" : ""}`,
|
|
@@ -1173,18 +1102,18 @@ function TextInput({
|
|
|
1173
1102
|
disabled
|
|
1174
1103
|
}
|
|
1175
1104
|
),
|
|
1176
|
-
type === "password" && (showPassword ? /* @__PURE__ */
|
|
1105
|
+
type === "password" && (showPassword ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react7.IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react7.IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
|
|
1177
1106
|
]
|
|
1178
1107
|
}
|
|
1179
1108
|
),
|
|
1180
|
-
error && /* @__PURE__ */
|
|
1109
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-500 body-1", children: error })
|
|
1181
1110
|
] });
|
|
1182
1111
|
}
|
|
1183
1112
|
|
|
1184
1113
|
// src/Input/TextArea/TextArea.tsx
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
var { TextArea } = Input;
|
|
1114
|
+
var import_antd2 = require("antd");
|
|
1115
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1116
|
+
var { TextArea } = import_antd2.Input;
|
|
1188
1117
|
function TextAreaInput({
|
|
1189
1118
|
label,
|
|
1190
1119
|
height = 4,
|
|
@@ -1198,8 +1127,8 @@ function TextAreaInput({
|
|
|
1198
1127
|
error,
|
|
1199
1128
|
disabled
|
|
1200
1129
|
}) {
|
|
1201
|
-
return /* @__PURE__ */
|
|
1202
|
-
|
|
1130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1131
|
+
import_antd2.ConfigProvider,
|
|
1203
1132
|
{
|
|
1204
1133
|
theme: {
|
|
1205
1134
|
components: {},
|
|
@@ -1208,13 +1137,13 @@ function TextAreaInput({
|
|
|
1208
1137
|
fontSize: 16
|
|
1209
1138
|
}
|
|
1210
1139
|
},
|
|
1211
|
-
children: /* @__PURE__ */
|
|
1212
|
-
label && /* @__PURE__ */
|
|
1140
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
|
|
1141
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "body-1 mb-[8px]", children: [
|
|
1213
1142
|
label,
|
|
1214
1143
|
" ",
|
|
1215
|
-
required && /* @__PURE__ */
|
|
1144
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-red-500", children: "\xA0*" })
|
|
1216
1145
|
] }),
|
|
1217
|
-
/* @__PURE__ */
|
|
1146
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1218
1147
|
TextArea,
|
|
1219
1148
|
{
|
|
1220
1149
|
value,
|
|
@@ -1230,15 +1159,15 @@ function TextAreaInput({
|
|
|
1230
1159
|
disabled
|
|
1231
1160
|
}
|
|
1232
1161
|
),
|
|
1233
|
-
error && /* @__PURE__ */
|
|
1162
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-red-500 body-1", children: error })
|
|
1234
1163
|
] })
|
|
1235
1164
|
}
|
|
1236
1165
|
) });
|
|
1237
1166
|
}
|
|
1238
1167
|
|
|
1239
1168
|
// src/Input/InputField/InputField.tsx
|
|
1240
|
-
|
|
1241
|
-
|
|
1169
|
+
var import_antd3 = require("antd");
|
|
1170
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1242
1171
|
function InputField({
|
|
1243
1172
|
value,
|
|
1244
1173
|
onChange,
|
|
@@ -1254,24 +1183,24 @@ function InputField({
|
|
|
1254
1183
|
onClear,
|
|
1255
1184
|
statickey
|
|
1256
1185
|
}) {
|
|
1257
|
-
return /* @__PURE__ */
|
|
1258
|
-
|
|
1186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1187
|
+
import_antd3.ConfigProvider,
|
|
1259
1188
|
{
|
|
1260
1189
|
theme: {
|
|
1261
1190
|
token: {
|
|
1262
1191
|
fontFamily: "Kanit"
|
|
1263
1192
|
}
|
|
1264
1193
|
},
|
|
1265
|
-
children: /* @__PURE__ */
|
|
1266
|
-
/* @__PURE__ */
|
|
1267
|
-
/* @__PURE__ */
|
|
1194
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "container-input", children: [
|
|
1195
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
|
|
1196
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "body-1", children: label }),
|
|
1268
1197
|
" ",
|
|
1269
|
-
required && /* @__PURE__ */
|
|
1198
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500", children: "*" })
|
|
1270
1199
|
] }),
|
|
1271
|
-
/* @__PURE__ */
|
|
1272
|
-
statickey && /* @__PURE__ */
|
|
1273
|
-
/* @__PURE__ */
|
|
1274
|
-
|
|
1200
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_antd3.Space.Compact, { children: [
|
|
1201
|
+
statickey && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "items-center flex px-2 bg-gray-300 rounded-l-md body-1", children: statickey }),
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1203
|
+
import_antd3.Input,
|
|
1275
1204
|
{
|
|
1276
1205
|
value,
|
|
1277
1206
|
placeholder,
|
|
@@ -1286,15 +1215,15 @@ function InputField({
|
|
|
1286
1215
|
}
|
|
1287
1216
|
)
|
|
1288
1217
|
] }),
|
|
1289
|
-
error && /* @__PURE__ */
|
|
1218
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
1290
1219
|
] })
|
|
1291
1220
|
}
|
|
1292
1221
|
);
|
|
1293
1222
|
}
|
|
1294
1223
|
|
|
1295
1224
|
// src/Input/InputFieldNumber/InputFieldNumber.tsx
|
|
1296
|
-
|
|
1297
|
-
|
|
1225
|
+
var import_antd4 = require("antd");
|
|
1226
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1298
1227
|
function InputFieldNumber({
|
|
1299
1228
|
value,
|
|
1300
1229
|
onChange,
|
|
@@ -1315,22 +1244,22 @@ function InputFieldNumber({
|
|
|
1315
1244
|
formatter,
|
|
1316
1245
|
parser
|
|
1317
1246
|
}) {
|
|
1318
|
-
return /* @__PURE__ */
|
|
1319
|
-
|
|
1247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1248
|
+
import_antd4.ConfigProvider,
|
|
1320
1249
|
{
|
|
1321
1250
|
theme: {
|
|
1322
1251
|
token: {
|
|
1323
1252
|
fontFamily: "Kanit"
|
|
1324
1253
|
}
|
|
1325
1254
|
},
|
|
1326
|
-
children: /* @__PURE__ */
|
|
1327
|
-
/* @__PURE__ */
|
|
1328
|
-
/* @__PURE__ */
|
|
1255
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "container-input", children: [
|
|
1256
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
1257
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "body-1", children: label }),
|
|
1329
1258
|
" ",
|
|
1330
|
-
required && /* @__PURE__ */
|
|
1259
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-red-500", children: "*" })
|
|
1331
1260
|
] }),
|
|
1332
|
-
/* @__PURE__ */
|
|
1333
|
-
InputNumber,
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1262
|
+
import_antd4.InputNumber,
|
|
1334
1263
|
{
|
|
1335
1264
|
value: value ?? void 0,
|
|
1336
1265
|
onChange: (val) => onChange(val),
|
|
@@ -1349,22 +1278,22 @@ function InputFieldNumber({
|
|
|
1349
1278
|
parser
|
|
1350
1279
|
}
|
|
1351
1280
|
),
|
|
1352
|
-
error && /* @__PURE__ */
|
|
1281
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
1353
1282
|
] })
|
|
1354
1283
|
}
|
|
1355
1284
|
);
|
|
1356
1285
|
}
|
|
1357
1286
|
|
|
1358
1287
|
// src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
|
|
1359
|
-
var
|
|
1360
|
-
var
|
|
1361
|
-
var
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1288
|
+
var import_antd5 = require("antd");
|
|
1289
|
+
var import_dayjs = __toESM(require_dayjs_min());
|
|
1290
|
+
var import_th_TH = __toESM(require("antd/es/date-picker/locale/th_TH.js"));
|
|
1291
|
+
var import_th_TH2 = __toESM(require("antd/locale/th_TH.js"));
|
|
1292
|
+
var import_th2 = __toESM(require_th());
|
|
1293
|
+
var import_locale = require("date-fns/locale");
|
|
1294
|
+
var import_date_fns = require("date-fns");
|
|
1295
|
+
var import_buddhistEra = __toESM(require_buddhistEra());
|
|
1296
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1368
1297
|
import_dayjs.default.extend(import_buddhistEra.default);
|
|
1369
1298
|
function DatePickerBasic({
|
|
1370
1299
|
value,
|
|
@@ -1384,33 +1313,33 @@ function DatePickerBasic({
|
|
|
1384
1313
|
const dateFormat = "DD/MM/YYYY";
|
|
1385
1314
|
import_dayjs.default.locale("th_TH");
|
|
1386
1315
|
const buddhistLocale = {
|
|
1387
|
-
...
|
|
1316
|
+
...import_th_TH.default,
|
|
1388
1317
|
lang: {
|
|
1389
|
-
...
|
|
1318
|
+
...import_th_TH.default.lang,
|
|
1390
1319
|
fieldDateFormat: "BBBB-MM-DD",
|
|
1391
1320
|
fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
|
|
1392
1321
|
yearFormat: "BBBB",
|
|
1393
1322
|
cellYearFormat: "BBBB"
|
|
1394
1323
|
}
|
|
1395
1324
|
};
|
|
1396
|
-
return /* @__PURE__ */
|
|
1397
|
-
|
|
1325
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1326
|
+
import_antd5.ConfigProvider,
|
|
1398
1327
|
{
|
|
1399
|
-
locale:
|
|
1328
|
+
locale: import_th_TH2.default,
|
|
1400
1329
|
theme: {
|
|
1401
1330
|
token: {
|
|
1402
1331
|
fontFamily: "Kanit",
|
|
1403
1332
|
fontSize: 16
|
|
1404
1333
|
}
|
|
1405
1334
|
},
|
|
1406
|
-
children: /* @__PURE__ */
|
|
1407
|
-
/* @__PURE__ */
|
|
1408
|
-
/* @__PURE__ */
|
|
1335
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "container-input", children: [
|
|
1336
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
|
|
1337
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "body-1", children: label }),
|
|
1409
1338
|
" ",
|
|
1410
|
-
required && /* @__PURE__ */
|
|
1339
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-red-500", children: "*" })
|
|
1411
1340
|
] }),
|
|
1412
|
-
/* @__PURE__ */
|
|
1413
|
-
DatePicker,
|
|
1341
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1342
|
+
import_antd5.DatePicker,
|
|
1414
1343
|
{
|
|
1415
1344
|
className: `body-1 w-full ${className ?? ""}`,
|
|
1416
1345
|
value,
|
|
@@ -1418,7 +1347,7 @@ function DatePickerBasic({
|
|
|
1418
1347
|
onChange,
|
|
1419
1348
|
allowClear: true,
|
|
1420
1349
|
disabled,
|
|
1421
|
-
format: (date) => date ? format(date.toDate(), "dd/MM/yyyy", { locale:
|
|
1350
|
+
format: (date) => date ? (0, import_date_fns.format)(date.toDate(), "dd/MM/yyyy", { locale: import_locale.th }).replace(
|
|
1422
1351
|
/\d{4}$/,
|
|
1423
1352
|
(y) => String(parseInt(y) + 543)
|
|
1424
1353
|
) : "",
|
|
@@ -1430,219 +1359,15 @@ function DatePickerBasic({
|
|
|
1430
1359
|
locale: buddhistLocale
|
|
1431
1360
|
}
|
|
1432
1361
|
),
|
|
1433
|
-
error && /* @__PURE__ */
|
|
1434
|
-
] })
|
|
1435
|
-
}
|
|
1436
|
-
);
|
|
1437
|
-
}
|
|
1438
|
-
|
|
1439
|
-
// src/DatePicker/DatePickerRangePicker/DatePickerRangePicker.tsx
|
|
1440
|
-
var import_th3 = __toESM(require_th(), 1);
|
|
1441
|
-
var import_customParseFormat = __toESM(require_customParseFormat(), 1);
|
|
1442
|
-
var import_dayjs2 = __toESM(require_dayjs_min(), 1);
|
|
1443
|
-
import { ConfigProvider as ConfigProvider6, DatePicker as DatePicker2 } from "antd";
|
|
1444
|
-
import thTH2 from "antd/locale/th_TH.js";
|
|
1445
|
-
import th2 from "antd/es/date-picker/locale/th_TH.js";
|
|
1446
|
-
import { format as format2 } from "date-fns";
|
|
1447
|
-
import { th as thFns2 } from "date-fns/locale";
|
|
1448
|
-
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1449
|
-
import_dayjs2.default.extend(import_customParseFormat.default);
|
|
1450
|
-
function DatePickerRangePicker({
|
|
1451
|
-
value,
|
|
1452
|
-
onChange,
|
|
1453
|
-
placeholder = ["\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"],
|
|
1454
|
-
label,
|
|
1455
|
-
required,
|
|
1456
|
-
error,
|
|
1457
|
-
disabled,
|
|
1458
|
-
minDate,
|
|
1459
|
-
maxDate,
|
|
1460
|
-
disabledDate,
|
|
1461
|
-
size = "middle",
|
|
1462
|
-
className,
|
|
1463
|
-
onOpenChange,
|
|
1464
|
-
onCalendarChange
|
|
1465
|
-
}) {
|
|
1466
|
-
const dateFormat = "DD/MM/YYYY";
|
|
1467
|
-
import_dayjs2.default.locale("th_TH");
|
|
1468
|
-
const buddhistLocale = {
|
|
1469
|
-
...th2,
|
|
1470
|
-
lang: {
|
|
1471
|
-
...th2.lang,
|
|
1472
|
-
fieldDateFormat: "BBBB-MM-DD",
|
|
1473
|
-
fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
|
|
1474
|
-
yearFormat: "BBBB",
|
|
1475
|
-
cellYearFormat: "BBBB"
|
|
1476
|
-
}
|
|
1477
|
-
};
|
|
1478
|
-
return /* @__PURE__ */ jsx24(
|
|
1479
|
-
ConfigProvider6,
|
|
1480
|
-
{
|
|
1481
|
-
locale: thTH2,
|
|
1482
|
-
theme: {
|
|
1483
|
-
token: {
|
|
1484
|
-
fontFamily: "Kanit",
|
|
1485
|
-
fontSize: 16
|
|
1486
|
-
}
|
|
1487
|
-
},
|
|
1488
|
-
children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
|
|
1489
|
-
/* @__PURE__ */ jsxs20("div", { children: [
|
|
1490
|
-
/* @__PURE__ */ jsx24("span", { className: "body-1", children: label }),
|
|
1491
|
-
" ",
|
|
1492
|
-
required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
|
|
1493
|
-
] }),
|
|
1494
|
-
/* @__PURE__ */ jsx24(
|
|
1495
|
-
DatePicker2.RangePicker,
|
|
1496
|
-
{
|
|
1497
|
-
format: (date) => date ? format2(date.toDate(), "dd/MM/yyyy", { locale: thFns2 }).replace(
|
|
1498
|
-
/\d{4}$/,
|
|
1499
|
-
(y) => String(parseInt(y) + 543)
|
|
1500
|
-
) : "",
|
|
1501
|
-
value: value ? [value[0] ? (0, import_dayjs2.default)(value[0]) : null, value[1] ? (0, import_dayjs2.default)(value[1]) : null] : null,
|
|
1502
|
-
placeholder,
|
|
1503
|
-
className: `body-1 w-full ${className ?? ""}`,
|
|
1504
|
-
onChange: (dates, dateStrings) => {
|
|
1505
|
-
if (!dates) {
|
|
1506
|
-
onChange(null);
|
|
1507
|
-
} else {
|
|
1508
|
-
onChange([dates[0] ? dates[0].toDate() : null, dates[1] ? dates[1].toDate() : null]);
|
|
1509
|
-
}
|
|
1510
|
-
},
|
|
1511
|
-
allowClear: true,
|
|
1512
|
-
disabled,
|
|
1513
|
-
minDate: minDate ? (0, import_dayjs2.default)(minDate) : void 0,
|
|
1514
|
-
maxDate: maxDate ? (0, import_dayjs2.default)(maxDate) : void 0,
|
|
1515
|
-
disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
|
|
1516
|
-
size,
|
|
1517
|
-
onOpenChange,
|
|
1518
|
-
onCalendarChange: (dates, dateStrings, info) => {
|
|
1519
|
-
if (!dates) {
|
|
1520
|
-
onCalendarChange?.([null, null], dateStrings, info);
|
|
1521
|
-
} else {
|
|
1522
|
-
onCalendarChange?.(
|
|
1523
|
-
[dates[0] ? dates[0].toDate() : null, dates[1] ? dates[1].toDate() : null],
|
|
1524
|
-
dateStrings,
|
|
1525
|
-
info
|
|
1526
|
-
);
|
|
1527
|
-
}
|
|
1528
|
-
},
|
|
1529
|
-
locale: buddhistLocale
|
|
1530
|
-
}
|
|
1531
|
-
),
|
|
1532
|
-
error && /* @__PURE__ */ jsx24("p", { className: "text-red-500 caption-1", children: error })
|
|
1533
|
-
] })
|
|
1534
|
-
}
|
|
1535
|
-
);
|
|
1536
|
-
}
|
|
1537
|
-
|
|
1538
|
-
// src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
|
|
1539
|
-
var import_dayjs3 = __toESM(require_dayjs_min(), 1);
|
|
1540
|
-
import { ConfigProvider as ConfigProvider7, TimePicker } from "antd";
|
|
1541
|
-
import thTH3 from "antd/locale/th_TH.js";
|
|
1542
|
-
import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1543
|
-
function TimePickerBasic({
|
|
1544
|
-
value,
|
|
1545
|
-
onChange,
|
|
1546
|
-
required,
|
|
1547
|
-
label,
|
|
1548
|
-
error,
|
|
1549
|
-
placeholder,
|
|
1550
|
-
disabled,
|
|
1551
|
-
className
|
|
1552
|
-
}) {
|
|
1553
|
-
return /* @__PURE__ */ jsx25(
|
|
1554
|
-
ConfigProvider7,
|
|
1555
|
-
{
|
|
1556
|
-
locale: thTH3,
|
|
1557
|
-
theme: {
|
|
1558
|
-
token: {
|
|
1559
|
-
fontFamily: "Kanit"
|
|
1560
|
-
}
|
|
1561
|
-
},
|
|
1562
|
-
children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
|
|
1563
|
-
/* @__PURE__ */ jsxs21("div", { children: [
|
|
1564
|
-
/* @__PURE__ */ jsx25("span", { className: "body-1", children: label }),
|
|
1565
|
-
" ",
|
|
1566
|
-
required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
|
|
1567
|
-
] }),
|
|
1568
|
-
/* @__PURE__ */ jsx25(
|
|
1569
|
-
TimePicker,
|
|
1570
|
-
{
|
|
1571
|
-
format: "HH:mm",
|
|
1572
|
-
className: `body-1 w-full ${className ?? ""}`,
|
|
1573
|
-
value: value ? (0, import_dayjs3.default)(value) : null,
|
|
1574
|
-
placeholder,
|
|
1575
|
-
onChange: (time) => {
|
|
1576
|
-
onChange(time ? time.toDate() : null);
|
|
1577
|
-
},
|
|
1578
|
-
allowClear: true,
|
|
1579
|
-
disabled
|
|
1580
|
-
}
|
|
1581
|
-
),
|
|
1582
|
-
error && /* @__PURE__ */ jsx25("p", { className: "text-red-500 caption-1", children: error })
|
|
1583
|
-
] })
|
|
1584
|
-
}
|
|
1585
|
-
);
|
|
1586
|
-
}
|
|
1587
|
-
|
|
1588
|
-
// src/TimePicker/TimePickerRangePicker/TimerPickerRangePicker.tsx
|
|
1589
|
-
var import_dayjs4 = __toESM(require_dayjs_min(), 1);
|
|
1590
|
-
import { ConfigProvider as ConfigProvider8, TimePicker as TimePicker2 } from "antd";
|
|
1591
|
-
import thTH4 from "antd/locale/th_TH.js";
|
|
1592
|
-
import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1593
|
-
function TimePickerRangePicker({
|
|
1594
|
-
value,
|
|
1595
|
-
onChange,
|
|
1596
|
-
placeholder = ["\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"],
|
|
1597
|
-
label,
|
|
1598
|
-
required,
|
|
1599
|
-
error,
|
|
1600
|
-
disabled,
|
|
1601
|
-
className
|
|
1602
|
-
}) {
|
|
1603
|
-
return /* @__PURE__ */ jsx26(
|
|
1604
|
-
ConfigProvider8,
|
|
1605
|
-
{
|
|
1606
|
-
locale: thTH4,
|
|
1607
|
-
theme: {
|
|
1608
|
-
token: {
|
|
1609
|
-
fontFamily: "Kanit"
|
|
1610
|
-
}
|
|
1611
|
-
},
|
|
1612
|
-
children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
|
|
1613
|
-
/* @__PURE__ */ jsxs22("div", { children: [
|
|
1614
|
-
/* @__PURE__ */ jsx26("span", { className: "body-1", children: label }),
|
|
1615
|
-
" ",
|
|
1616
|
-
required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
|
|
1617
|
-
] }),
|
|
1618
|
-
/* @__PURE__ */ jsx26(
|
|
1619
|
-
TimePicker2.RangePicker,
|
|
1620
|
-
{
|
|
1621
|
-
format: "HH:mm",
|
|
1622
|
-
value: value ? [value[0] ? (0, import_dayjs4.default)(value[0]) : null, value[1] ? (0, import_dayjs4.default)(value[1]) : null] : null,
|
|
1623
|
-
placeholder,
|
|
1624
|
-
className: `body-1 w-full ${className ?? ""}`,
|
|
1625
|
-
onChange: (dates, dateStrings) => {
|
|
1626
|
-
if (!dates) {
|
|
1627
|
-
onChange(null);
|
|
1628
|
-
} else {
|
|
1629
|
-
onChange([dates[0] ? dates[0].toDate() : null, dates[1] ? dates[1].toDate() : null]);
|
|
1630
|
-
}
|
|
1631
|
-
},
|
|
1632
|
-
allowClear: true,
|
|
1633
|
-
disabled,
|
|
1634
|
-
showNow: true
|
|
1635
|
-
}
|
|
1636
|
-
),
|
|
1637
|
-
error && /* @__PURE__ */ jsx26("p", { className: "text-red-500 caption-1", children: error })
|
|
1362
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
1638
1363
|
] })
|
|
1639
1364
|
}
|
|
1640
1365
|
);
|
|
1641
1366
|
}
|
|
1642
1367
|
|
|
1643
1368
|
// src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
|
|
1644
|
-
|
|
1645
|
-
|
|
1369
|
+
var import_antd6 = require("antd");
|
|
1370
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1646
1371
|
function ColorPickerBasic({
|
|
1647
1372
|
value,
|
|
1648
1373
|
onChange,
|
|
@@ -1655,8 +1380,8 @@ function ColorPickerBasic({
|
|
|
1655
1380
|
className,
|
|
1656
1381
|
placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
|
|
1657
1382
|
}) {
|
|
1658
|
-
return /* @__PURE__ */
|
|
1659
|
-
|
|
1383
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1384
|
+
import_antd6.ConfigProvider,
|
|
1660
1385
|
{
|
|
1661
1386
|
theme: {
|
|
1662
1387
|
token: {
|
|
@@ -1664,14 +1389,14 @@ function ColorPickerBasic({
|
|
|
1664
1389
|
fontSize: 16
|
|
1665
1390
|
}
|
|
1666
1391
|
},
|
|
1667
|
-
children: /* @__PURE__ */
|
|
1668
|
-
/* @__PURE__ */
|
|
1669
|
-
/* @__PURE__ */
|
|
1392
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "container-input", children: [
|
|
1393
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
|
|
1394
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "body-1", children: label }),
|
|
1670
1395
|
" ",
|
|
1671
|
-
required && /* @__PURE__ */
|
|
1396
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-red-500", children: "*" })
|
|
1672
1397
|
] }),
|
|
1673
|
-
/* @__PURE__ */
|
|
1674
|
-
ColorPicker,
|
|
1398
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1399
|
+
import_antd6.ColorPicker,
|
|
1675
1400
|
{
|
|
1676
1401
|
defaultFormat,
|
|
1677
1402
|
className: `body-1 w-full ${className ?? ""}`,
|
|
@@ -1682,9 +1407,9 @@ function ColorPickerBasic({
|
|
|
1682
1407
|
showText: (color) => {
|
|
1683
1408
|
const hex = color.toHexString();
|
|
1684
1409
|
if (!value) {
|
|
1685
|
-
return /* @__PURE__ */
|
|
1410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: placeholder });
|
|
1686
1411
|
}
|
|
1687
|
-
return /* @__PURE__ */
|
|
1412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
|
|
1688
1413
|
"(",
|
|
1689
1414
|
hex,
|
|
1690
1415
|
")"
|
|
@@ -1693,14 +1418,14 @@ function ColorPickerBasic({
|
|
|
1693
1418
|
disabled
|
|
1694
1419
|
}
|
|
1695
1420
|
),
|
|
1696
|
-
error && /* @__PURE__ */
|
|
1421
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
1697
1422
|
] })
|
|
1698
1423
|
}
|
|
1699
1424
|
);
|
|
1700
1425
|
}
|
|
1701
1426
|
|
|
1702
1427
|
// src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
|
|
1703
|
-
|
|
1428
|
+
var import_antd7 = require("antd");
|
|
1704
1429
|
|
|
1705
1430
|
// node_modules/@babel/runtime/helpers/esm/typeof.js
|
|
1706
1431
|
function _typeof(o) {
|
|
@@ -2402,7 +2127,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
|
|
|
2402
2127
|
greyDark.primary = greyDark[5];
|
|
2403
2128
|
|
|
2404
2129
|
// src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
|
|
2405
|
-
|
|
2130
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2406
2131
|
function genPresets(presets = presetPalettes) {
|
|
2407
2132
|
return Object.entries(presets).map(([label, colors]) => ({
|
|
2408
2133
|
label,
|
|
@@ -2423,14 +2148,14 @@ function ColorPalettePickerBasic({
|
|
|
2423
2148
|
placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35",
|
|
2424
2149
|
onClear
|
|
2425
2150
|
}) {
|
|
2426
|
-
const { token } = theme.useToken();
|
|
2151
|
+
const { token } = import_antd7.theme.useToken();
|
|
2427
2152
|
const presets = genPresets({
|
|
2428
2153
|
primary: generate(token.colorPrimary),
|
|
2429
2154
|
red,
|
|
2430
2155
|
green
|
|
2431
2156
|
});
|
|
2432
|
-
return /* @__PURE__ */
|
|
2433
|
-
|
|
2157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2158
|
+
import_antd7.ConfigProvider,
|
|
2434
2159
|
{
|
|
2435
2160
|
theme: {
|
|
2436
2161
|
token: {
|
|
@@ -2438,14 +2163,14 @@ function ColorPalettePickerBasic({
|
|
|
2438
2163
|
fontSize: 16
|
|
2439
2164
|
}
|
|
2440
2165
|
},
|
|
2441
|
-
children: /* @__PURE__ */
|
|
2442
|
-
/* @__PURE__ */
|
|
2443
|
-
/* @__PURE__ */
|
|
2166
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container-input", children: [
|
|
2167
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
|
|
2168
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "body-1", children: label }),
|
|
2444
2169
|
" ",
|
|
2445
|
-
required && /* @__PURE__ */
|
|
2170
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2446
2171
|
] }),
|
|
2447
|
-
/* @__PURE__ */
|
|
2448
|
-
|
|
2172
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2173
|
+
import_antd7.ColorPicker,
|
|
2449
2174
|
{
|
|
2450
2175
|
defaultFormat,
|
|
2451
2176
|
className: `body-1 w-full ${className ?? ""}`,
|
|
@@ -2457,9 +2182,9 @@ function ColorPalettePickerBasic({
|
|
|
2457
2182
|
showText: (color) => {
|
|
2458
2183
|
const hex = color.toHexString();
|
|
2459
2184
|
if (!value) {
|
|
2460
|
-
return /* @__PURE__ */
|
|
2185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: placeholder });
|
|
2461
2186
|
}
|
|
2462
|
-
return /* @__PURE__ */
|
|
2187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
|
|
2463
2188
|
"(",
|
|
2464
2189
|
hex,
|
|
2465
2190
|
")"
|
|
@@ -2469,15 +2194,15 @@ function ColorPalettePickerBasic({
|
|
|
2469
2194
|
onClear
|
|
2470
2195
|
}
|
|
2471
2196
|
),
|
|
2472
|
-
error && /* @__PURE__ */
|
|
2197
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
2473
2198
|
] })
|
|
2474
2199
|
}
|
|
2475
2200
|
);
|
|
2476
2201
|
}
|
|
2477
2202
|
|
|
2478
2203
|
// src/Select/SelectField/SelectField.tsx
|
|
2479
|
-
|
|
2480
|
-
|
|
2204
|
+
var import_antd8 = require("antd");
|
|
2205
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2481
2206
|
function SelectField({
|
|
2482
2207
|
value,
|
|
2483
2208
|
onChange,
|
|
@@ -2495,8 +2220,8 @@ function SelectField({
|
|
|
2495
2220
|
className,
|
|
2496
2221
|
onClear
|
|
2497
2222
|
}) {
|
|
2498
|
-
return /* @__PURE__ */
|
|
2499
|
-
|
|
2223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2224
|
+
import_antd8.ConfigProvider,
|
|
2500
2225
|
{
|
|
2501
2226
|
theme: {
|
|
2502
2227
|
token: {
|
|
@@ -2504,14 +2229,14 @@ function SelectField({
|
|
|
2504
2229
|
fontSize: 16
|
|
2505
2230
|
}
|
|
2506
2231
|
},
|
|
2507
|
-
children: /* @__PURE__ */
|
|
2508
|
-
/* @__PURE__ */
|
|
2509
|
-
/* @__PURE__ */
|
|
2232
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container-input", children: [
|
|
2233
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
|
|
2234
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "body-1", children: label }),
|
|
2510
2235
|
" ",
|
|
2511
|
-
required && /* @__PURE__ */
|
|
2236
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2512
2237
|
] }),
|
|
2513
|
-
/* @__PURE__ */
|
|
2514
|
-
Select,
|
|
2238
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2239
|
+
import_antd8.Select,
|
|
2515
2240
|
{
|
|
2516
2241
|
showSearch: true,
|
|
2517
2242
|
value,
|
|
@@ -2525,7 +2250,7 @@ function SelectField({
|
|
|
2525
2250
|
options,
|
|
2526
2251
|
mode,
|
|
2527
2252
|
onSearch: handleSearch,
|
|
2528
|
-
prefix: prefix ? /* @__PURE__ */
|
|
2253
|
+
prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2529
2254
|
"span",
|
|
2530
2255
|
{
|
|
2531
2256
|
style: {
|
|
@@ -2542,15 +2267,15 @@ function SelectField({
|
|
|
2542
2267
|
onClear
|
|
2543
2268
|
}
|
|
2544
2269
|
),
|
|
2545
|
-
error && /* @__PURE__ */
|
|
2270
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
2546
2271
|
] })
|
|
2547
2272
|
}
|
|
2548
2273
|
);
|
|
2549
2274
|
}
|
|
2550
2275
|
|
|
2551
2276
|
// src/Select/SelectFieldGroup/SelectFieldGroup.tsx
|
|
2552
|
-
|
|
2553
|
-
|
|
2277
|
+
var import_antd9 = require("antd");
|
|
2278
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2554
2279
|
function SelectFieldGroup({
|
|
2555
2280
|
value,
|
|
2556
2281
|
onChange,
|
|
@@ -2567,22 +2292,22 @@ function SelectFieldGroup({
|
|
|
2567
2292
|
handleSearch,
|
|
2568
2293
|
className
|
|
2569
2294
|
}) {
|
|
2570
|
-
return /* @__PURE__ */
|
|
2571
|
-
|
|
2295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2296
|
+
import_antd9.ConfigProvider,
|
|
2572
2297
|
{
|
|
2573
2298
|
theme: {
|
|
2574
2299
|
token: {
|
|
2575
2300
|
fontFamily: "Kanit"
|
|
2576
2301
|
}
|
|
2577
2302
|
},
|
|
2578
|
-
children: /* @__PURE__ */
|
|
2579
|
-
/* @__PURE__ */
|
|
2580
|
-
/* @__PURE__ */
|
|
2303
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container-input", children: [
|
|
2304
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
|
|
2305
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "body-1", children: label }),
|
|
2581
2306
|
" ",
|
|
2582
|
-
required && /* @__PURE__ */
|
|
2307
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2583
2308
|
] }),
|
|
2584
|
-
/* @__PURE__ */
|
|
2585
|
-
|
|
2309
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2310
|
+
import_antd9.Select,
|
|
2586
2311
|
{
|
|
2587
2312
|
showSearch: true,
|
|
2588
2313
|
value,
|
|
@@ -2596,7 +2321,7 @@ function SelectFieldGroup({
|
|
|
2596
2321
|
options,
|
|
2597
2322
|
mode,
|
|
2598
2323
|
onSearch: handleSearch,
|
|
2599
|
-
prefix: prefix ? /* @__PURE__ */
|
|
2324
|
+
prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2600
2325
|
"span",
|
|
2601
2326
|
{
|
|
2602
2327
|
style: {
|
|
@@ -2612,14 +2337,14 @@ function SelectFieldGroup({
|
|
|
2612
2337
|
allowClear: true
|
|
2613
2338
|
}
|
|
2614
2339
|
),
|
|
2615
|
-
error && /* @__PURE__ */
|
|
2340
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
2616
2341
|
] })
|
|
2617
2342
|
}
|
|
2618
2343
|
);
|
|
2619
2344
|
}
|
|
2620
2345
|
|
|
2621
2346
|
// src/Select/SelectFieldStatus/SelectFieldStatus.tsx
|
|
2622
|
-
|
|
2347
|
+
var import_antd10 = require("antd");
|
|
2623
2348
|
|
|
2624
2349
|
// src/Select/SelectFieldStatus/StatusMockup.ts
|
|
2625
2350
|
var status = [
|
|
@@ -2631,8 +2356,8 @@ var status = [
|
|
|
2631
2356
|
];
|
|
2632
2357
|
|
|
2633
2358
|
// src/Select/SelectFieldStatus/SelectFieldStatus.tsx
|
|
2634
|
-
|
|
2635
|
-
|
|
2359
|
+
var import_icons = require("@ant-design/icons");
|
|
2360
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2636
2361
|
function SelectFieldStatus({
|
|
2637
2362
|
value,
|
|
2638
2363
|
onChange,
|
|
@@ -2645,8 +2370,8 @@ function SelectFieldStatus({
|
|
|
2645
2370
|
className
|
|
2646
2371
|
}) {
|
|
2647
2372
|
const selectedItem = status.find((s) => s.value === value);
|
|
2648
|
-
return /* @__PURE__ */
|
|
2649
|
-
|
|
2373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2374
|
+
import_antd10.ConfigProvider,
|
|
2650
2375
|
{
|
|
2651
2376
|
theme: {
|
|
2652
2377
|
components: {
|
|
@@ -2661,17 +2386,17 @@ function SelectFieldStatus({
|
|
|
2661
2386
|
fontFamily: "Kanit"
|
|
2662
2387
|
}
|
|
2663
2388
|
},
|
|
2664
|
-
children: /* @__PURE__ */
|
|
2665
|
-
/* @__PURE__ */
|
|
2666
|
-
/* @__PURE__ */
|
|
2389
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "container-input", children: [
|
|
2390
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
|
|
2391
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "body-1", children: label }),
|
|
2667
2392
|
" ",
|
|
2668
|
-
required && /* @__PURE__ */
|
|
2393
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2669
2394
|
] }),
|
|
2670
|
-
/* @__PURE__ */
|
|
2671
|
-
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2396
|
+
import_antd10.Select,
|
|
2672
2397
|
{
|
|
2673
2398
|
disabled,
|
|
2674
|
-
suffixIcon: /* @__PURE__ */
|
|
2399
|
+
suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
|
|
2675
2400
|
value,
|
|
2676
2401
|
onChange,
|
|
2677
2402
|
className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
|
|
@@ -2682,14 +2407,14 @@ function SelectFieldStatus({
|
|
|
2682
2407
|
showSearch: true
|
|
2683
2408
|
}
|
|
2684
2409
|
),
|
|
2685
|
-
error && /* @__PURE__ */
|
|
2410
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
2686
2411
|
] })
|
|
2687
2412
|
}
|
|
2688
2413
|
);
|
|
2689
2414
|
}
|
|
2690
2415
|
|
|
2691
2416
|
// src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
|
|
2692
|
-
|
|
2417
|
+
var import_antd11 = require("antd");
|
|
2693
2418
|
|
|
2694
2419
|
// src/Select/SelectFieldStatusReport/StatusReportMockup.ts
|
|
2695
2420
|
var status2 = [
|
|
@@ -2698,8 +2423,8 @@ var status2 = [
|
|
|
2698
2423
|
];
|
|
2699
2424
|
|
|
2700
2425
|
// src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
|
|
2701
|
-
|
|
2702
|
-
|
|
2426
|
+
var import_icons2 = require("@ant-design/icons");
|
|
2427
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2703
2428
|
function SelectFieldStatusReport({
|
|
2704
2429
|
value,
|
|
2705
2430
|
onChange,
|
|
@@ -2712,8 +2437,8 @@ function SelectFieldStatusReport({
|
|
|
2712
2437
|
options
|
|
2713
2438
|
}) {
|
|
2714
2439
|
const selectedItem = status2.find((s) => s.value === value);
|
|
2715
|
-
return /* @__PURE__ */
|
|
2716
|
-
|
|
2440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2441
|
+
import_antd11.ConfigProvider,
|
|
2717
2442
|
{
|
|
2718
2443
|
theme: {
|
|
2719
2444
|
components: {
|
|
@@ -2728,17 +2453,17 @@ function SelectFieldStatusReport({
|
|
|
2728
2453
|
fontFamily: "Kanit"
|
|
2729
2454
|
}
|
|
2730
2455
|
},
|
|
2731
|
-
children: /* @__PURE__ */
|
|
2732
|
-
/* @__PURE__ */
|
|
2733
|
-
/* @__PURE__ */
|
|
2456
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "container-input", children: [
|
|
2457
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
|
|
2458
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "body-1", children: label }),
|
|
2734
2459
|
" ",
|
|
2735
|
-
required && /* @__PURE__ */
|
|
2460
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2736
2461
|
] }),
|
|
2737
|
-
/* @__PURE__ */
|
|
2738
|
-
|
|
2462
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2463
|
+
import_antd11.Select,
|
|
2739
2464
|
{
|
|
2740
2465
|
disabled,
|
|
2741
|
-
suffixIcon: /* @__PURE__ */
|
|
2466
|
+
suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
|
|
2742
2467
|
value,
|
|
2743
2468
|
onChange,
|
|
2744
2469
|
className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
|
|
@@ -2749,16 +2474,16 @@ function SelectFieldStatusReport({
|
|
|
2749
2474
|
showSearch: true
|
|
2750
2475
|
}
|
|
2751
2476
|
),
|
|
2752
|
-
error && /* @__PURE__ */
|
|
2477
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
2753
2478
|
] })
|
|
2754
2479
|
}
|
|
2755
2480
|
);
|
|
2756
2481
|
}
|
|
2757
2482
|
|
|
2758
2483
|
// src/Select/SelectFieldTag/SelectFieldTag.tsx
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2484
|
+
var import_antd12 = require("antd");
|
|
2485
|
+
var import_react8 = require("react");
|
|
2486
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2762
2487
|
function SelectFieldTag({
|
|
2763
2488
|
label,
|
|
2764
2489
|
required,
|
|
@@ -2770,10 +2495,10 @@ function SelectFieldTag({
|
|
|
2770
2495
|
onChange,
|
|
2771
2496
|
onClear
|
|
2772
2497
|
}) {
|
|
2773
|
-
const [internalValue, setInternalValue] =
|
|
2498
|
+
const [internalValue, setInternalValue] = (0, import_react8.useState)([]);
|
|
2774
2499
|
const isControlled = controlledValue !== void 0;
|
|
2775
2500
|
const value = isControlled ? controlledValue : internalValue;
|
|
2776
|
-
const [searchWord, setSearchWord] =
|
|
2501
|
+
const [searchWord, setSearchWord] = (0, import_react8.useState)("");
|
|
2777
2502
|
const handleChange = (val) => {
|
|
2778
2503
|
const trimValue = val.map((v) => v.trim());
|
|
2779
2504
|
const filtered = trimValue.filter((v) => v.trim() !== "");
|
|
@@ -2791,22 +2516,22 @@ function SelectFieldTag({
|
|
|
2791
2516
|
}
|
|
2792
2517
|
onChange?.([]);
|
|
2793
2518
|
};
|
|
2794
|
-
return /* @__PURE__ */
|
|
2795
|
-
|
|
2519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2520
|
+
import_antd12.ConfigProvider,
|
|
2796
2521
|
{
|
|
2797
2522
|
theme: {
|
|
2798
2523
|
token: {
|
|
2799
2524
|
fontFamily: "Kanit"
|
|
2800
2525
|
}
|
|
2801
2526
|
},
|
|
2802
|
-
children: /* @__PURE__ */
|
|
2803
|
-
/* @__PURE__ */
|
|
2804
|
-
/* @__PURE__ */
|
|
2527
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "container-input", children: [
|
|
2528
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
|
|
2529
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "body-1", children: label }),
|
|
2805
2530
|
" ",
|
|
2806
|
-
required && /* @__PURE__ */
|
|
2531
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2807
2532
|
] }),
|
|
2808
|
-
/* @__PURE__ */
|
|
2809
|
-
|
|
2533
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2534
|
+
import_antd12.Select,
|
|
2810
2535
|
{
|
|
2811
2536
|
mode: "tags",
|
|
2812
2537
|
className: `body-1 flex justify-center w-full ${className ?? ""}`,
|
|
@@ -2824,17 +2549,17 @@ function SelectFieldTag({
|
|
|
2824
2549
|
onClear
|
|
2825
2550
|
}
|
|
2826
2551
|
),
|
|
2827
|
-
error && /* @__PURE__ */
|
|
2552
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-red-500 caption-1", children: error })
|
|
2828
2553
|
] })
|
|
2829
2554
|
}
|
|
2830
2555
|
);
|
|
2831
2556
|
}
|
|
2832
2557
|
|
|
2833
2558
|
// src/Select/SelectCustom/SelectCustom.tsx
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2559
|
+
var import_icons_react8 = require("@tabler/icons-react");
|
|
2560
|
+
var import_antd13 = require("antd");
|
|
2561
|
+
var import_react9 = require("react");
|
|
2562
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2838
2563
|
function SelectCustom({
|
|
2839
2564
|
label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
|
|
2840
2565
|
placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
|
|
@@ -2844,8 +2569,8 @@ function SelectCustom({
|
|
|
2844
2569
|
error,
|
|
2845
2570
|
onClear
|
|
2846
2571
|
}) {
|
|
2847
|
-
const [value, setValue] =
|
|
2848
|
-
const [valueList, setValueList] =
|
|
2572
|
+
const [value, setValue] = (0, import_react9.useState)([]);
|
|
2573
|
+
const [valueList, setValueList] = (0, import_react9.useState)([]);
|
|
2849
2574
|
const handleChange = (selectedValues) => {
|
|
2850
2575
|
const newValues = selectedValues.filter((v) => !valueList.includes(v));
|
|
2851
2576
|
setValueList((prev) => {
|
|
@@ -2863,8 +2588,8 @@ function SelectCustom({
|
|
|
2863
2588
|
});
|
|
2864
2589
|
};
|
|
2865
2590
|
const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
|
|
2866
|
-
return /* @__PURE__ */
|
|
2867
|
-
|
|
2591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2592
|
+
import_antd13.ConfigProvider,
|
|
2868
2593
|
{
|
|
2869
2594
|
theme: {
|
|
2870
2595
|
token: {
|
|
@@ -2872,14 +2597,14 @@ function SelectCustom({
|
|
|
2872
2597
|
fontSize: 16
|
|
2873
2598
|
}
|
|
2874
2599
|
},
|
|
2875
|
-
children: /* @__PURE__ */
|
|
2876
|
-
/* @__PURE__ */
|
|
2877
|
-
/* @__PURE__ */
|
|
2600
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "container-input", children: [
|
|
2601
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
|
|
2602
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "body-1", children: label }),
|
|
2878
2603
|
" ",
|
|
2879
|
-
required && /* @__PURE__ */
|
|
2604
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2880
2605
|
] }),
|
|
2881
|
-
/* @__PURE__ */
|
|
2882
|
-
|
|
2606
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2607
|
+
import_antd13.Select,
|
|
2883
2608
|
{
|
|
2884
2609
|
value,
|
|
2885
2610
|
onChange: handleChange,
|
|
@@ -2889,16 +2614,16 @@ function SelectCustom({
|
|
|
2889
2614
|
onClear
|
|
2890
2615
|
}
|
|
2891
2616
|
),
|
|
2892
|
-
error && /* @__PURE__ */
|
|
2893
|
-
/* @__PURE__ */
|
|
2894
|
-
/* @__PURE__ */
|
|
2895
|
-
/* @__PURE__ */
|
|
2617
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-red-500 caption-1", children: error }),
|
|
2618
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
|
|
2619
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row gap-[8px]", children: [
|
|
2620
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { children: [
|
|
2896
2621
|
index + 1,
|
|
2897
2622
|
"."
|
|
2898
2623
|
] }),
|
|
2899
|
-
/* @__PURE__ */
|
|
2624
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { children: v })
|
|
2900
2625
|
] }),
|
|
2901
|
-
/* @__PURE__ */
|
|
2626
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react8.IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
|
|
2902
2627
|
] }, index)) })
|
|
2903
2628
|
] })
|
|
2904
2629
|
}
|
|
@@ -2906,8 +2631,8 @@ function SelectCustom({
|
|
|
2906
2631
|
}
|
|
2907
2632
|
|
|
2908
2633
|
// src/SortFilter/SortFilter.tsx
|
|
2909
|
-
|
|
2910
|
-
|
|
2634
|
+
var import_antd14 = require("antd");
|
|
2635
|
+
var import_icons3 = require("@ant-design/icons");
|
|
2911
2636
|
|
|
2912
2637
|
// src/SortFilter/DataMockSortFilter.ts
|
|
2913
2638
|
var years = [
|
|
@@ -2937,9 +2662,9 @@ var quarters = [
|
|
|
2937
2662
|
];
|
|
2938
2663
|
|
|
2939
2664
|
// src/SortFilter/SortFilter.tsx
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2665
|
+
var import_react10 = require("react");
|
|
2666
|
+
var import_icons_react9 = require("@tabler/icons-react");
|
|
2667
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2943
2668
|
function SortFilter({
|
|
2944
2669
|
showYear = true,
|
|
2945
2670
|
showQuarter = true,
|
|
@@ -2947,23 +2672,23 @@ function SortFilter({
|
|
|
2947
2672
|
onSortClick,
|
|
2948
2673
|
onFilterClick
|
|
2949
2674
|
}) {
|
|
2950
|
-
const [yearValue, setYearValue] =
|
|
2951
|
-
const [monthValue, setMonthValue] =
|
|
2952
|
-
const [quarterValue, setQuartersValue] =
|
|
2953
|
-
return /* @__PURE__ */
|
|
2954
|
-
|
|
2675
|
+
const [yearValue, setYearValue] = (0, import_react10.useState)();
|
|
2676
|
+
const [monthValue, setMonthValue] = (0, import_react10.useState)();
|
|
2677
|
+
const [quarterValue, setQuartersValue] = (0, import_react10.useState)();
|
|
2678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2679
|
+
import_antd14.ConfigProvider,
|
|
2955
2680
|
{
|
|
2956
2681
|
theme: {
|
|
2957
2682
|
token: {
|
|
2958
2683
|
fontFamily: "Kanit"
|
|
2959
2684
|
}
|
|
2960
2685
|
},
|
|
2961
|
-
children: /* @__PURE__ */
|
|
2962
|
-
/* @__PURE__ */
|
|
2963
|
-
showYear && /* @__PURE__ */
|
|
2686
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full flex items-center justify-between", children: [
|
|
2687
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full flex gap-[10px]", children: [
|
|
2688
|
+
showYear && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2964
2689
|
SelectField,
|
|
2965
2690
|
{
|
|
2966
|
-
prefix: /* @__PURE__ */
|
|
2691
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
|
|
2967
2692
|
onChange: setYearValue,
|
|
2968
2693
|
options: years.map((s) => ({
|
|
2969
2694
|
value: s.value,
|
|
@@ -2973,10 +2698,10 @@ function SortFilter({
|
|
|
2973
2698
|
value: yearValue
|
|
2974
2699
|
}
|
|
2975
2700
|
) }),
|
|
2976
|
-
showMonth && /* @__PURE__ */
|
|
2701
|
+
showMonth && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2977
2702
|
SelectField,
|
|
2978
2703
|
{
|
|
2979
|
-
prefix: /* @__PURE__ */
|
|
2704
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
|
|
2980
2705
|
onChange: setMonthValue,
|
|
2981
2706
|
options: months.map((s) => ({
|
|
2982
2707
|
value: s.value,
|
|
@@ -2986,10 +2711,10 @@ function SortFilter({
|
|
|
2986
2711
|
placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
|
|
2987
2712
|
}
|
|
2988
2713
|
) }),
|
|
2989
|
-
showQuarter && /* @__PURE__ */
|
|
2714
|
+
showQuarter && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2990
2715
|
SelectField,
|
|
2991
2716
|
{
|
|
2992
|
-
prefix: /* @__PURE__ */
|
|
2717
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
|
|
2993
2718
|
onChange: setQuartersValue,
|
|
2994
2719
|
options: quarters.map((s) => ({
|
|
2995
2720
|
value: s.value,
|
|
@@ -3000,17 +2725,17 @@ function SortFilter({
|
|
|
3000
2725
|
}
|
|
3001
2726
|
) })
|
|
3002
2727
|
] }),
|
|
3003
|
-
/* @__PURE__ */
|
|
3004
|
-
/* @__PURE__ */
|
|
3005
|
-
|
|
2728
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex gap-[10px]", children: [
|
|
2729
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2730
|
+
import_icons_react9.IconSortDescending,
|
|
3006
2731
|
{
|
|
3007
2732
|
size: 24,
|
|
3008
2733
|
className: "cursor-pointer",
|
|
3009
2734
|
onClick: onSortClick
|
|
3010
2735
|
}
|
|
3011
2736
|
),
|
|
3012
|
-
/* @__PURE__ */
|
|
3013
|
-
IconFilter,
|
|
2737
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2738
|
+
import_icons_react9.IconFilter,
|
|
3014
2739
|
{
|
|
3015
2740
|
size: 24,
|
|
3016
2741
|
className: "cursor-pointer",
|
|
@@ -3024,9 +2749,9 @@ function SortFilter({
|
|
|
3024
2749
|
}
|
|
3025
2750
|
|
|
3026
2751
|
// src/Upload/FileUploader/FileUploader.tsx
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
|
|
2752
|
+
var import_icons_react10 = require("@tabler/icons-react");
|
|
2753
|
+
var import_react11 = require("react");
|
|
2754
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3030
2755
|
function FileUploader({
|
|
3031
2756
|
onUpload,
|
|
3032
2757
|
onError,
|
|
@@ -3038,10 +2763,10 @@ function FileUploader({
|
|
|
3038
2763
|
description,
|
|
3039
2764
|
label
|
|
3040
2765
|
}) {
|
|
3041
|
-
const [fileList, setFileList] =
|
|
3042
|
-
const [uploading, setUploading] =
|
|
3043
|
-
const [dragActive, setDragActive] =
|
|
3044
|
-
const inputRef =
|
|
2766
|
+
const [fileList, setFileList] = (0, import_react11.useState)([]);
|
|
2767
|
+
const [uploading, setUploading] = (0, import_react11.useState)(false);
|
|
2768
|
+
const [dragActive, setDragActive] = (0, import_react11.useState)(false);
|
|
2769
|
+
const inputRef = (0, import_react11.useRef)(null);
|
|
3045
2770
|
const validateFile = (file) => {
|
|
3046
2771
|
if (accept && !accept.includes(file.type)) {
|
|
3047
2772
|
onError?.(`Invalid file type. file: ${file.name}`);
|
|
@@ -3097,10 +2822,10 @@ function FileUploader({
|
|
|
3097
2822
|
}
|
|
3098
2823
|
if (inputRef.current) inputRef.current.value = "";
|
|
3099
2824
|
};
|
|
3100
|
-
return /* @__PURE__ */
|
|
3101
|
-
label && /* @__PURE__ */
|
|
3102
|
-
/* @__PURE__ */
|
|
3103
|
-
mode === "upload" ? /* @__PURE__ */
|
|
2825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full", children: [
|
|
2826
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "body-1", children: label }),
|
|
2827
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
|
|
2828
|
+
mode === "upload" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3104
2829
|
"button",
|
|
3105
2830
|
{
|
|
3106
2831
|
type: "button",
|
|
@@ -3108,15 +2833,15 @@ function FileUploader({
|
|
|
3108
2833
|
className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1
|
|
3109
2834
|
${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
|
|
3110
2835
|
disabled: disabled ? disabled : uploading,
|
|
3111
|
-
children: uploading ? /* @__PURE__ */
|
|
3112
|
-
/* @__PURE__ */
|
|
2836
|
+
children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
|
|
2837
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { size: 15 }),
|
|
3113
2838
|
" \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
|
|
3114
|
-
] }) : /* @__PURE__ */
|
|
3115
|
-
/* @__PURE__ */
|
|
2839
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
|
|
2840
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconUpload, { size: 15, className: "text-gray-400" }),
|
|
3116
2841
|
" \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
|
|
3117
2842
|
] })
|
|
3118
2843
|
}
|
|
3119
|
-
) : /* @__PURE__ */
|
|
2844
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3120
2845
|
"div",
|
|
3121
2846
|
{
|
|
3122
2847
|
className: `min-w-[400px] min-h-[120px] flex justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
|
|
@@ -3130,17 +2855,17 @@ function FileUploader({
|
|
|
3130
2855
|
},
|
|
3131
2856
|
onDragLeave: () => setDragActive(false),
|
|
3132
2857
|
onDrop: handleDrop,
|
|
3133
|
-
children: uploading ? /* @__PURE__ */
|
|
3134
|
-
/* @__PURE__ */
|
|
2858
|
+
children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-center items-center gap-2", children: [
|
|
2859
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { size: 15 }),
|
|
3135
2860
|
" \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
|
|
3136
|
-
] }) : /* @__PURE__ */
|
|
3137
|
-
/* @__PURE__ */
|
|
3138
|
-
/* @__PURE__ */
|
|
3139
|
-
/* @__PURE__ */
|
|
2861
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
|
|
2862
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconUpload, { size: 20 }),
|
|
2863
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
|
|
2864
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
|
|
3140
2865
|
] })
|
|
3141
2866
|
}
|
|
3142
2867
|
),
|
|
3143
|
-
/* @__PURE__ */
|
|
2868
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3144
2869
|
"input",
|
|
3145
2870
|
{
|
|
3146
2871
|
type: "file",
|
|
@@ -3153,14 +2878,14 @@ function FileUploader({
|
|
|
3153
2878
|
}
|
|
3154
2879
|
)
|
|
3155
2880
|
] }),
|
|
3156
|
-
description && /* @__PURE__ */
|
|
3157
|
-
/* @__PURE__ */
|
|
3158
|
-
/* @__PURE__ */
|
|
3159
|
-
/* @__PURE__ */
|
|
3160
|
-
/* @__PURE__ */
|
|
2881
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-gray-400 body-4", children: description }),
|
|
2882
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
|
|
2883
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
|
|
2884
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconPaperclip, { size: 15 }) }),
|
|
2885
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: file.name })
|
|
3161
2886
|
] }),
|
|
3162
|
-
/* @__PURE__ */
|
|
3163
|
-
|
|
2887
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2888
|
+
import_icons_react10.IconTrash,
|
|
3164
2889
|
{
|
|
3165
2890
|
size: 20,
|
|
3166
2891
|
className: "ml-auto hover:text-red-500 cursor-pointer",
|
|
@@ -3193,9 +2918,9 @@ function messageLoading(content, duration) {
|
|
|
3193
2918
|
}
|
|
3194
2919
|
|
|
3195
2920
|
// src/Breadcrumb/Breadcrumb.tsx
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
2921
|
+
var import_antd15 = require("antd");
|
|
2922
|
+
var import_antd16 = require("antd");
|
|
2923
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3199
2924
|
function Breadcrumbs({
|
|
3200
2925
|
items,
|
|
3201
2926
|
separator,
|
|
@@ -3203,16 +2928,16 @@ function Breadcrumbs({
|
|
|
3203
2928
|
classname,
|
|
3204
2929
|
params
|
|
3205
2930
|
}) {
|
|
3206
|
-
return /* @__PURE__ */
|
|
3207
|
-
|
|
2931
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2932
|
+
import_antd15.ConfigProvider,
|
|
3208
2933
|
{
|
|
3209
2934
|
theme: {
|
|
3210
2935
|
token: {
|
|
3211
2936
|
fontFamily: "Kanit"
|
|
3212
2937
|
}
|
|
3213
2938
|
},
|
|
3214
|
-
children: /* @__PURE__ */
|
|
3215
|
-
Breadcrumb,
|
|
2939
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2940
|
+
import_antd16.Breadcrumb,
|
|
3216
2941
|
{
|
|
3217
2942
|
items,
|
|
3218
2943
|
separator,
|
|
@@ -3226,8 +2951,8 @@ function Breadcrumbs({
|
|
|
3226
2951
|
}
|
|
3227
2952
|
|
|
3228
2953
|
// src/HeadingPage/HeadingPage.tsx
|
|
3229
|
-
|
|
3230
|
-
|
|
2954
|
+
var import_antd17 = require("antd");
|
|
2955
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3231
2956
|
function HeadingPage({ Heading }) {
|
|
3232
2957
|
const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
|
|
3233
2958
|
weekday: "long",
|
|
@@ -3235,17 +2960,17 @@ function HeadingPage({ Heading }) {
|
|
|
3235
2960
|
month: "long",
|
|
3236
2961
|
year: "numeric"
|
|
3237
2962
|
});
|
|
3238
|
-
return /* @__PURE__ */
|
|
3239
|
-
|
|
2963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2964
|
+
import_antd17.ConfigProvider,
|
|
3240
2965
|
{
|
|
3241
2966
|
theme: {
|
|
3242
2967
|
token: {
|
|
3243
2968
|
fontFamily: "Kanit"
|
|
3244
2969
|
}
|
|
3245
2970
|
},
|
|
3246
|
-
children: /* @__PURE__ */
|
|
3247
|
-
/* @__PURE__ */
|
|
3248
|
-
/* @__PURE__ */
|
|
2971
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
|
|
2972
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "headline-5", children: Heading }),
|
|
2973
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "body-1", children: [
|
|
3249
2974
|
" \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
|
|
3250
2975
|
today
|
|
3251
2976
|
] })
|
|
@@ -3255,9 +2980,9 @@ function HeadingPage({ Heading }) {
|
|
|
3255
2980
|
}
|
|
3256
2981
|
|
|
3257
2982
|
// src/Progress/ProgressBar.tsx
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
2983
|
+
var import_antd18 = require("antd");
|
|
2984
|
+
var import_react12 = require("react");
|
|
2985
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3261
2986
|
function ProgressBar({
|
|
3262
2987
|
percent = 0,
|
|
3263
2988
|
size = "default",
|
|
@@ -3270,8 +2995,8 @@ function ProgressBar({
|
|
|
3270
2995
|
steps,
|
|
3271
2996
|
isCheckPoints
|
|
3272
2997
|
}) {
|
|
3273
|
-
const [barWidth, setBarWidth] =
|
|
3274
|
-
const progressRef =
|
|
2998
|
+
const [barWidth, setBarWidth] = (0, import_react12.useState)(0);
|
|
2999
|
+
const progressRef = (0, import_react12.useRef)(null);
|
|
3275
3000
|
let strokeColor = "--color-green-500";
|
|
3276
3001
|
const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
|
|
3277
3002
|
const defaultSize = type === "circle" ? 43 : size;
|
|
@@ -3279,7 +3004,7 @@ function ProgressBar({
|
|
|
3279
3004
|
const minCheckpoint = Math.min(...checkpoints);
|
|
3280
3005
|
strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
|
|
3281
3006
|
}
|
|
3282
|
-
|
|
3007
|
+
(0, import_react12.useEffect)(() => {
|
|
3283
3008
|
const inner = progressRef.current?.querySelector(".ant-progress-inner");
|
|
3284
3009
|
if (!inner) return;
|
|
3285
3010
|
const observer = new ResizeObserver(() => {
|
|
@@ -3288,17 +3013,17 @@ function ProgressBar({
|
|
|
3288
3013
|
observer.observe(inner);
|
|
3289
3014
|
return () => observer.disconnect();
|
|
3290
3015
|
}, []);
|
|
3291
|
-
return /* @__PURE__ */
|
|
3292
|
-
|
|
3016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3017
|
+
import_antd18.ConfigProvider,
|
|
3293
3018
|
{
|
|
3294
3019
|
theme: {
|
|
3295
3020
|
token: {
|
|
3296
3021
|
fontFamily: "Kanit"
|
|
3297
3022
|
}
|
|
3298
3023
|
},
|
|
3299
|
-
children: /* @__PURE__ */
|
|
3300
|
-
/* @__PURE__ */
|
|
3301
|
-
Progress,
|
|
3024
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
|
|
3025
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3026
|
+
import_antd18.Progress,
|
|
3302
3027
|
{
|
|
3303
3028
|
className: "w-full",
|
|
3304
3029
|
percent,
|
|
@@ -3313,7 +3038,7 @@ function ProgressBar({
|
|
|
3313
3038
|
strokeColor
|
|
3314
3039
|
}
|
|
3315
3040
|
),
|
|
3316
|
-
barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */
|
|
3041
|
+
barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3317
3042
|
"div",
|
|
3318
3043
|
{
|
|
3319
3044
|
className: "checkpoint absolute top-0",
|
|
@@ -3335,25 +3060,25 @@ function ProgressBar({
|
|
|
3335
3060
|
}
|
|
3336
3061
|
|
|
3337
3062
|
// src/KpiSection/KpiSection.tsx
|
|
3338
|
-
|
|
3339
|
-
|
|
3063
|
+
var import_antd19 = require("antd");
|
|
3064
|
+
var import_react14 = require("react");
|
|
3340
3065
|
|
|
3341
3066
|
// src/KpiSection/hooks/useGetKpiSection.ts
|
|
3342
|
-
|
|
3343
|
-
|
|
3067
|
+
var import_react13 = require("react");
|
|
3068
|
+
var import_cuid = __toESM(require("cuid"));
|
|
3344
3069
|
function useGetKpiSection() {
|
|
3345
|
-
const [nameKpi, setNameKpi] =
|
|
3346
|
-
const [kpiValue, setKpiValue] =
|
|
3347
|
-
const [unitValue, setUnitValue] =
|
|
3348
|
-
const [kpiList, setKpiList] =
|
|
3349
|
-
const [editingBackup, setEditingBackup] =
|
|
3350
|
-
const [selected, setSelected] =
|
|
3351
|
-
const [errors, setErrors] =
|
|
3070
|
+
const [nameKpi, setNameKpi] = (0, import_react13.useState)("");
|
|
3071
|
+
const [kpiValue, setKpiValue] = (0, import_react13.useState)("");
|
|
3072
|
+
const [unitValue, setUnitValue] = (0, import_react13.useState)("");
|
|
3073
|
+
const [kpiList, setKpiList] = (0, import_react13.useState)([]);
|
|
3074
|
+
const [editingBackup, setEditingBackup] = (0, import_react13.useState)({});
|
|
3075
|
+
const [selected, setSelected] = (0, import_react13.useState)("2");
|
|
3076
|
+
const [errors, setErrors] = (0, import_react13.useState)({
|
|
3352
3077
|
nameKpi: "",
|
|
3353
3078
|
kpiValue: "",
|
|
3354
3079
|
unitValue: ""
|
|
3355
3080
|
});
|
|
3356
|
-
const [itemErrors, setItemErrors] =
|
|
3081
|
+
const [itemErrors, setItemErrors] = (0, import_react13.useState)({});
|
|
3357
3082
|
const options = [
|
|
3358
3083
|
{ value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
|
|
3359
3084
|
{ value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
|
|
@@ -3378,7 +3103,7 @@ function useGetKpiSection() {
|
|
|
3378
3103
|
setErrors(newErrors);
|
|
3379
3104
|
if (hasError) return;
|
|
3380
3105
|
const newKpi = {
|
|
3381
|
-
id:
|
|
3106
|
+
id: (0, import_cuid.default)(),
|
|
3382
3107
|
name: nameKpi,
|
|
3383
3108
|
value: kpiValue,
|
|
3384
3109
|
unit: unitValue,
|
|
@@ -3485,8 +3210,8 @@ function useGetKpiSection() {
|
|
|
3485
3210
|
}
|
|
3486
3211
|
|
|
3487
3212
|
// src/KpiSection/KpiSection.tsx
|
|
3488
|
-
|
|
3489
|
-
|
|
3213
|
+
var import_icons_react11 = require("@tabler/icons-react");
|
|
3214
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3490
3215
|
function KpiSection({ type, onChangeKpiList }) {
|
|
3491
3216
|
const {
|
|
3492
3217
|
handleAddKpi,
|
|
@@ -3506,18 +3231,18 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3506
3231
|
itemErrors,
|
|
3507
3232
|
setItemErrors
|
|
3508
3233
|
} = useGetKpiSection();
|
|
3509
|
-
const [messageApi2, messageContainer] = message.useMessage();
|
|
3510
|
-
const [hasShownError, setHasShownError] =
|
|
3511
|
-
|
|
3234
|
+
const [messageApi2, messageContainer] = import_antd19.message.useMessage();
|
|
3235
|
+
const [hasShownError, setHasShownError] = (0, import_react14.useState)(false);
|
|
3236
|
+
(0, import_react14.useEffect)(() => {
|
|
3512
3237
|
setMessageApi(messageApi2);
|
|
3513
3238
|
}, [messageApi2]);
|
|
3514
|
-
|
|
3239
|
+
(0, import_react14.useEffect)(() => {
|
|
3515
3240
|
if (onChangeKpiList) {
|
|
3516
3241
|
onChangeKpiList(kpiList);
|
|
3517
3242
|
}
|
|
3518
3243
|
}, [kpiList]);
|
|
3519
|
-
return /* @__PURE__ */
|
|
3520
|
-
|
|
3244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3245
|
+
import_antd19.ConfigProvider,
|
|
3521
3246
|
{
|
|
3522
3247
|
theme: {
|
|
3523
3248
|
token: {
|
|
@@ -3525,11 +3250,11 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3525
3250
|
fontSize: 16
|
|
3526
3251
|
}
|
|
3527
3252
|
},
|
|
3528
|
-
children: /* @__PURE__ */
|
|
3253
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "container-input", children: [
|
|
3529
3254
|
messageContainer,
|
|
3530
|
-
type === "number" && /* @__PURE__ */
|
|
3531
|
-
/* @__PURE__ */
|
|
3532
|
-
/* @__PURE__ */
|
|
3255
|
+
type === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "space-y-4", children: [
|
|
3256
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
|
|
3257
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3533
3258
|
InputField,
|
|
3534
3259
|
{
|
|
3535
3260
|
value: nameKpi,
|
|
@@ -3541,7 +3266,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3541
3266
|
error: errors.nameKpi
|
|
3542
3267
|
}
|
|
3543
3268
|
),
|
|
3544
|
-
/* @__PURE__ */
|
|
3269
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3545
3270
|
InputField,
|
|
3546
3271
|
{
|
|
3547
3272
|
value: kpiValue,
|
|
@@ -3565,7 +3290,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3565
3290
|
error: errors.kpiValue
|
|
3566
3291
|
}
|
|
3567
3292
|
),
|
|
3568
|
-
/* @__PURE__ */
|
|
3293
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3569
3294
|
InputField,
|
|
3570
3295
|
{
|
|
3571
3296
|
value: unitValue,
|
|
@@ -3577,8 +3302,8 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3577
3302
|
error: errors.unitValue
|
|
3578
3303
|
}
|
|
3579
3304
|
),
|
|
3580
|
-
/* @__PURE__ */
|
|
3581
|
-
IconCirclePlus,
|
|
3305
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3306
|
+
import_icons_react11.IconCirclePlus,
|
|
3582
3307
|
{
|
|
3583
3308
|
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
3584
3309
|
stroke: 1,
|
|
@@ -3586,17 +3311,17 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3586
3311
|
}
|
|
3587
3312
|
) })
|
|
3588
3313
|
] }),
|
|
3589
|
-
/* @__PURE__ */
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3590
3315
|
"div",
|
|
3591
3316
|
{
|
|
3592
3317
|
className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
|
|
3593
3318
|
children: [
|
|
3594
|
-
/* @__PURE__ */
|
|
3319
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3595
3320
|
index + 1,
|
|
3596
3321
|
"."
|
|
3597
3322
|
] }),
|
|
3598
|
-
kpi.isEditing ? /* @__PURE__ */
|
|
3599
|
-
/* @__PURE__ */
|
|
3323
|
+
kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3324
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3600
3325
|
InputField,
|
|
3601
3326
|
{
|
|
3602
3327
|
value: kpi.name,
|
|
@@ -3606,7 +3331,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3606
3331
|
error: itemErrors[kpi.id]?.name
|
|
3607
3332
|
}
|
|
3608
3333
|
),
|
|
3609
|
-
/* @__PURE__ */
|
|
3334
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3610
3335
|
InputField,
|
|
3611
3336
|
{
|
|
3612
3337
|
value: kpi.value?.toString(),
|
|
@@ -3631,7 +3356,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3631
3356
|
error: itemErrors[kpi.id]?.value
|
|
3632
3357
|
}
|
|
3633
3358
|
),
|
|
3634
|
-
/* @__PURE__ */
|
|
3359
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3635
3360
|
InputField,
|
|
3636
3361
|
{
|
|
3637
3362
|
value: kpi.unit,
|
|
@@ -3641,29 +3366,29 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3641
3366
|
error: itemErrors[kpi.id]?.unit
|
|
3642
3367
|
}
|
|
3643
3368
|
),
|
|
3644
|
-
/* @__PURE__ */
|
|
3369
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3645
3370
|
"div",
|
|
3646
3371
|
{
|
|
3647
3372
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3648
3373
|
children: [
|
|
3649
|
-
/* @__PURE__ */
|
|
3650
|
-
|
|
3374
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3375
|
+
import_icons_react11.IconCheck,
|
|
3651
3376
|
{
|
|
3652
3377
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3653
3378
|
onClick: () => handleSave(kpi.id, type)
|
|
3654
3379
|
}
|
|
3655
3380
|
),
|
|
3656
|
-
/* @__PURE__ */
|
|
3381
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconX, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
|
|
3657
3382
|
]
|
|
3658
3383
|
}
|
|
3659
3384
|
)
|
|
3660
|
-
] }) : /* @__PURE__ */
|
|
3661
|
-
/* @__PURE__ */
|
|
3662
|
-
/* @__PURE__ */
|
|
3663
|
-
/* @__PURE__ */
|
|
3664
|
-
/* @__PURE__ */
|
|
3665
|
-
/* @__PURE__ */
|
|
3666
|
-
/* @__PURE__ */
|
|
3385
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3386
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.name }),
|
|
3387
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.value }),
|
|
3388
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.unit }),
|
|
3389
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-3 justify-end", children: [
|
|
3390
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconTrash, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
|
|
3667
3392
|
] })
|
|
3668
3393
|
] })
|
|
3669
3394
|
]
|
|
@@ -3671,9 +3396,9 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3671
3396
|
kpi.id
|
|
3672
3397
|
)) })
|
|
3673
3398
|
] }),
|
|
3674
|
-
type === "text" && /* @__PURE__ */
|
|
3675
|
-
/* @__PURE__ */
|
|
3676
|
-
/* @__PURE__ */
|
|
3399
|
+
type === "text" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "space-y-4", children: [
|
|
3400
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
|
|
3401
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3677
3402
|
InputField,
|
|
3678
3403
|
{
|
|
3679
3404
|
value: nameKpi,
|
|
@@ -3685,8 +3410,8 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3685
3410
|
error: errors.nameKpi
|
|
3686
3411
|
}
|
|
3687
3412
|
),
|
|
3688
|
-
/* @__PURE__ */
|
|
3689
|
-
IconCirclePlus,
|
|
3413
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3414
|
+
import_icons_react11.IconCirclePlus,
|
|
3690
3415
|
{
|
|
3691
3416
|
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
3692
3417
|
stroke: 1,
|
|
@@ -3694,13 +3419,13 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3694
3419
|
}
|
|
3695
3420
|
) })
|
|
3696
3421
|
] }),
|
|
3697
|
-
/* @__PURE__ */
|
|
3698
|
-
/* @__PURE__ */
|
|
3422
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
|
|
3423
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3699
3424
|
index + 1,
|
|
3700
3425
|
"."
|
|
3701
3426
|
] }),
|
|
3702
|
-
kpi.isEditing ? /* @__PURE__ */
|
|
3703
|
-
/* @__PURE__ */
|
|
3427
|
+
kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3428
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3704
3429
|
InputField,
|
|
3705
3430
|
{
|
|
3706
3431
|
value: kpi.name,
|
|
@@ -3710,27 +3435,27 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3710
3435
|
error: itemErrors[kpi.id]?.name
|
|
3711
3436
|
}
|
|
3712
3437
|
),
|
|
3713
|
-
/* @__PURE__ */
|
|
3438
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3714
3439
|
"div",
|
|
3715
3440
|
{
|
|
3716
3441
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3717
3442
|
children: [
|
|
3718
|
-
/* @__PURE__ */
|
|
3719
|
-
|
|
3443
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3444
|
+
import_icons_react11.IconCheck,
|
|
3720
3445
|
{
|
|
3721
3446
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3722
3447
|
onClick: () => handleSave(kpi.id, type)
|
|
3723
3448
|
}
|
|
3724
3449
|
),
|
|
3725
|
-
/* @__PURE__ */
|
|
3450
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconX, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
|
|
3726
3451
|
]
|
|
3727
3452
|
}
|
|
3728
3453
|
)
|
|
3729
|
-
] }) : /* @__PURE__ */
|
|
3730
|
-
/* @__PURE__ */
|
|
3731
|
-
/* @__PURE__ */
|
|
3732
|
-
/* @__PURE__ */
|
|
3733
|
-
/* @__PURE__ */
|
|
3454
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3455
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.name }),
|
|
3456
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-3 justify-end", children: [
|
|
3457
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
|
|
3458
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconTrash, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
|
|
3734
3459
|
] })
|
|
3735
3460
|
] })
|
|
3736
3461
|
] }, kpi.id)) })
|
|
@@ -3741,17 +3466,17 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3741
3466
|
}
|
|
3742
3467
|
|
|
3743
3468
|
// src/Modal/Modal/Modal.tsx
|
|
3744
|
-
|
|
3745
|
-
|
|
3469
|
+
var import_antd20 = require("antd");
|
|
3470
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3746
3471
|
function AntDModal({ children, isOpen, width, onCancel }) {
|
|
3747
|
-
return /* @__PURE__ */
|
|
3472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_antd20.Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children }) }) });
|
|
3748
3473
|
}
|
|
3749
3474
|
|
|
3750
3475
|
// src/Indicator/Indicator/Indicator.tsx
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3476
|
+
var import_icons_react12 = require("@tabler/icons-react");
|
|
3477
|
+
var import_react15 = require("react");
|
|
3478
|
+
var import_antd21 = require("antd");
|
|
3479
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3755
3480
|
function Indicator({
|
|
3756
3481
|
option = [
|
|
3757
3482
|
{ value: "TEXT", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
|
|
@@ -3761,22 +3486,22 @@ function Indicator({
|
|
|
3761
3486
|
arrayData,
|
|
3762
3487
|
setArrayData
|
|
3763
3488
|
}) {
|
|
3764
|
-
const [valueSwitch, setValueSwitch] =
|
|
3765
|
-
const [cacheData, setCacheData] =
|
|
3489
|
+
const [valueSwitch, setValueSwitch] = (0, import_react15.useState)("TEXT");
|
|
3490
|
+
const [cacheData, setCacheData] = (0, import_react15.useState)({
|
|
3766
3491
|
indicatorType: type,
|
|
3767
3492
|
inputType: valueSwitch,
|
|
3768
3493
|
textValue: "",
|
|
3769
3494
|
numberValue: "",
|
|
3770
3495
|
unit: ""
|
|
3771
3496
|
});
|
|
3772
|
-
const [cacheEditData, setCacheEditData] =
|
|
3497
|
+
const [cacheEditData, setCacheEditData] = (0, import_react15.useState)({
|
|
3773
3498
|
indicatorType: type,
|
|
3774
3499
|
inputType: valueSwitch,
|
|
3775
3500
|
textValue: "",
|
|
3776
3501
|
numberValue: "",
|
|
3777
3502
|
unit: ""
|
|
3778
3503
|
});
|
|
3779
|
-
const [editIndex, setEditIndex] =
|
|
3504
|
+
const [editIndex, setEditIndex] = (0, import_react15.useState)(null);
|
|
3780
3505
|
const handleAddIndicator = () => {
|
|
3781
3506
|
if (cacheData.textValue.trim() === "") return;
|
|
3782
3507
|
setArrayData([
|
|
@@ -3833,14 +3558,14 @@ function Indicator({
|
|
|
3833
3558
|
}));
|
|
3834
3559
|
console.log(cacheEditData);
|
|
3835
3560
|
};
|
|
3836
|
-
return /* @__PURE__ */
|
|
3837
|
-
/* @__PURE__ */
|
|
3561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full", children: [
|
|
3562
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
3838
3563
|
"div",
|
|
3839
3564
|
{
|
|
3840
3565
|
className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
|
|
3841
3566
|
children: [
|
|
3842
|
-
/* @__PURE__ */
|
|
3843
|
-
/* @__PURE__ */
|
|
3567
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
|
|
3568
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3844
3569
|
InputField,
|
|
3845
3570
|
{
|
|
3846
3571
|
label: `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
|
|
@@ -3851,8 +3576,8 @@ function Indicator({
|
|
|
3851
3576
|
required: true
|
|
3852
3577
|
}
|
|
3853
3578
|
),
|
|
3854
|
-
valueSwitch === "NUMBER" && /* @__PURE__ */
|
|
3855
|
-
/* @__PURE__ */
|
|
3579
|
+
valueSwitch === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
3580
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3856
3581
|
InputFieldNumber,
|
|
3857
3582
|
{
|
|
3858
3583
|
label: `\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
|
|
@@ -3863,7 +3588,7 @@ function Indicator({
|
|
|
3863
3588
|
required: true
|
|
3864
3589
|
}
|
|
3865
3590
|
),
|
|
3866
|
-
/* @__PURE__ */
|
|
3591
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3867
3592
|
InputField,
|
|
3868
3593
|
{
|
|
3869
3594
|
label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
|
|
@@ -3875,18 +3600,18 @@ function Indicator({
|
|
|
3875
3600
|
}
|
|
3876
3601
|
)
|
|
3877
3602
|
] }),
|
|
3878
|
-
/* @__PURE__ */
|
|
3603
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconCirclePlus, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
|
|
3879
3604
|
]
|
|
3880
3605
|
}
|
|
3881
3606
|
),
|
|
3882
|
-
/* @__PURE__ */
|
|
3607
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: arrayData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
3883
3608
|
"div",
|
|
3884
3609
|
{
|
|
3885
3610
|
className: `space-y-4 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
|
|
3886
3611
|
children: [
|
|
3887
|
-
/* @__PURE__ */
|
|
3888
|
-
index === editIndex ? /* @__PURE__ */
|
|
3889
|
-
|
|
3612
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
|
|
3613
|
+
index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3614
|
+
import_antd21.Input,
|
|
3890
3615
|
{
|
|
3891
3616
|
className: "body-1 mt-2",
|
|
3892
3617
|
variant: "underlined",
|
|
@@ -3894,10 +3619,10 @@ function Indicator({
|
|
|
3894
3619
|
name: "textValue",
|
|
3895
3620
|
onChange: (e) => handleChangeEditCashData(e)
|
|
3896
3621
|
}
|
|
3897
|
-
) : /* @__PURE__ */
|
|
3898
|
-
item.inputType === "NUMBER" && /* @__PURE__ */
|
|
3899
|
-
index === editIndex ? /* @__PURE__ */
|
|
3900
|
-
|
|
3622
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
|
|
3623
|
+
item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
3624
|
+
index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3625
|
+
import_antd21.Input,
|
|
3901
3626
|
{
|
|
3902
3627
|
className: "body-1 mt-2",
|
|
3903
3628
|
variant: "underlined",
|
|
@@ -3905,9 +3630,9 @@ function Indicator({
|
|
|
3905
3630
|
name: "numberValue",
|
|
3906
3631
|
onChange: (e) => handleChangeEditCashData(e)
|
|
3907
3632
|
}
|
|
3908
|
-
) : /* @__PURE__ */
|
|
3909
|
-
index === editIndex ? /* @__PURE__ */
|
|
3910
|
-
|
|
3633
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
|
|
3634
|
+
index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3635
|
+
import_antd21.Input,
|
|
3911
3636
|
{
|
|
3912
3637
|
className: "body-1 mt-2",
|
|
3913
3638
|
variant: "underlined",
|
|
@@ -3915,19 +3640,19 @@ function Indicator({
|
|
|
3915
3640
|
name: "unit",
|
|
3916
3641
|
onChange: (e) => handleChangeEditCashData(e)
|
|
3917
3642
|
}
|
|
3918
|
-
) : /* @__PURE__ */
|
|
3643
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.unit })
|
|
3919
3644
|
] }),
|
|
3920
|
-
/* @__PURE__ */
|
|
3921
|
-
/* @__PURE__ */
|
|
3922
|
-
|
|
3645
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex", children: [
|
|
3646
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3647
|
+
import_icons_react12.IconCheck,
|
|
3923
3648
|
{
|
|
3924
3649
|
className: "cursor-pointer text-green-600",
|
|
3925
3650
|
onClick: () => handleConfirmEditIndicator(index)
|
|
3926
3651
|
}
|
|
3927
3652
|
),
|
|
3928
|
-
/* @__PURE__ */
|
|
3929
|
-
] }) : void 0 : /* @__PURE__ */
|
|
3930
|
-
/* @__PURE__ */
|
|
3653
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconX, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
|
|
3654
|
+
] }) : void 0 : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconPencil, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
|
|
3655
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconTrash, { onClick: () => handleDeleteIndicator(index) }) })
|
|
3931
3656
|
]
|
|
3932
3657
|
}
|
|
3933
3658
|
)) })
|
|
@@ -3935,32 +3660,32 @@ function Indicator({
|
|
|
3935
3660
|
}
|
|
3936
3661
|
|
|
3937
3662
|
// src/FilterPopUp/FilterPopUp.tsx
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3663
|
+
var import_icons_react13 = require("@tabler/icons-react");
|
|
3664
|
+
var import_react16 = require("react");
|
|
3665
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3941
3666
|
var FilterPopUp = (filter) => {
|
|
3942
|
-
const [isAction, setIsAction] =
|
|
3943
|
-
const [filterArray, setFilterArray] =
|
|
3667
|
+
const [isAction, setIsAction] = (0, import_react16.useState)(true);
|
|
3668
|
+
const [filterArray, setFilterArray] = (0, import_react16.useState)([""]);
|
|
3944
3669
|
const handleClearFilter = () => {
|
|
3945
3670
|
setFilterArray([]);
|
|
3946
3671
|
};
|
|
3947
3672
|
const handleSubmitFilter = () => {
|
|
3948
3673
|
filter.handleSearch(filterArray);
|
|
3949
3674
|
};
|
|
3950
|
-
return /* @__PURE__ */
|
|
3951
|
-
/* @__PURE__ */
|
|
3952
|
-
/* @__PURE__ */
|
|
3675
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", children: [
|
|
3676
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("button", { className: "flex px-2 py-1 rounded-lg border-1", onClick: () => setIsAction(!isAction), children: [
|
|
3677
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react13.IconFilter, {}),
|
|
3953
3678
|
"filter"
|
|
3954
3679
|
] }),
|
|
3955
|
-
isAction ? /* @__PURE__ */
|
|
3956
|
-
/* @__PURE__ */
|
|
3957
|
-
/* @__PURE__ */
|
|
3958
|
-
/* @__PURE__ */
|
|
3959
|
-
/* @__PURE__ */
|
|
3680
|
+
isAction ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "absolute bg-white p-5 rounded-lg shadow-2xl w-[600px]", children: [
|
|
3681
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-end", children: [
|
|
3682
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-end text-nowrap gap-2", children: [
|
|
3683
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GhostButton, { title: "\u0E43\u0E0A\u0E49\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C", onClick: handleSubmitFilter, iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react13.IconCheck, {}) }),
|
|
3684
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GhostButton, { title: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", onClick: handleClearFilter, iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react13.IconTrash, {}) })
|
|
3960
3685
|
] }),
|
|
3961
3686
|
""
|
|
3962
3687
|
] }),
|
|
3963
|
-
/* @__PURE__ */
|
|
3688
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3964
3689
|
SelectCustom,
|
|
3965
3690
|
{
|
|
3966
3691
|
options: filter.selectionFilter,
|
|
@@ -3971,7 +3696,8 @@ var FilterPopUp = (filter) => {
|
|
|
3971
3696
|
] }) : void 0
|
|
3972
3697
|
] });
|
|
3973
3698
|
};
|
|
3974
|
-
export
|
|
3699
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
3700
|
+
0 && (module.exports = {
|
|
3975
3701
|
AntDModal,
|
|
3976
3702
|
AntDataTable,
|
|
3977
3703
|
Breadcrumbs,
|
|
@@ -3982,7 +3708,6 @@ export {
|
|
|
3982
3708
|
ColorPickerBasic,
|
|
3983
3709
|
DataTable,
|
|
3984
3710
|
DatePickerBasic,
|
|
3985
|
-
DatePickerRangePicker,
|
|
3986
3711
|
FileUploader,
|
|
3987
3712
|
FilterPopUp,
|
|
3988
3713
|
GhostButton,
|
|
@@ -4011,8 +3736,6 @@ export {
|
|
|
4011
3736
|
TabSelectionButton,
|
|
4012
3737
|
TextAreaInput,
|
|
4013
3738
|
TextInput,
|
|
4014
|
-
TimePickerBasic,
|
|
4015
|
-
TimePickerRangePicker,
|
|
4016
3739
|
TopNavBar,
|
|
4017
3740
|
messageError,
|
|
4018
3741
|
messageInfo,
|
|
@@ -4020,4 +3743,4 @@ export {
|
|
|
4020
3743
|
messageSuccess,
|
|
4021
3744
|
messageWarning,
|
|
4022
3745
|
setMessageApi
|
|
4023
|
-
};
|
|
3746
|
+
});
|