@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.
- package/dist/assets/styles/variables.scss +2 -8
- package/dist/components/Button.svelte +104 -76
- package/dist/components/Button.svelte.d.ts +7 -5
- package/dist/components/Checkbox.svelte +80 -80
- package/dist/components/Checkbox.svelte.d.ts +4 -4
- package/dist/components/CheckboxGroup.svelte +48 -29
- package/dist/components/CheckboxGroup.svelte.d.ts +3 -3
- package/dist/components/ColorPicker.svelte +65 -64
- package/dist/components/ColorPicker.svelte.d.ts +5 -5
- package/dist/components/Combobox.svelte +97 -83
- package/dist/components/Combobox.svelte.d.ts +3 -3
- package/dist/components/ConfirmDialog.svelte +26 -28
- package/dist/components/ConfirmDialog.svelte.d.ts +3 -3
- package/dist/components/Datepicker.svelte +201 -97
- package/dist/components/Datepicker.svelte.d.ts +10 -7
- package/dist/components/DatepickerCalendar.svelte +24 -19
- package/dist/components/DatepickerCalendar.svelte.d.ts +3 -3
- package/dist/components/Dialog.svelte +30 -28
- package/dist/components/Dialog.svelte.d.ts +2 -2
- package/dist/components/Drawer.svelte +32 -30
- package/dist/components/Drawer.svelte.d.ts +2 -2
- package/dist/components/Fab.svelte +81 -62
- package/dist/components/Fab.svelte.d.ts +10 -6
- package/dist/components/FileUploader.svelte +52 -50
- package/dist/components/FileUploader.svelte.d.ts +3 -3
- package/dist/components/Icon.svelte +29 -27
- package/dist/components/Icon.svelte.d.ts +2 -2
- package/dist/components/IconButton.svelte +83 -80
- package/dist/components/IconButton.svelte.d.ts +6 -5
- package/dist/components/ImageUploader.svelte +54 -52
- package/dist/components/ImageUploader.svelte.d.ts +3 -3
- package/dist/components/ImageUploaderPreview.svelte +33 -20
- package/dist/components/ImageUploaderPreview.svelte.d.ts +2 -2
- package/dist/components/Input.svelte +100 -94
- package/dist/components/Input.svelte.d.ts +6 -5
- package/dist/components/LoadingSpinner.svelte +14 -13
- package/dist/components/LoadingSpinner.svelte.d.ts +2 -2
- package/dist/components/Modal.svelte +26 -24
- package/dist/components/Modal.svelte.d.ts +2 -2
- package/dist/components/Pagination.svelte +20 -28
- package/dist/components/Pagination.svelte.d.ts +2 -2
- package/dist/components/Popup.svelte +111 -124
- package/dist/components/Popup.svelte.d.ts +6 -6
- package/dist/components/PopupMenu.svelte +109 -125
- package/dist/components/PopupMenu.svelte.d.ts +5 -5
- package/dist/components/PopupMenuButton.svelte +67 -80
- package/dist/components/PopupMenuButton.svelte.d.ts +7 -6
- package/dist/components/Radio.svelte +65 -64
- package/dist/components/Radio.svelte.d.ts +3 -3
- package/dist/components/RadioGroup.svelte +39 -27
- package/dist/components/RadioGroup.svelte.d.ts +3 -3
- package/dist/components/SegmentedControl.svelte +72 -71
- package/dist/components/SegmentedControl.svelte.d.ts +4 -4
- package/dist/components/Select.svelte +66 -66
- package/dist/components/Select.svelte.d.ts +3 -3
- package/dist/components/Slider.svelte +67 -67
- package/dist/components/Slider.svelte.d.ts +5 -5
- package/dist/components/Snackbar.svelte +11 -9
- package/dist/components/Snackbar.svelte.d.ts +5 -4
- package/dist/components/SnackbarItem.svelte +29 -28
- package/dist/components/SnackbarItem.svelte.d.ts +6 -5
- package/dist/components/Switch.svelte +64 -66
- package/dist/components/Switch.svelte.d.ts +4 -4
- package/dist/components/Tab.svelte +31 -20
- package/dist/components/Tab.svelte.d.ts +3 -2
- package/dist/components/TabItem.svelte +22 -21
- package/dist/components/TabItem.svelte.d.ts +2 -2
- package/dist/components/Textarea.svelte +94 -92
- package/dist/components/Textarea.svelte.d.ts +8 -7
- package/dist/components/skeleton/Skeleton.svelte +16 -14
- package/dist/components/skeleton/Skeleton.svelte.d.ts +2 -2
- package/dist/components/skeleton/SkeletonAvatar.svelte +30 -36
- package/dist/components/skeleton/SkeletonAvatar.svelte.d.ts +8 -4
- package/dist/components/skeleton/SkeletonBox.svelte +11 -11
- package/dist/components/skeleton/SkeletonBox.svelte.d.ts +2 -2
- package/dist/components/skeleton/SkeletonButton.svelte +26 -19
- package/dist/components/skeleton/SkeletonButton.svelte.d.ts +7 -4
- package/dist/components/skeleton/SkeletonHeading.svelte +17 -23
- package/dist/components/skeleton/SkeletonHeading.svelte.d.ts +5 -4
- package/dist/components/skeleton/SkeletonMedia.svelte +37 -45
- package/dist/components/skeleton/SkeletonMedia.svelte.d.ts +10 -4
- package/dist/components/skeleton/SkeletonText.svelte +18 -24
- package/dist/components/skeleton/SkeletonText.svelte.d.ts +6 -4
- package/dist/i18n/index.d.ts +143 -5
- package/dist/i18n/index.js +20 -32
- package/dist/i18n/locales/de.d.ts +35 -0
- package/dist/i18n/locales/de.js +35 -0
- package/dist/i18n/locales/es.d.ts +35 -0
- package/dist/i18n/locales/es.js +35 -0
- package/dist/i18n/locales/fr.d.ts +35 -0
- package/dist/i18n/locales/fr.js +35 -0
- package/dist/i18n/locales/zh-cn.d.ts +35 -0
- package/dist/i18n/locales/zh-cn.js +35 -0
- package/dist/index.d.ts +46 -2
- package/dist/index.js +1 -0
- package/dist/types/menuItem.d.ts +1 -1
- package/dist/types/propOptions.d.ts +54 -0
- package/dist/types/propOptions.js +5 -0
- package/dist/utils/formatText.js +4 -1
- package/dist/utils/popupManager.d.ts +26 -0
- package/dist/utils/popupManager.js +34 -0
- package/package.json +1 -1
- /package/dist/types/{eventHandlers.d.ts → callbackHandlers.d.ts} +0 -0
- /package/dist/types/{eventHandlers.js → callbackHandlers.js} +0 -0
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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
|
|
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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}: {
|
|
13
|
+
// =========================================================================
|
|
14
|
+
// Props, States & Constants
|
|
15
|
+
// =========================================================================
|
|
16
|
+
export type SkeletonMediaProps = {
|
|
19
17
|
width?: string | number;
|
|
20
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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(
|
|
46
|
-
const thumbnailHeightStyle = $derived(
|
|
47
|
-
|
|
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(
|
|
53
|
-
const finalThumbnailAspectRatio = $derived(
|
|
54
|
-
|
|
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={
|
|
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
|
-
|
|
2
|
-
type $$ComponentProps = {
|
|
1
|
+
export type SkeletonMediaProps = {
|
|
3
2
|
width?: string | number;
|
|
4
|
-
|
|
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
|
|
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
|
-
|
|
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(
|
|
39
|
-
const fontSizeStyle = $derived(getStyleFromNumber(
|
|
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}; {
|
|
39
|
+
style="font-size: {fontSizeStyle}; {customStyle}"
|
|
46
40
|
>
|
|
47
|
-
{#each Array(
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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
|
|
8
|
+
declare const SkeletonText: import("svelte").Component<SkeletonTextProps, {}, "">;
|
|
7
9
|
type SkeletonText = ReturnType<typeof SkeletonText>;
|
|
8
10
|
export default SkeletonText;
|
package/dist/i18n/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export type Locale = 'en' | 'ja';
|
|
2
|
-
export declare const
|
|
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
|
|
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 {};
|
package/dist/i18n/index.js
CHANGED
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
import { en } from './locales/en';
|
|
2
2
|
import { ja } from './locales/ja';
|
|
3
|
-
|
|
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
|
-
|
|
9
|
-
|
|
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
|
|
31
|
-
|
|
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
|
-
|
|
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
|
+
};
|