zhoujunyu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix some bugs of demo (#1037) 

* fix(docs): fixed some bugs of demo

* fix(steps): Optimized steps docs

* fix(timeline): [time-line] Optimized timeline api docs

* fix(tree-menu): [tree-menu] Optimized treeMenu docs

* fix(tree-menu): [tree-menu] ellipse props did not work
This commit is contained in:
黄怡林 2023-12-07 09:35:53 +08:00 committed by GitHub
parent 96caa9a1b5
commit 9065b867aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 89 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/sites/demos/pc/app/steps/click-composition-api.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="demo-steps-click">
<div>点击步骤条节点来切换选中状态</div>
<tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
<div v-if="currentNode">
<span>选中节点 index: {{ currentNode.index }} </span><br />

2
examples/sites/demos/pc/app/steps/node-status-composition-api.vue
View File

@ -9,7 +9,7 @@ import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
const normalActive = ref(0)
const data = ref([
{
name: 'Basic Info.'
name: 'Basic Info'
},
{
name: 'BOQ Info'

2
examples/sites/demos/pc/app/steps/node-status.vue
View File

@ -14,7 +14,7 @@ export default {
normalActive: 0,
data: [
{
name: 'Basic Info.'
name: 'Basic Info'
},
{
name: 'BOQ Info'

2
examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue
View File

@ -7,7 +7,7 @@ import { ref } from 'vue'
import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
const normalActive = ref(0)
const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
const normalClick = (index, node) => {
normalActive.value = index

2
examples/sites/demos/pc/app/steps/normal-steps.vue
View File

@ -12,7 +12,7 @@ export default {
data() {
return {
normalActive: 0,
data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
}
},
methods: {

2
examples/sites/demos/pc/app/steps/only-number-composition-api.vue
View File

@ -7,7 +7,7 @@ import { ref } from 'vue'
import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
const normalActive = ref(0)
const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
const onlyNumber = ref(true)
function normalClick(index, node) {

2
examples/sites/demos/pc/app/steps/only-number.vue
View File

@ -12,7 +12,7 @@ export default {
data() {
return {
normalActive: 0,
data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
}
},
methods: {

2
examples/sites/demos/pc/app/steps/show-divider-composition-api.vue
View File

@ -8,7 +8,7 @@ import { ref } from 'vue'
import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
const normalActive = ref(0)
const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
const normalClick = (index, node) => {
normalActive.value = index

2
examples/sites/demos/pc/app/steps/show-divider.vue
View File

@ -13,7 +13,7 @@ export default {
data() {
return {
normalActive: 0,
data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
}
},
methods: {

15
examples/sites/demos/pc/app/steps/size-composition-api.vue
View File

@ -9,19 +9,16 @@ import { Steps as TinySteps, Modal } from '@opentiny/vue'
const active = ref(0)
const data = ref([
{
name: 'Basic Info'
},
{
name: 'AAAAA'
name: 'Basic Info',
status: 'done'
},
{ name: 'BOQ Info', status: 'done', description: 'done 已完成' },
{ name: 'BBQ Info', status: 'error', description: 'error 错误' },
{
name: 'Involved Parties',
error: true
status: 'disabled'
},
{
name: 'Billing',
disabled: true
}
{ name: 'Billing', status: '', description: '默认无状态' }
])
const normalClick = (index, node) => {

8
examples/sites/demos/pc/app/steps/size.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-steps vertical line size="small" :data="data" :active="advancedActive" @click="normalClick"></tiny-steps>
<tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
</template>
<script>
@ -11,7 +11,7 @@ export default {
},
data() {
return {
advancedActive: 1,
active: 1,
data: [
{
name: 'Basic Info',
@ -20,7 +20,7 @@ export default {
{ name: 'BOQ Info', status: 'done', description: 'done 已完成' },
{ name: 'BBQ Info', status: 'error', description: 'error 错误' },
{
name: 'Involved Parties Involved Parties Involved Parties',
name: 'Involved Parties',
status: 'disabled'
},
{ name: 'Billing', status: '', description: '默认无状态' }
@ -29,7 +29,7 @@ export default {
},
methods: {
normalClick(index, node) {
normalActive.value = index
this.active = index
}
}
}

4
examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue
View File

@ -12,7 +12,7 @@ import { TimeLine as TinyTimeLine } from '@opentiny/vue'
const active = ref(0)
const data = ref([
{ name: 'Basic Info.', desc: '基本信息必填' },
{ name: 'Basic Info', desc: '基本信息必填' },
{ name: 'BOQ Info', desc: '第二步信息' },
{ name: 'Involved Parties', desc: '第三步信息' },
{ name: 'Billing', desc: '最终步骤信息' }
@ -26,6 +26,8 @@ function normalClick(index, node) {
<style scoped>
.active-node-desc {
width: 100px;
padding: 2px;
margin-top: 2px;
background-color: #fafafa;
font-size: 12px;
}

4
examples/sites/demos/pc/app/steps/slot-active-node-desc.vue
View File

@ -17,7 +17,7 @@ export default {
return {
active: 0,
data: [
{ name: 'Basic Info.', desc: '基本信息必填' },
{ name: 'Basic Info', desc: '基本信息必填' },
{ name: 'BOQ Info', desc: '第二步信息' },
{ name: 'Involved Parties', desc: '第三步信息' },
{ name: 'Billing', desc: '最终步骤信息' }
@ -35,6 +35,8 @@ export default {
<style scoped>
.active-node-desc {
width: 100px;
padding: 2px;
margin-top: 2px;
background-color: #fafafa;
font-size: 12px;
}

12
examples/sites/demos/pc/app/steps/slot-description-composition-api.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-time-line :active="active" :show-divider="true" text-position="right" space="280px">
<tiny-time-line :active="active" :show-divider="true" text-position="right" space="220px">
<tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)">
<template #description>
<div class="my-description">
@ -16,10 +16,9 @@ import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem } from '@ope
const active = ref(0)
const data = ref([
{ name: 'Basic Info.', description: '基本信息必填' },
{ name: 'BOQ Info', description: '第二步信息' },
{ name: 'Involved Parties', description: '第三步信息' },
{ name: 'Billing', description: '最终步骤信息' }
{ name: 'Basic Info', description: '基本信息必填' },
{ name: 'BOQ Info', description: '第二步描述信息' },
{ name: 'Billing', description: '最终步骤描述' }
])
const normalClick = (index, node) => {
@ -30,7 +29,8 @@ const normalClick = (index, node) => {
<style scoped>
.my-description {
width: 100px;
background-color: #fafafa;
padding: 0 2px;
margin-top: 4px;
font-size: 12px;
}
</style>

10
examples/sites/demos/pc/app/steps/slot-description.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-time-line :active="active" text-position="right" show-divider="true" space="280px">
<tiny-time-line :active="active" text-position="right" show-divider="true" space="220px">
<tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)">
<template #description>
<div class="my-description">
@ -22,9 +22,9 @@ export default {
return {
active: 1,
data: [
{ name: 'Basic Info.', description: '基本信息必填' },
{ name: 'Basic Info', description: '基本信息必填' },
{ name: 'BOQ Info', description: '第二步描述信息' },
{ name: 'Billing', description: '最终步骤信息' }
{ name: 'Billing', description: '最终步骤描述' }
]
}
},
@ -39,8 +39,8 @@ export default {
<style scoped>
.my-description {
width: 100px;
margin-top: 2px;
background-color: #eee;
padding: 0 2px;
margin-top: 4px;
font-size: 12px;
}
</style>

1
examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="demo-steps-slot-item">
<div>通过 item 插槽添加自定义图标</div>
<tiny-steps :data="stepsData">
<template #item="data">
<a class="label"

1
examples/sites/demos/pc/app/steps/slot-item.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="demo-steps-slot-item">
<div>通过 item 插槽添加自定义图标：</div>
<tiny-steps :data="stepsData">
<template #item="data">
<a class="label"

2
examples/sites/demos/pc/app/steps/text-position-composition-api.vue
View File

@ -9,7 +9,7 @@ import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
const normalActive = ref(0)
const data = ref([
{
name: 'Basic Info.'
name: 'Basic Info'
},
{
name: 'AAAAA'

2
examples/sites/demos/pc/app/steps/text-position.vue
View File

@ -14,7 +14,7 @@ export default {
normalActive: 0,
data: [
{
name: 'Basic Info.'
name: 'Basic Info'
},
{
name: 'AAAAA'

35
examples/sites/demos/pc/app/steps/webdoc/steps.js
View File

@ -45,7 +45,7 @@ export default {
'name': { 'zh-CN': '节点状态', 'en-US': 'Timeline Step Bar' },
'desc': {
'zh-CN':
'<p>通过单个节点数据中的 <code>disabled</code> 属性配置是否禁用；<code>error</code> 属性配置错误状态</p>\n',
'<p>通过单个节点数据中的 <code>disabled</code> 属性配置是否禁用；<code>error</code> 属性配置错误状态。</p>\n',
'en-US':
'<p>The <code>disabled</code> attribute in single node data is used to configure whether to disable, while the <code>error</code> attribute is used to configure error state</p>\n'
},
@ -123,15 +123,6 @@ export default {
},
'codeFiles': ['only-number.vue']
},
{
'demoId': 'click',
'name': { 'zh-CN': '点击事件', 'en-US': '' },
'desc': {
'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n',
'en-US': 'Trigger <code>click</code> event when clicking on a node.'
},
'codeFiles': ['click.vue']
},
{
'demoId': 'slot-item',
'name': { 'zh-CN': 'item插槽', 'en-US': 'item slot' },
@ -140,13 +131,22 @@ export default {
'en-US': 'Customize step bar node content through scope slot <code>item</code>.'
},
'codeFiles': ['slot-item.vue']
},
{
'demoId': 'click',
'name': { 'zh-CN': '点击事件', 'en-US': '' },
'desc': {
'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n',
'en-US': 'Trigger <code>click</code> event when clicking on a node.'
},
'codeFiles': ['click.vue']
}
],
apis: [
{
'name': 'steps',
'type': 'component',
'properties': [
'props': [
{
'name': 'active',
'type': 'number',
@ -160,7 +160,7 @@ export default {
{
'name': 'count-field',
'type': 'string',
'defaultValue': 'count',
'defaultValue': "'count'",
'desc': {
'zh-CN': '条形步骤条里徽标计数对应的字段名',
'en-US': 'Custom field name corresponding to logo count in bar steps'
@ -183,7 +183,7 @@ export default {
{
'name': 'name-field',
'type': 'string',
'defaultValue': 'name',
'defaultValue': "'name'",
'desc': {
'zh-CN': '节点名称对应的字段名',
'en-US': 'Field name corresponds to name of node'
@ -225,7 +225,7 @@ export default {
'type': 'string | number',
'defaultValue': '',
'desc': {
'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位。',
'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位',
'en-US':
'Node width can be set to numeric values, values with length units, or percentages. Numeric values will default to using pixels as the length unit'
},
@ -234,7 +234,7 @@ export default {
{
'name': 'status-field',
'type': 'string',
'defaultValue': 'status',
'defaultValue': "'status'",
'desc': {
'zh-CN': '数据状态对应的字段名，用于条形步骤条',
'en-US': 'Field name corresponding to data status, used for bar steps '
@ -244,7 +244,7 @@ export default {
{
'name': 'text-position',
'type': 'string',
'defaultValue': 'bottom',
'defaultValue': "'bottom'",
'desc': {
'zh-CN': '节点名称的位置， 可选值有right | bottom，用于单链型步骤条',
'en-US':
@ -256,7 +256,8 @@ export default {
'events': [
{
'name': 'click',
'type': '(index: number, node: IStepsItem | ITimelineItem) => void',
'type':
'(index: number, node: <a href="#IStepsItem">IStepsItem</a> | <a href="time-line#ITimelineItem">ITimelineItem</a>) => void',
'desc': {
'zh-CN': '节点点击事件，参数：<li>index: 点击节点的索引</li><li>node：点击节点的数据</li>',
'en-US': 'Node click event. Parameter: (index: node index, node: node data information)'

24
examples/sites/demos/pc/app/time-line/webdoc/time-line.js
View File

@ -47,14 +47,14 @@ export default {
'demoId': 'status',
'name': { 'zh-CN': '节点状态', 'en-US': 'Status of Node' },
'desc': {
'zh-CN': '<p>在单项数据中使用 <code>status</code> 指定对应节点的状态.</p>',
'zh-CN': '<p>在单项数据中使用 <code>status</code> 指定对应节点的状态。</p>',
'en-US': '<p>Use the <code>shape</code> attribute to set the appearance of a vertical time line node. </p>'
},
'codeFiles': ['status.vue']
},
{
'demoId': 'set-node-width',
'name': { 'zh-CN': '宽度设置', 'en-US': 'Width Setting' },
'name': { 'zh-CN': '宽度', 'en-US': 'Width Setting' },
'desc': {
'zh-CN': '<p>通过 <code>space</code> 属性设置节点的宽度。</p>\n',
'en-US': '<p>Use the <code>space</code> attribute to set the width of timeline node. </p>\n'
@ -108,7 +108,7 @@ export default {
{
'name': 'time-line',
'type': 'component',
'properties': [
'props': [
{
'name': 'active',
'type': 'number',
@ -154,7 +154,7 @@ export default {
{
'name': 'name-field',
'type': 'string',
'defaultValue': 'name',
'defaultValue': "'name'",
'desc': {
'zh-CN': '节点名称对应的字段名',
'en-US': 'Set the field name in the node information.'
@ -174,10 +174,10 @@ export default {
{
'name': 'shape',
'type': 'string',
'defaultValue': 'circle',
'defaultValue': "'circle'",
'desc': {
'zh-CN': '圆点外形: 空心圆形或实心圆点，分别对应 circle | dot',
'en-US': 'Set the appearance of point, optional values include circle and dot'
'zh-CN': "圆点外形: 空心圆形或实心圆点，取值分别对应 'circle' | 'dot'",
'en-US': "Set the appearance of point, optional values include 'circle' and 'dot'"
},
'demoId': 'shape'
},
@ -196,7 +196,7 @@ export default {
'type': 'string | number',
'defaultValue': '--',
'desc': {
'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
'en-US':
'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
},
@ -215,7 +215,7 @@ export default {
{
'name': 'time-field',
'type': 'string',
'defaultValue': 'time',
'defaultValue': "'time'",
'desc': {
'zh-CN': '节点时间信息对应的字段名',
'en-US': 'The name of the field corresponding to the node time information'
@ -236,7 +236,7 @@ export default {
'events': [
{
'name': 'click',
'type': '(index: number, node: ITimelineItem) => void',
'type': '(index: number, node: <a href="#ITimelineItem">ITimelineItem</a>) => void',
'desc': {
'zh-CN': '节点的点击事件，参数：<br />index：点击节点的下标<br /> node： 点击节点数据}',
'en-US': 'Click event of a node. arguments:<br />index: click the subscript of a node<br />node: node data'
@ -299,7 +299,7 @@ export default {
'type': 'string | number',
'defaultValue': '--',
'desc': {
'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效。',
'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效',
'en-US':
'The length of the connection line and it is valid only when text-position is set to true. After setting, the space property is invalid'
},
@ -310,7 +310,7 @@ export default {
'type': 'string | number',
'defaultValue': '--',
'desc': {
'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
'en-US':
'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
},

2
examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md
View File

@ -4,4 +4,4 @@ title: TreeMenu 树型菜单
# TreeMenu 树型菜单
> 以树形方式显示的菜单，适用于版型定制的一种组件。
以树形方式显示的菜单，适用于版型定制的一种组件。

2
examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.en.md
View File

@ -4,4 +4,4 @@ title: TreeMenu
# TreeMenu
> The menu is displayed in tree mode and is applicable to a component of version customization.
The menu is displayed in tree mode and is applicable to a component of version customization.

2
examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
View File

@ -294,7 +294,7 @@ export default {
{
'name': 'tree-menu',
'type': 'component',
'properties': [
'props': [
{
'name': 'accordion',
'type': 'boolean',

15
packages/theme/src/tree-menu/index.less
View File

@ -100,7 +100,7 @@
right: 16px;
max-width: 36px;
overflow: hidden;
font-size: var(--tree-menu-node-number-font-size);
font-size: var(--ti-tree-menu-node-number-font-size);
}
.tree-node {
@ -108,7 +108,13 @@
}
.tree-node-name {
display: flex;
align-items: center;
padding: 0 var(--ti-tree-menu-node-body-text-padding-horizontal);
svg {
margin-right: var(--ti-tree-menu-prefix-icon-margin-right);
}
}
}
@ -128,7 +134,7 @@
.@{tree-node-prefix-cls}__content-left {
position: relative;
padding-left: var(--tree-menu-node-vertical-line-margin-right);
padding-left: var(--ti-tree-menu-node-vertical-line-margin-right);
}
&.is-current {
@ -177,6 +183,11 @@
&.@{tree-prefix-cls} {
.@{tree-node-prefix-cls} {
.@{tree-node-prefix-cls}__content {
&-box {
max-width: 100%;
padding-right: 0;
}
.tree-node-name {
white-space: nowrap;
overflow: hidden;

6
packages/theme/src/tree-menu/vars.less
View File

@ -36,7 +36,9 @@
// 折叠图标右边距
--ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-2x, 8px);
// 节点序号字号
--tree-menu-node-number-font-size: var(--ti-common-font-size-base, 12px);
--ti-tree-menu-node-number-font-size: var(--ti-common-font-size-base, 12px);
// 活跃节点竖线与文本的间距
--tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
--ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
// 前缀图标右边距
--ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
}

3
packages/vue/src/tree/src/pc.vue
View File

@ -228,7 +228,8 @@ export default defineComponent({
'current-change',
'node-click',
'leave-plain-view',
'check-plain'
'check-plain',
'load-data'
],
provide() {
return {