@indielayer/ui/lib/components/input/Input.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as W, useAttrs as X, computed as c, ref as w, watch as D, openBlock as i, createBlock as s, normalizeStyle as G, unref as r, normalizeClass as a, withCtx as J, createElementVNode as S, renderSlot as k, createCommentVNode as m, mergeProps as K, toHandlers as M } from "vue";
import { useTheme as Q } from "../../composables/useTheme.js";
import { useColors as U } from "../../composables/useColors.js";
import { useCommon as z } from "../../composables/useCommon.js";
import { useInputtable as f } from "../../composables/useInputtable.js";
import { useInteractive as C } from "../../composables/useInteractive.js";
import { closeIcon as Y, eyeIcon as Z, eyeVisibleIcon as x } from "../../common/icons.js";
import _ from "../label/Label.vue.js";
import p from "../icon/Icon.vue.js";
import ee from "../inputFooter/InputFooter.vue.js";
const re = { class: "relative" }, oe = ["id", "disabled", "min", "max", "minlength", "maxlength", "step", "dir", "name", "placeholder", "readonly", "type", "value"], ne = {
  ...z.props(),
  ...U.props("primary"),
  ...C.props(),
  ...f.props(),
  showPasswordToggle: {
    type: Boolean,
    default: !0
  },
  dir: {
    type: String,
    default: "ltr"
  },
  icon: String,
  iconLeft: String,
  iconRight: String,
  max: [Number, String],
  maxlength: [Number, String],
  min: [Number, String],
  minlength: [Number, String],
  placeholder: String,
  type: {
    type: String,
    default: "text"
  },
  step: [Number, String],
  block: Boolean,
  showCounter: Boolean,
  clearable: Boolean
}, te = {
  name: "XInput",
  validators: {
    ...z.validators()
  }
}, ge = /* @__PURE__ */ W({
  ...te,
  props: ne,
  emits: f.emits(),
  setup(I, { expose: N, emit: V }) {
    const o = I, $ = V, g = X(), B = c(() => Object.keys(g).reduce((e, n) => (n.startsWith("data-") && (e[n] = g[n]), e), {})), h = w(null), l = w(o.type);
    D(() => o.type, (e) => {
      l.value = e;
    });
    function L(e) {
      if (!e.target)
        return;
      const n = e.target;
      if (o.type === "number") {
        const u = Number(n.value);
        typeof o.min < "u" && u < Number(o.min) && (n.value = o.min.toString()), typeof o.max < "u" && u > Number(o.max) && (n.value = o.max.toString());
      }
    }
    function P() {
      l.value = l.value === "password" ? "text" : "password";
    }
    const b = c(() => o.clearable && o.modelValue !== ""), { focus: y, blur: R } = C(h), {
      errorInternal: d,
      hideFooterInternal: T,
      isInsideForm: q,
      inputListeners: A,
      reset: v,
      validate: E,
      setError: F
    } = f(o, { focus: y, emit: $ }), j = c(() => {
      const e = o.modelValue;
      return e ? String(e).length : 0;
    }), { styles: H, classes: t, className: O } = Q("Input", {}, o, { errorInternal: d });
    return N({ focus: y, blur: R, reset: v, validate: E, setError: F }), (e, n) => (i(), s(_, {
      style: G(r(H)),
      block: e.block,
      disabled: e.disabled,
      required: e.required,
      "is-inside-form": r(q),
      label: e.label,
      class: a([
        r(O),
        r(t).wrapper
      ]),
      tooltip: e.tooltip
    }, {
      default: J(() => [
        S("div", re, [
          k(e.$slots, "prefix", {}, () => [
            e.iconLeft || e.icon ? (i(), s(p, {
              key: 0,
              size: e.size,
              icon: e.iconLeft || e.icon,
              class: a(["ml-2 left-1", r(t).icon])
            }, null, 8, ["size", "icon", "class"])) : m("", !0)
          ]),
          S("input", K({
            id: e.id,
            ref_key: "elRef",
            ref: h,
            class: [
              r(t).input,
              // error
              r(d) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-input-border)]",
              {
                "!pl-10": e.iconLeft || e.icon,
                "!pr-10": e.iconRight || e.showPasswordToggle || b.value
              }
            ],
            disabled: e.disabled,
            min: e.min,
            max: e.max,
            minlength: e.minlength,
            maxlength: e.maxlength,
            step: e.step,
            dir: e.dir,
            name: e.name,
            placeholder: e.placeholder,
            readonly: e.readonly,
            type: l.value,
            value: typeof e.modelValue < "u" ? e.modelValue : ""
          }, B.value, M(r(A), !0), { onChange: L }), null, 16, oe),
          k(e.$slots, "suffix", {}, () => [
            b.value ? (i(), s(p, {
              key: 0,
              size: e.size,
              icon: r(Y),
              class: a(["mr-2 right-1 cursor-pointer", r(t).icon]),
              onClick: n[0] || (n[0] = (u) => r(v)())
            }, null, 8, ["size", "icon", "class"])) : m("", !0),
            e.iconRight ? (i(), s(p, {
              key: 1,
              size: e.size,
              icon: e.iconRight,
              class: a(["mr-2 right-1", r(t).icon])
            }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (i(), s(p, {
              key: 2,
              size: e.size,
              icon: l.value === "password" ? r(Z) : r(x),
              class: a(["mr-2 right-1 cursor-pointer", r(t).icon]),
              onClick: n[1] || (n[1] = (u) => P())
            }, null, 8, ["size", "icon", "class"])) : m("", !0)
          ])
        ]),
        r(T) ? m("", !0) : (i(), s(ee, {
          key: 0,
          error: r(d),
          helper: e.helper,
          "character-count": j.value,
          "max-characters": e.maxlength,
          "show-counter": e.showCounter
        }, null, 8, ["error", "helper", "character-count", "max-characters", "show-counter"]))
      ]),
      _: 3
    }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
  }
});
export {
  ge as default
};