forked from opentiny/tiny-vue
feat: Adapting to the X-design theme (#1534)
This commit is contained in:
ajaxzheng
GitHub
parent
01519cb175
commit
564912012a
|
|
@ -194,6 +194,8 @@ export default {
|
|||
currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
|
||||
demoLoading: false
|
||||
})
|
||||
// hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
|
||||
const huiNewChart = ['chart-process']
|
||||
const fn = {
|
||||
// 菜单搜索：忽略大小写
|
||||
searchMenu: (value, data) => {
|
||||
|
|
@ -234,7 +236,12 @@ export default {
|
|||
const demosConfig = await getDemosConfig(demosModule)
|
||||
state.demos = demosConfig.demos
|
||||
state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
|
||||
|
||||
if (huiNewChart.includes(modeState.pathName)) {
|
||||
state.currApi = (await getApisConfig('hui', 'pc')).apis
|
||||
} else {
|
||||
state.currApi = (await getApisConfig(componentName, 'pc')).apis
|
||||
}
|
||||
await _switchDemo()
|
||||
}
|
||||
async function _switchDemo() {
|
||||
|
|
|
|||
|
|
@ -376,6 +376,16 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'filterable'
|
||||
},
|
||||
{
|
||||
name: 'no-data',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>no-data</code> 插槽设置没有数据时显示的内容',
|
||||
'en-US': 'Set what is displayed when there is no data via the <code>no-data</code> slot'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'slot-nodata'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
type: "'ltr' | 'rtl'",
|
||||
defaultValue: 'ltr',
|
||||
desc: {
|
||||
'zh-CN': '文字排版方向',
|
||||
'zh-CN': '文字样式方向',
|
||||
'en-US': 'Text layout direction'
|
||||
},
|
||||
mode: ['pc'],
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'credit-card-form',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'background-image',
|
||||
type: 'string , object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置卡片的背景图片;',
|
||||
'en-US': 'Set the background image of the card.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'background-image'
|
||||
},
|
||||
{
|
||||
name: 'form-data',
|
||||
type: 'object',
|
||||
defaultValue:
|
||||
"// 该属性的默认值为 \n{cardCvv: '', cardName: '', cardYear: '', cardMonth: '', cardNumber: ''}",
|
||||
desc: {
|
||||
'zh-CN': '设置信用卡显示数据',
|
||||
'en-US': 'Setting Credit Card Display Data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'input-card-cvv',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '输入 cvv 时触发的事件',
|
||||
'en-US': 'CVV input event triggered'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'credit-card-form-events'
|
||||
},
|
||||
{
|
||||
name: 'input-card-month',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '选择月时触发的事件',
|
||||
'en-US': 'Event triggered when a month is selected'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'credit-card-form-events'
|
||||
},
|
||||
{
|
||||
name: 'input-card-name',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '输入卡持有者时触发的事件',
|
||||
'en-US': 'Event triggered when a card holder is entered'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'credit-card-form-events'
|
||||
},
|
||||
{
|
||||
name: 'input-card-number',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '输入卡号时触发的事件',
|
||||
'en-US': 'Event triggered when a card number is entered'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'credit-card-form-events'
|
||||
},
|
||||
{
|
||||
name: 'input-card-year',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '选择年时触发的事件',
|
||||
'en-US': 'Event triggered when the year is selected'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'credit-card-form-events'
|
||||
},
|
||||
{
|
||||
name: 'submit',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '提交时触发的事件',
|
||||
'en-US': 'Event triggered upon submission'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'credit-card-form-events'
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'detail-page',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'cancel-button',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': "个性化弹窗取消按钮的文本，默认为 '取消'",
|
||||
'en-US': "Text of the cancel button in the personalized pop-up window, The default value is'Cancel'"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
},
|
||||
{
|
||||
name: 'dialog-title',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': "个性化弹窗标题，默认为 '个性化标题'",
|
||||
'en-US': "Personalize pop-up title, default is'Personalized title'"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
},
|
||||
{
|
||||
name: 'label-title',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '文本字段'",
|
||||
'en-US': "Personalized pop-up window header text title bar field, The default value is 'Title'"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
},
|
||||
{
|
||||
name: 'modelValue / v-model',
|
||||
typeAnchorName: 'IDetailPageItem',
|
||||
type: 'IDetailPageItem[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置表头详情栏的数据',
|
||||
'en-US': 'Set the data in the table header details column'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'save-button',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': "个性化弹窗确定按钮的文本，默认为 '确定'",
|
||||
'en-US': "Text of the confirmation button in the personalized pop-up window, The default value is'Confirm'"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
},
|
||||
{
|
||||
name: 'text-split',
|
||||
type: 'string',
|
||||
defaultValue: "'---'",
|
||||
desc: {
|
||||
'zh-CN': '详情栏标题分隔符',
|
||||
'en-US': 'Details column title separator'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
},
|
||||
{
|
||||
name: 'tips',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': "提示不能全部隐藏的提示语，默认为 '不能全部隐藏'",
|
||||
'en-US': "Prompt message that cannot be completely hidden, The default value is 'Cannot hide all' "
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': "详情栏标, 默认为 '数据'",
|
||||
'en-US': "Details field, default value is' Data '"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
},
|
||||
{
|
||||
name: 'value-title',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': "个性化弹窗表头文本操作栏字段，默认为 '勾选隐藏'",
|
||||
'en-US':
|
||||
"Personalized pop-up window header text operation column field, The default value is'Click to hide'"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-show-text'
|
||||
}
|
||||
],
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IDetailPageItem',
|
||||
type: 'interface',
|
||||
code: `interface IDetailPageItem {
|
||||
label: string
|
||||
value: string
|
||||
hidden?: boolean
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: '--',
|
||||
desc: {
|
||||
'zh-CN': '图表参数',
|
||||
'en-US': 'Whether to disable container detection during resize'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'chart/question#question-base'
|
||||
}
|
||||
],
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface options {
|
||||
theme: string // 主题
|
||||
color: array | string // 颜色
|
||||
padding: array // 图表内边距值
|
||||
tipHtml: function // 悬浮提示框内容配置
|
||||
event: object // 图表事件
|
||||
data: array // 图表数据
|
||||
name: string // 图表名称(必填)
|
||||
unit: string // 进度图右侧文本单位
|
||||
barWidth: number // 进度图柱形宽度
|
||||
minWidth: string // 进度图单项数据的最小宽度
|
||||
calibrationValue: number // 进度图标定值
|
||||
label: object // 堆叠进度图图表图元文本样式
|
||||
state: object // 根据状态设置颜色
|
||||
title: object // 进度图图表标题样式
|
||||
text: object // 进度图图表右侧文本样式
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'image-size',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置预览的图片的大小',
|
||||
|
|
@ -54,7 +54,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'preview-visible',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '开启移动端预览大图的功能',
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'round',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '通过 round 设置是否展示圆形',
|
||||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'show-hover',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置预览的图片的悬浮效果',
|
||||
|
|
@ -101,14 +101,15 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'show-index',
|
||||
type: 'String',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '开启图片序列号展示',
|
||||
'en-US': 'Enable the display of image serial numbers.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'preview-src-list'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
mfDemo: 'preview-src-list',
|
||||
pcDemo: 'preview'
|
||||
},
|
||||
{
|
||||
name: 'src',
|
||||
|
|
@ -133,6 +134,18 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'keep-style',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '保持图片样式属性',
|
||||
'en-US': 'Preserve Picture Style Properties'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'keep-style',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
@ -197,6 +210,18 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'slot',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'count',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置图片计数插槽',
|
||||
'en-US': 'Set Picture Count Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'count-slot',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,24 +7,26 @@ export default {
|
|||
props: [
|
||||
{
|
||||
name: 'modelValue',
|
||||
type: 'NodeObj',
|
||||
type: 'Object',
|
||||
defaultValue: '{}',
|
||||
desc: {
|
||||
'zh-CN': '默认节点数据',
|
||||
'en-US': 'Default node data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
pcDemo: 'export-data'
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'Options',
|
||||
typeAnchorName: 'IMindMaoOptions',
|
||||
type: 'IMindMaoOptions',
|
||||
defaultValue: '{contextMenu: false,toolBar: false,nodeMenu: false}',
|
||||
desc: {
|
||||
'zh-CN': '配置项',
|
||||
'en-US': 'options'
|
||||
},
|
||||
mode: ['pc']
|
||||
mode: ['pc'],
|
||||
pcDemo: 'export-data'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
@ -57,7 +59,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'expandNode',
|
||||
type: 'onExpandNode',
|
||||
typeAnchorName: 'IMindExpandNode',
|
||||
type: 'IMindnExpandNode',
|
||||
desc: {
|
||||
'zh-CN': '展开节点时会触发该事件',
|
||||
'en-US': 'This event will be triggered when expanding a node'
|
||||
|
|
@ -66,7 +69,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'operation',
|
||||
type: 'onOperation',
|
||||
typeAnchorName: 'IMindMapOperation',
|
||||
type: 'IMindMapOperation',
|
||||
desc: {
|
||||
'zh-CN': '节点重新计算时, 例如将节点A拖拽到节点B, 使得节点A是节点B的子节点',
|
||||
'en-US':
|
||||
|
|
@ -76,7 +80,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'selectNewNode',
|
||||
type: 'onSelectNewNode',
|
||||
typeAnchorName: 'IMindMapSelectNewNode',
|
||||
type: 'IMindMapSelectNewNode',
|
||||
desc: {
|
||||
'zh-CN': '创建新节点时',
|
||||
'en-US': 'when create new node'
|
||||
|
|
@ -85,7 +90,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'selectNode',
|
||||
type: 'onSelectNode',
|
||||
typeAnchorName: 'IMindMapSelectNode',
|
||||
type: 'IMindMapSelectNode',
|
||||
desc: {
|
||||
'zh-CN': '选择任意一个节点时, 会触发该事件',
|
||||
'en-US': 'When selecting any node, this event will be triggered'
|
||||
|
|
@ -94,7 +100,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'selectNodes',
|
||||
type: 'onSelectNodes',
|
||||
typeAnchorName: 'IMindMapSelectNodes',
|
||||
type: 'IMindMapSelectNodes',
|
||||
desc: {
|
||||
'zh-CN': '选择多个节点的时候会触发该事件',
|
||||
'en-US': 'When selecting multiple nodes, this event will be triggered'
|
||||
|
|
@ -103,7 +110,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'unselectNode',
|
||||
type: 'onUnselectNode',
|
||||
typeAnchorName: 'IMindMapUnselectNode',
|
||||
type: 'IMindMapUnselectNode',
|
||||
desc: {
|
||||
'zh-CN': '取消选择的时候会触发该事件',
|
||||
'en-US': 'When deselecting, this event will be triggered'
|
||||
|
|
@ -112,7 +120,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'unselectNodes',
|
||||
type: 'onUnselectNode',
|
||||
typeAnchorName: 'IMindMapUnselectNodes',
|
||||
type: 'IMindMapUnselectNodes',
|
||||
desc: {
|
||||
'zh-CN': '取消选择多个节点时会触发该事件',
|
||||
'en-US': 'This event will be triggered when multiple nodes are unselected'
|
||||
|
|
@ -126,10 +135,10 @@ export default {
|
|||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
name: 'IMindMaoOptions',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
interface options {
|
||||
direction?: number
|
||||
locale?: string
|
||||
draggable?: boolean
|
||||
|
|
@ -152,53 +161,39 @@ interface Options {
|
|||
`
|
||||
},
|
||||
{
|
||||
name: 'onOperation',
|
||||
name: 'IMindMapOperation',
|
||||
type: 'type',
|
||||
code: `
|
||||
type onOperation = ({render, info}: {render:MindElixirInstance, info: Operation}) => void
|
||||
`
|
||||
code: `type onOperation = ({render, info}: {render:MindElixirInstance, info: Operation}) => void`
|
||||
},
|
||||
{
|
||||
name: 'onSelectNode',
|
||||
name: 'IMindMapSelectNode',
|
||||
type: 'type',
|
||||
code: `
|
||||
type onSelectNode = ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}, e?: MouseEvent) => void
|
||||
`
|
||||
code: `type onSelectNode = ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}, e?: MouseEvent) => void`
|
||||
},
|
||||
{
|
||||
name: 'onSelectNewNode',
|
||||
name: 'IMindMapSelectNewNode',
|
||||
type: 'type',
|
||||
code: `
|
||||
type selectNewNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void
|
||||
`
|
||||
code: `type selectNewNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void`
|
||||
},
|
||||
{
|
||||
name: 'onSelectNodes',
|
||||
name: 'IMindMapSelectNodes',
|
||||
type: 'type',
|
||||
code: `
|
||||
type selectNodes: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj[]}) => void
|
||||
`
|
||||
code: `type selectNodes: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj[]}) => void`
|
||||
},
|
||||
{
|
||||
name: 'onUnselectNode',
|
||||
name: 'IMindMapUnselectNode',
|
||||
type: 'type',
|
||||
code: `
|
||||
type unselectNodes: ({render}: {render: MindElixirInstance}) => void
|
||||
`
|
||||
code: `type unselectNodes: ({render}: {render: MindElixirInstance}) => void`
|
||||
},
|
||||
{
|
||||
name: 'onUnselectNodes',
|
||||
name: 'IMindMapUnselectNodes',
|
||||
type: 'type',
|
||||
code: `
|
||||
type unselectNodes: ({render}: {render: MindElixirInstance}) => void
|
||||
`
|
||||
code: `type unselectNodes: ({render}: {render: MindElixirInstance}) => void`
|
||||
},
|
||||
{
|
||||
name: 'onExpandNode',
|
||||
name: 'IMindExpandNode',
|
||||
type: 'type',
|
||||
code: `
|
||||
type expandNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void
|
||||
`
|
||||
code: `type expandNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void`
|
||||
},
|
||||
{
|
||||
name: 'NodeObj',
|
||||
|
|
|
|||
|
|
@ -17,6 +17,18 @@ export default {
|
|||
pcDemo: 'allow-empty',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'empty-value',
|
||||
type: 'any',
|
||||
defaultValue: 'undefined',
|
||||
desc: {
|
||||
'zh-CN': '设置计数器在可清空下，清空后组件的绑定值',
|
||||
'en-US': 'Sets the bound value of the cleared component when the counter can be cleared.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'empty-value',
|
||||
mfDemo: 'empty-value'
|
||||
},
|
||||
{
|
||||
name: 'blank',
|
||||
type: 'string',
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@ export default {
|
|||
'en-US': ''
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'selected-box-op'
|
||||
pcDemo: 'selected-box'
|
||||
},
|
||||
{
|
||||
name: 'show-clear-btn',
|
||||
|
|
|
|||
|
|
@ -16,6 +16,19 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'fetch-role'
|
||||
},
|
||||
{
|
||||
name: 'popper-append-to-body',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
|
||||
'en-US':
|
||||
'Indicates whether to insert the pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'base'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
|
|||
|
|
@ -81,6 +81,15 @@ export default {
|
|||
pcDemo: 'clearable',
|
||||
mfDemo: 'clearable'
|
||||
},
|
||||
{
|
||||
name: 'click-expend',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
|
||||
'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'collapse-tags',
|
||||
type: 'boolean',
|
||||
|
|
@ -240,6 +249,18 @@ export default {
|
|||
pcDemo: 'remote-method',
|
||||
mfDemo: 'remote-method'
|
||||
},
|
||||
{
|
||||
name: 'max-visible-rows',
|
||||
type: 'number',
|
||||
defaultValue: '1',
|
||||
desc: {
|
||||
'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
|
||||
'en-US':
|
||||
'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'collapse-tags'
|
||||
},
|
||||
{
|
||||
name: 'modelValue / v-model',
|
||||
type: 'string | number | Array<string|number>',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default {
|
|||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'active',
|
||||
name: 'animated',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
|
|
@ -46,9 +46,8 @@ export default {
|
|||
type: 'number',
|
||||
defaultValue: '3',
|
||||
desc: {
|
||||
'zh-CN': '默认排版，可配置段落显示行数',
|
||||
'en-US':
|
||||
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
|
||||
'zh-CN': '默认样式，可配置段落显示行数',
|
||||
'en-US': 'Default style. The number of lines displayed in a paragraph can be configured'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-rows'
|
||||
|
|
@ -58,9 +57,10 @@ export default {
|
|||
type: 'number[] | string[]',
|
||||
defaultValue: '[]',
|
||||
desc: {
|
||||
'zh-CN': '自定义段落每一行的宽度',
|
||||
'zh-CN':
|
||||
'自定义段落每一行的宽度，数组中的每一项可以为 number 或 string ，当为 number 时，组件会自动增加 px 单位',
|
||||
'en-US':
|
||||
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
|
||||
'Width of each line in a custom paragraph. Each item in the array can be a number or a string. If the value is a number, the component automatically increases the value by px'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-paragraph-width'
|
||||
|
|
@ -74,7 +74,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '加载完成后显示的内容',
|
||||
'en-US': 'Option default slot'
|
||||
'en-US': 'Content displayed after the loading is complete'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-layout'
|
||||
|
|
@ -84,7 +84,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义骨架屏结构',
|
||||
'en-US': 'Option default slot'
|
||||
'en-US': 'Custom Skeleton Screen Structure'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-layout'
|
||||
|
|
@ -99,7 +99,7 @@ export default {
|
|||
name: 'size',
|
||||
typeAnchorName: 'ISize',
|
||||
type: 'ISize',
|
||||
defaultValue: 'medium',
|
||||
defaultValue: "'medium'",
|
||||
desc: {
|
||||
'zh-CN': '针对 image 和 circle 形态，内置三种大小',
|
||||
'en-US':
|
||||
|
|
@ -112,7 +112,7 @@ export default {
|
|||
name: 'variant',
|
||||
typeAnchorName: 'IVariant',
|
||||
type: 'IVariant',
|
||||
defaultValue: 'square',
|
||||
defaultValue: "'square'",
|
||||
desc: {
|
||||
'zh-CN': '骨架屏形态',
|
||||
'en-US':
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'slide-bar',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'init-blocks',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '初始时需要显示的块数',
|
||||
'en-US': 'Number of blocks to be displayed initially'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'wheel-blocks'
|
||||
},
|
||||
{
|
||||
name: 'sub-tag',
|
||||
type: 'string',
|
||||
defaultValue: "该属性的默认值为 'li'",
|
||||
desc: {
|
||||
'zh-CN': '设置组件的子级 Dom 标签',
|
||||
'en-US': 'Setting the Dom Label of a Component'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-tag'
|
||||
},
|
||||
{
|
||||
name: 'tag',
|
||||
type: 'string',
|
||||
defaultValue: "该属性的默认值为 'ul'",
|
||||
desc: {
|
||||
'zh-CN': '设置组件的 Dom 标签',
|
||||
'en-US': 'Setting the Dom Label of a Component'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-tag'
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
type: 'Array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '调用服务时候获取数据的来源',
|
||||
'en-US': 'Data source obtained during service invoking'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'wheel-blocks'
|
||||
},
|
||||
{
|
||||
name: 'wheel-blocks',
|
||||
type: 'number',
|
||||
defaultValue: '该属性的默认值为 1',
|
||||
desc: {
|
||||
'zh-CN': '鼠标滚轮上下滚动的时候，滚动的块数长度',
|
||||
'en-US': 'Number of scrolling blocks when the mouse wheel is scrolled up or down'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'wheel-blocks'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'before-click',
|
||||
type: 'Function(value)',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '滑动点击前触发的事件;event: 原生事件',
|
||||
'en-US': 'Event triggered before a user swipes the screen. event: Native event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'slide-bar-events'
|
||||
},
|
||||
{
|
||||
name: 'click',
|
||||
type: 'Function(data, index)',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '滑动块点击事件;data: 点击的滑块数据，index: 点击的滑块索引值',
|
||||
'en-US':
|
||||
'Sliding block click event; data: data of the clicked slider, index: index value of the clicked slider'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'slide-bar-events'
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '默认的作用域插槽',
|
||||
'en-US': 'Default scope slot'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-content'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -30,16 +30,19 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'string',
|
||||
type: 'IColor | string[]',
|
||||
typeAnchorName: 'IColor',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '背景色：rgb,rgba,hex 三种格式',
|
||||
'en-US': 'Background color: The value can be in rgb, rgba, or hex format'
|
||||
'zh-CN':
|
||||
'控制标签文本色和背景色，可使用 IColor 类型中的预设值，也可自定义值，若自定义值为字符串则只能设置标签的背景色；若为数组则第一个值设置背景色，第二个设置文本色；【注：3.15.0新增支持数组类型】',
|
||||
'en-US':
|
||||
'Control the text color and background color of the label. You can use the preset value in the IColor type or customize the value. If the customized value is a character string, you can only set the background color of the label. If it is an array, the first value sets the background color and the second sets the text color. [Note: The array type is supported in 3.15.0]'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'color3',
|
||||
mobileDemo: 'different-color',
|
||||
mfDemo: ''
|
||||
mfDemo: 'color3'
|
||||
},
|
||||
{
|
||||
name: 'custom-class',
|
||||
|
|
@ -164,8 +167,8 @@ export default {
|
|||
'zh-CN': '彩色标签，该属性的可选值为 pink、purple、cyan',
|
||||
'en-US': 'Color label. The value can be pink, purple, or cyan.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'colorful-tag'
|
||||
mode: ['mobile'],
|
||||
mfDemo: 'different-color'
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
|
|
@ -238,6 +241,13 @@ export default {
|
|||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IColor',
|
||||
type: 'type',
|
||||
code: `
|
||||
type IColor = 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'brown' | 'grey' | string // 除了预设值，也可以是其他任意自定义颜色值
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IEffect',
|
||||
type: 'type',
|
||||
|
|
@ -256,7 +266,7 @@ type ISize = 'medium' | 'small' | 'mini' | ''
|
|||
name: 'IType',
|
||||
type: 'type',
|
||||
code: `
|
||||
type IType = 'success' | 'info' | 'mini' | 'warning' | 'danger'
|
||||
type IType = 'success' | 'info' | 'warning' | 'danger'
|
||||
`
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
'zh-CN': '显示组件二级标题内容，默认值为 autoColor',
|
||||
'en-US': 'Displays the level-2 title of the component. The default value is autoColor.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -351,6 +351,7 @@ export default {
|
|||
code: `
|
||||
interface ITimelineItem {
|
||||
name: string // 节点名称
|
||||
activeColor: 'success' | 'warning' | 'error' | Component
|
||||
time?: string // 节点时间
|
||||
error?: boolean // 是否异常状态
|
||||
disabled?: boolean // 是否禁用
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
|
||||
|
||||
const step = ref(2)
|
||||
const stepNum = ref(1)
|
||||
|
||||
function onChange(val, oldVal) {
|
||||
Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Numeric, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyNumeric: Numeric
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
step: 2,
|
||||
stepNum: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(val, oldVal) {
|
||||
Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -78,6 +78,20 @@ export default {
|
|||
},
|
||||
codeFiles: ['allow-empty.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'empty-value',
|
||||
name: {
|
||||
'zh-CN': '设定清空输入后的绑定值',
|
||||
'en-US': 'Sets the binding value after the input is cleared'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'可通过 <code>empty-value</code> 属性设置计数器在可清空下，清空后组件的绑定值。默认为 <code>undefined</code>。示例中将清空后组件绑定值改为<code>null</code>',
|
||||
'en-US':
|
||||
'You can use the <code>empty-value</code> attribute to set the binding value of the cleared component when the counter can be cleared. The default value is <code>undefined</code>. In the example, the component binding value is changed to <code>null</code>.'
|
||||
},
|
||||
codeFiles: ['empty-value.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'about-step',
|
||||
name: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('基本用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#base')
|
||||
|
||||
const alerts = page.locator('.demo-alert-base .tiny-mobile-alert')
|
||||
|
||||
// 背景色与图标色验证
|
||||
await expect(alerts.first()).toHaveCSS('background-color', 'rgb(222, 236, 255)')
|
||||
await expect(alerts.first().locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(20, 118, 255)')
|
||||
await expect(alerts.nth(1)).toHaveCSS('background-color', 'rgb(252, 227, 225)')
|
||||
await expect(alerts.nth(1).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(242, 48, 48)')
|
||||
await expect(alerts.nth(2)).toHaveCSS('background-color', 'rgb(230, 242, 213)')
|
||||
await expect(alerts.nth(2).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(92, 179, 0)')
|
||||
await expect(alerts.nth(3)).toHaveCSS('background-color', 'rgb(255, 235, 209)')
|
||||
await expect(alerts.nth(3).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(255, 136, 0)')
|
||||
|
||||
// 警告可见
|
||||
const alertSuccess = page.locator('.tiny-mobile-alert--success')
|
||||
await expect(alertSuccess).toBeVisible()
|
||||
|
||||
// 状态图标存在
|
||||
const icon = alertSuccess.locator('.tiny-mobile-alert__icon').first()
|
||||
await expect(icon).toBeVisible()
|
||||
|
||||
// 提示内容存在
|
||||
const content = alertSuccess.locator('.tiny-mobile-alert__content')
|
||||
await expect(content).toBeVisible()
|
||||
|
||||
// 点击关闭按钮，警告消失
|
||||
const close = alertSuccess.locator('.tiny-mobile-alert__close')
|
||||
await expect(close).toBeVisible()
|
||||
await close.click()
|
||||
await expect(alertSuccess).toBeHidden()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('指定挂载节点', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#target')
|
||||
|
||||
const target = page.locator('.alert-wrap')
|
||||
const alert = target.locator('> .tiny-mobile-alert')
|
||||
|
||||
await expect(alert).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('自定义关闭', async (page) => {
|
||||
test('隐藏关闭图标', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#custom-close')
|
||||
|
||||
const alerts = page.locator('.tiny-mobile-alert')
|
||||
const closeIcon = alerts.first().locator('.tiny-mobile-alert__close')
|
||||
|
||||
await expect(closeIcon).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('自动关闭', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#custom-close')
|
||||
|
||||
const alerts = page.locator('.tiny-mobile-alert')
|
||||
await page.locator('#custom-close span').first().click()
|
||||
await expect(alerts.filter({ hasText: '2秒后将自动关闭' })).toBeVisible()
|
||||
await page.waitForTimeout(2000)
|
||||
await expect(alerts.filter({ hasText: '2秒后将自动关闭' })).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('自定义关闭按钮文本', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#custom-close')
|
||||
|
||||
const alert = page.locator('.tiny-mobile-alert').nth(2)
|
||||
const closeIcon = alert.locator('.tiny-mobile-alert__close')
|
||||
|
||||
await expect(closeIcon).not.toBeVisible()
|
||||
await expect(alert.locator('span').filter({ hasText: '自定义关闭' })).toBeVisible()
|
||||
})
|
||||
|
||||
test('关闭close事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#custom-close')
|
||||
|
||||
const alert = page.locator('.tiny-mobile-alert').nth(3)
|
||||
const toast = page.locator('.tiny-mobile-toast').filter({ hasText: 'close事件!' })
|
||||
await alert.locator('.tiny-mobile-alert__close').click()
|
||||
await expect(toast).toBeVisible()
|
||||
})
|
||||
})
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Switch } from '@opentiny/vue'
|
||||
import { Alert, Switch, Toast } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -29,12 +29,15 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
autoHide: false,
|
||||
closeText: '自定义关闭',
|
||||
closeText: '自定义关闭'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
console.log('已关闭！')
|
||||
Toast.service({
|
||||
text: 'close事件!',
|
||||
time: 100000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义图标', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull)
|
||||
await page.goto('alert#icon')
|
||||
|
||||
const alert = page.locator('.tiny-mobile-alert')
|
||||
|
||||
await expect(alert.locator('.tiny-mobile-alert__icon').first()).toBeVisible()
|
||||
await expect(alert.locator('.tiny-mobile-alert__content')).toContainText('自定义图标')
|
||||
})
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('不同尺寸', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#size')
|
||||
|
||||
const alerts = page.locator('#size .tiny-mobile-alert')
|
||||
const normalAlert = alerts.first()
|
||||
const { height: normalAlertHeight } = await normalAlert.boundingBox()
|
||||
const largeAlert = alerts.nth(1)
|
||||
|
||||
await expect(normalAlert).toHaveClass(/tiny-mobile-alert--normal/)
|
||||
await expect(normalAlert.locator('.tiny-mobile-alert__content')).toHaveCSS('font-size', '12px')
|
||||
await expect(Math.round(normalAlertHeight)).toBe(36)
|
||||
await expect(largeAlert).toHaveClass(/tiny-mobile-alert--large/)
|
||||
await expect(largeAlert.locator('.tiny-mobile-alert__content')).toHaveCSS('font-size', '16px')
|
||||
})
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div class="alert-wrap">
|
||||
<tiny-alert>默认大小</tiny-alert>
|
||||
<tiny-alert size="normal">size 为 normal</tiny-alert>
|
||||
<tiny-alert size="normal">size 为 normal (默认)</tiny-alert>
|
||||
<tiny-alert size="large">size 为 large</tiny-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义提示内容', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#slot-default')
|
||||
|
||||
const alert = page.locator('.tiny-mobile-alert')
|
||||
|
||||
await expect(alert).toBeVisible()
|
||||
await expect(page.getByText('配置详细信息请点击')).toBeVisible()
|
||||
await expect(page.getByRole('link', { name: '默认配置说明' })).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('文字居中', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('alert#target')
|
||||
|
||||
const alert = page.locator('#target .tiny-mobile-alert')
|
||||
})
|
||||
|
|
@ -79,12 +79,12 @@ export default {
|
|||
{
|
||||
demoId: 'slot-default',
|
||||
name: {
|
||||
'zh-CN': '自定义提示内容',
|
||||
'en-US': 'slot-default'
|
||||
'zh-CN': '内容插槽',
|
||||
'en-US': 'Content slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>自定义提示内容</p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p>通过默认插槽自定义提示内容。</p>',
|
||||
'en-US': '<p>Customize prompt messages through default slot.</p>'
|
||||
},
|
||||
codeFiles: ['slot-default.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('输入框基本用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#base')
|
||||
|
||||
const input = page.locator('.demo-input .tiny-mobile-input')
|
||||
const textarea = page.locator('.demo-input .tiny-mobile-textarea')
|
||||
|
||||
await expect(input).toBeVisible()
|
||||
await expect(textarea).toBeVisible()
|
||||
|
||||
await input.click()
|
||||
await expect(input).toHaveClass(/is-focus/)
|
||||
await textarea.click()
|
||||
await expect(textarea).toHaveClass(/is-focus/)
|
||||
|
||||
await expect(input).toHaveAttribute('placeholder', '请输入内容')
|
||||
await expect(textarea).toHaveAttribute('placeholder', '用作文本框')
|
||||
|
||||
await input.locator('input').fill('123')
|
||||
await expect(input.locator('input')).toHaveValue('123')
|
||||
await textarea.locator('textarea').fill('abc')
|
||||
await expect(textarea.locator('textarea')).toHaveValue('abc')
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('可一键清空', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#clearable')
|
||||
|
||||
const input = page.locator('.demo-input .tiny-mobile-input')
|
||||
|
||||
await input.click()
|
||||
await expect(input.locator('input')).toHaveValue('可一键清空')
|
||||
await input.locator('.tiny-mobile-input__clear').click()
|
||||
await expect(input.locator('input')).toHaveValue('')
|
||||
})
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('输入长度限制与计数', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#counter')
|
||||
|
||||
const input = page.locator('.demo-input .tiny-mobile-input')
|
||||
const textarea = page.locator('.demo-input .tiny-mobile-textarea')
|
||||
|
||||
await input.locator('input').fill('12345')
|
||||
await expect(input.locator('.tiny-mobile-input__count-inner')).toContainText('5')
|
||||
await input.locator('input').fill('1234567890123')
|
||||
await expect(input.locator('input')).toHaveValue('1234567890')
|
||||
|
||||
await textarea.locator('textarea').fill('1234567890')
|
||||
await expect(textarea.locator('.tiny-mobile-textarea__count')).toContainText('10/20')
|
||||
await textarea.locator('textarea').fill('12345678901234567890123')
|
||||
await expect(textarea.locator('textarea')).toHaveValue('12345678901234567890')
|
||||
})
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="demo-input">
|
||||
<tiny-input v-model="input1" counter :maxlength="20"></tiny-input>
|
||||
<tiny-input v-model="input1" counter :maxlength="10"></tiny-input>
|
||||
|
||||
<tiny-input v-model="input2" type="textarea" show-word-limit :maxlength="20"></tiny-input>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('输入框禁用', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#disabled')
|
||||
|
||||
const input = page.locator('.demo-input .tiny-mobile-input')
|
||||
const textarea = page.locator('.demo-input .tiny-mobile-textarea')
|
||||
|
||||
await expect(input).toHaveClass(/is-disabled/)
|
||||
await input.click()
|
||||
await expect(input).not.toHaveClass(/is-focus/)
|
||||
|
||||
await expect(textarea).toHaveClass(/is-disabled/)
|
||||
await textarea.click()
|
||||
await expect(textarea).not.toHaveClass(/is-focus/)
|
||||
})
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('输入框事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
page.goto('input#events')
|
||||
|
||||
const inputs = page.locator('.demo-input-events .tiny-mobile-input input')
|
||||
|
||||
await inputs.first().fill('123')
|
||||
await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'input' })).toBeVisible()
|
||||
|
||||
await inputs.nth(1).fill('change')
|
||||
await inputs.first().click()
|
||||
await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'change' })).toBeVisible()
|
||||
|
||||
await inputs.nth(2).click()
|
||||
await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'focus' })).toBeVisible()
|
||||
await inputs.nth(3).click()
|
||||
await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'blur' })).toBeVisible()
|
||||
|
||||
await page.locator('.demo-input-events .tiny-mobile-input').nth(3).locator('.tiny-mobile-input__clear').click()
|
||||
await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'clear' })).toBeVisible()
|
||||
await expect(inputs.nth(3)).toHaveValue('')
|
||||
})
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('实例方法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
page.goto('input#methods')
|
||||
|
||||
const inputs = page.locator('.demo-input-methods .tiny-mobile-input')
|
||||
|
||||
await page.getByRole('button', { name: 'focus' }).click()
|
||||
await expect(inputs.first()).toHaveClass(/is-focus/)
|
||||
await page.getByRole('button', { name: 'blur' }).click()
|
||||
await expect(inputs.first()).not.toHaveClass(/is-focus/)
|
||||
|
||||
await inputs.nth(1).locator('input').fill('123')
|
||||
await page.getByRole('button', { name: 'select' }).click()
|
||||
|
||||
// 判断input内容是否选中
|
||||
const selectedText = await page.evaluate(() => {
|
||||
const selection = window.getSelection()
|
||||
return selection.toString()
|
||||
})
|
||||
await expect(selectedText).toBe('123')
|
||||
})
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('输入框原生属性', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
page.goto('input#native-attributes')
|
||||
|
||||
const inputs = page.locator('.demo-input .tiny-mobile-input input')
|
||||
|
||||
await expect(inputs.first()).toHaveAttribute('autofocus')
|
||||
await expect(inputs.nth(1)).toHaveAttribute('readonly')
|
||||
await expect(inputs.nth(2)).toHaveAttribute('autocomplete', 'on')
|
||||
await expect(inputs.nth(3)).toHaveAttribute('step', '2')
|
||||
await expect(inputs.nth(4)).toHaveAttribute('name', 'username')
|
||||
})
|
||||
|
|
@ -18,10 +18,6 @@
|
|||
<span>step=2</span>
|
||||
<tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
|
||||
</div>
|
||||
<div class="demo-input-item">
|
||||
<span>min=2; max=11</span>
|
||||
<tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
|
||||
</div>
|
||||
<div class="demo-input-item">
|
||||
<span>name</span>
|
||||
<tiny-input v-model="username" name="username"></tiny-input>
|
||||
|
|
@ -41,7 +37,6 @@ export default {
|
|||
autofocusVal: '',
|
||||
input: 'readonly',
|
||||
inputStep: 2,
|
||||
inputMaxMin: 1,
|
||||
inputAutocomplete: '',
|
||||
username: ''
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('输入框前置与后置图标', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
page.goto('input#prefix-suffix-icon')
|
||||
|
||||
const input1 = page.locator('.demo-input-icons .tiny-mobile-input').first()
|
||||
const input2 = page.locator('.demo-input-icons .tiny-mobile-input').nth(1)
|
||||
|
||||
await expect(input1.locator('.tiny-mobile-input__prefix svg')).toBeVisible()
|
||||
await expect(input2.locator('.tiny-mobile-input__suffix svg')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('密码框铭文显示', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#show-password')
|
||||
|
||||
const input = page.locator('.demo-input .tiny-mobile-input')
|
||||
await expect(input.locator('input')).toHaveAttribute('type', 'password')
|
||||
await input.locator('input').fill('123abc')
|
||||
await input.locator('.tiny-mobile-input__icon').click()
|
||||
await expect(input.locator('input')).toHaveAttribute('type', 'text')
|
||||
await expect(input.locator('input')).toHaveValue('123abc')
|
||||
await input.locator('.tiny-mobile-input__icon').click()
|
||||
await expect(input.locator('input')).toHaveAttribute('type', 'password')
|
||||
await expect(input.locator('input')).toHaveValue('123abc')
|
||||
})
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('插槽', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
page.goto('input#slots')
|
||||
|
||||
const inputs = page.locator('.demo-input .tiny-mobile-input')
|
||||
const prependSlot = inputs.first().locator('.tiny-mobile-input-group__prepend')
|
||||
const appendSlot = inputs.nth(1).locator('.tiny-mobile-input-group__append')
|
||||
const prefixSlot = inputs.nth(2).locator('.tiny-mobile-input__prefix')
|
||||
const suffixSlot = inputs.nth(3).locator('.tiny-mobile-input__suffix')
|
||||
const titleSlot = inputs.nth(4).locator('.tiny-mobile-input__title')
|
||||
const tipsSlot = inputs.nth(4).locator('.tiny-mobile-input__tips')
|
||||
|
||||
await expect(prependSlot).toBeVisible()
|
||||
await expect(prependSlot).toContainText('Http://')
|
||||
|
||||
await expect(appendSlot).toBeVisible()
|
||||
await expect(appendSlot).toContainText('.com')
|
||||
|
||||
await expect(prefixSlot).toBeVisible()
|
||||
await expect(prefixSlot.locator('.tiny-svg')).toBeVisible()
|
||||
|
||||
await expect(suffixSlot).toBeVisible()
|
||||
await expect(suffixSlot.locator('.tiny-svg')).toBeVisible()
|
||||
|
||||
await expect(titleSlot).toBeVisible()
|
||||
await expect(titleSlot).toContainText('自定义标题')
|
||||
|
||||
await expect(tipsSlot).toBeVisible()
|
||||
await expect(tipsSlot).toContainText('自定义提示')
|
||||
})
|
||||
|
|
@ -20,11 +20,11 @@
|
|||
|
||||
<tiny-input placeholder="suffix" v-model="input">
|
||||
<template #title>
|
||||
<span>标题插槽内容</span>
|
||||
<span>自定义标题</span>
|
||||
</template>
|
||||
|
||||
<template #tips>
|
||||
<span class="tips">提示插槽内容</span>
|
||||
<span class="tips">自定义提示</span>
|
||||
</template>
|
||||
</tiny-input>
|
||||
</div>
|
||||
|
|
@ -38,7 +38,7 @@ export default {
|
|||
components: {
|
||||
TinyInput: Input,
|
||||
TinyIconSearch: IconSearch(),
|
||||
TinyIconCalendar: IconCalendar(),
|
||||
TinyIconCalendar: IconCalendar()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -55,7 +55,7 @@ export default {
|
|||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.demo-input [class^=tiny-mobile] {
|
||||
.demo-input [class^='tiny-mobile'] {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('文本框行数与列数', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#textarea-rows-cols')
|
||||
|
||||
const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
|
||||
|
||||
await expect(textarea).toHaveAttribute('rows', '3')
|
||||
await expect(textarea).toHaveAttribute('cols', '30')
|
||||
})
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="demo-input">
|
||||
<p>rows=3 cols=80</p>
|
||||
<p>rows=3 cols=30</p>
|
||||
<tiny-input type="textarea" v-model="value" :rows="rows" :cols="cols"></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,7 +16,7 @@ export default {
|
|||
return {
|
||||
value: '杭州西湖是我国著名的旅游胜地，其位于浙江省杭州市西部。西湖是中国最美丽的湖泊之一。',
|
||||
rows: 3,
|
||||
cols: 30,
|
||||
cols: 30
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('文本域可缩放', () => {
|
||||
test('可拖拽特性', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#textarea-scalable')
|
||||
|
||||
const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
|
||||
|
||||
await expect(textarea.first()).toHaveCSS('resize', 'none')
|
||||
await expect(textarea.nth(1)).toHaveCSS('resize', 'vertical')
|
||||
await expect(textarea.nth(2)).toHaveCSS('resize', 'both')
|
||||
await expect(textarea.nth(3)).toHaveCSS('resize', 'horizontal')
|
||||
})
|
||||
|
||||
test('可拖动改变大小', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#textarea-scalable')
|
||||
|
||||
const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
|
||||
|
||||
await expect(textarea.nth(5)).toHaveClass(/is-autosize/)
|
||||
await expect(textarea.nth(6)).toHaveClass(/is-autosize/)
|
||||
})
|
||||
})
|
||||
|
|
@ -1,14 +1,19 @@
|
|||
<template>
|
||||
<div class="demo-input">
|
||||
<p>resize</p>
|
||||
<tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize = vertical (default)"></tiny-input>
|
||||
<tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
|
||||
<tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both" width="300px"></tiny-input>
|
||||
<tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
|
||||
<p>resize 可拖动调整大小</p>
|
||||
<tiny-input type="textarea" v-model="value1" resize="none" placeholder="resize = none (default)"></tiny-input>
|
||||
<tiny-input type="textarea" v-model="value2" resize="vertical" placeholder="resize = vertical"></tiny-input>
|
||||
<tiny-input type="textarea" v-model="value3" resize="both" placeholder="resize = both" width="300px"></tiny-input>
|
||||
<tiny-input type="textarea" v-model="value4" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
|
||||
|
||||
<p>autosize</p>
|
||||
<tiny-input type="textarea" v-model="textarea" placeholder="autosize" autosize></tiny-input>
|
||||
<tiny-input type="textarea" v-model="textarea" placeholder="autosize = { minRows: 2, maxRows: 3 }" :autosize="{ minRows: 2, maxRows: 3 }"></tiny-input>
|
||||
<p>autosize 自适应大小</p>
|
||||
<tiny-input type="textarea" v-model="value5" placeholder="autosize = true" autosize></tiny-input>
|
||||
<tiny-input
|
||||
type="textarea"
|
||||
v-model="value6"
|
||||
placeholder="autosize = { minRows: 2, maxRows: 3 }"
|
||||
:autosize="{ minRows: 2, maxRows: 3 }"
|
||||
></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,8 +26,12 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
textarea: ''
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,6 +42,8 @@ export default {
|
|||
height: 100%;
|
||||
padding: 20px 16px;
|
||||
background: #f5f5f5;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.demo-input .tiny-mobile-textarea {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('插槽', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
page.goto('input#type-select')
|
||||
|
||||
const input = page.locator('.demo-input .tiny-mobile-input')
|
||||
const selectIcon = input.locator('.tiny-mobile-input__select-icon')
|
||||
const menu = page.locator('.tiny-mobile-action-sheet__menu').nth(1)
|
||||
const menuItem = page.getByText('选项2')
|
||||
|
||||
await expect(input.locator('.tiny-mobile-input__select')).toBeVisible()
|
||||
await expect(selectIcon).toBeVisible()
|
||||
|
||||
await selectIcon.click()
|
||||
await expect(menu).toBeVisible()
|
||||
await menuItem.click()
|
||||
await expect(menu).not.toBeVisible()
|
||||
await expect(input.locator('input')).toHaveValue('选项2')
|
||||
})
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('Input输入框类型', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#type')
|
||||
|
||||
const inputs = page.locator('.demo-input .tiny-mobile-input input')
|
||||
|
||||
await expect(inputs.first()).toHaveAttribute('type', 'text')
|
||||
await expect(inputs.nth(1)).toHaveAttribute('type', 'password')
|
||||
await expect(inputs.nth(2)).toHaveAttribute('type', 'email')
|
||||
await expect(inputs.nth(3)).toHaveAttribute('type', 'number')
|
||||
await expect(inputs.nth(4)).toHaveAttribute('type', 'tel')
|
||||
await expect(inputs.nth(5)).toHaveAttribute('type', 'url')
|
||||
await expect(inputs.nth(6)).toHaveAttribute('type', 'date')
|
||||
await expect(inputs.nth(7)).toHaveAttribute('type', 'month')
|
||||
await expect(inputs.nth(8)).toHaveAttribute('type', 'week')
|
||||
await expect(inputs.nth(9)).toHaveAttribute('type', 'datetime-local')
|
||||
await expect(inputs.nth(10)).toHaveAttribute('type', 'time')
|
||||
})
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表单校验', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('input#validate-event')
|
||||
|
||||
const input = page.locator('.demo-input .tiny-mobile-input input')
|
||||
const label = page.locator('.demo-input .tiny-mobile-form-item__label')
|
||||
const errorTip = page.locator('.demo-input .tiny-mobile-input-form__error')
|
||||
|
||||
await expect(errorTip).not.toBeVisible()
|
||||
await input.click()
|
||||
await label.click()
|
||||
await expect(errorTip).toBeVisible()
|
||||
await expect(errorTip).toContainText('请输入活动名称')
|
||||
|
||||
await input.fill('123')
|
||||
await expect(errorTip).not.toBeVisible()
|
||||
|
||||
await input.fill('123456789')
|
||||
await expect(errorTip).toContainText('长度在 3 到 5 个字符')
|
||||
})
|
||||
|
|
@ -73,8 +73,8 @@ export default {
|
|||
{
|
||||
demoId: 'show-password',
|
||||
name: {
|
||||
'zh-CN': '密码框',
|
||||
'en-US': 'Password Input'
|
||||
'zh-CN': '密码框明文展示',
|
||||
'en-US': 'Password Input Plaintext'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
|
|
@ -113,13 +113,13 @@ export default {
|
|||
{
|
||||
demoId: 'prefix-suffix-icon',
|
||||
name: {
|
||||
'zh-CN': '图标',
|
||||
'en-US': 'Icon'
|
||||
'zh-CN': '前置与后置图标',
|
||||
'en-US': 'Prefix and Suffix Icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性设置输入框头部、尾部图标</p>',
|
||||
'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性分别设置输入框头部、尾部图标</p>',
|
||||
'en-US':
|
||||
'<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute </p>'
|
||||
'<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute respectively.</p>'
|
||||
},
|
||||
codeFiles: ['prefix-suffix-icon.vue']
|
||||
},
|
||||
|
|
@ -135,44 +135,6 @@ export default {
|
|||
},
|
||||
codeFiles: ['native-attributes.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'methods',
|
||||
name: {
|
||||
'zh-CN': '实例方法',
|
||||
'en-US': 'Methods'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可使用组件的实例方法：<code>focus | blur | select</code></p>',
|
||||
'en-US': '<p>Those instance methods available: <code>focus | blur | select</code></p>'
|
||||
},
|
||||
codeFiles: ['methods.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'events',
|
||||
name: {
|
||||
'zh-CN': '事件',
|
||||
'en-US': 'Events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'\n <p>输入框的事件，包括\n <code>input</code>(输入值时触发), \n <code>blur</code>(失去焦点时触发), \n <code>focus</code>(获取焦点时触发), \n <code>change</code>(值改变时触发), \n <code>clear</code>(清除按钮时触发)\n </p>\n ',
|
||||
'en-US':
|
||||
'\n <p>Event of the text box, including:\n <code>input</code> (triggered when a value is entered)\n <code>blur</code> (triggered when the focus is lost)\n <code>focus</code> (triggered when the focus is obtained)\n <code>change</code> (triggered when the value changes)\n <code>clear</code> (triggered when the button is cleared)\n </p>\n '
|
||||
},
|
||||
codeFiles: ['events.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slots',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>Input 组件提供了丰富的插槽。</p>',
|
||||
'en-US': '<p>Input component provides a rich set of slots.</p>'
|
||||
},
|
||||
codeFiles: ['slots.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'type-select',
|
||||
name: {
|
||||
|
|
@ -199,6 +161,44 @@ export default {
|
|||
'<p>You can set the <code>validate-event</code> attribute to trigger form validation upon input. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost</p>'
|
||||
},
|
||||
codeFiles: ['validate-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'methods',
|
||||
name: {
|
||||
'zh-CN': '实例方法',
|
||||
'en-US': 'Methods'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可使用组件的实例方法：<code>focus | blur | select</code></p>',
|
||||
'en-US': '<p>Those instance methods available: <code>focus | blur | select</code></p>'
|
||||
},
|
||||
codeFiles: ['methods.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slots',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>Input 组件提供了丰富的插槽。</p>',
|
||||
'en-US': '<p>Input component provides a rich set of slots.</p>'
|
||||
},
|
||||
codeFiles: ['slots.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'events',
|
||||
name: {
|
||||
'zh-CN': '事件',
|
||||
'en-US': 'Events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>输入框的事件，包括 <code>input</code>(输入值时触发), <code>blur</code>(失去焦点时触发), <code>focus</code>(获取焦点时触发), <code>change</code>(值改变时触发), <code>clear</code>(清除按钮时触发)。</p>',
|
||||
'en-US':
|
||||
'<p>Event of the text box, including: <code>input</code> (triggered when a value is entered) <code>blur</code> (triggered when the focus is lost)<code>focus</code> (triggered when the focus is obtained) <code>change</code> (triggered when the value changes) <code>clear</code> (triggered when the button is cleared).</p>'
|
||||
},
|
||||
codeFiles: ['events.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
@week-change="weekChange"
|
||||
@year-change="yearChange"
|
||||
@month-change="monthChange"
|
||||
@mode-change="modeChange"
|
||||
>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
|
@ -37,4 +38,8 @@ const yearChange = (newVal, oldVal) => {
|
|||
const monthChange = (newVal, oldVal) => {
|
||||
Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
|
||||
}
|
||||
|
||||
const modeChange = (val) => {
|
||||
Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ test('事件', async ({ page }) => {
|
|||
const month6 = page.getByText('六月')
|
||||
const leftSvg = page.locator('.header-left > .tiny-svg')
|
||||
const rightSvg = page.locator('.header-right > .tiny-svg')
|
||||
const mode = page.locator('label').nth(2)
|
||||
const modalVal = page.getByText('模式切换事件: timeline')
|
||||
await timeBtn.click()
|
||||
await page.waitForTimeout(100)
|
||||
await leftYear.click()
|
||||
|
|
@ -22,4 +24,7 @@ test('事件', async ({ page }) => {
|
|||
await rightSvg.click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(timeInput).toHaveText('2022 年 06 月')
|
||||
await mode.click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(modalVal).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,12 +8,13 @@
|
|||
@week-change="weekChange"
|
||||
@year-change="yearChange"
|
||||
@month-change="monthChange"
|
||||
@mode-change="modeChange"
|
||||
>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CalendarView } from '@opentiny/vue'
|
||||
import { CalendarView, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -39,6 +40,9 @@ export default {
|
|||
},
|
||||
monthChange(newVal, oldVal) {
|
||||
Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
|
||||
},
|
||||
modeChange(val) {
|
||||
Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<tiny-calendar-view
|
||||
ref="calendar"
|
||||
v-model="selectedDates"
|
||||
:multi-select="true"
|
||||
:year="2023"
|
||||
:month="5"
|
||||
|
|
@ -24,6 +25,7 @@ const workingDays = ref([])
|
|||
const offDays = ref([])
|
||||
const holidays = ref([])
|
||||
const selectedDate = ref([])
|
||||
const selectedDates = ref([])
|
||||
|
||||
const map = {
|
||||
workingDays,
|
||||
|
|
@ -37,6 +39,7 @@ const setDays = (type) => {
|
|||
return
|
||||
}
|
||||
map[type].value.push(...selectedDate.value)
|
||||
selectedDates.value = []
|
||||
selectedDate.value = []
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<tiny-calendar-view
|
||||
ref="calendar"
|
||||
v-model="selectedDates"
|
||||
:multi-select="true"
|
||||
:year="2023"
|
||||
:month="5"
|
||||
|
|
@ -26,6 +27,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
selectedDates: [],
|
||||
workingDays: [],
|
||||
offDays: [],
|
||||
holidays: [],
|
||||
|
|
@ -39,6 +41,7 @@ export default {
|
|||
return
|
||||
}
|
||||
this[type].push(...this.selectedDate)
|
||||
this.selectedDates = []
|
||||
this.selectedDate = []
|
||||
},
|
||||
setDayBgColor(date) {
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@ export default {
|
|||
demoId: 'calendar-disabled-day',
|
||||
name: {
|
||||
'zh-CN': '日期禁用',
|
||||
'en-US': ''
|
||||
'en-US': 'Date Disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>disabled</code> 回调函数来禁用某些日期。</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US': '<p>Disable certain days via the <code>disabled</code> callback function.</p>\n'
|
||||
},
|
||||
codeFiles: ['calendar-disabled-day.vue']
|
||||
},
|
||||
|
|
@ -44,11 +44,12 @@ export default {
|
|||
demoId: 'calendar-schedule-slot',
|
||||
name: {
|
||||
'zh-CN': '日程模式插槽',
|
||||
'en-US': ''
|
||||
'en-US': 'Schedule Mode Slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>日程模式下内容区提供 weekday1-weekday7 这 7 个插槽，方便用户自定义日程展示。</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US':
|
||||
'<p>In schedule mode, the content area provides seven slots from weekday1 to weekday7 for users to customize schedule display.</p>\n'
|
||||
},
|
||||
codeFiles: ['calendar-schedule-slot.vue']
|
||||
},
|
||||
|
|
@ -56,11 +57,12 @@ export default {
|
|||
demoId: 'calendar-timeline-slot',
|
||||
name: {
|
||||
'zh-CN': '时间线插槽',
|
||||
'en-US': ''
|
||||
'en-US': 'Timeline Slots'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>时间下模式下提供 timeline1-timeline7 这 7 个插槽，方便用户自定义日程展示。</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US':
|
||||
'<p>In time mode, seven slots from timeline1 to timeline7 are provided for users to customize the schedule display.</p>\n'
|
||||
},
|
||||
codeFiles: ['calendar-timeline-slot.vue']
|
||||
},
|
||||
|
|
@ -68,11 +70,12 @@ export default {
|
|||
demoId: 'calendar-timeline-range',
|
||||
name: {
|
||||
'zh-CN': '时间线范围配置',
|
||||
'en-US': ''
|
||||
'en-US': 'Timeline Range Configuration'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US':
|
||||
'<p>Use the dayTimes attribute to set the time range displayed in timeline mode. The default value is [8,18], and the value range is [0,23].</p>\n'
|
||||
},
|
||||
codeFiles: ['calendar-timeline-range.vue']
|
||||
},
|
||||
|
|
@ -80,11 +83,11 @@ export default {
|
|||
demoId: 'multi-select',
|
||||
name: {
|
||||
'zh-CN': '日期多选',
|
||||
'en-US': ''
|
||||
'en-US': 'Multiple date selection'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 mult-select = true 属性后，可开启日期多选。</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US': '<p>Set mult-select = true to enable multiple date selection.</p>\n'
|
||||
},
|
||||
codeFiles: ['multi-select.vue']
|
||||
},
|
||||
|
|
@ -92,12 +95,13 @@ export default {
|
|||
demoId: 'calendar-day-mark',
|
||||
name: {
|
||||
'zh-CN': '日期标记',
|
||||
'en-US': ''
|
||||
'en-US': 'Date Marker'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US':
|
||||
'<p>Use the showMark callback function to mark some dates. The markColor attribute is used to set the mark color. This function takes effect only in timeline mode and agenda mode. markColor Optional Color Same as theme</p>\n'
|
||||
},
|
||||
codeFiles: ['calendar-day-mark.vue']
|
||||
},
|
||||
|
|
@ -109,7 +113,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过作用域插槽 header 自定义需要显示的头部区域。</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US': '<p>Customize the header area to be displayed through the scope slot header.</p>\n'
|
||||
},
|
||||
codeFiles: ['custom-header.vue']
|
||||
},
|
||||
|
|
@ -134,7 +138,8 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'en-US':
|
||||
'<p>Customize the background color of the date cell. </p>\n<p>Currently, only preset colors are supported. The options are blue, green, red, yellow, purple, cyan, and grey.</p>'
|
||||
},
|
||||
codeFiles: ['custom-day-bg-color.vue']
|
||||
},
|
||||
|
|
@ -142,11 +147,12 @@ export default {
|
|||
demoId: 'set-working-day',
|
||||
name: {
|
||||
'zh-CN': '设置工作日或节假日',
|
||||
'en-US': ''
|
||||
'en-US': 'Setting Workdays or Holidays'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以结合日期多选，自定义背景色，工具栏插槽等功能实现设置工作日或节假日的功能</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'zh-CN': '<p>可以结合日期多选，自定义背景色，工具栏插槽等功能实现设置工作日或节假日的功能。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set workdays or holidays by using the functions such as selecting multiple dates, customizing background colors, and toolbar slots.</p>\n'
|
||||
},
|
||||
codeFiles: ['set-working-day.vue']
|
||||
},
|
||||
|
|
@ -154,12 +160,29 @@ export default {
|
|||
demoId: 'calendar-event',
|
||||
name: {
|
||||
'zh-CN': '事件',
|
||||
'en-US': ''
|
||||
'en-US': 'Event'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>日历抛出的事件有以下这些：</p>\n<p>new-schedule:新增日程按钮点击事件</p>\n<p>selected-date-change:选中日期改变事件</p>\n<p>prev-week-click：上一周按钮点击事件</p>\n<p>next-week-click：下一周按钮点击事件</p>\n<p>week-change：周改变事件</p>\n<p>year-change：年改变事件</p>\n<p>month-change：月改变事件</p>\n',
|
||||
'en-US': '<p></p>\n'
|
||||
'<p>日历抛出的事件有以下这些：</p>\n' +
|
||||
'<p>new-schedule：新增日程按钮点击事件</p>\n' +
|
||||
'<p>selected-date-change：选中日期改变事件</p>\n' +
|
||||
'<p>prev-week-click：上一周按钮点击事件</p>\n' +
|
||||
'<p>next-week-click：下一周按钮点击事件</p>\n' +
|
||||
'<p>week-change：周改变事件</p>\n' +
|
||||
'<p>year-change：年改变事件</p>\n' +
|
||||
'<p>month-change：月改变事件</p>\n' +
|
||||
'<p>mode-change：模式切换事件</p>',
|
||||
'en-US':
|
||||
'<p>Calendar throws the following events:</p>\n' +
|
||||
'<p>new-schedule: Add a schedule button click event</p>\n' +
|
||||
'<p>selected-date-change: selected date change event</p>\n' +
|
||||
'<p>prev-week-click: button click event of the last week</p>\n' +
|
||||
'<p>next-week-click: button click event in the next week</p>\n' +
|
||||
'<p>week-change: week change event</p>\n' +
|
||||
'<p>year-change: year change event</p>\n' +
|
||||
'<p>month-change: month change event</p>\n' +
|
||||
'<p>mode-change: mode switching event</p>'
|
||||
},
|
||||
codeFiles: ['calendar-event.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="my20">自定义节点,为节点添加提示</div>
|
||||
<tiny-cascader v-model="value1" :options="options">
|
||||
<template #default="{ node }">
|
||||
<span :title="node.label"> {{ node.label }} <tiny-icon-share /></span>
|
||||
</template>
|
||||
</tiny-cascader>
|
||||
<div class="my20">自定义空数据插槽</div>
|
||||
<tiny-cascader v-model="value2" :options="[]">
|
||||
<template #no-data>
|
||||
<div>no-data</div>
|
||||
</template>
|
||||
</tiny-cascader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Cascader as TinyCascader } from '@opentiny/vue'
|
||||
import { iconShare } from '@opentiny/vue-icon'
|
||||
|
||||
const tinyIconShare = iconShare()
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const options = ref([
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记'
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my20 {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('基本用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('cascader#slot')
|
||||
|
||||
// 自定义节点
|
||||
await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
|
||||
await expect(page.getByText('指南', { exact: true })).toHaveAttribute('title', '指南')
|
||||
await page.waitForTimeout(100)
|
||||
|
||||
// 无数据
|
||||
await page.getByRole('textbox', { name: '请选择' }).nth(1).click()
|
||||
const cascader = page.locator('.tiny-cascader-menu__no-data')
|
||||
await expect(cascader).toHaveText('no-data')
|
||||
})
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="my20">自定义节点,为节点添加提示</div>
|
||||
<tiny-cascader v-model="value1" :options="options">
|
||||
<template #default="{ node }">
|
||||
<span :title="node.label"> {{ node.label }} <tiny-icon-share /></span>
|
||||
</template>
|
||||
</tiny-cascader>
|
||||
<div class="my20">自定义空数据插槽</div>
|
||||
<tiny-cascader v-model="value2" :options="[]">
|
||||
<template #no-data>
|
||||
<div>no-data</div>
|
||||
</template>
|
||||
</tiny-cascader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader } from '@opentiny/vue'
|
||||
import { iconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascader: Cascader,
|
||||
TinyIconShare: iconShare()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记'
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my20 {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -268,6 +268,24 @@ export default {
|
|||
'<p>\n Cascader cascade selector events include: <code>change</code>, <code>expand-change</code>, <code>blur</code>, <code>focus</code>, < code>visible-change</code>. \n Use <code>props.emitPath</code> to set the return type of the node.\n </p>'
|
||||
},
|
||||
codeFiles: ['events.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'Empty Data Slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `
|
||||
通过 <code>default</code> 插槽，自定义级联节点。<br>
|
||||
通过 <code>no-data</code> 插槽设置没有数据时显示的内容。
|
||||
`,
|
||||
'en-US': `
|
||||
Use the <code>default</code> slot to customize the cascaded node.<br>
|
||||
The <code>no-data</code> slot sets what is displayed when there is no data.
|
||||
`
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { test } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-autonavi-map')
|
||||
const chart = page.locator('#amap-base .amap-layers')
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-bar#bar-base')
|
||||
const chart = page.locator('#bar-base .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
||||
test('demo2', async ({ page }) => {
|
||||
await page.goto('chart-bar#bar-demo2')
|
||||
const chart = page.locator('#bar-demo2 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo2.png')
|
||||
})
|
||||
|
||||
test('demo3', async ({ page }) => {
|
||||
await page.goto('chart-bar#bar-demo3')
|
||||
const chart = page.locator('#bar-demo3 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo3.png')
|
||||
})
|
||||
|
||||
test('demo4', async ({ page }) => {
|
||||
await page.goto('chart-bar#bar-demo4')
|
||||
const chart = page.locator('#bar-demo4 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo4.png')
|
||||
})
|
||||
|
||||
test('demo5', async ({ page }) => {
|
||||
await page.goto('chart-bar#bar-demo5')
|
||||
const chart = page.locator('#bar-demo5 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo5.png')
|
||||
})
|
||||
|
||||
test('demo6', async ({ page }) => {
|
||||
await page.goto('chart-bar#bar-demo6')
|
||||
const chart = page.locator('#bar-demo6 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo6.png')
|
||||
})
|
||||
|
||||
test('demo7', async ({ page }) => {
|
||||
await page.goto('chart-bar#bar-demo7')
|
||||
const chart = page.locator('#bar-demo7 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo7.png')
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-baidu-map#bmap-base')
|
||||
const chart = page.locator('#bmap-base .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-boxplot#boxplot-base')
|
||||
const chart = page.locator('#boxplot-base .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
||||
// test('multiple', async ({ page }) => {
|
||||
// await page.goto('chart-boxplot#boxplot-multiple')
|
||||
// const chart = page.locator('#boxplot-multiple .hui-chart')
|
||||
// await expect(chart).toHaveScreenshot('multiple.png')
|
||||
// })
|
||||
|
||||
test('vertical', async ({ page }) => {
|
||||
await page.goto('chart-boxplot#boxplot-vertical')
|
||||
const chart = page.locator('#boxplot-vertical .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('vertical.png')
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-base')
|
||||
const chart = page.locator('#candle-base .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
||||
test('demo2', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-demo2')
|
||||
const chart = page.locator('#candle-demo2 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo2.png')
|
||||
})
|
||||
|
||||
test('demo3', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-demo3')
|
||||
const chart = page.locator('#candle-demo3 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo3.png')
|
||||
})
|
||||
|
||||
test('demo4', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-demo4')
|
||||
const chart = page.locator('#candle-demo4 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo4.png')
|
||||
})
|
||||
|
||||
test('demo5', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-demo5')
|
||||
const chart = page.locator('#candle-demo5 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo5.png')
|
||||
})
|
||||
|
||||
test('demo6', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-demo6')
|
||||
const chart = page.locator('#candle-demo6 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo6.png')
|
||||
})
|
||||
|
||||
test('demo7', async ({ page }) => {
|
||||
await page.goto('chart-candle#candle-demo7')
|
||||
const chart = page.locator('#candle-demo7 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo7.png')
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-funnel#funnel-base')
|
||||
const chart = page.locator('#funnel-base .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
||||
test('demo2', async ({ page }) => {
|
||||
await page.goto('chart-funnel#funnel-demo2')
|
||||
const chart = page.locator('#funnel-demo2 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo2.png')
|
||||
})
|
||||
|
||||
test('demo3', async ({ page }) => {
|
||||
await page.goto('chart-funnel#funnel-demo3')
|
||||
const chart = page.locator('#funnel-demo3 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo3.png')
|
||||
})
|
||||
|
||||
test('demo4', async ({ page }) => {
|
||||
await page.goto('chart-funnel#funnel-demo4')
|
||||
const chart = page.locator('#funnel-demo4 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo4.png')
|
||||
})
|
||||
|
||||
test('demo5', async ({ page }) => {
|
||||
await page.goto('chart-funnel#funnel-demo5')
|
||||
const chart = page.locator('#funnel-demo5 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo5.png')
|
||||
})
|
||||
|
||||
test('demo6', async ({ page }) => {
|
||||
await page.goto('chart-funnel#funnel-demo6')
|
||||
const chart = page.locator('#funnel-demo6 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo6.png')
|
||||
})
|
||||
|
||||
test('demo7', async ({ page }) => {
|
||||
await page.goto('chart-funnel#funnel-demo7')
|
||||
const chart = page.locator('#funnel-demo7 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo7.png')
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,37 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-gauge#gauge-base')
|
||||
const chart = page.locator('#gauge-base .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
||||
test('demo2', async ({ page }) => {
|
||||
await page.goto('chart-gauge#gauge-demo2')
|
||||
const chart = page.locator('#gauge-demo2 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo2.png')
|
||||
})
|
||||
|
||||
test('demo3', async ({ page }) => {
|
||||
await page.goto('chart-gauge#gauge-demo3')
|
||||
const chart = page.locator('#gauge-demo3 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo3.png')
|
||||
})
|
||||
|
||||
test('demo4', async ({ page }) => {
|
||||
await page.goto('chart-gauge#gauge-demo4')
|
||||
const chart = page.locator('#gauge-demo4 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo4.png')
|
||||
})
|
||||
|
||||
test('demo5', async ({ page }) => {
|
||||
await page.goto('chart-gauge#gauge-demo5')
|
||||
const chart = page.locator('#gauge-demo5 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo5.png')
|
||||
})
|
||||
|
||||
test('demo6', async ({ page }) => {
|
||||
await page.goto('chart-gauge#gauge-demo6')
|
||||
const chart = page.locator('#gauge-demo6 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo6.png')
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('base', async ({ page }) => {
|
||||
await page.goto('chart-graph#graph-base')
|
||||
const chart = page.locator('#graph-base .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('base.png')
|
||||
})
|
||||
|
||||
// test('demo2', async ({ page }) => {
|
||||
// await page.goto('chart-graph#graph-demo2')
|
||||
// const chart = page.locator('#graph-demo2 .hui-chart')
|
||||
// await expect(chart).toHaveScreenshot('demo2.png')
|
||||
// })
|
||||
|
||||
test('demo3', async ({ page }) => {
|
||||
await page.goto('chart-graph#graph-demo3')
|
||||
const chart = page.locator('#graph-demo3 .hui-chart')
|
||||
await expect(chart).toHaveScreenshot('demo3.png')
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue