@cling-se/widget 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/CFormField.vue_vue_type_script_setup_true_lang-D_U9coAY.js

@@ -0,0 +1,292 @@
+import { i as M, a as _ } from "./helpers-CPW--XIz.js";
+import { F as h, ai as y, aC as v, aD as F, b as C, _ as k, o as l, d as r, n as d, S as u, B as m, v as b, f, c as w, w as S, h as z, i as p, Z as B, j as T } from "./main-Cb-nyil1.js";
+const $ = {
+  name: "CFieldBody",
+  inject: {
+    parent: {
+      from: "CField",
+      default: null
+    }
+  },
+  props: {
+    message: {
+      type: [String, Array],
+      default: ""
+    },
+    type: {
+      type: [String, Object],
+      default: ""
+    }
+  },
+  render() {
+    let t = !0, e = typeof this.$slots.default == "function" ? this.$slots.default() : this.$slots.default;
+    return e != null && e.length === 1 && e[0].type === h && (e = e[0].children), y(
+      "div",
+      { class: "field-body" },
+      {
+        default: () => e != null && e.map((s) => {
+          if (s.type === v || s.type === F)
+            return s;
+          let o;
+          return t && (o = this.message, t = !1), y(
+            this.parent ? this.parent.$.type : C("c-field"),
+            {
+              type: this.type,
+              message: o
+            },
+            () => s
+          );
+        })
+      }
+    );
+  }
+}, L = {
+  name: "CField",
+  components: {
+    CFieldBody: $
+  },
+  provide() {
+    return {
+      CField: this
+    };
+  },
+  props: {
+    type: {
+      type: [String, Object],
+      default: ""
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    labelFor: {
+      type: String,
+      default: ""
+    },
+    message: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    grouped: Boolean,
+    groupMultiline: Boolean,
+    position: {
+      type: String,
+      default: ""
+    },
+    expanded: Boolean,
+    horizontal: Boolean,
+    addons: {
+      type: Boolean,
+      default: !0
+    },
+    customClass: {
+      type: String,
+      default: ""
+    },
+    labelPosition: {
+      type: String,
+      default: () => "top"
+      // config.defaultFieldLabelPosition,
+    }
+  },
+  data() {
+    return {
+      newType: this.type,
+      newMessage: this.message,
+      fieldLabelSize: null,
+      numberInputClasses: [],
+      _isField: !0
+      // Used internally by Input and Select
+    };
+  },
+  computed: {
+    rootClasses() {
+      return [
+        this.newPosition,
+        {
+          "is-expanded": this.expanded,
+          "is-grouped-multiline": this.groupMultiline,
+          "is-horizontal": this.horizontal,
+          "is-floating-in-label": this.hasLabel && !this.horizontal && this.labelPosition === "inside",
+          "is-floating-label": this.hasLabel && !this.horizontal && this.labelPosition === "on-border"
+        },
+        this.numberInputClasses
+      ];
+    },
+    /**
+     * Correct Bulma class for the side of the addon or group.
+     *
+     * This is not kept like the others (is-small, etc.),
+     * because since 'has-addons' is set automatically it
+     * doesn't make sense to teach users what addons are exactly.
+     */
+    newPosition() {
+      if (this.position === void 0) return;
+      const t = this.position.split("-");
+      if (t.length < 1) return;
+      const e = this.grouped ? "is-grouped-" : "has-addons-";
+      if (this.position) return e + t[1];
+    },
+    /**
+     * Formatted message in case it's an array
+     * (each element is separated by <br> tag)
+     */
+    formattedMessage() {
+      if (typeof this.newMessage == "string")
+        return this.newMessage;
+      const t = [];
+      if (Array.isArray(this.newMessage))
+        this.newMessage.forEach((e) => {
+          if (typeof e == "string")
+            t.push(e);
+          else
+            for (const s in e)
+              e[s] && t.push(s);
+        });
+      else
+        for (const e in this.newMessage)
+          this.newMessage[e] && t.push(e);
+      return t.filter((e) => !!e).join(" <br> ");
+    },
+    hasLabel() {
+      return this.label || this.$slots.label;
+    }
+  },
+  watch: {
+    /**
+     * Set internal type when prop change.
+     */
+    type(t) {
+      this.newType = t;
+    },
+    /**
+     * Set internal message when prop change.
+     */
+    message(t) {
+      JSON.stringify(t) !== JSON.stringify(this.newMessage) && (this.newMessage = t);
+    }
+  },
+  mounted() {
+    this.horizontal && this.$el.querySelectorAll(
+      ".input, .select, .button, .textarea, .c-slider"
+    ).length > 0 && (this.fieldLabelSize = "is-normal");
+  },
+  methods: {
+    /**
+     * Field has addons if there are more than one slot
+     * (element / component) in the Field.
+     * Or is grouped when prop is set.
+     * Is a method to be called when component re-render.
+     */
+    fieldType() {
+      if (this.grouped) return "is-grouped";
+      if (this.hasAddons()) return "has-addons";
+    },
+    getSlotNodes(t) {
+      return t.flatMap(
+        (e) => M(e) ? this.getSlotNodes(e.children) : [e]
+      );
+    },
+    hasAddons() {
+      let t = 0;
+      return this.$slots.default && (t = this.getSlotNodes(this.$slots.default()).reduce(
+        (e, s) => _(s) ? e + 1 : e,
+        0
+      )), t > 1 && this.addons && !this.horizontal;
+    },
+    // called by a number input if it is a direct child.
+    wrapNumberinput({ controlsPosition: t, size: e }) {
+      const s = ["has-numberinput"];
+      t && s.push(`has-numberinput-${t}`), e && s.push(`has-numberinput-${e}`), this.numberInputClasses = s;
+    }
+  }
+}, N = ["for"], A = ["for"], j = ["innerHTML"];
+function x(t, e, s, o, n, a) {
+  const i = C("CFieldBody");
+  return l(), r("div", {
+    class: d([[a.rootClasses, a.fieldType()], "field"])
+  }, [
+    s.horizontal ? (l(), r("div", {
+      key: 0,
+      class: d([[s.customClass, n.fieldLabelSize], "field-label"])
+    }, [
+      a.hasLabel ? (l(), r("label", {
+        key: 0,
+        for: s.labelFor,
+        class: d([s.customClass, "label truncate-text"])
+      }, [
+        t.$slots.label ? u(t.$slots, "label", { key: 0 }) : (l(), r(h, { key: 1 }, [
+          m(b(s.label), 1)
+        ], 64))
+      ], 10, N)) : f("", !0)
+    ], 2)) : (l(), r(h, { key: 1 }, [
+      a.hasLabel ? (l(), r("label", {
+        key: 0,
+        for: s.labelFor,
+        class: d([s.customClass, "label truncate-text"])
+      }, [
+        t.$slots.label ? u(t.$slots, "label", { key: 0 }) : (l(), r(h, { key: 1 }, [
+          m(b(s.label), 1)
+        ], 64))
+      ], 10, A)) : f("", !0)
+    ], 64)),
+    s.horizontal ? (l(), w(i, {
+      key: 2,
+      message: n.newMessage ? a.formattedMessage : "",
+      type: n.newType
+    }, {
+      default: S(() => [
+        u(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["message", "type"])) : u(t.$slots, "default", { key: 3 }),
+    n.newMessage && !s.horizontal ? (l(), r("p", {
+      key: 4,
+      class: d([n.newType, "help"]),
+      innerHTML: a.formattedMessage
+    }, null, 10, j)) : f("", !0)
+  ], 2);
+}
+const O = /* @__PURE__ */ k(L, [["render", x]]), I = /* @__PURE__ */ z({
+  __name: "CFormField",
+  props: {
+    label: {},
+    validator: {},
+    messages: {}
+  },
+  setup(t) {
+    const e = t, s = p(() => {
+      var a, i;
+      if ((a = e.validator) != null && a.$error)
+        return "is-danger";
+      if ((i = e.validator) != null && i.$dirty)
+        return "is-success";
+    }), o = p(() => {
+      var a, i;
+      if ((a = e.validator) != null && a.$error)
+        return "text-red-500";
+      if ((i = e.validator) != null && i.$dirty)
+        return "text-green-500";
+    }), n = p(() => {
+      var c, g;
+      if (!((c = e.validator) != null && c.$errors.length)) return "";
+      const i = e.validator.$errors[0].$validator;
+      return ((g = e.messages) == null ? void 0 : g[i]) ?? "";
+    });
+    return (a, i) => (l(), w(T(O), B({ ...a.$attrs, ...a.$props }, {
+      label: a.label,
+      "custom-class": o.value,
+      type: s.value,
+      message: n.value
+    }), {
+      default: S(() => [
+        u(a.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["label", "custom-class", "type", "message"]));
+  }
+});
+export {
+  O as C,
+  I as _
+};

package/dist/{CPhoneFormat-CfQayFxw.js → CPhoneFormat-BS2nP9kc.js}

@@ -1,5 +1,5 @@
-import { u as e, v as o, n } from "./main-WKzC-Dnu.js";
-const r = {
+import { ag as o, _ as n, S as r, s as a, v as s } from "./main-Cb-nyil1.js";
+const h = {
   name: "CPhoneFormat",
   props: {
     phone: {
@@ -32,31 +32,23 @@ const r = {
         this.formattedPhone = "";
         return;
       }
-      const t = await e(this.phone, {
+      const e = await o(this.phone, {
         defaultRegion: this.region
       });
-      if (!t) {
+      if (!e) {
         this.formattedPhone = this.phone;
         return;
       }
-      this.formattedPhone = t.national;
+      this.formattedPhone = e.national;
     }
-  },
-  render() {
-    return this.$scopedSlots.default ? this.$scopedSlots.default({
-      formattedValue: this.formattedPhone
-    }) : o("span", [this.formattedPhone]);
   }
-}, a = null, s = null;
-var h = /* @__PURE__ */ n(
-  r,
-  a,
-  s,
-  !1,
-  null,
-  null
-);
-const d = h.exports;
+};
+function i(e, d, f, m, t, p) {
+  return r(e.$slots, "default", { formattedValue: t.formattedPhone }, () => [
+    a("span", null, s(t.formattedPhone), 1)
+  ]);
+}
+const u = /* @__PURE__ */ n(h, [["render", i]]);
 export {
-  d as C
+  u as C
 };

package/dist/CPhoneInput-Bf6329PO.js

@@ -0,0 +1,207 @@
+import { _ as w, X as B, Y as S, b as s, o as m, c as y, w as i, s as V, e as o, B as z, v as p, d as F, k, F as I, Z as $ } from "./main-Cb-nyil1.js";
+import { C as D, a as v } from "./CDropdownItem-Dmq5gYzA.js";
+import { C as j } from "./CFormField.vue_vue_type_script_setup_true_lang-D_U9coAY.js";
+import { F as K } from "./Flag-BwTgCNHO.js";
+import { S as L } from "./SmartList-DqG7Q5t7.js";
+import { r as n } from "./regions-BdZt9Srn.js";
+const N = {
+  name: "CPhoneInput",
+  components: {
+    Flag: K,
+    CInput: B,
+    CDropdown: D,
+    CDropdownItem: v,
+    CButton: S,
+    CField: j,
+    SmartList: L
+  },
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    region: {
+      type: String,
+      default: ""
+    },
+    // Region to fallback to if prefix is not found in modelValue
+    defaultRegion: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    labelPosition: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "update:region"],
+  data() {
+    return {
+      internalPrefix: null,
+      // Used to remember prefix when value is changed to empty
+      searchQuery: ""
+    };
+  },
+  computed: {
+    defaultPrefix() {
+      return n[this.internalRegion].callingCode;
+    },
+    currentRegion() {
+      return this.getRegionByCallingCode(this.prefix);
+    },
+    internalRegion: {
+      get() {
+        if (this.region) return this.region;
+        if (this.modelValue) {
+          const e = (Object.keys(n) || []).find(
+            (t) => n[t].callingCode && this.modelValue && this.modelValue.startsWith(n[t].callingCode)
+          );
+          if (e) return e;
+        }
+        return this.internalPrefix ? this.getRegionByCallingCode(this.internalPrefix) : this.defaultRegion;
+      },
+      set(e) {
+        this.$emit("update:region", e), this.updateValue({ prefix: n[e].callingCode });
+      }
+    },
+    prefix() {
+      if (!this.modelValue) return this.internalPrefix || this.defaultPrefix;
+      const e = (Object.keys(n) || []).find(
+        (t) => n[t].callingCode && this.modelValue && this.modelValue.startsWith(n[t].callingCode)
+      );
+      return e ? n[e].callingCode : this.defaultPrefix;
+    },
+    phone: {
+      get() {
+        return this.prefix && this.modelValue && this.modelValue.startsWith(this.prefix) ? this.modelValue.substring(this.prefix.length) : this.modelValue;
+      },
+      set(e) {
+        this.updateValue({ phone: e });
+      }
+    },
+    sortedRegions() {
+      return (Object.keys(n) || []).map((e) => ({
+        key: e,
+        title: `${n[e].name} (${e})`,
+        callingCode: n[e].callingCode
+      })).sort((e, t) => e.title.localeCompare(t.title));
+    }
+  },
+  methods: {
+    getRegionByCallingCode(e) {
+      return e ? (Object.keys(n) || []).find(
+        (l) => e === n[l].callingCode
+      ) : null;
+    },
+    updateValue({ prefix: e, phone: t }) {
+      const l = e !== void 0 ? e : this.prefix || "", h = t !== void 0 ? t : this.phone || "", d = `${l}${h}`;
+      d !== l ? (this.$emit("update:modelValue", d), this.region || this.$emit("update:region", this.internalRegion), this.internalPrefix = null) : (this.internalPrefix = l, this.$emit("update:modelValue", ""));
+    }
+  }
+}, O = { class: "control" }, Q = { class: "truncate-text" };
+function W(e, t, l, h, d, r) {
+  const g = s("Flag"), x = s("CButton"), c = s("CInput"), b = s("CDropdownItem"), _ = s("CDropdown"), P = s("SmartList"), f = s("CField");
+  return m(), y(f, {
+    class: "has-addons",
+    expanded: ""
+  }, {
+    default: i(() => [
+      V("div", O, [
+        o(P, {
+          query: d.searchQuery,
+          items: r.sortedRegions
+        }, {
+          default: i(({ items: u }) => [
+            o(_, {
+              modelValue: r.internalRegion,
+              "onUpdate:modelValue": t[1] || (t[1] = (a) => r.internalRegion = a),
+              size: e.$attrs.size,
+              disabled: e.$attrs.disabled,
+              "menu-styling": {
+                maxWidth: "300px"
+              },
+              scrollable: !0,
+              position: "is-bottom-right",
+              "max-height": "240px",
+              class: "control",
+              style: { height: "100%" }
+            }, {
+              trigger: i(() => [
+                o(x, {
+                  size: e.$attrs.size,
+                  type: "none",
+                  pattern: "secondary",
+                  style: { height: "100%" }
+                }, {
+                  default: i(() => [
+                    o(g, {
+                      region: r.internalRegion,
+                      style: { "margin-right": "0.35em" }
+                    }, null, 8, ["region"]),
+                    z(" " + p(r.prefix), 1)
+                  ]),
+                  _: 1
+                }, 8, ["size"])
+              ]),
+              header: i(() => [
+                o(c, {
+                  modelValue: d.searchQuery,
+                  "onUpdate:modelValue": t[0] || (t[0] = (a) => d.searchQuery = a),
+                  placeholder: e.$t("_common:search"),
+                  filled: "",
+                  style: { "margin-bottom": "0.25em" },
+                  "custom-class": "!rounded-[7px]"
+                }, null, 8, ["modelValue", "placeholder"])
+              ]),
+              default: i(() => [
+                (m(!0), F(I, null, k(u, ({ key: a, title: C, callingCode: R }) => (m(), y(b, {
+                  key: a,
+                  value: a,
+                  class: "truncate-text"
+                }, {
+                  default: i(() => [
+                    o(g, {
+                      region: a,
+                      title: C,
+                      style: { "margin-right": "0.75em", flex: "0 0 auto" }
+                    }, null, 8, ["region", "title"]),
+                    V("span", Q, p(C) + " (" + p(R) + ") ", 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value"]))), 128))
+              ]),
+              _: 2
+            }, 1032, ["modelValue", "size", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["query", "items"])
+      ]),
+      o(f, {
+        label: l.label,
+        "label-position": l.labelPosition,
+        class: "control",
+        expanded: ""
+      }, {
+        default: i(() => [
+          o(c, $({ ...e.$attrs, ...e.$props }, {
+            modelValue: r.phone,
+            "onUpdate:modelValue": t[2] || (t[2] = (u) => r.phone = u),
+            size: e.$attrs.size,
+            placeholder: e.$attrs.placeholder,
+            type: "tel"
+          }), null, 16, ["modelValue", "size", "placeholder"])
+        ]),
+        _: 1
+      }, 8, ["label", "label-position"])
+    ]),
+    _: 1
+  });
+}
+const Z = /* @__PURE__ */ w(N, [["render", W]]);
+export {
+  Z as C
+};

package/dist/CPriceInput-d1yjuMQr.js

@@ -0,0 +1,140 @@
+import { C as h } from "./CCurrencyDropdown-DE_3CTjm.js";
+import { _ as C, X as V, a6 as g, b as o, o as s, c as l, w as i, d as u, S as p, f as w, e as I, B as k, v as d, Z as _ } from "./main-Cb-nyil1.js";
+const $ = {
+  name: "CPriceInput",
+  inheritAttrs: !1,
+  components: {
+    CInput: V,
+    CCurrencyDropdown: h
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    currency: {
+      type: String,
+      required: !0
+    },
+    priceType: {
+      type: String,
+      default: "fixed",
+      validator: (e) => ["fixed", "markup", "openAcc", "approx"].includes(e)
+    },
+    unitLabel: {
+      type: String,
+      default: ""
+    },
+    isIncVat: {
+      type: Boolean,
+      default: !1
+    },
+    // Vat in percentage
+    vat: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "update:currency"],
+  data() {
+    return {
+      isCurrencyDropdownOpen: !1
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        if (!Number.isNaN(parseFloat(this.modelValue)) && Number.isFinite(this.modelValue)) {
+          if (!this.modelValue) return "";
+          let e = this.modelValue;
+          return this.isIncVat && (e *= (100 + this.vat) / 100), Math.round(e) / 100;
+        }
+        return this.modelValue;
+      },
+      set(e) {
+        let t = e;
+        t = e * 100, this.isIncVat && (t /= (100 + this.vat) / 100), t = Math.round(t), this.$emit("update:modelValue", t);
+      }
+    },
+    internalCurrency: {
+      get() {
+        return this.currency;
+      },
+      set(e) {
+        this.$emit("update:currency", e);
+      }
+    },
+    suffixValue() {
+      const e = g(this.internalCurrency);
+      switch (this.priceType) {
+        case "openAcc":
+          return `${e}/${this.unitLabel || this.$t("_common:unitType.unit")}`;
+        case "markup":
+          return "%";
+        default:
+          return e;
+      }
+    },
+    showCurrencyDropdown() {
+      return !["markup"].includes(this.priceType);
+    }
+  },
+  methods: {
+    focus() {
+      this.$refs.priceInput && typeof this.$refs.priceInput.focus == "function" && this.$refs.priceInput.focus();
+    }
+  }
+}, b = { key: 0 }, v = { key: 0 }, D = { key: 1 }, N = { key: 1 };
+function x(e, t, c, z, a, r) {
+  const f = o("CButton"), m = o("CCurrencyDropdown"), y = o("CInput");
+  return s(), l(y, _({ ...e.$attrs, ...e.$props }, {
+    ref: "priceInput",
+    key: r.internalCurrency + c.priceType,
+    modelValue: r.internalValue,
+    "onUpdate:modelValue": t[2] || (t[2] = (n) => r.internalValue = n),
+    modelModifiers: { lazy: !0 },
+    size: e.$attrs.size,
+    placeholder: e.$attrs.placeholder,
+    style: a.isCurrencyDropdownOpen && { zIndex: 99 },
+    type: "number"
+  }), {
+    prefix: i(() => [
+      e.$slots.prefix ? (s(), u("div", b, [
+        p(e.$slots, "prefix")
+      ])) : w("", !0)
+    ]),
+    suffix: i(() => [
+      e.$slots.suffix ? (s(), u("div", v, [
+        p(e.$slots, "suffix")
+      ])) : (s(), u("div", D, [
+        r.showCurrencyDropdown ? (s(), l(m, {
+          key: 0,
+          modelValue: r.internalCurrency,
+          "onUpdate:modelValue": t[0] || (t[0] = (n) => r.internalCurrency = n),
+          onActiveChange: t[1] || (t[1] = (n) => a.isCurrencyDropdownOpen = n)
+        }, {
+          default: i(({ selectedValue: n }) => [
+            I(f, {
+              size: e.$attrs.size,
+              type: "none",
+              pattern: "tertiary",
+              class: "is-thinner",
+              style: { "padding-left": "0.5em", "padding-right": "0.5em", "border-radius": "0.25em" }
+            }, {
+              default: i(() => [
+                k(d(n), 1)
+              ]),
+              _: 2
+            }, 1032, ["size"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])) : (s(), u("div", N, d(r.suffixValue), 1))
+      ]))
+    ]),
+    _: 3
+  }, 16, ["modelValue", "size", "placeholder", "style"]);
+}
+const T = /* @__PURE__ */ C($, [["render", x]]);
+export {
+  T as C
+};