Skip to content

Commit 10579bd

Browse files
zzcrzzcr
committed
fix(site): fix site api table style
1 parent 4c65284 commit 10579bd

File tree

2 files changed

+135
-123
lines changed

2 files changed

+135
-123
lines changed

‎examples/sites/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@opentiny/vue-docs",
3-
"version": "3.19.4",
3+
"version": "3.19.7",
44
"license": "MIT",
55
"scripts": {
66
"start": "vite",

‎examples/sites/src/views/components/components.vue

Lines changed: 134 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -36,60 +36,62 @@
3636
<div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
3737
{{ key }}
3838
</div>
39-
<tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
40-
<tiny-grid-column
41-
v-if="tableData[oneGroup.name][key][0]?.type"
42-
class-name="api-table-expand-col"
43-
type="expand"
44-
width="32"
45-
>
46-
<template #default="{ row }">
47-
<async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
48-
</template>
49-
</tiny-grid-column>
50-
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
51-
<template #default="{ row }">
52-
<span class="api-table-name">
53-
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
54-
<span v-else>{{ row.name }}</span>
55-
</span>
56-
<version-tip
57-
v-if="row.meta || row.versionTipOption"
58-
:meta="row.meta"
59-
v-bind="row.versionTipOption"
60-
render-type="tag"
61-
tip-subject="api"
62-
>
63-
</version-tip>
64-
</template>
65-
</tiny-grid-column>
66-
<tiny-grid-column
67-
v-if="tableData[oneGroup.name][key][0]?.type"
68-
field="type"
69-
:title="i18nByKey('propType')"
70-
:width="columnWidth[key][1]"
71-
>
72-
<template #default="{ row }">
73-
<a
74-
v-if="row.typeAnchorName"
75-
:href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
76-
v-html="row.type"
77-
></a>
78-
<span v-else v-html="row.type"></span>
79-
</template>
80-
</tiny-grid-column>
81-
<tiny-grid-column
82-
v-if="key === 'props'"
83-
field="defaultValue"
84-
:title="i18nByKey('defValue')"
85-
:width="columnWidth[key][2]"
86-
></tiny-grid-column>
87-
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
88-
<template #default="data">
89-
<span v-html="data.row.desc"></span>
90-
</template>
91-
</tiny-grid-column>
92-
</tiny-grid>
39+
<div class="api-table-box">
40+
<tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
41+
<tiny-grid-column
42+
v-if="tableData[oneGroup.name][key][0]?.type"
43+
class-name="api-table-expand-col"
44+
type="expand"
45+
width="32"
46+
>
47+
<template #default="{ row }">
48+
<async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
49+
</template>
50+
</tiny-grid-column>
51+
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
52+
<template #default="{ row }">
53+
<span class="api-table-name">
54+
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
55+
<span v-else>{{ row.name }}</span>
56+
</span>
57+
<version-tip
58+
v-if="row.meta || row.versionTipOption"
59+
:meta="row.meta"
60+
v-bind="row.versionTipOption"
61+
render-type="tag"
62+
tip-subject="api"
63+
>
64+
</version-tip>
65+
</template>
66+
</tiny-grid-column>
67+
<tiny-grid-column
68+
v-if="tableData[oneGroup.name][key][0]?.type"
69+
field="type"
70+
:title="i18nByKey('propType')"
71+
:width="columnWidth[key][1]"
72+
>
73+
<template #default="{ row }">
74+
<a
75+
v-if="row.typeAnchorName"
76+
:href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
77+
v-html="row.type"
78+
></a>
79+
<span v-else v-html="row.type"></span>
80+
</template>
81+
</tiny-grid-column>
82+
<tiny-grid-column
83+
v-if="key === 'props'"
84+
field="defaultValue"
85+
:title="i18nByKey('defValue')"
86+
:width="columnWidth[key][2]"
87+
></tiny-grid-column>
88+
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
89+
<template #default="data">
90+
<span v-html="data.row.desc"></span>
91+
</template>
92+
</tiny-grid-column>
93+
</tiny-grid>
94+
</div>
9395
</template>
9496
</div>
9597
</div>
@@ -142,7 +144,7 @@
142144
<div id="API" class="all-api-container">
143145
<div class="ti-f-c ti-f-wrap api-list">
144146
<!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
145-
<div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
147+
<div class="mt20 wp100" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
146148
<div class="ti-f-r ti-f-pos-start ti-fw-bold">
147149
<div :id="`cmp-${oneGroup.name}`" class="ti-f18">
148150
{{ oneGroup.name }}
@@ -156,73 +158,75 @@
156158
<div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
157159
{{ key }}
158160
</div>
159-
<tiny-grid
160-
ref="apiTableRef"
161-
class="api-table"
162-
:data="tableData[oneGroup.name][key]"
163-
:expand-config="apiExpandConf"
164-
row-id="name"
165-
>
166-
<tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
167-
<template #default="{ row }">
168-
<async-highlight
169-
v-if="row.code"
170-
:code="row.code.trim()"
171-
:types="chartCode ? 'html' : 'ts'"
172-
></async-highlight>
173-
<div v-if="row.depTypes">
161+
<div class="api-table-box">
162+
<tiny-grid
163+
ref="apiTableRef"
164+
class="api-table"
165+
:data="tableData[oneGroup.name][key]"
166+
:expand-config="apiExpandConf"
167+
row-id="name"
168+
>
169+
<tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
170+
<template #default="{ row }">
174171
<async-highlight
175-
v-for="(k, i) in row.depTypes"
176-
:key="i"
177-
:code="currJson.types[k]?.code"
178-
types="ts"
172+
v-if="row.code"
173+
:code="row.code.trim()"
174+
:types="chartCode ? 'html' : 'ts'"
179175
></async-highlight>
180-
</div>
181-
</template>
182-
</tiny-grid-column>
183-
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
184-
<template #default="{ row }">
185-
<span class="api-table-name">
186-
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
187-
<span v-else>{{ row.name }}</span>
188-
</span>
189-
<version-tip
190-
v-if="row.meta || row.versionTipOption"
191-
:meta="row.meta"
192-
v-bind="row.versionTipOption"
193-
render-type="tag"
194-
tip-subject="api"
195-
>
196-
</version-tip>
197-
</template>
198-
</tiny-grid-column>
199-
<tiny-grid-column
200-
v-if="tableData[oneGroup.name][key].find((i) => i.type)"
201-
field="type"
202-
:title="i18nByKey('propType')"
203-
:width="columnWidth[key][1]"
204-
>
205-
<template #default="{ row }">
206-
<span
207-
:class="{ 'type-link': row.typeAnchorName || row.linkTo }"
208-
:id="row.typeAnchorName ? row.type : ''"
209-
@click="toOuterType(row)"
210-
>{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
211-
></span>
212-
</template>
213-
</tiny-grid-column>
214-
<tiny-grid-column
215-
v-if="key === 'props' || key === 'options'"
216-
field="defaultValue"
217-
:title="i18nByKey('defValue')"
218-
:width="columnWidth[key][2]"
219-
></tiny-grid-column>
220-
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
221-
<template #default="data">
222-
<span v-html="data.row.desc"></span>
223-
</template>
224-
</tiny-grid-column>
225-
</tiny-grid>
176+
<div v-if="row.depTypes">
177+
<async-highlight
178+
v-for="(k, i) in row.depTypes"
179+
:key="i"
180+
:code="currJson.types[k]?.code"
181+
types="ts"
182+
></async-highlight>
183+
</div>
184+
</template>
185+
</tiny-grid-column>
186+
<tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
187+
<template #default="{ row }">
188+
<span class="api-table-name">
189+
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
190+
<span v-else>{{ row.name }}</span>
191+
</span>
192+
<version-tip
193+
v-if="row.meta || row.versionTipOption"
194+
:meta="row.meta"
195+
v-bind="row.versionTipOption"
196+
render-type="tag"
197+
tip-subject="api"
198+
>
199+
</version-tip>
200+
</template>
201+
</tiny-grid-column>
202+
<tiny-grid-column
203+
v-if="tableData[oneGroup.name][key].find((i) => i.type)"
204+
field="type"
205+
:title="i18nByKey('propType')"
206+
:width="columnWidth[key][1]"
207+
>
208+
<template #default="{ row }">
209+
<span
210+
:class="{ 'type-link': row.typeAnchorName || row.linkTo }"
211+
:id="row.typeAnchorName ? row.type : ''"
212+
@click="toOuterType(row)"
213+
>{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
214+
></span>
215+
</template>
216+
</tiny-grid-column>
217+
<tiny-grid-column
218+
v-if="key === 'props' || key === 'options'"
219+
field="defaultValue"
220+
:title="i18nByKey('defValue')"
221+
:width="columnWidth[key][2]"
222+
></tiny-grid-column>
223+
<tiny-grid-column field="desc" :title="i18nByKey('desc')">
224+
<template #default="data">
225+
<span v-html="data.row.desc"></span>
226+
</template>
227+
</tiny-grid-column>
228+
</tiny-grid>
229+
</div>
226230
</template>
227231
</div>
228232
</div>
@@ -812,6 +816,7 @@ export default defineComponent({
812816
transition: all ease-in-out 0.3s;
813817
814818
.docs-tabs-wrap {
819+
width: 100%;
815820
flex: 1;
816821
display: flex;
817822
justify-content: center;
@@ -863,11 +868,18 @@ export default defineComponent({
863868
}
864869
}
865870
871+
.api-table-box {
872+
border-left: 1px solid rgb(239, 239, 245);
873+
border-right: 1px solid rgb(239, 239, 245);
874+
overflow-x: auto;
875+
width: 100%;
876+
}
877+
866878
.api-table {
867879
width: 100%;
880+
min-width: 640px;
868881
table-layout: fixed;
869882
border-collapse: collapse;
870-
border: 1px solid rgb(239, 239, 245);
871883
872884
a,
873885
.type-link {
@@ -956,7 +968,7 @@ export default defineComponent({
956968
.all-demos-container,
957969
.all-api-container {
958970
flex: 1;
959-
padding-top: 32px;
971+
padding: 32px 0;
960972
scroll-behavior: smooth;
961973
}
962974

0 commit comments

Comments
 (0)