<commit_before><template>
  <div class="connectionMenu" v-if="state.connection">
    <v-menu
      :close-on-content-click="false"
      :position-x="state.position.x"
      :position-y="state.position.y"
      :value="state.show"
      transition="slide-y-transition"
    >
      <v-card tile flat style="min-width: 300px">
        <!-- <v-card-title
          :style="{ backgroundColor: state.connection.source.view.color }"
          class="py-1"
          style="color:white; height:40px"
        >
        </v-card-title> -->

        <span v-if="state.content === undefined">
          <v-list dense>
            <v-list-item
              :key="index"
              @click="item.onClick"
              v-for="(item, index) in state.items"
            >
              <v-list-item-icon>
                <v-icon v-text="item.icon" />
              </v-list-item-icon>
              <v-list-item-title v-text="item.title" />

              <v-list-item-action v-show="item.append">
                <v-icon v-text="'mdi-menu-right'" />
              </v-list-item-action>
              <v-list-item-action v-if="item.input === 'checkbox'">
                <v-checkbox :input-value="state[item.value]" />
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </span>

        <span v-if="state.content === 'paramSelect'">
          <v-card-text class="pa-0">
            <ConnectionParamSelect
              :connection="state.connection"
              :visibleParams="state.visibleParams"
            />
          </v-card-text>

          <v-card-actions>
            <v-btn @click="backMenu" outlined small text>
              <v-icon left v-text="'mdi-menu-left'" /> back
            </v-btn>
            <v-spacer />
            <v-btn @click="hideAllParams" outlined small text v-text="'none'" />
            <v-btn @click="showAllParams" outlined small text v-text="'all'" />
          </v-card-actions>
        </span>

        <span v-if="state.content === 'paramEdit'">
          <v-card-text class="px-0">
            <ConnectionParamEdit :connection="state.connection" />
          </v-card-text>

          <v-card-actions>
            <v-btn @click="backMenu" outlined small text>
              <v-icon left v-text="'mdi-menu-left'" /> back
            </v-btn>
            <v-spacer />
            <v-btn
              @click="resetAllParams"
              outlined
              small
              text
              v-text="'reset'"
            />
          </v-card-actions>
        </span>

        <span v-if="state.content === 'connectionDelete'">
          <v-card-title v-text="'Are you sure to delete this connection?'" />

          <v-card-actions>
            <v-btn @click="backMenu" small text>
              <v-icon left v-text="'mdi-menu-left'" /> back
            </v-btn>
            <v-spacer />
            <v-btn
              @click="deleteConnection"
              color="warning"
              small
              text
              v-text="'delete'"
            />
          </v-card-actions>
        </span>
      </v-card>
    </v-menu>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { reactive, onMounted } from '@vue/composition-api';

import { Connection } from '@/core/connection/connection';
import { ModelParameter } from '@/core/parameter/modelParameter';
import { Parameter } from '@/core/parameter/parameter';
import ConnectionParamEdit from '@/components/connection/ConnectionParamEdit.vue';
import ConnectionParamSelect from '@/components/connection/ConnectionParamSelect.vue';

export default Vue.extend({
  name: 'ConnectionMenu',
  components: {
    ConnectionParamEdit,
    ConnectionParamSelect,
  },
  props: {<commit_msg>Add outlined to menu buttons<commit_after><template>
  <div class="connectionMenu" v-if="state.connection">
    <v-menu
      :close-on-content-click="false"
      :position-x="state.position.x"
      :position-y="state.position.y"
      :value="state.show"
      transition="slide-y-transition"
    >
      <v-card tile flat style="min-width: 300px">
        <!-- <v-card-title
          :style="{ backgroundColor: state.connection.source.view.color }"
          class="py-1"
          style="color:white; height:40px"
        >
        </v-card-title> -->

        <span v-if="state.content === undefined">
          <v-list dense>
            <v-list-item
              :key="index"
              @click="item.onClick"
              v-for="(item, index) in state.items"
            >
              <v-list-item-icon>
                <v-icon v-text="item.icon" />
              </v-list-item-icon>
              <v-list-item-title v-text="item.title" />

              <v-list-item-action v-show="item.append">
                <v-icon v-text="'mdi-menu-right'" />
              </v-list-item-action>
              <v-list-item-action v-if="item.input === 'checkbox'">
                <v-checkbox :input-value="state[item.value]" />
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </span>

        <span v-if="state.content === 'paramSelect'">
          <v-card-text class="pa-0">
            <ConnectionParamSelect
              :connection="state.connection"
              :visibleParams="state.visibleParams"
            />
          </v-card-text>

          <v-card-actions>
            <v-btn @click="backMenu" outlined small text>
              <v-icon left v-text="'mdi-menu-left'" /> back
            </v-btn>
            <v-spacer />
            <v-btn @click="hideAllParams" outlined small text v-text="'none'" />
            <v-btn @click="showAllParams" outlined small text v-text="'all'" />
          </v-card-actions>
        </span>

        <span v-if="state.content === 'paramEdit'">
          <v-card-text class="px-0">
            <ConnectionParamEdit :connection="state.connection" />
          </v-card-text>

          <v-card-actions>
            <v-btn @click="backMenu" outlined small text>
              <v-icon left v-text="'mdi-menu-left'" /> back
            </v-btn>
            <v-spacer />
            <v-btn
              @click="resetAllParams"
              outlined
              small
              text
              v-text="'reset'"
            />
          </v-card-actions>
        </span>

        <span v-if="state.content === 'connectionDelete'">
          <v-card-title v-text="'Are you sure to delete this connection?'" />

          <v-card-actions>
            <v-btn @click="backMenu" outlined small text>
              <v-icon left v-text="'mdi-menu-left'" /> back
            </v-btn>
            <v-spacer />
            <v-btn
              @click="deleteConnection"
              color="warning"
              outlined
              small
              text
              v-text="'delete'"
            />
          </v-card-actions>
        </span>
      </v-card>
    </v-menu>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { reactive, onMounted } from '@vue/composition-api';

import { Connection } from '@/core/connection/connection';
import { ModelParameter } from '@/core/parameter/modelParameter';
import { Parameter } from '@/core/parameter/parameter';
import ConnectionParamEdit from '@/components/connection/ConnectionParamEdit.vue';
import ConnectionParamSelect from '@/components/connection/ConnectionParamSelect.vue';

export default Vue.extend({
  name: 'ConnectionMenu',
  components: {
    ConnectionParamEdit,
    ConnectionParamSelect,
  },
  props: {
{'fraction_non_alphanumeric': 0.15709168104020166, 'fraction_numerical': 0.0021228605545973197, 'mean_word_length': 1.6439845668186601, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 129, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5704491', 'n_tokens_mistral': 2253, 'n_tokens_neox': 2191, 'n_words': 390}