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

Indielayer UI Components with Tailwind CSS build for Vue 3

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