@varlet/ui 1.27.20 → 2.0.0-alpha.1663742071515

package/lib/menu/props.js

@@ -3,8 +3,12 @@
 exports.__esModule = true;
 exports.props = void 0;
 
-function alignmentValidator(alignment) {
-  return ['top', 'bottom'].includes(alignment);
+function triggerValidator(trigger) {
+  return ['click', 'hover'].includes(trigger);
+}
+
+function placementValidator(alignment) {
+  return ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'cover-top', 'cover-top-start', 'cover-top-end', 'cover-bottom', 'cover-bottom-start', 'cover-bottom-end', 'cover-left', 'cover-right'].includes(alignment);
 }
 
 var props = {
@@ -12,10 +16,19 @@ var props = {
     type: Boolean,
     default: false
   },
-  alignment: {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  trigger: {
     type: String,
-    default: 'top',
-    validator: alignmentValidator
+    default: 'click',
+    validator: triggerValidator
+  },
+  placement: {
+    type: String,
+    default: 'cover-top-start',
+    validator: placementValidator
   },
   offsetX: {
     type: [Number, String],
@@ -26,9 +39,13 @@ var props = {
     default: 0
   },
   teleport: {
-    type: String,
+    type: [String, Object],
     default: 'body'
   },
+  defaultStyle: {
+    type: Boolean,
+    default: true
+  },
   onOpen: {
     type: Function
   },

package/lib/menu/style/index.js

@@ -1,3 +1,4 @@
-require('../../styles/common.css')
-require('../../styles/elevation.css')
 require('../menu.css')
+require('../../styles/elevation.css')
+require('../../styles/common.css')
+require('../MenuSfc.css')

package/lib/pagination/Pagination.js

@@ -69,9 +69,13 @@ function render(_ctx, _cache) {
     onKeydown: _cache[3] || (_cache[3] = (0, _vue.withKeys)($event => _ctx.setPage('simple', _ctx.simpleValue, $event), ["enter"]))
   }, null, 8
   /* PROPS */
-  , ["modelValue", "disabled"]), (0, _vue.createElementVNode)("span", null, "/ " + (0, _vue.toDisplayString)(_ctx.pageCount), 1
+  , ["modelValue", "disabled"]), (0, _vue.createElementVNode)("span", null, [(0, _vue.createTextVNode)(" / " + (0, _vue.toDisplayString)(_ctx.pageCount) + " ", 1
   /* TEXT */
-  )], 2
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('simple-line'))
+  }, null, 2
+  /* CLASS */
+  )])], 2
   /* CLASS */
   )) : ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, {
     key: 1

package/lib/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; width: 100%; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; width: 100%; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}

package/lib/picker/props.js

@@ -7,7 +7,7 @@ var _components = require("../utils/components");
 
 var _props = require("../popup/props");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var props = _extends({
   columns: {

package/lib/popup/Popup.js

@@ -17,7 +17,7 @@ var _components = require("../utils/components");
 
 
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
@@ -70,7 +70,7 @@ var _default = (0, _vue.defineComponent)({
       newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
     }); // internal for Dialog
 
-    (0, _components.addRouteListener)(() => props.onRouteChange == null ? void 0 : props.onRouteChange());
+    (0, _components.useRouteListener)(() => props.onRouteChange == null ? void 0 : props.onRouteChange());
 
     var renderOverlay = () => {
       var {

package/lib/rate/Rate.js

@@ -54,7 +54,7 @@ function render(_ctx, _cache) {
       "var-rate-cover": "",
       transition: 0,
       namespace: _ctx.namespace,
-      name: _ctx.getIconName(val),
+      name: _ctx.getCurrentState(val).name,
       style: (0, _vue.normalizeStyle)({
         fontSize: _ctx.toSizeUnit(_ctx.size)
       })
@@ -105,75 +105,59 @@ var _default = (0, _vue.defineComponent)({
     var getStyle = val => {
       var {
         count,
-        size,
         gap
       } = props;
       return {
-        color: transformValue(val).color,
-        marginRight: val !== (0, _shared.toNumber)(count) ? (0, _elements.toSizeUnit)(gap) : 0,
-        width: (0, _elements.toSizeUnit)(size),
-        height: (0, _elements.toSizeUnit)(size),
-        borderRadius: '50%'
+        color: getCurrentState(val).color,
+        marginRight: val !== (0, _shared.toNumber)(count) ? (0, _elements.toSizeUnit)(gap) : 0
       };
     };
 
     var getClass = val => {
       var {
-        type,
+        name,
         color
-      } = transformValue(val);
+      } = getCurrentState(val);
       return {
         [n('content')]: true,
         [n('--disabled')]: (form == null ? void 0 : form.disabled.value) || props.disabled,
         [n('--error')]: errorMessage.value,
-        [n('--primary')]: type !== 'empty' && !color
+        [n('--primary')]: name !== props.emptyIcon && !color
       };
     };
 
-    var getIconName = val => {
-      var {
-        type
-      } = transformValue(val);
-      var {
-        icon,
-        halfIcon,
-        emptyIcon
-      } = props;
-      return type === 'full' ? icon : type === 'half' ? halfIcon : emptyIcon;
-    };
-
-    var transformValue = index => {
+    var getCurrentState = index => {
       var {
         modelValue,
         disabled,
         disabledColor,
         color,
         half,
-        emptyColor
+        emptyColor,
+        icon,
+        halfIcon,
+        emptyIcon
       } = props;
-      var iconColor;
-      if (disabled || form != null && form.disabled.value) iconColor = disabledColor;else if (color) iconColor = color;
+      var iconColor = color;
+      if (disabled || form != null && form.disabled.value) iconColor = disabledColor;
 
       if (index <= (0, _shared.toNumber)(modelValue)) {
         return {
-          type: 'full',
-          score: index,
-          color: iconColor
+          color: iconColor,
+          name: icon
         };
       }
 
       if (half && index <= (0, _shared.toNumber)(modelValue) + 0.5) {
         return {
-          type: 'half',
-          score: index,
-          color: iconColor
+          color: iconColor,
+          name: halfIcon
         };
       }
 
       return {
-        type: 'empty',
-        score: index,
-        color: disabled || form != null && form.disabled.value ? disabledColor : emptyColor
+        color: disabled || form != null && form.disabled.value ? disabledColor : emptyColor,
+        name: emptyIcon
       };
     };
 
@@ -225,7 +209,7 @@ var _default = (0, _vue.defineComponent)({
       formReadonly: form == null ? void 0 : form.readonly,
       getStyle,
       getClass,
-      getIconName,
+      getCurrentState,
       handleClick,
       reset,
       validate,

package/lib/rate/rate.css

@@ -1 +1 @@
-:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; display: flex; width: 24px; height: 24px; margin-right: 2px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}
+:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}

package/lib/ripple/index.js

@@ -15,7 +15,7 @@ var _components = require("../utils/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var {
   n
@@ -185,7 +185,7 @@ function updated(el, binding) {
     var _el$_ripple4, _el$_ripple5;
 
     el._ripple = _extends({
-      tasker: (_el$_ripple4 = el._ripple) == null ? void 0 : _el$_ripple4.tasker,
+      tasker: newBinding.disabled ? null : (_el$_ripple4 = el._ripple) == null ? void 0 : _el$_ripple4.tasker,
       removeRipple: (_el$_ripple5 = el._ripple) == null ? void 0 : _el$_ripple5.removeRipple
     }, newBinding);
   }

package/lib/select/Select.js

@@ -65,27 +65,29 @@ function render(_ctx, _cache) {
     class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
-  ), (0, _vue.createVNode)(_component_var_menu, {
-    class: (0, _vue.normalizeClass)(_ctx.n('menu')),
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')])),
+    ref: "wrapEl",
+    onClick: _cache[2] || (_cache[2] = function () {
+      return _ctx.handleFocus && _ctx.handleFocus(...arguments);
+    })
+  }, [(0, _vue.createVNode)(_component_var_menu, {
     "var-select-cover": "",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('menu'))),
     "offset-y": _ctx.offsetY,
+    disabled: _ctx.readonly || _ctx.disabled,
+    "default-style": false,
     show: _ctx.isFocus,
-    "onUpdate:show": _cache[2] || (_cache[2] = $event => _ctx.isFocus = $event),
+    "onUpdate:show": _cache[1] || (_cache[1] = $event => _ctx.isFocus = $event),
     onClose: _ctx.handleBlur
   }, {
     menu: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
       ref: "menuEl",
-      class: (0, _vue.normalizeClass)(_ctx.n('scroller'))
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('scroller'), 'var-elevation--3'))
     }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
     /* CLASS */
     )]),
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')])),
-      ref: "wrapEl",
-      onClick: _cache[1] || (_cache[1] = function () {
-        return _ctx.handleFocus && _ctx.handleFocus(...arguments);
-      })
-    }, [(0, _vue.createElementVNode)("div", {
       class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('select'), [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
       style: (0, _vue.normalizeStyle)({
         textAlign: _ctx.textAlign,
@@ -141,15 +143,15 @@ function render(_ctx, _cache) {
       })
     }, (0, _vue.toDisplayString)(_ctx.placeholder), 7
     /* TEXT, CLASS, STYLE */
-    )], 2
-    /* CLASS */
     )]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["class", "offset-y", "show", "onClose"]), (0, _vue.createElementVNode)("div", {
+  , ["class", "offset-y", "disabled", "show", "onClose"])], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
     key: 0,
@@ -310,11 +312,6 @@ var _default = (0, _vue.defineComponent)({
       return wrapEl.value && window.getComputedStyle(wrapEl.value).width || '0px';
     };
 
-    var getOffsetY = () => {
-      var paddingTop = wrapEl.value && window.getComputedStyle(wrapEl.value).paddingTop || '0px';
-      return (0, _elements.toPxNum)(paddingTop) * 1.5;
-    };
-
     var handleFocus = () => {
       var {
         disabled,
@@ -327,11 +324,10 @@ var _default = (0, _vue.defineComponent)({
       }
 
       wrapWidth.value = getWrapWidth();
-      offsetY.value = getOffsetY() + (0, _elements.toPxNum)(props.offsetY);
+      offsetY.value = (0, _elements.toPxNum)(props.offsetY);
       isFocus.value = true;
       (0, _components.call)(onFocus);
       validateWithTrigger('onFocus');
-      detectBoundary();
     };
 
     var handleBlur = () => {
@@ -454,9 +450,8 @@ var _default = (0, _vue.defineComponent)({
 
     var focus = () => {
       wrapWidth.value = getWrapWidth();
-      offsetY.value = getOffsetY() + (0, _elements.toPxNum)(props.offsetY);
+      offsetY.value = (0, _elements.toPxNum)(props.offsetY);
       isFocus.value = true;
-      detectBoundary();
     }; // expose
 
 
@@ -473,29 +468,6 @@ var _default = (0, _vue.defineComponent)({
       resetValidation();
     };
 
-    var detectBoundary = () => {
-      var {
-        body
-      } = document;
-      var bodyScrollHeight = body.scrollHeight;
-      (0, _vue.nextTick)(() => {
-        var _menuEl$value;
-
-        var {
-          offsetHeight: menuOffsetHeight
-        } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
-        var wrapOffsetTop = (0, _elements.getTop)(wrapEl.value);
-
-        if (wrapOffsetTop + offsetY.value < 0) {
-          offsetY.value = getOffsetY();
-        }
-
-        if (menuOffsetHeight + wrapOffsetTop + offsetY.value > bodyScrollHeight) {
-          offsetY.value -= menuOffsetHeight - getOffsetY();
-        }
-      });
-    };
-
     (0, _vue.watch)(() => props.multiple, () => {
       var {
         multiple,

package/lib/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-margin: 8px 0 0 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; margin: var(--select-scroller-margin);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}

package/lib/slider/Slider.js

@@ -20,7 +20,7 @@ var _formDetails = _interopRequireDefault(require("../form-details"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var {
   n,

package/lib/snackbar/core.js

@@ -66,10 +66,12 @@ function render(_ctx, _cache) {
   , ["name"])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.type === 'loading' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
     key: 1,
     type: _ctx.loadingType,
-    size: _ctx.loadingSize
+    size: _ctx.loadingSize,
+    color: _ctx.loadingColor,
+    radius: _ctx.loadingRadius
   }, null, 8
   /* PROPS */
-  , ["type", "size"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "action")], 2
+  , ["type", "size", "color", "radius"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "action")], 2
   /* CLASS */
   )], 6
   /* CLASS, STYLE */

package/lib/snackbar/index.js

@@ -17,7 +17,7 @@ var _shared = require("@varlet/shared");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);

package/lib/snackbar/props.js

@@ -11,6 +11,8 @@ var _props = require("../loading/props");
 
 var _index = require("./index");
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function positionValidator(position) {
   var validPositions = ['top', 'center', 'bottom'];
   return validPositions.includes(position);
@@ -49,10 +51,12 @@ var props = {
     type: Boolean,
     default: false
   },
-  // 加载动画类型
   loadingType: (0, _components.pickProps)(_props.props, 'type'),
-  // 加载动画尺寸
   loadingSize: (0, _components.pickProps)(_props.props, 'size'),
+  loadingRadius: (0, _components.pickProps)(_props.props, 'radius'),
+  loadingColor: _extends({}, (0, _components.pickProps)(_props.props, 'color'), {
+    default: 'currentColor'
+  }),
   // 是否禁止滚动穿透
   lockScroll: {
     type: Boolean,

package/lib/space/Space.js

@@ -41,6 +41,10 @@ var _default = (0, _vue.defineComponent)({
       return isInternalSize ? internalSizes[size] : (0, _shared.isArray)(size) ? size.map(_elements.toPxNum) : [(0, _elements.toPxNum)(size), (0, _elements.toPxNum)(size)];
     };
 
+    var padStartFlex = style => {
+      return style === 'start' || style === 'end' ? "flex-" + style : style;
+    };
+
     return () => {
       var _call;
 
@@ -114,8 +118,8 @@ var _default = (0, _vue.defineComponent)({
         "class": classes(n(), 'var--box', [inline, n('--inline')]),
         "style": {
           flexDirection: direction,
-          justifyContent: justify,
-          alignItems: align,
+          justifyContent: padStartFlex(justify),
+          alignItems: padStartFlex(align),
           flexWrap: wrap ? 'wrap' : 'nowrap',
           margin: direction === 'row' ? "-" + y / 2 + "px 0" : undefined
         }

package/lib/style-provider/StyleProvider.js

@@ -19,6 +19,10 @@ var _default = (0, _vue.defineComponent)({
     styleVars: {
       type: Object,
       default: () => ({})
+    },
+    tag: {
+      type: String,
+      default: 'div'
     }
   },
 
@@ -26,7 +30,7 @@ var _default = (0, _vue.defineComponent)({
     var {
       slots
     } = _ref;
-    return () => (0, _vue.h)('div', {
+    return () => (0, _vue.h)(props.tag, {
       class: n(),
       style: (0, _elements.formatStyleVars)(props.styleVars)
     }, (0, _components.call)(slots.default));

package/lib/style-provider/index.js

@@ -12,13 +12,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var mountedVarKeys = [];
 
 function StyleProvider(styleVars) {
-  if (styleVars === void 0) {
-    styleVars = {};
-  }
-
   mountedVarKeys.forEach(key => document.documentElement.style.removeProperty(key));
   mountedVarKeys.length = 0;
-  var styles = (0, _elements.formatStyleVars)(styleVars);
+  var styles = (0, _elements.formatStyleVars)(styleVars != null ? styleVars : {});
   Object.entries(styles).forEach(_ref => {
     var [key, value] = _ref;
     document.documentElement.style.setProperty(key, value);