@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

package/es/form-details/FormDetails.js

@@ -1,35 +1,40 @@
 import { defineComponent } from 'vue';
+import { createNamespace } from '../utils/components';
 import { props } from './props';
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  key: 0,
-  class: "var-form-details"
-};
-var _hoisted_2 = {
-  class: "var-form-details__message"
-};
-var _hoisted_3 = {
-  class: "var-form-details__length"
-};
+var {
+  n
+} = createNamespace('form-details');
+import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_Transition, {
-    name: "var-form-details"
+    name: _ctx.n()
   }, {
-    default: _withCtx(() => [_ctx.errorMessage || _ctx.maxlengthText ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, _toDisplayString(_ctx.errorMessage), 1
-    /* TEXT */
-    ), _createElementVNode("div", _hoisted_3, _toDisplayString(_ctx.maxlengthText), 1
-    /* TEXT */
-    )])) : _createCommentVNode("v-if", true)]),
+    default: _withCtx(() => [_ctx.errorMessage || _ctx.maxlengthText ? (_openBlock(), _createElementBlock("div", {
+      key: 0,
+      class: _normalizeClass(_ctx.n())
+    }, [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('message'))
+    }, _toDisplayString(_ctx.errorMessage), 3
+    /* TEXT, CLASS */
+    ), _createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('length'))
+    }, _toDisplayString(_ctx.maxlengthText), 3
+    /* TEXT, CLASS */
+    )], 2
+    /* CLASS */
+    )) : _createCommentVNode("v-if", true)]),
     _: 1
     /* STABLE */
 
-  });
+  }, 8
+  /* PROPS */
+  , ["name"]);
 }
 export default defineComponent({
   render,
   name: 'VarFormDetails',
-  props
+  props,
+  setup: () => ({
+    n
+  })
 });

package/es/icon/Icon.js

@@ -6,10 +6,15 @@ import { defineComponent, watch, ref, nextTick } from 'vue';
 import { isURL, toNumber } from '../utils/shared';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('icon');
 import { resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.isURL(_ctx.name) ? 'img' : 'i'), {
-    class: _normalizeClass(["var-icon", [_ctx.namespace + "--set", _ctx.isURL(_ctx.name) ? 'var-icon__image' : _ctx.namespace + "-" + _ctx.nextName, _ctx.shrinking ? 'var-icon--shrinking' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.namespace + "--set", [_ctx.isURL(_ctx.name), _ctx.n('image'), _ctx.namespace + "-" + _ctx.nextName], [_ctx.shrinking, _ctx.n('--shrinking')])),
     style: _normalizeStyle({
       color: _ctx.color,
       transition: "transform " + _ctx.toNumber(_ctx.transition) + "ms",
@@ -60,6 +65,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       nextName,
       shrinking,
       isURL,

package/es/image/Image.js

@@ -3,7 +3,12 @@ import Lazy from '../lazy';
 import { defineComponent } from 'vue';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
-import { normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('image');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -15,7 +20,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-image var--box", [!_ctx.block ? 'var--inline-block' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [!_ctx.block, 'var--inline-block'])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),
@@ -23,7 +28,7 @@ export function render(_ctx, _cache) {
     })
   }, [_ctx.lazy ? _withDirectives((_openBlock(), _createElementBlock("img", {
     key: 0,
-    class: "var-image__image",
+    class: _normalizeClass(_ctx.n('image')),
     alt: _ctx.alt,
     "lazy-error": _ctx.error,
     "lazy-loading": _ctx.loading,
@@ -39,11 +44,11 @@ export function render(_ctx, _cache) {
     onClick: _cache[2] || (_cache[2] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_1)), [[_directive_lazy, _ctx.src]]) : (_openBlock(), _createElementBlock("img", {
     key: 1,
-    class: "var-image__image",
+    class: _normalizeClass(_ctx.n('image')),
     alt: _ctx.alt,
     style: _normalizeStyle({
       objectFit: _ctx.fit
@@ -58,8 +63,8 @@ export function render(_ctx, _cache) {
     onClick: _cache[5] || (_cache[5] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_2))], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple, {
@@ -85,10 +90,10 @@ export default defineComponent({
       } = props;
 
       if (lazy) {
-        el._lazy.state === 'success' && (onLoad == null ? void 0 : onLoad(e));
-        el._lazy.state === 'error' && (onError == null ? void 0 : onError(e));
+        el._lazy.state === 'success' && call(onLoad, e);
+        el._lazy.state === 'error' && call(onError, e);
       } else {
-        onLoad == null ? void 0 : onLoad(e);
+        call(onLoad, e);
       }
     };
 
@@ -97,10 +102,12 @@ export default defineComponent({
         lazy,
         onError
       } = props;
-      !lazy && (onError == null ? void 0 : onError(e));
+      !lazy && call(onError, e);
     };
 
     return {
+      n,
+      classes,
       toSizeUnit,
       handleLoad,
       handleError

package/es/image-preview/ImagePreview.js

@@ -5,22 +5,20 @@ import VarPopup from '../popup';
 import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
+import { call, createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('image-preview');
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
 var TAP_DELAY = 350;
 var ANIMATION_DURATION = 200;
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = ["src", "alt"];
-var _hoisted_2 = {
-  key: 0,
-  class: "var-image-preview__indicators"
-};
-var _hoisted_3 = {
-  class: "var-image-preview__extra"
-};
 export function render(_ctx, _cache) {
   var _component_var_swipe_item = _resolveComponent("var-swipe-item");
 
@@ -31,7 +29,7 @@ export function render(_ctx, _cache) {
   var _component_var_popup = _resolveComponent("var-popup");
 
   return _openBlock(), _createBlock(_component_var_popup, {
-    class: "var-image-preview__popup",
+    class: _normalizeClass(_ctx.n('popup')),
     "var-image-preview-cover": "",
     transition: "var-fade",
     show: _ctx.popupShow,
@@ -46,7 +44,7 @@ export function render(_ctx, _cache) {
     onRouteChange: _ctx.onRouteChange
   }, {
     default: _withCtx(() => [_createVNode(_component_var_swipe, _mergeProps({
-      class: "var-image-preview__swipe",
+      class: _ctx.n('swipe'),
       "var-image-preview-cover": "",
       touchable: _ctx.canSwipe,
       indicator: _ctx.indicator && _ctx.images.length > 1,
@@ -56,12 +54,12 @@ export function render(_ctx, _cache) {
     }, _ctx.$attrs), {
       default: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.images, image => {
         return _openBlock(), _createBlock(_component_var_swipe_item, {
-          class: "var-image-preview__swipe-item",
+          class: _normalizeClass(_ctx.n('swipe-item')),
           "var-image-preview-cover": "",
           key: image
         }, {
           default: _withCtx(() => [_createElementVNode("div", {
-            class: "var-image-preview__zoom-container",
+            class: _normalizeClass(_ctx.n('zoom-container')),
             style: _normalizeStyle({
               transform: "scale(" + _ctx.scale + ") translate(" + _ctx.translateX + "px, " + _ctx.translateY + "px)",
               transitionTimingFunction: _ctx.transitionTimingFunction,
@@ -77,20 +75,20 @@ export function render(_ctx, _cache) {
               return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
             })
           }, [_createElementVNode("img", {
-            class: "var-image-preview__image",
+            class: _normalizeClass(_ctx.n('image')),
             src: image,
             alt: image
-          }, null, 8
-          /* PROPS */
-          , _hoisted_1)], 36
-          /* STYLE, HYDRATE_EVENTS */
+          }, null, 10
+          /* CLASS, PROPS */
+          , _hoisted_1)], 38
+          /* CLASS, STYLE, HYDRATE_EVENTS */
           )]),
           _: 2
           /* DYNAMIC */
 
-        }, 1024
-        /* DYNAMIC_SLOTS */
-        );
+        }, 1032
+        /* PROPS, DYNAMIC_SLOTS */
+        , ["class"]);
       }), 128
       /* KEYED_FRAGMENT */
       ))]),
@@ -102,8 +100,11 @@ export function render(_ctx, _cache) {
         return [_renderSlot(_ctx.$slots, "indicator", {
           index: index,
           length: length
-        }, () => [_ctx.indicator && _ctx.images.length > 1 ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(index + 1) + " / " + _toDisplayString(length), 1
-        /* TEXT */
+        }, () => [_ctx.indicator && _ctx.images.length > 1 ? (_openBlock(), _createElementBlock("div", {
+          key: 0,
+          class: _normalizeClass(_ctx.n('indicators'))
+        }, _toDisplayString(index + 1) + " / " + _toDisplayString(length), 3
+        /* TEXT, CLASS */
         )) : _createCommentVNode("v-if", true)])];
       }),
       _: 3
@@ -111,21 +112,25 @@ export function render(_ctx, _cache) {
 
     }, 16
     /* FULL_PROPS */
-    , ["touchable", "indicator", "initial-index", "loop", "onChange"]), _renderSlot(_ctx.$slots, "close-icon", {}, () => [_ctx.closeable ? (_openBlock(), _createBlock(_component_var_icon, {
+    , ["class", "touchable", "indicator", "initial-index", "loop", "onChange"]), _renderSlot(_ctx.$slots, "close-icon", {}, () => [_ctx.closeable ? (_openBlock(), _createBlock(_component_var_icon, {
       key: 0,
-      class: "var-image-preview__close-icon",
+      class: _normalizeClass(_ctx.n('close-icon')),
       name: "close-circle",
       "var-image-preview-cover": "",
       onClick: _ctx.close
     }, null, 8
     /* PROPS */
-    , ["onClick"])) : _createCommentVNode("v-if", true)]), _createElementVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "extra")])]),
+    , ["class", "onClick"])) : _createCommentVNode("v-if", true)]), _createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('extra'))
+    }, [_renderSlot(_ctx.$slots, "extra")], 2
+    /* CLASS */
+    )]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  , ["class", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
 export default defineComponent({
   render,
@@ -325,19 +330,13 @@ export default defineComponent({
     };
 
     var close = () => {
-      var _props$onUpdateShow2;
-
       if (scale.value > 1) {
         zoomOut();
-        setTimeout(() => {
-          var _props$onUpdateShow;
-
-          return (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
-        }, ANIMATION_DURATION);
+        setTimeout(() => call(props['onUpdate:show'], false), ANIMATION_DURATION);
         return;
       }
 
-      (_props$onUpdateShow2 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow2.call(props, false);
+      call(props['onUpdate:show'], false);
     };
 
     watch(() => props.show, newValue => {
@@ -346,6 +345,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       initialIndex,
       popupShow,
       scale,

package/es/index-anchor/IndexAnchor.js

@@ -2,6 +2,11 @@ import VarSticky from '../sticky';
 import { computed, defineComponent, ref, Transition } from 'vue';
 import { useIndexBar } from './provide';
 import { props } from './props';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('index-anchor');
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
@@ -12,7 +17,7 @@ export function render(_ctx, _cache) {
     ref: "anchorEl"
   }, {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: "var-index-anchor"
+      class: _ctx.n()
     }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.name), 1
     /* TEXT */
     )])], 16
@@ -70,6 +75,8 @@ export default defineComponent({
     };
     bindIndexBar(indexAnchorProvider);
     return {
+      n,
+      classes,
       name,
       anchorEl,
       active,

package/es/index-bar/IndexBar.js

@@ -7,18 +7,22 @@ import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared';
 import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
 import { useIndexAnchors } from './provide';
 import { props } from './props';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('index-bar');
 import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-index-bar",
-  ref: "barEl"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default"), _createElementVNode("ul", {
-    class: "var-index-bar__anchor-list",
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n()),
+    ref: "barEl"
+  }, [_renderSlot(_ctx.$slots, "default"), _createElementVNode("ul", {
+    class: _normalizeClass(_ctx.n('anchor-list')),
     style: _normalizeStyle({
       zIndex: _ctx.toNumber(_ctx.zIndex) + 2,
       display: _ctx.hideList ? 'none' : 'block'
@@ -26,22 +30,20 @@ export function render(_ctx, _cache) {
   }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.anchorNameList, anchorName => {
     return _openBlock(), _createElementBlock("li", {
       key: anchorName,
-      class: _normalizeClass(["var-index-bar__anchor-item", {
-        'var-index-bar__anchor-item--active': _ctx.active === anchorName
-      }]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('anchor-item'), [_ctx.active === anchorName, _ctx.n('anchor-item--active')])),
       style: _normalizeStyle({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
       onClick: $event => _ctx.anchorClick(anchorName)
     }, _toDisplayString(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 4
-  /* STYLE */
-  )], 512
-  /* NEED_PATCH */
+  ))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
   );
 }
 export default defineComponent({
@@ -77,7 +79,7 @@ export default defineComponent({
       var anchorName = isPlainObject(anchor) ? anchor.name.value : anchor;
       if (anchorName === active.value || anchorName === undefined) return;
       active.value = anchorName;
-      props.onChange == null ? void 0 : props.onChange(anchorName);
+      call(props.onChange, anchorName);
     };
 
     var handleScroll = () => {
@@ -107,7 +109,7 @@ export default defineComponent({
         var {
           offsetTop
         } = barEl.value;
-        if (manualCall) props.onClick == null ? void 0 : props.onClick(anchorName);
+        if (manualCall) call(props.onClick, anchorName);
         if (anchorName === active.value) return;
         var indexAnchor = indexAnchors.find(_ref2 => {
           var {
@@ -158,11 +160,11 @@ export default defineComponent({
       scroller.value.addEventListener('scroll', handleScroll);
     }));
     onBeforeUnmount(() => {
-      var _scroller$value;
-
-      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.removeEventListener('scroll', handleScroll);
+      call(scroller.value.removeEventListener, 'scroll', handleScroll);
     });
     return {
+      n,
+      classes,
       barEl,
       active,
       zIndex,

package/es/index.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 @@ export const _ActionSheetComponent = ActionSheetModule._ActionSheetComponent ||
 export const _AppBarComponent = AppBarModule._AppBarComponent || {}
 export const _BackTopComponent = BackTopModule._BackTopComponent || {}
 export const _BadgeComponent = BadgeModule._BadgeComponent || {}
+export const _BottomNavigationComponent = BottomNavigationModule._BottomNavigationComponent || {}
+export const _BottomNavigationItemComponent = BottomNavigationItemModule._BottomNavigationItemComponent || {}
 export const _ButtonComponent = ButtonModule._ButtonComponent || {}
 export const _CardComponent = CardModule._CardComponent || {}
 export const _CellComponent = CellModule._CellComponent || {}
@@ -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,