@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/select/Select.js

@@ -5,10 +5,14 @@ import VarFormDetails from '../form-details';
 import { computed, defineComponent, ref, watch, nextTick } from 'vue';
 import { isArray, isEmpty } from '../utils/shared';
 import { props } from './props';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useOptions } from './provide';
 import { useForm } from '../form/provide';
 import { toPxNum } from '../utils/elements';
+var {
+  n,
+  classes
+} = createNamespace('select');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
@@ -17,19 +21,8 @@ var _hoisted_1 = {
   key: 0
 };
 var _hoisted_2 = {
-  key: 0,
-  class: "var-select__chips"
-};
-var _hoisted_3 = {
-  key: 1,
-  class: "var-select__values"
-};
-var _hoisted_4 = {
   key: 1
 };
-var _hoisted_5 = {
-  class: "var-select__scroller"
-};
 export function render(_ctx, _cache) {
   var _component_var_chip = _resolveComponent("var-chip");
 
@@ -40,43 +33,50 @@ export function render(_ctx, _cache) {
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-select var--box", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     onClick: _cache[3] || (_cache[3] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-select__controller", [_ctx.isFocus ? 'var-select--focus' : null, _ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
   ), _createVNode(_component_var_menu, {
-    class: "var-select__menu",
+    class: _normalizeClass(_ctx.n('menu')),
     "var-select-cover": "",
     "offset-y": _ctx.offsetY,
     show: _ctx.isFocus,
     "onUpdate:show": _cache[2] || (_cache[2] = $event => _ctx.isFocus = $event),
     onClose: _ctx.handleBlur
   }, {
-    menu: _withCtx(() => [_createElementVNode("div", _hoisted_5, [_renderSlot(_ctx.$slots, "default")])]),
+    menu: _withCtx(() => [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('scroller'))
+    }, [_renderSlot(_ctx.$slots, "default")], 2
+    /* CLASS */
+    )]),
     default: _withCtx(() => [_createElementVNode("div", {
-      class: _normalizeClass(["var-select__wrap", [!_ctx.hint ? 'var-select--non-hint' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')])),
       ref: "wrapEl",
       onClick: _cache[1] || (_cache[1] = function () {
         return _ctx.handleFocus && _ctx.handleFocus(...arguments);
       })
     }, [_createElementVNode("div", {
-      class: _normalizeClass(["var-select__select", [_ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('select'), [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
       style: _normalizeStyle({
         textAlign: _ctx.textAlign,
         color: _ctx.textColor
       })
-    }, [_ctx.multiple ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.chip ? (_openBlock(), _createElementBlock("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.labels, l => {
+    }, [_ctx.multiple ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.chip ? (_openBlock(), _createElementBlock("div", {
+      key: 0,
+      class: _normalizeClass(_ctx.n('chips'))
+    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.labels, l => {
       return _openBlock(), _createBlock(_component_var_chip, {
-        class: "var-select__chip",
+        class: _normalizeClass(_ctx.n('chip')),
         "var-select-cover": "",
         closable: "",
         size: "small",
@@ -93,15 +93,20 @@ export function render(_ctx, _cache) {
 
       }, 1032
       /* PROPS, DYNAMIC_SLOTS */
-      , ["type", "onClose"]);
+      , ["class", "type", "onClose"]);
     }), 128
     /* KEYED_FRAGMENT */
-    ))])) : (_openBlock(), _createElementBlock("div", _hoisted_3, _toDisplayString(_ctx.labels.join(_ctx.separator)), 1
-    /* TEXT */
-    ))])) : (_openBlock(), _createElementBlock("span", _hoisted_4, _toDisplayString(_ctx.label), 1
+    ))], 2
+    /* CLASS */
+    )) : (_openBlock(), _createElementBlock("div", {
+      key: 1,
+      class: _normalizeClass(_ctx.n('values'))
+    }, _toDisplayString(_ctx.labels.join(_ctx.separator)), 3
+    /* TEXT, CLASS */
+    ))])) : (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.label), 1
     /* TEXT */
     )), _createVNode(_component_var_icon, {
-      class: _normalizeClass(["var-select__arrow", [_ctx.isFocus ? 'var-select--arrow-rotate' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
       "var-select-cover": "",
       name: "menu-down",
       transition: 300
@@ -110,7 +115,7 @@ export function render(_ctx, _cache) {
     , ["class"])], 6
     /* CLASS, STYLE */
     ), _createElementVNode("label", {
-      class: _normalizeClass(["var-select__placeholder var--ellipsis", [_ctx.isFocus ? 'var-select--focus' : null, _ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null, _ctx.computePlaceholderState(), !_ctx.hint ? 'var-select--placeholder-non-hint' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('placeholder'), 'var--ellipsis', [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),
       style: _normalizeStyle({
         color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
       })
@@ -124,28 +129,28 @@ export function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["offset-y", "show", "onClose"]), _createElementVNode("div", {
-    class: _normalizeClass(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
+  , ["class", "offset-y", "show", "onClose"]), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
-    class: "var-select__clear-icon",
+    class: _normalizeClass(_ctx.n('clear-icon')),
     name: "close-circle",
     size: "14px",
     onClick: _ctx.handleClear
   }, null, 8
   /* PROPS */
-  , ["onClick"])) : _createCommentVNode("v-if", true)])], 2
+  , ["class", "onClick"])) : _createCommentVNode("v-if", true)])], 2
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
   ), _ctx.line ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var-select__line", [_ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.blurColor : undefined
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-select__dot", [_ctx.isFocus ? 'var-select--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('dot'), [_ctx.isFocus, _ctx.n('--spread')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.focusColor : undefined
     })
@@ -269,11 +274,11 @@ export default defineComponent({
       } = props;
 
       if (!hint && !isEmpty(modelValue)) {
-        return 'var-select--placeholder-hidden';
+        return n('--placeholder-hidden');
       }
 
       if (hint && (!isEmpty(modelValue) || isFocus.value)) {
-        return 'var-select--placeholder-hint';
+        return n('--placeholder-hint');
       }
     };
 
@@ -300,7 +305,7 @@ export default defineComponent({
       wrapWidth.value = getWrapWidth();
       offsetY.value = getOffsetY() + toPxNum(props.offsetY);
       isFocus.value = true;
-      onFocus == null ? void 0 : onFocus();
+      call(onFocus);
       validateWithTrigger('onFocus');
     };
 
@@ -315,13 +320,11 @@ export default defineComponent({
         return;
       }
 
-      onBlur == null ? void 0 : onBlur();
+      call(onBlur);
       validateWithTrigger('onBlur');
     };
 
     var onSelect = option => {
-      var _props$onUpdateModel;
-
       var {
         disabled,
         readonly,
@@ -339,15 +342,13 @@ export default defineComponent({
         } = _ref4;
         return selected.value;
       }).map(findValueOrLabel) : findValueOrLabel(option);
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, selectedValue);
-      onChange == null ? void 0 : onChange(selectedValue);
+      call(props['onUpdate:modelValue'], selectedValue);
+      call(onChange, selectedValue);
       validateWithTrigger('onChange');
       !multiple && (isFocus.value = false);
     };
 
     var handleClear = () => {
-      var _props$onUpdateModel2;
-
       var {
         disabled,
         readonly,
@@ -361,8 +362,8 @@ export default defineComponent({
       }
 
       var changedModelValue = multiple ? [] : undefined;
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
-      onClear == null ? void 0 : onClear(changedModelValue);
+      call(props['onUpdate:modelValue'], changedModelValue);
+      call(onClear, changedModelValue);
       validateWithTrigger('onClear');
     };
 
@@ -376,13 +377,11 @@ export default defineComponent({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      call(onClick, e);
       validateWithTrigger('onClick');
     };
 
     var handleClose = text => {
-      var _props$onUpdateModel3;
-
       var {
         disabled,
         readonly,
@@ -406,8 +405,8 @@ export default defineComponent({
 
         return value !== ((_value$value = option.value.value) != null ? _value$value : option.label.value);
       });
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, currentModelValue);
-      onClose == null ? void 0 : onClose(currentModelValue);
+      call(props['onUpdate:modelValue'], currentModelValue);
+      call(onClose, currentModelValue);
       validateWithTrigger('onClose');
     };
 
@@ -444,9 +443,7 @@ export default defineComponent({
 
 
     var reset = () => {
-      var _props$onUpdateModel4;
-
-      (_props$onUpdateModel4 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel4.call(props, props.multiple ? [] : undefined);
+      call(props['onUpdate:modelValue'], props.multiple ? [] : undefined);
       resetValidation();
     };
 
@@ -474,7 +471,7 @@ export default defineComponent({
       resetValidation
     };
     bindOptions(selectProvider);
-    bindForm == null ? void 0 : bindForm(selectProvider);
+    call(bindForm, selectProvider);
     return {
       wrapEl,
       offsetY,
@@ -483,6 +480,8 @@ export default defineComponent({
       formDisabled: form == null ? void 0 : form.disabled,
       label,
       labels,
+      n,
+      classes,
       computePlaceholderState,
       handleFocus,
       handleBlur,

package/es/skeleton/Skeleton.js

@@ -2,114 +2,101 @@ import { defineComponent } from 'vue';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
 import { toNumber } from '../utils/shared';
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var--box var-skeleton"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-skeleton__data"
-};
-var _hoisted_3 = {
-  key: 1,
-  class: "var-skeleton__content"
-};
-
-var _hoisted_4 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_5 = [_hoisted_4];
-var _hoisted_6 = {
-  class: "var-skeleton__article"
-};
-
-var _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_8 = [_hoisted_7];
-var _hoisted_9 = {
-  class: "var-skeleton__section"
-};
-
-var _hoisted_10 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_11 = [_hoisted_10];
-
-var _hoisted_12 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_13 = [_hoisted_12];
-
-var _hoisted_14 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_15 = [_hoisted_14];
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('skeleton');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment } from "vue";
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [!_ctx.loading ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "default")])) : _createCommentVNode("v-if", true), _ctx.loading && !_ctx.fullscreen ? (_openBlock(), _createElementBlock("div", _hoisted_3, [_ctx.card ? (_openBlock(), _createElementBlock("div", {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes('var--box', _ctx.n()))
+  }, [!_ctx.loading ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('data'))
+  }, [_renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.loading && !_ctx.fullscreen ? (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    class: _normalizeClass(_ctx.n('content'))
+  }, [_ctx.card ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: "var-skeleton__card",
+    class: _normalizeClass(_ctx.n('card')),
     style: _normalizeStyle({
       height: _ctx.toSizeUnit(_ctx.cardHeight)
     })
-  }, _hoisted_5, 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_6, [_ctx.avatar ? (_openBlock(), _createElementBlock("div", {
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('article'))
+  }, [_ctx.avatar ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: "var-skeleton__avatar",
+    class: _normalizeClass(_ctx.n('avatar')),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.avatarSize),
       height: _ctx.toSizeUnit(_ctx.avatarSize)
     })
-  }, _hoisted_8, 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_9, [_ctx.title ? (_openBlock(), _createElementBlock("div", {
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('section'))
+  }, [_ctx.title ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: "var-skeleton__title",
+    class: _normalizeClass(_ctx.n('title')),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.titleWidth)
     })
-  }, _hoisted_11, 4
-  /* STYLE */
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.toNumber(_ctx.rows), (r, index) => {
     return _openBlock(), _createElementBlock("div", {
-      class: "var-skeleton__row",
+      class: _normalizeClass(_ctx.n('row')),
       key: r,
       style: _normalizeStyle({
         width: _ctx.toSizeUnit(_ctx.rowsWidth[index])
       })
-    }, _hoisted_13, 4
-    /* STYLE */
+    }, [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('--animation'))
+    }, null, 2
+    /* CLASS */
+    )], 6
+    /* CLASS, STYLE */
     );
   }), 128
   /* KEYED_FRAGMENT */
-  ))])])])) : _createCommentVNode("v-if", true), _ctx.loading && _ctx.fullscreen ? (_openBlock(), _createElementBlock("div", {
+  ))], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.loading && _ctx.fullscreen ? (_openBlock(), _createElementBlock("div", {
     key: 2,
-    class: "var-skeleton__fullscreen",
+    class: _normalizeClass(_ctx.n('fullscreen')),
     style: _normalizeStyle({
       zIndex: _ctx.toNumber(_ctx.fullscreenZIndex)
     })
-  }, _hoisted_15, 4
-  /* STYLE */
-  )) : _createCommentVNode("v-if", true)]);
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -118,6 +105,8 @@ export default defineComponent({
 
   setup() {
     return {
+      n,
+      classes,
       toSizeUnit,
       toNumber
     };