@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/checkbox-group/CheckboxGroup.js

@@ -1,29 +1,31 @@
 import VarFormDetails from '../form-details';
 import { defineComponent, computed, watch, nextTick } from 'vue';
 import { props } from './props';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useCheckboxes } from './provide';
 import { useForm } from '../form/provide';
 import { uniq } from '../utils/shared';
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-checkbox-group__wrap"
-};
+var {
+  n,
+  classes
+} = createNamespace('checkbox-group');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 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-checkbox-group", ["var-checkbox-group--" + _ctx.direction]])
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n('wrap'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("--" + _ctx.direction)))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -65,10 +67,8 @@ export default defineComponent({
     };
 
     var change = changedModelValue => {
-      var _props$onUpdateModel;
-
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, changedModelValue);
-      props.onChange == null ? void 0 : props.onChange(changedModelValue);
+      call(props['onUpdate:modelValue'], changedModelValue);
+      call(props.onChange, changedModelValue);
       validateWithTrigger('onChange');
     };
 
@@ -107,8 +107,6 @@ export default defineComponent({
 
 
     var checkAll = () => {
-      var _props$onUpdateModel2;
-
       var checkedValues = checkboxes.map(_ref2 => {
         var {
           checkedValue
@@ -117,14 +115,12 @@ export default defineComponent({
       });
       var changedModelValue = uniq(checkedValues);
       resetWithAnimation();
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
+      call(props['onUpdate:modelValue'], changedModelValue);
       return changedModelValue;
     }; // expose
 
 
     var inverseAll = () => {
-      var _props$onUpdateModel3;
-
       var checkedValues = checkboxes.filter(_ref3 => {
         var {
           checked
@@ -138,15 +134,13 @@ export default defineComponent({
       });
       var changedModelValue = uniq(checkedValues);
       resetWithAnimation();
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
+      call(props['onUpdate:modelValue'], changedModelValue);
       return changedModelValue;
     }; // expose
 
 
     var reset = () => {
-      var _props$onUpdateModel4;
-
-      (_props$onUpdateModel4 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel4.call(props, []);
+      call(props['onUpdate:modelValue'], []);
       resetValidation();
     }; // expose
 
@@ -168,9 +162,11 @@ export default defineComponent({
       errorMessage: checkboxGroupErrorMessage
     };
     bindCheckboxes(checkboxGroupProvider);
-    bindForm == null ? void 0 : bindForm(checkboxGroupProvider);
+    call(bindForm, checkboxGroupProvider);
     return {
       errorMessage,
+      n,
+      classes,
       checkAll,
       inverseAll,
       reset,

package/es/chip/Chip.js

@@ -1,6 +1,11 @@
 import VarIcon from '../icon';
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('chip');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
@@ -9,15 +14,15 @@ export function render(_ctx, _cache) {
     name: "var-fade"
   }, {
     default: _withCtx(() => [_createElementVNode("span", _mergeProps({
-      class: ["var-chip var--box", _ctx.contentClass],
+      class: _ctx.classes(_ctx.n(), 'var--box', ..._ctx.contentClass),
       style: _ctx.chipStyles
     }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "left"), _createElementVNode("span", {
-      class: _normalizeClass(["var-chip--text-" + _ctx.size])
+      class: _normalizeClass(_ctx.n("text-" + _ctx.size))
     }, [_renderSlot(_ctx.$slots, "default")], 2
     /* CLASS */
     ), _renderSlot(_ctx.$slots, "right"), _ctx.closable ? (_openBlock(), _createElementBlock("span", {
       key: 0,
-      class: "var-chip--close",
+      class: _normalizeClass(_ctx.n('--close')),
       onClick: _cache[0] || (_cache[0] = function () {
         return _ctx.onClose && _ctx.onClose(...arguments);
       })
@@ -25,7 +30,9 @@ export function render(_ctx, _cache) {
       name: "" + (_ctx.iconName ? _ctx.iconName : 'close-circle')
     }, null, 8
     /* PROPS */
-    , ["name"])])) : _createCommentVNode("v-if", true)], 16
+    , ["name"])], 2
+    /* CLASS */
+    )) : _createCommentVNode("v-if", true)], 16
     /* FULL_PROPS */
     )]),
     _: 3
@@ -71,11 +78,13 @@ export default defineComponent({
         round
       } = props;
       var blockClass = block ? 'var--flex' : 'var--inline-flex';
-      var plainTypeClass = plain ? "var-chip--plain var-chip--plain-" + type : "var-chip--" + type;
-      var roundClass = round && 'var-chip--round';
-      return ["var-chip--" + size, blockClass, plainTypeClass, roundClass];
+      var plainTypeClass = plain ? n('plain') + " " + n("plain-" + type) : n("--" + type);
+      var roundClass = round ? n('--round') : null;
+      return [n("--" + size), blockClass, plainTypeClass, roundClass];
     });
     return {
+      n,
+      classes,
       chipStyles,
       contentClass
     };

package/es/chip/chip.css

@@ -1 +1 @@
-:root { --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary); --chip-danger-color: var(--color-danger); --chip-success-color: var(--color-success); --chip-warning-color: var(--color-warning); --chip-info-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0px 10px; --chip-large-padding: 0px 17px; --chip-small-padding: 0px 6px; --chip-mini-padding: 0px 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px;}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; line-height: 1; transition: background-color 0.25s;}.var-chip--default { color: inherit; background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip--plain { background-color: transparent;}.var-chip--plain:active { box-shadow: none;}.var-chip--plain-default { color: inherit; border-color: currentColor;}.var-chip--plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip--plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip--plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip--plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip--plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--font-size-md); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--font-size-lg); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--font-size-sm); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--font-size-xs); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip--text-large { margin: var(--chip-text-large-margin);}.var-chip--text-normal { margin: var(--chip-text-normal-margin);}.var-chip--text-small { margin: var(--chip-text-small-margin);}.var-chip--text-mini { margin: var(--chip-text-mini-margin);}
+:root { --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary); --chip-danger-color: var(--color-danger); --chip-success-color: var(--color-success); --chip-warning-color: var(--color-warning); --chip-info-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0px 10px; --chip-large-padding: 0px 17px; --chip-small-padding: 0px 6px; --chip-mini-padding: 0px 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px;}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; line-height: 1; transition: background-color 0.25s;}.var-chip--default { color: inherit; background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--font-size-md); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--font-size-lg); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--font-size-sm); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--font-size-xs); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}

package/es/chip/chip.less

@@ -93,7 +93,7 @@
     background-color: var(--chip-danger-color);
   }
 
-  &--plain {
+  &__plain {
     background-color: transparent;
 
     &:active {
@@ -101,32 +101,32 @@
     }
   }
 
-  &--plain-default {
+  &__plain-default {
     color: inherit;
     border-color: currentColor;
   }
 
-  &--plain-primary {
+  &__plain-primary {
     color: var(--chip-primary-color);
     border-color: currentColor;
   }
 
-  &--plain-info {
+  &__plain-info {
     color: var(--chip-info-color);
     border-color: currentColor;
   }
 
-  &--plain-success {
+  &__plain-success {
     color: var(--chip-success-color);
     border-color: currentColor;
   }
 
-  &--plain-warning {
+  &__plain-warning {
     color: var(--chip-warning-color);
     border-color: currentColor;
   }
 
-  &--plain-danger {
+  &__plain-danger {
     color: var(--chip-danger-color);
     border-color: currentColor;
   }
@@ -164,19 +164,19 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
-  &--text-large {
+  &__text-large {
     margin: var(--chip-text-large-margin);
   }
 
-  &--text-normal {
+  &__text-normal {
     margin: var(--chip-text-normal-margin);
   }
 
-  &--text-small {
+  &__text-small {
     margin: var(--chip-text-small-margin);
   }
 
-  &--text-mini {
+  &__text-mini {
     margin: var(--chip-text-mini-margin);
   }
 }

package/es/col/Col.js

@@ -3,10 +3,15 @@ import { isPlainObject, toNumber } from '../utils/shared';
 import { props } from './props';
 import { useRow } from './provide';
 import { toSizeUnit } from '../utils/elements';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('col');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.span : null, _ctx.offset ? "var-col--offset-" + _ctx.offset : null, ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl)]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.span, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl))),
     style: _normalizeStyle({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -53,10 +58,10 @@ export default defineComponent({
           span: _span,
           offset: _offset
         } = size;
-        _span && classes.push("var-col--span-" + mode + "-" + _span);
-        _offset && classes.push("var-col--offset-" + mode + "-" + _offset);
+        _span && classes.push(n("--span-" + mode + "-" + _span));
+        _offset && classes.push(n("--offset-" + mode + "-" + _offset));
       } else {
-        classes.push("var-col--span-" + mode + "-" + size);
+        classes.push(n("--span-" + mode + "-" + size));
       }
 
       return classes;
@@ -65,8 +70,10 @@ export default defineComponent({
     watch([() => props.span, () => props.offset], () => {
       row == null ? void 0 : row.computePadding();
     });
-    bindRow == null ? void 0 : bindRow(colProvider);
+    call(bindRow, colProvider);
     return {
+      n,
+      classes,
       padding,
       toNumber,
       toSizeUnit,

package/es/collapse/Collapse.js

@@ -1,16 +1,18 @@
 import { computed, defineComponent, nextTick, watch } from 'vue';
 import { useCollapseItem } from './provide';
 import { props } from './props';
+import { call, createNamespace } from '../utils/components';
 import { isArray } from '../utils/shared';
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-collapse"
-};
+var {
+  n
+} = createNamespace('collapse');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")]);
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -47,11 +49,9 @@ export default defineComponent({
     };
 
     var updateItem = (value, isExpand) => {
-      var _props$onUpdateModel;
-
       var modelValue = getValue(value, isExpand);
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, modelValue);
-      props.onChange == null ? void 0 : props.onChange(modelValue);
+      call(props['onUpdate:modelValue'], modelValue);
+      call(props.onChange, modelValue);
     };
 
     var matchName = () => {
@@ -119,6 +119,9 @@ export default defineComponent({
     bindCollapseItem(collapseProvider);
     watch(() => length.value, () => nextTick().then(resize));
     watch(() => props.modelValue, () => nextTick().then(resize));
+    return {
+      n
+    };
   }
 
 });

package/es/collapse-item/CollapseItem.js

@@ -1,54 +1,53 @@
 import { defineComponent, ref, nextTick, watch, computed } from 'vue';
 import { requestAnimationFrame } from '../utils/elements';
 import { isArray } from '../utils/shared';
+import { createNamespace } from '../utils/components';
 import { useCollapse } from './provide';
 import { props } from './props';
 import VarIcon from '../icon';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-collapse-item-header__title"
-};
-var _hoisted_2 = {
-  class: "var-collapse-item-header__icon"
-};
-var _hoisted_3 = {
-  class: "var-collapse-item__wrap"
-};
+var {
+  n,
+  classes
+} = createNamespace('collapse-item');
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass({
-      'var-collapse-item': true,
-      'var-collapse-item__active': _ctx.offset && _ctx.isShow,
-      'var-collapse-item__disable': _ctx.disabled
-    })
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.offset && _ctx.isShow, _ctx.n('--active')], [_ctx.disabled, _ctx.n('--disable')]))
   }, [_createElementVNode("div", {
-    class: "var-collapse-item-header",
+    class: _normalizeClass(_ctx.n('header')),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggle())
-  }, [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "title", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('header-title'))
+  }, [_renderSlot(_ctx.$slots, "title", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
-  )])]), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "icon", {}, () => [_createVNode(_component_var_icon, {
+  )])], 2
+  /* CLASS */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('header-icon'))
+  }, [_renderSlot(_ctx.$slots, "icon", {}, () => [_createVNode(_component_var_icon, {
     name: _ctx.icon,
     transition: 250,
-    class: _normalizeClass({
-      'var-collapse-item-header__icon': true,
-      'var-collapse-item-header__open': _ctx.isShow && _ctx.icon === 'chevron-down',
-      'var-collapse-item-header__disable': _ctx.disabled
-    })
+    class: _normalizeClass(_ctx.classes(_ctx.n('header-icon'), [_ctx.isShow && _ctx.icon === 'chevron-down', _ctx.n('header-open')], [_ctx.disabled, _ctx.n('header--disable')]))
   }, null, 8
   /* PROPS */
-  , ["name", "class"])])])]), _withDirectives(_createElementVNode("div", {
-    class: "var-collapse-item-content",
+  , ["name", "class"])])], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  ), _withDirectives(_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('content')),
     ref: "contentEl",
     onTransitionend: _cache[1] || (_cache[1] = function () {
       return _ctx.transitionend && _ctx.transitionend(...arguments);
     })
-  }, [_createElementVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "default")])], 544
-  /* HYDRATE_EVENTS, NEED_PATCH */
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('content-wrap'))
+  }, [_renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )], 34
+  /* CLASS, HYDRATE_EVENTS */
   ), [[_vShow, _ctx.show]])], 2
   /* CLASS */
   );
@@ -129,6 +128,8 @@ export default defineComponent({
       if (value) openPanel();else closePanel();
     });
     return {
+      n,
+      classes,
       show,
       isShow,
       offset,

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item-header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item-header__title { transition: color 0.25s;}.var-collapse-item-header__icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item-header__disable { opacity: 0;}.var-collapse-item-header__open { transform: rotate(-180deg);}.var-collapse-item-content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item__active + .var-collapse-item,.var-collapse-item__active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item__active + .var-collapse-item::after,.var-collapse-item__active:not(:first-child)::after { border-top: none;}.var-collapse-item__disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/collapse-item/collapseItem.less

@@ -49,7 +49,7 @@
     top: 0;
   }
 
-  &-header {
+  &__header {
     align-items: center;
     display: flex;
     font-size: var(--collapse-header-font-size);
@@ -58,39 +58,39 @@
     justify-content: space-between;
     position: relative;
 
-    &__title {
+    &-title {
       transition: color 0.25s;
     }
 
-    &__icon {
+    &-icon {
       transform: rotate(0deg);
       opacity: 1;
     }
 
-    &__disable {
-      opacity: 0;
+    &-open {
+      transform: rotate(-180deg);
     }
 
-    &__open {
-      transform: rotate(-180deg);
+    &--disable {
+      opacity: 0;
     }
   }
 
-  &-content {
+  &__content {
     display: flex;
     font-size: var(--collapse-content-font-size);
     overflow: hidden;
     transition: all 0.25s;
-  }
 
-  &__wrap {
-    padding: var(--collapse-content-padding);
-    word-break: break-all;
-    flex: 1;
+    &-wrap {
+      padding: var(--collapse-content-padding);
+      word-break: break-all;
+      flex: 1;
+    }
   }
 
-  &__active + &,
-  &__active:not(:first-child) {
+  &--active + &,
+  &--active:not(:first-child) {
     margin-top: var(--collapse-item-margin-top);
 
     &::after {
@@ -98,7 +98,7 @@
     }
   }
 
-  &__disable {
+  &--disable {
     color: var(--collapse-disable-color);
     cursor: not-allowed;
   }

package/es/countdown/Countdown.js

@@ -2,21 +2,23 @@ import { defineComponent, ref, watch } from 'vue';
 import { props } from './props';
 import { requestAnimationFrame, cancelAnimationFrame } from '../utils/elements';
 import { toNumber, parseFormat } from '../utils/shared';
+import { call, createNamespace } from '../utils/components';
+var {
+  n
+} = createNamespace('countdown');
 var SECOND = 1000;
 var MINUTE = 60 * SECOND;
 var HOUR = 60 * MINUTE;
 var DAY = 24 * HOUR;
-import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-countdown"
-};
+import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default", _normalizeProps(_guardReactiveProps(_ctx.timeData)), () => [_createTextVNode(_toDisplayString(_ctx.showTime), 1
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_renderSlot(_ctx.$slots, "default", _normalizeProps(_guardReactiveProps(_ctx.timeData)), () => [_createTextVNode(_toDisplayString(_ctx.showTime), 1
   /* TEXT */
-  )])]);
+  )])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -51,7 +53,7 @@ export default defineComponent({
         milliseconds
       };
       timeData.value = time;
-      props.onChange == null ? void 0 : props.onChange(timeData.value);
+      call(props.onChange, timeData.value);
       showTime.value = parseFormat(props.format, time);
     };
 
@@ -69,7 +71,7 @@ export default defineComponent({
       formatTime(durationTime);
 
       if (durationTime === 0) {
-        onEnd == null ? void 0 : onEnd();
+        call(onEnd);
         return;
       }
 
@@ -103,6 +105,7 @@ export default defineComponent({
     return {
       showTime,
       timeData,
+      n,
       start,
       pause,
       reset