docs: finalize vue api docs output (#832)

Added in components that were missing Vue docs, prop values, required props, sorting for required props (always show at the top, same as storybook)
dialpad · Mar 1, 2023 · 929f9d7 · 929f9d7
1 parent a68dafb
commit 929f9d7
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 25 deletions.
diff --git a/docs/.vuepress/baseComponents/ComponentVueApi.vue b/docs/.vuepress/baseComponents/ComponentVueApi.vue
@@ -44,6 +44,8 @@ const docProps = ComponentDocs.find(f => f.displayName.toLowerCase() === formatt
       description: item?.description,
       type: item?.type?.name,
       defaultValue: item?.defaultValue?.value,
+      values: item?.values,
+      required: item?.required,
     };
   });
 

diff --git a/docs/.vuepress/baseComponents/ComponentVueApiTable.vue b/docs/.vuepress/baseComponents/ComponentVueApiTable.vue
@@ -29,14 +29,24 @@
     </thead>
     <tbody>
       <tr
-        v-for="({ name, description, type, defaultValue }) in sortedTableDataByName"
+        v-for="({ name, description, type, defaultValue, values, required }) in sortedTableDataByName"
         :key="name"
       >
         <th
           scope="row"
           class="d-ff-mono d-fc-purple-400 d-fw-normal d-fs-100"
-          v-text="name"
-        />
+        >
+          <dt-stack gap="300">
+            <div>{{ name }}</div>
+            <div
+              v-if="required"
+              class="d-fc-critical"
+            >
+              required
+            </div>
+          </dt-stack>
+        </th>
+
         <td
           class="d-ff-mono d-fs-100 vue-api-table"
         >
@@ -46,8 +56,23 @@
           >
             <markdown-render :markdown="description" />
             <span v-if="type">
-              <dt-badge>{{ type }}</dt-badge>
+              Type: <dt-badge>{{ type }}</dt-badge>
             </span>
+            <dt-stack
+              v-if="values"
+              direction="row"
+              class="d-ai-center d-fw-wrap"
+              gap="300"
+            >
+              Values:
+              <dt-badge
+                v-for="value in values"
+
+                :key="`${name} ${value}`"
+              >
+                {{ value }}
+              </dt-badge>
+            </dt-stack>
           </div>
         </td>
         <td
@@ -86,16 +111,23 @@ const withDefault = computed(() => {
 const sortedTableDataByName = computed(() => {
   if (!props.tableData) return null;
 
-  return sortDataByKey([...props.tableData], 'name');
+  return sortDataByKey([...props.tableData], 'name', 'required');
 });
 
-const sortDataByKey = (data, key) => {
+const sortDataByKey = (data, nameKey, requiredKey) => {
+  // eslint-disable-next-line complexity
   return data.sort((a, b) => {
-    if (a[key] < b[key]) {
+    const aIsRequired = !!a[requiredKey];
+    const bIsRequired = !!b[requiredKey];
+
+    // always have required at top
+    if (aIsRequired && !bIsRequired) {
       return -1;
-    }
-    if (a[key] > b[key]) {
+    } else if (!aIsRequired && bIsRequired) {
       return 1;
+    } else {
+      if (a[nameKey] < b[nameKey]) return -1;
+      if (a[nameKey] > b[nameKey]) return 1;
     }
     return 0;
   });

diff --git a/docs/components/stack.md b/docs/components/stack.md
@@ -94,7 +94,7 @@ storybook: https://vue.dialpad.design/?path=/story/components-stack--default
 
 ```html
 <section class="d-stack d-stack--row d-stack--gap-300">
-  <div>Stack item 1</div> 
+  <div>Stack item 1</div>
   <div>
     <div>Stack item 2</div>
     <div class="d-stack d-stack--row-reverse d-stack--gap-600">
@@ -105,6 +105,10 @@ storybook: https://vue.dialpad.design/?path=/story/components-stack--default
 </section>
 ```
 
+## Vue API
+
+<component-vue-api component-name="stack" />
+
 ## Classes
 
 <component-class-table component-name="stack"></component-class-table>
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
@@ -76,6 +76,20 @@ Add `d-tablist--inverted` when you want to display tabs on a darker background.
 <div class="d-tablist d-tablist--inverted">…</div>
 ```
 
+## Vue API
+
+### Tab Group
+
+<component-vue-api component-name="tabgroup" />
+
+### Tab Panel
+
+<component-vue-api component-name="tabpanel" />
+
+### Tab
+
+<component-vue-api component-name="tab" />
+
 ## Classes
 
 <component-class-table component-name="tabs" />

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -60,6 +60,10 @@ No arrow direction is assigned by default. You must select a direction. Twelve d
   </div>
 </div>
 
+## Vue API
+
+<component-vue-api component-name="tooltip" />
+
 ## Classes
 
 <component-class-table component-name="tooltip" />

diff --git a/docs/components/validation-messages.md b/docs/components/validation-messages.md
@@ -64,3 +64,7 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
   :validationMessages='[{"message":"Critical validation message","type":"warning"}]'
 />
 ```
+
+## Vue API
+
+<component-vue-api component-name="validationmessages" />
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "@dialpad/conventional-changelog-angular": "^1.1.1",
     "@dialpad/dialtone-combinator": "^0.3.1",
     "@dialpad/dialtone-icons": "vue3",
-    "@dialpad/dialtone-vue": "^3.43.0",
+    "@dialpad/dialtone-vue": "^3.46.1",
     "@dialpad/postcss-responsive-variations": "^1.1.3",
     "@dialpad/semantic-release-changelog-json": "^1.0.0",
     "@docsearch/js": "^3.3.2",