-
Notifications
You must be signed in to change notification settings - Fork 351
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(1.4.3): weekly sync update to 2.7 (#2530)
* Release/1.4.0 (#2481) * feat: release 1.4.0 * feat: update common * chore: changelog's changes * docs: add language pack contributing doc --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: 1.4.0 changelog render error (#2482) * fix(input-number): do not set value if value is undefined/null (#2483) * docs: update documentation for vue2.7 support (#2491) * feat: move popup align style to less from inline style (#2496) * feat: move popup align style to less from inline style * chore: fix spelling error * fix: spelling error * test: update snapshot * chore: add 2.7 infra (#2497) * chore: add 2.7 infra * chore: fix snapshot * chore(deps-dev): bump workbox-precaching from 6.6.1 to 7.0.0 (#2467) Bumps [workbox-precaching](https://github.com/googlechrome/workbox) from 6.6.1 to 7.0.0. - [Release notes](https://github.com/googlechrome/workbox/releases) - [Commits](https://github.com/googlechrome/workbox/commits/v7.0.0) --- updated-dependencies: - dependency-name: workbox-precaching dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(timeline): async timeline render (#2501) * chore: update snapshot * fix(timeline): fix async render timeline item * chore: fix unused lint * Feat/submenu popup props (#2504) * feat: add popupProps interface to submenu * feat: add submenu.popupProps * test: submenu.popupProps demo * chore: add ts type * fix(table): 通过current修改分页，序列号没有变化问题修复 (#2506) * fix(colorpicker): support empty initial value for graident color (#2511) * feat: release 1.4.1 (#2512) * feat: release 1.4.1 * feat: update common * feat: update common * feat: release 1.4.2 (#2515) * fix(Drawer): 修复destroyOnClose不符合预期问题 (#2517) * docs: provide en-version docs (#2520) * docs: provide en-version docs * chore: fix spell check * feat(dropdown): 新增带图标的下拉菜单示例 (#2523) * feat(dropdown): 新增带图标的下拉菜单示例 * feat(dropdown): 新增带图标的下拉菜单示例 更新 common 的 submodule ID * fix: textarea auto height (#2527) * fix(swiper): navigation slot (#2514) * Release/1.4.3 (#2528) * feat: release 1.4.3 * feat: update common * feat: update common * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: azhe <xiaosansiji@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: sheepluo <yaoyanhuoyi@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: LoopZhou <13745660+LoopZhou@users.noreply.github.com> Co-authored-by: Yuhang <aicmortal@gmail.com> Co-authored-by: omnis <39907007+aomnisz@users.noreply.github.com>
- Loading branch information
8 people
authored
Jun 20, 2023
1 parent
c4d3973
commit e201473
Showing
11 changed files
with
370 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,184 @@ | ||
| --- | ||
| title: Vue for Web | ||
| description: TDesign Vue is a UI component library for Vue 2 and desktop application. | ||
| spline: explain | ||
| --- | ||
|
|
||
| ## Installation | ||
|
|
||
| ### npm | ||
|
|
||
| ```shell | ||
| npm i tdesign-vue // for Vue 2.6 | ||
| npm i tdesign-vue@naruto // for Vue 2.7 | ||
| ``` | ||
|
|
||
| ### unpkg | ||
|
|
||
| ```html | ||
| <link rel="stylesheet" href="https://unpkg.com/tdesign-vue/dist/tdesign.min.css" /> | ||
| <script src="https://unpkg.com/vue@2.6/dist/vue.js"></script> | ||
| <script src="https://unpkg.com/@vue/composition-api@1.7.0/dist/vue-composition-api.prod.js"></script> | ||
| <script src="https://unpkg.com/tdesign-vue/dist/tdesign.min.js"></script> | ||
| ... | ||
| <script> | ||
| Vue.use(TDesign); | ||
| </script> | ||
| ``` | ||
|
|
||
| The package of tdesign-vue provides kinds of bundles, read [the documentation](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) for the detail of differences between bundles. | ||
|
|
||
| ## Usage | ||
|
|
||
| TDesign provides three ways to use components | ||
|
|
||
| ### Basic Usage | ||
|
|
||
| Basic usage will register all components in full. If your project uses components on a large scale, feel free to use tdesign-vue in this way. | ||
|
|
||
| ```js | ||
| import Vue from 'vue'; | ||
| import TDesign from 'tdesign-vue'; | ||
|
|
||
| // import global design variables | ||
| import 'tdesign-vue/es/style/index.css'; | ||
|
|
||
| Vue.use(TDesign); | ||
| ``` | ||
|
|
||
| ### Import on-demand | ||
|
|
||
| If you have strict requirements for the size of the artifact, you can use tdesign-vue in this way. | ||
|
|
||
| With the help of building tools such as `Webpack` or `Rollup` that support tree-shaking features, you can achieve the effect of importing on demand. | ||
|
|
||
| ```js | ||
| import { Button as TButton } from 'tdesign-vue'; | ||
|
|
||
| // import global design variables | ||
| import 'tdesign-vue/es/style/index.css'; | ||
|
|
||
| Vue.use(TButton); | ||
| ``` | ||
|
|
||
| ### Import on-demand with Plugin | ||
|
|
||
| You can also use `unplugin-vue-components` and `unplugin-auto-import` to achieve automatic on-demand import. | ||
|
|
||
| If you are using tdesign-vue in Vue 2.6, you still need to import a small amount of global style variables and `@vue/composition-api` in the component library into your project. | ||
|
|
||
| If you are using tdesign-vue in Vue 2.7, you no longer need to import `@vue/composition-api` | ||
|
|
||
| ```js | ||
| import VueCompositionAPI from '@vue/composition-api'; | ||
| // import global design variables | ||
| import 'tdesign-vue/es/style/index.css'; | ||
|
|
||
| Vue.use(VueCompositionAPI); // must be the first one | ||
| ``` | ||
|
|
||
| install `unplugin-vue-components` and `unplugin-auto-import` | ||
|
|
||
| ```bash | ||
| npm install -D unplugin-vue-components unplugin-auto-import | ||
| ``` | ||
|
|
||
| Then, add the above plugins to the corresponding configuration files of Webpack or Vite. | ||
|
|
||
| #### Vite | ||
|
|
||
| ```js | ||
| import AutoImport from 'unplugin-auto-import/vite'; | ||
| import Components from 'unplugin-vue-components/vite'; | ||
| import { TDesignResolver } from 'unplugin-vue-components/resolvers'; | ||
|
|
||
| export default { | ||
| plugins: [ | ||
| // ... | ||
| AutoImport({ | ||
| resolvers: [TDesignResolver()], | ||
| }), | ||
| Components({ | ||
| resolvers: [TDesignResolver()], | ||
| }), | ||
| ], | ||
| }; | ||
| ``` | ||
|
|
||
| #### Webpack | ||
|
|
||
| ```js | ||
| const AutoImport = require('unplugin-auto-import/webpack'); | ||
| const Components = require('unplugin-vue-components/webpack'); | ||
| const { TDesignResolver } = require('unplugin-vue-components/resolvers'); | ||
|
|
||
| module.exports = { | ||
| // ... | ||
| plugins: [ | ||
| AutoImport({ | ||
| resolvers: [TDesignResolver()], | ||
| }), | ||
| Components({ | ||
| resolvers: [TDesignResolver()], | ||
| }), | ||
| ], | ||
| }; | ||
| ``` | ||
|
|
||
| > You can click on this [link](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/tdesign.ts#L4) for the configuration supported by `TDesignResolver`. | ||
| ## Starter Kit | ||
|
|
||
| Visit [TDesign Starter](https://tdesign.tencent.com/starter/vue/) to experience the system built with tdesign-vue UI Components. | ||
|
|
||
| ## Browser Support | ||
|
|
||
| | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | | ||
| | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | Edge >=91 | Firefox >=83 | Chrome >=91 | Safari >=14.1 | | ||
|
|
||
| Read our [browser compatibility](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility) for more details. | ||
|
|
||
| ## FAQ | ||
|
|
||
| Q: When using Local Registration, an error is reported: `Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function.` | ||
| A: The component uses Composition API internally. To resolve this error, you need to use `CompositionAPI` first in main.js. For example: | ||
|
|
||
| ```js | ||
| // main.js | ||
| import Vue from 'vue'; | ||
| import VueCompositionAPI from '@vue/composition-api'; | ||
|
|
||
| Vue.use(VueCompositionAPI); | ||
| Vue.use(otherPlugin); | ||
| ``` | ||
|
|
||
| Q: Does TDesign have a built-in reset style for unifying the default styles of page elements? | ||
|
|
||
| A: Since version `0.43.0`, tdesign-vue no longer imports `reset.less`. The biggest impact is the removal of the global box model setting | ||
|
|
||
| ```css | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
| ``` | ||
|
|
||
| If your project development depends on the `reset` style, you can import it from the `dist` directory. | ||
|
|
||
| ```js | ||
| import 'tdesign-vue/dist/reset.css'; | ||
| ``` | ||
|
|
||
| Q: How to use tdesign-vue in Vue 2.7? | ||
|
|
||
| A: tdesign-vue support Vue 2.7 since version `1.4.0`. In Vue2.7, please install tdesign-vue@naruto or add the label "-naruto" after specifying a specific version. | ||
|
|
||
| for example, `tdesign-vue@1.4.0` is for `Vue 2.6` while `tdesign-vue@1.4.0-naruto` is for `Vue 2.7` | ||
|
|
||
| Q: How to resolve the error `vue.runtime.esm.js:4605 [Vue warn]: inject() can only be used inside setup() or functional components.`? | ||
|
|
||
| A: When using components, if you see this kind of error `vue.runtime.esm.js:4605 [Vue warn]: inject() can only be used inside setup() or functional components.`, it means that although the version number set in package.json is `^2.6.14`, the actual installed version is Vue 2.7. You can check the actual installed version in the node_modules directory. | ||
|
|
||
| Please make sure that the version number you installed is Vue 2.6.x. If you do need to use Vue 2.7, please install tdesign-vue@naruto. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| --- | ||
| title: Starter Kit | ||
| description: Welcome to use TDesign Starter Kit for Vue to create your project! | ||
| spline: explain | ||
| --- | ||
|
|
||
| <p> | ||
| <a href="https://tdesign.tencent.com/starter/vue/" target="_blank"> | ||
| <img src="https://tdesign.gtimg.com/starter/brand-logo-light.png" class="__light__" style="height:44px;margin-top:0;"/> | ||
| <img src="https://tdesign.gtimg.com/starter/brand-logo-dark.png" class="__dark__" style="height:44px;margin-top:0;"/> | ||
| </a> | ||
| </p> | ||
| <p> | ||
| <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatibility"></a> | ||
| </p> | ||
| <p> | ||
| <a href="http://tdesign.tencent.com/starter/vue/">Overview </a> | ||
| . | ||
| <a href="https://github.com/Tencent/tdesign-vue-starter">Repository</a> | ||
| · | ||
| <a href="https://github.com/Tencent/tdesign-vue-starter/issues/new/choose">Feedback</a> | ||
| </p> | ||
| <p> | ||
| <img src="https://tdesign.gtimg.com/starter/starter.png" style="border-radius:6px;border:1px solid var(--component-border)"/> | ||
| </p> | ||
|
|
||
| ### Introduction | ||
|
|
||
| TDesign Vue Starter is a TDesign-based project, which can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects. | ||
|
|
||
| - Exquisite Design | ||
|
|
||
| - Based on the TDesign UI design specifications | ||
| - Provide various types of design resources such as Figma, Sketch, Adobe XD, Axure, etc | ||
| - Build a product with its own brand characteristics and easy-to-use on the open source system | ||
|
|
||
| - Complete Routing | ||
|
|
||
| - Support both configuration-based and custom routing. For configuration-based routing | ||
| - provide deep customization of navigation components (`Menu` and `Breadcrumb`) | ||
|
|
||
| - Dynamic Layout | ||
|
|
||
| - Provider built-in layouts such as "Left-Right Layout", "Top-Left-Right Layout", and "Up-Down Layout", | ||
| - Page content designed based on 24-grid layout, with two spacing modes: "Regular" and "Compact". | ||
|
|
||
| - Fast HRM | ||
|
|
||
| - Built with `Vite` | ||
| - Experience browser ES module bundless in the development environment, achieving ultra-fast updates without waiting for lengthy bundle processes. | ||
|
|
||
| - Development Specifications | ||
| - Uniform specifications will reduce communication costs and improve the development and maintenance experience | ||
| - Use `eslint-config-airbnb-base` as code specifications | ||
| - Adopt `Angular commit` specifications. | ||
|
|
||
| Design beautifully | ||
|
|
||
| ### Quick Start | ||
|
|
||
| initialize your project by using `tdesign-starter-cli`. | ||
|
|
||
| ```bash | ||
| ## 1、install tdesign-starter-cli | ||
| npm i tdesign-starter-cli@latest -g | ||
|
|
||
| ## 2、create project | ||
| td-starter init | ||
| ``` | ||
|
|
||
| <p> | ||
| <img src="https://tdesign.gtimg.com/starter/starter-cli.png" style="border-radius:6px;border:1px solid var(--component-border)"/> | ||
| </p> | ||
|
|
||
| For more detail, please read [TDesign Starter Documentation](https://tdesign.tencent.com/starter/docs/vue/get-started) | ||
|
|
||
| ### Browser Support | ||
|
|
||
| | [<img src="https://tdesign.gtimg.com/docs/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE / Edge | [<img src="https://tdesign.gtimg.com/docs/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://tdesign.gtimg.com/docs/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://tdesign.gtimg.com/docs/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | | ||
| | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Submodule _common
updated
25 files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.