vue3-picture-input/dist/vue3-picture-input.js

This is a simple input for pictures

import { ssrUtils as m, initDirectivesForSSR as G, ref as $, watch as X, computed as Z, mergeProps as Q, useSSRContext as v } from "vue";
/**
* @vue/shared v3.5.13
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/
/*! #__NO_SIDE_EFFECTS__ */
// @__NO_SIDE_EFFECTS__
function x(e) {
  const t = /* @__PURE__ */ Object.create(null);
  for (const n of e.split(",")) t[n] = 1;
  return (n) => n in t;
}
const ee = process.env.NODE_ENV !== "production" ? Object.freeze({}) : {};
process.env.NODE_ENV !== "production" && Object.freeze([]);
const te = () => {
}, ne = (e) => e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && // uppercase letter
(e.charCodeAt(2) > 122 || e.charCodeAt(2) < 97), h = Array.isArray, re = (e) => C(e) === "[object Map]", oe = (e) => C(e) === "[object Set]", R = (e) => typeof e == "function", a = (e) => typeof e == "string", D = (e) => typeof e == "symbol", y = (e) => e !== null && typeof e == "object", j = Object.prototype.toString, C = (e) => j.call(e), ie = (e) => C(e) === "[object Object]", se = (e) => {
  const t = /* @__PURE__ */ Object.create(null);
  return (n) => t[n] || (t[n] = e(n));
}, ce = /\B([A-Z])/g, ae = se(
  (e) => e.replace(ce, "-$1").toLowerCase()
);
let V;
const ue = () => V || (V = typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : typeof window < "u" ? window : typeof global < "u" ? global : {});
function I(e) {
  if (h(e)) {
    const t = {};
    for (let n = 0; n < e.length; n++) {
      const r = e[n], o = a(r) ? pe(r) : I(r);
      if (o)
        for (const i in o)
          t[i] = o[i];
    }
    return t;
  } else if (a(e) || y(e))
    return e;
}
const le = /;(?![^(]*\))/g, fe = /:([^]+)/, de = /\/\*[^]*?\*\//g;
function pe(e) {
  const t = {};
  return e.replace(de, "").split(le).forEach((n) => {
    if (n) {
      const r = n.split(fe);
      r.length > 1 && (t[r[0].trim()] = r[1].trim());
    }
  }), t;
}
function ge(e) {
  if (!e) return "";
  if (a(e)) return e;
  let t = "";
  for (const n in e) {
    const r = e[n];
    if (a(r) || typeof r == "number") {
      const o = n.startsWith("--") ? n : ae(n);
      t += `${o}:${r};`;
    }
  }
  return t;
}
function z(e) {
  let t = "";
  if (a(e))
    t = e;
  else if (h(e))
    for (let n = 0; n < e.length; n++) {
      const r = z(e[n]);
      r && (t += r + " ");
    }
  else if (y(e))
    for (const n in e)
      e[n] && (t += n + " ");
  return t.trim();
}
const me = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly", he = /* @__PURE__ */ x(
  me + ",async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected"
);
function H(e) {
  return !!e || e === "";
}
const ye = /[>/="'\u0009\u000a\u000c\u0020]/, E = {};
function Se(e) {
  if (E.hasOwnProperty(e))
    return E[e];
  const t = ye.test(e);
  return t && console.error(`unsafe attribute name: ${e}`), E[e] = !t;
}
const be = {
  acceptCharset: "accept-charset",
  className: "class",
  htmlFor: "for",
  httpEquiv: "http-equiv"
};
function P(e) {
  if (e == null)
    return !1;
  const t = typeof e;
  return t === "string" || t === "number" || t === "boolean";
}
const $e = /["'&<>]/;
function f(e) {
  const t = "" + e, n = $e.exec(t);
  if (!n)
    return t;
  let r = "", o, i, s = 0;
  for (i = n.index; i < t.length; i++) {
    switch (t.charCodeAt(i)) {
      case 34:
        o = "&quot;";
        break;
      case 38:
        o = "&amp;";
        break;
      case 39:
        o = "&#39;";
        break;
      case 60:
        o = "&lt;";
        break;
      case 62:
        o = "&gt;";
        break;
      default:
        continue;
    }
    s !== i && (r += t.slice(s, i)), s = i + 1, r += o;
  }
  return s !== i ? r + t.slice(s, i) : r;
}
const B = (e) => !!(e && e.__v_isRef === !0), L = (e) => a(e) ? e : e == null ? "" : h(e) || y(e) && (e.toString === j || !R(e.toString)) ? B(e) ? L(e.value) : JSON.stringify(e, U, 2) : String(e), U = (e, t) => B(t) ? U(e, t.value) : re(t) ? {
  [`Map(${t.size})`]: [...t.entries()].reduce(
    (n, [r, o], i) => (n[O(r, i) + " =>"] = o, n),
    {}
  )
} : oe(t) ? {
  [`Set(${t.size})`]: [...t.values()].map((n) => O(n))
} : D(t) ? O(t) : y(t) && !h(t) && !ie(t) ? String(t) : t, O = (e, t = "") => {
  var n;
  return (
    // Symbol.description in es2019+ so we need to cast here to pass
    // the lib: es2016 check
    D(e) ? `Symbol(${(n = e.description) != null ? n : t})` : e
  );
};
/**
* @vue/server-renderer v3.5.13
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/
const Ee = /* @__PURE__ */ x(
  ",key,ref,innerHTML,textContent,ref_key,ref_for"
);
function Oe(e, t) {
  let n = "";
  for (const r in e) {
    if (Ee(r) || ne(r) || t === "textarea")
      continue;
    const o = e[r];
    r === "class" ? n += ` class="${M(o)}"` : r === "style" ? n += ` style="${d(o)}"` : r === "className" ? n += ` class="${String(o)}"` : n += _e(r, o);
  }
  return n;
}
function _e(e, t, n) {
  if (!P(t))
    return "";
  const r = be[e] || e.toLowerCase();
  return he(r) ? H(t) ? ` ${r}` : "" : Se(r) ? t === "" ? ` ${r}` : ` ${r}="${f(t)}"` : (console.warn(
    `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${r}`
  ), "");
}
function A(e, t) {
  return P(t) ? ` ${e}="${f(t)}"` : "";
}
function M(e) {
  return f(z(e));
}
function d(e) {
  if (!e)
    return "";
  if (a(e))
    return f(e);
  const t = I(e);
  return f(ge(t));
}
const { ensureValidVNode: Pe } = m;
function Ne(e) {
  return f(L(e));
}
Symbol(
  process.env.NODE_ENV !== "production" ? "Object iterate" : ""
);
Symbol(
  process.env.NODE_ENV !== "production" ? "Map keys iterate" : ""
);
Symbol(
  process.env.NODE_ENV !== "production" ? "Array iterate" : ""
);
function N(e) {
  const t = e && e.__v_raw;
  return t ? N(t) : e;
}
function Re(e) {
  return e ? e.__v_isRef === !0 : !1;
}
const u = [];
function Ce(e) {
  u.push(e);
}
function ke() {
  u.pop();
}
let _ = !1;
function W(e, ...t) {
  if (_) return;
  _ = !0;
  const n = u.length ? u[u.length - 1].component : null, r = n && n.appContext.config.warnHandler, o = we();
  if (r)
    F(
      r,
      n,
      11,
      [
        // eslint-disable-next-line no-restricted-syntax
        e + t.map((i) => {
          var s, c;
          return (c = (s = i.toString) == null ? void 0 : s.call(i)) != null ? c : JSON.stringify(i);
        }).join(""),
        n && n.proxy,
        o.map(
          ({ vnode: i }) => `at <${J(n, i.type)}>`
        ).join(`
`),
        o
      ]
    );
  else {
    const i = [`[Vue warn]: ${e}`, ...t];
    o.length && i.push(`
`, ...Ve(o)), console.warn(...i);
  }
  _ = !1;
}
function we() {
  let e = u[u.length - 1];
  if (!e)
    return [];
  const t = [];
  for (; e; ) {
    const n = t[0];
    n && n.vnode === e ? n.recurseCount++ : t.push({
      vnode: e,
      recurseCount: 0
    });
    const r = e.component && e.component.parent;
    e = r && r.vnode;
  }
  return t;
}
function Ve(e) {
  const t = [];
  return e.forEach((n, r) => {
    t.push(...r === 0 ? [] : [`
`], ...Ae(n));
  }), t;
}
function Ae({ vnode: e, recurseCount: t }) {
  const n = t > 0 ? `... (${t} recursive calls)` : "", r = e.component ? e.component.parent == null : !1, o = ` at <${J(
    e.component,
    e.type,
    r
  )}`, i = ">" + n;
  return e.props ? [o, ...Te(e.props), i] : [o + i];
}
function Te(e) {
  const t = [], n = Object.keys(e);
  return n.slice(0, 3).forEach((r) => {
    t.push(...q(r, e[r]));
  }), n.length > 3 && t.push(" ..."), t;
}
function q(e, t, n) {
  return a(t) ? (t = JSON.stringify(t), n ? t : [`${e}=${t}`]) : typeof t == "number" || typeof t == "boolean" || t == null ? n ? t : [`${e}=${t}`] : Re(t) ? (t = q(e, N(t.value), !0), n ? t : [`${e}=Ref<`, t, ">"]) : R(t) ? [`${e}=fn${t.name ? `<${t.name}>` : ""}`] : (t = N(t), n ? t : [`${e}=`, t]);
}
const Y = {
  sp: "serverPrefetch hook",
  bc: "beforeCreate hook",
  c: "created hook",
  bm: "beforeMount hook",
  m: "mounted hook",
  bu: "beforeUpdate hook",
  u: "updated",
  bum: "beforeUnmount hook",
  um: "unmounted hook",
  a: "activated hook",
  da: "deactivated hook",
  ec: "errorCaptured hook",
  rtc: "renderTracked hook",
  rtg: "renderTriggered hook",
  0: "setup function",
  1: "render function",
  2: "watcher getter",
  3: "watcher callback",
  4: "watcher cleanup function",
  5: "native event handler",
  6: "component event handler",
  7: "vnode hook",
  8: "directive hook",
  9: "transition hook",
  10: "app errorHandler",
  11: "app warnHandler",
  12: "ref function",
  13: "async component loader",
  14: "scheduler flush",
  15: "component update",
  16: "app unmount cleanup function"
};
function F(e, t, n, r) {
  try {
    return r ? e(...r) : e();
  } catch (o) {
    xe(o, t, n);
  }
}
function xe(e, t, n, r = !0) {
  const o = t ? t.vnode : null, { errorHandler: i, throwUnhandledErrorInProduction: s } = t && t.appContext.config || ee;
  if (t) {
    let c = t.parent;
    const p = t.proxy, w = process.env.NODE_ENV !== "production" ? Y[n] : `https://vuejs.org/error-reference/#runtime-${n}`;
    for (; c; ) {
      const S = c.ec;
      if (S) {
        for (let b = 0; b < S.length; b++)
          if (S[b](e, p, w) === !1)
            return;
      }
      c = c.parent;
    }
    if (i) {
      F(i, null, 10, [
        e,
        p,
        w
      ]);
      return;
    }
  }
  De(e, n, o, r, s);
}
function De(e, t, n, r = !0, o = !1) {
  if (process.env.NODE_ENV !== "production") {
    const i = Y[t];
    if (n && Ce(n), W(`Unhandled error${i ? ` during execution of ${i}` : ""}`), n && ke(), r)
      throw e;
    console.error(e);
  } else {
    if (o)
      throw e;
    console.error(e);
  }
}
let l, g = [];
function K(e, t) {
  var n, r;
  l = e, l ? (l.enabled = !0, g.forEach(({ event: o, args: i }) => l.emit(o, ...i)), g = []) : /* handle late devtools injection - only do this if we are in an actual */ /* browser environment to avoid the timer handle stalling test runner exit */ /* (#4815) */ typeof window < "u" && // some envs mock window but not fully
  window.HTMLElement && // also exclude jsdom
  // eslint-disable-next-line no-restricted-syntax
  !((r = (n = window.navigator) == null ? void 0 : n.userAgent) != null && r.includes("jsdom")) ? ((t.__VUE_DEVTOOLS_HOOK_REPLAY__ = t.__VUE_DEVTOOLS_HOOK_REPLAY__ || []).push((i) => {
    K(i, t);
  }), setTimeout(() => {
    l || (t.__VUE_DEVTOOLS_HOOK_REPLAY__ = null, g = []);
  }, 3e3)) : g = [];
}
{
  const e = ue(), t = (n, r) => {
    let o;
    return (o = e[n]) || (o = e[n] = []), o.push(r), (i) => {
      o.length > 1 ? o.forEach((s) => s(i)) : o[0](i);
    };
  };
  t(
    "__VUE_INSTANCE_SETTERS__",
    (n) => n
  ), t(
    "__VUE_SSR_SETTERS__",
    (n) => n
  );
}
process.env.NODE_ENV;
const je = /(?:^|[-_])(\w)/g, Ie = (e) => e.replace(je, (t) => t.toUpperCase()).replace(/[-_]/g, "");
function ze(e, t = !0) {
  return R(e) ? e.displayName || e.name : e.name || t && e.__name;
}
function J(e, t, n = !1) {
  let r = ze(t);
  if (!r && t.__file) {
    const o = t.__file.match(/([^/\\]+)\.\w+$/);
    o && (r = o[1]);
  }
  if (!r && e && e.parent) {
    const o = (i) => {
      for (const s in i)
        if (i[s] === t)
          return s;
    };
    r = o(
      e.components || e.parent.type.components
    ) || o(e.appContext.components);
  }
  return r ? Ie(r) : n ? "App" : "Anonymous";
}
process.env.NODE_ENV;
process.env.NODE_ENV;
process.env.NODE_ENV;
const {
  createComponentInstance: Be,
  setCurrentRenderingInstance: Le,
  setupComponent: Ue,
  renderComponentRoot: Me,
  normalizeVNode: We,
  pushWarningContext: qe,
  popWarningContext: Ye
} = m, { isVNode: Fe } = m, { isVNode: Ke } = m;
G();
const k = {
  __name: "VueImageInput",
  __ssrInlineRender: !0,
  props: {
    title: {
      type: String,
      default: "Drop here"
    },
    required: {
      type: Boolean,
      default: !1
    },
    fontSize: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: ""
    },
    background: {
      type: String,
      default: ""
    },
    textColor: {
      type: String,
      default: ""
    },
    border: {
      type: String,
      default: ""
    },
    borderColor: {
      type: String,
      default: ""
    },
    mimes: {
      type: String,
      default: ".jpg,.png"
    },
    imageRounded: {
      type: String,
      default: ""
    },
    closeBtnColor: {
      type: String,
      default: ""
    },
    closeBtn: {
      type: String,
      default: ""
    },
    bgRounded: {
      type: String,
      default: ""
    },
    padding: {
      type: String,
      default: ""
    },
    paddingLeft: {
      type: String,
      default: ""
    },
    paddingRight: {
      type: String,
      default: ""
    },
    paddingTop: {
      type: String,
      default: ""
    },
    paddingBottom: {
      type: String,
      default: ""
    },
    paddingX: {
      type: String,
      default: ""
    },
    paddingY: {
      type: String,
      default: ""
    },
    imageSrc: {
      type: String,
      default: ""
    }
  },
  setup(e, { emit: t }) {
    const n = e;
    $(null), $(null);
    const r = $(n.imageSrc);
    X(() => n.imageSrc, (i) => {
      r.value = i;
    });
    const o = Z(() => "w" + n.size.slice(4));
    return (i, s, c, p) => {
      s(`<div${Oe(Q({
        class: `${o.value} container ${e.border}`,
        style: `border-color: ${e.borderColor}; padding: ${e.padding ?? (e.paddingY ?? "0") + " " + (e.paddingX ?? "0")}; padding-left: ${e.paddingLeft}; padding-right: ${e.paddingRight}; padding-top: ${e.paddingTop}; padding-bottom: ${e.paddingBottom}`
      }, p))} data-v-61af16f2>`), r.value ? s(`<!--[--><img${A("src", r.value)} class="w-full image" style="${d(`border-radius: ${e.imageRounded}`)}" data-v-61af16f2><div class="close" data-v-61af16f2><div class="close-before" style="${d(`background: ${e.closeBtnColor}`)}" data-v-61af16f2></div><div class="close-after" style="${d(`background: ${e.closeBtnColor}`)}" data-v-61af16f2></div></div><!--]-->`) : s(`<!--[--><input class="input" type="file"${A("accept", e.mimes)}${H(e.required) ? " required" : ""} data-v-61af16f2><button class="${M(`${e.size} btn`)}" style="${d(`background: ${e.background}; color: ${e.textColor}; font-size: ${e.fontSize}; border-radius: ${e.bgRounded}`)}" data-v-61af16f2>${Ne(e.title)}</button><!--]-->`), s("</div>");
    };
  }
};
k.__scopeId = "data-v-61af16f2";
const T = k.setup;
k.setup = (e, t) => {
  const n = v();
  return (n.modules || (n.modules = /* @__PURE__ */ new Set())).add("src/components/VueImageInput.vue"), T ? T(e, t) : void 0;
};
export {
  k as VueImageInput
};