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

package/dist/index-DCYCN_FR.js

@@ -0,0 +1,508 @@
+import { h as I, d5 as q, I as P, b as r, j as w, o, d as f, s as i, S as $, c as g, ao as k, bn as F, f as C, w as p, Z as V, _ as M, ar as N, ah as G, m as D, a as L, g as T, y as b, e as m, B as x, v as _, T as O, as as j, F as z, k as R, n as U } from "./main-C4OdoeS2.js";
+import { i as H } from "./DocumentLayout-BRfEjoYq.js";
+import { _ as W } from "./CFormField.vue_vue_type_script_setup_true_lang-B4s_Zfsp.js";
+import { B as A } from "./DocTextEditor-Cw-Skmd4.js";
+import { u as Z } from "./index-8g2jwLJx.js";
+import { r as B, b as J } from "./index-FRHGChx1.js";
+import { S as K } from "./SmartList-BmmtZoZ0.js";
+import { w as Q } from "./CDropdownItem-DvaU14-V.js";
+const X = { key: 0 }, Y = { class: "modal-container" }, ee = { class: "popover-container" }, te = /* @__PURE__ */ I({
+  __name: "ContextModal",
+  props: {
+    placement: { default: "top-start" }
+  },
+  emits: ["show", "hide"],
+  setup(e, { emit: t }) {
+    const v = t, { rootChild: u } = q(), s = P(!1), a = () => {
+      s.value = !0, v("show");
+    }, n = () => {
+      s.value = !1, v("hide");
+    };
+    return (d, c) => {
+      const h = r("VDropdown");
+      return w(H) ? (o(), f("div", X, [
+        i("div", { onClick: a }, [
+          $(d.$slots, "default", {}, void 0, !0)
+        ]),
+        s.value ? (o(), g(F, {
+          key: 0,
+          to: w(u)
+        }, [
+          i("div", {
+            class: "modal-overlay",
+            onClick: k(n, ["self"])
+          }, [
+            i("div", Y, [
+              $(d.$slots, "popper", { hide: n }, void 0, !0)
+            ])
+          ])
+        ], 8, ["to"])) : C("", !0)
+      ])) : (o(), g(h, V({ key: 1 }, d.$props, {
+        placement: d.placement,
+        shown: s.value,
+        "onUpdate:shown": c[0] || (c[0] = (y) => s.value = y),
+        "popper-class": "context-modal-popper",
+        onShow: a,
+        onHide: n,
+        "auto-hide": !1
+      }), {
+        popper: p(() => [
+          i("div", ee, [
+            s.value ? (o(), g(F, {
+              key: 0,
+              to: w(u)
+            }, [
+              i("div", {
+                class: "overlay",
+                onClick: k(n, ["self"])
+              })
+            ], 8, ["to"])) : C("", !0),
+            $(d.$slots, "popper", { hide: n }, void 0, !0)
+          ])
+        ]),
+        default: p(() => [
+          $(d.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 16, ["placement", "shown"]));
+    };
+  }
+}), se = /* @__PURE__ */ M(te, [["__scopeId", "data-v-71def6ac"]]), { mapFields: oe } = N({
+  getterType: "forms/getField",
+  mutationType: "forms/updateField"
+}), ae = {
+  i18nOptions: {
+    namespaces: "TextTemplatesForm",
+    messages: {
+      en: {
+        textLabel: "Snippet",
+        name: {
+          label: "Template Name",
+          placeholder: "Name"
+        },
+        placeholderType: {
+          default: "Write here..."
+        },
+        validations: {
+          name: {
+            required: "Name is required",
+            maxLength: "Maximum length is 256 characters"
+          },
+          textContent: {
+            required: "Add some content"
+          }
+        }
+      },
+      sv: {
+        textLabel: "Mallens innehåll",
+        name: {
+          label: "Namn på mallen",
+          placeholder: "Mallens namn"
+        },
+        placeholderType: {
+          default: "Skriv här..."
+        },
+        validations: {
+          name: {
+            required: "Ge mallen ett namn",
+            maxLength: "Får max vara 256 tecken långt"
+          },
+          textContent: {
+            required: "Skriv vad mallen ska innehålla"
+          }
+        }
+      }
+    }
+  },
+  name: "TextTemplatesForm",
+  components: {
+    BaseTextEditor: A,
+    Spinner: G,
+    CField: W
+  },
+  expose: ["canLeave"],
+  emits: ["close"],
+  props: {
+    id: {
+      type: [String, Number],
+      default: null
+    },
+    predefinedTextContent: {
+      type: String,
+      default: null
+    },
+    onAfterSubmit: {
+      type: Function,
+      default: null
+    },
+    showFixedCloseButton: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    return {
+      v$: Z()
+    };
+  },
+  validations: {
+    name: {
+      required: B,
+      maxLength: J(255)
+    },
+    textContent: {
+      required: B
+    }
+  },
+  computed: {
+    ...D({
+      isPosting: "templateMessages/isPosting",
+      isFetching: "templateMessages/isFetching",
+      checkFormChanged: "forms/hasChanged"
+    }),
+    ...oe({
+      templateMessage: "templateMessage",
+      name: "templateMessage.name",
+      textContent: "templateMessage.message"
+    }),
+    messages() {
+      return {
+        name: {
+          required: this.$t("validations.name.required"),
+          maxLength: this.$t("validations.name.maxLength")
+        },
+        textContent: {
+          required: this.$t("validations.textContent.required")
+        }
+      };
+    },
+    hasChanged() {
+      return this.checkFormChanged("templateMessage");
+    }
+  },
+  watch: {
+    id() {
+      this.load();
+    }
+  },
+  mounted() {
+    this.load(), this.predefinedTextContent && (this.textContent = this.predefinedTextContent);
+  },
+  methods: {
+    ...L({
+      loadTemplate: T.LOAD_TEMPLATE_MESSAGE,
+      deleteTemplate: T.DELETE_TEMPLATE_MESSAGE,
+      formNewTemplate: T.FORM_NEW_TEMPLATE_MESSAGE,
+      formEditTemplate: T.FORM_EDIT_TEMPLATE_MESSAGE,
+      formSubmitTemplate: T.FORM_SUBMIT_TEMPLATE_MESSAGE
+    }),
+    canLeave() {
+      return !this.hasChanged;
+    },
+    async load() {
+      try {
+        this.id ? (await this.loadTemplate({
+          id: this.id
+        }), await this.formEditTemplate({
+          id: this.id
+        })) : await this.formNewTemplate();
+      } catch (e) {
+        b(e);
+      }
+    },
+    validateBeforeSubmit() {
+      return this.v$.$touch(), this.v$.$invalid ? !1 : this.submit();
+    },
+    async submit() {
+      if (this.hasChanged)
+        try {
+          await this.formSubmitTemplate(), typeof this.onAfterSubmit == "function" && this.onAfterSubmit();
+        } catch (e) {
+          b(e);
+        }
+    },
+    async remove() {
+      try {
+        await this.deleteTemplate({ id: this.id }), typeof this.onAfterSubmit == "function" && this.onAfterSubmit();
+      } catch (e) {
+        b(e);
+      }
+    }
+  }
+}, ne = { style: { position: "relative" } }, le = {
+  key: 1,
+  class: "flex w-full items-center justify-center",
+  style: { padding: "calc(3 * var(--rem)) 0" }
+}, ie = { key: 2 };
+function re(e, t, v, u, s, a) {
+  const n = r("CButton"), d = r("Spinner"), c = r("CInput"), h = r("CField"), y = r("BaseTextEditor");
+  return o(), f("div", ne, [
+    v.showFixedCloseButton ? (o(), g(n, {
+      key: 0,
+      class: "fixed-close-button",
+      circle: "",
+      icon: "x",
+      onClick: t[0] || (t[0] = (l) => e.$emit("close"))
+    })) : C("", !0),
+    e.isFetching ? (o(), f("div", le, [
+      m(d)
+    ])) : e.templateMessage !== void 0 ? (o(), f("form", ie, [
+      m(h, {
+        validator: u.v$.name,
+        messages: a.messages.name,
+        label: e.$t("name.label")
+      }, {
+        default: p(() => [
+          m(c, {
+            modelValue: e.name,
+            "onUpdate:modelValue": t[1] || (t[1] = (l) => e.name = l),
+            placeholder: e.$t("name.placeholder"),
+            onBlur: t[2] || (t[2] = (l) => u.v$.name.$touch())
+          }, null, 8, ["modelValue", "placeholder"])
+        ]),
+        _: 1
+      }, 8, ["validator", "messages", "label"]),
+      m(h, {
+        validator: u.v$.textContent,
+        messages: a.messages.textContent,
+        label: e.$t("textLabel")
+      }, {
+        default: p(() => [
+          m(y, {
+            modelValue: e.textContent,
+            "onUpdate:modelValue": t[3] || (t[3] = (l) => e.textContent = l),
+            placeholder: e.$t("placeholderType.default"),
+            "class-list": "large",
+            onBlur: t[4] || (t[4] = (l) => u.v$.textContent.$touch())
+          }, null, 8, ["modelValue", "placeholder"])
+        ]),
+        _: 1
+      }, 8, ["validator", "messages", "label"]),
+      m(n, {
+        loading: e.isPosting,
+        disabled: !a.hasChanged,
+        type: "secondary",
+        style: { "margin-top": "calc(1 * var(--rem))" },
+        icon: "save",
+        wide: "",
+        onClick: t[5] || (t[5] = (l) => a.validateBeforeSubmit())
+      }, {
+        default: p(() => [
+          x(_(e.$t("_common:save")), 1)
+        ]),
+        _: 1
+      }, 8, ["loading", "disabled"]),
+      v.id ? (o(), g(n, {
+        key: 0,
+        loading: e.isPosting,
+        type: "secondary",
+        pattern: "tertiary",
+        style: { "margin-top": "calc(1 * var(--rem))" },
+        wide: "",
+        onClick: t[6] || (t[6] = (l) => a.remove())
+      }, {
+        default: p(() => [
+          x(_(e.$t("_common:remove")), 1)
+        ]),
+        _: 1
+      }, 8, ["loading"])) : C("", !0)
+    ])) : C("", !0)
+  ]);
+}
+const de = /* @__PURE__ */ M(ae, [["render", re], ["__scopeId", "data-v-286de2c9"]]), me = {
+  name: "TextTemplatesModal",
+  components: {
+    SmartList: K,
+    BaseTextEditor: A
+  },
+  emits: ["select", "close"],
+  mixins: [Q],
+  setup() {
+    return { viewContext: O };
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+      query: ""
+    };
+  },
+  computed: {
+    ...j("templateMessages", {
+      templateMessages: (e) => e.data
+    }),
+    templates() {
+      return Object.values(this.templateMessages);
+    }
+  },
+  methods: {
+    onSelect(e) {
+      this.$emit("select", e), this.close();
+    },
+    close() {
+      this.$emit("close");
+    },
+    openCreateModal() {
+      this.close(), this.$modal.show(
+        de,
+        {
+          predefinedTextContent: "",
+          showFixedCloseButton: !0,
+          onAfterSubmit: () => this.$modal.hide("saveTemplateModal")
+        },
+        {
+          name: "saveTemplateModal",
+          delay: 100,
+          adaptive: !0,
+          height: "auto",
+          width: "90%",
+          maxWidth: 500,
+          scrollable: !0,
+          classes: "overflow-visible default"
+        }
+      );
+    }
+  }
+}, pe = {
+  ref: "modal-container",
+  class: "font-inter t-modal"
+}, ue = { class: "t-nav" }, ce = { class: "t-main" }, he = { class: "t-list" }, fe = ["onMouseoverPassive", "onClick"], ve = {
+  key: 0,
+  class: "t-text quill-format"
+}, ge = { key: 1 }, Ce = { class: "t-footer flex w-full items-center justify-between" };
+function Te(e, t, v, u, s, a) {
+  const n = r("CInput"), d = r("BaseTextEditor"), c = r("CIcon"), h = r("CButton"), y = r("SmartList");
+  return o(), g(y, {
+    items: a.templates,
+    "sort-key": "position",
+    query: s.query
+  }, {
+    default: p(({ items: l }) => [
+      i("div", pe, [
+        i("div", ue, [
+          m(n, {
+            ref: "searchInput",
+            modelValue: s.query,
+            "onUpdate:modelValue": [
+              t[0] || (t[0] = (S) => s.query = S),
+              t[1] || (t[1] = (S) => s.selectedIndex = 0)
+            ],
+            placeholder: e.$t("search"),
+            class: "search-input focus:text-gray-500",
+            icon: "search"
+          }, null, 8, ["modelValue", "placeholder"])
+        ]),
+        i("div", ce, [
+          i("div", he, [
+            (o(!0), f(z, null, R(l, (S, E) => (o(), f("div", {
+              key: S.id,
+              class: U([{ selected: E === s.selectedIndex }, "t-list-item truncate-text"]),
+              onMouseoverPassive: () => s.selectedIndex = E,
+              onClick: (Me) => a.onSelect(l[s.selectedIndex].message || "")
+            }, _(S.name), 43, fe))), 128))
+          ]),
+          e.mq !== "sm" ? (o(), f("div", ve, [
+            l[s.selectedIndex] ? (o(), g(d, {
+              key: 0,
+              "model-value": l[s.selectedIndex].message || "",
+              editable: !1,
+              extensions: "all",
+              "class-list": "document-form",
+              unstyled: ""
+            }, null, 8, ["model-value"])) : (o(), f("div", ge, _(e.$t("noResults")), 1))
+          ])) : C("", !0)
+        ]),
+        i("div", Ce, [
+          t[2] || (t[2] = i("div", { style: { display: "inline-flex", "align-items": "center" } }, null, -1)),
+          i("div", null, [
+            u.viewContext !== "widget" ? (o(), g(h, {
+              key: 0,
+              to: { name: "settingsTemplates" },
+              class: "t-footer-button",
+              target: "_blank",
+              size: "small"
+            }, {
+              default: p(() => [
+                x(_(e.$t("handle")) + " ", 1),
+                m(c, {
+                  type: "new-window",
+                  size: "16",
+                  style: { "margin-left": "0.5em" }
+                })
+              ]),
+              _: 1
+            })) : C("", !0),
+            m(h, {
+              class: "t-footer-button",
+              size: "small",
+              onClick: a.openCreateModal
+            }, {
+              default: p(() => [
+                x(_(e.$t("create", { thing: e.$t("template") })), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ])
+      ], 512)
+    ]),
+    _: 1
+  }, 8, ["items", "query"]);
+}
+const _e = /* @__PURE__ */ M(me, [["render", Te], ["__scopeId", "data-v-f299b0c2"]]), ye = {
+  name: "TextTemplates",
+  components: {
+    ContextModal: se,
+    TextTemplatesModal: _e
+  },
+  emits: ["open", "close", "select"],
+  inject: {
+    viewSettings: {
+      default: () => ({ isPublicForm: !1 })
+    }
+  },
+  props: {
+    placement: {
+      type: String,
+      default: "left"
+    }
+  },
+  created() {
+    this.viewSettings.isPublicForm || this.loadTemplateMessages();
+  },
+  methods: {
+    ...L({
+      loadTemplateMessages: T.LOAD_TEMPLATE_MESSAGES
+    })
+  }
+}, Se = {
+  key: 0,
+  class: "t-list"
+}, $e = { class: "t-option main" };
+function xe(e, t, v, u, s, a) {
+  const n = r("TextTemplatesModal"), d = r("ContextModal");
+  return a.viewSettings.isPublicForm ? C("", !0) : (o(), f("div", Se, [
+    m(d, {
+      "break-point": 1e3,
+      placement: v.placement,
+      onShow: t[1] || (t[1] = (c) => e.$emit("open")),
+      onHide: t[2] || (t[2] = (c) => e.$emit("close"))
+    }, {
+      popper: p(({ hide: c }) => [
+        m(n, {
+          onClose: c,
+          onSelect: t[0] || (t[0] = (h) => e.$emit("select", h))
+        }, null, 8, ["onClose"])
+      ]),
+      default: p(() => [
+        i("div", $e, [
+          $(e.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 8, ["placement"])
+  ]));
+}
+const Ie = /* @__PURE__ */ M(ye, [["render", xe]]);
+export {
+  Ie as default
+};

package/dist/index-FRHGChx1.js

@@ -0,0 +1,149 @@
+import { j as n } from "./main-C4OdoeS2.js";
+const i = (e) => {
+  if (e = n(e), Array.isArray(e)) return !!e.length;
+  if (e == null)
+    return !1;
+  if (e === !1)
+    return !0;
+  if (e instanceof Date)
+    return !isNaN(e.getTime());
+  if (typeof e == "object") {
+    for (let r in e) return !0;
+    return !1;
+  }
+  return !!String(e).length;
+}, m = (e) => (e = n(e), Array.isArray(e) ? e.length : typeof e == "object" ? Object.keys(e).length : String(e).length);
+function a() {
+  for (var e = arguments.length, r = new Array(e), t = 0; t < e; t++)
+    r[t] = arguments[t];
+  return (s) => (s = n(s), !i(s) || r.every((f) => (f.lastIndex = 0, f.test(s))));
+}
+a(/^[a-zA-Z]*$/);
+a(/^[a-zA-Z0-9]*$/);
+var $ = a(/^\d*(\.\d+)?$/), b = {
+  $validator: $,
+  $message: "Value must be numeric",
+  $params: {
+    type: "numeric"
+  }
+};
+const d = /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i;
+var o = a(d), A = {
+  $validator: o,
+  $message: "Value is not a valid email address",
+  $params: {
+    type: "email"
+  }
+};
+function x(e) {
+  return (r) => !i(r) || m(r) <= n(e);
+}
+function q(e) {
+  return {
+    $validator: x(e),
+    $message: (r) => {
+      let {
+        $params: t
+      } = r;
+      return `The maximum length allowed is ${t.max}`;
+    },
+    $params: {
+      max: e,
+      type: "maxLength"
+    }
+  };
+}
+function c(e) {
+  return (r) => !i(r) || m(r) >= n(e);
+}
+function L(e) {
+  return {
+    $validator: c(e),
+    $message: (r) => {
+      let {
+        $params: t
+      } = r;
+      return `This field should be at least ${t.min} characters long`;
+    },
+    $params: {
+      min: e,
+      type: "minLength"
+    }
+  };
+}
+function g(e) {
+  return typeof e == "string" && (e = e.trim()), i(e);
+}
+var V = {
+  $validator: g,
+  $message: "Value is required",
+  $params: {
+    type: "required"
+  }
+};
+const u = (e, r) => e ? i(typeof r == "string" ? r.trim() : r) : !0;
+function h(e) {
+  return function(r, t) {
+    if (typeof e != "function")
+      return u(n(e), r);
+    const s = e.call(this, r, t);
+    return u(s, r);
+  };
+}
+function S(e) {
+  return {
+    $validator: h(e),
+    $message: "The value is required",
+    $params: {
+      type: "requiredIf",
+      prop: e
+    }
+  };
+}
+function l(e) {
+  return (r) => n(r) === n(e);
+}
+function T(e) {
+  let r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "other";
+  return {
+    $validator: l(e),
+    $message: (t) => `The value must be equal to the ${r} value`,
+    $params: {
+      equalTo: e,
+      otherName: r,
+      type: "sameAs"
+    }
+  };
+}
+const p = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
+a(p);
+function y(e) {
+  return (r) => !i(r) || (!/\s/.test(r) || r instanceof Date) && +r >= +n(e);
+}
+function j(e) {
+  return {
+    $validator: y(e),
+    $message: (r) => {
+      let {
+        $params: t
+      } = r;
+      return `The minimum value allowed is ${t.min}`;
+    },
+    $params: {
+      min: e,
+      type: "minValue"
+    }
+  };
+}
+a(/(^[0-9]*$)|(^-[0-9]+$)/);
+a(/^[-]?\d*(\.\d+)?$/);
+export {
+  S as a,
+  q as b,
+  j as c,
+  A as e,
+  L as m,
+  b as n,
+  V as r,
+  T as s
+};