Merge pull request #3 from v-vibe/next

release: v1.0.0-beta.2

Author: akinoccc

.github/workflows/docs-deploy.yml

@@ -2,7 +2,7 @@ name: Deploy docs site to Pages
 
 on:
   push:
-    branches: [master]
+    branches: [main, beta]
 
   # workflow_dispatch:
 

.idea/codeStyles/Project.xml

@@ -1,5 +1,5 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "trailingComma": "none",
   "tabWidth": 2,

.idea/markdown.xml

@@ -5,7 +5,7 @@ export function isTag(target: any) {
 }
 
 export function isStyledComponent(target: any) {
-  return typeof target === 'object' && 'styled' in target
+  return typeof target === 'object' && target?.name?.includes('styled')
 }
 
 export function isVueComponent(target: any) {

.idea/prettier.xml

@@ -1,16 +1,4 @@
-import {
-  defineComponent,
-  DefineSetupFnComponent,
-  h,
-  inject,
-  onMounted,
-  PropType,
-  PublicProps,
-  reactive,
-  SlotsType,
-  useSlots,
-  watchEffect
-} from 'vue'
+import { defineComponent, DefineSetupFnComponent, h, inject, onMounted, PropType, PublicProps, reactive, SlotsType, watchEffect } from 'vue'
 import domElements, { type SupportedHTMLElements } from '@/constants/domElements'
 import { type ExpressionsType, generateClassName, generateComponentName, insertExpressions } from '@/utils'
 import { injectStyle } from '@/utils/injectStyle'
@@ -68,14 +56,13 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
     styledClassNameMap[componentName] = className
 
     return defineComponent(
-      (props) => {
+      (props, { slots }) => {
         const myAttrs = { ...attributes }
         const theme = reactive(inject<Record<string, string | number>>('$theme', {}))
         let context = {
           theme,
           ...props
         }
-
         myAttrs.class = className
 
         watchEffect(() => {
@@ -92,9 +79,8 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
 
         // Return the render function
         return () => {
-          const slots = useSlots()
           return h(
-            isVueComponent(target) ? target : props?.as || target,
+            isVueComponent(target) ? h(target, { as: props.as }) : props.as ?? target,
             {
               ...myAttrs
             },
@@ -110,9 +96,8 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
           },
           ...propsDefinition
         },
-        inheritAttrs: true,
-        styled: true
-      } as any
+        inheritAttrs: true
+      }
     )
   }
 

.idea/vue-styled-components.iml

@@ -17,7 +17,7 @@ the `ThemeProvider`'s scope can access this theme object.
 
 ```vue
 <script setup lang="ts">
-import { styled, ThemeProvider } from '@vue-styled-components/core'
+import { styled, ThemeProvider } from '@vvibe/vue-styled-components'
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -54,7 +54,7 @@ and see the updates reflected in your styled components.
 
 ```vue
 <script setup lang="ts">
-import { styled, ThemeProvider } from '@vue-styled-components/core'
+import { styled, ThemeProvider } from '@vvibe/vue-styled-components'
 import { ref } from 'vue'
 
 const theme = ref<Record<string, string>>({ primary: 'blue' })
@@ -112,7 +112,7 @@ and use properties defined in the theme for their styles.
 
 ```vue
 <script setup lang="ts">
-import { ThemeProvider } from '@vue-styled-components/core'
+import { ThemeProvider } from '@vvibe/vue-styled-components'
 import { defineComponent, h, inject } from 'vue'
 
 const Link = defineComponent(() => {

.prettierrc.json

@@ -21,7 +21,7 @@ It is a factory function.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledDiv = styled('div', { color: String })`
   width: 100%;
@@ -50,7 +50,7 @@ const StyledDiv = styled('div', { color: String })`
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledDiv = styled.div`
   width: 40px;
@@ -79,7 +79,7 @@ It is used for passing attributes to styled component.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const InputWithValue = styled.input.attrs({ value: "I'm input with default value. 🥺" })`
   width: 100%;