xdesign-vue-next/cjs/input/input.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var closeCircleFill = require('../_chunks/dep-3fb13dcd.js');
var eyeLine = require('../_chunks/dep-a2621e42.js');
var vue = require('vue');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var input_props = require('./props.js');
var form_hooks = require('../form/hooks.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_tnode = require('../hooks/tnode.js');
var input_useInput = require('./useInput.js');
var input_useInputEventHandler = require('./useInputEventHandler.js');
var input_useInputWidth = require('./useInputWidth.js');
var isUndefined = require('lodash/isUndefined');
var configProvider_useConfig = require('../config-provider/useConfig.js');
require('lodash/isFunction');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isString');
require('lodash/isObject');
require('@babel/runtime/helpers/slicedToArray');
require('../form/const.js');
require('../hooks/useVModel.js');
require('./useLengthLimit.js');
require('../_common/js/log/log.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/toConsumableArray');
require('lodash/isNull');
require('lodash/isNumber');
require('lodash/isArray');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/en_US.js');
require('../_chunks/dep-8d10b59f.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);

const _hoisted_1 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2 = /*#__PURE__*/vue.createElementVNode("path", {
  fill: "currentColor",
  d: "M17.883 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.818-9A10.982 10.982 0 0 1 4.52 5.935L1.394 2.808l1.414-1.414l19.799 19.798l-1.414 1.415l-3.31-3.31ZM5.936 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.936 7.35Zm6.978 6.978l-3.242-3.241a2.5 2.5 0 0 0 3.241 3.241Zm7.893 2.265l-1.431-1.431A8.935 8.935 0 0 0 20.778 12A9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.593Zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.77Z"
}, null, -1 /* HOISTED */);
const _hoisted_3 = [
  _hoisted_2
];

function render(_ctx, _cache) {
  return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, _hoisted_3))
}

var __unplugin_components_0 = { name: 'ri-eye-off-line', render };
/* vite-plugin-components disabled */

var _excluded = ["isHover", "tStatus", "inputRef", "renderType", "showClear", "focused", "inputValue", "isComposition", "compositionValue", "innerValue", "limitNumber"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function getValidAttrs(obj) {
  var newObj = {};
  Object.keys(obj).forEach(function (key) {
    if (!isUndefined__default["default"](obj[key])) {
      newObj[key] = obj[key];
    }
  });
  return newObj;
}
var _Input = vue.defineComponent({
  name: "XInput",
  props: _objectSpread(_objectSpread({}, input_props["default"]), {}, {
    showInput: {
      type: Boolean,
      "default": true
    },
    keepWrapperWidth: {
      type: Boolean,
      "default": false
    },
    allowTriggerBlur: {
      type: Boolean,
      "default": true
    }
  }),
  setup: function setup(props2, _ref) {
    var expose = _ref.expose;
    var _useConfig = configProvider_useConfig.useConfig("input"),
      globalConfig = _useConfig.globalConfig;
    var disabled = form_hooks.useFormDisabled();
    var COMPONENT_NAME = hooks_useConfig.usePrefixClass("input");
    var INPUT_WRAP_CLASS = hooks_useConfig.usePrefixClass("input__wrap");
    var INPUT_TIPS_CLASS = hooks_useConfig.usePrefixClass("input__tips");
    var _useCommonClassName = hooks_useConfig.useCommonClassName(),
      STATUS = _useCommonClassName.STATUS,
      SIZE = _useCommonClassName.SIZE;
    var classPrefix = hooks_useConfig.usePrefixClass();
    var renderTNodeJSX = hooks_tnode.useTNodeJSX();
    var _useInput = input_useInput["default"](props2, expose),
      isHover = _useInput.isHover,
      tStatus = _useInput.tStatus,
      inputRef = _useInput.inputRef,
      renderType = _useInput.renderType,
      showClear = _useInput.showClear,
      focused = _useInput.focused,
      inputValue = _useInput.inputValue,
      isComposition = _useInput.isComposition,
      compositionValue = _useInput.compositionValue,
      innerValue = _useInput.innerValue,
      limitNumber = _useInput.limitNumber,
      inputHandle = _objectWithoutProperties__default["default"](_useInput, _excluded);
    var _useInputWidth = input_useInputWidth["default"](props2, inputRef, innerValue),
      inputPreRef = _useInputWidth.inputPreRef;
    var inputEventHandler = input_useInputEventHandler["default"](props2, isHover);
    var tPlaceholder = vue.computed(function () {
      var _props2$placeholder;
      return (_props2$placeholder = props2.placeholder) !== null && _props2$placeholder !== void 0 ? _props2$placeholder : globalConfig.value.placeholder;
    });
    var inputAttrs = vue.computed(function () {
      var _props2$autocomplete;
      return getValidAttrs({
        autofocus: props2.autofocus,
        disabled: disabled.value,
        readonly: props2.readonly,
        placeholder: tPlaceholder.value,
        maxlength: !props2.allowInputOverMax && props2.maxlength || void 0,
        name: props2.name || void 0,
        type: renderType.value,
        autocomplete: (_props2$autocomplete = props2.autocomplete) !== null && _props2$autocomplete !== void 0 ? _props2$autocomplete : globalConfig.value.autocomplete || void 0,
        unselectable: props2.readonly ? "on" : void 0
      });
    });
    var wrapClasses = vue.computed(function () {
      return [INPUT_WRAP_CLASS.value, _defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "--auto-width"), props2.autoWidth && !props2.keepWrapperWidth)];
    });
    var inputEvents = getValidAttrs({
      onFocus: function onFocus(e) {
        return inputHandle.emitFocus(e);
      },
      onBlur: inputHandle.formatAndEmitBlur,
      onKeydown: inputEventHandler.handleKeydown,
      onKeyup: inputEventHandler.handleKeyUp,
      onKeypress: inputEventHandler.handleKeypress,
      onPaste: inputEventHandler.onHandlePaste,
      onCompositionend: inputHandle.onHandleCompositionend,
      onCompositionstart: inputHandle.onHandleCompositionstart
    });
    return function () {
      var _ref4, _compositionValue$val, _inputValue$value;
      var prefixIcon = renderTNodeJSX("prefixIcon");
      var suffixIcon = renderTNodeJSX("suffixIcon");
      var passwordIcon = renderTNodeJSX("passwordIcon");
      var label = renderTNodeJSX("label", {
        silent: true
      });
      var suffix = renderTNodeJSX("suffix");
      var limitNode = limitNumber.value && props2.showLimitNumber ? vue.createVNode("div", {
        "class": ["".concat(classPrefix.value, "-input__limit-number"), _defineProperty__default["default"]({}, "".concat(classPrefix.value, "-is-disabled"), disabled.value)]
      }, [limitNumber.value]) : null;
      var labelContent = label ? vue.createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "__prefix")
      }, [label]) : null;
      var suffixContent = suffix || limitNode ? vue.createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "__suffix")
      }, [suffix, limitNode]) : null;
      if (props2.type === "password") {
        if (renderType.value === "password") {
          suffixIcon = vue.createVNode(__unplugin_components_0, {
            "class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
            "onClick": inputHandle.emitPassword
          }, null);
        } else if (renderType.value === "text") {
          suffixIcon = vue.createVNode(eyeLine.__unplugin_components_3, {
            "class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
            "onClick": inputHandle.emitPassword
          }, null);
        }
      }
      if (showClear.value) {
        if (props2.type === "password") {
          passwordIcon = vue.createVNode(closeCircleFill.__unplugin_components_6, {
            "ref": inputHandle.clearIconRef,
            "class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
            "onClick": inputHandle.emitClear,
            "onMousedown": inputHandle.onClearIconMousedown
          }, null);
        } else {
          suffixIcon = vue.createVNode(closeCircleFill.__unplugin_components_6, {
            "ref": inputHandle.clearIconRef,
            "class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
            "onClick": inputHandle.emitClear,
            "onMousedown": inputHandle.onClearIconMousedown
          }, null);
        }
      }
      var classes = [COMPONENT_NAME.value, props2.inputClass, (_ref4 = {}, _defineProperty__default["default"](_ref4, SIZE.value[props2.size], props2.size !== "medium"), _defineProperty__default["default"](_ref4, STATUS.value.disabled, disabled.value), _defineProperty__default["default"](_ref4, STATUS.value.focused, focused.value), _defineProperty__default["default"](_ref4, "".concat(classPrefix.value, "-is-").concat(tStatus.value), tStatus.value && tStatus.value !== "default"), _defineProperty__default["default"](_ref4, "".concat(classPrefix.value, "-align-").concat(props2.align), props2.align !== "left"), _defineProperty__default["default"](_ref4, "".concat(classPrefix.value, "-is-readonly"), props2.readonly), _defineProperty__default["default"](_ref4, "".concat(COMPONENT_NAME.value, "--prefix"), prefixIcon || labelContent), _defineProperty__default["default"](_ref4, "".concat(COMPONENT_NAME.value, "--suffix"), suffixIcon || suffixContent), _defineProperty__default["default"](_ref4, "".concat(COMPONENT_NAME.value, "--focused"), focused.value), _ref4)];
      var tips = renderTNodeJSX("tips");
      var tipsClasses = [INPUT_TIPS_CLASS.value, "".concat(classPrefix.value, "-tips"), "".concat(classPrefix.value, "-is-").concat(tStatus.value || "default")];
      return vue.withDirectives(vue.createVNode("div", {
        "class": wrapClasses.value
      }, [vue.createVNode("div", {
        "class": classes,
        "onClick": inputHandle.onRootClick,
        "onMouseenter": inputEventHandler.onInputMouseenter,
        "onMouseleave": inputEventHandler.onInputMouseleave,
        "onWheel": inputEventHandler.onHandleMousewheel
      }, [prefixIcon ? vue.createVNode("span", {
        "class": ["".concat(COMPONENT_NAME.value, "__prefix"), "".concat(COMPONENT_NAME.value, "__prefix-icon")]
      }, [prefixIcon]) : null, labelContent, props2.showInput && vue.createVNode("input", vue.mergeProps({
        "class": "".concat(COMPONENT_NAME.value, "__inner")
      }, inputAttrs.value, inputEvents, {
        "ref": inputRef,
        "value": isComposition.value ? (_compositionValue$val = compositionValue.value) !== null && _compositionValue$val !== void 0 ? _compositionValue$val : "" : (_inputValue$value = inputValue.value) !== null && _inputValue$value !== void 0 ? _inputValue$value : "",
        "onInput": function onInput(e) {
          return inputHandle.handleInput(e);
        }
      }), null), props2.autoWidth && vue.createVNode("span", {
        "ref": inputPreRef,
        "class": "".concat(classPrefix.value, "-input__input-pre")
      }, [innerValue.value || tPlaceholder.value]), suffixContent, passwordIcon ? vue.createVNode("span", {
        "class": ["".concat(COMPONENT_NAME.value, "__suffix"), "".concat(COMPONENT_NAME.value, "__suffix-icon"), "".concat(COMPONENT_NAME.value, "__clear")]
      }, [passwordIcon]) : null, suffixIcon ? vue.createVNode("span", {
        "class": ["".concat(COMPONENT_NAME.value, "__suffix"), "".concat(COMPONENT_NAME.value, "__suffix-icon"), _defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__clear"), showClear.value)]
      }, [suffixIcon]) : null]), tips && vue.createVNode("div", {
        "class": tipsClasses
      }, [tips])]), [[vue.vShow, props2.type !== "hidden"]]);
    };
  }
});

exports["default"] = _Input;
//# sourceMappingURL=input.js.map