@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/input/Input.js

@@ -1,304 +0,0 @@
-"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 = ["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[0] || (_cache[0] = (...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), ((0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.textarea ? 'textarea' : 'input'), {
-    class: (0, _vue.normalizeClass)(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.textarea ? 'var-input--textarea' : 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: _ctx.handleFocus,
-    onBlur: _ctx.handleBlur,
-    onInput: _ctx.handleInput,
-    onChange: _ctx.handleChange
-  }, null, 8
-  /* PROPS */
-  , ["id", "disabled", "type", "value", "maxlength", "rows", "class", "style", "onFocus", "onBlur", "onInput", "onChange"])), (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_2)], 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

@@ -1,17 +0,0 @@
-"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

@@ -1 +0,0 @@
-: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

@@ -1,183 +0,0 @@
-@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

@@ -1,96 +0,0 @@
-"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

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

package/lib/input/style/index.js

@@ -1,5 +0,0 @@
-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

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