docs: format docs and add ajax bar zhCN doc

packages/docs/components/data-presentation/list.md

@@ -19,6 +19,7 @@ const items = [
   { label: 'Grapes' },
 ]
 </script>
+
 <template>
   <c-list :items="items" />
 </template>
@@ -38,6 +39,7 @@ const items = [
 ]
 const size = ref('md')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div
@@ -69,6 +71,7 @@ const items = [
   { label: 'Grapes' },
 ]
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -91,6 +94,7 @@ const items = [
 ]
 const activeItem = ref('Banana')
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -110,10 +114,10 @@ This is an example for using `c-info-item` as `item`
 import { ref } from 'vue'
 import {
   matCheck,
-  matSettingsPower,
-  matPersonAddAlt1,
   matOfflineBolt,
+  matPersonAddAlt1,
   matSettings,
+  matSettingsPower,
 } from '@quasar/extras/material-icons/index'
 const items = [
   { title: 'Notification', subtitle: 'Some notification description', icon: matOfflineBolt },
@@ -123,14 +127,15 @@ const items = [
 ]
 const activeItem = ref('')
 </script>
+
 <template>
   <c-list
     :items="items"
     clickable
     :active-fn="item => item.title === activeItem"
     @item-click="item => (activeItem = item.title)"
   >
-    <template #item="{ isActive, clickable, item }">
+    <template #item="{ isActive, item }">
       <c-info-item v-bind="item">
         <template
           v-if="isActive"
@@ -145,6 +150,7 @@ const activeItem = ref('')
     </template>
   </c-list>
 </template>
+
 <style
   scoped
   lang="scss"

packages/docs/components/data-presentation/table.md

@@ -30,6 +30,7 @@ const tableColumns = [
   { title: 'Gender', field: 'gender' },
 ]
 </script>
+
 <template>
   <c-table
     row-key="name"
@@ -53,6 +54,7 @@ const tableColumns = [
   { title: 'Gender', field: 'gender' },
 ]
 </script>
+
 <template>
   <c-table row-key="name" :data="tableData" :columns="tableColumns">
     <template #th-name="{ title }">
@@ -79,6 +81,7 @@ const tableColumns = [
   { title: 'Operations', field: 'operations' },
 ]
 </script>
+
 <template>
   <c-table row-key="name" :data="tableData" :columns="tableColumns">
     <template #td-operations>

packages/docs/components/feedback/dialog.md

@@ -10,6 +10,7 @@ componentPath: popup/CDialog
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog v-model="show" title="Hi, there">
     <div>Hello, world</div>
@@ -26,6 +27,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -46,6 +48,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -67,6 +70,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -88,9 +92,9 @@ const show = ref(false)
 <script setup>
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
   matFullscreenExit,
 } from '@quasar/extras/material-icons/index'
 import { ref } from 'vue'
@@ -105,6 +109,7 @@ const openWithPosition = (h, v) => {
   show.value = true
 }
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -192,10 +197,11 @@ import { ref } from 'vue'
 import { matPeople } from '@quasar/extras/material-icons/index'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog v-model="show">
     <template #title>
-      <img class="title-icon" src="/logo-dark.svg" />
+      <img class="title-icon" src="/logo-dark.svg">
     </template>
     <template #close-icon>
       <c-icon :content="matPeople" />
@@ -219,6 +225,7 @@ const show = ref(false)
   </c-dialog>
   <c-button label="Open Dialog" @click="show = true" />
 </template>
+
 <style scoped>
 .title-icon {
   width: 80px;
@@ -236,18 +243,20 @@ const top = ref(false)
 const right = ref(false)
 const bottom = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="left"
     exchange-animation-direction
     title="Left Drawer"
     :rounded="false"
     :custom-style="{
-      height: '100vh'
+      height: '100vh',
     }"
     width="80vw"
     vertical-align="center"
-    horizontal-align="start">
+    horizontal-align="start"
+  >
     内容
   </c-dialog>
   <c-dialog
@@ -257,10 +266,11 @@ const bottom = ref(false)
     :rounded="false"
     width="80vw"
     :custom-style="{
-      height: '100vh'
+      height: '100vh',
     }"
     vertical-align="center"
-    horizontal-align="end">
+    horizontal-align="end"
+  >
     Content
   </c-dialog>
   <c-dialog
@@ -269,7 +279,8 @@ const bottom = ref(false)
     :rounded="false"
     width="100vw"
     vertical-align="start"
-    horizontal-align="center">
+    horizontal-align="center"
+  >
     Content
   </c-dialog>
   <c-dialog
@@ -278,7 +289,8 @@ const bottom = ref(false)
     :rounded="false"
     width="100vw"
     vertical-align="end"
-    horizontal-align="center">
+    horizontal-align="center"
+  >
     Content
   </c-dialog>
   <div class="c-row c-items-center c-wrap c-gutter-md">

packages/docs/components/feedback/drawer.md

@@ -18,8 +18,8 @@ const show = ref(false)
   />
 
   <CDrawer
-    title="Hi, there"
     v-model="show"
+    title="Hi, there"
   >
     Some drawer content
   </CDrawer>
@@ -33,9 +33,9 @@ const show = ref(false)
 import { ref } from 'vue'
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
 } from '@quasar/extras/material-icons/index'
 
 const show = ref(false)
@@ -84,9 +84,9 @@ function openWithPosition(pos) {
   </div>
 
   <c-drawer
+    v-model="show"
     title="Hi, there"
     :position="position"
-    v-model="show"
   >
     I'm some drawer content
   </c-drawer>

packages/docs/components/feedback/notification.md

@@ -40,6 +40,7 @@ const openWithCount = () => {
   })
 }
 </script>
+
 <template>
   <c-button label="Open notification" @click="openWithCount" />
 </template>
@@ -61,6 +62,7 @@ const openWithTheme = (theme) => {
   })
 }
 </script>
+
 <template>
   <div class="c-row c-items-center c-wrap c-gutter-md">
     <div>
@@ -97,9 +99,9 @@ const openWithTheme = (theme) => {
 <script setup>
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
   matFullscreenExit,
 } from '@quasar/extras/material-icons/index'
 import { useNotifications } from '@casual-ui/vue'
@@ -115,6 +117,7 @@ const openWithPosition = (alignX, alignY) => {
   })
 }
 </script>
+
 <template>
   <div class="c-row c-gutter-sm">
     <div>
@@ -197,6 +200,7 @@ import { useNotifications } from '@casual-ui/vue'
 
 const { open } = useNotifications()
 </script>
+
 <template>
   <c-button
     label="Open notification"
@@ -222,7 +226,7 @@ import { useNotifications } from '@casual-ui/vue'
 
 const { open } = useNotifications()
 
-let close = ref(null)
+const close = ref(null)
 
 const onClick = () => {
   if (!close.value) {
@@ -232,12 +236,14 @@ const onClick = () => {
       timeout: 0,
       closeIcon: false,
     }).close
-  } else {
+  }
+  else {
     close.value()
     close.value = null
   }
 }
 </script>
+
 <template>
   <c-button
     :label="close ? 'Close notification' : 'Open notification'"
@@ -284,6 +290,7 @@ const openWithDynamicContent = () => {
   }, 2000)
 }
 </script>
+
 <template>
   <c-button label="Open dynamic notification" @click="openWithDynamicContent" />
 </template>

packages/docs/components/feedback/tooltip.md

@@ -32,17 +32,20 @@ const positions = [
   'left-bottom',
 ]
 </script>
+
 <template>
   <div class="tooltips">
     <c-tooltip
       v-for="p in positions"
+      :key="p"
       :content="`A message rom position ${p}`"
       :position="p"
     >
       {{ p }}
     </c-tooltip>
   </div>
 </template>
+
 <style scoped>
 .tooltips {
   display: grid;
@@ -79,6 +82,7 @@ const positions = [
     </template>
   </c-tooltip>
 </template>
+
 <style scoped>
 .custom-content {
   white-space: nowrap;
@@ -100,6 +104,7 @@ const toggleShow = () => {
   show.value = !show.value
 }
 </script>
+
 <template>
   <div class="popups">
     <c-tooltip content="Hello, world">
@@ -135,6 +140,7 @@ const toggleShow = () => {
     </div>
   </div>
 </template>
+
 <style scoped>
 .popups {
   display: flex;