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

package/dist/BlockMedia-CW5wgipC.js

@@ -0,0 +1,103 @@
+import { g as m } from "./color-HetJPhlA.js";
+import { _ as y, aa as n, an as v, o as t, d as a, l as s, f as u } from "./main-Cb-nyil1.js";
+const p = {
+  name: "BlockMedia",
+  inject: {
+    isPdf: {
+      default: !1
+    },
+    compressImages: {
+      default: !1
+    }
+  },
+  props: {
+    media: {
+      type: Object,
+      default: () => ({})
+    },
+    preview: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    forceStatic() {
+      return this.isPdf || this.preview;
+    },
+    type() {
+      return n(this, "media.type", "color");
+    },
+    video() {
+      return n(this, "media.video", {});
+    },
+    overlayColor() {
+      const { overlay: r, overlayColor: l } = this.media || {};
+      return r && !["color", "gradient"].includes(this.type) ? l : "";
+    },
+    blurStyle() {
+      const { blur: r } = this.media || {};
+      return r && !["color", "gradient"].includes(this.type) ? { backdropFilter: `blur(${r}px)` } : null;
+    },
+    baseStyle() {
+      const {
+        resourceUrl: r,
+        backgroundColor: l,
+        position: i = 50,
+        filter: d = "",
+        gradient: c = {}
+      } = this.media || {}, e = m(c);
+      let o;
+      return r && (o = this.compressImages ? v(r, { auto: "compress" }) : r), {
+        backgroundPosition: `center ${i}%`,
+        ...!["color", "gradient"].includes(this.type) && {
+          filter: `${d || ""}`
+        },
+        ...l && this.type === "color" && { backgroundColor: l },
+        ...o && this.type === "image" && { backgroundImage: `url(${o})` },
+        ...e && this.type === "gradient" && { backgroundImage: e }
+      };
+    }
+  }
+}, f = { class: "media-root" }, g = {
+  key: 1,
+  class: "video-bg__media"
+}, _ = ["poster"], h = ["src"], b = ["src"];
+function k(r, l, i, d, c, e) {
+  return t(), a("div", f, [
+    e.overlayColor ? (t(), a("div", {
+      key: 0,
+      style: s({ backgroundColor: e.overlayColor }),
+      class: "media-overlay"
+    }, null, 4)) : u("", !0),
+    e.type === "video" && e.video && e.video.url ? (t(), a("div", g, [
+      e.forceStatic ? (t(), a("video", {
+        key: 0,
+        poster: e.video.thumbnail
+      }, null, 8, _)) : e.video.provider === "pexels" ? (t(), a("video", {
+        key: 1,
+        src: e.video.url,
+        autoplay: "",
+        loop: "",
+        muted: "",
+        playsInline: ""
+      }, null, 8, h)) : (t(), a("iframe", {
+        key: 2,
+        src: e.video.url,
+        frameborder: "0"
+      }, null, 8, b))
+    ])) : (t(), a("div", {
+      key: 2,
+      style: s(e.baseStyle),
+      class: "media-base"
+    }, null, 4)),
+    e.blurStyle ? (t(), a("div", {
+      key: 3,
+      style: s(e.blurStyle),
+      class: "media-blur-area"
+    }, null, 4)) : u("", !0)
+  ]);
+}
+const I = /* @__PURE__ */ y(p, [["render", k], ["__scopeId", "data-v-0b04f7d1"]]);
+export {
+  I as B
+};

package/dist/CCallout-Cy2eeIYd.js

@@ -0,0 +1,104 @@
+import { _ as m, Y as _, b as c, o as s, c as r, w as f, d as l, s as t, v as n, f as o, S as i, l as g, n as p, e as v, aj as C } from "./main-Cb-nyil1.js";
+const h = {
+  name: "CCallout",
+  components: {
+    CButton: _
+  },
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: null
+    },
+    type: {
+      type: String,
+      default: null
+    },
+    padding: {
+      type: String,
+      default: null
+    },
+    closable: {
+      type: Boolean,
+      default: !1
+    },
+    legacy: {
+      type: Boolean,
+      default: !0
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["close"]
+}, b = {
+  key: 0,
+  class: "message-header"
+}, k = { class: "media" }, B = { class: "media-content" }, S = {
+  key: 1,
+  class: "flex rounded-md border border-gray-200 bg-gray-50 p-4"
+}, z = {
+  key: 0,
+  class: "-mt-px mr-3"
+}, x = { class: "font-medium" }, I = { class: "text-gray-800" }, N = { class: "mb-2 text-gray-500" };
+function V(a, d, e, w, j, D) {
+  const u = c("CButton"), y = c("CIcon");
+  return s(), r(C, { name: "fade" }, {
+    default: f(() => [
+      e.legacy ? (s(), l("article", {
+        key: 0,
+        class: p([[`is-${e.type}`, `is-${e.size}`], "message"])
+      }, [
+        t("section", {
+          style: g({ padding: e.padding }),
+          class: "message-body"
+        }, [
+          e.title ? (s(), l("header", b, n(e.title), 1)) : o("", !0),
+          t("div", k, [
+            t("div", B, [
+              i(a.$slots, "default", {}, void 0, !0)
+            ])
+          ])
+        ], 4),
+        e.closable ? (s(), r(u, {
+          key: 0,
+          type: e.type,
+          size: "small",
+          pattern: "secondary",
+          circle: "",
+          icon: "x",
+          style: { right: "calc(0.5 * var(--rem))", position: "absolute", top: "calc(0.5 * var(--rem))" },
+          onClick: d[0] || (d[0] = (E) => a.$emit("close"))
+        }, null, 8, ["type"])) : o("", !0)
+      ], 2)) : (s(), l("div", S, [
+        e.icon ? (s(), l("div", z, [
+          v(y, {
+            type: e.icon,
+            size: "16"
+          }, null, 8, ["type"])
+        ])) : o("", !0),
+        t("div", null, [
+          t("div", null, [
+            i(a.$slots, "title", {}, () => [
+              t("div", x, n(e.title), 1)
+            ], !0)
+          ]),
+          t("div", I, [
+            i(a.$slots, "default", {}, () => [
+              t("div", N, n(a.text), 1)
+            ], !0)
+          ])
+        ])
+      ]))
+    ]),
+    _: 3
+  });
+}
+const Y = /* @__PURE__ */ m(h, [["render", V], ["__scopeId", "data-v-5b642fcf"]]);
+export {
+  Y as C
+};

package/dist/{CCurrencyDropdown-qH-3m2eP.js → CCurrencyDropdown-DE_3CTjm.js}

@@ -1,7 +1,7 @@
-import { C as t, a as l } from "./CDropdownItem-BE8BAMD1.js";
-import { n as s, q as u, r } from "./main-WKzC-Dnu.js";
-import { S as c } from "./SmartList-Qgu0rMrI.js";
-const d = {
+import { C as g, a as B } from "./CDropdownItem-Dmq5gYzA.js";
+import { _ as R, X as y, a6 as D, b as l, o as s, c, w as r, S as N, e as u, B as M, v as d, d as b, F as K, k as A, s as m, Z as L } from "./main-Cb-nyil1.js";
+import { S as T } from "./SmartList-DqG7Q5t7.js";
+const F = {
   AED: "United Arab Emirates Dirham",
   AFN: "Afghan Afghani",
   ALL: "Albanian Lek",
@@ -168,23 +168,24 @@ const d = {
   ZAR: "South African Rand",
   ZMW: "Zambian Kwacha",
   ZWL: "Zimbabwean Dollar"
-}, D = {
+}, G = {
   name: "CCurrencyDropdown",
   components: {
-    CInput: u,
-    CDropdown: t,
-    CDropdownItem: l,
-    SmartList: c
+    CInput: y,
+    CDropdown: g,
+    CDropdownItem: B,
+    SmartList: T
   },
   props: {
-    value: {
+    modelValue: {
       type: String,
       required: !0
     }
   },
+  emits: ["active-change", "update:modelValue"],
   data() {
     return {
-      currencies: d,
+      currencies: F,
       isCurrencyDropdownOpen: !1,
       searchQuery: ""
     };
@@ -192,55 +193,96 @@ const d = {
   computed: {
     internalCurrency: {
       get() {
-        return this.value;
+        return this.modelValue;
       },
-      set(i) {
-        this.$emit("input", i);
+      set(a) {
+        this.$emit("update:modelValue", a);
       }
     },
     selectedValue() {
-      return this.internalCurrency ? r(this.internalCurrency) : "";
+      return this.internalCurrency ? D(this.internalCurrency) : "";
     }
   },
   watch: {
-    isCurrencyDropdownOpen(i) {
-      this.$emit("active-change", i), i ? this.$refs.searchCurrencyInput && this.$refs.searchCurrencyInput.focus() : this.searchQuery = "";
+    isCurrencyDropdownOpen(a) {
+      this.$emit("active-change", a), a ? this.$refs.searchCurrencyInput && this.$refs.searchCurrencyInput.focus() : this.searchQuery = "";
     }
   },
   methods: {
-    getCurrencySymbol: r
+    getCurrencySymbol: D
   }
-};
-var S = function() {
-  var a = this, e = a._self._c;
-  return e("SmartList", { attrs: { query: a.searchQuery, items: Object.keys(a.currencies), "default-sort": "asc" }, scopedSlots: a._u([{ key: "default", fn: function({ items: o }) {
-    return [e("CDropdown", a._b({ staticClass: "control", attrs: { size: a.$attrs.size, disabled: a.$attrs.disabled, "menu-styling": {
+}, w = { style: { "margin-right": "auto" } }, f = { style: { opacity: "0.7" } };
+function V(a, e, I, U, i, o) {
+  const C = l("CButton"), S = l("CInput"), p = l("CDropdownItem"), h = l("SmartList"), P = l("CDropdown");
+  return s(), c(P, L({
+    position: "is-bottom-left",
+    ...a.$attrs,
+    ...a.$props
+  }, {
+    modelValue: o.internalCurrency,
+    "onUpdate:modelValue": e[1] || (e[1] = (n) => o.internalCurrency = n),
+    size: a.$attrs.size,
+    disabled: a.$attrs.disabled,
+    "menu-styling": {
       maxWidth: "300px"
-    }, scrollable: !0, "max-height": 200 }, on: { "active-change": function(n) {
-      a.isCurrencyDropdownOpen = n;
-    } }, model: { value: a.internalCurrency, callback: function(n) {
-      a.internalCurrency = n;
-    }, expression: "internalCurrency" } }, "CDropdown", {
-      position: "is-bottom-left",
-      ...a.$attrs,
-      ...a.$props
-    }, !1), [a._t("default", function() {
-      return [e("CButton", { staticClass: "is-left", staticStyle: { width: "100%", "text-align": "left", "min-width": "7em" }, attrs: { "dropdown-icon": !0, raised: "" } }, [a._v(" " + a._s(a.selectedValue) + " ")])];
-    }, { slot: "trigger", selectedValue: a.selectedValue }), e("CInput", { ref: "searchCurrencyInput", staticStyle: { "margin-bottom": "0.25em" }, attrs: { slot: "header", placeholder: a.$t("_common:search"), filled: "" }, slot: "header", model: { value: a.searchQuery, callback: function(n) {
-      a.searchQuery = n;
-    }, expression: "searchQuery" } }), a._l(o, function(n) {
-      return e("CDropdownItem", { key: n, staticClass: "truncate-text", staticStyle: { "padding-right": "0.5em" }, attrs: { value: n } }, [e("div", { staticStyle: { "margin-right": "auto" } }, [a._v(a._s(n))]), e("div", { staticStyle: { opacity: "0.7" } }, [a._v(" " + a._s(a.getCurrencySymbol(n)) + " ")])]);
-    })], 2)];
-  } }], null, !0) });
-}, C = [], m = /* @__PURE__ */ s(
-  D,
-  S,
-  C,
-  !1,
-  null,
-  "6508b8fc"
-);
-const R = m.exports;
+    },
+    scrollable: !0,
+    "max-height": 200,
+    class: "control",
+    onActiveChange: e[2] || (e[2] = (n) => i.isCurrencyDropdownOpen = n)
+  }), {
+    trigger: r(() => [
+      N(a.$slots, "default", { selectedValue: o.selectedValue }, () => [
+        u(C, {
+          "dropdown-icon": !0,
+          class: "is-left",
+          raised: "",
+          style: { width: "100%", "text-align": "left", "min-width": "7em" }
+        }, {
+          default: r(() => [
+            M(d(o.selectedValue), 1)
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    header: r(() => [
+      u(S, {
+        ref: "searchCurrencyInput",
+        modelValue: i.searchQuery,
+        "onUpdate:modelValue": e[0] || (e[0] = (n) => i.searchQuery = n),
+        placeholder: a.$t("_common:search"),
+        filled: "",
+        style: { "margin-bottom": "0.25em" }
+      }, null, 8, ["modelValue", "placeholder"])
+    ]),
+    default: r(() => [
+      u(h, {
+        query: i.searchQuery,
+        items: Object.keys(i.currencies),
+        "default-sort": "asc"
+      }, {
+        default: r(({ items: n }) => [
+          (s(!0), b(K, null, A(n, (t) => (s(), c(p, {
+            key: t,
+            value: t,
+            class: "truncate-text",
+            style: { "padding-right": "0.5em" }
+          }, {
+            default: r(() => [
+              m("div", w, d(t), 1),
+              m("div", f, d(o.getCurrencySymbol(t)), 1)
+            ]),
+            _: 2
+          }, 1032, ["value"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["query", "items"])
+    ]),
+    _: 3
+  }, 16, ["modelValue", "size", "disabled"]);
+}
+const H = /* @__PURE__ */ R(G, [["render", V]]);
 export {
-  R as C
+  H as C
 };