oxy-uni-ui 2.1.4 → 2.1.5

package/components/oxy-config-provider/oxy-config-provider.vue

@@ -20,7 +20,7 @@ export default {
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { configProviderProps } from './types'
-import { objToStyle } from '../common/util'
+import { kebabCase, objToStyle } from '../common/util'
 
 const props = defineProps(configProviderProps)
 
@@ -33,14 +33,53 @@ const themeStyle = computed(() => {
   return styleObj ? `${objToStyle(styleObj)}${props.customStyle}` : props.customStyle
 })
 
-/**
- * 驼峰命名转短横线命名。
- * @param str 驼峰字符串
- * @returns kebab-case 字符串
- */
-const kebabCase = (str: string): string => {
-  str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase())
-  return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase())
+const themeVarAliases: Record<string, string> = {
+  colorGray1: 'color-gray-1',
+  colorGray2: 'color-gray-2',
+  colorGray3: 'color-gray-3',
+  colorGray4: 'color-gray-4',
+  colorGray5: 'color-gray-5',
+  colorGray6: 'color-gray-6',
+  colorGray7: 'color-gray-7',
+  colorGray8: 'color-gray-8',
+  fontGray1: 'font-gray-1',
+  fontGray2: 'font-gray-2',
+  fontGray3: 'font-gray-3',
+  fontGray4: 'font-gray-4',
+  fontWhite1: 'font-white-1',
+  fontWhite2: 'font-white-2',
+  fontWhite3: 'font-white-3',
+  fontWhite4: 'font-white-4',
+  radius2xl: 'radius-2xl',
+  radius3xl: 'radius-3xl',
+  spacing4: 'spacing-4',
+  spacing8: 'spacing-8',
+  spacing12: 'spacing-12',
+  spacing16: 'spacing-16',
+  spacing20: 'spacing-20',
+  spacing24: 'spacing-24',
+  spacing32: 'spacing-32',
+  spacing40: 'spacing-40',
+  spacing48: 'spacing-48',
+  size32: 'size-32',
+  size48: 'size-48',
+  size64: 'size-64',
+  size80: 'size-80',
+  paginationNavSeparatorPadding: 'pagination-nav-sepatator-padding',
+  segmentedItemActiveBg: 'segmented-item-acitve-bg',
+  calendarRangeSeparatorColorDark: 'calendar-range-sperator-color-dark',
+  sideBarDisabledColor: 'side-bar-disabled-color',
+  sideBarDisabledColorDark: 'side-bar-disabled-color-dark',
+  sidebarDisabledColor: 'side-bar-disabled-color',
+  sidebarDisabledColorDark: 'side-bar-disabled-color-dark',
+  passwordBorderColor: 'password-border-color',
+  passwordBorderColorDark: 'password-border-color-dark',
+  passwordInputBorderColor: 'password-border-color',
+  passwordInputBorderColorDark: 'password-border-color-dark'
+}
+
+const resolveThemeVarName = (key: string): string => {
+  return themeVarAliases[key] || kebabCase(key)
 }
 /**
  * 十六进制颜色转 RGB 数组。
@@ -81,7 +120,7 @@ const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
   if (!themeVars) return
   const cssVars: Record<string, string> = {}
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--oxy-${kebabCase(key)}`] = themeVars[key]
+    cssVars[`--oxy-${resolveThemeVarName(key)}`] = themeVars[key]
   })
 
   return cssVars