This commit is contained in:
AndzejsP
2023-06-10 16:17:10 +03:00
parent 17cc14de3d
commit f02c868306
2 changed files with 234 additions and 65 deletions

View File

@ -1,13 +1,28 @@
<template>
<div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none"
<div
class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none"
@click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
<div class="flex flex-row items-center flex-shrink-0 gap-3">
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
class="w-10 h-10 rounded-full object-fill text-red-700">
<h3 class="font-bold font-large text-lg line-clamp-3">
{{ personality.name }}
</h3>
{{ personality.name }}
</h3>
<div class="grow">
<!-- EMPTY SPACE FILLER -->
</div>
<!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
<div class="flex-none">
<div class="flex items-center mb-4" @click.stop>
<input id="default-checkbox" type="checkbox" v-model="isMounted" @change="toggleMounted"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium">Mounted</label>
</div>
</div>
</div>
@ -18,9 +33,9 @@
<i data-feather="user" class="w-5 m-1"></i>
<b>Author:&nbsp;</b>
{{ personality.author }}
</div>
<!-- <div class="">
{{ personality.author }}
</div>
<!-- <div class="">
<b>Language:&nbsp;</b>
{{ personality.language }}
</div>
@ -28,8 +43,8 @@
<b>Category:&nbsp;</b>
{{ personality.category }}
</div> -->
</div>
<div class="flex items-center">
</div>
<div class="flex items-center">
<i data-feather="info" class="w-5 m-1"></i>
<b>Description:&nbsp;</b><br>
</div>
@ -51,19 +66,27 @@ export default {
props: {
personality: {},
onSelected: Function,
selected: Boolean
selected: Boolean,
onMounted: Function,
},
data() {
return {
isMounted:false
};
},
mounted() {
this.isMounted=this.personality.isMounted
nextTick(() => {
feather.replace()
})
},
computed: {
},
methods: {
getImgUrl() {
@ -75,6 +98,9 @@ export default {
toggleSelected() {
this.onSelected(this)
},
toggleMounted() {
this.onMounted(this)
},
}
};