add actionsheet,countdowm,buttonTab,clocker,panel,card

jinhuiWong · Dec 21, 2016 · efe24df · efe24df
1 parent cc68236
commit efe24df
Show file tree

Hide file tree

Showing 17 changed files with 241 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="icon" href="favicon.png" type="image/x-icon">
+    <link rel="icon" href="http://og1rlwcj8.bkt.clouddn.com/favicon.ico" type="image/x-icon">
     <title>Vux2.0</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -1,9 +1,30 @@
 {
-  "name": "vux2.0",
-  "version": "2.0.0",
+  "name": "vuxx",
+  "version": "0.1.0",
   "description": "vux2.0 project",
   "author": "wong <[email protected]>",
-  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jinhuiWong/vux-2.0"
+  },
+  "homepage": "https://github.com/jinhuiWong/vux-2.0",
+  "bugs": {
+    "url": "https://github.com/jinhuiWong/vux-2.0/issues"
+  },
+  "license": "MIT",
+  "keywords": [
+    "vux",
+    "vue",
+    "weui",
+    "weex",
+    "vue-components",
+    "web-components",
+    "component",
+    "components",
+    "mobile ui",
+    "framework",
+    "frontend"
+  ],
   "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",

diff --git a/src/Home.vue b/src/Home.vue
@@ -38,7 +38,7 @@ export default {
   },
   data () {
     return {
-      version: version
+      version: '2.0.0'
     }
   }
 }

diff --git a/src/components/actionsheet/index.vue b/src/components/actionsheet/index.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="vux-actionsheet">
-    <div class="weui_mask_transition" :class="{'weui_fade_toggle': show}" :style="{display: show ? 'block' : 'none'}" @click="show=false"></div>
-    <div class="weui_actionsheet" :class="{'weui_actionsheet_toggle': show}">
+    <div class="weui_mask_transition" :class="{'weui_fade_toggle': props_show}" :style="{display: props_show ? 'block' : 'none'}" @click="props_show=false"></div>
+    <div class="weui_actionsheet" :class="{'weui_actionsheet_toggle': props_show}">
       <div class="weui_actionsheet_menu">
-        <div class="weui_actionsheet_cell" v-for="(key, text) in menus" @click="emitEvent('on-click-menu', key)" v-html="text">
+        <div class="actionsheet_cell_container">
+          <div class="weui_actionsheet_cell" v-for="(text, key) in menus" @click="emitEvent('on-click-menu', key)" v-html="text">
+          </div>
         </div>
-        <div class="vux-actionsheet-gap" v-if="showCancel"></div>
+        <!-- <div class="vux-actionsheet-gap" v-if="showCancel"></div> -->
         <div class="weui_actionsheet_cell vux-actionsheet-cancel" @click="emitEvent('on-click-menu', 'cancel')" v-if="showCancel">{{cancelText}}</div>
       </div>
     </div>
@@ -14,11 +16,19 @@
 
 <script>
 export default {
-  ready () {
+  created(){
+    this.props_show=this.show
+    if(this.value) this.props_show=this.value
+  },
+  mounted () {
     this.$tabbar = document.querySelector('.weui_tabbar')
   },
   props: {
     show: Boolean,
+    value: {
+      type:Boolean,
+      default:false
+    },
     showCancel: Boolean,
     cancelText: {
       type: String,
@@ -29,12 +39,17 @@ export default {
       default: () => {}
     }
   },
+  data(){
+    return{
+      props_show:false
+    }
+  },
   methods: {
     emitEvent (event, menu) {
       if (event === 'on-click-menu' && !/.noop/.test(menu)) {
         this.$emit(event, menu)
         this.$emit(`${event}-${menu}`)
-        this.show = false
+        this.props_show = false
       }
     },
     fixIos (zIndex) {
@@ -44,14 +59,21 @@ export default {
     }
   },
   watch: {
-    show (val) {
+    value(val){
+      this.props_show=val
+    },
+    props_show(val){
       if (val) {
         this.fixIos(-1)
       } else {
         setTimeout(() => {
           this.fixIos(100)
         }, 200)
       }
+      this.$emit('input',val)
+    },
+    show (val) {
+      this.props_show=val
     }
   },
   beforeDestroy () {
@@ -69,7 +91,39 @@ export default {
   width: 100%;
   background-color: #eee;
 }
+
+.vux-actionsheet-cancel{
+  border-radius: 15px;
+  margin:0px 15px;
+  margin-bottom:13px;
+}
+
 .vux-actionsheet-cancel:before {
   border-top: none;
 }
+
+// css hack
+.weui_fade_toggle {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.weui_actionsheet {
+    background-color: inherit ;
+}
+
+.weui_actionsheet_menu {
+    background-color: inherit;
+}
+
+.weui_actionsheet_cell {
+    background-color: #fff;
+    padding: 15px 0;
+}
+
+.actionsheet_cell_container{
+  border-radius: 15px;
+  margin:15px;
+  margin-bottom:5px;
+  overflow:hidden
+}
 </style>
diff --git a/src/components/button-tab/button-tab-item.vue b/src/components/button-tab/button-tab-item.vue
@@ -5,14 +5,16 @@
 </template>
 
 <script>
-import { childMixin } from '../../mixins/multi-items'
 
 export default {
-  mixins: [childMixin],
+  mounted() {
+    this.$parent.updateIndex()
+    this.props_selected=this.selected
+  },
   computed: {
     classes () {
       return {
-        'vux-button-group-current': this.index === this.$parent.index,
+        'vux-button-group-current': this.index === this.$parent.props_index,
         'no-border-right': this.shouldRemoveBorder
       }
     },
@@ -25,10 +27,48 @@ export default {
       }
     }
   },
-  data () {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    this.$parent.updateIndex()
+  },
+  beforeDestroy() {
+    const $parent = this.$parent
+    this.$nextTick(() => {
+      $parent.updateIndex()
+    })
+  },
+  methods: {
+    onItemClick() {
+      if (typeof this.disabled === 'undefined' || this.disabled === false) {
+          this.props_selected = true;
+          this.$parent.$emit('onTabItemClick',this.index);
+      }
+    }
+  },
+  watch: {
+    props_selected(val){
+      if (val) {
+          this.$parent.$emit('onTabItemClick',this.index);
+        }
+    },
+    selected (val) {
+      console.log('selected');
+      this.props_selected=val;
+    }
+  },
+  data() {
     return {
-      shouldRemoveBorder: false
+      index: -1,
+      shouldRemoveBorder: false,
+      props_selected:false
     }
   }
+
+
 }
 </script>
diff --git a/src/components/button-tab/button-tab.vue b/src/components/button-tab/button-tab.vue
@@ -5,12 +5,57 @@
 </template>
 
 <script>
-import { parentMixin } from '../../mixins/multi-items'
 
 export default {
-  mixins: [parentMixin],
+  mounted() {
+    this.updateIndex()
+    this.$on('onTabItemClick',function(index){
+        this.props_index = index;
+        this.$emit('on-index-change', this.props_index);
+    });
+  },
+  methods: {
+    updateIndex() {
+      if (!this.$children) return
+      this.number = this.$children.length
+      let children = this.$children
+      for (let i = 0; i < children.length; i++) {
+        children[i].index = i
+        if (children[i]=== this.index) {
+            this.props_index = i
+        }
+      }
+    }
+  },
   props: {
+    index: {
+      type: Number,
+      default: -1
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
     height: Number
+  },
+  watch: {
+    props_index(newIndex, oldIndex) {
+      oldIndex > -1 && this.$children[oldIndex] && (this.$children[oldIndex].props_selected = false)
+      newIndex > -1 && (this.$children[newIndex].props_selected = true)
+      this.$emit('input',newIndex);
+    },
+    value(val){
+      this.props_index=val
+    },
+    index : function(newIndex, oldIndex){
+        this.props_index=newIndex;
+    },
+  },
+  data() {
+    return {
+      number: this.$children.length,
+      props_index:0
+    }
   }
 }
 </script>

diff --git a/src/components/clocker/index.vue b/src/components/clocker/index.vue
@@ -8,7 +8,7 @@
 <script>
 const Clocker = require('./clocker')
 export default {
-  ready () {
+  mounted () {
     this.slot = this.$el.querySelector('.vux-clocker-tpl')
     this.slotString = this.slot.innerHTML
     if (this.slotString !== '') {

diff --git a/src/components/countdown/index.vue b/src/components/countdown/index.vue
@@ -1,10 +1,11 @@
 <template>
-  <span>{{time}}</span>
+  <span>{{props_time}}<input style="display:none" v-model="props_time"></span>
 </template>
 
 <script>
 export default {
   props: {
+    value: Number,
     time: {
       type: Number,
       default: 60
@@ -14,12 +15,16 @@ export default {
       default: true
     }
   },
+  created(){
+    this.props_time=this.time
+    if(this.value) this.props_time=this.value
+  },
   methods: {
     tick () {
       let _this = this
       this.interval = setInterval(function () {
-        if (_this.time > 0) {
-          _this.time--
+        if (_this.props_time > 0) {
+          _this.props_time--
         } else {
           _this.stop()
           _this.index++
@@ -32,8 +37,17 @@ export default {
     }
   },
   watch: {
+    value(val){
+      this.props_time=val
+    },
+    props_time(val){
+      this.$emit('input',val)
+    },
+    time (val) {
+      this.props_time=val
+    },
     start (newVal, oldVal) {
-      if (newVal === true && oldVal === false && this.time > 0) {
+      if (newVal === true && oldVal === false && this.props_time > 0) {
         this.tick()
       }
       if (newVal === false && oldVal === true) {
@@ -49,7 +63,8 @@ export default {
   data () {
     return {
       interval: null,
-      index: 0
+      index: 0,
+      props_time :60
     }
   }
 }