ucc-ui/dist/es/Input-dxOSZctJ.js

ucc-ui components library

import { defineComponent as A, inject as R, computed as t, ref as L, openBlock as o, createElementBlock as l, normalizeClass as N, createElementVNode as M, renderSlot as c, createCommentVNode as n, createVNode as I, unref as f, normalizeStyle as O, createBlock as T, mergeProps as P, toDisplayString as w } from "vue";
import { F as X, U as m } from "./Button-DOc5qANu.js";
const p = {
  TEXT: "text",
  TEXTAREA: "textarea",
  PASSWORD: "password",
  CHECKBOX: "checkbox",
  FILE: "file",
  NUMBER: "number",
  RADIO: "radio"
}, U = { class: "u-input__wapper" }, z = {
  key: 0,
  class: "u-input__prefix-wrapper"
}, D = {
  key: 0,
  class: "u-input__prepend"
}, F = {
  key: 1,
  class: "u-input__prefix"
}, W = ["value", "type", "placeholder", "disabled", "autocomplete", "readonly", "name", "max", "min", "autofocus", "aria-label", "tabindex"], K = {
  key: 2,
  class: "u-input__suffix-wrapper"
}, j = {
  key: 0,
  class: "u-input__suffix"
}, H = {
  key: 1,
  class: "u-input__append"
}, J = ["value"], Y = {
  key: 4,
  class: "u-textarea__count"
}, Q = /* @__PURE__ */ A({
  name: "UInput",
  __name: "Input",
  props: {
    modelValue: {},
    type: { default: p.TEXT },
    size: { default: "default" },
    maxLength: {},
    minLength: {},
    autocomplete: { default: "off" },
    name: {},
    readonly: {},
    max: {},
    min: {},
    step: {},
    autofocus: {},
    form: {},
    ariaLabel: {},
    tabindex: { default: 0 },
    placeholder: {},
    clearable: { type: Boolean },
    disabled: { type: Boolean },
    showPassword: { type: Boolean, default: !1 },
    prefixIcon: {},
    suffixIcon: {},
    validating: { type: Boolean },
    inputStyle: {},
    showWordLimit: { type: Boolean },
    rows: {}
  },
  emits: ["update:modelValue", "change", "focus", "blur", "clear", "input"],
  setup(B, { emit: g }) {
    const a = B, y = R(X, null), h = t(() => (y == null ? void 0 : y.value) || a.size), s = g, i = t(() => a.modelValue), v = t(() => !!i.value || i.value === 0), r = t(() => a.type === p.TEXTAREA), d = L(v.value), $ = t(() => a.type === p.PASSWORD && a.showPassword), C = t(() => d.value ? "eye" : "eye-slash"), V = t(() => d.value ? p.TEXT : a.type), _ = (e) => {
      let u = e.target.value;
      u = S(u), s("update:modelValue", u), s("input", e);
    }, b = (e) => {
      s("focus", e);
    }, k = (e) => {
      s("blur", e);
    }, E = (e) => {
      s("change", e.target.value);
    }, x = (e) => {
      s("update:modelValue", ""), s("clear", e);
    };
    function S(e) {
      return a.type === p.NUMBER && (a.max && (e = Math.min(+e, +a.max)), a.min && (e = Math.max(+e, +a.min))), e;
    }
    return (e, u) => (o(), l("div", {
      class: N(["u-input", {
        "u-input--suffix": e.$slots.suffix,
        "u-input--prefix": e.$slots.prefix,
        "is-disabled": e.disabled,
        "is-readonly": e.readonly,
        [`u-input--${h.value}`]: h.value
      }])
    }, [
      M("div", U, [
        r.value ? n("", !0) : (o(), l("div", z, [
          e.$slots.prepend ? (o(), l("div", D, [
            c(e.$slots, "prepend")
          ])) : n("", !0),
          e.$slots.prefix || e.prefixIcon ? (o(), l("div", F, [
            c(e.$slots, "prefix", {}, () => [
              I(f(m), {
                icon: e.prefixIcon ?? ""
              }, null, 8, ["icon"])
            ])
          ])) : n("", !0)
        ])),
        r.value ? n("", !0) : (o(), l("input", {
          key: 1,
          value: i.value,
          class: "u-input__inner",
          type: V.value,
          placeholder: e.placeholder,
          disabled: e.disabled,
          autocomplete: e.autocomplete,
          readonly: e.readonly,
          name: e.name,
          max: e.max,
          min: e.type === "number" ? 0 : e.min,
          autofocus: e.autofocus,
          "aria-label": e.ariaLabel,
          tabindex: e.tabindex,
          style: O(e.inputStyle),
          onInput: _,
          onFocus: b,
          onBlur: k,
          onChange: E
        }, null, 44, W)),
        r.value ? n("", !0) : (o(), l("div", K, [
          e.$slots.suffix || e.suffixIcon ? (o(), l("div", j, [
            c(e.$slots, "suffix", {}, () => [
              I(f(m), {
                icon: e.suffixIcon ?? ""
              }, null, 8, ["icon"])
            ])
          ])) : n("", !0),
          e.$slots.append ? (o(), l("div", H, [
            c(e.$slots, "append")
          ])) : n("", !0),
          $.value && v.value ? (o(), T(f(m), {
            key: 2,
            class: "u-input__password",
            icon: C.value,
            onClick: u[0] || (u[0] = (Z) => d.value = !d.value)
          }, null, 8, ["icon"])) : n("", !0),
          e.clearable && v.value ? (o(), T(f(m), {
            key: 3,
            class: "u-input__clear",
            icon: "close",
            onClick: x
          })) : n("", !0)
        ])),
        r.value ? (o(), l("textarea", P({
          key: 3,
          class: "u-input__inner u-textarea",
          value: i.value
        }, a, {
          onInput: _,
          onFocus: b,
          onBlur: k,
          onChange: E
        }), `\r
      `, 16, J)) : n("", !0),
        r.value ? (o(), l("span", Y, w((i.value + "").length) + " / " + w(e.maxLength), 1)) : n("", !0)
      ])
    ], 2));
  }
});
export {
  Q as _
};