86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<template>
|
|
<v-sheet color="white" elevation="4" height="300">
|
|
<slot name="dash-title">
|
|
<!-- <div class="mx-2 mt-1 text-subtitle-1 text-md-h6 text-xl-h4">
|
|
{{ title }}
|
|
|
|
<v-btn icon class="float-right">
|
|
<v-icon>$ayiEllipsisV</v-icon>
|
|
</v-btn>
|
|
</div> -->
|
|
|
|
<v-toolbar flat dense>
|
|
<v-toolbar-title> {{ title }}</v-toolbar-title>
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<!-- <v-btn icon>
|
|
<v-icon>mdi-heart</v-icon>
|
|
</v-btn> -->
|
|
|
|
<!-- <v-btn icon>
|
|
<v-icon>$ayiEllipsisV</v-icon>
|
|
</v-btn> -->
|
|
<v-menu bottom left>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-btn icon v-bind="attrs" v-on="on">
|
|
<v-icon>$ayiEllipsisV</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-list>
|
|
<v-list-item @click="removeItem">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiTrashAlt</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Delete") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item v-for="(item, i) in items" :key="i">
|
|
<v-list-item-title @click="menuItemClick(item)">{{
|
|
item.name
|
|
}}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-toolbar>
|
|
</slot>
|
|
<slot name="main"
|
|
><div class="ml-4 mt-1 d-flex justify-center align-center">
|
|
<div>
|
|
CONTENT HERE
|
|
</div>
|
|
</div></slot
|
|
>
|
|
</v-sheet>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
items: [
|
|
{ name: "Click Me", value: 0 },
|
|
{ name: "Click Me", value: 1 },
|
|
{ name: "Click Me", value: 2 },
|
|
{ name: "Click Me 2", value: 3 }
|
|
]
|
|
}),
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
title: String,
|
|
moreUrl: String
|
|
},
|
|
methods: {
|
|
removeItem() {
|
|
this.$emit("dash-remove", this.id);
|
|
},
|
|
menuItemClick(item) {
|
|
console.log(item);
|
|
}
|
|
}
|
|
};
|
|
</script>
|