src/views/components/dashboard/tool-nav.vue

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

<template>
  <nav class="rk-dashboard-nav">
    <span v-for="(i, index) in rocketComps.tree[rocketComps.group].children" :key="index" class="mr-20">
      <a class="rk-dashboard-nav-i b" @click="SET_CURRENT_COMPS(index)" :class="{'active': rocketComps.current == index}">{{i.name}}</a>
      <svg v-if="rocketGlobal.edit && rocketComps.current !== index" class="ml-5 icon cp red vm"  @click="DELETE_COMPS_TREE(index)">
        <use xlink:href="#file-deletion"></use>
      </svg>
    </span>
    <a class="rk-dashboard-nav-add" v-clickout="handleHide" v-if="rocketGlobal.edit">
      <svg class="icon vm" @click="show=!show">
        <use xlink:href="#todo-add"></use>
      </svg>
      <div class="rk-dashboard-nav-add-box" v-if="show">
        <div class="mb-10 vm">{{$t('createTab')}}</div>
        <div class="sm grey mb-5 mr-10">{{$t('tabName')}}</div>
        <input class="mb-5 rk-dashboard-nav-input" type="text" v-model="name">
        <div class="sm grey mb-5 mr-10">{{$t('template')}}</div>
        <label class="dib mb-5 mr-10 sm"><input type="radio" v-model="template" value="nouse">{{$t('nouse')}}</label>
        <label class="dib mb-5 mr-10 sm"><input type="radio" v-model="template" value="global">{{$t('global')}}</label>
        <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"><input type="radio" v-model="template" value="service">{{$t('service')}}</label>
        <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"><input type="radio" v-model="template" value="endpoint">{{$t('endpoint')}}</label>
        <label class="dib mb-5 mr-10 sm" v-if="type === 'service'"><input type="radio" v-model="template" value="instance">{{$t('instance')}}</label>
        <label class="dib mb-5 mr-10 sm" v-if="type === 'database'"><input type="radio" v-model="template" value="database">{{$t('database')}}</label>
        <a class="rk-btn r vm long tc" @click="handleCreate">{{$t('confirm')}}</a>
      </div>
    </a>
  </nav>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Model } from 'vue-property-decorator';
import { State, Mutation } from 'vuex-class';

@Component
export default class ToolNav extends Vue {
  @Prop() private rocketGlobal: any;
  @Prop() private rocketComps: any;
  @Mutation('SET_CURRENT_COMPS') private SET_CURRENT_COMPS: any;
  @Mutation('DELETE_COMPS_TREE') private DELETE_COMPS_TREE: any;
  @Mutation('ADD_COMPS_TREE') private ADD_COMPS_TREE: any;
  private name: string = '';
  private template: string = 'nouse';
  private show: boolean = false;
  get type() {
    return this.rocketComps.tree[this.rocketComps.group].type;
  }
  private handleHide() {
    this.name = '';
    this.show = false;
  }
  private handleCreate() {
    if (!this.name) { return; }
    this.ADD_COMPS_TREE({name: this.name, template: this.template});
    this.handleHide();
    this.template = 'nouse';
  }
}
</script>

<style lang="scss" scoped>
.rk-dashboard-nav{
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.08);
  background-color: rgba(196, 200, 225, .2);
  padding: 0 15px;
}
.rk-dashboard-nav-sel{
  outline: none;
  border: 0;
}
.rk-dashboard-nav-add{
  position: relative;
}
.rk-dashboard-nav-add-box{
  position: absolute;
  left: -10px;
  top: 35px;
  padding: 10px 5px;
  z-index: 1;
  border-radius: 4px;
  color: #eee;
  background-color: #252a2f;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.08);
}
.rk-dashboard-nav-add-box:after {
	bottom: 100%;
	left: 10px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #333840;
	border-width: 8px;
	margin-left: 0px;
}
.rk-dashboard-nav-input{
  border: 0;
  outline: 0;
  padding: 1px 8px;
  border-radius: 4px;
}
.rk-dashboard-nav-i{
  display: inline-block;
  height: 41px;
  line-height: 40px;
  border-bottom: 2px;
  border-bottom-style: solid;
  color: rgba(61, 68, 79, .6);
  border-color: rgba(0, 0, 0, 0);
  will-change: border-color,color;
  transition: border-color .3s, color .3s;
  &:hover{
    color: #448dfe;
  }
  &.active{
    color: #448dfe;
    border-color: #448dfe;
  }
}
</style>