@fewangsit/wangsvue-fats 1.0.0-alpha.41 → 1.0.0-alpha.43

package/components/filtercontainer/FilterContainer-Cd8TpncM.es.js

@@ -0,0 +1,234 @@
+import { defineComponent as O, ref as g, shallowRef as F, onMounted as j, onBeforeUnmount as q, watch as G, withDirectives as J, createElementBlock as _, openBlock as s, mergeProps as i, withModifiers as Q, unref as n, createElementVNode as z, Fragment as B, renderList as H, createBlock as m, renderSlot as X, createVNode as $, vShow as Y, withCtx as Z } from "vue";
+import ee from "../buttonselecttree/ButtonSelectTree-D0lT3Exu.es.js";
+import { a as te } from "../../vendor/vee-validate-RE5RuswC.es.js";
+import { e as ae, f as oe, g as le, h as ne } from "../../async-components/index-C8nb7p3T.es.js";
+import { e as v } from "../../event-bus/index-PQwO5T6B.es.js";
+import { u as re } from "../../plugins/WangsVue-Dl5OiLXF.es.js";
+import { s as se, g as ie } from "../../utils/object.util-6veM2gu5.es.js";
+import { a as ce, b as ue } from "./helpers/applyFilter.helper-DpVdjYBr.es.js";
+import { _ as x } from "../button/Button-CgkhMnxo.es.js";
+const me = {
+  class: "flex items-end justify-end gap-2",
+  "data-wv-section": "filteractionbuttons"
+}, pe = /* @__PURE__ */ O({
+  inheritAttrs: !1,
+  __name: "FilterContainer",
+  props: {
+    tableName: { default: "datatable" },
+    fieldsPerRow: { default: 4 },
+    fields: {},
+    static: { type: Boolean }
+  },
+  emits: ["apply"],
+  setup(N, { emit: p }) {
+    const o = N, r = p, { locale: d } = re("FilterContainer"), { resetForm: R, handleSubmit: T, setValues: A } = te(), f = g({}), y = g({}), h = F(), b = g(null), k = F(!1), S = F(0);
+    j(() => {
+      P(), v.on("show-filter", M), v.on("data-table:updated", C), K();
+    }), q(() => {
+      v.off("show-filter", M), v.off("data-table:updated", C);
+    });
+    const M = (t) => {
+      t.tableName === o.tableName && (k.value = t.show);
+    }, C = (t) => {
+      t.tableName === o.tableName && (h.value = t.data);
+    }, E = async (t, a, e = {}) => {
+      if (o.static && !t)
+        y.value[a] = D(a);
+      else
+        try {
+          f.value[a] = !0;
+          const l = { [a]: !0, ...e }, u = await (t == null ? void 0 : t(l));
+          u && (y.value[a] = u);
+        } catch (l) {
+          console.error(l);
+        } finally {
+          f.value[a] = !1;
+        }
+    }, D = (t) => {
+      const a = /* @__PURE__ */ new Set();
+      if (h.value)
+        for (let e = 0; e < h.value.length; e++) {
+          const l = ie(h.value[e], t);
+          a.add(l);
+        }
+      return Array.from(a).map((e) => ({ label: e, value: e }));
+    }, P = () => {
+      if (b.value) {
+        const { children: t } = b.value, a = b.value.childElementCount, e = a % o.fieldsPerRow;
+        let [l, u] = [1, 1];
+        for (const V in Array.from({ length: a })) {
+          const U = Number(V) === a - 1;
+          t[V].setAttribute(
+            "style",
+            `grid-area: ${l}/${U && e ? o.fieldsPerRow : u}`
+          ), ++u > o.fieldsPerRow && (u = 1, l++);
+        }
+      }
+    }, L = () => {
+      R(), S.value++;
+    }, w = T((t) => {
+      o.static ? ce(t, o.tableName, o.fields, r) : ue(t, o.tableName, r);
+    }), W = (t, a) => {
+      var e;
+      switch (t.type) {
+        case "rangenumber":
+          return t.field ? `${t.field}.matchMode` : `${(e = t.fields) == null ? void 0 : e[a]}.matchMode`;
+        case "multiselect":
+        case "dropdown":
+        case "calendar":
+        case "category":
+        case "group":
+          return `${t.field}.matchMode`;
+      }
+    }, I = (t) => (() => {
+      switch (t.type) {
+        case "rangenumber":
+          return "BETWEEN";
+        case "multiselect":
+        case "category":
+        case "group":
+          return "IN";
+        case "dropdown":
+          return "EQUALS";
+        case "calendar":
+          return "DATE_BETWEEN";
+      }
+    })(), K = () => {
+      if (o.static) {
+        const t = {};
+        o.fields.forEach((a) => {
+          se(
+            t,
+            W(a),
+            I(a)
+          );
+        }), A(t);
+      }
+    }, c = (t, a) => {
+      switch (t.type) {
+        case "rangenumber":
+          return t.field ? o.static ? `${t.field}.value.${a}` : `${t.field}` : o.static ? `${t.fields[a]}.value` : t.fields[a];
+        case "multiselect":
+        case "dropdown":
+        case "calendar":
+        case "category":
+        case "group":
+          return o.static ? `${t.field}.value` : `${t.field}`;
+      }
+    };
+    return G(() => o.fields, P), (t, a) => J((s(), _("form", i({
+      ref_key: "container",
+      ref: b
+    }, t.$preset.filtercontainer.root, {
+      style: `grid-template-columns: repeat(${t.fieldsPerRow}, 1fr)`,
+      onSubmit: a[0] || (a[0] = Q(
+        //@ts-ignore
+        (...e) => n(w) && n(w)(...e),
+        ["prevent"]
+      )),
+      "data-wv-name": "filtercontainer"
+    }), [
+      (s(!0), _(B, null, H(t.fields, (e) => (s(), _(B, {
+        key: JSON.stringify(e) + S.value
+      }, [
+        e.type == "rangenumber" ? (s(), m(n(ae), i({
+          key: 0,
+          ref_for: !0
+        }, e, {
+          mandatory: !1,
+          "max-field-name": c(e, 1),
+          "min-field-name": c(e, 0),
+          "show-optional-text": !1,
+          "use-validator": ""
+        }), null, 16, ["max-field-name", "min-field-name"])) : e.type == "multiselect" ? (s(), m(n(oe), i({
+          key: 1,
+          ref_for: !0
+        }, e, {
+          "field-name": c(e),
+          loading: f.value[e.optionField ?? e.field],
+          mandatory: !1,
+          options: y.value[e.optionField ?? e.field],
+          "show-optional-text": !1,
+          onShow: (l) => E(
+            e.fetchOptionFn,
+            e.optionField ?? e.field,
+            e.params
+          ),
+          "option-label": "label",
+          "option-value": "value",
+          "use-validator": ""
+        }), null, 16, ["field-name", "loading", "options", "onShow"])) : e.type == "dropdown" ? (s(), m(n(le), i({
+          key: 2,
+          ref_for: !0
+        }, e, {
+          "field-name": c(e),
+          loading: f.value[e.field],
+          mandatory: !1,
+          options: y.value[e.optionField ?? e.field],
+          "show-optional-text": !1,
+          onShow: (l) => E(
+            e.fetchOptionFn,
+            e.optionField ?? e.field,
+            e.params
+          ),
+          "option-label": "label",
+          "option-value": "value",
+          "use-validator": ""
+        }), null, 16, ["field-name", "loading", "options", "onShow"])) : e.type === "calendar" ? (s(), m(n(ne), i({
+          key: 3,
+          ref_for: !0
+        }, e, {
+          "field-name": c(e),
+          mandatory: !1,
+          "show-optional-text": !1,
+          "selection-mode": "range",
+          "use-validator": ""
+        }), null, 16, ["field-name"])) : X(t.$slots, "field", {
+          key: 4,
+          field: e,
+          fieldName: c(e)
+        })
+      ], 64))), 128)),
+      z("div", me, [
+        $(x, {
+          label: n(d).clearFieldText,
+          onClick: L,
+          "data-wv-section": "clearbutton",
+          text: ""
+        }, null, 8, ["label"]),
+        $(x, {
+          label: n(d).applyText,
+          onClick: n(w),
+          "data-wv-section": "applybutton",
+          severity: "success"
+        }, null, 8, ["label", "onClick"])
+      ])
+    ], 16)), [
+      [Y, k.value]
+    ]);
+  }
+}), _e = /* @__PURE__ */ O({
+  __name: "FilterContainer",
+  setup(N) {
+    return (p, o) => (s(), m(pe, i({
+      fields: p.$attrs.fields
+    }, p.$attrs), {
+      field: Z(({ field: r, fieldName: d }) => [
+        $(ee, i(r, {
+          "field-data-key": r.fieldDataKey ?? "key",
+          "field-label": r.label,
+          "field-name": d,
+          label: r.buttonLabel,
+          mandatory: !1,
+          params: r.params,
+          "show-optional-text": !1,
+          "use-validator": ""
+        }), null, 16, ["field-data-key", "field-label", "field-name", "label", "params"])
+      ]),
+      _: 1
+    }, 16, ["fields"]));
+  }
+});
+export {
+  _e as _
+};

package/components/filtercontainer/FilterContainer-kkw3n3tu.system.js

@@ -0,0 +1 @@
+System.register(["vue","../buttonselecttree/ButtonSelectTree-DKmPV8FD.system.js","../../vendor/vee-validate-Cc_B-qII.system.js","../../async-components/index-DvjqHrYE.system.js","../../event-bus/index-CykcrsqY.system.js","../../plugins/WangsVue-Dugc3GRS.system.js","../../utils/object.util-uApor4uP.system.js","./helpers/applyFilter.helper-Ci22FrPF.system.js","../button/Button-D892iaxz.system.js"],function(ne,me){"use strict";var N,m,y,B,C,E,V,h,l,i,P,o,j,k,x,u,R,v,T,D,O,A,L,W,U,q,f,I,K,G,J,Q,S;return{setters:[t=>{N=t.defineComponent,m=t.ref,y=t.shallowRef,B=t.onMounted,C=t.onBeforeUnmount,E=t.watch,V=t.withDirectives,h=t.createElementBlock,l=t.openBlock,i=t.mergeProps,P=t.withModifiers,o=t.unref,j=t.createElementVNode,k=t.Fragment,x=t.renderList,u=t.createBlock,R=t.renderSlot,v=t.createVNode,T=t.vShow,D=t.withCtx},t=>{O=t.default},t=>{A=t.a},t=>{L=t.e,W=t.f,U=t.g,q=t.h},t=>{f=t.e},t=>{I=t.u},t=>{K=t.s,G=t.g},t=>{J=t.a,Q=t.b},t=>{S=t._}],execute:function(){const t={class:"flex items-end justify-end gap-2","data-wv-section":"filteractionbuttons"},se=N({inheritAttrs:!1,__name:"FilterContainer",props:{tableName:{default:"datatable"},fieldsPerRow:{default:4},fields:{},static:{type:Boolean}},emits:["apply"],setup(Z,{emit:b}){const s=Z,c=b,{locale:w}=I("FilterContainer"),{resetForm:oe,handleSubmit:re,setValues:le}=A(),g=m({}),F=m({}),$=y(),_=m(null),z=y(!1),H=y(0);B(()=>{te(),f.on("show-filter",X),f.on("data-table:updated",Y),de()}),C(()=>{f.off("show-filter",X),f.off("data-table:updated",Y)});const X=a=>{a.tableName===s.tableName&&(z.value=a.show)},Y=a=>{a.tableName===s.tableName&&($.value=a.data)},ee=async(a,n,e={})=>{if(s.static&&!a)F.value[n]=ie(n);else try{g.value[n]=!0;const r={[n]:!0,...e},d=await(a==null?void 0:a(r));d&&(F.value[n]=d)}catch(r){console.error(r)}finally{g.value[n]=!1}},ie=a=>{const n=new Set;if($.value)for(let e=0;e<$.value.length;e++){const r=G($.value[e],a);n.add(r)}return Array.from(n).map(e=>({label:e,value:e}))},te=()=>{if(_.value){const{children:a}=_.value,n=_.value.childElementCount,e=n%s.fieldsPerRow;let[r,d]=[1,1];for(const ae in Array.from({length:n})){const fe=Number(ae)===n-1;a[ae].setAttribute("style",`grid-area: ${r}/${fe&&e?s.fieldsPerRow:d}`),++d>s.fieldsPerRow&&(d=1,r++)}}},ce=()=>{oe(),H.value++},M=re(a=>{s.static?J(a,s.tableName,s.fields,c):Q(a,s.tableName,c)}),ue=(a,n)=>{var e;switch(a.type){case"rangenumber":return a.field?`${a.field}.matchMode`:`${(e=a.fields)==null?void 0:e[n]}.matchMode`;case"multiselect":case"dropdown":case"calendar":case"category":case"group":return`${a.field}.matchMode`}},pe=a=>(()=>{switch(a.type){case"rangenumber":return"BETWEEN";case"multiselect":case"category":case"group":return"IN";case"dropdown":return"EQUALS";case"calendar":return"DATE_BETWEEN"}})(),de=()=>{if(s.static){const a={};s.fields.forEach(n=>{K(a,ue(n),pe(n))}),le(a)}},p=(a,n)=>{switch(a.type){case"rangenumber":return a.field?s.static?`${a.field}.value.${n}`:`${a.field}`:s.static?`${a.fields[n]}.value`:a.fields[n];case"multiselect":case"dropdown":case"calendar":case"category":case"group":return s.static?`${a.field}.value`:`${a.field}`}};return E(()=>s.fields,te),(a,n)=>V((l(),h("form",i({ref_key:"container",ref:_},a.$preset.filtercontainer.root,{style:`grid-template-columns: repeat(${a.fieldsPerRow}, 1fr)`,onSubmit:n[0]||(n[0]=P((...e)=>o(M)&&o(M)(...e),["prevent"])),"data-wv-name":"filtercontainer"}),[(l(!0),h(k,null,x(a.fields,e=>(l(),h(k,{key:JSON.stringify(e)+H.value},[e.type=="rangenumber"?(l(),u(o(L),i({key:0,ref_for:!0},e,{mandatory:!1,"max-field-name":p(e,1),"min-field-name":p(e,0),"show-optional-text":!1,"use-validator":""}),null,16,["max-field-name","min-field-name"])):e.type=="multiselect"?(l(),u(o(W),i({key:1,ref_for:!0},e,{"field-name":p(e),loading:g.value[e.optionField??e.field],mandatory:!1,options:F.value[e.optionField??e.field],"show-optional-text":!1,onShow:r=>ee(e.fetchOptionFn,e.optionField??e.field,e.params),"option-label":"label","option-value":"value","use-validator":""}),null,16,["field-name","loading","options","onShow"])):e.type=="dropdown"?(l(),u(o(U),i({key:2,ref_for:!0},e,{"field-name":p(e),loading:g.value[e.field],mandatory:!1,options:F.value[e.optionField??e.field],"show-optional-text":!1,onShow:r=>ee(e.fetchOptionFn,e.optionField??e.field,e.params),"option-label":"label","option-value":"value","use-validator":""}),null,16,["field-name","loading","options","onShow"])):e.type==="calendar"?(l(),u(o(q),i({key:3,ref_for:!0},e,{"field-name":p(e),mandatory:!1,"show-optional-text":!1,"selection-mode":"range","use-validator":""}),null,16,["field-name"])):R(a.$slots,"field",{key:4,field:e,fieldName:p(e)})],64))),128)),j("div",t,[v(S,{label:o(w).clearFieldText,onClick:ce,"data-wv-section":"clearbutton",text:""},null,8,["label"]),v(S,{label:o(w).applyText,onClick:o(M),"data-wv-section":"applybutton",severity:"success"},null,8,["label","onClick"])])],16)),[[T,z.value]])}}),ye=ne("_",N({__name:"FilterContainer",setup(Z){return(b,s)=>(l(),u(se,i({fields:b.$attrs.fields},b.$attrs),{field:D(({field:c,fieldName:w})=>[v(O,i(c,{"field-data-key":c.fieldDataKey??"key","field-label":c.label,"field-name":w,label:c.buttonLabel,mandatory:!1,params:c.params,"show-optional-text":!1,"use-validator":""}),null,16,["field-data-key","field-label","field-name","label","params"])]),_:1},16,["fields"]))}}))}}});

package/components/filtercontainer/helpers/applyFilter.helper-Ci22FrPF.system.js

@@ -0,0 +1 @@
+System.register(["../../../event-bus/index-CykcrsqY.system.js","../../../utils/object.util-uApor4uP.system.js"],function(u,d){"use strict";var n,p;return{setters:[o=>{n=o.e},o=>{p=o.g}],execute:function(){const o=e=>{if(Array.isArray(e)){const[i,l]=e;return[new Date(i).setHours(0,0,0),new Date(l??i).setHours(23,59,59)]}},h=u("b",(e,i,l)=>{const y=Object.keys(e),a={};n.emit("multi-select:hide-overlay"),y.forEach(t=>{var f;const r=Array.isArray(e[t]),A=typeof e[t]=="string",s=r?(f=e[t])==null?void 0:f.filter(g=>g!=null):e[t];if((s!=null&&!r||r&&s.length)&&!A){if(Array.isArray(s)&&s.every(c=>typeof c=="number"&&c>9466848e5&&!isNaN(new Date(c).getTime()))){a[t]=JSON.stringify(o(s));return}a[t]=s!=null&&s.length?JSON.stringify(e[t]):JSON.stringify(s)}else a[t]=e[t]}),n.emit("data-table:apply-filter",{tableName:i,filter:a}),n.emit("data-table:clear-selected-data",{tableName:i}),l==null||l("apply",a)}),m=u("a",(e,i,l,y)=>{const a={};n.emit("multi-select:hide-overlay"),l.forEach(t=>{if("field"in t){const r=p(e,t.field);"value"in r&&r.value!=null&&(a[t.field]=r,"matchMode"in r&&r.matchMode=="DATE_BETWEEN"&&(a[t.field].value=o(r.value)),Array.isArray(r.value)&&!r.value.filter(Boolean).length&&delete a[t.field])}}),n.emit("data-table:apply-filter",{tableName:i,filter:a}),n.emit("data-table:clear-selected-data",{tableName:i}),y==null||y("apply",a)})}}});

package/components/filtercontainer/helpers/applyFilter.helper-DpVdjYBr.es.js

@@ -0,0 +1,56 @@
+import { e as n } from "../../../event-bus/index-PQwO5T6B.es.js";
+import { g } from "../../../utils/object.util-6veM2gu5.es.js";
+const f = (e) => {
+  if (Array.isArray(e)) {
+    const [s, l] = e;
+    return [
+      new Date(s).setHours(0, 0, 0),
+      new Date(l ?? s).setHours(23, 59, 59)
+    ];
+  }
+}, d = (e, s, l) => {
+  const o = Object.keys(e), a = {};
+  n.emit("multi-select:hide-overlay"), o.forEach((t) => {
+    var c;
+    const r = Array.isArray(e[t]), A = typeof e[t] == "string", i = r ? (c = e[t]) == null ? void 0 : c.filter((p) => p != null) : e[t];
+    if ((i != null && !r || r && i.length) && !A) {
+      if (Array.isArray(i) && i.every(
+        (y) => typeof y == "number" && y > 9466848e5 && // Greater than 2000-01-01 00:00:00 UTC (milliseconds)
+        !isNaN(new Date(y).getTime())
+        // Converts to a valid date
+      )) {
+        a[t] = JSON.stringify(
+          // Adjust the end range time to 23.59.59 and the start to 00.00.00 to fix filtering issue when user only select a date
+          f(i)
+        );
+        return;
+      }
+      a[t] = i != null && i.length ? JSON.stringify(e[t]) : JSON.stringify(i);
+    } else
+      a[t] = e[t];
+  }), n.emit("data-table:apply-filter", {
+    tableName: s,
+    filter: a
+  }), n.emit("data-table:clear-selected-data", {
+    tableName: s
+  }), l == null || l("apply", a);
+}, m = (e, s, l, o) => {
+  const a = {};
+  n.emit("multi-select:hide-overlay"), l.forEach((t) => {
+    if ("field" in t) {
+      const r = g(e, t.field);
+      "value" in r && r.value != null && (a[t.field] = r, "matchMode" in r && r.matchMode == "DATE_BETWEEN" && (a[t.field].value = f(
+        r.value
+      )), Array.isArray(r.value) && !r.value.filter(Boolean).length && delete a[t.field]);
+    }
+  }), n.emit("data-table:apply-filter", {
+    tableName: s,
+    filter: a
+  }), n.emit("data-table:clear-selected-data", {
+    tableName: s
+  }), o == null || o("apply", a);
+};
+export {
+  m as a,
+  d as b
+};

package/components/form/Form-By85t_oI.system.js

@@ -0,0 +1 @@
+System.register(["vue","../../vendor/vee-validate-Cc_B-qII.system.js","../../async-components/index-DvjqHrYE.system.js","../button/Button-D892iaxz.system.js","../validatormessage/ValidatorMessage-VVfyqlRF.system.js"],function(ce,ge){"use strict";var E,M,b,T,i,N,B,r,s,l,R,m,u,A,V,C,W,O,H,p,z,D,y,q;return{setters:[e=>{E=e.defineComponent,M=e.onMounted,b=e.ref,T=e.inject,i=e.shallowRef,N=e.provide,B=e.createElementBlock,r=e.openBlock,s=e.mergeProps,l=e.unref,R=e.withModifiers,m=e.createElementVNode,u=e.createCommentVNode,A=e.renderSlot,V=e.normalizeProps,C=e.createVNode,W=e.withDirectives,O=e.vShow,H=e.guardReactiveProps,p=e.createBlock},e=>{z=e.a},e=>{D=e.C},e=>{y=e._},e=>{q=e._}],execute:function(){const e=ce("default",E({__name:"Form",props:{buttonsTemplate:{},disableSubmit:{type:Boolean},cancelBtnLabel:{default:"Batal"},clearBtnLabel:{default:"Bersihkan Field"},columnPerRow:{},hideFooter:{type:Boolean},hideStayCheckbox:{type:Boolean},invalid:{type:Boolean},resetAfterSubmit:{type:Boolean,default:!0},saveBtnLabel:{default:"Simpan"},submitBtnLabel:{default:"Simpan"},stayCheckboxLabel:{default:"Tetap di halaman ini"},validatorMessage:{default:"Please input all required field!"},validateOnSave:{type:Boolean,default:!1},cancelBtnSeverity:{default:"secondary"},saveBtnSeverity:{default:"success"},submitBtnSeverity:{default:"success"}},emits:["cancel","clear","save","submit"],setup(fe,{expose:ve,emit:de}){const o=fe,g=de;M(()=>{if($.value){const t=o.columnPerRow??1;$.value.style.gridTemplateColumns=`repeat(${t}, minmax(0, 1fr))`,x()}});const n=T("preset",{}).form,{handleSubmit:be,values:w,resetForm:I,errors:me,resetField:pe,setValues:ye,setFieldValue:ke,setErrors:Se}=z(),k=i(!1),K=b(),c=i(!1),U=i(!1),F=i(0),L=b(),v=i(!1),P=i(!1),$=b(null),j=b(null);N("isSubmitting",v);const x=()=>{var t;if(L.value){const a=(t=L.value)==null?void 0:t.offsetHeight;j.value&&(j.value.style.height=`calc(100% + ${a+20}px)`)}},G=()=>{v.value=!0,U.value||(c.value=!0)},J=()=>{v.value=!0,P.value=!0,o.validateOnSave?(U.value||(c.value=!0),h()):Be()},h=be(t=>{if(!o.invalid){const a=X(t),f={stayAfterSubmit:k.value,formValues:a};P.value?g("save",f):g("submit",f),c.value=!1,P.value=!1,o.resetAfterSubmit&&(F.value+=1,I())}v.value=!1},()=>{v.value=!1}),Be=()=>{const t=X(w),a={stayAfterSubmit:k.value,formValues:t};g("save",a),v.value=!1},Q=()=>{I(),F.value++,g("clear"),c.value=!1},X=t=>{const a=t,f=Object.keys(a);for(const d of f)typeof a[d]=="string"&&(a[d]=a[d].trim());return a};return ve({stayAfterSubmit:k,submit:h,onSubmitClicked:G,onSaveClicked:J,showValidator:c,formElement:K,clearField:Q,resetField:pe,errors:me,setOuterFieldsWrapperHeight:x,setValues:ye,setFieldValue:ke,setErrors:Se,values:w}),(t,a)=>{var f,d,Y,Z,_,ee,te,ae,le,se,ne,oe,re,ie,ue;return r(),B("form",s({ref_key:"formElement",ref:K},(f=l(n))==null?void 0:f.root({props:o}),{onInput:a[2]||(a[2]=S=>c.value=!1),onSubmit:a[3]||(a[3]=R((...S)=>l(h)&&l(h)(...S),["prevent"]))}),[m("div",{ref_key:"outerFieldsWrapper",ref:j},[m("div",s({ref_key:"fieldsWrapper",ref:$},(d=l(n))==null?void 0:d["fields-wrapper"]),[A(t.$slots,"fields",{key:F.value,formValues:l(w)})],16)],512),t.hideFooter?u("",!0):(r(),B("div",s({key:0,ref_key:"footer",ref:L},(Y=l(n))==null?void 0:Y.footer),[t.hideStayCheckbox?u("",!0):(r(),B("div",V(s({key:0},(Z=l(n))==null?void 0:Z.staycheckbox)),[C(l(D),{modelValue:k.value,"onUpdate:modelValue":a[0]||(a[0]=S=>k.value=S),label:t.stayCheckboxLabel},null,8,["modelValue","label"])],16)),m("div",s({id:"footer-actions-wrapper"},(_=l(n))==null?void 0:_["action-buttons"]),[W(C(q,s((ee=l(n))==null?void 0:ee["validator-message"],{message:t.validatorMessage}),null,16,["message"]),[[O,c.value||o.invalid]]),m("div",V(H((te=l(n))==null?void 0:te["button-wrapper"])),[(ae=o.buttonsTemplate)!=null&&ae.includes("cancel")?(r(),p(y,s({key:0},(le=l(n))==null?void 0:le["cancel-button"],{label:t.cancelBtnLabel,severity:t.cancelBtnSeverity,onClick:a[1]||(a[1]=S=>t.$emit("cancel")),"data-test":"cancel-button",text:"",type:"button"}),null,16,["label","severity"])):u("",!0),(se=o.buttonsTemplate)!=null&&se.includes("clear")?(r(),p(y,s({key:1},(ne=l(n))==null?void 0:ne["clear-button"],{label:t.clearBtnLabel,onClick:Q,text:"",type:"button"}),null,16,["label"])):u("",!0),(oe=o.buttonsTemplate)!=null&&oe.includes("save")?(r(),p(y,s({key:2},(re=l(n))==null?void 0:re["save-button"],{label:t.saveBtnLabel,severity:t.saveBtnSeverity,onClick:J,outlined:"",type:"button"}),null,16,["label","severity"])):u("",!0),(ie=o.buttonsTemplate)!=null&&ie.includes("submit")?(r(),p(y,s({key:3},(ue=l(n))==null?void 0:ue["submit-button"],{disabled:t.disableSubmit,label:t.submitBtnLabel,severity:t.submitBtnSeverity,onClick:G,type:"submit"}),null,16,["disabled","label","severity"])):u("",!0)],16)],16)],16))],16)}}}))}}});

package/components/form/Form-DhWBpdkq.es.js

@@ -0,0 +1,181 @@
+import { defineComponent as ne, onMounted as ie, ref as y, inject as ue, shallowRef as d, provide as fe, createElementBlock as L, openBlock as i, mergeProps as o, unref as l, withModifiers as de, createElementVNode as k, createCommentVNode as m, renderSlot as me, normalizeProps as X, createVNode as Y, withDirectives as ve, vShow as ce, guardReactiveProps as be, createBlock as S } from "vue";
+import { a as pe } from "../../vendor/vee-validate-RE5RuswC.es.js";
+import { C as ye } from "../../async-components/index-C8nb7p3T.es.js";
+import { _ as B } from "../button/Button-CgkhMnxo.es.js";
+import { _ as ke } from "../validatormessage/ValidatorMessage-BtKfBXzO.es.js";
+const ge = /* @__PURE__ */ ne({
+  __name: "Form",
+  props: {
+    buttonsTemplate: {},
+    disableSubmit: { type: Boolean },
+    cancelBtnLabel: { default: "Batal" },
+    clearBtnLabel: { default: "Bersihkan Field" },
+    columnPerRow: {},
+    hideFooter: { type: Boolean },
+    hideStayCheckbox: { type: Boolean },
+    invalid: { type: Boolean },
+    resetAfterSubmit: { type: Boolean, default: !0 },
+    saveBtnLabel: { default: "Simpan" },
+    submitBtnLabel: { default: "Simpan" },
+    stayCheckboxLabel: { default: "Tetap di halaman ini" },
+    validatorMessage: { default: "Please input all required field!" },
+    validateOnSave: { type: Boolean, default: !1 },
+    cancelBtnSeverity: { default: "secondary" },
+    saveBtnSeverity: { default: "success" },
+    submitBtnSeverity: { default: "success" }
+  },
+  emits: ["cancel", "clear", "save", "submit"],
+  setup(Z, { expose: x, emit: _ }) {
+    const s = Z, b = _;
+    ie(() => {
+      if (F.value) {
+        const e = s.columnPerRow ?? 1;
+        F.value.style.gridTemplateColumns = `repeat(${e}, minmax(0, 1fr))`, A();
+      }
+    });
+    const a = ue("preset", {}).form, {
+      handleSubmit: ee,
+      values: C,
+      resetForm: $,
+      errors: te,
+      resetField: le,
+      setValues: ae,
+      setFieldValue: se,
+      setErrors: oe
+    } = pe(), v = d(!1), P = y(), r = d(!1), T = d(!1), h = d(0), V = y(), u = d(!1), g = d(!1), F = y(null), w = y(null);
+    fe("isSubmitting", u);
+    const A = () => {
+      var e;
+      if (V.value) {
+        const t = (e = V.value) == null ? void 0 : e.offsetHeight;
+        w.value && (w.value.style.height = `calc(100% + ${t + 20}px)`);
+      }
+    }, E = () => {
+      u.value = !0, T.value || (r.value = !0);
+    }, W = () => {
+      u.value = !0, g.value = !0, s.validateOnSave ? (T.value || (r.value = !0), p()) : re();
+    }, p = ee(
+      (e) => {
+        if (!s.invalid) {
+          const t = O(e), n = {
+            stayAfterSubmit: v.value,
+            formValues: t
+          };
+          g.value ? b("save", n) : b("submit", n), r.value = !1, g.value = !1, s.resetAfterSubmit && (h.value += 1, $());
+        }
+        u.value = !1;
+      },
+      () => {
+        u.value = !1;
+      }
+    ), re = () => {
+      const e = O(C), t = {
+        stayAfterSubmit: v.value,
+        formValues: e
+      };
+      b("save", t), u.value = !1;
+    }, M = () => {
+      $(), h.value++, b("clear"), r.value = !1;
+    }, O = (e) => {
+      const t = e, n = Object.keys(t);
+      for (const f of n)
+        typeof t[f] == "string" && (t[f] = t[f].trim());
+      return t;
+    };
+    return x({
+      stayAfterSubmit: v,
+      submit: p,
+      onSubmitClicked: E,
+      onSaveClicked: W,
+      showValidator: r,
+      formElement: P,
+      clearField: M,
+      resetField: le,
+      errors: te,
+      setOuterFieldsWrapperHeight: A,
+      setValues: ae,
+      setFieldValue: se,
+      setErrors: oe,
+      values: C
+    }), (e, t) => {
+      var n, f, R, H, N, j, q, z, D, I, K, U, G, J, Q;
+      return i(), L("form", o({
+        ref_key: "formElement",
+        ref: P
+      }, (n = l(a)) == null ? void 0 : n.root({ props: s }), {
+        onInput: t[2] || (t[2] = (c) => r.value = !1),
+        onSubmit: t[3] || (t[3] = de(
+          //@ts-ignore
+          (...c) => l(p) && l(p)(...c),
+          ["prevent"]
+        ))
+      }), [
+        k("div", {
+          ref_key: "outerFieldsWrapper",
+          ref: w
+        }, [
+          k("div", o({
+            ref_key: "fieldsWrapper",
+            ref: F
+          }, (f = l(a)) == null ? void 0 : f["fields-wrapper"]), [
+            me(e.$slots, "fields", {
+              key: h.value,
+              formValues: l(C)
+            })
+          ], 16)
+        ], 512),
+        e.hideFooter ? m("", !0) : (i(), L("div", o({
+          key: 0,
+          ref_key: "footer",
+          ref: V
+        }, (R = l(a)) == null ? void 0 : R.footer), [
+          e.hideStayCheckbox ? m("", !0) : (i(), L("div", X(o({ key: 0 }, (H = l(a)) == null ? void 0 : H.staycheckbox)), [
+            Y(l(ye), {
+              modelValue: v.value,
+              "onUpdate:modelValue": t[0] || (t[0] = (c) => v.value = c),
+              label: e.stayCheckboxLabel
+            }, null, 8, ["modelValue", "label"])
+          ], 16)),
+          k("div", o({ id: "footer-actions-wrapper" }, (N = l(a)) == null ? void 0 : N["action-buttons"]), [
+            ve(Y(ke, o((j = l(a)) == null ? void 0 : j["validator-message"], { message: e.validatorMessage }), null, 16, ["message"]), [
+              [ce, r.value || s.invalid]
+            ]),
+            k("div", X(be((q = l(a)) == null ? void 0 : q["button-wrapper"])), [
+              (z = s.buttonsTemplate) != null && z.includes("cancel") ? (i(), S(B, o({ key: 0 }, (D = l(a)) == null ? void 0 : D["cancel-button"], {
+                label: e.cancelBtnLabel,
+                severity: e.cancelBtnSeverity,
+                onClick: t[1] || (t[1] = (c) => e.$emit("cancel")),
+                "data-test": "cancel-button",
+                text: "",
+                type: "button"
+              }), null, 16, ["label", "severity"])) : m("", !0),
+              (I = s.buttonsTemplate) != null && I.includes("clear") ? (i(), S(B, o({ key: 1 }, (K = l(a)) == null ? void 0 : K["clear-button"], {
+                label: e.clearBtnLabel,
+                onClick: M,
+                text: "",
+                type: "button"
+              }), null, 16, ["label"])) : m("", !0),
+              (U = s.buttonsTemplate) != null && U.includes("save") ? (i(), S(B, o({ key: 2 }, (G = l(a)) == null ? void 0 : G["save-button"], {
+                label: e.saveBtnLabel,
+                severity: e.saveBtnSeverity,
+                onClick: W,
+                outlined: "",
+                type: "button"
+              }), null, 16, ["label", "severity"])) : m("", !0),
+              (J = s.buttonsTemplate) != null && J.includes("submit") ? (i(), S(B, o({ key: 3 }, (Q = l(a)) == null ? void 0 : Q["submit-button"], {
+                disabled: e.disableSubmit,
+                label: e.submitBtnLabel,
+                severity: e.submitBtnSeverity,
+                onClick: E,
+                type: "submit"
+              }), null, 16, ["disabled", "label", "severity"])) : m("", !0)
+            ], 16)
+          ], 16)
+        ], 16))
+      ], 16);
+    };
+  }
+});
+export {
+  ge as default
+};