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

Build full featured iOS & Android apps using ZMP & Vue

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); }

import { toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, resolveComponent as _resolveComponent, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots } from "vue";
var _hoisted_1 = {
  class: "zmp-input-wrapper"
};
var _hoisted_2 = {
  key: 0,
  class: "item-title item-label"
};

function render(_ctx, _cache) {
  var _component_Icon = _resolveComponent("Icon");

  var _component_Input = _resolveComponent("Input");

  return _openBlock(), _createBlock("div", _hoisted_1, [_ctx.label ? (_openBlock(), _createBlock("span", _hoisted_2, _toDisplayString(_ctx.label), 1)) : _createCommentVNode("", true), _createVNode(_component_Input, _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
  }), _createSlots({
    _: 2
  }, [_renderList(_ctx.$slots, function (_, name) {
    return {
      name: name,
      fn: _withCtx(function (slotData) {
        return [name !== 'info' ? _renderSlot(_ctx.$slots, name, _mergeProps({
          key: 0
        }, slotData)) : _createCommentVNode("", true)];
      })
    };
  }), _ctx.info || !!_ctx.$slots.info ? {
    name: "info",
    fn: _withCtx(function () {
      return [_createVNode("div", null, [_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 ? _renderSlot(_ctx.$slots, "info", {
        key: 0
      }) : (_openBlock(), _createBlock(_Fragment, {
        key: 1
      }, [_createTextVNode(_toDisplayString(_ctx.info), 1)], 64))])];
    })
  } : undefined]), 1040, ["value", "class", "type", "rows", "onValidate"]), _ctx.type === 'password' ? (_openBlock(), _createBlock("span", {
    key: 1,
    class: "show-password-button",
    onClick: _cache[2] || (_cache[2] = function () {
      return _ctx.handleClickShowPassword && _ctx.handleClickShowPassword.apply(_ctx, arguments);
    })
  }, [_createVNode(_component_Icon, {
    zmp: _ctx.showPassword ? _ctx.ICON_EYE_FILL : _ctx.ICON_EYE
  }, null, 8, ["zmp"])])) : _createCommentVNode("", true)]);
}

import { ref, computed } from 'vue';
import { colorProps } from '../shared/mixins';
import { classNames } from '../shared/utils';
import { isNumber } from '../../common/utils';
import Input from '../components/input';
import Icon from '../components/icon';
import { ICON_SIZE_SM, ICON_CHECK, ICON_INFO_CIRCLE, ICON_EYE_FILL, ICON_EYE, ICON_SIZE_MD, RESIZABLE_TEXTAREA_HEIGHT } from '../../common/constants';
export default {
  name: 'zmp-input',
  render: render,
  components: {
    Input: Input,
    Icon: Icon
  },
  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]
  }, colorProps),
  emits: ['update:value', 'validate'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var valid = ref(undefined);
    var showPassword = ref(false);

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

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

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

      return 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: ICON_SIZE_SM,
      ICON_CHECK: ICON_CHECK,
      ICON_INFO_CIRCLE: ICON_INFO_CIRCLE,
      ICON_EYE_FILL: ICON_EYE_FILL,
      ICON_EYE: ICON_EYE,
      ICON_SIZE_MD: ICON_SIZE_MD,
      showPassword: showPassword
    };
  }
};