diff --git a/components/_util/hooks/useId.ts b/components/_util/hooks/useId.ts new file mode 100644 index 000000000..fea54f908 --- /dev/null +++ b/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; +} diff --git a/components/components.ts b/components/components.ts index d6b1e6d80..f9db584a6 100644 --- a/components/components.ts +++ b/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'; diff --git a/components/locale/en_US.ts b/components/locale/en_US.ts index 1038f45df..ae0af4a55 100644 --- a/components/locale/en_US.ts +++ b/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', diff --git a/components/locale/index.tsx b/components/locale/index.tsx index 0f7a8c59f..2985422d7 100644 --- a/components/locale/index.tsx +++ b/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; diff --git a/components/locale/pt_BR.ts b/components/locale/pt_BR.ts index ec779f0cb..99c5ceff2 100644 --- a/components/locale/pt_BR.ts +++ b/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', diff --git a/components/locale/zh_CN.ts b/components/locale/zh_CN.ts index 65e601980..3455f4f08 100644 --- a/components/locale/zh_CN.ts +++ b/components/locale/zh_CN.ts @@ -35,6 +35,11 @@ const localeValues: Locale = { triggerAsc: '点击升序', cancelSort: '取消排序', }, + Tour: { + Next: '下一步', + Previous: '上一步', + Finish: '结束导览', + }, Modal: { okText: '确定', cancelText: '取消', diff --git a/components/locale/zh_HK.ts b/components/locale/zh_HK.ts index 17a491d5b..858719081 100644 --- a/components/locale/zh_HK.ts +++ b/components/locale/zh_HK.ts @@ -32,6 +32,11 @@ const localeValues: Locale = { triggerAsc: '點擊升序', cancelSort: '取消排序', }, + Tour: { + Next: '下一步', + Previous: '上一步', + Finish: '結束導覽', + }, Modal: { okText: '確定', cancelText: '取消', diff --git a/components/locale/zh_TW.ts b/components/locale/zh_TW.ts index 3100f87d4..fc639d4d4 100644 --- a/components/locale/zh_TW.ts +++ b/components/locale/zh_TW.ts @@ -32,6 +32,11 @@ const localeValues: Locale = { triggerAsc: '點擊升序', cancelSort: '取消排序', }, + Tour: { + Next: '下一步', + Previous: '上一步', + Finish: '結束導覽', + }, Modal: { okText: '確定', cancelText: '取消', diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts index 50353a82e..bd6f228db 100644 --- a/components/theme/interface/alias.ts +++ b/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']; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 8ac020484..92f2fffb8 100644 --- a/components/theme/interface/components.ts +++ b/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; diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 91d2d4f6e..b886bd1db 100644 --- a/components/theme/util/alias.ts +++ b/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, diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap new file mode 100644 index 000000000..6e4007551 --- /dev/null +++ b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -0,0 +1,478 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/tour/demo/basic.tsx extend context correctly 1`] = ` +Array [ + , +