From 8b1e98016ada39a658ecafad9823a9abf1ceac22 Mon Sep 17 00:00:00 2001 From: WANJIN Date: Tue, 17 Dec 2024 12:42:20 +0900 Subject: [PATCH] feat(badge): add violet color mixin to PBadge component (#5225) * feat(translations): add hangul-js for Korean particle handling Signed-off-by: Wanjin Noh * feat(badge): add violet color mixin to PBadge component Signed-off-by: Wanjin Noh * feat(badge): add violet200 style to badge display options Signed-off-by: Wanjin Noh --------- Signed-off-by: Wanjin Noh --- apps/web/package.json | 1 + apps/web/src/translations/index.ts | 13 +++++++++++++ package-lock.json | 12 ++++++++++++ packages/mirinae/src/data-display/badge/PBadge.vue | 1 + packages/mirinae/src/data-display/badge/type.ts | 1 + 5 files changed, 28 insertions(+) diff --git a/apps/web/package.json b/apps/web/package.json index 11c86a45fd..8a45894cd7 100644 --- 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 index 73f56e73eb..7741a23619 100644 --- 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 index e601035393..a8322cbe11 100644 --- a/package-lock.json +++ b/package-lock.json @@ -201,6 +201,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", @@ -19441,6 +19442,11 @@ "uglify-js": "^3.1.4" } }, + "node_modules/hangul-js": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/hangul-js/-/hangul-js-0.2.6.tgz", + "integrity": "sha512-48axU8LgjCD30FEs66Xc04/8knxMwCMQw0f67l67rlttW7VXT3qRJgQeHmhiuGwWXGvSbk6YM0fhQlcjE1JFQA==" + }, "node_modules/hard-rejection": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz", @@ -49884,6 +49890,11 @@ "wordwrap": "^1.0.0" } }, + "hangul-js": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/hangul-js/-/hangul-js-0.2.6.tgz", + "integrity": "sha512-48axU8LgjCD30FEs66Xc04/8knxMwCMQw0f67l67rlttW7VXT3qRJgQeHmhiuGwWXGvSbk6YM0fhQlcjE1JFQA==" + }, "hard-rejection": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz", @@ -61647,6 +61658,7 @@ "echarts": "^5.5.0", "ejs": "^3.1.10", "eslint-config-custom": "*", + "hangul-js": "^0.2.6", "hashids": "^2.2.1", "highlight.js": "^11.5.1", "html-to-image": "^1.9.0", diff --git a/packages/mirinae/src/data-display/badge/PBadge.vue b/packages/mirinae/src/data-display/badge/PBadge.vue index 27bba37fe3..af1f147cbf 100644 --- 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'); } diff --git a/packages/mirinae/src/data-display/badge/type.ts b/packages/mirinae/src/data-display/badge/type.ts index 8341da411d..076b6f614f 100644 --- 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,