@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/time-picker/TimePicker.js

@@ -3,70 +3,75 @@ import dayjs from 'dayjs/esm';
 import Clock from './clock.js'
 import { props, hoursAmpm, hours24 } from './props';
 import { toNumber } from '../utils/shared';
+import { createNamespace, call } from '../utils/components';
 import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from './utils';
+var {
+  n,
+  classes
+} = createNamespace('time-picker');
 import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-time-picker-title__time"
-};
-
-var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("span", null, ":", -1
+var _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_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"
-};
 export function render(_ctx, _cache) {
   var _component_clock = _resolveComponent("clock");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-time-picker", [_ctx.shadow ? 'var-elevation--2' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.shadow, 'var-elevation--2'])),
     ref: "picker"
   }, [_createElementVNode("div", {
-    class: "var-time-picker-title",
+    class: _normalizeClass(_ctx.n('title')),
     style: _normalizeStyle({
       background: _ctx.headerColor || _ctx.color
     })
-  }, [_createElementVNode("div", _hoisted_1, [_createElementVNode("div", {
-    class: _normalizeClass(["var-time-picker-title__btn", _ctx.type === 'hour' ? 'var-time-picker-title__btn--active' : null]),
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('title-time'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('title-btn'), [_ctx.type === 'hour', _ctx.n('title-btn--active')])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.checkPanel('hour'))
   }, _toDisplayString(_ctx.time.hour), 3
   /* TEXT, CLASS */
-  ), _hoisted_2, _createElementVNode("div", {
-    class: _normalizeClass(["var-time-picker-title__btn", _ctx.type === 'minute' ? 'var-time-picker-title__btn--active' : null]),
+  ), _hoisted_1, _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('title-btn'), [_ctx.type === 'minute', _ctx.n('title-btn--active')])),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.checkPanel('minute'))
   }, _toDisplayString(_ctx.time.minute), 3
   /* TEXT, CLASS */
-  ), _ctx.useSeconds ? (_openBlock(), _createElementBlock("span", _hoisted_3, ":")) : _createCommentVNode("v-if", true), _ctx.useSeconds ? (_openBlock(), _createElementBlock("div", {
+  ), _ctx.useSeconds ? (_openBlock(), _createElementBlock("span", _hoisted_2, ":")) : _createCommentVNode("v-if", true), _ctx.useSeconds ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: _normalizeClass(["var-time-picker-title__btn", _ctx.type === 'second' ? 'var-time-picker-title__btn--active' : null]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('title-btn'), [_ctx.type === 'second', _ctx.n('title-btn--active')])),
     onClick: _cache[2] || (_cache[2] = $event => _ctx.checkPanel('second'))
   }, _toDisplayString(_ctx.time.second), 3
   /* TEXT, CLASS */
-  )) : _createCommentVNode("v-if", true)]), _ctx.format === 'ampm' ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_createElementVNode("div", {
-    class: _normalizeClass(["var-time-picker-title__btn", _ctx.ampm === 'am' ? 'var-time-picker-title__btn--active' : null]),
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  ), _ctx.format === 'ampm' ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('title-ampm'))
+  }, [_createElementVNode("div", {
+    class: _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 */
   ), _createElementVNode("div", {
-    class: _normalizeClass(["var-time-picker-title__btn", _ctx.ampm === 'pm' ? 'var-time-picker-title__btn--active' : null]),
+    class: _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 */
+  )], 2
   /* CLASS */
-  )])) : _createCommentVNode("v-if", true)], 4
-  /* STYLE */
-  ), _createElementVNode("div", _hoisted_5, [_createElementVNode("div", {
-    class: "var-time-picker-clock__container",
+  )) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('body'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('clock-container')),
     onTouchstart: _cache[5] || (_cache[5] = function () {
       return _ctx.moveHand && _ctx.moveHand(...arguments);
     }),
@@ -78,7 +83,7 @@ export function render(_ctx, _cache) {
     }),
     ref: "container"
   }, [_createVNode(_Transition, {
-    name: "var-time-picker-panel-fade"
+    name: _ctx.n() + "-panel-fade"
   }, {
     default: _withCtx(() => [(_openBlock(), _createBlock(_component_clock, {
       key: _ctx.type,
@@ -103,9 +108,13 @@ export function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })], 544
-  /* HYDRATE_EVENTS, NEED_PATCH */
-  )])], 2
+  }, 8
+  /* PROPS */
+  , ["name"])], 34
+  /* CLASS, HYDRATE_EVENTS */
+  )], 2
+  /* CLASS */
+  )], 2
   /* CLASS */
   );
 }
@@ -153,10 +162,8 @@ export default 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);
+      call(props['onUpdate:modelValue'], newTime);
+      call(props.onChange, newTime);
     };
 
     var rad2deg = rad => {
@@ -376,6 +383,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       getRad,
       time,
       container,

package/es/time-picker/clock.js

@@ -3,27 +3,23 @@ import dayjs from 'dayjs/esm';
 import { hoursAmpm, hours24, minSec } from './props';
 import { notConvert, convertHour, getIsDisableMinute, getIsDisableSecond, getNumberTime } from './utils';
 import { toNumber } from '../utils/shared';
-import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createCommentVNode as _createCommentVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-time-picker-clock"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-time-picker-clock__inner",
-  ref: "inner"
-};
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('time-picker');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode } from "vue";
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
-    class: "var-time-picker-clock__hand",
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n('clock'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('clock-hand')),
     style: _normalizeStyle(_ctx.handStyle)
-  }, null, 4
-  /* STYLE */
+  }, null, 6
+  /* CLASS, STYLE */
   ), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.timeScales, (timeScale, index) => {
     return _openBlock(), _createElementBlock("div", {
-      class: _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: _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: _normalizeStyle(_ctx.getStyle(index, timeScale, false))
     }, _toDisplayString(timeScale), 7
@@ -31,9 +27,13 @@ export function render(_ctx, _cache) {
     );
   }), 128
   /* KEYED_FRAGMENT */
-  )), _ctx.format === '24hr' && _ctx.type === 'hour' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.hours24, (hour, index) => {
+  )), _ctx.format === '24hr' && _ctx.type === 'hour' ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('clock-inner')),
+    ref: "inner"
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.hours24, (hour, index) => {
     return _openBlock(), _createElementBlock("div", {
-      class: _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: _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: _normalizeStyle(_ctx.getStyle(index, hour, true))
     }, _toDisplayString(hour), 7
@@ -41,9 +41,11 @@ export function render(_ctx, _cache) {
     );
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 512
-  /* NEED_PATCH */
-  )) : _createCommentVNode("v-if", true)]);
+  ))], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -313,6 +315,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       hours24,
       timeScales,
       inner,

package/es/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/es/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/es/umdIndex.js

@@ -2,6 +2,8 @@ import ActionSheet, * as ActionSheetModule from './action-sheet'
 import AppBar, * as AppBarModule from './app-bar'
 import BackTop, * as BackTopModule from './back-top'
 import Badge, * as BadgeModule from './badge'
+import BottomNavigation, * as BottomNavigationModule from './bottom-navigation'
+import BottomNavigationItem, * as BottomNavigationItemModule from './bottom-navigation-item'
 import Button, * as ButtonModule from './button'
 import Card, * as CardModule from './card'
 import Cell, * as CellModule from './cell'
@@ -65,6 +67,8 @@ import './action-sheet/style'
 import './app-bar/style'
 import './back-top/style'
 import './badge/style'
+import './bottom-navigation/style'
+import './bottom-navigation-item/style'
 import './button/style'
 import './card/style'
 import './cell/style'
@@ -130,6 +134,8 @@ function install(app) {
   AppBar.install && app.use(AppBar)
   BackTop.install && app.use(BackTop)
   Badge.install && app.use(Badge)
+  BottomNavigation.install && app.use(BottomNavigation)
+  BottomNavigationItem.install && app.use(BottomNavigationItem)
   Button.install && app.use(Button)
   Card.install && app.use(Card)
   Cell.install && app.use(Cell)
@@ -196,6 +202,8 @@ export {
   AppBar,
   BackTop,
   Badge,
+  BottomNavigation,
+  BottomNavigationItem,
   Button,
   Card,
   Cell,
@@ -262,6 +270,8 @@ export default {
   AppBar,
   BackTop,
   Badge,
+  BottomNavigation,
+  BottomNavigationItem,
   Button,
   Card,
   Cell,

package/es/uploader/Uploader.js

@@ -10,27 +10,22 @@ import Ripple from '../ripple';
 import { defineComponent, nextTick, reactive, computed, watch, ref } from 'vue';
 import { props } from './props';
 import { isNumber, isHTMLSupportImage, isHTMLSupportVideo, toNumber, isString } from '../utils/shared';
-import { useValidation } from '../utils/components';
+import { call, useValidation, createNamespace } from '../utils/components';
 import { useForm } from '../form/provide';
+var {
+  n,
+  classes
+} = createNamespace('uploader');
 var fid = 0;
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, withDirectives as _withDirectives, renderSlot as _renderSlot, withCtx as _withCtx, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, renderSlot as _renderSlot, withCtx as _withCtx, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _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"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -40,49 +35,57 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.files, f => {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('file-list'))
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.files, f => {
     return _withDirectives((_openBlock(), _createElementBlock("div", {
-      class: _normalizeClass(["var-uploader__file var-elevation--2", [f.state === 'loading' ? 'var-uploader--loading' : null]]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('file'), 'var-elevation--2', [f.state === 'loading', _ctx.n('--loading')])),
       key: f.id,
       onClick: $event => _ctx.preview(f)
-    }, [_createElementVNode("div", _hoisted_4, _toDisplayString(f.name || f.url), 1
-    /* TEXT */
+    }, [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('file-name'))
+    }, _toDisplayString(f.name || f.url), 3
+    /* TEXT, CLASS */
     ), _ctx.removable ? (_openBlock(), _createElementBlock("div", {
       key: 0,
-      class: "var-uploader__file-close",
+      class: _normalizeClass(_ctx.n('file-close')),
       onClick: _withModifiers($event => _ctx.handleRemove(f), ["stop"])
     }, [_createVNode(_component_var_icon, {
-      class: "var-uploader__file-close-icon",
+      class: _normalizeClass(_ctx.n('file-close-icon')),
       "var-uploader-cover": "",
       name: "delete"
-    })], 8
+    }, null, 8
     /* PROPS */
-    , _hoisted_5)) : _createCommentVNode("v-if", true), f.cover ? (_openBlock(), _createElementBlock("img", {
+    , ["class"])], 10
+    /* CLASS, PROPS */
+    , _hoisted_2)) : _createCommentVNode("v-if", true), f.cover ? (_openBlock(), _createElementBlock("img", {
       key: 1,
-      class: "var-uploader__file-cover",
+      class: _normalizeClass(_ctx.n('file-cover')),
       style: _normalizeStyle({
         objectFit: f.fit
       }),
       src: f.cover,
       alt: f.name
-    }, null, 12
-    /* STYLE, PROPS */
-    , _hoisted_6)) : _createCommentVNode("v-if", true), _createElementVNode("div", {
-      class: _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)) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+      class: _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 ? _withDirectives((_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var--relative", [!_ctx.$slots.default ? 'var-uploader__action var-elevation--2' : null, _ctx.disabled || _ctx.formDisabled ? 'var-uploader--disabled' : null]])
+    class: _normalizeClass(_ctx.classes('var--relative', [!_ctx.$slots.default, _ctx.n('action') + " var-elevation--2"], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')]))
   }, [_createElementVNode("input", {
-    class: "var-uploader__action-input",
+    class: _normalizeClass(_ctx.n('action-input')),
     type: "file",
     multiple: _ctx.multiple,
     accept: _ctx.accept,
@@ -91,23 +94,27 @@ export function render(_ctx, _cache) {
     onChange: _cache[0] || (_cache[0] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
     })
-  }, null, 40
-  /* PROPS, HYDRATE_EVENTS */
-  , _hoisted_7), _renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_icon, {
-    class: "var-uploader__action-icon",
+  }, null, 42
+  /* CLASS, PROPS, HYDRATE_EVENTS */
+  , _hoisted_4), _renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_icon, {
+    class: _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
-  }]]) : _createCommentVNode("v-if", true)]), _createVNode(_component_var_form_details, {
+  }]]) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
     "maxlength-text": _ctx.maxlengthText
   }, null, 8
   /* PROPS */
   , ["error-message", "maxlength-text"]), _createVNode(_component_var_popup, {
-    class: "var-uploader__preview",
+    class: _normalizeClass(_ctx.n('preview')),
     "var-uploader-cover": "",
     position: "center",
     show: _ctx.showPreview,
@@ -119,7 +126,7 @@ export function render(_ctx, _cache) {
 
       return [_ctx.currentPreview && _ctx.isHTMLSupportVideo((_ctx$currentPreview = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview.url) ? (_openBlock(), _createElementBlock("video", {
         key: 0,
-        class: "var-uploader__preview-video",
+        class: _normalizeClass(_ctx.n('preview-video')),
         playsinline: "true",
         "webkit-playsinline": "true",
         "x5-playsinline": "true",
@@ -127,16 +134,18 @@ export 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)) : _createCommentVNode("v-if", true)];
+      }, null, 10
+      /* CLASS, PROPS */
+      , _hoisted_5)) : _createCommentVNode("v-if", true)];
     }),
     _: 1
     /* STABLE */
 
   }, 8
   /* PROPS */
-  , ["show"])]);
+  , ["class", "show"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -265,8 +274,6 @@ export default defineComponent({
 
     var handleChange = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(function* (event) {
-        var _props$onUpdateModel;
-
         var {
           maxsize,
           maxlength,
@@ -284,7 +291,7 @@ export default defineComponent({
         var getValidSizeVarFile = varFiles => {
           return varFiles.filter(varFile => {
             if (varFile.file.size > toNumber(maxsize)) {
-              onOversize == null ? void 0 : onOversize(reactive(varFile));
+              call(onOversize, reactive(varFile));
               return false;
             }
 
@@ -316,9 +323,9 @@ export default defineComponent({
           } = _ref3;
           return varFile;
         });
-        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, [...modelValue, ...validVarFiles]);
+        call(props['onUpdate:modelValue'], [...modelValue, ...validVarFiles]);
         event.target.value = '';
-        validVarFiles.forEach(varFile => onAfterRead == null ? void 0 : onAfterRead(reactive(varFile)));
+        validVarFiles.forEach(varFile => call(onAfterRead, reactive(varFile)));
       });
 
       return function handleChange(_x) {
@@ -328,8 +335,6 @@ export default defineComponent({
 
     var handleRemove = /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator(function* (removedVarFile) {
-        var _props$onUpdateModel2;
-
         var {
           disabled,
           readonly,
@@ -347,9 +352,9 @@ export default defineComponent({
         }
 
         var expectedFiles = modelValue.filter(varFile => varFile !== removedVarFile);
-        onRemove == null ? void 0 : onRemove(removedVarFile);
+        call(onRemove, removedVarFile);
         validateWithTrigger('onRemove');
-        (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, expectedFiles);
+        call(props['onUpdate:modelValue'], expectedFiles);
       });
 
       return function handleRemove(_x2) {
@@ -389,10 +394,8 @@ export default defineComponent({
 
 
     var reset = () => {
-      var _props$onUpdateModel3;
-
       callReset = true;
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, []);
+      call(props['onUpdate:modelValue'], []);
       resetValidation();
     };
 
@@ -401,7 +404,7 @@ export default defineComponent({
       resetValidation,
       reset
     };
-    bindForm == null ? void 0 : bindForm(uploaderProvider);
+    call(bindForm, uploaderProvider);
     watch(() => props.modelValue, () => {
       !callReset && validateWithTrigger('onChange');
       callReset = false;
@@ -409,6 +412,8 @@ export default defineComponent({
       deep: true
     });
     return {
+      n,
+      classes,
       files,
       showPreview,
       currentPreview,