add: subheader

Subheader for dynamic content

app/pages/index.vue

@@ -12,13 +12,11 @@
           :current-card-index="currentCardIndex"
           @update="updateCard()"
       />
-      <div class="search-bar">
-        <PpFormSearch
-          v-model="search"
-          label="Suche nach Klopapier!"
-          id="search_field"
-        />
-      </div>
+      <Teleport to="#subheader">
+        <div class="search-bar">
+          <p>Preise. Schnell. Unkompliziert.</p>
+        </div>
+      </Teleport>
       <section class="content flex-col">
         <aside class="filter-bar">
           <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
@@ -38,15 +36,6 @@
         </div>
       </section>
       <PpToolbar>
-        <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
-          <Icon class="icon" name="uil:refresh" mode="svg" />
-          <span>Neu sortieren</span>
-          <span
-              class="dot"
-              :class="{ visible : isDirty}"
-              aria-hidden="true"
-          />
-        </PpButton>
         <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
           <Icon class="icon" name="uil:plus" mode="svg" />
           <span>Hinzufügen</span>
@@ -63,15 +52,12 @@ import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
 
 const cards = useLocalStorage<Card[]>('cards', [])
 const currentSort = useLocalStorage<number>('sort', 0)
-const isDirty = ref(false)
 const currentCard = ref<Card>()
 const currentCardIndex = ref<number>(-1)
 const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
-const search = ref('')
-
 const createCard = (uuid : string) : Card => ({
   uuid,
   name: '',
@@ -84,12 +70,12 @@ const createCard = (uuid : string) : Card => ({
 
 const addCard = (card : Card) => {
   cards.value.unshift({ ...card })
-  isDirty.value = true
+  sort()
 }
 
 const removeCard = (index : number) => {
   cards.value.splice(index, 1)
-  isDirty.value = true
+  sort()
 }
 
 const updateCard = () => {
@@ -100,7 +86,7 @@ const updateCard = () => {
 
   const newCard = { ...currentCard.value! }
   cards.value.splice(currentCardIndex.value, 1, newCard)
-  isDirty.value = true
+  sort()
 }
 
 const openModal = (createNew : boolean, index : number) => {
@@ -149,23 +135,17 @@ const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
   })
 }
 
-const sort = (index : number) => {
+const sort = async (index : number = currentSort.value) => {
   currentSort.value = index
   filterButtons.value.forEach(button => { button.active = false })
   filterButtons.value[index]!.active = true
 
-  switch (index) {
-    case 0:
-      sortBy('ppr')
-      break
-    case 1:
-      sortBy('pps')
-      break
-    case 2:
-      sortBy('ppl')
-      break
-  }
+  await nextTick()
 
-  isDirty.value = false
+  switch (index) {
+    case 0: return sortBy('ppr')
+    case 1: return sortBy('pps')
+    case 2: return sortBy('ppl')
+  }
 }
 </script>