fix(styled): v-models not working(close #31)

packages/core/src/styled.ts

@@ -72,7 +72,7 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
     const componentName = generateComponentName(type)
     const commonClassName = generateClassName()
     const component = defineComponent(
-      (props, { slots }) => {
+      (props, { slots, attrs }) => {
         const internalAttrs = computed<Record<string, any>>(() => {
           if (typeof defaultAttrs === 'function') {
             return defaultAttrs(props)
@@ -134,10 +134,20 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
         // Return the render function
         return () => {
           const node = isVueComponent(target) ? h(target, { as: props.as }) : props.as ?? target
+
+          // Extract event handlers from attrs
+          const eventHandlers: Record<string, (...args: any[]) => any> = {}
+          Object.entries(attrs).forEach(([key, value]) => {
+            if (key.startsWith('on')) {
+              eventHandlers[key] = value as (...args: any[]) => any
+            }
+          })
+
           return h(
             node,
             {
               ...internalProps.value,
+              ...eventHandlers, // Ensure event handlers are passed correctly
             },
             slots,
           )

packages/playground/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import styled, { ThemeProvider } from '@vue-styled-components/core'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const Button = styled.button`
   color: ${(props) => props.theme.fg};
@@ -27,6 +27,18 @@ const Container = styled.div`
     color: #fff;
   }
 `
+
+const Test = styled('div', { color: String })`
+  color: ${(props) => props.color};
+`
+
+const StyledInput = styled('input', { color: String })`
+  color: ${(props) => props.color};
+`
+
+const colors = ['red', 'blue', 'green']
+
+const inputValue = ref(0)
 </script>
 
 <template>
@@ -45,6 +57,15 @@ const Container = styled.div`
     <Container>
       <Button>888</Button>
     </Container>
+
+    <div v-for="c in colors" :key="c">
+      <Test :color="c">
+        {{ c }}
+      </Test>
+    </div>
+
+    <StyledInput v-model:value="inputValue" />
+    <button @click="inputValue++">click</button>
   </ThemeProvider>
 </template>