@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.26.9",
+  "version": "1.27.0-alpha.1649265140569",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -39,13 +39,13 @@
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
-    "@varlet/icons": "1.26.9",
+    "@varlet/icons": "1.27.0-alpha.1649265140569",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.26.9",
-    "@varlet/touch-emulator": "1.26.9",
+    "@varlet/cli": "1.27.0-alpha.1649265140569",
+    "@varlet/touch-emulator": "1.27.0-alpha.1649265140569",
     "@vue/test-utils": "2.0.0-rc.6",
     "@vue/runtime-core": "3.2.25",
     "typescript": "^4.4.4",
@@ -69,5 +69,5 @@
     "test:watch": "varlet-cli jest -w",
     "test:watchAll": "varlet-cli jest -wa"
   },
-  "readme": "<div align=\"center\">\n  <a href=\"https://varlet.gitee.io/varlet-ui/\">\n    <img src=\"https://varlet.gitee.io/varlet-ui/logo.svg\" width=\"150\">\n  </a>\n  <h1>VARLET</h1>\n  <p>基于 Vue3 的 Material design 风格移动端组件库</p>\n  <p>\n    <a href=\"https://varlet.gitee.io/varlet-ui/\">开发文档</a> | <a href=\"https://github.com/varletjs/varlet/blob/dev/README.en-US.md\">English</a>\n  </p>\n  <p>\n    <img src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\">\n    <img src=\"https://img.shields.io/github/stars/varletjs/varlet\" alt=\"stars\">\n    <img src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n    <img src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"licence\">\n    <img src=\"https://img.shields.io/codecov/c/github/varletjs/varlet\" alt=\"coverage\">\n    <img src=\"https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip\" alt=\"gzip\" />\n    <img src=\"https://github.com/varletjs/varlet/workflows/CI/badge.svg\" alt=\"ci\">\n  </p>\n</div>\n\n---\n\n### 介绍\n\nVarlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。\n\n### 特性\n- 🚀 提供50个高质量通用组件 \n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm，vscode 组件属性高亮\n- 💪 支持 SSR\n- 💡 支持 Typescript \n- 💪 确保90%以上单元测试覆盖率，提供稳定性保证\n- 🛠️ 支持暗黑模式\n\n### 安装\n\n### CDN\n`varlet.js` 包含组件库的所有样式和逻辑，引入即可。\n\n```html\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"></script>\n<script>\n  const app = Vue.createApp({\n    template: '<var-button>按钮</var-button>'\n  })\n  app.use(Varlet).mount('#app')\n</script>\n```\n\n### Webpack / Vite\n```shell\n# 通过 npm 或 yarn 或 pnpm 安装\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style.js'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=varletjs/varlet\" />\n</a>\n\n"
+  "readme": "<div align=\"center\">\n  <a href=\"https://varlet.gitee.io/varlet-ui/\">\n    <img src=\"https://varlet.gitee.io/varlet-ui/logo.svg\" width=\"150\">\n  </a>\n  <h1>VARLET</h1>\n  <p>基于 Vue3 的 Material design 风格移动端组件库</p>\n  <p>\n    <a href=\"https://varlet.gitee.io/varlet-ui/\">开发文档</a> | <a href=\"https://github.com/varletjs/varlet/blob/dev/README.en-US.md\">English</a>\n  </p>\n  <p>\n    <img src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\">\n    <img src=\"https://img.shields.io/github/stars/varletjs/varlet\" alt=\"stars\">\n    <img src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n    <img src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"licence\">\n    <img src=\"https://img.shields.io/codecov/c/github/varletjs/varlet\" alt=\"coverage\">\n    <img src=\"https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip\" alt=\"gzip\" />\n    <img src=\"https://github.com/varletjs/varlet/workflows/CI/badge.svg\" alt=\"ci\">\n  </p>\n</div>\n\n---\n\n### 介绍\n\nVarlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。\n\n### 特性\n- 🚀 提供50+个高质量通用组件 \n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm，vscode 组件属性高亮\n- 💪 支持 SSR\n- 💡 支持 Typescript \n- 💪 确保90%以上单元测试覆盖率，提供稳定性保证\n- 🛠️ 支持暗黑模式\n\n### 安装\n\n### CDN\n`varlet.js` 包含组件库的所有样式和逻辑，引入即可。\n\n```html\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"></script>\n<script>\n  const app = Vue.createApp({\n    template: '<var-button>按钮</var-button>'\n  })\n  app.use(Varlet).mount('#app')\n</script>\n```\n\n### Webpack / Vite\n```shell\n# 通过 npm 或 yarn 或 pnpm 安装\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style.js'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=varletjs/varlet\" />\n</a>\n\n"
 }

package/types/bottomNavigation.d.ts

@@ -0,0 +1,19 @@
+import { VarComponent } from './varComponent'
+
+export interface BottomNavigationProps {
+  active?: number | string
+  fixed?: boolean
+  border?: boolean
+  zIndex?: number | string
+  activeColor?: string
+  inactiveColor?: string
+  onChange?: (active: string | number) => void
+  'onUpdate:active'?: (active: string | number) => void
+  onBeforeChange?: (active: string | number) => boolean | Promise<any>
+}
+
+export class BottomNavigation extends VarComponent {
+  $props: BottomNavigationProps
+}
+
+export class _BottomNavigationComponent extends BottomNavigation {}

package/types/bottomNavigationItem.d.ts

@@ -0,0 +1,16 @@
+import { VarComponent } from './varComponent'
+
+export interface BottomNavigationItemProps {
+  name?: string
+  icon?: string
+  label?: string
+  namespace?: string
+  badge?: boolean
+  onClick?: (active: string | number) => void
+}
+
+export class BottomNavigationItem extends VarComponent {
+  $props: BottomNavigationItemProps
+}
+
+export class _BottomNavigationItemComponent extends BottomNavigationItem {}

package/types/global.d.ts

@@ -4,6 +4,8 @@ declare module 'vue' {
     VarAppBar: typeof import('@varlet/ui')['_AppBarComponent']
     VarBackTop: typeof import('@varlet/ui')['_BackTopComponent']
     VarBadge: typeof import('@varlet/ui')['_BadgeComponent']
+    VarBottomNavigation: typeof import('@varlet/ui')['_BottomNavigationComponent']
+    VarBottomNavigationItem: typeof import('@varlet/ui')['_BottomNavigationItemComponent']
     VarButton: typeof import('@varlet/ui')['_ButtonComponent']
     VarCard: typeof import('@varlet/ui')['_CardComponent']
     VarCell: typeof import('@varlet/ui')['_CellComponent']

package/types/index.d.ts

@@ -6,6 +6,8 @@ export * from './actionSheet'
 export * from './appBar'
 export * from './backTop'
 export * from './badge'
+export * from './bottomNavigation'
+export * from './bottomNavigationItem'
 export * from './button'
 export * from './card'
 export * from './cell'