@varlet/ui/es/input/Input.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

import { computed, defineComponent, nextTick, ref } from "vue";
import { call, isEmpty, preventDefault, toNumber } from "@varlet/shared";
import { onSmartMounted, useClientId } from "@varlet/use";
import VarFieldDecorator from "../field-decorator/index.mjs";
import VarFormDetails from "../form-details/index.mjs";
import { useForm } from "../form/provide.mjs";
import { createNamespace, useValidation } from "../utils/components.mjs";
import { props } from "./props.mjs";
const { name, n, classes } = createNamespace("input");
import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, createBlock as _createBlock } from "vue";
const _hoisted_1 = ["aria-label", "placeholder", "enterkeyhint"];
const _hoisted_2 = ["id", "aria-label", "autocomplete", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
const _hoisted_3 = ["id", "aria-label", "autocomplete", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
function __render__(_ctx, _cache) {
  const _component_var_field_decorator = _resolveComponent("var-field-decorator");
  const _component_var_form_details = _resolveComponent("var-form-details");
  return _openBlock(), _createElementBlock(
    "div",
    {
      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
      onMousedown: _cache[12] || (_cache[12] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
    },
    [
      _createVNode(
        _component_var_field_decorator,
        _normalizeProps(_guardReactiveProps({
          value: _ctx.modelValue,
          id: _ctx.id,
          size: _ctx.size,
          variant: _ctx.variant,
          placeholder: _ctx.placeholder,
          ariaLabel: _ctx.ariaLabel,
          line: _ctx.line,
          hint: _ctx.hint,
          textColor: _ctx.textColor,
          focusColor: _ctx.focusColor,
          blurColor: _ctx.blurColor,
          isFocusing: _ctx.isForceFocusingEffect != null ? _ctx.isForceFocusingEffect : _ctx.isFocusing,
          isError: _ctx.isForceErrorEffect != null ? _ctx.isForceErrorEffect : !!_ctx.errorMessage,
          formDisabled: _ctx.formDisabled,
          disabled: _ctx.disabled,
          clearable: _ctx.clearable,
          cursor: _ctx.cursor,
          composing: _ctx.isComposing,
          hintCenter: !_ctx.textarea,
          onClick: _ctx.handleClick,
          onClear: _ctx.handleClear
        })),
        _createSlots({
          "clear-icon": _withCtx(({ clear }) => [
            _renderSlot(_ctx.$slots, "clear-icon", { clear })
          ]),
          "append-icon": _withCtx(() => [
            _renderSlot(_ctx.$slots, "append-icon")
          ]),
          default: _withCtx(() => [
            _ctx.normalizedType === "password" ? (_openBlock(), _createElementBlock("input", {
              key: 0,
              tabindex: "-1",
              "aria-label": _ctx.ariaLabel,
              class: _normalizeClass(_ctx.n("autocomplete")),
              placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
              style: _normalizeStyle({
                "--input-placeholder-color": _ctx.placeholderColor
              }),
              enterkeyhint: _ctx.enterkeyhint
            }, null, 14, _hoisted_1)) : _createCommentVNode("v-if", true),
            _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
              key: 1,
              id: _ctx.id,
              ref: "el",
              "aria-label": _ctx.ariaLabel,
              class: _normalizeClass(
                _ctx.classes(
                  _ctx.n("input"),
                  _ctx.n("--textarea"),
                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")],
                  [_ctx.errorMessage, _ctx.n("--error")],
                  [_ctx.errorMessage, _ctx.n("--caret-error")]
                )
              ),
              autocomplete: _ctx.autocomplete ? _ctx.autocomplete : "new-password",
              disabled: _ctx.formDisabled || _ctx.disabled,
              readonly: _ctx.formReadonly || _ctx.readonly,
              type: _ctx.normalizedType,
              value: _ctx.modelValue,
              placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
              maxlength: _ctx.maxlength,
              rows: _ctx.rows,
              enterkeyhint: _ctx.enterkeyhint,
              inputmode: _ctx.type === "number" ? "decimal" : void 0,
              style: _normalizeStyle({
                color: !_ctx.errorMessage ? _ctx.textColor : void 0,
                caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0,
                resize: _ctx.resize ? "vertical" : "none",
                "--input-placeholder-color": _ctx.placeholderColor
              }),
              onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
              onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
              onInput: _cache[2] || (_cache[2] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
              onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
              onCompositionstart: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
              onCompositionend: _cache[5] || (_cache[5] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args))
            }, null, 46, _hoisted_2)) : (_openBlock(), _createElementBlock("input", {
              key: 2,
              id: _ctx.id,
              ref: "el",
              "aria-label": _ctx.ariaLabel,
              class: _normalizeClass(
                _ctx.classes(
                  _ctx.n("input"),
                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")],
                  [_ctx.errorMessage, _ctx.n("--error")],
                  [_ctx.errorMessage, _ctx.n("--caret-error")]
                )
              ),
              autocomplete: _ctx.autocomplete ? _ctx.autocomplete : "new-password",
              disabled: _ctx.formDisabled || _ctx.disabled,
              readonly: _ctx.formReadonly || _ctx.readonly,
              type: _ctx.normalizedType,
              value: _ctx.modelValue,
              placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
              maxlength: _ctx.maxlength,
              enterkeyhint: _ctx.enterkeyhint,
              inputmode: _ctx.type === "number" ? "decimal" : void 0,
              style: _normalizeStyle({
                color: !_ctx.errorMessage ? _ctx.textColor : void 0,
                caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0,
                "--input-placeholder-color": _ctx.placeholderColor
              }),
              onFocus: _cache[6] || (_cache[6] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
              onBlur: _cache[7] || (_cache[7] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
              onInput: _cache[8] || (_cache[8] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
              onChange: _cache[9] || (_cache[9] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
              onCompositionstart: _cache[10] || (_cache[10] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
              onCompositionend: _cache[11] || (_cache[11] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args))
            }, null, 46, _hoisted_3))
          ]),
          _: 2
          /* DYNAMIC */
        }, [
          _ctx.$slots["prepend-icon"] ? {
            name: "prepend-icon",
            fn: _withCtx(() => [
              _renderSlot(_ctx.$slots, "prepend-icon")
            ]),
            key: "0"
          } : void 0
        ]),
        1040
        /* FULL_PROPS, DYNAMIC_SLOTS */
      ),
      _ctx.isShowFormDetails ? (_openBlock(), _createBlock(_component_var_form_details, {
        key: 0,
        "error-message": _ctx.errorMessage,
        "extra-message": _ctx.maxlengthText
      }, _createSlots({
        _: 2
        /* DYNAMIC */
      }, [
        _ctx.$slots["extra-message"] ? {
          name: "extra-message",
          fn: _withCtx(() => [
            _renderSlot(_ctx.$slots, "extra-message")
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["error-message", "extra-message"])) : _createCommentVNode("v-if", true)
    ],
    34
    /* CLASS, NEED_HYDRATION */
  );
}
const __sfc__ = defineComponent({
  name,
  components: {
    VarFormDetails,
    VarFieldDecorator
  },
  props,
  setup(props2) {
    const id = useClientId();
    const el = ref(null);
    const isFocusing = ref(false);
    const isComposing = ref(false);
    const { bindForm, form } = useForm();
    const {
      errorMessage,
      validateWithTrigger: vt,
      validate: v,
      // expose
      resetValidation
    } = useValidation();
    const cursor = computed(() => props2.disabled || props2.readonly ? "" : "text");
    const normalizedType = computed(() => {
      if (props2.type === "number") {
        return "text";
      }
      return props2.type;
    });
    const maxlengthText = computed(() => {
      const { maxlength, modelValue } = props2;
      if (!maxlength) {
        return "";
      }
      if (isEmpty(modelValue)) {
        return `0 / ${maxlength}`;
      }
      return `${String(modelValue).length}/${maxlength}`;
    });
    const placeholderColor = computed(() => {
      const { hint, blurColor, focusColor } = props2;
      if (hint) {
        return void 0;
      }
      if (errorMessage.value) {
        return "var(--field-decorator-error-color)";
      }
      if (isFocusing.value) {
        return focusColor || "var(--field-decorator-focus-color)";
      }
      return blurColor || "var(--field-decorator-placeholder-color, var(--field-decorator-blur-color))";
    });
    const inputProvider = {
      reset,
      validate,
      resetValidation
    };
    call(bindForm, inputProvider);
    onSmartMounted(() => {
      if (props2.autofocus) {
        focus();
      }
    });
    function validateWithTrigger(trigger) {
      nextTick(() => {
        const { validateTrigger, rules, modelValue } = props2;
        vt(validateTrigger, trigger, rules, modelValue);
      });
    }
    function handleFocus(e) {
      isFocusing.value = true;
      call(props2.onFocus, e);
      validateWithTrigger("onFocus");
    }
    function handleBlur(e) {
      isFocusing.value = false;
      call(props2.onBlur, e);
      validateWithTrigger("onBlur");
    }
    function updateValue(e) {
      const target = e.target;
      let { value } = target;
      if (props2.type === "number") {
        value = formatNumber(value);
      }
      const targetValue = withMaxlength(value);
      if (targetValue === props2.modelValue) {
        target.value = targetValue;
      }
      return targetValue;
    }
    function handleCompositionStart() {
      isComposing.value = true;
    }
    function handleCompositionEnd(e) {
      if (!isComposing.value) {
        return;
      }
      isComposing.value = false;
      e.target.dispatchEvent(new Event("input"));
    }
    function handleInput(e) {
      if (isComposing.value) {
        return;
      }
      const value = updateValue(e);
      call(props2["onUpdate:modelValue"], value);
      call(props2.onInput, value, e);
      validateWithTrigger("onInput");
    }
    function handleChange(e) {
      const value = withTrim(updateValue(e));
      if (props2.modelModifiers.trim) {
        call(props2["onUpdate:modelValue"], value);
      }
      call(props2.onChange, value, e);
      validateWithTrigger("onChange");
    }
    function handleClear() {
      const { disabled, readonly, clearable, onClear } = props2;
      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || !clearable) {
        return;
      }
      call(props2["onUpdate:modelValue"], "");
      call(onClear, "");
      validateWithTrigger("onClear");
    }
    function handleClick(e) {
      const { disabled, onClick } = props2;
      if ((form == null ? void 0 : form.disabled.value) || disabled) {
        return;
      }
      call(onClick, e);
      validateWithTrigger("onClick");
    }
    function formatNumber(value) {
      const minusIndex = value.indexOf("-");
      const dotIndex = value.indexOf(".");
      if (minusIndex > -1) {
        value = minusIndex === 0 ? "-" + value.replace(/-/g, "") : value.replace(/-/g, "");
      }
      if (dotIndex > -1) {
        value = value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, "");
      }
      return value.replace(/[^-0-9.]/g, "");
    }
    function withTrim(value) {
      return props2.modelModifiers.trim ? value.trim() : value;
    }
    function withMaxlength(value) {
      return props2.maxlength ? value.slice(0, toNumber(props2.maxlength)) : value;
    }
    function handleMousedown(e) {
      const { disabled } = props2;
      if ((form == null ? void 0 : form.disabled.value) || disabled || e.target === el.value) {
        return;
      }
      focus();
      preventDefault(e);
    }
    function reset() {
      call(props2["onUpdate:modelValue"], "");
      resetValidation();
    }
    function validate() {
      return v(props2.rules, props2.modelValue);
    }
    function focus() {
      var _a;
      ;
      (_a = el.value) == null ? void 0 : _a.focus();
    }
    function blur() {
      ;
      el.value.blur();
    }
    return {
      el,
      id,
      isFocusing,
      isComposing,
      errorMessage,
      placeholderColor,
      normalizedType,
      cursor,
      maxlengthText,
      formDisabled: form == null ? void 0 : form.disabled,
      formReadonly: form == null ? void 0 : form.readonly,
      n,
      classes,
      isEmpty,
      handleFocus,
      handleBlur,
      handleInput,
      handleChange,
      handleClear,
      handleClick,
      handleCompositionStart,
      handleCompositionEnd,
      handleMousedown,
      validate,
      resetValidation,
      reset,
      focus,
      blur
    };
  }
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
  stdin_default as default
};