<template> <div class="flex flex-col gap-2"> <TableSelect v-model="table" /> <ColumnSelect v-model="columnSelect" :table="table" /> <Where v-model="where" :table="table" /> <Order v-model="order" :table="table" :columns="columnSelect" /> <Join v-model="modelValue.join" :table="table" /> </div> </template> <script setup lang="ts"> import { defineComponent, type PropType } from "vue"; import { mapActions, mapState } from "pinia"; import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "../../types/dynamicQueries"; import { useQueryBuilderStore } from "../../stores/admin/queryBuilder"; import ColumnSelect from "./ColumnSelect.vue"; import Where from "./Where.vue"; import Order from "./Order.vue"; import Join from "./Join.vue"; import TableSelect from "./TableSelect.vue"; </script> <script lang="ts"> export default defineComponent({ props: { modelValue: { type: Object as PropType<DynamicQueryStructure>, default: { select: "*", table: "", where: [], join: [], orderBy: [], }, }, }, emits: ["update:model-value"], computed: { table: { get() { return this.modelValue.table; }, set(val: string) { this.$emit("update:model-value", { ...this.modelValue, table: val }); }, }, columnSelect: { get() { return this.modelValue.select; }, set(val: "*" | Array<string>) { this.$emit("update:model-value", { ...this.modelValue, select: val }); }, }, where: { get() { return this.modelValue.where; }, set(val: Array<ConditionStructure>) { this.$emit("update:model-value", { ...this.modelValue, where: val }); }, }, order: { get() { return this.modelValue.orderBy; }, set(val: Array<OrderByStructure>) { this.$emit("update:model-value", { ...this.modelValue, orderBy: val }); }, }, join: { get() { return this.modelValue.join; }, set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) { this.$emit("update:model-value", { ...this.modelValue, join: val }); }, }, }, }); </script>