@14ch/svelte-ui 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/dist/assets/styles/variables.scss +2 -8
  2. package/dist/components/Button.svelte +104 -76
  3. package/dist/components/Button.svelte.d.ts +7 -5
  4. package/dist/components/Checkbox.svelte +80 -80
  5. package/dist/components/Checkbox.svelte.d.ts +4 -4
  6. package/dist/components/CheckboxGroup.svelte +48 -29
  7. package/dist/components/CheckboxGroup.svelte.d.ts +3 -3
  8. package/dist/components/ColorPicker.svelte +65 -64
  9. package/dist/components/ColorPicker.svelte.d.ts +5 -5
  10. package/dist/components/Combobox.svelte +97 -83
  11. package/dist/components/Combobox.svelte.d.ts +3 -3
  12. package/dist/components/ConfirmDialog.svelte +26 -28
  13. package/dist/components/ConfirmDialog.svelte.d.ts +3 -3
  14. package/dist/components/Datepicker.svelte +201 -97
  15. package/dist/components/Datepicker.svelte.d.ts +10 -7
  16. package/dist/components/DatepickerCalendar.svelte +24 -19
  17. package/dist/components/DatepickerCalendar.svelte.d.ts +3 -3
  18. package/dist/components/Dialog.svelte +30 -28
  19. package/dist/components/Dialog.svelte.d.ts +2 -2
  20. package/dist/components/Drawer.svelte +32 -30
  21. package/dist/components/Drawer.svelte.d.ts +2 -2
  22. package/dist/components/Fab.svelte +81 -62
  23. package/dist/components/Fab.svelte.d.ts +10 -6
  24. package/dist/components/FileUploader.svelte +52 -50
  25. package/dist/components/FileUploader.svelte.d.ts +3 -3
  26. package/dist/components/Icon.svelte +29 -27
  27. package/dist/components/Icon.svelte.d.ts +2 -2
  28. package/dist/components/IconButton.svelte +83 -80
  29. package/dist/components/IconButton.svelte.d.ts +6 -5
  30. package/dist/components/ImageUploader.svelte +54 -52
  31. package/dist/components/ImageUploader.svelte.d.ts +3 -3
  32. package/dist/components/ImageUploaderPreview.svelte +33 -20
  33. package/dist/components/ImageUploaderPreview.svelte.d.ts +2 -2
  34. package/dist/components/Input.svelte +100 -94
  35. package/dist/components/Input.svelte.d.ts +6 -5
  36. package/dist/components/LoadingSpinner.svelte +14 -13
  37. package/dist/components/LoadingSpinner.svelte.d.ts +2 -2
  38. package/dist/components/Modal.svelte +26 -24
  39. package/dist/components/Modal.svelte.d.ts +2 -2
  40. package/dist/components/Pagination.svelte +20 -28
  41. package/dist/components/Pagination.svelte.d.ts +2 -2
  42. package/dist/components/Popup.svelte +111 -124
  43. package/dist/components/Popup.svelte.d.ts +6 -6
  44. package/dist/components/PopupMenu.svelte +109 -125
  45. package/dist/components/PopupMenu.svelte.d.ts +5 -5
  46. package/dist/components/PopupMenuButton.svelte +67 -80
  47. package/dist/components/PopupMenuButton.svelte.d.ts +7 -6
  48. package/dist/components/Radio.svelte +65 -64
  49. package/dist/components/Radio.svelte.d.ts +3 -3
  50. package/dist/components/RadioGroup.svelte +39 -27
  51. package/dist/components/RadioGroup.svelte.d.ts +3 -3
  52. package/dist/components/SegmentedControl.svelte +72 -71
  53. package/dist/components/SegmentedControl.svelte.d.ts +4 -4
  54. package/dist/components/Select.svelte +66 -66
  55. package/dist/components/Select.svelte.d.ts +3 -3
  56. package/dist/components/Slider.svelte +67 -67
  57. package/dist/components/Slider.svelte.d.ts +5 -5
  58. package/dist/components/Snackbar.svelte +11 -9
  59. package/dist/components/Snackbar.svelte.d.ts +5 -4
  60. package/dist/components/SnackbarItem.svelte +29 -28
  61. package/dist/components/SnackbarItem.svelte.d.ts +6 -5
  62. package/dist/components/Switch.svelte +64 -66
  63. package/dist/components/Switch.svelte.d.ts +4 -4
  64. package/dist/components/Tab.svelte +31 -20
  65. package/dist/components/Tab.svelte.d.ts +3 -2
  66. package/dist/components/TabItem.svelte +22 -21
  67. package/dist/components/TabItem.svelte.d.ts +2 -2
  68. package/dist/components/Textarea.svelte +94 -92
  69. package/dist/components/Textarea.svelte.d.ts +8 -7
  70. package/dist/components/skeleton/Skeleton.svelte +16 -14
  71. package/dist/components/skeleton/Skeleton.svelte.d.ts +2 -2
  72. package/dist/components/skeleton/SkeletonAvatar.svelte +30 -36
  73. package/dist/components/skeleton/SkeletonAvatar.svelte.d.ts +8 -4
  74. package/dist/components/skeleton/SkeletonBox.svelte +11 -11
  75. package/dist/components/skeleton/SkeletonBox.svelte.d.ts +2 -2
  76. package/dist/components/skeleton/SkeletonButton.svelte +26 -19
  77. package/dist/components/skeleton/SkeletonButton.svelte.d.ts +7 -4
  78. package/dist/components/skeleton/SkeletonHeading.svelte +17 -23
  79. package/dist/components/skeleton/SkeletonHeading.svelte.d.ts +5 -4
  80. package/dist/components/skeleton/SkeletonMedia.svelte +37 -45
  81. package/dist/components/skeleton/SkeletonMedia.svelte.d.ts +10 -4
  82. package/dist/components/skeleton/SkeletonText.svelte +18 -24
  83. package/dist/components/skeleton/SkeletonText.svelte.d.ts +6 -4
  84. package/dist/i18n/index.d.ts +143 -5
  85. package/dist/i18n/index.js +20 -32
  86. package/dist/i18n/locales/de.d.ts +35 -0
  87. package/dist/i18n/locales/de.js +35 -0
  88. package/dist/i18n/locales/es.d.ts +35 -0
  89. package/dist/i18n/locales/es.js +35 -0
  90. package/dist/i18n/locales/fr.d.ts +35 -0
  91. package/dist/i18n/locales/fr.js +35 -0
  92. package/dist/i18n/locales/zh-cn.d.ts +35 -0
  93. package/dist/i18n/locales/zh-cn.js +35 -0
  94. package/dist/index.d.ts +46 -2
  95. package/dist/index.js +1 -0
  96. package/dist/types/menuItem.d.ts +1 -1
  97. package/dist/types/propOptions.d.ts +54 -0
  98. package/dist/types/propOptions.js +5 -0
  99. package/dist/utils/formatText.js +4 -1
  100. package/dist/utils/popupManager.d.ts +26 -0
  101. package/dist/utils/popupManager.js +34 -0
  102. package/package.json +1 -1
  103. /package/dist/types/{eventHandlers.d.ts → callbackHandlers.d.ts} +0 -0
  104. /package/dist/types/{eventHandlers.js → callbackHandlers.js} +0 -0
@@ -1,8 +1,9 @@
1
- import type { SkeletonHeadingConfig } from '../../types/skeleton';
2
- type $$ComponentProps = {
3
- headingConfig?: Partial<SkeletonHeadingConfig>;
1
+ export type SkeletonHeadingProps = {
2
+ width?: string | number;
3
+ fontSize?: string | number;
4
+ customStyle?: string;
4
5
  animated?: boolean;
5
6
  };
6
- declare const SkeletonHeading: import("svelte").Component<$$ComponentProps, {}, "">;
7
+ declare const SkeletonHeading: import("svelte").Component<SkeletonHeadingProps, {}, "">;
7
8
  type SkeletonHeading = ReturnType<typeof SkeletonHeading>;
8
9
  export default SkeletonHeading;
@@ -4,55 +4,55 @@
4
4
  import SkeletonBox from './SkeletonBox.svelte';
5
5
  import SkeletonText from './SkeletonText.svelte';
6
6
  import { getStyleFromNumber } from '../../utils/style';
7
- import type { SkeletonMediaConfig } from '../../types/skeleton';
8
7
  import {
9
8
  DEFAULT_MEDIA_CONFIG,
10
9
  DEFAULT_THUMBNAIL_CONFIG,
11
10
  DEFAULT_TEXT_CONFIG_MEDIA
12
11
  } from '../../constants/skeleton';
13
12
 
14
- let {
15
- width = '100%',
16
- mediaConfig = {},
17
- animated = true
18
- }: {
13
+ // =========================================================================
14
+ // Props, States & Constants
15
+ // =========================================================================
16
+ export type SkeletonMediaProps = {
19
17
  width?: string | number;
20
- mediaConfig?: Partial<SkeletonMediaConfig>;
18
+ layout?: 'horizontal' | 'vertical';
19
+ textWidth?: string | number;
20
+ lines?: number;
21
+ fontSize?: string | number;
22
+ thumbnailWidth?: string | number;
23
+ thumbnailHeight?: string | number;
24
+ thumbnailAspectRatio?: string | number;
25
+ thumbnailRadius?: string | number;
21
26
  animated?: boolean;
22
- } = $props();
23
-
24
- // マージされた設定
25
- const mergedMediaConfig = $derived({
26
- ...DEFAULT_MEDIA_CONFIG,
27
- ...mediaConfig
28
- });
29
-
30
- // レイアウト方向を取得
31
- const layoutDirection = $derived(mergedMediaConfig.layout || 'horizontal');
27
+ };
32
28
 
33
- // マージされた設定
34
- const mergedThumbnailConfig = $derived({
35
- ...DEFAULT_THUMBNAIL_CONFIG,
36
- ...(mergedMediaConfig.thumbnailConfig || {})
37
- });
29
+ let {
30
+ width = '100%',
31
+ layout = DEFAULT_MEDIA_CONFIG.layout,
32
+ textWidth = DEFAULT_TEXT_CONFIG_MEDIA.width,
33
+ lines = DEFAULT_TEXT_CONFIG_MEDIA.lines,
34
+ fontSize,
35
+ thumbnailWidth = DEFAULT_THUMBNAIL_CONFIG.width,
36
+ thumbnailHeight,
37
+ thumbnailAspectRatio,
38
+ thumbnailRadius = DEFAULT_THUMBNAIL_CONFIG.radius,
39
+ animated = true
40
+ }: SkeletonMediaProps = $props();
38
41
 
39
- const mergedTextConfig = $derived({
40
- ...DEFAULT_TEXT_CONFIG_MEDIA,
41
- ...(mergedMediaConfig.textConfig || {})
42
- });
42
+ // =========================================================================
43
+ // $derived
44
+ // =========================================================================
45
+ const layoutDirection = $derived(layout || 'horizontal');
43
46
 
44
47
  const widthStyle = $derived(getStyleFromNumber(width));
45
- const thumbnailWidthStyle = $derived(getStyleFromNumber(mergedThumbnailConfig.width));
46
- const thumbnailHeightStyle = $derived(
47
- mergedThumbnailConfig.height ? getStyleFromNumber(mergedThumbnailConfig.height) : ''
48
- );
49
- const textWidthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
48
+ const thumbnailWidthStyle = $derived(getStyleFromNumber(thumbnailWidth));
49
+ const thumbnailHeightStyle = $derived(thumbnailHeight ? getStyleFromNumber(thumbnailHeight) : '');
50
+ const textWidthStyle = $derived(getStyleFromNumber(textWidth));
50
51
 
51
52
  // heightとaspectRatioの優先順位を制御
52
- const finalThumbnailHeight = $derived(mergedThumbnailConfig.height ? thumbnailHeightStyle : '');
53
- const finalThumbnailAspectRatio = $derived(
54
- mergedThumbnailConfig.height ? undefined : mergedThumbnailConfig.aspectRatio
55
- );
53
+ const finalThumbnailHeight = $derived(thumbnailHeight ? thumbnailHeightStyle : '');
54
+ const finalThumbnailAspectRatio = $derived(thumbnailHeight ? undefined : thumbnailAspectRatio);
55
+ const thumbnailRadiusStyle = $derived(thumbnailRadius ? getStyleFromNumber(thumbnailRadius) : '');
56
56
  </script>
57
57
 
58
58
  <div
@@ -64,18 +64,10 @@
64
64
  width={thumbnailWidthStyle}
65
65
  {...finalThumbnailHeight && { height: finalThumbnailHeight }}
66
66
  aspectRatio={finalThumbnailAspectRatio}
67
- radius={mergedThumbnailConfig.radius}
68
- {animated}
69
- customStyle={mergedThumbnailConfig.customStyle}
70
- />
71
- <SkeletonText
72
- textConfig={{
73
- width: textWidthStyle,
74
- lines: mergedTextConfig.lines,
75
- fontSize: mergedTextConfig.fontSize
76
- }}
67
+ radius={thumbnailRadiusStyle}
77
68
  {animated}
78
69
  />
70
+ <SkeletonText width={textWidthStyle} {lines} {fontSize} {animated} />
79
71
  </div>
80
72
 
81
73
  <style>
@@ -1,9 +1,15 @@
1
- import type { SkeletonMediaConfig } from '../../types/skeleton';
2
- type $$ComponentProps = {
1
+ export type SkeletonMediaProps = {
3
2
  width?: string | number;
4
- mediaConfig?: Partial<SkeletonMediaConfig>;
3
+ layout?: 'horizontal' | 'vertical';
4
+ textWidth?: string | number;
5
+ lines?: number;
6
+ fontSize?: string | number;
7
+ thumbnailWidth?: string | number;
8
+ thumbnailHeight?: string | number;
9
+ thumbnailAspectRatio?: string | number;
10
+ thumbnailRadius?: string | number;
5
11
  animated?: boolean;
6
12
  };
7
- declare const SkeletonMedia: import("svelte").Component<$$ComponentProps, {}, "">;
13
+ declare const SkeletonMedia: import("svelte").Component<SkeletonMediaProps, {}, "">;
8
14
  type SkeletonMedia = ReturnType<typeof SkeletonMedia>;
9
15
  export default SkeletonMedia;
@@ -3,48 +3,42 @@
3
3
  <script lang="ts">
4
4
  import SkeletonBox from './SkeletonBox.svelte';
5
5
  import { getStyleFromNumber } from '../../utils/style';
6
- import type { SkeletonTextConfig } from '../../types/skeleton';
7
6
  import { DEFAULT_TEXT_CONFIG } from '../../constants/skeleton';
8
7
 
9
8
  // =========================================================================
10
- // Props
9
+ // Props, States & Constants
11
10
  // =========================================================================
11
+ export type SkeletonTextProps = {
12
+ width?: string | number;
13
+ lines?: number;
14
+ fontSize?: string | number;
15
+ customStyle?: string;
16
+ animated?: boolean;
17
+ };
12
18
 
13
19
  let {
14
- // 基本プロパティ
15
- textConfig = {},
20
+ width = DEFAULT_TEXT_CONFIG.width,
21
+ lines = DEFAULT_TEXT_CONFIG.lines,
22
+ fontSize,
23
+ customStyle = DEFAULT_TEXT_CONFIG.customStyle,
16
24
  animated = true
17
- }: {
18
- textConfig?: Partial<SkeletonTextConfig>;
19
- animated?: boolean;
20
- } = $props();
21
-
22
- // マージされた設定
23
- const mergedTextConfig = $derived({
24
- ...DEFAULT_TEXT_CONFIG,
25
- ...textConfig
26
- });
27
-
28
- // =========================================================================
29
- // State
30
- // =========================================================================
31
-
32
- let containerRef: HTMLDivElement;
25
+ }: SkeletonTextProps = $props();
33
26
 
34
27
  // =========================================================================
35
28
  // $derived
36
29
  // =========================================================================
30
+ let containerRef: HTMLDivElement;
37
31
 
38
- const widthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
39
- const fontSizeStyle = $derived(getStyleFromNumber(mergedTextConfig.fontSize));
32
+ const widthStyle = $derived(getStyleFromNumber(width));
33
+ const fontSizeStyle = $derived(fontSize ? getStyleFromNumber(fontSize) : '');
40
34
  </script>
41
35
 
42
36
  <div
43
37
  bind:this={containerRef}
44
38
  class="skeleton-text"
45
- style="font-size: {fontSizeStyle}; {mergedTextConfig.customStyle}"
39
+ style="font-size: {fontSizeStyle}; {customStyle}"
46
40
  >
47
- {#each Array(mergedTextConfig.lines) as _, index}
41
+ {#each Array(lines) as _, index}
48
42
  <div class="skeleton-text__line" style="width: {widthStyle}">
49
43
  <SkeletonBox
50
44
  width="100%"
@@ -1,8 +1,10 @@
1
- import type { SkeletonTextConfig } from '../../types/skeleton';
2
- type $$ComponentProps = {
3
- textConfig?: Partial<SkeletonTextConfig>;
1
+ export type SkeletonTextProps = {
2
+ width?: string | number;
3
+ lines?: number;
4
+ fontSize?: string | number;
5
+ customStyle?: string;
4
6
  animated?: boolean;
5
7
  };
6
- declare const SkeletonText: import("svelte").Component<$$ComponentProps, {}, "">;
8
+ declare const SkeletonText: import("svelte").Component<SkeletonTextProps, {}, "">;
7
9
  type SkeletonText = ReturnType<typeof SkeletonText>;
8
10
  export default SkeletonText;
@@ -1,5 +1,5 @@
1
- export type Locale = 'en' | 'ja';
2
- export declare const MESSAGES: {
1
+ export type Locale = 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
2
+ export declare const TRANSLATIONS: {
3
3
  readonly en: {
4
4
  readonly datepicker: {
5
5
  readonly prevMonth: "Previous month";
@@ -70,12 +70,150 @@ export declare const MESSAGES: {
70
70
  readonly ellipsis: "省略されたページ";
71
71
  };
72
72
  };
73
+ readonly fr: {
74
+ readonly datepicker: {
75
+ readonly prevMonth: "Mois précédent";
76
+ readonly nextMonth: "Mois suivant";
77
+ readonly today: " aujourd'hui";
78
+ readonly selected: " sélectionné";
79
+ };
80
+ readonly iconButton: {
81
+ readonly badgeNew: "Nouveau";
82
+ };
83
+ readonly imageUploader: {
84
+ readonly unsupportedFileFormat: "Format de fichier non pris en charge";
85
+ readonly fileSizeExceeded: "La taille du fichier doit être inférieure ou égale à {{maxSize}}MB";
86
+ readonly uploadImage: "Télécharger une image";
87
+ readonly removeFile: "Supprimer l'image";
88
+ };
89
+ readonly fileUploader: {
90
+ readonly removeFile: "Supprimer le fichier";
91
+ readonly uploadFile: "Télécharger le fichier";
92
+ readonly placeholder: "Glissez-déposez les fichiers ici<br />ou cliquez pour sélectionner";
93
+ readonly maxFileSizeError: "La taille du fichier doit être inférieure ou égale à {{maxSize}}MB";
94
+ };
95
+ readonly combobox: {
96
+ readonly optionsList: "Liste des options";
97
+ };
98
+ readonly input: {
99
+ readonly clear: "Effacer";
100
+ };
101
+ readonly pagination: {
102
+ readonly prevPage: "Aller à la page précédente";
103
+ readonly nextPage: "Aller à la page suivante";
104
+ readonly goToPage: "Aller à la page {{page}}";
105
+ readonly ellipsis: "Pages omises";
106
+ };
107
+ };
108
+ readonly de: {
109
+ readonly datepicker: {
110
+ readonly prevMonth: "Vorheriger Monat";
111
+ readonly nextMonth: "Nächster Monat";
112
+ readonly today: " heute";
113
+ readonly selected: " ausgewählt";
114
+ };
115
+ readonly iconButton: {
116
+ readonly badgeNew: "Neu";
117
+ };
118
+ readonly imageUploader: {
119
+ readonly unsupportedFileFormat: "Nicht unterstütztes Dateiformat";
120
+ readonly fileSizeExceeded: "Die Dateigröße muss {{maxSize}}MB oder weniger betragen";
121
+ readonly uploadImage: "Bild hochladen";
122
+ readonly removeFile: "Bild entfernen";
123
+ };
124
+ readonly fileUploader: {
125
+ readonly removeFile: "Datei entfernen";
126
+ readonly uploadFile: "Datei hochladen";
127
+ readonly placeholder: "Dateien hier ablegen<br />oder klicken, um auszuwählen";
128
+ readonly maxFileSizeError: "Die Dateigröße muss {{maxSize}}MB oder weniger betragen";
129
+ };
130
+ readonly combobox: {
131
+ readonly optionsList: "Optionsliste";
132
+ };
133
+ readonly input: {
134
+ readonly clear: "Löschen";
135
+ };
136
+ readonly pagination: {
137
+ readonly prevPage: "Zur vorherigen Seite gehen";
138
+ readonly nextPage: "Zur nächsten Seite gehen";
139
+ readonly goToPage: "Zu Seite {{page}} gehen";
140
+ readonly ellipsis: "Ausgelassene Seiten";
141
+ };
142
+ };
143
+ readonly es: {
144
+ readonly datepicker: {
145
+ readonly prevMonth: "Mes anterior";
146
+ readonly nextMonth: "Mes siguiente";
147
+ readonly today: " hoy";
148
+ readonly selected: " seleccionado";
149
+ };
150
+ readonly iconButton: {
151
+ readonly badgeNew: "Nuevo";
152
+ };
153
+ readonly imageUploader: {
154
+ readonly unsupportedFileFormat: "Formato de archivo no compatible";
155
+ readonly fileSizeExceeded: "El tamaño del archivo debe ser {{maxSize}}MB o menos";
156
+ readonly uploadImage: "Subir imagen";
157
+ readonly removeFile: "Eliminar imagen";
158
+ };
159
+ readonly fileUploader: {
160
+ readonly removeFile: "Eliminar archivo";
161
+ readonly uploadFile: "Subir archivo";
162
+ readonly placeholder: "Arrastre y suelte archivos aquí<br />o haga clic para seleccionar";
163
+ readonly maxFileSizeError: "El tamaño del archivo debe ser {{maxSize}}MB o menos";
164
+ };
165
+ readonly combobox: {
166
+ readonly optionsList: "Lista de opciones";
167
+ };
168
+ readonly input: {
169
+ readonly clear: "Limpiar";
170
+ };
171
+ readonly pagination: {
172
+ readonly prevPage: "Ir a la página anterior";
173
+ readonly nextPage: "Ir a la página siguiente";
174
+ readonly goToPage: "Ir a la página {{page}}";
175
+ readonly ellipsis: "Páginas omitidas";
176
+ };
177
+ };
178
+ readonly 'zh-cn': {
179
+ readonly datepicker: {
180
+ readonly prevMonth: "上个月";
181
+ readonly nextMonth: "下个月";
182
+ readonly today: " 今天";
183
+ readonly selected: " 已选择";
184
+ };
185
+ readonly iconButton: {
186
+ readonly badgeNew: "新的";
187
+ };
188
+ readonly imageUploader: {
189
+ readonly unsupportedFileFormat: "不支持的文件格式";
190
+ readonly fileSizeExceeded: "文件大小必须为{{maxSize}}MB或更小";
191
+ readonly uploadImage: "上传图片";
192
+ readonly removeFile: "删除图片";
193
+ };
194
+ readonly fileUploader: {
195
+ readonly removeFile: "删除文件";
196
+ readonly uploadFile: "上传文件";
197
+ readonly placeholder: "拖放文件到此处<br />或点击选择";
198
+ readonly maxFileSizeError: "文件大小必须为{{maxSize}}MB或更小";
199
+ };
200
+ readonly combobox: {
201
+ readonly optionsList: "选项列表";
202
+ };
203
+ readonly input: {
204
+ readonly clear: "清除";
205
+ };
206
+ readonly pagination: {
207
+ readonly prevPage: "转到上一页";
208
+ readonly nextPage: "转到下一页";
209
+ readonly goToPage: "转到第{{page}}页";
210
+ readonly ellipsis: "省略的页面";
211
+ };
212
+ };
73
213
  };
74
- export declare const getLocale: () => Locale;
75
214
  type NestedKeyOf<T> = T extends object ? {
76
215
  [K in keyof T]: K extends string ? T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : K : never;
77
216
  }[keyof T] : never;
78
- export declare const t: (key: NestedKeyOf<typeof MESSAGES.en>, params?: Record<string, any>) => string;
217
+ export declare const t: (key: NestedKeyOf<typeof TRANSLATIONS.en>, params?: Record<string, any>) => string;
79
218
  export declare const debugLocale: () => Locale;
80
- export declare const setLocale: (locale: Locale) => void;
81
219
  export {};
@@ -1,21 +1,17 @@
1
1
  import { en } from './locales/en';
2
2
  import { ja } from './locales/ja';
3
- export const MESSAGES = {
3
+ import { fr } from './locales/fr';
4
+ import { de } from './locales/de';
5
+ import { es } from './locales/es';
6
+ import { zhCn } from './locales/zh-cn';
7
+ import { getLocale } from '../config';
8
+ export const TRANSLATIONS = {
4
9
  en,
5
- ja
6
- };
7
- // ブラウザの言語設定を取得
8
- export const getLocale = () => {
9
- if (typeof navigator !== 'undefined') {
10
- // navigator.languages を使用して言語の優先順位を確認
11
- const languages = navigator.languages || [navigator.language];
12
- // 最初の言語(最優先言語)をチェック
13
- const primaryLanguage = languages[0];
14
- if (primaryLanguage.startsWith('ja')) {
15
- return 'ja';
16
- }
17
- }
18
- return 'en';
10
+ ja,
11
+ fr,
12
+ de,
13
+ es,
14
+ 'zh-cn': zhCn
19
15
  };
20
16
  // パラメータ置換のヘルパー関数
21
17
  const replaceParams = (message, params) => {
@@ -27,8 +23,10 @@ const replaceParams = (message, params) => {
27
23
  };
28
24
  // 標準的なi18n関数
29
25
  export const t = (key, params) => {
30
- const locale = getLocaleWithManual();
31
- const message = key.split('.').reduce((obj, k) => obj?.[k], MESSAGES[locale]);
26
+ const globalLocale = getLocale();
27
+ // グローバル設定のロケールが TRANSLATIONS に存在する場合はそれを使い、存在しない場合は 'en' にフォールバック
28
+ const locale = (globalLocale && globalLocale in TRANSLATIONS) ? globalLocale : 'en';
29
+ const message = key.split('.').reduce((obj, k) => obj?.[k], TRANSLATIONS[locale]);
32
30
  if (typeof message !== 'string') {
33
31
  console.warn(`Translation key "${key}" not found for locale "${locale}"`);
34
32
  return key;
@@ -40,20 +38,10 @@ export const debugLocale = () => {
40
38
  if (typeof navigator !== 'undefined') {
41
39
  console.log('navigator.language:', navigator.language);
42
40
  console.log('navigator.languages:', navigator.languages);
43
- console.log('detected locale:', getLocale());
44
- }
45
- return getLocale();
46
- };
47
- // テスト用: 手動で言語を切り替え
48
- let manualLocale = null;
49
- export const setLocale = (locale) => {
50
- manualLocale = locale;
51
- console.log(`🔧 Manual locale set to: ${locale}`);
52
- };
53
- // 手動設定を優先するgetLocale
54
- const getLocaleWithManual = () => {
55
- if (manualLocale) {
56
- return manualLocale;
57
41
  }
58
- return getLocale();
42
+ const globalResolved = getLocale();
43
+ // グローバル設定のロケールが TRANSLATIONS に存在する場合はそれを使い、存在しない場合は 'en' にフォールバック
44
+ const effective = (globalResolved && globalResolved in TRANSLATIONS) ? globalResolved : 'en';
45
+ console.log('effective locale (i18n):', effective);
46
+ return effective;
59
47
  };
@@ -0,0 +1,35 @@
1
+ export declare const de: {
2
+ readonly datepicker: {
3
+ readonly prevMonth: "Vorheriger Monat";
4
+ readonly nextMonth: "Nächster Monat";
5
+ readonly today: " heute";
6
+ readonly selected: " ausgewählt";
7
+ };
8
+ readonly iconButton: {
9
+ readonly badgeNew: "Neu";
10
+ };
11
+ readonly imageUploader: {
12
+ readonly unsupportedFileFormat: "Nicht unterstütztes Dateiformat";
13
+ readonly fileSizeExceeded: "Die Dateigröße muss {{maxSize}}MB oder weniger betragen";
14
+ readonly uploadImage: "Bild hochladen";
15
+ readonly removeFile: "Bild entfernen";
16
+ };
17
+ readonly fileUploader: {
18
+ readonly removeFile: "Datei entfernen";
19
+ readonly uploadFile: "Datei hochladen";
20
+ readonly placeholder: "Dateien hier ablegen<br />oder klicken, um auszuwählen";
21
+ readonly maxFileSizeError: "Die Dateigröße muss {{maxSize}}MB oder weniger betragen";
22
+ };
23
+ readonly combobox: {
24
+ readonly optionsList: "Optionsliste";
25
+ };
26
+ readonly input: {
27
+ readonly clear: "Löschen";
28
+ };
29
+ readonly pagination: {
30
+ readonly prevPage: "Zur vorherigen Seite gehen";
31
+ readonly nextPage: "Zur nächsten Seite gehen";
32
+ readonly goToPage: "Zu Seite {{page}} gehen";
33
+ readonly ellipsis: "Ausgelassene Seiten";
34
+ };
35
+ };
@@ -0,0 +1,35 @@
1
+ export const de = {
2
+ datepicker: {
3
+ prevMonth: 'Vorheriger Monat',
4
+ nextMonth: 'Nächster Monat',
5
+ today: ' heute',
6
+ selected: ' ausgewählt'
7
+ },
8
+ iconButton: {
9
+ badgeNew: 'Neu'
10
+ },
11
+ imageUploader: {
12
+ unsupportedFileFormat: 'Nicht unterstütztes Dateiformat',
13
+ fileSizeExceeded: 'Die Dateigröße muss {{maxSize}}MB oder weniger betragen',
14
+ uploadImage: 'Bild hochladen',
15
+ removeFile: 'Bild entfernen'
16
+ },
17
+ fileUploader: {
18
+ removeFile: 'Datei entfernen',
19
+ uploadFile: 'Datei hochladen',
20
+ placeholder: 'Dateien hier ablegen<br />oder klicken, um auszuwählen',
21
+ maxFileSizeError: 'Die Dateigröße muss {{maxSize}}MB oder weniger betragen'
22
+ },
23
+ combobox: {
24
+ optionsList: 'Optionsliste'
25
+ },
26
+ input: {
27
+ clear: 'Löschen'
28
+ },
29
+ pagination: {
30
+ prevPage: 'Zur vorherigen Seite gehen',
31
+ nextPage: 'Zur nächsten Seite gehen',
32
+ goToPage: 'Zu Seite {{page}} gehen',
33
+ ellipsis: 'Ausgelassene Seiten'
34
+ }
35
+ };
@@ -0,0 +1,35 @@
1
+ export declare const es: {
2
+ readonly datepicker: {
3
+ readonly prevMonth: "Mes anterior";
4
+ readonly nextMonth: "Mes siguiente";
5
+ readonly today: " hoy";
6
+ readonly selected: " seleccionado";
7
+ };
8
+ readonly iconButton: {
9
+ readonly badgeNew: "Nuevo";
10
+ };
11
+ readonly imageUploader: {
12
+ readonly unsupportedFileFormat: "Formato de archivo no compatible";
13
+ readonly fileSizeExceeded: "El tamaño del archivo debe ser {{maxSize}}MB o menos";
14
+ readonly uploadImage: "Subir imagen";
15
+ readonly removeFile: "Eliminar imagen";
16
+ };
17
+ readonly fileUploader: {
18
+ readonly removeFile: "Eliminar archivo";
19
+ readonly uploadFile: "Subir archivo";
20
+ readonly placeholder: "Arrastre y suelte archivos aquí<br />o haga clic para seleccionar";
21
+ readonly maxFileSizeError: "El tamaño del archivo debe ser {{maxSize}}MB o menos";
22
+ };
23
+ readonly combobox: {
24
+ readonly optionsList: "Lista de opciones";
25
+ };
26
+ readonly input: {
27
+ readonly clear: "Limpiar";
28
+ };
29
+ readonly pagination: {
30
+ readonly prevPage: "Ir a la página anterior";
31
+ readonly nextPage: "Ir a la página siguiente";
32
+ readonly goToPage: "Ir a la página {{page}}";
33
+ readonly ellipsis: "Páginas omitidas";
34
+ };
35
+ };
@@ -0,0 +1,35 @@
1
+ export const es = {
2
+ datepicker: {
3
+ prevMonth: 'Mes anterior',
4
+ nextMonth: 'Mes siguiente',
5
+ today: ' hoy',
6
+ selected: ' seleccionado'
7
+ },
8
+ iconButton: {
9
+ badgeNew: 'Nuevo'
10
+ },
11
+ imageUploader: {
12
+ unsupportedFileFormat: 'Formato de archivo no compatible',
13
+ fileSizeExceeded: 'El tamaño del archivo debe ser {{maxSize}}MB o menos',
14
+ uploadImage: 'Subir imagen',
15
+ removeFile: 'Eliminar imagen'
16
+ },
17
+ fileUploader: {
18
+ removeFile: 'Eliminar archivo',
19
+ uploadFile: 'Subir archivo',
20
+ placeholder: 'Arrastre y suelte archivos aquí<br />o haga clic para seleccionar',
21
+ maxFileSizeError: 'El tamaño del archivo debe ser {{maxSize}}MB o menos'
22
+ },
23
+ combobox: {
24
+ optionsList: 'Lista de opciones'
25
+ },
26
+ input: {
27
+ clear: 'Limpiar'
28
+ },
29
+ pagination: {
30
+ prevPage: 'Ir a la página anterior',
31
+ nextPage: 'Ir a la página siguiente',
32
+ goToPage: 'Ir a la página {{page}}',
33
+ ellipsis: 'Páginas omitidas'
34
+ }
35
+ };
@@ -0,0 +1,35 @@
1
+ export declare const fr: {
2
+ readonly datepicker: {
3
+ readonly prevMonth: "Mois précédent";
4
+ readonly nextMonth: "Mois suivant";
5
+ readonly today: " aujourd'hui";
6
+ readonly selected: " sélectionné";
7
+ };
8
+ readonly iconButton: {
9
+ readonly badgeNew: "Nouveau";
10
+ };
11
+ readonly imageUploader: {
12
+ readonly unsupportedFileFormat: "Format de fichier non pris en charge";
13
+ readonly fileSizeExceeded: "La taille du fichier doit être inférieure ou égale à {{maxSize}}MB";
14
+ readonly uploadImage: "Télécharger une image";
15
+ readonly removeFile: "Supprimer l'image";
16
+ };
17
+ readonly fileUploader: {
18
+ readonly removeFile: "Supprimer le fichier";
19
+ readonly uploadFile: "Télécharger le fichier";
20
+ readonly placeholder: "Glissez-déposez les fichiers ici<br />ou cliquez pour sélectionner";
21
+ readonly maxFileSizeError: "La taille du fichier doit être inférieure ou égale à {{maxSize}}MB";
22
+ };
23
+ readonly combobox: {
24
+ readonly optionsList: "Liste des options";
25
+ };
26
+ readonly input: {
27
+ readonly clear: "Effacer";
28
+ };
29
+ readonly pagination: {
30
+ readonly prevPage: "Aller à la page précédente";
31
+ readonly nextPage: "Aller à la page suivante";
32
+ readonly goToPage: "Aller à la page {{page}}";
33
+ readonly ellipsis: "Pages omises";
34
+ };
35
+ };