perf(rating): use useColor instead of useLayer

packages/anu-vue/src/components/rating/ARating.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
+import { defu } from 'defu'
 import type { ExtractPropTypes } from 'vue'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { disabled as disabledProp, readonly as readonlyProp } from '@/composables/useProps'
+import { useColor } from '@/composables'
+import { color as colorProp, disabled as disabledProp, readonly as readonlyProp } from '@/composables/useProps'
 
 const props = defineProps({
-  ...useLayerProps({
-    color: {
-      default: 'warning',
-    },
-  }),
+  /**
+   * Rating color
+   */
+  color: defu({ default: 'warning' }, colorProp),
 
   /**
    * Bind v-model value to rating
@@ -81,13 +81,7 @@ defineOptions({
   name: 'ARating',
 })
 
-const { getLayerClasses } = useLayer()
-
-const { styles, classes } = getLayerClasses(
-  toRef(props, 'color'),
-  ref(''),
-  ref(false),
-)
+const { styles } = useColor(toRef(props, 'color'), 'rating-color')
 
 const rating = ref(0)
 const isHovered = ref(false)
@@ -140,7 +134,6 @@ const onMouseLeave = () => {
       (props.animate && !props.readonly && !props.disabled) && 'a-rating-animated',
       props.readonly && 'a-rating-readonly pointer-events-none',
       props.disabled && 'a-rating-disabled pointer-events-none',
-      ...classes,
     ]"
   >
     <i

packages/anu-vue/src/composables/index.ts

@@ -1,3 +1,4 @@
+export * from './useColor'
 export * from './useConfigurable'
 export * from './useDOMScrollLock'
 export * from './useGroupModel'

packages/anu-vue/src/composables/useColor.ts

@@ -0,0 +1,24 @@
+import type { MaybeRef } from '@vueuse/core'
+import type { StyleValue } from 'vue'
+import type { ColorProp } from '@/composables/useProps'
+
+export const useColor = (color: MaybeRef<ColorProp>, cssVarName: MaybeRef<string>, as: 'text' | 'bg' = 'text') => {
+  const styles = computed(() => {
+    const _color = unref(color)
+    const cssVar = computed(() => `--a-${unref(cssVarName)}`)
+
+    const property = as === 'bg' ? 'background-color' : 'color'
+    const isThemeColor = ['primary', 'success', 'info', 'warning', 'danger'].includes(_color as string)
+
+    const _styles = {
+      [cssVar.value]: isThemeColor ? `hsl(var(--a-${_color}))` : _color,
+      [property]: `var(${cssVar.value})`,
+    } as StyleValue
+
+    return _styles
+  })
+
+  return {
+    styles,
+  }
+}

packages/anu-vue/src/composables/useLayer.ts

@@ -15,6 +15,7 @@ export interface LayerProps {
 // Thanks: https://youtu.be/a_m7jxrTlaw
 // type LooseAutocomplete<T extends string> = T | Omit<string, T>
 
+// TODO: Use `useColor` composable to removed the color calculation
 export const useProps = (propOverrides?: Partial<ComponentObjectPropsOptions>) => {
   let props = {
     /**

packages/anu-vue/src/composables/useProps.ts

@@ -2,9 +2,12 @@ import { createDefu } from 'defu'
 import type { PropType } from 'vue'
 import type { ConfigurableValue } from '@/composables/useConfigurable'
 
+// ℹ️ We need to move this to some better places
+export type LooseAutocomplete<T extends string> = T | Omit<string, T>
+
 export const themeColors = ['primary', 'success', 'info', 'warning', 'danger'] as const
 export type ThemeColor = typeof themeColors[number]
-export type ColorProp = ThemeColor | undefined
+export type ColorProp = LooseAutocomplete<ThemeColor> | undefined
 
 export const color = {
   type: [String, undefined] as PropType<ColorProp>,