From ddb24da0c301aa5c925be4ca8b7c353f6fcdcb18 Mon Sep 17 00:00:00 2001
From: Yauheni Prakopchyk <ontrew@gmail.com>
Date: Wed, 21 Jun 2023 13:53:58 +0400
Subject: [PATCH] fix: props descriptions (#3516)

* fix: props descriptions

* fix(docs): api block types

---------

Co-authored-by: Yauheni Prakopchyk <yauheni.prakopchyk@epicmax.co>
Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>
---
 .../blocks/api/common-description.ts          |  3 ++
 .../blocks/api/component-parser/index.ts      |  4 +-
 .../components/{api-table.vue => ApiDocs.vue} |  2 +-
 .../modules/page-config/blocks/api/index.vue  | 51 ++++++++++---------
 .../modules/page-config/blocks/api/types.ts   |  7 +++
 yarn.lock                                     |  7 ++-
 6 files changed, 47 insertions(+), 27 deletions(-)
 rename packages/docs/modules/page-config/blocks/api/components/{api-table.vue => ApiDocs.vue} (98%)

diff --git a/packages/docs/modules/page-config/blocks/api/common-description.ts b/packages/docs/modules/page-config/blocks/api/common-description.ts
index f8468d306d..42f01a6caa 100644
--- a/packages/docs/modules/page-config/blocks/api/common-description.ts
+++ b/packages/docs/modules/page-config/blocks/api/common-description.ts
@@ -112,5 +112,8 @@ export default
   },
   slots: {
     scopeAvailable: "Slot scope available:"
+  },
+  methods: {
+    
   }
 }
diff --git a/packages/docs/modules/page-config/blocks/api/component-parser/index.ts b/packages/docs/modules/page-config/blocks/api/component-parser/index.ts
index 163b5395af..1daa7a7169 100644
--- a/packages/docs/modules/page-config/blocks/api/component-parser/index.ts
+++ b/packages/docs/modules/page-config/blocks/api/component-parser/index.ts
@@ -50,9 +50,11 @@ export const getTypes = (componentProp: any): string[] => {
 }
 
 export type PropOptionsCompiled = {
+  name: string;
   types: string[];
   required: boolean;
   default: any;
+  hidden: boolean; // TODO Not sure if hidden works at all right now.
 }
 
 export type EventOptionsCompiled = Record<string, any> & {
@@ -184,7 +186,7 @@ export function compileComponentOptions(componentOptions: ComponentOptions): Com
     props: props.map((prop) => ({
       ...prop,
       types: prop.type,
-    })), 
+    })),
     events: emits.reduce((acc, event) => ({
       ...acc,
       [eventNameToCamelCase(event.name)]: ({
diff --git a/packages/docs/modules/page-config/blocks/api/components/api-table.vue b/packages/docs/modules/page-config/blocks/api/components/ApiDocs.vue
similarity index 98%
rename from packages/docs/modules/page-config/blocks/api/components/api-table.vue
rename to packages/docs/modules/page-config/blocks/api/components/ApiDocs.vue
index bc8b65a540..90946c1e38 100644
--- a/packages/docs/modules/page-config/blocks/api/components/api-table.vue
+++ b/packages/docs/modules/page-config/blocks/api/components/ApiDocs.vue
@@ -54,7 +54,7 @@ defineProps({
           >
             <slot
               :name="key"
-              v-bind="{ key, data: value }"
+              v-bind="{ key, value, row }"
             >
               <MarkdownView
                 v-if="typeof value === 'string'"
diff --git a/packages/docs/modules/page-config/blocks/api/index.vue b/packages/docs/modules/page-config/blocks/api/index.vue
index 18909f0787..65ab54739c 100644
--- a/packages/docs/modules/page-config/blocks/api/index.vue
+++ b/packages/docs/modules/page-config/blocks/api/index.vue
@@ -2,13 +2,14 @@
 import { DefineComponent, PropType } from 'vue';
 import merge from 'lodash/merge'
 import camelCase from 'lodash/camelCase'
-import ApiTable from './components/api-table.vue';
+import ApiTable from './components/ApiDocs.vue';
 import {
   CssVariables,
   ManualApiOptions,
   VisualOptions,
   APIDescriptionOptions,
   APIDescriptionType,
+  ComponentMeta,
 } from './types';
 import commonDescription from "./common-description";
 
@@ -30,7 +31,7 @@ const props = defineProps({
     required: true,
   },
   meta: {
-    type: Object as PropType<ManualApiOptions>,
+    type: Object as PropType<ComponentMeta>,
     required: true
   },
   visualOptions: {
@@ -44,15 +45,15 @@ const props = defineProps({
 })
 
 const withManual = computed(() => {
-  return merge(props.meta, props.manual as ManualApiOptions)
+  return merge(props.meta, props.manual as ManualApiOptions) as ComponentMeta
 })
 
 function getDescription (type: APIDescriptionType, name: string): string {
   const nameCamel = camelCase(name)
 
   return props.descriptionOptions?.[type]?.[nameCamel]
-    || commonDescription?.[type]?.[nameCamel]
-    || '';
+    ?? (commonDescription[type] as Record<string, string>)[nameCamel]
+    ?? '';
 }
 
 const cleanDefaultValue = (o: Record<string, any> | string) => {
@@ -72,18 +73,20 @@ const cleanDefaultValue = (o: Record<string, any> | string) => {
   return str
 }
 
-const propsOptions = computed(() => Object
-  .entries(withManual.value.props || {})
-  .filter(([key, prop]) => !prop.hidden)
-  .map(([key, prop]) => ({
-    name: { name: key, ...prop },
-    description: getDescription('props', key),
-    types: '`' + prop.types + '`',
-    default: cleanDefaultValue(prop.default),
-  }))
-  .sort((a, b) => {
-    return a.name.name.localeCompare(b.name.name)
-  })
+const propsOptions = computed(() => {
+  if (!withManual.value.props) { return [] }
+
+  return Object
+    .values(withManual.value.props)
+    .filter(prop => !prop.hidden)
+    .map((prop) => ({
+      name: prop.name,
+      description: getDescription('props', prop.name),
+      types: '`' + prop.types + '`',
+      default: cleanDefaultValue(prop.default),
+    }))
+    .sort((a, b) => (a.name || '').localeCompare(b.name))
+  }
 )
 
 const eventsOptions = computed(() => Object
@@ -144,10 +147,10 @@ const cssVariablesOptions = computed(() => props.cssVariables.map(([name, value,
       :columns="['Name', 'Description', 'Types', 'Default']"
       :data="propsOptions"
     >
-      <template #name="{ data }">
-        <strong>{{ data.name }}</strong>
+      <template #name="{ value, row }">
+        <strong>{{ value }}</strong>
         <va-badge
-          v-if="data.required"
+          v-if="row.required"
           class="ml-2"
           text="required"
           color="primary"
@@ -182,11 +185,11 @@ const cssVariablesOptions = computed(() => props.cssVariables.map(([name, value,
       :columns="['Name', 'Default Value']"
       :data="cssVariablesOptions"
     >
-      <template #name="{ data }">
-        <strong class="va-text-code">{{ data }}</strong>
+      <template #name="{ value }">
+        <strong class="va-text-code">{{ value }}</strong>
       </template>
-      <template #value="{ data }">
-        <span class="va-text-code va-text-secondary">{{ data }}</span>
+      <template #value="{ value }">
+        <span class="va-text-code va-text-secondary">{{ value }}</span>
       </template>
     </ApiTable>
   </va-content>
diff --git a/packages/docs/modules/page-config/blocks/api/types.ts b/packages/docs/modules/page-config/blocks/api/types.ts
index 2c87921ea4..c1ba839ec5 100644
--- a/packages/docs/modules/page-config/blocks/api/types.ts
+++ b/packages/docs/modules/page-config/blocks/api/types.ts
@@ -72,3 +72,10 @@ export type APIDescriptionType = 'props' | 'events' | 'slots' | 'methods';
 export type APIDescriptionOptions = {
   [k in APIDescriptionType]?: Record<string, string>;
 }
+
+export type ComponentMeta = {
+  props: Required<ManualPropApiOptions>[];
+  events: Required<ManualEventApiOptions>[];
+  methods: Required<ManualMethodApiOptions>[];
+  slots: Required<ManualSlotApiOptions>[];
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e2dbb7d724..840f162ceb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3309,7 +3309,7 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@>= 8", "@types/node@^18.11.18":
+"@types/node@*", "@types/node@>= 8":
   version "18.16.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.2.tgz#2f610ea71034b3971c312192377f8a7178eb57f1"
   integrity sha512-GQW/JL/5Fz/0I8RpeBG9lKp0+aNcXEaVL71c0D2Q0QHDTFvlYKT7an0onCUXj85anv7b4/WesqdfchLc0jtsCg==
@@ -3319,6 +3319,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
   integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
 
+"@types/node@^18.16.0":
+  version "18.16.18"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.18.tgz#85da09bafb66d4bc14f7c899185336d0c1736390"
+  integrity sha512-/aNaQZD0+iSBAGnvvN2Cx92HqE5sZCPZtx2TsK+4nvV23fFe09jVDvpArXr2j9DnYlzuU9WuoykDDc6wqvpNcw==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"