@kiva/kv-components 10.6.0 → 10.7.0

package/dist/vue/KvIconButton.js

@@ -1,118 +1,4 @@
-import { defineComponent as n, computed as c, openBlock as s, createElementBlock as u, normalizeClass as a, createElementVNode as w, createVNode as m } from "vue";
-import { mdiDotsVertical as f } from "@mdi/js";
-import y from "./KvMaterialIcon.js";
-const b = ["disabled", "aria-pressed"], V = /* @__PURE__ */ n({
-  __name: "KvIconButton",
-  props: {
-    /**
-     * The Material Design Icon path from @mdi/js
-     */
-    icon: {
-      type: String,
-      default: f
-    },
-    /**
-     * Size of the visual button element (touch target is always 44px minimum)
-     * `small (16px), medium (20px), large (24px - default)`
-     */
-    size: {
-      type: String,
-      default: "large",
-      validator(e) {
-        return ["small", "medium", "large"].includes(e);
-      }
-    },
-    /**
-     * Whether to show a border on the button
-     */
-    showBorder: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Border color variant. Only applies when showBorder is true.
-     * `primary, secondary, tertiary`
-     */
-    borderColor: {
-      type: String,
-      default: "tertiary",
-      validator(e) {
-        return ["primary", "secondary", "tertiary"].includes(e);
-      }
-    },
-    /**
-     * Whether to show background on the button
-     * Applies white background with hover and active states
-     */
-    showBackground: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Whether the button is disabled
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Whether the button acts as a toggle (on/off switch)
-     */
-    toggleable: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The toggle state (for v-model support). Only used when toggleable is true.
-     */
-    modelValue: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Icon to display when toggle is active/on. Only used when toggleable is true.
-     */
-    activeIcon: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["click", "update:modelValue"],
-  setup(e, { emit: l }) {
-    const t = e, r = l, i = (o) => {
-      t.disabled || (t.toggleable && r("update:modelValue", !t.modelValue), r("click", o));
-    }, d = c(() => t.toggleable && t.modelValue && t.activeIcon ? t.activeIcon : t.icon);
-    return (o, g) => (s(), u("button", {
-      type: "button",
-      disabled: e.disabled,
-      "aria-pressed": e.toggleable ? e.modelValue : void 0,
-      class: a(["tw-flex tw-items-center tw-justify-center tw-min-w-5.5 tw-min-h-5.5 tw-bg-transparent", {
-        "tw-opacity-low tw-cursor-default": e.disabled
-      }]),
-      onClick: i
-    }, [
-      w("span", {
-        class: a(["tw-flex tw-items-center tw-justify-center tw-transition-colors tw-duration-200 tw-rounded-full", {
-          "tw-w-4 tw-h-4": e.size === "small",
-          "tw-w-5 tw-h-5": e.size === "medium",
-          "tw-w-6 tw-h-6": e.size === "large",
-          "tw-bg-white hover:tw-bg-gray-100 active:tw-bg-gray-200": e.showBackground,
-          "tw-border": e.showBorder,
-          "tw-border-primary": e.showBorder && e.borderColor === "primary",
-          "tw-border-secondary": e.showBorder && e.borderColor === "secondary",
-          "tw-border-tertiary": e.showBorder && e.borderColor === "tertiary"
-        }])
-      }, [
-        m(y, {
-          icon: d.value,
-          class: a({
-            "tw-w-2.5 tw-h-2.5": e.size === "small"
-          })
-        }, null, 8, ["icon", "class"])
-      ], 2)
-    ], 10, b));
-  }
-});
+import f from "./KvIconButton.script.js";
 export {
-  V as default
+  f as default
 };

package/dist/vue/KvIconButton.script.js

@@ -0,0 +1,118 @@
+import { defineComponent as n, computed as c, openBlock as s, createElementBlock as u, normalizeClass as a, createElementVNode as w, createVNode as m } from "vue";
+import { mdiDotsVertical as f } from "@mdi/js";
+import y from "./KvMaterialIcon.js";
+const b = ["disabled", "aria-pressed"], V = /* @__PURE__ */ n({
+  __name: "KvIconButton",
+  props: {
+    /**
+     * The Material Design Icon path from @mdi/js
+     */
+    icon: {
+      type: String,
+      default: f
+    },
+    /**
+     * Size of the visual button element (touch target is always 44px minimum)
+     * `small (16px), medium (20px), large (24px - default)`
+     */
+    size: {
+      type: String,
+      default: "large",
+      validator(e) {
+        return ["small", "medium", "large"].includes(e);
+      }
+    },
+    /**
+     * Whether to show a border on the button
+     */
+    showBorder: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Border color variant. Only applies when showBorder is true.
+     * `primary, secondary, tertiary`
+     */
+    borderColor: {
+      type: String,
+      default: "tertiary",
+      validator(e) {
+        return ["primary", "secondary", "tertiary"].includes(e);
+      }
+    },
+    /**
+     * Whether to show background on the button
+     * Applies white background with hover and active states
+     */
+    showBackground: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the button is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the button acts as a toggle (on/off switch)
+     */
+    toggleable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The toggle state (for v-model support). Only used when toggleable is true.
+     */
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Icon to display when toggle is active/on. Only used when toggleable is true.
+     */
+    activeIcon: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click", "update:modelValue"],
+  setup(e, { emit: l }) {
+    const t = e, r = l, i = (o) => {
+      t.disabled || (t.toggleable && r("update:modelValue", !t.modelValue), r("click", o));
+    }, d = c(() => t.toggleable && t.modelValue && t.activeIcon ? t.activeIcon : t.icon);
+    return (o, g) => (s(), u("button", {
+      type: "button",
+      disabled: e.disabled,
+      "aria-pressed": e.toggleable ? e.modelValue : void 0,
+      class: a(["tw-flex tw-items-center tw-justify-center tw-min-w-5.5 tw-min-h-5.5 tw-bg-transparent", {
+        "tw-opacity-low tw-cursor-default": e.disabled
+      }]),
+      onClick: i
+    }, [
+      w("span", {
+        class: a(["tw-flex tw-items-center tw-justify-center tw-transition-colors tw-duration-200 tw-rounded-full", {
+          "tw-w-4 tw-h-4": e.size === "small",
+          "tw-w-5 tw-h-5": e.size === "medium",
+          "tw-w-6 tw-h-6": e.size === "large",
+          "tw-bg-white hover:tw-bg-gray-100 active:tw-bg-gray-200": e.showBackground,
+          "tw-border": e.showBorder,
+          "tw-border-primary": e.showBorder && e.borderColor === "primary",
+          "tw-border-secondary": e.showBorder && e.borderColor === "secondary",
+          "tw-border-tertiary": e.showBorder && e.borderColor === "tertiary"
+        }])
+      }, [
+        m(y, {
+          icon: d.value,
+          class: a({
+            "tw-w-2.5 tw-h-2.5": e.size === "small"
+          })
+        }, null, 8, ["icon", "class"])
+      ], 2)
+    ], 10, b));
+  }
+});
+export {
+  V as default
+};

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 "./KvImageUpload2.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

@@ -0,0 +1,176 @@
+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: b
+  },
+  props: {
+    /**
+     * URL of an initial image to preview.
+     */
+    imageUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Target crop aspect ratio (width / height). `1` = square, `4 / 3` ≈ 1.333.
+     */
+    aspectRatio: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Preview shape. `square (default), circle`
+     */
+    shape: {
+      type: String,
+      default: "square",
+      validator(a) {
+        return ["square", "circle"].includes(a);
+      }
+    },
+    /**
+     * Maximum allowed file size, in megabytes.
+     */
+    maxSizeMb: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Output resolution used when generating the preview.
+     */
+    maxDimension: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Maximum rendered preview size, in pixels (height; width follows aspectRatio).
+     * Note: the parent element must supply a width; this component sets only
+     * max-width/max-height + aspect-ratio and will not stretch to fill a sizeless container.
+     */
+    previewSize: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * Accepted MIME types for both the file input and validation.
+     */
+    acceptedFileTypes: {
+      type: Array,
+      default: () => [...R]
+    },
+    /**
+     * Whether to show the edit (pencil) affordance in the blank state, before an image is
+     * selected. Off by default. Once an image is present the edit icon always shows
+     * (bottom-right, below the remove icon), regardless of this prop.
+     */
+    showEditIcon: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Alt text for the preview image.
+     */
+    imageAlt: {
+      type: String,
+      default: "Image preview"
+    }
+  },
+  emits: [
+    /**
+     * Emitted with `{ file }` when a valid file is selected or dropped.
+     */
+    "file-uploaded",
+    /**
+     * Emitted when the current image is removed.
+     */
+    "file-removed",
+    /**
+     * Emitted with `{ type, message }` when validation or processing fails.
+     */
+    "file-error"
+  ],
+  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 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 (!t && r) {
+        s("file-error", r);
+        return;
+      }
+      try {
+        n.value = await A(e, {
+          aspectRatio: a.aspectRatio,
+          maxDimension: a.maxDimension
+        }), s("file-uploaded", { file: e });
+      } catch {
+        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: 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 {
+  H as default
+};

package/dist/vue/KvImpactVerticalSelector.js

@@ -1,4 +1,4 @@
-import _ from "./KvImpactVerticalSelector2.js";
+import _ from "./KvImpactVerticalSelector.script.js";
 import { resolveComponent as d, openBlock as s, createElementBlock as n, createElementVNode as l, Fragment as f, renderList as C, createBlock as c, withCtx as g, normalizeClass as i, createCommentVNode as o, toDisplayString as r } from "vue";
 import h from "../_virtual/_plugin-vue_export-helper.js";
 const b = { class: "tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3" }, k = ["alt", "src", "width"], u = { class: "tw-mb-0.5 tw-font-medium" }, v = { class: "tw-text-small" }, x = {

package/dist/vue/KvInlineActivityCard.js

@@ -1,4 +1,4 @@
-import o from "./KvInlineActivityCard2.js";
+import o from "./KvInlineActivityCard.script.js";
 import { resolveComponent as s, openBlock as a, createElementBlock as l, createVNode as d, createElementVNode as r, toDisplayString as c, createTextVNode as i } from "vue";
 import m from "../_virtual/_plugin-vue_export-helper.js";
 const p = { class: "tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-xs tw-bg-white" }, w = { class: "tw-text-base tw-whitespace-nowrap" }, _ = { class: "data-hj-suppress" };

package/dist/vue/KvInlineActivityFeed.js

@@ -1,4 +1,4 @@
-import c from "./KvInlineActivityFeed2.js";
+import c from "./KvInlineActivityFeed.script.js";
 import { resolveComponent as a, openBlock as t, createElementBlock as e, Fragment as l, renderList as s, createBlock as p } from "vue";
 import "./KvInlineActivityFeed.css";
 import d from "../_virtual/_plugin-vue_export-helper.js";