other components...

src/components/CTitleBanner/CTitleBanner.scss

@@ -0,0 +1,9 @@
+.myshad {
+  text-shadow: .125rem .125rem .125rem darkgray;
+}
+
+.nonvisibile{
+  border-radius: 16px;
+  border: red solid 3px;
+  padding: 4px;
+}

src/components/CTitleBanner/CTitleBanner.ts

@@ -0,0 +1,93 @@
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'CTitleBanner',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    bgcolor: {
+      type: String,
+      required: false,
+      default: 'bg-primary',
+    },
+    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: '',
+    },
+  },
+  components: {},
+  emits: ['apri'],
+  setup(props, { emit }) {
+    const myvisible = ref(false)
+
+    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() {
+      myvisible.value = !myvisible.value
+      if (myvisible.value)
+        emit('apri')
+    }
+
+    function getclass() {
+      if (myvisible.value)
+        return 'isvisibile'
+      else
+        return 'nonvisibile glossy'
+    }
+
+    created()
+
+    return {
+      iconopen,
+      apri,
+      getclass,
+    }
+  },
+})

src/components/CTitleBanner/CTitleBanner.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <q-banner
+      inline-actions
+      rounded dense
+      :class="bgcolor+` cursor-pointer q-my-sm `+clcolor+ ` ` + myclass + ' ' + getclass"
+      style="text-align: center; "
+      @click="apri()"
+    >
+      <template v-slot:avatar>
+        <q-icon v-if="canopen && icon" :name="icon" color="white"/>
+      </template>
+      <template v-slot:action>
+        <div class="cursor-pointer">
+          <q-icon v-if="canopen" :name="iconopen" color="white"/>
+        </div>
+      </template>
+      <span :class="`mybanner `+ myclasstext" :style="mystyle">{{title}}</span>
+    </q-banner>
+
+    <q-slide-transition>
+      <div v-if="myvisible" class="rounded-borders">
+        <slot></slot>
+      </div>
+      <div v-if="imgpreview" class="text-center cursor-pointer clBorderSteps" style="opacity: 0.5;" @click="myvisible = !myvisible">
+        <q-img :src="imgpreview" class="img"></q-img>
+      </div>
+    </q-slide-transition>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CTitleBanner.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CTitleBanner.scss';
+</style>

src/components/CTitleBanner/index.ts

@@ -0,0 +1 @@
+export {default as CTitleBanner} from './CTitleBanner.vue'