@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/radio/Radio.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-radio__wrap"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('radio');
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -35,20 +34,22 @@ function render(_ctx, _cache) {
 
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-    class: "var-radio",
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('wrap'))
+  }, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+    class: _ctx.n(),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, _ctx.$attrs), [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-radio__action", [_ctx.checked ? 'var-radio--checked' : 'var-radio--unchecked', _ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('action'), [_ctx.checked, _ctx.n('--checked'), _ctx.n('--unchecked')], [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _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-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     "var-radio-cover": "",
     name: "radio-marked",
     size: _ctx.iconSize
@@ -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-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     "var-radio-cover": "",
     name: "radio-blank",
     size: _ctx.iconSize
@@ -68,7 +69,7 @@ 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-radio__text", [_ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('text'), [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 16
@@ -77,7 +78,9 @@ function render(_ctx, _cache) {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -125,8 +128,6 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var change = changedValue => {
-      var _props$onUpdateModel;
-
       var {
         checkedValue,
         onChange
@@ -137,8 +138,8 @@ var _default = (0, _vue.defineComponent)({
       }
 
       value.value = changedValue;
-      (_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);
       radioGroup == null ? void 0 : radioGroup.onToggle(checkedValue);
       validateWithTrigger('onChange');
     };
@@ -156,7 +157,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;
@@ -176,9 +177,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
 
@@ -211,8 +210,8 @@ var _default = (0, _vue.defineComponent)({
       resetValidation,
       reset
     };
-    bindRadioGroup == null ? void 0 : bindRadioGroup(radioProvider);
-    bindForm == null ? void 0 : bindForm(radioProvider);
+    (0, _components.call)(bindRadioGroup, radioProvider);
+    (0, _components.call)(bindForm, radioProvider);
     return {
       withAnimation,
       checked,
@@ -220,6 +219,8 @@ var _default = (0, _vue.defineComponent)({
       radioGroupErrorMessage: radioGroup == null ? void 0 : radioGroup.errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      n,
+      classes,
       handleClick,
       toggle,
       reset,

package/lib/radio-group/RadioGroup.js

@@ -18,24 +18,27 @@ 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-radio-group__wrap"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('radio-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-radio-group", ["var-radio-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)({
@@ -83,10 +86,8 @@ var _default = (0, _vue.defineComponent)({
     });
 
     var onToggle = changedValue => {
-      var _props$onUpdateModel;
-
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, changedValue);
-      props.onChange == null ? void 0 : props.onChange(changedValue);
+      (0, _components.call)(props['onUpdate:modelValue'], changedValue);
+      (0, _components.call)(props.onChange, changedValue);
       validateWithTrigger('onChange');
     }; // expose
 
@@ -95,9 +96,7 @@ var _default = (0, _vue.defineComponent)({
 
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, undefined);
+      (0, _components.call)(props['onUpdate:modelValue'], undefined);
       resetValidation();
     };
 
@@ -110,10 +109,12 @@ var _default = (0, _vue.defineComponent)({
       resetValidation,
       errorMessage: radioGroupErrorMessage
     };
-    bindForm == null ? void 0 : bindForm(radioGroupProvider);
+    (0, _components.call)(bindForm, radioGroupProvider);
     bindRadios(radioGroupProvider);
     return {
       errorMessage,
+      n,
+      classes,
       reset,
       validate,
       resetValidation

package/lib/rate/Rate.js

@@ -24,15 +24,13 @@ var _props = require("./props");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n
+} = (0, _components.createNamespace)('rate');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-rate__warp"
-};
-var _hoisted_2 = {
-  class: "var-rate"
-};
-var _hoisted_3 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -41,7 +39,11 @@ function render(_ctx, _cache) {
 
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.toNumber(_ctx.count), val => {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('warp'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.toNumber(_ctx.count), val => {
     return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: val,
       style: (0, _vue.normalizeStyle)(_ctx.getStyle(val)),
@@ -58,16 +60,20 @@ function render(_ctx, _cache) {
     /* PROPS */
     , ["namespace", "name", "style"])], 14
     /* CLASS, STYLE, PROPS */
-    , _hoisted_3)), [[_directive_ripple, {
+    , _hoisted_1)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
     }]]);
   }), 128
   /* KEYED_FRAGMENT */
-  ))]), (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)({
@@ -115,10 +121,10 @@ var _default = (0, _vue.defineComponent)({
         color
       } = transformValue(val);
       return {
-        'var-rate__content': true,
-        'var-rate--disabled': form == null ? void 0 : form.disabled.value,
-        'var-rate--error': errorMessage.value,
-        'var-rate--primary': type !== 'empty' && !color
+        [n('content')]: true,
+        [n('--disabled')]: form == null ? void 0 : form.disabled.value,
+        [n('--error')]: errorMessage.value,
+        [n('--primary')]: type !== 'empty' && !color
       };
     };
 
@@ -170,8 +176,6 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var changeValue = (score, event) => {
-      var _props$onUpdateModel;
-
       if (props.half) {
         var {
           offsetWidth
@@ -179,7 +183,7 @@ var _default = (0, _vue.defineComponent)({
         if (event.offsetX <= Math.floor(offsetWidth / 2)) score -= 0.5;
       }
 
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, score);
+      (0, _components.call)(props['onUpdate:modelValue'], score);
     };
 
     var validate = () => v(props.rules, (0, _shared.toNumber)(props.modelValue));
@@ -198,14 +202,12 @@ var _default = (0, _vue.defineComponent)({
       }
 
       changeValue(score, event);
-      onChange == null ? void 0 : onChange(score);
+      (0, _components.call)(onChange, score);
       validateWithTrigger();
     };
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, 0);
+      (0, _components.call)(props['onUpdate:modelValue'], 0);
       resetValidation();
     };
 
@@ -214,7 +216,7 @@ var _default = (0, _vue.defineComponent)({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(rateProvider);
+    (0, _components.call)(bindForm, rateProvider);
     return {
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
@@ -227,7 +229,8 @@ var _default = (0, _vue.defineComponent)({
       validate,
       resetValidation,
       toSizeUnit: _elements.toSizeUnit,
-      toNumber: _shared.toNumber
+      toNumber: _shared.toNumber,
+      n
     };
   }
 

package/lib/ripple/index.js

@@ -11,10 +11,15 @@ var _context = _interopRequireDefault(require("../context"));
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+var {
+  n
+} = (0, _components.createNamespace)('ripple');
 var ANIMATION_DURATION = 250;
 
 function setStyles(element) {
@@ -74,7 +79,7 @@ function createRipple(event) {
       size
     } = computeRippleStyles(this, event);
     var ripple = document.createElement('div');
-    ripple.classList.add('var-ripple');
+    ripple.classList.add(n());
     ripple.style.opacity = "0";
     ripple.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple.style.width = size + "px";
@@ -96,7 +101,7 @@ function removeRipple() {
   var _ripple = this._ripple;
 
   var task = () => {
-    var ripples = this.querySelectorAll('.var-ripple');
+    var ripples = this.querySelectorAll("." + n());
 
     if (!ripples.length) {
       return;

package/lib/row/Row.js

@@ -12,9 +12,16 @@ var _provide = require("./provide");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('row');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: "var-row var--box",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box')),
     style: (0, _vue.normalizeStyle)({
       justifyContent: _ctx.justify,
       alignItems: _ctx.align,
@@ -23,8 +30,8 @@ function render(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
-  /* STYLE */
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
   );
 }
 
@@ -60,6 +67,8 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.watch)(() => props.gutter, computePadding);
     bindCols(rowProvider);
     return {
+      n,
+      classes,
       average
     };
   }