diff --git a/CHANGELOG.md b/CHANGELOG.md index bea1fcb2b46..1b314dd66de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.1.0](https://github.com/haoziqaq/varlet/compare/v1.0.1...v1.1.0) (2021-04-26) + + +### Bug Fixes + +* **ui/progress:** 优化progress文档, 重命名props show-active -> label, show-track -> track ([7d82141](https://github.com/haoziqaq/varlet/commit/7d82141aef288e03b580b6ffabc0844f8f889ba3)) + + +### Features + +* **ui/types:** uploader提供jsx,tsx类型支持 ([b156587](https://github.com/haoziqaq/varlet/commit/b15658715a3c64cada1c9be4d80c0ffc1df701fd)) +* **ui/types:** 完善row组件jsx,tsx类型推断 ([4630be3](https://github.com/haoziqaq/varlet/commit/4630be3dd3678d35e8f5e9d194de84c6043797dd)) +* **ui/types:** 提供jsx,tsx支持.完成以下组件button,checkbox,checkboxGroup,col,counter,dialog,form,icon,image,i ([8818998](https://github.com/haoziqaq/varlet/commit/8818998748945eea3acd88f88eff8d9387a9e86c)) + + + + + ## [1.0.1](https://github.com/haoziqaq/varlet/compare/v1.0.0...v1.0.1) (2021-04-24) diff --git a/README.md b/README.md index 371e4a7fdb7..14629b047d7 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,27 @@
- + -
VARLET
-
- Material design mobile component library for Vue3 -
+

VARLET

+
Material design mobile component library for Vue3
--- ### Intro -Varlet is a Material design mobile component library developed based on `Vue3`，Developed and maintained by partners in the community。 +Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community. ### Features -- 1.Provide more than 40 high quality general purpose components -- 2.Components are very lightweight -- 3.Developed by Chinese, complete Chinese and English documentation and logistics support -- 4.Support on-demand introduction -- 5.Support theme customization -- 6.Support internationalization -- 7.Support WebStorm, VS Code component syntax highlighting -- 8.Support the SSR -- 9.Support the Typescript + 1. Provide more than 40 high quality general purpose components + 2. Components are very lightweight + 3. Developed by Chinese, complete Chinese and English documentation and logistics support + 4. Support on-demand introduction + 5. Support theme customization + 6. Support internationalization + 7. Support WebStorm, VS Code component syntax highlighting + 8. Support the SSR + 9. Support the Typescript ### Install diff --git a/README.zh-CN.md b/README.zh-CN.md index 76bad1b8d8e..bb24c87e6fb 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,13 +1,10 @@
- + -
VARLET
-
- 面向Vue3的Material风格移动端组件库 -
+

VARLET

+
面向Vue3的Material风格移动端组件库
- --- ### 介绍 @@ -15,20 +12,20 @@ Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区几个不知天高地厚的小伙伴开发和维护。 ### 特性 -- 1.提供40多个高质量通用组件 -- 2.组件十分轻量 -- 3.由国人开发，完善的中英文文档和后勤保障 -- 4.支持按需引入 -- 5.支持主题定制 -- 6.支持国际化 -- 7.支持webstorm，vscode组件属性高亮 -- 8.支持SSR -- 9.支持Typescript +1. 提供40多个高质量通用组件 +2. 组件十分轻量 +3. 由国人开发，完善的中英文文档和后勤保障 +4. 支持按需引入 +5. 支持主题定制 +6. 支持国际化 +7. 支持webstorm，vscode组件属性高亮 +8. 支持SSR +9. 支持Typescript ### 安装 ### CDN -`varlet.js`包含组件库的所有样式和逻辑, 引入即可。 +`varlet.js`包含组件库的所有样式和逻辑，引入即可。 ```html
diff --git a/TODO-zh-CN.md b/TODO-zh-CN.md deleted file mode 100644 index 2752f1eb0a8..00000000000 --- a/TODO-zh-CN.md +++ /dev/null @@ -1,11 +0,0 @@ -# 下一步开发计划 - -### 介绍 - -这里为您介绍组件库下一步开发计划，欢迎社区小伙伴参与其中。 - -### Todo list -- 1.提供jsx，tsx语法高亮支持。 -- 2.完善文档阅读体验，修复存在的问题。 -- 3.全组件单元测试，并出测试报告。 -- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/TODO.md b/TODO.md deleted file mode 100644 index de4bffa055b..00000000000 --- a/TODO.md +++ /dev/null @@ -1,11 +0,0 @@ -# Todo - -### Intro - -Here we introduce the next development plan of the component library, welcome the community partners to participate in it. - -### Todo list -- 1.Provides `jsx`, `tsx` syntax highlighting support -- 2.Improve the document reading experience and fix problems. -- 3.Unit test all components and issue test report. -- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/developerGuide.md b/developerGuide.md new file mode 100644 index 00000000000..54241f8ae5c --- /dev/null +++ b/developerGuide.md @@ -0,0 +1,20 @@ +# Developer Guide + +### Intro +First, thank you for your interest in joining our development. Here are some considerations. + +### Quickstart +The project is based on the `workspace` feature of yarn and `lerna` as the basic architecture of Monorepo. +The first fork of the repository is based on the dev branch, which is in the project root directory. + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +1. Provides `jsx`,`tsx` syntax highlighting support. +2. Improve the document reading experience and fix problems. +3. Unit test all components and issue test report. +4. Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/developerGuide.zh-CN.md b/developerGuide.zh-CN.md new file mode 100644 index 00000000000..e73bcce9a5b --- /dev/null +++ b/developerGuide.zh-CN.md @@ -0,0 +1,20 @@ +# 开发指南 + +### 介绍 +首先感谢您有兴趣加入我们的开发，以下介绍一些注意事项。 + +### 快速开始 +项目基于yarn的`workspace`特性和`lerna`作为monorepo的基本架构。 +首先fork仓库，基于dev分支进行开发，在项目根目录下。 + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +1. 提供`jsx`、`tsx`语法高亮支持。 +2. 完善文档阅读体验，修复存在的问题。 +3. 全组件单元测试，并出测试报告。 +4. 全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/lerna.json b/lerna.json index c5f2b538102..bc2fc25ba1f 100644 --- a/lerna.json +++ b/lerna.json @@ -15,5 +15,5 @@ "ignoreChanges": [ "**/*.md" ], - "version": "1.0.1" + "version": "1.1.0" } diff --git a/packages/varlet-cli/CHANGELOG.md b/packages/varlet-cli/CHANGELOG.md index cbf72a2ef8a..84c2b908319 100644 --- a/packages/varlet-cli/CHANGELOG.md +++ b/packages/varlet-cli/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.1.0](https://github.com/haoziqaq/varlet/compare/v1.0.1...v1.1.0) (2021-04-26) + + +### Bug Fixes + +* **ui/progress:** 优化progress文档, 重命名props show-active -> label, show-track -> track ([7d82141](https://github.com/haoziqaq/varlet/commit/7d82141aef288e03b580b6ffabc0844f8f889ba3)) + + + + + ## [1.0.1](https://github.com/haoziqaq/varlet/compare/v1.0.0...v1.0.1) (2021-04-24) **Note:** Version bump only for package @varlet/cli diff --git a/packages/varlet-cli/lib/index.js b/packages/varlet-cli/lib/index.js index 949de1367f3..23eaf9d426e 100755 --- a/packages/varlet-cli/lib/index.js +++ b/packages/varlet-cli/lib/index.js @@ -9,12 +9,11 @@ var create_1 = require("./commands/create"); var jest_1 = require("./commands/jest"); commander_1.command('dev').description('Run varlet development environment').action(dev_1.dev); commander_1.command('build').description('Build varlet site for production').action(build_1.build); -commander_1.command('compile') - .description('Compile varlet components library code') - .action(compile_1.compile); +commander_1.command('compile').description('Compile varlet components library code').action(compile_1.compile); commander_1.command('create ').description('Create a component directory').action(create_1.create); commander_1.command('jest') .description('Run Jest in work directory') .option('-w, --watch', 'Watch files change auto jest') + .option('-c, --component ', 'Test a specific component') .action(jest_1.jest); commander_1.parse(); diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json index 6adb620c6dd..3b8141237c2 100644 --- a/packages/varlet-cli/package.json +++ b/packages/varlet-cli/package.json @@ -1,6 +1,6 @@ { "name": "@varlet/cli", - "version": "1.0.1", + "version": "1.1.0", "description": "cli of varlet", "bin": { "varlet-cli": "./lib/index.js" @@ -37,7 +37,7 @@ "@babel/preset-env": "^7.12.1", "@babel/preset-typescript": "^7.12.1", "@varlet/markdown-loader": "^1.0.0", - "@varlet/ui": "^1.0.1", + "@varlet/ui": "^1.1.0", "@vue/compiler-sfc": "^3.0.7", "@vue/test-utils": "^2.0.0-rc.6", "autoprefixer": "9", diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue index 13825b11160..42d48a982a5 100644 --- a/packages/varlet-cli/site/pc/App.vue +++ b/packages/varlet-cli/site/pc/App.vue @@ -102,7 +102,7 @@ export default defineComponent({ [Cell.name]: Cell, [Icon.name]: Icon, [Menu.name]: Menu, - [Loading.name]: Loading + [Loading.name]: Loading, }, setup() { const menu: Ref = ref([]) @@ -157,7 +157,7 @@ export default defineComponent({ if (index !== -1) { childrenElement[index].scrollIntoView({ block: 'center', - inline: 'start' + inline: 'start', }) } }) @@ -228,9 +228,9 @@ export default defineComponent({ nav, code, changeRoute, - changeLanguage + changeLanguage, } - } + }, }) @@ -351,6 +351,7 @@ iframe { position: relative; z-index: 2; border-bottom: 1px solid rgba(0, 0, 0, 0.12); + box-sizing: border-box; &__logo { display: flex; diff --git a/packages/varlet-cli/site/site.config.json b/packages/varlet-cli/site/site.config.json index eca33c19606..c453d8bf44a 100644 --- a/packages/varlet-cli/site/site.config.json +++ b/packages/varlet-cli/site/site.config.json @@ -89,10 +89,10 @@ }, { "text": { - "zh-CN": "Todo", - "en-US": "Todo" + "zh-CN": "开发指南", + "en-US": "Developer Guide" }, - "doc": "todo", + "doc": "developerGuide", "nonComponent": true }, { diff --git a/packages/varlet-cli/src/commands/compile.ts b/packages/varlet-cli/src/commands/compile.ts index afd703c7cb0..e33d9fb84d5 100644 --- a/packages/varlet-cli/src/commands/compile.ts +++ b/packages/varlet-cli/src/commands/compile.ts @@ -1,10 +1,9 @@ -import logger from '../shared/logger' import ora from 'ora' import { remove } from 'fs-extra' import { CJS_DIR, ES_DIR, UMD_DIR } from '../shared/constant' import { compileModule } from '../compiler/compileModule' import { compileTemplateHighlight } from '../compiler/compileTemplateHighlight' -import { compileTypes } from '../compiler/compileTypes'; +import { compileTypes } from '../compiler/compileTypes' export function removeDir() { return Promise.all([remove(ES_DIR), remove(CJS_DIR), remove(UMD_DIR)]) @@ -15,12 +14,7 @@ export async function compile() { await removeDir() - await Promise.all([ - compileTypes(), - compileTemplateHighlight(), - compileModule(), - compileModule('cjs') - ]) + await Promise.all([compileTypes(), compileTemplateHighlight(), compileModule(), compileModule('cjs')]) await compileModule('umd') s.succeed('Compile success!') diff --git a/packages/varlet-cli/src/commands/jest.ts b/packages/varlet-cli/src/commands/jest.ts index 0570645db13..273794dfe76 100644 --- a/packages/varlet-cli/src/commands/jest.ts +++ b/packages/varlet-cli/src/commands/jest.ts @@ -1,14 +1,13 @@ import { runCLI } from 'jest' import { CWD, JEST_CONFIG } from '../shared/constant' -export async function jest(cmd: { watch: boolean }, args: any) { +export async function jest(cmd: { watch: boolean; component: string }) { const config = { rootDir: CWD, watch: cmd.watch, config: JEST_CONFIG, - testMatch: Array.isArray(args) ? [`**/${args[0]}/__tests__/*.[jt]s`] : undefined + testMatch: cmd.component && [`**/${cmd.component}/__tests__/*.[jt]s`], } - await runCLI(config as any, [CWD]) } diff --git a/packages/varlet-cli/src/index.ts b/packages/varlet-cli/src/index.ts index 7f9cb577355..ce5eef5b782 100644 --- a/packages/varlet-cli/src/index.ts +++ b/packages/varlet-cli/src/index.ts @@ -10,15 +10,14 @@ command('dev').description('Run varlet development environment').action(dev) command('build').description('Build varlet site for production').action(build) -command('compile') - .description('Compile varlet components library code') - .action(compile) +command('compile').description('Compile varlet components library code').action(compile) command('create ').description('Create a component directory').action(create) command('jest') .description('Run Jest in work directory') .option('-w, --watch', 'Watch files change auto jest') + .option('-c, --component ', 'Test a specific component') .action(jest) parse() diff --git a/packages/varlet-eslint-config/README.md b/packages/varlet-eslint-config/README.md index d9104cbeccd..170b9142911 100644 --- a/packages/varlet-eslint-config/README.md +++ b/packages/varlet-eslint-config/README.md @@ -2,8 +2,8 @@ varlet eslint 配置文件 ## 快速上手 ``` -npm安装:npm i eslint @varlet/eslint-config -D -yarn安装:yarn add eslint @varlet/eslint-config -D +npm安装：npm i eslint @varlet/eslint-config -D +yarn安装：yarn add eslint @varlet/eslint-config -D ``` ``` diff --git a/packages/varlet-ui/CHANGELOG.md b/packages/varlet-ui/CHANGELOG.md index 7e7cbbca51d..fb5989e198a 100644 --- a/packages/varlet-ui/CHANGELOG.md +++ b/packages/varlet-ui/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.1.0](https://github.com/haoziqaq/varlet/compare/v1.0.1...v1.1.0) (2021-04-26) + + +### Bug Fixes + +* **ui/progress:** 优化progress文档, 重命名props show-active -> label, show-track -> track ([7d82141](https://github.com/haoziqaq/varlet/commit/7d82141aef288e03b580b6ffabc0844f8f889ba3)) + + +### Features + +* **ui/types:** uploader提供jsx,tsx类型支持 ([b156587](https://github.com/haoziqaq/varlet/commit/b15658715a3c64cada1c9be4d80c0ffc1df701fd)) +* **ui/types:** 完善row组件jsx,tsx类型推断 ([4630be3](https://github.com/haoziqaq/varlet/commit/4630be3dd3678d35e8f5e9d194de84c6043797dd)) +* **ui/types:** 提供jsx,tsx支持.完成以下组件button,checkbox,checkboxGroup,col,counter,dialog,form,icon,image,i ([8818998](https://github.com/haoziqaq/varlet/commit/8818998748945eea3acd88f88eff8d9387a9e86c)) + + + + + ## [1.0.1](https://github.com/haoziqaq/varlet/compare/v1.0.0...v1.0.1) (2021-04-24) **Note:** Version bump only for package @varlet/ui diff --git a/packages/varlet-ui/README.md b/packages/varlet-ui/README.md index 371e4a7fdb7..7c7931b2a9c 100644 --- a/packages/varlet-ui/README.md +++ b/packages/varlet-ui/README.md @@ -1,29 +1,27 @@
- + -
VARLET
-
- Material design mobile component library for Vue3 -
+

VARLET

+
Material design mobile component library for Vue3
--- ### Intro -Varlet is a Material design mobile component library developed based on `Vue3`，Developed and maintained by partners in the community。 +Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community. ### Features -- 1.Provide more than 40 high quality general purpose components -- 2.Components are very lightweight -- 3.Developed by Chinese, complete Chinese and English documentation and logistics support -- 4.Support on-demand introduction -- 5.Support theme customization -- 6.Support internationalization -- 7.Support WebStorm, VS Code component syntax highlighting -- 8.Support the SSR -- 9.Support the Typescript +1. Provide more than 40 high quality general purpose components +2. Components are very lightweight +3. Developed by Chinese, complete Chinese and English documentation and logistics support +4. Support on-demand introduction +5. Support theme customization +6. Support internationalization +7. Support WebStorm, VS Code component syntax highlighting +8. Support the SSR +9. Support the Typescript ### Install diff --git a/packages/varlet-ui/README.zh-CN.md b/packages/varlet-ui/README.zh-CN.md index 76bad1b8d8e..78ad9f80d9e 100644 --- a/packages/varlet-ui/README.zh-CN.md +++ b/packages/varlet-ui/README.zh-CN.md @@ -1,11 +1,9 @@
- + -
VARLET
-
- 面向Vue3的Material风格移动端组件库 -
+

VARLET

+
面向Vue3的Material风格移动端组件库
--- @@ -15,20 +13,20 @@ Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区几个不知天高地厚的小伙伴开发和维护。 ### 特性 -- 1.提供40多个高质量通用组件 -- 2.组件十分轻量 -- 3.由国人开发，完善的中英文文档和后勤保障 -- 4.支持按需引入 -- 5.支持主题定制 -- 6.支持国际化 -- 7.支持webstorm，vscode组件属性高亮 -- 8.支持SSR -- 9.支持Typescript +1. 提供40多个高质量通用组件 +2. 组件十分轻量 +3. 由国人开发，完善的中英文文档和后勤保障 +4. 支持按需引入 +5. 支持主题定制 +6. 支持国际化 +7. 支持webstorm，vscode组件属性高亮 +8. 支持SSR +9. 支持Typescript ### 安装 ### CDN -`varlet.js`包含组件库的所有样式和逻辑, 引入即可。 +`varlet.js`包含组件库的所有样式和逻辑，引入即可。 ```html
diff --git a/packages/varlet-ui/docs/developerGuide.en-US.md b/packages/varlet-ui/docs/developerGuide.en-US.md new file mode 100644 index 00000000000..5af36388da5 --- /dev/null +++ b/packages/varlet-ui/docs/developerGuide.en-US.md @@ -0,0 +1,20 @@ +# Developer Guide + +### Intro +First, thank you for your interest in joining our development. Here are some considerations. + +### Quickstart +The project is based on the `workspace` feature of yarn and `lerna` as the basic architecture of Monorepo. +The first fork of the repository is based on the dev branch, which is in the project root directory. + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +- 1.Provides `jsx`,`tsx` syntax highlighting support. +- 2.Improve the document reading experience and fix problems. +- 3.Unit test all components and issue test report. +- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/packages/varlet-ui/docs/developerGuide.zh-CN.md b/packages/varlet-ui/docs/developerGuide.zh-CN.md new file mode 100644 index 00000000000..360590f76e9 --- /dev/null +++ b/packages/varlet-ui/docs/developerGuide.zh-CN.md @@ -0,0 +1,20 @@ +# 开发指南 + +### 介绍 +首先感谢您有兴趣加入我们的开发，以下介绍一些注意事项。 + +### 快速开始 +项目基于yarn的`workspace`特性和`lerna`作为monorepo的基本架构。 +首先fork仓库，基于dev分支进行开发，在项目根目录下。 + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +- 1.提供`jsx`、`tsx`语法高亮支持。 +- 2.完善文档阅读体验，修复存在的问题。 +- 3.全组件单元测试，并出测试报告。 +- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-ui/docs/todo.en-US.md b/packages/varlet-ui/docs/todo.en-US.md deleted file mode 100644 index de4bffa055b..00000000000 --- a/packages/varlet-ui/docs/todo.en-US.md +++ /dev/null @@ -1,11 +0,0 @@ -# Todo - -### Intro - -Here we introduce the next development plan of the component library, welcome the community partners to participate in it. - -### Todo list -- 1.Provides `jsx`, `tsx` syntax highlighting support -- 2.Improve the document reading experience and fix problems. -- 3.Unit test all components and issue test report. -- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/packages/varlet-ui/docs/todo.zh-CN.md b/packages/varlet-ui/docs/todo.zh-CN.md deleted file mode 100644 index 47a4e6b6186..00000000000 --- a/packages/varlet-ui/docs/todo.zh-CN.md +++ /dev/null @@ -1,11 +0,0 @@ -# 下一步开发计划 - -### 介绍 - -这里为您介绍组件库下一步开发计划，欢迎社区小伙伴参与其中。 - -### Todo list -- 1.提供`jsx`，`tsx`语法高亮支持。 -- 2.完善文档阅读体验，修复存在的问题。 -- 3.全组件单元测试，并出测试报告。 -- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-ui/package.json b/packages/varlet-ui/package.json index 0b3c8c2538d..5ea7af84dce 100644 --- a/packages/varlet-ui/package.json +++ b/packages/varlet-ui/package.json @@ -1,6 +1,6 @@ { "name": "@varlet/ui", - "version": "1.0.1", + "version": "1.1.0", "description": "A material like components library", "module": "es/index.js", "main": "cjs/index.js", @@ -40,8 +40,8 @@ "build": "varlet-cli build", "compile": "varlet-cli compile", "create": "varlet-cli create", - "jest": "varlet-cli jest", - "jest:watch": "varlet-cli jest -w" + "test": "varlet-cli jest", + "test:watch": "varlet-cli jest -w" }, "peerDependencies": { "vue": "^3.0.7" diff --git a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap index f4c1505b188..c4d406a6856 100644 --- a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap @@ -1,123 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`test button color & textColor 1`] = ` -VueWrapper { - "__app": Object { - "_component": Object { - "__emits": Object {}, - "__props": Array [ - Object {}, - Array [], - ], - "name": "VTU_ROOT", - "render": [Function], - }, - "_container":
- -
, - "_context": Object { - "app": [Circular], - "components": Object { - "transition": Object { - "name": "transition", - "props": undefined, - "render": [Function], - }, - "transition-group": Object { - "name": "transition-group", - "props": undefined, - "render": [Function], - }, - }, - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directives": Object {}, - "mixins": Array [ - Object { - "__emits": null, - "__props": Array [], - "beforeCreate": [Function], - }, - ], - "provides": Object {}, - "reload": [Function], - }, - "_props": null, - "_uid": 6, - "component": [Function], - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directive": [Function], - "mixin": [Function], - "mount": [Function], - "provide": [Function], - "unmount": [Function], - "use": [Function], - "version": "3.0.7", - }, - "__setProps": [Function], - "componentVM": Object { - "block": false, - "color": "#000", - "disabled": false, - "handleClick": [Function], - "handleTouchstart": [Function], - "hasOwnProperty": [Function], - "loading": false, - "loadingRadius": 12, - "loadingSize": "normal", - "loadingType": "circle", - "onClick": undefined, - "onTouchstart": undefined, - "outline": false, - "ripple": true, - "round": false, - "size": "normal", - "text": false, - "textColor": "#000", - "type": "default", - }, - "rootVM": Object {}, - "wrapperElement": , -} +"" `; exports[`test button example 1`] = ` @@ -268,121 +155,8 @@ exports[`test button example 1`] = ` `; exports[`test button size & text & block & round 1`] = ` -VueWrapper { - "__app": Object { - "_component": Object { - "__emits": Object {}, - "__props": Array [ - Object {}, - Array [], - ], - "name": "VTU_ROOT", - "render": [Function], - }, - "_container":
- -
, - "_context": Object { - "app": [Circular], - "components": Object { - "transition": Object { - "name": "transition", - "props": undefined, - "render": [Function], - }, - "transition-group": Object { - "name": "transition-group", - "props": undefined, - "render": [Function], - }, - }, - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directives": Object {}, - "mixins": Array [ - Object { - "__emits": null, - "__props": Array [], - "beforeCreate": [Function], - }, - ], - "provides": Object {}, - "reload": [Function], - }, - "_props": null, - "_uid": 7, - "component": [Function], - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directive": [Function], - "mixin": [Function], - "mount": [Function], - "provide": [Function], - "unmount": [Function], - "use": [Function], - "version": "3.0.7", - }, - "__setProps": [Function], - "componentVM": Object { - "block": true, - "color": undefined, - "disabled": false, - "handleClick": [Function], - "handleTouchstart": [Function], - "hasOwnProperty": [Function], - "loading": false, - "loadingRadius": 12, - "loadingSize": "normal", - "loadingType": "circle", - "onClick": undefined, - "onTouchstart": undefined, - "outline": false, - "ripple": true, - "round": true, - "size": "large", - "text": true, - "textColor": undefined, - "type": "default", - }, - "rootVM": Object {}, - "wrapperElement": , -} +"" `; diff --git a/packages/varlet-ui/src/button/__tests__/index.spec.js b/packages/varlet-ui/src/button/__tests__/index.spec.js index f8b5487d3a2..b79add858a1 100644 --- a/packages/varlet-ui/src/button/__tests__/index.spec.js +++ b/packages/varlet-ui/src/button/__tests__/index.spec.js @@ -4,12 +4,12 @@ import VarButton from '../Button' import { mount } from '@vue/test-utils' import { createApp } from 'vue' -test('test button example',() => { +test('test button example', () => { const wrapper = mount(example) expect(wrapper.html()).toMatchSnapshot() }) -test('test button plugin',() => { +test('test button plugin', () => { const app = createApp({}).use(Button) expect(app.component('VarButton')).toBeTruthy() }) @@ -20,15 +20,15 @@ test('test button click & touchstart', () => { wrapper.trigger('touchstart') }) -test('test button onClick & onTouchstart',() => { +test('test button onClick & onTouchstart', () => { const onClick = jest.fn() const onTouchstart = jest.fn() const wrapper = mount(VarButton, { props: { onClick, - onTouchstart - } + onTouchstart, + }, }) wrapper.trigger('click') @@ -45,8 +45,8 @@ test('test button disabled', () => { props: { disabled: true, onClick, - onTouchstart - } + onTouchstart, + }, }) wrapper.trigger('click') @@ -61,8 +61,8 @@ test('test button loading', () => { const wrapper = mount(VarButton, { props: { - loading: true - } + loading: true, + }, }) wrapper.trigger('click') @@ -76,10 +76,10 @@ test('test button color & textColor', () => { props: { color: '#000', textColor: '#000', - } + }, }) - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) test('test button size & text & block & round', () => { @@ -89,8 +89,8 @@ test('test button size & text & block & round', () => { round: true, text: true, block: true, - } + }, }) - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) diff --git a/packages/varlet-ui/src/button/props.ts b/packages/varlet-ui/src/button/props.ts index 7b2ec319485..68c375bab7d 100644 --- a/packages/varlet-ui/src/button/props.ts +++ b/packages/varlet-ui/src/button/props.ts @@ -12,12 +12,12 @@ function sizeValidator(size: string): boolean { export const props = { type: { - type: String, + type: String as PropType<'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'>, default: 'default', validator: typeValidator, }, size: { - type: String, + type: String as PropType<'normal' | 'mini' | 'small' | 'large'>, default: 'normal', validator: sizeValidator, }, diff --git a/packages/varlet-ui/src/checkbox-group/props.ts b/packages/varlet-ui/src/checkbox-group/props.ts index 63b3d168805..dd4a1931f11 100644 --- a/packages/varlet-ui/src/checkbox-group/props.ts +++ b/packages/varlet-ui/src/checkbox-group/props.ts @@ -15,7 +15,7 @@ export const props = { type: [String, Number], }, direction: { - type: String, + type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal', }, validateTrigger: { diff --git a/packages/varlet-ui/src/checkbox/example/index.vue b/packages/varlet-ui/src/checkbox/example/index.vue deleted file mode 100644 index d58ef1e765a..00000000000 --- a/packages/varlet-ui/src/checkbox/example/index.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/packages/varlet-ui/src/dialog/props.ts b/packages/varlet-ui/src/dialog/props.ts index 7fc7feb2cd1..5f513eb130b 100644 --- a/packages/varlet-ui/src/dialog/props.ts +++ b/packages/varlet-ui/src/dialog/props.ts @@ -19,7 +19,7 @@ export const props = { type: String, }, messageAlign: { - type: String, + type: String as PropType<'left' | 'center' | 'right'>, default: 'left', validator: messageAlignValidator, }, diff --git a/packages/varlet-ui/src/image/props.ts b/packages/varlet-ui/src/image/props.ts index fff8a7a99c0..4df3ef30547 100644 --- a/packages/varlet-ui/src/image/props.ts +++ b/packages/varlet-ui/src/image/props.ts @@ -9,7 +9,7 @@ export const props = { type: String, }, fit: { - type: String, + type: String as PropType<'fill' | 'contain' | 'cover' | 'none' | 'scale-down'>, validator: fitValidator, default: 'fill', }, @@ -34,7 +34,7 @@ export const props = { }, lazy: { type: Boolean, - default: false + default: false, }, ripple: { type: Boolean, diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts index edd226af5d0..4f561be7849 100644 --- a/packages/varlet-ui/src/input/props.ts +++ b/packages/varlet-ui/src/input/props.ts @@ -11,7 +11,7 @@ export const props = { type: [String, Number], }, type: { - type: String, + type: String as PropType<'text' | 'password'>, default: 'text', validator: typeValidator, }, diff --git a/packages/varlet-ui/src/loading/props.ts b/packages/varlet-ui/src/loading/props.ts index 889e0730bff..ad3c84171e3 100644 --- a/packages/varlet-ui/src/loading/props.ts +++ b/packages/varlet-ui/src/loading/props.ts @@ -1,3 +1,9 @@ +import { PropType } from 'vue' + +type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear' + +type LoadingSize = 'normal' | 'mini' | 'small' | 'large' + export function typeValidator(type: string): boolean { return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type) } @@ -9,7 +15,7 @@ export function sizeValidator(size: string): boolean { export const props = { // loading类型 type: { - type: String, + type: String as PropType, default: 'circle', validator: typeValidator, }, @@ -19,7 +25,7 @@ export const props = { }, // loading尺寸 size: { - type: String, + type: String as PropType, default: 'normal', validator: sizeValidator, }, diff --git a/packages/varlet-ui/src/menu/props.ts b/packages/varlet-ui/src/menu/props.ts index 1391a2107b7..396dd0fd7ce 100644 --- a/packages/varlet-ui/src/menu/props.ts +++ b/packages/varlet-ui/src/menu/props.ts @@ -10,7 +10,7 @@ export const props = { default: false, }, alignment: { - type: String, + type: String as PropType<'top' | 'bottom'>, default: 'top', validator: alignmentValidator, }, diff --git a/packages/varlet-ui/src/popup/props.ts b/packages/varlet-ui/src/popup/props.ts index 0a3d6edb222..7a004725665 100644 --- a/packages/varlet-ui/src/popup/props.ts +++ b/packages/varlet-ui/src/popup/props.ts @@ -10,7 +10,7 @@ export const props = { default: false, }, position: { - type: String, + type: String as PropType<'top' | 'bottom' | 'right' | 'left' | 'center'>, default: 'center', validator: positionValidator, }, diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue index 06edab17931..1c34100dd71 100644 --- a/packages/varlet-ui/src/progress/Progress.vue +++ b/packages/varlet-ui/src/progress/Progress.vue @@ -8,7 +8,7 @@ :style="{ background: color, width: linearProps.width }" > -
+
{{ linearProps.roundValue }} @@ -22,7 +22,7 @@ :viewBox="circleProps.viewBox" > -
+
{{ circleProps.roundValue }} diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md index d5739784202..5fcbe02ac9d 100644 --- a/packages/varlet-ui/src/progress/docs/en-US.md +++ b/packages/varlet-ui/src/progress/docs/en-US.md @@ -13,8 +13,6 @@ import { Progress } from '@varlet/ui' createApp().use(Progress) ``` -## Progress linear - ### Basic Usage Set the current progress through the `value` attribute. @@ -22,68 +20,44 @@ Set the current progress through the `value` attribute. ```html + ``` -### Custom Style +### Show Label -Set the line width, progress bar color, track color and ripple loading effect through the attributes of `line-width`, `color`, `track-color` and `ripple`. +The label is displayed through the `label` attribute. The label is the percentage of progress by default. You can use the slot to insert custom content. ```html - - - + + +success ``` -### Show Action +### Custom Style -The action is displayed through the `show-action` attribute. The action is the percentage of progress by default. You can use the slot to insert custom content. +Set the line width, progress bar color, track color and ripple loading effect through the attributes of `line-width`, `color`, `track-color` and `ripple`. ```html - - - success + + + ``` -## Progress circle - -### Size - -Change the size of the progress bar through the `size` attribute. +### Progress circle ```html - - - + + + ``` -### Custom Style +### Hide Track + +Use `track` prop to hide track. ```html - - - + ``` - ## API ### Props @@ -95,17 +69,17 @@ Change the size of the progress bar through the `size` attribute. | `line-width` | Width of the progress bar | _string \| number_ | `4` | | `color` | Color of the progress bar | _string_ | `#005CAF` | | `track-color` | Color of the progress track | _string_ | `#d8d8d8` | -| `show-action` | Whether the action is visible or not | _boolean_ | `false` | +| `label` | Whether the label is visible or not | _boolean_ | `false` | | `ripple` | Loading style for progress (only supports linear progress) | _boolean_ | `false` | | `size` | Size of progress (only supports circle progress) | _string \| number_ | `40` | | `rotate` | Origin of progress (only supports circle progress) | _number_ | `0` | -| `show-track` | Whether the progress track is visible or not (only supports circle progress) | _boolean_ | `true` | +| `track` | Whether the progress track is visible or not (only supports circle progress) | _boolean_ | `true` | ### Slots | Name | Description | SlotProps | | ----- | -------------- | -------- | -| `default` | Custom action | `-` | +| `default` | Custom label | `-` | ### Theme Variables #### The following LESS variables can be overridden at build time to modify the theme style diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md index 19daabb20e7..47e01f92ba1 100644 --- a/packages/varlet-ui/src/progress/docs/zh-CN.md +++ b/packages/varlet-ui/src/progress/docs/zh-CN.md @@ -13,8 +13,6 @@ import { Progress } from '@varlet/ui' createApp().use(Progress) ``` -## 线性进度条 - ### 基本使用 通过 `value` 属性设置当前进度。 @@ -22,68 +20,45 @@ createApp().use(Progress) ```html + ``` -### 自定义样式 +### 显示标签 -通过`line-width`、`color`、`track-color`、`ripple` 属性设置线宽、进度条颜色、轨道颜色、水波纹加载效果。 +通过`label`属性将label显示，label默认为进度的百分比，可以使用插槽插入自定义内容。 ```html - - - + + +success ``` -### 显示标签 +### 自定义样式 -通过 `show-action`属性将action显示，action 默认为进度的百分比，可以使用插槽插入自定义内容。 +通过`line-width`、`color`、`track-color`、`ripple` 属性设置线宽、进度条颜色、轨道颜色、水波纹加载效果。 ```html - - - success + + + ``` -## 环形进度条 - -### 不同尺寸 - -通过`size`属性改变进度条大小。 +### 环形进度条 ```html - - - + + + ``` -### 自定义样式 + +### 隐藏轨道 + +通过`track`属性隐藏 track。 ```html - - - + ``` - ## API ### 属性 @@ -95,17 +70,17 @@ createApp().use(Progress) | `line-width` | `progress` 的线宽 | _string \| number_ | `4` | | `color` | `progress` 的颜色 | _string_ | `#005CAF` | | `track-color` | `progress` 轨道的颜色 | _string_ | `#d8d8d8` | -| `show-action` | 是否显示 action | _boolean_ | `false` | +| `label` | 是否显示 label | _boolean_ | `false` | | `ripple` | 水波纹加载效果（仅支持线性进度条） | _boolean_ | `false` | | `size` | `progress` 的尺寸（仅支持环形进度条） | _string \| number_ | `40` | | `rotate` | `progress` 的原点（仅支持环形进度条） | _number_ | `0` | -| `show-track` | 是否显示 `progress` 的轨道（仅支持环形进度条） | _boolean_ | `true` | +| `track` | 是否显示 `progress` 的轨道（仅支持环形进度条） | _boolean_ | `true` | ### 插槽 | 名称 | 说明 | 参数 | | ----- | -------------- | -------- | -| `default` | 自定义 action | `-` | +| `default` | 自定义 label | `-` | ### 主题变量 #### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue index 0e0fb3c9d5a..5a87f5939c0 100644 --- a/packages/varlet-ui/src/progress/example/index.vue +++ b/packages/varlet-ui/src/progress/example/index.vue @@ -1,53 +1,50 @@ diff --git a/packages/varlet-ui/src/row/props.ts b/packages/varlet-ui/src/row/props.ts index 3d812633de2..c9994efbb07 100644 --- a/packages/varlet-ui/src/row/props.ts +++ b/packages/varlet-ui/src/row/props.ts @@ -1,35 +1,29 @@ import { PropType } from 'vue' function justifyValidator(justify: string) { - return [ - 'flex-start', - 'flex-end', - 'center', - 'space-between', - 'space-around' - ].includes(justify) + return ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'].includes(justify) } function alignValidator(align: string) { - return ['flex-start', 'flex-center', 'flex-end'].includes(align) + return ['flex-start', 'center', 'flex-end'].includes(align) } export const props = { gutter: { type: [String, Number], - default: 0 + default: 0, }, justify: { - type: String, + type: String as PropType<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'>, default: 'flex-start', - validator: justifyValidator + validator: justifyValidator, }, align: { - type: String, + type: String as PropType<'flex-start' | 'center' | 'flex-end'>, default: 'flex-start', - validator: alignValidator + validator: alignValidator, }, onClick: { - type: Function as PropType<(e: Event) => void> - } + type: Function as PropType<(e: Event) => void>, + }, } diff --git a/packages/varlet-ui/src/select/props.ts b/packages/varlet-ui/src/select/props.ts index 340cc32e690..88b4701a317 100644 --- a/packages/varlet-ui/src/select/props.ts +++ b/packages/varlet-ui/src/select/props.ts @@ -55,7 +55,7 @@ export const props = { default: ',', }, textAlign: { - type: String, + type: String as PropType<'left' | 'right' | 'center'>, default: 'left', validator: textAlignValidator, }, diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue index 5684f36124c..9a6f254ceff 100644 --- a/packages/varlet-ui/src/slider/Slider.vue +++ b/packages/varlet-ui/src/slider/Slider.vue @@ -106,7 +106,6 @@
diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less index 71ad9e0b1b8..1e6057ed615 100644 --- a/packages/varlet-ui/src/slider/slider.less +++ b/packages/varlet-ui/src/slider/slider.less @@ -125,6 +125,6 @@ } &__form[var-slider-cover] { - margin: 0 0 0 6px; + margin: 0; } } diff --git a/packages/varlet-ui/src/steps/docs/en-US.md b/packages/varlet-ui/src/steps/docs/en-US.md index d356df1965d..08d527d1b65 100644 --- a/packages/varlet-ui/src/steps/docs/en-US.md +++ b/packages/varlet-ui/src/steps/docs/en-US.md @@ -24,7 +24,7 @@ Use `active` prop to control the progress of step, value is index of step and is Step3 Step4 -next +next ``` ```javascript @@ -35,11 +35,11 @@ export default { const active = ref(0) const next = () => { - active.value = active.value === 4 ? 0 : active.value + 1 + active.value = (active.value + 1) % 4 } return { - value, + active, next } } @@ -48,98 +48,37 @@ export default { ### Custom Style -Clicking on `step` will trigger the `click-step` event. - ```html - + Step1 - + Step2 - + Step3 - + Step4 ``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const active = ref(0) - - const click = (index) => { - active.value = index - } - - return { - value, - click - } - } -} -``` - -### Dynamic steps - -Steppers can have their steps dynamically added or removed. - -```html - - - - - Step{{ i }} - -``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const list = ref([2, 3, 4, 5]) - const count = ref(4) - - return { - list, - count - } - } -} -``` ### Vertical Mode Change the display direction of the step bar through the `direction` attribute. ```html - - -

2021-02-13

- do something... - - -

2021-02-14

- do something... - - -

2021-02-15

- do something... - - -

2021-02-16

- do something... - + + Step1 + Step2 + Step3 + Step4 ``` diff --git a/packages/varlet-ui/src/steps/docs/zh-CN.md b/packages/varlet-ui/src/steps/docs/zh-CN.md index f96fd55f9fa..64dd858c8d9 100644 --- a/packages/varlet-ui/src/steps/docs/zh-CN.md +++ b/packages/varlet-ui/src/steps/docs/zh-CN.md @@ -24,7 +24,7 @@ createApp().use(Steps).use(Step) 步骤3 步骤4 -下一步 +下一步 ``` ```javascript @@ -35,11 +35,11 @@ export default { const active = ref(0) const next = () => { - active.value = active.value === 4 ? 0 : active.value + 1 + active.value = (active.value + 1) % 4 } return { - value, + active, next } } @@ -48,98 +48,37 @@ export default { ### 自定义样式 -点击 `step` 会触发`click-step` 事件。 - ```html - + 步骤1 - + 步骤2 - + 步骤3 - + 步骤4 ``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const active = ref(0) - - const click = (index) => { - active.value = index - } - - return { - value, - click - } - } -} -``` - -### 动态步骤 - -步骤条可以动态地添加或移除他们的步骤。 - -```html - - - - - 步骤{{ i }} - -``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const list = ref([2, 3, 4, 5]) - const count = ref(4) - - return { - list, - count - } - } -} -``` ### 垂直模式 通过 `direction` 属性改变步骤条的显示方向。 ```html - - -

2021-02-13

- 接下来... - - -

2021-02-14

- 接下来... - - -

2021-02-15

- 接下来... - - -

2021-02-16

- 接下来... - + + 步骤1 + 步骤2 + 步骤3 + 步骤4 ``` diff --git a/packages/varlet-ui/src/steps/example/index.vue b/packages/varlet-ui/src/steps/example/index.vue index 505c25223eb..57e94d77b16 100644 --- a/packages/varlet-ui/src/steps/example/index.vue +++ b/packages/varlet-ui/src/steps/example/index.vue @@ -1,69 +1,37 @@