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>
epicmaxco · Jun 21, 2023 · ddb24da · ddb24da
1 parent f517b4d
commit ddb24da
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 27 deletions.
diff --git 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
@@ -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/...onfig/blocks/api/components/api-table.vue → ...-config/blocks/api/components/ApiDocs.vue b/...onfig/blocks/api/components/api-table.vue → ...-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
@@ -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
@@ -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>[];
+}
diff --git 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"