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

package/dist/ImageSelectModal-D3sP3lhR.js

@@ -0,0 +1,119 @@
+import _ from "./ImageUploadWrapper-RWNa-yIq.js";
+import { B as I, a as B } from "./index-DKMxIBz_.js";
+import { _ as k, p as U, a4 as i, av as v, b as n, o as C, c as S, w as a, e as l, B as m, v as p } from "./main-Cb-nyil1.js";
+const u = U.unsplash.id, $ = {
+  name: "ImageSelectModal",
+  i18nOptions: {
+    namespaces: "imageSelectModal",
+    messages: {
+      en: {
+        creditImages: "Images from {{thing}}"
+      },
+      sv: {
+        creditImages: "Bilder från {{thing}}"
+      }
+    }
+  },
+  components: {
+    BackgroundModal: I,
+    BackgroundList: B,
+    ImageUploadWrapper: _
+  },
+  emits: ["input", "change", "close"],
+  data() {
+    return {
+      selectedUrl: null
+    };
+  },
+  methods: {
+    async fetch({ query: e, page: t }) {
+      const { data: r } = await i.get(
+        "https://api.unsplash.com/search/photos",
+        {
+          params: {
+            page: t,
+            per_page: 12,
+            client_id: u,
+            query: e
+          }
+        }
+      );
+      return {
+        items: (r.results || []).map((o) => ({
+          ...o,
+          image: o.urls.regular,
+          minImage: o.urls.thumb
+        })),
+        total: r.total
+      };
+    },
+    selectImage(e) {
+      this.selectedUrl = v(e.image, { w: 1800 });
+      const t = new Image();
+      t.src = this.selectedUrl, i.get(e.links.download_location, {
+        params: {
+          client_id: u
+        }
+      });
+    },
+    setCustomBackground({ response: e }) {
+      this.selectedUrl = e.url, this.onSave();
+    },
+    onSave() {
+      this.$emit("change"), this.$emit("input", this.selectedUrl), this.$emit("close");
+    }
+  }
+};
+function w(e, t, r, o, y, s) {
+  const d = n("CButton"), g = n("ImageUploadWrapper"), h = n("BackgroundList"), f = n("BackgroundModal");
+  return C(), S(f, {
+    onClose: t[1] || (t[1] = (c) => e.$emit("close"))
+  }, {
+    default: a(() => [
+      l(h, {
+        fetch: s.fetch,
+        "credit-text": e.$t("creditImages", { thing: "Unsplash" }),
+        "default-query": "architecture",
+        onSelect: s.selectImage
+      }, {
+        footer: a(() => [
+          l(g, {
+            ref: "uploadWrapper",
+            "on-image-upload": s.setCustomBackground,
+            onUpload: t[0] || (t[0] = (c) => e.isUploadingImage = !0)
+          }, {
+            default: a(({ progress: c }) => [
+              l(d, {
+                loading: !!c,
+                "icon-left": "upload",
+                type: "none"
+              }, {
+                default: a(() => [
+                  m(p(e.$t("_common:upload")), 1)
+                ]),
+                _: 2
+              }, 1032, ["loading"])
+            ]),
+            _: 1
+          }, 8, ["on-image-upload"]),
+          l(d, {
+            style: { "margin-left": "0.5em" },
+            type: "secondary",
+            onClick: s.onSave
+          }, {
+            default: a(() => [
+              m(p(e.$t("_common:save")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ]),
+        _: 1
+      }, 8, ["fetch", "credit-text", "onSelect"])
+    ]),
+    _: 1
+  });
+}
+const x = /* @__PURE__ */ k($, [["render", w], ["__scopeId", "data-v-b5f43c6b"]]);
+export {
+  x as default
+};