@aotearoan/neon/dist/components/user-input/input/NeonInput.vue.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import t from "./NeonInput.es.js";
import { resolveComponent as m, openBlock as l, createElementBlock as i, normalizeClass as d, mergeProps as a, withModifiers as s, createBlock as b, withKeys as r, createCommentVNode as u, toDisplayString as y } from "vue";
import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
const f = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], w = {
  key: 3,
  class: "neon-input__textarea-counter"
};
function V(e, n, k, v, $, B) {
  const p = m("neon-icon");
  return l(), i("div", {
    class: d([[
      {
        "neon-input--with-icon": !e.hideIcon && (e.icon || e.modelValue && e.modelValue.length > 0),
        "neon-input--disabled": e.disabled,
        "neon-input--focused": e.focused,
        "neon-input--placeholder-visible": e.placeholder && (!e.modelValue || e.modelValue.length === 0),
        "neon-input--with-state-highlight": e.stateHighlight,
        "neon-input--with-state-icon": e.stateIcon
      },
      `neon-input--${e.size}`,
      `neon-input--${e.color}`,
      `neon-input--state-${e.state}`
    ], "neon-input"])
  }, [
    e.rows ? (l(), i("textarea", a({
      key: 1,
      id: e.id,
      "aria-placeholder": e.computedPlaceholder,
      disabled: e.disabled,
      inputmode: e.inputmode,
      placeholder: e.computedPlaceholder,
      rows: e.rows,
      tabindex: e.tabindex,
      value: e.modelValue,
      class: "neon-input__textfield neon-input__textarea"
    }, e.sanitizedAttributes, {
      onBlur: n[3] || (n[3] = (...o) => e.onBlur && e.onBlur(...o)),
      onFocus: n[4] || (n[4] = (...o) => e.onFocus && e.onFocus(...o)),
      onKeydown: n[5] || (n[5] = (...o) => e.onKeyDown && e.onKeyDown(...o)),
      onInput: n[6] || (n[6] = s((...o) => e.changeValue && e.changeValue(...o), ["stop", "prevent"]))
    }), null, 16, g)) : (l(), i("input", a({
      key: 0,
      id: e.id,
      ref: "neonInput",
      "aria-placeholder": e.computedPlaceholder,
      disabled: e.disabled,
      inputmode: e.inputmode,
      placeholder: e.computedPlaceholder,
      tabindex: e.tabindex,
      type: e.type,
      value: e.modelValue,
      class: "neon-input__textfield neon-input__text"
    }, e.sanitizedAttributes, {
      onBlur: n[0] || (n[0] = (...o) => e.onBlur && e.onBlur(...o)),
      onFocus: n[1] || (n[1] = (o) => !e.disabled && e.onFocus()),
      onInput: n[2] || (n[2] = s((o) => !e.disabled && e.changeValue(o), ["stop", "prevent"]))
    }), null, 16, f)),
    e.iconVisible ? (l(), b(p, {
      key: 2,
      class: d([{ "neon-input__icon--read-only": e.iconReadonly }, "neon-input__icon"]),
      color: e.iconColor,
      disabled: e.disabled,
      name: e.iconName,
      role: !e.iconReadonly && "button",
      tabindex: e.disabled || e.iconReadonly ? !1 : 0,
      transparent: !0,
      onClick: n[7] || (n[7] = (o) => !e.iconReadonly && e.iconClicked(o)),
      onKeydown: [
        n[8] || (n[8] = r((o) => !e.iconReadonly && e.iconClicked(o), ["enter"])),
        n[9] || (n[9] = r((o) => !e.iconReadonly && e.iconClicked(o), ["space"]))
      ]
    }, null, 8, ["class", "color", "disabled", "name", "role", "tabindex"])) : u("", !0),
    e.maxlength && e.maxlength > 0 ? (l(), i("span", w, y(`${e.modelValue.length}/${e.maxlength}`), 1)) : u("", !0)
  ], 2);
}
const F = /* @__PURE__ */ h(t, [["render", V]]);
export {
  F as default
};
//# sourceMappingURL=NeonInput.vue.es.js.map