feat(badge): add violet color mixin to PBadge component (#5225)

* feat(translations): add hangul-js for Korean particle handling Signed-off-by: Wanjin Noh <[email protected]> * feat(badge): add violet color mixin to PBadge component Signed-off-by: Wanjin Noh <[email protected]> * feat(badge): add violet200 style to badge display options Signed-off-by: Wanjin Noh <[email protected]> --------- Signed-off-by: Wanjin Noh <[email protected]>
cloudforet-io · Dec 17, 2024 · 8b1e980 · 8b1e980
1 parent eefd872
commit 8b1e980
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 0 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -53,6 +53,7 @@
     "diff-match-patch": "^1.0.5",
     "echarts": "^5.5.0",
     "ejs": "^3.1.10",
+    "hangul-js": "^0.2.6",
     "hashids": "^2.2.1",
     "highlight.js": "^11.5.1",
     "html-to-image": "^1.9.0",

diff --git a/apps/web/src/translations/index.ts b/apps/web/src/translations/index.ts
@@ -3,6 +3,8 @@ import type { IVueI18n, LocaleMessageObject } from 'vue-i18n';
 import VueI18n from 'vue-i18n';
 
 
+import { endsWithConsonant } from 'hangul-js';
+
 import en from '@cloudforet/language-pack/en.json';
 import ja from '@cloudforet/language-pack/ja.json';
 import ko from '@cloudforet/language-pack/ko.json';
@@ -38,6 +40,17 @@ const loadLocaleFiles = async (lang: string) => {
         loadDayjsLocale(lang),
     ]);
 };
+const KO_PARTICLES = {
+    topic: ['은', '는'],
+    subject: ['이', '가'],
+    object: ['을', '를'],
+};
+export const getParticle = (word: string, type: 'topic'|'subject'|'object') => {
+    const hasBatchim = endsWithConsonant(word);
+    if (i18n.locale === 'ko') return KO_PARTICLES[type][hasBatchim ? 0 : 1];
+    return '';
+};
+
 
 export const i18n = new VueI18n({
     locale: 'en', // set locale

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mirinae/src/data-display/badge/PBadge.vue b/packages/mirinae/src/data-display/badge/PBadge.vue
@@ -133,6 +133,7 @@ const state = reactive({
     @mixin subtle peacock200, theme('colors.peacock.200'), theme('colors.peacock.700');
     @mixin subtle coral200, theme('colors.coral.200'), theme('colors.coral.700');
     @mixin subtle red200, theme('colors.red.200'), theme('colors.red.700');
+    @mixin subtle violet200, theme('colors.violet.200'), theme('colors.violet.700');
 }
 
 </style>
diff --git a/packages/mirinae/src/data-display/badge/type.ts b/packages/mirinae/src/data-display/badge/type.ts
@@ -45,6 +45,7 @@ export const SUBTLE_STYLE_TYPE = {
     peacock200: 'peacock200',
     coral200: 'coral200',
     red200: 'red200',
+    violet200: 'violet200',
 } as const;
 export const BADGE_STYLE_TYPE = {
     ...SOLID_STYLE_TYPE,