esvn-react-barcode-print 1.0.2 → 1.0.3

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +10 -7
  2. package/dist/index.d.ts +10 -7
  3. package/dist/index.js +395 -285
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +408 -288
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -605,7 +605,7 @@ var import_qrcode = require("qrcode.react");
605
605
  var import_react = require("react");
606
606
  var import_react_barcode = __toESM(require("react-barcode"));
607
607
  var import_jsx_runtime = require("react/jsx-runtime");
608
- var PreviewPrint = ({ watch, setValue, sampleItem }) => {
608
+ var PreviewPrint = ({ watch, setValue, sampleData }) => {
609
609
  var _a, _b;
610
610
  const printType = Number((_a = watch("printType")) != null ? _a : 0);
611
611
  const fields = (_b = watch("fields")) != null ? _b : [];
@@ -620,21 +620,23 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
620
620
  return "T\xEAn c\xF4ng ty";
621
621
  }
622
622
  };
623
- const sampleData = sampleItem || {
623
+ const effectiveSampleData = {
624
+ ...sampleData || {},
624
625
  companyName: getOrgName(),
625
- code: "SP-001",
626
- productCode: "SP-001",
627
- name: "S\u1EA3n ph\u1EA9m m\u1EABu",
628
- productName: "S\u1EA3n ph\u1EA9m m\u1EABu",
626
+ code: "SOMI",
627
+ productCode: "SOMI",
628
+ name: "\xC1o s\u01A1 mi nam",
629
+ productName: "\xC1o s\u01A1 mi nam",
629
630
  price: "250.000",
630
631
  unitPrice: "250.000",
631
632
  unitName: "C\xE1i",
632
633
  origin: "Vi\u1EC7t Nam",
633
- categoryRootName: "Danh m\u1EE5c m\u1EABu",
634
+ categoryRootName: "Th\u1EDDi trang nam",
635
+ groupProductName: "Th\u1EDDi trang nam",
634
636
  lotSerial: "LOT-2026",
635
637
  specificationCode: "SIZE-L"
636
638
  };
637
- const barcodeValue = sampleData.code || "SP-001";
639
+ const barcodeValue = "Hang-01";
638
640
  const hinge = watch("hinge");
639
641
  const alignStyle = {
640
642
  display: "flex",
@@ -661,10 +663,12 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
661
663
  const deltaX = moveEvent.clientX - draggingRef.current.startX;
662
664
  const newOffset = Math.max(0, Math.min(180, Math.round(draggingRef.current.initialOffset + deltaX)));
663
665
  const currentFields = watch("fields") || [];
664
- const updatedFields = currentFields.map((f) => {
665
- var _a2;
666
- return f.id === ((_a2 = draggingRef.current) == null ? void 0 : _a2.fieldId) ? { ...f, offsetX: newOffset } : f;
667
- });
666
+ const updatedFields = currentFields.map(
667
+ (f) => {
668
+ var _a2;
669
+ return f.id === ((_a2 = draggingRef.current) == null ? void 0 : _a2.fieldId) ? { ...f, offsetX: newOffset } : f;
670
+ }
671
+ );
668
672
  setValue("fields", updatedFields);
669
673
  };
670
674
  const handleMouseUp = () => {
@@ -761,8 +765,8 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
761
765
  const renderDynamicFields = () => {
762
766
  if (!fields || fields.length === 0) {
763
767
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
764
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.codeText, ...alignStyle }, children: "SP-001" }),
765
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.normalText, ...alignStyle }, children: "S\u1EA3n ph\u1EA9m m\u1EABu" }),
768
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.codeText, ...alignStyle }, children: "SOMI" }),
769
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.normalText, ...alignStyle }, children: "\xC1o s\u01A1 mi nam" }),
766
770
  renderCode(),
767
771
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.price, ...alignStyle }, children: "Gi\xE1: 250.000" })
768
772
  ] });
@@ -771,7 +775,7 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
771
775
  if (field.type === "barcode") {
772
776
  return renderCode(field);
773
777
  }
774
- const rawVal = field.type === "custom" ? field.customValue || field.label : sampleData[field.key] || sampleData[field.id] || field.label;
778
+ const rawVal = field.type === "custom" ? field.customValue || field.label : effectiveSampleData[field.key] || effectiveSampleData[field.id] || field.label;
775
779
  const prefix = field.prefix || "";
776
780
  const suffix = field.suffix || "";
777
781
  const displayVal = `${prefix}${rawVal}${suffix}`;
@@ -862,17 +866,18 @@ var styles = {
862
866
  whiteSpace: "normal"
863
867
  }
864
868
  };
869
+ var preview_print_default = PreviewPrint;
865
870
 
866
871
  // src/components/setting-print.tsx
867
- var Icon = __toESM(require("becoxy-icons"));
872
+ var import_becoxy_icons = require("becoxy-icons");
868
873
  var import_react2 = require("react");
869
874
  var import_react_hook_form = require("react-hook-form");
870
875
  var import_reactstrap = require("reactstrap");
871
876
  var import_jsx_runtime2 = require("react/jsx-runtime");
872
- var DEFAULT_EXTRA_FIELDS = [
877
+ var AVAILABLE_EXTRA_FIELDS = [
873
878
  { id: "unitName", key: "unitName", label: "\u0110\u01A1n v\u1ECB t\xEDnh", type: "text", prefix: "\u0110VT: " },
874
879
  { id: "origin", key: "origin", label: "Xu\u1EA5t x\u1EE9", type: "text", prefix: "Xu\u1EA5t x\u1EE9: " },
875
- { id: "categoryRootName", key: "categoryRootName", label: "Nh\xF3m h\xE0ng / Danh m\u1EE5c", type: "text", prefix: "Nh\xF3m: " },
880
+ { id: "categoryRootName", key: "categoryRootName", label: "Nh\xF3m s\u1EA3n ph\u1EA9m", type: "text", prefix: "Nh\xF3m: " },
876
881
  { id: "specificationCode", key: "specificationCode", label: "M\xE3 quy c\xE1ch", type: "text", prefix: "Quy c\xE1ch: " },
877
882
  { id: "lotSerial", key: "lotSerial", label: "S\u1ED1 l\xF4 / Serial", type: "text", prefix: "L\xF4: " },
878
883
  { id: "customText", key: "custom", label: "V\u0103n b\u1EA3n t\xF9y ch\u1EC9nh", type: "custom", customValue: "H\xE0ng ch\xEDnh h\xE3ng" }
@@ -885,7 +890,8 @@ var COLOR_PRESETS = [
885
890
  { label: "X\xE1m", value: "#6c757d" }
886
891
  ];
887
892
  var SettingPrint = (props) => {
888
- const { control, watch, setValue, availableExtraFields = DEFAULT_EXTRA_FIELDS, t = (s) => s } = props;
893
+ const t = props.t || ((key) => key);
894
+ const { control, watch, setValue, availableExtraFields, sampleData } = props;
889
895
  const [openPaperSection, setOpenPaperSection] = (0, import_react2.useState)(true);
890
896
  const [openInfoSection, setOpenInfoSection] = (0, import_react2.useState)(true);
891
897
  const [openCustomSection, setOpenCustomSection] = (0, import_react2.useState)(false);
@@ -926,71 +932,81 @@ var SettingPrint = (props) => {
926
932
  if (exists) {
927
933
  const newFields = fields.map((f) => f.id === fieldTemplate.id ? { ...f, enabled: true } : f);
928
934
  setValue("fields", newFields);
929
- } else {
930
- const newField = {
931
- id: fieldTemplate.id,
932
- key: fieldTemplate.key,
933
- label: fieldTemplate.label,
934
- type: fieldTemplate.type,
935
- enabled: true,
936
- bold: false,
937
- prefix: fieldTemplate.prefix || "",
938
- customValue: fieldTemplate.customValue || ""
939
- };
940
- setValue("fields", [...fields, newField]);
935
+ return;
936
+ }
937
+ const newId = fieldTemplate.id === "customText" ? `custom_${Date.now()}` : fieldTemplate.id;
938
+ const newField = {
939
+ id: newId,
940
+ key: fieldTemplate.key,
941
+ label: fieldTemplate.label,
942
+ type: fieldTemplate.type,
943
+ enabled: true,
944
+ bold: false,
945
+ italic: false,
946
+ underline: false,
947
+ color: "#000000",
948
+ fontSize: 13,
949
+ offsetX: 0,
950
+ prefix: fieldTemplate.prefix,
951
+ customValue: fieldTemplate.customValue || "N\u1ED9i dung t\xF9y ch\u1EC9nh"
952
+ };
953
+ setValue("fields", [...fields, newField], { shouldDirty: true, shouldTouch: true });
954
+ if (fieldTemplate.type === "custom") {
955
+ setExpandedFieldId(newId);
941
956
  }
942
957
  };
943
- const updateFieldProperty = (index, propName, value) => {
958
+ const updateFieldStyle = (index, patch) => {
944
959
  const newFields = [...fields];
945
- newFields[index] = { ...newFields[index], [propName]: value };
946
- setValue("fields", newFields);
960
+ newFields[index] = { ...newFields[index], ...patch };
961
+ setValue("fields", newFields, { shouldDirty: true, shouldTouch: true });
947
962
  };
948
963
  const handleDragStart = (index) => {
949
964
  setDraggedIndex(index);
950
965
  };
951
- const handleDragOver = (e, index) => {
966
+ const handleDragOver = (e) => {
952
967
  e.preventDefault();
953
- if (draggedIndex === null || draggedIndex === index) {
968
+ };
969
+ const handleDrop = (dropIndex) => {
970
+ if (draggedIndex === null || draggedIndex === dropIndex) {
971
+ setDraggedIndex(null);
954
972
  return;
955
973
  }
956
974
  const newFields = [...fields];
957
- const item = newFields.splice(draggedIndex, 1)[0];
958
- newFields.splice(index, 0, item);
959
- setDraggedIndex(index);
975
+ const draggedItem = newFields[draggedIndex];
976
+ newFields.splice(draggedIndex, 1);
977
+ newFields.splice(dropIndex, 0, draggedItem);
960
978
  setValue("fields", newFields);
961
- };
962
- const handleDragEnd = () => {
963
979
  setDraggedIndex(null);
964
980
  };
965
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column h-100", style: { gap: "16px", overflowY: "auto", paddingRight: "4px" }, children: [
966
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
967
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fw-bolder text-dark mb-75", children: t("Lo\u1EA1i m\xE3 in") }),
981
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-1 setting-print-container", style: { fontSize: "13px" }, children: [
982
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center mb-1", children: [
983
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark me-2", children: t("Lo\u1EA1i tem in") }),
968
984
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
969
985
  import_react_hook_form.Controller,
970
986
  {
971
987
  name: "printType",
972
988
  control,
973
- render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex", style: { gap: "20px" }, children: [
989
+ render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "20px" }, children: [
974
990
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
975
991
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
976
992
  import_reactstrap.Input,
977
993
  {
978
994
  type: "radio",
979
- name: "printType",
980
995
  className: "me-50 mt-0",
996
+ name: "printType",
981
997
  checked: Number(value) === 0,
982
998
  onChange: () => onChange(0)
983
999
  }
984
1000
  ),
985
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("M\xE3 v\u1EA1ch (Barcode)") })
1001
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("M\xE3 v\u1EA1ch") })
986
1002
  ] }),
987
1003
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
988
1004
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
989
1005
  import_reactstrap.Input,
990
1006
  {
991
1007
  type: "radio",
992
- name: "printType",
993
1008
  className: "me-50 mt-0",
1009
+ name: "printType",
994
1010
  checked: Number(value) === 1,
995
1011
  onChange: () => onChange(1)
996
1012
  }
@@ -1000,16 +1016,16 @@ var SettingPrint = (props) => {
1000
1016
  ] })
1001
1017
  }
1002
1018
  )
1003
- ] }),
1004
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
1019
+ ] }) }),
1020
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-2", children: [
1005
1021
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1006
1022
  "div",
1007
1023
  {
1008
- className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
1024
+ className: "d-flex align-items-center cursor-pointer fw-bolder text-dark mb-1",
1009
1025
  onClick: () => setOpenPaperSection(!openPaperSection),
1010
1026
  children: [
1011
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark", children: t("Kh\u1ED5 gi\u1EA5y in") }),
1012
- openPaperSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronDown, { fontSize: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronRight, { fontSize: 16 })
1027
+ openPaperSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronDown, { fontSize: 16, className: "me-50" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronRight, { fontSize: 16, className: "me-50" }),
1028
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Ch\u1ECDn kh\u1ED5 gi\u1EA5y") })
1013
1029
  ]
1014
1030
  }
1015
1031
  ),
@@ -1097,138 +1113,221 @@ var SettingPrint = (props) => {
1097
1113
  type: "number",
1098
1114
  min: 1,
1099
1115
  max: 10,
1100
- className: "form-control-sm text-center",
1116
+ className: "form-control-sm me-50 text-center",
1101
1117
  style: { width: "60px" },
1102
1118
  value: stampVal != null ? stampVal : 3,
1103
- onChange: (e) => onStampChange(Math.max(1, Number(e.target.value) || 1))
1119
+ onChange: (e) => onStampChange(Number(e.target.value))
1104
1120
  }
1105
1121
  )
1106
1122
  }
1107
1123
  ),
1108
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ms-50 small text-muted", children: t("tem/h\xE0ng") })
1124
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted", style: { fontSize: "12px" }, children: t("tem/d\xF2ng") })
1109
1125
  ] })
1110
1126
  ] })
1111
1127
  ] })
1112
1128
  }
1113
1129
  ) })
1114
1130
  ] }),
1115
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
1116
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1131
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-2", children: [
1132
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1117
1133
  "div",
1118
1134
  {
1119
- className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
1135
+ className: "d-flex align-items-center justify-content-between cursor-pointer fw-bolder text-dark mb-1",
1120
1136
  onClick: () => setOpenInfoSection(!openInfoSection),
1121
- children: [
1122
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark", children: t("Th\xF4ng tin tr\xEAn tem") }),
1123
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
1124
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { className: "text-muted me-50", style: { fontSize: "11px" }, children: t("(K\xE9o th\u1EA3 \u0111\u1EC3 \u0111\u1ED5i v\u1ECB tr\xED)") }),
1125
- openInfoSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronDown, { fontSize: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronRight, { fontSize: 16 })
1126
- ] })
1127
- ]
1137
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
1138
+ openInfoSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronDown, { fontSize: 16, className: "me-50" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronRight, { fontSize: 16, className: "me-50" }),
1139
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Th\xF4ng tin hi\u1EC3n th\u1ECB & \u0110\u1ECBnh d\u1EA1ng") })
1140
+ ] })
1128
1141
  }
1129
1142
  ),
1130
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openInfoSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column", style: { gap: "6px" }, children: [
1131
- fields.map((field, index) => {
1143
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openInfoSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ps-1 pe-1", children: [
1144
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex flex-column mb-1", style: { gap: "6px" }, children: fields.map((field, idx) => {
1132
1145
  const isExpanded = expandedFieldId === field.id;
1133
- const isDragging = draggedIndex === index;
1146
+ const isBold = field.bold !== false;
1147
+ const isItalic = !!field.italic;
1148
+ const isUnderline = !!field.underline;
1149
+ const currentColor = field.color || "#000000";
1150
+ const currentFontSize = field.fontSize || 13;
1151
+ const currentOffset = field.offsetX || 0;
1134
1152
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1135
1153
  "div",
1136
1154
  {
1137
- draggable: true,
1138
- onDragStart: () => handleDragStart(index),
1139
- onDragOver: (e) => handleDragOver(e, index),
1140
- onDragEnd: handleDragEnd,
1141
- className: "border rounded p-50",
1155
+ className: "border rounded overflow-hidden",
1142
1156
  style: {
1143
- background: isDragging ? "#e8f0fe" : field.enabled ? "#fff" : "#f9f9f9",
1144
- opacity: isDragging ? 0.6 : 1,
1145
- transition: "background 0.2s",
1146
- boxShadow: isExpanded ? "0 2px 6px rgba(0,0,0,0.08)" : "none"
1157
+ background: field.enabled ? "#f8f9fa" : "#ffffff",
1158
+ borderColor: isExpanded ? "#7367f0" : field.enabled ? "#d8d6de" : "#ebe9f1"
1147
1159
  },
1148
1160
  children: [
1149
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
1150
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
1151
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1152
- "span",
1153
- {
1154
- className: "cursor-move text-muted me-50 d-flex align-items-center",
1155
- title: t("K\xE9o \u0111\u1EC3 \u0111\u1ED5i th\u1EE9 t\u1EF1"),
1156
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Menu, { fontSize: 13 })
1157
- }
1158
- ),
1161
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1162
+ "div",
1163
+ {
1164
+ draggable: true,
1165
+ onDragStart: () => handleDragStart(idx),
1166
+ onDragOver: handleDragOver,
1167
+ onDrop: () => handleDrop(idx),
1168
+ className: "d-flex align-items-center justify-content-between p-50",
1169
+ style: {
1170
+ cursor: "grab",
1171
+ userSelect: "none",
1172
+ opacity: draggedIndex === idx ? 0.5 : 1
1173
+ },
1174
+ children: [
1175
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "8px" }, children: [
1176
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Menu, { fontSize: 14, className: "text-muted", style: { cursor: "grab" } }),
1177
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1178
+ import_reactstrap.Input,
1179
+ {
1180
+ type: "checkbox",
1181
+ checked: field.enabled,
1182
+ onChange: () => handleToggleField(idx),
1183
+ className: "mt-0"
1184
+ }
1185
+ ),
1186
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1187
+ "span",
1188
+ {
1189
+ style: {
1190
+ fontWeight: isBold ? 700 : 400,
1191
+ fontStyle: isItalic ? "italic" : "normal",
1192
+ textDecoration: isUnderline ? "underline" : "none",
1193
+ color: field.enabled ? currentColor : "#888"
1194
+ },
1195
+ children: field.type === "custom" && field.customValue ? `T\xF9y ch\u1EC9nh: "${field.customValue}"` : t(field.label)
1196
+ }
1197
+ ),
1198
+ currentOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "badge bg-light-primary text-primary", style: { fontSize: "10px", padding: "2px 4px" }, children: [
1199
+ "+",
1200
+ currentOffset,
1201
+ "px"
1202
+ ] })
1203
+ ] }),
1204
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "6px" }, children: [
1205
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1206
+ import_reactstrap.Button,
1207
+ {
1208
+ size: "sm",
1209
+ color: "flat-primary",
1210
+ className: "p-0 btn-icon",
1211
+ style: {
1212
+ width: "26px",
1213
+ height: "26px",
1214
+ display: "inline-flex",
1215
+ alignItems: "center",
1216
+ justifyContent: "center",
1217
+ borderRadius: "6px",
1218
+ background: isExpanded ? "#7367f0" : "#f0f0f5",
1219
+ color: isExpanded ? "#ffffff" : "#5e5873",
1220
+ border: "none",
1221
+ boxShadow: isExpanded ? "0 2px 6px rgba(115, 103, 240, 0.4)" : "none",
1222
+ transition: "all 0.15s ease"
1223
+ },
1224
+ onClick: (e) => {
1225
+ e.stopPropagation();
1226
+ setExpandedFieldId(isExpanded ? null : field.id);
1227
+ },
1228
+ title: t("T\xF9y ch\u1EC9nh \u0111\u1ECBnh d\u1EA1ng & L\xF9i l\u1EC1"),
1229
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Settings, { fontSize: 13 })
1230
+ }
1231
+ ),
1232
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1233
+ import_reactstrap.Button,
1234
+ {
1235
+ size: "sm",
1236
+ color: "flat-secondary",
1237
+ className: "p-0 btn-icon",
1238
+ style: {
1239
+ width: "26px",
1240
+ height: "26px",
1241
+ display: "inline-flex",
1242
+ alignItems: "center",
1243
+ justifyContent: "center",
1244
+ borderRadius: "6px",
1245
+ background: "#f0f0f5",
1246
+ border: "none"
1247
+ },
1248
+ disabled: idx === 0,
1249
+ onClick: (e) => {
1250
+ e.stopPropagation();
1251
+ handleMoveUp(idx);
1252
+ },
1253
+ title: t("Di chuy\u1EC3n l\xEAn"),
1254
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ArrowUp, { fontSize: 13 })
1255
+ }
1256
+ ),
1257
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1258
+ import_reactstrap.Button,
1259
+ {
1260
+ size: "sm",
1261
+ color: "flat-secondary",
1262
+ className: "p-0 btn-icon",
1263
+ style: {
1264
+ width: "26px",
1265
+ height: "26px",
1266
+ display: "inline-flex",
1267
+ alignItems: "center",
1268
+ justifyContent: "center",
1269
+ borderRadius: "6px",
1270
+ background: "#f0f0f5",
1271
+ border: "none"
1272
+ },
1273
+ disabled: idx === fields.length - 1,
1274
+ onClick: (e) => {
1275
+ e.stopPropagation();
1276
+ handleMoveDown(idx);
1277
+ },
1278
+ title: t("Di chuy\u1EC3n xu\u1ED1ng"),
1279
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ArrowDown, { fontSize: 13 })
1280
+ }
1281
+ ),
1282
+ field.type === "custom" || !["companyName", "productCode", "productName", "barcode", "unitPrice"].includes(field.id) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1283
+ import_reactstrap.Button,
1284
+ {
1285
+ size: "sm",
1286
+ color: "flat-danger",
1287
+ className: "p-0 btn-icon",
1288
+ style: {
1289
+ width: "26px",
1290
+ height: "26px",
1291
+ display: "inline-flex",
1292
+ alignItems: "center",
1293
+ justifyContent: "center",
1294
+ borderRadius: "6px",
1295
+ background: "#fce8e6",
1296
+ color: "#ea5455",
1297
+ border: "none"
1298
+ },
1299
+ onClick: (e) => {
1300
+ e.stopPropagation();
1301
+ handleDeleteField(idx);
1302
+ },
1303
+ title: t("X\xF3a tr\u01B0\u1EDDng"),
1304
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Trash2, { fontSize: 13 })
1305
+ }
1306
+ ) : null
1307
+ ] })
1308
+ ]
1309
+ }
1310
+ ),
1311
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-1 border-top bg-white", style: { fontSize: "12px" }, children: [
1312
+ field.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-1", children: [
1313
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted d-block mb-25 fw-bolder", children: [
1314
+ t("N\u1ED9i dung v\u0103n b\u1EA3n"),
1315
+ ":"
1316
+ ] }),
1159
1317
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1160
1318
  import_reactstrap.Input,
1161
1319
  {
1162
- type: "checkbox",
1163
- id: `chk-field-${field.id}`,
1164
- className: "me-50 mt-0",
1165
- checked: field.enabled,
1166
- onChange: () => handleToggleField(index)
1167
- }
1168
- ),
1169
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1170
- import_reactstrap.Label,
1171
- {
1172
- htmlFor: `chk-field-${field.id}`,
1173
- className: `mb-0 cursor-pointer ${field.enabled ? "fw-bold text-dark" : "text-muted"}`,
1174
- style: { fontSize: "13px" },
1175
- children: field.label
1320
+ type: "text",
1321
+ className: "form-control-sm",
1322
+ placeholder: t("Nh\u1EADp n\u1ED9i dung (vd: Hotline: 1900..., H\xE0ng ch\xEDnh h\xE3ng, v.v.)"),
1323
+ value: field.customValue || "",
1324
+ onChange: (e) => updateFieldStyle(idx, { customValue: e.target.value })
1176
1325
  }
1177
1326
  )
1178
1327
  ] }),
1179
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "3px" }, children: [
1180
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1181
- import_reactstrap.Button,
1182
- {
1183
- color: "flat-secondary",
1184
- className: "btn-icon p-0",
1185
- style: { width: "22px", height: "22px" },
1186
- onClick: () => handleMoveUp(index),
1187
- disabled: index === 0,
1188
- title: t("Di chuy\u1EC3n l\xEAn"),
1189
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ArrowUp, { fontSize: 12 })
1190
- }
1191
- ),
1192
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1193
- import_reactstrap.Button,
1194
- {
1195
- color: "flat-secondary",
1196
- className: "btn-icon p-0",
1197
- style: { width: "22px", height: "22px" },
1198
- onClick: () => handleMoveDown(index),
1199
- disabled: index === fields.length - 1,
1200
- title: t("Di chuy\u1EC3n xu\u1ED1ng"),
1201
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ArrowDown, { fontSize: 12 })
1202
- }
1203
- ),
1204
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1205
- import_reactstrap.Button,
1206
- {
1207
- color: "flat-secondary",
1208
- className: "btn-icon p-0",
1209
- style: { width: "22px", height: "22px" },
1210
- onClick: () => setExpandedFieldId(isExpanded ? null : field.id),
1211
- title: t("T\xF9y ch\u1EC9nh \u0111\u1ECBnh d\u1EA1ng"),
1212
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Settings, { fontSize: 12, className: isExpanded ? "text-primary" : "" })
1213
- }
1214
- ),
1215
- field.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1216
- import_reactstrap.Button,
1217
- {
1218
- color: "flat-danger",
1219
- className: "btn-icon p-0 text-danger",
1220
- style: { width: "22px", height: "22px" },
1221
- onClick: () => handleDeleteField(index),
1222
- title: t("X\xF3a tr\u01B0\u1EDDng"),
1223
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Trash2, { fontSize: 12 })
1224
- }
1225
- )
1226
- ] })
1227
- ] }),
1228
- isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-50 pt-50 border-top ps-1 pe-50", children: [
1229
- field.type !== "barcode" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column", style: { gap: "6px" }, children: [
1230
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
1231
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
1328
+ field.type !== "barcode" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
1329
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-1", children: [
1330
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted", children: [
1232
1331
  t("Ki\u1EC3u ch\u1EEF"),
1233
1332
  ":"
1234
1333
  ] }),
@@ -1236,189 +1335,191 @@ var SettingPrint = (props) => {
1236
1335
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1237
1336
  import_reactstrap.Button,
1238
1337
  {
1239
- color: field.bold !== false ? "primary" : "outline-secondary",
1240
- className: "btn-icon py-0 px-50",
1241
- onClick: () => updateFieldProperty(index, "bold", field.bold === false),
1242
- title: "In \u0111\u1EADm (Bold)",
1243
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "B" })
1338
+ color: isBold ? "primary" : "outline-secondary",
1339
+ className: "px-50 py-25 fw-bolder",
1340
+ onClick: () => updateFieldStyle(idx, { bold: !isBold }),
1341
+ title: t("In \u0111\u1EADm"),
1342
+ children: "B"
1244
1343
  }
1245
1344
  ),
1246
1345
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1247
1346
  import_reactstrap.Button,
1248
1347
  {
1249
- color: field.italic ? "primary" : "outline-secondary",
1250
- className: "btn-icon py-0 px-50",
1251
- onClick: () => updateFieldProperty(index, "italic", !field.italic),
1252
- title: "In nghi\xEAng (Italic)",
1253
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: "I" })
1348
+ color: isItalic ? "primary" : "outline-secondary",
1349
+ className: "px-50 py-25 fst-italic",
1350
+ onClick: () => updateFieldStyle(idx, { italic: !isItalic }),
1351
+ title: t("In nghi\xEAng"),
1352
+ children: "I"
1254
1353
  }
1255
1354
  ),
1256
1355
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1257
1356
  import_reactstrap.Button,
1258
1357
  {
1259
- color: field.underline ? "primary" : "outline-secondary",
1260
- className: "btn-icon py-0 px-50",
1261
- onClick: () => updateFieldProperty(index, "underline", !field.underline),
1262
- title: "G\u1EA1ch ch\xE2n (Underline)",
1263
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("u", { children: "U" })
1358
+ color: isUnderline ? "primary" : "outline-secondary",
1359
+ className: "px-50 py-25 text-decoration-underline",
1360
+ onClick: () => updateFieldStyle(idx, { underline: !isUnderline }),
1361
+ title: t("G\u1EA1ch ch\xE2n"),
1362
+ children: "U"
1264
1363
  }
1265
1364
  )
1266
1365
  ] })
1267
1366
  ] }),
1268
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
1269
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
1270
- t("C\u1EE1 ch\u1EEF (px)"),
1367
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-1", children: [
1368
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted", children: [
1369
+ t("C\u1EE1 ch\u1EEF"),
1271
1370
  ":"
1272
1371
  ] }),
1273
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
1372
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "4px" }, children: [
1274
1373
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1275
1374
  import_reactstrap.Button,
1276
1375
  {
1376
+ size: "sm",
1277
1377
  color: "outline-secondary",
1278
- className: "btn-icon p-0",
1279
- style: { width: "22px", height: "22px" },
1280
- onClick: () => updateFieldProperty(index, "fontSize", Math.max(8, (field.fontSize || 13) - 1)),
1281
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Minus, { fontSize: 10 })
1378
+ className: "p-0 px-25 btn-icon",
1379
+ onClick: () => updateFieldStyle(idx, { fontSize: Math.max(8, currentFontSize - 1) }),
1380
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Minus, { fontSize: 12 })
1282
1381
  }
1283
1382
  ),
1284
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mx-50 small fw-bold", style: { minWidth: "24px", textAlign: "center" }, children: field.fontSize || 13 }),
1383
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "fw-bolder px-50 text-center", style: { minWidth: "35px" }, children: [
1384
+ currentFontSize,
1385
+ "px"
1386
+ ] }),
1285
1387
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1286
1388
  import_reactstrap.Button,
1287
1389
  {
1390
+ size: "sm",
1288
1391
  color: "outline-secondary",
1289
- className: "btn-icon p-0",
1290
- style: { width: "22px", height: "22px" },
1291
- onClick: () => updateFieldProperty(index, "fontSize", Math.min(24, (field.fontSize || 13) + 1)),
1292
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Plus, { fontSize: 10 })
1392
+ className: "p-0 px-25 btn-icon",
1393
+ onClick: () => updateFieldStyle(idx, { fontSize: Math.min(24, currentFontSize + 1) }),
1394
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Plus, { fontSize: 12 })
1293
1395
  }
1294
1396
  )
1295
1397
  ] })
1296
1398
  ] }),
1297
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
1298
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
1399
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-1", children: [
1400
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted", children: [
1299
1401
  t("M\xE0u ch\u1EEF"),
1300
1402
  ":"
1301
1403
  ] }),
1302
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex align-items-center", style: { gap: "4px" }, children: COLOR_PRESETS.map((colorItem) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1303
- "div",
1304
- {
1305
- onClick: () => updateFieldProperty(index, "color", colorItem.value),
1306
- title: colorItem.label,
1307
- style: {
1308
- width: "16px",
1309
- height: "16px",
1310
- borderRadius: "50%",
1311
- backgroundColor: colorItem.value,
1312
- cursor: "pointer",
1313
- outline: (field.color || "#000000") === colorItem.value ? "2px solid #7367f0" : "none",
1314
- outlineOffset: "1px"
1404
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "6px" }, children: [
1405
+ COLOR_PRESETS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1406
+ "div",
1407
+ {
1408
+ onClick: (e) => {
1409
+ e.stopPropagation();
1410
+ updateFieldStyle(idx, { color: c.value });
1411
+ },
1412
+ style: {
1413
+ width: "18px",
1414
+ height: "18px",
1415
+ borderRadius: "50%",
1416
+ background: c.value,
1417
+ cursor: "pointer",
1418
+ border: currentColor === c.value ? "2px solid #7367f0" : "1px solid #ccc",
1419
+ boxShadow: currentColor === c.value ? "0 0 4px #7367f0" : "none"
1420
+ },
1421
+ title: c.label
1422
+ },
1423
+ c.value
1424
+ )),
1425
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1426
+ import_reactstrap.Input,
1427
+ {
1428
+ type: "color",
1429
+ value: currentColor,
1430
+ onChange: (e) => updateFieldStyle(idx, { color: e.target.value }),
1431
+ style: { width: "24px", height: "22px", padding: 0, border: "none", cursor: "pointer" },
1432
+ title: t("M\xE0u t\u1EF1 ch\u1ECDn")
1315
1433
  }
1316
- },
1317
- colorItem.value
1318
- )) })
1319
- ] }),
1320
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
1321
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
1322
- t("Ti\u1EC1n t\u1ED1"),
1434
+ )
1435
+ ] })
1436
+ ] })
1437
+ ] }),
1438
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column mt-50", children: [
1439
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-25", children: [
1440
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted", children: [
1441
+ t("L\xF9i v\xE0o l\u1EC1 tr\xE1i (Th\u1EE5t l\u1EC1)"),
1323
1442
  ":"
1324
1443
  ] }),
1325
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1326
- import_reactstrap.Input,
1327
- {
1328
- type: "text",
1329
- className: "form-control-sm",
1330
- style: { width: "120px" },
1331
- value: field.prefix || "",
1332
- onChange: (e) => updateFieldProperty(index, "prefix", e.target.value),
1333
- placeholder: "VD: Gi\xE1: "
1334
- }
1335
- )
1444
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "fw-bolder text-primary", children: [
1445
+ currentOffset,
1446
+ "px"
1447
+ ] })
1336
1448
  ] }),
1337
- field.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
1338
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
1339
- t("N\u1ED9i dung"),
1340
- ":"
1341
- ] }),
1449
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "8px" }, children: [
1342
1450
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1343
1451
  import_reactstrap.Input,
1344
1452
  {
1345
- type: "text",
1346
- className: "form-control-sm",
1347
- style: { width: "140px" },
1348
- value: field.customValue || "",
1349
- onChange: (e) => updateFieldProperty(index, "customValue", e.target.value)
1350
- }
1351
- )
1352
- ] })
1353
- ] }),
1354
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mt-50", children: [
1355
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
1356
- t("L\xF9i l\u1EC1 tr\xE1i (px)"),
1357
- ":"
1358
- ] }),
1359
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
1360
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1361
- import_reactstrap.Button,
1362
- {
1363
- color: "outline-secondary",
1364
- className: "btn-icon p-0",
1365
- style: { width: "22px", height: "22px" },
1366
- onClick: () => updateFieldProperty(index, "offsetX", Math.max(0, (field.offsetX || 0) - 2)),
1367
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Minus, { fontSize: 10 })
1453
+ type: "range",
1454
+ min: 0,
1455
+ max: 120,
1456
+ step: 2,
1457
+ value: currentOffset,
1458
+ onChange: (e) => updateFieldStyle(idx, { offsetX: Number(e.target.value) }),
1459
+ className: "form-range flex-grow-1"
1368
1460
  }
1369
1461
  ),
1370
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mx-50 small fw-bold", style: { minWidth: "24px", textAlign: "center" }, children: field.offsetX || 0 }),
1371
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1462
+ currentOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1372
1463
  import_reactstrap.Button,
1373
1464
  {
1374
- color: "outline-secondary",
1375
- className: "btn-icon p-0",
1376
- style: { width: "22px", height: "22px" },
1377
- onClick: () => updateFieldProperty(index, "offsetX", Math.min(180, (field.offsetX || 0) + 2)),
1378
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Plus, { fontSize: 10 })
1465
+ size: "sm",
1466
+ color: "flat-secondary",
1467
+ className: "p-0 px-25 text-muted",
1468
+ style: { fontSize: "11px" },
1469
+ onClick: () => updateFieldStyle(idx, { offsetX: 0 }),
1470
+ title: t("\u0110\u1EB7t l\u1EA1i v\u1EC1 0"),
1471
+ children: t("Reset")
1379
1472
  }
1380
1473
  )
1474
+ ] }),
1475
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("small", { className: "text-muted", style: { fontSize: "11px" }, children: [
1476
+ "\u{1F4A1} ",
1477
+ t("B\u1EA1n c\u0169ng c\xF3 th\u1EC3 click & k\xE9o chu\u1ED9t tr\u1EF1c ti\u1EBFp tr\xEAn khung xem tr\u01B0\u1EDBc b\xEAn d\u01B0\u1EDBi.")
1381
1478
  ] })
1382
1479
  ] })
1383
- ] })
1480
+ ] }) })
1384
1481
  ]
1385
1482
  },
1386
1483
  field.id
1387
1484
  );
1388
- }),
1389
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-50", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.UncontrolledDropdown, { children: [
1390
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.DropdownToggle, { color: "outline-primary", size: "sm", className: "w-100 d-flex align-items-center justify-content-center", children: [
1391
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Plus, { fontSize: 13, className: "me-50" }),
1392
- t("Th\xEAm tr\u01B0\u1EDDng th\xF4ng tin kh\xE1c")
1485
+ }) }),
1486
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex justify-content-start mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.UncontrolledDropdown, { children: [
1487
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.DropdownToggle, { color: "primary", outline: true, size: "sm", className: "d-flex align-items-center", children: [
1488
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Plus, { fontSize: 14, className: "me-50" }),
1489
+ t("Th\xEAm tr\u01B0\u1EDDng th\xF4ng tin")
1393
1490
  ] }),
1394
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.DropdownMenu, { className: "w-100", children: availableExtraFields.map((extra) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.DropdownItem, { onClick: () => handleAddField(extra), children: extra.label }, extra.id)) })
1491
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.DropdownMenu, { children: (availableExtraFields || AVAILABLE_EXTRA_FIELDS).map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1492
+ import_reactstrap.DropdownItem,
1493
+ {
1494
+ onClick: () => handleAddField(item),
1495
+ children: t(item.label)
1496
+ },
1497
+ item.id
1498
+ )) })
1395
1499
  ] }) })
1396
1500
  ] }) })
1397
1501
  ] }),
1398
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
1502
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-2", children: [
1399
1503
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1400
1504
  "div",
1401
1505
  {
1402
- className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
1506
+ className: "d-flex align-items-center cursor-pointer fw-bolder text-dark mb-1",
1403
1507
  onClick: () => setOpenCustomSection(!openCustomSection),
1404
1508
  children: [
1405
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark", children: t("C\u0103n ch\u1EC9nh l\u1EC1") }),
1406
- openCustomSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronDown, { fontSize: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronRight, { fontSize: 16 })
1509
+ openCustomSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronDown, { fontSize: 16, className: "me-50" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronRight, { fontSize: 16, className: "me-50" }),
1510
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("T\xF9y ch\u1EC9nh gi\u1EA5y in") })
1407
1511
  ]
1408
1512
  }
1409
1513
  ),
1410
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openCustomSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex flex-column ps-1", style: { gap: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
1411
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-dark", children: [
1412
- t("C\u0103n l\u1EC1 ch\u1EEF"),
1413
- ":"
1414
- ] }),
1514
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openCustomSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ps-1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-1", children: [
1515
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted d-block mb-50", style: { fontSize: "12px" }, children: t("C\u0103n l\u1EC1 n\u1ED9i dung tem") }),
1415
1516
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1416
1517
  import_react_hook_form.Controller,
1417
1518
  {
1418
1519
  name: "hinge",
1419
1520
  control,
1420
- render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex", style: { gap: "15px" }, children: [
1421
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer small", children: [
1521
+ render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "20px" }, children: [
1522
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
1422
1523
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1423
1524
  import_reactstrap.Input,
1424
1525
  {
@@ -1431,7 +1532,7 @@ var SettingPrint = (props) => {
1431
1532
  ),
1432
1533
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("C\u0103n tr\xE1i") })
1433
1534
  ] }),
1434
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer small", children: [
1535
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
1435
1536
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1436
1537
  import_reactstrap.Input,
1437
1538
  {
@@ -1454,13 +1555,13 @@ var SettingPrint = (props) => {
1454
1555
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Xem tr\u01B0\u1EDBc m\u1EABu in") }),
1455
1556
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { className: "text-muted fw-normal", style: { fontSize: "11px" }, children: t("(K\xE9o chu\u1ED9t tr\xEAn d\xF2ng \u0111\u1EC3 d\u1ECBch l\u1EC1)") })
1456
1557
  ] }),
1457
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PreviewPrint, { watch, setValue }) })
1558
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(preview_print_default, { watch, setValue, sampleData }) })
1458
1559
  ] })
1459
1560
  ] }) });
1460
1561
  };
1461
1562
 
1462
1563
  // src/components/modal-preview-print.tsx
1463
- var Icon2 = __toESM(require("becoxy-icons"));
1564
+ var Icon = __toESM(require("becoxy-icons"));
1464
1565
  var import_react3 = require("react");
1465
1566
  var import_reactstrap2 = require("reactstrap");
1466
1567
  var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -1515,10 +1616,10 @@ var ModalPreviewPrint = ({
1515
1616
  children: [
1516
1617
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between px-1_5 py-1 mb-0 border-bottom bg-white", children: [
1517
1618
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "d-flex align-items-center", children: [
1518
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Printer, { fontSize: 18, className: "text-primary me-50" }),
1619
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.Printer, { fontSize: 18, className: "text-primary me-50" }),
1519
1620
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h5", { className: "modal-title m-0 fw-bolder text-dark", children: t("Xem tr\u01B0\u1EDBc b\u1EA3n in m\xE3 v\u1EA1ch") })
1520
1621
  ] }),
1521
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.X, { fontSize: 20 }) })
1622
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.X, { fontSize: 20 }) })
1522
1623
  ] }),
1523
1624
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1524
1625
  "div",
@@ -1588,7 +1689,7 @@ var ModalPreviewPrint = ({
1588
1689
  style: { width: "22px", height: "22px" },
1589
1690
  onClick: handleZoomOut,
1590
1691
  title: t("Thu nh\u1ECF"),
1591
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Minus, { fontSize: 14 })
1692
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.Minus, { fontSize: 14 })
1592
1693
  }
1593
1694
  ),
1594
1695
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1612,7 +1713,7 @@ var ModalPreviewPrint = ({
1612
1713
  style: { width: "22px", height: "22px" },
1613
1714
  onClick: handleZoomIn,
1614
1715
  title: t("Ph\xF3ng to"),
1615
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Plus, { fontSize: 14 })
1716
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.Plus, { fontSize: 14 })
1616
1717
  }
1617
1718
  )
1618
1719
  ] })
@@ -1643,7 +1744,7 @@ var ModalPreviewPrint = ({
1643
1744
  onClick: onPrint,
1644
1745
  className: "d-flex align-items-center",
1645
1746
  children: [
1646
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Printer, { fontSize: 14, className: "me-50" }),
1747
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.Printer, { fontSize: 14, className: "me-50" }),
1647
1748
  t("In")
1648
1749
  ]
1649
1750
  }
@@ -1656,7 +1757,7 @@ var ModalPreviewPrint = ({
1656
1757
  };
1657
1758
 
1658
1759
  // src/components/modal-barcode-print.tsx
1659
- var Icon3 = __toESM(require("becoxy-icons"));
1760
+ var Icon2 = __toESM(require("becoxy-icons"));
1660
1761
  var import_react4 = require("react");
1661
1762
  var import_react_hook_form2 = require("react-hook-form");
1662
1763
  var import_reactstrap3 = require("reactstrap");
@@ -1678,8 +1779,10 @@ var ModalBarcodePrint = ({
1678
1779
  dataSelected,
1679
1780
  setDataSelected,
1680
1781
  dataItem,
1782
+ initialFields,
1681
1783
  defaultFields = DEFAULT_PRINT_FIELDS,
1682
1784
  availableExtraFields,
1785
+ sampleData,
1683
1786
  renderTable,
1684
1787
  children,
1685
1788
  windowSize,
@@ -1688,6 +1791,7 @@ var ModalBarcodePrint = ({
1688
1791
  notifyError = (msg) => alert(msg),
1689
1792
  notifySuccess = (msg) => console.log(msg)
1690
1793
  }) => {
1794
+ const effectiveDefaultFields = initialFields || defaultFields;
1691
1795
  const defaultValues = {
1692
1796
  printType: 0,
1693
1797
  paperSize: 2,
@@ -1699,13 +1803,18 @@ var ModalBarcodePrint = ({
1699
1803
  unitPrice: true,
1700
1804
  printSample: 3,
1701
1805
  hinge: false,
1702
- fields: defaultFields
1806
+ fields: effectiveDefaultFields
1703
1807
  };
1704
1808
  const [openPreviewModal, setOpenPreviewModal] = (0, import_react4.useState)(false);
1705
1809
  const { control, watch, setValue, reset, getValues, formState: { errors } } = (0, import_react_hook_form2.useForm)({
1706
1810
  mode: "onChange",
1707
1811
  defaultValues
1708
1812
  });
1813
+ (0, import_react4.useEffect)(() => {
1814
+ if (initialFields && initialFields.length > 0) {
1815
+ setValue("fields", initialFields);
1816
+ }
1817
+ }, [initialFields]);
1709
1818
  const handleTestPrint = () => {
1710
1819
  const settings = getValues();
1711
1820
  const targetItems = dataSelected.length > 0 ? dataSelected : dataItem ? [dataItem] : [];
@@ -1754,19 +1863,19 @@ var ModalBarcodePrint = ({
1754
1863
  const renderFooterButtons = () => {
1755
1864
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "10px" }, children: [
1756
1865
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "primary", onClick: handleResetDefault, className: "d-flex align-items-center text-white", children: [
1757
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.OutlineReply, { fontSize: 14, className: "me-50" }),
1866
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.OutlineReply, { fontSize: 14, className: "me-50" }),
1758
1867
  t("Thi\u1EBFt l\u1EADp l\u1EA1i")
1759
1868
  ] }),
1760
1869
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "info", outline: true, onClick: handleOpenPreview, className: "d-flex align-items-center", children: [
1761
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Eye, { fontSize: 14, className: "me-50" }),
1870
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.Eye, { fontSize: 14, className: "me-50" }),
1762
1871
  t("Xem tr\u01B0\u1EDBc")
1763
1872
  ] }),
1764
1873
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "secondary", outline: true, onClick: handleTestPrint, className: "d-flex align-items-center", children: [
1765
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Printer, { fontSize: 14, className: "me-50" }),
1874
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.Printer, { fontSize: 14, className: "me-50" }),
1766
1875
  t("In th\u1EED")
1767
1876
  ] }),
1768
1877
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "primary", onClick: handleRealPrint, className: "d-flex align-items-center", children: [
1769
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Printer, { fontSize: 14, className: "me-50" }),
1878
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.Printer, { fontSize: 14, className: "me-50" }),
1770
1879
  t("In")
1771
1880
  ] }),
1772
1881
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.Button, { color: "secondary", onClick: toggle, outline: true, children: t("Close") })
@@ -1784,10 +1893,10 @@ var ModalBarcodePrint = ({
1784
1893
  children: [
1785
1894
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between p-1 mb-0 border-bottom bg-white flex-shrink-0", children: [
1786
1895
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "d-flex align-items-center", children: [
1787
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Printer, { fontSize: 18, className: "text-primary me-50" }),
1896
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.Printer, { fontSize: 18, className: "text-primary me-50" }),
1788
1897
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h5", { className: "modal-title m-0 fw-bolder text-dark", children: t(title) })
1789
1898
  ] }),
1790
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.X, { fontSize: 20 }) })
1899
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.X, { fontSize: 20 }) })
1791
1900
  ] }),
1792
1901
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.ModalBody, { className: "p-1 flex-grow-1 overflow-hidden", style: { background: "#f8f9fa" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Row, { className: "g-1 h-100", children: [
1793
1902
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.Col, { lg: 4, md: 12, xs: 12, className: "h-100 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -1805,6 +1914,7 @@ var ModalBarcodePrint = ({
1805
1914
  setValue,
1806
1915
  errors,
1807
1916
  availableExtraFields,
1917
+ sampleData,
1808
1918
  t
1809
1919
  }
1810
1920
  ) })