add vbox component.

mulholland0318 · Nov 12, 2015 · 2690e11 · 2690e11
1 parent e24f807
commit 2690e11
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 16 deletions.
diff --git a/examples/data/grid.vue b/examples/data/grid.vue
@@ -1,14 +1,23 @@
 <template>
-  <d-grid :data="testData" schema="Test" height2="300" :fit="true" :selection.sync="selection" :fixed-column-count2="3">
-    <d-grid-column type="index"></d-grid-column>
-    <d-grid-column type="selection"></d-grid-column>
-    <d-grid-column property="prop1"></d-grid-column>
-    <d-grid-column property="prop2"></d-grid-column>
-    <d-grid-column property="prop3" width="400"></d-grid-column>
-    <d-grid-column property="prop4"></d-grid-column>
-    <d-grid-column label="5" property="prop5"></d-grid-column>
-    <d-grid-column label="操作" width="200"><d-button @click="$parent.test()">测试1</d-button><button>测试2</button><button>测试3</button></d-grid-column>
-  </d-grid>
+  <d-vbox style="height: 100%;">
+    <d-form>
+      <d-text-field></d-text-field>
+    </d-form>
+
+    <d-grid :data="testData" schema="Test" height="300" :fit="true" :selection.sync="selection" :fixed-column-count2="3" flex>
+      <d-grid-column type="index"></d-grid-column>
+      <d-grid-column type="selection"></d-grid-column>
+      <d-grid-column property="prop1"></d-grid-column>
+      <d-grid-column property="prop2"></d-grid-column>
+      <d-grid-column property="prop3" width="400"></d-grid-column>
+      <d-grid-column property="prop4"></d-grid-column>
+      <d-grid-column label="5" property="prop5"></d-grid-column>
+      <d-grid-column label="操作" width="200"><d-button @click="$parent.test()">测试1</d-button><button>测试2</button><button>测试3</button></d-grid-column>
+    </d-grid>
+    <div>
+      xxx
+    </div>
+  </d-vbox>
 </template>
 
 <script type="text/ecmascript-6" lang="babel">

diff --git a/src/basic/vbox.vue b/src/basic/vbox.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="d-vbox"><slot></slot></div>
+</template>
+
+<style>
+  .d-vbox {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .d-vbox > .d-box-cell {
+    display: flex;
+    width: 100%;
+  }
+</style>
+
+<script type="text/ecmascript-6" lang="babel">
+  var Vue = require('vue');
+  var domUtil = require('wind-dom');
+  var throttle = require('../util').throttle;
+
+  export default {
+    data: {
+      $isBox: true,
+      $isTop: false,
+      $resizeListener: null
+    },
+
+    methods: {
+      handleResize() {
+        this.$broadcast('onresize');
+      }
+    },
+
+    destroyed() {
+      if (this.$resizeListener) {
+        domUtil.off(window, 'resize', this.$resizeListener);
+      }
+    },
+
+    ready() {
+      var parent = this.$parent;
+      var isTopBox = true;
+
+      while (parent) {
+        if (parent.$isBox) {
+          isTopBox = false;
+        }
+        parent = parent.$parent;
+      }
+
+      var children = this.$el.children;
+      for (var i = 0, j = children.length; i < j; i++) {
+        var child = children[i];
+        var flex = child.getAttribute('flex');
+        if (flex !== null) {
+          child.style.flex = Number(flex) || 1;
+        }
+      }
+
+      if (isTopBox) {
+        var box = this;
+        box.$resizeListener = throttle(box.handleResize.bind(box), 100);
+
+        domUtil.on(window, 'resize', box.$resizeListener);
+
+        box.handleResize();
+      }
+    }
+  }
+</script>
diff --git a/src/data/grid.vue b/src/data/grid.vue
@@ -244,6 +244,15 @@
       }
     },
 
+    events: {
+      onresize() {
+        var grid = this;
+        Vue.nextTick(function() {
+          grid.height = grid.$el.offsetHeight;
+        });
+      }
+    },
+
     methods: {
       toggleSelection(event, row) {
         var target = event.target;

diff --git a/src/form/fields/text.vue b/src/form/fields/text.vue
@@ -55,12 +55,14 @@
 
         if (this.property) {
           var fieldSchema = this.fieldSchema;
-          var descriptor = fieldSchema.$getPropertyDescriptor(this.property);
-          if (descriptor) {
-            if (descriptor.type === Date) {
-              return 'date';
-            } else if (descriptor.type === Number) {
-              return 'number';
+          if (fieldSchema) {
+            var descriptor = fieldSchema.$getPropertyDescriptor(this.property);
+            if (descriptor) {
+              if (descriptor.type === Date) {
+                return 'date';
+              } else if (descriptor.type === Number) {
+                return 'number';
+              }
             }
           }
         }

diff --git a/src/index.js b/src/index.js
@@ -13,6 +13,7 @@ import Slider from './basic/slider.vue'
 import Sticky from './basic/sticky.vue'
 import Dropdown from './basic/dropdown.vue'
 import DropdownItem from './basic/dropdown-item.vue'
+import Vbox from './basic/vbox.vue'
 
 import Accordion from './nav/accordion.vue'
 import AccordionPanel from './nav/accordion-panel.vue'
@@ -46,6 +47,7 @@ export var Components = {
   Sticky,
   Dropdown,
   DropdownItem,
+  Vbox,
 
   Accordion,
   AccordionPanel,