@kiva/kv-components 10.6.1 → 10.7.0

package/dist/vue/KvImageUpload.css

@@ -1 +1 @@
-.image-upload-icon[data-v-ea802cf6]{background-color:#ffffffbf;border-radius:9px;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.image-upload-icon--circle[data-v-ea802cf6]{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}
+.image-upload-icon[data-v-373dd692]{background-color:#ffffffbf;border-radius:9px;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.image-upload-icon--circle[data-v-373dd692]{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}

package/dist/vue/KvImageUpload.js

@@ -1,72 +1,85 @@
-import p from "./KvImageUpload.script.js";
-import { resolveComponent as f, openBlock as i, createElementBlock as n, createElementVNode as a, normalizeStyle as g, normalizeClass as l, renderSlot as b, createVNode as c, withModifiers as w, createCommentVNode as m } from "vue";
+import v from "./KvImageUpload.script.js";
+import { resolveComponent as f, openBlock as t, createElementBlock as r, createElementVNode as i, normalizeStyle as b, normalizeClass as l, renderSlot as c, createVNode as s, toDisplayString as p, withModifiers as m, createCommentVNode as w } from "vue";
 import "./KvImageUpload.css";
-import u from "../_virtual/_plugin-vue_export-helper.js";
-const v = { class: "tw-flex tw-flex-col" }, h = ["src", "alt"], C = ["accept", "aria-label"];
-function k(d, t, s, e, I, _) {
-  const r = f("kv-material-icon");
-  return i(), n("div", v, [
-    a("div", {
-      class: l(["kv-image-upload tw-relative", e.shapeClass]),
-      style: g(e.containerStyle)
+import D from "../_virtual/_plugin-vue_export-helper.js";
+const C = { class: "tw-flex tw-flex-col" }, k = ["src", "alt"], y = { class: "tw-text-label" }, I = ["accept", "aria-label"];
+function h(n, o, d, e, u, O) {
+  const g = f("kv-material-icon");
+  return t(), r("div", C, [
+    i("div", {
+      class: l(["kv-image-upload tw-relative", [e.shapeClass, { "kv-image-upload--dragging": e.isDraggingOver }]]),
+      style: b(e.containerStyle),
+      onDragenter: o[3] || (o[3] = (...a) => e.onDragEnter && e.onDragEnter(...a)),
+      onDragover: o[4] || (o[4] = (...a) => e.onDragOver && e.onDragOver(...a)),
+      onDragleave: o[5] || (o[5] = (...a) => e.onDragLeave && e.onDragLeave(...a)),
+      onDrop: o[6] || (o[6] = (...a) => e.onDrop && e.onDrop(...a))
     }, [
-      e.previewImage ? (i(), n("img", {
+      e.previewImage ? (t(), r("img", {
         key: 0,
         src: e.previewImage,
-        alt: s.imageAlt,
+        alt: d.imageAlt,
         class: l(["tw-w-full tw-h-full tw-object-cover", e.shapeClass])
-      }, null, 10, h)) : b(d.$slots, "fallback-image", { key: 1 }, () => [
-        a("div", {
+      }, null, 10, k)) : c(n.$slots, "fallback-image", {
+        key: 1,
+        isDraggingOver: e.isDraggingOver
+      }, () => [
+        i("div", {
           class: l(["kv-image-upload__placeholder tw-w-full tw-h-full tw-bg-eco-green-1 tw-p-0.5", e.shapeClass])
         }, [
-          a("div", {
-            class: l(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-0.5 tw-w-full tw-h-full tw-border-2 tw-border-dashed tw-border-black", e.shapeClass])
+          i("div", {
+            class: l(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-0.5 tw-w-full tw-h-full tw-border-2 tw-border-dashed", [e.shapeClass, e.isDraggingOver ? "tw-border-action" : "tw-border-black"]])
           }, [
-            c(r, {
+            s(g, {
               icon: e.mdiCameraPlusOutline,
               class: "tw-w-3.5"
             }, null, 8, ["icon"]),
-            t[3] || (t[3] = a("span", { class: "tw-text-label" }, " Add a photo ", -1))
+            i("span", y, p(e.isDraggingOver ? "Drop to upload" : "Add a photo"), 1)
           ], 2)
         ], 2)
       ], !0),
-      a("input", {
+      i("input", {
         ref: "fileInput",
         type: "file",
         accept: e.acceptAttr,
         "aria-label": e.inputLabel,
         class: "tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",
-        onChange: t[0] || (t[0] = (...o) => e.handleFileChange && e.handleFileChange(...o))
-      }, null, 40, C),
-      e.previewImage || s.showEditIcon ? (i(), n("button", {
+        onChange: o[0] || (o[0] = (...a) => e.handleFileChange && e.handleFileChange(...a))
+      }, null, 40, I),
+      e.previewImage || d.showEditIcon ? (t(), r("button", {
         key: 2,
-        class: l(["image-upload-icon edit-icon tw-absolute tw-bottom-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        class: l(["image-upload-icon edit-icon tw-absolute tw-bottom-1 tw-right-1 tw-p-1 tw-z-1", { "image-upload-icon--circle": e.isCircle }]),
         type: "button",
         "aria-hidden": "true",
         tabindex: "-1",
-        onClick: t[1] || (t[1] = w((...o) => e.openFileInput && e.openFileInput(...o), ["stop"]))
+        onClick: o[1] || (o[1] = m((...a) => e.openFileInput && e.openFileInput(...a), ["stop"]))
       }, [
-        c(r, {
+        s(g, {
           icon: e.mdiPencil,
           class: "tw-w-2"
         }, null, 8, ["icon"])
-      ], 2)) : m("", !0),
-      e.previewImage ? (i(), n("button", {
+      ], 2)) : w("", !0),
+      e.previewImage ? (t(), r("button", {
         key: 3,
-        class: l(["image-upload-icon remove-icon tw-absolute tw-top-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        class: l(["image-upload-icon remove-icon tw-absolute tw-top-1 tw-right-1 tw-p-1 tw-z-1", { "image-upload-icon--circle": e.isCircle }]),
         type: "button",
         "aria-label": "Remove Image",
-        onClick: t[2] || (t[2] = w((...o) => e.removeImage && e.removeImage(...o), ["stop"]))
+        onClick: o[2] || (o[2] = m((...a) => e.removeImage && e.removeImage(...a), ["stop"]))
       }, [
-        c(r, {
+        s(g, {
           icon: e.mdiClose,
           class: "tw-w-2"
         }, null, 8, ["icon"])
-      ], 2)) : m("", !0)
-    ], 6)
+      ], 2)) : w("", !0),
+      e.isDraggingOver && e.previewImage && n.$slots["drag-overlay"] ? (t(), r("div", {
+        key: 4,
+        class: l(["tw-absolute tw-inset-0 tw-z-2 tw-pointer-events-none", e.shapeClass])
+      }, [
+        c(n.$slots, "drag-overlay", {}, void 0, !0)
+      ], 2)) : w("", !0)
+    ], 38)
   ]);
 }
-const A = /* @__PURE__ */ u(p, [["render", k], ["__scopeId", "data-v-ea802cf6"]]);
+const F = /* @__PURE__ */ D(v, [["render", h], ["__scopeId", "data-v-373dd692"]]);
 export {
-  A as default
+  F as default
 };

package/dist/vue/KvImageUpload.script.js

@@ -1,10 +1,10 @@
-import { toRefs as S, ref as u, watch as x, computed as l } from "vue";
-import { mdiCameraPlusOutline as F, mdiClose as w, mdiPencil as I } from "@mdi/js";
-import C from "./KvMaterialIcon.js";
-import { DEFAULT_ACCEPTED_IMAGE_TYPES as b, validateImageFile as R, cropResizeImageToDataUrl as T } from "../utils/imageUtils.js";
-const U = {
+import { toRefs as T, ref as f, watch as w, computed as o } from "vue";
+import { mdiCameraPlusOutline as E, mdiClose as I, mdiPencil as C } from "@mdi/js";
+import b from "./KvMaterialIcon.js";
+import { DEFAULT_ACCEPTED_IMAGE_TYPES as R, validateImageFile as z, cropResizeImageToDataUrl as A } from "../utils/imageUtils.js";
+const H = {
   components: {
-    KvMaterialIcon: C
+    KvMaterialIcon: b
   },
   props: {
     /**
@@ -27,8 +27,8 @@ const U = {
     shape: {
       type: String,
       default: "square",
-      validator(e) {
-        return ["square", "circle"].includes(e);
+      validator(a) {
+        return ["square", "circle"].includes(a);
       }
     },
     /**
@@ -59,7 +59,7 @@ const U = {
      */
     acceptedFileTypes: {
       type: Array,
-      default: () => [...b]
+      default: () => [...R]
     },
     /**
      * Whether to show the edit (pencil) affordance in the blank state, before an image is
@@ -92,59 +92,85 @@ const U = {
      */
     "file-error"
   ],
-  setup(e, { emit: r }) {
-    const { imageUrl: c } = S(e), a = u(c.value || ""), s = u(null);
-    x(c, (t) => {
-      a.value = t || "";
+  setup(a, { emit: s }) {
+    const { imageUrl: d } = T(a), n = f(d.value || ""), m = f(null), c = f(!1);
+    let l = 0;
+    w(d, (e) => {
+      n.value = e || "";
     });
-    const m = l(() => e.shape === "circle"), d = l(() => m.value ? "tw-rounded-full" : "tw-rounded"), p = l(() => e.acceptedFileTypes.join(",")), f = l(() => a.value ? "Change image" : "Upload image"), g = l(() => ({
-      aspectRatio: String(e.aspectRatio),
-      maxHeight: `${e.previewSize}px`,
-      maxWidth: `${e.previewSize * e.aspectRatio}px`
-    })), v = () => {
-      var t;
-      (t = s.value) == null || t.click();
-    }, y = () => {
-      a.value = "", r("file-removed");
-    }, h = async (t) => {
-      const { valid: o, error: i } = R(t, {
-        maxSizeMb: e.maxSizeMb,
-        acceptedFileTypes: e.acceptedFileTypes
+    const p = o(() => a.shape === "circle"), v = o(() => p.value ? "tw-rounded-full" : "tw-rounded"), y = o(() => a.acceptedFileTypes.join(",")), D = o(() => n.value ? "Change image" : "Upload image"), h = o(() => ({
+      aspectRatio: String(a.aspectRatio),
+      maxHeight: `${a.previewSize}px`,
+      maxWidth: `${a.previewSize * a.aspectRatio}px`
+    })), x = () => {
+      var e;
+      (e = m.value) == null || e.click();
+    }, F = () => {
+      n.value = "", s("file-removed");
+    }, g = async (e) => {
+      const { valid: t, error: r } = z(e, {
+        maxSizeMb: a.maxSizeMb,
+        acceptedFileTypes: a.acceptedFileTypes
       });
-      if (!o && i) {
-        r("file-error", i);
+      if (!t && r) {
+        s("file-error", r);
         return;
       }
       try {
-        a.value = await T(t, {
-          aspectRatio: e.aspectRatio,
-          maxDimension: e.maxDimension
-        }), r("file-uploaded", { file: t });
+        n.value = await A(e, {
+          aspectRatio: a.aspectRatio,
+          maxDimension: a.maxDimension
+        }), s("file-uploaded", { file: e });
       } catch {
-        r("file-error", { type: "other", message: "Failed to read file" });
+        s("file-error", { type: "other", message: "Failed to read file" });
       }
+    }, S = (e) => {
+      var i;
+      const t = e.target, r = (i = t.files) == null ? void 0 : i[0];
+      r && (g(r), t.value = "");
+    }, u = (e) => {
+      var t;
+      return Array.from(((t = e.dataTransfer) == null ? void 0 : t.types) ?? []).includes("Files");
     };
     return {
-      mdiPencil: I,
-      mdiClose: w,
-      mdiCameraPlusOutline: F,
-      fileInput: s,
-      previewImage: a,
-      isCircle: m,
-      shapeClass: d,
-      acceptAttr: p,
-      inputLabel: f,
-      containerStyle: g,
-      openFileInput: v,
-      removeImage: y,
-      handleFileChange: (t) => {
-        var n;
-        const o = t.target, i = (n = o.files) == null ? void 0 : n[0];
-        i && (h(i), o.value = "");
+      mdiPencil: C,
+      mdiClose: I,
+      mdiCameraPlusOutline: E,
+      fileInput: m,
+      previewImage: n,
+      isCircle: p,
+      isDraggingOver: c,
+      shapeClass: v,
+      acceptAttr: y,
+      inputLabel: D,
+      containerStyle: h,
+      openFileInput: x,
+      removeImage: F,
+      handleFileChange: S,
+      onDragEnter: (e) => {
+        u(e) && (l += 1, c.value = !0);
+      },
+      onDragOver: (e) => {
+        if (!u(e))
+          return;
+        e.preventDefault();
+        const { dataTransfer: t } = e;
+        t && (t.dropEffect = "copy");
+      },
+      onDragLeave: (e) => {
+        u(e) && (l = Math.max(0, l - 1), l === 0 && (c.value = !1));
+      },
+      onDrop: (e) => {
+        var r, i;
+        if (!u(e))
+          return;
+        e.preventDefault(), l = 0, c.value = !1;
+        const t = (i = (r = e.dataTransfer) == null ? void 0 : r.files) == null ? void 0 : i[0];
+        t && g(t);
       }
     };
   }
 };
 export {
-  U as default
+  H as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "10.6.1",
+  "version": "10.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -116,5 +116,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "a55163da474c53d2958af25e6b68684b3f1922db"
+  "gitHead": "23f2971b14728c8457a2e3bccd9e57c50fb016d1"
 }