98 lines
3.0 KiB
Vue
98 lines
3.0 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
});
|
|
</script>
|
|
<template>
|
|
<!-- {{ props.items }} -->
|
|
<!-- <h1>Coba</h1> -->
|
|
<div class="overflow-x-auto" style="min-height: 300px">
|
|
<!-- <v-card style="width: 100%" class="py-3 px-3"> -->
|
|
<ListElement
|
|
:default="props.items.menu"
|
|
name="menu"
|
|
add-text="+ module"
|
|
:sort="true"
|
|
wrapper-class="flex flex-col items-center gap-4"
|
|
add-class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full"
|
|
>
|
|
<template #default="{ index }">
|
|
<ObjectElement :name="index">
|
|
<div class="vf-element-layout vf-col-12">
|
|
<v-table style="min-width: 100%">
|
|
<thead v-if="index === 0">
|
|
<tr>
|
|
<th class="text-h6 ps-6">Module</th>
|
|
<!-- <th class="text-h6">Create</th>
|
|
<th class="text-h6">Update</th>
|
|
<th class="text-h6">Delete</th>
|
|
<th class="text-h6">Show</th> -->
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- <tr v-for="(item,index) in props.items.menu" :key="index" name="menu"> -->
|
|
<tr>
|
|
<!-- <td>{{item}}</td> -->
|
|
<td>
|
|
<TextElement name="Module" placeholder="Module" :columns="{
|
|
container: 6,
|
|
}" />
|
|
</td>
|
|
<td>
|
|
<CheckboxElement
|
|
name="create"
|
|
text="create"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
trueValue="true"
|
|
falseValue="false"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<CheckboxElement
|
|
name="update"
|
|
text="update"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
trueValue="true"
|
|
falseValue="false"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<CheckboxElement
|
|
name="delete"
|
|
text="delete"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
trueValue="true"
|
|
falseValue="false"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<CheckboxElement
|
|
name="show"
|
|
text="show"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
trueValue="true"
|
|
falseValue="false"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</div>
|
|
</ObjectElement>
|
|
</template>
|
|
</ListElement>
|
|
<!-- </v-card> -->
|
|
</div>
|
|
</template>
|