zmp-vue/cjs/zalo-ui-kits/input.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _mixins = require("../shared/mixins");

var _utils = require("../shared/utils");

var _utils2 = require("../../common/utils");

var _input = _interopRequireDefault(require("../components/input"));

var _icon = _interopRequireDefault(require("../components/icon"));

var _constants = require("../../common/constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _hoisted_1 = {
  class: "zmp-input-wrapper"
};
var _hoisted_2 = {
  key: 0,
  class: "item-title item-label"
};

function render(_ctx, _cache) {
  var _component_Icon = (0, _vue.resolveComponent)("Icon");

  var _component_Input = (0, _vue.resolveComponent)("Input");

  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_1, [_ctx.label ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.label), 1)) : (0, _vue.createCommentVNode)("", true), (0, _vue.createVNode)(_component_Input, (0, _vue.mergeProps)(_extends({}, _ctx.$props, _ctx.$attrs), {
    value: _ctx.value,
    info: undefined,
    class: _ctx.type === 'password' ? "item-input-password " + (_ctx.valid ? 'item-input-successful' : '') : _ctx.inputClasses,
    type: _ctx.type === 'password' ? _ctx.showPassword ? 'text' : 'password' : !_ctx.$slots.default && !_ctx.type ? 'text' : _ctx.type,
    rows: _ctx.type === 'textarea' && _ctx.isValidTextareaMinRows ? _ctx.minRows : undefined,
    "onUpdate:value": _cache[1] || (_cache[1] = function ($event) {
      return _ctx.$emit('update:value', $event);
    }),
    onValidate: _ctx.handleValidate
  }), (0, _vue.createSlots)({
    _: 2
  }, [(0, _vue.renderList)(_ctx.$slots, function (_, name) {
    return {
      name: name,
      fn: (0, _vue.withCtx)(function (slotData) {
        return [name !== 'info' ? (0, _vue.renderSlot)(_ctx.$slots, name, (0, _vue.mergeProps)({
          key: 0
        }, slotData)) : (0, _vue.createCommentVNode)("", true)];
      })
    };
  }), _ctx.info || !!_ctx.$slots.info ? {
    name: "info",
    fn: (0, _vue.withCtx)(function () {
      return [(0, _vue.createVNode)("div", null, [(0, _vue.createVNode)(_component_Icon, {
        class: "item-input-info-icon",
        size: _ctx.ICON_SIZE_SM,
        zmp: _ctx.valid ? _ctx.ICON_CHECK : _ctx.ICON_INFO_CIRCLE
      }, null, 8, ["size", "zmp"]), !!_ctx.$slots.info ? (0, _vue.renderSlot)(_ctx.$slots, "info", {
        key: 0
      }) : ((0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Fragment, {
        key: 1
      }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.info), 1)], 64))])];
    })
  } : undefined]), 1040, ["value", "class", "type", "rows", "onValidate"]), _ctx.type === 'password' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("span", {
    key: 1,
    class: "show-password-button",
    onClick: _cache[2] || (_cache[2] = function () {
      return _ctx.handleClickShowPassword && _ctx.handleClickShowPassword.apply(_ctx, arguments);
    })
  }, [(0, _vue.createVNode)(_component_Icon, {
    zmp: _ctx.showPassword ? _ctx.ICON_EYE_FILL : _ctx.ICON_EYE
  }, null, 8, ["zmp"])])) : (0, _vue.createCommentVNode)("", true)]);
}

var _default = {
  name: 'zmp-input',
  render: render,
  components: {
    Input: _input.default,
    Icon: _icon.default
  },
  props: _extends({
    type: String,
    name: String,
    value: [String, Number, Array, Date, Object],
    inputmode: String,
    placeholder: String,
    size: [String, Number],
    accept: [String, Number],
    autocomplete: String,
    autocorrect: String,
    autocapitalize: String,
    spellcheck: String,
    autofocus: Boolean,
    autosave: String,
    checked: Boolean,
    disabled: Boolean,
    max: [String, Number],
    min: [String, Number],
    step: [String, Number],
    maxlength: [String, Number],
    minlength: [String, Number],
    multiple: Boolean,
    readonly: Boolean,
    required: Boolean,
    pattern: String,
    validate: [Boolean, String],
    validateOnBlur: Boolean,
    onValidate: Function,
    tabindex: [String, Number],
    resizable: Boolean,
    minRows: Number,
    maxRows: {
      type: Number,
      default: 8
    },
    clearButton: Boolean,
    noFormStoreData: Boolean,
    noStoreData: Boolean,
    ignoreStoreData: Boolean,
    errorMessage: String,
    errorMessageForce: Boolean,
    info: String,
    label: String,
    outline: Boolean,
    wrap: {
      type: Boolean,
      default: true
    },
    dropdown: {
      type: [String, Boolean],
      default: 'auto'
    },
    calendarParams: Object,
    colorPickerParams: Object,
    textEditorParams: Object,
    inputStyle: [String, Object]
  }, _mixins.colorProps),
  emits: ['update:value', 'validate'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var valid = (0, _vue.ref)(undefined);
    var showPassword = (0, _vue.ref)(false);

    var handleValidate = function handleValidate(isValid) {
      valid.value = isValid;
      emit('validate', isValid);
    };

    var handleClickShowPassword = function handleClickShowPassword() {
      showPassword.value = !showPassword.value;
    };

    var isValidTextareaMinRows = (0, _vue.computed)(function () {
      return (0, _utils2.isNumber)(props.minRows) && props.minRows >= _constants.RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MIN && props.minRows <= _constants.RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MAX;
    });
    var isValidTextareaMaxRows = (0, _vue.computed)(function () {
      return (0, _utils2.isNumber)(props.maxRows) && props.maxRows >= _constants.RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MIN && props.maxRows <= _constants.RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MAX;
    });
    var inputClasses = (0, _vue.computed)(function () {
      var _classNames;

      return (0, _utils.classNames)((_classNames = {
        'item-input-successful': valid.value
      }, _classNames["textarea-rows-" + props.minRows] = props.type === 'textarea' && props.resizable && isValidTextareaMinRows.value, _classNames["textarea-max-rows-" + props.maxRows] = props.type === 'textarea' && props.resizable && isValidTextareaMaxRows.value, _classNames));
    });
    return {
      handleValidate: handleValidate,
      handleClickShowPassword: handleClickShowPassword,
      inputClasses: inputClasses,
      ICON_SIZE_SM: _constants.ICON_SIZE_SM,
      ICON_CHECK: _constants.ICON_CHECK,
      ICON_INFO_CIRCLE: _constants.ICON_INFO_CIRCLE,
      ICON_EYE_FILL: _constants.ICON_EYE_FILL,
      ICON_EYE: _constants.ICON_EYE,
      ICON_SIZE_MD: _constants.ICON_SIZE_MD,
      showPassword: showPassword
    };
  }
};
exports.default = _default;