feat v4 add tour

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

@@ -257,3 +257,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

@@ -9,6 +9,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;
@@ -42,7 +43,8 @@ export interface Locale {
     copied?: any;
     expand?: any;
   };
-  QRCode: {
+  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/components.ts

@@ -45,7 +45,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';
@@ -112,7 +112,7 @@ export interface ComponentTokenMap {
   Table?: TableComponentToken;
   Space?: SpaceComponentToken;
   Progress?: ProgressComponentToken;
-  //   Tour?: TourComponentToken;
+  Tour?: TourComponentToken;
   QRCode?: QRCodeComponentToken;
   //   App?: AppComponentToken;