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