vue-bare/dist/index.js

**Unstyled Vue components for frustration-free human interactions**

import { defineComponent as x, mergeModels as y, useTemplateRef as $, useModel as B, watchEffect as b, computed as C, withDirectives as _, createElementBlock as g, openBlock as S, mergeProps as V, withKeys as H, withModifiers as A, vModelText as M, ref as w, normalizeClass as L, renderSlot as k, createElementVNode as W, vModelDynamic as K, provide as U, normalizeProps as O, guardReactiveProps as F, inject as E, unref as R, watch as T, onMounted as j } from "vue";
const Z = /* @__PURE__ */ x({
  __name: "EmailInputBare",
  props: /* @__PURE__ */ y({
    class: {},
    autocomplete: {},
    id: {},
    name: {},
    autofocus: { type: Boolean },
    disabled: { type: Boolean },
    placeholder: {},
    value: {}
  }, {
    modelValue: {
      type: String,
      default: ""
    },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(o, { expose: s }) {
    const a = o, l = $("input-ref");
    s({
      focus: () => {
        l.value?.focus();
      }
    });
    const e = B(o, "modelValue");
    b(() => {
      a.value !== void 0 && (e.value = a.value);
    });
    const p = C(() => {
      const { value: r, placeholder: t, ...u } = a;
      return {
        ...u,
        ...t !== void 0 && { placeholder: t }
      };
    });
    return (r, t) => _((S(), g("input", V({
      ref: "input-ref",
      "onUpdate:modelValue": t[0] || (t[0] = (u) => e.value = u),
      type: "email",
      autocapitalize: "none",
      inputmode: "email",
      spellcheck: "false"
    }, p.value, {
      onKeypress: t[1] || (t[1] = H(A(() => {
      }, ["prevent"]), ["space"]))
    }), null, 16)), [
      [M, e.value]
    ]);
  }
}), q = ["type"], N = /* @__PURE__ */ x({
  __name: "PasswordInputBare",
  props: /* @__PURE__ */ y({
    class: {},
    autocomplete: {},
    id: {},
    name: {},
    autofocus: { type: Boolean },
    disabled: { type: Boolean },
    toggleable: { type: Boolean },
    value: {},
    wrapperClass: {}
  }, {
    modelValue: {
      type: String,
      default: ""
    },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(o, { expose: s }) {
    const a = o, l = $("input-ref"), e = w(!1), p = () => {
      e.value = !e.value;
    };
    s({
      focus: () => {
        l.value?.focus();
      },
      toggleVisibility: p,
      isVisible: e
    });
    const r = B(o, "modelValue");
    b(() => {
      a.value !== void 0 && (r.value = a.value);
    });
    const t = C(() => a.toggleable && e.value ? "text" : "password"), u = C(() => {
      const { value: n, toggleable: d, wrapperClass: v, ...m } = a;
      return m;
    });
    return (n, d) => n.toggleable ? (S(), g("div", {
      key: 0,
      class: L(n.wrapperClass)
    }, [
      _(W("input", V({
        ref: "input-ref",
        "onUpdate:modelValue": d[0] || (d[0] = (v) => r.value = v),
        type: t.value,
        autocapitalize: "none",
        inputmode: "text",
        spellcheck: "false"
      }, u.value), null, 16, q), [
        [K, r.value]
      ]),
      k(n.$slots, "toggle", {
        isVisible: e.value,
        toggle: p
      })
    ], 2)) : _((S(), g("input", V({
      key: 1,
      ref: "input-ref",
      "onUpdate:modelValue": d[1] || (d[1] = (v) => r.value = v),
      type: "password",
      autocapitalize: "none",
      inputmode: "text",
      spellcheck: "false"
    }, u.value), null, 16)), [
      [M, r.value]
    ]);
  }
}), I = {
  Value: Symbol("radio-list-value"),
  Disabled: Symbol("radio-list-disabled"),
  OnItemClick: Symbol("radio-list-click")
}, ee = /* @__PURE__ */ x({
  __name: "RadioListBare",
  props: /* @__PURE__ */ y({
    id: {},
    name: {},
    class: {},
    disabled: { type: Boolean },
    value: {}
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(o) {
    const s = o, a = B(o, "modelValue"), l = (e) => {
      a.value = e;
    };
    return b(() => {
      a.value = s.value;
    }), U(I.Value, a), U(I.Disabled, s.disabled), U(I.OnItemClick, l), (e, p) => (S(), g("ul", O(F(s)), [
      k(e.$slots, "default")
    ], 16));
  }
}), G = ["disabled"], te = /* @__PURE__ */ x({
  __name: "RadioListItemBare",
  props: {
    class: {},
    value: {},
    disabled: { type: Boolean }
  },
  setup(o) {
    const s = o, a = E(I.Disabled, !1), l = E(I.Value, ""), e = E(
      I.OnItemClick,
      () => {
      }
    ), p = () => {
      !a && !s.disabled && e?.(s.value);
    };
    return (r, t) => (S(), g("li", {
      class: L(s.class),
      disabled: s.disabled,
      onClick: p
    }, [
      k(r.$slots, "default", {
        selected: s.value === R(l),
        listDisabled: R(a)
      })
    ], 10, G));
  }
}), ae = /* @__PURE__ */ x({
  __name: "SnackbarBare",
  props: {
    class: {},
    hideClass: {},
    show: { type: Boolean },
    showClass: {}
  },
  setup(o, { expose: s }) {
    const a = o, l = w(), e = w(null), p = w(0);
    return s({
      height: p
    }), b(() => {
      a.show ? l.value = a.showClass : l.value !== void 0 && (l.value = a.hideClass);
    }), b(() => {
      if (!e.value || !a.show) {
        p.value = 0;
        return;
      }
      const r = window.getComputedStyle(e.value);
      p.value = e.value.offsetHeight + parseFloat(r.getPropertyValue("margin-bottom")) + parseFloat(r.getPropertyValue("margin-top"));
    }), (r, t) => (S(), g("div", {
      ref_key: "root",
      ref: e,
      class: L([l.value, a.class])
    }, [
      k(r.$slots, "default")
    ], 2));
  }
}), le = /* @__PURE__ */ x({
  __name: "SwitchBare",
  props: /* @__PURE__ */ y({
    class: {},
    id: {},
    name: {},
    disabled: { type: Boolean },
    value: { type: Boolean }
  }, {
    modelValue: {
      type: Boolean,
      default: !1
    },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(o) {
    const s = o, a = B(o, "modelValue");
    T(
      () => s.value,
      (e) => {
        a.value = e;
      },
      {
        immediate: !0
      }
    );
    const l = () => {
      s.disabled || (a.value = !a.value);
    };
    return (e, p) => (S(), g("div", V(s, { onClick: l }), [
      k(e.$slots, "default")
    ], 16));
  }
}), z = (o) => {
  let u = "";
  if (o.startsWith("+1") && o.length <= 12) {
    if (o.length === 2)
      return "";
    u = "(", o.length > 2 && (u += o.substring(2, 5)), o.length >= 6 && (u += `) ${o.substring(5, 8)}`), o.length >= 9 && (u += `-${o.substring(8, 12)}`);
  } else
    u = o;
  return u.replace(/\*/g, "•");
}, D = (o, s = { code: "+1", maxLength: 12 }) => {
  if (o === void 0 || o === "")
    return "";
  let l = o.replace(/[^0-9+]/gm, "");
  if (l = l.replace(/(?!^[+])[^0-9]/gm, ""), l === "")
    return "";
  l.startsWith(s.code.slice(1)) ? l = `+${l}` : l.startsWith("+") || (l = `${s.code}${l}`);
  const e = l.startsWith(s.code) ? s.maxLength : 16;
  return l.substring(0, e);
}, J = ["value"], oe = /* @__PURE__ */ x({
  __name: "TelephoneInputBare",
  props: /* @__PURE__ */ y({
    class: {},
    autocomplete: {},
    id: {},
    name: {},
    placeholder: {},
    autofocus: { type: Boolean },
    disabled: { type: Boolean },
    value: {}
  }, {
    modelValue: {
      type: String,
      default: ""
    },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(o, { expose: s }) {
    const a = o, l = $("input-ref");
    s({
      focus: () => {
        l.value?.focus();
      }
    });
    const e = B(o, "modelValue"), p = (u, n, d) => {
      const v = u.slice(0, n).replace(/[^\d+]/g, "").length;
      let m = d.length > 0 && d[0] === "(" ? 1 : 0, h = 0;
      for (; m < d.length && h < v; ) {
        const i = d[m];
        i && /[\d+]/.test(i) && h++, m++;
      }
      return m;
    }, r = (u) => {
      const n = u.target, d = n.value;
      if (!d || d.trim() === "") {
        e.value = "", n.value = "";
        return;
      }
      const v = d.replace(/[^\d+]/g, ""), m = v.replace(/\+/g, ""), h = v.startsWith("+") ? `+${m}` : m, i = D(h);
      e.value = i;
      const c = z(i), f = n.selectionStart;
      n.value = c;
      const P = p(
        d,
        f ?? 0,
        c
      );
      n.setSelectionRange(P, P);
    };
    b(() => {
      a.value !== void 0 && (!a.value || a.value.trim() === "" ? e.value = "" : e.value = D(a.value));
    });
    const t = C(() => {
      const { value: u, ...n } = a;
      return n;
    });
    return (u, n) => (S(), g("input", V({
      ref: "input-ref",
      value: e.value ? R(z)(e.value) : "",
      type: "tel",
      autocapitalize: "none",
      inputmode: "tel",
      spellcheck: "false"
    }, t.value, { onInput: r }), null, 16, J));
  }
}), Q = 2, se = /* @__PURE__ */ x({
  __name: "TextAreaBare",
  props: /* @__PURE__ */ y({
    class: {},
    id: {},
    name: {},
    placeholder: {},
    spellcheck: { type: Boolean },
    autofocus: { type: Boolean },
    disabled: { type: Boolean },
    maxCharacters: {},
    maxRows: {},
    value: {}
  }, {
    modelValue: {
      type: String,
      default: ""
    },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ y(["keypress", "focus", "blur"], ["update:modelValue"]),
  setup(o, { expose: s, emit: a }) {
    const l = o, e = B(o, "modelValue"), p = a, r = w(0), t = w();
    s({
      focus: () => {
        t.value?.focus();
      },
      blur: () => {
        t.value?.blur();
      },
      click: () => {
        t.value?.click();
      }
    });
    const u = C(() => {
      const { maxRows: i, maxCharacters: c, value: f, ...P } = l;
      return P;
    }), n = () => {
      if (!t.value)
        return;
      t.value.style.height = "inherit";
      const i = window.getComputedStyle(t.value), c = d(i), f = Math.min(
        (l.maxRows ?? Q) * r.value,
        t.value.scrollHeight - c
      ) + c;
      t.value.style.height = `${f}px`;
    }, d = (i) => parseInt(i.getPropertyValue("padding-top")) + parseInt(i.getPropertyValue("padding-bottom")), v = () => {
      if (!t.value)
        return 0;
      const i = t.value.value;
      t.value.value = "", t.value.rows = 1;
      const c = window.getComputedStyle(t.value), f = t.value.scrollHeight - d(c);
      t.value.value = `
`, t.value.rows = 2;
      const P = t.value.scrollHeight - d(c);
      return t.value.rows = 1, t.value.value = i, P - f;
    };
    j(() => {
      r.value = v();
    }), T(
      [e, r],
      () => {
        n();
      },
      // Needed in order to resize after the textarea has been updated
      { flush: "post" }
    );
    const m = (i) => {
      if (p("keypress", i), l.maxCharacters === void 0)
        return;
      const { value: c } = i.target;
      c.length >= l.maxCharacters && i.preventDefault();
    }, h = (i) => {
      const c = i.target;
      if (l.maxCharacters !== void 0) {
        const f = c.value.slice(0, l.maxCharacters);
        c.value = f, e.value = f;
      } else
        e.value = c.value;
      n();
    };
    return b(() => {
      l.value !== void 0 && (e.value = l.value);
    }), (i, c) => _((S(), g("textarea", V({
      ref_key: "element",
      ref: t,
      "onUpdate:modelValue": c[0] || (c[0] = (f) => e.value = f),
      rows: "1",
      autoComplete: "off",
      autocapitalize: "sentence",
      inputmode: "text"
    }, u.value, {
      onKeypress: m,
      onInput: h,
      onChange: h,
      onFocus: c[1] || (c[1] = (f) => i.$emit("focus")),
      onBlur: c[2] || (c[2] = (f) => i.$emit("blur"))
    }), null, 16)), [
      [M, e.value]
    ]);
  }
}), X = ["value"], ne = /* @__PURE__ */ x({
  __name: "TextInputBare",
  props: /* @__PURE__ */ y({
    class: {},
    autocapitalize: {},
    autocomplete: {},
    id: {},
    inputmode: {},
    name: {},
    placeholder: {},
    spellcheck: { type: Boolean },
    autofocus: { type: Boolean },
    disabled: { type: Boolean },
    trimStart: { type: Boolean },
    value: {}
  }, {
    modelValue: {
      type: String,
      default: ""
    },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(o, { expose: s }) {
    const a = o, l = $("input-ref");
    s({
      focus: () => {
        l.value?.focus();
      }
    });
    const e = B(o, "modelValue"), p = (t) => {
      const u = t.target, n = u.value;
      if (!a.trimStart) {
        e.value = n;
        return;
      }
      if (!n || n.trim() === "") {
        e.value = "", u.value = "";
        return;
      }
      if (n === n.trimStart()) {
        e.value = n;
        return;
      }
      const d = u.selectionStart ?? 0, v = n.length - n.trimStart().length, m = n.trimStart();
      e.value = m, u.value = m;
      const h = Math.max(0, d - v);
      u.setSelectionRange(h, h);
    };
    b(() => {
      if (a.value !== void 0) {
        let t = a.value;
        a.trimStart && t && (t = t.trimStart()), e.value = t;
      }
    });
    const r = C(() => {
      const { value: t, trimStart: u, ...n } = a;
      return n;
    });
    return (t, u) => (S(), g("input", V({
      ref: "input-ref",
      value: e.value,
      type: "text"
    }, r.value, { onInput: p }), null, 16, X));
  }
});
export {
  Z as EmailInputBare,
  N as PasswordInputBare,
  ee as RadioListBare,
  te as RadioListItemBare,
  ae as SnackbarBare,
  le as SwitchBare,
  oe as TelephoneInputBare,
  se as TextAreaBare,
  ne as TextInputBare
};