@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/progress/progress.less

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

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

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

package/lib/progress/style/less.js

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

package/lib/pull-refresh/PullRefresh.js

@@ -1,150 +0,0 @@
-"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 = window;
-
-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

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

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

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

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

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

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

package/lib/radio/Radio.js

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