docs: added Anu UI

.vscode/docs.code-snippets

@@ -8,7 +8,7 @@
             "description",
             "",
             ":::code Demo$2$1",
-            "<<< @/demos/$2/DemoMenu$1.vue",
+            "<<< @/components/demos/$2/DemoMenu$1.vue",
             ":::",
             "",
             "::::"

docs/.vitepress/config.ts

@@ -5,6 +5,8 @@ import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
 
 const nav: DefaultTheme.Config['nav'] = [
+  { text: 'Guide', link: '/guide/getting-started/installation', activeMatch: '/guide/' },
+  { text: 'Anu UI', link: '/ui/introduction', activeMatch: '/ui/' },
   {
     text: 'Development',
     items: [
@@ -89,6 +91,25 @@ export default defineConfig({
           ],
         },
       ],
+      '/ui/': [
+        {
+          text: 'UI',
+          items: [
+            {
+              text: 'Introduction',
+              link: '/ui/introduction',
+            },
+            {
+              text: 'Misc',
+              link: '/ui/misc',
+            },
+            {
+              text: 'Form',
+              link: '/ui/form',
+            },
+          ],
+        },
+      ],
     },
     algolia: {
       appId: 'ZIRXGNDXKY',

docs/.vitepress/theme/index.ts

@@ -15,11 +15,19 @@ export default {
       registerComponents: true,
     })
 
-    const demos = import.meta.globEager('../../demos/**/*.vue')
+    // Register demos as components
+    const demos = import.meta.globEager('../../components/demos/**/*.vue')
 
     for (const path in demos)
       app.component(extractFileNameFromPath(path), demos[path].default)
 
+    // Register UI as components
+    const ui = import.meta.globEager('../../components/ui/**/*.vue')
+
+    for (const path in ui)
+      app.component(extractFileNameFromPath(path), ui[path].default)
+
+    // Other component registration
     app.component('Demo', Demo)
     app.component('Api', Api)
   },

docs/demos/input/DemoInputBasic.vue → docs/components/demos/input/DemoInputBasic.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="grid-row sm:grid-cols-2 place-items-stretch">
-    <div>
+    <div class="col-span-2">
       <AInput />
     </div>
   </div>

docs/components/ui/form/UIFormCreditCardPayment.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const creditCardDetails = reactive({
+  cardHolderName: '',
+  creditCardNum: undefined,
+  expiration: '',
+  cvc: undefined,
+})
+</script>
+
+<template>
+  <div class="cards-demo-container">
+    <ACard title="Payment Details">
+      <div class="grid-row place-items-stretch sm:grid-cols-2 a-card-body">
+        <AInput
+          v-model.trim="creditCardDetails.cardHolderName"
+          label="Card Holder"
+          placeholder="John Doe"
+          class="sm:col-span-2"
+        />
+        <AInput
+          v-model.number="creditCardDetails.creditCardNum"
+          label="Card Number"
+          placeholder="4444 3333 2222 1111"
+          class="sm:col-span-2"
+          type="number"
+        />
+        <AInput
+          v-model.trim="creditCardDetails.expiration"
+          label="Expiration"
+          placeholder="23/12"
+        />
+        <AInput
+          v-model.trim.number="creditCardDetails.cvc"
+          label="CVV"
+          placeholder="987"
+          type="number"
+        />
+
+        <!-- Action button -->
+        <ABtn class="justify-self-start">
+          Submit
+        </ABtn>
+      </div>
+    </ACard>
+  </div>
+</template>

docs/components/ui/misc/UIMiscComments.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const input = ref('')
+
+const comments = [
+  {
+    avatar: 'https://i.pravatar.cc/150?img=47',
+    name: 'Sarah Floyd',
+    comment: 'Have you guys thought about seeing a movie? There\'s a new action flick playing at the theater down the street.',
+    time: '2 hours ago',
+  },
+  {
+    avatar: 'https://i.pravatar.cc/150?img=56',
+    name: 'Ollie Bradley',
+    comment: 'Ooh, that sounds like fun 😍',
+    time: '90 minutes ago',
+  },
+  {
+    avatar: 'https://i.pravatar.cc/150?img=45',
+    name: 'Jane Jennings',
+    comment: 'Sounds like a plan. Let\'s make it happen.',
+    time: '1 hour ago',
+  },
+  {
+    avatar: 'https://i.pravatar.cc/150?img=31',
+    name: 'Olivia McDaniel',
+    comment: 'Awesome, I\'ll buy the tickets. See you guys at the theater in a bit..',
+    time: '15 minutes ago',
+  },
+]
+</script>
+
+<template>
+  <div class="cards-demo-container max-w-550px">
+    <ACard title="Comments">
+      <!-- 👉 Card body -->
+      <div class="a-card-body a-card-spacer">
+        <!-- 👉 Comments Loop -->
+        <div
+          v-for="(comment, index) in comments"
+          :key="index"
+          class="!mb-5"
+        >
+          <!-- Header: Avatar & Name -->
+          <div class="flex gap-2 mb-2 items-center">
+            <AAvatar
+              class="text-base"
+              :src="comment.avatar"
+            />
+            <ATypography :title="[comment.name, 'text-base']" />
+          </div>
+
+          <!-- Comment -->
+          <p class="text-sm">
+            {{ comment.comment }}
+          </p>
+
+          <!-- Comment time -->
+          <ATypography
+            class="text-xs mt-1"
+            :subtitle="comment.time"
+          />
+        </div>
+
+        <ATextarea v-model="input" />
+
+        <ABtn
+          class="justify-self-start"
+          @click="input = ''"
+        >
+          Comment
+        </ABtn>
+      </div>
+    </ACard>
+  </div>
+</template>

docs/guide/base-components/typography.md

@@ -12,7 +12,7 @@ import api from '@anu/component-meta/ATypography.json';
 This will completely change how you work with typography.
 
 :::code DemoTypographyBasic
-<<< @/demos/typography/DemoTypographyBasic.vue
+<<< @/components/demos/typography/DemoTypographyBasic.vue
 :::
 
 ::::
@@ -25,7 +25,7 @@ Want to create a list with title and subtitle no worries, Just add `text-sm`.
 You can use other font-size utilities to change typography size.
 
 :::code DemoTypographySizing
-<<< @/demos/typography/DemoTypographySizing.vue{7,12,16,23,28,32,39,44,48}
+<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,16,23,28,32,39,44,48}
 :::
 
 ::::
@@ -40,7 +40,7 @@ First element of array will be treated as content and rest of them will be class
 It greatly improves DX and keep you code a bit DRY.
 
 :::code DemoTypographyConfigArray
-<<< @/demos/typography/DemoTypographyConfigArray.vue{12-13,25-26,39-40,53-54}
+<<< @/components/demos/typography/DemoTypographyConfigArray.vue{12-13,25-26,39-40,53-54}
 :::
 
 ::::

docs/guide/components/alert.md

@@ -12,7 +12,7 @@ import api from '@anu/component-meta/AAlert.json';
 Use `color` prop to change the alert color.
 
 :::code DemoAlertLight
-<<< @/demos/alert/DemoAlertLight.vue{7,11,15,19}
+<<< @/components/demos/alert/DemoAlertLight.vue{7,11,15,19}
 :::
 
 ::::
@@ -23,7 +23,7 @@ Use `color` prop to change the alert color.
 You can use `variant="fill"` to create alert with filled background.
 
 :::code DemoAlertFilled
-<<< @/demos/alert/DemoAlertFilled.vue{3,8,15,22,29}
+<<< @/components/demos/alert/DemoAlertFilled.vue{3,8,15,22,29}
 :::
 
 ::::
@@ -34,7 +34,7 @@ You can use `variant="fill"` to create alert with filled background.
 You can use `variant="outline"` to create outlined alert.
 
 :::code DemoAlertOutlined
-<<< @/demos/alert/DemoAlertOutlined.vue{3,9,16,23,30}
+<<< @/components/demos/alert/DemoAlertOutlined.vue{3,9,16,23,30}
 :::
 
 ::::
@@ -47,7 +47,7 @@ You can use `icon` prop to render icon in button.
 Use `append-icon` prop to render icon after default slot.
 
 :::code DemoAlertIcons
-<<< @/demos/alert/DemoAlertIcons.vue{3,10,18}
+<<< @/components/demos/alert/DemoAlertIcons.vue{3,10,18}
 :::
 
 ::::
@@ -60,7 +60,7 @@ Use `dismissible` prop to create dismissible alert.
 You can customize close icon using `append-icon` prop.
 
 :::code DemoAlertDismissible
-<<< @/demos/alert/DemoAlertDismissible.vue{3,8,16}
+<<< @/components/demos/alert/DemoAlertDismissible.vue{3,8,16}
 :::
 
 ::::
@@ -71,7 +71,7 @@ You can customize close icon using `append-icon` prop.
 Alert also support `v-model` to show and hide alert based on model value.
 
 :::code DemoAlertVModelSupport
-<<< @/demos/alert/DemoAlertVModelSupport.vue{4,9}
+<<< @/components/demos/alert/DemoAlertVModelSupport.vue{4,9}
 :::
 
 ::::

docs/guide/components/avatar.md

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/AAvatar.json'
+import api from '@anu/component-meta/AAvatar.json';
 </script>
 
 # Avatar
@@ -12,7 +12,7 @@ Default variant for avatar is `light`.
 Use `color` prop to change the avatar color.
 
 :::code DemoAvatarDefault
-<<< @/demos/avatar/DemoAvatarDefault.vue
+<<< @/components/demos/avatar/DemoAvatarDefault.vue
 :::
 
 ::::
@@ -23,7 +23,7 @@ Use `color` prop to change the avatar color.
 You can use `variant="fill"` to create avatar with filled background
 
 :::code DemoAvatarFill
-<<< @/demos/avatar/DemoAvatarFill.vue{4,9,15}
+<<< @/components/demos/avatar/DemoAvatarFill.vue{4,9,15}
 
 ::::
 
@@ -33,7 +33,7 @@ You can use `variant="fill"` to create avatar with filled background
 You can use variant="outline" to create outlined avatar
 
 :::code DemoAvatarOutlined
-<<< @/demos/avatar/DemoAvatarOutlined.vue{4,9,15}
+<<< @/components/demos/avatar/DemoAvatarOutlined.vue{4,9,15}
 :::
 
 ::::
@@ -44,7 +44,7 @@ You can use variant="outline" to create outlined avatar
 You can use font-size utility to adjust the size of avatar
 
 :::code DemoAvatarSizing
-<<< @/demos/avatar/DemoAvatarSizing.vue{5,9,13,17,21}
+<<< @/components/demos/avatar/DemoAvatarSizing.vue{5,9,13,17,21}
 :::
 
 ::::
@@ -55,7 +55,7 @@ You can use font-size utility to adjust the size of avatar
 You can adjust avatar roundness using border-radius utilities
 
 :::code DemoAvatarRoundness
-<<< @/demos/avatar/DemoAvatarRoundness.vue{5,9,13,17,21}
+<<< @/components/demos/avatar/DemoAvatarRoundness.vue{5,9,13,17,21}
 :::
 
 ::::