fix(site): fix site api table style (#2507)
This commit is contained in:
ajaxzheng
GitHub
parent
4c65284f01
commit
c1496eebea
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@opentiny/vue-docs",
|
"name": "@opentiny/vue-docs",
|
||||||
"version": "3.19.4",
|
"version": "3.19.7",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"start": "vite",
|
||||||
|
|
|
||||||
|
|
@ -36,60 +36,62 @@
|
||||||
<div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
|
<div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
|
||||||
{{ key }}
|
{{ key }}
|
||||||
</div>
|
</div>
|
||||||
<tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
|
<div class="api-table-box">
|
||||||
<tiny-grid-column
|
<tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
|
||||||
v-if="tableData[oneGroup.name][key][0]?.type"
|
<tiny-grid-column
|
||||||
class-name="api-table-expand-col"
|
v-if="tableData[oneGroup.name][key][0]?.type"
|
||||||
type="expand"
|
class-name="api-table-expand-col"
|
||||||
width="32"
|
type="expand"
|
||||||
>
|
width="32"
|
||||||
<template #default="{ row }">
|
>
|
||||||
<async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
|
<template #default="{ row }">
|
||||||
</template>
|
<async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
|
||||||
</tiny-grid-column>
|
</template>
|
||||||
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
|
</tiny-grid-column>
|
||||||
<template #default="{ row }">
|
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
|
||||||
<span class="api-table-name">
|
<template #default="{ row }">
|
||||||
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
|
<span class="api-table-name">
|
||||||
<span v-else>{{ row.name }}</span>
|
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
|
||||||
</span>
|
<span v-else>{{ row.name }}</span>
|
||||||
<version-tip
|
</span>
|
||||||
v-if="row.meta || row.versionTipOption"
|
<version-tip
|
||||||
:meta="row.meta"
|
v-if="row.meta || row.versionTipOption"
|
||||||
v-bind="row.versionTipOption"
|
:meta="row.meta"
|
||||||
render-type="tag"
|
v-bind="row.versionTipOption"
|
||||||
tip-subject="api"
|
render-type="tag"
|
||||||
>
|
tip-subject="api"
|
||||||
</version-tip>
|
>
|
||||||
</template>
|
</version-tip>
|
||||||
</tiny-grid-column>
|
</template>
|
||||||
<tiny-grid-column
|
</tiny-grid-column>
|
||||||
v-if="tableData[oneGroup.name][key][0]?.type"
|
<tiny-grid-column
|
||||||
field="type"
|
v-if="tableData[oneGroup.name][key][0]?.type"
|
||||||
:title="i18nByKey('propType')"
|
field="type"
|
||||||
:width="columnWidth[key][1]"
|
:title="i18nByKey('propType')"
|
||||||
>
|
:width="columnWidth[key][1]"
|
||||||
<template #default="{ row }">
|
>
|
||||||
<a
|
<template #default="{ row }">
|
||||||
v-if="row.typeAnchorName"
|
<a
|
||||||
:href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
|
v-if="row.typeAnchorName"
|
||||||
v-html="row.type"
|
:href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
|
||||||
></a>
|
v-html="row.type"
|
||||||
<span v-else v-html="row.type"></span>
|
></a>
|
||||||
</template>
|
<span v-else v-html="row.type"></span>
|
||||||
</tiny-grid-column>
|
</template>
|
||||||
<tiny-grid-column
|
</tiny-grid-column>
|
||||||
v-if="key === 'props'"
|
<tiny-grid-column
|
||||||
field="defaultValue"
|
v-if="key === 'props'"
|
||||||
:title="i18nByKey('defValue')"
|
field="defaultValue"
|
||||||
:width="columnWidth[key][2]"
|
:title="i18nByKey('defValue')"
|
||||||
></tiny-grid-column>
|
:width="columnWidth[key][2]"
|
||||||
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
|
></tiny-grid-column>
|
||||||
<template #default="data">
|
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
|
||||||
<span v-html="data.row.desc"></span>
|
<template #default="data">
|
||||||
</template>
|
<span v-html="data.row.desc"></span>
|
||||||
</tiny-grid-column>
|
</template>
|
||||||
</tiny-grid>
|
</tiny-grid-column>
|
||||||
|
</tiny-grid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -142,7 +144,7 @@
|
||||||
<div id="API" class="all-api-container">
|
<div id="API" class="all-api-container">
|
||||||
<div class="ti-f-c ti-f-wrap api-list">
|
<div class="ti-f-c ti-f-wrap api-list">
|
||||||
<!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
|
<!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
|
||||||
<div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
|
<div class="mt20 wp100" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
|
||||||
<div class="ti-f-r ti-f-pos-start ti-fw-bold">
|
<div class="ti-f-r ti-f-pos-start ti-fw-bold">
|
||||||
<div :id="`cmp-${oneGroup.name}`" class="ti-f18">
|
<div :id="`cmp-${oneGroup.name}`" class="ti-f18">
|
||||||
{{ oneGroup.name }}
|
{{ oneGroup.name }}
|
||||||
|
|
@ -156,73 +158,75 @@
|
||||||
<div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
|
<div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
|
||||||
{{ key }}
|
{{ key }}
|
||||||
</div>
|
</div>
|
||||||
<tiny-grid
|
<div class="api-table-box">
|
||||||
ref="apiTableRef"
|
<tiny-grid
|
||||||
class="api-table"
|
ref="apiTableRef"
|
||||||
:data="tableData[oneGroup.name][key]"
|
class="api-table"
|
||||||
:expand-config="apiExpandConf"
|
:data="tableData[oneGroup.name][key]"
|
||||||
row-id="name"
|
:expand-config="apiExpandConf"
|
||||||
>
|
row-id="name"
|
||||||
<tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<async-highlight
|
|
||||||
v-if="row.code"
|
|
||||||
:code="row.code.trim()"
|
|
||||||
:types="chartCode ? 'html' : 'ts'"
|
|
||||||
></async-highlight>
|
|
||||||
<div v-if="row.depTypes">
|
|
||||||
<async-highlight
|
|
||||||
v-for="(k, i) in row.depTypes"
|
|
||||||
:key="i"
|
|
||||||
:code="currJson.types[k]?.code"
|
|
||||||
types="ts"
|
|
||||||
></async-highlight>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</tiny-grid-column>
|
|
||||||
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<span class="api-table-name">
|
|
||||||
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
|
|
||||||
<span v-else>{{ row.name }}</span>
|
|
||||||
</span>
|
|
||||||
<version-tip
|
|
||||||
v-if="row.meta || row.versionTipOption"
|
|
||||||
:meta="row.meta"
|
|
||||||
v-bind="row.versionTipOption"
|
|
||||||
render-type="tag"
|
|
||||||
tip-subject="api"
|
|
||||||
>
|
|
||||||
</version-tip>
|
|
||||||
</template>
|
|
||||||
</tiny-grid-column>
|
|
||||||
<tiny-grid-column
|
|
||||||
v-if="tableData[oneGroup.name][key].find((i) => i.type)"
|
|
||||||
field="type"
|
|
||||||
:title="i18nByKey('propType')"
|
|
||||||
:width="columnWidth[key][1]"
|
|
||||||
>
|
>
|
||||||
<template #default="{ row }">
|
<tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
|
||||||
<span
|
<template #default="{ row }">
|
||||||
:class="{ 'type-link': row.typeAnchorName || row.linkTo }"
|
<async-highlight
|
||||||
:id="row.typeAnchorName ? row.type : ''"
|
v-if="row.code"
|
||||||
@click="toOuterType(row)"
|
:code="row.code.trim()"
|
||||||
>{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
|
:types="chartCode ? 'html' : 'ts'"
|
||||||
></span>
|
></async-highlight>
|
||||||
</template>
|
<div v-if="row.depTypes">
|
||||||
</tiny-grid-column>
|
<async-highlight
|
||||||
<tiny-grid-column
|
v-for="(k, i) in row.depTypes"
|
||||||
v-if="key === 'props' || key === 'options'"
|
:key="i"
|
||||||
field="defaultValue"
|
:code="currJson.types[k]?.code"
|
||||||
:title="i18nByKey('defValue')"
|
types="ts"
|
||||||
:width="columnWidth[key][2]"
|
></async-highlight>
|
||||||
></tiny-grid-column>
|
</div>
|
||||||
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
|
</template>
|
||||||
<template #default="data">
|
</tiny-grid-column>
|
||||||
<span v-html="data.row.desc"></span>
|
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
|
||||||
</template>
|
<template #default="{ row }">
|
||||||
</tiny-grid-column>
|
<span class="api-table-name">
|
||||||
</tiny-grid>
|
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
|
||||||
|
<span v-else>{{ row.name }}</span>
|
||||||
|
</span>
|
||||||
|
<version-tip
|
||||||
|
v-if="row.meta || row.versionTipOption"
|
||||||
|
:meta="row.meta"
|
||||||
|
v-bind="row.versionTipOption"
|
||||||
|
render-type="tag"
|
||||||
|
tip-subject="api"
|
||||||
|
>
|
||||||
|
</version-tip>
|
||||||
|
</template>
|
||||||
|
</tiny-grid-column>
|
||||||
|
<tiny-grid-column
|
||||||
|
v-if="tableData[oneGroup.name][key].find((i) => i.type)"
|
||||||
|
field="type"
|
||||||
|
:title="i18nByKey('propType')"
|
||||||
|
:width="columnWidth[key][1]"
|
||||||
|
>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span
|
||||||
|
:class="{ 'type-link': row.typeAnchorName || row.linkTo }"
|
||||||
|
:id="row.typeAnchorName ? row.type : ''"
|
||||||
|
@click="toOuterType(row)"
|
||||||
|
>{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
|
||||||
|
></span>
|
||||||
|
</template>
|
||||||
|
</tiny-grid-column>
|
||||||
|
<tiny-grid-column
|
||||||
|
v-if="key === 'props' || key === 'options'"
|
||||||
|
field="defaultValue"
|
||||||
|
:title="i18nByKey('defValue')"
|
||||||
|
:width="columnWidth[key][2]"
|
||||||
|
></tiny-grid-column>
|
||||||
|
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
|
||||||
|
<template #default="data">
|
||||||
|
<span v-html="data.row.desc"></span>
|
||||||
|
</template>
|
||||||
|
</tiny-grid-column>
|
||||||
|
</tiny-grid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -812,6 +816,7 @@ export default defineComponent({
|
||||||
transition: all ease-in-out 0.3s;
|
transition: all ease-in-out 0.3s;
|
||||||
|
|
||||||
.docs-tabs-wrap {
|
.docs-tabs-wrap {
|
||||||
|
width: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -863,11 +868,18 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.api-table-box {
|
||||||
|
border-left: 1px solid rgb(239, 239, 245);
|
||||||
|
border-right: 1px solid rgb(239, 239, 245);
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.api-table {
|
.api-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 640px;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border: 1px solid rgb(239, 239, 245);
|
|
||||||
|
|
||||||
a,
|
a,
|
||||||
.type-link {
|
.type-link {
|
||||||
|
|
@ -956,7 +968,7 @@ export default defineComponent({
|
||||||
.all-demos-container,
|
.all-demos-container,
|
||||||
.all-api-container {
|
.all-api-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-top: 32px;
|
padding: 32px 0;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue