@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/radio/Radio.js

@@ -3,16 +3,14 @@ import VarFormDetails from '../form-details';
 import Ripple from '../ripple';
 import { computed, defineComponent, nextTick, ref, watch } from 'vue';
 import { props } from './props';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useRadioGroup } 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, mergeProps as _mergeProps, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-radio__wrap"
-};
+var {
+  n,
+  classes
+} = createNamespace('radio');
+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, mergeProps as _mergeProps } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -20,20 +18,22 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _mergeProps({
-    class: "var-radio",
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n('wrap'))
+  }, [_createElementVNode("div", _mergeProps({
+    class: _ctx.n(),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, _ctx.$attrs), [_withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _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: _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: _normalizeStyle({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
     })
   }, [_ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", {
     key: 0
   }, () => [_createVNode(_component_var_icon, {
-    class: _normalizeClass(["var-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     "var-radio-cover": "",
     name: "radio-marked",
     size: _ctx.iconSize
@@ -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-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     "var-radio-cover": "",
     name: "radio-blank",
     size: _ctx.iconSize
@@ -53,7 +53,7 @@ export function render(_ctx, _cache) {
   )), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), _createElementVNode("div", {
-    class: _normalizeClass(["var-radio__text", [_ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('text'), [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 16
@@ -62,7 +62,9 @@ export function render(_ctx, _cache) {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -109,8 +111,6 @@ export default defineComponent({
     };
 
     var change = changedValue => {
-      var _props$onUpdateModel;
-
       var {
         checkedValue,
         onChange
@@ -121,8 +121,8 @@ export default 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);
+      call(props['onUpdate:modelValue'], value.value);
+      call(onChange, value.value);
       radioGroup == null ? void 0 : radioGroup.onToggle(checkedValue);
       validateWithTrigger('onChange');
     };
@@ -140,7 +140,7 @@ export default defineComponent({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      call(onClick, e);
 
       if (form != null && form.readonly.value || readonly) {
         return;
@@ -160,9 +160,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
 
@@ -195,8 +193,8 @@ export default defineComponent({
       resetValidation,
       reset
     };
-    bindRadioGroup == null ? void 0 : bindRadioGroup(radioProvider);
-    bindForm == null ? void 0 : bindForm(radioProvider);
+    call(bindRadioGroup, radioProvider);
+    call(bindForm, radioProvider);
     return {
       withAnimation,
       checked,
@@ -204,6 +202,8 @@ export default 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/es/radio-group/RadioGroup.js

@@ -1,28 +1,30 @@
 import VarFormDetails from '../form-details';
 import { computed, defineComponent, nextTick, watch } from 'vue';
 import { props } from './props';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useRadios } from './provide';
 import { useForm } from '../form/provide';
-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-radio-group__wrap"
-};
+var {
+  n,
+  classes
+} = createNamespace('radio-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-radio-group", ["var-radio-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,
@@ -69,10 +71,8 @@ export default 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);
+      call(props['onUpdate:modelValue'], changedValue);
+      call(props.onChange, changedValue);
       validateWithTrigger('onChange');
     }; // expose
 
@@ -81,9 +81,7 @@ export default defineComponent({
 
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, undefined);
+      call(props['onUpdate:modelValue'], undefined);
       resetValidation();
     };
 
@@ -96,10 +94,12 @@ export default defineComponent({
       resetValidation,
       errorMessage: radioGroupErrorMessage
     };
-    bindForm == null ? void 0 : bindForm(radioGroupProvider);
+    call(bindForm, radioGroupProvider);
     bindRadios(radioGroupProvider);
     return {
       errorMessage,
+      n,
+      classes,
       reset,
       validate,
       resetValidation

package/es/rate/Rate.js

@@ -3,21 +3,18 @@ import VarFormDetails from '../form-details';
 import Ripple from '../ripple';
 import { defineComponent, nextTick } from 'vue';
 import { useForm } from '../form/provide';
-import { useValidation } from '../utils/components';
+import { useValidation, call, createNamespace } from '../utils/components';
 import { toSizeUnit } from '../utils/elements';
 import { toNumber } from '../utils/shared';
 import { props } from './props';
+var {
+  n
+} = createNamespace('rate');
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, 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-rate__warp"
-};
-var _hoisted_2 = {
-  class: "var-rate"
-};
-var _hoisted_3 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -25,7 +22,11 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.toNumber(_ctx.count), val => {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n('warp'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.toNumber(_ctx.count), val => {
     return _withDirectives((_openBlock(), _createElementBlock("div", {
       key: val,
       style: _normalizeStyle(_ctx.getStyle(val)),
@@ -42,16 +43,20 @@ export 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 */
-  ))]), _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,
@@ -98,10 +103,10 @@ export default 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
       };
     };
 
@@ -153,8 +158,6 @@ export default defineComponent({
     };
 
     var changeValue = (score, event) => {
-      var _props$onUpdateModel;
-
       if (props.half) {
         var {
           offsetWidth
@@ -162,7 +165,7 @@ export default defineComponent({
         if (event.offsetX <= Math.floor(offsetWidth / 2)) score -= 0.5;
       }
 
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, score);
+      call(props['onUpdate:modelValue'], score);
     };
 
     var validate = () => v(props.rules, toNumber(props.modelValue));
@@ -181,14 +184,12 @@ export default defineComponent({
       }
 
       changeValue(score, event);
-      onChange == null ? void 0 : onChange(score);
+      call(onChange, score);
       validateWithTrigger();
     };
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, 0);
+      call(props['onUpdate:modelValue'], 0);
       resetValidation();
     };
 
@@ -197,7 +198,7 @@ export default defineComponent({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(rateProvider);
+    call(bindForm, rateProvider);
     return {
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
@@ -210,7 +211,8 @@ export default defineComponent({
       validate,
       resetValidation,
       toSizeUnit,
-      toNumber
+      toNumber,
+      n
     };
   }
 

package/es/ripple/index.js

@@ -4,6 +4,10 @@ import context from '../context';
 
 
 import { supportTouch } from '../utils/elements';
+import { createNamespace } from '../utils/components';
+var {
+  n
+} = createNamespace('ripple');
 var ANIMATION_DURATION = 250;
 
 function setStyles(element) {
@@ -63,7 +67,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";
@@ -85,7 +89,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/es/row/Row.js

@@ -2,10 +2,15 @@ import { defineComponent, computed, watch } from 'vue';
 import { props } from './props';
 import { useCols } from './provide';
 import { toPxNum } from '../utils/elements';
-import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('row');
+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: "var-row var--box",
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box')),
     style: _normalizeStyle({
       justifyContent: _ctx.justify,
       alignItems: _ctx.align,
@@ -14,8 +19,8 @@ export function render(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, [_renderSlot(_ctx.$slots, "default")], 4
-  /* STYLE */
+  }, [_renderSlot(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
   );
 }
 export default defineComponent({
@@ -50,6 +55,8 @@ export default defineComponent({
     watch(() => props.gutter, computePadding);
     bindCols(rowProvider);
     return {
+      n,
+      classes,
       average
     };
   }