feat: use custom color names in button

epicmaxco · Aug 26, 2024 · 5acf074 · 5acf074
1 parent 7d7ce3b
commit 5acf074
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
@@ -73,6 +73,8 @@ import { VaIcon } from '../va-icon'
 import { VaProgressCircle } from '../va-progress-circle'
 import { pick } from '../../utils/pick'
 
+import type { ColorName } from '../../composables'
+
 defineOptions({
   name: 'VaButton',
 })
@@ -89,7 +91,7 @@ const props = defineProps({
   block: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
 
-  color: { type: String, default: 'primary' },
+  color: { type: String as PropType<ColorName>, default: 'primary' },
   textColor: { type: String, default: '' },
   textOpacity: { type: [Number, String], default: 1 },
   backgroundOpacity: { type: [Number, String], default: 1 },

diff --git a/packages/ui/src/services/color/types.ts b/packages/ui/src/services/color/types.ts
@@ -47,9 +47,12 @@ type Capitalize<S extends string> = S extends `${infer First}${infer Rest}`
   : S
 type OnColors = `on${Capitalize<keyof EssentialVariables | keyof CustomColorVariables>}`
 
+// string & Record<never, never> is a hack to make TypeScript suggest all possible values of the type
 export type ColorVariables = EssentialVariables & CustomColorVariables & {
   [key in OnColors]?: CssColor
-} & Record<string, CssColor>
+} & Record<string & Record<never, never>, CssColor>
+
+export type ColorName = keyof ColorVariables | keyof CustomColorVariables // Force keyof, otherwise empty interface will be omitted in build!!!
 
 export type ColorConfig = {
   variables: ColorVariables,