@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/date-picker/date-picker.less

@@ -92,7 +92,7 @@
     padding: 0;
   }
 
-  &-title {
+  &__title {
     padding: var(--date-picker-title-padding);
     color: var(--date-picker-title-color);
     background: var(--date-picker-title-background);
@@ -101,7 +101,7 @@
     flex-direction: column;
     flex-wrap: wrap;
 
-    &__year {
+    &-year {
       opacity: 0.6;
       cursor: pointer;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -117,7 +117,7 @@
       }
     }
 
-    &__date {
+    &-date {
       height: var(--date-picker-title-date-height);
       overflow: hidden;
       font-size: var(--date-picker-title-date-font-size);
@@ -141,7 +141,7 @@
     }
   }
 
-  &-body {
+  &__body {
     flex: 1;
     position: relative;
     overflow: auto;
@@ -198,28 +198,26 @@
       color: var(--date-picker-main-color);
     }
 
-    &__button-disabled {
+    &__button--disabled {
       color: var(--color-text-disabled) !important;
       cursor: not-allowed;
     }
   }
 
   .var-year-picker {
-    &__panel {
-      width: 100%;
-      height: 100%;
-      font-weight: var(--year-picker-font-weight);
-      padding: 0;
-      margin: 0;
-      list-style-type: none;
-      overflow: auto;
-      text-align: center;
+    width: 100%;
+    height: 100%;
+    font-weight: var(--year-picker-font-weight);
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    overflow: auto;
+    text-align: center;
 
-      li {
-        padding: var(--year-picker-item-padding);
-        cursor: pointer;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
+    &__item {
+      padding: var(--year-picker-item-padding);
+      cursor: pointer;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
       &--active {
         font-size: var(--year-picker-item-active-font-size);
@@ -261,11 +259,15 @@
       font-size: var(--day-picker-content-item-button-font-size);
     }
 
+    &__button:not(.var-day-picker__button--usable) {
+      cursor: unset;
+    }
+
     &__button[var-date-picker-color-cover='true'] {
       color: var(--date-picker-main-color);
     }
 
-    &__button-disabled {
+    &__button--disabled {
       color: var(--color-text-disabled) !important;
       cursor: not-allowed;
     }

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

@@ -20,6 +20,8 @@ var _props = require("../props");
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 var _locale = require("../../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,27 +32,24 @@ _dayjs.default.extend(_isSameOrBefore.default);
 
 _dayjs.default.extend(_isSameOrAfter.default);
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.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
+} = (0, _components.createNamespace)('day-picker');
+var {
+  n: nDate
+} = (0, _components.createNamespace)('date-picker');
 
 function render(_ctx, _cache) {
   var _component_panel_header = (0, _vue.resolveComponent)("panel-header");
 
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createVNode)(_component_panel_header, {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('content'))
+  }, [(0, _vue.createVNode)(_component_panel_header, {
     ref: "headerEl",
     type: "day",
     date: _ctx.preview,
@@ -60,11 +59,13 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
+    name: "" + _ctx.nDate() + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.panelKey
-    }, [(0, _vue.createElementVNode)("ul", _hoisted_3, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.sortWeekList, week => {
+    }, [(0, _vue.createElementVNode)("ul", {
+      class: (0, _vue.normalizeClass)(_ctx.n('head'))
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.sortWeekList, week => {
       return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
         key: week.index
       }, (0, _vue.toDisplayString)(_ctx.getDayAbbr(week.index)), 1
@@ -72,14 +73,15 @@ function render(_ctx, _cache) {
       );
     }), 128
     /* KEYED_FRAGMENT */
-    ))]), (0, _vue.createElementVNode)("ul", _hoisted_4, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.days, (day, index) => {
+    ))], 2
+    /* CLASS */
+    ), (0, _vue.createElementVNode)("ul", {
+      class: (0, _vue.normalizeClass)(_ctx.n('body'))
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.days, (day, index) => {
       return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
         key: index
       }, [(0, _vue.createVNode)(_component_var_button, (0, _vue.mergeProps)({
         type: "primary",
-        class: ["var-day-picker__button", {
-          'var-day-picker__button--usable': day > 0
-        }],
         "var-day-picker-cover": "",
         round: "",
         ripple: false
@@ -94,16 +96,22 @@ 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 */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -253,7 +261,8 @@ var _default = (0, _vue.defineComponent)({
         return {
           text: true,
           outline: false,
-          textColor: ''
+          textColor: '',
+          class: n('button')
         };
       }
 
@@ -309,18 +318,16 @@ var _default = (0, _vue.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')])
       };
     };
 
@@ -332,7 +339,7 @@ var _default = (0, _vue.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
 
@@ -350,6 +357,8 @@ var _default = (0, _vue.defineComponent)({
       initHeader();
     });
     return {
+      n,
+      nDate,
       days,
       reverse,
       headerEl,

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

@@ -20,6 +20,8 @@ var _button = _interopRequireDefault(require("../../button"));
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 var _locale = require("../../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,21 +32,24 @@ _dayjs.default.extend(_isSameOrBefore.default);
 
 _dayjs.default.extend(_isSameOrAfter.default);
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-month-picker__panel"
-};
-var _hoisted_2 = {
-  class: "var-month-picker__content"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('month-picker');
+var {
+  n: nDate
+} = (0, _components.createNamespace)('date-picker');
 
 function render(_ctx, _cache) {
   var _component_panel_header = (0, _vue.resolveComponent)("panel-header");
 
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createVNode)(_component_panel_header, {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('content'))
+  }, [(0, _vue.createVNode)(_component_panel_header, {
     ref: "headerEl",
     type: "month",
     date: _ctx.preview,
@@ -54,7 +59,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
+    name: "" + _ctx.nDate() + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
       key: _ctx.panelKey
@@ -63,7 +68,6 @@ function render(_ctx, _cache) {
         key: month.index
       }, [(0, _vue.createVNode)(_component_var_button, (0, _vue.mergeProps)({
         type: "primary",
-        class: "var-month-picker__button",
         "var-month-picker-cover": "",
         ripple: false
       }, _extends({}, _ctx.buttonProps(month.index)), {
@@ -86,7 +90,11 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["name"])])]);
+  , ["name"])], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -235,25 +243,23 @@ var _default = (0, _vue.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);
     };
 
@@ -281,6 +287,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      nDate,
       pack: _locale.pack,
       MONTH_LIST: _props.MONTH_LIST,
       headerEl,

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

@@ -12,22 +12,24 @@ var _vue = require("vue");
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 var _locale = require("../../locale");
 
 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-picker-header"
-};
+var {
+  n
+} = (0, _components.createNamespace)('picker-header');
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createVNode)(_component_var_button, {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createVNode)(_component_var_button, {
     round: "",
     text: "",
     style: {
@@ -45,7 +47,7 @@ function render(_ctx, _cache) {
   }, 8
   /* PROPS */
   , ["disabled"]), (0, _vue.createElementVNode)("div", {
-    class: "var-picker-header__value",
+    class: (0, _vue.normalizeClass)(_ctx.n('value')),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
     name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
@@ -60,7 +62,9 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["name"])]), (0, _vue.createVNode)(_component_var_button, {
+  , ["name"])], 2
+  /* CLASS */
+  ), (0, _vue.createVNode)(_component_var_button, {
     round: "",
     text: "",
     style: {
@@ -77,7 +81,9 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["disabled"])]);
+  , ["disabled"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -136,6 +142,7 @@ var _default = (0, _vue.defineComponent)({
       forwardOrBackNum.value = 0;
     });
     return {
+      n,
       reverse,
       showDate,
       checkDate

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

@@ -10,30 +10,38 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('year-picker');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-year-picker__panel"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", _hoisted_1, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.yearList, year => {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.yearList, year => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
       key: year,
-      class: (0, _vue.normalizeClass)([year === _ctx.toNumber(_ctx.preview) ? 'var-year-picker__panel--active' : null]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('item'), [year === _ctx.toNumber(_ctx.preview), _ctx.n('item--active')])),
       style: (0, _vue.normalizeStyle)({
         color: year === _ctx.toNumber(_ctx.preview) ? _ctx.componentProps.color : ''
       }),
       onClick: $event => _ctx.chooseYear(year)
     }, (0, _vue.toDisplayString)(year), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))]);
+  ))], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -94,12 +102,14 @@ var _default = (0, _vue.defineComponent)({
     };
 
     (0, _vue.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: _shared.toNumber

package/lib/dialog/Dialog.js

@@ -16,16 +16,14 @@ var _shared = require("../utils/shared");
 
 var _locale = require("../locale");
 
-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-dialog__title"
-};
-var _hoisted_2 = {
-  class: "var-dialog__actions"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('dialog');
 
 function render(_ctx, _cache) {
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
@@ -33,7 +31,7 @@ function render(_ctx, _cache) {
   var _component_var_popup = (0, _vue.resolveComponent)("var-popup");
 
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_popup, {
-    class: "var-dialog__popup",
+    class: (0, _vue.normalizeClass)(_ctx.n('popup')),
     "var-dialog-cover": "",
     show: _ctx.popupShow,
     overlay: _ctx.overlay,
@@ -50,22 +48,28 @@ function render(_ctx, _cache) {
     onClickOverlay: _ctx.handleClickOverlay
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: ["var--box var-dialog", _ctx.dialogClass],
+      class: _ctx.classes('var--box', _ctx.n(), _ctx.dialogClass),
       style: _ctx.dialogStyle
-    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
+    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('title'))
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
     /* TEXT */
-    )])]), (0, _vue.createElementVNode)("div", {
-      class: "var-dialog__message",
+    )])], 2
+    /* CLASS */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('message')),
       style: (0, _vue.normalizeStyle)({
         textAlign: _ctx.messageAlign
       })
     }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.message), 1
     /* TEXT */
-    )])], 4
-    /* STYLE */
-    ), (0, _vue.createElementVNode)("div", _hoisted_2, [_ctx.cancelButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
+    )])], 6
+    /* CLASS, STYLE */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('actions'))
+    }, [_ctx.cancelButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
       key: 0,
-      class: "var-dialog__button var-dialog__cancel-button",
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('button'), _ctx.n('cancel-button'))),
       "var-dialog-cover": "",
       text: "",
       "text-color": _ctx.cancelButtonTextColor,
@@ -80,9 +84,9 @@ function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.confirmButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
+    , ["class", "text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.confirmButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
       key: 1,
-      class: "var-dialog__button var-dialog__confirm-button",
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('button'), _ctx.n('confirm-button'))),
       "var-dialog-cover": "",
       text: "",
       "text-color": _ctx.confirmButtonTextColor,
@@ -97,7 +101,9 @@ function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 16
+    , ["class", "text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)], 2
+    /* CLASS */
+    )], 16
     /* FULL_PROPS */
     )]),
     _: 3
@@ -105,7 +111,7 @@ 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"]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -122,21 +128,15 @@ var _default = (0, _vue.defineComponent)({
     var popupShow = (0, _vue.ref)(false);
     var popupCloseOnClickOverlay = (0, _vue.ref)(false);
 
-    var done = () => {
-      var _props$onUpdateShow;
-
-      return (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
-    };
+    var done = () => (0, _components.call)(props['onUpdate:show'], false);
 
     var handleClickOverlay = () => {
-      var _props$onUpdateShow2;
-
       var {
         closeOnClickOverlay,
         onClickOverlay,
         onBeforeClose
       } = props;
-      onClickOverlay == null ? void 0 : onClickOverlay();
+      (0, _components.call)(onClickOverlay);
 
       if (!closeOnClickOverlay) {
         return;
@@ -147,41 +147,37 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      (_props$onUpdateShow2 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow2.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     };
 
     var confirm = () => {
-      var _props$onUpdateShow3;
-
       var {
         onBeforeClose,
         onConfirm
       } = props;
-      onConfirm == null ? void 0 : onConfirm();
+      (0, _components.call)(onConfirm);
 
       if (onBeforeClose != null) {
         onBeforeClose('confirm', done);
         return;
       }
 
-      (_props$onUpdateShow3 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow3.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     };
 
     var cancel = () => {
-      var _props$onUpdateShow4;
-
       var {
         onBeforeClose,
         onCancel
       } = props;
-      onCancel == null ? void 0 : onCancel();
+      (0, _components.call)(onCancel);
 
       if (onBeforeClose != null) {
         onBeforeClose('cancel', done);
         return;
       }
 
-      (_props$onUpdateShow4 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow4.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     };
 
     (0, _vue.watch)(() => props.show, newValue => {
@@ -200,6 +196,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack: _locale.pack,
       dt: _shared.dt,
       popupShow,