From dd8badb810885e4930809ce5fcc5df510a63a9a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=86=E6=B2=9B?= Date: Wed, 13 Sep 2023 12:14:50 +0800 Subject: [PATCH 1/6] feat(Block): add block component --- packages/vant/package.json | 4 +- packages/vant/src/block/Block.tsx | 69 +++++++++++++++++++ packages/vant/src/block/README.md | 58 ++++++++++++++++ packages/vant/src/block/README.zh-CN.md | 58 ++++++++++++++++ packages/vant/src/block/demo/index.vue | 46 +++++++++++++ packages/vant/src/block/index.less | 36 ++++++++++ packages/vant/src/block/index.ts | 14 ++++ packages/vant/src/block/test/demo-ssr.spec.ts | 7 ++ packages/vant/src/block/test/demo.spec.ts | 4 ++ packages/vant/src/block/test/index.spec.ts | 40 +++++++++++ packages/vant/src/block/types.ts | 8 +++ packages/vant/src/config-provider/types.ts | 1 + packages/vant/vant.config.mjs | 8 +++ pnpm-lock.yaml | 20 ++++-- 14 files changed, 365 insertions(+), 8 deletions(-) create mode 100644 packages/vant/src/block/Block.tsx create mode 100644 packages/vant/src/block/README.md create mode 100644 packages/vant/src/block/README.zh-CN.md create mode 100644 packages/vant/src/block/demo/index.vue create mode 100644 packages/vant/src/block/index.less create mode 100644 packages/vant/src/block/index.ts create mode 100644 packages/vant/src/block/test/demo-ssr.spec.ts create mode 100644 packages/vant/src/block/test/demo.spec.ts create mode 100644 packages/vant/src/block/test/index.spec.ts create mode 100644 packages/vant/src/block/types.ts diff --git a/packages/vant/package.json b/packages/vant/package.json index 04c22e8aeac..cde203a7f8f 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -48,13 +48,15 @@ "dependencies": { "@vant/popperjs": "workspace:^", "@vant/use": "workspace:^", - "@vue/shared": "^3.0.0" + "@vue/shared": "^3.0.0", + "transliteration": "^2.3.5" }, "peerDependencies": { "vue": "^3.0.0" }, "devDependencies": { "@types/node": "^18.16.3", + "@types/transliteration": "^1.6.6", "@vant/area-data": "workspace:*", "@vant/cli": "workspace:*", "@vant/eslint-config": "workspace:*", diff --git a/packages/vant/src/block/Block.tsx b/packages/vant/src/block/Block.tsx new file mode 100644 index 00000000000..43040c7a2bc --- /dev/null +++ b/packages/vant/src/block/Block.tsx @@ -0,0 +1,69 @@ +import { + ExtractPropTypes, + computed, + defineComponent, + nextTick, + watch, +} from 'vue'; +import { createNamespace } from '../utils'; +import { slugify } from 'transliteration'; + +const [name, bem] = createNamespace('block'); + +export const blockProps = { + card: { + type: Boolean, + default: false, + }, + title: { + type: String, + default: '', + }, +}; + +export type BlockProps = ExtractPropTypes; + +export default defineComponent({ + name, + + props: blockProps, + + setup(props, { slots }) { + const slugifyTitle = computed(() => (slugify ? slugify(props.title) : '')); + + watch( + () => slugifyTitle.value, + (val) => { + if (val) { + nextTick(() => { + let hash = ''; + if (top) { + hash = top.location.hash.split('#').pop() as string; + } else { + hash = location.hash.split('#').pop() as string; + } + const target = document.getElementById(val); + if (target && val === hash) { + target.scrollIntoView(true); + } + }); + } + }, + ); + + return () => ( +
+ {props.title ? ( +

+ {props.title} +

+ ) : null} + {props.card ? ( +
{slots.default?.()}
+ ) : ( + slots.default?.() + )} +
+ ); + }, +}); diff --git a/packages/vant/src/block/README.md b/packages/vant/src/block/README.md new file mode 100644 index 00000000000..af26e8005f1 --- /dev/null +++ b/packages/vant/src/block/README.md @@ -0,0 +1,58 @@ +# Button + +### Intro + +block components provide container like functionality. + +### Install + +Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways. + +```js +import { createApp } from 'vue'; +import { Block } from 'vant'; + +const app = createApp(); +app.use(Block); +``` + +## Usage + +### Base + +use as a container, passing in the 'title' attribute as the title. + +```html + + {{ t('default') }} + {{ t('primary') }} + {{ t('success') }} + +``` + +### Card + +set the container to card mode through the 'card' attribute. + +```html + + {{ t('default') }} + {{ t('primary') }} + {{ t('success') }} + +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| --------- | ----------- | --------- | ------- | +| title | Title | _string_ | `-` | +| card | Card mode | _boolean_ | `-` | + +### Slots + +| Name | Description | +| ------- | ------------ | +| default | Default slot | diff --git a/packages/vant/src/block/README.zh-CN.md b/packages/vant/src/block/README.zh-CN.md new file mode 100644 index 00000000000..4d07150432c --- /dev/null +++ b/packages/vant/src/block/README.zh-CN.md @@ -0,0 +1,58 @@ +# Block 块级组件 + +### 介绍 + +块级组件提供类似容器的功能 + +### 引入 + +通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。 + +```js +import { createApp } from 'vue'; +import { Block } from 'vant'; + +const app = createApp(); +app.use(Block); +``` + +## 代码演示 + +### 基础用法 + +当作一个容器来使用，传入 `title` 属性作为标题。 + +```html + + {{ t('default') }} + {{ t('primary') }} + {{ t('success') }} + +``` + +### 卡片模式 + +通过 `card` 属性将容器设置为卡片模式。 + +```html + + {{ t('default') }} + {{ t('primary') }} + {{ t('success') }} + +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| ----- | -------- | --------- | ------ | +| title | 标题 | _string_ | `-` | +| card | 卡片模式 | _boolean_ | `-` | + +### Slots + +| 名称 | 说明 | +| ------- | -------- | +| default | 默认插槽 | diff --git a/packages/vant/src/block/demo/index.vue b/packages/vant/src/block/demo/index.vue new file mode 100644 index 00000000000..74bd7521f31 --- /dev/null +++ b/packages/vant/src/block/demo/index.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/vant/src/block/index.less b/packages/vant/src/block/index.less new file mode 100644 index 00000000000..4532a52743b --- /dev/null +++ b/packages/vant/src/block/index.less @@ -0,0 +1,36 @@ +:root { + --van-block-title-padding: var(--van-padding-xl) var(--van-padding-md) + var(--van-padding-md); + --van-block-title-color: var(--van-doc-text-color-4); + --van-block-title-fint-size: var(--van-font-size-md); + --van-block-title-line-height: 16px; + --van-block-card-margin: var(--van-padding-md) var(--van-padding-md) 0; + --van-block-card-border-radius: var(--van-radius-lg); +} + +.van-block { + &__title { + margin: 0; + padding: var(--van-block-title-padding); + color: var(--van-block-title-color); + font-weight: normal; + font-size: var(--van-block-title-fint-size); + line-height: var(--van-block-title-line-height); + } + + &__card { + margin: var(--van-block-card-margin); + overflow: hidden; + border-radius: var(--van-block-card-border-radius); + } + + &__title + &__card { + margin-top: 0; + } + + &:first-of-type { + .van-block__title { + padding-top: 20px; + } + } +} diff --git a/packages/vant/src/block/index.ts b/packages/vant/src/block/index.ts new file mode 100644 index 00000000000..231cf8ea922 --- /dev/null +++ b/packages/vant/src/block/index.ts @@ -0,0 +1,14 @@ +import { withInstall } from '../utils'; +import _Block from './Block'; + +export const Block = withInstall(_Block); +export default Block; +export { blockProps } from './Block'; +export type { BlockProps } from './Block'; +export type { BlockThemeVars } from './types'; + +declare module 'vue' { + export interface GlobalComponents { + VanBlock: typeof Block; + } +} diff --git a/packages/vant/src/block/test/demo-ssr.spec.ts b/packages/vant/src/block/test/demo-ssr.spec.ts new file mode 100644 index 00000000000..e00f7b09342 --- /dev/null +++ b/packages/vant/src/block/test/demo-ssr.spec.ts @@ -0,0 +1,7 @@ +/** + * @vitest-environment node + */ +import Demo from '../demo/index.vue'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo, { ssr: true }); diff --git a/packages/vant/src/block/test/demo.spec.ts b/packages/vant/src/block/test/demo.spec.ts new file mode 100644 index 00000000000..c0e0c95b9a2 --- /dev/null +++ b/packages/vant/src/block/test/demo.spec.ts @@ -0,0 +1,4 @@ +import Demo from '../demo/index.vue'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/packages/vant/src/block/test/index.spec.ts b/packages/vant/src/block/test/index.spec.ts new file mode 100644 index 00000000000..20beced8774 --- /dev/null +++ b/packages/vant/src/block/test/index.spec.ts @@ -0,0 +1,40 @@ +import { mount } from '../../../test'; +import { Block } from '..'; + +test('should render default slot correctly', () => { + const wrapper = mount(Block, { + slots: { + default: () => 'text', + }, + }); + + const block = wrapper.find('.van-block'); + expect(block).exist.toBeTruthy(); + expect(block.text()).toBe('text'); +}); + +test('should render title correctly', () => { + const wrapper = mount(Block, { + props: { + title: 'title', + }, + }); + + const block = wrapper.find('.van-block'); + const title = block.find('.van-block__title'); + expect(title).exist.toBeTruthy(); + expect(title.text()).toBe('title'); +}); + +test('should render card mode correctly', () => { + const wrapper = mount(Block, { + props: { + title: 'title', + card: true, + }, + }); + + const block = wrapper.find('.van-block'); + const card = block.find('.van-block__card'); + expect(card).exist.toBeTruthy(); +}); diff --git a/packages/vant/src/block/types.ts b/packages/vant/src/block/types.ts new file mode 100644 index 00000000000..c3490efd548 --- /dev/null +++ b/packages/vant/src/block/types.ts @@ -0,0 +1,8 @@ +export type BlockThemeVars = { + blockTitlePading?: string; + blockTitleTextColor?: string; + blockTitleFontSize?: string; + blockTitleLineHeight?: string; + blockCardMargin?: string; + blockCardBorderRadius?: string; +}; diff --git a/packages/vant/src/config-provider/types.ts b/packages/vant/src/config-provider/types.ts index 44b2ab4e7c9..68cad1e20ee 100644 --- a/packages/vant/src/config-provider/types.ts +++ b/packages/vant/src/config-provider/types.ts @@ -7,6 +7,7 @@ export type ConfigProviderThemeVars = import('../address-list').AddressListThemeVars & import('../badge').BadgeThemeVars & import('../barrage').BarrageThemeVars & + import('../block').BlockThemeVars & import('../button').ButtonThemeVars & import('../calendar').CalendarThemeVars & import('../card').CardThemeVars & diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index 78640b77bce..70bd2022bc9 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -149,6 +149,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'toast', title: 'Toast 轻提示', }, + { + path: 'block', + title: 'Block 块级组件', + }, ], }, { @@ -617,6 +621,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'toast', title: 'Toast', }, + { + path: 'block', + title: 'Block', + }, ], }, { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 02c27eb5d5f..20caf8f2822 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,10 +66,16 @@ importers: '@vue/shared': specifier: ^3.0.0 version: 3.3.4 + transliteration: + specifier: ^2.3.5 + version: 2.3.5 devDependencies: '@types/node': specifier: ^18.16.3 version: 18.17.5 + '@types/transliteration': + specifier: ^1.6.6 + version: 1.6.6 '@vant/area-data': specifier: workspace:* version: link:../vant-area-data @@ -1014,6 +1020,13 @@ packages: resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==} dev: false + /@types/transliteration@1.6.6: + resolution: {integrity: sha512-drgWFeHgZt16bXKhsu4cP6TlunW3Pu9MS1l9w7Qnm+bcsqf4/pnjnO6/uMAziCV8rnmuU3iCSk7J2zio1nR1+A==} + deprecated: This is a stub types definition. transliteration provides its own type definitions, so you do not need this installed. + dependencies: + transliteration: 2.3.5 + dev: true + /@typescript-eslint/eslint-plugin@6.3.0(@typescript-eslint/parser@6.3.0)(eslint@8.47.0)(typescript@5.1.6): resolution: {integrity: sha512-IZYjYZ0ifGSLZbwMqIip/nOamFiWJ9AH+T/GYNZBWkVcyNQOFGtSMoWV7RvY4poYCMZ/4lHzNl796WOSNxmk8A==} engines: {node: ^16.0.0 || >=18.0.0} @@ -1541,7 +1554,6 @@ packages: string-width: 4.2.3 strip-ansi: 6.0.1 wrap-ansi: 7.0.0 - dev: false /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -2060,7 +2072,6 @@ packages: /get-caller-file@2.0.5: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} engines: {node: 6.* || 8.* || >= 10.*} - dev: false /get-func-name@2.0.0: resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==} @@ -2917,7 +2928,6 @@ packages: /require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} - dev: false /requires-port@1.0.0: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} @@ -3182,7 +3192,6 @@ packages: hasBin: true dependencies: yargs: 17.7.2 - dev: false /ts-api-utils@1.0.1(typescript@5.1.6): resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==} @@ -3560,7 +3569,6 @@ packages: /y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} - dev: false /yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} @@ -3576,7 +3584,6 @@ packages: /yargs-parser@21.1.1: resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} engines: {node: '>=12'} - dev: false /yargs@17.7.2: resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} @@ -3589,7 +3596,6 @@ packages: string-width: 4.2.3 y18n: 5.0.8 yargs-parser: 21.1.1 - dev: false /yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} From 2e17f5938ed630fc9618532809c5bb30b46be596 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=86=E6=B2=9B?= Date: Wed, 13 Sep 2023 16:09:31 +0800 Subject: [PATCH 2/6] feat(Block): add test --- .../test/__snapshots__/demo-ssr.spec.ts.snap | 97 +++++++++++++++++++ .../test/__snapshots__/demo.spec.ts.snap | 82 ++++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap create mode 100644 packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap diff --git a/packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap new file mode 100644 index 00000000000..ec1f16aa88b --- /dev/null +++ b/packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap @@ -0,0 +1,97 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`should render demo and match snapshot 1`] = ` + +
+

+ base +

+ + + + +
+
+

+ card +

+
+ + + + +
+
+`; diff --git a/packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 00000000000..4565086b330 --- /dev/null +++ b/packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,82 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`should render demo and match snapshot 1`] = ` +
+

+ base +

+ + + +
+
+

+ card +

+
+ + + +
+
+`; From e99753ac5a632f22a87df17f25f6daafdbe91635 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=86=E6=B2=9B?= Date: Thu, 14 Sep 2023 17:57:23 +0800 Subject: [PATCH 3/6] refactor(Block): delete third-party dependencie and add id attribute --- packages/vant/package.json | 4 +--- packages/vant/src/block/Block.tsx | 7 +++++-- packages/vant/src/block/README.md | 21 +++++++++++---------- packages/vant/src/block/README.zh-CN.md | 21 +++++++++++---------- packages/vant/src/block/demo/index.vue | 4 ++-- 5 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/vant/package.json b/packages/vant/package.json index 9e7b270338f..0dae009181c 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -48,15 +48,13 @@ "dependencies": { "@vant/popperjs": "workspace:^", "@vant/use": "workspace:^", - "@vue/shared": "^3.0.0", - "transliteration": "^2.3.5" + "@vue/shared": "^3.0.0" }, "peerDependencies": { "vue": "^3.0.0" }, "devDependencies": { "@types/node": "^18.16.3", - "@types/transliteration": "^1.6.6", "@vant/area-data": "workspace:*", "@vant/cli": "workspace:*", "@vant/eslint-config": "workspace:*", diff --git a/packages/vant/src/block/Block.tsx b/packages/vant/src/block/Block.tsx index 43040c7a2bc..372825e1c01 100644 --- a/packages/vant/src/block/Block.tsx +++ b/packages/vant/src/block/Block.tsx @@ -6,7 +6,6 @@ import { watch, } from 'vue'; import { createNamespace } from '../utils'; -import { slugify } from 'transliteration'; const [name, bem] = createNamespace('block'); @@ -19,6 +18,10 @@ export const blockProps = { type: String, default: '', }, + id: { + type: String, + default: '', + }, }; export type BlockProps = ExtractPropTypes; @@ -29,7 +32,7 @@ export default defineComponent({ props: blockProps, setup(props, { slots }) { - const slugifyTitle = computed(() => (slugify ? slugify(props.title) : '')); + const slugifyTitle = computed(() => props.id); watch( () => slugifyTitle.value, diff --git a/packages/vant/src/block/README.md b/packages/vant/src/block/README.md index af26e8005f1..0a642304fc0 100644 --- a/packages/vant/src/block/README.md +++ b/packages/vant/src/block/README.md @@ -24,9 +24,9 @@ use as a container, passing in the 'title' attribute as the title. ```html - {{ t('default') }} - {{ t('primary') }} - {{ t('success') }} + default + primary + success ``` @@ -36,9 +36,9 @@ set the container to card mode through the 'card' attribute. ```html - {{ t('default') }} - {{ t('primary') }} - {{ t('success') }} + default + primary + success ``` @@ -46,10 +46,11 @@ set the container to card mode through the 'card' attribute. ### Props -| Attribute | Description | Type | Default | -| --------- | ----------- | --------- | ------- | -| title | Title | _string_ | `-` | -| card | Card mode | _boolean_ | `-` | +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| title | Title | _string_ | `-` | +| card | Card mode | _boolean_ | `-` | +| id | Id，if you need to make an anchor jump, you need to pass in the | _string_ | `-` | ### Slots diff --git a/packages/vant/src/block/README.zh-CN.md b/packages/vant/src/block/README.zh-CN.md index 4d07150432c..46211aa9017 100644 --- a/packages/vant/src/block/README.zh-CN.md +++ b/packages/vant/src/block/README.zh-CN.md @@ -24,9 +24,9 @@ app.use(Block); ```html - {{ t('default') }} - {{ t('primary') }} - {{ t('success') }} + default + primary + success ``` @@ -36,9 +36,9 @@ app.use(Block); ```html - {{ t('default') }} - {{ t('primary') }} - {{ t('success') }} + default + primary + success ``` @@ -46,10 +46,11 @@ app.use(Block); ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ----- | -------- | --------- | ------ | -| title | 标题 | _string_ | `-` | -| card | 卡片模式 | _boolean_ | `-` | +| 参数 | 说明 | 类型 | 默认值 | +| ----- | ------------------------------------ | --------- | ------ | +| title | 标题 | _string_ | `-` | +| card | 卡片模式 | _boolean_ | `-` | +| id | 组件`id`，如果需要做锚点跳转则需传入 | _string_ | `-` | ### Slots diff --git a/packages/vant/src/block/demo/index.vue b/packages/vant/src/block/demo/index.vue index 74bd7521f31..19b5581aec2 100644 --- a/packages/vant/src/block/demo/index.vue +++ b/packages/vant/src/block/demo/index.vue @@ -12,8 +12,8 @@ const t = useTranslate({ success: '成功按钮', }, 'en-US': { - base: 'base', - card: 'card', + base: 'Base', + card: 'Card', default: 'Default', primary: 'Primary', success: 'Success', From 5f2e6259e0c4efc8e75f7e6380664b518c0b476d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=86=E6=B2=9B?= Date: Fri, 15 Sep 2023 14:56:35 +0800 Subject: [PATCH 4/6] refactor(Block): delete slugifyTitle attribute --- packages/vant/src/block/Block.tsx | 36 ++----------------------- packages/vant/src/block/README.md | 9 +++---- packages/vant/src/block/README.zh-CN.md | 9 +++---- 3 files changed, 10 insertions(+), 44 deletions(-) diff --git a/packages/vant/src/block/Block.tsx b/packages/vant/src/block/Block.tsx index 372825e1c01..095e9b48f1d 100644 --- a/packages/vant/src/block/Block.tsx +++ b/packages/vant/src/block/Block.tsx @@ -1,10 +1,4 @@ -import { - ExtractPropTypes, - computed, - defineComponent, - nextTick, - watch, -} from 'vue'; +import { ExtractPropTypes, defineComponent } from 'vue'; import { createNamespace } from '../utils'; const [name, bem] = createNamespace('block'); @@ -32,35 +26,9 @@ export default defineComponent({ props: blockProps, setup(props, { slots }) { - const slugifyTitle = computed(() => props.id); - - watch( - () => slugifyTitle.value, - (val) => { - if (val) { - nextTick(() => { - let hash = ''; - if (top) { - hash = top.location.hash.split('#').pop() as string; - } else { - hash = location.hash.split('#').pop() as string; - } - const target = document.getElementById(val); - if (target && val === hash) { - target.scrollIntoView(true); - } - }); - } - }, - ); - return () => (
- {props.title ? ( -

- {props.title} -

- ) : null} + {props.title ?

{props.title}

: null} {props.card ? (
{slots.default?.()}
) : ( diff --git a/packages/vant/src/block/README.md b/packages/vant/src/block/README.md index 0a642304fc0..52c6216e555 100644 --- a/packages/vant/src/block/README.md +++ b/packages/vant/src/block/README.md @@ -46,11 +46,10 @@ set the container to card mode through the 'card' attribute. ### Props -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| title | Title | _string_ | `-` | -| card | Card mode | _boolean_ | `-` | -| id | Id，if you need to make an anchor jump, you need to pass in the | _string_ | `-` | +| Attribute | Description | Type | Default | +| --------- | ----------- | --------- | ------- | +| title | Title | _string_ | `-` | +| card | Card mode | _boolean_ | `-` | ### Slots diff --git a/packages/vant/src/block/README.zh-CN.md b/packages/vant/src/block/README.zh-CN.md index 46211aa9017..b9098525c7f 100644 --- a/packages/vant/src/block/README.zh-CN.md +++ b/packages/vant/src/block/README.zh-CN.md @@ -46,11 +46,10 @@ app.use(Block); ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ----- | ------------------------------------ | --------- | ------ | -| title | 标题 | _string_ | `-` | -| card | 卡片模式 | _boolean_ | `-` | -| id | 组件`id`，如果需要做锚点跳转则需传入 | _string_ | `-` | +| 参数 | 说明 | 类型 | 默认值 | +| ----- | -------- | --------- | ------ | +| title | 标题 | _string_ | `-` | +| card | 卡片模式 | _boolean_ | `-` | ### Slots From d83824c249fbb87a7e01dd75c7829c0222b87741 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=94=E6=9C=88=E7=9A=84=E5=A4=8F=E5=A4=A9?= <285258675@qq.com> Date: Sat, 30 Sep 2023 15:39:34 +0800 Subject: [PATCH 5/6] =?UTF-8?q?chore(block):=20=E6=9B=B4=E6=96=B0=E4=BE=9D?= =?UTF-8?q?=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20caf8f2822..02c27eb5d5f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,16 +66,10 @@ importers: '@vue/shared': specifier: ^3.0.0 version: 3.3.4 - transliteration: - specifier: ^2.3.5 - version: 2.3.5 devDependencies: '@types/node': specifier: ^18.16.3 version: 18.17.5 - '@types/transliteration': - specifier: ^1.6.6 - version: 1.6.6 '@vant/area-data': specifier: workspace:* version: link:../vant-area-data @@ -1020,13 +1014,6 @@ packages: resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==} dev: false - /@types/transliteration@1.6.6: - resolution: {integrity: sha512-drgWFeHgZt16bXKhsu4cP6TlunW3Pu9MS1l9w7Qnm+bcsqf4/pnjnO6/uMAziCV8rnmuU3iCSk7J2zio1nR1+A==} - deprecated: This is a stub types definition. transliteration provides its own type definitions, so you do not need this installed. - dependencies: - transliteration: 2.3.5 - dev: true - /@typescript-eslint/eslint-plugin@6.3.0(@typescript-eslint/parser@6.3.0)(eslint@8.47.0)(typescript@5.1.6): resolution: {integrity: sha512-IZYjYZ0ifGSLZbwMqIip/nOamFiWJ9AH+T/GYNZBWkVcyNQOFGtSMoWV7RvY4poYCMZ/4lHzNl796WOSNxmk8A==} engines: {node: ^16.0.0 || >=18.0.0} @@ -1554,6 +1541,7 @@ packages: string-width: 4.2.3 strip-ansi: 6.0.1 wrap-ansi: 7.0.0 + dev: false /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -2072,6 +2060,7 @@ packages: /get-caller-file@2.0.5: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} engines: {node: 6.* || 8.* || >= 10.*} + dev: false /get-func-name@2.0.0: resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==} @@ -2928,6 +2917,7 @@ packages: /require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} + dev: false /requires-port@1.0.0: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} @@ -3192,6 +3182,7 @@ packages: hasBin: true dependencies: yargs: 17.7.2 + dev: false /ts-api-utils@1.0.1(typescript@5.1.6): resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==} @@ -3569,6 +3560,7 @@ packages: /y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} + dev: false /yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} @@ -3584,6 +3576,7 @@ packages: /yargs-parser@21.1.1: resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} engines: {node: '>=12'} + dev: false /yargs@17.7.2: resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} @@ -3596,6 +3589,7 @@ packages: string-width: 4.2.3 y18n: 5.0.8 yargs-parser: 21.1.1 + dev: false /yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} From ec4a07ed67c7e785201adfaa210bd8baf6d4c61a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=94=E6=9C=88=E7=9A=84=E5=A4=8F=E5=A4=A9?= <285258675@qq.com> Date: Sat, 30 Sep 2023 16:18:40 +0800 Subject: [PATCH 6/6] test(block): run test --- packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap | 1 - packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap index ec1f16aa88b..c9d5f61e323 100644 --- a/packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/block/test/__snapshots__/demo-ssr.spec.ts.snap @@ -5,7 +5,6 @@ exports[`should render demo and match snapshot 1`] = `

base

diff --git a/packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap index 4565086b330..09d279bced1 100644 --- a/packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/block/test/__snapshots__/demo.spec.ts.snap @@ -4,7 +4,6 @@ exports[`should render demo and match snapshot 1`] = `

base