From a24f86b738c88734b981239a56eb46165a60b93f Mon Sep 17 00:00:00 2001 From: danranvm Date: Thu, 24 Feb 2022 16:44:23 +0800 Subject: [PATCH] refactor(comp:locales): use useGlobalConfig instead of useI18n BREAKING CHANGE: `useI18n` was removed. --- .ls-lint.yml | 2 +- .../_private/date-panel/src/DatePanel.tsx | 3 +- .../src/panel-header/PanelHeader.tsx | 8 +- .../_private/date-panel/src/token.ts | 4 +- packages/components/config/src/dateConfig.ts | 26 +- .../components/config/src/defaultConfig.ts | 775 +++++++----------- .../components/config/src/globalConfig.ts | 12 +- .../components/config/src/numFormatter.ts | 2 +- packages/components/config/src/types.ts | 616 +++++++------- .../components/date-picker/docs/Index.zh.md | 2 +- .../components/date-picker/src/DatePicker.tsx | 3 +- packages/components/date-picker/src/token.ts | 4 +- .../date-picker/src/trigger/Trigger.tsx | 2 +- packages/components/empty/src/Empty.tsx | 15 +- .../form/src/composables/useFormItem.ts | 9 +- .../components/i18n/__tests__/useI18n.spec.ts | 59 -- packages/components/i18n/src/useI18n.ts | 55 -- .../components/{i18n => locales}/index.ts | 5 +- .../locales => locales/src/langs}/en-US.ts | 0 .../locales => locales/src/langs}/zh-CN.ts | 0 .../components/{i18n => locales}/src/types.ts | 2 - packages/components/modal/src/Modal.tsx | 12 +- .../components/modal/src/ModalWrapper.tsx | 27 +- packages/components/modal/src/token.ts | 2 + .../components/pagination/src/Pagination.tsx | 3 +- .../pagination/src/contents/Item.tsx | 2 +- .../pagination/src/contents/Jumper.tsx | 2 +- .../pagination/src/contents/Sizes.tsx | 2 +- .../pagination/src/contents/Total.tsx | 2 +- packages/components/pagination/src/token.ts | 4 +- .../components/popconfirm/src/Popconfirm.tsx | 2 + .../popconfirm/src/PopconfirmContent.tsx | 20 +- packages/components/popconfirm/src/token.ts | 2 + packages/components/table/src/Table.tsx | 5 +- .../table/src/composables/useSelectable.ts | 11 +- .../main/head/triggers/FilterableTrigger.tsx | 6 +- .../main/head/triggers/SortableTrigger.tsx | 4 +- packages/components/table/src/token.ts | 4 +- .../components/time-picker/src/TimePicker.tsx | 12 +- .../time-picker/src/TimeRangePicker.tsx | 16 +- .../time-picker/src/overlay/Overlay.tsx | 5 +- .../time-picker/src/overlay/RangeOverlay.tsx | 16 +- packages/components/time-picker/src/tokens.ts | 10 +- .../time-picker/src/trigger/RangeTrigger.tsx | 19 +- .../time-picker/src/trigger/Trigger.tsx | 9 +- .../components/upload/__tests__/list.spec.ts | 2 + packages/components/upload/src/Upload.tsx | 7 +- .../upload/src/component/ImageCardList.tsx | 27 +- .../upload/src/component/ImageList.tsx | 8 +- .../upload/src/component/TextList.tsx | 8 +- packages/components/upload/src/token.ts | 2 + packages/components/upload/src/util/icon.ts | 12 +- packages/site/src/docs/GettingStarted.zh.md | 7 +- packages/site/src/docs/I18n.zh.md | 29 +- packages/site/src/global/codesandbox.ts | 19 +- packages/site/src/iduxInstall.ts | 5 - scripts/gen/style-variable/config.ts | 2 +- scripts/gulp/site/utils.ts | 2 +- 58 files changed, 821 insertions(+), 1110 deletions(-) delete mode 100644 packages/components/i18n/__tests__/useI18n.spec.ts delete mode 100644 packages/components/i18n/src/useI18n.ts rename packages/components/{i18n => locales}/index.ts (60%) rename packages/components/{i18n/src/locales => locales/src/langs}/en-US.ts (100%) rename packages/components/{i18n/src/locales => locales/src/langs}/zh-CN.ts (100%) rename packages/components/{i18n => locales}/src/types.ts (98%) diff --git a/.ls-lint.yml b/.ls-lint.yml index 3404b48ed..9b331ac9e 100644 --- a/.ls-lint.yml +++ b/.ls-lint.yml @@ -27,5 +27,5 @@ ignore: - packages/pro/node_modules - packages/site/node_modules - packages/cdk/forms/src/messages - - packages/components/i18n/src/locales + - packages/components/locales/src/langs - packages/site/components.d.ts diff --git a/packages/components/_private/date-panel/src/DatePanel.tsx b/packages/components/_private/date-panel/src/DatePanel.tsx index 019c53b4e..ab8f2a094 100644 --- a/packages/components/_private/date-panel/src/DatePanel.tsx +++ b/packages/components/_private/date-panel/src/DatePanel.tsx @@ -8,7 +8,6 @@ import { computed, defineComponent, provide } from 'vue' import { useDateConfig, useGlobalConfig } from '@idux/components/config' -import { getLocale } from '@idux/components/i18n' import { useActiveDate } from './composables/useActiveDate' import { useActiveType } from './composables/useActiveType' @@ -21,8 +20,8 @@ import { datePanelProps } from './types' export default defineComponent({ props: datePanelProps, setup(props, { slots }) { - const locale = getLocale('datePicker') const common = useGlobalConfig('common') + const locale = useGlobalConfig('locale') const mergedPrefixCls = computed(() => `${common.prefixCls}-date-panel`) const dateConfig = useDateConfig() const { activeType, setActiveType } = useActiveType(props) diff --git a/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx b/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx index 9f9191045..02bca836b 100644 --- a/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx +++ b/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx @@ -7,7 +7,7 @@ import type { DatePanelType } from '../types' import type { DateConfig } from '@idux/components/config' -import type { DatePickerLocale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef } from 'vue' import { computed, defineComponent, inject } from 'vue' @@ -44,7 +44,7 @@ export default defineComponent({ } return () => { - const { previousDecade, previousYear, previousMonth, nextDecade, nextYear, nextMonth } = locale.value + const { previousDecade, previousYear, previousMonth, nextDecade, nextYear, nextMonth } = locale.datePicker const currType = activeType.value const superPrev = true const prev = !hidePrevNextTypes.includes(activeType.value) @@ -109,7 +109,7 @@ export default defineComponent({ function useContents( activeType: ComputedRef, activeDate: ComputedRef, - locale: ComputedRef, + locale: Locale, dateConfig: DateConfig, setActiveType: (type: DatePanelType) => void, ) { @@ -120,7 +120,7 @@ function useContents( return computed(() => { const currType = activeType.value const currDate = activeDate.value - const { yearSelect, monthSelect, yearFormat, monthFormat } = locale.value + const { yearSelect, monthSelect, yearFormat, monthFormat } = locale.datePicker const { format, get } = dateConfig switch (currType) { case 'date': diff --git a/packages/components/_private/date-panel/src/token.ts b/packages/components/_private/date-panel/src/token.ts index 45bf9e08c..c2aaace0d 100644 --- a/packages/components/_private/date-panel/src/token.ts +++ b/packages/components/_private/date-panel/src/token.ts @@ -12,13 +12,13 @@ import type { ActiveTypeContext } from './composables/useActiveType' import type { MaxIndexContext } from './composables/useMaxIndex' import type { DatePanelProps } from './types' import type { DateConfig } from '@idux/components/config' -import type { DatePickerLocale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey, Slots } from 'vue' export interface DatePanelContext extends ActiveTypeContext, ActiveDateContext, MaxIndexContext { props: DatePanelProps slots: Slots - locale: ComputedRef + locale: Locale mergedPrefixCls: ComputedRef dateConfig: DateConfig } diff --git a/packages/components/config/src/dateConfig.ts b/packages/components/config/src/dateConfig.ts index 66c310b67..05e2a67ad 100644 --- a/packages/components/config/src/dateConfig.ts +++ b/packages/components/config/src/dateConfig.ts @@ -5,7 +5,7 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { InjectionKey, inject } from 'vue' +import { type InjectionKey, inject } from 'vue' import { isNil, isString } from 'lodash-es' @@ -57,7 +57,7 @@ import { toDate, } from 'date-fns' -import { getLocale } from '@idux/components/i18n' +import { useGlobalConfig } from './globalConfig' export type TimeConfigType = 'hour' | 'minute' | 'second' export type DateConfigType = 'year' | 'quarter' | 'month' | 'week' | 'date' | 'day' @@ -101,12 +101,12 @@ export function useDateConfig(): DateConfig { } function createDefaultDateConfig(): DateConfig { - const locale = getLocale('date') + const locale = useGlobalConfig('locale') const now = () => new Date() - const parse = (dateString: string, format: string) => parseDate(dateString, format, now(), { locale: locale.value }) + const parse = (dateString: string, format: string) => parseDate(dateString, format, now(), { locale: locale.date }) return { now, - weekStartsOn: () => locale.value.options?.weekStartsOn || 1, + weekStartsOn: () => locale.date.options?.weekStartsOn || 1, get: (date, type) => { switch (type) { case 'year': @@ -116,7 +116,7 @@ function createDefaultDateConfig(): DateConfig { case 'month': return getMonth(date) case 'week': - return getWeek(date, { locale: locale.value }) + return getWeek(date, { locale: locale.date }) case 'date': return getDate(date) case 'day': @@ -138,11 +138,11 @@ function createDefaultDateConfig(): DateConfig { case 'month': return setMonth(date, amount) case 'week': - return setWeek(date, amount, { locale: locale.value }) + return setWeek(date, amount, { locale: locale.date }) case 'date': return setDate(date, amount) case 'day': - return setDay(date, amount, { locale: locale.value }) + return setDay(date, amount, { locale: locale.date }) case 'hour': return setHours(date, amount) case 'minute': @@ -175,7 +175,7 @@ function createDefaultDateConfig(): DateConfig { case 'month': return startOfMonth(date) case 'week': - return startOfWeek(date, { locale: locale.value }) + return startOfWeek(date, { locale: locale.date }) case 'date': case 'day': return startOfDay(date) @@ -190,7 +190,7 @@ function createDefaultDateConfig(): DateConfig { case 'month': return endOfMonth(date) case 'week': - return endOfWeek(date, { locale: locale.value }) + return endOfWeek(date, { locale: locale.date }) case 'date': case 'day': return endOfDay(date) @@ -206,7 +206,7 @@ function createDefaultDateConfig(): DateConfig { case 'month': return isSameMonth(date, dateToCompare) case 'week': - return isSameWeek(date, dateToCompare, { locale: locale.value }) + return isSameWeek(date, dateToCompare, { locale: locale.date }) case 'date': case 'day': return isSameDay(date, dateToCompare) @@ -220,7 +220,7 @@ function createDefaultDateConfig(): DateConfig { }, isValid: date => isValid(date), - format: (date, format) => formatDate(date, format, { locale: locale.value }), + format: (date, format) => formatDate(date, format, { locale: locale.date }), parse: parse, convert: (date, format) => { if (isNil(date)) { @@ -229,7 +229,7 @@ function createDefaultDateConfig(): DateConfig { return isString(date) ? parse(date, format!) : toDate(date as number | Date) }, getLocalizedLabels: (type, length, width) => { - const localize = locale.value.localize! + const localize = locale.date.localize! switch (type) { case 'month': return Array.from({ length }).map((_, i) => localize.month(i, { width })) diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts index 9cfe435a1..dac9f9461 100644 --- a/packages/components/config/src/defaultConfig.ts +++ b/packages/components/config/src/defaultConfig.ts @@ -5,470 +5,327 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { - AlertConfig, - AnchorConfig, - AvatarConfig, - BackTopConfig, - BadgeConfig, - CardConfig, - CarouselConfig, - CheckboxConfig, - CollapseConfig, - CommonConfig, - DatePickerConfig, - DateRangePickerConfig, - DividerConfig, - DrawerConfig, - DropdownConfig, - EmptyConfig, - FormConfig, - GlobalConfig, - IconConfig, - ImageConfig, - ImageViewerConfig, - InputConfig, - InputNumberConfig, - ListConfig, - MenuConfig, - MessageConfig, - ModalConfig, - NotificationConfig, - PaginationConfig, - PopconfirmConfig, - PopoverConfig, - ProgressConfig, - RadioConfig, - RateConfig, - ResultConfig, - RowConfig, - SelectConfig, - SkeletonConfig, - SpaceConfig, - SpinConfig, - StatisticConfig, - StepperConfig, - TableConfig, - TagConfig, - TextareaConfig, - TimePickerConfig, - TimeRangePickerConfig, - TooltipConfig, - TreeConfig, - TreeSelectConfig, - UploadConfig, - UploadFilesConfig, -} from './types' +import { zhCN } from '@idux/components/locales' import { numFormatter } from './numFormatter' +import { type GlobalConfig } from './types' -// --------------------- Common --------------------- -const common: CommonConfig = { prefixCls: 'ix' } - -// --------------------- General --------------------- - -const icon: IconConfig = {} - -const tag: TagConfig = {} - -// --------------------- Layout --------------------- -const divider: DividerConfig = { - dashed: false, - labelPlacement: 'center', - plain: false, - size: 'md', -} - -const space: SpaceConfig = { size: 'md', wrap: true } - -const row: RowConfig = { wrap: true } - -// --------------------- Navigation --------------------- -const dropdown: DropdownConfig = { - autoAdjust: true, - destroyOnHide: false, - offset: [0, 8], - placement: 'bottomStart', - showArrow: false, - trigger: 'hover', -} - -const menu: MenuConfig = { - indent: 24, - offset: [0, 8], - suffix: 'right', - theme: 'light', -} - -const pagination: PaginationConfig = { - pageSize: 10, - pageSizes: [10, 20, 50, 100], - showQuickJumper: false, - showSizeChanger: false, - showTitle: true, - showTotal: true, - simple: false, - size: 'md', -} - -// --------------------- Data Entry --------------------- -const form: FormConfig = { - colonless: false, - labelAlign: 'end', - layout: 'horizontal', - size: 'md', -} - -const checkbox: CheckboxConfig = { size: 'md' } - -const datePicker: DatePickerConfig = { - allowInput: true, - borderless: false, - clearable: false, - clearIcon: 'close-circle', - size: 'md', - suffix: 'calendar', -} - -const dateRangePicker: DateRangePickerConfig = { separator: 'swap-right' } - -const inputNumber: InputNumberConfig = { - keyboard: true, - size: 'md', -} - -const input: InputConfig = { - borderless: false, - clearable: false, - clearIcon: 'close-circle', - size: 'md', -} - -const rate: RateConfig = { - allowHalf: false, - clearable: false, - count: 5, - icon: 'star-filled', - size: 'md', -} - -const radio: RadioConfig = { - size: 'md', -} - -const select: SelectConfig = { - borderless: false, - childrenKey: 'children', - labelKey: 'label', - size: 'md', - suffix: 'down', - valueKey: 'value', -} - -const textarea: TextareaConfig = { - autoRows: false, - clearable: false, - clearIcon: 'close-circle', - resize: 'vertical', - showCount: false, - size: 'md', -} - -const timePicker: TimePickerConfig = { - borderless: false, - clearable: true, - clearIcon: 'close-circle', - size: 'md', - suffix: 'clock-circle', - allowInput: true, - format: 'HH:mm:ss', -} - -const timeRangePicker: TimeRangePickerConfig = { - borderless: false, - clearable: true, - clearIcon: 'close-circle', - size: 'md', - suffix: 'clock-circle', - allowInput: true, - format: 'HH:mm:ss', -} - -const treeSelect: TreeSelectConfig = { - size: 'md', - suffix: 'down', - childrenKey: 'children', - labelKey: 'label', - nodeKey: 'key', -} - -const upload: UploadConfig = { - multiple: false, - dragable: false, - directory: false, - name: 'file', - withCredentials: false, - requestMethod: 'post', -} - -const uploadFiles: UploadFilesConfig = { - type: 'text', - icon: { - file: 'paper-clip', - remove: 'delete', - retry: 'edit', +export const defaultConfig: GlobalConfig = { + common: { + prefixCls: 'ix', }, -} - -// --------------------- Data Display --------------------- -const avatar: AvatarConfig = { - gap: 4, - icon: 'user', - shape: 'circle', - size: 'md', -} - -const badge: BadgeConfig = { showZero: false, dot: false, overflowCount: 99 } - -const card: CardConfig = { - borderless: false, - hoverable: false, - size: 'md', -} - -const empty: EmptyConfig = { - icon: 'empty', -} - -const list: ListConfig = { - size: 'md', - borderless: true, -} - -const collapse: CollapseConfig = { - accordion: false, - borderless: false, - expandIcon: 'right', - ghost: false, -} - -const image: ImageConfig = { - preview: true, -} - -const imageViewer: ImageViewerConfig = { - loop: true, - maskClosable: true, - zoom: [0.5, 2], -} - -const statistic: StatisticConfig = { - precision: 0, - formatter: numFormatter, -} - -const table: TableConfig = { - borderless: true, - rowKey: 'key', - size: 'md', - - extra: { icon: 'ellipsis' }, - pagination: { position: 'bottomEnd' }, - - columnBase: { - align: 'start', - sortable: { nextTooltip: false, orders: ['ascend', 'descend'] }, - filterable: { multiple: true, footer: true }, + locale: zhCN, + + alert: { + closable: false, + icon: { + success: 'check-circle', + error: 'info-circle', + info: 'bulb', + warning: 'exclamation-circle', + }, }, - columnExpandable: { icon: 'right' }, -} - -const tooltip: TooltipConfig = { - autoAdjust: true, - delay: 100, - destroyOnHide: false, - placement: 'top', - trigger: 'hover', -} - -const tree: TreeConfig = { - blocked: false, - expandIcon: 'right', - nodeKey: 'key', - showLine: false, -} - -const popover: PopoverConfig = { - autoAdjust: true, - delay: 100, - destroyOnHide: false, - placement: 'top', - showArrow: true, - trigger: 'hover', - closeIcon: 'close', -} - -// --------------------- Feedback --------------------- -const message: MessageConfig = { - destroyOnHover: false, - duration: 3000, - maxCount: 5, - icon: { - success: 'check-circle-filled', - error: 'close-circle-filled', - info: 'info-circle-filled', - warning: 'exclamation-circle-filled', - loading: 'loading', + anchor: { + bounds: 5, + hideLinkBall: false, }, -} - -const notification: NotificationConfig = { - destroyOnHover: false, - duration: 4500, - maxCount: 5, - offset: 24, - placement: 'topEnd', -} - -const modal: ModalConfig = { - centered: false, - closable: true, - closeIcon: 'close', - closeOnEsc: true, - mask: true, - maskClosable: true, - width: 520, -} - -const alert: AlertConfig = { - closable: false, - icon: { - success: 'check-circle', - error: 'info-circle', - info: 'bulb', - warning: 'exclamation-circle', + avatar: { + gap: 4, + icon: 'user', + shape: 'circle', + size: 'md', + }, + backTop: { + duration: 450, + visibilityHeight: 400, + }, + badge: { + showZero: false, + dot: false, + overflowCount: 99, + }, + card: { + borderless: false, + hoverable: false, + size: 'md', + }, + carousel: { + autoplayTime: 0, + dotPlacement: 'bottom', + showArrow: false, + trigger: 'click', + }, + checkbox: { + size: 'md', + }, + collapse: { + accordion: false, + borderless: false, + expandIcon: 'right', + ghost: false, + }, + datePicker: { + allowInput: true, + borderless: false, + clearable: false, + clearIcon: 'close-circle', + size: 'md', + suffix: 'calendar', + }, + dateRangePicker: { + separator: 'swap-right', + }, + divider: { + dashed: false, + labelPlacement: 'center', + plain: false, + size: 'md', + }, + drawer: { + closable: true, + closeOnEsc: true, + closeIcon: 'close', + height: 256, + mask: true, + maskClosable: true, + width: 480, + }, + dropdown: { + autoAdjust: true, + destroyOnHide: false, + offset: [0, 8], + placement: 'bottomStart', + showArrow: false, + trigger: 'hover', + }, + empty: { + icon: 'empty', + }, + form: { + colonless: false, + labelAlign: 'end', + layout: 'horizontal', + size: 'md', + }, + icon: {}, + input: { + borderless: false, + clearable: false, + clearIcon: 'close-circle', + size: 'md', + }, + inputNumber: { + keyboard: true, + size: 'md', + }, + list: { + size: 'md', + borderless: true, + }, + image: { + preview: true, + }, + imageViewer: { + loop: true, + maskClosable: true, + zoom: [0.5, 2], + }, + menu: { + indent: 24, + offset: [0, 8], + suffix: 'right', + theme: 'light', + }, + message: { + destroyOnHover: false, + duration: 3000, + maxCount: 5, + icon: { + success: 'check-circle-filled', + error: 'close-circle-filled', + info: 'info-circle-filled', + warning: 'exclamation-circle-filled', + loading: 'loading', + }, + }, + modal: { + centered: false, + closable: true, + closeIcon: 'close', + closeOnEsc: true, + mask: true, + maskClosable: true, + width: 520, + }, + notification: { + destroyOnHover: false, + duration: 4500, + maxCount: 5, + offset: 24, + placement: 'topEnd', + }, + pagination: { + pageSize: 10, + pageSizes: [10, 20, 50, 100], + showQuickJumper: false, + showSizeChanger: false, + showTitle: true, + showTotal: true, + simple: false, + size: 'md', + }, + popconfirm: { + autoAdjust: true, + delay: 100, + destroyOnHide: false, + placement: 'top', + trigger: 'click', + }, + popover: { + autoAdjust: true, + delay: 100, + destroyOnHide: false, + placement: 'top', + showArrow: true, + trigger: 'hover', + closeIcon: 'close', + }, + progress: { + strokeLinecap: 'round', + size: 'md', + format: (percent: number) => percent + '%', + }, + radio: { + size: 'md', + }, + rate: { + allowHalf: false, + clearable: false, + count: 5, + icon: 'star-filled', + size: 'md', + }, + result: { + status: 'info', + }, + row: { + wrap: true, + }, + select: { + borderless: false, + childrenKey: 'children', + labelKey: 'label', + size: 'md', + suffix: 'down', + valueKey: 'value', + }, + skeleton: { + animated: true, + }, + space: { + size: 'md', + wrap: true, + }, + spin: { + tip: '', + tipAlign: 'vertical', + size: 'md', + }, + statistic: { + precision: 0, + formatter: numFormatter, + }, + stepper: { + clickable: false, + labelPlacement: 'end', + size: 'md', + }, + table: { + borderless: true, + rowKey: 'key', + size: 'md', + extra: { + icon: 'ellipsis', + }, + pagination: { + position: 'bottomEnd', + }, + columnBase: { + align: 'start', + sortable: { + nextTooltip: false, + orders: ['ascend', 'descend'], + }, + filterable: { + multiple: true, + footer: true, + }, + }, + columnExpandable: { + icon: 'right', + }, + }, + tag: {}, + textarea: { + autoRows: false, + clearable: false, + clearIcon: 'close-circle', + resize: 'vertical', + showCount: false, + size: 'md', + }, + timePicker: { + borderless: false, + clearable: true, + clearIcon: 'close-circle', + size: 'md', + suffix: 'clock-circle', + allowInput: true, + format: 'HH:mm:ss', + }, + timeRangePicker: { + borderless: false, + clearable: true, + clearIcon: 'close-circle', + size: 'md', + suffix: 'clock-circle', + allowInput: true, + format: 'HH:mm:ss', + }, + tooltip: { + autoAdjust: true, + delay: 100, + destroyOnHide: false, + placement: 'top', + trigger: 'hover', + }, + tree: { + blocked: false, + expandIcon: 'right', + nodeKey: 'key', + showLine: false, + }, + treeSelect: { + size: 'md', + suffix: 'down', + childrenKey: 'children', + labelKey: 'label', + nodeKey: 'key', + }, + upload: { + multiple: false, + dragable: false, + directory: false, + name: 'file', + withCredentials: false, + requestMethod: 'post', + }, + uploadFiles: { + type: 'text', + icon: { + file: 'paper-clip', + remove: 'delete', + retry: 'edit', + }, }, -} - -const skeleton: SkeletonConfig = { - animated: true, -} - -const carousel: CarouselConfig = { - autoplayTime: 0, - dotPlacement: 'bottom', - showArrow: false, - trigger: 'click', -} - -const drawer: DrawerConfig = { - closable: true, - closeOnEsc: true, - closeIcon: 'close', - height: 256, - mask: true, - maskClosable: true, - width: 480, -} - -const result: ResultConfig = { status: 'info' } - -const spin: SpinConfig = { - tip: '', - tipAlign: 'vertical', - size: 'md', -} - -const popconfirm: PopconfirmConfig = { - autoAdjust: true, - delay: 100, - destroyOnHide: false, - placement: 'top', - trigger: 'click', -} - -const progress: ProgressConfig = { - strokeLinecap: 'round', - size: 'md', - format: (percent: number) => percent + '%', -} - -const stepper: StepperConfig = { - clickable: false, - labelPlacement: 'end', - size: 'md', -} - -// --------------------- Other --------------------- -const backTop: BackTopConfig = { - duration: 450, - visibilityHeight: 400, -} -const anchor: AnchorConfig = { - bounds: 5, - hideLinkBall: false, -} -// --------------------- end --------------------- - -export const defaultConfig: GlobalConfig = { - // Common - common, - // General - icon, - tag, - // Layout - divider, - space, - row, - // Navigation - dropdown, - menu, - pagination, - // Data Entry - form, - checkbox, - datePicker, - dateRangePicker, - input, - inputNumber, - rate, - radio, - select, - textarea, - timePicker, - timeRangePicker, - treeSelect, - upload, - uploadFiles, - // Data Display - avatar, - badge, - card, - empty, - carousel, - list, - collapse, - image, - imageViewer, - statistic, - table, - tooltip, - tree, - popover, - // Feedback - alert, - skeleton, - message, - notification, - modal, - drawer, - result, - spin, - progress, - popconfirm, - stepper, - // Other - backTop, - anchor, - // --- end --- } diff --git a/packages/components/config/src/globalConfig.ts b/packages/components/config/src/globalConfig.ts index 7f750aca2..dafbecf7c 100644 --- a/packages/components/config/src/globalConfig.ts +++ b/packages/components/config/src/globalConfig.ts @@ -5,14 +5,12 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { GlobalConfig, GlobalConfigKey } from './types' -import type { App, Plugin } from 'vue' - -import { inject, provide, reactive } from 'vue' +import { type App, type Plugin, inject, provide, reactive } from 'vue' import { cloneDeep, merge } from 'lodash-es' import { defaultConfig } from './defaultConfig' +import { type GlobalConfig, type GlobalConfigKey } from './types' const tokens: [GlobalConfigKey, symbol][] = Object.keys(defaultConfig).map(key => [key as GlobalConfigKey, Symbol(key)]) const tokenMap = new Map(tokens) @@ -56,9 +54,9 @@ export function useGlobalConfig( return currConfig as Readonly } - const cloneConfig = reactive(merge(cloneDeep(currConfig), config)) as GlobalConfig[T] + const newConfig = reactive(merge(cloneDeep(currConfig), config)) as GlobalConfig[T] - provide(token, cloneConfig) + provide(token, newConfig) - return [cloneConfig, (config: Partial) => merge(cloneConfig, config)] + return [newConfig, (config: Partial) => merge(newConfig, config)] } diff --git a/packages/components/config/src/numFormatter.ts b/packages/components/config/src/numFormatter.ts index 17b9539a6..2ceee74e0 100644 --- a/packages/components/config/src/numFormatter.ts +++ b/packages/components/config/src/numFormatter.ts @@ -5,7 +5,7 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { NumFormatted } from './types' +import { type NumFormatted } from './types' export function numFormatter(value: string | number, precision: number): NumFormatted { // 进行小数位精度补充，需要考虑value值为以下情况的场景： diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts index daf88d5eb..4418c6971 100644 --- a/packages/components/config/src/types.ts +++ b/packages/components/config/src/types.ts @@ -15,6 +15,7 @@ import type { DotPlacement, DotTrigger } from '@idux/components/carousel' import type { DatePickerType } from '@idux/components/date-picker/src/types' import type { FormLabelAlign, FormLayout, FormSize } from '@idux/components/form' import type { ListSize } from '@idux/components/list' +import type { Locale } from '@idux/components/locales' import type { MenuTheme } from '@idux/components/menu' import type { MessageType } from '@idux/components/message' import type { ModalType } from '@idux/components/modal' @@ -31,22 +32,133 @@ import type { TextareaAutoRows, TextareaResize } from '@idux/components/textarea import type { UploadFilesType, UploadIconType, UploadRequestMethod, UploadRequestOption } from '@idux/components/upload' import type { VNode } from 'vue' -// Common +export interface GlobalConfig { + common: CommonConfig + locale: Locale + + alert: AlertConfig + anchor: AnchorConfig + avatar: AvatarConfig + backTop: BackTopConfig + badge: BadgeConfig + card: CardConfig + carousel: CarouselConfig + checkbox: CheckboxConfig + collapse: CollapseConfig + datePicker: DatePickerConfig + dateRangePicker: DateRangePickerConfig + divider: DividerConfig + drawer: DrawerConfig + dropdown: DropdownConfig + empty: EmptyConfig + form: FormConfig + icon: IconConfig + input: InputConfig + inputNumber: InputNumberConfig + list: ListConfig + image: ImageConfig + imageViewer: ImageViewerConfig + menu: MenuConfig + message: MessageConfig + modal: ModalConfig + notification: NotificationConfig + pagination: PaginationConfig + popconfirm: PopconfirmConfig + popover: PopoverConfig + progress: ProgressConfig + radio: RadioConfig + rate: RateConfig + result: ResultConfig + row: RowConfig + select: SelectConfig + skeleton: SkeletonConfig + space: SpaceConfig + spin: SpinConfig + statistic: StatisticConfig + stepper: StepperConfig + table: TableConfig + tag: TagConfig + textarea: TextareaConfig + timePicker: TimePickerConfig + timeRangePicker: TimeRangePickerConfig + tooltip: TooltipConfig + tree: TreeConfig + treeSelect: TreeSelectConfig + upload: UploadConfig + uploadFiles: UploadFilesConfig +} + +export type GlobalConfigKey = keyof GlobalConfig export interface CommonConfig { prefixCls: string } -// General +export interface AlertConfig { + closable: boolean + icon: string | Partial> +} -export interface IconConfig { - loadIconDynamically?: (iconName: string) => Promise +export interface AnchorConfig { + bounds: number + hideLinkBall: boolean } -export interface TagConfig { - shape?: TagShape +export interface AvatarConfig { + gap: number + icon: string | VNode + shape: AvatarShape + size: AvatarSize | Partial> +} + +export interface BackTopConfig { + duration: number + visibilityHeight: number +} + +export interface BadgeConfig { + showZero: boolean + dot: boolean + overflowCount: number | string +} + +export interface CardConfig { + size: CardSize + borderless: boolean + hoverable: boolean +} + +export interface CarouselConfig { + autoplayTime: number + dotPlacement: DotPlacement + showArrow: boolean + trigger: DotTrigger } -// Layout +export interface CheckboxConfig { + size: FormSize +} + +export interface CollapseConfig { + accordion: boolean + borderless: boolean + expandIcon: string + ghost: boolean +} + +export interface DatePickerConfig { + allowInput: boolean | 'overlay' + borderless: boolean + clearable: boolean + clearIcon: string + format?: Partial> + size: FormSize + suffix: string + target?: PortalTargetType +} + +export interface DateRangePickerConfig { + separator: string | VNode +} export interface DividerConfig { dashed: boolean @@ -55,16 +167,18 @@ export interface DividerConfig { size: 'sm' | 'md' | 'lg' } -export interface SpaceConfig { - size: number | string | [number | string, number | string] | SpaceSize - wrap: boolean -} - -export interface RowConfig { - wrap: boolean +export interface DrawerConfig { + closable: boolean + closeIcon: string + closeOnEsc: boolean + height: string | number + mask: boolean + maskClosable: boolean + target?: PortalTargetType + width: string | number + zIndex?: number } -// Navigation export interface DropdownConfig { autoAdjust: boolean destroyOnHide: boolean @@ -75,26 +189,11 @@ export interface DropdownConfig { trigger: PopperTrigger } -export interface MenuConfig { - indent: number - offset: [number, number] - suffix: string - target?: PortalTargetType - theme: MenuTheme -} - -export interface PaginationConfig { - pageSize: number - pageSizes: number[] - showQuickJumper: boolean - showSizeChanger: boolean - showTitle: boolean - showTotal: boolean - simple: boolean - size: PaginationSize +export interface EmptyConfig { + icon: string | VNode + image?: string | VNode } -// Data Entry export interface FormConfig { colonless: boolean labelAlign: FormLabelAlign @@ -102,23 +201,15 @@ export interface FormConfig { size: FormSize } -export interface CheckboxConfig { - size: FormSize +export interface IconConfig { + loadIconDynamically?: (iconName: string) => Promise } -export interface DatePickerConfig { - allowInput: boolean | 'overlay' +export interface InputConfig { borderless: boolean clearable: boolean clearIcon: string - format?: Partial> size: FormSize - suffix: string - target?: PortalTargetType -} - -export interface DateRangePickerConfig { - separator: string | VNode } export interface InputNumberConfig { @@ -126,144 +217,169 @@ export interface InputNumberConfig { size: FormSize } -export interface InputConfig { +export interface ListConfig { + size: ListSize borderless: boolean - clearable: boolean - clearIcon: string - size: FormSize -} - -export interface TextareaConfig { - autoRows: boolean | TextareaAutoRows - clearable: boolean - clearIcon: string - computeCount?: (value: string) => string - maxCount?: number | string - resize: TextareaResize - size: FormSize - showCount: boolean } -export interface RadioConfig { - size: FormSize +export interface ImageConfig { + preview: boolean } -export interface RateConfig { - allowHalf: boolean - clearable: boolean - count: number - icon: string - size: FormSize +export interface ImageViewerConfig { + loop: boolean + maskClosable: boolean + zoom: number[] + target?: PortalTargetType } -export interface SelectConfig { - borderless: boolean - childrenKey: string - labelKey: string - size: FormSize +export interface MenuConfig { + indent: number + offset: [number, number] suffix: string target?: PortalTargetType - valueKey: string + theme: MenuTheme } -export interface TreeSelectConfig { - size: FormSize - suffix: string - childrenKey: string - labelKey: string - nodeKey: string +export interface MessageConfig { + destroyOnHover: boolean + duration: number + icon: Partial> + maxCount: number target?: PortalTargetType + top?: number | string } -export interface TimePickerConfig { - borderless: boolean - clearable: boolean - clearIcon: string - size: FormSize - suffix: string +export interface ModalConfig { + centered: boolean + closable: boolean + closeIcon: string + closeOnEsc: boolean + icon?: Partial> + mask: boolean + maskClosable: boolean target?: PortalTargetType - allowInput: boolean | 'overlay' - format: string + width: string | number + zIndex?: number } -export type TimeRangePickerConfig = TimePickerConfig +export interface NotificationConfig { + destroyOnHover: boolean + duration: number + icon?: Partial> + closeIcon?: string | VNode + maxCount: number + offset: number | string | (string | number)[] + placement: NotificationPlacement + target?: PortalTargetType +} -export interface UploadConfig { - multiple: boolean - dragable: boolean - directory: boolean - name: string - withCredentials: boolean - requestMethod: UploadRequestMethod - customRequest?: (option: UploadRequestOption) => { abort: () => void } +export interface PaginationConfig { + pageSize: number + pageSizes: number[] + showQuickJumper: boolean + showSizeChanger: boolean + showTitle: boolean + showTotal: boolean + simple: boolean + size: PaginationSize } -export interface UploadFilesConfig { - type: UploadFilesType - icon: Partial> +export interface PopconfirmConfig { + autoAdjust: boolean + delay: number | [number | null, number | null] + destroyOnHide: boolean + placement: PopperPlacement + target?: PortalTargetType + trigger: PopperTrigger } -// Data Display -export interface AvatarConfig { - gap: number - icon: string | VNode - shape: AvatarShape - size: AvatarSize | Partial> +export interface PopoverConfig { + autoAdjust: boolean + delay: number | [number | null, number | null] + destroyOnHide: boolean + placement: PopperPlacement + target?: PortalTargetType + showArrow: boolean + trigger: PopperTrigger + closeIcon: string } -export interface BadgeConfig { - showZero: boolean - dot: boolean - overflowCount: number | string +export interface ProgressConfig { + size: ProgressSize + format: ProgressFormat + defaultCircleStrokeWidth?: string | number + strokeWidth?: string | number + strokeLinecap: 'round' | 'square' + icon?: Partial } -export interface CardConfig { - size: CardSize - borderless: boolean - hoverable: boolean +export interface RadioConfig { + size: FormSize } -export interface EmptyConfig { - icon: string | VNode - image?: string | VNode +export interface RateConfig { + allowHalf: boolean + clearable: boolean + count: number + icon: string + size: FormSize } -export interface ListConfig { - size: ListSize - borderless: boolean +export interface ResultConfig { + status: ResultStatus + icon?: Partial> } -export interface CollapseConfig { - accordion: boolean +export interface RowConfig { + wrap: boolean +} + +export interface SelectConfig { borderless: boolean - expandIcon: string - ghost: boolean + childrenKey: string + labelKey: string + size: FormSize + suffix: string + target?: PortalTargetType + valueKey: string } -export interface ImageConfig { - preview: boolean +export interface SkeletonConfig { + animated: boolean } -export interface ImageViewerConfig { - loop: boolean - maskClosable: boolean - zoom: number[] - target?: PortalTargetType +export interface SpaceConfig { + size: number | string | [number | string, number | string] | SpaceSize + wrap: boolean +} + +export interface SpinConfig { + icon?: string + tip: string + tipAlign: SpinTipAlignType + size: SpinSize + strokeWidth?: Partial> + radius?: Partial> +} + +export interface StatisticConfig { + precision: number + formatter: NumFormatter } export interface NumFormatted { value: string - - /** 格式化后的整数部分 */ int: string - - /** 格式化后的小数部分，带小数点 */ decimal: string } + export type NumFormatter = (value: string | number, precision: number) => NumFormatted -export interface StatisticConfig { - precision: number - formatter: NumFormatter + +export interface StepperConfig { + clickable: boolean + labelPlacement: StepperLabelPlacement + size: StepperSize } export interface TableConfig { @@ -288,110 +404,35 @@ export interface TableColumnExpandableConfig { icon: string } -export interface TreeConfig { - blocked: boolean - expandIcon: string - nodeKey: string - showLine: boolean -} - -export interface TooltipConfig { - autoAdjust: boolean - delay: number | [number | null, number | null] - destroyOnHide: boolean - placement: PopperPlacement - target?: PortalTargetType - trigger: PopperTrigger -} - -export interface PopoverConfig { - autoAdjust: boolean - delay: number | [number | null, number | null] - destroyOnHide: boolean - placement: PopperPlacement - target?: PortalTargetType - showArrow: boolean - trigger: PopperTrigger - closeIcon: string -} - -// Feedback -export interface MessageConfig { - destroyOnHover: boolean - duration: number - icon: Partial> - maxCount: number - target?: PortalTargetType - top?: number | string -} - -export interface NotificationConfig { - destroyOnHover: boolean - duration: number - icon?: Partial> - closeIcon?: string | VNode - maxCount: number - offset: number | string | (string | number)[] - placement: NotificationPlacement - target?: PortalTargetType -} - -export interface ModalConfig { - centered: boolean - closable: boolean - closeIcon: string - closeOnEsc: boolean - icon?: Partial> - mask: boolean - maskClosable: boolean - target?: PortalTargetType - width: string | number - zIndex?: number -} - -export interface AlertConfig { - closable: boolean - icon: string | Partial> -} - -export interface SkeletonConfig { - animated: boolean +export interface TagConfig { + shape?: TagShape } -export interface CarouselConfig { - autoplayTime: number - dotPlacement: DotPlacement - showArrow: boolean - trigger: DotTrigger +export interface TextareaConfig { + autoRows: boolean | TextareaAutoRows + clearable: boolean + clearIcon: string + computeCount?: (value: string) => string + maxCount?: number | string + resize: TextareaResize + size: FormSize + showCount: boolean } -export interface DrawerConfig { - closable: boolean - closeIcon: string - closeOnEsc: boolean - height: string | number - mask: boolean - maskClosable: boolean +export interface TimePickerConfig { + borderless: boolean + clearable: boolean + clearIcon: string + size: FormSize + suffix: string target?: PortalTargetType - width: string | number - zIndex?: number -} - -export interface ResultConfig { - status: ResultStatus - icon?: Partial> + allowInput: boolean | 'overlay' + format: string } -export interface SpinConfig { - icon?: string - tip: string - tipAlign: SpinTipAlignType - size: SpinSize - strokeWidth?: Partial> - radius?: Partial> -} +export type TimeRangePickerConfig = TimePickerConfig -export interface PopconfirmConfig { +export interface TooltipConfig { autoAdjust: boolean delay: number | [number | null, number | null] destroyOnHide: boolean @@ -400,96 +441,33 @@ export interface PopconfirmConfig { trigger: PopperTrigger } -export interface ProgressConfig { - size: ProgressSize - format: ProgressFormat - defaultCircleStrokeWidth?: string | number - strokeWidth?: string | number - strokeLinecap: 'round' | 'square' - icon?: Partial +export interface TreeConfig { + blocked: boolean + expandIcon: string + nodeKey: string + showLine: boolean } -// Stepper - -export interface StepperConfig { - clickable: boolean - labelPlacement: StepperLabelPlacement - size: StepperSize +export interface TreeSelectConfig { + size: FormSize + suffix: string + childrenKey: string + labelKey: string + nodeKey: string + target?: PortalTargetType } -// Other - -export interface BackTopConfig { - duration: number - visibilityHeight: number -} -export interface AnchorConfig { - bounds: number - hideLinkBall: boolean +export interface UploadConfig { + multiple: boolean + dragable: boolean + directory: boolean + name: string + withCredentials: boolean + requestMethod: UploadRequestMethod + customRequest?: (option: UploadRequestOption) => { abort: () => void } } -// --- end --- - -export interface GlobalConfig { - // Common - common: CommonConfig - icon: IconConfig - tag: TagConfig - // Layout - divider: DividerConfig - space: SpaceConfig - row: RowConfig - // Navigation - dropdown: DropdownConfig - menu: MenuConfig - pagination: PaginationConfig - // Data Entry - form: FormConfig - checkbox: CheckboxConfig - datePicker: DatePickerConfig - dateRangePicker: DateRangePickerConfig - input: InputConfig - inputNumber: InputNumberConfig - textarea: TextareaConfig - radio: RadioConfig - rate: RateConfig - select: SelectConfig - treeSelect: TreeSelectConfig - timePicker: TimePickerConfig - timeRangePicker: TimeRangePickerConfig - upload: UploadConfig - uploadFiles: UploadFilesConfig - // Data Display - avatar: AvatarConfig - badge: BadgeConfig - card: CardConfig - empty: EmptyConfig - carousel: CarouselConfig - list: ListConfig - collapse: CollapseConfig - image: ImageConfig - imageViewer: ImageViewerConfig - statistic: StatisticConfig - table: TableConfig - tooltip: TooltipConfig - tree: TreeConfig - popover: PopoverConfig - stepper: StepperConfig - // Feedback - alert: AlertConfig - skeleton: SkeletonConfig - message: MessageConfig - notification: NotificationConfig - modal: ModalConfig - drawer: DrawerConfig - result: ResultConfig - spin: SpinConfig - popconfirm: PopconfirmConfig - progress: ProgressConfig - // Other - backTop: BackTopConfig - anchor: AnchorConfig - // --- end --- +export interface UploadFilesConfig { + type: UploadFilesType + icon: Partial> } - -export type GlobalConfigKey = keyof GlobalConfig diff --git a/packages/components/date-picker/docs/Index.zh.md b/packages/components/date-picker/docs/Index.zh.md index 869169c47..7449f3ab6 100644 --- a/packages/components/date-picker/docs/Index.zh.md +++ b/packages/components/date-picker/docs/Index.zh.md @@ -66,7 +66,7 @@ const defaultFormat = { | --- | --- | --- | --- | --- | --- | | `v-model:value` | 当前选中的日期 | `number \| string \| Date` | - | - | 如果传入 `string` 类型，会根据 `format` 解析成 `Date`，使用 `control` 时，此配置无效 | | `defaultOpenValue` | 打开面板时默认选中的值 | `number \| string \| Date` | - | - | `value` 为空时，高亮的值 | -| `placeholder` | 选择框默认文本 | `string \| #placeholder` | - | - | 默认使用 `i18n` 配置 | +| `placeholder` | 选择框默认文本 | `string \| #placeholder` | - | - | 可以通过国际化配置默认值 | | `timePicker` | 是否显示时间选择器 | `boolean \| TimePickerProps` | `false` | - | 仅在 `type='date'` 时生效 | | `onChange` | 值改变后的回调 | `(value: Date, oldValue: Date) => void` | - | - | - | diff --git a/packages/components/date-picker/src/DatePicker.tsx b/packages/components/date-picker/src/DatePicker.tsx index b9c9c575e..462afb648 100644 --- a/packages/components/date-picker/src/DatePicker.tsx +++ b/packages/components/date-picker/src/DatePicker.tsx @@ -11,7 +11,6 @@ import { useSharedFocusMonitor } from '@idux/cdk/a11y' import { callEmit } from '@idux/cdk/utils' import { ɵOverlay } from '@idux/components/_private/overlay' import { useDateConfig, useGlobalConfig } from '@idux/components/config' -import { getLocale } from '@idux/components/i18n' import { useFormAccessor, useFormElement } from '@idux/components/utils' import { useFormat } from './composables/useFormat' @@ -30,8 +29,8 @@ export default defineComponent({ inheritAttrs: false, props: datePickerProps, setup(props, { attrs, expose, slots }) { - const locale = getLocale('datePicker') const common = useGlobalConfig('common') + const locale = useGlobalConfig('locale') const mergedPrefixCls = computed(() => `${common.prefixCls}-date-picker`) const config = useGlobalConfig('datePicker') const dateConfig = useDateConfig() diff --git a/packages/components/date-picker/src/token.ts b/packages/components/date-picker/src/token.ts index 9852f4fbd..7481ddf15 100644 --- a/packages/components/date-picker/src/token.ts +++ b/packages/components/date-picker/src/token.ts @@ -14,13 +14,13 @@ import type { DatePickerProps } from './types' import type { FocusMonitor } from '@idux/cdk/a11y' import type { ValueAccessor } from '@idux/cdk/forms' import type { DateConfig, DatePickerConfig } from '@idux/components/config' -import type { DatePickerLocale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue' export interface DataPickerContext extends InputStateContext, OverlayStateContext, PanelStateContext { props: DatePickerProps slots: Slots - locale: ComputedRef + locale: Locale config: DatePickerConfig mergedPrefixCls: ComputedRef dateConfig: DateConfig diff --git a/packages/components/date-picker/src/trigger/Trigger.tsx b/packages/components/date-picker/src/trigger/Trigger.tsx index 6a4b9f5d2..bb8facf2a 100644 --- a/packages/components/date-picker/src/trigger/Trigger.tsx +++ b/packages/components/date-picker/src/trigger/Trigger.tsx @@ -35,7 +35,7 @@ export default defineComponent({ } = inject(datePickerToken)! const formContext = inject(FORM_TOKEN, null) - const placeholder = computed(() => props.placeholder ?? locale.value[`${props.type}Placeholder`]) + const placeholder = computed(() => props.placeholder ?? locale.datePicker[`${props.type}Placeholder`]) const inputSize = computed(() => Math.max(10, format.value.length) + 2) const allowInput = computed(() => props.allowInput ?? config.allowInput) const clearable = computed(() => !accessor.disabled.value && props.clearable && inputValue.value.length > 0) diff --git a/packages/components/empty/src/Empty.tsx b/packages/components/empty/src/Empty.tsx index 225e81978..42bdb93ec 100644 --- a/packages/components/empty/src/Empty.tsx +++ b/packages/components/empty/src/Empty.tsx @@ -5,29 +5,24 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { EmptyProps } from './types' -import type { EmptyConfig } from '@idux/components/config' -import type { Slots } from 'vue' - -import { computed, defineComponent } from 'vue' +import { type Slots, computed, defineComponent } from 'vue' import { isString } from 'lodash-es' -import { useGlobalConfig } from '@idux/components/config' -import { getLocale } from '@idux/components/i18n' +import { type EmptyConfig, useGlobalConfig } from '@idux/components/config' import { IxIcon } from '@idux/components/icon' -import { emptyProps } from './types' +import { type EmptyProps, emptyProps } from './types' export default defineComponent({ name: 'IxEmpty', props: emptyProps, setup(props, { slots }) { - const emptyLocale = getLocale('empty') const common = useGlobalConfig('common') + const locale = useGlobalConfig('locale') const mergedPrefixCls = computed(() => `${common.prefixCls}-empty`) const config = useGlobalConfig('empty') - const description = computed(() => props.description ?? emptyLocale.value.description) + const description = computed(() => props.description ?? locale.empty.description) return () => { const prefixCls = mergedPrefixCls.value diff --git a/packages/components/form/src/composables/useFormItem.ts b/packages/components/form/src/composables/useFormItem.ts index 5bebd6def..f596ddab7 100644 --- a/packages/components/form/src/composables/useFormItem.ts +++ b/packages/components/form/src/composables/useFormItem.ts @@ -20,7 +20,8 @@ import { isFunction, isObject, isString } from 'lodash-es' import { type AbstractControl, type ValidateStatus, useValueControl } from '@idux/cdk/forms' import { Logger, type VKey } from '@idux/cdk/utils' -import { type Locale, getLocale } from '@idux/components/i18n' +import { useGlobalConfig } from '@idux/components/config' +import { type Locale } from '@idux/components/locales' import { FORM_ITEM_TOKEN } from '../token' import { type FormItemProps, type FormProps } from '../types' @@ -135,7 +136,7 @@ function useMessage( control: Ref, status: ComputedRef, ) { - const locale = getLocale() + const locale = useGlobalConfig('locale') const messages = computed(() => { const message = props.message return isString(message) || isFunction(message) ? { invalid: message } : message || {} @@ -155,7 +156,7 @@ function useMessage( }) } -function getMessage(control: Ref, locale: ComputedRef) { +function getMessage(control: Ref, locale: Locale) { const currControl = control.value if (!currControl) { return undefined @@ -173,7 +174,7 @@ function getMessage(control: Ref, locale: ComputedR return message(rest, currControl) } - const currMessage = message[locale.value.type] + const currMessage = message[locale.type] if (isString(currMessage)) { return currMessage } diff --git a/packages/components/i18n/__tests__/useI18n.spec.ts b/packages/components/i18n/__tests__/useI18n.spec.ts deleted file mode 100644 index 047a3ef81..000000000 --- a/packages/components/i18n/__tests__/useI18n.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -/* eslint-disable camelcase */ -import { flushPromises, mount } from '@vue/test-utils' - -import enUS from '../src/locales/en-US' -import zhCN from '../src/locales/zh-CN' -import { addLocale, getLocale, useLocale } from '../src/useI18n' - -const Comp = { - template: `
{{emptyLocale.description}}
`, - setup() { - const emptyLocale = getLocale('empty') - return { emptyLocale } - }, -} - -describe('useI18n.ts', () => { - test('default zh-CN work', async () => { - const wrapper = mount(Comp) - expect(wrapper.text()).toEqual(zhCN.empty.description) - }) - - test('addLocale work', async () => { - const wrapper = mount(Comp) - - const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {}) - useLocale('en-US') - expect(warnSpy).toBeCalledTimes(1) - - addLocale(enUS) - useLocale('en-US') - await flushPromises() - expect(wrapper.text()).toEqual(enUS.empty.description) - - addLocale([enUS, zhCN]) - useLocale('zh-CN') - await flushPromises() - expect(wrapper.text()).toEqual(zhCN.empty.description) - }) - - test('useLocale work', async () => { - const wrapper = mount(Comp) - - useLocale(enUS) - await flushPromises() - expect(wrapper.text()).toEqual(enUS.empty.description) - - useLocale('zh-CN') - await flushPromises() - expect(wrapper.text()).toEqual(zhCN.empty.description) - }) - - test('getLocale work', async () => { - const i18n = getLocale() - - useLocale(enUS) - await flushPromises() - expect(i18n.value).toEqual(enUS) - }) -}) diff --git a/packages/components/i18n/src/useI18n.ts b/packages/components/i18n/src/useI18n.ts deleted file mode 100644 index 55f70b4e2..000000000 --- a/packages/components/i18n/src/useI18n.ts +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @license - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE - */ - -import type { Locale, LocaleKey, LocaleType } from './types' -import type { ComputedRef } from 'vue' - -import { computed, ref } from 'vue' - -import { Logger } from '@idux/cdk/utils' - -import defaultLocale from './locales/zh-CN' - -const currentType = ref('zh-CN') -const localeMap: Partial> = { 'zh-CN': defaultLocale } - -export function useLocale(locale: LocaleType | Locale): void { - if (typeof locale === 'string') { - if (localeMap[locale]) { - currentType.value = locale - } else { - __DEV__ && Logger.warn('components/i18n', `The local [${locale}] was not added, please via 'addLocale()' add it.`) - } - } else { - const type = locale.type - localeMap[type] = locale - currentType.value = type - } -} - -export function addLocale(locale: Locale | Locale[]): void { - const locales = Array.isArray(locale) ? locale : [locale] - locales.forEach(item => { - localeMap[item.type] = item - }) -} - -/** - * - * @param key optional, gets the value of current locale by key - */ -export function getLocale(): ComputedRef -export function getLocale(key: T): ComputedRef -export function getLocale(key?: T): ComputedRef { - return computed(() => { - let currLocale = localeMap[currentType.value] - if (!currLocale) { - currLocale = defaultLocale - } - return key ? currLocale[key] : currLocale - }) -} diff --git a/packages/components/i18n/index.ts b/packages/components/locales/index.ts similarity index 60% rename from packages/components/i18n/index.ts rename to packages/components/locales/index.ts index c2ecef64f..a5c8701de 100644 --- a/packages/components/i18n/index.ts +++ b/packages/components/locales/index.ts @@ -6,7 +6,6 @@ */ export * from './src/types' -export * from './src/useI18n' -export { default as zhCN } from './src/locales/zh-CN' -export { default as enUS } from './src/locales/en-US' +export { default as zhCN } from './src/langs/zh-CN' +export { default as enUS } from './src/langs/en-US' diff --git a/packages/components/i18n/src/locales/en-US.ts b/packages/components/locales/src/langs/en-US.ts similarity index 100% rename from packages/components/i18n/src/locales/en-US.ts rename to packages/components/locales/src/langs/en-US.ts diff --git a/packages/components/i18n/src/locales/zh-CN.ts b/packages/components/locales/src/langs/zh-CN.ts similarity index 100% rename from packages/components/i18n/src/locales/zh-CN.ts rename to packages/components/locales/src/langs/zh-CN.ts diff --git a/packages/components/i18n/src/types.ts b/packages/components/locales/src/types.ts similarity index 98% rename from packages/components/i18n/src/types.ts rename to packages/components/locales/src/types.ts index 8864d7081..e6c658efe 100644 --- a/packages/components/i18n/src/types.ts +++ b/packages/components/locales/src/types.ts @@ -119,6 +119,4 @@ export interface Locale { upload: UploadLocale } -export type LocaleKey = keyof Locale - export type LocaleType = 'zh-CN' | 'en-US' diff --git a/packages/components/modal/src/Modal.tsx b/packages/components/modal/src/Modal.tsx index 217bf8e11..6a03b74c3 100644 --- a/packages/components/modal/src/Modal.tsx +++ b/packages/components/modal/src/Modal.tsx @@ -5,21 +5,17 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { ModalProps } from './types' -import type { ScrollStrategy } from '@idux/cdk/scroll' -import type { ComputedRef } from 'vue' - -import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue' +import { type ComputedRef, computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue' import { CdkPortal } from '@idux/cdk/portal' -import { BlockScrollStrategy } from '@idux/cdk/scroll' +import { BlockScrollStrategy, type ScrollStrategy } from '@idux/cdk/scroll' import { callEmit, isPromise, useControlledProp } from '@idux/cdk/utils' import { ɵMask } from '@idux/components/_private/mask' import { useGlobalConfig } from '@idux/components/config' import ModalWrapper from './ModalWrapper' import { MODAL_TOKEN, modalToken } from './token' -import { modalProps } from './types' +import { type ModalProps, modalProps } from './types' export default defineComponent({ name: 'IxModal', @@ -28,6 +24,7 @@ export default defineComponent({ setup(props, { slots, expose, attrs }) { const common = useGlobalConfig('common') const mergedPrefixCls = computed(() => `${common.prefixCls}-modal`) + const locale = useGlobalConfig('locale') const config = useGlobalConfig('modal') const mask = computed(() => props.mask ?? config.mask) const zIndex = computed(() => props.zIndex ?? config.zIndex) @@ -39,6 +36,7 @@ export default defineComponent({ props, slots, common, + locale, config, mergedPrefixCls, visible, diff --git a/packages/components/modal/src/ModalWrapper.tsx b/packages/components/modal/src/ModalWrapper.tsx index 4b5629d57..937554cd0 100644 --- a/packages/components/modal/src/ModalWrapper.tsx +++ b/packages/components/modal/src/ModalWrapper.tsx @@ -5,21 +5,29 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { ModalProps } from './types' -import type { ModalConfig } from '@idux/components/config' -import type { ComputedRef, Ref } from 'vue' - -import { Transition, computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue' +import { + type ComputedRef, + type Ref, + Transition, + computed, + defineComponent, + inject, + onBeforeUnmount, + onMounted, + ref, + watch, +} from 'vue' import { isFunction } from 'lodash-es' import { callEmit, convertCssPixel, getOffset } from '@idux/cdk/utils' import { ɵFooter } from '@idux/components/_private/footer' import { ɵHeader } from '@idux/components/_private/header' -import { getLocale } from '@idux/components/i18n' +import { type ModalConfig } from '@idux/components/config' import ModalBody from './ModalBody' import { MODAL_TOKEN, modalToken } from './token' +import { type ModalProps } from './types' export default defineComponent({ inheritAttrs: false, @@ -28,6 +36,7 @@ export default defineComponent({ props, slots, common, + locale, config, mergedPrefixCls, visible, @@ -39,16 +48,14 @@ export default defineComponent({ const { close, cancel, ok } = inject(MODAL_TOKEN)! const { centered, closable, closeIcon, closeOnEsc, width, mask, maskClosable, zIndex } = useConfig(props, config) - const locale = getLocale('modal') - const cancelVisible = computed(() => props.type === 'default' || props.type === 'confirm') - const cancelText = computed(() => props.cancelText ?? locale.value.cancelText) + const cancelText = computed(() => props.cancelText ?? locale.modal.cancelText) const okText = computed(() => { if (props.okText) { return props.okText } - return cancelVisible.value ? locale.value.okText : locale.value.justOkText + return cancelVisible.value ? locale.modal.okText : locale.modal.justOkText }) const placementStyle = computed(() => { diff --git a/packages/components/modal/src/token.ts b/packages/components/modal/src/token.ts index 40eeb3930..10c577705 100644 --- a/packages/components/modal/src/token.ts +++ b/packages/components/modal/src/token.ts @@ -7,12 +7,14 @@ import type { ModalBindings, ModalProps, ModalProviderRef } from './types' import type { CommonConfig, ModalConfig } from '@idux/components/config' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue' export interface ModalContext { props: ModalProps slots: Slots common: CommonConfig + locale: Locale config: ModalConfig mergedPrefixCls: ComputedRef visible: ComputedRef diff --git a/packages/components/pagination/src/Pagination.tsx b/packages/components/pagination/src/Pagination.tsx index ffb64ab45..39a96c529 100644 --- a/packages/components/pagination/src/Pagination.tsx +++ b/packages/components/pagination/src/Pagination.tsx @@ -9,7 +9,6 @@ import { type VNodeTypes, computed, defineComponent, normalizeClass, provide } f import { ɵInput } from '@idux/components/_private/input' import { useGlobalConfig } from '@idux/components/config' -import { getLocale } from '@idux/components/i18n' import { useItems } from './composables/useItems' import { useJumpToIndex } from './composables/useJumpTo' @@ -27,8 +26,8 @@ export default defineComponent({ setup(props, { slots }) { const common = useGlobalConfig('common') const mergedPrefixCls = computed(() => `${common.prefixCls}-pagination`) + const locale = useGlobalConfig('locale') const config = useGlobalConfig('pagination') - const locale = getLocale('pagination') const showTotal = computed(() => props.showTotal ?? config.showTotal) const simple = computed(() => props.simple ?? config.simple) diff --git a/packages/components/pagination/src/contents/Item.tsx b/packages/components/pagination/src/contents/Item.tsx index 0e0500a13..1aea5de46 100644 --- a/packages/components/pagination/src/contents/Item.tsx +++ b/packages/components/pagination/src/contents/Item.tsx @@ -66,7 +66,7 @@ export default defineComponent({ return index!.toString() } - return locale.value[type] + return locale.pagination[type] }) const onClick = () => { diff --git a/packages/components/pagination/src/contents/Jumper.tsx b/packages/components/pagination/src/contents/Jumper.tsx index 741252b96..29783d5ba 100644 --- a/packages/components/pagination/src/contents/Jumper.tsx +++ b/packages/components/pagination/src/contents/Jumper.tsx @@ -18,7 +18,7 @@ export default defineComponent({ return () => { const prefixCls = `${mergedPrefixCls.value}-jumper` const { disabled } = props - const { jumpTo, page } = locale.value + const { jumpTo, page } = locale.pagination return (
  • {jumpTo} diff --git a/packages/components/pagination/src/contents/Sizes.tsx b/packages/components/pagination/src/contents/Sizes.tsx index e72ec8ca7..9efc1d698 100644 --- a/packages/components/pagination/src/contents/Sizes.tsx +++ b/packages/components/pagination/src/contents/Sizes.tsx @@ -17,7 +17,7 @@ export default defineComponent({ const sizeOptions = computed(() => { const { pageSizes = config.pageSizes } = props - const { itemsPerPage } = locale.value + const { itemsPerPage } = locale.pagination return pageSizes.map(size => { return { value: size, diff --git a/packages/components/pagination/src/contents/Total.tsx b/packages/components/pagination/src/contents/Total.tsx index 873066fff..dd54494aa 100644 --- a/packages/components/pagination/src/contents/Total.tsx +++ b/packages/components/pagination/src/contents/Total.tsx @@ -24,7 +24,7 @@ export default defineComponent({ return () => { const prefixCls = `${mergedPrefixCls.value}-total` const { total } = props - const { totalPrefix, totalSuffix } = locale.value + const { totalPrefix, totalSuffix } = locale.pagination const children = slots.total ? slots.total({ total, range: range.value, prefix: totalPrefix, suffix: totalSuffix }) diff --git a/packages/components/pagination/src/token.ts b/packages/components/pagination/src/token.ts index 6d0e6eef2..f6237d5a8 100644 --- a/packages/components/pagination/src/token.ts +++ b/packages/components/pagination/src/token.ts @@ -8,14 +8,14 @@ import type { PagesContext } from './composables/usePages' import type { PaginationProps, PaginationSize } from './types' import type { PaginationConfig } from '@idux/components/config' -import type { PaginationLocale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey, Slots } from 'vue' export interface PaginationContext extends PagesContext { props: PaginationProps slots: Slots config: PaginationConfig - locale: ComputedRef + locale: Locale mergedPrefixCls: ComputedRef size: ComputedRef jumpToIndex: (event: KeyboardEvent) => void diff --git a/packages/components/popconfirm/src/Popconfirm.tsx b/packages/components/popconfirm/src/Popconfirm.tsx index e945accf7..7bc740bca 100644 --- a/packages/components/popconfirm/src/Popconfirm.tsx +++ b/packages/components/popconfirm/src/Popconfirm.tsx @@ -24,6 +24,7 @@ export default defineComponent({ setup(props, { slots, expose }) { const common = useGlobalConfig('common') const mergedPrefixCls = computed(() => `${common.prefixCls}-popconfirm`) + const locale = useGlobalConfig('locale') const config = useGlobalConfig('popconfirm') const { overlayRef, updatePopper, visible, setVisible, overlayProps } = ɵUseTooltipOverlay( @@ -37,6 +38,7 @@ export default defineComponent({ provide(popconfirmToken, { props, slots, + locale, mergedPrefixCls, visible, cancelLoading, diff --git a/packages/components/popconfirm/src/PopconfirmContent.tsx b/packages/components/popconfirm/src/PopconfirmContent.tsx index ecb68f54b..335f8e47e 100644 --- a/packages/components/popconfirm/src/PopconfirmContent.tsx +++ b/packages/components/popconfirm/src/PopconfirmContent.tsx @@ -5,24 +5,20 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { PopconfirmButtonProps } from './types' -import type { VNode } from 'vue' - import { computed, defineComponent, inject } from 'vue' import { ɵFooter } from '@idux/components/_private/footer' -import { getLocale } from '@idux/components/i18n' import { IxIcon } from '@idux/components/icon' import { popconfirmToken } from './token' +import { type PopconfirmButtonProps } from './types' export default defineComponent({ setup() { - const { props, slots, mergedPrefixCls, cancelLoading, okLoading, cancel, ok } = inject(popconfirmToken)! - const locale = getLocale('popconfirm') + const { props, slots, locale, mergedPrefixCls, cancelLoading, okLoading, cancel, ok } = inject(popconfirmToken)! - const cancelText = computed(() => props.cancelText ?? locale.value.cancelText) - const okText = computed(() => props.okText ?? locale.value.okText) + const cancelText = computed(() => props.cancelText ?? locale.popconfirm.cancelText) + const okText = computed(() => props.okText ?? locale.popconfirm.okText) const cancelButton = computed(() => { return { size: 'sm', ...props.cancelButton } @@ -34,16 +30,12 @@ export default defineComponent({ return () => { const prefixCls = mergedPrefixCls.value - const children: VNode[] = [] - if (slots.title || props.title) { - children.push() - } return (
    - {slots.icon?.() ?? } - {slots.title?.() ?? props.title} + {slots.icon ? slots.icon() : } + {slots.title ? slots.title() : props.title}
    <ɵFooter v-slots={slots} diff --git a/packages/components/popconfirm/src/token.ts b/packages/components/popconfirm/src/token.ts index eaf22b2d0..d8b9b82c5 100644 --- a/packages/components/popconfirm/src/token.ts +++ b/packages/components/popconfirm/src/token.ts @@ -6,11 +6,13 @@ */ import type { PopconfirmProps } from './types' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue' export interface PopconfirmContext { props: PopconfirmProps slots: Slots + locale: Locale mergedPrefixCls: ComputedRef visible: ComputedRef cancelLoading: Ref diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx index 75aba65d8..a763c03f9 100644 --- a/packages/components/table/src/Table.tsx +++ b/packages/components/table/src/Table.tsx @@ -13,7 +13,6 @@ import { isBoolean } from 'lodash-es' import { ɵHeader } from '@idux/components/_private/header' import { useGlobalConfig } from '@idux/components/config' -import { getLocale } from '@idux/components/i18n' import { IxSpin } from '@idux/components/spin' import { useColumns } from './composables/useColumns' @@ -38,11 +37,11 @@ export default defineComponent({ name: 'IxTable', props: tableProps, setup(props, { expose, slots }) { - const config = useGlobalConfig('table') const common = useGlobalConfig('common') const mergedPrefixCls = computed(() => `${common.prefixCls}-table`) + const locale = useGlobalConfig('locale') + const config = useGlobalConfig('table') - const locale = getLocale('table') const tags = useTags(props) const getRowKey = useGetRowKey(props, config) const stickyContext = useSticky(props) diff --git a/packages/components/table/src/composables/useSelectable.ts b/packages/components/table/src/composables/useSelectable.ts index d16c8508e..524d17891 100644 --- a/packages/components/table/src/composables/useSelectable.ts +++ b/packages/components/table/src/composables/useSelectable.ts @@ -10,7 +10,7 @@ import { type ComputedRef, computed } from 'vue' import { isNil, isString, isSymbol } from 'lodash-es' import { type VKey, callEmit, useControlledProp } from '@idux/cdk/utils' -import { type TableLocale } from '@idux/components/i18n' +import { type Locale } from '@idux/components/locales' import { type MenuClickOptions, type MenuData } from '@idux/components/menu' import { type TableProps } from '../types' @@ -19,7 +19,7 @@ import { type DataSourceContext, type MergedData } from './useDataSource' export function useSelectable( props: TableProps, - locale: ComputedRef, + locale: Locale, flattedColumns: ComputedRef, { mergedMap, paginatedMap }: DataSourceContext, ): SelectableContext { @@ -234,16 +234,13 @@ const invertMenuItemKey = Symbol('IDUX_TABLE_KEY_selectable-invert') const noneMenuItemKey = Symbol('IDUX_TABLE_KEY_selectable-none') const pageInvertMenuItemKey = Symbol('IDUX_TABLE_KEY_selectable-pageInvert') -function useMergedMenus( - selectable: ComputedRef, - locale: ComputedRef, -) { +function useMergedMenus(selectable: ComputedRef, locale: Locale) { return computed(() => { const { menus } = selectable.value || {} if (!menus || menus.length === 0) { return [] } - const { selectAll, selectInvert, selectNone, selectPageInvert } = locale.value + const { selectAll, selectInvert, selectNone, selectPageInvert } = locale.table return menus.map(item => { if (isString(item)) { if (item === 'all') { diff --git a/packages/components/table/src/main/head/triggers/FilterableTrigger.tsx b/packages/components/table/src/main/head/triggers/FilterableTrigger.tsx index d66d0134a..77b1587e7 100644 --- a/packages/components/table/src/main/head/triggers/FilterableTrigger.tsx +++ b/packages/components/table/src/main/head/triggers/FilterableTrigger.tsx @@ -13,8 +13,8 @@ import { type VKey, useState } from '@idux/cdk/utils' import { IxButton } from '@idux/components/button' import { IxCheckbox } from '@idux/components/checkbox' import { type DropdownProps, IxDropdown } from '@idux/components/dropdown' -import { type TableLocale } from '@idux/components/i18n' import { IxIcon } from '@idux/components/icon' +import { type Locale } from '@idux/components/locales' import { IxMenu, type MenuData, type MenuItemProps, type MenuProps } from '@idux/components/menu' import { IxRadio } from '@idux/components/radio' @@ -137,12 +137,12 @@ const renderMenu = ( } const renderFooter = ( - locale: ComputedRef, + locale: Locale, mergedPrefixCls: ComputedRef, handleConfirm: () => void, handleReset: () => void, ) => { - const { filterConfirm, filterReset } = locale.value + const { filterConfirm, filterReset } = locale.table return (
    diff --git a/packages/components/table/src/main/head/triggers/SortableTrigger.tsx b/packages/components/table/src/main/head/triggers/SortableTrigger.tsx index 72a989d75..74b74a714 100644 --- a/packages/components/table/src/main/head/triggers/SortableTrigger.tsx +++ b/packages/components/table/src/main/head/triggers/SortableTrigger.tsx @@ -10,8 +10,8 @@ import type { ComputedRef } from 'vue' import { defineComponent, inject } from 'vue' -import { TableLocale } from '@idux/components/i18n' import { IxIcon } from '@idux/components/icon' +import { type TableLocale } from '@idux/components/locales' import { IxTooltip } from '@idux/components/tooltip' import { TABLE_TOKEN } from '../../../token' @@ -25,7 +25,7 @@ export default defineComponent({ return () => { const { activeOrderBy, sortable } = props const { orders, nextTooltip } = sortable - const title = nextTooltip && getNextTooltipTitle(locale.value, orders!, activeOrderBy) + const title = nextTooltip && getNextTooltipTitle(locale.table, orders!, activeOrderBy) const sortableTriggerNode = renderSortTrigger(mergedPrefixCls, orders!, activeOrderBy) return title ? {sortableTriggerNode} : sortableTriggerNode } diff --git a/packages/components/table/src/token.ts b/packages/components/table/src/token.ts index 174fc1d62..4594e5119 100644 --- a/packages/components/table/src/token.ts +++ b/packages/components/table/src/token.ts @@ -19,7 +19,7 @@ import type { TagsContext } from './composables/useTags' import type { TableProps } from './types' import type { VKey } from '@idux/cdk/utils' import type { TableConfig } from '@idux/components/config' -import type { TableLocale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue' export interface TableContext @@ -37,7 +37,7 @@ export interface TableContext mergedPrefixCls: ComputedRef slots: Slots config: TableConfig - locale: ComputedRef + locale: Locale getRowKey: ComputedRef tableLayout: ComputedRef<'auto' | 'fixed'> } diff --git a/packages/components/time-picker/src/TimePicker.tsx b/packages/components/time-picker/src/TimePicker.tsx index a585f9c3e..5f1e7f5d7 100644 --- a/packages/components/time-picker/src/TimePicker.tsx +++ b/packages/components/time-picker/src/TimePicker.tsx @@ -26,11 +26,12 @@ export default defineComponent({ name: 'IxTimePicker', props: timePickerProps, setup(props, { slots }) { + const common = useGlobalConfig('common') + const mergedPrefixCls = computed(() => `${common.prefixCls}-time-picker`) + const locale = useGlobalConfig('locale') const config = useGlobalConfig('timePicker') const dateConfig = useDateConfig() const { isValid, parse } = dateConfig - const common = useGlobalConfig('common') - const mergedPrefixCls = computed(() => `${common.prefixCls}-time-picker`) const [visibility, setVisibility] = useControlledProp(props, 'open', false) const format = computed(() => props.format ?? config.format) @@ -59,14 +60,15 @@ export default defineComponent({ provide(timePickerControl, pickerControl) provide(timePickerContext, { + props, + slots, dateConfig, + locale, config, - props, + mergedPrefixCls, format, formContext, - slots, overlayOpened: visibility, - mergedPrefixCls, inputEnableStatus, commonBindings, setOverlayOpened: changeVisible, diff --git a/packages/components/time-picker/src/TimeRangePicker.tsx b/packages/components/time-picker/src/TimeRangePicker.tsx index 4e49b9b9c..1e9b098c7 100644 --- a/packages/components/time-picker/src/TimeRangePicker.tsx +++ b/packages/components/time-picker/src/TimeRangePicker.tsx @@ -15,7 +15,6 @@ import { useControlledProp, useState } from '@idux/cdk/utils' import { ɵOverlay } from '@idux/components/_private/overlay' import { useDateConfig, useGlobalConfig } from '@idux/components/config' import { FORM_TOKEN } from '@idux/components/form' -import { getLocale } from '@idux/components/i18n' import { useInputEnableStatus } from './composables/useInputEnableStatus' import { useRangePickerControl } from './composables/usePickerControl' @@ -31,12 +30,12 @@ export default defineComponent({ name: 'IxTimeRangePicker', props: timeRangePickerProps, setup(props, { slots }) { + const common = useGlobalConfig('common') + const mergedPrefixCls = computed(() => `${common.prefixCls}-time-range-picker`) + const locale = useGlobalConfig('locale') const config = useGlobalConfig('timeRangePicker') const dateConfig = useDateConfig() const { isValid, parse } = dateConfig - const locale = getLocale('timeRangePicker') - const common = useGlobalConfig('common') - const mergedPrefixCls = computed(() => `${common.prefixCls}-time-range-picker`) const [visibility, setVisibility] = useControlledProp(props, 'open', false) const format = computed(() => props.format ?? config.format) @@ -73,18 +72,19 @@ export default defineComponent({ const formContext = inject(FORM_TOKEN, null) - const renderSeparator = () => slots.separator?.() ?? props.separator ?? locale.value.separator + const renderSeparator = () => slots.separator?.() ?? props.separator ?? locale.timeRangePicker.separator provide(timeRangePickerControl, rangePickerControl) provide(timeRangePickerContext, { + props, + slots, dateConfig, + locale, config, - props, + mergedPrefixCls, format, formContext, - slots, overlayOpened: visibility, - mergedPrefixCls, inputEnableStatus, commonBindings, bufferValue, diff --git a/packages/components/time-picker/src/overlay/Overlay.tsx b/packages/components/time-picker/src/overlay/Overlay.tsx index b68fbe935..275905f25 100644 --- a/packages/components/time-picker/src/overlay/Overlay.tsx +++ b/packages/components/time-picker/src/overlay/Overlay.tsx @@ -10,7 +10,6 @@ import type { InputInstance } from '@idux/components/input' import { defineComponent, inject, nextTick, ref, watch } from 'vue' import { ɵTimePanel } from '@idux/components/_private/time-panel' -import { getLocale } from '@idux/components/i18n' import { IxInput } from '@idux/components/input' import { useCommonInputProps, useCommonPanelProps } from '../composables/useProps' @@ -23,6 +22,7 @@ export default defineComponent({ const { slots, props, + locale, config, format, dateConfig, @@ -33,7 +33,6 @@ export default defineComponent({ commonBindings: { isDisabled, handleClear }, } = inject(timePickerContext)! const { inputValue, panelValue, setInputValue, handleInputChange, handlePanelChange } = inject(timePickerControl)! - const locale = getLocale('timePicker') const handleInputClear = (evt: Event) => { evt.stopPropagation() @@ -67,7 +66,7 @@ export default defineComponent({ value={inputValue.value} disabled={isDisabled.value} readonly={props.readonly} - placeholder={props.placeholder ?? locale.value.placeholder} + placeholder={props.placeholder ?? locale.timePicker.placeholder} onChange={handleInputChange} onClear={handleInputClear} v-slots={inputSlots} diff --git a/packages/components/time-picker/src/overlay/RangeOverlay.tsx b/packages/components/time-picker/src/overlay/RangeOverlay.tsx index c68612ee8..e46ff81c3 100644 --- a/packages/components/time-picker/src/overlay/RangeOverlay.tsx +++ b/packages/components/time-picker/src/overlay/RangeOverlay.tsx @@ -11,7 +11,6 @@ import { defineComponent, inject } from 'vue' import { ɵTimePanel } from '@idux/components/_private/time-panel' import { IxButton } from '@idux/components/button' -import { getLocale } from '@idux/components/i18n' import { IxInput } from '@idux/components/input' import { useCommonInputProps, useCommonPanelProps } from '../composables/useProps' @@ -23,14 +22,15 @@ export default defineComponent({ setup() { const { props, - config, + slots, dateConfig, + locale, + config, + mergedPrefixCls, format, - slots, inputEnableStatus, overlayOpened, formContext, - mergedPrefixCls, bufferValue, commonBindings: { isDisabled, handleChange }, renderSeparator, @@ -38,8 +38,6 @@ export default defineComponent({ } = inject(timeRangePickerContext)! const [fromPickerControl, toPickerControl] = inject(timeRangePickerControl)! - const locale = getLocale('timeRangePicker') - const inputProps = useCommonInputProps(props, config, formContext) const panelProps = useCommonPanelProps(props, config) @@ -93,7 +91,7 @@ export default defineComponent({ const renderFooter = () => slots.footer?.({ onConfirm: handleConfirm }) ?? ( - {locale.value.okText} + {locale.timeRangePicker.okText} ) @@ -104,13 +102,13 @@ export default defineComponent({
    {renderSide( fromPickerControl, - props.placeholder?.[0] ?? locale.value.placeholder[0], + props.placeholder?.[0] ?? locale.timeRangePicker.placeholder[0], props.defaultOpenValue?.[0], )}
    {renderSeparator()}
    {renderSide( toPickerControl, - props.placeholder?.[1] ?? locale.value.placeholder[1], + props.placeholder?.[1] ?? locale.timeRangePicker.placeholder[1], props.defaultOpenValue?.[1], )}
    diff --git a/packages/components/time-picker/src/tokens.ts b/packages/components/time-picker/src/tokens.ts index 71fff0699..66c68edf5 100644 --- a/packages/components/time-picker/src/tokens.ts +++ b/packages/components/time-picker/src/tokens.ts @@ -11,16 +11,18 @@ import type { TimePickerCommonBindings } from './composables/useTimePickerCommon import type { TimePickerProps, TimeRangePickerProps } from './types' import type { DateConfig, TimePickerConfig } from '@idux/components/config' import type { FormContext } from '@idux/components/form' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey, Slots, VNodeTypes } from 'vue' interface BasePickerContext { - config: Readonly - mergedPrefixCls: ComputedRef - dateConfig: DateConfig props: T + slots: Slots + dateConfig: DateConfig + locale: Locale + config: TimePickerConfig + mergedPrefixCls: ComputedRef format: ComputedRef formContext: FormContext | null - slots: Slots overlayOpened: ComputedRef inputEnableStatus: ComputedRef commonBindings: TimePickerCommonBindings diff --git a/packages/components/time-picker/src/trigger/RangeTrigger.tsx b/packages/components/time-picker/src/trigger/RangeTrigger.tsx index 62cbd3eb6..06d5eaa1f 100644 --- a/packages/components/time-picker/src/trigger/RangeTrigger.tsx +++ b/packages/components/time-picker/src/trigger/RangeTrigger.tsx @@ -5,14 +5,11 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { PickerControl } from '../composables/usePickerControl' -import type { ComputedRef } from 'vue' +import { type ComputedRef, computed, defineComponent, inject } from 'vue' -import { computed, defineComponent, inject } from 'vue' - -import { DateConfig, useGlobalConfig } from '@idux/components/config' -import { getLocale } from '@idux/components/i18n' +import { type DateConfig, useGlobalConfig } from '@idux/components/config' +import { type PickerControl } from '../composables/usePickerControl' import { useCommonTriggerProps } from '../composables/useProps' import { timeRangePickerContext, timeRangePickerControl } from '../tokens' import { timeRangePickerTriggerProps } from '../types' @@ -25,14 +22,14 @@ export default defineComponent({ const common = useGlobalConfig('common') const commonPrefixCls = computed(() => common.prefixCls) const mergedPrefixCls = computed(() => `${common.prefixCls}-time-range-picker-trigger`) - const locale = getLocale('timeRangePicker') const context = inject(timeRangePickerContext)! const { - dateConfig, props: pickerProps, - format, slots, + dateConfig, + locale, + format, inputEnableStatus, setOverlayOpened, renderSeparator, @@ -49,8 +46,8 @@ export default defineComponent({ } const placeholder: ComputedRef<[string, string]> = computed(() => [ - pickerProps.placeholder?.[0] ?? locale.value.placeholder[0], - pickerProps.placeholder?.[1] ?? locale.value.placeholder[1], + pickerProps.placeholder?.[0] ?? locale.timeRangePicker.placeholder[0], + pickerProps.placeholder?.[1] ?? locale.timeRangePicker.placeholder[1], ]) const triggerProps = useCommonTriggerProps(props, context) diff --git a/packages/components/time-picker/src/trigger/Trigger.tsx b/packages/components/time-picker/src/trigger/Trigger.tsx index d3c46cc55..e769e1f6b 100644 --- a/packages/components/time-picker/src/trigger/Trigger.tsx +++ b/packages/components/time-picker/src/trigger/Trigger.tsx @@ -8,7 +8,6 @@ import { computed, defineComponent, inject, withKeys } from 'vue' import { useGlobalConfig } from '@idux/components/config' -import { getLocale } from '@idux/components/i18n' import { useCommonTriggerProps } from '../composables/useProps' import { timePickerContext, timePickerControl } from '../tokens' @@ -21,14 +20,14 @@ export default defineComponent({ setup(props) { const common = useGlobalConfig('common') const mergedPrefixCls = computed(() => `${common.prefixCls}-time-picker-trigger`) - const locale = getLocale('timePicker') const context = inject(timePickerContext)! const { - dateConfig, props: pickerProps, - format, slots, + dateConfig, + locale, + format, inputEnableStatus, setOverlayOpened, commonBindings: { isDisabled, handleClear }, @@ -43,7 +42,7 @@ export default defineComponent({ setOverlayOpened(true) } - const placeholder = computed(() => pickerProps.placeholder ?? locale.value.placeholder) + const placeholder = computed(() => pickerProps.placeholder ?? locale.timePicker.placeholder) const triggerProps = useCommonTriggerProps(props, context) const renderContent = () => { diff --git a/packages/components/upload/__tests__/list.spec.ts b/packages/components/upload/__tests__/list.spec.ts index b3671e2e5..2600ca2e0 100644 --- a/packages/components/upload/__tests__/list.spec.ts +++ b/packages/components/upload/__tests__/list.spec.ts @@ -7,6 +7,7 @@ import { h, ref } from 'vue' import { renderWork } from '@tests' import { IxIcon } from '@idux/components/icon' +import { zhCN } from '@idux/components/locales' import UploadFilesCpm from '../src/List' import { uploadToken } from '../src/token' @@ -20,6 +21,7 @@ const uploadFilesMount = (options?: MountingOptions>) provide: { [uploadToken as symbol]: { props: {}, + locale: zhCN, files: { value: [] }, setSelectorVisible: () => {}, ...provideObj, diff --git a/packages/components/upload/src/Upload.tsx b/packages/components/upload/src/Upload.tsx index 1090b7445..b9c9ecb93 100644 --- a/packages/components/upload/src/Upload.tsx +++ b/packages/components/upload/src/Upload.tsx @@ -5,11 +5,10 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { Ref } from 'vue' - -import { defineComponent, provide, ref, shallowRef } from 'vue' +import { type Ref, defineComponent, provide, ref, shallowRef } from 'vue' import { useControlledProp } from '@idux/cdk/utils' +import { useGlobalConfig } from '@idux/components/config' import { IxImageViewer } from '@idux/components/image' import FileSelector from './component/Selector' @@ -22,6 +21,7 @@ export default defineComponent({ name: 'IxUpload', props: uploadProps, setup(props, { slots }) { + const locale = useGlobalConfig('locale') const cpmClasses = useCmpClasses() const [showSelector, setSelectorVisible] = useShowSelector() const [files, onUpdateFiles] = useControlledProp(props, 'files', []) @@ -29,6 +29,7 @@ export default defineComponent({ const { viewerVisible, images, setViewerVisible } = useImageViewer() provide(uploadToken, { props, + locale, files, fileUploading, onUpdateFiles, diff --git a/packages/components/upload/src/component/ImageCardList.tsx b/packages/components/upload/src/component/ImageCardList.tsx index a0c01136a..8a0c4800e 100644 --- a/packages/components/upload/src/component/ImageCardList.tsx +++ b/packages/components/upload/src/component/ImageCardList.tsx @@ -5,16 +5,10 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { FileOperation } from '../composables/useOperation' -import type { UploadFile, UploadFileStatus, UploadProps } from '../types' -import type { IconsMap } from '../util/icon' -import type { Locale } from '@idux/components/i18n' -import type { ComputedRef } from 'vue' +import { type ComputedRef, computed, defineComponent, inject, normalizeClass, onBeforeUnmount } from 'vue' -import { computed, defineComponent, inject, normalizeClass, onBeforeUnmount } from 'vue' - -import { getLocale } from '@idux/components/i18n' import { IxIcon } from '@idux/components/icon' +import { type Locale } from '@idux/components/locales' import { IxProgress } from '@idux/components/progress' import { IxTooltip } from '@idux/components/tooltip' @@ -26,10 +20,10 @@ import { useSelectorVisible, useThumb, } from '../composables/useDisplay' -import { useOperation } from '../composables/useOperation' +import { type FileOperation, useOperation } from '../composables/useOperation' import { uploadToken } from '../token' -import { uploadFilesProps } from '../types' -import { renderOprIcon } from '../util/icon' +import { UploadFile, type UploadFileStatus, type UploadProps, uploadFilesProps } from '../types' +import { type IconsMap, renderOprIcon } from '../util/icon' import { showDownload, showErrorTip, showPreview, showProgress, showRetry } from '../util/visible' import FileSelector from './Selector' @@ -37,11 +31,10 @@ export default defineComponent({ name: 'IxUploadImageCardList', props: uploadFilesProps, setup(listProps) { - const { props: uploadProps, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)! + const { props: uploadProps, locale, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)! const icons = useIcon(listProps) const cpmClasses = useCmpClasses() const listClasses = useListClasses(uploadProps, 'imageCard') - const locale = getLocale('upload') const [, imageCardVisible] = useSelectorVisible(uploadProps, 'imageCard') const showSelector = useShowSelector(uploadProps, files, imageCardVisible) const { getThumbNode, revokeAll } = useThumb() @@ -70,7 +63,7 @@ function renderItem( icons: ComputedRef, cpmClasses: ComputedRef, fileOperation: FileOperation, - locale: ComputedRef, + locale: Locale, getThumbNode: UseThumb['getThumbNode'], ) { const fileClasses = normalizeClass([`${cpmClasses.value}-file`, `${cpmClasses.value}-file-${file.status}`]) @@ -101,12 +94,12 @@ function renderItem( function renderUploadStatus( uploadProps: UploadProps, file: UploadFile, - locale: ComputedRef, + locale: Locale, cpmClasses: ComputedRef, ) { const statusTitle = { - error: locale.value.error, - uploading: locale.value.uploading, + error: locale.upload.error, + uploading: locale.upload.uploading, } as Record const curTitle = file.status && statusTitle[file.status!] return ( diff --git a/packages/components/upload/src/component/ImageList.tsx b/packages/components/upload/src/component/ImageList.tsx index 26c93915d..31ba052ea 100644 --- a/packages/components/upload/src/component/ImageList.tsx +++ b/packages/components/upload/src/component/ImageList.tsx @@ -9,12 +9,11 @@ import type { UseThumb } from '../composables/useDisplay' import type { FileOperation } from '../composables/useOperation' import type { UploadFile, UploadProps } from '../types' import type { IconsMap } from '../util/icon' -import type { Locale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef } from 'vue' import { defineComponent, inject, normalizeClass, onBeforeUnmount } from 'vue' -import { getLocale } from '@idux/components/i18n' import { IxProgress } from '@idux/components/progress' import { IxTooltip } from '@idux/components/tooltip' @@ -29,11 +28,10 @@ export default defineComponent({ name: 'IxUploadImageList', props: uploadFilesProps, setup(listProps) { - const { props: uploadProps, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)! + const { props: uploadProps, locale, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)! const icons = useIcon(listProps) const cpmClasses = useCmpClasses() const listClasses = useListClasses(uploadProps, 'image') - const locale = getLocale('upload') const { getThumbNode, revokeAll } = useThumb() const fileOperation = useOperation(files, listProps, uploadProps, { abort, @@ -61,7 +59,7 @@ function renderItem( icons: ComputedRef, cpmClasses: ComputedRef, fileOperation: FileOperation, - locale: ComputedRef, + locale: Locale, getThumbNode: UseThumb['getThumbNode'], ) { const fileClasses = normalizeClass([`${cpmClasses.value}-file`, `${cpmClasses.value}-file-${file.status}`]) diff --git a/packages/components/upload/src/component/TextList.tsx b/packages/components/upload/src/component/TextList.tsx index 61306e9a9..2bb331abc 100644 --- a/packages/components/upload/src/component/TextList.tsx +++ b/packages/components/upload/src/component/TextList.tsx @@ -8,12 +8,11 @@ import type { FileOperation } from '../composables/useOperation' import type { UploadFile, UploadProps } from '../types' import type { IconsMap } from '../util/icon' -import type { Locale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef } from 'vue' import { defineComponent, inject, normalizeClass } from 'vue' -import { getLocale } from '@idux/components/i18n' import { IxProgress } from '@idux/components/progress' import { IxTooltip } from '@idux/components/tooltip' @@ -28,11 +27,10 @@ export default defineComponent({ name: 'IxUploadTextList', props: uploadFilesProps, setup(listProps) { - const { props: uploadProps, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)! + const { props: uploadProps, locale, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)! const icons = useIcon(listProps) const cpmClasses = useCmpClasses() const listClasses = useListClasses(uploadProps, 'text') - const locale = getLocale('upload') const fileOperation = useOperation(files, listProps, uploadProps, { abort, upload, @@ -55,7 +53,7 @@ function renderItem( icons: ComputedRef, cpmClasses: ComputedRef, fileOperation: FileOperation, - locale: ComputedRef, + locale: Locale, ) { const fileClasses = normalizeClass([`${cpmClasses.value}-file`, `${cpmClasses.value}-file-${file.status}`]) const fileNameClasses = normalizeClass([`${cpmClasses.value}-name`, `${cpmClasses.value}-name-pointer`]) diff --git a/packages/components/upload/src/token.ts b/packages/components/upload/src/token.ts index ecb28d6da..f9f7f8697 100644 --- a/packages/components/upload/src/token.ts +++ b/packages/components/upload/src/token.ts @@ -7,10 +7,12 @@ import type { UploadRequest } from './composables/useRequest' import type { UploadFile, UploadProps } from './types' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, InjectionKey } from 'vue' export type UploadToken = { props: UploadProps + locale: Locale files: ComputedRef setViewerVisible: (visible: boolean, imageSrc?: string) => void onUpdateFiles: (file: UploadFile[]) => void diff --git a/packages/components/upload/src/util/icon.ts b/packages/components/upload/src/util/icon.ts index 6375ef77a..922c6e33d 100644 --- a/packages/components/upload/src/util/icon.ts +++ b/packages/components/upload/src/util/icon.ts @@ -7,7 +7,7 @@ import type { FileOperation } from '../composables/useOperation' import type { UploadFile, UploadIconType } from '../types' -import type { Locale } from '@idux/components/i18n' +import type { Locale } from '@idux/components/locales' import type { ComputedRef, VNode } from 'vue' import { h } from 'vue' @@ -45,27 +45,27 @@ export function renderOprIcon( icons: ComputedRef, cpmClasses: ComputedRef, fileOperation: FileOperation, - locale: ComputedRef, + locale: Locale, ): OprIcons { const previewNode = renderIcon(icons.value.preview, { class: `${cpmClasses.value}-icon-opr ${cpmClasses.value}-icon-preview`, onClick: () => fileOperation.preview(file), - title: locale.value.preview, + title: locale.upload.preview, }) const retryNode = renderIcon(icons.value.retry, { class: `${cpmClasses.value}-icon-opr ${cpmClasses.value}-icon-retry`, onClick: () => fileOperation.retry(file), - title: locale.value.retry, + title: locale.upload.retry, }) const downloadNode = renderIcon(icons.value.download, { class: `${cpmClasses.value}-icon-opr ${cpmClasses.value}-icon-download`, onClick: () => fileOperation.download(file), - title: locale.value.download, + title: locale.upload.download, }) const removeNode = renderIcon(icons.value.remove, { class: `${cpmClasses.value}-icon-opr ${cpmClasses.value}-icon-remove`, onClick: () => fileOperation.remove(file), - title: locale.value.remove, + title: locale.upload.remove, }) return { diff --git a/packages/site/src/docs/GettingStarted.zh.md b/packages/site/src/docs/GettingStarted.zh.md index 6d8a6969e..6c7dd3b58 100755 --- a/packages/site/src/docs/GettingStarted.zh.md +++ b/packages/site/src/docs/GettingStarted.zh.md @@ -62,15 +62,12 @@ import IduxPro from "@idux/pro"; import "@idux/components/default.min.css"; import "@idux/pro/default.min.css"; -// 默认为中文，可以打开注释设置为其他语言 -// import { useLocale, enUS } from "@idux/components/i18n"; -// useLocale(enUS); - import { createGlobalConfig } from "@idux/components/config"; import { IDUX_ICON_DEPENDENCIES, addIconDefinitions, } from "@idux/components/icon"; +// import { enUS } from "@idux/components/locales"; // 静态加载: `IDUX_ICON_DEPENDENCIES` 是 `@idux` 的部分组件默认所使用到图标，建议在此时静态引入。 addIconDefinitions(IDUX_ICON_DEPENDENCIES); @@ -82,6 +79,8 @@ const loadIconDynamically = (iconName: string) => { }; const globalConfig = createGlobalConfig({ + // 默认为中文，可以打开注释设置为其他语言 + // locale: enUS, icon: { loadIconDynamically }, }); diff --git a/packages/site/src/docs/I18n.zh.md b/packages/site/src/docs/I18n.zh.md index b4ac1b163..6502f12c9 100755 --- a/packages/site/src/docs/I18n.zh.md +++ b/packages/site/src/docs/I18n.zh.md @@ -9,28 +9,37 @@ order: 4 ## 初始化 ```typescript -import { useLocale, enUS } from '@idux/components/i18n' +// main.ts +import { enUS } from '@idux/components/locales' -useLocale(enUS) +const globalConfig = createGlobalConfig({ + locale: enUS, +}); + +app.use(globalConfig); ``` ## 运行时切换 ```typescript -import { addLocale, useLocale, zhCN, enUS } from '@idux/components/i18n' +// MyComponent.vue +import { useGlobalConfig } from "@idux/components/config"; +import { zhCN, enUS } from '@idux/components/locales' -// 首先需要先添加多语言包 -addLocale([zhCN, enUS]) -useLocale('en-US') -// 运行时切换 -setTimeout(()=> useLocale('zh-CN'), 3000) -``` +// 默认设置为英文 +const [locale, setLocale] = useGlobalConfig('locale', enUS) -注意：`zh-CN`, `en-US` 是语言包名称，以下表格也遵循同样的规则。 +// 3s 后切换为中文 +setTimeout(()=> setLocale(zhCN), 3000) +``` ## 支持语言 +`zh-CN`, `en-US` 是语言包名称。 + | 语言 | 语言包名 | | --- | --- | | 中文简体 | `zh-CN` | | 英语（美式）| `en-US` | + +详细类型请参见: [Locale](https://github.com/IDuxFE/idux/tree/main/packages/components/locales) diff --git a/packages/site/src/global/codesandbox.ts b/packages/site/src/global/codesandbox.ts index ba70819e1..5bfabe8b0 100644 --- a/packages/site/src/global/codesandbox.ts +++ b/packages/site/src/global/codesandbox.ts @@ -113,18 +113,27 @@ import IduxPro from '@idux/pro'; import '@idux/components/default.min.css'; import '@idux/pro/default.min.css'; -// import { useLocale, en_US } from '@idux/components/i18n'; -// useLocale(en_US); - +import { createGlobalConfig } from "@idux/components/config"; import { IDUX_ICON_DEPENDENCIES, addIconDefinitions } from '@idux/components/icon'; +// import { enUS } from "@idux/components/locales"; addIconDefinitions(IDUX_ICON_DEPENDENCIES); -const install = (app: App) => { - app.use(IduxCdk).use(IduxComponents).use(IduxPro); +const loadIconDynamically = (iconName: string) => { + return fetch(\`https://idux-cdn.sangfor.com.cn/icons/\${iconName}.svg\`).then((res) => res.text()); +}; + +const globalConfig = createGlobalConfig({ + // 默认为中文，可以打开注释设置为其他语言 + // locale: enUS, + icon: { loadIconDynamically }, +}); + +const install = (app: App): void => { + app.use(IduxCdk).use(IduxComponents).use(IduxPro).use(globalConfig); }; export default { install };` diff --git a/packages/site/src/iduxInstall.ts b/packages/site/src/iduxInstall.ts index 146531ba8..2c79a611e 100644 --- a/packages/site/src/iduxInstall.ts +++ b/packages/site/src/iduxInstall.ts @@ -5,11 +5,6 @@ import IduxCdk from '@idux/cdk' import IduxComponents from '@idux/components' import IduxPro from '@idux/pro' -// eslint-disable-next-line camelcase -import { useLocale, zhCN } from '@idux/components/i18n' - -useLocale(zhCN) - import { createGlobalConfig } from '@idux/components/config' import { IDUX_ICON_DEPENDENCIES, addIconDefinitions } from '@idux/components/icon' diff --git a/scripts/gen/style-variable/config.ts b/scripts/gen/style-variable/config.ts index 434b34015..4e2c89b4a 100644 --- a/scripts/gen/style-variable/config.ts +++ b/scripts/gen/style-variable/config.ts @@ -9,7 +9,7 @@ export default { excludes: [ 'components/_private', 'components/config', - 'components/i18n', + 'components/locales', 'components/style', 'components/utils', 'components/version', diff --git a/scripts/gulp/site/utils.ts b/scripts/gulp/site/utils.ts index cb8a23053..c6ed5ea8a 100644 --- a/scripts/gulp/site/utils.ts +++ b/scripts/gulp/site/utils.ts @@ -32,7 +32,7 @@ export function initSite(): void { }) const filterPackageName = ['site'] - const filterComponentName = ['node_modules', 'config', 'style', 'i18n', 'version', 'utils', '_private'] + const filterComponentName = ['node_modules', 'config', 'style', 'locales', 'version', 'utils', '_private'] readdirSync(packageRoot).forEach(packageName => { if (filterPackageName.includes(packageName)) { return