fixed Layout bug

fixed Layout bug

src/components/date-picker/base/time-spinner.vue

@@ -0,0 +1,66 @@
+<template>
+    <div :class="classes">
+        <div :class="[prefixCls+ '-wrapper']">
+            <ul :class="[prefixCls + '-list']">
+                <li v-for="item in hoursList"></li>
+            </ul>
+        </div>
+        <div :class="[prefixCls+ '-wrapper']">
+            <li v-for="item in minutesList"></li>
+        </div>
+        <div :class="[prefixCls+ '-wrapper']" v-show="showSeconds">
+            <li v-for="item in secondsList"></li>
+        </div>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-time-picker-cells';
+
+    export default {
+        props: {
+            hours: {
+                type: Number,
+                default: 0
+            },
+            minutes: {
+                type: Number,
+                default: 0
+            },
+            seconds: {
+                type: Number,
+                default: 0
+            },
+            showSeconds: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-with-seconds`]: this.showSeconds
+                    }
+                ];
+            },
+            hoursList () {
+                return [];
+            },
+            minutesList () {
+                return [];
+            },
+            secondsList () {
+                return [];
+            }
+        },
+        methods: {
+
+        }
+    };
+</script>

src/components/date-picker/panel/time.vue

@@ -0,0 +1,82 @@
+<template>
+    <div :class="[prefixCls + '-body-wrapper']">
+        <div :class="[prefixCls + '-body']">
+            <div :class="[prefixCls + '-content']">
+                <time-spinner
+                    :show-seconds="showSeconds"
+                    :hours="hours"
+                    :minutes="minutes"
+                    :seconds="seconds"
+                    @on-change="handleChange"
+                    @on-pick-click="handlePickClick"></time-spinner>
+            </div>
+            <Confirm
+                @on-pick-clear="handlePickClear"
+                @on-pick-success="handlePickSuccess"></Confirm>
+        </div>
+    </div>
+</template>
+<script>
+    import TimeSpinner from '../base/time-spinner.vue';
+    import Confirm from '../base/confirm.vue';
+
+    import Mixin from './mixin';
+
+    const prefixCls = 'ivu-picker-panel';
+    const timePrefixCls = 'ivu-time-picker';
+
+    export default {
+        mixins: [Mixin],
+        components: { TimeSpinner, Confirm },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                timePrefixCls: timePrefixCls,
+                format: 'HH:mm:ss',
+                date: new Date(),
+                value: '',
+                hours: 0,
+                minutes: 0,
+                seconds: 0
+            };
+        },
+        computed: {
+            showSeconds () {
+                return (this.format || '').indexOf('ss') !== -1;
+            }
+        },
+        watch: {
+            value (newVal) {
+                if (!newVal) return;
+                newVal = new Date(newVal);
+                if (!isNaN(newVal)) {
+                    this.handleChange({
+                        hours: date.getHours(),
+                        minutes: date.getMinutes(),
+                        seconds: date.getSeconds()
+                    });
+                    this.$nextTick(_ => this.scrollTop());
+                }
+            }
+        },
+        methods: {
+            handleChange (date) {
+                if (date.hours !== undefined) {
+                    this.date.setHours(date.hours);
+                    this.hours = this.date.getHours();
+                }
+                if (date.minutes !== undefined) {
+                    this.date.setMinutes(date.minutes);
+                    this.minutes = this.date.getMinutes();
+                }
+                if (date.seconds !== undefined) {
+                    this.date.setSeconds(date.seconds);
+                    this.seconds = this.date.getSeconds();
+                }
+            },
+            scrollTop () {
+
+            }
+        }
+    };
+</script>

src/components/date-picker/picker.vue

@@ -200,7 +200,10 @@
                 return this.open === null ? this.visible : this.open;
             },
             iconType () {
-                return this.showClose ? 'ios-close' : 'ios-calendar-outline';
+                let icon = 'ios-calendar-outline';
+                if (this.type === 'time') icon = 'ios-clock-outline';
+                if (this.showClose) icon = 'ios-close';
+                return icon;
             },
             transition () {
                 if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
@@ -341,6 +344,12 @@
                     this.picker.selectionMode = this.selectionMode;
                     if (this.format) this.picker.format = this.format;
 
+                    // TimePicker
+                    if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
+                    if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
+                    if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
+                    if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
+
                     const options = this.options;
                     for (const option in options) {
                         this.picker[option] = options[option];

src/components/date-picker/picker/time-picker.js

@@ -0,0 +1,39 @@
+import Picker from '../picker.vue';
+import TimePanel from '../panel/time.vue';
+
+export default {
+    mixins: [Picker],
+    props: {
+        value: {},
+        disabledHours: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        disabledMinutes: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        disabledSeconds: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        hideDisabledOptions: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            type: 'time'
+        };
+    },
+    created () {
+        this.panel = TimePanel;
+    }
+};

src/components/layout/row.vue

@@ -34,8 +34,8 @@
         computed: {
             classes () {
                 return [
-                    `${prefixCls}`,
                     {
+                        [`${prefixCls}`]: !this.type,
                         [`${prefixCls}-${this.type}`]: !!this.type,
                         [`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
                         [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,

src/components/time-picker/index.js

@@ -0,0 +1,2 @@
+import TimePicker from '../date-picker/picker/time-picker';
+export default TimePicker;