From 4c6d7f9ca20230763315e090fde4c54ba7af2ef7 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Thu, 28 Dec 2023 22:53:10 +0800 Subject: [PATCH] refactor(docs): [tour] use `ButtonInstance` and format code (#15304) --- docs/en-US/component/tour.md | 91 +++++++++++++++--------------- docs/examples/tour/basic.vue | 8 +-- docs/examples/tour/indicator.vue | 8 +-- docs/examples/tour/mask.vue | 8 +-- docs/examples/tour/non-modal.vue | 8 +-- docs/examples/tour/placement.vue | 4 +- packages/theme-chalk/src/tour.scss | 27 +++++---- 7 files changed, 79 insertions(+), 75 deletions(-) diff --git a/docs/en-US/component/tour.md b/docs/en-US/component/tour.md index 0d43a1760a..f27b0535dc 100644 --- a/docs/en-US/component/tour.md +++ b/docs/en-US/component/tour.md @@ -57,7 +57,6 @@ tour/indicator ::: - ## Tour API :::tip @@ -66,64 +65,64 @@ tour-step component configuration with the same name has higher priority ### Tour Attributes -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| show-arrow | whether to show the arrow | `boolean` | true | -| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` | -| content-style | custom style for content | `CSSProperties` | - | -| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` | -| type | type, affects the background color and text color | `default` \| `primary` | `default` | -| model-value / v-model | open tour | `boolean` | - | -| current / v-model:current | what is the current step | `number` | - | -| scroll-into-view-options | support pass custom scrollIntoView options | `boolean` \| `ScrollIntoViewOptions` | ^[Object]`{ block: 'center' }` | -| z-index | Tour's zIndex | `number` | `2001` | -| show-close | whether to show a close button | `boolean` | `true` | -| close-icon | custom close icon, default is Close | `string` \| `Component` | - | -| close-on-press-escape | whether the Dialog can be closed by pressing ESC | `boolean` | `true` | -| target-area-clickable | whether the target element can be clickable, when using mask | `boolean` | `true` | +| Property | Description | Type | Default | +| ------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| show-arrow | whether to show the arrow | `boolean` | true | +| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` | +| content-style | custom style for content | `CSSProperties` | - | +| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` | +| type | type, affects the background color and text color | `default` \| `primary` | `default` | +| model-value / v-model | open tour | `boolean` | - | +| current / v-model:current | what is the current step | `number` | - | +| scroll-into-view-options | support pass custom scrollIntoView options | `boolean` \| `ScrollIntoViewOptions` | ^[Object]`{ block: 'center' }` | +| z-index | Tour's zIndex | `number` | `2001` | +| show-close | whether to show a close button | `boolean` | `true` | +| close-icon | custom close icon, default is Close | `string` \| `Component` | - | +| close-on-press-escape | whether the Dialog can be closed by pressing ESC | `boolean` | `true` | +| target-area-clickable | whether the target element can be clickable, when using mask | `boolean` | `true` | ### Tour slots -| Name | Description | -| ------------------- | -------------------------- | -| default | tourStep component list | -| indicators | custom indicator, The scope parameter is `{ current, total }` | +| Name | Description | +| ---------- | ------------------------------------------------------------- | +| default | tourStep component list | +| indicators | custom indicator, The scope parameter is `{ current, total }` | ### Tour events -| Name | Description | Type | -| --- | --- | --- | -| close | callback function on shutdown | ^[Function]`(current: number) => void` | -| finish | callback function on finished | ^[Function]`() => void` | +| Name | Description | Type | +| ------ | ------------------------------ | -------------------------------------- | +| close | callback function on shutdown | ^[Function]`(current: number) => void` | +| finish | callback function on finished | ^[Function]`() => void` | | change | callback when the step changes | ^[Function]`(current: number) => void` | ### TourStep Attributes -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| target | get the element the guide card points to. Empty makes it show in center of screen | `HTMLElement` | - | -| show-arrow | whether to show the arrow | `boolean` | `true` | -| title | title | `string` | - | -| description | description | `string` | - | -| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` | -| content-style | custom style for content | `CSSProperties` | - | -| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` | -| type | type, affects the background color and text color | `default` \| `primary` | `default` | -| next-button-props | properties of the Next button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - | -| prev-button-props | properties of the previous button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - | -| scroll-into-view-options | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | `boolean` \| `ScrollIntoViewOptions` | - | -| show-close | whether to show a close button | `boolean` | `true` | -| close-icon | custom close icon, default is Close | `string` \| `Component` | - | +| Property | Description | Type | Default | +| ------------------------ | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| target | get the element the guide card points to. Empty makes it show in center of screen | `HTMLElement` | - | +| show-arrow | whether to show the arrow | `boolean` | `true` | +| title | title | `string` | - | +| description | description | `string` | - | +| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` | +| content-style | custom style for content | `CSSProperties` | - | +| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` | +| type | type, affects the background color and text color | `default` \| `primary` | `default` | +| next-button-props | properties of the Next button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - | +| prev-button-props | properties of the previous button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - | +| scroll-into-view-options | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | `boolean` \| `ScrollIntoViewOptions` | - | +| show-close | whether to show a close button | `boolean` | `true` | +| close-icon | custom close icon, default is Close | `string` \| `Component` | - | ### TourStep slots -| Name | Description | -| ------------------- | ---------------------------- | -| default | description | -| title | title | +| Name | Description | +| ------- | ----------- | +| default | description | +| title | title | ### TourStep events -| Name | Description | Arguments | -| ----------- | ----------------------------- | ---------- | -| close | callback function on shutdown | ^[Function]`() => void` | \ No newline at end of file +| Name | Description | Arguments | +| ----- | ----------------------------- | ----------------------- | +| close | callback function on shutdown | ^[Function]`() => void` | diff --git a/docs/examples/tour/basic.vue b/docs/examples/tour/basic.vue index aeb50402e2..8d2e79382d 100644 --- a/docs/examples/tour/basic.vue +++ b/docs/examples/tour/basic.vue @@ -32,12 +32,12 @@ diff --git a/docs/examples/tour/indicator.vue b/docs/examples/tour/indicator.vue index 8846a5a6c2..c9810b5e78 100644 --- a/docs/examples/tour/indicator.vue +++ b/docs/examples/tour/indicator.vue @@ -33,12 +33,12 @@ diff --git a/docs/examples/tour/mask.vue b/docs/examples/tour/mask.vue index ebd95079b3..c9aded87e2 100644 --- a/docs/examples/tour/mask.vue +++ b/docs/examples/tour/mask.vue @@ -47,12 +47,12 @@ diff --git a/docs/examples/tour/non-modal.vue b/docs/examples/tour/non-modal.vue index 6417de89be..402d2fe031 100644 --- a/docs/examples/tour/non-modal.vue +++ b/docs/examples/tour/non-modal.vue @@ -30,12 +30,12 @@ diff --git a/docs/examples/tour/placement.vue b/docs/examples/tour/placement.vue index 080b48bdfe..fb6e3cbfea 100644 --- a/docs/examples/tour/placement.vue +++ b/docs/examples/tour/placement.vue @@ -25,9 +25,9 @@ diff --git a/packages/theme-chalk/src/tour.scss b/packages/theme-chalk/src/tour.scss index 773382cdaa..5ac19f2459 100644 --- a/packages/theme-chalk/src/tour.scss +++ b/packages/theme-chalk/src/tour.scss @@ -11,7 +11,7 @@ transition: all getCssVar('transition-duration') ease; } - @include e(content) { + @include e(content) { padding: 0; border-radius: getCssVar('tour-border-radius'); border: 1px solid getCssVar('tour-border-color'); @@ -40,8 +40,13 @@ box-sizing: border-box; @each $side, - $adjacency - in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') + $adjacency + in ( + 'top': 'left', + 'bottom': 'right', + 'left': 'bottom', + 'right': 'top' + ) { #{$content-selector}[data-side^='#{$side}'] & { border-#{$side}-color: transparent; @@ -56,7 +61,6 @@ } } - @include e(closebtn) { position: absolute; top: 6px; @@ -103,7 +107,8 @@ padding: 0 getCssVar('tour-padding-primary'); color: getCssVar('tour-text-color'); font-size: getCssVar('tour-font-size'); - img, video { + img, + video { max-width: 100%; } } @@ -136,19 +141,19 @@ } &.#{$namespace}-tour--primary { - @include set-css-var-value('tour-title-text-color',#fff); - @include set-css-var-value('tour-text-color',#fff); + @include set-css-var-value('tour-title-text-color', #fff); + @include set-css-var-value('tour-text-color', #fff); @include set-css-var-value('tour-bg-color', getCssVar('color', 'primary')); - + .#{$namespace}-button--default { color: getCssVar('color', 'primary'); border-color: getCssVar('color', 'primary'); background: #fff; - } + } .#{$namespace}-button--primary { border-color: #fff; - } + } @include b(tour-indicator) { background: rgba(255, 255, 255, 0.15); @@ -163,4 +168,4 @@ @include m(hidden) { overflow: hidden; } -} \ No newline at end of file +}