@varlet/ui 1.23.3-alpha.1 → 1.23.4-alpha.16

package/lib/input/Input.js

@@ -0,0 +1,327 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _components = require("../utils/components");
+
+var _provide = require("../form/provide");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  key: 0,
+  class: "var-input__autocomplete"
+};
+var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength", "rows"];
+var _hoisted_3 = ["id", "disabled", "type", "value", "maxlength"];
+var _hoisted_4 = ["for"];
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
+    onClick: _cache[8] || (_cache[8] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "prepend-icon")], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
+  }, [_ctx.type === 'password' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true), _ctx.textarea ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("textarea", {
+    key: 1,
+    class: (0, _vue.normalizeClass)(["var-input__input var-input--textarea", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    ref: "el",
+    autocomplete: "new-password",
+    id: _ctx.id,
+    disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+    type: _ctx.type,
+    value: _ctx.modelValue,
+    maxlength: _ctx.maxlength,
+    rows: _ctx.rows,
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.textColor,
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null,
+      resize: _ctx.resize ? 'vertical' : 'none'
+    }),
+    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))
+  }, "\n        ", 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_2)) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", {
+    key: 2,
+    class: (0, _vue.normalizeClass)(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    ref: "el",
+    autocomplete: "new-password",
+    id: _ctx.id,
+    disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+    type: _ctx.type,
+    value: _ctx.modelValue,
+    maxlength: _ctx.maxlength,
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.textColor,
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null
+    }),
+    onFocus: _cache[4] || (_cache[4] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[5] || (_cache[5] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+    onInput: _cache[6] || (_cache[6] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+    onChange: _cache[7] || (_cache[7] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_3)), (0, _vue.createElementVNode)("label", {
+    class: (0, _vue.normalizeClass)([_ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null]),
+    for: _ctx.id
+  }, (0, _vue.toDisplayString)(_ctx.placeholder), 11
+  /* TEXT, CLASS, PROPS */
+  , _hoisted_4)], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 0,
+    class: "var-input__clear-icon",
+    "var-input-cover": "",
+    name: "close-circle",
+    size: "14px",
+    onClick: _ctx.handleClear
+  }, null, 8
+  /* PROPS */
+  , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  ), _ctx.line ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(["var-input__line", [_ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      background: !_ctx.errorMessage ? _ctx.blurColor : undefined
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__dot", [_ctx.isFocus ? 'var-input--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      background: !_ctx.errorMessage ? _ctx.focusColor : undefined
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage,
+    "maxlength-text": _ctx.maxlengthText
+  }, null, 8
+  /* PROPS */
+  , ["error-message", "maxlength-text"])], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarInput',
+  components: {
+    VarIcon: _icon.default,
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var id = (0, _vue.ref)("var-input-" + (0, _vue.getCurrentInstance)().uid);
+    var el = (0, _vue.ref)(null);
+    var isFocus = (0, _vue.ref)(false);
+    var maxlengthText = (0, _vue.computed)(() => {
+      var {
+        maxlength,
+        modelValue
+      } = props;
+
+      if (!maxlength) {
+        return '';
+      }
+
+      if ((0, _shared.isEmpty)(modelValue)) {
+        return "0 / " + maxlength;
+      }
+
+      return String(modelValue).length + "/" + maxlength;
+    });
+    var {
+      bindForm,
+      form
+    } = (0, _provide.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    };
+
+    var computePlaceholderState = () => {
+      var {
+        hint,
+        modelValue
+      } = props;
+
+      if (!hint && !(0, _shared.isEmpty)(modelValue)) {
+        return 'var-input--placeholder-hidden';
+      }
+
+      if (hint && (!(0, _shared.isEmpty)(modelValue) || isFocus.value)) {
+        return 'var-input--placeholder-hint';
+      }
+    };
+
+    var handleFocus = e => {
+      isFocus.value = true;
+      props.onFocus == null ? void 0 : props.onFocus(e);
+      validateWithTrigger('onFocus');
+    };
+
+    var handleBlur = e => {
+      isFocus.value = false;
+      props.onBlur == null ? void 0 : props.onBlur(e);
+      validateWithTrigger('onBlur');
+    };
+
+    var handleInput = e => {
+      var _props$onUpdateModel;
+
+      var {
+        value
+      } = e.target;
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value);
+      props.onInput == null ? void 0 : props.onInput(value, e);
+      validateWithTrigger('onInput');
+    };
+
+    var handleChange = e => {
+      var {
+        value
+      } = e.target;
+      props.onChange == null ? void 0 : props.onChange(value, e);
+      validateWithTrigger('onChange');
+    };
+
+    var handleClear = () => {
+      var _props$onUpdateModel2;
+
+      var {
+        disabled,
+        readonly,
+        clearable,
+        onClear
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly || !clearable) {
+        return;
+      }
+
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, '');
+      onClear == null ? void 0 : onClear('');
+      validateWithTrigger('onClear');
+    };
+
+    var handleClick = e => {
+      var {
+        disabled,
+        onClick
+      } = props;
+
+      if (form != null && form.disabled.value || disabled) {
+        return;
+      }
+
+      onClick == null ? void 0 : onClick(e);
+      validateWithTrigger('onClick');
+    }; // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel3;
+
+      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, '');
+      resetValidation();
+    }; // expose
+
+
+    var validate = () => v(props.rules, props.modelValue); // expose
+
+
+    var focus = () => {
+      ;
+      el.value.focus();
+    }; // expose
+
+
+    var blur = () => {
+      ;
+      el.value.blur();
+    };
+
+    var inputProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    bindForm == null ? void 0 : bindForm(inputProvider);
+    return {
+      el,
+      id,
+      isFocus,
+      errorMessage,
+      maxlengthText,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      isEmpty: _shared.isEmpty,
+      computePlaceholderState,
+      handleFocus,
+      handleBlur,
+      handleInput,
+      handleChange,
+      handleClear,
+      handleClick,
+      validate,
+      resetValidation,
+      reset,
+      focus,
+      blur
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/input/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._InputComponent = void 0;
+
+var _Input = _interopRequireDefault(require("./Input.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Input.default.install = function (app) {
+  app.component(_Input.default.name, _Input.default);
+};
+
+var _InputComponent = _Input.default;
+exports._InputComponent = _InputComponent;
+var _default = _Input.default;
+exports.default = _default;

package/lib/input/input.css

@@ -0,0 +1 @@
+:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color); font: inherit;}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { -webkit-text-fill-color: var(--input-disabled-color); opacity: 1; color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}

package/lib/input/input.less

@@ -0,0 +1,183 @@
+@input-input-text-color: #555;
+@input-error-color: var(--color-danger);
+@input-blur-color: #888;
+@input-focus-color: var(--color-primary);
+@input-placeholder-size: 16px;
+@input-textarea-height: auto;
+@input-textarea-padding-top: 8px;
+@input-icon-padding: 16px 0 0;
+@input-icon-size: 20px;
+@input-line-size: 1px;
+@input-line-spread-size: 2px;
+@input-disabled-color: var(--color-text-disabled);
+
+:root {
+  --input-input-text-color: @input-input-text-color;
+  --input-error-color: @input-error-color;
+  --input-blur-color: @input-blur-color;
+  --input-focus-color: @input-focus-color;
+  --input-placeholder-size: @input-placeholder-size;
+  --input-textarea-height: @input-textarea-height;
+  --input-textarea-padding-top: @input-textarea-padding-top;
+  --input-icon-padding: @input-icon-padding;
+  --input-icon-size: @input-icon-size;
+  --input-line-size: @input-line-size;
+  --input-line-spread-size: @input-line-spread-size;
+  --input-disabled-color: @input-disabled-color;
+}
+
+.var {
+  &-input-footer-margin-enter-from,
+  &-input-footer-margin-leave-to {
+    opacity: 0;
+    margin-top: 2px !important;
+  }
+
+  &-input-footer-margin-enter-active,
+  &-input-footer-margin-leave-active {
+    transition: 0.2s all var(--cubic-bezier);
+  }
+}
+
+.var-input {
+  width: 100%;
+  color: var(--input-input-text-color);
+
+  &__controller {
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  &__wrap {
+    position: relative;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--input-placeholder-size);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    padding: var(--input-icon-padding);
+    font-size: 20px;
+  }
+
+  &__placeholder {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform-origin: left;
+    transition-property: top, transform;
+    transition-duration: 0.3s;
+    transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1);
+    font-size: var(--input-placeholder-size);
+    color: var(--input-blur-color);
+  }
+
+  &__textarea-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: left;
+    transition: transform 0.3s;
+    transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1);
+    font-size: var(--input-placeholder-size);
+    color: var(--input-blur-color);
+  }
+
+  &__autocomplete {
+    width: 0;
+    height: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    font-size: 0;
+  }
+
+  &__input {
+    width: 100%;
+    height: 32px;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: var(--input-input-text-color);
+    caret-color: var(--input-focus-color);
+    font: inherit;
+  }
+
+  &__line {
+    width: 100%;
+    height: var(--input-line-size);
+    background: var(--input-blur-color);
+  }
+
+  &__dot {
+    width: 100%;
+    height: var(--input-line-spread-size);
+    background: var(--input-focus-color);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform 0.3s var(--cubic-bezier);
+  }
+
+  &__clear-icon[var-input-cover] {
+    display: flex;
+    margin-left: 4px;
+  }
+
+  &--textarea {
+    padding-top: var(--input-textarea-padding-top);
+    height: var(--input-textarea-height);
+  }
+
+  &--placeholder-hint {
+    top: 0;
+    transform: translate(0, 0) scale(0.75);
+  }
+
+  &--placeholder-non-hint {
+    top: 50%;
+    transform: translate(0, -50%) scale(1);
+  }
+
+  &--non-hint {
+    padding-top: 0;
+  }
+
+  &--placeholder-hidden {
+    visibility: hidden;
+  }
+
+  &--focus {
+    color: var(--input-focus-color);
+  }
+
+  &--spread {
+    transform: scaleX(1);
+  }
+
+  &--disabled {
+    -webkit-text-fill-color: var(--input-disabled-color);
+    opacity: 1;
+    color: var(--input-disabled-color);
+  }
+
+  &--error {
+    color: var(--input-error-color);
+  }
+
+  &--line-disabled {
+    background: var(--input-disabled-color);
+  }
+
+  &--line-error {
+    background: var(--input-error-color);
+  }
+
+  &--caret-error {
+    caret-color: var(--input-error-color);
+  }
+}

package/lib/input/props.js

@@ -0,0 +1,96 @@
+"use strict";
+
+exports.__esModule = true;
+exports.typeValidator = typeValidator;
+exports.props = void 0;
+
+function typeValidator(type) {
+  return ['text', 'password', 'number'].includes(type);
+}
+
+var props = {
+  modelValue: {
+    type: String
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: typeValidator
+  },
+  textarea: {
+    type: Boolean,
+    default: false
+  },
+  rows: {
+    type: [String, Number],
+    default: 8
+  },
+  placeholder: {
+    type: String
+  },
+  line: {
+    type: Boolean,
+    default: true
+  },
+  hint: {
+    type: Boolean,
+    default: true
+  },
+  textColor: {
+    type: String
+  },
+  focusColor: {
+    type: String
+  },
+  blurColor: {
+    type: String
+  },
+  maxlength: {
+    type: [String, Number]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  resize: {
+    type: Boolean,
+    default: false
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ['onInput', 'onClear']
+  },
+  rules: {
+    type: Array
+  },
+  onFocus: {
+    type: Function
+  },
+  onBlur: {
+    type: Function
+  },
+  onClick: {
+    type: Function
+  },
+  onClear: {
+    type: Function
+  },
+  onInput: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/input/provide.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/lib/input/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../icon/icon.css')
+require('../../form-details/formDetails.css')
+require('../input.css')
+require('../InputSfc.css')

package/lib/input/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../icon/icon.less')
+require('../../form-details/formDetails.less')
+require('../input.less')
+require('../InputSfc.less')