@simsustech/quasar-components 0.1.3 → 0.2.0

package/dist/form.js

@@ -0,0 +1,492 @@
+import { ref, defineComponent, useAttrs, watch, openBlock, createBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, computed, useSlots, renderSlot, createCommentVNode, resolveDirective, createElementVNode, withDirectives } from "vue";
+import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QIcon, QBtn, QDate, QPopupProxy } from "quasar";
+const lang$1 = {
+  isoName: "en-US",
+  yes: "Yes",
+  no: "No",
+  buttons: {
+    close: "Close"
+  },
+  fields: {
+    name: "Name",
+    firstName: "First name",
+    surname: "Surname",
+    address: "Address",
+    postalCode: "Postal code",
+    city: "City",
+    telephoneNumber: "Telephone number"
+  },
+  validations: {
+    fieldRequired: "Field is required."
+  },
+  gender: {
+    gender: "Gender",
+    male: "Male",
+    female: "Female",
+    other: "Other"
+  },
+  postalCode: {
+    postalCode: "Postal code",
+    validations: {
+      invalidPostalCode: "Invalid postal code"
+    }
+  }
+};
+const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: lang$1
+}, Symbol.toStringTag, { value: "Module" }));
+const lang = ref(lang$1);
+const locales = /* @__PURE__ */ Object.assign({ "./en-US.ts": () => Promise.resolve().then(() => enUS), "./nl.ts": () => import("./nl.7a710ba4.js") });
+const useLang = () => {
+  return lang;
+};
+let loadingLanguage = false;
+const loadLang = async (isoName) => {
+  if (!loadingLanguage) {
+    loadingLanguage = true;
+    try {
+      const data = (await locales[`./${isoName}.ts`]()).default;
+      if (data) {
+        lang.value = data;
+      }
+    } catch (e) {
+      if ({ "BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true }.DEBUG)
+        console.error(e);
+      throw new Error(
+        `[quasar-components] Failed to load ${isoName} language file.`
+      );
+    }
+    loadingLanguage = false;
+  }
+};
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "GenderSelect",
+  props: {
+    modelValue: null,
+    required: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const lang2 = useLang();
+    const $q = useQuasar();
+    if (lang2.value.isoName !== $q.lang.isoName)
+      loadLang($q.lang.isoName);
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName);
+    });
+    const genderOptions = [
+      {
+        label: lang2.value.gender.male,
+        value: "male"
+      },
+      {
+        label: lang2.value.gender.female,
+        value: "female"
+      },
+      {
+        label: lang2.value.gender.other,
+        value: "other"
+      }
+    ];
+    const validations = ref([]);
+    if (props.required)
+      validations.value.push(
+        (val) => !!val || lang2.value.validations.fieldRequired
+      );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QSelect), mergeProps(unref(attrs), {
+        rules: validations.value,
+        "model-value": __props.modelValue,
+        options: genderOptions,
+        label: `${unref(lang2).gender.gender}${__props.required ? "*" : ""}`,
+        "emit-value": "",
+        "map-options": "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+      }), null, 16, ["rules", "model-value", "label"]);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "GenderItem",
+  props: {
+    modelValue: null
+  },
+  setup(__props) {
+    const attrs = useAttrs();
+    const lang2 = useLang();
+    const $q = useQuasar();
+    if (lang2.value.isoName !== $q.lang.isoName)
+      loadLang($q.lang.isoName);
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QItem), normalizeProps(guardReactiveProps(unref(attrs))), {
+        default: withCtx(() => [
+          createVNode(unref(QItemSection), null, {
+            default: withCtx(() => [
+              createVNode(unref(QItemLabel), { overline: "" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(lang2).gender.gender), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(QItemLabel), null, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.modelValue ? unref(lang2).gender[__props.modelValue] : ""), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "PostalCodeInput",
+  props: {
+    modelValue: null,
+    locale: null,
+    required: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const lang2 = useLang();
+    const attrs = useAttrs();
+    const masks = ref({
+      nl: "#### AA"
+    });
+    const validations = ref({
+      nl: [
+        (val) => !val || /^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i.test(val) || lang2.value.postalCode.validations.invalidPostalCode
+      ]
+    });
+    const computedValidations = computed(() => {
+      const val = validations.value[props.locale];
+      if (props.required)
+        val.push((val2) => !!val2 || lang2.value.validations.fieldRequired);
+      return val;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QInput), mergeProps(unref(attrs), {
+        mask: masks.value[__props.locale],
+        rules: unref(computedValidations),
+        "model-value": __props.modelValue,
+        label: `${unref(lang2).postalCode.postalCode}${__props.required ? "*" : ""}`,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+      }), null, 16, ["mask", "rules", "model-value", "label"]);
+    };
+  }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "FormItem",
+  props: {
+    modelValue: null,
+    label: null,
+    field: null
+  },
+  setup(__props) {
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const lang2 = useLang();
+    const $q = useQuasar();
+    if (lang2.value.isoName !== $q.lang.isoName)
+      loadLang($q.lang.isoName);
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QItem), normalizeProps(guardReactiveProps(unref(attrs))), {
+        default: withCtx(() => [
+          unref(slots).avatar ? (openBlock(), createBlock(unref(QItemSection), {
+            key: 0,
+            avatar: ""
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "avatar")
+            ]),
+            _: 3
+          })) : createCommentVNode("", true),
+          createVNode(unref(QItemSection), null, {
+            default: withCtx(() => [
+              createVNode(unref(QItemLabel), { overline: "" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.label ? __props.label : __props.field ? unref(lang2).fields[__props.field] : ""), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(QItemLabel), null, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.modelValue || "-"), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          unref(slots).side ? (openBlock(), createBlock(unref(QItemSection), {
+            key: 1,
+            side: ""
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "side")
+            ]),
+            _: 3
+          })) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "FormInput",
+  props: {
+    modelValue: null,
+    field: null,
+    label: null,
+    required: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const lang2 = useLang();
+    const $q = useQuasar();
+    if (lang2.value.isoName !== $q.lang.isoName)
+      loadLang($q.lang.isoName);
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName);
+    });
+    const validations = ref([]);
+    if (props.required)
+      validations.value.push(
+        (val) => !!val || lang2.value.validations.fieldRequired
+      );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QInput), mergeProps(unref(attrs), {
+        rules: validations.value,
+        "model-value": __props.modelValue,
+        label: `${__props.field ? unref(lang2).fields[__props.field] : __props.label ? __props.label : ""}${__props.required ? "*" : ""}`,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+      }), null, 16, ["rules", "model-value", "label"]);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "TelephoneNumberInput",
+  props: {
+    modelValue: null,
+    required: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const lang2 = useLang();
+    const attrs = useAttrs();
+    const validations = ref([]);
+    if (props.required)
+      validations.value.push(
+        (val) => !!val || lang2.value.validations.fieldRequired
+      );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QInput), mergeProps(unref(attrs), {
+        rules: validations.value,
+        "model-value": __props.modelValue,
+        label: `${unref(lang2).fields.telephoneNumber}${__props.required ? "*" : ""}`,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+      }), null, 16, ["rules", "model-value", "label"]);
+    };
+  }
+});
+const _hoisted_1 = { class: "row items-center justify-end" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "DateInput",
+  props: {
+    modelValue: null,
+    label: null,
+    required: { type: Boolean },
+    clearable: { type: Boolean },
+    date: null
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const lang2 = useLang();
+    const $q = useQuasar();
+    if (lang2.value.isoName !== $q.lang.isoName)
+      loadLang($q.lang.isoName);
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName);
+    });
+    const validations = ref([]);
+    if (props.required)
+      validations.value.push(
+        (val) => !!val || lang2.value.validations.fieldRequired
+      );
+    return (_ctx, _cache) => {
+      const _component_q_icon = QIcon;
+      const _component_q_btn = QBtn;
+      const _component_q_date = QDate;
+      const _component_q_popup_proxy = QPopupProxy;
+      const _directive_close_popup = resolveDirective("close-popup");
+      return openBlock(), createBlock(unref(QInput), mergeProps(unref(attrs), {
+        rules: validations.value,
+        "model-value": __props.modelValue,
+        label: `${__props.label}${__props.required ? "*" : ""}`,
+        mask: "date",
+        class: "q-pr-md",
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:modelValue", $event))
+      }), {
+        append: withCtx(() => [
+          __props.clearable ? (openBlock(), createBlock(_component_q_icon, {
+            key: 0,
+            name: "clear",
+            class: "cursor-pointer",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", ""))
+          })) : createCommentVNode("", true),
+          createVNode(_component_q_icon, {
+            name: "event",
+            class: "cursor-pointer"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_q_popup_proxy, {
+                cover: "",
+                "transition-show": "scale",
+                "transition-hide": "scale"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_q_date, mergeProps(__props.date, {
+                    "model-value": __props.modelValue,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
+                  }), {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_1, [
+                        withDirectives(createVNode(_component_q_btn, {
+                          label: unref(lang2).buttons.close,
+                          color: "primary",
+                          flat: ""
+                        }, null, 8, ["label"]), [
+                          [_directive_close_popup]
+                        ])
+                      ])
+                    ]),
+                    _: 1
+                  }, 16, ["model-value"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["rules", "model-value", "label"]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "BooleanSelect",
+  props: {
+    modelValue: { type: Boolean },
+    label: null,
+    required: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const lang2 = useLang();
+    const $q = useQuasar();
+    if (lang2.value.isoName !== $q.lang.isoName)
+      loadLang($q.lang.isoName);
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName);
+    });
+    const booleanOptions = [
+      {
+        label: lang2.value.yes,
+        value: true
+      },
+      {
+        label: lang2.value.no,
+        value: false
+      }
+    ];
+    const validations = ref([]);
+    if (props.required)
+      validations.value.push(
+        (val) => !!val || lang2.value.validations.fieldRequired
+      );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QSelect), mergeProps(unref(attrs), {
+        rules: validations.value,
+        "model-value": __props.modelValue,
+        options: booleanOptions,
+        label: `${__props.label}${__props.required ? "*" : ""}`,
+        "emit-value": "",
+        "map-options": "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+      }), null, 16, ["rules", "model-value", "label"]);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BooleanItem",
+  props: {
+    modelValue: { type: Boolean },
+    label: null
+  },
+  setup(__props) {
+    const attrs = useAttrs();
+    const lang2 = useLang();
+    const $q = useQuasar();
+    if (lang2.value.isoName !== $q.lang.isoName)
+      loadLang($q.lang.isoName);
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QItem), normalizeProps(guardReactiveProps(unref(attrs))), {
+        default: withCtx(() => [
+          createVNode(unref(QItemSection), null, {
+            default: withCtx(() => [
+              createVNode(unref(QItemLabel), { overline: "" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.label), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(QItemLabel), null, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.modelValue ? unref(lang2).yes : unref(lang2).no), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as BooleanItem,
+  _sfc_main$1 as BooleanSelect,
+  _sfc_main$2 as DateInput,
+  _sfc_main$4 as FormInput,
+  _sfc_main$5 as FormItem,
+  _sfc_main$7 as GenderItem,
+  _sfc_main$8 as GenderSelect,
+  _sfc_main$6 as PostalCodeInput,
+  _sfc_main$3 as TelephoneNumberInput
+};