@tsed/react-formio 3.0.0-rc.26 → 3.0.0-rc.28

package/dist/molecules/table/filters/RangeFilter.js

@@ -1,40 +1,42 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { registerComponent as p, getComponent as x } from "../../../registries/components.js";
-function g({ header: c, options: a }) {
-  const { column: l } = c, r = x("InputText"), m = c.column.getFilterValue(), t = a.min ?? l.getFacetedMinMaxValues()?.[0], n = a.max ?? l.getFacetedMinMaxValues()?.[1], o = a.step ?? 1;
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { registerComponent as x, getComponent as p } from "../../../registries/components.js";
+function g({ header: m, options: t }) {
+  const { column: e } = m, c = p("InputText"), r = m.column.getFilterValue(), a = t.min ?? e.getFacetedMinMaxValues()?.[0], l = t.max ?? e.getFacetedMinMaxValues()?.[1], o = t.step ?? 1;
   return /* @__PURE__ */ u("div", { children: [
     /* @__PURE__ */ u("div", { className: "flex space-x-2", children: [
-      /* @__PURE__ */ e("div", { className: "w-1/2", children: /* @__PURE__ */ e(
-        r,
+      /* @__PURE__ */ n("div", { className: "w-1/2", children: /* @__PURE__ */ n(
+        c,
         {
+          name: `${e.id}-min`,
           type: "number",
           size: "small",
-          min: t,
-          max: n,
+          min: a,
+          max: l,
           step: o,
-          value: m?.[0] ?? "",
-          onChange: (d, s) => l.setFilterValue((i) => [s, i?.[1]]),
-          placeholder: `Min ${t !== void 0 ? `(${t})` : ""}`
+          value: r?.[0] ?? "",
+          onChange: (d, i) => e.setFilterValue((s) => [i, s?.[1]]),
+          placeholder: `Min ${a !== void 0 ? `(${a})` : ""}`
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "w-1/2", children: /* @__PURE__ */ e(
-        r,
+      /* @__PURE__ */ n("div", { className: "w-1/2", children: /* @__PURE__ */ n(
+        c,
         {
+          name: `${e.id}-max`,
           type: "number",
           size: "small",
-          min: t,
-          max: n,
+          min: a,
+          max: l,
           step: o,
-          value: m?.[1] ?? "",
-          onChange: (d, s) => l.setFilterValue((i) => [i?.[0], s]),
-          placeholder: `Max ${n ? `(${n})` : ""}`
+          value: r?.[1] ?? "",
+          onChange: (d, i) => e.setFilterValue((s) => [s?.[0], i]),
+          placeholder: `Max ${l ? `(${l})` : ""}`
         }
       ) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "h-1" })
+    /* @__PURE__ */ n("div", { className: "h-1" })
   ] });
 }
-p("Filter.range", g);
+x("Filter.range", g);
 export {
   g as RangeFilter
 };

package/dist/molecules/table/filters/RangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeFilter.js","sources":["../../../../src/molecules/table/filters/RangeFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport { type InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { FilterRangeOptions } from \"./Filters\";\n\nexport function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {\n  const { column } = header;\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];\n  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];\n  const step = options.step ?? 1;\n\n  return (\n    <div>\n      <div className='flex space-x-2'>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}\n            placeholder={`Min ${min !== undefined ? `(${min})` : \"\"}`}\n          />\n        </div>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}\n            placeholder={`Max ${max ? `(${max})` : \"\"}`}\n          />\n        </div>\n      </div>\n      <div className='h-1' />\n    </div>\n  );\n}\n\nregisterComponent(\"Filter.range\", RangeFilter);\n"],"names":["RangeFilter","header","options","column","InputText","getComponent","columnFilterValue","min","max","step","jsxs","jsx","_","value","old","registerComponent"],"mappings":";;AAKO,SAASA,EAAwB,EAAE,QAAAC,GAAQ,SAAAC,KAAkD;AAClG,QAAM,EAAE,QAAAC,MAAWF,GACbG,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBL,EAAO,OAAO,eAAA,GAClCM,IAAML,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDK,IAAMN,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDM,IAAOP,EAAQ,QAAQ;AAE7B,2BACG,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACD,GAAOC,IAAM,CAAC,CAAC,CAAC;AAAA,UAC1F,aAAa,OAAOP,MAAQ,SAAY,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,GAE3D;AAAA,MACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACA,IAAM,CAAC,GAAGD,CAAK,CAAC;AAAA,UAC1F,aAAa,OAAOL,IAAM,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,EAC3C,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,MAAA,CAAM;AAAA,EAAA,GACvB;AAEJ;AAEAI,EAAkB,gBAAgBf,CAAW;"}
+{"version":3,"file":"RangeFilter.js","sources":["../../../../src/molecules/table/filters/RangeFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport { type InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { FilterRangeOptions } from \"./Filters\";\n\nexport function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {\n  const { column } = header;\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];\n  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];\n  const step = options.step ?? 1;\n\n  return (\n    <div>\n      <div className='flex space-x-2'>\n        <div className='w-1/2'>\n          <InputText\n            name={`${column.id}-min`}\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}\n            placeholder={`Min ${min !== undefined ? `(${min})` : \"\"}`}\n          />\n        </div>\n        <div className='w-1/2'>\n          <InputText\n            name={`${column.id}-max`}\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}\n            placeholder={`Max ${max ? `(${max})` : \"\"}`}\n          />\n        </div>\n      </div>\n      <div className='h-1' />\n    </div>\n  );\n}\n\nregisterComponent(\"Filter.range\", RangeFilter);\n"],"names":["RangeFilter","header","options","column","InputText","getComponent","columnFilterValue","min","max","step","jsxs","jsx","_","value","old","registerComponent"],"mappings":";;AAKO,SAASA,EAAwB,EAAE,QAAAC,GAAQ,SAAAC,KAAkD;AAClG,QAAM,EAAE,QAAAC,MAAWF,GACbG,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBL,EAAO,OAAO,eAAA,GAClCM,IAAML,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDK,IAAMN,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDM,IAAOP,EAAQ,QAAQ;AAE7B,2BACG,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAM,GAAGD,EAAO,EAAE;AAAA,UAClB,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAI;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACD,GAAOC,IAAM,CAAC,CAAC,CAAC;AAAA,UAC1F,aAAa,OAAOP,MAAQ,SAAY,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,GAE3D;AAAA,MACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAM,GAAGD,EAAO,EAAE;AAAA,UAClB,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAI;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACA,IAAM,CAAC,GAAGD,CAAK,CAAC;AAAA,UAC1F,aAAa,OAAOL,IAAM,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,EAC3C,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,MAAA,CAAM;AAAA,EAAA,GACvB;AAEJ;AAEAI,EAAkB,gBAAgBf,CAAW;"}

package/dist/molecules/table/filters/TextFieldFilter.js

@@ -1,21 +1,21 @@
-import { jsxs as r, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, Fragment as c, jsx as n } from "react/jsx-runtime";
 import { registerComponent as m, getComponent as d } from "../../../registries/components.js";
 import { useUniqValues as p } from "../hooks/useUniqValues.js";
-function F({ header: l, options: n }) {
-  const o = d("InputText"), u = l.column.getFilterValue(), a = p({ header: l }), i = `data_list_${l.column.id}`;
-  return /* @__PURE__ */ r(c, { children: [
-    !n.disableDatalist && /* @__PURE__ */ e("datalist", { id: i, children: a.map((t) => /* @__PURE__ */ e("option", { value: t.value, children: t.label || t.value }, t.value)) }),
-    /* @__PURE__ */ e(
-      o,
+function F({ header: l, options: i }) {
+  const a = d("InputText"), u = l.column.getFilterValue(), r = p({ header: l }), o = `data_list_${l.column.id}`;
+  return /* @__PURE__ */ s(c, { children: [
+    !i.disableDatalist && /* @__PURE__ */ n("datalist", { id: o, children: r.map((t, e) => /* @__PURE__ */ n("option", { value: t.value, children: t.label || t.value }, `${t.value || t.label}-${e}`)) }),
+    /* @__PURE__ */ n(
+      a,
       {
         size: "small",
         placeholder: `Filter by ${l.column.columnDef.header}`,
-        ...n,
+        ...i,
         name: `filter_${l.column.id}`,
         "data-testid": `filter_${l.column.id}`,
         value: u ?? "",
-        list: i,
-        onChange: (t, s) => l.column.setFilterValue(s)
+        list: o,
+        onChange: (t, e) => l.column.setFilterValue(e)
       }
     )
   ] });

package/dist/molecules/table/filters/TextFieldFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((item) => (\n            <option value={item.value} key={item.value}>\n              {item.label || item.value}\n            </option>\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","item","_","value","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AACrG,QAAMC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,GAC3CO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SACE,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACR,gBAAAS,EAAC,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,MACf,gBAAAD,EAAC,YAAO,OAAOC,EAAK,OACjB,UAAAA,EAAK,SAASA,EAAK,MAAA,GADUA,EAAK,KAErC,CACD,EAAA,CACH;AAAA,IAEF,gBAAAD;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACK,GAAGC,MAAUb,EAAO,OAAO,eAAea,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAC,EAAkB,eAAef,CAAe;"}
+{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((item, index) => (\n            <option value={item.value} key={String(`${item.value || item.label}-${index}`)}>\n              {item.label || item.value}\n            </option>\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","item","index","_","value","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AACrG,QAAMC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,GAC3CO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SACE,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACR,gBAAAS,EAAC,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,GAAMC,MACrB,gBAAAF,EAAC,YAAO,OAAOC,EAAK,OACjB,UAAAA,EAAK,SAASA,EAAK,MAAA,GADiB,GAAGA,EAAK,SAASA,EAAK,KAAK,IAAIC,CAAK,EAE3E,CACD,GACH;AAAA,IAEF,gBAAAF;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACM,GAAGC,MAAUd,EAAO,OAAO,eAAec,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAC,EAAkB,eAAehB,CAAe;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-rc.26",
+  "version": "3.0.0-rc.28",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@tanstack/react-table": ">=8.20.6",
-    "@tsed/tailwind-formio": "3.0.0-rc.26",
-    "@tsed/typescript": "3.0.0-rc.26",
+    "@tsed/tailwind-formio": "3.0.0-rc.28",
+    "@tsed/typescript": "3.0.0-rc.28",
     "microbundle": "0.13.0",
     "vite": "7.1.5",
     "vitest": "3.2.4"

package/src/molecules/table/filters/RangeFilter.tsx

@@ -16,6 +16,7 @@ export function RangeFilter<Data = any>({ header, options }: FilterProps<Data, F
       <div className='flex space-x-2'>
         <div className='w-1/2'>
           <InputText
+            name={`${column.id}-min`}
             type='number'
             size='small'
             {...{ min, max, step }}
@@ -26,6 +27,7 @@ export function RangeFilter<Data = any>({ header, options }: FilterProps<Data, F
         </div>
         <div className='w-1/2'>
           <InputText
+            name={`${column.id}-max`}
             type='number'
             size='small'
             {...{ min, max, step }}

package/src/molecules/table/filters/TextFieldFilter.tsx

@@ -14,8 +14,8 @@ export function TextFieldFilter<Data = any>({ header, options }: FilterProps<Dat
     <>
       {!options.disableDatalist && (
         <datalist id={datalistId}>
-          {uniqValues.map((item) => (
-            <option value={item.value} key={item.value}>
+          {uniqValues.map((item, index) => (
+            <option value={item.value} key={String(`${item.value || item.label}-${index}`)}>
               {item.label || item.value}
             </option>
           ))}