ver 0.5.51

src/components/CTitleSec/CTitleSec.scss

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

src/components/CTitleSec/CTitleSec.ts

@@ -0,0 +1,37 @@
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'CTitleSec',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    bgcolor: {
+      type: String,
+      required: false,
+      default: 'bg-primary',
+    },
+    clcolor: {
+      type: String,
+      required: false,
+      default: 'text-white',
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  components: {},
+  setup(props, { emit }) {
+
+    function iconopen() {
+      return 'fas fa-chevron-down q-icon q-expansion-item__toggle-icon q-focusable rotate-180'
+    }
+
+    return {
+      iconopen,
+    }
+  },
+})

src/components/CTitleSec/CTitleSec.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <q-banner
+      inline-actions
+      rounded
+      dense
+      :class="bgcolor + ` cursor-pointer q-my-sm ` + clcolor + ` `"
+      style="text-align: center"
+    >
+      <template v-slot:avatar>
+        <q-icon v-if="icon" :name="icon" color="white" />
+      </template>
+      <span :class="`mybanner `">{{
+        title
+      }}</span>
+    </q-banner>
+
+    <q-slide-transition>
+      <div>
+        <slot></slot>
+      </div>
+    </q-slide-transition>
+  </div>
+</template>
+
+<script lang="ts" src="./CTitleSec.ts">
+</script>
+<style lang="scss" scoped>
+@import './CTitleSec.scss';
+</style>

src/components/CTitleSec/index.ts

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