43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const options = [
|
|
{ id: 1, title: 'Title' },
|
|
{ id: 2, title: 'Content' },
|
|
{ id: 3, title: 'Status' },
|
|
]
|
|
const select = (value: unknown) => {}
|
|
</script>
|
|
|
|
<template>
|
|
<v-menu width="15rem" :close-on-content-click="false">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn density="compact" icon="mdi-dots-horizontal" v-bind="props" />
|
|
</template>
|
|
|
|
<v-list border select-strategy="single-leaf" density="compact" @update:selected="select">
|
|
<v-list-item rounded="0" class="py-0" slim v-for="el in options" :key="el.id">
|
|
<v-list-item-title>
|
|
<div class="menu-grid px-1">
|
|
<div>{{ el.title }}</div>
|
|
<v-switch
|
|
inset="material"
|
|
size="x-small"
|
|
color="success"
|
|
true-icon="mdi-check"
|
|
false-icon="mdi-close"
|
|
hide-details
|
|
/>
|
|
</div>
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.menu-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
}
|
|
</style>
|