vue-bare/dist/index.js

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

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