@fewangsit/wangsvue-fats 1.0.1-alpha.7 → 1.0.1-alpha.70

package/filtercontainer/index.es.js

@@ -0,0 +1,291 @@
+import { defineComponent as R, ref as N, shallowRef as k, onMounted as G, onBeforeUnmount as I, watch as Q, withDirectives as z, createElementBlock as S, openBlock as h, mergeProps as b, withModifiers as X, unref as w, createElementVNode as Y, Fragment as B, renderList as Z, createBlock as _, renderSlot as ee, createVNode as M, vShow as te, withCtx as ae } from "vue";
+import { _ as oe } from "../buttonselecttree/index.es.js";
+import { a as re } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { e as p } from "../event-bus/index.es.js";
+import { u as se } from "../plugins/WangsVue.es.js";
+import { g as L, s as ne } from "../utils/object.util.es.js";
+import { _ as x } from "../button/index.es.js";
+import { _ as le } from "../calendar/index.es.js";
+import { _ as ie } from "../dropdown/index.es.js";
+import { _ as ce } from "../inputrangenumber/index.es.js";
+import { _ as ue } from "../multiselect/index.es.js";
+const J = (n) => {
+  if (Array.isArray(n)) {
+    const [u, o] = n;
+    return [
+      new Date(u).setHours(0, 0, 0),
+      new Date(o ?? u).setHours(23, 59, 59)
+    ];
+  }
+}, me = (n, u, o) => {
+  const l = Object.keys(n), s = {};
+  p.emit("multi-select:hide-overlay"), l.forEach((r) => {
+    var d;
+    const i = Array.isArray(n[r]), F = typeof n[r] == "string", c = i ? (d = n[r]) == null ? void 0 : d.filter((v) => v != null) : n[r];
+    if ((c != null && !i || i && c.length) && !F) {
+      if (Array.isArray(c) && c.every(
+        (f) => typeof f == "number" && f > 9466848e5 && // Greater than 2000-01-01 00:00:00 UTC (milliseconds)
+        !isNaN(new Date(f).getTime())
+        // Converts to a valid date
+      )) {
+        s[r] = 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
+          J(c)
+        );
+        return;
+      }
+      s[r] = c != null && c.length ? JSON.stringify(n[r]) : JSON.stringify(c);
+    } else
+      s[r] = n[r];
+  }), p.emit("data-table:apply-filter", {
+    tableName: u,
+    filter: s
+  }), p.emit("data-table:clear-selected-data", {
+    tableName: u
+  }), o == null || o("apply", s);
+}, pe = (n, u, o, l) => {
+  const s = {};
+  p.emit("multi-select:hide-overlay"), o.forEach((r) => {
+    if ("field" in r) {
+      const i = L(n, r.field);
+      "value" in i && i.value != null && (s[r.field] = i, "matchMode" in i && i.matchMode == "DATE_BETWEEN" && (s[r.field].value = J(
+        i.value
+      )), Array.isArray(i.value) && !i.value.filter(Boolean).length && delete s[r.field]);
+    }
+  }), p.emit("data-table:apply-filter", {
+    tableName: u,
+    filter: s
+  }), p.emit("data-table:clear-selected-data", {
+    tableName: u
+  }), l == null || l("apply", s);
+}, de = {
+  class: "flex items-end justify-end gap-2",
+  "data-wv-section": "filteractionbuttons"
+}, fe = /* @__PURE__ */ R({
+  inheritAttrs: !1,
+  __name: "FilterContainer",
+  props: {
+    tableName: { default: "datatable" },
+    fieldsPerRow: { default: 4 },
+    fields: {},
+    static: { type: Boolean }
+  },
+  emits: ["apply"],
+  setup(n, { emit: u }) {
+    const o = n, l = u, { locale: s } = se("FilterContainer"), { resetForm: r, handleSubmit: i, setValues: F } = re(), c = N({}), d = N({}), v = k(), f = N(null), T = k(!1), O = k(0);
+    G(() => {
+      V(), p.on("show-filter", C), p.on("data-table:updated", D), U();
+    }), I(() => {
+      p.off("show-filter", C), p.off("data-table:updated", D);
+    });
+    const A = o.fields.filter(
+      (t) => t.visible !== !1
+    ), C = (t) => {
+      t.tableName === o.tableName && (T.value = t.show);
+    }, D = (t) => {
+      t.tableName === o.tableName && (v.value = t.data);
+    }, P = async (t, a, e = {}) => {
+      if (o.static && !t)
+        d.value[a] = W(a);
+      else
+        try {
+          c.value[a] = !0;
+          const m = { [a]: !0, ...e }, y = await (t == null ? void 0 : t(m));
+          if ("data" in y) {
+            const { data: $ } = y;
+            d.value[a] = $.data[a];
+          } else Array.isArray(y) && (d.value[a] = y);
+        } catch (m) {
+          console.error(m);
+        } finally {
+          c.value[a] = !1;
+        }
+    }, W = (t) => {
+      const a = /* @__PURE__ */ new Set();
+      if (v.value)
+        for (let e = 0; e < v.value.length; e++) {
+          const m = L(v.value[e], t);
+          a.add(m);
+        }
+      return Array.from(a).map((e) => ({ label: e, value: e }));
+    }, V = () => {
+      if (f.value) {
+        const { children: t } = f.value, a = f.value.childElementCount, e = a % o.fieldsPerRow;
+        let [m, y] = [1, 1];
+        for (const $ in Array.from({ length: a })) {
+          const q = Number($) === a - 1;
+          t[$].setAttribute(
+            "style",
+            `grid-area: ${m}/${q && e ? o.fieldsPerRow : y}`
+          ), ++y > o.fieldsPerRow && (y = 1, m++);
+        }
+      }
+    }, j = () => {
+      r(), O.value++;
+    }, E = i((t) => {
+      o.static ? pe(t, o.tableName, A, l) : me(t, o.tableName, l);
+    }), H = (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`;
+      }
+    }, K = (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";
+      }
+    })(), U = () => {
+      if (o.static) {
+        const t = {};
+        A.forEach((a) => {
+          ne(
+            t,
+            H(a),
+            K(a)
+          );
+        }), F(t);
+      }
+    }, g = (t, a) => {
+      switch (t.type) {
+        case "rangenumber":
+          return t.field ? o.static ? `${t.field}.value.${a}` : `${t.field}.${a}` : 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 Q(() => o.fields, V), (t, a) => z((h(), S("form", b({
+      ref_key: "container",
+      ref: f
+    }, t.$preset.filtercontainer.root, {
+      style: `grid-template-columns: repeat(${t.fieldsPerRow}, 1fr)`,
+      onSubmit: a[0] || (a[0] = X(
+        //@ts-ignore
+        (...e) => w(E) && w(E)(...e),
+        ["prevent"]
+      )),
+      "data-wv-name": "filtercontainer"
+    }), [
+      (h(!0), S(B, null, Z(w(A), (e) => (h(), S(B, {
+        key: JSON.stringify(e) + O.value
+      }, [
+        e.type == "rangenumber" ? (h(), _(ce, b({
+          key: 0,
+          ref_for: !0
+        }, e, {
+          mandatory: !1,
+          "max-field-name": g(e, 1),
+          "min-field-name": g(e, 0),
+          "show-optional-text": !1,
+          "use-validator": ""
+        }), null, 16, ["max-field-name", "min-field-name"])) : e.type == "multiselect" ? (h(), _(ue, b({
+          key: 1,
+          ref_for: !0
+        }, e, {
+          "field-name": g(e),
+          loading: c.value[e.optionField ?? e.field],
+          mandatory: !1,
+          options: d.value[e.optionField ?? e.field],
+          "show-optional-text": !1,
+          onShow: (m) => P(
+            e.fetchOptionFn,
+            e.optionField ?? e.field,
+            e.params
+          ),
+          "hide-header-checkbox": "",
+          "option-label": "label",
+          "option-value": "value",
+          "use-validator": ""
+        }), null, 16, ["field-name", "loading", "options", "onShow"])) : e.type == "dropdown" ? (h(), _(ie, b({
+          key: 2,
+          ref_for: !0
+        }, e, {
+          "field-name": g(e),
+          loading: c.value[e.field],
+          mandatory: !1,
+          options: d.value[e.optionField ?? e.field],
+          "show-optional-text": !1,
+          onShow: (m) => P(
+            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" ? (h(), _(le, b({
+          key: 3,
+          ref_for: !0
+        }, e, {
+          "field-name": g(e),
+          mandatory: !1,
+          "show-optional-text": !1,
+          "selection-mode": "range",
+          "use-validator": ""
+        }), null, 16, ["field-name"])) : ee(t.$slots, "field", {
+          key: 4,
+          field: e,
+          fieldName: g(e)
+        })
+      ], 64))), 128)),
+      Y("div", de, [
+        M(x, {
+          label: w(s).clearFieldText,
+          onClick: j,
+          "data-wv-section": "clearbutton",
+          text: ""
+        }, null, 8, ["label"]),
+        M(x, {
+          label: w(s).applyText,
+          onClick: w(E),
+          "data-wv-section": "applybutton",
+          severity: "success"
+        }, null, 8, ["label", "onClick"])
+      ])
+    ], 16)), [
+      [te, T.value]
+    ]);
+  }
+}), Ne = /* @__PURE__ */ R({
+  __name: "FilterContainer",
+  setup(n) {
+    return (u, o) => (h(), _(fe, b({
+      fields: u.$attrs.fields
+    }, u.$attrs), {
+      field: ae(({ field: l, fieldName: s }) => [
+        M(oe, b(l, {
+          "field-data-key": l.fieldDataKey ?? "key",
+          "field-label": l.label,
+          "field-name": s,
+          label: l.buttonLabel,
+          mandatory: !1,
+          params: l.params,
+          "show-optional-text": !1,
+          "use-validator": ""
+        }), null, 16, ["field-data-key", "field-label", "field-name", "label", "params"])
+      ]),
+      _: 1
+    }, 16, ["fields"]));
+  }
+});
+export {
+  Ne as _
+};

package/form/index.es.js

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