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%;

core/helper/is.ts

@@ -21,7 +21,7 @@ A function to create a `style component` that can be used to handle global style
 ```vue
 
 <script setup>
-  import { createGlobalStyle } from '@vue-styled-components/core'
+  import { createGlobalStyle } from '@vvibe/vue-styled-components'
 
   const GlobalStyle = createGlobalStyle`
     body {
@@ -51,7 +51,7 @@ A function to generate keyframes. It takes a template literal as an argument and
 ```vue
 
 <script setup lang="ts">
-  import { styled, keyframes } from '@vue-styled-components/core'
+  import { styled, keyframes } from '@vvibe/vue-styled-components'
 
   const animation = keyframes`
     from {
@@ -89,7 +89,7 @@ A function to generate CSS from a template literal with interpolations.
 ```vue
 
 <script setup lang="ts">
-  import { styled, css } from '@vue-styled-components/core'
+  import { styled, css } from '@vvibe/vue-styled-components'
 
   const mixin = css`
     color: red;
@@ -123,7 +123,7 @@ A function to add attributes to a `ComponentInstance` or `HTMLElements`.
 ```vue
 
 <script setup lang="ts">
-  import { withAttrs } from '@vue-styled-components/core'
+  import { withAttrs } from '@vvibe/vue-styled-components'
 
   const DivWithAttrs = withAttrs('div', {
     class: 'div-with-attrs'

core/styled.ts

@@ -8,7 +8,7 @@ a styled component.
 
 ```vue
 <script setup lang="ts">
-import { styled, keyframes } from '@vue-styled-components/core'
+import { styled, keyframes } from '@vvibe/vue-styled-components'
 
 const rotate = keyframes`
   from {

docs/guide/advances/theming.md

@@ -13,7 +13,7 @@ code reusability and maintainability.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components';
 
 const BlueButton = styled.button`
   width: 120px;
@@ -24,11 +24,11 @@ const BlueButton = styled.button`
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
   background-color: skyblue;
   font-weight: bold;
-`
+`;
 const RedButton = styled(BlueButton)`
   background-color: darkred;
   color: white;
-`
+`;
 </script>
 
 <template>
@@ -52,7 +52,7 @@ For more advanced use cases, you can pass the `as` props to the styled component
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components';
 
 const BlueButton = styled.button`
   width: 120px;
@@ -63,15 +63,16 @@ const BlueButton = styled.button`
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
   background-color: skyblue;
   font-weight: bold;
-`
+`;
 const RedButton = styled(BlueButton)`
   background-color: darkred;
   color: white;
-`
+`;
 const LinkButton = styled(BlueButton)`
   border: none;
-  color: blue;
-`
+  background-color: transparent;
+  box-shadow: none;
+`;
 </script>
 
 <template>

docs/guide/api/core.md

@@ -12,7 +12,7 @@ styled input.
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const borderColor = ref('darkred')
 const inputProps = { borderColor: String }

docs/guide/api/helper.md

@@ -30,7 +30,7 @@ pnpm i vue-styled-components
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledDiv = styled.div`
   display: flex;

docs/guide/basic/animations.md

@@ -25,7 +25,7 @@ Using the `styled` function to style the `Link` component, you can achieve a `da
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 import Link from '/demo/Link.vue'
 
 const StyledLink = styled(Link)`
@@ -49,7 +49,7 @@ a `blue link`.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledLink = styled.a`
   color: darkred !important;

docs/guide/basic/extending-styles.md

@@ -17,6 +17,6 @@
     "vitepress-theme-demoblock": "^3.0.7"
   },
   "dependencies": {
-    "@vue-styled-components/core": "workspace:^"
+    "@vvibe/vue-styled-components": "1.0.0-beta.1"
   }
 }

docs/guide/basic/passed-props.md

@@ -52,6 +52,20 @@ const mixin = css`
 const StyledComp7 = styled('button', { color: String })`
   ${mixin}
 `
+const BlueButton = styled.button`
+  width: 120px;
+  height: 40px;
+  margin-right: 8px;
+  padding: 4px 8px;
+  border-radius: 9999px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  background-color: skyblue;
+  font-weight: bold;
+  color: #fff;
+`
+const LinkButton = styled(BlueButton)`
+  border: none;
+`
 </script>
 
 <template>
@@ -61,6 +75,7 @@ const StyledComp7 = styled('button', { color: String })`
     <StyledComp5>12345</StyledComp5>
     <WithAttrsComp color="red">123</WithAttrsComp>
     <StyledComp7 color="blue">123</StyledComp7>
+    <LinkButton as="a" href="#">Link Button</LinkButton>
   </ThemeProvider>
 </template>