@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

package/es/date-picker/src/day-picker-panel.js

@@ -8,31 +8,28 @@ import VarButton from '../../button';
 import { defineComponent, ref, computed, watch, onMounted, reactive } from 'vue';
 import { WEEK_HEADER } from '../props';
 import { toNumber } from '../../utils/shared';
+import { createNamespace } from '../../utils/components';
 import { pack } from '../../locale';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-day-picker__panel"
-};
-var _hoisted_2 = {
-  class: "var-day-picker__content"
-};
-var _hoisted_3 = {
-  class: "var-day-picker__head"
-};
-var _hoisted_4 = {
-  class: "var-day-picker__body"
-};
+var {
+  n,
+  classes
+} = createNamespace('day-picker');
+var {
+  n: nDate
+} = createNamespace('date-picker');
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition } from "vue";
 export function render(_ctx, _cache) {
   var _component_panel_header = _resolveComponent("panel-header");
 
   var _component_var_button = _resolveComponent("var-button");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [_createVNode(_component_panel_header, {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('content'))
+  }, [_createVNode(_component_panel_header, {
     ref: "headerEl",
     type: "day",
     date: _ctx.preview,
@@ -42,11 +39,13 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), _createVNode(_Transition, {
-    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
+    name: "" + _ctx.nDate() + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: _withCtx(() => [(_openBlock(), _createElementBlock("div", {
       key: _ctx.panelKey
-    }, [_createElementVNode("ul", _hoisted_3, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sortWeekList, week => {
+    }, [_createElementVNode("ul", {
+      class: _normalizeClass(_ctx.n('head'))
+    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sortWeekList, week => {
       return _openBlock(), _createElementBlock("li", {
         key: week.index
       }, _toDisplayString(_ctx.getDayAbbr(week.index)), 1
@@ -54,14 +53,15 @@ export function render(_ctx, _cache) {
       );
     }), 128
     /* KEYED_FRAGMENT */
-    ))]), _createElementVNode("ul", _hoisted_4, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.days, (day, index) => {
+    ))], 2
+    /* CLASS */
+    ), _createElementVNode("ul", {
+      class: _normalizeClass(_ctx.n('body'))
+    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.days, (day, index) => {
       return _openBlock(), _createElementBlock("li", {
         key: index
       }, [_createVNode(_component_var_button, _mergeProps({
         type: "primary",
-        class: ["var-day-picker__button", {
-          'var-day-picker__button--usable': day > 0
-        }],
         "var-day-picker-cover": "",
         round: "",
         ripple: false
@@ -76,16 +76,22 @@ export function render(_ctx, _cache) {
 
       }, 1040
       /* FULL_PROPS, DYNAMIC_SLOTS */
-      , ["class", "onClick"])]);
+      , ["onClick"])]);
     }), 128
     /* KEYED_FRAGMENT */
-    ))])]))]),
+    ))], 2
+    /* CLASS */
+    )]))]),
     _: 1
     /* STABLE */
 
   }, 8
   /* PROPS */
-  , ["name"])])]);
+  , ["name"])], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -233,7 +239,8 @@ export default defineComponent({
         return {
           text: true,
           outline: false,
-          textColor: ''
+          textColor: '',
+          class: n('button')
         };
       }
 
@@ -289,18 +296,16 @@ export default defineComponent({
         if (disabled) return '';
         if (computeOutline()) return color != null ? color : '';
         if (dayExist()) return '';
-        return 'var-date-picker-color-cover';
+        return nDate() + "-color-cover";
       };
 
-      var isCover = textColorOrCover().startsWith('var-date-picker');
+      var isCover = textColorOrCover().startsWith(nDate());
       return {
         text: computeText(),
         outline: computeOutline(),
         textColor: isCover ? '' : textColorOrCover(),
-        'var-date-picker-color-cover': isCover,
-        class: {
-          'var-day-picker__button-disabled': disabled
-        }
+        [nDate() + "-color-cover"]: isCover,
+        class: classes(n('button'), n('button--usable'), [disabled, n('button--disabled')])
       };
     };
 
@@ -312,7 +317,7 @@ export default defineComponent({
 
     var chooseDay = (day, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains('var-day-picker__button-disabled')) return;
+      if (buttonEl.classList.contains(n('button--disabled'))) return;
       emit('choose-day', day);
     }; // expose for internal
 
@@ -330,6 +335,8 @@ export default defineComponent({
       initHeader();
     });
     return {
+      n,
+      nDate,
       days,
       reverse,
       headerEl,

package/es/date-picker/src/month-picker-panel.js

@@ -8,25 +8,28 @@ import { MONTH_LIST } from '../props';
 import PanelHeader from './panel-header.js'
 import VarButton from '../../button';
 import { toNumber } from '../../utils/shared';
+import { createNamespace } from '../../utils/components';
 import { pack } from '../../locale';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-month-picker__panel"
-};
-var _hoisted_2 = {
-  class: "var-month-picker__content"
-};
+var {
+  n,
+  classes
+} = createNamespace('month-picker');
+var {
+  n: nDate
+} = createNamespace('date-picker');
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   var _component_panel_header = _resolveComponent("panel-header");
 
   var _component_var_button = _resolveComponent("var-button");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [_createVNode(_component_panel_header, {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('content'))
+  }, [_createVNode(_component_panel_header, {
     ref: "headerEl",
     type: "month",
     date: _ctx.preview,
@@ -36,7 +39,7 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), _createVNode(_Transition, {
-    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
+    name: "" + _ctx.nDate() + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: _withCtx(() => [(_openBlock(), _createElementBlock("ul", {
       key: _ctx.panelKey
@@ -45,7 +48,6 @@ export function render(_ctx, _cache) {
         key: month.index
       }, [_createVNode(_component_var_button, _mergeProps({
         type: "primary",
-        class: "var-month-picker__button",
         "var-month-picker-cover": "",
         ripple: false
       }, _extends({}, _ctx.buttonProps(month.index)), {
@@ -68,7 +70,11 @@ export function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["name"])])]);
+  , ["name"])], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -216,25 +222,23 @@ export default defineComponent({
         if (disabled) return '';
         if (computeOutline()) return color != null ? color : '';
         if (monthExist()) return '';
-        return 'var-date-picker-color-cover';
+        return nDate() + "-color-cover";
       };
 
-      var isCover = textColorOrCover().startsWith('var-date-picker');
+      var isCover = textColorOrCover().startsWith(nDate());
       return {
         outline: computeOutline(),
         text: computeText(),
         color: !computeText() ? color : '',
         textColor: isCover ? '' : textColorOrCover(),
-        'var-date-picker-color-cover': isCover,
-        class: {
-          'var-month-picker__button-disabled': disabled
-        }
+        [nDate() + "-color-cover"]: isCover,
+        class: classes(n('button'), [disabled, n('button--disabled')])
       };
     };
 
     var chooseMonth = (month, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains('var-month-picker__button-disabled')) return;
+      if (buttonEl.classList.contains(n('button--disabled'))) return;
       emit('choose-month', month);
     };
 
@@ -262,6 +266,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      nDate,
       pack,
       MONTH_LIST,
       headerEl,

package/es/date-picker/src/panel-header.js

@@ -2,20 +2,20 @@ import VarButton from '../../button';
 import VarIcon from '../../icon';
 import { defineComponent, ref, computed, watch } from 'vue';
 import { toNumber } from '../../utils/shared';
+import { createNamespace } from '../../utils/components';
 import { pack } from '../../locale';
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, Transition as _Transition, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-picker-header"
-};
+var {
+  n
+} = createNamespace('picker-header');
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, Transition as _Transition, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_button = _resolveComponent("var-button");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createVNode(_component_var_button, {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createVNode(_component_var_button, {
     round: "",
     text: "",
     style: {
@@ -33,7 +33,7 @@ export function render(_ctx, _cache) {
   }, 8
   /* PROPS */
   , ["disabled"]), _createElementVNode("div", {
-    class: "var-picker-header__value",
+    class: _normalizeClass(_ctx.n('value')),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [_createVNode(_Transition, {
     name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
@@ -48,7 +48,9 @@ export function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["name"])]), _createVNode(_component_var_button, {
+  , ["name"])], 2
+  /* CLASS */
+  ), _createVNode(_component_var_button, {
     round: "",
     text: "",
     style: {
@@ -65,7 +67,9 @@ export function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["disabled"])]);
+  , ["disabled"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -123,6 +127,7 @@ export default defineComponent({
       forwardOrBackNum.value = 0;
     });
     return {
+      n,
       reverse,
       showDate,
       checkDate

package/es/date-picker/src/year-picker-panel.js

@@ -1,29 +1,35 @@
 import { defineComponent, computed, onMounted } from 'vue';
 import dayjs from 'dayjs/esm';
 import { toNumber } from '../../utils/shared';
+import { createNamespace } from '../../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('year-picker');
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-year-picker__panel"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("ul", _hoisted_1, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.yearList, year => {
+  return _openBlock(), _createElementBlock("ul", {
+    class: _normalizeClass(_ctx.n())
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.yearList, year => {
     return _openBlock(), _createElementBlock("li", {
       key: year,
-      class: _normalizeClass([year === _ctx.toNumber(_ctx.preview) ? 'var-year-picker__panel--active' : null]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('item'), [year === _ctx.toNumber(_ctx.preview), _ctx.n('item--active')])),
       style: _normalizeStyle({
         color: year === _ctx.toNumber(_ctx.preview) ? _ctx.componentProps.color : ''
       }),
       onClick: $event => _ctx.chooseYear(year)
     }, _toDisplayString(year), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))]);
+  ))], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -83,12 +89,14 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      var activeEl = document.querySelector('.var-year-picker__panel--active');
+      var activeEl = document.querySelector("." + n('item--active'));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: 'center'
       });
     });
     return {
+      n,
+      classes,
       yearList,
       chooseYear,
       toNumber

package/es/dialog/Dialog.js

@@ -4,23 +4,19 @@ import { props } from './props';
 import { defineComponent, ref, watch } from 'vue';
 import { dt } from '../utils/shared';
 import { pack } from '../locale';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-dialog__title"
-};
-var _hoisted_2 = {
-  class: "var-dialog__actions"
-};
+import { call, createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('dialog');
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
   var _component_var_popup = _resolveComponent("var-popup");
 
   return _openBlock(), _createBlock(_component_var_popup, {
-    class: "var-dialog__popup",
+    class: _normalizeClass(_ctx.n('popup')),
     "var-dialog-cover": "",
     show: _ctx.popupShow,
     overlay: _ctx.overlay,
@@ -37,22 +33,28 @@ export function render(_ctx, _cache) {
     onClickOverlay: _ctx.handleClickOverlay
   }, {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: ["var--box var-dialog", _ctx.dialogClass],
+      class: _ctx.classes('var--box', _ctx.n(), _ctx.dialogClass),
       style: _ctx.dialogStyle
-    }, _ctx.$attrs), [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "title", {}, () => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
+    }, _ctx.$attrs), [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('title'))
+    }, [_renderSlot(_ctx.$slots, "title", {}, () => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
     /* TEXT */
-    )])]), _createElementVNode("div", {
-      class: "var-dialog__message",
+    )])], 2
+    /* CLASS */
+    ), _createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('message')),
       style: _normalizeStyle({
         textAlign: _ctx.messageAlign
       })
     }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.message), 1
     /* TEXT */
-    )])], 4
-    /* STYLE */
-    ), _createElementVNode("div", _hoisted_2, [_ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
+    )])], 6
+    /* CLASS, STYLE */
+    ), _createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('actions'))
+    }, [_ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
       key: 0,
-      class: "var-dialog__button var-dialog__cancel-button",
+      class: _normalizeClass(_ctx.classes(_ctx.n('button'), _ctx.n('cancel-button'))),
       "var-dialog-cover": "",
       text: "",
       "text-color": _ctx.cancelButtonTextColor,
@@ -67,9 +69,9 @@ export function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "color", "onClick"])) : _createCommentVNode("v-if", true), _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
+    , ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true), _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
       key: 1,
-      class: "var-dialog__button var-dialog__confirm-button",
+      class: _normalizeClass(_ctx.classes(_ctx.n('button'), _ctx.n('confirm-button'))),
       "var-dialog-cover": "",
       text: "",
       "text-color": _ctx.confirmButtonTextColor,
@@ -84,7 +86,9 @@ export function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "color", "onClick"])) : _createCommentVNode("v-if", true)])], 16
+    , ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true)], 2
+    /* CLASS */
+    )], 16
     /* FULL_PROPS */
     )]),
     _: 3
@@ -92,7 +96,7 @@ export function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
+  , ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
 }
 export default defineComponent({
   render,
@@ -108,21 +112,15 @@ export default defineComponent({
     var popupShow = ref(false);
     var popupCloseOnClickOverlay = ref(false);
 
-    var done = () => {
-      var _props$onUpdateShow;
-
-      return (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
-    };
+    var done = () => call(props['onUpdate:show'], false);
 
     var handleClickOverlay = () => {
-      var _props$onUpdateShow2;
-
       var {
         closeOnClickOverlay,
         onClickOverlay,
         onBeforeClose
       } = props;
-      onClickOverlay == null ? void 0 : onClickOverlay();
+      call(onClickOverlay);
 
       if (!closeOnClickOverlay) {
         return;
@@ -133,41 +131,37 @@ export default defineComponent({
         return;
       }
 
-      (_props$onUpdateShow2 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow2.call(props, false);
+      call(props['onUpdate:show'], false);
     };
 
     var confirm = () => {
-      var _props$onUpdateShow3;
-
       var {
         onBeforeClose,
         onConfirm
       } = props;
-      onConfirm == null ? void 0 : onConfirm();
+      call(onConfirm);
 
       if (onBeforeClose != null) {
         onBeforeClose('confirm', done);
         return;
       }
 
-      (_props$onUpdateShow3 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow3.call(props, false);
+      call(props['onUpdate:show'], false);
     };
 
     var cancel = () => {
-      var _props$onUpdateShow4;
-
       var {
         onBeforeClose,
         onCancel
       } = props;
-      onCancel == null ? void 0 : onCancel();
+      call(onCancel);
 
       if (onBeforeClose != null) {
         onBeforeClose('cancel', done);
         return;
       }
 
-      (_props$onUpdateShow4 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow4.call(props, false);
+      call(props['onUpdate:show'], false);
     };
 
     watch(() => props.show, newValue => {
@@ -186,6 +180,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack,
       dt,
       popupShow,

package/es/divider/Divider.js

@@ -4,20 +4,21 @@ import { defineComponent, computed, reactive, onMounted, onUpdated, toRefs } fro
 import { toSizeUnit } from '../utils/elements';
 import { isBool, toNumber } from '../utils/shared';
 import { props } from './props';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  key: 0,
-  class: "var-divider__text"
-};
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('divider');
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-divider var--box", [_ctx.vertical ? 'var-divider--vertical' : null, _ctx.withText ? 'var-divider--with-text' : null, _ctx.isInset ? 'var-divider--inset' : null, _ctx.dashed ? 'var-divider--dashed' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.vertical, _ctx.n('--vertical')], [_ctx.withText, _ctx.n('--with-text')], [_ctx.isInset, _ctx.n('--inset')], [_ctx.dashed, _ctx.n('--dashed')])),
     style: _normalizeStyle(_ctx.style)
-  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.description), 1
-  /* TEXT */
+  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("span", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('text'))
+  }, _toDisplayString(_ctx.description), 3
+  /* TEXT, CLASS */
   )) : _createCommentVNode("v-if", true)])], 6
   /* CLASS, STYLE */
   );
@@ -68,7 +69,10 @@ export default defineComponent({
     onUpdated(() => {
       checkHasText();
     });
-    return _extends({}, toRefs(state), {
+    return _extends({
+      n,
+      classes
+    }, toRefs(state), {
       style,
       isInset
     });

package/es/form/Form.js

@@ -5,15 +5,17 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
 import { useFormItems } from './provide';
-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-form"
-};
+import { createNamespace } from '../utils/components';
+var {
+  n
+} = createNamespace('form');
+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,
@@ -66,6 +68,7 @@ export default defineComponent({
     };
     bindFormItems(formProvider);
     return {
+      n,
       validate,
       reset,
       resetValidation