feat(ResourcePage): replace fab by regular buttons

simsustech · Dec 16, 2024 · 16ce5f9 · 16ce5f9
1 parent 7e374f3
commit 16ce5f9
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 29 deletions.
diff --git a/.changeset/shiny-jeans-double.md b/.changeset/shiny-jeans-double.md
@@ -0,0 +1,5 @@
+---
+"@simsustech/quasar-components": patch
+---
+
+feat(ResourcePage): replace fab by regular buttons
diff --git a/packages/components/src/ui/general/ResourcePage.vue b/packages/components/src/ui/general/ResourcePage.vue
@@ -8,34 +8,56 @@
         class="shadow-2"
         :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
       >
-        <slot name="fab" />
-        <q-btn
-          v-if="type === 'create'"
-          :disable="disabled"
-          flat
-          style="margin-bottom: -50px; z-index: 5"
-          round
-          size="lg"
-          dense
-          icon="add"
-          class="q-mr-sm bg-primary text-white"
-          @click="create"
-        />
-        <q-btn
-          v-else-if="type === 'update'"
-          :disable="disabled"
-          flat
-          style="margin-bottom: -50px; z-index: 5"
-          round
-          size="lg"
-          dense
-          icon="edit"
-          class="q-mr-sm bg-primary text-white"
-          @click="update"
-        />
-        <q-toolbar-title>
+        <div v-if="topBarFab">
+          <slot name="fab" />
+          <q-btn
+            v-if="type === 'create'"
+            :disable="disabled"
+            flat
+            style="margin-bottom: -50px; z-index: 5"
+            round
+            size="lg"
+            dense
+            icon="add"
+            class="q-mr-sm bg-primary text-white"
+            @click="create"
+          />
+          <q-btn
+            v-else-if="type === 'update'"
+            :disable="disabled"
+            flat
+            style="margin-bottom: -50px; z-index: 5"
+            round
+            size="lg"
+            dense
+            icon="edit"
+            class="q-mr-sm bg-primary text-white"
+            @click="update"
+          />
+        </div>
+        <q-toolbar-title :shrink="topBarShrink">
           <slot name="header" />
         </q-toolbar-title>
+        <div v-if="!topBarFab">
+          <slot name="top-bar-buttons" />
+          <q-btn
+            v-if="type === 'create'"
+            :disable="disabled"
+            :label="lang.add"
+            icon="add"
+            outline
+            @click="create"
+          />
+          <q-btn
+            v-else-if="type === 'update'"
+            :disable="disabled"
+            :label="lang.edit"
+            icon="edit"
+            outline
+            @click="update"
+          />
+        </div>
+        <q-space horizontal />
         <slot name="header-side" />
       </q-toolbar>
     </q-page-sticky>
@@ -56,8 +78,15 @@ import { useLang, loadLang } from './lang'
 export interface Props {
   type?: 'create' | 'update'
   disabled?: boolean
+  topBarFab?: boolean
+  topBarShrink?: boolean
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  type: undefined,
+  disabled: false,
+  topBarFab: false,
+  topBarShrink: true
+})
 
 const emit = defineEmits<{
   (

diff --git a/packages/components/src/ui/general/lang/en-US.ts b/packages/components/src/ui/general/lang/en-US.ts
@@ -5,7 +5,9 @@ const lang: Language = {
   submit: 'Submit',
   next: 'Next',
   back: 'Back',
-  send: 'Send'
+  send: 'Send',
+  add: 'Add',
+  edit: 'Edit'
 }
 
 export default lang
diff --git a/packages/components/src/ui/general/lang/index.ts b/packages/components/src/ui/general/lang/index.ts
@@ -4,6 +4,8 @@ export interface Language {
   next: string
   back: string
   send: string
+  add: string
+  edit: string
 }
 
 import type { Ref } from 'vue'

diff --git a/packages/components/src/ui/general/lang/nl.ts b/packages/components/src/ui/general/lang/nl.ts
@@ -5,7 +5,9 @@ const lang: Language = {
   submit: 'Opslaan',
   next: 'Volgende',
   back: 'Vorige',
-  send: 'Versturen'
+  send: 'Versturen',
+  add: 'Toevoegen',
+  edit: 'Aanpassen'
 }
 
 export default lang