@v2coding/ui 0.1.0

package/src/components/minimize/index.vue

@@ -0,0 +1,342 @@
+<template>
+  <div :class="['minimize', direction, theme, {collapse: value, hover}]" @click="handleToggle">
+    <div class="line"></div>
+    <div class="indicator">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'minimize',
+  props: {
+    direction: {
+      validator: (val) => ['top', 'right', 'bottom', 'left'].indexOf(val) !== -1,
+    },
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    theme: String,
+  },
+  data() {
+    return {
+      hover: false,
+    };
+  },
+  computed: {
+    isVertical() {
+      return ['left', 'right'].includes(this.direction);
+    },
+  },
+  watch: {
+    value (v) {
+      this.doCollapse(v);
+    },
+  },
+  mounted() {
+    this.init();
+    this.doCollapse(this.value);
+  },
+  beforeDestroy() {
+    const parent = this.$el.parentElement;
+    parent && parent.removeEventListener('mouseenter', this.onMouseEnter);
+    parent && parent.removeEventListener('mouseleave', this.onMouseLeave);
+  },
+  methods: {
+    init() {
+      const parent = this.$el.parentElement;
+      const style = parent.style;
+      // init style
+      style.position = 'relative';
+      style.transitionProperty = 'width, height';
+      style.transitionDuration = '300ms';
+      style.transitionTimingFunction = 'ease-in-out';
+      // init mouse event
+      parent.addEventListener('mouseenter', this.onMouseEnter);
+      parent.addEventListener('mouseleave', this.onMouseLeave);
+    },
+    onMouseEnter() {
+      this.hover = true;
+    },
+    onMouseLeave() {
+      this.hover = false;
+    },
+    handleToggle() {
+      this.$emit('input', !this.value);
+      this.$emit('change', !this.value);
+    },
+    doCollapse(collapse) {
+      const parent = this.$el.parentElement;
+      const style = parent.style;
+      if (collapse) { // 收起
+        if (this.isVertical) {
+          parent.childNodes.forEach((node) => {
+            if (node !== this.$el) {
+              node.style && node.style.setProperty('transform', 'scaleX(0)');
+            }
+          });
+          style && style.setProperty('width', '0');
+        } else {
+          parent.childNodes.forEach((node) => {
+            if (node !== this.$el) {
+              node.style && node.style.setProperty('transform', 'scaleY(0)');
+            }
+          });
+          style && style.setProperty('height', '0');
+        }
+      } else { // 展开
+        if (this.isVertical) {
+          style && style.removeProperty('width');
+        } else {
+          style && style.removeProperty('height');
+        }
+        parent.childNodes.forEach((node) => {
+          if (node !== this.$el && node.style) {
+            node.style && node.style.removeProperty('transform');
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@visibleWidth: 14px;
+@indicatorWidth: 36px;
+
+.minimize {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .line {
+    position: absolute;
+    background-color: #ccc;
+    transition-duration: 200ms;
+    transition-property: background-color, width, height;
+    transition-timing-function: ease-in-out;
+  }
+  .indicator {
+    opacity: 0.6;
+    background-color: #ccc;
+    transition-duration: 200ms;
+    transition-property: background-color, opacity;
+    transition-timing-function: ease-in-out;
+  }
+  &.hover .indicator {
+    opacity: 1;
+  }
+  &.top,
+  &.bottom {
+    left: 0;
+    right: 0;
+    height: @visibleWidth;
+    flex-direction: column;
+    .line {
+      height: 1px;
+      width: 100%;
+    }
+    .indicator {
+      width: @indicatorWidth;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: row;
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        position: relative;
+        width: 10px;
+        height: 2px;
+        background-color: #fff;
+        transition: all 300ms ease-in-out;
+      }
+      &::before {
+        left: 1px;
+      }
+      &::after {
+        right: 1px;
+      }
+    }
+    &:hover {
+      .line {
+        height: 2px;
+        background-color: #3da8f5;
+      }
+      .indicator {
+        opacity: 1;
+        background-color: #3da8f5;
+      }
+    }
+  }
+  &.left,
+  &.right {
+    width: @visibleWidth;
+    top: 0;
+    bottom: 0;
+    flex-direction: row;
+    .line {
+      width: 1px;
+      height: 100%;
+    }
+    .indicator {
+      width: 100%;
+      height: @indicatorWidth;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        position: relative;
+        width: 2px;
+        height: 10px;
+        background-color: #fff;
+        transition: all 300ms ease-in-out;
+      }
+      &::before {
+        bottom: -1px;
+      }
+      &::after {
+        top: -1px;
+      }
+    }
+    &:hover {
+      .line {
+        width: 2px;
+        background-color: #3da8f5;
+      }
+      .indicator {
+        opacity: 1;
+        background-color: #3da8f5;
+      }
+    }
+  }
+  &.top {
+    bottom: -(@visibleWidth);
+    .line {
+      top: 0;
+    }
+    .indicator {
+      border-radius: 0 0 4px 4px;
+    }
+    &:hover {
+      .indicator::before {
+        transform: rotate(-24deg);
+      }
+      .indicator::after {
+        transform: rotate(24deg);
+      }
+    }
+    &.collapse:hover {
+      .indicator {
+        opacity: 1;
+
+        &::before {
+          transform: rotate(24deg);
+        }
+
+        &::after {
+          transform: rotate(-24deg);
+        }
+      }
+    }
+  }
+  &.right {
+    left: -(@visibleWidth);
+    .line {
+      right: 0;
+    }
+    .indicator {
+      border-radius: 4px 0 0 4px;
+    }
+    &:hover {
+      .indicator::before {
+        transform: rotate(-24deg);
+      }
+      .indicator::after {
+        transform: rotate(24deg);
+      }
+    }
+    &.collapse {
+      .indicator {
+        opacity: 1;
+
+        &::before {
+          transform: rotate(24deg);
+        }
+
+        &::after {
+          transform: rotate(-24deg);
+        }
+      }
+    }
+  }
+  &.bottom {
+    top: -(@visibleWidth);
+    .line {
+      bottom: 0;
+    }
+    .indicator {
+      border-radius: 4px 4px 0 0;
+    }
+    &:hover {
+      .indicator::before {
+        transform: rotate(24deg);
+      }
+      .indicator::after {
+        transform: rotate(-24deg);
+      }
+    }
+    &.collapse {
+      .indicator {
+        opacity: 1;
+
+        &::before {
+          transform: rotate(-24deg);
+        }
+
+        &::after {
+          transform: rotate(24deg);
+        }
+      }
+    }
+  }
+  &.left {
+    right: -(@visibleWidth);
+    .line {
+      left: 0;
+    }
+    .indicator {
+      border-radius: 0 4px 4px 0;
+    }
+    &:hover {
+      .indicator::before {
+        transform: rotate(24deg);
+      }
+      .indicator::after {
+        transform: rotate(-24deg);
+      }
+    }
+    &.collapse {
+      .indicator {
+        opacity: 1;
+
+        &::before {
+          transform: rotate(-24deg);
+        }
+        &::after {
+          transform: rotate(24deg);
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/page/page.vue

@@ -0,0 +1,43 @@
+<template>
+  <document-title :title="titleReal">
+    <div class="ui-page" :class="{'ui-page-direction-row': direction === 'row'}">
+      <slot></slot>
+    </div>
+  </document-title>
+</template>
+<script>
+  import DocumentTitle from '../document-title';
+
+  export default {
+    name: 'ui-page',
+    inheritAttrs: false,
+    components: {DocumentTitle},
+    props: {
+      direction: {
+        type: String,
+        validator: (val) => ['row', 'column'].includes(val),
+        default: 'column',
+      },
+      title: {
+        type: String,
+      },
+    },
+    computed: {
+      titleReal() {
+        return this.title || this.$route.meta.name || '';
+      },
+    },
+  };
+</script>
+<style lang="less">
+  .ui-page {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    position: relative;
+
+    &.ui-page-direction-row {
+      flex-direction: row;
+    }
+  }
+</style>

package/src/components/provider/provider.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="main">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'UiProvider',
+  };
+</script>
+
+<style scoped>
+
+</style>