@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/highlight/attributes.json

@@ -107,6 +107,54 @@
     "type": "string",
     "description": "自定义徽标中图标的内容（优先级高于 `value`） 默认值：-"
   },
+  "var-bottom-navigation/v-model": {
+    "type": "number | string",
+    "description": "选中标签的名称或者索引值 默认值：0"
+  },
+  "var-bottom-navigation/fixed": {
+    "type": "boolean",
+    "description": "是否固定在底部 默认值：false"
+  },
+  "var-bottom-navigation/border": {
+    "type": "boolean",
+    "description": "是否显示外边框 默认值：false"
+  },
+  "var-bottom-navigation/z-index": {
+    "type": "number | string",
+    "description": "元素 z-index 默认值：1"
+  },
+  "var-bottom-navigation/active-color": {
+    "type": "string",
+    "description": "选中标签的颜色 默认值：-"
+  },
+  "var-bottom-navigation/inactive-color": {
+    "type": "string",
+    "description": "未选中标签的颜色 默认值：-"
+  },
+  "var-bottom-navigation/fab-props": {
+    "type": "ButtonProps",
+    "description": "悬浮按钮属性 默认值：{type: \"primary\"}"
+  },
+  "var-bottom-navigation-item/name": {
+    "type": "string",
+    "description": "标签名称，作为匹配的标识符 默认值：-"
+  },
+  "var-bottom-navigation-item/icon": {
+    "type": "string",
+    "description": "图标名称，等同于 Icon 组件的 [name 属性](/#/zh-CN/icon) 默认值：-"
+  },
+  "var-bottom-navigation-item/label": {
+    "type": "string",
+    "description": "标签文字内容 默认值：-"
+  },
+  "var-bottom-navigation-item/namespace": {
+    "type": "string",
+    "description": "图标的命名空间, 可扩展自定义图标库，等同于 Icon 组件的 [namespace 属性](/#/zh-CN/icon) 默认值：var-icon"
+  },
+  "var-bottom-navigation-item/badge": {
+    "type": "boolean | BadgeProps",
+    "description": "图标右上角徽标 默认值：false"
+  },
   "var-button/type": {
     "type": "string",
     "description": "类型，可选值为 `default` `primary` `info` `success` `warning` `danger` 默认值：default"

package/highlight/tags.json

@@ -42,6 +42,26 @@
       "icon"
     ]
   },
+  "var-bottom-navigation": {
+    "attributes": [
+      "v-model",
+      "fixed",
+      "border",
+      "z-index",
+      "active-color",
+      "inactive-color",
+      "fab-props"
+    ]
+  },
+  "var-bottom-navigation-item": {
+    "attributes": [
+      "name",
+      "icon",
+      "label",
+      "namespace",
+      "badge"
+    ]
+  },
   "var-button": {
     "attributes": [
       "type",

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.26.7",
+  "version": "1.26.9",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -339,6 +339,160 @@
             }
           ]
         },
+        {
+          "name": "var-bottom-navigation",
+          "attributes": [
+            {
+              "name": "v-model",
+              "description": "选中标签的名称或者索引值",
+              "default": "0",
+              "value": {
+                "type": "number | string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "fixed",
+              "description": "是否固定在底部",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "border",
+              "description": "是否显示外边框",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "z-index",
+              "description": "元素 z-index",
+              "default": "1",
+              "value": {
+                "type": "number | string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "active-color",
+              "description": "选中标签的颜色",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "inactive-color",
+              "description": "未选中标签的颜色",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "fab-props",
+              "description": "悬浮按钮属性",
+              "default": "{type: \"primary\"}",
+              "value": {
+                "type": "ButtonProps",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "before-change",
+              "description": "切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise"
+            },
+            {
+              "name": "change",
+              "description": "切换标签时触发"
+            },
+            {
+              "name": "fab-click",
+              "description": "悬浮按钮点击时触发"
+            }
+          ],
+          "slots": [
+            {
+              "name": "fab",
+              "description": "支持在组件中心插入一个自定义的 fab 按钮"
+            }
+          ]
+        },
+        {
+          "name": "var-bottom-navigation-item",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "标签名称，作为匹配的标识符",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "icon",
+              "description": "图标名称，等同于 Icon 组件的 [name 属性](/#/zh-CN/icon)",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "label",
+              "description": "标签文字内容",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "namespace",
+              "description": "图标的命名空间, 可扩展自定义图标库，等同于 Icon 组件的 [namespace 属性](/#/zh-CN/icon)",
+              "default": "var-icon",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "badge",
+              "description": "图标右上角徽标",
+              "default": "false",
+              "value": {
+                "type": "boolean | BadgeProps",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "点击时触发"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "自定义标签文字内容，会覆盖 `label` 的内容"
+            },
+            {
+              "name": "icon",
+              "description": "自定义图标"
+            }
+          ]
+        },
         {
           "name": "var-button",
           "attributes": [

package/lib/action-sheet/ActionSheet.js

@@ -18,17 +18,18 @@ var _shared = require("../utils/shared");
 
 var _locale = require("../locale");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('action-sheet');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-action-sheet__title"
-};
-var _hoisted_2 = ["onClick"];
-var _hoisted_3 = {
-  class: "var-action-sheet__action-name"
-};
+var _hoisted_1 = ["onClick"];
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -38,7 +39,7 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_popup, (0, _vue.mergeProps)({
-    class: "var-action-sheet__popup-radius",
+    class: _ctx.n('popup-radius'),
     position: "bottom",
     overlay: _ctx.overlay,
     "overlay-class": _ctx.overlayClass,
@@ -48,11 +49,7 @@ function render(_ctx, _cache) {
     teleport: _ctx.teleport,
     show: _ctx.popupShow
   }, {
-    'onUpdate:show': value => {
-      var _ctx$$props$onUpdate, _ctx$$props;
-
-      return (_ctx$$props$onUpdate = (_ctx$$props = _ctx.$props)['onUpdate:show']) == null ? void 0 : _ctx$$props$onUpdate.call(_ctx$$props, value);
-    }
+    'onUpdate:show': _ctx.handlePopupUpdateShow
   }, {
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
@@ -61,12 +58,14 @@ function render(_ctx, _cache) {
     onRouteChange: _ctx.onRouteChange
   }), {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: "var-action-sheet var--box"
-    }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", _hoisted_1, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 1
-    /* TEXT */
+      class: _ctx.classes(_ctx.n(), 'var--box')
+    }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('title'))
+    }, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 3
+    /* TEXT, CLASS */
     )]), (0, _vue.renderSlot)(_ctx.$slots, "actions", {}, () => [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.actions, action => {
       return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-        class: (0, _vue.normalizeClass)(["var-action-sheet__action-item", [action.className, action.disabled ? 'var-action-sheet--disabled' : null]]),
+        class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('action-item'), action.className, [action.disabled, _ctx.n('--disabled')])),
         key: action.name,
         style: (0, _vue.normalizeStyle)({
           color: action.color
@@ -74,17 +73,19 @@ function render(_ctx, _cache) {
         onClick: $event => _ctx.handleSelect(action)
       }, [action.icon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
         key: 0,
-        class: "var-action-sheet__action-icon",
+        class: (0, _vue.normalizeClass)(_ctx.n('action-icon')),
         "var-action-sheet-cover": "",
         name: action.icon,
         size: action.iconSize
       }, null, 8
       /* PROPS */
-      , ["name", "size"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_3, (0, _vue.toDisplayString)(action.name), 1
-      /* TEXT */
+      , ["class", "name", "size"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+        class: (0, _vue.normalizeClass)(_ctx.n('action-name'))
+      }, (0, _vue.toDisplayString)(action.name), 3
+      /* TEXT, CLASS */
       )], 14
       /* CLASS, STYLE, PROPS */
-      , _hoisted_2)), [[_directive_ripple, {
+      , _hoisted_1)), [[_directive_ripple, {
         disabled: action.disabled
       }]]);
     }), 128
@@ -97,7 +98,7 @@ function render(_ctx, _cache) {
 
   }, 16
   /* FULL_PROPS */
-  , ["overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  , ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -117,8 +118,6 @@ var _default = (0, _vue.defineComponent)({
     var popupShow = (0, _vue.ref)(false);
 
     var handleSelect = action => {
-      var _props$onUpdateShow;
-
       if (action.disabled) {
         return;
       }
@@ -127,16 +126,21 @@ var _default = (0, _vue.defineComponent)({
         closeOnClickAction,
         onSelect
       } = props;
-      onSelect == null ? void 0 : onSelect(action);
-      closeOnClickAction && ((_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false));
+      (0, _components.call)(onSelect, action);
+      closeOnClickAction && (0, _components.call)(props['onUpdate:show'], false);
     };
 
+    var handlePopupUpdateShow = value => (0, _components.call)(props['onUpdate:show'], value);
+
     (0, _vue.watch)(() => props.show, newValue => {
       popupShow.value = newValue;
     }, {
       immediate: true
     });
     return {
+      n,
+      classes,
+      handlePopupUpdateShow,
       popupShow,
       pack: _locale.pack,
       dt: _shared.dt,

package/lib/app-bar/AppBar.js

@@ -8,51 +8,56 @@ var _vue = require("vue");
 
 var _props = require("./props");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+var _components = require("../utils/components");
 
-var _hoisted_1 = {
-  class: "var-app-bar__left"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-app-bar__title"
-};
-var _hoisted_3 = {
-  class: "var-app-bar__right"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('app-bar');
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-app-bar", {
-      'var-elevation--3': _ctx.elevation
-    }]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--3'])),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.color,
       color: _ctx.textColor
     })
-  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "left"), _ctx.titlePosition === 'left' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('left'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "left"), _ctx.titlePosition === 'left' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: "var-app-bar__title",
+    class: (0, _vue.normalizeClass)(_ctx.n('title')),
     style: (0, _vue.normalizeStyle)({
       paddingLeft: _ctx.paddingLeft
     })
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
   /* TEXT */
-  )])], 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.titlePosition === 'center' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
+  )])], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  ), _ctx.titlePosition === 'center' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('title'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
   /* TEXT */
-  )])])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_3, [_ctx.titlePosition === 'right' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  )])], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('right'))
+  }, [_ctx.titlePosition === 'right' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: "var-app-bar__title",
+    class: (0, _vue.normalizeClass)(_ctx.n('title')),
     style: (0, _vue.normalizeStyle)({
       paddingRight: _ctx.paddingRight
     })
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
   /* TEXT */
-  )])], 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "right")])], 6
+  )])], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "right")], 2
+  /* CLASS */
+  )], 6
   /* CLASS, STYLE */
   );
 }
@@ -77,6 +82,8 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.onMounted)(computePadding);
     (0, _vue.onUpdated)(computePadding);
     return {
+      n,
+      classes,
       paddingLeft,
       paddingRight
     };

package/lib/back-top/BackTop.js

@@ -16,8 +16,15 @@ var _shared = require("../utils/shared");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('back-top');
+
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
@@ -27,7 +34,7 @@ function render(_ctx, _cache) {
     to: "body",
     disabled: _ctx.disabled
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.show, _ctx.n('--active')])),
     ref: "backTopEl",
     style: (0, _vue.normalizeStyle)({
       right: _ctx.toSizeUnit(_ctx.right),
@@ -70,7 +77,7 @@ var _default = (0, _vue.defineComponent)({
     var target;
 
     var click = event => {
-      props.onClick == null ? void 0 : props.onClick(event);
+      (0, _components.call)(props.onClick, event);
       var left = (0, _elements.getScrollLeft)(target);
       (0, _elements.scrollTo)(target, {
         left,
@@ -117,6 +124,8 @@ var _default = (0, _vue.defineComponent)({
       show,
       backTopEl,
       toSizeUnit: _elements.toSizeUnit,
+      n,
+      classes,
       click
     };
   }

package/lib/badge/Badge.js

@@ -12,25 +12,31 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('badge');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = {
-  class: "var-badge var--box"
-};
-var _hoisted_2 = {
   key: 1
 };
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createVNode)(_vue.Transition, {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box'))
+  }, [(0, _vue.createVNode)(_vue.Transition, {
     name: "var-badge-fade"
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("span", (0, _vue.mergeProps)(_ctx.$attrs, {
-      class: ["var-badge__content", _ctx.contentClass],
+      class: _ctx.classes(_ctx.n('content'), ..._ctx.contentClass),
       style: {
         background: _ctx.color
       }
@@ -40,7 +46,7 @@ function render(_ctx, _cache) {
       size: "10px"
     }, null, 8
     /* PROPS */
-    , ["name"])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.values), 1
+    , ["name"])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_1, (0, _vue.toDisplayString)(_ctx.values), 1
     /* TEXT */
     ))], 16
     /* FULL_PROPS */
@@ -48,7 +54,9 @@ function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  }), (0, _vue.renderSlot)(_ctx.$slots, "default")]);
+  }), (0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -71,11 +79,11 @@ var _default = (0, _vue.defineComponent)({
         dot,
         icon
       } = props;
-      var positionBasic = slots.default && "var-badge__position var-badge--" + position;
-      var dotClass = dot && 'var-badge__dot';
+      var positionBasic = slots.default && n('position') + " " + n("--" + position);
+      var dotClass = dot && n('dot');
       var positionClass = getPositionClass();
-      var iconClass = icon && 'var-badge__icon';
-      return ["var-badge--" + type, positionBasic, dotClass, positionClass, iconClass];
+      var iconClass = icon ? n('icon') : null;
+      return [n("--" + type), positionBasic, dotClass, positionClass, iconClass];
     });
     var values = (0, _vue.computed)(() => {
       var {
@@ -93,11 +101,13 @@ var _default = (0, _vue.defineComponent)({
         position,
         dot
       } = props;
-      if (dot && position.includes('right')) return 'var-badge__dot--right';
-      if (dot && position.includes('left')) return 'var-badge__dot--left';
+      if (dot && position.includes('right')) return n('dot--right');
+      if (dot && position.includes('left')) return n('dot--left');
     };
 
     return {
+      n,
+      classes,
       values,
       contentClass
     };