feat: add tour (vueComponent#6332)

* feat v4 add tour

* fix type error

* sync tour from antd5.4.6 & fix type error

* fix error

Author: shifeng1993

components/_util/hooks/useId.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+import canUseDom from '../../_util/canUseDom';
+
+let uuid = 0;
+
+/** Is client side and not jsdom */
+export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom();
+
+/** Get unique id for accessibility usage */
+export function getUUID(): number | string {
+  let retId: string | number;
+
+  // Test never reach
+  /* istanbul ignore if */
+  if (isBrowserClient) {
+    retId = uuid;
+    uuid += 1;
+  } else {
+    retId = 'TEST_OR_SSR';
+  }
+
+  return retId;
+}
+
+export default function useId(id = ref('')) {
+  // Inner id for accessibility usage. Only work in client side
+  const innerId = `vc_unique_${getUUID()}`;
+
+  return id.value || innerId;
+}

components/components.ts

@@ -258,3 +258,6 @@ export { default as Segmented } from './segmented';
 
 export type { QRCodeProps } from './qrcode';
 export { default as QRCode } from './qrcode';
+
+export type { TourProps, TourStepProps } from './tour';
+export { default as Tour } from './tour';

components/locale/en_US.ts

@@ -35,6 +35,11 @@ const localeValues: Locale = {
     triggerAsc: 'Click to sort ascending',
     cancelSort: 'Click to cancel sorting',
   },
+  Tour: {
+    Next: 'Next',
+    Previous: 'Previous',
+    Finish: 'Finish',
+  },
   Modal: {
     okText: 'OK',
     cancelText: 'Cancel',

components/locale/index.tsx

@@ -10,6 +10,7 @@ import type { PickerLocale as DatePickerLocale } from '../date-picker/generatePi
 import type { PaginationLocale } from '../pagination/Pagination';
 import type { TableLocale } from '../table/interface';
 import type { UploadLocale } from '../upload/interface';
+import type { TourLocale } from '../tour/interface';
 
 interface TransferLocaleForEmpty {
   description: string;
@@ -43,6 +44,7 @@ export interface Locale {
     copied?: any;
     expand?: any;
   };
+  Tour?: TourLocale;
   QRCode?: {
     expired?: string;
     refresh?: string;

components/locale/pt_BR.ts

@@ -33,6 +33,11 @@ const localeValues: Locale = {
     triggerAsc: 'Clique organiza por ascendente',
     cancelSort: 'Clique para cancelar organização',
   },
+  Tour: {
+    Next: 'Próximo',
+    Previous: 'Anterior',
+    Finish: 'Finalizar',
+  },
   Modal: {
     okText: 'OK',
     cancelText: 'Cancelar',

components/locale/zh_CN.ts

@@ -35,6 +35,11 @@ const localeValues: Locale = {
     triggerAsc: '点击升序',
     cancelSort: '取消排序',
   },
+  Tour: {
+    Next: '下一步',
+    Previous: '上一步',
+    Finish: '结束导览',
+  },
   Modal: {
     okText: '确定',
     cancelText: '取消',

components/locale/zh_HK.ts

@@ -32,6 +32,11 @@ const localeValues: Locale = {
     triggerAsc: '點擊升序',
     cancelSort: '取消排序',
   },
+  Tour: {
+    Next: '下一步',
+    Previous: '上一步',
+    Finish: '結束導覽',
+  },
   Modal: {
     okText: '確定',
     cancelText: '取消',

components/locale/zh_TW.ts

@@ -32,6 +32,11 @@ const localeValues: Locale = {
     triggerAsc: '點擊升序',
     cancelSort: '取消排序',
   },
+  Tour: {
+    Next: '下一步',
+    Previous: '上一步',
+    Finish: '結束導覽',
+  },
   Modal: {
     okText: '確定',
     cancelText: '取消',

components/theme/interface/alias.ts

@@ -94,6 +94,7 @@ export interface AliasToken extends MapToken {
 
   boxShadow: string;
   boxShadowSecondary: string;
+  boxShadowTertiary: string;
 
   linkDecoration: CSSProperties['textDecoration'];
   linkHoverDecoration: CSSProperties['textDecoration'];

components/theme/interface/components.ts

@@ -44,7 +44,7 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl
 import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
-// import type { ComponentToken as TourComponentToken } from '../../tour/style';
+import type { ComponentToken as TourComponentToken } from '../../tour/style';
 import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
 // import type { ComponentToken as AppComponentToken } from '../../app/style';
 import type { ComponentToken as WaveToken } from '../../_util/wave/style';
@@ -110,7 +110,7 @@ export interface ComponentTokenMap {
   Table?: TableComponentToken;
   Space?: SpaceComponentToken;
   Progress?: ProgressComponentToken;
-  //   Tour?: TourComponentToken;
+  Tour?: TourComponentToken;
   QRCode?: QRCodeComponentToken;
   //   App?: AppComponentToken;
 

components/theme/util/alias.ts

@@ -134,6 +134,11 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
       0 3px 6px -4px rgba(0, 0, 0, 0.12),
       0 9px 28px 8px rgba(0, 0, 0, 0.05)
     `,
+    boxShadowTertiary: `
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    `,
 
     screenXS,
     screenXSMin: screenXS,