fix(comp:tour): tour closable should be configurable (#1622)

IDuxFE · Aug 4, 2023 · 409c280 · 409c280
1 parent 8c36d26
commit 409c280
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 6 deletions.
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -379,6 +379,7 @@ export const defaultConfig: GlobalConfig = {
     scrollIntoViewOptions: true,
     closeOnClick: false,
     closeOnEsc: true,
+    closable: true,
   },
   tree: {
     autoHeight: false,

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -558,6 +558,7 @@ export interface TourConfig {
   scrollIntoViewOptions: boolean | ScrollIntoViewOptions
   closeOnClick: boolean
   closeOnEsc: boolean
+  closable: boolean
 }
 
 export interface TreeConfig {

diff --git a/packages/components/tour/demo/Closable.md b/packages/components/tour/demo/Closable.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh: 可关闭配置
+  en: Closable config
+---
+
+## zh
+
+通过 `closable` 配置是否可关闭。
+
+## en
+
+Set tour closable by clicking close button via `closable` prop.
diff --git a/packages/components/tour/demo/Closable.vue b/packages/components/tour/demo/Closable.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <IxButton @click="beginTour">Begin</IxButton>
+    <IxDivider />
+    <IxSpace>
+      <div ref="firstBtnRef">
+        <IxButton>Step1</IxButton>
+      </div>
+      <div ref="secondBtnRef">
+        <IxButton>Step2</IxButton>
+      </div>
+      <div ref="thirdBtnRef">
+        <IxButton>Step3</IxButton>
+      </div>
+    </IxSpace>
+  </div>
+  <IxTour
+    v-model:visible="tourVisible"
+    :steps="steps"
+    :closable="false"
+    :onClose="onClose"
+    :onFinish="onFinish"
+  ></IxTour>
+</template>
+
+<script setup lang="ts">
+import type { TourStep } from '@idux/components/tour'
+
+import { ref } from 'vue'
+
+const tourVisible = ref(false)
+
+const beginTour = () => (tourVisible.value = true)
+
+const firstBtnRef = ref<HTMLElement>()
+const secondBtnRef = ref<HTMLElement>()
+const thirdBtnRef = ref<HTMLElement>()
+
+const steps: TourStep[] = [
+  {
+    title: 'Step1',
+    description: 'this is description...',
+    target: () => firstBtnRef.value,
+  },
+  {
+    description: 'this is description...',
+    target: () => secondBtnRef.value,
+  },
+  {
+    title: 'Step3',
+    description: 'this is description...',
+    target: () => thirdBtnRef.value,
+  },
+]
+
+const onClose = () => {
+  console.log('onClose')
+}
+const onFinish = () => {
+  console.log('onFinish')
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/packages/components/tour/docs/Api.zh.md b/packages/components/tour/docs/Api.zh.md
@@ -6,6 +6,7 @@
 | --- | --- | --- | --- | --- | --- |
 | `v-model:activeIndex` | 当前激活状态的`step`索引 | `number` | - | - | - |
 | `v-model:visible` | 显示状态 | `boolean` | - | - | - |
+| `closable` | 是否可关闭 | `boolean` | `true` | ✅ | - |
 | `closeOnEsc` | 是否在按下`Esc`键时触发关闭 | `boolean` | `true` | ✅ | - |
 | `animatable` | 是否开启动画 | `boolean` | `true` | ✅ | - |
 | `gap` | 遮罩的目标位置区域的间距和圆角 | `{ offset: number, radius: number }` | `{ offset: 4, radius: 2 }` | ✅ | - |

diff --git a/packages/components/tour/src/Panel.tsx b/packages/components/tour/src/Panel.tsx
@@ -46,11 +46,16 @@ export default defineComponent({
 
     const renderHeader = () => {
       const { step: { title = undefined } = {}, activeIndex = 0 } = renderData.value ?? {}
+      const { closable } = mergedProps.value
+
+      if (!title && !slots.title && !slots.header && !closable) {
+        return
+      }
 
       return (
         <ɵHeader
           size="sm"
-          closable={true}
+          closable={closable}
           closeIcon="close"
           header={title}
           onClose={handleClose}
@@ -124,10 +129,13 @@ export default defineComponent({
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-panel`
 
+      const header = renderHeader()
+      const innerCls = [`${prefixCls}-inner`, header ? undefined : `${prefixCls}-inner-no-header`]
+
       return (
         <div class={prefixCls} onClick={evt => evt.stopImmediatePropagation()}>
-          {renderHeader()}
-          <div class={`${prefixCls}-inner`}>
+          {header}
+          <div class={innerCls}>
             {renderDescription(prefixCls)}
             <div class={`${prefixCls}-footer`}>
               {renderIndicators(prefixCls)}

diff --git a/packages/components/tour/src/composables/useMergedProps.ts b/packages/components/tour/src/composables/useMergedProps.ts
@@ -25,5 +25,6 @@ export function useMergedProps(props: TourProps, config: TourConfig): ComputedRe
     scrollIntoViewOptions: props.scrollIntoViewOptions ?? config.scrollIntoViewOptions,
     closeOnClick: props.closeOnClick ?? config.closeOnClick,
     closeOnEsc: props.closeOnEsc ?? config.closeOnEsc,
+    closable: props.closable ?? config.closable,
   }))
 }
diff --git a/packages/components/tour/src/types.ts b/packages/components/tour/src/types.ts
@@ -74,6 +74,10 @@ export const tourProps = {
     default: undefined,
   },
 
+  closable: {
+    type: Boolean,
+    default: undefined,
+  },
   closeOnClick: {
     type: Boolean,
     default: undefined,

diff --git a/packages/components/tour/style/index.less b/packages/components/tour/style/index.less
@@ -34,7 +34,7 @@
   }
 
   &-panel {
-    width: @tour-panel-width;
+    min-width: @tour-panel-min-width;
     background-color: @tour-panel-background-color;
     border-radius: @tour-panel-border-radius;
     .reset-component();
@@ -46,6 +46,10 @@
 
     &-inner {
       padding: 0 @tour-panel-padding-right  @tour-panel-padding-bottom @tour-panel-padding-left;
+
+      &-no-header {
+        padding-top: @tour-panel-padding-top;
+      }
     }
 
     &-description {

diff --git a/packages/components/tour/style/themes/default.variable.less b/packages/components/tour/style/themes/default.variable.less
@@ -1,13 +1,14 @@
 @tour-panel-description-color: var(--ix-text-color);
-@tour-panel-description-font-size: var(--ix-font-size-md);
+@tour-panel-description-font-size: var(--ix-font-size-sm);
 @tour-panel-indicators-color: var(--ix-text-color-info);
 @tour-panel-indicators-font-size: var(--ix-font-size-md);
 @tour-panel-background-color: var(--ix-background-color);
 @tour-panel-border-radius: var(--ix-border-radius-md);
 @tour-panel-box-shadow: @shadow-bottom-sm;
 
-@tour-panel-width: 250px;
+@tour-panel-min-width: 250px;
 
+@tour-panel-padding-top: 16px;
 @tour-panel-padding-left: 16px;
 @tour-panel-padding-right: 16px;
 @tour-panel-padding-bottom: 16px;