@varlet/ui 1.23.4-alpha.8 → 1.23.4

package/lib/slider/Slider.js

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

@@ -1,17 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = exports._SliderComponent = void 0;
-
-var _Slider = _interopRequireDefault(require("./Slider.js"));
-
-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

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

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

package/lib/slider/slider.css

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

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

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

package/lib/slider/style/less.js

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