@awes-io/ui 2.143.0 → 2.144.1

package/docs/guides/page-patterns/detail-pages.md

@@ -137,6 +137,13 @@ The primary action button (Save, Create, etc.) MUST use the `:action` prop and `
                 />
             </AwGrid>
         </AwCard>
+
+        <AwCard title="Profile picture">
+            <AwImageUpload
+                v-model="customer.avatar"
+                @loading="customer.saving = $event"
+            />
+        </AwCard>
     </AwPageSingle>
 </template>
 
@@ -177,7 +184,7 @@ export default {
                 await this.customer.fetch()
             } catch (error) {
                 this.$notify({
-                    message: 'Customer not found',
+                    title: 'Customer not found',
                     type: 'error'
                 })
                 this.$router.push(`/${this.$route.params.shop_uuid}/customers`)
@@ -191,14 +198,14 @@ export default {
                 await this.customer.save()
 
                 this.$notify({
-                    message: `Customer ${this.customer.isNew() ? 'created' : 'updated'} successfully`,
+                    title: `Customer ${this.customer.isNew() ? 'created' : 'updated'} successfully`,
                     type: 'success'
                 })
 
                 this.$router.push(`/${this.$route.params.shop_uuid}/customers`)
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to save customer',
+                    title: 'Failed to save customer',
                     type: 'error'
                 })
             }
@@ -208,13 +215,70 @@ export default {
 </script>
 ```
 
-**What happens:**
-1. ✅ Model initialized with ID from route params
-2. ✅ If editing, `fetch()` loads existing data
-3. ✅ Form fields bound to model properties
-4. ✅ Save button shows loading state via `customer.saving`
-5. ✅ Validation errors display next to fields
-6. ✅ Success redirects to list page
+## Preview Slot Patterns
+
+We have two standard patterns for the `#preview` slot in `AwPageSingle` to maintain visual consistency across the application.
+
+### Human Entities (Users, Customers)
+
+Used for people. Displays a large avatar and the person's name.
+
+```markup
+<template #preview>
+    <AwCard class="text-center">
+        <AwAvatar
+            :src="user.avatar"
+            :name="userName"
+            size="240"
+            class="mx-auto"
+        />
+        <AwHeadline class="mt-4">
+            {{ userName }}
+        </AwHeadline>
+    </AwCard>
+</template>
+```
+
+### Non-Human Entities (Services, Products, Locations)
+
+Used for items with a representative image. Displays a large image with rounded corners.
+
+```markup
+<template #preview>
+    <AwCard style="--card-padding-x: 0.5rem; --card-padding-y: 0.5rem;">
+        <AwActionIcon
+            :size="380"
+            :image="item.image ? { src: item.image, alt: item.name } : null"
+            icon="awesio/image"
+            icon-color="mono-400"
+            color="mono-800"
+            class="w-full"
+            style="--icon-size: 48px; --radius: 0.5rem;"
+        />
+        <AwHeadline class="p-4 mt-2">
+            {{ item.name }}
+        </AwHeadline>
+    </AwCard>
+</template>
+```
+
+## Image Uploads
+
+For entities with images (avatars or item photos), provide an `AwImageUpload` component in its own `AwCard`.
+
+```markup
+<AwCard title="Profile picture">
+    <AwImageUpload
+        v-model="user.avatar"
+        @loading="user.saving = $event"
+    />
+</AwCard>
+```
+
+**Key Points:**
+- ✅ Use a separate `AwCard` with an appropriate title.
+- ✅ Bind `v-model` to the model's image/avatar property.
+- ✅ Listen to `@loading` to set the model's `saving` state, preventing form submission during upload.
 
 ## Model Initialization
 
@@ -322,7 +386,7 @@ export default {
                 await this.service.fetch()
             } catch (error) {
                 this.$notify({
-                    message: 'Service not found',
+                    title: 'Service not found',
                     type: 'error'
                 })
                 this.$router.push('/services')
@@ -610,7 +674,7 @@ async save() {
     // Check if validation failed
     if (Object.keys(this.model.errors).length > 0) {
         this.$notify({
-            message: 'Please fix validation errors',
+            title: 'Please fix validation errors',
             type: 'error'
         })
         return
@@ -618,7 +682,7 @@ async save() {
 
     // Success path
     this.$notify({
-        message: 'Saved successfully',
+        title: 'Saved successfully',
         type: 'success'
     })
     this.$router.push('/list')
@@ -636,7 +700,7 @@ async mounted() {
             // 404 - Record not found
             if (error.response?.status === 404) {
                 this.$notify({
-                    message: 'Record not found',
+                    title: 'Record not found',
                     type: 'error'
                 })
                 this.$router.push('/list')
@@ -645,7 +709,7 @@ async mounted() {
 
             // Other errors
             this.$notify({
-                message: 'Failed to load data',
+                title: 'Failed to load data',
                 type: 'error'
             })
         }
@@ -897,13 +961,13 @@ export default {
             try {
                 await this.model.save()
                 this.$notify({
-                    message: `Item ${this.model.isNew() ? 'created' : 'updated'} successfully`,
+                    title: `Item ${this.model.isNew() ? 'created' : 'updated'} successfully`,
                     type: 'success'
                 })
                 this.$router.push('/list')
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to save item',
+                    title: 'Failed to save item',
                     type: 'error'
                 })
             }
@@ -918,7 +982,7 @@ export default {
 
                 await this.model.delete()
                 this.$notify({
-                    message: 'Item deleted successfully',
+                    title: 'Item deleted successfully',
                     type: 'success'
                 })
                 this.$router.push('/list')
@@ -928,7 +992,7 @@ export default {
                 }
 
                 this.$notify({
-                    message: 'Failed to delete item',
+                    title: 'Failed to delete item',
                     type: 'error'
                 })
             }
@@ -1126,7 +1190,7 @@ export default {
                 await this.template.fetch()
             } catch (error) {
                 this.$notify({
-                    message: 'Template not found',
+                    title: 'Template not found',
                     type: 'error'
                 })
                 this.$router.push(`/${this.$route.params.shop_uuid}/templates`)
@@ -1140,14 +1204,14 @@ export default {
                 await this.template.save()
 
                 this.$notify({
-                    message: `Template ${this.template.isNew() ? 'created' : 'updated'} successfully`,
+                    title: `Template ${this.template.isNew() ? 'created' : 'updated'} successfully`,
                     type: 'success'
                 })
 
                 this.$router.push(`/${this.$route.params.shop_uuid}/templates`)
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to save template',
+                    title: 'Failed to save template',
                     type: 'error'
                 })
             }
@@ -1347,7 +1411,7 @@ export default {
                 await this.product.fetch()
             } catch (error) {
                 this.$notify({
-                    message: 'Product not found',
+                    title: 'Product not found',
                     type: 'error'
                 })
                 this.$router.push(`/${this.$route.params.shop_uuid}/products`)
@@ -1366,14 +1430,14 @@ export default {
                 await this.product.save()
 
                 this.$notify({
-                    message: `Product ${this.product.isNew() ? 'created' : 'updated'} successfully`,
+                    title: `Product ${this.product.isNew() ? 'created' : 'updated'} successfully`,
                     type: 'success'
                 })
 
                 this.$router.push(`/${this.$route.params.shop_uuid}/products`)
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to save product',
+                    title: 'Failed to save product',
                     type: 'error'
                 })
             }
@@ -1406,7 +1470,6 @@ export default {
     }
 }
 </script>
-```
 
 ## Best Practices
 

package/docs/guides/page-patterns/list-pages.md

@@ -235,8 +235,8 @@ export default {
     computed: {
         statusOptions() {
             return [
-                { id: true, title: 'Active' },
-                { id: false, title: 'Inactive' }
+                { id: 'true', title: 'Active' },
+                { id: 'false', title: 'Inactive' }
             ]
         },
 
@@ -284,6 +284,154 @@ export default {
 - ✅ **Place search on the right** using `ml-auto` class
 - ✅ **Handle different value types** - Values can be strings, booleans, arrays, or comma-separated strings
 
+## Button Nav Filtering
+
+For simple toggle filters (like Active/Inactive, All/Pending/Completed), use `AwButtonNav` with query parameters:
+
+### Basic Button Nav Filter
+
+```markup
+<template>
+    <AwPage title="Services">
+        <AwButtonNav :items="filterItems" class="mb-6" />
+
+        <AwTableBuilder
+            :collection="services"
+            :watch-params="['is_active']"
+        >
+            <AwTableCol field="name" title="Service" />
+            <AwTableCol field="price" title="Price" />
+        </AwTableBuilder>
+    </AwPage>
+</template>
+
+<script>
+import { BaseCollection } from '@awes-io/vue-mc'
+
+class Services extends BaseCollection {
+    routes() {
+        return {
+            fetch: '/api/services'
+        }
+    }
+}
+
+export default {
+    data() {
+        return {
+            services: new Services()
+        }
+    },
+
+    computed: {
+        filterItems() {
+            return [
+                {
+                    text: 'Active',
+                    href: { query: { is_active: null } }
+                },
+                {
+                    text: 'Inactive',
+                    href: { query: { is_active: '0' } }
+                }
+            ]
+        }
+    }
+}
+</script>
+```
+
+**How it works:**
+1. ✅ `AwButtonNav` items use `href: { query: { param: value } }` format
+2. ✅ Setting `param: null` removes the parameter from URL (shows all active items)
+3. ✅ Setting `param: '0'` adds `is_active=0` to URL (shows inactive items)
+4. ✅ `AwTableBuilder` watches `is_active` param via `:watch-params`
+5. ✅ Table automatically refetches when query parameter changes
+
+### Multiple Filter Options
+
+For filters with more than two options:
+
+```markup
+<template>
+    <AwPage title="Orders">
+        <AwButtonNav :items="statusFilters" class="mb-6" />
+
+        <AwTableBuilder
+            :collection="orders"
+            :watch-params="['status']"
+        >
+            <AwTableCol field="number" title="Order #" />
+            <AwTableCol field="total" title="Total" />
+        </AwTableBuilder>
+    </AwPage>
+</template>
+
+<script>
+export default {
+    computed: {
+        statusFilters() {
+            return [
+                {
+                    text: 'All',
+                    href: { query: { status: null } }
+                },
+                {
+                    text: 'Pending',
+                    href: { query: { status: 'pending' } }
+                },
+                {
+                    text: 'Completed',
+                    href: { query: { status: 'completed' } }
+                },
+                {
+                    text: 'Cancelled',
+                    href: { query: { status: 'cancelled' } }
+                }
+            ]
+        }
+    }
+}
+</script>
+```
+
+### Button Nav with Icons
+
+You can add icons to filter buttons:
+
+```markup
+<template>
+    <AwButtonNav :items="filterItems" class="mb-6" />
+</template>
+
+<script>
+export default {
+    computed: {
+        filterItems() {
+            return [
+                {
+                    text: 'Active',
+                    icon: 'awesio/check-circle',
+                    href: { query: { is_active: null } }
+                },
+                {
+                    text: 'Inactive',
+                    icon: 'awesio/x-circle',
+                    href: { query: { is_active: '0' } }
+                }
+            ]
+        }
+    }
+}
+</script>
+```
+
+**Best Practices:**
+- ✅ **Use for simple toggle filters** - Best for 2-4 options (Active/Inactive, All/Pending/Completed)
+- ✅ **Use `null` to remove parameters** - Setting `param: null` removes it from URL, showing unfiltered results
+- ✅ **Use `AwFilterSelect` for complex filters** - When you have many options or need multi-select, use `AwFilterSelect` instead
+- ✅ **Combine with search** - Button nav filters work well alongside `AwSearch` for combined filtering
+
 ## Custom Column Rendering
 
 ### Understanding the `field` Prop
@@ -689,13 +837,13 @@ export default {
             try {
                 await this.$axios.delete(`/api/templates/${item.id}`)
                 this.$notify({
-                    message: 'Template deleted successfully',
+                    title: 'Template deleted successfully',
                     type: 'success'
                 })
                 this.templates.fetch() // Refetch list
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to delete template',
+                    title: 'Failed to delete template',
                     type: 'error'
                 })
             }
@@ -960,13 +1108,13 @@ export default {
             try {
                 await this.$axios.post(`/api/templates/${template.id}/duplicate`)
                 this.$notify({
-                    message: 'Template duplicated successfully',
+                    title: 'Template duplicated successfully',
                     type: 'success'
                 })
                 this.templates.fetch()
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to duplicate template',
+                    title: 'Failed to duplicate template',
                     type: 'error'
                 })
             }
@@ -978,13 +1126,13 @@ export default {
                     is_active: !template.is_active
                 })
                 this.$notify({
-                    message: `Template ${template.is_active ? 'deactivated' : 'activated'}`,
+                    title: `Template ${template.is_active ? 'deactivated' : 'activated'}`,
                     type: 'success'
                 })
                 this.templates.fetch()
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to update template',
+                    title: 'Failed to update template',
                     type: 'error'
                 })
             }
@@ -1001,13 +1149,13 @@ export default {
             try {
                 await this.$axios.delete(`/api/templates/${template.id}`)
                 this.$notify({
-                    message: 'Template deleted successfully',
+                    title: 'Template deleted successfully',
                     type: 'success'
                 })
                 this.templates.fetch()
             } catch (error) {
                 this.$notify({
-                    message: 'Failed to delete template',
+                    title: 'Failed to delete template',
                     type: 'error'
                 })
             }