@v2coding/ui 0.1.4 → 0.1.8

package/src/components/history/history.vue

@@ -1,361 +0,0 @@
-<template>
-  <div class="history" v-show="visible">
-    <scroll-view ref="menus" class="history-tabs">
-      <div
-        v-for="item in items"
-        :key="item.path"
-        :class="['history-menu', current === item.path ? 'is-active' : '']"
-        @click="onTabClick(item.path)"
-      >
-        <span class="ellipsis" :title="item.title">{{ item.title }}</span>
-        <i class="el-icon-close" @click.stop="onTabRemove(item.path)"></i>
-      </div>
-    </scroll-view>
-    <div class="contextmenu" :style="contextmenu">
-      <div
-        class="modal"
-        ref="modal"
-        :style="{ display: activeContextMenu ? 'block' : 'none' }"
-        @click="hideContextMenu"
-      ></div>
-      <el-dropdown
-        @command="contextmenuClose"
-        trigger="click"
-        ref="context"
-        placement="top-start"
-        class="history-dropdown"
-      >
-        <span></span>
-        <el-dropdown-menu
-          class="history-contextmenu"
-          slot="dropdown"
-          :visible-arrow="false"
-        >
-          <el-dropdown-item command="left">
-            <i class="el-icon-arrow-left"></i>
-            关闭左侧
-          </el-dropdown-item>
-          <el-dropdown-item command="right">
-            <i class="el-icon-arrow-right"></i>
-            关闭右侧
-          </el-dropdown-item>
-          <el-dropdown-item command="other">
-            <i class="el-icon-close"></i>
-            关闭其它
-          </el-dropdown-item>
-          <el-dropdown-item command="all">
-            <i class="el-icon-circle-close"></i>
-            全部关闭
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import ScrollView from '../scroll-view/scroll-view';
-
-export default {
-  name: "ui-history",
-  components: {ScrollView},
-  props: {
-    items: Array,
-    current: null,
-    visible: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      activeContextMenu: "",
-      contextmenu: {
-        width: "0px",
-        left: "0px",
-      },
-    };
-  },
-  watch: {
-    async current() {
-      if (!this.$refs.menus) {
-        return;
-      }
-      await this.$nextTick();
-      await this.$refs.menus.$nextTick();
-      this.$refs.menus.scrollToActiveItem();
-    },
-  },
-  mounted() {
-    document.addEventListener("contextmenu", this.onContextMenu);
-  },
-  beforeDestroy() {
-    document.removeEventListener("contextmenu", this.onContextMenu);
-  },
-  methods: {
-    showContextMenu() {
-      setTimeout(() => {
-        this.$refs.context.broadcast("ElDropdownMenu", "visible", true);
-      });
-    },
-    hideContextMenu() {
-      this.$refs.context.broadcast("ElDropdownMenu", "visible", false);
-      this.activeContextMenu = "";
-    },
-    onTabClick(path) {
-      this.$router.push({ path });
-    },
-    onTabRemove(path) {
-      this.$emit("remove-history", { type: "current", name: path });
-    },
-    onContextMenu(event) {
-      const container = this.$el.querySelector(".ui-scroll-view__nav");
-      const index = this.getChildContainIndex(container, event.target);
-      const rect = this.$el.getBoundingClientRect();
-      if (index !== -1) {
-        this.activeContextMenu = this.items[index]?.path;
-        this.contextmenu.left = `${event.clientX - rect.left}px`;
-        this.contextmenu.top = `${event.clientY - rect.top}px`;
-        this.showContextMenu();
-        event.preventDefault();
-        return false;
-      }
-      const modal = this.$el.querySelector(".modal");
-      if (event.target === modal) {
-        event.preventDefault();
-        return false;
-      }
-      return true;
-    },
-    contextmenuClose(command) {
-      this.$emit("remove-history", {
-        type: command,
-        name: this.activeContextMenu,
-      });
-      this.hideContextMenu();
-    },
-    getChildContainIndex(container, target) {
-      return Array.from(container.childNodes).findIndex((child) => {
-        return this.isContains(child, target);
-      });
-    },
-    isContains(container, target) {
-      if (container === target) {
-        return true;
-      }
-      const fn = (childNodes, _target) => {
-        return Array.from(childNodes).find((item) => {
-          const isEq = item === _target;
-          if (isEq) {
-            return true;
-          }
-          if (!item.childNodes.length) {
-            return false;
-          }
-          return fn(item.childNodes, _target);
-        });
-      };
-      return fn(container.childNodes, target);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.history {
-  flex: none;
-  height: 40px;
-  position: relative;
-  margin: 10px 0 0;
-
-  .history-tabs.ui-scroll-view__nav-wrap {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    align-items: flex-end;
-
-    .ui-scroll-view__nav-scroll {
-      flex: 1;
-    }
-
-    .ui-scroll-view__nav-control {
-      width: 20px;
-      height: 30px;
-
-      &.is-disabled {
-        .menu-nav-control {
-          &::before,
-          &::after {
-            background: var(--color-primary-light-3);
-          }
-        }
-      }
-    }
-
-    .ui-scroll-view__nav {
-      align-items: flex-end;
-    }
-
-    .menu-nav-control {
-      height: 30px;
-
-      &::before,
-      &::after {
-        width: 3px;
-        height: 12px;
-        background: var(--color-primary-light-6);
-      }
-
-      &::before {
-        bottom: -2px;
-      }
-
-      &::after {
-        top: -2px;
-      }
-    }
-  }
-
-  .contextmenu {
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    .modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      z-index: 99;
-    }
-  }
-
-  .history-menu {
-    height: 30px;
-    color: #fff;
-    font-size: 14px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    background: rgba(83,109,139,.6);
-    border-radius: 5px 5px 0 0;
-    transition: all 0.3s ease-in-out;
-    position: relative;
-    background: var(--color-primary-light-9);
-
-    & + .history-menu {
-      border-left: 1px solid var(--color-darken-primary-2);
-    }
-
-    &.is-active {
-      height: 40px;
-      color: #ffffff;
-      background: var(--color-darken-primary-2);
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.95);
-      box-shadow: 7px 5px 5px rgba(0, 0, 0, 0.2);
-      z-index: 1;
-    }
-
-    &:hover {
-      i {
-        opacity: 1;
-      }
-    }
-
-    > span {
-      flex: 1;
-      padding: 0 25px;
-    }
-
-    > i {
-      position: absolute;
-      top: 2px;
-      right: 3px;
-      opacity: 0.3;
-      width: 14px;
-      height: 14px;
-      font-size: 12px;
-      border-radius: 50%;
-      transition: opacity 0.3s ease-in-out;
-
-      &:hover {
-        background-color: var(--color-primary);
-      }
-    }
-  }
-
-  .el-tabs {
-    background: transparent;
-
-    > .el-tabs__header {
-      background: transparent;
-      border-bottom: none;
-
-      .el-tabs__nav {
-        border: none;
-      }
-
-      .el-tabs__nav-wrap::after {
-        content: unset;
-      }
-    }
-
-    > .el-tabs__content {
-      padding: 0;
-    }
-
-    .el-tabs__nav-next,
-    .el-tabs__nav-prev {
-      color: #536d8b;
-      width: 20px;
-      line-height: 39px;
-      text-align: center;
-      font-size: 18px;
-    }
-
-    .el-tabs__nav-prev {
-      border-right: 1px solid #ddd;
-    }
-
-    .el-tabs__nav-next {
-      border-left: 1px solid #ddd;
-    }
-
-    .el-tabs__item {
-      margin: 8px;
-      border: none;
-      height: 34px;
-      line-height: 34px;
-      background: #2e557e;
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
-      color: #fff;
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-
-  .history-tab-title {
-    width: 6em;
-    display: inline-block;
-    vertical-align: middle;
-  }
-}
-
-.history-dropdown {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.history-contextmenu.el-popper {
-  margin-top: 0;
-}
-</style>

package/src/components/icon/icon.vue

@@ -1,63 +0,0 @@
-<template>
-  <svg :class="['ui-icon', 'ui-icon-' + realName]" aria-hidden="true">
-    <use :xlink:href="`#icon-${realName}`"/>
-  </svg>
-</template>
-
-<script>
-import Iconfont from '../../config/config.iconfont';
-
-export default {
-  name: 'ui-icon',
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      icons: [],
-    };
-  },
-  computed: {
-    realName({name, icons}) {
-      const isIncludes = icons.includes(name);
-      if (isIncludes) {
-        return name;
-      }
-      return 'unknown';
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      this.icons = await Iconfont.getIcons();
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-  display: inline-block;
-
-  &.ui-icon-loading {
-    animation: rotating 2s linear infinite;
-  }
-}
-
-@keyframes rotating {
-  from {
-    transform: rotate(0deg)
-  }
-
-  to {
-    transform: rotate(1turn)
-  }
-}
-</style>