chore: filtros de conteúdo componentizados e disponiveis dentro do ex…

src/components/theme/ContentLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IonButtons, IonFooter, IonHeader, IonIcon, IonMenuButton, IonNote, IonTitle, IonToolbar } from '@ionic/vue'
+import { IonButtons, IonFooter, IonHeader, IonMenuButton, IonNote, IonTitle, IonToolbar } from '@ionic/vue'
 import { onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -45,7 +45,7 @@ watch(
           <IonMenuButton color="primary" />
         </IonButtons>
         <slot name="header-buttons" />
-        <IonIcon v-if="metaIcon" slot="start" :icon="metaIcon" size="large" class="ion-margin-start" />
+        <!-- Removi o icone pois causava poluição visual <IonIcon v-if="metaIcon" slot="start" :icon="metaIcon" size="large" class="ion-margin-start" /> -->
         <IonTitle>{{ metaName }}</IonTitle>
         <slot name="header-right" />
       </IonToolbar>

src/components/theme/FilterButtons.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { IonIcon } from '@ionic/vue'
+import { businessOutline, list, peopleOutline } from 'ionicons/icons'
+import { defineEmits, ref, watch } from 'vue'
+
+const emits = defineEmits(['update:modelValue'])
+
+const chosenButton = ref('')
+
+watch(chosenButton, (newValue) => {
+  if (newValue && newValue.length > 0) {
+    emits('update:modelValue', newValue)
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <ion-grid class="ion-padding-bottom">
+    <ion-row>
+      <ion-col size="12" size-lg="6" class="button-col">
+        <button class="ion-padding-horizontal filter-content-button text-button-start school-button" @click="chosenButton = 'school'">
+          <IonIcon color="lightaccent" class="button-icon" :ios="businessOutline" :md="businessOutline" />
+          <ion-text color="lightaccent" style="margin-top: auto; margin-bottom: auto;">
+            Escola
+          </ion-text>
+        </button>
+      </ion-col>
+      <ion-col size="6" size-lg="3" class="button-col">
+        <button class="ion-padding-horizontal filter-content-button text-button-start series-button" @click="chosenButton = 'series'">
+          <IonIcon color="lightaccent" class="button-icon" :ios="list" :md="list" />
+          <ion-text color="lightaccent" style="margin-top: auto; margin-bottom: auto;">
+            Série
+          </ion-text>
+        </button>
+      </ion-col>
+      <ion-col size="6" size-lg="3" class="button-col">
+        <button class="ion-padding-horizontal filter-content-button text-button-start shift-button" @click="chosenButton = 'shift'">
+          <IonIcon color="lightaccent" class="button-icon" :ios="peopleOutline" :md="peopleOutline" />
+          <ion-text color="lightaccent" style="margin-top: auto; margin-bottom: auto;">
+            Turma
+          </ion-text>
+        </button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+
+<style scoped>
+  .button-col {
+    padding: 0; display: flex; height: 44px;
+  }
+  .button-icon {
+    margin-top: auto; margin-bottom: auto; margin-right: 8px;
+  }
+
+  .text-button-start {
+    display: flex ; justify-content: start ;
+  }
+
+  .school-button {
+    background-color: var(--ion-color-secondary); width: 100%; height: 100%; border-top-right-radius: 5px; border-top-left-radius: 5px;
+  }
+
+  .series-button {
+    background-color: var(--ion-color-tertiary); width: 100%; height: 100%; border-bottom-left-radius: 5px;
+  }
+
+  .shift-button {
+    background-color: var(--ion-color-primary); width: 100%; height: 100%; border-bottom-right-radius: 5px;
+  }
+
+  .school-button:active {
+    background-color: var(--ion-color-secondary-tint);
+  }
+
+  .series-button:active {
+    background-color: var(--ion-color-tertiary-tint);
+  }
+
+  .shift-button:active {
+    background-color: var(--ion-color-primary-tint);
+  }
+</style>

src/components/theme/FilterExpansor.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { IonAccordion, IonAccordionGroup, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon } from '@ionic/vue'
+import { arrowDown, arrowUp } from 'ionicons/icons'
+import { defineProps, ref } from 'vue'
+
+interface Props {
+  title: string
+  subtitle: string
+}
+
+const props = defineProps<Props>()
+const accordion = ref(false)
+
+function handleAccordionChange(event: CustomEvent) {
+  accordion.value = event.detail.value === 'first'
+}
+</script>
+
+<template>
+  <IonAccordionGroup @ion-change="handleAccordionChange">
+    <IonAccordion value="first">
+      <div slot="header" style="display: flex;" :style="accordion ? 'background-color: #F9D3E350;' : 'background-color: white'">
+        <IonCardHeader style="margin-top: auto; margin-bottom: auto;">
+          <IonCardTitle>
+            {{ props.title }}
+          </IonCardTitle>
+          <IonCardSubtitle>
+            {{ props.subtitle }}
+          </IonCardSubtitle>
+        </IonCardHeader>
+        <div style="margin-top: auto; margin-bottom: auto; margin-left: auto;" class="ion-padding-horizontal">
+          <ion-button :color="accordion ? 'tertiary' : 'primary'">
+            <IonIcon :icon="accordion ? arrowUp : arrowDown" />
+          </ion-button>
+        </div>
+      </div>
+      <div id="accordionContent" slot="content" style="background-color: #F9D3E350; box-shadow: inset 0 -5px 6px rgba(0, 0, 0, 0.2);" class="ion-padding-horizontal ion-padding-bottom">
+        <slot />
+      </div>
+    </IonAccordion>
+  </IonAccordionGroup>
+</template>

src/components/theme/OverlayModal.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { IonButtons, IonContent, IonIcon, IonTitle, IonToolbar } from '@ionic/vue'
+import { arrowBack } from 'ionicons/icons'
+import { defineEmits, defineProps, ref } from 'vue'
+
+interface Props {
+  actionName: string
+  trigger: string
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
+const modal = ref<HTMLIonModalElement | null>(null)
+
+function cancel() {
+  if (modal.value) {
+    modal.value.dismiss(null, 'cancel')
+    emits('update:modelValue', true)
+  }
+}
+</script>
+
+<template>
+  <ion-modal ref="modal" :trigger="props.trigger" width="100%" :initial-breakpoint="0.7">
+    <IonContent>
+      <IonToolbar class="ion-margin-bottom" style="box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.25);">
+        <IonTitle>{{ props.actionName }} </IonTitle>
+        <IonButtons slot="start">
+          <ion-button id="cancelar" @click="cancel()">
+            <IonIcon slot="icon-only" :ios="arrowBack" :md="arrowBack" />
+          </ion-button>
+        </IonButtons>
+      </IonToolbar>
+      <slot />
+    </IonContent>
+  </ion-modal>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.filter-content-button {
+  font-size: 12pt;
+  display: flex ;
+  justify-content: start
+}
+</style>

src/layouts/blank.vue

@@ -3,7 +3,7 @@ import { IonApp, IonRouterOutlet } from '@ionic/vue'
 </script>
 
 <template>
-    <IonApp>
-        <slot />
-    </IonApp>
+  <IonApp>
+    <slot />
+  </IonApp>
 </template>