w-plot-vue 1.0.2 → 1.0.4

package/src/App.vue

@@ -14,15 +14,16 @@
 
         <div style="background:#f5f5f5;">
 
-            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL1">
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL1 && cmpsL1.length>0">
                 <WListHorizontal
                     :items="cmpsL1"
                     :itemActive.sync="cmpP1"
                     :itemBackgroundColor="'transparent'"
-                    :itemBackgroundColorHover="'transparent'"
-                    :itemBackgroundColorActive="'transparent'"
+                    :itemBackgroundColorHover="'#eee'"
+                    :itemBackgroundColorActive="'#eee'"
                     :keyText="'name'"
-                    @update:itemActive="(v)=>{indP2=0;indP1=getInd(v,cmpsL1)}"
+                    :paddingStyle="{v:12,h:20}"
+                    @update:itemActive="(v)=>{indP3=0;indP2=0;indP1=getInd(v,cmpsL1)}"
                 >
                     <template v-slot:item="props">
                         <div style="">
@@ -30,17 +31,21 @@
                         </div>
                     </template>
                 </WListHorizontal>
+                <div style="height:1px; background:#ddd;"></div>
             </div>
 
-            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL2">
+
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL2 && cmpsL2.length>0">
+                <div style="height:3px; background:#fff;"></div>
                 <WListHorizontal
                     :items="cmpsL2"
                     :itemActive.sync="cmpP2"
                     :itemBackgroundColor="'transparent'"
-                    :itemBackgroundColorHover="'transparent'"
-                    :itemBackgroundColorActive="'transparent'"
+                    :itemBackgroundColorHover="'#eee'"
+                    :itemBackgroundColorActive="'#eee'"
                     :keyText="'name'"
-                    @update:itemActive="(v)=>{indP2=getInd(v,cmpsL2)}"
+                    :paddingStyle="{v:12,h:20}"
+                    @update:itemActive="(v)=>{indP3=0;indP2=getInd(v,cmpsL2)}"
                 >
                     <template v-slot:item="props">
                         <div style="">
@@ -48,16 +53,19 @@
                         </div>
                     </template>
                 </WListHorizontal>
+                <div style="height:1px; background:#ddd;"></div>
             </div>
 
-            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL3">
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL3 && cmpsL3.length>0">
+                <div style="height:3px; background:#fff;"></div>
                 <WListHorizontal
                     :items="cmpsL3"
                     :itemActive.sync="cmpP3"
                     :itemBackgroundColor="'transparent'"
-                    :itemBackgroundColorHover="'transparent'"
-                    :itemBackgroundColorActive="'transparent'"
+                    :itemBackgroundColorHover="'#eee'"
+                    :itemBackgroundColorActive="'#eee'"
                     :keyText="'name'"
+                    :paddingStyle="{v:12,h:20}"
                     @update:itemActive="(v)=>{indP3=getInd(v,cmpsL3)}"
                 >
                     <template v-slot:item="props">
@@ -66,6 +74,7 @@
                         </div>
                     </template>
                 </WListHorizontal>
+                <div style="height:1px; background:#ddd;"></div>
             </div>
 
         </div>
@@ -172,7 +181,7 @@ export default {
         vo.indP2 = 0
         vo.indP3 = 0
 
-        //urlParse, http://localhost:8080/?cmp=w-pie
+        //urlParse, http://localhost:8080/?cmp=w-set-multi
         let p = urlParse(location.href)
         // console.log('p', p)
 
@@ -270,16 +279,15 @@ export default {
             let ls = []
             let l = 0
             let pv = (ts) => {
+                ls.push(l)
                 each(ts, (v, k) => {
                     let name = get(v, `name`, '')
                     let _name = kebabCase(name)
                     let cmps = get(v, `cmps`, [])
                     if (cmps.length > 0) {
-                        ls.push(l)
                         l++
                         pv(cmps)
                         l--
-                        ls.pop()
                     }
                     let lst = [...ls, k]
                     rs.push({
@@ -290,13 +298,14 @@ export default {
                         r = lst
                     }
                 })
+                ls.pop()
             }
             pv(vo.cmpsL1)
             // console.log('rs', rs)
             // console.log('r', r)
-            vo.indP1 = get(r, 0, 0)
-            vo.indP2 = get(r, 1, 0)
-            vo.indP3 = get(r, 2, 0)
+            vo.indP1 = get(r, 1, 0)
+            vo.indP2 = get(r, 2, 0)
+            vo.indP3 = get(r, 3, 0)
         },
 
     },