@fctc/sme-widget-ui 1.3.0 → 1.3.1

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 (5) hide show
  1. package/dist/index.js +78 -65
  2. package/dist/index.mjs +78 -65
  3. package/dist/widgets.js +78 -65
  4. package/dist/widgets.mjs +78 -65
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -33187,10 +33187,11 @@ var HtmlField = (props) => {
33187
33187
  isForm = true,
33188
33188
  defaultValue = "",
33189
33189
  onChange: onChange2,
33190
- value
33190
+ value,
33191
+ isEditTable
33191
33192
  } = props;
33192
33193
  const divRef = (0, import_react57.useRef)(null);
33193
- if (!isForm) {
33194
+ if (!isForm && !isEditTable) {
33194
33195
  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
33195
33196
  }
33196
33197
  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
@@ -33218,7 +33219,7 @@ var HtmlField = (props) => {
33218
33219
  ref: divRef,
33219
33220
  contentEditable: !readonly,
33220
33221
  onInput: handleInput,
33221
- className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
33222
+ className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] border-input-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
33222
33223
  p-2 pl-3 font-normal text-sm gap-2 leading-5
33223
33224
  resize-none opacity-100 overflow-hidden
33224
33225
 
@@ -34724,69 +34725,81 @@ var import_jsx_runtime104 = require("react/jsx-runtime");
34724
34725
  var StatusBarOptionField = (props) => {
34725
34726
  const { selection, defaultValue } = props;
34726
34727
  const memoizedStatusOptions = (0, import_react64.useMemo)(() => selection, [selection]);
34727
- return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34728
- const value = option?.[0] === defaultValue;
34729
- return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
34730
- "label",
34731
- {
34732
- style: {
34733
- position: "relative",
34734
- flexShrink: 0,
34735
- cursor: "default",
34736
- paddingTop: "10px",
34737
- paddingBottom: "10px",
34738
- paddingLeft: "32px",
34739
- // pl-8
34740
- paddingRight: "20px",
34741
- // pr-[20px]
34742
- fontWeight: 600,
34743
- // font-semibold
34744
- fontSize: "14px",
34745
- background: value ? "var(--color-primary)" : "#FAFAFA",
34746
- color: value ? "#fff" : "#121212",
34747
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34748
- // rounded-l-xl
34749
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34750
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34751
- // rounded-r-xl
34752
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34753
- },
34754
- children: [
34755
- /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34756
- "input",
34757
- {
34758
- type: "radio",
34759
- checked: value,
34760
- style: { display: "none" },
34761
- disabled: true
34762
- }
34763
- ),
34764
- option[1],
34765
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34766
- "div",
34767
- {
34768
- style: {
34769
- position: "absolute",
34770
- top: "50%",
34771
- transform: "translateY(-50%) rotate(45deg)",
34772
- zIndex: 2,
34773
- width: "30px",
34774
- height: "30px",
34775
- right: value ? "-14px" : "-14px",
34776
- background: value ? "var(--color-primary)" : "#FAFAFA",
34777
- border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
34778
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34779
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34780
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34781
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34782
- }
34783
- }
34784
- )
34785
- ]
34728
+ return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34729
+ "div",
34730
+ {
34731
+ style: {
34732
+ display: "flex",
34733
+ alignItems: "center",
34734
+ flexWrap: "wrap",
34735
+ overflow: "hidden"
34786
34736
  },
34787
- option?.[0]
34788
- );
34789
- }) });
34737
+ children: memoizedStatusOptions?.map((option, index4) => {
34738
+ const value = option?.[0] === defaultValue;
34739
+ return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
34740
+ "label",
34741
+ {
34742
+ style: {
34743
+ position: "relative",
34744
+ flexShrink: 0,
34745
+ cursor: "default",
34746
+ height: "36px",
34747
+ display: "flex",
34748
+ alignItems: "center",
34749
+ paddingLeft: "32px",
34750
+ // pl-8
34751
+ paddingRight: "20px",
34752
+ // pr-[20px]
34753
+ fontWeight: 600,
34754
+ // font-semibold
34755
+ fontSize: "14px",
34756
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34757
+ color: value ? "#fff" : "#121212",
34758
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34759
+ // rounded-l-xl
34760
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34761
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34762
+ // rounded-r-xl
34763
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34764
+ },
34765
+ children: [
34766
+ /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34767
+ "input",
34768
+ {
34769
+ type: "radio",
34770
+ checked: value,
34771
+ style: { display: "none" },
34772
+ disabled: true
34773
+ }
34774
+ ),
34775
+ option[1],
34776
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34777
+ "div",
34778
+ {
34779
+ style: {
34780
+ position: "absolute",
34781
+ top: "50%",
34782
+ transform: "translateY(-50%) rotate(45deg)",
34783
+ zIndex: 2,
34784
+ width: "26px",
34785
+ height: "26px",
34786
+ right: "-13px",
34787
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34788
+ border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34789
+ borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34790
+ borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34791
+ borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34792
+ borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34793
+ }
34794
+ }
34795
+ )
34796
+ ]
34797
+ },
34798
+ option?.[0]
34799
+ );
34800
+ })
34801
+ }
34802
+ );
34790
34803
  };
34791
34804
 
34792
34805
  // src/widgets/basic/date-option-field/date-option.tsx
package/dist/index.mjs CHANGED
@@ -33068,10 +33068,11 @@ var HtmlField = (props) => {
33068
33068
  isForm = true,
33069
33069
  defaultValue = "",
33070
33070
  onChange: onChange2,
33071
- value
33071
+ value,
33072
+ isEditTable
33072
33073
  } = props;
33073
33074
  const divRef = useRef16(null);
33074
- if (!isForm) {
33075
+ if (!isForm && !isEditTable) {
33075
33076
  return /* @__PURE__ */ jsx88("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
33076
33077
  }
33077
33078
  return /* @__PURE__ */ jsx88(
@@ -33099,7 +33100,7 @@ var HtmlField = (props) => {
33099
33100
  ref: divRef,
33100
33101
  contentEditable: !readonly,
33101
33102
  onInput: handleInput,
33102
- className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
33103
+ className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] border-input-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
33103
33104
  p-2 pl-3 font-normal text-sm gap-2 leading-5
33104
33105
  resize-none opacity-100 overflow-hidden
33105
33106
 
@@ -34605,69 +34606,81 @@ import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
34605
34606
  var StatusBarOptionField = (props) => {
34606
34607
  const { selection, defaultValue } = props;
34607
34608
  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
34608
- return /* @__PURE__ */ jsx106("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34609
- const value = option?.[0] === defaultValue;
34610
- return /* @__PURE__ */ jsxs74(
34611
- "label",
34612
- {
34613
- style: {
34614
- position: "relative",
34615
- flexShrink: 0,
34616
- cursor: "default",
34617
- paddingTop: "10px",
34618
- paddingBottom: "10px",
34619
- paddingLeft: "32px",
34620
- // pl-8
34621
- paddingRight: "20px",
34622
- // pr-[20px]
34623
- fontWeight: 600,
34624
- // font-semibold
34625
- fontSize: "14px",
34626
- background: value ? "var(--color-primary)" : "#FAFAFA",
34627
- color: value ? "#fff" : "#121212",
34628
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34629
- // rounded-l-xl
34630
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34631
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34632
- // rounded-r-xl
34633
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34634
- },
34635
- children: [
34636
- /* @__PURE__ */ jsx106(
34637
- "input",
34638
- {
34639
- type: "radio",
34640
- checked: value,
34641
- style: { display: "none" },
34642
- disabled: true
34643
- }
34644
- ),
34645
- option[1],
34646
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
34647
- "div",
34648
- {
34649
- style: {
34650
- position: "absolute",
34651
- top: "50%",
34652
- transform: "translateY(-50%) rotate(45deg)",
34653
- zIndex: 2,
34654
- width: "30px",
34655
- height: "30px",
34656
- right: value ? "-14px" : "-14px",
34657
- background: value ? "var(--color-primary)" : "#FAFAFA",
34658
- border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
34659
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34660
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34661
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34662
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34663
- }
34664
- }
34665
- )
34666
- ]
34609
+ return /* @__PURE__ */ jsx106(
34610
+ "div",
34611
+ {
34612
+ style: {
34613
+ display: "flex",
34614
+ alignItems: "center",
34615
+ flexWrap: "wrap",
34616
+ overflow: "hidden"
34667
34617
  },
34668
- option?.[0]
34669
- );
34670
- }) });
34618
+ children: memoizedStatusOptions?.map((option, index4) => {
34619
+ const value = option?.[0] === defaultValue;
34620
+ return /* @__PURE__ */ jsxs74(
34621
+ "label",
34622
+ {
34623
+ style: {
34624
+ position: "relative",
34625
+ flexShrink: 0,
34626
+ cursor: "default",
34627
+ height: "36px",
34628
+ display: "flex",
34629
+ alignItems: "center",
34630
+ paddingLeft: "32px",
34631
+ // pl-8
34632
+ paddingRight: "20px",
34633
+ // pr-[20px]
34634
+ fontWeight: 600,
34635
+ // font-semibold
34636
+ fontSize: "14px",
34637
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34638
+ color: value ? "#fff" : "#121212",
34639
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34640
+ // rounded-l-xl
34641
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34642
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34643
+ // rounded-r-xl
34644
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34645
+ },
34646
+ children: [
34647
+ /* @__PURE__ */ jsx106(
34648
+ "input",
34649
+ {
34650
+ type: "radio",
34651
+ checked: value,
34652
+ style: { display: "none" },
34653
+ disabled: true
34654
+ }
34655
+ ),
34656
+ option[1],
34657
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
34658
+ "div",
34659
+ {
34660
+ style: {
34661
+ position: "absolute",
34662
+ top: "50%",
34663
+ transform: "translateY(-50%) rotate(45deg)",
34664
+ zIndex: 2,
34665
+ width: "26px",
34666
+ height: "26px",
34667
+ right: "-13px",
34668
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34669
+ border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34670
+ borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34671
+ borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34672
+ borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34673
+ borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34674
+ }
34675
+ }
34676
+ )
34677
+ ]
34678
+ },
34679
+ option?.[0]
34680
+ );
34681
+ })
34682
+ }
34683
+ );
34671
34684
  };
34672
34685
 
34673
34686
  // src/widgets/basic/date-option-field/date-option.tsx
package/dist/widgets.js CHANGED
@@ -32833,10 +32833,11 @@ var HtmlField = (props) => {
32833
32833
  isForm = true,
32834
32834
  defaultValue = "",
32835
32835
  onChange: onChange2,
32836
- value
32836
+ value,
32837
+ isEditTable
32837
32838
  } = props;
32838
32839
  const divRef = (0, import_react57.useRef)(null);
32839
- if (!isForm) {
32840
+ if (!isForm && !isEditTable) {
32840
32841
  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
32841
32842
  }
32842
32843
  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
@@ -32864,7 +32865,7 @@ var HtmlField = (props) => {
32864
32865
  ref: divRef,
32865
32866
  contentEditable: !readonly,
32866
32867
  onInput: handleInput,
32867
- className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
32868
+ className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] border-input-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
32868
32869
  p-2 pl-3 font-normal text-sm gap-2 leading-5
32869
32870
  resize-none opacity-100 overflow-hidden
32870
32871
 
@@ -34370,69 +34371,81 @@ var import_jsx_runtime104 = require("react/jsx-runtime");
34370
34371
  var StatusBarOptionField = (props) => {
34371
34372
  const { selection, defaultValue } = props;
34372
34373
  const memoizedStatusOptions = (0, import_react64.useMemo)(() => selection, [selection]);
34373
- return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34374
- const value = option?.[0] === defaultValue;
34375
- return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
34376
- "label",
34377
- {
34378
- style: {
34379
- position: "relative",
34380
- flexShrink: 0,
34381
- cursor: "default",
34382
- paddingTop: "10px",
34383
- paddingBottom: "10px",
34384
- paddingLeft: "32px",
34385
- // pl-8
34386
- paddingRight: "20px",
34387
- // pr-[20px]
34388
- fontWeight: 600,
34389
- // font-semibold
34390
- fontSize: "14px",
34391
- background: value ? "var(--color-primary)" : "#FAFAFA",
34392
- color: value ? "#fff" : "#121212",
34393
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34394
- // rounded-l-xl
34395
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34396
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34397
- // rounded-r-xl
34398
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34399
- },
34400
- children: [
34401
- /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34402
- "input",
34403
- {
34404
- type: "radio",
34405
- checked: value,
34406
- style: { display: "none" },
34407
- disabled: true
34408
- }
34409
- ),
34410
- option[1],
34411
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34412
- "div",
34413
- {
34414
- style: {
34415
- position: "absolute",
34416
- top: "50%",
34417
- transform: "translateY(-50%) rotate(45deg)",
34418
- zIndex: 2,
34419
- width: "30px",
34420
- height: "30px",
34421
- right: value ? "-14px" : "-14px",
34422
- background: value ? "var(--color-primary)" : "#FAFAFA",
34423
- border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
34424
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34425
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34426
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34427
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34428
- }
34429
- }
34430
- )
34431
- ]
34374
+ return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34375
+ "div",
34376
+ {
34377
+ style: {
34378
+ display: "flex",
34379
+ alignItems: "center",
34380
+ flexWrap: "wrap",
34381
+ overflow: "hidden"
34432
34382
  },
34433
- option?.[0]
34434
- );
34435
- }) });
34383
+ children: memoizedStatusOptions?.map((option, index4) => {
34384
+ const value = option?.[0] === defaultValue;
34385
+ return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
34386
+ "label",
34387
+ {
34388
+ style: {
34389
+ position: "relative",
34390
+ flexShrink: 0,
34391
+ cursor: "default",
34392
+ height: "36px",
34393
+ display: "flex",
34394
+ alignItems: "center",
34395
+ paddingLeft: "32px",
34396
+ // pl-8
34397
+ paddingRight: "20px",
34398
+ // pr-[20px]
34399
+ fontWeight: 600,
34400
+ // font-semibold
34401
+ fontSize: "14px",
34402
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34403
+ color: value ? "#fff" : "#121212",
34404
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34405
+ // rounded-l-xl
34406
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34407
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34408
+ // rounded-r-xl
34409
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34410
+ },
34411
+ children: [
34412
+ /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34413
+ "input",
34414
+ {
34415
+ type: "radio",
34416
+ checked: value,
34417
+ style: { display: "none" },
34418
+ disabled: true
34419
+ }
34420
+ ),
34421
+ option[1],
34422
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34423
+ "div",
34424
+ {
34425
+ style: {
34426
+ position: "absolute",
34427
+ top: "50%",
34428
+ transform: "translateY(-50%) rotate(45deg)",
34429
+ zIndex: 2,
34430
+ width: "26px",
34431
+ height: "26px",
34432
+ right: "-13px",
34433
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34434
+ border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34435
+ borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34436
+ borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34437
+ borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34438
+ borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34439
+ }
34440
+ }
34441
+ )
34442
+ ]
34443
+ },
34444
+ option?.[0]
34445
+ );
34446
+ })
34447
+ }
34448
+ );
34436
34449
  };
34437
34450
 
34438
34451
  // src/widgets/basic/date-option-field/date-option.tsx
package/dist/widgets.mjs CHANGED
@@ -32770,10 +32770,11 @@ var HtmlField = (props) => {
32770
32770
  isForm = true,
32771
32771
  defaultValue = "",
32772
32772
  onChange: onChange2,
32773
- value
32773
+ value,
32774
+ isEditTable
32774
32775
  } = props;
32775
32776
  const divRef = useRef16(null);
32776
- if (!isForm) {
32777
+ if (!isForm && !isEditTable) {
32777
32778
  return /* @__PURE__ */ jsx88("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
32778
32779
  }
32779
32780
  return /* @__PURE__ */ jsx88(
@@ -32801,7 +32802,7 @@ var HtmlField = (props) => {
32801
32802
  ref: divRef,
32802
32803
  contentEditable: !readonly,
32803
32804
  onInput: handleInput,
32804
- className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
32805
+ className: `${!isForm ? "!bg-transparent focus-within:!border-none" : `rounded-lg border min-h-[44px] w-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] border-input-primary outline-0 border-[rgba(66,66,66,0.12)] bg-white
32805
32806
  p-2 pl-3 font-normal text-sm gap-2 leading-5
32806
32807
  resize-none opacity-100 overflow-hidden
32807
32808
 
@@ -34307,69 +34308,81 @@ import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
34307
34308
  var StatusBarOptionField = (props) => {
34308
34309
  const { selection, defaultValue } = props;
34309
34310
  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
34310
- return /* @__PURE__ */ jsx106("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34311
- const value = option?.[0] === defaultValue;
34312
- return /* @__PURE__ */ jsxs74(
34313
- "label",
34314
- {
34315
- style: {
34316
- position: "relative",
34317
- flexShrink: 0,
34318
- cursor: "default",
34319
- paddingTop: "10px",
34320
- paddingBottom: "10px",
34321
- paddingLeft: "32px",
34322
- // pl-8
34323
- paddingRight: "20px",
34324
- // pr-[20px]
34325
- fontWeight: 600,
34326
- // font-semibold
34327
- fontSize: "14px",
34328
- background: value ? "var(--color-primary)" : "#FAFAFA",
34329
- color: value ? "#fff" : "#121212",
34330
- borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34331
- // rounded-l-xl
34332
- borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34333
- borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34334
- // rounded-r-xl
34335
- borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34336
- },
34337
- children: [
34338
- /* @__PURE__ */ jsx106(
34339
- "input",
34340
- {
34341
- type: "radio",
34342
- checked: value,
34343
- style: { display: "none" },
34344
- disabled: true
34345
- }
34346
- ),
34347
- option[1],
34348
- !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
34349
- "div",
34350
- {
34351
- style: {
34352
- position: "absolute",
34353
- top: "50%",
34354
- transform: "translateY(-50%) rotate(45deg)",
34355
- zIndex: 2,
34356
- width: "30px",
34357
- height: "30px",
34358
- right: value ? "-14px" : "-14px",
34359
- background: value ? "var(--color-primary)" : "#FAFAFA",
34360
- border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
34361
- borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34362
- borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34363
- borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34364
- borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34365
- }
34366
- }
34367
- )
34368
- ]
34311
+ return /* @__PURE__ */ jsx106(
34312
+ "div",
34313
+ {
34314
+ style: {
34315
+ display: "flex",
34316
+ alignItems: "center",
34317
+ flexWrap: "wrap",
34318
+ overflow: "hidden"
34369
34319
  },
34370
- option?.[0]
34371
- );
34372
- }) });
34320
+ children: memoizedStatusOptions?.map((option, index4) => {
34321
+ const value = option?.[0] === defaultValue;
34322
+ return /* @__PURE__ */ jsxs74(
34323
+ "label",
34324
+ {
34325
+ style: {
34326
+ position: "relative",
34327
+ flexShrink: 0,
34328
+ cursor: "default",
34329
+ height: "36px",
34330
+ display: "flex",
34331
+ alignItems: "center",
34332
+ paddingLeft: "32px",
34333
+ // pl-8
34334
+ paddingRight: "20px",
34335
+ // pr-[20px]
34336
+ fontWeight: 600,
34337
+ // font-semibold
34338
+ fontSize: "14px",
34339
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34340
+ color: value ? "#fff" : "#121212",
34341
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34342
+ // rounded-l-xl
34343
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34344
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34345
+ // rounded-r-xl
34346
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34347
+ },
34348
+ children: [
34349
+ /* @__PURE__ */ jsx106(
34350
+ "input",
34351
+ {
34352
+ type: "radio",
34353
+ checked: value,
34354
+ style: { display: "none" },
34355
+ disabled: true
34356
+ }
34357
+ ),
34358
+ option[1],
34359
+ !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
34360
+ "div",
34361
+ {
34362
+ style: {
34363
+ position: "absolute",
34364
+ top: "50%",
34365
+ transform: "translateY(-50%) rotate(45deg)",
34366
+ zIndex: 2,
34367
+ width: "26px",
34368
+ height: "26px",
34369
+ right: "-13px",
34370
+ background: value ? "var(--color-primary)" : "#FAFAFA",
34371
+ border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
34372
+ borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
34373
+ borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
34374
+ borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
34375
+ borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
34376
+ }
34377
+ }
34378
+ )
34379
+ ]
34380
+ },
34381
+ option?.[0]
34382
+ );
34383
+ })
34384
+ }
34385
+ );
34373
34386
  };
34374
34387
 
34375
34388
  // src/widgets/basic/date-option-field/date-option.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fctc/sme-widget-ui",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",