@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

package/es/checkbox/Checkbox.js

@@ -3,16 +3,14 @@ import VarFormDetails from '../form-details';
 import Ripple from '../ripple';
 import { defineComponent, ref, computed, watch, nextTick } from 'vue';
 import { props } from './props';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useCheckboxGroup } from './provide';
 import { useForm } from '../form/provide';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-checkbox"
-};
+var {
+  n,
+  classes
+} = createNamespace('checkbox');
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -21,19 +19,21 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _openBlock(), _createElementBlock("div", {
-    class: "var-checkbox__wrap",
+    class: _normalizeClass(_ctx.n('wrap')),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
-  }, [_createElementVNode("div", _hoisted_1, [_withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-checkbox__action", [_ctx.checked ? 'var-checkbox--checked' : 'var-checkbox--unchecked', _ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]]),
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('action'), [_ctx.checked, _ctx.n('--checked'), _ctx.n('--unchecked')], [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: _normalizeStyle({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
     })
   }, [_ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", {
     key: 0
   }, () => [_createVNode(_component_var_icon, {
-    class: _normalizeClass(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     name: "checkbox-marked",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -42,7 +42,7 @@ export function render(_ctx, _cache) {
   , ["class", "size"])]) : _renderSlot(_ctx.$slots, "unchecked-icon", {
     key: 1
   }, () => [_createVNode(_component_var_icon, {
-    class: _normalizeClass(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     name: "checkbox-blank-outline",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -53,14 +53,18 @@ export function render(_ctx, _cache) {
   )), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), _createElementVNode("div", {
-    class: _normalizeClass(["var-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('text'), [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
-  )]), _createVNode(_component_var_form_details, {
+  )], 2
+  /* CLASS */
+  ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -107,15 +111,13 @@ export default defineComponent({
     };
 
     var change = changedValue => {
-      var _props$onUpdateModel;
-
       value.value = changedValue;
       var {
         checkedValue,
         onChange
       } = props;
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value.value);
-      onChange == null ? void 0 : onChange(value.value);
+      call(props['onUpdate:modelValue'], value.value);
+      call(onChange, value.value);
       validateWithTrigger('onChange');
       changedValue === checkedValue ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue);
     };
@@ -133,7 +135,7 @@ export default defineComponent({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      call(onClick, e);
 
       if (form != null && form.readonly.value || readonly) {
         return;
@@ -163,9 +165,7 @@ export default defineComponent({
 
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, props.uncheckedValue);
+      call(props['onUpdate:modelValue'], props.uncheckedValue);
       resetValidation();
     }; // expose
 
@@ -201,8 +201,8 @@ export default defineComponent({
       reset,
       resetWithAnimation
     };
-    bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
-    bindForm == null ? void 0 : bindForm(checkboxProvider);
+    call(bindCheckboxGroup, checkboxProvider);
+    call(bindForm, checkboxProvider);
     return {
       withAnimation,
       checked,
@@ -210,6 +210,8 @@ export default defineComponent({
       checkboxGroupErrorMessage: checkboxGroup == null ? void 0 : checkboxGroup.errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      n,
+      classes,
       handleClick,
       toggle,
       reset,

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;}