dialog component + change vue file typings

romgerman · May 22, 2024 · e12550f · e12550f
1 parent 4c5d84c
commit e12550f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 30 deletions.
diff --git a/src/webview/components/Dialog.vue b/src/webview/components/Dialog.vue
@@ -0,0 +1,35 @@
+<template>
+  <dialog class="modal" ref="dialog">
+    <div class="modal-box max-w-full flex flex-col">
+      <div class="flex flex-col flex-1 min-h-0">
+        <h3 class="font-bold text-lg">
+          <slot name="header" />
+        </h3>
+
+        <div class="overflow-auto">
+          <slot />
+        </div>
+      </div>
+
+      <div class="modal-action">
+        <form method="dialog">
+          <vscode-button type="submit">Close</vscode-button>
+        </form>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const dialog = ref<HTMLDialogElement>();
+
+function showDialog(): void {
+  dialog.value.showModal();
+}
+
+defineExpose({
+  showDialog,
+});
+</script>
diff --git a/src/webview/nodes/aggregation/FileListNode.vue b/src/webview/nodes/aggregation/FileListNode.vue
@@ -27,38 +27,26 @@
     <Handle id="0:array" type="source" :position="Position.Right" />
 
     <Teleport to="body">
-      <dialog class="modal" ref="editorModal">
-        <div class="modal-box max-w-full flex flex-col">
-          <div class="flex flex-col flex-1 min-h-0">
-            <h3 class="font-bold text-lg">
-              <vscode-text-field placeholder="Search..." v-model="editorState.query"></vscode-text-field>
-            </h3>
-
-            <div class="overflow-auto">
-              <table class="table">
-                <tbody>
-                  <tr class="hover" v-for="file in filteredItems" @dblclick="openFile(file.path)">
-                    <td>{{ file.name }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <div class="modal-action">
-            <form method="dialog">
-              <vscode-button type="submit">Close</vscode-button>
-            </form>
-          </div>
-        </div>
-      </dialog>
+      <Dialog ref="editorModal">
+        <template #header>
+          <vscode-text-field placeholder="Search..." v-model="editorState.query"></vscode-text-field>
+        </template>
+        <table class="table">
+          <tbody>
+            <tr class="hover" v-for="file in filteredItems" @dblclick="openFile(file.path)">
+              <td>{{ file.name }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </Dialog>
     </Teleport>
   </NodeWrapper>
 </template>
 
 <script setup lang="ts">
 import { Handle, Position } from "@vue-flow/core";
 import NodeWrapper from "../NodeWrapper.vue";
+import Dialog from "@/webview/components/Dialog.vue";
 import { useNodeState } from "@/webview/composables/use-node-state";
 import { useViewData } from "@/webview/composables/use-view-data";
 import { useCollapsableList } from "@/webview/composables/use-collapsable-list";
@@ -72,14 +60,14 @@ const editorState = ref<{ query: string }>({
   query: "",
 });
 const filteredItems = computed(() => model.value.allItems.filter((x) => x.name.includes(editorState.value.query.toLocaleLowerCase())));
-const editorModal = ref<HTMLDialogElement>(null);
+const editorModal = ref<InstanceType<typeof Dialog>>();
 
 useViewData<{ name: string; path: string; }[]>((data) => {
   model.value.allItems = data;
 });
 
 function openModal(): void {
-  editorModal.value.showModal();
+  editorModal.value.showDialog();
 }
 
 function openFile(path: string): void {

diff --git a/src/webview/tsconfig.json b/src/webview/tsconfig.json
@@ -11,6 +11,7 @@
     "sourceMap": true,
     "strict": false,
     "allowSyntheticDefaultImports": true,
+    "skipDefaultLibCheck": true,
     "types": ["vscode-webview"],
     "paths": {
       "@/webview": ["."],

diff --git a/src/webview/typings/sfc.d.ts b/src/webview/typings/sfc.d.ts
@@ -1,4 +1,5 @@
-declare module '*.vue' {
-  import { defineComponent } from 'vue';
-  export default defineComponent;
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }