@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/slider/Slider.js

@@ -1,12 +1,16 @@
 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); }
 
 import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useForm } from '../form/provide';
 import { getLeft } from '../utils/elements';
 import { isArray, isNumber, toNumber } from '../utils/shared';
 import { props } from './props';
 import VarFormDetails from '../form-details';
+var {
+  n,
+  classes
+} = createNamespace('slider');
 var Thumbs;
 
 (function (Thumbs) {
@@ -14,22 +18,18 @@ var Thumbs;
   Thumbs["Second"] = "2";
 })(Thumbs || (Thumbs = {}));
 
-import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, normalizeClass as _normalizeClass, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-slider"
-};
-var _hoisted_2 = {
-  class: "var-slider__track"
-};
-var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
+var _hoisted_1 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
 export function render(_ctx, _cache) {
   var _component_var_form_details = _resolveComponent("var-form-details");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
-    class: _normalizeClass(["var-slider-block", [_ctx.isDisabled ? 'var-slider__disable' : null, _ctx.errorMessage ? 'var-slider__error' : null]]),
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('block'), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')])),
     style: _normalizeStyle({
       height: _ctx.thumbSize === undefined ? _ctx.thumbSize : 3 * _ctx.toNumber(_ctx.thumbSize) + "px",
       margin: _ctx.thumbSize === undefined ? _ctx.thumbSize : "0 " + _ctx.toNumber(_ctx.thumbSize) / 2 + "px"
@@ -38,22 +38,26 @@ export function render(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.click && _ctx.click(...arguments);
     })
-  }, [_createElementVNode("div", _hoisted_2, [_createElementVNode("div", {
-    class: "var-slider__track-background",
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('track'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('track-background')),
     style: _normalizeStyle({
       background: _ctx.trackColor,
       height: _ctx.trackHeight + 'px'
     })
-  }, null, 4
-  /* STYLE */
+  }, null, 6
+  /* CLASS, STYLE */
   ), _createElementVNode("div", {
-    class: "var-slider__track-fill",
+    class: _normalizeClass(_ctx.n('track-fill')),
     style: _normalizeStyle(_ctx.getFillStyle)
-  }, null, 4
-  /* STYLE */
-  )]), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.thumbList, item => {
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  ), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.thumbList, item => {
     return _openBlock(), _createElementBlock("div", {
-      class: "var-slider__thumb",
+      class: _normalizeClass(_ctx.n('thumb')),
       key: item.enumValue,
       style: _normalizeStyle({
         left: item.value + "%",
@@ -66,23 +70,23 @@ export function render(_ctx, _cache) {
     }, [_renderSlot(_ctx.$slots, "button", {
       currentValue: item.value
     }, () => [_createElementVNode("div", {
-      class: "var-slider__thumb-block",
+      class: _normalizeClass(_ctx.n('thumb-block')),
       style: _normalizeStyle({
         background: _ctx.thumbColor,
         height: _ctx.thumbSize + 'px',
         width: _ctx.thumbSize + 'px'
       })
-    }, null, 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
     ), _createElementVNode("div", {
-      class: _normalizeClass(["var-slider__thumb-ripple", [_ctx.thumbsProps[item.enumValue].active ? 'var-slider__thumb-ripple-active' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('thumb-ripple'), [_ctx.thumbsProps[item.enumValue].active, _ctx.n('thumb-ripple--active')])),
       style: _normalizeStyle(_extends({
         background: _ctx.thumbColor
       }, _ctx.getRippleSize(item)))
     }, null, 6
     /* CLASS, STYLE */
     ), _createElementVNode("div", {
-      class: _normalizeClass(["var-slider__thumb-label", [_ctx.showLabel(item.enumValue) ? 'var-slider__thumb-label-active' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('thumb-label'), [_ctx.showLabel(item.enumValue), _ctx.n('thumb-label--active')])),
       style: _normalizeStyle({
         background: _ctx.labelColor,
         color: _ctx.labelTextColor,
@@ -93,20 +97,22 @@ export function render(_ctx, _cache) {
     /* TEXT */
     )], 6
     /* CLASS, STYLE */
-    )])], 44
-    /* STYLE, PROPS, HYDRATE_EVENTS */
-    , _hoisted_3);
+    )])], 46
+    /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
   ))], 6
   /* CLASS, STYLE */
   ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
-    class: "var-slider__form",
+    class: _normalizeClass(_ctx.n('form')),
     "var-slider-cover": ""
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message", "class"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -221,11 +227,9 @@ export default defineComponent({
       }
 
       if (prevValue !== curValue) {
-        var _props$onUpdateModel;
-
         var value = range ? rangeValue : curValue;
-        onChange == null ? void 0 : onChange(value);
-        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value);
+        call(onChange, value);
+        call(props['onUpdate:modelValue'], value);
         validateWithTrigger();
       }
     };
@@ -242,7 +246,7 @@ export default defineComponent({
     var start = (event, type) => {
       if (!maxWidth.value) maxWidth.value = sliderEl.value.offsetWidth;
       if (isDisabled.value || isReadonly.value) return;
-      props.onStart == null ? void 0 : props.onStart();
+      call(props.onStart);
       isScroll.value = true;
       thumbsProps[type].startPosition = event.touches[0].clientX;
     };
@@ -271,7 +275,7 @@ export default defineComponent({
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
       }
 
-      onEnd == null ? void 0 : onEnd(range ? rangeValue : curValue);
+      call(onEnd, range ? rangeValue : curValue);
       isScroll.value = false;
     };
 
@@ -360,10 +364,8 @@ export default defineComponent({
     });
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
       var resetValue = props.range ? [0, 0] : 0;
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, resetValue);
+      call(props['onUpdate:modelValue'], resetValue);
       resetValidation();
     };
 
@@ -372,8 +374,10 @@ export default defineComponent({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(sliderProvider);
+    call(bindForm, sliderProvider);
     return {
+      n,
+      classes,
       Thumbs,
       sliderEl,
       getFillStyle,

package/es/slider/slider.css

@@ -1 +1 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-slider-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider__disable { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple-active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label-active { transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);}.var-slider__error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider__error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider__error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider--disabled { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}

package/es/slider/slider.less

@@ -19,7 +19,7 @@
 .var-slider {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  &-block {
+  &__block {
     display: flex;
     align-items: center;
     position: relative;
@@ -29,7 +29,7 @@
     margin: 0 6px;
   }
 
-  &__disable {
+  &--disabled {
     filter: opacity(0.6);
   }
 
@@ -78,7 +78,7 @@
       background: var(--slider-thumb-ripple-background);
       transition: 0.3s var(--cubic-bezier);
 
-      &-active {
+      &--active {
         width: 36px;
         height: 36px;
       }
@@ -107,13 +107,13 @@
         transform: rotate(-45deg);
       }
 
-      &-active {
+      &--active {
         transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);
       }
     }
   }
 
-  &__error {
+  &--error {
     .var-slider__track {
       &-background {
         background-color: var(--slider-error-color) !important;

package/es/snackbar/Snackbar.js

@@ -1,7 +1,10 @@
 import { defineComponent } from 'vue';
 import VarSnackbarCore from './core';
-import { useTeleport } from '../utils/components';
+import { createNamespace, useTeleport } from '../utils/components';
 import { props } from './props';
+var {
+  n
+} = createNamespace('snackbar');
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, Transition as _Transition, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_snackbar_core = _resolveComponent("var-snackbar-core");
@@ -10,12 +13,12 @@ export function render(_ctx, _cache) {
     to: _ctx.teleport,
     disabled: _ctx.disabled
   }, [_createVNode(_Transition, {
-    name: "var-snackbar-fade",
+    name: _ctx.n() + "-fade",
     onAfterEnter: _ctx.onOpened,
     onAfterLeave: _ctx.onClosed
   }, {
     default: _withCtx(() => [_createVNode(_component_var_snackbar_core, _mergeProps(_ctx.$props, {
-      class: "var-snackbar-transition"
+      class: _ctx.n('transition')
     }), {
       action: _withCtx(() => [_renderSlot(_ctx.$slots, "action")]),
       default: _withCtx(() => [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.content), 1
@@ -26,13 +29,13 @@ export function render(_ctx, _cache) {
 
     }, 16
     /* FULL_PROPS */
-    )]),
+    , ["class"])]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["onAfterEnter", "onAfterLeave"])], 8
+  , ["name", "onAfterEnter", "onAfterLeave"])], 8
   /* PROPS */
   , ["to", "disabled"]);
 }
@@ -49,6 +52,7 @@ export default defineComponent({
       disabled
     } = useTeleport();
     return {
+      n,
       disabled
     };
   }

package/es/snackbar/core.js

@@ -5,6 +5,11 @@ import { useZIndex } from '../context/zIndex';
 import { props } from './props';
 import { useLock } from '../context/lock';
 import { SNACKBAR_TYPE } from './index';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('snackbar');
 var ICON_TYPE_DICT = {
   success: 'checkbox-marked-circle',
   warning: 'warning',
@@ -12,36 +17,32 @@ var ICON_TYPE_DICT = {
   error: 'error',
   loading: ''
 };
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-snackbar__action"
-};
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_loading = _resolveComponent("var-loading");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: "var-snackbar",
+    class: _normalizeClass(_ctx.n()),
     style: _normalizeStyle({
       pointerEvents: _ctx.isForbidClick ? 'auto' : 'none',
       zIndex: _ctx.zIndex
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.snackbarClass),
+    class: _normalizeClass(_ctx.classes(_ctx.n('wrapper'), _ctx.n("wrapper-" + _ctx.position), 'var-elevation--4', [_ctx.vertical, _ctx.n('vertical')], [_ctx.type && _ctx.SNACKBAR_TYPE.includes(_ctx.type), _ctx.n("wrapper-" + _ctx.type)])),
     style: _normalizeStyle({
       zIndex: _ctx.zIndex
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-snackbar__content", [_ctx.contentClass]])
+    class: _normalizeClass([_ctx.n('content'), _ctx.contentClass])
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.content), 1
   /* TEXT */
   )])], 2
   /* CLASS */
-  ), _createElementVNode("div", _hoisted_1, [_ctx.iconName ? (_openBlock(), _createBlock(_component_var_icon, {
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('action'))
+  }, [_ctx.iconName ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
     name: _ctx.iconName
   }, null, 8
@@ -52,10 +53,12 @@ export function render(_ctx, _cache) {
     size: _ctx.loadingSize
   }, null, 8
   /* PROPS */
-  , ["type", "size"])) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "action")])], 6
+  , ["type", "size"])) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "action")], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )], 6
   /* CLASS, STYLE */
-  )], 4
-  /* STYLE */
   )), [[_vShow, _ctx.show]]);
 }
 export default defineComponent({
@@ -73,17 +76,6 @@ export default defineComponent({
       zIndex
     } = useZIndex(() => props.show, 1);
     useLock(props, 'show', 'lockScroll');
-    var snackbarClass = computed(() => {
-      var {
-        position,
-        vertical,
-        type
-      } = props;
-      var baseClass = "var-snackbar__wrapper var-snackbar__wrapper-" + position + " var-elevation--4";
-      var verticalClass = vertical ? ' var-snackbar__vertical' : '';
-      var typeClass = type && SNACKBAR_TYPE.includes(type) ? " var-snackbar__wrapper-" + type : '';
-      return "" + baseClass + verticalClass + typeClass;
-    });
     var isForbidClick = computed(() => props.type === 'loading' || props.forbidClick);
     var iconName = computed(() => {
       if (!props.type) return '';
@@ -118,8 +110,10 @@ export default defineComponent({
       }
     });
     return {
+      SNACKBAR_TYPE,
+      n,
+      classes,
       zIndex,
-      snackbarClass,
       iconName,
       isForbidClick
     };

package/es/snackbar/snackbar.css

@@ -1 +1 @@
-:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 16px 0 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin-bottom: 8px;}.var-snackbar-fade-leave-active { position: absolute;}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}.var-snackbar-transition { top: 0; position: fixed;}.var-snackbar-transition .var-snackbar__wrapper { position: absolute;}.var-snackbar-transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar-transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar-transition .var-snackbar__wrapper-bottom { bottom: 5%;}
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 16px 0 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin-bottom: 8px;}.var-snackbar-fade-leave-active { position: absolute;}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}

package/es/snackbar/snackbar.less

@@ -41,95 +41,93 @@
   pointer-events: auto;
 }
 
-.var {
-  &-snackbar {
-    display: flex;
-    justify-content: center;
-    align-items: baseline;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transition: all 0.15s var(--cubic-bezier);
-
-    &__wrapper {
-      width: var(--snackbar-width);
-      display: flex;
-      border-radius: var(--snackbar-border-radius);
-      color: var(--snackbar-color);
-      background: var(--snackbar-background);
-      font-size: var(--snackbar-font-size);
-      margin: var(--snackbar-margin);
-      align-items: center;
-      border-color: var(--snackbar-border-color);
-      pointer-events: auto;
-      transition: 0.3s var(--cubic-bezier);
-
-      &-success {
-        background: var(--snackbar-success-background);
-      }
+.var-snackbar {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: all 0.15s var(--cubic-bezier);
+
+  &__transition {
+    top: 0;
+    position: fixed;
+
+    .var-snackbar__wrapper {
+      position: absolute;
 
-      &-info {
-        background: var(--snackbar-info-background);
+      &-top {
+        top: 5%;
       }
 
-      &-warning {
-        background: var(--snackbar-warning-background);
+      &-center {
+        top: 45%;
       }
 
-      &-error {
-        background: var(--snackbar-error-background);
+      &-bottom {
+        bottom: 5%;
       }
     }
+  }
 
-    &__content {
-      flex-grow: 1;
-      padding: var(--snackbar-content-padding);
+  &__wrapper {
+    width: var(--snackbar-width);
+    display: flex;
+    border-radius: var(--snackbar-border-radius);
+    color: var(--snackbar-color);
+    background: var(--snackbar-background);
+    font-size: var(--snackbar-font-size);
+    margin: var(--snackbar-margin);
+    align-items: center;
+    border-color: var(--snackbar-border-color);
+    pointer-events: auto;
+    transition: 0.3s var(--cubic-bezier);
+
+    &-success {
+      background: var(--snackbar-success-background);
     }
 
-    &__action {
-      margin: var(--snackbar-action-margin);
-      display: flex;
+    &-info {
+      background: var(--snackbar-info-background);
     }
 
-    &__vertical {
-      flex-direction: column;
-      align-items: flex-start;
-
-      .var-snackbar__action {
-        align-self: flex-end;
-        margin-bottom: 8px;
-      }
+    &-warning {
+      background: var(--snackbar-warning-background);
     }
 
-    &-fade-leave-active {
-      position: absolute;
+    &-error {
+      background: var(--snackbar-error-background);
     }
+  }
 
-    &-fade-enter-from,
-    &-fade-leave-to {
-      opacity: 0;
-      transform: translateY(-30px);
-    }
+  &__content {
+    flex-grow: 1;
+    padding: var(--snackbar-content-padding);
   }
 
-  &-snackbar-transition {
-    top: 0;
-    position: fixed;
+  &__action {
+    margin: var(--snackbar-action-margin);
+    display: flex;
+  }
 
-    .var-snackbar__wrapper {
-      position: absolute;
+  &__vertical {
+    flex-direction: column;
+    align-items: flex-start;
 
-      &-top {
-        top: 5%;
-      }
+    .var-snackbar__action {
+      align-self: flex-end;
+      margin-bottom: 8px;
+    }
+  }
 
-      &-center {
-        top: 45%;
-      }
+  &-fade-leave-active {
+    position: absolute;
+  }
 
-      &-bottom {
-        bottom: 5%;
-      }
-    }
+  &-fade-enter-from,
+  &-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
   }
 }

package/es/space/Space.js

@@ -5,6 +5,11 @@ import { toPxNum } from '../utils/elements';
 import { isArray } from '../utils/shared';
 
 
+import { call, createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('space');
 var internalSizes = {
   mini: [4, 4],
   small: [6, 6],
@@ -25,7 +30,7 @@ export default defineComponent({
     };
 
     return () => {
-      var _slots$default;
+      var _call;
 
       var {
         inline,
@@ -35,7 +40,7 @@ export default defineComponent({
         direction,
         size
       } = props;
-      var children = (_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : [];
+      var children = (_call = call(slots.default)) != null ? _call : [];
       var isInternalSize = internalSizeValidator(size);
       var [y, x] = getSize(size, isInternalSize);
 
@@ -92,7 +97,7 @@ export default defineComponent({
         }, [child]);
       });
       return _createVNode("div", {
-        "class": ['var-space', 'var--box', inline ? 'var-space--inline' : null],
+        "class": classes(n(), 'var--box', [inline, n('--inline')]),
         "style": {
           flexDirection: direction,
           justifyContent: justify,