docs: updated API section

therealokoro · Dec 26, 2022 · 0312606 · 0312606
1 parent f0f0e56
commit 0312606
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 5 deletions.
diff --git a/docs/components/Api.vue b/docs/components/Api.vue
@@ -19,9 +19,12 @@ const propsHeader = Object.keys(props.api.props[0])
       >
         <span
           class="font-semibold text-[hsla(var(--a-typography-title-color),var(--a-typography-title-opacity))]"
-        >{{ prop.name }}</span>
-        <span class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type }}</span>
-        <span class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"> = {{ prop.default }}</span>
+        >{{ prop.name.replace('?', '') }}</span>
+        <span class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
+        <span
+          v-if="prop.default !== 'unknown'"
+          class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"
+        > = {{ prop.default }}</span>
         <div
           class="!children-[p]-m-0"
           v-html="prop.description"

diff --git a/docs/guide/components/badge.md b/docs/guide/components/badge.md
@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+import api from '@anu/component-meta/ABadge.json';
+</script>
+
 # Badge
 
 <!-- 👉 Default -->
@@ -111,3 +115,8 @@ You can use font-size utility to adjust the size of badge.
 :::
 
 ::::
+
+<!-- 👉 API -->
+## API
+
+<Api :api="api"></Api>
diff --git a/packages/anu-vue/src/components/base-input/props.ts b/packages/anu-vue/src/components/base-input/props.ts
@@ -3,23 +3,71 @@ import { disabled, readonly, spacing } from '@/composables/useProps'
 
 // TODO: Provide a way to apply classes on root. Later you can target input container & wrapper.
 export const baseInputProps = {
+  /**
+   * Component spacing
+   */
   spacing,
 
+  /**
+   * Input wrapper classes
+   */
   // ℹ️ If we want any type need to set `propName: { type: null }`. Using `propName: null` will omit (disable) the prop.
   inputWrapperClasses: { type: null },
 
+  /**
+   * Input classes
+   */
   // ℹ️ If we want any type need to set `propName: { type: null }`. Using `propName: null` will omit (disable) the prop.
   inputClasses: { type: null },
 
+  /**
+   * Input container classes
+   */
   inputContainerAttrs: Object as PropType<HTMLAttributes>,
+
+  /**
+   * Add hint below the form component
+   */
   hint: String,
+
+  /**
+   * Error text to render. This will replace hint text if provided.
+   */
   error: String,
+
+  /**
+   * Label of the form component
+   */
   label: String,
+
+  /**
+   * Prepend icon
+   */
   prependIcon: String,
+
+  /**
+   * Append icon
+   */
   appendIcon: String,
+
+  /**
+   * Prepend icon inside input
+   */
   prependInnerIcon: String,
+
+  /**
+   * Append icon inside input
+   */
   appendInnerIcon: String,
+
+  /**
+   * Set component in disabled state
+   */
   disabled,
+
+  /**
+   * Set component in readonly mode
+   */
   readonly,
 }
 

diff --git a/packages/anu-vue/src/components/typography/props.ts b/packages/anu-vue/src/components/typography/props.ts
@@ -18,15 +18,15 @@ export const typographyProps = {
   text: configurable,
 
   /**
-   * Tag to use for title of the card
+   * Tag to use for title of the component
    */
   titleTag: {
     type: String,
     default: 'span',
   },
 
   /**
-   * Tag to use for subtitle of the card
+   * Tag to use for subtitle of the component
    */
   subtitleTag: {
     type: String,