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

package/lib/progress/progress.less

@@ -0,0 +1,98 @@
+@progress-font-size: var(--font-size-sm);
+@progress-ripple-color: #fff;
+@progress-track-color: #d8d8d8;
+@progress-background: var(--color-primary);
+
+:root {
+  --progress-font-size: @progress-font-size;
+  --progress-ripple-color: @progress-ripple-color;
+  --progress-track-color: @progress-track-color;
+  --progress-background: @progress-background;
+}
+
+.var-progress {
+  position: relative;
+  font-size: var(--progress-font-size);
+
+  &-linear {
+    display: flex;
+    align-items: center;
+
+    &__block {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    &__background,
+    &__certain {
+      width: 100%;
+      height: 100%;
+    }
+
+    &__ripple {
+      &::after {
+        position: absolute;
+        width: 0;
+        background-color: var(--progress-ripple-color);
+        height: 100%;
+        opacity: 0;
+        animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+        content: '';
+      }
+    }
+
+    &__background {
+      background-color: var(--progress-track-color);
+    }
+
+    &__certain {
+      position: absolute;
+      background-color: var(--progress-background);
+      top: 0;
+      left: 0;
+      transition: all 0.2s, background-color 0.8s;
+    }
+
+    &__label {
+      margin-left: 8px;
+      flex: 0;
+    }
+
+    @keyframes ripple {
+      0% {
+        width: 0;
+        opacity: 0.1;
+      }
+      20% {
+        width: 0;
+        opacity: 0.5;
+      }
+      80% {
+        width: 100%;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-circle {
+    position: relative;
+
+    &__background {
+      stroke: var(--progress-track-color);
+    }
+
+    &__certain {
+      transition: all 0.2s;
+      stroke: var(--progress-background);
+      position: absolute;
+    }
+
+    &__label {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/lib/progress/props.js

@@ -0,0 +1,61 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function modeValidator(mode) {
+  return ['linear', 'circle'].includes(mode);
+}
+
+var props = {
+  // progress 模式
+  mode: {
+    type: String,
+    default: 'linear',
+    validator: modeValidator
+  },
+  // progress 线宽
+  lineWidth: {
+    type: [Number, String],
+    default: 4
+  },
+  // progress 颜色
+  color: {
+    type: String
+  },
+  // progress 轨道颜色
+  trackColor: {
+    type: String
+  },
+  // 是否添加水波纹效果
+  ripple: {
+    type: Boolean,
+    default: false
+  },
+  // progress 值
+  value: {
+    type: [Number, String],
+    default: 0
+  },
+  // 是否显示label
+  label: {
+    type: Boolean,
+    default: false
+  },
+  // circle 的尺寸
+  size: {
+    type: Number,
+    default: 40
+  },
+  // circle的原点
+  rotate: {
+    type: Number,
+    default: 0
+  },
+  // 是否显示 circle 轨道
+  track: {
+    type: Boolean,
+    default: true
+  }
+};
+exports.props = props;

package/lib/progress/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../progress.css')
+require('../ProgressSfc.css')

package/lib/progress/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../progress.less')
+require('../ProgressSfc.less')

package/lib/pull-refresh/PullRefresh.js

@@ -0,0 +1,150 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _vue = require("vue");
+
+var _elements = require("../utils/elements");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MAX_DISTANCE = 100;
+var CONTROL_POSITION = -50;
+var scroller;
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    ref: "freshNode",
+    class: "var-pull-refresh",
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args)),
+    onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-pull-refresh__control var-elevation--2", [_ctx.isSuccess ? 'var-pull-refresh__control-success' : null]]),
+    style: (0, _vue.normalizeStyle)(_ctx.controlStyle)
+  }, [(0, _vue.createVNode)(_component_var_icon, {
+    name: _ctx.iconName,
+    transition: 200,
+    class: (0, _vue.normalizeClass)(_ctx.iconClass),
+    "var-pull-refresh-cover": ""
+  }, null, 8
+  /* PROPS */
+  , ["name", "class"])], 6
+  /* CLASS, STYLE */
+  ), (0, _vue.renderSlot)(_ctx.$slots, "default")], 544
+  /* HYDRATE_EVENTS, NEED_PATCH */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarPullRefresh',
+  components: {
+    VarIcon: _icon.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var freshNode = (0, _vue.ref)(null);
+    var startPosition = (0, _vue.ref)(0);
+    var distance = (0, _vue.ref)(CONTROL_POSITION);
+    var iconName = (0, _vue.ref)('arrow-down');
+    var refreshStatus = (0, _vue.ref)('default');
+    var isEnd = (0, _vue.ref)(false);
+    var isTouchable = (0, _vue.computed)(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
+    var iconClass = (0, _vue.computed)(() => ({
+      'var-pull-refresh__icon': true,
+      'var-pull-refresh__animation': refreshStatus.value === 'loading'
+    }));
+    var controlStyle = (0, _vue.computed)(() => ({
+      transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
+      transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
+      background: props.successBgColor || props.bgColor,
+      color: props.successColor || props.color
+    }));
+    var isSuccess = (0, _vue.computed)(() => refreshStatus.value === 'success');
+
+    var touchStart = event => {
+      if (!isTouchable.value) return;
+      refreshStatus.value = 'pulling';
+      startPosition.value = event.touches[0].clientY;
+    };
+
+    var touchMove = event => {
+      var scrollTop = (0, _elements.getScrollTop)(scroller);
+      if (scrollTop > 0 || !isTouchable.value) return;
+      if (scrollTop === 0 && distance.value > CONTROL_POSITION) event.cancelable && event.preventDefault();
+      var moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + CONTROL_POSITION;
+      distance.value = moveDistance >= MAX_DISTANCE ? MAX_DISTANCE : moveDistance;
+      iconName.value = distance.value >= MAX_DISTANCE * 0.2 ? 'refresh' : 'arrow-down';
+    };
+
+    var touchEnd = () => {
+      if (!isTouchable.value) return;
+      isEnd.value = true;
+
+      if (distance.value >= MAX_DISTANCE * 0.2) {
+        var _props$onUpdateModel;
+
+        refreshStatus.value = 'loading';
+        distance.value = MAX_DISTANCE * 0.3;
+        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, true);
+        props.onRefresh == null ? void 0 : props.onRefresh();
+      } else {
+        refreshStatus.value = 'loosing';
+        iconName.value = 'arrow-down';
+        distance.value = CONTROL_POSITION;
+        setTimeout(() => {
+          isEnd.value = false;
+        }, (0, _shared.toNumber)(props.animationDuration));
+      }
+    };
+
+    var reset = () => {
+      setTimeout(() => {
+        refreshStatus.value = 'default';
+        iconName.value = 'arrow-down';
+        isEnd.value = false;
+      }, (0, _shared.toNumber)(props.animationDuration));
+    };
+
+    (0, _vue.watch)(() => props.modelValue, newValue => {
+      if (newValue === false) {
+        isEnd.value = true;
+        refreshStatus.value = 'success';
+        iconName.value = 'checkbox-marked-circle';
+        setTimeout(() => {
+          distance.value = CONTROL_POSITION;
+          reset();
+        }, (0, _shared.toNumber)(props.successDuration));
+      }
+    });
+    (0, _vue.onMounted)(() => {
+      scroller = (0, _elements.getParentScroller)(freshNode.value);
+    });
+    return {
+      freshNode,
+      touchStart,
+      touchMove,
+      touchEnd,
+      iconName,
+      iconClass,
+      controlStyle,
+      isSuccess
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/pull-refresh/index.js

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

package/lib/pull-refresh/props.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    type: Boolean
+  },
+  // 是否禁用下拉刷新
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 动画时长
+  animationDuration: {
+    type: [Number, String],
+    default: 300
+  },
+  // 刷新成功提示展示时长
+  successDuration: {
+    type: [Number, String],
+    default: 2000
+  },
+  // control 的背景颜色
+  bgColor: {
+    type: String
+  },
+  // 成功状态下 control 的背景颜色
+  successBgColor: {
+    type: String
+  },
+  // control 的颜色
+  color: {
+    type: String
+  },
+  // 成功状态下 control 的颜色
+  successColor: {
+    type: String
+  },
+  onRefresh: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/pull-refresh/pullRefresh.css

@@ -0,0 +1 @@
+:root { --pull-refresh-size: 40px; --pull-refresh-background: #fff; --pull-refresh-color: var(--color-primary); --pull-refresh-success-color: var(--color-success); --pull-refresh-icon-size: 25px;}.var-pull-refresh { overflow: hidden; position: relative; user-select: none;}.var-pull-refresh__control { display: flex; width: var(--pull-refresh-size); height: var(--pull-refresh-size); align-items: center; justify-content: center; background-color: var(--pull-refresh-background); border-radius: 50%; position: absolute; left: 50%; z-index: 90; color: var(--pull-refresh-color);}.var-pull-refresh__control-success { color: var(--pull-refresh-success-color);}.var-pull-refresh__icon[var-pull-refresh-cover] { font-size: var(--pull-refresh-icon-size);}.var-pull-refresh__animation { transform: rotate(0deg); animation: iconRotate 0.6s infinite linear;}@keyframes iconRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

package/lib/pull-refresh/pullRefresh.less

@@ -0,0 +1,55 @@
+@pull-refresh-size: 40px;
+@pull-refresh-background: #fff;
+@pull-refresh-color: var(--color-primary);
+@pull-refresh-success-color: var(--color-success);
+@pull-refresh-icon-size: 25px;
+
+:root {
+  --pull-refresh-size: @pull-refresh-size;
+  --pull-refresh-background: @pull-refresh-background;
+  --pull-refresh-color: @pull-refresh-color;
+  --pull-refresh-success-color: @pull-refresh-success-color;
+  --pull-refresh-icon-size: @pull-refresh-icon-size;
+}
+
+.var-pull-refresh {
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+
+  &__control {
+    display: flex;
+    width: var(--pull-refresh-size);
+    height: var(--pull-refresh-size);
+    align-items: center;
+    justify-content: center;
+    background-color: var(--pull-refresh-background);
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    z-index: 90;
+    color: var(--pull-refresh-color);
+
+    &-success {
+      color: var(--pull-refresh-success-color);
+    }
+  }
+
+  &__icon[var-pull-refresh-cover] {
+    font-size: var(--pull-refresh-icon-size);
+  }
+
+  &__animation {
+    transform: rotate(0deg);
+    animation: iconRotate 0.6s infinite linear;
+  }
+
+  @keyframes iconRotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/lib/pull-refresh/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../../icon/icon.css')
+require('../pullRefresh.css')
+require('../PullRefreshSfc.css')

package/lib/pull-refresh/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../../icon/icon.less')
+require('../pullRefresh.less')
+require('../PullRefreshSfc.less')

package/lib/radio/Radio.js

@@ -0,0 +1,231 @@
+"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 _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _provide = require("./provide");
+
+var _provide2 = 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 = {
+  class: "var-radio__wrap"
+};
+
+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-radio",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, _ctx.$attrs), [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-radio__action", [_ctx.checked ? 'var-radio--checked' : 'var-radio--unchecked', _ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
+    })
+  }, [_ctx.checked ? (0, _vue.renderSlot)(_ctx.$slots, "checked-icon", {
+    key: 0
+  }, () => [(0, _vue.createVNode)(_component_var_icon, {
+    class: (0, _vue.normalizeClass)(["var-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
+    "var-radio-cover": "",
+    name: "radio-marked",
+    size: _ctx.iconSize
+  }, null, 8
+  /* PROPS */
+  , ["class", "size"])]) : (0, _vue.renderSlot)(_ctx.$slots, "unchecked-icon", {
+    key: 1
+  }, () => [(0, _vue.createVNode)(_component_var_icon, {
+    class: (0, _vue.normalizeClass)(["var-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
+    "var-radio-cover": "",
+    name: "radio-blank",
+    size: _ctx.iconSize
+  }, null, 8
+  /* PROPS */
+  , ["class", "size"])])], 6
+  /* CLASS, STYLE */
+  ), [[_directive_ripple, {
+    disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
+  }]]), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-radio__text", [_ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )], 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: 'VarRadio',
+  directives: {
+    Ripple: _ripple.default
+  },
+  components: {
+    VarIcon: _icon.default,
+    VarFormDetails: _formDetails.default
+  },
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var value = (0, _vue.ref)(false);
+    var checked = (0, _vue.computed)(() => value.value === props.checkedValue);
+    var withAnimation = (0, _vue.ref)(false);
+    var {
+      radioGroup,
+      bindRadioGroup
+    } = (0, _provide.useRadioGroup)();
+    var {
+      form,
+      bindForm
+    } = (0, _provide2.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 change = changedValue => {
+      var _props$onUpdateModel;
+
+      var {
+        checkedValue,
+        onChange
+      } = props;
+
+      if (radioGroup && value.value === checkedValue) {
+        return;
+      }
+
+      value.value = changedValue;
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value.value);
+      onChange == null ? void 0 : onChange(value.value);
+      radioGroup == null ? void 0 : radioGroup.onToggle(checkedValue);
+      validateWithTrigger('onChange');
+    };
+
+    var handleClick = e => {
+      var {
+        disabled,
+        readonly,
+        uncheckedValue,
+        checkedValue,
+        onClick
+      } = props;
+
+      if (form != null && form.disabled.value || disabled) {
+        return;
+      }
+
+      onClick == null ? void 0 : onClick(e);
+
+      if (form != null && form.readonly.value || readonly) {
+        return;
+      }
+
+      withAnimation.value = true;
+      change(checked.value ? uncheckedValue : checkedValue);
+    };
+
+    var sync = v => {
+      var {
+        checkedValue,
+        uncheckedValue
+      } = props;
+      value.value = v === checkedValue ? checkedValue : uncheckedValue;
+    }; // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel2;
+
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, props.uncheckedValue);
+      resetValidation();
+    }; // expose
+
+
+    var validate = () => v(props.rules, props.modelValue); // expose
+
+
+    var toggle = changedValue => {
+      var {
+        uncheckedValue,
+        checkedValue
+      } = props;
+      var shouldReverse = ![uncheckedValue, checkedValue].includes(changedValue);
+
+      if (shouldReverse) {
+        changedValue = checked.value ? uncheckedValue : checkedValue;
+      }
+
+      change(changedValue);
+    };
+
+    (0, _vue.watch)(() => props.modelValue, newValue => {
+      value.value = newValue;
+    }, {
+      immediate: true
+    });
+    var radioProvider = {
+      sync,
+      validate,
+      resetValidation,
+      reset
+    };
+    bindRadioGroup == null ? void 0 : bindRadioGroup(radioProvider);
+    bindForm == null ? void 0 : bindForm(radioProvider);
+    return {
+      withAnimation,
+      checked,
+      errorMessage,
+      radioGroupErrorMessage: radioGroup == null ? void 0 : radioGroup.errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      handleClick,
+      toggle,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+
+});
+
+exports.default = _default;