From cd397a6f46f0c835f994c07dafa65377913e42a5 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Sat, 30 Jun 2018 16:06:25 +0800
Subject: [PATCH] Split code format

---
 examples/routers/split.vue       | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------
 src/components/split/split.vue   | 300 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/split/trigger.vue |  60 ++++++++++++++++++++++++++++++------------------------------
 3 files changed, 247 insertions(+), 238 deletions(-)

diff --git a/examples/routers/split.vue b/examples/routers/split.vue
index 4649a50..106327a 100644
--- a/examples/routers/split.vue
+++ b/examples/routers/split.vue
@@ -1,74 +1,75 @@
 <template>
-  <div class="split-pane-page-wrapper">
-    <Split v-model="offset" @on-moving="handleMoving">
-      <div slot="left" class="pane left-pane">
-        <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
-          <div slot="top" class="pane top-pane"></div>
-          <div slot="bottom" class="pane bottom-pane"></div>
-          <div slot="trigger" class="custom-trigger">
-            <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
-          </div>
+    <div class="split-pane-page-wrapper">
+        <Split v-model="offset" @on-moving="handleMoving">
+            <div slot="left" class="pane left-pane">
+                <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
+                    <div slot="top" class="pane top-pane"></div>
+                    <div slot="bottom" class="pane bottom-pane"></div>
+                    <div slot="trigger" class="custom-trigger">
+                        <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
+                    </div>
+                </Split>
+            </div>
+            <div slot="right" class="pane right-pane"></div>
         </Split>
-      </div>
-      <div slot="right" class="pane right-pane"></div>
-    </Split>
-  </div>
+    </div>
 </template>
 
 <script>
-export default {
-  name: 'split_pane_page',
-  data () {
-    return {
-      offset: 0.6,
-      offsetVertical: '250px'
+    export default {
+        name: 'split_pane_page',
+        data () {
+            return {
+                offset: 0.6,
+                offsetVertical: '250px'
+            }
+        },
+        methods: {
+            handleMoving (e) {
+                console.log(e.atMin, e.atMax)
+            }
+        }
     }
-  },
-  methods: {
-    handleMoving (e) {
-      console.log(e.atMin, e.atMax)
-    }
-  }
-}
 </script>
 
 <style lang="less">
-.center-middle{
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.split-pane-page-wrapper{
-  height: 600px;
-  .pane{
-    width: 100%;
-    height: 100%;
-    &.left-pane{
-      background: sandybrown;
-    }
-    &.right-pane{
-      background: palevioletred;
-    }
-    &.top-pane{
-      background: sandybrown;
+    .center-middle {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
     }
-    &.bottom-pane{
-      background: palevioletred;
-    }
-  }
-  .custom-trigger{
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: #fff;
-    position: absolute;
-    .center-middle;
-    box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
-    cursor: row-resize;
-    i.trigger-icon{
-      .center-middle;
+
+    .split-pane-page-wrapper {
+        height: 600px;
+        .pane {
+            width: 100%;
+            height: 100%;
+            &.left-pane {
+                background: sandybrown;
+            }
+            &.right-pane {
+                background: palevioletred;
+            }
+            &.top-pane {
+                background: sandybrown;
+            }
+            &.bottom-pane {
+                background: palevioletred;
+            }
+        }
+        .custom-trigger {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #fff;
+            position: absolute;
+            .center-middle;
+            box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
+            cursor: row-resize;
+            i.trigger-icon {
+                .center-middle;
+            }
+        }
     }
-  }
-}
 </style>
diff --git a/src/components/split/split.vue b/src/components/split/split.vue
index 4f97632..7547ccd 100644
--- a/src/components/split/split.vue
+++ b/src/components/split/split.vue
@@ -1,155 +1,163 @@
 <template>
-  <div ref="outerWrapper" :class="wrapperClasses">
-    <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
-      <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
-      <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
-        <slot name="trigger">
-          <trigger mode="vertical"/>
-        </slot>
-      </div>
-      <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
+    <div ref="outerWrapper" :class="wrapperClasses">
+        <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
+            <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
+                <slot name="left"/>
+            </div>
+            <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
+                <slot name="trigger">
+                    <trigger mode="vertical"/>
+                </slot>
+            </div>
+            <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
+                <slot name="right"/>
+            </div>
+        </div>
+        <div v-else :class="`${prefix}-vertical`">
+            <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']">
+                <slot name="top"/>
+            </div>
+            <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
+                <slot name="trigger">
+                    <trigger mode="horizontal"/>
+                </slot>
+            </div>
+            <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
+                <slot name="bottom"/>
+            </div>
+        </div>
     </div>
-    <div v-else :class="`${prefix}-vertical`">
-      <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
-     <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
-        <slot name="trigger">
-          <trigger mode="horizontal"/>
-        </slot>
-      </div>
-      <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
-    </div>
-  </div>
 </template>
 
 <script>
-import { oneOf } from '../../utils/assist';
-import { on, off } from '../../utils/dom';
-import Trigger from './trigger.vue';
-export default {
-    name: 'Split',
-    components: {
-        Trigger
-    },
-    props: {
-        value: {
-            type: [Number, String],
-            default: 0.5
-        },
-        mode: {
-            validator (value) {
-                return oneOf(value, ['horizontal', 'vertical']);
+    import {oneOf} from '../../utils/assist';
+    import {on, off} from '../../utils/dom';
+    import Trigger from './trigger.vue';
+    export default {
+        name: 'Split',
+        components: {
+            Trigger
+        },
+        props: {
+            value: {
+                type: [Number, String],
+                default: 0.5
             },
-            default: 'horizontal'
-        },
-        min: {
-            type: [Number, String],
-            default: '40px'
-        },
-        max: {
-            type: [Number, String],
-            default: '40px'
-        }
-    },
-  /**
-   * Events
-   * @on-move-start
-   * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
-   * @on-move-end
-   */
-    data () {
-        return {
-            prefix: 'ivu-split',
-            offset: 0,
-            oldOffset: 0,
-            isMoving: false
-        };
-    },
-    computed: {
-        wrapperClasses () {
-            return [
-                `${this.prefix}-wrapper`,
-                this.isMoving ? 'no-select' : ''
-            ];
-        },
-        isHorizontal () {
-            return this.mode === 'horizontal';
-        },
-        anotherOffset () {
-            return 100 - this.offset;
-        },
-        valueIsPx () {
-            return typeof this.value === 'string';
-        },
-        offsetSize () {
-            return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
-        },
-        computedMin () {
-            return this.getComputedThresholdValue('min');
-        },
-        computedMax () {
-            return this.getComputedThresholdValue('max');
-        }
-    },
-    methods: {
-        px2percent (numerator, denominator) {
-            return parseFloat(numerator) / parseFloat(denominator);
-        },
-        getComputedThresholdValue (type) {
-            let size = this.$refs.outerWrapper[this.offsetSize];
-            if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
-            else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
-        },
-        getMin (value1, value2) {
-            if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
-            else return Math.min(value1, value2);
-        },
-        getMax (value1, value2) {
-            if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
-            else return Math.max(value1, value2);
-        },
-        getAnotherOffset (value) {
-            let res = 0;
-            if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
-            else res = 1 - value;
-            return res;
-        },
-        handleMove (e) {
-            let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
-            let offset = pageOffset - this.initOffset;
-            let outerWidth = this.$refs.outerWrapper[this.offsetSize];
-            let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
-            let anotherValue = this.getAnotherOffset(value);
-            if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
-            if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
-            e.atMin = this.value === this.computedMin;
-            e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
-            this.$emit('input', value);
-            this.$emit('on-moving', e);
-        },
-        handleUp () {
-            this.isMoving = false;
-            off(document, 'mousemove', this.handleMove);
-            off(document, 'mouseup', this.handleUp);
-            this.$emit('on-move-end');
+            mode: {
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                },
+                default: 'horizontal'
+            },
+            min: {
+                type: [Number, String],
+                default: '40px'
+            },
+            max: {
+                type: [Number, String],
+                default: '40px'
+            }
+        },
+        /**
+         * Events
+         * @on-move-start
+         * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
+         * @on-move-end
+         */
+        data () {
+            return {
+                prefix: 'ivu-split',
+                offset: 0,
+                oldOffset: 0,
+                isMoving: false
+            };
+        },
+        computed: {
+            wrapperClasses () {
+                return [
+                    `${this.prefix}-wrapper`,
+                    this.isMoving ? 'no-select' : ''
+                ];
+            },
+            isHorizontal () {
+                return this.mode === 'horizontal';
+            },
+            anotherOffset () {
+                return 100 - this.offset;
+            },
+            valueIsPx () {
+                return typeof this.value === 'string';
+            },
+            offsetSize () {
+                return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
+            },
+            computedMin () {
+                return this.getComputedThresholdValue('min');
+            },
+            computedMax () {
+                return this.getComputedThresholdValue('max');
+            }
         },
-        handleMousedown (e) {
-            this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
-            this.oldOffset = this.value;
-            this.isMoving = true;
-            on(document, 'mousemove', this.handleMove);
-            on(document, 'mouseup', this.handleUp);
-            this.$emit('on-move-start');
-        }
-    },
-    watch: {
-        value () {
-            this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+        methods: {
+            px2percent (numerator, denominator) {
+                return parseFloat(numerator) / parseFloat(denominator);
+            },
+            getComputedThresholdValue (type) {
+                let size = this.$refs.outerWrapper[this.offsetSize];
+                if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
+                else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
+            },
+            getMin (value1, value2) {
+                if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
+                else return Math.min(value1, value2);
+            },
+            getMax (value1, value2) {
+                if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
+                else return Math.max(value1, value2);
+            },
+            getAnotherOffset (value) {
+                let res = 0;
+                if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
+                else res = 1 - value;
+                return res;
+            },
+            handleMove (e) {
+                let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
+                let offset = pageOffset - this.initOffset;
+                let outerWidth = this.$refs.outerWrapper[this.offsetSize];
+                let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
+                let anotherValue = this.getAnotherOffset(value);
+                if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
+                if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
+                e.atMin = this.value === this.computedMin;
+                e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
+                this.$emit('input', value);
+                this.$emit('on-moving', e);
+            },
+            handleUp () {
+                this.isMoving = false;
+                off(document, 'mousemove', this.handleMove);
+                off(document, 'mouseup', this.handleUp);
+                this.$emit('on-move-end');
+            },
+            handleMousedown (e) {
+                this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
+                this.oldOffset = this.value;
+                this.isMoving = true;
+                on(document, 'mousemove', this.handleMove);
+                on(document, 'mouseup', this.handleUp);
+                this.$emit('on-move-start');
+            }
+        },
+        watch: {
+            value () {
+                this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+            }
+        },
+        mounted () {
+            this.$nextTick(() => {
+                this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+            });
         }
-    },
-    mounted () {
-        this.$nextTick(() => {
-            this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
-        });
-    }
-};
+    };
 </script>
diff --git a/src/components/split/trigger.vue b/src/components/split/trigger.vue
index 9666a16..2f69e1b 100644
--- a/src/components/split/trigger.vue
+++ b/src/components/split/trigger.vue
@@ -1,39 +1,39 @@
 <template>
-  <div :class="classes">
-    <div :class="barConClasses">
-      <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
+    <div :class="classes">
+        <div :class="barConClasses">
+            <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-export default {
-    name: 'Trigger',
-    props: {
-        mode: String
-    },
-    data () {
-        return {
-            prefix: 'ivu-split-trigger',
-            initOffset: 0
-        };
-    },
-    computed: {
-        isVertical () {
-            return this.mode === 'vertical';
+    export default {
+        name: 'Trigger',
+        props: {
+            mode: String
         },
-        classes () {
-            return [
-                this.prefix,
-                this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
-            ];
+        data () {
+            return {
+                prefix: 'ivu-split-trigger',
+                initOffset: 0
+            };
         },
-        barConClasses () {
-            return [
-                `${this.prefix}-bar-con`,
-                this.isVertical ? 'vertical' : 'horizontal'
-            ];
+        computed: {
+            isVertical () {
+                return this.mode === 'vertical';
+            },
+            classes () {
+                return [
+                    this.prefix,
+                    this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
+                ];
+            },
+            barConClasses () {
+                return [
+                    `${this.prefix}-bar-con`,
+                    this.isVertical ? 'vertical' : 'horizontal'
+                ];
+            }
         }
-    }
-};
+    };
 </script>
--
libgit2 0.21.4