feat: new component tour

packages/varlet-ui/src/locale/en-US.ts

@@ -104,4 +104,8 @@ export default {
   paginationJump: 'Go to',
   // time-picker
   timePickerHint: 'SELECT TIME',
+  // tour
+  tourPrevious: 'previous',
+  tourNext: 'next',
+  tourFinish: 'finish',
 } satisfies Message

packages/varlet-ui/src/locale/zh-CN.ts

@@ -104,4 +104,8 @@ export default {
   paginationJump: '前往',
   // time-picker
   timePickerHint: '选择时间',
+  // tour
+  tourPrevious: '上一步',
+  tourNext: '下一步',
+  tourFinish: '结束引导',
 } satisfies Message

packages/varlet-ui/src/locale/zh-TW.ts

@@ -104,4 +104,8 @@ export default {
   paginationJump: '前往',
   // time-picker
   timePickerHint: '選擇時間',
+  // tour
+  tourPrevious: '上一步',
+  tourNext: '下一步',
+  tourFinish: '結束引導',
 } satisfies Message

packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap

@@ -861,6 +861,29 @@ exports[`dark theme 1`] = `
   "--tooltip-success-text-color": "var(--color-on-success)",
   "--tooltip-warning-color": "var(--color-warning)",
   "--tooltip-warning-text-color": "var(--color-on-warning)",
+  "--tour-actions-padding": "0 12px 12px 20px",
+  "--tour-background": "var(--color-surface-container-low)",
+  "--tour-border-radius": "3px",
+  "--tour-close-button-right": "20px",
+  "--tour-close-button-top": "20px",
+  "--tour-indicator-background-color": "var(--color-surface-container-highest)",
+  "--tour-message-color": "#bbb",
+  "--tour-message-font-size": "var(--font-size-md)",
+  "--tour-message-line-height": "24px",
+  "--tour-message-padding": "12px 20px",
+  "--tour-next-button-color": "var(--color-primary)",
+  "--tour-prev-button-color": "var(--color-primary)",
+  "--tour-primary-background": "var(--color-primary)",
+  "--tour-primary-indicator-active-background-color": "var(--color-on-primary)",
+  "--tour-primary-indicator-background-color": "rgba(255, 255, 255, 0.15)",
+  "--tour-primary-message-color": "var(--color-on-info)",
+  "--tour-primary-next-button-color": "var(--color-on-primary)",
+  "--tour-primary-prev-button-color": "var(--color-on-primary)",
+  "--tour-primary-title-color": "var(--color-on-primary)",
+  "--tour-title-color": "#fff",
+  "--tour-title-font-size": "var(--font-size-lg)",
+  "--tour-title-padding": "20px 20px 0",
+  "--tour-width": "280px",
   "--uploader-action-background": "#303030",
   "--uploader-action-icon-color": "#fff",
   "--uploader-action-icon-size": "24px",
@@ -1759,6 +1782,29 @@ exports[`md3Dark theme 1`] = `
   "--tooltip-success-text-color": "var(--color-on-success)",
   "--tooltip-warning-color": "var(--color-warning)",
   "--tooltip-warning-text-color": "var(--color-on-warning)",
+  "--tour-actions-padding": "0 24px 24px",
+  "--tour-background": "var(--color-surface-container-high)",
+  "--tour-border-radius": "28px",
+  "--tour-close-button-right": "24px",
+  "--tour-close-button-top": "28px",
+  "--tour-indicator-background-color": "var(--color-surface-container-low)",
+  "--tour-message-color": "var(--color-on-surface-variant)",
+  "--tour-message-font-size": "var(--font-size-md)",
+  "--tour-message-line-height": "24px",
+  "--tour-message-padding": "16px 24px 24px",
+  "--tour-next-button-color": "var(--color-primary)",
+  "--tour-prev-button-color": "var(--color-primary)",
+  "--tour-primary-background": "var(--color-primary)",
+  "--tour-primary-indicator-active-background-color": "var(--color-on-primary)",
+  "--tour-primary-indicator-background-color": "rgba(0, 0, 0, 0.15)",
+  "--tour-primary-message-color": "var(--color-on-info)",
+  "--tour-primary-next-button-color": "var(--color-on-primary)",
+  "--tour-primary-prev-button-color": "var(--color-on-primary)",
+  "--tour-primary-title-color": "var(--color-on-primary)",
+  "--tour-title-color": "var(--color-inverse-surface)",
+  "--tour-title-font-size": "20px",
+  "--tour-title-padding": "24px 24px 0",
+  "--tour-width": "312px",
   "--uploader-action-background": "var(--color-surface-container-highest)",
   "--uploader-action-icon-color": "var(--color-on-surface-variant)",
   "--uploader-action-icon-size": "24px",
@@ -2639,6 +2685,29 @@ exports[`md3Light theme 1`] = `
   "--tooltip-success-text-color": "var(--color-on-success)",
   "--tooltip-warning-color": "var(--color-warning)",
   "--tooltip-warning-text-color": "var(--color-on-warning)",
+  "--tour-actions-padding": "0 24px 24px",
+  "--tour-background": "var(--color-surface-container-high)",
+  "--tour-border-radius": "28px",
+  "--tour-close-button-right": "24px",
+  "--tour-close-button-top": "28px",
+  "--tour-indicator-background-color": "var(--color-surface-container-low)",
+  "--tour-message-color": "var(--color-on-surface-variant)",
+  "--tour-message-font-size": "var(--font-size-md)",
+  "--tour-message-line-height": "24px",
+  "--tour-message-padding": "16px 24px 24px",
+  "--tour-next-button-color": "var(--color-primary)",
+  "--tour-prev-button-color": "var(--color-primary)",
+  "--tour-primary-background": "var(--color-primary)",
+  "--tour-primary-indicator-active-background-color": "var(--color-on-primary)",
+  "--tour-primary-indicator-background-color": "rgba(255, 255, 255, 0.15)",
+  "--tour-primary-message-color": "var(--color-on-info)",
+  "--tour-primary-next-button-color": "var(--color-on-primary)",
+  "--tour-primary-prev-button-color": "var(--color-on-primary)",
+  "--tour-primary-title-color": "var(--color-on-primary)",
+  "--tour-title-color": "#1D1B20",
+  "--tour-title-font-size": "20px",
+  "--tour-title-padding": "24px 24px 0",
+  "--tour-width": "312px",
   "--uploader-action-background": "var(--color-surface-container-low)",
   "--uploader-action-icon-color": "var(--color-on-surface-variant)",
   "--uploader-action-icon-size": "24px",

packages/varlet-ui/src/themes/dark/index.ts

@@ -63,6 +63,7 @@ import table from './table'
 import tabs from './tabs'
 import timePicker from './timePicker'
 import tooltip from './tooltip'
+import tour from './tour'
 import uploader from './uploader'
 import watermark from './watermark'
 
@@ -211,4 +212,5 @@ export default {
   ...select,
   ...code,
   ...signature,
+  ...tour,
 } as StyleVars

packages/varlet-ui/src/themes/dark/tour.ts

@@ -0,0 +1,25 @@
+export default {
+  '--tour-width': '280px',
+  '--tour-background': 'var(--color-surface-container-low)',
+  '--tour-border-radius': '3px',
+  '--tour-title-padding': '20px 20px 0',
+  '--tour-title-color': '#fff',
+  '--tour-title-font-size': 'var(--font-size-lg)',
+  '--tour-message-color': '#bbb',
+  '--tour-message-padding': '12px 20px',
+  '--tour-message-font-size': 'var(--font-size-md)',
+  '--tour-message-line-height': '24px',
+  '--tour-indicator-background-color': 'var(--color-surface-container-highest)',
+  '--tour-actions-padding': '0 12px 12px 20px',
+  '--tour-next-button-color': 'var(--color-primary)',
+  '--tour-prev-button-color': 'var(--color-primary)',
+  '--tour-close-button-right': '20px',
+  '--tour-close-button-top': '20px',
+  '--tour-primary-background': 'var(--color-primary)',
+  '--tour-primary-title-color': 'var(--color-on-primary)',
+  '--tour-primary-message-color': 'var(--color-on-info)',
+  '--tour-primary-indicator-background-color': 'rgba(255, 255, 255, 0.15)',
+  '--tour-primary-indicator-active-background-color': 'var(--color-on-primary)',
+  '--tour-primary-next-button-color': 'var(--color-on-primary)',
+  '--tour-primary-prev-button-color': 'var(--color-on-primary)',
+}

packages/varlet-ui/src/themes/md3-dark/index.ts

@@ -63,6 +63,7 @@ import table from './table'
 import tabs from './tabs'
 import timePicker from './timePicker'
 import tooltip from './tooltip'
+import tour from './tour'
 import uploader from './uploader'
 import watermark from './watermark'
 
@@ -211,4 +212,5 @@ export default {
   ...swipe,
   ...code,
   ...signature,
+  ...tour,
 } as StyleVars

packages/varlet-ui/src/themes/md3-dark/tour.ts

@@ -0,0 +1,25 @@
+export default {
+  '--tour-width': '312px',
+  '--tour-background': 'var(--color-surface-container-high)',
+  '--tour-border-radius': '28px',
+  '--tour-title-padding': '24px 24px 0',
+  '--tour-title-color': 'var(--color-inverse-surface)',
+  '--tour-title-font-size': '20px',
+  '--tour-message-color': 'var(--color-on-surface-variant)',
+  '--tour-message-padding': '16px 24px 24px',
+  '--tour-message-font-size': 'var(--font-size-md)',
+  '--tour-message-line-height': '24px',
+  '--tour-indicator-background-color': 'var(--color-surface-container-low)',
+  '--tour-actions-padding': '0 24px 24px',
+  '--tour-next-button-color': 'var(--color-primary)',
+  '--tour-prev-button-color': 'var(--color-primary)',
+  '--tour-close-button-right': '24px',
+  '--tour-close-button-top': '28px',
+  '--tour-primary-background': 'var(--color-primary)',
+  '--tour-primary-title-color': 'var(--color-on-primary)',
+  '--tour-primary-message-color': 'var(--color-on-info)',
+  '--tour-primary-indicator-background-color': 'rgba(0, 0, 0, 0.15)',
+  '--tour-primary-indicator-active-background-color': 'var(--color-on-primary)',
+  '--tour-primary-next-button-color': 'var(--color-on-primary)',
+  '--tour-primary-prev-button-color': 'var(--color-on-primary)',
+}

packages/varlet-ui/src/themes/md3-light/index.ts

@@ -63,6 +63,7 @@ import table from './table'
 import tabs from './tabs'
 import timePicker from './timePicker'
 import tooltip from './tooltip'
+import tour from './tour'
 import uploader from './uploader'
 import watermark from './watermark'
 
@@ -211,4 +212,5 @@ export default {
   ...appBar,
   ...code,
   ...signature,
+  ...tour,
 } as StyleVars

packages/varlet-ui/src/themes/md3-light/tour.ts

@@ -0,0 +1,25 @@
+export default {
+  '--tour-width': '312px',
+  '--tour-background': 'var(--color-surface-container-high)',
+  '--tour-border-radius': '28px',
+  '--tour-title-padding': '24px 24px 0',
+  '--tour-title-color': '#1D1B20',
+  '--tour-title-font-size': '20px',
+  '--tour-message-color': 'var(--color-on-surface-variant)',
+  '--tour-message-padding': '16px 24px 24px',
+  '--tour-message-font-size': 'var(--font-size-md)',
+  '--tour-message-line-height': '24px',
+  '--tour-indicator-background-color': 'var(--color-surface-container-low)',
+  '--tour-actions-padding': '0 24px 24px',
+  '--tour-next-button-color': 'var(--color-primary)',
+  '--tour-prev-button-color': 'var(--color-primary)',
+  '--tour-close-button-right': '24px',
+  '--tour-close-button-top': '28px',
+  '--tour-primary-background': 'var(--color-primary)',
+  '--tour-primary-title-color': 'var(--color-on-primary)',
+  '--tour-primary-message-color': 'var(--color-on-info)',
+  '--tour-primary-indicator-background-color': 'rgba(255, 255, 255, 0.15)',
+  '--tour-primary-indicator-active-background-color': 'var(--color-on-primary)',
+  '--tour-primary-next-button-color': 'var(--color-on-primary)',
+  '--tour-primary-prev-button-color': 'var(--color-on-primary)',
+}

packages/varlet-ui/src/tour-step/TourStep.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="show" :class="n()">
+    <div v-if="title || $slots['title']" :class="n('title')">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div v-if="message || $slots['default']" :class="n('message')">
+      <slot>{{ message }}</slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { call } from '@varlet/shared'
+import { createNamespace } from '../utils/components'
+import { props } from './props'
+import { useTour } from './provide'
+
+const { name, n } = createNamespace('tour-step')
+
+export default defineComponent({
+  name,
+  props,
+  setup(props) {
+    const { index, tour, bindTour } = useTour()
+    const show = computed(() => tour?.current.value === index?.value)
+
+    call(bindTour, props)
+
+    return {
+      n,
+      show,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './tourStep';
+</style>

packages/varlet-ui/src/tour-step/index.ts

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from '../utils/components'
+import { props as tourStepProps } from './props'
+import TourStep from './TourStep.vue'
+
+withInstall(TourStep)
+withPropsDefaultsSetter(TourStep, tourStepProps)
+
+export { tourStepProps }
+
+export const _TourStepComponent = TourStep
+
+export default TourStep

packages/varlet-ui/src/tour-step/props.ts

@@ -0,0 +1,33 @@
+import { type PropType } from 'vue'
+import { popupProps } from '../popup'
+import { Placement } from '../tour/props'
+import { pickProps } from '../utils/components'
+
+export const props = {
+  target: [String, Object] as PropType<string | HTMLElement>,
+  title: String,
+  message: String,
+  placement: String as PropType<Placement>,
+  width: [Number, String],
+  overlay: {
+    type: Boolean,
+    default: undefined,
+  },
+  arrow: {
+    type: Boolean,
+    default: undefined,
+  },
+  closeable: {
+    type: Boolean,
+    default: undefined,
+  },
+  prevButtonText: String,
+  nextButtonText: String,
+  prevButtonTextColor: String,
+  nextButtonTextColor: String,
+  prevButtonColor: String,
+  nextButtonColor: String,
+  contentClass: String,
+  contentStyle: Object,
+  ...pickProps(popupProps, ['overlayClass', 'overlayStyle']),
+}

packages/varlet-ui/src/tour-step/provide.ts

@@ -0,0 +1,15 @@
+import { ExtractPropTypes } from 'vue'
+import { useParent } from '@varlet/use'
+import { TOUR_BIND_STEP_KEY, TourProvider, TourStepProps } from '../tour/provide'
+
+export interface TourStepProvider extends ExtractPropTypes<TourStepProps> {}
+
+export function useTour() {
+  const { bindParent, parentProvider, index } = useParent<TourProvider, TourStepProvider>(TOUR_BIND_STEP_KEY)
+
+  return {
+    index,
+    tour: parentProvider,
+    bindTour: bindParent,
+  }
+}

packages/varlet-ui/src/tour-step/tourStep.less

@@ -0,0 +1,14 @@
+.var-tour-step {
+  &__title {
+    padding: var(--tour-title-padding);
+    color: var(--tour-title-color);
+    font-size: var(--tour-title-font-size);
+  }
+
+  &__message {
+    padding: var(--tour-message-padding);
+    color: var(--tour-message-color);
+    font-size: var(--tour-message-font-size);
+    line-height: var(--tour-message-line-height);
+  }
+}