@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 p from "./NeonInput.es.js";
import { resolveComponent as m, openBlock as l, createElementBlock as i, normalizeClass as d, mergeProps as a, withModifiers as t, createElementVNode as b, toDisplayString as y, createCommentVNode as u, createBlock as h, withKeys as r } from "vue";
import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
const w = ["id", "aria-placeholder", "autocomplete", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], V = {
  key: 1,
  class: "neon-input__textarea-wrapper"
}, g = ["id", "aria-placeholder", "autocomplete", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], k = {
  key: 0,
  class: "neon-input__textarea-counter"
};
function v(e, o, B, C, $, I) {
  const s = 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 === null ? (l(), i("input", a({
      key: 0,
      id: e.id,
      ref: "neonInput",
      "aria-placeholder": e.computedPlaceholder,
      autocomplete: e.autocomplete,
      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: o[0] || (o[0] = (...n) => e.onBlur && e.onBlur(...n)),
      onFocus: o[1] || (o[1] = (n) => !e.disabled && e.onFocus()),
      onInput: o[2] || (o[2] = t((n) => !e.disabled && e.changeValue(n), ["stop", "prevent"]))
    }), null, 16, w)) : (l(), i("div", V, [
      b("textarea", a({
        id: e.id,
        "aria-placeholder": e.computedPlaceholder,
        autocomplete: e.autocomplete,
        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: o[3] || (o[3] = (...n) => e.onBlur && e.onBlur(...n)),
        onFocus: o[4] || (o[4] = (...n) => e.onFocus && e.onFocus(...n)),
        onKeydown: o[5] || (o[5] = (...n) => e.onKeyDown && e.onKeyDown(...n)),
        onInput: o[6] || (o[6] = t((...n) => e.changeValue && e.changeValue(...n), ["stop", "prevent"]))
      }), "      ", 16, g),
      e.counterLabel ? (l(), i("span", k, y(e.counterLabel), 1)) : u("", !0)
    ])),
    e.iconVisible ? (l(), h(s, {
      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: -1,
      transparent: !0,
      onClick: o[7] || (o[7] = (n) => !e.iconReadonly && e.iconClicked(n)),
      onKeydown: [
        o[8] || (o[8] = r((n) => !e.iconReadonly && e.iconClicked(n), ["enter"])),
        o[9] || (o[9] = r((n) => !e.iconReadonly && e.iconClicked(n), ["space"]))
      ]
    }, null, 8, ["class", "color", "disabled", "name", "role"])) : u("", !0)
  ], 2);
}
const R = /* @__PURE__ */ f(p, [["render", v]]);
export {
  R as default
};
//# sourceMappingURL=NeonInput.vue.es.js.map