@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/time-picker/TimePicker.js

@@ -14,72 +14,79 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('time-picker');
 
-var _hoisted_1 = {
-  class: "var-time-picker-title__time"
-};
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("span", null, ":", -1
+var _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("span", null, ":", -1
 /* HOISTED */
 ));
 
-var _hoisted_3 = {
+var _hoisted_2 = {
   key: 0
 };
-var _hoisted_4 = {
-  key: 0,
-  class: "var-time-picker-title__ampm"
-};
-var _hoisted_5 = {
-  class: "var-time-picker-body"
-};
 
 function render(_ctx, _cache) {
   var _component_clock = (0, _vue.resolveComponent)("clock");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker", [_ctx.shadow ? 'var-elevation--2' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.shadow, 'var-elevation--2'])),
     ref: "picker"
   }, [(0, _vue.createElementVNode)("div", {
-    class: "var-time-picker-title",
+    class: (0, _vue.normalizeClass)(_ctx.n('title')),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.headerColor || _ctx.color
     })
-  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.type === 'hour' ? 'var-time-picker-title__btn--active' : null]),
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('title-time'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title-btn'), [_ctx.type === 'hour', _ctx.n('title-btn--active')])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.checkPanel('hour'))
   }, (0, _vue.toDisplayString)(_ctx.time.hour), 3
   /* TEXT, CLASS */
-  ), _hoisted_2, (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.type === 'minute' ? 'var-time-picker-title__btn--active' : null]),
+  ), _hoisted_1, (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title-btn'), [_ctx.type === 'minute', _ctx.n('title-btn--active')])),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.checkPanel('minute'))
   }, (0, _vue.toDisplayString)(_ctx.time.minute), 3
   /* TEXT, CLASS */
-  ), _ctx.useSeconds ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_3, ":")) : (0, _vue.createCommentVNode)("v-if", true), _ctx.useSeconds ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  ), _ctx.useSeconds ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_2, ":")) : (0, _vue.createCommentVNode)("v-if", true), _ctx.useSeconds ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 1,
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.type === 'second' ? 'var-time-picker-title__btn--active' : null]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title-btn'), [_ctx.type === 'second', _ctx.n('title-btn--active')])),
     onClick: _cache[2] || (_cache[2] = $event => _ctx.checkPanel('second'))
   }, (0, _vue.toDisplayString)(_ctx.time.second), 3
   /* TEXT, CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.format === 'ampm' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_4, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.ampm === 'am' ? 'var-time-picker-title__btn--active' : null]),
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ), _ctx.format === 'ampm' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('title-ampm'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title-btn'), [_ctx.ampm === 'am', _ctx.n('title-btn--active')])),
     onClick: _cache[3] || (_cache[3] = $event => _ctx.checkAmpm('am'))
-  }, " AM ", 2
+  }, "AM", 2
   /* CLASS */
   ), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.ampm === 'pm' ? 'var-time-picker-title__btn--active' : null]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title-btn'), [_ctx.ampm === 'pm', _ctx.n('title-btn--active')])),
     onClick: _cache[4] || (_cache[4] = $event => _ctx.checkAmpm('pm'))
-  }, " PM ", 2
+  }, "PM", 2
   /* CLASS */
-  )])) : (0, _vue.createCommentVNode)("v-if", true)], 4
-  /* STYLE */
-  ), (0, _vue.createElementVNode)("div", _hoisted_5, [(0, _vue.createElementVNode)("div", {
-    class: "var-time-picker-clock__container",
+  )], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('body'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('clock-container')),
     onTouchstart: _cache[5] || (_cache[5] = function () {
       return _ctx.moveHand && _ctx.moveHand(...arguments);
     }),
@@ -91,7 +98,7 @@ function render(_ctx, _cache) {
     }),
     ref: "container"
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: "var-time-picker-panel-fade"
+    name: _ctx.n() + "-panel-fade"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_clock, {
       key: _ctx.type,
@@ -116,9 +123,13 @@ function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })], 544
-  /* HYDRATE_EVENTS, NEED_PATCH */
-  )])], 2
+  }, 8
+  /* PROPS */
+  , ["name"])], 34
+  /* CLASS, HYDRATE_EVENTS */
+  )], 2
+  /* CLASS */
+  )], 2
   /* CLASS */
   );
 }
@@ -167,10 +178,8 @@ var _default = (0, _vue.defineComponent)({
     });
 
     var update = newTime => {
-      var _props$onUpdateModel;
-
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, newTime);
-      props.onChange == null ? void 0 : props.onChange(newTime);
+      (0, _components.call)(props['onUpdate:modelValue'], newTime);
+      (0, _components.call)(props.onChange, newTime);
     };
 
     var rad2deg = rad => {
@@ -392,6 +401,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       getRad,
       time,
       container,

package/lib/time-picker/clock.js

@@ -14,28 +14,26 @@ var _utils = require("./utils");
 
 var _shared = require("../utils/shared");
 
-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-time-picker-clock"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-time-picker-clock__inner",
-  ref: "inner"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('time-picker');
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: "var-time-picker-clock__hand",
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('clock'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('clock-hand')),
     style: (0, _vue.normalizeStyle)(_ctx.handStyle)
-  }, null, 4
-  /* STYLE */
+  }, null, 6
+  /* CLASS, STYLE */
   ), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.timeScales, (timeScale, index) => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: (0, _vue.normalizeClass)(["var-time-picker-clock__item", [_ctx.isActive(index, false) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(timeScale) ? 'var-time-picker-clock__item--disable' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('clock-item'), [_ctx.isActive(index, false), _ctx.n('clock-item--active')], [_ctx.isDisable(timeScale), _ctx.n('clock-item--disable')])),
       key: timeScale,
       style: (0, _vue.normalizeStyle)(_ctx.getStyle(index, timeScale, false))
     }, (0, _vue.toDisplayString)(timeScale), 7
@@ -43,9 +41,13 @@ function render(_ctx, _cache) {
     );
   }), 128
   /* KEYED_FRAGMENT */
-  )), _ctx.format === '24hr' && _ctx.type === 'hour' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.hours24, (hour, index) => {
+  )), _ctx.format === '24hr' && _ctx.type === 'hour' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('clock-inner')),
+    ref: "inner"
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.hours24, (hour, index) => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: (0, _vue.normalizeClass)(["var-time-picker-clock__item", [_ctx.isActive(index, true) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(hour) ? 'var-time-picker-clock__item--disable' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('clock-item'), [_ctx.isActive(index, true), _ctx.n('clock-item--active')], [_ctx.isDisable(hour), _ctx.n('clock-item--disable')])),
       key: hour,
       style: (0, _vue.normalizeStyle)(_ctx.getStyle(index, hour, true))
     }, (0, _vue.toDisplayString)(hour), 7
@@ -53,9 +55,11 @@ function render(_ctx, _cache) {
     );
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 512
-  /* NEED_PATCH */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]);
+  ))], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -331,6 +335,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       hours24: _props.hours24,
       timeScales,
       inner,

package/lib/time-picker/timePicker.css

@@ -1 +1 @@
-:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 270px; --time-picker-clock-container-height: 270px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker-title { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker-title__btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker-title__btn--active { opacity: 1;}.var-time-picker-title__time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker-title__time .var-time-picker-title__btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker-title__ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker-body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker-clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker-clock__container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker-clock__hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker-clock__hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker-clock__hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker-clock__item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%);}.var-time-picker-clock__item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker-clock__item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker-clock__inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}
+:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 270px; --time-picker-clock-container-height: 270px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}

package/lib/time-picker/timePicker.less

@@ -99,7 +99,7 @@
   overflow: hidden;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  &-title {
+  &__title {
     padding: var(--time-picker-title-padding);
     color: var(--time-picker-title-color);
     background: var(--time-picker-title-background);
@@ -107,7 +107,7 @@
     align-items: flex-end;
     justify-content: flex-end;
 
-    &__btn {
+    &-btn {
       opacity: 0.6;
       cursor: pointer;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -119,23 +119,23 @@
       }
     }
 
-    &__time {
+    &-time {
       display: flex;
       justify-content: flex-end;
       font-size: var(--time-picker-title-time-font-size);
 
-      .var-time-picker-title__btn {
+      .var-time-picker__title-btn {
         align-items: center;
         margin: var(--time-picker-title-time-margin);
       }
     }
 
-    &__ampm {
+    &-ampm {
       margin-left: var(--time-picker-title-ampm-margin-left);
     }
   }
 
-  &-body {
+  &__body {
     flex: 1;
     display: flex;
     align-items: center;
@@ -143,14 +143,14 @@
     background-color: var(--time-picker-body-background);
   }
 
-  &-clock {
+  &__clock {
     position: absolute;
     bottom: var(--time-picker-clock-bottom);
     left: var(--time-picker-clock-left);
     right: var(--time-picker-clock-right);
     top: var(--time-picker-clock-top);
 
-    &__container {
+    &-container {
       width: var(--time-picker-clock-container-width);
       height: var(--time-picker-clock-container-height);
       background: var(--time-picker-clock-container-background);
@@ -158,7 +158,7 @@
       position: relative;
     }
 
-    &__hand {
+    &-hand {
       height: var(--time-picker-clock-hand-height);
       width: var(--time-picker-clock-hand-width);
       bottom: var(--time-picker-clock-hand-bottom);
@@ -193,7 +193,7 @@
       }
     }
 
-    &__item {
+    &-item {
       align-items: center;
       border-radius: 100%;
       display: flex;
@@ -215,7 +215,7 @@
       }
     }
 
-    &__inner {
+    &-inner {
       position: absolute;
       bottom: var(--time-picker-inner-bottom);
       left: var(--time-picker-inner-left);

package/lib/uploader/Uploader.js

@@ -30,24 +30,19 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('uploader');
 var fid = 0;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-uploader var--box"
-};
-var _hoisted_2 = {
-  class: "var-uploader__file-list"
-};
-var _hoisted_3 = ["onClick"];
-var _hoisted_4 = {
-  class: "var-uploader__file-name"
-};
-var _hoisted_5 = ["onClick"];
-var _hoisted_6 = ["src", "alt"];
-var _hoisted_7 = ["multiple", "accept", "capture", "disabled"];
-var _hoisted_8 = ["src"];
+var _hoisted_1 = ["onClick"];
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = ["src", "alt"];
+var _hoisted_4 = ["multiple", "accept", "capture", "disabled"];
+var _hoisted_5 = ["src"];
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -58,49 +53,57 @@ 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.files, f => {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('file-list'))
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.files, f => {
     return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: (0, _vue.normalizeClass)(["var-uploader__file var-elevation--2", [f.state === 'loading' ? 'var-uploader--loading' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('file'), 'var-elevation--2', [f.state === 'loading', _ctx.n('--loading')])),
       key: f.id,
       onClick: $event => _ctx.preview(f)
-    }, [(0, _vue.createElementVNode)("div", _hoisted_4, (0, _vue.toDisplayString)(f.name || f.url), 1
-    /* TEXT */
+    }, [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('file-name'))
+    }, (0, _vue.toDisplayString)(f.name || f.url), 3
+    /* TEXT, CLASS */
     ), _ctx.removable ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: 0,
-      class: "var-uploader__file-close",
+      class: (0, _vue.normalizeClass)(_ctx.n('file-close')),
       onClick: (0, _vue.withModifiers)($event => _ctx.handleRemove(f), ["stop"])
     }, [(0, _vue.createVNode)(_component_var_icon, {
-      class: "var-uploader__file-close-icon",
+      class: (0, _vue.normalizeClass)(_ctx.n('file-close-icon')),
       "var-uploader-cover": "",
       name: "delete"
-    })], 8
+    }, null, 8
     /* PROPS */
-    , _hoisted_5)) : (0, _vue.createCommentVNode)("v-if", true), f.cover ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
+    , ["class"])], 10
+    /* CLASS, PROPS */
+    , _hoisted_2)) : (0, _vue.createCommentVNode)("v-if", true), f.cover ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
       key: 1,
-      class: "var-uploader__file-cover",
+      class: (0, _vue.normalizeClass)(_ctx.n('file-cover')),
       style: (0, _vue.normalizeStyle)({
         objectFit: f.fit
       }),
       src: f.cover,
       alt: f.name
-    }, null, 12
-    /* STYLE, PROPS */
-    , _hoisted_6)) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(["var-uploader__file-indicator", [f.state === 'success' ? 'var-uploader--success' : null, f.state === 'error' ? 'var-uploader--error' : null]])
+    }, null, 14
+    /* CLASS, STYLE, PROPS */
+    , _hoisted_3)) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('file-indicator'), [f.state === 'success', _ctx.n('--success')], [f.state === 'error', _ctx.n('--error')]))
     }, null, 2
     /* CLASS */
     )], 10
     /* CLASS, PROPS */
-    , _hoisted_3)), [[_directive_ripple, {
+    , _hoisted_1)), [[_directive_ripple, {
       disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple
     }]]);
   }), 128
   /* KEYED_FRAGMENT */
   )), !_ctx.maxlength || _ctx.modelValue.length < _ctx.maxlength ? (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var--relative", [!_ctx.$slots.default ? 'var-uploader__action var-elevation--2' : null, _ctx.disabled || _ctx.formDisabled ? 'var-uploader--disabled' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes('var--relative', [!_ctx.$slots.default, _ctx.n('action') + " var-elevation--2"], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')]))
   }, [(0, _vue.createElementVNode)("input", {
-    class: "var-uploader__action-input",
+    class: (0, _vue.normalizeClass)(_ctx.n('action-input')),
     type: "file",
     multiple: _ctx.multiple,
     accept: _ctx.accept,
@@ -109,23 +112,27 @@ function render(_ctx, _cache) {
     onChange: _cache[0] || (_cache[0] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
     })
-  }, null, 40
-  /* PROPS, HYDRATE_EVENTS */
-  , _hoisted_7), (0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
-    class: "var-uploader__action-icon",
+  }, null, 42
+  /* CLASS, PROPS, HYDRATE_EVENTS */
+  , _hoisted_4), (0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
+    class: (0, _vue.normalizeClass)(_ctx.n('action-icon')),
     "var-uploader-cover": "",
     name: "plus"
-  })])], 2
+  }, null, 8
+  /* PROPS */
+  , ["class"])])], 2
   /* CLASS */
   )), [[_directive_ripple, {
     disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple || _ctx.$slots.default
-  }]]) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.createVNode)(_component_var_form_details, {
+  }]]) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ), (0, _vue.createVNode)(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
     "maxlength-text": _ctx.maxlengthText
   }, null, 8
   /* PROPS */
   , ["error-message", "maxlength-text"]), (0, _vue.createVNode)(_component_var_popup, {
-    class: "var-uploader__preview",
+    class: (0, _vue.normalizeClass)(_ctx.n('preview')),
     "var-uploader-cover": "",
     position: "center",
     show: _ctx.showPreview,
@@ -137,7 +144,7 @@ function render(_ctx, _cache) {
 
       return [_ctx.currentPreview && _ctx.isHTMLSupportVideo((_ctx$currentPreview = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview.url) ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("video", {
         key: 0,
-        class: "var-uploader__preview-video",
+        class: (0, _vue.normalizeClass)(_ctx.n('preview-video')),
         playsinline: "true",
         "webkit-playsinline": "true",
         "x5-playsinline": "true",
@@ -145,16 +152,18 @@ function render(_ctx, _cache) {
         "x5-video-player-fullscreen": "false",
         controls: "",
         src: (_ctx$currentPreview2 = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview2.url
-      }, null, 8
-      /* PROPS */
-      , _hoisted_8)) : (0, _vue.createCommentVNode)("v-if", true)];
+      }, null, 10
+      /* CLASS, PROPS */
+      , _hoisted_5)) : (0, _vue.createCommentVNode)("v-if", true)];
     }),
     _: 1
     /* STABLE */
 
   }, 8
   /* PROPS */
-  , ["show"])]);
+  , ["class", "show"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -284,8 +293,6 @@ var _default = (0, _vue.defineComponent)({
 
     var handleChange = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(function* (event) {
-        var _props$onUpdateModel;
-
         var {
           maxsize,
           maxlength,
@@ -303,7 +310,7 @@ var _default = (0, _vue.defineComponent)({
         var getValidSizeVarFile = varFiles => {
           return varFiles.filter(varFile => {
             if (varFile.file.size > (0, _shared.toNumber)(maxsize)) {
-              onOversize == null ? void 0 : onOversize((0, _vue.reactive)(varFile));
+              (0, _components.call)(onOversize, (0, _vue.reactive)(varFile));
               return false;
             }
 
@@ -335,9 +342,9 @@ var _default = (0, _vue.defineComponent)({
           } = _ref3;
           return varFile;
         });
-        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, [...modelValue, ...validVarFiles]);
+        (0, _components.call)(props['onUpdate:modelValue'], [...modelValue, ...validVarFiles]);
         event.target.value = '';
-        validVarFiles.forEach(varFile => onAfterRead == null ? void 0 : onAfterRead((0, _vue.reactive)(varFile)));
+        validVarFiles.forEach(varFile => (0, _components.call)(onAfterRead, (0, _vue.reactive)(varFile)));
       });
 
       return function handleChange(_x) {
@@ -347,8 +354,6 @@ var _default = (0, _vue.defineComponent)({
 
     var handleRemove = /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator(function* (removedVarFile) {
-        var _props$onUpdateModel2;
-
         var {
           disabled,
           readonly,
@@ -366,9 +371,9 @@ var _default = (0, _vue.defineComponent)({
         }
 
         var expectedFiles = modelValue.filter(varFile => varFile !== removedVarFile);
-        onRemove == null ? void 0 : onRemove(removedVarFile);
+        (0, _components.call)(onRemove, removedVarFile);
         validateWithTrigger('onRemove');
-        (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, expectedFiles);
+        (0, _components.call)(props['onUpdate:modelValue'], expectedFiles);
       });
 
       return function handleRemove(_x2) {
@@ -408,10 +413,8 @@ var _default = (0, _vue.defineComponent)({
 
 
     var reset = () => {
-      var _props$onUpdateModel3;
-
       callReset = true;
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, []);
+      (0, _components.call)(props['onUpdate:modelValue'], []);
       resetValidation();
     };
 
@@ -420,7 +423,7 @@ var _default = (0, _vue.defineComponent)({
       resetValidation,
       reset
     };
-    bindForm == null ? void 0 : bindForm(uploaderProvider);
+    (0, _components.call)(bindForm, uploaderProvider);
     (0, _vue.watch)(() => props.modelValue, () => {
       !callReset && validateWithTrigger('onChange');
       callReset = false;
@@ -428,6 +431,8 @@ var _default = (0, _vue.defineComponent)({
       deep: true
     });
     return {
+      n,
+      classes,
       files,
       showPreview,
       currentPreview,

package/lib/utils/components.js

@@ -2,6 +2,8 @@
 
 exports.__esModule = true;
 exports.addRouteListener = addRouteListener;
+exports.call = call;
+exports.createNamespace = createNamespace;
 exports.exposeApis = exposeApis;
 exports.flatVNodes = flatVNodes;
 exports.keyInProvides = keyInProvides;
@@ -290,4 +292,41 @@ function exposeApis(apis) {
   if (instance) {
     Object.assign(instance.proxy, apis);
   }
+}
+
+function createNamespace(name) {
+  var namespace = "var-" + name;
+
+  var createBEM = suffix => {
+    if (!suffix) return namespace;
+    return suffix.startsWith('--') ? "" + namespace + suffix : namespace + "__" + suffix;
+  };
+
+  var classes = function () {
+    for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
+      classes[_key] = arguments[_key];
+    }
+
+    return classes.map(className => {
+      if ((0, _shared.isArray)(className)) {
+        var [condition, truthy, falsy = null] = className;
+        return condition ? truthy : falsy;
+      }
+
+      return className;
+    });
+  };
+
+  return {
+    n: createBEM,
+    classes
+  };
+}
+
+function call(fn) {
+  for (var _len2 = arguments.length, arg = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    arg[_key2 - 1] = arguments[_key2];
+  }
+
+  if (fn) return fn(...arg);
 }