@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/button/Button.js

@@ -12,8 +12,15 @@ var _vue = require("vue");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('button');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = ["disabled"];
@@ -24,7 +31,7 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("button", {
-    class: (0, _vue.normalizeClass)(["var-button var--box", ["var-button--" + _ctx.size, _ctx.block ? 'var--flex var-button--block' : 'var--inline-flex', _ctx.disabled ? 'var-button--disabled' : null, _ctx.text ? "var-button--text-" + _ctx.type : "var-button--" + _ctx.type, _ctx.text ? 'var-button--text' : 'var-elevation--2', _ctx.text && _ctx.disabled ? 'var-button--text-disabled' : null, _ctx.round ? 'var-button--round' : null, _ctx.outline ? 'var-button--outline' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', _ctx.n("--" + _ctx.size), [_ctx.block, "var--flex " + _ctx.n('--block'), 'var--inline-flex'], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.text, _ctx.n("--text-" + _ctx.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.type) + " var-elevation--2"], [_ctx.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.outline, _ctx.n('--outline')])),
     style: (0, _vue.normalizeStyle)({
       color: _ctx.textColor,
       background: _ctx.color
@@ -38,15 +45,15 @@ function render(_ctx, _cache) {
     })
   }, [_ctx.loading || _ctx.pending ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
     key: 0,
-    class: "var-button__loading",
+    class: (0, _vue.normalizeClass)(_ctx.n('loading')),
     "var-button-cover": "",
     type: _ctx.loadingType,
     size: _ctx.loadingSize,
     radius: _ctx.loadingRadius
   }, null, 8
   /* PROPS */
-  , ["type", "size", "radius"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-button__content", [_ctx.loading || _ctx.pending ? 'var-button--hidden' : null]])
+  , ["class", "type", "size", "radius"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('content'), [_ctx.loading || _ctx.pending, _ctx.n('--hidden')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 46
@@ -108,6 +115,8 @@ var _default = (0, _vue.defineComponent)({
     };
 
     return {
+      n,
+      classes,
       pending,
       handleClick,
       handleTouchstart

package/lib/card/Card.js

@@ -12,54 +12,59 @@ var _props = require("./props");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('card');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = ["src", "alt"];
-var _hoisted_2 = {
-  key: 0,
-  class: "var-card__title"
-};
-var _hoisted_3 = {
-  key: 0,
-  class: "var-card__subtitle"
-};
-var _hoisted_4 = {
-  key: 0,
-  class: "var-card__description"
-};
-var _hoisted_5 = {
-  key: 0,
-  class: "var-card__footer"
-};
 
 function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-card", [_ctx.elevation ? "var-elevation--" + _ctx.elevation : 'var-elevation--2']]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--2'])),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
   }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.src ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
     key: 0,
-    class: "var-card__image",
+    class: (0, _vue.normalizeClass)(_ctx.n('image')),
     style: (0, _vue.normalizeStyle)({
       objectFit: _ctx.fit,
       height: _ctx.toSizeUnit(_ctx.height)
     }),
     src: _ctx.src,
     alt: _ctx.alt
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.title), 1
-  /* TEXT */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.subtitle), 1
-  /* TEXT */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "description", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_4, (0, _vue.toDisplayString)(_ctx.description), 1
-  /* TEXT */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.extra ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_5, [(0, _vue.renderSlot)(_ctx.$slots, "extra")])) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('title'))
+  }, (0, _vue.toDisplayString)(_ctx.title), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('subtitle'))
+  }, (0, _vue.toDisplayString)(_ctx.subtitle), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "description", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('description'))
+  }, (0, _vue.toDisplayString)(_ctx.description), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.extra ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('footer'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "extra")], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
   /* CLASS */
   )), [[_directive_ripple, {
     disabled: !_ctx.ripple
@@ -76,6 +81,8 @@ var _default = (0, _vue.defineComponent)({
 
   setup() {
     return {
+      n,
+      classes,
       toSizeUnit: _elements.toSizeUnit
     };
   }

package/lib/cell/Cell.js

@@ -10,22 +10,23 @@ var _props = require("./props");
 
 var _icon = _interopRequireDefault(require("../icon"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _components = require("../utils/components");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _hoisted_1 = {
-  class: "var-cell__content"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('cell');
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-cell", [_ctx.border ? 'var-cell--border' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.border, _ctx.n('--border')]))
   }, [_ctx.$slots.icon || _ctx.icon ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var-cell__icon", [_ctx.iconClass ? _ctx.iconClass : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.iconClass, _ctx.iconClass]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
     class: "var--flex",
     name: _ctx.icon
@@ -33,22 +34,26 @@ function render(_ctx, _cache) {
   /* PROPS */
   , ["name"])])], 2
   /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-cell__title", [_ctx.titleClass ? _ctx.titleClass : null]])
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('content'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title'), [_ctx.titleClass, _ctx.titleClass]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
   /* TEXT */
   )])], 2
   /* CLASS */
   ), _ctx.$slots.desc || _ctx.desc ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var-cell__desc", [_ctx.descClass ? _ctx.descClass : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('desc'), [_ctx.descClass, _ctx.descClass]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "desc", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.desc), 1
   /* TEXT */
   )])], 2
   /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.extra ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ), _ctx.$slots.extra ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 1,
-    class: (0, _vue.normalizeClass)(["var-cell__extra", [_ctx.extraClass ? _ctx.extraClass : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('extra'), [_ctx.extraClass, _ctx.extraClass]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "extra")], 2
   /* CLASS */
   )) : (0, _vue.createCommentVNode)("v-if", true)], 2
@@ -62,7 +67,15 @@ var _default = (0, _vue.defineComponent)({
   components: {
     VarIcon: _icon.default
   },
-  props: _props.props
+  props: _props.props,
+
+  setup() {
+    return {
+      n,
+      classes
+    };
+  }
+
 });
 
 exports.default = _default;

package/lib/checkbox/Checkbox.js

@@ -22,11 +22,10 @@ var _provide2 = require("../form/provide");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-checkbox"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('checkbox');
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -36,19 +35,21 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: "var-checkbox__wrap",
+    class: (0, _vue.normalizeClass)(_ctx.n('wrap')),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
-  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.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]]),
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.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: (0, _vue.normalizeStyle)({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
     })
   }, [_ctx.checked ? (0, _vue.renderSlot)(_ctx.$slots, "checked-icon", {
     key: 0
   }, () => [(0, _vue.createVNode)(_component_var_icon, {
-    class: (0, _vue.normalizeClass)(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     name: "checkbox-marked",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -57,7 +58,7 @@ function render(_ctx, _cache) {
   , ["class", "size"])]) : (0, _vue.renderSlot)(_ctx.$slots, "unchecked-icon", {
     key: 1
   }, () => [(0, _vue.createVNode)(_component_var_icon, {
-    class: (0, _vue.normalizeClass)(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     name: "checkbox-blank-outline",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -68,14 +69,18 @@ function render(_ctx, _cache) {
   )), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('text'), [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
   /* CLASS */
-  )]), (0, _vue.createVNode)(_component_var_form_details, {
+  )], 2
+  /* CLASS */
+  ), (0, _vue.createVNode)(_component_var_form_details, {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -123,15 +128,13 @@ var _default = (0, _vue.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);
+      (0, _components.call)(props['onUpdate:modelValue'], value.value);
+      (0, _components.call)(onChange, value.value);
       validateWithTrigger('onChange');
       changedValue === checkedValue ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue);
     };
@@ -149,7 +152,7 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      (0, _components.call)(onClick, e);
 
       if (form != null && form.readonly.value || readonly) {
         return;
@@ -179,9 +182,7 @@ var _default = (0, _vue.defineComponent)({
 
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, props.uncheckedValue);
+      (0, _components.call)(props['onUpdate:modelValue'], props.uncheckedValue);
       resetValidation();
     }; // expose
 
@@ -217,8 +218,8 @@ var _default = (0, _vue.defineComponent)({
       reset,
       resetWithAnimation
     };
-    bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
-    bindForm == null ? void 0 : bindForm(checkboxProvider);
+    (0, _components.call)(bindCheckboxGroup, checkboxProvider);
+    (0, _components.call)(bindForm, checkboxProvider);
     return {
       withAnimation,
       checked,
@@ -226,6 +227,8 @@ var _default = (0, _vue.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/lib/checkbox-group/CheckboxGroup.js

@@ -20,24 +20,27 @@ var _shared = require("../utils/shared");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-checkbox-group__wrap"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('checkbox-group');
 
 function render(_ctx, _cache) {
   var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-checkbox-group", ["var-checkbox-group--" + _ctx.direction]])
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('wrap'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n("--" + _ctx.direction)))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
   /* CLASS */
   ), (0, _vue.createVNode)(_component_var_form_details, {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -80,10 +83,8 @@ var _default = (0, _vue.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);
+      (0, _components.call)(props['onUpdate:modelValue'], changedModelValue);
+      (0, _components.call)(props.onChange, changedModelValue);
       validateWithTrigger('onChange');
     };
 
@@ -122,8 +123,6 @@ var _default = (0, _vue.defineComponent)({
 
 
     var checkAll = () => {
-      var _props$onUpdateModel2;
-
       var checkedValues = checkboxes.map(_ref2 => {
         var {
           checkedValue
@@ -132,14 +131,12 @@ var _default = (0, _vue.defineComponent)({
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
       resetWithAnimation();
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
+      (0, _components.call)(props['onUpdate:modelValue'], changedModelValue);
       return changedModelValue;
     }; // expose
 
 
     var inverseAll = () => {
-      var _props$onUpdateModel3;
-
       var checkedValues = checkboxes.filter(_ref3 => {
         var {
           checked
@@ -153,15 +150,13 @@ var _default = (0, _vue.defineComponent)({
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
       resetWithAnimation();
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
+      (0, _components.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, []);
+      (0, _components.call)(props['onUpdate:modelValue'], []);
       resetValidation();
     }; // expose
 
@@ -183,9 +178,11 @@ var _default = (0, _vue.defineComponent)({
       errorMessage: checkboxGroupErrorMessage
     };
     bindCheckboxes(checkboxGroupProvider);
-    bindForm == null ? void 0 : bindForm(checkboxGroupProvider);
+    (0, _components.call)(bindForm, checkboxGroupProvider);
     return {
       errorMessage,
+      n,
+      classes,
       checkAll,
       inverseAll,
       reset,

package/lib/chip/Chip.js

@@ -10,8 +10,15 @@ var _vue = require("vue");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('chip');
+
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
@@ -19,15 +26,15 @@ function render(_ctx, _cache) {
     name: "var-fade"
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("span", (0, _vue.mergeProps)({
-      class: ["var-chip var--box", _ctx.contentClass],
+      class: _ctx.classes(_ctx.n(), 'var--box', ..._ctx.contentClass),
       style: _ctx.chipStyles
     }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "left"), (0, _vue.createElementVNode)("span", {
-      class: (0, _vue.normalizeClass)(["var-chip--text-" + _ctx.size])
+      class: (0, _vue.normalizeClass)(_ctx.n("text-" + _ctx.size))
     }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
     /* CLASS */
     ), (0, _vue.renderSlot)(_ctx.$slots, "right"), _ctx.closable ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", {
       key: 0,
-      class: "var-chip--close",
+      class: (0, _vue.normalizeClass)(_ctx.n('--close')),
       onClick: _cache[0] || (_cache[0] = function () {
         return _ctx.onClose && _ctx.onClose(...arguments);
       })
@@ -35,7 +42,9 @@ function render(_ctx, _cache) {
       name: "" + (_ctx.iconName ? _ctx.iconName : 'close-circle')
     }, null, 8
     /* PROPS */
-    , ["name"])])) : (0, _vue.createCommentVNode)("v-if", true)], 16
+    , ["name"])], 2
+    /* CLASS */
+    )) : (0, _vue.createCommentVNode)("v-if", true)], 16
     /* FULL_PROPS */
     )]),
     _: 3
@@ -82,11 +91,13 @@ var _default = (0, _vue.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/lib/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/lib/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/lib/col/Col.js

@@ -14,9 +14,16 @@ var _provide = require("./provide");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('col');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.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: (0, _vue.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: (0, _vue.normalizeStyle)({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -64,10 +71,10 @@ var _default = (0, _vue.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;
@@ -76,8 +83,10 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.watch)([() => props.span, () => props.offset], () => {
       row == null ? void 0 : row.computePadding();
     });
-    bindRow == null ? void 0 : bindRow(colProvider);
+    (0, _components.call)(bindRow, colProvider);
     return {
+      n,
+      classes,
       padding,
       toNumber: _shared.toNumber,
       toSizeUnit: _elements.toSizeUnit,