Merge branch 'release/0.3.0'

src/renderer/mixins/component.js

@@ -13,10 +13,15 @@ export default {
         el: document.getElementById(id),
         render (h) {
           let component = that.components.find(_ => _.id === id)
-          // if (!component) return this.$destroy()
           if (!component) return
           let {setting: { tag }, props} = component
-          return h(tag, { props, style: props.style, attrs: { id } })
+          return h(tag, {
+            attrs: {id},
+            props,
+            domProps: props.domProps,
+            class: props.class.split(' '),
+            style: props.style
+          })
         }
       })
       instance.$mount()

src/renderer/plugins/parser.js

@@ -3,13 +3,15 @@ import htmlParser from 'htmlparser2'
 import {guid} from '@/utils'
 import {widgetList} from '@/widgets'
 
+const buildInTags = ['template', 'script', 'style']
+
 let rootNode = null
 let node = null
 let stack = []
 
 const parser = new htmlParser.Parser({
   onopentag (originTag, props = {}) {
-    if (originTag === 'template') return
+    if (buildInTags.includes(originTag)) return
     let {createProps, setting} = widgetList.find(_ => _.setting.originTag === originTag)
     node = {id: guid(), props: Object.assign(createProps(), props), setting}
     stack.push(node)
@@ -20,7 +22,7 @@ const parser = new htmlParser.Parser({
     }
   },
   onclosetag (tagname) {
-    if (tagname === 'template') return
+    if (buildInTags.includes(tagname)) return
     let pNode = stack.pop()
     if (!stack.length) {
       rootNode = pNode

src/renderer/store/index.js

@@ -38,6 +38,10 @@ let store = new Vuex.Store({
     },
     selectedComponent (state, {pageId}) {
       return state[pageId] ? state[pageId].selectedComponent : null
+    },
+    pageCss (state, {components}) {
+      if (!components.length) return
+      return components[0].props.slots.find(_ => _.setting.label === 'style')
     }
   },
   mutations: {

src/renderer/utils/component.js

@@ -20,6 +20,8 @@ export function createProps ($props) {
     return pre
   }, {
     slots: props.slots || [],
+    domProps: props.domProps || {},
+    class: props.class || '',
     style: props.style || {}
   })
 }
@@ -33,6 +35,8 @@ export const toProps = ($props) => {
       return pre
     }, {
       slots: that.slots,
+      domProps: that.domProps,
+      class: that.class,
       style: that.style
     })
   }
@@ -53,6 +57,18 @@ export function toPropsModel ($props) {
       default: () => []
     }
   },
+  {
+    domProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  {
+    class: {
+      type: String,
+      default: ''
+    }
+  },
   {
     style: {
       type: Object,
@@ -76,6 +92,8 @@ export function wrapComponent ({tag, originTag, config: {Props}}) {
           slot: _.slot,
           attrs: { id: _.id },
           props: _.props,
+          domProps: _.props.domProps,
+          class: _.props.class && _.props.class.split(' '),
           style: _.props.style
         }))
       )
@@ -97,6 +115,7 @@ export function stringifyAttributes ({props, config}) {
 // 组件转换为模板字符串
 export function stringifyTemplate (components) {
   return components.reduce((pre, {props: { slots, ...props }, setting: { label, config }}) => {
+    if (label === 'style') return pre
     return `${pre}<${label} ${stringifyAttributes({props, config})}>${slots.length ? stringifyTemplate(slots) : ''}</${label}>`
   }, '')
 }

src/renderer/utils/index.js

@@ -56,7 +56,7 @@ const map = (collection, iteratee, parseChildren, output = [], stack = []) => {
     if (stack.length) {
       let parentNode = stack[stack.length - 1]
       if (!parentNode.children) parentNode.children = []
-      parentNode.children.push(pNode)
+      pNode && parentNode.children.push(pNode)
     } else {
       output.push(pNode)
     }

src/renderer/views/home/children/CodePane.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script>
-import {codemirror} from 'vue-codemirror'
 import pretty from 'pretty'
+import {codemirror} from 'vue-codemirror'
 import {mapGetters} from 'vuex'
 import {stringifyTemplate} from '@/utils/component'
 import 'codemirror/lib/codemirror.css'
@@ -17,7 +17,7 @@ export default {
   data () {
     return {
       cmOptions: {
-        tabSize: 4,
+        tabSize: 2,
         theme: 'base16-dark',
         readOnly: true,
         lineNumbers: true,
@@ -26,7 +26,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['components']),
+    ...mapGetters(['components', 'pageCss']),
     code () {
       return pretty(`${this.template}${this.scripts}${this.styles}`)
     },
@@ -38,7 +38,7 @@ export default {
       return `<script>export default {}<\/script>`
     },
     styles () {
-      return `<style>.view {}</style>`
+      return `<style>${this.pageCss ? this.pageCss.props.domProps.innerText : ''}</style>`
     }
   },
   activated () {

src/renderer/views/home/children/InspectorPane.vue

@@ -2,8 +2,19 @@
   <section class="inspector pl-4 pr-3 pb-3">
     <template v-if="this.selectedComponent">
       <div class="body-2 pb-2">{{this.selectedComponent.setting.label}}</div>
-      <div class="body-2">Props</div>
-      <v-layout v-for="_ in selectedComponent.setting.config.Props" :key="_.key" row style="height:48px;">
+      <!-- native attribute -->
+      <div class="body-2">DomProps</div>
+      <v-layout row style="height:44px;">
+        <v-flex xs6>
+          <v-subheader>classList</v-subheader>
+        </v-flex>
+        <v-flex xs6>
+          <v-text-field v-model="props.class" @change="handleChange" single-line/>
+        </v-flex>
+      </v-layout>
+      <!-- compnent attribute -->
+      <div class="body-2 pt-2">Props</div>
+      <v-layout v-for="_ in selectedComponent.setting.config.Props" :key="_.key" row style="height:44px;">
         <v-flex xs6>
           <v-subheader>{{_.label}}</v-subheader>
         </v-flex>

src/renderer/views/home/children/LayoutPane.vue

@@ -31,12 +31,15 @@ export default {
       this.createLayout()
     },
     createLayout () {
-      const parent = 'wrapper'
+      const parentId = 'wrapper'
       const {id} = this.selectedLayout
-      createElement(document.getElementById(parent), id)
-      let layout = JSON.parse(JSON.stringify({ parent, ...this.selectedLayout }))
-      this.addComponent(layout)
-      this.createComponent(layout)
+      let parent = document.getElementById(parentId)
+      if (parent) {
+        createElement(parent, id)
+        let layout = JSON.parse(JSON.stringify({ parent: parentId, ...this.selectedLayout }))
+        this.addComponent(layout)
+        this.createComponent(layout)
+      }
       this.$store.commit(SET_SELECTED_LAYOUT, null)
     }
   }

src/renderer/views/home/children/OutlinePane.vue

@@ -5,6 +5,7 @@
       :data="componentTree"
       @node-click="handleSelect"
       @node-contextmenu="handleDelete"
+      :filter-node-method="filterNode"
       node-key="id"
       empty-text="No Data"
       highlight-current
@@ -32,12 +33,21 @@ export default {
     }
   },
   watch: {
-    'selectedComponent' (component) {
+    selectedComponent (component) {
       component && this.$nextTick(() => this.setCurrentKey(component.id))
+    },
+    components: {
+      handler (val) {
+        val && this.$nextTick(() => this.$refs['tree'].filter())
+      },
+      deep: true
     }
   },
   methods: {
     ...mapActions(['deleteComponent']),
+    filterNode (val, data) {
+      return data.label !== 'style'
+    },
     handleSelect (e, {data}) {
       let component = recursiveFind(this.components, _ => _.id === data.id, 'props.slots')
       this.$store.commit(SET_SELECTED_COMPONENT, component)

src/renderer/views/home/children/SelectedMask.vue

@@ -27,6 +27,7 @@ export default {
   },
   methods: {
     showSelector (el) {
+      if (!el) return
       let {left, top, width, height} = el.getBoundingClientRect()
       this.visible = true
       this.style = {

src/renderer/views/home/children/StylePane.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="view">
+    <codemirror ref="cm" v-model="css" :options="cmOptions" @input="handleChange"/>
+  </section>
+</template>
+
+<script>
+import {codemirror} from 'vue-codemirror'
+import {mapGetters} from 'vuex'
+import {guid} from '@/utils'
+import {UPDATE_COMPONENT, ADD_COMPONENT_SLOT} from '@/store/mutation-types'
+export default {
+  components: {
+    codemirror
+  },
+  data () {
+    return {
+      css: '',
+      cmOptions: {
+        tabSize: 2,
+        theme: 'base16-dark',
+        lineNumbers: true,
+        line: true
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['components', 'pageCss'])
+  },
+  watch: {
+    '$route.query.id' () {
+      this.resetCss()
+    }
+  },
+  methods: {
+    handleChange (innerText) {
+      if (!this.components.length) return
+      let {id} = this.components[0]
+      let props = {
+        domProps: { innerText: innerText.replace(/[\r\n]/g, '') }
+      }
+      // exsits => change innerText, not exsits => create style slot
+      if (this.pageCss) {
+        this.$store.commit(UPDATE_COMPONENT, { id: this.pageCss.id, props })
+      } else {
+        let slot = {
+          id: guid(),
+          setting: { tag: 'style', label: 'style' },
+          props
+        }
+        this.$store.commit(ADD_COMPONENT_SLOT, { id, slot })
+      }
+    },
+    resetCss () {
+      this.css = this.pageCss ? this.pageCss.props.domProps.innerText : ''
+    }
+  },
+  activated () {
+    this.resetCss()
+  }
+}
+</script>
+
+<style lang="scss">
+.CodeMirror {
+  height: auto;
+}
+</style>