diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d8799f6a..b432e12ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,16 @@ toc: false docClass: timeline --- +## 🌈 1.4.3 `2023-06-20` +### 🐞 Bug Fixes +- `Drawer`: 修复 `destroyOnClose` 不符合预期问题 @Aicmortal ([#2517](https://github.com/Tencent/tdesign-vue/pull/2517)) +- `TextArea`: 修复设置 `value` 值后 autosize 自适应失效的问题 @xiaosansiji ([#2527](https://github.com/Tencent/tdesign-vue/pull/2527)) +- `Swiper`: 修复 `navigation` 插槽失效的问题 @uyarn ([#2514](https://github.com/Tencent/tdesign-vue/pull/2514)) +- `Table`: 减少斑马纹样式影响范围，避免自定义元素被自定义 @chaishi ([common#1415](https://github.com/Tencent/tdesign-common/pull/1415)) +- `Menu`: 侧边导航超长时，不再隐藏滚动条，防止鼠标操作环境下不能拖动滚动条的问题 @xiaosansiji ([common#1416](https://github.com/Tencent/tdesign-common/pull/1416)) +### 🚧 Others +- `Dropdown`: 新增带图标的下拉菜单示例 @aomnisz ([#2523](https://github.com/Tencent/tdesign-vue/pull/2523)) + ## 🌈 1.4.2 `2023-06-13` ### 🚀 Features - `Menu`: diff --git a/package.json b/package.json index 639a75b7c..48b4d79db 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tdesign-vue", "purename": "tdesign", - "version": "1.4.2-naruto", + "version": "1.4.3-naruto", "description": "tdesign-vue", "title": "tdesign-vue", "keywords": [ diff --git a/site/docs/getting-started.en-US.md b/site/docs/getting-started.en-US.md new file mode 100644 index 000000000..2b96a3551 --- /dev/null +++ b/site/docs/getting-started.en-US.md @@ -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 + + + + +... + +``` + +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 + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
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. diff --git a/site/docs/starter.en-US.md b/site/docs/starter.en-US.md new file mode 100644 index 000000000..68540df4f --- /dev/null +++ b/site/docs/starter.en-US.md @@ -0,0 +1,81 @@ +--- +title: Starter Kit +description: Welcome to use TDesign Starter Kit for Vue to create your project! +spline: explain +--- + +

+ + + + +

+

+ node compatibility +

+

+ Overview + . + Repository + · + Feedback +

+

+ +

+ +### 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 +``` + +

+ +

+ +For more detail, please read [TDesign Starter Documentation](https://tdesign.tencent.com/starter/docs/vue/get-started) + +### Browser Support + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | diff --git a/site/site.config.mjs b/site/site.config.mjs index bc50b1d06..790ae80c8 100644 --- a/site/site.config.mjs +++ b/site/site.config.mjs @@ -7,17 +7,19 @@ const docs = [ children: [ { title: '快速开始', - titleEn: 'Quick Start', + titleEn: 'Getting Started', name: 'getting-started', path: '/vue/getting-started', component: () => import('@/site/docs/getting-started.md'), + componentEn: () => import('@/site/docs/getting-started.en-US.md'), }, { title: '最佳实践', - titleEn: 'Best Practice', + titleEn: 'Starter Kit', name: 'quick-start', path: '/vue/quick-start', component: () => import('@/site/docs/starter.md'), + componentEn: () => import('@/site/docs/starter.en-US.md'), }, { title: '更新日志', diff --git a/src/_common b/src/_common index b2d50b3ad..e742362d9 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit b2d50b3ad9e84f9dc4bcf478e22df5310dc33591 +Subproject commit e742362d9d713711617c24487f1b0b2f262868cb diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx index 299b5354e..fad19e84c 100644 --- a/src/color-picker/panel/format/index.tsx +++ b/src/color-picker/panel/format/index.tsx @@ -71,7 +71,7 @@ export default defineComponent({ return (
- {formats.map((item) => ( - + ))} - +
{h('format-inputs', { diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index 86e783efe..a50afcf93 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -34,7 +34,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d isSizeDragging: false, draggedSizeValue: null, animationStart: false, - animationEnd: false, + animationEnd: true, styleTimer: null, styleEl: null, }; diff --git a/src/dropdown/_example/icon.vue b/src/dropdown/_example/icon.vue new file mode 100644 index 000000000..733e41009 --- /dev/null +++ b/src/dropdown/_example/icon.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/swiper/swiper.tsx b/src/swiper/swiper.tsx index b0d36cb61..0a520a1d8 100644 --- a/src/swiper/swiper.tsx +++ b/src/swiper/swiper.tsx @@ -6,6 +6,7 @@ import props from './props'; import { TdSwiperProps, SwiperNavigation, SwiperChangeSource } from './type'; import TSwiperItem from './swiper-item'; import { isVNode } from '../hooks/render-tnode'; +import { renderTNodeJSX } from '../utils/render-tnode'; import { emitEvent } from '../utils/event'; import { getClassPrefixMixins, getGlobalIconMixins } from '../config-provider/config-receiver'; import mixins from '../utils/mixins'; @@ -264,7 +265,10 @@ export default mixins(Vue as VueConstructor, classPrefixMixins, getGl ); }, renderNavigation() { + const navigationSlot = renderTNodeJSX(this, 'navigation'); if (isVNode(this.navigation as VNode)) return this.navigation; + if (navigationSlot && isVNode(navigationSlot?.[0])) return navigationSlot; + if (this.navigationConfig.type === 'fraction') { return (
diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index 898b4cfad..5506461b5 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -101,6 +101,12 @@ export default mixins(Vue as VueConstructor