Files
salvato.newfreeplanet/src/components/CTitleBanner/CTitleBanner.ts
Surya Paolo e29de7e0f6 - Fare LISTA MOVIMENTI più comprensibile
- Grafica Circuiti
2024-10-02 03:46:40 +02:00

127 lines
2.3 KiB
TypeScript
Executable File

import { defineComponent, onMounted, ref } from 'vue'
import { tools } from '@src/store/Modules/tools'
export default defineComponent({
name: 'CTitleBanner',
props: {
title: {
type: String,
required: true,
},
bgcolor: {
type: String,
required: false,
default: 'bg-primary',
},
bgcolor2: {
type: String,
required: false,
default: '',
},
bgcolor3: {
type: String,
required: false,
default: '',
},
clcolor: {
type: String,
required: false,
default: 'text-white',
},
mystyle: {
type: String,
required: false,
default: '',
},
myclass: {
type: String,
required: false,
default: '',
},
myclasstext: {
type: String,
required: false,
default: '',
},
icon: {
type: String,
required: false,
default: '',
},
visible: {
type: Boolean,
required: false,
default: true,
},
canopen: {
type: Boolean,
required: false,
default: false,
},
imgpreview: {
type: String,
required: false,
default: '',
},
header: {
type: Boolean,
required: false,
default: false,
},
small: {
type: Boolean,
required: false,
default: false,
},
},
components: {},
emits: ['apri'],
setup(props, { emit }) {
const myvisible = ref(false)
const gradient = ref('')
function created() {
myvisible.value = props.visible
}
function iconopen() {
if (!myvisible.value)
return 'fas fa-chevron-down q-icon q-expansion-item__toggle-icon q-focusable '
else
return 'fas fa-chevron-down q-icon q-expansion-item__toggle-icon q-focusable rotate-180'
}
function apri() {
if (props.canopen) {
myvisible.value = !myvisible.value
if (myvisible.value)
emit('apri')
}
}
function getclass() {
if (myvisible.value)
return 'isvisibile'
else
return 'nonvisibile glossy'
}
function mounted() {
gradient.value = tools.getGradientByColors(props.bgcolor, props.bgcolor2, props.bgcolor3)
}
created()
onMounted(mounted)
return {
myvisible,
iconopen,
apri,
getclass,
gradient,
}
},
})