@stachelock/ui 0.6.2 → 0.6.4

package/dist/AvatarIcon-kcEI0AWe.js

@@ -0,0 +1,4 @@
+import { AvatarIcon as o } from "./index.js";
+export {
+  o as default
+};

package/dist/AvatarImage-YFR2etb8.js

@@ -0,0 +1,4 @@
+import { AvatarImage as m } from "./index.js";
+export {
+  m as default
+};

package/dist/AvatarInitials-B7wCnBX9.js

@@ -0,0 +1,4 @@
+import { AvatarInitials as t } from "./index.js";
+export {
+  t as default
+};

package/dist/ImageDropzoneInput.vue_vue_type_script_setup_true_lang-7JWDfxD2.js

@@ -0,0 +1,393 @@
+import { defineComponent as G, ref as p, computed as F, onMounted as H, watch as J, createElementBlock as u, openBlock as r, createCommentVNode as f, withDirectives as v, toDisplayString as y, createElementVNode as o, normalizeClass as A, createVNode as b, withCtx as R, renderSlot as K, vShow as x, Fragment as Q, renderList as Z, mergeProps as E, unref as $, createBlock as w } from "vue";
+import { XCircleIcon as ee, PhotoIcon as B } from "@heroicons/vue/24/solid";
+import { _ as N } from "./FileDropzoneInput.vue_vue_type_script_setup_true_lang-BJR-_ngq.js";
+import I from "./components/CloudinaryImage.js";
+import O from "./components/LoadingDots.js";
+const le = { class: "sl-space-y-2" }, se = {
+  key: 0,
+  class: "sl-grid sl-grid-cols-3 sl-items-center"
+}, te = {
+  key: 0,
+  for: "dropzone-file",
+  class: "sl-text-sm sl-col-span-2 sl-text-gray-700 dark:sl-text-gray-200"
+}, ae = {
+  key: 1,
+  class: "sl-text-xs sl-text-gray-400 dark:sl-text-gray-500 sl-col-start-3 sl-text-right"
+}, re = {
+  key: 2,
+  class: "sl-text-xs sl-uppercase sl-text-gray-500 dark:sl-text-gray-400 sl-truncate sl-text-right sl-font-semibold sl-justify-self-end sl-col-start-3"
+}, oe = { class: "sl-w-full" }, ie = ["onClick"], ne = { class: "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-z-10 sl-bg-black sl-bg-opacity-50 sl-transition-opacity sl-duration-200" }, ue = { class: "sl-absolute sl-inset-0 sl-z-30 sl-flex sl-items-center sl-justify-center sl-bg-primary-50 dark:sl-bg-primary-900/30 sl-bg-opacity-95 sl-border-2 sl-border-dashed sl-border-primary-400 sl-rounded-lg sl-transition-opacity sl-duration-200" }, de = { class: "sl-text-center" }, ce = { class: "sl-mt-2 sl-text-sm sl-font-medium sl-text-primary-600 dark:sl-text-primary-400" }, fe = { class: "sl-w-full" }, me = { key: 2 }, ge = { class: "sl-flex sl-items-center sl-p-4 sl-bg-gray-50 dark:sl-bg-slate-800 sl-rounded-lg" }, pe = { class: "sl-flex-shrink-0" }, ye = {
+  key: 1,
+  class: "sl-h-16 sl-w-16 sl-rounded-full sl-bg-gray-200 dark:sl-bg-slate-700 sl-flex sl-items-center sl-justify-center"
+}, ve = { class: "sl-ml-4 sl-text-left" }, be = { class: "sl-text-sm sl-font-medium sl-text-gray-700 dark:sl-text-gray-200" }, xe = { class: "sl-text-xs sl-text-gray-500 dark:sl-text-gray-400" }, he = { class: "sl-absolute sl-inset-2 sl-z-20 sl-flex sl-items-center sl-justify-center sl-bg-gray-50 dark:sl-bg-slate-800 sl-bg-opacity-95 sl-text-gray-600 dark:sl-text-gray-300 sl-transition-opacity sl-duration-200 sl-rounded-md" }, ke = { class: "sl-absolute sl-inset-x-0 sl-top-0 sl-bottom-1 sl-z-20 sl-flex sl-items-center sl-justify-center sl-bg-gray-50 dark:sl-bg-slate-800 sl-bg-opacity-95 sl-text-gray-600 dark:sl-text-gray-300 sl-transition-opacity sl-duration-200 sl-rounded-lg" }, we = { class: "sl-absolute sl-inset-0 sl-z-30 sl-flex sl-items-center sl-justify-center sl-bg-primary-50 dark:sl-bg-primary-900/30 sl-bg-opacity-95 sl-border-2 sl-border-dashed sl-border-primary-400 sl-rounded-lg sl-transition-opacity sl-duration-200" }, De = { class: "sl-text-center" }, ze = { class: "sl-mt-2 sl-text-sm sl-font-medium sl-text-primary-600 dark:sl-text-primary-400" }, je = {
+  key: 3,
+  class: "sl-mt-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400"
+}, Ue = /* @__PURE__ */ G({
+  __name: "ImageDropzoneInput",
+  props: {
+    /** Current image value(s) */
+    modelValue: {
+      type: [Array, Object, null],
+      default: null
+    },
+    /** Field name for form integration */
+    name: {
+      type: String,
+      required: !0
+    },
+    /** Label text */
+    label: {
+      type: String,
+      default: ""
+    },
+    /** Tertiary label (right-aligned) */
+    tertiaryLabel: {
+      type: String,
+      default: ""
+    },
+    /** Image corner rounding style */
+    imageRounded: {
+      type: String,
+      default: "rounded-full"
+    },
+    /** Preset type for upload configuration */
+    presetType: {
+      type: String,
+      default: "photos"
+    },
+    /** Allow multiple file uploads */
+    enableMultiple: {
+      type: Boolean,
+      default: !1
+    },
+    /** Accepted MIME types */
+    acceptedFormats: {
+      type: Array,
+      default: () => ["image/jpeg", "image/png", "image/gif", "image/webp"]
+    },
+    /** Maximum file size in MB */
+    maximumFileSize: {
+      type: Number,
+      default: 10
+    },
+    /** Display as avatar style */
+    isAvatar: {
+      type: Boolean,
+      default: !0
+    },
+    /** Additional props for CloudinaryImage */
+    cloudinaryImageProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /** Use full screen height */
+    fullSize: {
+      type: Boolean,
+      default: !1
+    },
+    /** Delete file from Cloudinary on clear */
+    deleteFileFromCloudinary: {
+      type: Boolean,
+      default: !0
+    },
+    /** Show validation errors */
+    showErrors: {
+      type: Boolean,
+      default: !1
+    },
+    /** Disable the input */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** Message to show when disabled */
+    disabledMessage: {
+      type: String,
+      default: ""
+    },
+    /** Show colorful validation states */
+    colorfulValidation: {
+      type: Boolean,
+      default: !0
+    },
+    /** Project ID for upload context */
+    projectId: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Upload handler - must be provided by consuming package
+     * @param file - File to upload
+     * @param presetType - Preset type for configuration
+     * @param projectId - Project context
+     * @returns CloudinaryAsset
+     */
+    onUpload: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * Delete handler - called when clearing an image
+     * @param publicId - Cloudinary public_id to delete
+     */
+    onDelete: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * Check if uploading is allowed (e.g., for demo mode)
+     * @returns boolean - true if upload should be blocked
+     */
+    onBeforeUpload: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "update:media", "clear:media"],
+  setup(t, { expose: q, emit: W }) {
+    const s = t, D = W, a = p([]), i = p("empty"), m = p(!1), h = p(!1), k = p(!1), d = p(!1), z = p(""), j = p(!1), M = p(!0), S = F(() => s.disabled || h.value), X = F(() => i.value === "loading" ? "Please be patient while we upload your file" : i.value === "uploaded" && a.value[0]?.created_at ? `Uploaded ${new Date(a.value[0].created_at).toLocaleDateString()}` : "Click to replace"), Y = F(() => {
+      if (!a.value[0]?.original_file_name) return "Image";
+      const e = a.value[0].original_file_name, l = 20;
+      if (e.length <= l) return e;
+      const n = e.lastIndexOf("."), g = n !== -1 ? e.substring(n) : "";
+      return (n !== -1 ? e.substring(0, n) : e).substring(0, l - 3 - g.length) + "..." + g;
+    }), V = F(() => {
+      const e = "sl-border-2 sl-border-dashed sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset focus-within:sl-ring-primary-600 sl-transition-all sl-duration-200";
+      return !s.colorfulValidation || !j.value && !s.showErrors ? `${e} sl-border-gray-300 dark:sl-border-slate-600 sl-ring-gray-300 dark:sl-ring-slate-600` : M.value && j.value && s.colorfulValidation ? `${e} sl-border-green-500 sl-ring-green-500` : !M.value && s.colorfulValidation && (j.value || s.showErrors) ? `${e} sl-border-red-500 sl-ring-red-500` : `${e} sl-border-gray-300 dark:sl-border-slate-600 sl-ring-gray-300 dark:sl-ring-slate-600`;
+    }), U = async (e) => {
+      if (!(s.onBeforeUpload && s.onBeforeUpload()))
+        try {
+          h.value = !0, j.value = !0, z.value = "";
+          const l = Array.from(e), n = s.enableMultiple ? l : [l[0]];
+          for (const g of n) {
+            i.value = "loading";
+            try {
+              const c = await s.onUpload(g, s.presetType, s.projectId);
+              if (c) {
+                s.enableMultiple ? a.value.push(c) : a.value = [c], i.value = "uploaded", M.value = !0, D("update:modelValue", s.enableMultiple ? a.value : a.value[0]);
+                const L = {
+                  cloudinaryAsset: c,
+                  presetType: s.presetType,
+                  projectId: s.projectId
+                };
+                D("update:media", L);
+              } else
+                throw new Error("Upload failed - no response");
+            } catch (c) {
+              console.error("Upload error:", c), z.value = c.message || "Upload failed", i.value = "error", M.value = !1;
+            }
+          }
+        } catch (l) {
+          console.error(l);
+        } finally {
+          h.value = !1;
+        }
+    }, T = (e) => {
+      e.preventDefault(), e.stopPropagation(), e.dataTransfer?.types?.includes("Files") && (k.value = !0);
+    }, P = (e) => {
+      e.preventDefault(), e.stopPropagation();
+      const l = e.currentTarget.getBoundingClientRect(), n = e.clientX, g = e.clientY;
+      (n < l.left || n > l.right || g < l.top || g > l.bottom) && (k.value = !1);
+    }, _ = async (e) => {
+      if (e.preventDefault(), e.stopPropagation(), k.value = !1, d.value = !0, e.dataTransfer?.files && e.dataTransfer.files.length > 0)
+        try {
+          await U(e.dataTransfer.files);
+        } finally {
+          d.value = !1;
+        }
+      else
+        d.value = !1;
+    }, C = async (e) => {
+      try {
+        h.value = !0, e && s.deleteFileFromCloudinary && s.onDelete && await s.onDelete(e), e && D("clear:media", e);
+      } catch (l) {
+        console.error(l);
+      } finally {
+        i.value = "empty", a.value = [], h.value = !1, D("update:modelValue", null);
+      }
+    };
+    return H(() => {
+      s.modelValue && (a.value = Array.isArray(s.modelValue) ? s.modelValue : [s.modelValue], i.value = "inherited");
+    }), J(
+      () => s.modelValue,
+      (e) => {
+        e ? (a.value = Array.isArray(e) ? e : [e], i.value = "inherited") : (i.value = "empty", a.value = []);
+      },
+      { immediate: !0 }
+    ), q({
+      clearImage: C,
+      imageInputStatus: i,
+      uploadResponse: a
+    }), (e, l) => (r(), u("div", le, [
+      t.label || t.tertiaryLabel ? (r(), u("div", se, [
+        t.label ? (r(), u("label", te, y(t.label), 1)) : f("", !0),
+        S.value && t.disabledMessage ? (r(), u("p", ae, y(t.disabledMessage), 1)) : f("", !0),
+        t.tertiaryLabel && !S.value ? (r(), u("span", re, y(t.tertiaryLabel), 1)) : f("", !0)
+      ])) : f("", !0),
+      v(o("div", {
+        class: A(["sl-flex sl-items-center sl-justify-center sl-w-full", { "sl-h-screen": t.fullSize, "sl-mt-2": t.label }])
+      }, [
+        o("div", oe, [
+          b(N, {
+            "enable-multiple": t.enableMultiple,
+            "onUpdate:files": U,
+            "accepted-formats": t.acceptedFormats,
+            "maximum-file-size": t.maximumFileSize,
+            disabled: S.value,
+            "ring-classes": V.value,
+            height: "md"
+          }, {
+            default: R(() => [
+              K(e.$slots, "empty-state", {}, () => [
+                l[8] || (l[8] = o("p", { class: "sl-text-sm sl-text-gray-500 dark:sl-text-gray-400" }, " Click to upload or drag and drop your files here. ", -1))
+              ])
+            ]),
+            _: 3
+          }, 8, ["enable-multiple", "accepted-formats", "maximum-file-size", "disabled", "ring-classes"])
+        ])
+      ], 2), [
+        [x, i.value === "empty"]
+      ]),
+      a.value && Array.isArray(a.value) && a.value.length > 1 ? (r(), u("div", {
+        key: 1,
+        class: A(["sl-flex sl-flex-wrap sl--mx-2", { "sl-mt-2": t.label }])
+      }, [
+        (r(!0), u(Q, null, Z(a.value, (n, g) => (r(), u("div", {
+          key: g,
+          class: "sl-p-2 sl-relative sl-group",
+          onDragover: T,
+          onDragleave: P,
+          onDrop: _
+        }, [
+          o("button", {
+            type: "button",
+            onClick: (c) => C(n.public_id),
+            onMouseenter: l[0] || (l[0] = (c) => m.value = !0),
+            onMouseleave: l[1] || (l[1] = (c) => m.value = !1),
+            class: "sl-relative sl-rounded-lg sl-overflow-hidden focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-primary-500",
+            "aria-label": "Remove image"
+          }, [
+            b(I, E({
+              "public-id": n.public_id
+            }, { ref_for: !0 }, t.cloudinaryImageProps, { class: "sl-transition-transform sl-duration-200 group-hover:sl-scale-105 sl-w-full sl-h-full sl-object-cover" }), null, 16, ["public-id"]),
+            v(o("span", ne, [
+              b($(ee), { class: "sl-h-10 sl-w-10 sl-text-red-600" })
+            ], 512), [
+              [x, m.value]
+            ])
+          ], 40, ie),
+          v(o("div", ue, [
+            o("div", de, [
+              d.value ? f("", !0) : (r(), w($(B), {
+                key: 0,
+                class: "sl-mx-auto sl-h-12 sl-w-12 sl-text-primary-400"
+              })),
+              d.value ? (r(), w(O, {
+                key: 1,
+                size: "sm"
+              })) : f("", !0),
+              o("p", ce, y(d.value ? "Uploading..." : "Drop to replace"), 1)
+            ])
+          ], 512), [
+            [x, k.value || d.value]
+          ])
+        ], 32))), 128)),
+        i.value === "uploaded" && t.enableMultiple ? (r(), u("div", {
+          key: 0,
+          class: A(["sl-flex sl-items-center sl-justify-center sl-w-full", { "sl-h-screen": t.fullSize }])
+        }, [
+          o("div", fe, [
+            b(N, {
+              "enable-multiple": t.enableMultiple,
+              "onUpdate:files": U,
+              "accepted-formats": t.acceptedFormats,
+              "maximum-file-size": t.maximumFileSize,
+              disabled: S.value,
+              "ring-classes": V.value,
+              height: "sm"
+            }, {
+              default: R(() => [...l[9] || (l[9] = [
+                o("p", { class: "sl-text-sm sl-text-gray-500 dark:sl-text-gray-400" }, "Add more images", -1)
+              ])]),
+              _: 1
+            }, 8, ["enable-multiple", "accepted-formats", "maximum-file-size", "disabled", "ring-classes"])
+          ])
+        ], 2)) : f("", !0)
+      ], 2)) : (r(), u("div", me, [
+        i.value === "uploaded" || i.value === "loading" || i.value === "inherited" ? (r(), u("div", {
+          key: 0,
+          class: "sl-relative sl-mt-2",
+          onDragover: T,
+          onDragleave: P,
+          onDrop: _
+        }, [
+          t.isAvatar ? (r(), u("button", {
+            key: 0,
+            type: "button",
+            onClick: l[2] || (l[2] = (n) => C(a.value[0]?.public_id)),
+            onMouseenter: l[3] || (l[3] = (n) => m.value = !0),
+            onMouseleave: l[4] || (l[4] = (n) => m.value = !1),
+            class: "sl-w-full focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-primary-600 focus:sl-ring-offset-2 sl-rounded-lg sl-overflow-hidden sl-transition-all sl-duration-200",
+            "aria-label": "Replace avatar"
+          }, [
+            o("div", ge, [
+              o("div", pe, [
+                a.value[0]?.public_id && i.value !== "loading" ? (r(), w(I, {
+                  key: 0,
+                  "public-id": a.value[0].public_id,
+                  width: 64,
+                  height: 64,
+                  class: "sl-h-16 sl-w-16 sl-rounded-full sl-object-cover",
+                  skeleton: "user"
+                }, null, 8, ["public-id"])) : (r(), u("div", ye, [
+                  b($(B), { class: "sl-h-8 sl-w-8 sl-text-gray-400 dark:sl-text-gray-500" })
+                ]))
+              ]),
+              o("div", ve, [
+                o("p", be, y(i.value === "loading" ? "Uploading..." : Y.value), 1),
+                o("p", xe, y(i.value === "loading" ? "Please wait..." : X.value), 1)
+              ])
+            ]),
+            v(o("span", he, " Replace ", 512), [
+              [x, m.value]
+            ])
+          ], 32)) : (r(), u("button", {
+            key: 1,
+            type: "button",
+            onClick: l[5] || (l[5] = (n) => C(a.value[0]?.public_id)),
+            onMouseenter: l[6] || (l[6] = (n) => m.value = !0),
+            onMouseleave: l[7] || (l[7] = (n) => m.value = !1),
+            class: "sl-w-full focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-primary-600 focus:sl-ring-offset-2 sl-rounded-lg sl-overflow-hidden sl-transition-all sl-duration-200",
+            "aria-label": "Replace image"
+          }, [
+            b(I, E({
+              "public-id": a.value[0]?.public_id
+            }, t.cloudinaryImageProps, { class: "sl-transition-transform sl-duration-200 group-hover:sl-scale-105 sl-w-full sl-h-full sl-object-cover" }), null, 16, ["public-id"]),
+            v(o("span", ke, " Replace ", 512), [
+              [x, m.value]
+            ])
+          ], 32)),
+          v(o("div", we, [
+            o("div", De, [
+              d.value ? f("", !0) : (r(), w($(B), {
+                key: 0,
+                class: "sl-mx-auto sl-h-12 sl-w-12 sl-text-primary-400"
+              })),
+              d.value ? (r(), w(O, {
+                key: 1,
+                size: "sm"
+              })) : f("", !0),
+              o("p", ze, y(d.value ? "Uploading..." : "Drop to replace"), 1)
+            ])
+          ], 512), [
+            [x, k.value || d.value]
+          ])
+        ], 32)) : f("", !0)
+      ])),
+      z.value ? (r(), u("p", je, y(z.value), 1)) : f("", !0)
+    ]));
+  }
+});
+export {
+  Ue as _
+};