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

package/lib/counter/Counter.js

@@ -0,0 +1,387 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _vue = require("vue");
+
+var _decimal = require("decimal.js");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _elements = require("../utils/elements");
+
+var _provide = require("../form/provide");
+
+var _components = require("../utils/components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SPEED = 100;
+var DELAY = 600;
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-counter var--box"
+};
+var _hoisted_2 = ["inputmode", "readonly", "disabled"];
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+    class: ["var-counter__controller var-elevation--2", [_ctx.disabled || _ctx.formDisabled ? 'var-counter--disabled' : null, _ctx.errorMessage ? 'var-counter--error' : null]],
+    style: {
+      background: _ctx.color ? _ctx.color : undefined
+    }
+  }, _ctx.$attrs), [(0, _vue.withDirectives)((0, _vue.createVNode)(_component_var_icon, {
+    class: (0, _vue.normalizeClass)(["var-counter__decrement-button", [!_ctx.decrementButton ? 'var-counter--hidden' : null]]),
+    "var-counter-cover": "",
+    name: "minus",
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.toSizeUnit(_ctx.buttonSize),
+      height: _ctx.toSizeUnit(_ctx.buttonSize)
+    }),
+    onClick: _ctx.decrement,
+    onTouchstart: _ctx.pressDecrement,
+    onTouchend: _ctx.releaseDecrement,
+    onTouchcancel: _ctx.releaseDecrement
+  }, null, 8
+  /* PROPS */
+  , ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
+    disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.disableDecrement || !_ctx.decrementButton || _ctx.isMin
+  }]]), (0, _vue.withDirectives)((0, _vue.createElementVNode)("input", {
+    class: "var-counter__input",
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.toSizeUnit(_ctx.inputWidth),
+      fontSize: _ctx.toSizeUnit(_ctx.inputTextSize)
+    }),
+    inputmode: _ctx.toNumber(_ctx.decimalLength) === 0 ? 'numeric' : 'decimal',
+    readonly: _ctx.readonly || _ctx.formReadonly,
+    disabled: _ctx.disabled || _ctx.formDisabled || _ctx.disableInput,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.inputValue = $event),
+    onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+  }, null, 44
+  /* STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_2), [[_vue.vModelText, _ctx.inputValue]]), (0, _vue.withDirectives)((0, _vue.createVNode)(_component_var_icon, {
+    class: (0, _vue.normalizeClass)(["var-counter__increment-button", [!_ctx.incrementButton ? 'var-counter--hidden' : null]]),
+    "var-counter-cover": "",
+    name: "plus",
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.toSizeUnit(_ctx.buttonSize),
+      height: _ctx.toSizeUnit(_ctx.buttonSize)
+    }),
+    onClick: _ctx.increment,
+    onTouchstart: _ctx.pressIncrement,
+    onTouchend: _ctx.releaseIncrement,
+    onTouchcancel: _ctx.releaseIncrement
+  }, null, 8
+  /* PROPS */
+  , ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
+    disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.disableIncrement || !_ctx.incrementButton || _ctx.isMax
+  }]])], 16
+  /* FULL_PROPS */
+  ), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage
+  }, null, 8
+  /* PROPS */
+  , ["error-message"])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarCounter',
+  components: {
+    VarIcon: _icon.default,
+    VarFormDetails: _formDetails.default
+  },
+  directives: {
+    Ripple: _ripple.default
+  },
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var inputValue = (0, _vue.ref)('');
+    var incrementTimer;
+    var decrementTimer;
+    var incrementDelayTimer;
+    var decrementDelayTimer;
+    var {
+      bindForm,
+      form
+    } = (0, _provide.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+    var {
+      readonly: formReadonly,
+      disabled: formDisabled
+    } = form != null ? form : {}; // expose
+
+    var validate = () => v(props.rules, props.modelValue);
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }; // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel;
+
+      var {
+        min
+      } = props;
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, min != null ? (0, _shared.toNumber)(min) : 0);
+      resetValidation();
+    };
+
+    var counterProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    var isMax = (0, _vue.computed)(() => {
+      var {
+        max,
+        modelValue
+      } = props;
+      return max != null && (0, _shared.toNumber)(modelValue) >= (0, _shared.toNumber)(max);
+    });
+    var isMin = (0, _vue.computed)(() => {
+      var {
+        min,
+        modelValue
+      } = props;
+      return min != null && (0, _shared.toNumber)(modelValue) <= (0, _shared.toNumber)(min);
+    });
+
+    var normalizeValue = value => {
+      var {
+        decimalLength,
+        max,
+        min
+      } = props;
+      var num = (0, _shared.toNumber)(value);
+
+      if (max != null && num > (0, _shared.toNumber)(max)) {
+        num = (0, _shared.toNumber)(max);
+      }
+
+      if (min != null && num < (0, _shared.toNumber)(min)) {
+        num = (0, _shared.toNumber)(min);
+      }
+
+      value = String(num);
+
+      if (decimalLength != null) {
+        value = num.toFixed((0, _shared.toNumber)(decimalLength));
+      }
+
+      return value;
+    };
+
+    var handleChange = event => {
+      var {
+        lazyChange,
+        onBeforeChange
+      } = props;
+      var {
+        value
+      } = event.target;
+      var normalizedValue = normalizeValue(value);
+      lazyChange ? onBeforeChange == null ? void 0 : onBeforeChange((0, _shared.toNumber)(normalizedValue), change) : setNormalizedValue(normalizedValue);
+      validateWithTrigger('onInputChange');
+    };
+
+    var decrement = () => {
+      var {
+        disabled,
+        readonly,
+        disableDecrement,
+        decrementButton,
+        lazyChange,
+        step,
+        modelValue,
+        onDecrement,
+        onBeforeChange
+      } = props;
+
+      if (formDisabled != null && formDisabled.value || formReadonly != null && formReadonly.value || disabled || readonly || disableDecrement || !decrementButton) {
+        return;
+      }
+
+      if (isMin.value) {
+        return;
+      }
+
+      var value = new _decimal.Decimal((0, _shared.toNumber)(modelValue)).minus(new _decimal.Decimal((0, _shared.toNumber)(step))).toString();
+      var normalizedValue = normalizeValue(value);
+      var normalizedValueNum = (0, _shared.toNumber)(normalizedValue);
+      onDecrement == null ? void 0 : onDecrement(normalizedValueNum);
+
+      if (lazyChange) {
+        onBeforeChange == null ? void 0 : onBeforeChange(normalizedValueNum, change);
+      } else {
+        setNormalizedValue(normalizedValue);
+        validateWithTrigger('onDecrement');
+      }
+    };
+
+    var increment = () => {
+      var {
+        disabled,
+        readonly,
+        disableIncrement,
+        incrementButton,
+        lazyChange,
+        step,
+        modelValue,
+        onIncrement,
+        onBeforeChange
+      } = props;
+
+      if (formDisabled != null && formDisabled.value || formReadonly != null && formReadonly.value || disabled || readonly || disableIncrement || !incrementButton) {
+        return;
+      }
+
+      if (isMax.value) {
+        return;
+      }
+
+      var value = new _decimal.Decimal((0, _shared.toNumber)(modelValue)).plus(new _decimal.Decimal((0, _shared.toNumber)(step))).toString();
+      var normalizedValue = normalizeValue(value);
+      var normalizedValueNum = (0, _shared.toNumber)(normalizedValue);
+      onIncrement == null ? void 0 : onIncrement(normalizedValueNum);
+
+      if (lazyChange) {
+        onBeforeChange == null ? void 0 : onBeforeChange(normalizedValueNum, change);
+      } else {
+        setNormalizedValue(normalizedValue);
+        validateWithTrigger('onIncrement');
+      }
+    };
+
+    var pressDecrement = () => {
+      var {
+        press,
+        lazyChange
+      } = props;
+
+      if (!press || lazyChange) {
+        return;
+      }
+
+      decrementDelayTimer = window.setTimeout(() => {
+        continuedDecrement();
+      }, DELAY);
+    };
+
+    var pressIncrement = () => {
+      var {
+        press,
+        lazyChange
+      } = props;
+
+      if (!press || lazyChange) {
+        return;
+      }
+
+      incrementDelayTimer = window.setTimeout(() => {
+        continuedIncrement();
+      }, DELAY);
+    };
+
+    var releaseDecrement = () => {
+      decrementTimer && clearTimeout(decrementTimer);
+      decrementDelayTimer && clearTimeout(decrementDelayTimer);
+    };
+
+    var releaseIncrement = () => {
+      incrementTimer && clearTimeout(incrementTimer);
+      incrementDelayTimer && clearTimeout(incrementDelayTimer);
+    };
+
+    var continuedIncrement = () => {
+      incrementTimer = window.setTimeout(() => {
+        increment();
+        continuedIncrement();
+      }, SPEED);
+    };
+
+    var continuedDecrement = () => {
+      decrementTimer = window.setTimeout(() => {
+        decrement();
+        continuedDecrement();
+      }, SPEED);
+    };
+
+    var setNormalizedValue = normalizedValue => {
+      var _props$onUpdateModel2;
+
+      inputValue.value = normalizedValue;
+      var normalizedValueNum = (0, _shared.toNumber)(normalizedValue);
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, normalizedValueNum);
+    };
+
+    var change = value => {
+      setNormalizedValue(normalizeValue(String(value)));
+      validateWithTrigger('onLazyChange');
+    };
+
+    bindForm == null ? void 0 : bindForm(counterProvider);
+    (0, _vue.watch)(() => props.modelValue, newValue => {
+      setNormalizedValue(normalizeValue(String(newValue)));
+      props.onChange == null ? void 0 : props.onChange((0, _shared.toNumber)(newValue));
+    });
+    setNormalizedValue(normalizeValue(String(props.modelValue)));
+    return {
+      inputValue,
+      errorMessage,
+      formDisabled,
+      formReadonly,
+      isMax,
+      isMin,
+      validate,
+      reset,
+      resetValidation,
+      handleChange,
+      decrement,
+      increment,
+      pressDecrement,
+      pressIncrement,
+      releaseDecrement,
+      releaseIncrement,
+      toSizeUnit: _elements.toSizeUnit,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/counter/counter.css

@@ -0,0 +1 @@
+:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-text-disabled); --input-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: background-color 0.25s;}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter--disabled { background: var(--counter-disabled-color);}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--color-danger);}

package/lib/counter/counter.less

@@ -0,0 +1,85 @@
+@counter-padding: 0 4px;
+@counter-font-color: #fff;
+@counter-background: var(--color-primary);
+@counter-input-width: 28px;
+@counter-input-margin: 0 4px;
+@counter-input-font-size: 14px;
+@counter-button-size: 28px;
+@counter-button-icon-size: 100%;
+@counter-disabled-color: var(--color-text-disabled);
+@input-error-color: var(--color-danger);
+
+:root {
+  --counter-padding: @counter-padding;
+  --counter-font-color: @counter-font-color;
+  --counter-background: @counter-background;
+  --counter-input-width: @counter-input-width;
+  --counter-input-margin: @counter-input-margin;
+  --counter-input-font-size: @counter-input-font-size;
+  --counter-button-size: @counter-button-size;
+  --counter-button-icon-size: @counter-button-icon-size;
+  --counter-disabled-color: @counter-disabled-color;
+  --input-error-color: @input-error-color;
+}
+
+.var-counter {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  &__controller {
+    display: flex;
+    align-items: center;
+    color: var(--counter-font-color);
+    border-radius: var(--counter-button-size);
+    padding: var(--counter-padding);
+    background: var(--counter-background);
+    transition: background-color 0.25s;
+  }
+
+  &__decrement-button[var-counter-cover] {
+    width: var(--counter-button-size);
+    height: var(--counter-button-size);
+    font-size: var(--counter-button-icon-size);
+    border-radius: 50%;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &__input {
+    width: var(--counter-input-width);
+    font-size: var(--counter-input-font-size);
+    outline: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    text-align: center;
+    color: var(--counter-font-color);
+    margin: var(--counter-input-margin);
+
+    &[disabled] {
+      background: transparent;
+    }
+  }
+
+  &__increment-button[var-counter-cover] {
+    width: var(--counter-button-size);
+    height: var(--counter-button-size);
+    font-size: var(--counter-button-icon-size);
+    border-radius: 50%;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &--disabled {
+    background: var(--counter-disabled-color);
+  }
+
+  &--hidden {
+    opacity: 0;
+  }
+
+  &--error {
+    background: var(--color-danger);
+  }
+}

package/lib/counter/index.js

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

package/lib/counter/props.js

@@ -0,0 +1,98 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    type: [String, Number],
+    default: 0
+  },
+  min: {
+    type: [String, Number]
+  },
+  max: {
+    type: [String, Number]
+  },
+  step: {
+    type: [String, Number],
+    default: 1
+  },
+  color: {
+    type: String
+  },
+  inputWidth: {
+    type: [String, Number]
+  },
+  inputTextSize: {
+    type: [String, Number]
+  },
+  buttonSize: {
+    type: [String, Number]
+  },
+  decimalLength: {
+    type: [String, Number]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disableIncrement: {
+    type: Boolean,
+    default: false
+  },
+  disableDecrement: {
+    type: Boolean,
+    default: false
+  },
+  disableInput: {
+    type: Boolean,
+    default: false
+  },
+  lazyChange: {
+    type: Boolean,
+    default: false
+  },
+  incrementButton: {
+    type: Boolean,
+    default: true
+  },
+  decrementButton: {
+    type: Boolean,
+    default: true
+  },
+  press: {
+    type: Boolean,
+    default: true
+  },
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ['onInputChange', 'onLazyChange', 'onIncrement', 'onDecrement']
+  },
+  rules: {
+    type: Array
+  },
+  onBeforeChange: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  onIncrement: {
+    type: Function
+  },
+  onDecrement: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/counter/provide.js

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

package/lib/counter/style/index.js

@@ -0,0 +1,7 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../../icon/icon.css')
+require('../../form-details/formDetails.css')
+require('../../ripple/ripple.css')
+require('../counter.css')
+require('../CounterSfc.css')

package/lib/counter/style/less.js

@@ -0,0 +1,7 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../../icon/icon.less')
+require('../../form-details/formDetails.less')
+require('../../ripple/ripple.less')
+require('../counter.less')
+require('../CounterSfc.less')