feat(attrs): support passing a function to generate attrs

Author: akinoccc

packages/core/src/styled.ts

@@ -11,6 +11,7 @@ import {
   ref,
   watch,
   HTMLAttributes,
+  computed,
 } from 'vue'
 import domElements, { type SupportedHTMLElements } from '@/src/constants/domElements'
 import { type ExpressionType, generateClassName, generateComponentName, insertExpressions, injectStyle, removeStyle } from '@/src/utils'
@@ -33,14 +34,16 @@ interface StyledComponent<T extends object> {
     )[]
   ): DefineSetupFnComponent<{ as?: string; props?: P } & ExtractPropTypes<PropsDefinition<T>> & HTMLAttributes>
 
-  attrs<A extends object>(attrs: A): StyledComponent<A & T>
+  attrs<A = object>(
+    attrs: A | ((props: ExtractPropTypes<PropsDefinition<T>>) => A),
+  ): StyledComponent<A & ExtractPropTypes<PropsDefinition<T>>>
 }
 
 function baseStyled<T extends object>(target: string | InstanceType<any>, propsDefinition?: PropsDefinition<T>): StyledComponent<T> {
   if (!isValidElementType(target)) {
     throw Error('The element is invalid.')
   }
-  let attributes = {}
+  let defaultAttrs: unknown
   function styledComponent<P>(
     styles: TemplateStringsArray,
     ...expressions: (
@@ -53,7 +56,7 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
   }
 
   styledComponent.attrs = function <A extends object>(attrs: A) {
-    attributes = attrs
+    defaultAttrs = attrs
     return styledComponent
   }
 
@@ -69,14 +72,25 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
     const componentName = generateComponentName(type)
     return defineComponent(
       (props, { slots }) => {
+        const internalAttrs = computed<Record<string, any>>(() => {
+          if (typeof defaultAttrs === 'function') {
+            return defaultAttrs(props)
+          }
+          if (typeof defaultAttrs === 'object') {
+            return defaultAttrs
+          }
+          return {}
+        })
+
         const tailwindClasses = ref<string[]>([])
-        const internalProps = ref({ class: '', ...attributes })
+        const internalProps = ref({ class: '', ...internalAttrs.value })
         const theme = inject<Record<string, string | number>>('$theme', reactive({}))
+
         let context = {
           theme,
           ...props,
           ...props.props,
-          ...attributes,
+          ...internalAttrs.value,
         }
 
         const defaultClassName = generateClassName()
@@ -109,7 +123,6 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
         )
 
         onMounted(() => {
-          console.log(internalProps.value)
           tailwindClasses.value = injectStyle(defaultClassName, cssWithExpression, context)
         })
 

packages/playground/src/App.vue

@@ -1,27 +1,21 @@
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import styled from '@vue-styled-components/core'
 
-const TestProps = styled.div<{
-  color: string
-}>`
+const Test = styled('div', { color: String }).attrs<{ disabled: boolean }>({ disabled: false })`
   color: ${(props) => props.color};
+  background: ${(props) => (props.disabled ? 'gray' : 'red')};
 `
-
-const Test = styled('div', { color: String })`
+const Test2 = styled('div', { color: String }).attrs<{ disabled: boolean }>((props) => ({
+  disabled: props.color === 'orange',
+}))`
   color: ${(props) => props.color};
+  background: ${(props) => (props.disabled ? 'gray' : 'red')};
 `
 </script>
 
 <template>
   <Test color="orange">666</Test>
-
-  <TestProps
-    :props="{
-      color: 'red',
-    }"
-  >
-    tttttttt
-  </TestProps>
+  <Test2 color="orange">666</Test2>
 </template>
 
 <style>