ff-admin/src/components/queryBuilder/ColumnSelect.vue

51 lines
1.3 KiB
Vue
Raw Normal View History

<template>
<div class="flex flex-row gap-2">
<p class="w-14 min-w-14 pt-2">SELECT</p>
<div class="flex flex-row flex-wrap gap-2 items-center">
<p
class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
>
*
</p>
<p
v-for="col in activeTable?.columns"
:key="col.column"
class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
>
{{ col.column }}:{{ col.type }}
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia";
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
</script>
<script lang="ts">
export default defineComponent({
props: {
table: {
type: String,
default: "",
},
modelValue: {
type: [Array, String] as PropType<"*" | Array<string>>,
default: "*",
},
},
emits: ["update:model-value"],
data() {
return {};
},
computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]),
activeTable() {
return this.tableMetas.find((tm) => tm.tableName == this.table);
},
},
});
</script>