@varlet/ui 1.23.4-alpha.0 → 1.23.4-alpha.1

package/lib/slider/Slider.js

@@ -0,0 +1,386 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _components = require("../utils/components");
+
+var _provide = require("../form/provide");
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+var _props = require("./props");
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Thumbs;
+
+(function (Thumbs) {
+  Thumbs["First"] = "1";
+  Thumbs["Second"] = "2";
+})(Thumbs || (Thumbs = {}));
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-slider"
+};
+var _hoisted_2 = {
+  class: "var-slider__track"
+};
+var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
+
+function render(_ctx, _cache) {
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-slider-block", [_ctx.isDisabled ? 'var-slider__disable' : null, _ctx.errorMessage ? 'var-slider__error' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      height: _ctx.thumbSize === undefined ? _ctx.thumbSize : 3 * _ctx.toNumber(_ctx.thumbSize) + "px",
+      margin: _ctx.thumbSize === undefined ? _ctx.thumbSize : "0 " + _ctx.toNumber(_ctx.thumbSize) / 2 + "px"
+    }),
+    ref: "sliderEl",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args))
+  }, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createElementVNode)("div", {
+    class: "var-slider__track-background",
+    style: (0, _vue.normalizeStyle)({
+      background: _ctx.trackColor,
+      height: _ctx.trackHeight + 'px'
+    })
+  }, null, 4
+  /* STYLE */
+  ), (0, _vue.createElementVNode)("div", {
+    class: "var-slider__track-fill",
+    style: (0, _vue.normalizeStyle)(_ctx.getFillStyle)
+  }, null, 4
+  /* STYLE */
+  )]), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.thumbList, item => {
+    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      class: "var-slider__thumb",
+      key: item.enumValue,
+      style: (0, _vue.normalizeStyle)({
+        left: item.value + "%",
+        zIndex: _ctx.thumbsProps[item.enumValue].active ? 1 : undefined
+      }),
+      onTouchstart: $event => _ctx.start($event, item.enumValue),
+      onTouchmove: $event => _ctx.move($event, item.enumValue),
+      onTouchend: $event => _ctx.end(item.enumValue),
+      onTouchcancel: $event => _ctx.end(item.enumValue)
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "button", {
+      currentValue: item.value
+    }, () => [(0, _vue.createElementVNode)("div", {
+      class: "var-slider__thumb-block",
+      style: (0, _vue.normalizeStyle)({
+        background: _ctx.thumbColor,
+        height: _ctx.thumbSize + 'px',
+        width: _ctx.thumbSize + 'px'
+      })
+    }, null, 4
+    /* STYLE */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(["var-slider__thumb-ripple", [_ctx.thumbsProps[item.enumValue].active ? 'var-slider__thumb-ripple-active' : null]]),
+      style: (0, _vue.normalizeStyle)({
+        background: _ctx.thumbColor,
+        height: _ctx.thumbSize === undefined ? undefined : _ctx.thumbsProps[item.enumValue].active ? 3 * _ctx.toNumber(_ctx.thumbSize) + "px" : '0px',
+        width: _ctx.thumbSize === undefined ? undefined : _ctx.thumbsProps[item.enumValue].active ? 3 * _ctx.toNumber(_ctx.thumbSize) + "px" : '0px'
+      })
+    }, null, 6
+    /* CLASS, STYLE */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(["var-slider__thumb-label", [_ctx.showLabel(item.enumValue) ? 'var-slider__thumb-label-active' : null]]),
+      style: (0, _vue.normalizeStyle)({
+        background: _ctx.labelColor,
+        color: _ctx.labelTextColor,
+        height: _ctx.thumbSize === undefined ? _ctx.thumbSize : 2 * _ctx.toNumber(_ctx.thumbSize) + "px",
+        width: _ctx.thumbSize === undefined ? _ctx.thumbSize : 2 * _ctx.toNumber(_ctx.thumbSize) + "px"
+      })
+    }, [(0, _vue.createElementVNode)("span", null, (0, _vue.toDisplayString)(item.value), 1
+    /* TEXT */
+    )], 6
+    /* CLASS, STYLE */
+    )])], 44
+    /* STYLE, PROPS, HYDRATE_EVENTS */
+    , _hoisted_3);
+  }), 128
+  /* KEYED_FRAGMENT */
+  ))], 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage,
+    class: "var-slider__form",
+    "var-slider-cover": ""
+  }, null, 8
+  /* PROPS */
+  , ["error-message"])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSlider',
+  components: {
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var {
+      bindForm,
+      form
+    } = (0, _provide.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var validate = () => v(props.rules, props.modelValue);
+
+    var getThumbProps = () => ({
+      startPosition: 0,
+      currentLeft: 0,
+      active: false,
+      percentValue: 0
+    });
+
+    var validateWithTrigger = () => (0, _vue.nextTick)(() => vt(['onChange'], 'onChange', props.rules, props.modelValue));
+
+    var sliderEl = (0, _vue.ref)(null);
+    var maxWidth = (0, _vue.ref)(0);
+    var isScroll = (0, _vue.ref)(false);
+    var thumbsProps = (0, _vue.reactive)({
+      [Thumbs.First]: getThumbProps(),
+      [Thumbs.Second]: getThumbProps()
+    });
+    var unitWidth = (0, _vue.computed)(() => maxWidth.value / 100 * (0, _shared.toNumber)(props.step));
+    var thumbList = (0, _vue.computed)(() => {
+      var list = [{
+        value: props.modelValue,
+        enumValue: Thumbs.First
+      }];
+
+      if (props.range && (0, _shared.isArray)(props.modelValue)) {
+        list = [{
+          value: props.modelValue[0],
+          enumValue: Thumbs.First
+        }, {
+          value: props.modelValue[1],
+          enumValue: Thumbs.Second
+        }];
+      }
+
+      return list;
+    });
+
+    var showLabel = type => {
+      if (props.labelVisible === 'always') return true;
+      if (props.labelVisible === 'never') return false;
+      return thumbsProps[type].active;
+    };
+
+    var getFillStyle = (0, _vue.computed)(() => {
+      var {
+        activeColor,
+        range,
+        modelValue
+      } = props;
+      var width = range && (0, _shared.isArray)(modelValue) ? Math.abs(modelValue[0] - modelValue[1]) : modelValue;
+      var left = range && (0, _shared.isArray)(modelValue) ? Math.min(modelValue[0], modelValue[1]) : 0;
+      return {
+        width: width + "%",
+        left: left + "%",
+        background: activeColor
+      };
+    });
+    var isDisabled = (0, _vue.computed)(() => props.disabled || (form == null ? void 0 : form.disabled.value));
+    var isReadonly = (0, _vue.computed)(() => props.readonly || (form == null ? void 0 : form.readonly.value));
+
+    var setPercent = (moveDistance, type) => {
+      var rangeValue = [];
+      var {
+        step,
+        range,
+        modelValue,
+        onChange
+      } = props;
+      var stepNumber = (0, _shared.toNumber)(step);
+      var roundDistance = Math.round(moveDistance / unitWidth.value);
+      var curValue = roundDistance * stepNumber;
+      var prevValue = thumbsProps[type].percentValue;
+      thumbsProps[type].percentValue = curValue / stepNumber;
+
+      if (range && (0, _shared.isArray)(modelValue)) {
+        rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
+      }
+
+      if (prevValue !== curValue) {
+        var _props$onUpdateModel;
+
+        var value = range ? rangeValue : curValue;
+        onChange == null ? void 0 : onChange(value);
+        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value);
+        validateWithTrigger();
+      }
+    };
+
+    var getType = offset => {
+      if (!props.range) return Thumbs.First;
+      var thumb1Distance = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
+      var thumb2Distance = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
+      var offsetToThumb1 = Math.abs(offset - thumb1Distance);
+      var offsetToThumb2 = Math.abs(offset - thumb2Distance);
+      return offsetToThumb1 <= offsetToThumb2 ? Thumbs.First : Thumbs.Second;
+    };
+
+    var start = (event, type) => {
+      if (!maxWidth.value) maxWidth.value = sliderEl.value.offsetWidth;
+      if (isDisabled.value || isReadonly.value) return;
+      props.onStart == null ? void 0 : props.onStart();
+      isScroll.value = true;
+      thumbsProps[type].startPosition = event.touches[0].clientX;
+    };
+
+    var move = (event, type) => {
+      if (isDisabled.value || isReadonly.value || !isScroll.value) return;
+      var moveDistance = event.touches[0].clientX - thumbsProps[type].startPosition + thumbsProps[type].currentLeft;
+      thumbsProps[type].active = true;
+      if (moveDistance <= 0) moveDistance = 0;else if (moveDistance >= maxWidth.value) moveDistance = maxWidth.value;
+      setPercent(moveDistance, type);
+    };
+
+    var end = type => {
+      var {
+        range,
+        modelValue,
+        onEnd
+      } = props;
+      if (isDisabled.value || isReadonly.value) return;
+      var rangeValue = [];
+      thumbsProps[type].currentLeft = thumbsProps[type].percentValue * unitWidth.value;
+      thumbsProps[type].active = false;
+      var curValue = thumbsProps[type].percentValue;
+
+      if (range && (0, _shared.isArray)(modelValue)) {
+        rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
+      }
+
+      onEnd == null ? void 0 : onEnd(range ? rangeValue : curValue);
+      isScroll.value = false;
+    };
+
+    var click = event => {
+      if (isDisabled.value || isReadonly.value) return;
+      if (event.target.closest('.var-slider__thumb')) return;
+      var offset = event.clientX - (0, _elements.getLeft)(event.currentTarget);
+      var type = getType(offset);
+      setPercent(offset, type);
+      end(type);
+    };
+
+    var stepValidator = () => {
+      var stepNumber = (0, _shared.toNumber)(props.step);
+
+      if (isNaN(stepNumber)) {
+        console.warn('[Varlet] Slider: type of prop "step" should be Number');
+        return false;
+      }
+
+      if (stepNumber < 1 || stepNumber > 100) {
+        console.warn('[Varlet] Slider: "step" should be >= 0 and <= 100');
+        return false;
+      }
+
+      if (parseInt("" + props.step, 10) !== stepNumber) {
+        console.warn('[Varlet] Slider: "step" should be an Integer');
+        return false;
+      }
+
+      return true;
+    };
+
+    var valueValidator = () => {
+      var {
+        range,
+        modelValue
+      } = props;
+
+      if (range && !(0, _shared.isArray)(modelValue)) {
+        console.error('[Varlet] Slider: "modelValue" should be an Array');
+        return false;
+      }
+
+      if (!range && (0, _shared.isArray)(modelValue)) {
+        console.error('[Varlet] Slider: "modelValue" should be a Number');
+        return false;
+      }
+
+      if (range && (0, _shared.isArray)(modelValue) && modelValue.length < 2) {
+        console.error('[Varlet] Slider: "modelValue" should have two value');
+        return false;
+      }
+
+      return true;
+    };
+
+    var setProps = (modelValue = props.modelValue, step = (0, _shared.toNumber)(props.step)) => {
+      if (props.range && (0, _shared.isArray)(modelValue)) {
+        thumbsProps[Thumbs.First].percentValue = modelValue[0] / step;
+        thumbsProps[Thumbs.First].currentLeft = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
+        thumbsProps[Thumbs.Second].percentValue = modelValue[1] / step;
+        thumbsProps[Thumbs.Second].currentLeft = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
+      } else if ((0, _shared.isNumber)(modelValue)) {
+        thumbsProps[Thumbs.First].currentLeft = modelValue / step * unitWidth.value;
+      }
+    };
+
+    (0, _vue.watch)([() => props.modelValue, () => props.step], ([modelValue, step]) => {
+      if (!stepValidator() || !valueValidator() || isScroll.value) return;
+      setProps(modelValue, (0, _shared.toNumber)(step));
+    });
+    (0, _vue.watch)(maxWidth, () => setProps());
+    (0, _vue.onMounted)(() => {
+      if (!stepValidator() || !valueValidator()) return;
+      maxWidth.value = sliderEl.value.offsetWidth;
+    });
+
+    var reset = () => {
+      var _props$onUpdateModel2;
+
+      var resetValue = props.range ? [0, 0] : 0;
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, resetValue);
+      resetValidation();
+    };
+
+    var sliderProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    bindForm == null ? void 0 : bindForm(sliderProvider);
+    return {
+      Thumbs,
+      sliderEl,
+      getFillStyle,
+      isDisabled,
+      errorMessage,
+      thumbsProps,
+      thumbList,
+      toNumber: _shared.toNumber,
+      showLabel,
+      start,
+      move,
+      end,
+      click
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/slider/index.js

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

package/lib/slider/props.js

@@ -0,0 +1,77 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function labelValidator(label) {
+  return ['always', 'normal', 'never'].includes(label);
+}
+
+var props = {
+  // 当前进度百分比
+  modelValue: {
+    type: [Number, Array],
+    default: 0
+  },
+  // 步长
+  step: {
+    type: [Number, String],
+    default: 1
+  },
+  // 是否开启双滑块模式
+  range: {
+    type: Boolean,
+    default: false
+  },
+  labelVisible: {
+    type: String,
+    default: 'normal',
+    validator: labelValidator
+  },
+  activeColor: {
+    type: String
+  },
+  trackColor: {
+    type: String
+  },
+  thumbColor: {
+    type: String
+  },
+  labelColor: {
+    type: String
+  },
+  labelTextColor: {
+    type: String
+  },
+  trackHeight: {
+    type: [String, Number]
+  },
+  thumbSize: {
+    type: [String, Number]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 是否只读
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  rules: {
+    type: Array
+  },
+  onChange: {
+    type: Function
+  },
+  onStart: {
+    type: Function
+  },
+  onEnd: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/slider/provide.js

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

package/lib/slider/slider.css

@@ -0,0 +1 @@
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-slider-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider__disable { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple-active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label-active { transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);}.var-slider__error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider__error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}

package/lib/slider/slider.less

@@ -0,0 +1,146 @@
+@slider-error-color: var(--color-danger);
+@slider-track-background: #bdbdbd;
+@slider-track-fill-background: var(--color-primary);
+@slider-thumb-block-background: var(--color-primary);
+@slider-thumb-ripple-background: var(--color-primary);
+@slider-thumb-label-background: var(--color-primary);
+@slider-thumb-label-font-size: var(--font-size-sm);
+
+:root {
+  --slider-error-color: @slider-error-color;
+  --slider-track-background: @slider-track-background;
+  --slider-track-fill-background: @slider-track-fill-background;
+  --slider-thumb-block-background: @slider-thumb-block-background;
+  --slider-thumb-ripple-background: @slider-thumb-ripple-background;
+  --slider-thumb-label-background: @slider-thumb-label-background;
+  --slider-thumb-label-font-size: @slider-thumb-label-font-size;
+}
+
+.var-slider {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &-block {
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex: 1;
+    user-select: none;
+    height: 36px;
+    margin: 0 6px;
+  }
+
+  &__disable {
+    filter: opacity(0.6);
+  }
+
+  &__track {
+    width: 100%;
+    align-items: center;
+    position: relative;
+
+    &-background {
+      width: 100%;
+      height: 2px;
+      background: var(--slider-track-background);
+    }
+
+    &-fill {
+      position: absolute;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background-color: var(--slider-track-fill-background);
+    }
+  }
+
+  &__thumb {
+    position: absolute;
+
+    &-block {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      background-color: var(--slider-thumb-block-background);
+    }
+
+    &-ripple {
+      position: absolute;
+      width: 0;
+      z-index: -1;
+      height: 0;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      opacity: 0.3;
+      background: var(--slider-thumb-ripple-background);
+      transition: 0.3s var(--cubic-bezier);
+
+      &-active {
+        width: 36px;
+        height: 36px;
+      }
+    }
+
+    &-label {
+      height: 24px;
+      width: 24px;
+      background-color: var(--slider-thumb-label-background);
+      display: flex;
+      align-items: center;
+      border: none;
+      justify-content: center;
+      color: #fff;
+      border-radius: 50% 50% 0;
+      bottom: 60%;
+      user-select: none;
+      position: absolute;
+      left: 45%;
+      transition: 0.3s var(--cubic-bezier);
+      font-size: var(--slider-thumb-label-font-size);
+      overflow: hidden;
+      transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);
+
+      span {
+        transform: rotate(-45deg);
+      }
+
+      &-active {
+        transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);
+      }
+    }
+  }
+
+  &__error {
+    .var-slider__track {
+      &-background {
+        background-color: var(--slider-error-color) !important;
+        filter: opacity(0.5);
+      }
+
+      &-fill {
+        background-color: var(--slider-error-color) !important;
+      }
+    }
+
+    .var-slider__thumb {
+      &-block {
+        background-color: var(--slider-error-color) !important;
+      }
+
+      &-ripple {
+        background-color: var(--slider-error-color) !important;
+      }
+
+      &-label {
+        background-color: var(--slider-error-color) !important;
+      }
+    }
+  }
+
+  &__form[var-slider-cover] {
+    margin: 0;
+  }
+}

package/lib/slider/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../form-details/formDetails.css')
+require('../slider.css')
+require('../SliderSfc.css')

package/lib/slider/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../form-details/formDetails.less')
+require('../slider.less')
+require('../SliderSfc.less')