feat(docs): api typing shortcuts (#10353)

* Add `FunctionType` and `EnumType` as typing shortcuts. Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
element-plus · Nov 1, 2022 · 231709b · 231709b
1 parent a8f06fb
commit 231709b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/docs/.vitepress/vitepress/components/globals/vp-api-enum.vue b/docs/.vitepress/vitepress/components/globals/vp-api-enum.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import ApiTyping from './vp-api-typing.vue'
+
+const props = defineProps({
+  values: {
+    type: Array,
+    required: true,
+  },
+})
+
+const details = computed(() => props.values.join(' | '))
+</script>
+
+<template>
+  <api-typing type="enum" :details="details" />
+</template>
diff --git a/docs/.vitepress/vitepress/components/globals/vp-api-function.vue b/docs/.vitepress/vitepress/components/globals/vp-api-function.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import ApiTyping from './vp-api-typing.vue'
+
+const props = defineProps({
+  params: {
+    type: String,
+    default: '',
+  },
+  returns: {
+    type: String,
+    default: 'void',
+  },
+})
+
+const details = computed(() => `(${props.params}) => ${props.returns}`)
+</script>
+
+<template>
+  <api-typing type="Function" :details="details" />
+</template>
diff --git a/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue b/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue
@@ -9,9 +9,9 @@ defineProps({
 
 <template>
   <span class="flex items-center">
-    <span class="api-typing">
+    <code class="api-typing">
       {{ type }}
-    </span>
+    </code>
     <el-tooltip effect="light" trigger="click">
       <el-button text :icon="Warning" class="p-2 text-5" />
       <template #content>

diff --git a/docs/.vitepress/vitepress/index.ts b/docs/.vitepress/vitepress/index.ts
@@ -16,6 +16,8 @@ import 'uno.css'
 import VPApp from './components/vp-app.vue'
 import VPDemo from './components/vp-demo.vue'
 import ApiTyping from './components/globals/vp-api-typing.vue'
+import ApiFunctionType from './components/globals/vp-api-function.vue'
+import ApiEnumType from './components/globals/vp-api-enum.vue'
 import IconList from './components/globals/icons.vue'
 
 import type { Component } from 'vue'
@@ -27,4 +29,6 @@ export const globals: [string, Component][] = [
   ['Demo', VPDemo],
   ['IconList', IconList],
   ['ApiTyping', ApiTyping],
+  ['FunctionType', ApiFunctionType],
+  ['EnumType', ApiEnumType],
 ]
diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -59,6 +59,8 @@ declare module '@vue/runtime-core' {
     ToggleSidebarBtn: typeof import('./.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue')['default']
     TopNavigationExample: typeof import('./.vitepress/vitepress/components/nav/top-navigation-example.vue')['default']
     VersionTag: typeof import('./.vitepress/vitepress/components/dev/VersionTag.vue')['default']
+    VpApiEnum: typeof import('./.vitepress/vitepress/components/globals/vp-api-enum.vue')['default']
+    VpApiFunction: typeof import('./.vitepress/vitepress/components/globals/vp-api-function.vue')['default']
     VpApiTyping: typeof import('./.vitepress/vitepress/components/globals/vp-api-typing.vue')['default']
     VpApp: typeof import('./.vitepress/vitepress/components/vp-app.vue')['default']
     VpChangelog: typeof import('./.vitepress/vitepress/components/globals/vp-changelog.vue')['default']