evui 2.1.0 → 2.1.3

package/src/components/toggle/toggle.vue

@@ -5,34 +5,32 @@
     class="ev-toggle"
     @click="changeToggle"
   >
-    <div
+    <span
       v-if="toggleType === 'slide'"
       v-show="toggleText.offText"
       ref="offTextRef"
       :style="{
         fontSize: toggleFontSize + 'px',
-        marginRight: toggleObj.height/5 + 'px',
       }"
       class="ev-toggle-offText-slide"
     >
       {{ toggleText.offText }}
-    </div>
-    <div
+    </span>
+    <span
       v-if="toggleType === 'slide'"
       v-show="toggleText.onText"
       ref="onTextRef"
       :style="{
         fontSize: toggleFontSize + 'px',
-        marginLeft: toggleObj.height/5 + 'px',
       }"
       class="ev-toggle-onText-slide"
     >
       {{ toggleText.onText }}
-    </div>
+    </span>
     <div
       v-show="isShow"
       v-if="toggleType === 'slide'"
-      :style="setToggleButtonStyle()"
+      ref="toggleSwitch"
       class="ev-toggle-switch"
     />
     <div
@@ -55,7 +53,7 @@
     >
       {{ toggleText.offText }}
     </div>
-    <div
+    <span
       v-if="toggleType === 'button'"
       ref="onTextRef"
       :style="{
@@ -64,8 +62,8 @@
       class="ev-toggle-onText-button"
     >
       {{ toggleText.onText }}
-    </div>
-    <div
+    </span>
+    <span
       v-if="toggleType === 'button'"
       ref="offTextRef"
       :style="{
@@ -74,14 +72,12 @@
       class="ev-toggle-offText-button"
     >
       {{ toggleText.offText }}
-    </div>
+    </span>
   </div>
 </template>
 
 <script>
   export default {
-    model: {
-    },
     props: {
       value: {
         type: Boolean,
@@ -128,17 +124,24 @@
     computed: {
     },
     watch: {
+      value(val) {
+        this.dataToggleOn = val;
+      },
       toggleText: {
-        handler() {
-          this.setToggleStyle();
+        async handler() {
+          await this.setToggleStyle();
+          await this.setToggleButtonStyle();
         },
         deep: true,
       },
+      dataToggleOn() {
+        this.setToggleButtonStyle();
+      },
     },
     mounted() {
-      this.setToggleStyle();
-
-      setTimeout(() => {
+      setTimeout(async () => {
+        await this.setToggleStyle();
+        await this.setToggleButtonStyle();
         this.isShow = true;
       });
     },
@@ -146,34 +149,29 @@
       setToggleStyle() {
         if (this.toggleText.onText || this.toggleText.offText) {
           let maxTextWidth = 0;
-          const onTextScrollWidth = this.$refs.onTextRef.clientWidth;
-          const offTextScrollWidth = this.$refs.offTextRef.clientWidth;
-          if (this.toggleType === 'slide' || this.toggleType === 'button') {
-            if (offTextScrollWidth < onTextScrollWidth) {
-              maxTextWidth = onTextScrollWidth;
-            } else {
-              maxTextWidth = offTextScrollWidth;
-            }
-          } else if (this.toggleType === 'tab') {
-            if (offTextScrollWidth < onTextScrollWidth) {
-              maxTextWidth = onTextScrollWidth * 2;
+          const onTextWidth = Math.ceil(this.$refs.onTextRef.getBoundingClientRect().width);
+          const offTextWidth = Math.ceil(this.$refs.offTextRef.getBoundingClientRect().width);
+          const wrapperWidth = Math.ceil(this.$refs.toggleRef.getBoundingClientRect().width);
+          if (this.toggleType === 'slide') {
+            maxTextWidth = offTextWidth < onTextWidth ? onTextWidth : offTextWidth;
+            if (wrapperWidth - maxTextWidth !== 60) {
+              if (maxTextWidth < this.toggleObj.width - 60) {
+                this.maxWidth = this.toggleObj.width;
+              } else {
+                this.maxWidth = maxTextWidth + 60;
+              }
             } else {
-              maxTextWidth = offTextScrollWidth * 2;
+              this.maxWidth = wrapperWidth;
             }
           }
-          if (maxTextWidth < this.toggleObj.width) {
-            this.maxWidth = this.toggleObj.width;
-          } else {
-            this.maxWidth = maxTextWidth;
-          }
         } else {
           this.maxWidth = this.toggleObj.width;
-        } // 최대 너비 구하기
+        }
 
         let toggleWrapStyle = {};
         if (this.toggleType === 'tab') {
           toggleWrapStyle = {
-            width: `${this.maxWidth}px`,
+            width: 'auto',
             height: `${this.toggleObj.height}px`,
             lineHeight: `${this.toggleObj.height}px`,
             borderRadius: '4px',
@@ -196,17 +194,17 @@
           }
         } else if (this.toggleType === 'button') {
           toggleWrapStyle = {
-            width: `${this.maxWidth}px`,
+            width: 'auto',
             height: `${this.toggleObj.height}px`,
             lineHeight: `${this.toggleObj.height}px`,
             borderRadius: '4px',
           };
-        } // type별로 style setting
+        }
 
-        for (let ix = 0, ixLen = Object.keys(toggleWrapStyle).length; ix < ixLen; ix++) {
-          this.$refs.toggleRef.style[Object.keys(toggleWrapStyle)[ix]]
-            = toggleWrapStyle[Object.keys(toggleWrapStyle)[ix]];
-        } // style 속성 부여
+        const keys = Object.keys(toggleWrapStyle);
+        for (let ix = 0, ixLen = keys.length; ix < ixLen; ix++) {
+          this.$refs.toggleRef.style[keys[ix]] = toggleWrapStyle[keys[ix]];
+        }
       },
       changeToggle() {
         this.dataToggleOn = !this.dataToggleOn;
@@ -219,146 +217,187 @@
             toggleButtonStyle = {
               width: `${this.toggleObj.height - 4}px`,
               height: `${this.toggleObj.height - 4}px`,
-              left: this.dataToggleOn ? `${(this.maxWidth - this.toggleObj.height) + 1}px` : '1px',
+              top: '2px',
+              left: this.dataToggleOn ? 'auto' : '2px',
+              right: this.dataToggleOn ? '2px' : '0',
             };
           } else {
             toggleButtonStyle = {
-              width: `${this.toggleObj.height - 4}px`,
-              height: `${this.toggleObj.height - 4}px`,
-              left: this.dataToggleOn ? `${(this.maxWidth - this.toggleObj.height) + 1}px` : '1px',
+              width: `${this.toggleObj.height + 2}px`,
+              height: `${this.toggleObj.height + 2}px`,
+              top: '-1px',
+              left: this.dataToggleOn ? 'auto' : '-1px',
+              right: this.dataToggleOn ? '-1px' : '0',
               borderRadius: '50%',
             };
           }
         }
-        return toggleButtonStyle;
+        const keys = Object.keys(toggleButtonStyle);
+        for (let ix = 0, ixLen = keys.length; ix < ixLen; ix++) {
+          this.$refs.toggleSwitch.style[keys[ix]] = toggleButtonStyle[keys[ix]];
+        }
       },
     },
   };
 </script>
 
-<style scoped>
+<style lang="scss">
+  @import '~@/styles/default';
+
   .ev-toggle.slide {
     display: inline-block;
     position: relative;
     vertical-align: middle;
-    border: 1px solid #cccccc;
-    background-color: #cccccc;
+    background-color: #CCCCCC;
     color: #000000;
     transition: all .2s ease-in-out;
     user-select: none;
     cursor: pointer;
+
+    &.active {
+      color: $color-white;
+
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+      }
+    }
   }
-  .ev-toggle.slide.active {
-    border: 1px solid #2d8cf0;
-    background-color: #2d8cf0;
-    color: #ffffff;
-  }
+
   .ev-toggle.tab {
-    display: inline-block;
+    display: inline-flex;
     position: relative;
-    border: 1px solid #2d8cf0;
     user-select: none;
     cursor: pointer;
+
+    @include evThemify() {
+      border: 1px solid evThemed('color-primary');
+    }
   }
+
   .ev-toggle.button {
     display: inline-block;
     position: relative;
-    border: 1px solid #2d8cf0;
-    background-color: #2d8cf0;
-    color: #ffffff;
+    border: 0;
+    padding: 0 10px 0 10px;
+    color: $color-white;
     user-select: none;
     cursor: pointer;
+
+    @include evThemify() {
+      background-color: evThemed('color-primary');
+    }
   }
+
   .ev-toggle-switch {
     position: absolute;
-    top: 1px;
-    background-color: #ffffff;
-    transition: all .2s ease-in-out;
+    background-color: $color-white;
+    transition-duration: 0.5s;
     cursor: pointer;
-    content: '';
-  }
-  .active > .ev-toggle-switch {
-    position: absolute;
-    top: 1px;
-    background-color: #ffffff;
-    transition: all .2s ease-in-out;
-    cursor: pointer;
-    content: '';
+    box-shadow: 0 0 12px 0 rgba($color-black, 0.2);
+    transition: left $animate-base;
   }
+
   .ev-toggle-offText-slide {
     display: inline-block;
     height: 0;
+    margin-right: 10px;
     visibility: visible;
     float: right;
   }
-  .active > .ev-toggle-offText-slide {
-    visibility: hidden;
-  }
+
   .ev-toggle-onText-slide {
     height: 0;
+    margin-left: 10px;
     visibility: hidden;
   }
-  .active > .ev-toggle-onText-slide {
-    display: inline-block;
-    visibility: visible;
-    float: left;
-  }
+
   .ev-toggle-offText-tab {
     display: inline-block;
     float: left;
-    width: 50%;
+    width: auto;
     height: 100%;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
-    background-color: #f7f7f7;
-    color: #000000;
+    background-color: $color-gray5;
+    padding: 0 10px 0 10px;
+    color: $color-black;
     text-align: center;
     vertical-align: middle;
     user-select: none;
     transition: all .2s ease-in-out;
   }
-  .active > .ev-toggle-offText-tab {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    background-color: #2d8cf0;
-    color: #ffffff;
-  }
+
   .ev-toggle-onText-tab {
     display: inline-block;
     float: left;
-    width: 50%;
+    width: auto;
     height: 100%;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    background-color: #2d8cf0;
-    color: #ffffff;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 0 10px 0 10px;
+    color: $color-white;
     text-align: center;
     vertical-align: middle;
     user-select: none;
     transition: all .2s ease-in-out;
+
+    @include evThemify() {
+      background-color: evThemed('color-primary');
+    }
   }
-  .active > .ev-toggle-onText-tab {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    background-color: #f7f7f7;
-    color: #000000;
-  }
+
   .ev-toggle-onText-button {
     display: block;
-    height: 0px;
+    left: 0;
+    right: 0;
+    height: 0;
     visibility: hidden;
   }
-  .active > .ev-toggle-onText-button {
-    text-align: center;
-    visibility: visible;
-  }
+
   .ev-toggle-offText-button {
     display: block;
-    height: 0px;
+    left: 0;
+    right: 0;
+    height: 0;
     text-align: center;
     visibility: visible;
   }
-  .active > .ev-toggle-offText-button {
-    visibility: hidden;
+
+  .active {
+    .ev-toggle-offText-slide {
+      visibility: hidden;
+    }
+
+    .ev-toggle-onText-slide {
+      display: inline-block;
+      visibility: visible;
+      float: left;
+    }
+
+    .ev-toggle-offText-tab {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      color: $color-white;
+
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+      }
+    }
+
+    .ev-toggle-onText-tab {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      background-color: $color-gray5;
+      color: $color-black;
+    }
+
+    .ev-toggle-onText-button {
+      text-align: center;
+      visibility: visible;
+    }
+
+    .ev-toggle-offText-button {
+      visibility: hidden;
+    }
   }
 </style>

package/src/components/tree/index.js

@@ -1,7 +1,3 @@
-import TreeTable from './tree.table';
-import util from './tree.util';
+import Tree from './tree';
 
-export {
-  TreeTable,
-  util,
-};
+export default Tree;

package/src/components/tree/render.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'RenderCell',
+  functional: true,
+  props: {
+    render: Function,
+    data: Object,
+    node: Array,
+  },
+  render: (h, ctx) => {
+    const params = {
+      root: ctx.props.node[0],
+      node: ctx.props.node[1],
+      data: ctx.props.data,
+    };
+    return ctx.props.render(h, params);
+  },
+};

package/src/components/tree/tree-node.vue

@@ -0,0 +1,214 @@
+<template>
+  <ul :class="classes">
+    <li>
+      <span
+        :class="[`${prefixCls}-arrow`, {[`${prefixCls}-arrow-disabled`]: data.disabled}]"
+        @click="handleExpand"
+      >
+        <ev-icon v-if="showArrow" :cls="arrowClasses"/>
+        <ev-loading-mask v-if="showLoading"/>
+      </span>
+      <div :class="selectedCls">
+        <ev-checkbox
+          v-if="useCheckbox"
+          v-model="data.checked"
+          type="square"
+          size="small"
+          after-type="check"
+          :indeterminate.sync="data.indeterminate"
+          :disabled="data.disabled || data.disableCheckbox"
+          @on-click="handleCheck"
+        />
+        <Render v-if="data.render" :render="data.render" :data="data" :node="node"/>
+        <Render v-else-if="isParentRender" :render="parentRender" :data="data" :node="node"/>
+        <template v-else>
+          <ev-icon
+            v-if="data.icon"
+            :class="`${prefixCls}-icon`"
+            :cls="data.icon"
+          />
+          <span
+            :class="titleClasses"
+            @contextmenu="handleContextmenu"
+            @click="handleSelect"
+            @dblclick="handleDblclick"
+          >
+            {{ data[titleKey] }}
+          </span>
+        </template>
+      </div>
+      <tree-node
+        v-for="(item, i) in children"
+        v-if="data.expand"
+        :key="i"
+        :data="item"
+        :use-checkbox="useCheckbox"
+        :children-key="childrenKey"
+        :title-key="titleKey"
+        :expand-icon="expandIcon"
+        :collapse-icon="collapseIcon"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+import { findComponentUpward } from '@/common/utils.tree';
+import Emitter from '@/common/emitter';
+import Render from './render';
+
+const prefixCls = 'ev-tree';
+
+export default {
+  name: 'TreeNode',
+  components: {
+    Render,
+  },
+  mixins: [Emitter],
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    childrenKey: {
+      type: String,
+      default: 'children',
+    },
+    useCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+    titleKey: {
+      type: String,
+      default: 'title',
+    },
+    expandIcon: {
+      type: String,
+      default: '',
+    },
+    collapseIcon: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      prefixCls,
+    };
+  },
+  computed: {
+    classes() {
+      return [
+        `${prefixCls}-children`,
+      ];
+    },
+    selectedCls() {
+      return [
+        `${prefixCls}-node`,
+        {
+          [`${prefixCls}-node-selected`]: this.data.selected,
+        },
+      ];
+    },
+    arrowClasses() {
+      // return this.data.expand ? 'ei-arrow-down' : 'ei-arrow-right';
+      const expandIcon = this.expandIcon ? this.expandIcon : 'ei-arrow-right';
+      const collapseIcon = this.expandIcon ? this.collapseIcon : 'ei-arrow-down';
+      return this.data.expand ? collapseIcon : expandIcon;
+    },
+    titleClasses() {
+      return [
+        `${prefixCls}-title`,
+        {
+          [`${prefixCls}-title-selected`]: this.data.selected,
+        },
+      ];
+    },
+    showArrow() {
+      return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading);
+    },
+    showLoading() {
+      return 'loading' in this.data && this.data.loading;
+    },
+    isParentRender() {
+      const Tree = findComponentUpward(this, 'Tree');
+      return Tree && Tree.render;
+    },
+    parentRender() {
+      const Tree = findComponentUpward(this, 'Tree');
+      if (Tree && Tree.render) {
+        return Tree.render;
+      }
+      return null;
+    },
+    node() {
+      const Tree = findComponentUpward(this, 'Tree');
+      if (Tree) {
+        return [Tree.flatState, Tree.flatState.find(item => item.nodeKey === this.data.nodeKey)];
+      }
+      return [];
+    },
+    children() {
+      return this.data[this.childrenKey];
+    },
+  },
+  methods: {
+    handleExpand() {
+      const item = this.data;
+      if (item.disabled) {
+        return;
+      }
+      // async loading
+      if (!item[this.childrenKey].length) {
+        const tree = findComponentUpward(this, 'Tree');
+        if (tree && tree.loadData) {
+          this.$set(this.data, 'loading', true);
+          tree.loadData(item, (children) => {
+            this.$set(this.data, 'loading', false);
+            if (children.length) {
+              this.$set(this.data, this.childrenKey, children);
+              this.$nextTick(() => this.handleExpand());
+            }
+          });
+          return;
+        }
+      }
+      if (item[this.childrenKey] && item[this.childrenKey].length) {
+        this.$set(this.data, 'expand', !this.data.expand);
+        this.dispatch('Tree', 'toggle-expand', this.data);
+      }
+    },
+    handleSelect() {
+      if (this.data.disabled) {
+        return;
+      }
+      this.dispatch('Tree', 'on-selected', this.data.nodeKey);
+    },
+    handleDblclick() {
+      if (this.data.disabled) {
+        return;
+      }
+      this.dispatch('Tree', 'on-dbl-click', this.data.nodeKey);
+    },
+    handleCheck() {
+      if (this.data.disabled) {
+        return;
+      }
+      const changes = {
+        checked: this.data.checked,
+        nodeKey: this.data.nodeKey,
+      };
+      this.dispatch('Tree', 'on-click-checkbox', changes);
+    },
+    handleContextmenu() {
+      this.dispatch('Tree', 'on-context-menu', this.data.nodeKey);
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>