docs: demos updated

therealokoro · Dec 4, 2022 · 298c1a7 · 298c1a7
1 parent d7200d1
commit 298c1a7
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 51 deletions.
diff --git a/docs/demos/list/DemoListBasic.vue b/docs/demos/list/DemoListBasic.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 </script>
 

diff --git a/docs/demos/list/DemoListSlots.vue b/docs/demos/list/DemoListSlots.vue
@@ -23,19 +23,20 @@ const items = [
         <template #append="{ index }">
           <ABtn
             variant="outline"
-            class="text-[0.6rem] font-semibold opacity-50"
+            class="text-sm opacity-35 min-h-[24px]"
             color="default"
             :states="false"
+            :spacing="50"
           >
-            Shift + {{ index + 1 }}
+            &#8984; + {{ index + 1 }}
           </ABtn>
         </template>
 
         <!-- 👉 Slot: After -->
         <template #after>
           <hr class="my-2">
           <AList
-            :items="[{ text: '4 items found' }]"
+            :items="[{ subtitle: '4 items found' }]"
             class="my-0 opacity-75"
           />
         </template>

diff --git a/docs/demos/list/DemoListVModelSupport.vue b/docs/demos/list/DemoListVModelSupport.vue
@@ -2,10 +2,10 @@
 import { ref } from 'vue'
 
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 
 const itemsPropSelection = ref(0)
@@ -23,7 +23,10 @@ const slotSelection = ref(0)
       >
         <template #after>
           <hr class="my-2">
-          <AList :items="[{ text: `Selected: ${itemsPropSelection}` }]" />
+          <AList
+            class="mb-0"
+            :items="[{ subtitle: `Selected: ${itemsPropSelection}` }]"
+          />
         </template>
       </AList>
     </ACard>
@@ -38,8 +41,8 @@ const slotSelection = ref(0)
         <template #default="{ handleListItemClick }">
           <AListItem
             v-for="(item, index) in items"
-            :key="item.title"
-            :title="item.title"
+            :key="item.text"
+            :text="item.text"
             :value="index"
             :disable="item.disable"
             :is-active="slotSelection === index"
@@ -48,7 +51,10 @@ const slotSelection = ref(0)
         </template>
         <template #after>
           <hr class="my-2">
-          <AList :items="[{ text: `Selected: ${slotSelection}` }]" />
+          <AList
+            class="mb-0"
+            :items="[{ subtitle: `Selected: ${slotSelection}` }]"
+          />
         </template>
       </AList>
     </ACard>

diff --git a/docs/demos/list/DemoListVariants.vue b/docs/demos/list/DemoListVariants.vue
@@ -2,10 +2,10 @@
 import { ref } from 'vue'
 
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 
 const selected = ref(0)

diff --git a/docs/demos/menu/DemoMenuBasic.vue b/docs/demos/menu/DemoMenuBasic.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 </script>
 

diff --git a/docs/demos/menu/DemoMenuMiddleware.vue b/docs/demos/menu/DemoMenuMiddleware.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 
 const middleware = (referenceEl: HTMLElement, floatingEl: HTMLElement) => {

diff --git a/docs/demos/menu/DemoMenuPersistence.vue b/docs/demos/menu/DemoMenuPersistence.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 </script>
 

diff --git a/docs/demos/menu/DemoMenuPlacement.vue b/docs/demos/menu/DemoMenuPlacement.vue
@@ -2,10 +2,10 @@
 import { ref } from 'vue'
 
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 
 const menuPlacement = ref('bottom-start')

diff --git a/docs/demos/menu/DemoMenuStrategy.vue b/docs/demos/menu/DemoMenuStrategy.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 </script>
 

diff --git a/docs/demos/menu/DemoMenuTransition.vue b/docs/demos/menu/DemoMenuTransition.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 </script>
 

diff --git a/docs/demos/menu/DemoMenuTrigger.vue b/docs/demos/menu/DemoMenuTrigger.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 </script>
 

diff --git a/docs/demos/menu/DemoMenuVModelSupport.vue b/docs/demos/menu/DemoMenuVModelSupport.vue
@@ -2,10 +2,10 @@
 import { ref } from 'vue'
 
 const items = [
-  { title: 'Donut jujubes' },
-  { title: 'Sesame snaps' },
-  { title: 'I love jelly' },
-  { title: 'Cake gummi', disable: true },
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi', disable: true },
 ]
 
 const isMenuVisible = ref(false)

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -7,6 +7,12 @@
         "types": [
             "anu-vue/volar"
         ],
+        "lib": [
+            "esnext",
+            "dom",
+            "dom.iterable",
+            "scripthost"
+        ],
         "paths": {
             "@anu-vue/*": [
                 "../packages/anu-vue/*"