feat: add table select

auto-import.d.ts

@@ -70,6 +70,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
-  import('vue')
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
 }

components.d.ts

@@ -29,6 +29,7 @@ declare module 'vue' {
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     RouterLink: typeof import('vue-router')['RouterLink']

src/views/connect/components/table-select.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="table-select-container">
+    <n-select v-model:value="value" :options="options" placeholder="no table selected" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref(null);
+
+const options = ref([
+  { label: '1', value: 2 },
+  { label: '2', value: 1 },
+]);
+</script>
+
+<style lang="scss" scoped>
+.table-select-container {
+  height: 100%;
+  width: 260px;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid var(--border-color);
+  :deep(.n-select) {
+    .n-base-selection {
+      .n-base-selection-label {
+        background-color: unset;
+      }
+      .n-base-selection__border,
+      .n-base-selection__state-border {
+        border: unset;
+      }
+    }
+    .n-base-selection:hover,
+    .n-base-selection--active,
+    .n-base-selection--focus {
+      .n-base-selection__state-border {
+        border: unset;
+        box-shadow: unset;
+      }
+    }
+  }
+}
+</style>

src/views/connect/index.vue

@@ -10,7 +10,12 @@
       <connect-list @edit-connect="editConnectHandler" />
     </div>
     <div class="connect-body">
-      <Editor />
+      <div class="table-select">
+        <table-select />
+      </div>
+      <div class="editor-container">
+        <Editor />
+      </div>
     </div>
   </div>
   <connect-modal ref="connectModalRef" />
@@ -20,6 +25,7 @@
 import { Add } from '@vicons/carbon';
 import ConnectModal from './components/connect-dialog.vue';
 import connectList from './components/connect-list.vue';
+import tableSelect from './components/table-select.vue';
 import Editor from '../editor/index.vue';
 import { useAppStore } from './../../store';
 
@@ -70,6 +76,16 @@ const editConnectHandler = (row: object) => {
     flex: 1;
     width: 0;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    .table-select {
+      height: 40px;
+      border-bottom: 1px solid var(--border-color);
+    }
+    .editor-container {
+      flex: 1;
+      height: 0;
+    }
   }
 }
 </style>