Merge pull request #88 from liqueflies/master

[+] Added v-model and better styled-component check

Author: liqueflies

example/index.html

@@ -16,6 +16,11 @@ <h1>Basic Example</h1>
     styled.injectGlobal`
       body {
         background-color: #fefefe;
+        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+
+      *, *::before, *::after {
+        box-sizing: border-box;
       }
     `;
 
@@ -31,29 +36,43 @@ <h1>Basic Example</h1>
 
     // Create a <CustomTitle> vue component that renders an <h1> which is
     // centered, palevioletred and sized at 1.5em
-    const CustomTitle = styled.default.h1`
+    const CustomTitle = styled.default('h1', { animate: Boolean })`
       font-size: 2em;
       text-align: center;
       color: ${props => props.theme.primary};
-      animation: ${animation} 2s linear infinite;
+      text-transform: uppercase;
 
       @supports (-webkit-text-stroke: 1px) {
         -webkit-text-stroke: 2px ${props => props.theme.primary};
         color: transparent
       }
+
+      ${props => props.animate &&
+        `animation: ${animation} 2s linear infinite;`
+      }
     `;
 
     const H2 = CustomTitle.withComponent('h2')
 
+    const MyComponent = {
+      props: ['visible'],
+      template: `<h1><slot /></h1>`
+    }
+
+    const SuperCustomTitle = styled.default(MyComponent, { color: String })`
+      color: ${props => props.color || 'red'};
+      opacity: ${props => props.visible ? 1 : 0};
+    `
+
     // Create a <Wrapper> vue component that renders a <section> with
     // some padding and a papayawhip background
     const Wrapper = styled.default.section`
       padding: 4em;
       background: ${props => props.theme.secondary};
     `;
 
-    const W2 = styled.default(Wrapper)`
-      color: red;
+    const W2 = Wrapper.extend`
+      background: ${props => props.theme.tertiary};
     `;
 
     const W3 = styled.default(W2)`
@@ -62,32 +81,72 @@ <h1>Basic Example</h1>
       }
     `
 
+    const StyledInput = styled.default.input`
+      display: block;
+      width: 100%;
+      height: 60px;
+      border: solid 3px transparent;
+      padding: 0 0.6em;
+      font-size: 1em;
+      line-height: 1;
+
+      &:focus {
+        outline: none;
+        border: solid 3px ${props => props.theme.primary};
+      }
+    `
+
     const Btn = styled.default('button', { visible: Boolean })`
-      background-color: red;
+      outline: none;
+      border: none;
+      border-radius: 6em;
+      padding: 1em 2em;
+      color: #fff;
+      cursor: pointer;
+      margin: 1.5em 0;
+      background-color: ${props => props.theme.primary};
       opacity: ${props => props.visible ? 1: 0};
     `
 
     const SuperBtn = styled.default(Btn, { visible: Boolean, big: Boolean })`
-      font-size: ${props => props.big ? 22 : 18}px;
+      font-size: ${props => props.big ? 0.8 : 1}em;
     `
 
     new Vue({
       el: '#container',
+      data: {
+        text1: 'Hello World, this is my first styled component!',
+        text2: 'Hello World, this is my first styled component!',
+        animated1: false,
+        animated2: false
+      },
       template: `
       <theme-provider :theme="{
         primary: 'palevioletred',
-        secondary: 'papayawhip'
+        secondary: 'papayawhip',
+        tertiary: 'lavenderblush'
       }">
         <wrapper>
-          <custom-title> Hello World, this is my first styled component! </custom-title>
-          <btn visible> Button </btn>
+          <custom-title :visible="true" :animate="animated1"> {{text1}} </custom-title>
+          <styled-input v-model="text1" />
+          <btn visible @click="animated1 = !animated1"> A Styled Button </btn>
         </wrapper>
+        <w-2>
+          <h-2 :animate="animated2"> {{text2}} </h-2>
+          <styled-input v-model="text2" />
+          <super-btn visible @click="animated2 = !animated2"> An extension of Styled Button </super-btn>
+        </w-2>
       </theme-provider>`,
       components: {
-        'custom-title': H2,
-        wrapper: W3,
-        btn: SuperBtn,
-        'theme-provider': styled.ThemeProvider
+        CustomTitle,
+        Wrapper,
+        W2,
+        H2,
+        Btn,
+        SuperBtn,
+        SuperCustomTitle,
+        StyledInput,
+        'theme-provider': styled.ThemeProvider,
       },
     });
     </script>

package-lock.json

@@ -37,6 +37,7 @@
     "glamor": "^2.20.24",
     "inline-style-prefixer": "^2.0.5",
     "lodash.isplainobject": "^4.0.6",
+    "lodash.zipobject": "^4.1.3",
     "stylis": "^3.5.4"
   },
   "devDependencies": {

package.json

@@ -1,13 +1,14 @@
+import css from '../constructors/css'
+import normalizeProps from '../utils/normalizeProps'
+
 export default (ComponentStyle) => {
   const createStyledComponent = (target, rules, props) => {
-    const prevProps = target && typeof target !== 'string'
-      ? (typeof target === 'object' ? target.props : (typeof target === 'function' ? target.options.props : {}))
-      : {}
-
-    const mergedProps = { ...prevProps, ...props }
-
     const componentStyle = new ComponentStyle(rules)
 
+    // handle array-declaration props
+    const currentProps = normalizeProps(props)
+    const prevProps = normalizeProps(target.props)
+
     const StyledComponent = {
       inject: {
         $theme: {
@@ -16,8 +17,17 @@ export default (ComponentStyle) => {
           }
         }
       },
-      props: mergedProps,
-      render: function (createElement) {
+      props: {
+        value: null,
+        ...currentProps,
+        ...prevProps
+      },
+      data () {
+        return {
+          localValue: this.value
+        }
+      },
+      render (createElement) {
         const children = []
         for (const slot in this.$slots) {
           if (slot === 'default') {
@@ -27,17 +37,22 @@ export default (ComponentStyle) => {
           }
         }
 
-        console.log()
-
         return createElement(
           target,
           {
             class: [this.generatedClassName],
             props: this.$props,
             domProps: {
-              value: this.value
+              value: this.localValue
+            },
+            on: {
+              ...this.$listeners,
+              input: event => {
+                if (event && event.target) {
+                  this.localValue = event.target.value
+                }
+              }
             },
-            on: this.$listeners,
             scopedSlots: this.$scopedSlots
           },
           children
@@ -57,8 +72,17 @@ export default (ComponentStyle) => {
           return this.$theme()
         }
       },
-      extend (extendedRules) {
-        return createStyledComponent(target, rules.slice().concat(extendedRules), props)
+      watch: {
+        value (newValue) {
+          this.localValue = newValue
+        },
+        localValue () {
+          this.$emit('input', this.localValue)
+        }
+      },
+      extend (cssRules, ...interpolations) {
+        const extendedRules = css(cssRules, ...interpolations)
+        return createStyledComponent(target, rules.concat(extendedRules), props)
       },
       withComponent (newTarget) {
         return createStyledComponent(newTarget, rules, props)

src/models/StyledComponent.js

@@ -0,0 +1,5 @@
+export default function isStyledComponent (target) {
+  return target &&
+    target.methods &&
+    typeof target.methods.generateAndInjectStyles() === 'string'
+}

src/utils/isStyledComponent.js

@@ -0,0 +1,8 @@
+
+import domElements from './domElements'
+
+export default function isTag (target) {
+  if (typeof target === 'string') {
+    return domElements.indexOf(target) !== -1
+  }
+}

src/utils/isTag.js

@@ -1,14 +1,9 @@
-import domElements from './domElements'
+import isTag from './isTag'
+import isVueComponent from './isVueComponent'
+import isStyledComponent from './isStyledComponent'
 
-export default function isValidElementType (tag) {
-  if (typeof tag === 'undefined' || typeof tag === 'number') {
-    return false
-  }
-  if (typeof tag === 'string') {
-    return domElements.indexOf(tag) !== -1
-  }
-  if (typeof tag === 'object') {
-    return !!tag.template || !!tag.withComponent
-  }
-  return true
+export default function isValidElementType (target) {
+  return isStyledComponent(target) ||
+    isVueComponent(target) ||
+    isTag(target)
 }

src/utils/isValidElementType.js

@@ -0,0 +1,7 @@
+export default function isVueComponent (target) {
+  return target &&
+    (
+      typeof target.render === 'function' ||
+      typeof target.template === 'string'
+    )
+}

src/utils/isVueComponent.js

@@ -0,0 +1,9 @@
+import zipObject from 'lodash.zipobject'
+
+export default function normalizeProps (props = {}) {
+  if (Array.isArray(props)) {
+    return zipObject(props)
+  } else {
+    return props
+  }
+}