refactor in PTitle

Cadiducho · Mar 7, 2024 · 6abfe29 · 6abfe29
1 parent 6936203
commit 6abfe29
Show file tree

Hide file tree

Showing 39 changed files with 122 additions and 122 deletions.
diff --git a/src/components/lib/PTitle.vue b/src/components/lib/PTitle.vue
@@ -0,0 +1,27 @@
+<template>
+    <component :is="tag" :class="computedClass">
+        <slot>
+            {{ name }}
+        </slot>
+    </component>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+
+interface Props {
+    name?: string;
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    type?: 'title' | 'subtitle';
+}
+const props = withDefaults(defineProps<Props>(), {
+    type: 'title',
+    tag: 'h1'
+});
+
+const computedClass = computed(() => ({
+    'font-semibold dark:text-gray-200 mb-3': true,
+    'text-2xl md:text-4xl': props.type === 'title',
+    'text-xl md:text-2xl': props.type === 'subtitle'
+}));
+</script>
diff --git a/src/components/lib/PrognoPageTitle.vue b/src/components/lib/PrognoPageTitle.vue
diff --git a/src/pages/admin/AdminDashboard.vue b/src/pages/admin/AdminDashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminPage" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de PrognoSports" />
+        <PTitle class="mb-5" name="Administración de PrognoSports" />
 
         <div class="flex flex-wrap justify-between -mx-2 mb-8">
             <article class="w-full md:w-1/2 p-4">
@@ -96,5 +96,5 @@
 </template>
 
 <script setup lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 </script>
diff --git a/src/pages/admin/circuits/CircuitsDashboard.vue b/src/pages/admin/circuits/CircuitsDashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminDrivers" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de circuitos"/>
+        <PTitle class="mb-5" name="Administración de circuitos"/>
 
         <p-button class="mb-4" label="Nuevo circuito" color="info" to="/admin/circuits/create" />
 
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
 import {circuitService, notificationService} from "@/_services";
 
@@ -49,7 +49,7 @@ export default defineComponent({
         PrognoModal,
         PTable,
         AlertNoPermission,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const authStore = useAuthStore();

diff --git a/src/pages/admin/circuits/CreateCircuit.vue b/src/pages/admin/circuits/CreateCircuit.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="createCircuit" class="box">
-        <PrognoPageTitle class="mb-5" name="Crear circuito" />
+        <PTitle class="mb-5" name="Crear circuito" />
 
         <p-input label="Nombre del circuito" name="name" v-model="rawCircuit.name"/>
         <p-input label="Localidad del circuito" name="locality" v-model="rawCircuit.locality"/>
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import {circuitService, notificationService} from "@/_services";
 
 import {reactive} from "vue";

diff --git a/src/pages/admin/circuits/EditCircuit.vue b/src/pages/admin/circuits/EditCircuit.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminDrivers" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de circuitos"/>
+        <PTitle class="mb-5" name="Administración de circuitos"/>
 
         <loading v-if="isLoading"/>
         <template v-else>
@@ -53,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import {circuitService, notificationService} from "@/_services";
 
 import {onMounted, ref} from "vue";

diff --git a/src/pages/admin/competitions/CompetitionsDashboard.vue b/src/pages/admin/competitions/CompetitionsDashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminDrivers" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de competiciones"/>
+        <PTitle class="mb-5" name="Administración de competiciones"/>
 
         <div class="block">
             <o-button variant="link" :to="{name: 'competitionCreate'}" tag="router-link">Nueva competición</o-button>
@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
 import {competitionService, notificationService} from "@/_services";
 import {Competition} from "@/types/Competition";
@@ -85,7 +85,7 @@ export default defineComponent({
     components: {
         PrognoModal,
         AlertNoPermission,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const authStore = useAuthStore();

diff --git a/src/pages/admin/competitions/CreateCompetition.vue b/src/pages/admin/competitions/CreateCompetition.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="createCompetition" class="box">
-        <PrognoPageTitle class="mb-5" name="Crear competición"/>
+        <PTitle class="mb-5" name="Crear competición"/>
 
         <o-steps v-model="activeStep">
             <o-step-item step="1" label="Datos de la competición">
@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import {competitionService, notificationService} from "@/_services";
 import AlertInvalidData from "@/components/lib/AlertInvalidData.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
@@ -75,7 +75,7 @@ export default defineComponent({
     components: {
         AlertNoPermission,
         AlertInvalidData,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const authStore = useAuthStore();

diff --git a/src/pages/admin/competitions/EditCompetition.vue b/src/pages/admin/competitions/EditCompetition.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminDrivers" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de competiciones"/>
+        <PTitle class="mb-5" name="Administración de competiciones"/>
 
         <loading v-if="isLoading"/>
         <template v-else>
@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
 import {competitionService, notificationService} from "@/_services";
 import {Competition} from "@/types/Competition";
@@ -76,7 +76,7 @@ export default defineComponent({
     name: "EditCompetition",
     components: {
         AlertNoPermission,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const authStore = useAuthStore();

diff --git a/src/pages/admin/constructors/ConstructorsDashboard.vue b/src/pages/admin/constructors/ConstructorsDashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminConstructor" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de Constructores"/>
+        <PTitle class="mb-5" name="Administración de Constructores"/>
 
 
         <p-button class="mb-4" label="Nuevo constructor" color="info" to="/admin/constructors/create" />
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import {constructorService, notificationService} from "@/_services";
 import {Constructor} from "@/types/Constructor";
 import PButton from "@/components/lib/forms/PButton.vue";

diff --git a/src/pages/admin/constructors/CreateConstructor.vue b/src/pages/admin/constructors/CreateConstructor.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="createConstructor" class="box">
-        <PrognoPageTitle class="mb-5" name="Crear constructor"/>
+        <PTitle class="mb-5" name="Crear constructor"/>
 
         <PInput label="Nombre del constructor" name="name" v-model="name" />
 
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import PInput from "@/components/lib/forms/PInput.vue";
 import PButton from "@/components/lib/forms/PButton.vue";
 import {ref} from "vue";

diff --git a/src/pages/admin/constructors/EditConstructor.vue b/src/pages/admin/constructors/EditConstructor.vue
@@ -1,7 +1,7 @@
 <template>
     <loading v-if="isLoading"/>
     <div v-if="constructor.id" id="editConstrcutor" class="box">
-        <PrognoPageTitle class="mb-5" name="Editar constructor"/>
+        <PTitle class="mb-5" name="Editar constructor"/>
 
         <PInput label="Nombre del constructor" name="name" v-model="constructor.name" />
 
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import PInput from "@/components/lib/forms/PInput.vue";
 import PButton from "@/components/lib/forms/PButton.vue";
 import {onMounted, ref} from "vue";

diff --git a/src/pages/admin/drivers/CreateDriver.vue b/src/pages/admin/drivers/CreateDriver.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="createDriver" class="box">
-        <PrognoPageTitle class="mb-5" name="Crear piloto" />
+        <PTitle class="mb-5" name="Crear piloto" />
 
             <o-steps v-model="activeStep">
                 <o-step-item step="1" label="Datos del piloto">
@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import {driversService, notificationService} from "@/_services";
 import AlertInvalidData from "@/components/lib/AlertInvalidData.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
@@ -88,7 +88,7 @@ export default defineComponent({
     components: {
         AlertNoPermission,
         AlertInvalidData,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const dayjs = useDayjs();

diff --git a/src/pages/admin/drivers/DriversDashboard.vue b/src/pages/admin/drivers/DriversDashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminDrivers" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de pilotos"/>
+        <PTitle class="mb-5" name="Administración de pilotos"/>
 
         <div class="block">
             <o-button variant="link" :to="{name: 'driverCreate'}" tag="router-link">Nuevo piloto</o-button>
@@ -69,7 +69,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
 import {Driver} from "@/types/Driver";
 import {driversService} from "@/_services";
@@ -82,7 +82,7 @@ export default defineComponent({
     name: "DriversDashboard",
     components: {
         AlertNoPermission,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const dayjs = useDayjs();

diff --git a/src/pages/admin/gps/CreateGrandPrix.vue b/src/pages/admin/gps/CreateGrandPrix.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="createGrandPrix" class="box">
-        <PrognoPageTitle class="mb-5" name="Crear gran premio"/>
+        <PTitle class="mb-5" name="Crear gran premio"/>
 
         <o-button variant="primary" :to="{name: 'adminGps'}" tag="router-link" class="mr-2">Volver a lista de Grandes Premios</o-button>
 
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue"
+import PTitle from "@/components/lib/PTitle.vue"
 import {circuitService, grandPrixService, notificationService, seasonService} from "@/_services";
 import AlertInvalidData from "@/components/lib/AlertInvalidData.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
@@ -61,7 +61,7 @@ export default defineComponent({
     components: {
         AlertNoPermission,
         AlertInvalidData,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const authStore = useAuthStore();

diff --git a/src/pages/admin/gps/EditGrandPrix.vue b/src/pages/admin/gps/EditGrandPrix.vue
@@ -4,7 +4,7 @@
         <loading v-if="isLoadingGrandPrix"/>
         <template v-else>
 
-            <PrognoPageTitle :name="'Administración de ' + grandPrix.name"/>
+            <PTitle :name="'Administración de ' + grandPrix.name"/>
 
             <div class="block">
                 <o-button variant="link" to="/admin/gps" tag="router-link">Lista de grandes premios</o-button>
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import {grandPrixService, notificationService} from "@/_services";
 import {GrandPrix} from "@/types/GrandPrix";
 
@@ -52,7 +52,7 @@ export default defineComponent({
     name: "EditGrandPrix",
     components: {
         DriversInGrandPrix,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const authStore = useAuthStore();

diff --git a/src/pages/admin/gps/GrandPrixDashboard.vue b/src/pages/admin/gps/GrandPrixDashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="adminGps" class="box">
-        <PrognoPageTitle class="mb-5" name="Administración de Grandes Premios" />
+        <PTitle class="mb-5" name="Administración de Grandes Premios" />
 
         <nav class="block is-flex is-justify-content-space-between">
             <p class="control">
@@ -69,7 +69,7 @@
 </template>
 
 <script lang="ts">
-import PrognoPageTitle from "@/components/lib/PrognoPageTitle.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
 import PrognoModal from "@/components/lib/PrognoModal.vue";
 import {grandPrixService, notificationService, seasonService} from "@/_services";
@@ -85,7 +85,7 @@ export default defineComponent({
     components: {
         PrognoModal,
         AlertNoPermission,
-        PrognoPageTitle,
+        PTitle,
     },
     setup() {
         const authStore = useAuthStore();