@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/i18n/zh.json

@@ -1,187 +1,187 @@
 {
-    "uiVintage": {
-        "common": {
-            "breadcrumb": "面包屑导航",
-            "more": "更多",
-            "home": "首页",
-            "empty": {
-                "title": "这里还没有内容",
-                "description": "当前没有可显示的内容。"
-            },
-            "loading": {
-                "title": "加载中...",
-                "description": "请稍候，正在加载内容。"
-            },
-            "logo": "{name} 标志"
-        },
-        "buttons": {
-            "remove": "移除",
-            "all": "全部",
-            "close": "关闭",
-            "cancel": "取消",
-            "delete": "删除",
-            "confirm": "确认",
-            "filter": "筛选",
-            "search": "搜索",
-            "apply": "应用",
-            "clear": "清除",
-            "loading": "加载中",
-            "loadMore": "加载更多",
-            "save": "保存",
-            "update": "更新",
-            "goBack": "返回"
-        },
-        "theme": {
-            "light": "浅色",
-            "dark": "深色",
-            "auto": "自动",
-            "title": "选择主题",
-            "ariaLabel": "主题选择器"
-        },
-        "language": {
-            "title": "选择语言",
-            "ariaLabel": "语言选择器"
-        },
-        "sidebar": {
-            "title": "侧边栏",
-            "description": "显示移动侧边栏。",
-            "toggle": "切换侧边栏"
-        },
-        "commandDialog": {
-            "title": "命令面板",
-            "description": "搜索要运行的命令..."
-        },
-        "datePicker": {
-            "placeholder": "选择日期",
-            "month": "月份",
-            "year": "年份",
-            "time": "时间"
-        },
-        "terminal": {
-            "title": "终端",
-            "copy": "复制命令",
-            "copied": "命令已复制"
-        },
-        "code": {
-            "title": "代码",
-            "copy": "复制代码",
-            "copied": "代码已复制",
-            "position": "第 {line} 行，第 {column} 列",
-            "plainText": "纯文本"
-        },
-        "footer": {
-            "madeWith": "用",
-            "by": "由",
-            "allRightsReserved": "版权所有。"
-        },
-        "blog": {
-            "readingProgress": "阅读进度",
-            "readMore": "阅读更多",
-            "goToPost": "前往文章",
-            "new": "最新",
-            "tableOfContents": "目录",
-            "tableOfContentsDescription": "跳转到本文的一个部分",
-            "tableOfContentsSections": "{count} 个章节",
-            "openTableOfContents": "打开目录",
-            "closeTableOfContents": "关闭目录",
-            "loadMoreWithNumbers": "加载更多 ({current}/{total})",
-            "author": "作者",
-            "publishedDate": "发布时间",
-            "lastUpdatedDate": "更新时间",
-            "readingTime": "阅读时间",
-            "readingTimeValue": "{minutes} 分钟",
-            "category": "分类",
-            "breadcrumbBlog": "博客",
-            "carouselNavigation": "轮播导航",
-            "goToSlide": "转到第 {index} 张幻灯片",
-            "previousSlide": "上一张幻灯片",
-            "nextSlide": "下一张幻灯片",
-            "faq": {
-                "title": "常见问题",
-                "description": "快速找到有关此主题的常见问题答案。"
-            },
-            "share": {
-                "facebook": "分享到 Facebook",
-                "x": "分享到 X",
-                "whatsapp": "分享到 WhatsApp",
-                "linkedin": "分享到 LinkedIn",
-                "telegram": "分享到 Telegram",
-                "copy": "复制链接",
-                "copied": "链接已复制"
-            }
-        },
-        "errorPage": {
-            "notFound": {
-                "title": "找不到页面",
-                "message": "找不到您请求的页面，或者该页面可能已被移动。"
-            },
-            "unexpected": {
-                "title": "出了点问题",
-                "message": "发生意外错误，当前操作已中断。请重试或返回安全页面。"
-            }
-        },
-        "messageDialog": {
-            "confirm": "确认",
-            "error": "错误",
-            "success": "成功",
-            "info": "信息",
-            "warning": "警告"
-        },
-        "toast": {
-            "region": "通知"
-        },
-        "cookieConsent": {
-            "region": "Cookie 同意",
-            "message": "我们使用可选的 Cookie 来了解网站的使用情况。只有在您同意后才会设置。",
-            "policy": "Cookie 政策",
-            "accept": "接受",
-            "decline": "拒绝"
-        },
-        "dataTable": {
-            "selectAll": "全选所有行",
-            "selectRow": "选择行"
-        },
-        "numberField": {
-            "decrement": "减少",
-            "increment": "增加"
-        },
-        "tagsInput": {
-            "placeholder": "添加标签…"
-        },
-        "combobox": {
-            "placeholder": "请选择一个选项",
-            "searchPlaceholder": "搜索...",
-            "empty": "未找到结果。"
-        },
-        "avatar": {
-            "status": {
-                "online": "在线",
-                "offline": "离线",
-                "busy": "忙碌",
-                "away": "离开"
-            }
-        },
-        "pagination": {
-            "label": "分页",
-            "page": "第 {page} 页",
-            "first": "第一页",
-            "previous": "上一页",
-            "next": "下一页",
-            "last": "最后一页",
-            "more": "更多页面"
-        },
-        "stepper": {
-            "label": "进度"
-        },
-        "fileDropzone": {
-            "title": "将文件拖放到此处",
-            "description": "或点击浏览您的设备",
-            "dropActive": "松开即可上传",
-            "browse": "浏览文件",
-            "remove": "移除 {name}",
-            "maxSize": "每个文件最大 {size}",
-            "maxFiles": "最多 {count} 个文件",
-            "files": "已选文件"
-        }
-    }
+	"uiVintage": {
+		"common": {
+			"breadcrumb": "面包屑导航",
+			"more": "更多",
+			"home": "首页",
+			"empty": {
+				"title": "这里还没有内容",
+				"description": "当前没有可显示的内容。"
+			},
+			"loading": {
+				"title": "加载中...",
+				"description": "请稍候，正在加载内容。"
+			},
+			"logo": "{name} 标志"
+		},
+		"buttons": {
+			"remove": "移除",
+			"all": "全部",
+			"close": "关闭",
+			"cancel": "取消",
+			"delete": "删除",
+			"confirm": "确认",
+			"filter": "筛选",
+			"search": "搜索",
+			"apply": "应用",
+			"clear": "清除",
+			"loading": "加载中",
+			"loadMore": "加载更多",
+			"save": "保存",
+			"update": "更新",
+			"goBack": "返回"
+		},
+		"theme": {
+			"light": "浅色",
+			"dark": "深色",
+			"auto": "自动",
+			"title": "选择主题",
+			"ariaLabel": "主题选择器"
+		},
+		"language": {
+			"title": "选择语言",
+			"ariaLabel": "语言选择器"
+		},
+		"sidebar": {
+			"title": "侧边栏",
+			"description": "显示移动侧边栏。",
+			"toggle": "切换侧边栏"
+		},
+		"commandDialog": {
+			"title": "命令面板",
+			"description": "搜索要运行的命令..."
+		},
+		"datePicker": {
+			"placeholder": "选择日期",
+			"month": "月份",
+			"year": "年份",
+			"time": "时间"
+		},
+		"terminal": {
+			"title": "终端",
+			"copy": "复制命令",
+			"copied": "命令已复制"
+		},
+		"code": {
+			"title": "代码",
+			"copy": "复制代码",
+			"copied": "代码已复制",
+			"position": "第 {line} 行，第 {column} 列",
+			"plainText": "纯文本"
+		},
+		"footer": {
+			"madeWith": "用",
+			"by": "由",
+			"allRightsReserved": "版权所有。"
+		},
+		"blog": {
+			"readingProgress": "阅读进度",
+			"readMore": "阅读更多",
+			"goToPost": "前往文章",
+			"new": "最新",
+			"tableOfContents": "目录",
+			"tableOfContentsDescription": "跳转到本文的一个部分",
+			"tableOfContentsSections": "{count} 个章节",
+			"openTableOfContents": "打开目录",
+			"closeTableOfContents": "关闭目录",
+			"loadMoreWithNumbers": "加载更多 ({current}/{total})",
+			"author": "作者",
+			"publishedDate": "发布时间",
+			"lastUpdatedDate": "更新时间",
+			"readingTime": "阅读时间",
+			"readingTimeValue": "{minutes} 分钟",
+			"category": "分类",
+			"breadcrumbBlog": "博客",
+			"carouselNavigation": "轮播导航",
+			"goToSlide": "转到第 {index} 张幻灯片",
+			"previousSlide": "上一张幻灯片",
+			"nextSlide": "下一张幻灯片",
+			"faq": {
+				"title": "常见问题",
+				"description": "快速找到有关此主题的常见问题答案。"
+			},
+			"share": {
+				"facebook": "分享到 Facebook",
+				"x": "分享到 X",
+				"whatsapp": "分享到 WhatsApp",
+				"linkedin": "分享到 LinkedIn",
+				"telegram": "分享到 Telegram",
+				"copy": "复制链接",
+				"copied": "链接已复制"
+			}
+		},
+		"errorPage": {
+			"notFound": {
+				"title": "找不到页面",
+				"message": "找不到您请求的页面，或者该页面可能已被移动。"
+			},
+			"unexpected": {
+				"title": "出了点问题",
+				"message": "发生意外错误，当前操作已中断。请重试或返回安全页面。"
+			}
+		},
+		"messageDialog": {
+			"confirm": "确认",
+			"error": "错误",
+			"success": "成功",
+			"info": "信息",
+			"warning": "警告"
+		},
+		"toast": {
+			"region": "通知"
+		},
+		"cookieConsent": {
+			"region": "Cookie 同意",
+			"message": "我们使用可选的 Cookie 来了解网站的使用情况。只有在您同意后才会设置。",
+			"policy": "Cookie 政策",
+			"accept": "接受",
+			"decline": "拒绝"
+		},
+		"dataTable": {
+			"selectAll": "全选所有行",
+			"selectRow": "选择行"
+		},
+		"numberField": {
+			"decrement": "减少",
+			"increment": "增加"
+		},
+		"tagsInput": {
+			"placeholder": "添加标签…"
+		},
+		"combobox": {
+			"placeholder": "请选择一个选项",
+			"searchPlaceholder": "搜索...",
+			"empty": "未找到结果。"
+		},
+		"avatar": {
+			"status": {
+				"online": "在线",
+				"offline": "离线",
+				"busy": "忙碌",
+				"away": "离开"
+			}
+		},
+		"pagination": {
+			"label": "分页",
+			"page": "第 {page} 页",
+			"first": "第一页",
+			"previous": "上一页",
+			"next": "下一页",
+			"last": "最后一页",
+			"more": "更多页面"
+		},
+		"stepper": {
+			"label": "进度"
+		},
+		"fileDropzone": {
+			"title": "将文件拖放到此处",
+			"description": "或点击浏览您的设备",
+			"dropActive": "松开即可上传",
+			"browse": "浏览文件",
+			"remove": "移除 {name}",
+			"maxSize": "每个文件最大 {size}",
+			"maxFiles": "最多 {count} 个文件",
+			"files": "已选文件"
+		}
+	}
 }

package/src/lib/color-tokens.ts

@@ -3,49 +3,49 @@ export type ButtonVariantName = "primary" | "secondary" | "ghost" | "link" | Ton
 
 // Return the list of classes for a given tone color
 const surfaceToneClasses: Record<ToneColor, string> = {
-    gray: "border border-border bg-surface text-foreground",
-    green: "border border-green-200 bg-green-50 text-green-700 dark:border-green-800/50 dark:bg-green-900/10 dark:text-green-400",
-    red: "border border-red-200 bg-red-50 text-red-700 dark:border-red-800/50 dark:bg-red-900/10 dark:text-red-400",
-    blue: "border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800/50 dark:bg-blue-900/10 dark:text-blue-400",
-    yellow: "border border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-800/50 dark:bg-yellow-900/10 dark:text-yellow-400"
+	gray: "border border-border bg-surface text-foreground",
+	green: "border border-green-200 bg-green-50 text-green-700 dark:border-green-800/50 dark:bg-green-900/10 dark:text-green-400",
+	red: "border border-red-200 bg-red-50 text-red-700 dark:border-red-800/50 dark:bg-red-900/10 dark:text-red-400",
+	blue: "border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800/50 dark:bg-blue-900/10 dark:text-blue-400",
+	yellow: "border border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-800/50 dark:bg-yellow-900/10 dark:text-yellow-400"
 }
 
 // Get the appropriate classes for a given tone color
 export const getSurfaceToneClasses = (color: ToneColor) => {
-    return surfaceToneClasses[color];
+	return surfaceToneClasses[color];
 }
 
 // Return the list of classes for interactive surfaces
 const interactiveSurfaceToneClasses: Record<ToneColor, string> = {
-    gray: `${surfaceToneClasses.gray} hover:border-border-strong hover:bg-accent`,
-    green: `${surfaceToneClasses.green} hover:border-green-300 hover:bg-green-100 dark:hover:border-green-700/60 dark:hover:bg-green-900/20`,
-    red: `${surfaceToneClasses.red} hover:border-red-300 hover:bg-red-100 dark:hover:border-red-700/60 dark:hover:bg-red-900/20`,
-    blue: `${surfaceToneClasses.blue} hover:border-blue-300 hover:bg-blue-100 dark:hover:border-blue-700/60 dark:hover:bg-blue-900/20`,
-    yellow: `${surfaceToneClasses.yellow} hover:border-yellow-300 hover:bg-yellow-100 dark:hover:border-yellow-700/60 dark:hover:bg-yellow-900/20`
+	gray: `${surfaceToneClasses.gray} hover:border-border-strong hover:bg-accent`,
+	green: `${surfaceToneClasses.green} hover:border-green-300 hover:bg-green-100 dark:hover:border-green-700/60 dark:hover:bg-green-900/20`,
+	red: `${surfaceToneClasses.red} hover:border-red-300 hover:bg-red-100 dark:hover:border-red-700/60 dark:hover:bg-red-900/20`,
+	blue: `${surfaceToneClasses.blue} hover:border-blue-300 hover:bg-blue-100 dark:hover:border-blue-700/60 dark:hover:bg-blue-900/20`,
+	yellow: `${surfaceToneClasses.yellow} hover:border-yellow-300 hover:bg-yellow-100 dark:hover:border-yellow-700/60 dark:hover:bg-yellow-900/20`
 }
 
 // Get the appropriate classes for interactive surfaces based on tone color
 export const getInteractiveSurfaceToneClasses = (color: ToneColor) => {
-    return interactiveSurfaceToneClasses[color];
+	return interactiveSurfaceToneClasses[color];
 }
 
 // Return the list of classes for button variants
 export const buttonVariantClasses: Record<ButtonVariantName, string> = {
-    // Custom button variants
-    primary: "bg-primary text-primary-foreground shadow-elevated-sm hover:bg-primary-hover before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-translate-x-full before:bg-[linear-gradient(105deg,transparent_35%,rgb(255_255_255/0.38)_50%,transparent_65%)] before:transition-[translate] before:duration-700 before:ease-out-expo hover:before:translate-x-full motion-reduce:before:hidden",
-    secondary: "border border-border bg-secondary text-foreground shadow-elevated-sm hover:border-border-strong hover:bg-accent",
-    ghost: "text-muted-foreground hover:bg-accent hover:text-foreground",
-    link: "text-primary underline-offset-4 decoration-2 hover:underline enabled:active:scale-100",
+	// Custom button variants
+	primary: "bg-primary text-primary-foreground shadow-elevated-sm hover:bg-primary-hover before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-translate-x-full before:bg-[linear-gradient(105deg,transparent_35%,rgb(255_255_255/0.38)_50%,transparent_65%)] before:transition-[translate] before:duration-700 before:ease-out-expo hover:before:translate-x-full motion-reduce:before:hidden",
+	secondary: "border border-border bg-secondary text-foreground shadow-elevated-sm hover:border-border-strong hover:bg-accent",
+	ghost: "text-muted-foreground hover:bg-accent hover:text-foreground",
+	link: "text-primary underline-offset-4 decoration-2 hover:underline enabled:active:scale-100",
 
-    // Tone-based button variants
-    gray: getInteractiveSurfaceToneClasses("gray"),
-    green: getInteractiveSurfaceToneClasses("green"),
-    red: getInteractiveSurfaceToneClasses("red"),
-    blue: getInteractiveSurfaceToneClasses("blue"),
-    yellow: getInteractiveSurfaceToneClasses("yellow")
+	// Tone-based button variants
+	gray: getInteractiveSurfaceToneClasses("gray"),
+	green: getInteractiveSurfaceToneClasses("green"),
+	red: getInteractiveSurfaceToneClasses("red"),
+	blue: getInteractiveSurfaceToneClasses("blue"),
+	yellow: getInteractiveSurfaceToneClasses("yellow")
 }
 
 // Get the appropriate classes for a given button variant
 export const getButtonVariantClasses = (variant: ButtonVariantName) => {
-    return buttonVariantClasses[variant];
+	return buttonVariantClasses[variant];
 }

package/src/lib/i18n.ts

@@ -11,15 +11,15 @@ import ru from '../i18n/ru.json';
 
 // The list of translation files
 export const uiVintageMessages = {
-    en,
-    it,
-    fr,
-    es,
-    de,
-    pt,
-    zh,
-    ja,
-    ru
+	en,
+	it,
+	fr,
+	es,
+	de,
+	pt,
+	zh,
+	ja,
+	ru
 } as const;
 
 // The type of the available locales based on the keys of the messages object
@@ -30,79 +30,79 @@ let runtimeLocaleSource: (() => string | undefined) | null = null;
 
 // Let the app tell the imperatively mounted components which locale it uses
 export const setUiVintageRuntimeLocaleSource = (source: (() => string | undefined) | null) => {
-    runtimeLocaleSource = source;
+	runtimeLocaleSource = source;
 };
 
 // Resolve the current runtime locale from the app, the document or the navigator
 const getUiVintageRuntimeLocale = (): UiVintageLocale => {
-    let browserLocale = 'en';
+	let browserLocale = 'en';
 
-    // Prefer the app locale, then try to detect the user's locale from the document or navigator
-    const appLocale = runtimeLocaleSource?.();
-    if (appLocale) {
-        browserLocale = appLocale.toLowerCase();
-    } else if (typeof document !== 'undefined' && document.documentElement?.lang) {
-        browserLocale = document.documentElement.lang?.toLowerCase();
-    } else if (typeof navigator !== 'undefined' && navigator.language) {
-        browserLocale = navigator.language?.toLowerCase();
-    }
+	// Prefer the app locale, then try to detect the user's locale from the document or navigator
+	const appLocale = runtimeLocaleSource?.();
+	if (appLocale) {
+		browserLocale = appLocale.toLowerCase();
+	} else if (typeof document !== 'undefined' && document.documentElement?.lang) {
+		browserLocale = document.documentElement.lang?.toLowerCase();
+	} else if (typeof navigator !== 'undefined' && navigator.language) {
+		browserLocale = navigator.language?.toLowerCase();
+	}
 
-    // Default to English if the detected locale is not supported, otherwise use it
-    if (browserLocale.startsWith('it')) {
-        return 'it';
-    } else if (browserLocale.startsWith('fr')) {
-        return 'fr';
-    } else if (browserLocale.startsWith('es')) {
-        return 'es';
-    } else if (browserLocale.startsWith('de')) {
-        return 'de';
-    } else if (browserLocale.startsWith('pt')) {
-        return 'pt';
-    } else if (browserLocale.startsWith('zh')) {
-        return 'zh';
-    } else if (browserLocale.startsWith('ja')) {
-        return 'ja';
-    } else if (browserLocale.startsWith('ru')) {
-        return 'ru';
-    }
+	// Default to English if the detected locale is not supported, otherwise use it
+	if (browserLocale.startsWith('it')) {
+		return 'it';
+	} else if (browserLocale.startsWith('fr')) {
+		return 'fr';
+	} else if (browserLocale.startsWith('es')) {
+		return 'es';
+	} else if (browserLocale.startsWith('de')) {
+		return 'de';
+	} else if (browserLocale.startsWith('pt')) {
+		return 'pt';
+	} else if (browserLocale.startsWith('zh')) {
+		return 'zh';
+	} else if (browserLocale.startsWith('ja')) {
+		return 'ja';
+	} else if (browserLocale.startsWith('ru')) {
+		return 'ru';
+	}
 
-    // Fallback to English for unsupported or undetectable locales
-    return 'en';
+	// Fallback to English for unsupported or undetectable locales
+	return 'en';
 };
 
 // Read a message from the bundled library locales with a safe fallback
 export const getUiVintageRuntimeMessage = (path: string, fallback: string) => {
-    const localeMessages = uiVintageMessages[getUiVintageRuntimeLocale()];
-    const segments = path.split('.');
-    let currentValue: unknown = localeMessages;
+	const localeMessages = uiVintageMessages[getUiVintageRuntimeLocale()];
+	const segments = path.split('.');
+	let currentValue: unknown = localeMessages;
 
-    // Traverse the nested message object based on the path segments
-    for (const segment of segments) {
-        // If the current value is not an object or doesn't contain the segment, return the fallback
-        if (!currentValue || typeof currentValue !== 'object' || !(segment in currentValue)) {
-            return fallback;
-        }
+	// Traverse the nested message object based on the path segments
+	for (const segment of segments) {
+		// If the current value is not an object or doesn't contain the segment, return the fallback
+		if (!currentValue || typeof currentValue !== 'object' || !(segment in currentValue)) {
+			return fallback;
+		}
 
-        // Move deeper into the nested structure
-        currentValue = (currentValue as Record<string, unknown>)[segment];
-    }
+		// Move deeper into the nested structure
+		currentValue = (currentValue as Record<string, unknown>)[segment];
+	}
 
-    // If the final value is a string, return it; otherwise, return the fallback
-    return typeof currentValue === 'string' ? currentValue : fallback;
+	// If the final value is a string, return it; otherwise, return the fallback
+	return typeof currentValue === 'string' ? currentValue : fallback;
 };
 
 // Translate library messages inside components: use the app's vue-i18n when available (same locale on server and client),
 // and fall back to the bundled messages in trees mounted outside the app (toasts, dialogs, busy indicator)
 export const useUiVintageMessage = () => {
-    let translate: ((key: string) => string) | null = null;
-    try {
-        translate = useI18n({ useScope: 'global' }).t;
-    } catch {
-        translate = null;
-    }
+	let translate: ((key: string) => string) | null = null;
+	try {
+		translate = useI18n({ useScope: 'global' }).t;
+	} catch {
+		translate = null;
+	}
 
-    return (path: string, fallback: string) => {
-        const message = translate?.(path);
-        return message && message !== path ? message : getUiVintageRuntimeMessage(path, fallback);
-    };
-};
+	return (path: string, fallback: string) => {
+		const message = translate?.(path);
+		return message && message !== path ? message : getUiVintageRuntimeMessage(path, fallback);
+	};
+};