@varlet/ui 1.27.20 → 2.0.0-alpha.1663742071515

package/es/rate/Rate.js

@@ -37,7 +37,7 @@ export function render(_ctx, _cache) {
       "var-rate-cover": "",
       transition: 0,
       namespace: _ctx.namespace,
-      name: _ctx.getIconName(val),
+      name: _ctx.getCurrentState(val).name,
       style: _normalizeStyle({
         fontSize: _ctx.toSizeUnit(_ctx.size)
       })
@@ -87,75 +87,59 @@ export default defineComponent({
     var getStyle = val => {
       var {
         count,
-        size,
         gap
       } = props;
       return {
-        color: transformValue(val).color,
-        marginRight: val !== toNumber(count) ? toSizeUnit(gap) : 0,
-        width: toSizeUnit(size),
-        height: toSizeUnit(size),
-        borderRadius: '50%'
+        color: getCurrentState(val).color,
+        marginRight: val !== toNumber(count) ? 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 <= toNumber(modelValue)) {
         return {
-          type: 'full',
-          score: index,
-          color: iconColor
+          color: iconColor,
+          name: icon
         };
       }
 
       if (half && index <= 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
       };
     };
 
@@ -207,7 +191,7 @@ export default defineComponent({
       formReadonly: form == null ? void 0 : form.readonly,
       getStyle,
       getClass,
-      getIconName,
+      getCurrentState,
       handleClick,
       reset,
       validate,

package/es/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/es/ripple/index.js

@@ -1,4 +1,4 @@
-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); }
 
 import context from '../context';
 
@@ -173,7 +173,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/es/select/Select.js

@@ -8,7 +8,7 @@ import { props } from './props';
 import { useValidation, createNamespace, call } from '../utils/components';
 import { useOptions } from './provide';
 import { useForm } from '../form/provide';
-import { getTop, toPxNum } from '../utils/elements';
+import { toPxNum } from '../utils/elements';
 var {
   n,
   classes
@@ -46,27 +46,29 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
-  ), _createVNode(_component_var_menu, {
-    class: _normalizeClass(_ctx.n('menu')),
+  ), _createElementVNode("div", {
+    class: _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);
+    })
+  }, [_createVNode(_component_var_menu, {
     "var-select-cover": "",
+    class: _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: _withCtx(() => [_createElementVNode("div", {
       ref: "menuEl",
-      class: _normalizeClass(_ctx.n('scroller'))
+      class: _normalizeClass(_ctx.classes(_ctx.n('scroller'), 'var-elevation--3'))
     }, [_renderSlot(_ctx.$slots, "default")], 2
     /* CLASS */
     )]),
     default: _withCtx(() => [_createElementVNode("div", {
-      class: _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);
-      })
-    }, [_createElementVNode("div", {
       class: _normalizeClass(_ctx.classes(_ctx.n('select'), [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
       style: _normalizeStyle({
         textAlign: _ctx.textAlign,
@@ -122,15 +124,15 @@ export function render(_ctx, _cache) {
       })
     }, _toDisplayString(_ctx.placeholder), 7
     /* TEXT, CLASS, STYLE */
-    )], 2
-    /* CLASS */
     )]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["class", "offset-y", "show", "onClose"]), _createElementVNode("div", {
+  , ["class", "offset-y", "disabled", "show", "onClose"])], 2
+  /* CLASS */
+  ), _createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
@@ -290,11 +292,6 @@ export default defineComponent({
       return wrapEl.value && window.getComputedStyle(wrapEl.value).width || '0px';
     };
 
-    var getOffsetY = () => {
-      var paddingTop = wrapEl.value && window.getComputedStyle(wrapEl.value).paddingTop || '0px';
-      return toPxNum(paddingTop) * 1.5;
-    };
-
     var handleFocus = () => {
       var {
         disabled,
@@ -307,11 +304,10 @@ export default defineComponent({
       }
 
       wrapWidth.value = getWrapWidth();
-      offsetY.value = getOffsetY() + toPxNum(props.offsetY);
+      offsetY.value = toPxNum(props.offsetY);
       isFocus.value = true;
       call(onFocus);
       validateWithTrigger('onFocus');
-      detectBoundary();
     };
 
     var handleBlur = () => {
@@ -434,9 +430,8 @@ export default defineComponent({
 
     var focus = () => {
       wrapWidth.value = getWrapWidth();
-      offsetY.value = getOffsetY() + toPxNum(props.offsetY);
+      offsetY.value = toPxNum(props.offsetY);
       isFocus.value = true;
-      detectBoundary();
     }; // expose
 
 
@@ -453,29 +448,6 @@ export default defineComponent({
       resetValidation();
     };
 
-    var detectBoundary = () => {
-      var {
-        body
-      } = document;
-      var bodyScrollHeight = body.scrollHeight;
-      nextTick(() => {
-        var _menuEl$value;
-
-        var {
-          offsetHeight: menuOffsetHeight
-        } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
-        var wrapOffsetTop = getTop(wrapEl.value);
-
-        if (wrapOffsetTop + offsetY.value < 0) {
-          offsetY.value = getOffsetY();
-        }
-
-        if (menuOffsetHeight + wrapOffsetTop + offsetY.value > bodyScrollHeight) {
-          offsetY.value -= menuOffsetHeight - getOffsetY();
-        }
-      });
-    };
-
     watch(() => props.multiple, () => {
       var {
         multiple,

package/es/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/es/slider/Slider.js

@@ -1,4 +1,4 @@
-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); }
 
 import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components';

package/es/snackbar/core.js

@@ -50,10 +50,12 @@ export function render(_ctx, _cache) {
   , ["name"])) : _createCommentVNode("v-if", true), _ctx.type === 'loading' ? (_openBlock(), _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"])) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "action")], 2
+  , ["type", "size", "color", "radius"])) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "action")], 2
   /* CLASS */
   )], 6
   /* CLASS, STYLE */

package/es/snackbar/index.js

@@ -1,6 +1,6 @@
 import { isVNode as _isVNode, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 
-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); }
 
 import VarSnackbarCore from './core.js'
 import VarSnackbar from './Snackbar.js'

package/es/snackbar/props.js

@@ -1,3 +1,5 @@
+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); }
+
 import { pickProps } from '../utils/components';
 import { props as loadingProps } from '../loading/props';
 import { SNACKBAR_TYPE } from './index';
@@ -37,10 +39,12 @@ export var props = {
     type: Boolean,
     default: false
   },
-  // 加载动画类型
   loadingType: pickProps(loadingProps, 'type'),
-  // 加载动画尺寸
   loadingSize: pickProps(loadingProps, 'size'),
+  loadingRadius: pickProps(loadingProps, 'radius'),
+  loadingColor: _extends({}, pickProps(loadingProps, 'color'), {
+    default: 'currentColor'
+  }),
   // 是否禁止滚动穿透
   lockScroll: {
     type: Boolean,

package/es/snackbar/style/index.js

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'

package/es/space/Space.js

@@ -29,6 +29,10 @@ export default defineComponent({
       return isInternalSize ? internalSizes[size] : isArray(size) ? size.map(toPxNum) : [toPxNum(size), toPxNum(size)];
     };
 
+    var padStartFlex = style => {
+      return style === 'start' || style === 'end' ? "flex-" + style : style;
+    };
+
     return () => {
       var _call;
 
@@ -102,8 +106,8 @@ export default 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/es/style-provider/StyleProvider.js

@@ -10,6 +10,10 @@ export default defineComponent({
     styleVars: {
       type: Object,
       default: () => ({})
+    },
+    tag: {
+      type: String,
+      default: 'div'
     }
   },
 
@@ -17,7 +21,7 @@ export default defineComponent({
     var {
       slots
     } = _ref;
-    return () => h('div', {
+    return () => h(props.tag, {
       class: n(),
       style: formatStyleVars(props.styleVars)
     }, call(slots.default));

package/es/style-provider/index.js

@@ -3,13 +3,9 @@ import { formatStyleVars } from '../utils/elements';
 var mountedVarKeys = [];
 
 function StyleProvider(styleVars) {
-  if (styleVars === void 0) {
-    styleVars = {};
-  }
-
   mountedVarKeys.forEach(key => document.documentElement.style.removeProperty(key));
   mountedVarKeys.length = 0;
-  var styles = formatStyleVars(styleVars);
+  var styles = formatStyleVars(styleVars != null ? styleVars : {});
   Object.entries(styles).forEach(_ref => {
     var [key, value] = _ref;
     document.documentElement.style.setProperty(key, value);