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

package/dist/CSelect-DgnT07Hk.js

@@ -0,0 +1,98 @@
+import { _ as u, ak as r, al as m, o as i, d, s as n, E as c, am as p, Z as o, v as h, f, S as V, n as y } from "./main-Cb-nyil1.js";
+const S = {
+  name: "CSelect",
+  mixins: [r, m],
+  inheritAttrs: !1,
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array, Function],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    multiple: Boolean,
+    selectClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    nativeSize: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  emits: ["blur", "focus", "update:modelValue"],
+  data() {
+    return {
+      selected: this.modelValue,
+      _elementRef: "select"
+    };
+  },
+  computed: {
+    computedValue: {
+      get() {
+        return this.selected;
+      },
+      set(e) {
+        this.selected = e, this.$emit("update:modelValue", e), !this.isValid && this.checkHtml5Validity();
+      }
+    },
+    spanClasses() {
+      return [
+        this.size,
+        this.statusType,
+        {
+          "is-fullwidth": this.expanded,
+          "is-loading": this.loading,
+          "is-multiple": this.multiple,
+          "is-rounded": this.rounded,
+          "is-empty": this.selected === null
+        }
+      ];
+    }
+  },
+  watch: {
+    /**
+     * When v-model is changed:
+     *   1. Set the selected option.
+     *   2. If it's invalid, validate again.
+     */
+    modelValue(e) {
+      this.selected = e, !this.isValid && this.checkHtml5Validity();
+    }
+  }
+}, g = ["multiple", "size"], C = {
+  key: 0,
+  value: null,
+  disabled: "",
+  hidden: ""
+};
+function b(e, t, l, k, v, a) {
+  return i(), d("div", o({
+    class: [{ "is-expanded": e.expanded, "has-icons-left": e.icon }, "control"]
+  }, e.rootAttrs), [
+    n("span", {
+      class: y([a.spanClasses, "select"])
+    }, [
+      c(n("select", o(e.fallthroughAttrs, {
+        ref: "select",
+        "onUpdate:modelValue": t[0] || (t[0] = (s) => a.computedValue = s),
+        multiple: l.multiple,
+        size: l.nativeSize,
+        class: l.selectClass,
+        onBlur: t[1] || (t[1] = (s) => e.$emit("blur", s) && e.checkHtml5Validity()),
+        onFocus: t[2] || (t[2] = (s) => e.$emit("focus", s))
+      }), [
+        l.placeholder && a.computedValue == null ? (i(), d("option", C, h(l.placeholder), 1)) : f("", !0),
+        V(e.$slots, "default", {}, void 0, !0)
+      ], 16, g), [
+        [p, a.computedValue]
+      ])
+    ], 2)
+  ], 16);
+}
+const B = /* @__PURE__ */ u(S, [["render", b], ["__scopeId", "data-v-097f661c"]]);
+export {
+  B as C
+};

package/dist/CSkeleton.vue_vue_type_script_setup_true_lang-Ckl--dyv.js

@@ -0,0 +1,51 @@
+import { h as b, t as g, i as l, u as C, j as e, o as s, d as n, F as x, k as S, n as i, l as d, f as w } from "./main-Cb-nyil1.js";
+const $ = /* @__PURE__ */ b({
+  __name: "CSkeleton",
+  props: {
+    active: { type: Boolean, default: !0 },
+    animated: { type: Boolean, default: !1 },
+    width: { default: "" },
+    height: { default: "" },
+    circle: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
+    count: { default: 1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "" }
+  },
+  setup(r) {
+    const c = r, {
+      active: v,
+      animated: m,
+      width: t,
+      height: a,
+      circle: f,
+      rounded: p,
+      count: h,
+      hidden: y,
+      color: o
+    } = g(c), k = l(() => ({
+      height: a.value === void 0 ? null : isNaN(Number(a.value)) ? a.value : `${a.value}px`,
+      width: t.value === void 0 ? null : isNaN(Number(t.value)) ? t.value : `${t.value}px`,
+      borderRadius: f.value ? "50%" : null,
+      background: o.value ? o.value : null
+    })), u = C(), B = l(() => u.style), N = l(() => u.class);
+    return (z, F) => e(v) ? (s(), n("div", {
+      key: 0,
+      class: i([
+        "c-skeleton",
+        { "is-animated": e(m), "is-invisible": e(y) },
+        N.value
+      ]),
+      style: d(B.value)
+    }, [
+      (s(!0), n(x, null, S(e(h), (_) => (s(), n("div", {
+        key: _,
+        class: i(["c-skeleton-item", { "is-rounded": e(p) }]),
+        style: d(k.value)
+      }, null, 6))), 128))
+    ], 6)) : w("", !0);
+  }
+});
+export {
+  $ as _
+};

package/dist/ClientAutocomplete-9JzGcO9O.js

@@ -0,0 +1,532 @@
+import { S as O } from "./SearchApi-B7lXgUY6.js";
+import { _ as B, X as E, ak as F, al as H, b as g, o as d, d as c, e as V, Z as S, af as m, ao as v, w as p, E as $, G as T, s as w, l as C, S as y, f, F as x, k as _, n as A, aj as L, v as h, aF as D, c as b, B as R } from "./main-Cb-nyil1.js";
+import { c as P, r as z, g as N } from "./helpers-CPW--XIz.js";
+const q = {
+  name: "CAutocomplete",
+  components: {
+    CInput: E
+  },
+  mixins: [F, H],
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: null
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    field: {
+      type: String,
+      default: "value"
+    },
+    keepFirst: Boolean,
+    clearOnSelect: Boolean,
+    openOnFocus: Boolean,
+    customFormatter: {
+      type: Function,
+      default: () => {
+      }
+    },
+    checkInfiniteScroll: Boolean,
+    keepOpen: Boolean,
+    clearable: Boolean,
+    maxHeight: {
+      type: [String, Number],
+      default: null
+    },
+    dropdownPosition: {
+      type: String,
+      default: "auto"
+    },
+    iconRight: {
+      type: String,
+      default: null
+    },
+    iconRightClickable: Boolean,
+    appendToBody: Boolean
+  },
+  emits: [
+    "active",
+    "blur",
+    "focus",
+    "icon-click",
+    "icon-right-click",
+    "infinite-scroll",
+    "select",
+    "select-footer",
+    "select-header",
+    "typing",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      selected: null,
+      hovered: null,
+      isActive: !1,
+      newValue: this.modelValue,
+      newAutocomplete: this.autocomplete || "off",
+      isListInViewportVertically: !0,
+      hasFocus: !1,
+      style: {},
+      _isAutocomplete: !0,
+      _elementRef: "input",
+      _bodyEl: void 0,
+      // Used to append to body
+      timeOutID: null
+    };
+  },
+  computed: {
+    /**
+     * White-listed items to not close when clicked.
+     * Add input, dropdown and all children.
+     */
+    whiteList() {
+      const e = [];
+      if (e.push(this.$refs.input.$el.querySelector("input")), e.push(this.$refs.dropdown), this.$refs.dropdown != null) {
+        const t = this.$refs.dropdown.querySelectorAll("*");
+        for (const i of t)
+          e.push(i);
+      }
+      if (this.$parent.$data._isTaginput) {
+        e.push(this.$parent.$el);
+        const t = this.$parent.$el.querySelectorAll("*");
+        for (const i of t)
+          e.push(i);
+      }
+      return e;
+    },
+    /**
+     * Check if exists default slot
+     */
+    hasDefaultSlot() {
+      return !!this.$slots.default;
+    },
+    /**
+     * Check if exists "empty" slot
+     */
+    hasEmptySlot() {
+      return !!this.$slots.empty;
+    },
+    /**
+     * Check if exists "header" slot
+     */
+    hasHeaderSlot() {
+      return !!this.$slots.header;
+    },
+    /**
+     * Check if exists "footer" slot
+     */
+    hasFooterSlot() {
+      return !!this.$slots.footer;
+    },
+    /**
+     * Apply dropdownPosition property
+     */
+    isOpenedTop() {
+      return this.dropdownPosition === "top" || this.dropdownPosition === "auto" && !this.isListInViewportVertically;
+    },
+    newIconRight() {
+      return this.clearable && this.newValue ? "close-circle" : this.iconRight;
+    },
+    newIconRightClickable() {
+      return this.clearable ? !0 : this.iconRightClickable;
+    },
+    contentStyle() {
+      return {
+        maxHeight: this.maxHeight === void 0 ? null : isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`
+      };
+    },
+    isDropdownOpen() {
+      return this.isActive && (this.data.length > 0 || this.hasEmptySlot || this.hasHeaderSlot || this.hasFooterSlot);
+    }
+  },
+  watch: {
+    /**
+     * When dropdown is toggled, check the visibility to know when
+     * to open upwards.
+     */
+    isActive(e) {
+      this.dropdownPosition === "auto" && (e ? this.calcDropdownInViewportVertical() : this.timeOutID = setTimeout(() => {
+        this.calcDropdownInViewportVertical();
+      }, 100)), this.$nextTick(() => {
+        this.$emit("active", e);
+      }), e && this.$nextTick(() => this.setHovered(null));
+    },
+    /**
+     * When updating input's value
+     *   1. Emit changes
+     *   2. If value isn't the same as selected, set null
+     *   3. Close dropdown if value is clear or else open it
+     */
+    newValue(e) {
+      this.$emit("update:modelValue", e);
+      const t = this.getValue(this.selected);
+      t && t !== e && this.setSelected(null, !1), this.hasFocus && (!this.openOnFocus || e) && (this.isActive = !!e);
+    },
+    /**
+     * When v-model is changed:
+     *   1. Update internal value.
+     *   2. If it's invalid, validate again.
+     */
+    modelValue(e) {
+      this.newValue = e;
+    },
+    /**
+     * Select first option if "keep-first
+     */
+    data(e) {
+      this.keepFirst && this.selectFirstOption(e);
+    }
+  },
+  created() {
+    typeof window < "u" && (document.addEventListener("click", this.clickedOutside), this.dropdownPosition === "auto" && window.addEventListener("resize", this.calcDropdownInViewportVertical));
+  },
+  mounted() {
+    if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) {
+      const e = this.$refs.dropdown.querySelector(".dropdown-content");
+      e.addEventListener(
+        "scroll",
+        () => this.checkIfReachedTheEndOfScroll(e)
+      );
+    }
+    this.appendToBody && (this.$data._bodyEl = P(this.$refs.dropdown), this.updateAppendToBody());
+  },
+  beforeUnmount() {
+    typeof window < "u" && (document.removeEventListener("click", this.clickedOutside), this.dropdownPosition === "auto" && window.removeEventListener(
+      "resize",
+      this.calcDropdownInViewportVertical
+    )), this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content") && this.$refs.dropdown.querySelector(".dropdown-content").removeEventListener("scroll", this.checkIfReachedTheEndOfScroll), this.appendToBody && z(this.$data._bodyEl), clearTimeout(this.timeOutID);
+  },
+  methods: {
+    /**
+     * Set which option is currently hovered.
+     */
+    setHovered(e) {
+      e !== void 0 && (this.hovered = e);
+    },
+    /**
+     * Set which option is currently selected, update v-model,
+     * update input value and close dropdown.
+     */
+    setSelected(e, t = !0) {
+      e !== void 0 && (this.selected = e, this.$emit("select", this.selected), this.selected !== null && (this.newValue = this.clearOnSelect ? "" : this.getValue(this.selected), this.setHovered(this.clearOnSelect ? null : this.hovered)), t && this.$nextTick(() => {
+        this.isActive = !1;
+      }), this.checkValidity());
+    },
+    /**
+     * Select first option
+     */
+    selectFirstOption(e) {
+      this.$nextTick(() => {
+        e.length ? (this.openOnFocus || this.newValue !== "" && this.hovered !== e[0]) && this.setHovered(e[0]) : this.setHovered(null);
+      });
+    },
+    /**
+     * Enter key listener.
+     * Select the hovered option.
+     */
+    enterPressed(e) {
+      this.isDropdownOpen && (e.preventDefault(), this.hovered !== null && this.setSelected(this.hovered, !this.keepOpen));
+    },
+    /**
+     * Tab key listener.
+     * Select hovered option if it exists, close dropdown, then allow
+     * native handling to move to next tabbable element.
+     */
+    tabPressed() {
+      if (this.hovered === null) {
+        this.isActive = !1;
+        return;
+      }
+      this.setSelected(this.hovered, !this.keepOpen);
+    },
+    /**
+     * Close dropdown if clicked outside.
+     */
+    clickedOutside(e) {
+      var i;
+      const t = ((i = e.path) == null ? void 0 : i[0]) || e.target;
+      this.whiteList.indexOf(t) < 0 && (this.isActive = !1);
+    },
+    /**
+     * Return display text for the input.
+     * If object, get value from path, or else just the value.
+     */
+    getValue(e) {
+      if (e !== null)
+        return typeof this.customFormatter < "u" ? this.customFormatter(e) : typeof e == "object" ? N(e, this.field) : e;
+    },
+    /**
+     * Check if the scroll list inside the dropdown
+     * reached it's end.
+     */
+    checkIfReachedTheEndOfScroll(e) {
+      e.clientHeight !== e.scrollHeight && e.scrollTop + e.clientHeight >= e.scrollHeight && this.$emit("infinite-scroll");
+    },
+    /**
+     * Calculate if the dropdown is vertically visible when activated,
+     * otherwise it is openened upwards.
+     */
+    calcDropdownInViewportVertical() {
+      this.$nextTick(() => {
+        if (this.$refs.dropdown == null) return;
+        const e = this.$refs.dropdown.getBoundingClientRect();
+        this.isListInViewportVertically = e.top >= 0 && e.bottom <= (window.innerHeight || document.documentElement.clientHeight), this.appendToBody && this.updateAppendToBody();
+      });
+    },
+    /**
+     * Arrows keys listener.
+     * If dropdown is active, set hovered option, or else just open.
+     */
+    keyArrows(e) {
+      const t = e === "down" ? 1 : -1;
+      if (this.isActive) {
+        let i = this.data.indexOf(this.hovered) + t;
+        i = i > this.data.length - 1 ? this.data.length : i, i = i < 0 ? 0 : i, this.setHovered(this.data[i]);
+        const l = this.$refs.dropdown.querySelector(".dropdown-content"), s = l.querySelectorAll(
+          "a.dropdown-item:not(.is-disabled)"
+        )[i];
+        if (!s) return;
+        const o = l.scrollTop, a = l.scrollTop + l.clientHeight - s.clientHeight;
+        s.offsetTop < o ? l.scrollTop = s.offsetTop : s.offsetTop >= a && (l.scrollTop = s.offsetTop - l.clientHeight + s.clientHeight);
+      } else
+        this.isActive = !0;
+    },
+    /**
+     * Focus listener.
+     * If value is the same as selected, select all text.
+     */
+    focused(e) {
+      this.getValue(this.selected) === this.newValue && this.$el.querySelector("input").select(), this.openOnFocus && (this.isActive = !0, this.keepFirst && this.selectFirstOption(this.data)), this.hasFocus = !0, this.$emit("focus", e);
+    },
+    /**
+     * Blur listener.
+     */
+    onBlur(e) {
+      this.hasFocus = !1, this.$emit("blur", e);
+    },
+    onInput() {
+      const e = this.getValue(this.selected);
+      e && e === this.newValue || (this.$emit("typing", this.newValue), this.checkValidity());
+    },
+    rightIconClick(e) {
+      this.clearable ? this.newValue = "" : this.$emit("icon-right-click", e);
+    },
+    checkValidity() {
+      this.useHtml5Validation && this.$nextTick(() => {
+        this.checkHtml5Validity();
+      });
+    },
+    updateAppendToBody() {
+      var i, l;
+      const e = this.$refs.dropdown, t = (l = (i = this.$parent) == null ? void 0 : i.$data) != null && l._isTaginput ? this.$parent.$el : this.$refs.input.$el;
+      if (e && t) {
+        const s = this.$data._bodyEl;
+        s.classList.forEach((u) => s.classList.remove(u)), s.classList.add("autocomplete"), s.classList.add("control"), this.expandend && s.classList.add("is-expandend");
+        const o = t.getBoundingClientRect();
+        let a = o.top + window.scrollY;
+        const n = o.left + window.scrollX;
+        this.isOpenedTop ? a -= e.clientHeight : a += t.clientHeight, this.style = {
+          position: "absolute",
+          top: `${a}px`,
+          left: `${n}px`,
+          width: `${t.clientWidth}px`,
+          maxWidth: `${t.clientWidth}px`,
+          zIndex: "99"
+        };
+      }
+    }
+  }
+}, M = {
+  key: 0,
+  class: "dropdown-item"
+}, K = ["onClick"], Q = { key: 1 }, U = {
+  key: 1,
+  class: "dropdown-item is-disabled"
+}, W = {
+  key: 2,
+  class: "dropdown-item"
+};
+function j(e, t, i, l, s, o) {
+  const a = g("CInput");
+  return d(), c("div", S({
+    class: ["autocomplete control", { "is-expanded": e.expanded }]
+  }, e.rootAttrs), [
+    V(a, S({
+      modelValue: s.newValue,
+      "onUpdate:modelValue": t[0] || (t[0] = (n) => s.newValue = n),
+      ref: "input",
+      size: e.size,
+      loading: e.loading,
+      rounded: e.rounded,
+      icon: e.icon,
+      "icon-right": o.newIconRight,
+      "icon-right-clickable": o.newIconRightClickable,
+      "icon-pack": e.iconPack,
+      maxlength: e.maxlength,
+      autocomplete: s.newAutocomplete,
+      "use-html5-validation": !1,
+      type: "text"
+    }, e.fallthroughAttrs, {
+      "onUpdate:modelValue": o.onInput,
+      onFocus: o.focused,
+      onBlur: o.onBlur,
+      onKeyup: t[1] || (t[1] = m(v((n) => s.isActive = !1, ["prevent"]), ["esc"])),
+      onKeydown: [
+        m(o.tabPressed, ["tab"]),
+        m(o.enterPressed, ["enter"]),
+        t[2] || (t[2] = m(v((n) => o.keyArrows("up"), ["prevent"]), ["up"])),
+        t[3] || (t[3] = m(v((n) => o.keyArrows("down"), ["prevent"]), ["down"]))
+      ],
+      onIconRightClick: o.rightIconClick,
+      onIconClick: t[4] || (t[4] = (n) => e.$emit("icon-click", n))
+    }), null, 16, ["modelValue", "size", "loading", "rounded", "icon", "icon-right", "icon-right-clickable", "icon-pack", "maxlength", "autocomplete", "onUpdate:modelValue", "onFocus", "onBlur", "onKeydown", "onIconRightClick"]),
+    V(L, { name: "fade" }, {
+      default: p(() => [
+        $(w("div", {
+          ref: "dropdown",
+          class: A([{ "is-opened-top": o.isOpenedTop && !i.appendToBody }, "dropdown-menu"]),
+          style: C(s.style)
+        }, [
+          $(w("div", {
+            style: C(o.contentStyle),
+            class: "dropdown-content"
+          }, [
+            o.hasHeaderSlot ? (d(), c("div", M, [
+              y(e.$slots, "header")
+            ])) : f("", !0),
+            (d(!0), c(x, null, _(i.data, (n, u) => (d(), c("a", {
+              key: u,
+              class: A([{ "is-hovered": n === s.hovered }, "dropdown-item"]),
+              onClick: (k) => o.setSelected(n, void 0, k)
+            }, [
+              o.hasDefaultSlot ? y(e.$slots, "default", {
+                key: 0,
+                option: n,
+                index: u
+              }) : (d(), c("span", Q, h(o.getValue(n, !0)), 1))
+            ], 10, K))), 128)),
+            i.data.length === 0 && o.hasEmptySlot ? (d(), c("div", U, [
+              y(e.$slots, "empty")
+            ])) : f("", !0),
+            o.hasFooterSlot ? (d(), c("div", W, [
+              y(e.$slots, "footer")
+            ])) : f("", !0)
+          ], 4), [
+            [T, s.isActive]
+          ])
+        ], 6), [
+          [T, o.isDropdownOpen]
+        ])
+      ]),
+      _: 3
+    })
+  ], 16);
+}
+const X = /* @__PURE__ */ B(q, [["render", j]]), G = {
+  i18nOptions: {
+    namespaces: "components",
+    keyPrefix: "account.documentForm.clients"
+  },
+  name: "ClientAutocomplete",
+  components: {
+    SearchApi: O,
+    CAutocomplete: X
+  },
+  props: {
+    searchEnabled: {
+      type: Boolean,
+      default: !0
+    },
+    showLoading: {
+      type: Boolean,
+      default: !1
+    },
+    showEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    filled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["input", "setClient", "add"],
+  data() {
+    return {
+      convertToNewClient: D,
+      results: [],
+      // results when searching for existing endCustomer
+      searchQuery: ""
+      // query used to search for endCustomers
+    };
+  },
+  methods: {
+    search(e, t) {
+      this.$emit("input", t), this.searchEnabled && (this.searchQuery = t, e({
+        q: t,
+        cb: ({ endCustomer: i }) => {
+          this.results = i;
+        }
+      }));
+    }
+  }
+}, Y = { style: { "line-height": "1.5" } }, Z = { style: { "font-weight": "500" } }, J = {
+  class: "text-gray-600",
+  style: { "font-size": "14px" }
+}, ee = { key: 0 }, te = { key: 0 };
+function ie(e, t, i, l, s, o) {
+  const a = g("CButton"), n = g("CAutocomplete"), u = g("SearchApi");
+  return d(), b(u, { "custom-search": { endCustomer: !0 } }, {
+    default: p(({ fetch: k, isLoading: I }) => [
+      V(n, S({
+        placeholder: e.$t("search.placeholder"),
+        ...e.$attrs,
+        ...e.$props
+      }, {
+        data: s.results,
+        loading: i.showLoading && I,
+        filled: i.filled,
+        expanded: "",
+        "keep-first": "",
+        onTyping: (r) => o.search(k, r),
+        onSelect: t[1] || (t[1] = (r) => e.$emit("setClient", s.convertToNewClient(r)))
+      }), {
+        default: p(({ option: r }) => [
+          w("div", Y, [
+            w("div", Z, h(r.name || r.email), 1),
+            w("div", J, h(r.reference ? `${r.reference} · ` : "") + " " + h(r.workStreet || r.street || " "), 1)
+          ])
+        ]),
+        footer: p(() => [
+          i.searchEnabled && i.showEmpty ? (d(), c("div", ee, [
+            s.searchQuery && !s.results.length ? (d(), b(a, {
+              key: 0,
+              type: "secondary",
+              pattern: "tertiary",
+              size: "small",
+              style: { "font-weight": "600" },
+              onClick: t[0] || (t[0] = (r) => e.$emit("add"))
+            }, {
+              default: p(() => [
+                R(h(e.$t("_common:add")), 1)
+              ]),
+              _: 1
+            })) : f("", !0)
+          ])) : f("", !0)
+        ]),
+        empty: p(() => [
+          i.searchEnabled && i.showEmpty ? (d(), c("div", te, h(e.$t("search.empty")) + " " + h(s.searchQuery), 1)) : f("", !0)
+        ]),
+        _: 2
+      }, 1040, ["data", "loading", "filled", "onTyping"])
+    ]),
+    _: 1
+  });
+}
+const le = /* @__PURE__ */ B(G, [["render", ie]]);
+export {
+  le as C,
+  X as a
+};