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

package/dist/AttachmentItem-CkHbAm4l.js

@@ -0,0 +1,171 @@
+import { _ as P } from "./Index.vue_vue_type_script_lang-aeVuChGF.js";
+import { C as B, a as E } from "./CDropdownItem-Dmq5gYzA.js";
+import { _ as F } from "./CFormField.vue_vue_type_script_setup_true_lang-D_U9coAY.js";
+import { _ as D, b as i, o as l, c as u, w as r, s as m, ao as f, d as c, e as a, F as z, v as d, f as _, n as b, B as p, af as N, aq as V } from "./main-Cb-nyil1.js";
+const H = {
+  name: "AttachmentsItem",
+  components: {
+    FileIcon: P,
+    CDropdown: B,
+    CDropdownItem: E,
+    CField: F
+  },
+  emits: ["click", "remove", "input"],
+  inject: {
+    isPdf: {
+      default: !1
+    }
+  },
+  props: {
+    isImageOrPdf: {
+      type: Boolean,
+      default: !1
+    },
+    attachment: {
+      type: Object,
+      default: () => ({})
+    },
+    canEdit: {
+      type: Boolean,
+      default: !1
+    },
+    uploadProgress: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      isHover: !1,
+      isEditing: !1
+    };
+  }
+}, O = ["src"], M = {
+  key: 1,
+  class: "attachment-icon pointer-events-none"
+}, j = { class: "attachment-data truncate-text pointer-events-none" }, A = { class: "truncate-text" }, K = {
+  key: 0,
+  style: { display: "flex", "align-items": "center", "font-size": "calc(calc(1 * var(--rem)) - 2px)" }
+}, T = { style: { "padding-left": "0.25em" } }, $ = { class: "hover-wrapper" }, q = { class: "hover-wrapper-text" };
+function x(t, e, n, S, s, v) {
+  const h = i("FileIcon"), g = i("CIcon"), y = i("CButton"), C = i("CDropdownItem"), k = i("CDropdown"), w = i("CInput"), I = i("CField");
+  return l(), u(V(n.isImageOrPdf && !v.isPdf ? "div" : "a"), {
+    href: n.attachment.url,
+    class: "attachment-wrapper",
+    target: "_blank",
+    rel: "noopener",
+    onMouseoverPassive: e[7] || (e[7] = (o) => s.isHover = !0),
+    onMouseleavePassive: e[8] || (e[8] = (o) => s.isHover = !1),
+    onClick: e[9] || (e[9] = f((o) => s.isEditing ? null : t.$emit("click"), ["self"]))
+  }, {
+    default: r(() => [
+      m("div", {
+        class: "attachment",
+        onClick: e[6] || (e[6] = f((o) => s.isEditing ? null : t.$emit("click"), ["self"]))
+      }, [
+        n.isImageOrPdf && !v.isPdf && n.attachment.mime.startsWith("image") ? (l(), c("img", {
+          key: 0,
+          src: n.attachment.url,
+          class: "attachment-preview pointer-events-none"
+        }, null, 8, O)) : (l(), c("div", M, [
+          a(h, {
+            mime: n.attachment.mime,
+            size: 40
+          }, null, 8, ["mime"])
+        ])),
+        s.isEditing ? (l(), u(I, {
+          key: 3,
+          grouped: "",
+          class: "flex w-full items-center"
+        }, {
+          default: r(() => [
+            a(w, {
+              ref: "input",
+              "model-value": n.attachment.name,
+              placeholder: t.$t(
+                "components:account.documentForm.attachments.fileNamePlaceholder"
+              ),
+              filled: "",
+              expanded: "",
+              "onUpdate:modelValue": e[2] || (e[2] = (o) => t.$emit("input", { ...n.attachment, name: o })),
+              onKeyup: e[3] || (e[3] = N((o) => o.target.blur(), ["enter"])),
+              onBlur: e[4] || (e[4] = (o) => s.isEditing = !1),
+              onClick: e[5] || (e[5] = f(() => {
+              }, ["prevent", "stop"]))
+            }, null, 8, ["model-value", "placeholder"]),
+            a(y, {
+              circle: "",
+              type: "secondary",
+              size: "normal",
+              icon: "check"
+            })
+          ]),
+          _: 1
+        })) : (l(), c(z, { key: 2 }, [
+          m("div", j, [
+            m("div", A, d(n.attachment.name), 1),
+            n.uploadProgress !== null ? (l(), c("div", K, [
+              a(g, {
+                class: "spinner",
+                type: "loader",
+                size: "14"
+              }),
+              m("span", T, d(n.uploadProgress) + "% " + d(t.$t("uploading")), 1)
+            ])) : _("", !0)
+          ]),
+          n.canEdit ? (l(), u(k, {
+            key: 0,
+            position: "is-bottom-left"
+          }, {
+            trigger: r(() => [
+              a(y, {
+                circle: "",
+                type: "none",
+                size: "normal",
+                pattern: "secondary",
+                icon: "more-vertical",
+                class: b({ "opacity-0": !s.isHover })
+              }, null, 8, ["class"])
+            ]),
+            default: r(() => [
+              a(C, {
+                onClick: e[0] || (e[0] = () => {
+                  s.isEditing = !0, t.$nextTick(() => t.$refs.input.focus());
+                })
+              }, {
+                default: r(() => [
+                  p(d(t.$t("change", { thing: t.$t("name") })), 1)
+                ]),
+                _: 1
+              }),
+              a(C, {
+                type: "danger",
+                onClick: e[1] || (e[1] = (o) => t.$emit("remove"))
+              }, {
+                default: r(() => [
+                  p(d(t.$t("remove")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : _("", !0)
+        ], 64))
+      ]),
+      m("div", $, [
+        m("div", q, [
+          a(g, {
+            type: "eye",
+            size: "18"
+          }),
+          p(" " + d(t.$t("_common:show")), 1)
+        ])
+      ])
+    ]),
+    _: 1
+  }, 40, ["href"]);
+}
+const L = /* @__PURE__ */ D(H, [["render", x], ["__scopeId", "data-v-7de2eaf6"]]);
+export {
+  L as default
+};