@v2coding/ui 0.1.7 → 0.1.8

package/src/components/minimize/minimize.vue

@@ -1,342 +0,0 @@
-<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: 'ui-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

@@ -1,43 +0,0 @@
-<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/page/search-page.vue

@@ -1,202 +0,0 @@
-<template>
-  <document-title :title="title">
-    <multipane class="router-search-page" >
-      <div class="page-search-conditions" :class="{collapse}" :style="searchConditionsStyle">
-        <div v-show="!collapse" class="search-content">
-          <slot name="search"></slot>
-        </div>
-        <div class="indicator" @click="toggleCollapse"></div>
-      </div>
-      <multipane-resizer v-show="!collapse"/>
-      <div class="page-search-content" :class="{'page-content-direction-row': direction === 'row'}">
-        <slot></slot>
-      </div>
-    </multipane>
-  </document-title>
-</template>
-
-<script>
-  import {Multipane, MultipaneResizer} from 'vue-multipane';
-  import DocumentTitle from '../document-title';
-
-  export default {
-    name: 'ui-search-page',
-    components: {
-      Multipane,
-      MultipaneResizer,
-      DocumentTitle,
-    },
-    props: {
-      value: {
-        type: String,
-        default: '360px',
-      },
-      min: {
-        type: String,
-        default: '200px',
-      },
-      max: {
-        type: String,
-        default: '600px',
-      },
-      direction: {
-        type: String,
-        validator: (val) => ['row', 'column'].includes(val),
-        default: 'column',
-      },
-    },
-    data() {
-      return {
-        collapse: false,
-      }
-    },
-    computed: {
-      title() {
-        return this.$route.meta.name || '';
-      },
-      searchConditionsStyle() {
-        let width = this.value;
-        let min = this.min;
-        if (this.collapse) {
-          min = 0;
-          width = 0;
-        }
-        return {
-          width: width,
-          minWidth: min,
-          maxWidth: this.max,
-        };
-      },
-    },
-    methods: {
-      toggleCollapse() {
-        this.collapse = !this.collapse;
-      },
-    },
-  };
-</script>
-
-<style lang="scss">
-
-  .router-search-page {
-    height: 100%;
-
-    .page-search-conditions {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-
-      .search-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .indicator {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-        width: 14px;
-        height: 36px;
-        opacity: 0.3;
-        background-color: #ccc;
-        transition-duration: 200ms;
-        transition-property: background-color, opacity;
-        transition-timing-function: ease-in-out;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        border-radius: 4px 0 0 4px;
-        cursor: pointer;
-
-        &:hover {
-          opacity: 1;
-          background-color: var(--color-primary);
-        }
-
-        &:hover:before {
-          transform: rotate(24deg);
-        }
-        &:hover:after {
-          transform: rotate(-24deg);
-        }
-
-        &::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;
-        }
-      }
-
-      &.collapse {
-        z-index: 2;
-
-        .indicator {
-          border-radius: 0 4px 4px 0;
-          right: -14px;
-
-          &:hover:before {
-            transform: rotate(-24deg);
-          }
-          &:hover:after {
-            transform: rotate(24deg);
-          }
-        }
-      }
-    }
-
-    .page-search-content {
-      flex: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
-
-      &.page-search-content-direction-row {
-        flex-direction: row;
-      }
-    }
-
-    &.layout-v > .multipane-resizer {
-      margin: 0;
-      left: 0;
-      position: relative;
-
-      &.collapse {
-        display: none;
-      }
-
-      &:before {
-        display: block;
-        content: "";
-        width: 3px;
-        height: 40px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        border-left: 1px solid #ccc;
-        border-right: 1px solid #ccc;
-      }
-
-      &:hover {
-        &:before {
-          border-color: #999;
-        }
-      }
-    }
-  }
-</style>

package/src/components/provider/provider.vue

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