From fb7c00a90959e8fec0a3406d8dee93c77c0aec22 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Fri, 7 Jul 2023 23:32:38 +0800
Subject: [PATCH] Update Vue docs

---
 MyApp/_pages/vue/autoquerygrid.md             |  6 +-
 MyApp/wwwroot/pages/vue/autoquerygrid.mjs     | 86 ++-----------------
 .../pages/vue/autoquerygrid/CustomBooking.mjs | 30 +++++++
 .../pages/vue/autoquerygrid/Responsive.mjs    | 52 +++++++++++
 4 files changed, 94 insertions(+), 80 deletions(-)
 create mode 100644 MyApp/wwwroot/pages/vue/autoquerygrid/CustomBooking.mjs
 create mode 100644 MyApp/wwwroot/pages/vue/autoquerygrid/Responsive.mjs

diff --git a/MyApp/_pages/vue/autoquerygrid.md b/MyApp/_pages/vue/autoquerygrid.md
index b7ff25f3fd..f61dc5aa3e 100644
--- a/MyApp/_pages/vue/autoquerygrid.md
+++ b/MyApp/_pages/vue/autoquerygrid.md
@@ -159,7 +159,9 @@ Which columns are displayed and how they're formatted are further customizable w
         <span class="hidden lg:inline">Room </span>No
     </template>
 
-    <template #cost="{ cost }" v-html="currency(cost)"></template>
+    <template #cost="{ cost }">
+        <span v-html="currency(cost)"></span>
+    </template>
     
     <template #bookingStartDate-header>
         Start<span class="hidden lg:inline"> Date</span>
@@ -176,6 +178,8 @@ Which columns are displayed and how they're formatted are further customizable w
 </AutoQueryGrid>
 ```
 
+<responsive class="not-prose mb-4"></responsive>
+
 <h2 class="pt-8 mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
   Custom Functionality
 </h2>
diff --git a/MyApp/wwwroot/pages/vue/autoquerygrid.mjs b/MyApp/wwwroot/pages/vue/autoquerygrid.mjs
index 68a3fe0d5d..1b44fb50e5 100644
--- a/MyApp/wwwroot/pages/vue/autoquerygrid.mjs
+++ b/MyApp/wwwroot/pages/vue/autoquerygrid.mjs
@@ -1,85 +1,12 @@
-import { ref, onMounted } from "vue"
-import { Authenticate, QueryCoupons } from "./dtos.mjs"
-import { useAuth, useClient, useFormatters } from '@servicestack/vue'
+import { onMounted } from "vue"
+import { Authenticate } from "./dtos.mjs"
+import { useAuth, useClient } from '@servicestack/vue'
 import { JsonApiClient } from "@servicestack/client"
-
-export const Responsive = {
-    template:`<AutoQueryGrid type="Booking" :visibleFrom="{ name:'xl', bookingStartDate:'sm', bookingEndDate:'xl', createdBy:'2xl' }">
-        <template #id="{ id }">
-            <span class="text-gray-900">{{ id }}</span>
-        </template>
-        
-        <template #name="{ name }">
-            {{ name }}
-        </template>
-        
-        <template #roomNumber-header>
-            <span class="hidden lg:inline">Room </span>No
-        </template>
-    
-        <template #cost="{ cost }">{{ currency(cost) }}</template>
-        
-        <template #bookingStartDate-header>
-            Start<span class="hidden lg:inline"> Date</span>
-        </template>
-        
-        <template #bookingEndDate-header>
-            End<span class="hidden lg:inline"> Date</span>
-        </template>
-    
-        <template #createdBy-header>
-            Employee
-        </template>
-        <template #createdBy="{ createdBy }">{{ createdBy }}</template>
-    </AutoQueryGrid>`,
-    setup() {
-        const client = useClient()
-        const coupon = ref()
-        const { currency } = useFormatters()
-        
-        /** @param {string} id */
-        async function showCoupon(id) {
-            const api = await client.api(new QueryCoupons({ id }))
-            if (api.succeeded) {
-                coupon.value = api.response.results[0]
-            }
-        }
-        const close = () => coupon.value = null
-        
-        return { coupon, showCoupon, close, currency }
-    }
-}
-
-export const CustomBooking = {
-    template:`<div>
-        <AutoQueryGrid type="Booking" selectedColumns="id,name,cost,bookingStartDate,bookingEndDate,discount">
-            <template #discount="{ discount }">
-                <TextLink v-if="discount" class="flex items-end" @click.stop="showCoupon(discount.id)" :title="discount.id">
-                    <Icon class="w-5 h-5 mr-1" type="Coupon" />
-                    <PreviewFormat :value="discount.description" />
-                </TextLink>
-            </template>
-        </AutoQueryGrid>
-        <AutoEditForm v-if="coupon" type="UpdateCoupon" v-model="coupon" @done="close" @save="close" />
-    </div>`,
-    setup() {
-        const client = useClient()
-        const coupon = ref()
-        /** @param {string} id */
-        async function showCoupon(id) {
-            const api = await client.api(new QueryCoupons({ id }))
-            if (api.succeeded) {
-                coupon.value = api.response.results[0]
-            }
-        }
-        const close = () => coupon.value = null
-        return { coupon, showCoupon, close }
-    }
-}
+import Responsive from "./autoquerygrid/Responsive.mjs"
+import CustomBooking from "./autoquerygrid/CustomBooking.mjs"
 
 export default {
     install(app) {
-        console.log('install(app)')
         app.provide('client', JsonApiClient.create('https://blazor-gallery-api.jamstacks.net'))
     },
     components: {
@@ -90,7 +17,8 @@ export default {
         const client = useClient()
         
         onMounted(async () => {
-            const api = await client.api(new Authenticate({ provider: 'credentials', userName:'admin@email.com', password:'p@55wOrd' }))
+            const api = await client.api(new Authenticate({ 
+                provider: 'credentials', userName:'admin@email.com', password:'p@55wOrd' }))
             if (api.succeeded) {
                 const { signIn } = useAuth()
                 signIn(api.response)
diff --git a/MyApp/wwwroot/pages/vue/autoquerygrid/CustomBooking.mjs b/MyApp/wwwroot/pages/vue/autoquerygrid/CustomBooking.mjs
new file mode 100644
index 0000000000..343d08db63
--- /dev/null
+++ b/MyApp/wwwroot/pages/vue/autoquerygrid/CustomBooking.mjs
@@ -0,0 +1,30 @@
+import { ref } from "vue"
+import { useClient } from "@servicestack/vue"
+import { QueryCoupons } from "../dtos.mjs"
+
+export default {
+    template:`<div>
+        <AutoQueryGrid type="Booking" selectedColumns="id,name,cost,bookingStartDate,bookingEndDate,discount">
+            <template #discount="{ discount }">
+                <TextLink v-if="discount" class="flex items-end" @click.stop="showCoupon(discount.id)" :title="discount.id">
+                    <Icon class="w-5 h-5 mr-1" type="Coupon" />
+                    <PreviewFormat :value="discount.description" />
+                </TextLink>
+            </template>
+        </AutoQueryGrid>
+        <AutoEditForm v-if="coupon" type="UpdateCoupon" v-model="coupon" @done="close" @save="close" />
+    </div>`,
+    setup() {
+        const client = useClient()
+        const coupon = ref()
+        /** @param {string} id */
+        async function showCoupon(id) {
+            const api = await client.api(new QueryCoupons({ id }))
+            if (api.succeeded) {
+                coupon.value = api.response.results[0]
+            }
+        }
+        const close = () => coupon.value = null
+        return { coupon, showCoupon, close }
+    }
+}
diff --git a/MyApp/wwwroot/pages/vue/autoquerygrid/Responsive.mjs b/MyApp/wwwroot/pages/vue/autoquerygrid/Responsive.mjs
new file mode 100644
index 0000000000..d1016133e1
--- /dev/null
+++ b/MyApp/wwwroot/pages/vue/autoquerygrid/Responsive.mjs
@@ -0,0 +1,52 @@
+import { ref } from "vue"
+import { useClient, useFormatters } from "@servicestack/vue"
+import { QueryCoupons } from "../dtos.mjs"
+
+export default {
+    template:`<AutoQueryGrid type="Booking" :visibleFrom="{ name:'xl', bookingStartDate:'sm', bookingEndDate:'xl', createdBy:'2xl' }">
+        <template #id="{ id }">
+            <span class="text-gray-900">{{ id }}</span>
+        </template>
+        
+        <template #name="{ name }">
+            {{ name }}
+        </template>
+        
+        <template #roomNumber-header>
+            <span class="hidden lg:inline">Room </span>No
+        </template>
+    
+        <template #cost="{ cost }">
+            <span v-html="currency(cost)"></span>
+        </template>
+        
+        <template #bookingStartDate-header>
+            Start<span class="hidden lg:inline"> Date</span>
+        </template>
+        
+        <template #bookingEndDate-header>
+            End<span class="hidden lg:inline"> Date</span>
+        </template>
+    
+        <template #createdBy-header>
+            Employee
+        </template>
+        <template #createdBy="{ createdBy }">{{ createdBy }}</template>
+    </AutoQueryGrid>`,
+    setup() {
+        const client = useClient()
+        const coupon = ref()
+        const { currency } = useFormatters()
+
+        /** @param {string} id */
+        async function showCoupon(id) {
+            const api = await client.api(new QueryCoupons({ id }))
+            if (api.succeeded) {
+                coupon.value = api.response.results[0]
+            }
+        }
+        const close = () => coupon.value = null
+
+        return { coupon, showCoupon, close, currency }
+    }
+}
\ No newline at end of file