docs: added searchable API table

therealokoro · Feb 22, 2023 · 1154e20 · 1154e20
1 parent ebb3774
commit 1154e20
Show file tree

Hide file tree

Showing 22 changed files with 178 additions and 50 deletions.
diff --git a/docs/components/Api.vue b/docs/components/Api.vue
@@ -1,34 +1,152 @@
 <script lang="ts" setup>
+import { unrefElement } from '@vueuse/core'
+import { useGroupModel, useSearch } from 'anu-vue'
+import { computed, onMounted, ref } from 'vue'
+
 import type { ComponentApi } from '../../scripts/gen-component-meta'
 
-const props = defineProps<{ api: ComponentApi }>()
-const propsHeader = Object.keys(props.api.props[0])
+const props = defineProps<{
+  title: string
+  api: ComponentApi
+}>()
+
+// SECTION Filtering
+const q = ref('')
+
+// filtered props
+const { results: filteredProps } = useSearch(q, props.api.props, (q: string, prop: typeof props.api['props'][number]) => {
+  return prop.name.includes(q)
+  || prop.description.includes(q)
+})
+
+// filtered slots
+const { results: filteredSlots } = useSearch(q, props.api.slots, (q: string, slot: typeof props.api['slots'][number]) => {
+  return slot.name.includes(q)
+  || slot.description.includes(q)
+})
+
+// filtered events
+const { results: filteredEvents } = useSearch(q, props.api.events, (q: string, event: typeof props.api['events'][number]) => {
+  return event.name.includes(q)
+    || event.type.includes(q)
+  || event.signature.includes(q)
+})
+
+// !SECTION
+
+// SECTION Tabs
+const tabs = ['props', 'slots', 'events']
+const { options: apiTabs, select, value: apiActiveTab } = useGroupModel({
+  options: tabs,
+})
+
+// ℹ️ Set props as active tab. This is because ATM, useGroupModel does't support initial value.
+// Tracking: https://github.com/jd-solanki/anu/pull/77
+select(tabs[0] as string)
+
+const foundNumbers = computed(() => ({
+  props: filteredProps.value.length,
+  slots: filteredSlots.value.length,
+  events: filteredEvents.value.length,
+}))
+
+// !SECTION
+
+const apiCard = ref()
+const apiCardMinHeight = ref('')
+onMounted(() => {
+  apiCardMinHeight.value = window.getComputedStyle(unrefElement(apiCard.value)).height
+})
 </script>
 
 <template>
-  <!-- ℹ️ We will update docs styles soon and add restore the default style of card in API section -->
   <ACard
-    title="Props"
-    class="shadow-none border border-a-border"
+    ref="apiCard"
+    class="shadow-none border-solid border-1 border-a-border"
+    :style="{
+      minHeight: apiCardMinHeight,
+    }"
   >
+    <template #title>
+      <div class="flex flex-wrap items-center justify-between">
+        <span class="a-title">{{ props.title }}</span>
+        <AInput
+          v-model="q"
+          prepend-inner-icon="i-bx-search"
+          class="text-sm max-w-200px"
+          placeholder="Search API..."
+        />
+      </div>
+    </template>
+
     <div class="a-card-body">
-      <div
-        v-for="prop in props.api.props"
-        :key="prop.name"
-        class="not-last-mb-4"
-      >
-        <span
-          class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]"
-        >{{ prop.name.replace('?', '') }}</span>
-        <span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
-        <span
-          v-if="prop.default !== 'unknown'"
-          class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"
-        > = {{ prop.default }}</span>
+      <div class="flex gap-4 mb-4">
+        <ABtn
+          v-for="tab in apiTabs"
+          :key="tab.value"
+          class="capitalize"
+          :class="[!tab.isSelected && 'opacity-50']"
+          color="hsl(0,0%,50%)"
+          :variant="tab.isSelected ? 'light' : 'text'"
+          @click="select(tab.value)"
+        >
+          <span>{{ tab.value }}</span>
+          <span class="text-sm">({{ foundNumbers[tab.value as keyof typeof api] }})</span>
+        </ABtn>
+      </div>
+
+      <!-- Props -->
+      <div v-show="apiActiveTab === 'props'">
         <div
-          class="!children-[p]-m-0"
-          v-html="prop.description"
-        />
+          v-for="prop in filteredProps"
+          :key="prop.name"
+          class="not-last-mb-4"
+        >
+          <span
+            class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]"
+          >{{ prop.name.replace('?', '') }}</span>
+          <span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
+          <span
+            v-if="prop.default !== 'unknown'"
+            class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"
+          > = {{ prop.default }}</span>
+          <div
+            class="!children-[p]-m-0"
+            v-html="prop.description"
+          />
+        </div>
+      </div>
+
+      <!-- Slots -->
+      <div v-show="apiActiveTab === 'slots'">
+        <div
+          v-for="slot in filteredSlots"
+          :key="slot.name"
+          class="not-last-mb-4"
+        >
+          <span class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]">{{ slot.name }}</span>
+          <span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> : {{ slot.type }}</span>
+          <div
+            class="!children-[p]-m-0"
+            v-html="slot.description"
+          />
+        </div>
+      </div>
+
+      <!-- Events -->
+      <div v-show="apiActiveTab === 'events'">
+        <div
+          v-for="event in filteredEvents"
+          :key="event.name"
+          class="not-last-mb-4"
+        >
+          <span class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]">{{ event.name }}</span>
+          <span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> => {{ event.type }}</span>
+          <!-- <div
+            class="!children-[p]-m-0"
+            v-text="event.signature"
+          /> -->
+        </div>
       </div>
     </div>
   </ACard>

diff --git a/docs/components/Playground.vue b/docs/components/Playground.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
+import api from '@anu/component-meta/AAlert.json'
 </script>
 
 <template>
-  <ABtn>
-    Button
-  </ABtn>
+  <Api
+    :api="api"
+    title="alert"
+  />
 </template>
+
+<style lang="scss">
+
+</style>
diff --git a/docs/guide/base-components/typography.md b/docs/guide/base-components/typography.md
@@ -97,4 +97,4 @@ It greatly improves DX and keep you code a bit DRY.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Typography" :api="api"></Api>
diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/AAlert.json'
+import api from '@anu/component-meta/AAlert.json';
 </script>
 
 # Alert
@@ -79,4 +79,4 @@ Alert also supports `v-model` to show and hide alert based on model value.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api :api="api" title="Alert"></Api>
diff --git a/docs/guide/components/avatar.md b/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
@@ -63,4 +63,4 @@ You can adjust avatar roundness using border-radius utilities.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Avatar" :api="api"></Api>
diff --git a/docs/guide/components/badge.md b/docs/guide/components/badge.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/ABadge.json'
+import api from '@anu/component-meta/ABadge.json';
 </script>
 
 # Badge
@@ -119,4 +119,4 @@ You can use font-size utility to adjust the size of badge.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Badge" :api="api"></Api>
diff --git a/docs/guide/components/button.md b/docs/guide/components/button.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/ABtn.json'
+import api from '@anu/component-meta/ABtn.json';
 </script>
 
 # Button
@@ -144,4 +144,4 @@ This property will display a `ALoading` component (by default) instead of the ic
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Button" :api="api"></Api>
diff --git a/docs/guide/components/card.md b/docs/guide/components/card.md
@@ -69,4 +69,4 @@ Above demo adds content to the right of title. If you want to add content on the
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Card" :api="api"></Api>
diff --git a/docs/guide/components/checkbox.md b/docs/guide/components/checkbox.md
@@ -60,4 +60,4 @@ You can use `indeterminate` prop to change the status of the checkbox.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Checkbox" :api="api"></Api>
diff --git a/docs/guide/components/chip.md b/docs/guide/components/chip.md
@@ -88,4 +88,4 @@ Chip can be used as action item. You can use `@click` directive to handle onClic
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Chip" :api="api"></Api>
diff --git a/docs/guide/components/dialog.md b/docs/guide/components/dialog.md
@@ -55,4 +55,4 @@ You can disable closing dialog on outside click via `persistent` prop.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Dialog" :api="api"></Api>
diff --git a/docs/guide/components/drawer.md b/docs/guide/components/drawer.md
@@ -53,4 +53,4 @@ You can disable closing drawer on outside click via `persistent` prop.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Drawer" :api="api"></Api>
diff --git a/docs/guide/components/input.md b/docs/guide/components/input.md
@@ -133,4 +133,4 @@ Anu do not provide any validation mechanism at the moment as it assume it's bett
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Input" :api="api"></Api>
diff --git a/docs/guide/components/list.md b/docs/guide/components/list.md
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import api from '@anu/component-meta/AList.json';
+import listItemApi from '@anu/component-meta/AListItem.json';
 </script>
 
 # List
@@ -106,4 +107,5 @@ Use `a-list-items-pill` to create pill shaped list items. It just modifies some
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="List" :api="api" class="mb-8"></Api>
+<Api title="List item" :api="listItemApi"></Api>
diff --git a/docs/guide/components/loader.md b/docs/guide/components/loader.md
@@ -85,4 +85,4 @@ You can display the loader component in a full page.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Loader" :api="api"></Api>
diff --git a/docs/guide/components/menu.md b/docs/guide/components/menu.md
@@ -111,4 +111,4 @@ You can read more about middleware on their official [docs](https://floating-ui.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Menu" :api="api"></Api>
diff --git a/docs/guide/components/radio.md b/docs/guide/components/radio.md
@@ -29,4 +29,4 @@ Use `color` prop to change the radio color.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Radio" :api="api"></Api>
diff --git a/docs/guide/components/rating.md b/docs/guide/components/rating.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/ARating.json'
+import api from '@anu/component-meta/ARating.json';
 </script>
 
 # Rating
@@ -123,4 +123,4 @@ When rating is readonly or disabled, `a-rating-animated` class won't apply.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Rating" :api="api"></Api>
diff --git a/docs/guide/components/select.md b/docs/guide/components/select.md
@@ -90,4 +90,4 @@ Use `disabled` prop to make select disabled.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Select" :api="api"></Api>
diff --git a/docs/guide/components/switch.md b/docs/guide/components/switch.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/ASwitch.json'
+import api from '@anu/component-meta/ASwitch.json';
 </script>
 
 # Switch
@@ -92,4 +92,4 @@ You can adjust switch roundness using border-radius utilities.
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Switch" :api="api"></Api>
diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import dataTableApi from '@anu/component-meta/ADataTable.json';
 import api from '@anu/component-meta/ATable.json';
 </script>
 
@@ -123,4 +124,5 @@ const fetchRows = ({ q, currentPage, rowsPerPage, sortedCols }) => {
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Table" :api="api" class="mb-8"></Api>
+<Api title="Data Table" :api="dataTableApi"></Api>
diff --git a/docs/guide/components/textarea.md b/docs/guide/components/textarea.md
@@ -51,4 +51,4 @@ You can adjust the height of ATextarea component by providing `height` prop with
 <!-- 👉 API -->
 ## API
 
-<Api :api="api"></Api>
+<Api title="Textarea" :api="api"></Api>