| 1 | <template> |
| 2 | <n-tabs type="line" animated :tabs-padding="24" class="grow" pane-wrapper-class="flex grow flex-col"> |
| 3 | <n-tab-pane name="Overview" tab="Overview" display-directive="show:lazy" class="flex grow flex-col"> |
| 4 | <div class="pt-1"> |
| 5 | <QueryOverview :query @updated="updateQuery($event)" @deleted="emit('deleted', query)" /> |
| 6 | </div> |
| 7 | </n-tab-pane> |
| 8 | <n-tab-pane name="Rule Query" tab="Rule Query" display-directive="show:lazy"> |
| 9 | <div class="p-6 pt-3"> |
| 10 | <CodeSource :code="query.rule_query" lang="sql" /> |
| 11 | </div> |
| 12 | </n-tab-pane> |
| 13 | </n-tabs> |
| 14 | </template> |
| 15 | |
| 16 | <script setup lang="ts"> |
| 17 | import type { SigmaQuery } from "@/types/sigma.d" |
| 18 | import { NTabPane, NTabs } from "naive-ui" |
| 19 | import { defineAsyncComponent, toRefs } from "vue" |
| 20 | |
| 21 | const props = defineProps<{ |
| 22 | query: SigmaQuery |
| 23 | }>() |
| 24 | const emit = defineEmits<{ |
| 25 | (e: "deleted", value: SigmaQuery): void |
| 26 | (e: "updated", value: SigmaQuery): void |
| 27 | }>() |
| 28 | const QueryOverview = defineAsyncComponent(() => import("./QueryOverview.vue")) |
| 29 | const CodeSource = defineAsyncComponent(() => import("@/components/common/CodeSource.vue")) |
| 30 | |
| 31 | const { query } = toRefs(props) |
| 32 | |
| 33 | function updateQuery(updatedQuery: SigmaQuery) { |
| 34 | emit("updated", updatedQuery) |
| 35 | } |
| 36 | </script> |