@cling-se/widget 0.17.3 → 0.18.0

package/dist/index-BvyoYp1e.js

@@ -0,0 +1,508 @@
+import { h as I, bd as q, I as P, e as r, j as w, o as a, b as h, s as i, S as $, c as g, an as k, be as F, f as C, w as p, $ as V, _ as M, aq as N, ag as G, m as D, a as L, g as T, y as b, d as m, B as x, v as _, T as O, ar as j, F as z, k as R, n as U } from "./main-Bn5XkQPb.js";
+import { i as H } from "./DocumentLayout-DkFlHgW6.js";
+import { _ as W } from "./CFormField.vue_vue_type_script_setup_true_lang-BqAyWe3T.js";
+import { B as A } from "./DocTextEditor-CEPcJT2o.js";
+import { u as J } from "./index-D8hGHka6.js";
+import { r as B, b as K } from "./index-Dxy4tf7x.js";
+import { S as Q } from "./SmartList-CWGKoAJh.js";
+import { w as X } from "./CDropdownItem-DMUAJ90n.js";
+const Y = { key: 0 }, Z = { 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), o = () => {
+      s.value = !0, v("show");
+    }, n = () => {
+      s.value = !1, v("hide");
+    };
+    return (d, c) => {
+      const f = r("VDropdown");
+      return w(H) ? (a(), h("div", Y, [
+        i("div", { onClick: o }, [
+          $(d.$slots, "default", {}, void 0, !0)
+        ]),
+        s.value ? (a(), g(F, {
+          key: 0,
+          to: w(u)
+        }, [
+          i("div", {
+            class: "modal-overlay",
+            onClick: k(n, ["self"])
+          }, [
+            i("div", Z, [
+              $(d.$slots, "popper", { hide: n }, void 0, !0)
+            ])
+          ])
+        ], 8, ["to"])) : C("", !0)
+      ])) : (a(), g(f, 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: o,
+        onHide: n,
+        "auto-hide": !1
+      }), {
+        popper: p(() => [
+          i("div", ee, [
+            s.value ? (a(), 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: ae } = N({
+  getterType: "forms/getField",
+  mutationType: "forms/updateField"
+}), oe = {
+  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$: J()
+    };
+  },
+  validations: {
+    name: {
+      required: B,
+      maxLength: K(255)
+    },
+    textContent: {
+      required: B
+    }
+  },
+  computed: {
+    ...D({
+      isPosting: "templateMessages/isPosting",
+      isFetching: "templateMessages/isFetching",
+      checkFormChanged: "forms/hasChanged"
+    }),
+    ...ae({
+      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, o) {
+  const n = r("CButton"), d = r("Spinner"), c = r("CInput"), f = r("CField"), y = r("BaseTextEditor");
+  return a(), h("div", ne, [
+    v.showFixedCloseButton ? (a(), g(n, {
+      key: 0,
+      class: "fixed-close-button",
+      circle: "",
+      icon: "x",
+      onClick: t[0] || (t[0] = (l) => e.$emit("close"))
+    })) : C("", !0),
+    e.isFetching ? (a(), h("div", le, [
+      m(d)
+    ])) : e.templateMessage !== void 0 ? (a(), h("form", ie, [
+      m(f, {
+        validator: u.v$.name,
+        messages: o.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(f, {
+        validator: u.v$.textContent,
+        messages: o.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: !o.hasChanged,
+        type: "secondary",
+        style: { "margin-top": "calc(1 * var(--rem))" },
+        icon: "save",
+        wide: "",
+        onClick: t[5] || (t[5] = (l) => o.validateBeforeSubmit())
+      }, {
+        default: p(() => [
+          x(_(e.$t("_common:save")), 1)
+        ]),
+        _: 1
+      }, 8, ["loading", "disabled"]),
+      v.id ? (a(), 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) => o.remove())
+      }, {
+        default: p(() => [
+          x(_(e.$t("_common:remove")), 1)
+        ]),
+        _: 1
+      }, 8, ["loading"])) : C("", !0)
+    ])) : C("", !0)
+  ]);
+}
+const de = /* @__PURE__ */ M(oe, [["render", re], ["__scopeId", "data-v-286de2c9"]]), me = {
+  name: "TextTemplatesModal",
+  components: {
+    SmartList: Q,
+    BaseTextEditor: A
+  },
+  emits: ["select", "close"],
+  mixins: [X],
+  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" }, fe = { class: "t-list" }, he = ["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, o) {
+  const n = r("CInput"), d = r("BaseTextEditor"), c = r("CIcon"), f = r("CButton"), y = r("SmartList");
+  return a(), g(y, {
+    items: o.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", fe, [
+            (a(!0), h(z, null, R(l, (S, E) => (a(), h("div", {
+              key: S.id,
+              class: U([{ selected: E === s.selectedIndex }, "t-list-item truncate-text"]),
+              onMouseoverPassive: () => s.selectedIndex = E,
+              onClick: (Me) => o.onSelect(l[s.selectedIndex].message || "")
+            }, _(S.name), 43, he))), 128))
+          ]),
+          e.mq !== "sm" ? (a(), h("div", ve, [
+            l[s.selectedIndex] ? (a(), g(d, {
+              key: 0,
+              "model-value": l[s.selectedIndex].message || "",
+              editable: !1,
+              extensions: "all",
+              "class-list": "document-form",
+              unstyled: ""
+            }, null, 8, ["model-value"])) : (a(), h("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" ? (a(), g(f, {
+              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(f, {
+              class: "t-footer-button",
+              size: "small",
+              onClick: o.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, o) {
+  const n = r("TextTemplatesModal"), d = r("ContextModal");
+  return o.viewSettings.isPublicForm ? C("", !0) : (a(), h("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] = (f) => e.$emit("select", f))
+        }, 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
+};