vue-bare/dist/index.js

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

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