@varlet/ui 1.26.9 → 1.27.0-alpha.1649242923701

package/es/pagination/Pagination.js

@@ -7,18 +7,16 @@ import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './porps';
 import { isNumber, toNumber } from '../utils/shared';
 import { pack } from '../locale';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('pagination');
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, withKeys as _withKeys, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-pagination"
-};
-var _hoisted_2 = ["item-mode", "onClick"];
-var _hoisted_3 = {
-  key: 4,
-  class: "var-pagination__total"
-};
+var _hoisted_1 = ["item-mode", "onClick"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -30,12 +28,10 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("ul", _hoisted_1, [_withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(["var-pagination__item var-pagination__prev", {
-      'var-pagination__item-disabled': _ctx.current <= 1 || _ctx.disabled,
-      'var-pagination__item-hover': _ctx.simple,
-      'var-elevation--2': !_ctx.simple
-    }]),
+  return _openBlock(), _createElementBlock("ul", {
+    class: _normalizeClass(_ctx.n())
+  }, [_withDirectives((_openBlock(), _createElementBlock("li", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('prev'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--hover'), 'var-elevation--2'])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
   }, [_renderSlot(_ctx.$slots, "prev", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-left"
@@ -45,9 +41,7 @@ export function render(_ctx, _cache) {
     disabled: _ctx.current <= 1 || _ctx.disabled
   }]]), _ctx.simple ? (_openBlock(), _createElementBlock("li", {
     key: 0,
-    class: _normalizeClass(["var-pagination__simple", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: _normalizeClass(_ctx.classes(_ctx.n('simple'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [_createVNode(_component_var_input, {
     modelValue: _ctx.simpleValue,
     "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.simpleValue = $event),
@@ -67,28 +61,19 @@ export function render(_ctx, _cache) {
     return _withDirectives((_openBlock(), _createElementBlock("li", {
       key: _ctx.toNumber(item) + index,
       "item-mode": _ctx.getMode(item, index),
-      class: _normalizeClass(["var-pagination__item var-elevation--2", {
-        'var-pagination__item-active': item === _ctx.current && !_ctx.disabled,
-        'var-pagination__item-hide': _ctx.isHideEllipsis(item, index),
-        'var-pagination__item-disabled': _ctx.disabled,
-        'var-pagination__item-disabled-active': item === _ctx.current && _ctx.disabled
-      }]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('item'), 'var-elevation--2', [item === _ctx.current && !_ctx.disabled, _ctx.n('item--active')], [_ctx.isHideEllipsis(item, index), _ctx.n('item--hide')], [_ctx.disabled, _ctx.n('item--disabled')], [item === _ctx.current && _ctx.disabled, _ctx.n('item--disabled--active')])),
       onClick: $event => _ctx.clickItem(item, index)
     }, [_createTextVNode(_toDisplayString(item), 1
     /* TEXT */
     )], 10
     /* CLASS, PROPS */
-    , _hoisted_2)), [[_directive_ripple, {
+    , _hoisted_1)), [[_directive_ripple, {
       disabled: _ctx.disabled
     }]]);
   }), 128
   /* KEYED_FRAGMENT */
   )), _withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(["var-pagination__item var-pagination__next", {
-      'var-pagination__item-disabled': _ctx.current >= _ctx.pageCount || _ctx.disabled,
-      'var-pagination__item-hover': _ctx.simple,
-      'var-elevation--2': !_ctx.simple
-    }]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('next'), [_ctx.current >= _ctx.pageCount || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--hover'), 'var-elevation--2'])),
     onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
   }, [_renderSlot(_ctx.$slots, "next", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-right"
@@ -98,9 +83,7 @@ export function render(_ctx, _cache) {
     disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled
   }]]), _ctx.showSizeChanger ? (_openBlock(), _createElementBlock("li", {
     key: 2,
-    class: _normalizeClass(["var-pagination__size", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: _normalizeClass(_ctx.classes(_ctx.n('size'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [_createVNode(_component_var_menu, {
     show: _ctx.menuVisible,
     "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
@@ -108,9 +91,7 @@ export function render(_ctx, _cache) {
   }, {
     menu: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sizeOption, (option, index) => {
       return _withDirectives((_openBlock(), _createBlock(_component_var_cell, {
-        class: _normalizeClass(["var-pagination__list", {
-          'var-pagination__list-active': _ctx.size === option
-        }]),
+        class: _normalizeClass(_ctx.classes(_ctx.n('list'), [_ctx.size === option, _ctx.n('list--active')])),
         key: index,
         onClick: $event => _ctx.clickSize(option)
       }, {
@@ -127,7 +108,7 @@ export function render(_ctx, _cache) {
     /* KEYED_FRAGMENT */
     ))]),
     default: _withCtx(() => [_createElementVNode("div", {
-      class: "var-pagination__size-open",
+      class: _normalizeClass(_ctx.n('size--open')),
       style: {
         "display": "flex"
       },
@@ -137,10 +118,14 @@ export function render(_ctx, _cache) {
     }, [_createElementVNode("span", null, _toDisplayString(_ctx.size) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage), 1
     /* TEXT */
     ), _createVNode(_component_var_icon, {
-      class: "var-pagination__size-open-icon",
+      class: _normalizeClass(_ctx.n('size--open-icon')),
       "var-pagination-cover": "",
       name: "menu-down"
-    })])]),
+    }, null, 8
+    /* PROPS */
+    , ["class"])], 2
+    /* CLASS */
+    )]),
     _: 1
     /* STABLE */
 
@@ -150,9 +135,7 @@ export function render(_ctx, _cache) {
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.showQuickJumper && !_ctx.simple ? (_openBlock(), _createElementBlock("li", {
     key: 3,
-    class: _normalizeClass(["var-pagination__quickly", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: _normalizeClass(_ctx.classes(_ctx.n('quickly'), [_ctx.disabled, 'item--disabled']))
   }, [_createTextVNode(_toDisplayString(_ctx.pack.paginationJump) + " ", 1
   /* TEXT */
   ), _createVNode(_component_var_input, {
@@ -166,9 +149,14 @@ export function render(_ctx, _cache) {
   /* PROPS */
   , ["modelValue", "disabled"])], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true), _ctx.totalText ? (_openBlock(), _createElementBlock("li", _hoisted_3, _toDisplayString(_ctx.totalText), 1
-  /* TEXT */
-  )) : _createCommentVNode("v-if", true)]);
+  )) : _createCommentVNode("v-if", true), _ctx.totalText ? (_openBlock(), _createElementBlock("li", {
+    key: 4,
+    class: _normalizeClass(_ctx.n('total'))
+  }, _toDisplayString(_ctx.totalText), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -345,6 +333,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack,
       current,
       menuVisible,

package/es/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; 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: 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-disabled-active { background: var(--pagination-bg-disabled-color);}.var-pagination__item-hide { display: none;}.var-pagination__item-disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item-disabled:hover { background-color: unset;}.var-pagination__item-hover:hover { background: inherit;}.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__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; 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: 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--disabled--active { background: var(--pagination-bg-disabled-color);}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--hover:hover { background: inherit;}.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__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);}

package/es/pagination/pagination.less

@@ -73,20 +73,20 @@
       background-color: var(--pagination-hover-bg-color);
     }
 
-    &-active {
+    &--active {
       color: var(--pagination-active-color);
       background-color: var(--pagination-active-bg-color) !important;
     }
 
-    &-disabled-active {
+    &--disabled--active {
       background: var(--pagination-bg-disabled-color);
     }
 
-    &-hide {
+    &--hide {
       display: none;
     }
 
-    &-disabled {
+    &--disabled {
       cursor: default !important;
       color: var(--pagination-disabled-color);
 
@@ -95,7 +95,7 @@
       }
     }
 
-    &-hover {
+    &--hover {
       &:hover {
         background: inherit;
       }
@@ -119,7 +119,7 @@
     line-height: var(--pagination-size-line-height);
     margin: var(--pagination-item-margin);
 
-    &-open {
+    &--open {
       display: flex;
       align-items: center;
       cursor: pointer;
@@ -136,7 +136,7 @@
       background-color: var(--pagination-hover-bg-color);
     }
 
-    &-active {
+    &--active {
       background-color: var(--pagination-list-active-bg-color) !important;
       color: var(--pagination-list-active-color);
     }
@@ -168,7 +168,7 @@
     }
   }
 
-  &__size-open-icon[var-pagination-cover] {
+  &__size--open-icon[var-pagination-cover] {
     font-size: inherit;
   }
 

package/es/picker/Picker.js

@@ -5,24 +5,20 @@ import { props } from './props';
 import { isArray, dt } from '../utils/shared';
 import { toPxNum, getTranslate } from '../utils/elements';
 import { pack } from '../locale';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('picker');
 var MOMENTUM_RECORD_TIME = 300;
 var MOMENTUM_ALLOW_DISTANCE = 15;
 var sid = 0;
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-picker__toolbar"
-};
-var _hoisted_2 = {
-  class: "var-picker__title"
-};
-var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend"];
-var _hoisted_4 = ["onTransitionend"];
-var _hoisted_5 = {
-  class: "var-picker__text"
-};
+var _hoisted_1 = ["onTouchstart", "onTouchmove", "onTouchend"];
+var _hoisted_2 = ["onTransitionend"];
 export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
@@ -38,14 +34,16 @@ export function render(_ctx, _cache) {
     show: _ctx.show,
     'onUpdate:show': _ctx.handlePopupUpdateShow,
     position: 'bottom',
-    class: 'var-picker__popup'
+    class: _ctx.n('popup')
   } : null, {
     "var-picker-cover": ""
   }), {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: "var-picker"
-    }, _ctx.$attrs), [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "cancel", {}, () => [_createVNode(_component_var_button, {
-      class: "var-picker__cancel-button",
+      class: _ctx.n()
+    }, _ctx.$attrs), [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('toolbar'))
+    }, [_renderSlot(_ctx.$slots, "cancel", {}, () => [_createVNode(_component_var_button, {
+      class: _normalizeClass(_ctx.n('cancel-button')),
       "var-picker-cover": "",
       text: "",
       "text-color": _ctx.cancelButtonTextColor,
@@ -59,10 +57,12 @@ export function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", _hoisted_2, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 1
-    /* TEXT */
+    , ["class", "text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('title'))
+    }, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 3
+    /* TEXT, CLASS */
     )]), _renderSlot(_ctx.$slots, "confirm", {}, () => [_createVNode(_component_var_button, {
-      class: "var-picker__confirm-button",
+      class: _normalizeClass(_ctx.n('confirm-button')),
       text: "",
       "var-picker-cover": "",
       "text-color": _ctx.confirmButtonTextColor,
@@ -76,20 +76,22 @@ export function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])])]), _createElementVNode("div", {
-      class: "var-picker__columns",
+    , ["class", "text-color", "onClick"])])], 2
+    /* CLASS */
+    ), _createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('columns')),
       style: _normalizeStyle({
         height: _ctx.columnHeight + "px"
       })
     }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.scrollColumns, c => {
       return _openBlock(), _createElementBlock("div", {
-        class: "var-picker__column",
+        class: _normalizeClass(_ctx.n('column')),
         key: c.id,
         onTouchstart: $event => _ctx.handleTouchstart($event, c),
         onTouchmove: _withModifiers($event => _ctx.handleTouchmove($event, c), ["prevent"]),
         onTouchend: $event => _ctx.handleTouchend($event, c)
       }, [_createElementVNode("div", {
-        class: "var-picker__scroller",
+        class: _normalizeClass(_ctx.n('scroller')),
         ref_for: true,
         ref: el => _ctx.getScrollEl(el, c),
         style: _normalizeStyle({
@@ -100,42 +102,44 @@ export function render(_ctx, _cache) {
         onTransitionend: $event => _ctx.handleTransitionend(c)
       }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(c.column.texts, t => {
         return _openBlock(), _createElementBlock("div", {
-          class: "var-picker__option",
+          class: _normalizeClass(_ctx.n('option')),
           style: _normalizeStyle({
             height: _ctx.optionHeight + "px"
           }),
           key: t
-        }, [_createElementVNode("div", _hoisted_5, _toDisplayString(t), 1
-        /* TEXT */
-        )], 4
-        /* STYLE */
+        }, [_createElementVNode("div", {
+          class: _normalizeClass(_ctx.n('text'))
+        }, _toDisplayString(t), 3
+        /* TEXT, CLASS */
+        )], 6
+        /* CLASS, STYLE */
         );
       }), 128
       /* KEYED_FRAGMENT */
-      ))], 44
-      /* STYLE, PROPS, HYDRATE_EVENTS */
-      , _hoisted_4)], 40
-      /* PROPS, HYDRATE_EVENTS */
-      , _hoisted_3);
+      ))], 46
+      /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+      , _hoisted_2)], 42
+      /* CLASS, PROPS, HYDRATE_EVENTS */
+      , _hoisted_1);
     }), 128
     /* KEYED_FRAGMENT */
     )), _createElementVNode("div", {
-      class: "var-picker__picked",
+      class: _normalizeClass(_ctx.n('picked')),
       style: _normalizeStyle({
         top: _ctx.center + "px",
         height: _ctx.optionHeight + "px"
       })
-    }, null, 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
     ), _createElementVNode("div", {
-      class: "var-picker__mask",
+      class: _normalizeClass(_ctx.n('mask')),
       style: _normalizeStyle({
         backgroundSize: "100% " + (_ctx.columnHeight - _ctx.optionHeight) / 2 + "px"
       })
-    }, null, 4
-    /* STYLE */
-    )], 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
+    )], 6
+    /* CLASS, STYLE */
     )], 16
     /* FULL_PROPS */
     )]),
@@ -169,9 +173,7 @@ export default defineComponent({
     };
 
     var handlePopupUpdateShow = value => {
-      var _props$onUpdateShow;
-
-      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, value);
+      call(props['onUpdate:show'], value);
     };
 
     var limitTranslate = scrollColumn => {
@@ -356,7 +358,7 @@ export default defineComponent({
       }
 
       prevIndexes = [...indexes];
-      onChange == null ? void 0 : onChange(texts, indexes);
+      call(onChange, texts, indexes);
     };
 
     var stopScroll = () => {
@@ -387,7 +389,7 @@ export default defineComponent({
         indexes
       } = getPicked();
       prevIndexes = [...indexes];
-      props.onConfirm == null ? void 0 : props.onConfirm(texts, indexes);
+      call(props.onConfirm, texts, indexes);
     }; // expose
 
 
@@ -398,7 +400,7 @@ export default defineComponent({
         indexes
       } = getPicked();
       prevIndexes = [...indexes];
-      props.onCancel == null ? void 0 : props.onCancel(texts, indexes);
+      call(props.onCancel, texts, indexes);
     };
 
     watch(() => props.columns, newValue => {
@@ -411,6 +413,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack,
       optionHeight,
       optionCount,

package/es/popup/Popup.js

@@ -6,7 +6,7 @@ import { defineComponent, watch, Transition, Teleport } from 'vue';
 import { props } from './props';
 import { useLock } from '../context/lock';
 import { useZIndex } from '../context/zIndex';
-import { addRouteListener, useTeleport } from '../utils/components';
+import { addRouteListener, useTeleport, createNamespace } from '../utils/components';
 
 
 
@@ -14,6 +14,10 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
 
+var {
+  n,
+  classes
+} = createNamespace('popup');
 export default defineComponent({
   name: 'VarPopup',
   inheritAttrs: false,
@@ -60,11 +64,11 @@ export default defineComponent({
 
     var renderOverlay = () => {
       var {
-        overlayClass,
+        overlayClass = '',
         overlayStyle
       } = props;
       return _createVNode("div", {
-        "class": ['var-popup__overlay', overlayClass],
+        "class": classes(n('overlay'), overlayClass),
         "style": _extends({
           zIndex: zIndex.value - 1
         }, overlayStyle),
@@ -74,7 +78,7 @@ export default defineComponent({
 
     var renderContent = () => {
       return _createVNode("div", _mergeProps({
-        "class": ['var-popup__content', 'var-elevation--3', "var-popup--" + props.position],
+        "class": classes(n('content'), 'var-elevation--3', n("--" + props.position)),
         "style": {
           zIndex: zIndex.value
         }
@@ -96,7 +100,7 @@ export default defineComponent({
         "onAfterLeave": onClosed
       }, {
         default: () => [_withDirectives(_createVNode("div", {
-          "class": "var--box var-popup",
+          "class": classes('var--box', n()),
           "style": {
             zIndex: zIndex.value - 2
           }

package/es/progress/Progress.js

@@ -1,36 +1,39 @@
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
-import { normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, mergeProps as _mergeProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('progress');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-progress"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-progress-linear"
-};
-var _hoisted_3 = ["viewBox"];
-var _hoisted_4 = ["cx", "cy", "r", "stroke-width"];
-var _hoisted_5 = ["cx", "cy", "r", "stroke-width"];
+var _hoisted_1 = ["viewBox"];
+var _hoisted_2 = ["cx", "cy", "r", "stroke-width"];
+var _hoisted_3 = ["cx", "cy", "r", "stroke-width"];
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.mode === 'linear' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createElementVNode("div", _mergeProps({
-    class: "var-progress-linear__block",
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_ctx.mode === 'linear' ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('linear'))
+  }, [_createElementVNode("div", _mergeProps({
+    class: _ctx.n('linear-block'),
     style: {
       height: _ctx.lineWidth + "px"
     }
   }, _ctx.$attrs), [_ctx.track ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: "var-progress-linear__background",
+    class: _normalizeClass(_ctx.n('linear-background')),
     style: _normalizeStyle({
       background: _ctx.trackColor
     })
-  }, null, 4
-  /* STYLE */
+  }, null, 6
+  /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
-    class: _normalizeClass("var-progress-linear__certain" + (_ctx.ripple ? ' var-progress-linear__ripple' : '')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('linear-certain'), [_ctx.ripple, _ctx.n('linear-ripple')])),
     style: _normalizeStyle({
       background: _ctx.color,
       width: _ctx.linearProps.width
@@ -41,27 +44,29 @@ export function render(_ctx, _cache) {
   /* FULL_PROPS */
   ), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
     key: 0,
-    class: "var-progress-linear__label"
+    class: _ctx.n('linear-label')
   }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.linearProps.roundValue), 1
   /* TEXT */
   )])], 16
   /* FULL_PROPS */
-  )) : _createCommentVNode("v-if", true)])) : _createCommentVNode("v-if", true), _ctx.mode === 'circle' ? (_openBlock(), _createElementBlock("div", {
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.mode === 'circle' ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: "var-progress-circle",
+    class: _normalizeClass(_ctx.n('circle')),
     style: _normalizeStyle({
       width: _ctx.size + "px",
       height: _ctx.size + "px"
     })
   }, [(_openBlock(), _createElementBlock("svg", {
-    class: "var-progress-circle__svg",
+    class: _normalizeClass(_ctx.n('circle-svg')),
     style: _normalizeStyle({
       transform: "rotate(" + (_ctx.rotate - 90) + "deg)"
     }),
     viewBox: _ctx.circleProps.viewBox
   }, [_ctx.track ? (_openBlock(), _createElementBlock("circle", {
     key: 0,
-    class: "var-progress-circle__background",
+    class: _normalizeClass(_ctx.n('circle-background')),
     cx: _ctx.size / 2,
     cy: _ctx.size / 2,
     r: _ctx.circleProps.radius,
@@ -71,10 +76,10 @@ export function render(_ctx, _cache) {
       strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
     })
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_4)) : _createCommentVNode("v-if", true), _createElementVNode("circle", {
-    class: "var-progress-circle__certain",
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_2)) : _createCommentVNode("v-if", true), _createElementVNode("circle", {
+    class: _normalizeClass(_ctx.n('circle-certain')),
     cx: _ctx.size / 2,
     cy: _ctx.size / 2,
     r: _ctx.circleProps.radius,
@@ -84,20 +89,22 @@ export function render(_ctx, _cache) {
       strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
     })
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_5)], 12
-  /* STYLE, PROPS */
-  , _hoisted_3)), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_3)], 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_1)), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
     key: 0,
-    class: "var-progress-circle__label"
+    class: _ctx.n('circle-label')
   }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.circleProps.roundValue), 1
   /* TEXT */
   )])], 16
   /* FULL_PROPS */
-  )) : _createCommentVNode("v-if", true)], 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true)]);
+  )) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -135,6 +142,8 @@ export default defineComponent({
       };
     });
     return {
+      n,
+      classes,
       linearProps,
       circleProps
     };

package/es/progress/progress.css

@@ -1 +1 @@
-:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress-linear { display: flex; align-items: center;}.var-progress-linear__block { flex: 1; position: relative; overflow: hidden;}.var-progress-linear__background,.var-progress-linear__certain { width: 100%; height: 100%;}.var-progress-linear__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: '';}.var-progress-linear__background { background-color: var(--progress-track-color);}.var-progress-linear__certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress-linear__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; }}.var-progress-circle { position: relative;}.var-progress-circle__background { stroke: var(--progress-track-color);}.var-progress-circle__certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress-circle__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
+:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden;}.var-progress__linear-background,.var-progress__linear-certain { width: 100%; height: 100%;}.var-progress__linear-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: '';}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-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; }}.var-progress__circle { position: relative;}.var-progress__circle-background { stroke: var(--progress-track-color);}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}