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

docs(action-menu,dropdown): [action-menu,dropdown] The Dropdown and ActionMenu component documents are optimized, and the warning message is removed. (#1068) 

* docs(dropdown): [dropdown] Optimization of document for dropdown components

* docs(action-menu): [action-menu] Optimization of document for action-menu components

* fix(action-menu,dropdown): [action-menu,dropdown] Remove warning prompts from Dropdown and ActionMenu components

* docs(action-menu): [action-menu] Optimize ActionMenu component documentation

* test(dropdown): [dropdown] Optimizing Dropdown Component Test Cases

* test(dropdown): [dropdown] Optimizing Dropdown Component Test Cases
This commit is contained in:
MomoPoppy 2023-12-11 09:21:37 +08:00 committed by GitHub
parent 34c3295ebe
commit cbef397d4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 94 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,4 +4,4 @@ title: ActionMenu 菜单按钮
# ActionMenu 菜单按钮
> 提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中
提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中。

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

@ -4,4 +4,4 @@ title: ActionMenu
# ActionMenu
> Provide a set of components for operating buttons. When there are too many buttons, the excess buttons will be automatically placed in a drop-down pop-up box
Provide a set of components for operating buttons. When there are too many buttons, the excess buttons will be automatically placed in a drop-down pop-up box.

30
examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
View File

@ -48,7 +48,7 @@ export default {
'desc': {
'zh-CN': '<p>通过 <code>more-text</code> 属性设置下拉按钮文本,默认为 <code>更多</code>。</p>',
'en-US':
'<p>Set the dropdown button text through the <code>more-text</code> attribute, default to<code>More</code></p>'
'<p>Set the dropdown button text through the <code>more-text</code> attribute, default to <code>More</code></p>'
},
'codeFiles': ['more-text.vue']
},
@ -76,12 +76,21 @@ export default {
'demoId': 'max-show-num',
'name': { 'zh-CN': '个数限制', 'en-US': 'Number limit' },
'desc': {
'zh-CN': '<p>通过 <code>max-show-num</code> 属性设置显示最多显示菜单按钮的个数，默认为 2。</p>',
'zh-CN': '<p>通过 <code>max-show-num</code> 属性设置最多显示菜单按钮的个数，默认为 2。</p>',
'en-US':
'<p>By setting the <code>max-show-num</code> attribute, the maximum number of displayed menu buttons is set to 2 by default.</p>'
},
'codeFiles': ['max-show-num.vue']
},
{
'demoId': 'slot-item',
'name': { 'zh-CN': '菜单项插槽', 'en-US': 'Menu Slot' },
'desc': {
'zh-CN': '<p>通过 <code>item</code> 插槽自定义下拉选项的 HTML 模板。</p>',
'en-US': '<p>Customize the HTML template for dropdown options through the <code>item</code> slot.</p>'
},
'codeFiles': ['slot-item.vue']
},
{
'demoId': 'events',
'name': { 'zh-CN': '事件', 'en-US': 'Menu Item Click Event' },
@ -103,22 +112,13 @@ export default {
'</div>\n'
},
'codeFiles': ['events.vue']
},
{
'demoId': 'slot-item',
'name': { 'zh-CN': '菜单项插槽', 'en-US': 'Menu Slot' },
'desc': {
'zh-CN': '<p>通过 <code>item</code> 插槽自定义下拉选项的 HTML 模板。</p>',
'en-US': '<p>Customize the HTML template for dropdown options through the <code>item</code> slot.</p>'
},
'codeFiles': ['slot-item.vue']
}
],
apis: [
{
'name': 'action-menu',
'type': 'component',
'properties': [
'props': [
{
'name': 'max-show-num',
'type': 'number',
@ -133,7 +133,7 @@ export default {
{
'name': 'more-text',
'type': 'string',
'defaultValue': '更多',
'defaultValue': "'更多'",
'desc': {
'zh-CN': '下拉按钮文本',
'en-US': 'Dropdown button text'
@ -200,7 +200,7 @@ export default {
'zh-CN': '菜单项图标',
'en-US': 'Icon of a menu item'
},
'demId': 'icon'
'demoId': 'icon'
},
{
'name': 'popper-class',
@ -245,7 +245,7 @@ export default {
{
'name': 'text-field',
'type': 'string',
'defaultValue': 'label',
'defaultValue': "'label'",
'desc': {
'zh-CN': '菜单按钮文本的键值',
'en-US': 'Key values for menu button text'

2
examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<p>点击后不收起菜单弹框:</p>
<p>点击后不收起菜单弹框：</p>
<tiny-dropdown :hide-on-click="false">
<template #dropdown>
<tiny-dropdown-menu>

2
examples/sites/demos/pc/app/dropdown/hide-on-click.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<p>点击后不收起菜单弹框:</p>
<p>点击后不收起菜单弹框：</p>
<tiny-dropdown :hide-on-click="false">
<template #dropdown>
<tiny-dropdown-menu>

2
examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
View File

@ -13,7 +13,7 @@
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<p>场景2：设置inherit-width</p>
<p>场景2：设置 inherit-width</p>
<tiny-dropdown split-button type="success" :inherit-width="true">
更多菜单
<template #dropdown>

2
examples/sites/demos/pc/app/dropdown/inherit-width.vue
View File

@ -13,7 +13,7 @@
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<p>场景2：设置inherit-width</p>
<p>场景2：设置 inherit-width</p>
<tiny-dropdown split-button type="success" :inherit-width="true">
更多菜单
<template #dropdown>

2
examples/sites/demos/pc/app/dropdown/options.spec.ts
View File

@ -51,7 +51,7 @@ test('配置式：使用 menu-options 和 text-field', async ({ page }) => {
const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
await page.waitForTimeout(1200)
await page.waitForTimeout(2000)
await dropDown.hover()
await expect(dropDownMenu.first()).toBeVisible()
await expect(dropDownMenuItem.first()).toContainText('老友粉')

2
examples/sites/demos/pc/app/dropdown/slots-composition-api.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-dropdown @visible-change="visibleChange">
<tiny-dropdown>
<span>默认插槽</span>
<template #suffix-icon>
<tiny-icon-ascending></tiny-icon-ascending>

20
examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
View File

@ -17,11 +17,11 @@
<tiny-dropdown trigger="click">
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item :icon="iconPlus">黄金糕</tiny-dropdown-item>
<tiny-dropdown-item :icon="iconPlusCircle">狮子头</tiny-dropdown-item>
<tiny-dropdown-item :icon="iconPlusSquare">螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item :icon="iconCheckedLinear">双皮奶</tiny-dropdown-item>
<tiny-dropdown-item :icon="iconCheckedSur">蚵仔煎</tiny-dropdown-item>
<tiny-dropdown-item :icon="tinyIconPlus">黄金糕</tiny-dropdown-item>
<tiny-dropdown-item :icon="tinyIconPlusCircle">狮子头</tiny-dropdown-item>
<tiny-dropdown-item :icon="tinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item :icon="tinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
<tiny-dropdown-item :icon="tinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
@ -36,11 +36,11 @@ import {
DropdownItem as TinyDropdownItem
} from '@opentiny/vue'
const TinyIconPlus = iconPlus()
const TinyIconPlusCircle = iconPlusCircle()
const TinyIconPlusSquare = iconPlusSquare()
const TinyIconCheckedLinear = iconCheckedLinear()
const TinyIconCheckedSur = iconCheckedSur()
const tinyIconPlus = iconPlus()
const tinyIconPlusCircle = iconPlusCircle()
const tinyIconPlusSquare = iconPlusSquare()
const tinyIconCheckedLinear = iconCheckedLinear()
const tinyIconCheckedSur = iconCheckedSur()
</script>
<style lang="less" scoped>

2
examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md
View File

@ -4,4 +4,4 @@ title: Dropdown 下拉菜单
# Dropdown 下拉菜单
> 可以配置菜单列表，点击或悬浮时下拉，支持多级菜单
可以配置菜单列表，点击或悬浮时下拉，支持多级菜单。

2
examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md
View File

@ -4,4 +4,4 @@ title: Dropdown drop-down list
# Dropdown drop-down list
> Can configure menu list, drop down when clicked or hovered, supports multi-level menus
Can configure menu list, drop down when clicked or hovered, supports multi-level menus.

93
examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
View File

@ -6,8 +6,8 @@ export default {
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '<p>使用 tiny-dropdown-item 定义菜单节点</p>\n',
'en-US': '<p>Define menu nodes using tiny-dropdown-item</p>\n'
'zh-CN': '<p>使用 tiny-dropdown-item 定义菜单节点。</p>\n',
'en-US': '<p>Define menu nodes using tiny-dropdown-item.</p>\n'
},
'codeFiles': ['basic-usage.vue']
},
@ -16,7 +16,8 @@ export default {
'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
'desc': {
'zh-CN': '<p>通过 <code>disabled</code> 属性设置 菜单 或者 菜单项 为禁用状态。</p>\n',
'en-US': 'The <p>Use the<code>disabled</code>attribute to set the menu or menu item to a disabled state. </p>\n'
'en-US':
'The <p>Use the <code>disabled</code> attribute to set the menu or menu item to a disabled state. </p>\n'
},
'codeFiles': ['disabled.vue']
},
@ -27,7 +28,7 @@ export default {
'zh-CN':
'<p>通过 <code>size</code> 属性可配置其他尺寸，可选值：<code>medium</code> / <code>small</code> / <code>mini</code>。</p>\n',
'en-US':
'<p>Use the<code>size</code>attribute to configure other sizes, with optional values:<code>medium</code>/<code>small</code>/<code>mini</code>. </p>\n'
'<p>Use the <code>size</code> attribute to configure other sizes, with optional values: <code>medium</code> / <code>small</code> / <code>mini</code>. </p>\n'
},
'codeFiles': ['size.vue']
},
@ -49,7 +50,7 @@ export default {
'zh-CN':
'<p>通过 <code>split-button</code> 属性，设置下拉菜单显示为按钮类型。仅按钮类型时，支持 <code>type</code> 属性设置按钮状态。</p>\n',
'en-US':
'<p>Set the drop-down menu to display as a button type through the<code>split button</code>attribute. When only button types are used, the<code>type</code>attribute setting button status is supported.</p>\n'
'<p>Set the drop-down menu to display as a button type through the <code>split-button</code> attribute. When only button types are used, the <code>type</code> attribute setting button status is supported.</p>\n'
},
'codeFiles': ['split-button.vue']
},
@ -60,7 +61,7 @@ export default {
'zh-CN':
'<p>通过 <code>trigger</code> 属性设置触发下拉的方式，默认为 <code>hover</code>。可选值为: <code>click</code> / <code>hover</code> 。</p>\n',
'en-US':
'<p>By setting the<code>trigger</code>attribute to trigger a drop-down, the default is<code>hover</code>. The optional values are:<code>click</code>/<code>hover</code>.</p>\n'
'<p>By setting the <code>trigger</code> attribute to trigger a drop-down, the default is <code>hover</code>. The optional values are: <code>click</code> / <code>hover</code>.</p>\n'
},
'codeFiles': ['trigger.vue']
},
@ -70,7 +71,7 @@ export default {
'desc': {
'zh-CN': '通过 <p><code>tip</code> 属性设置提示信息，<code>tip-position</code> 属性设置提示信息的位置。</p>\n',
'en-US':
'<p>Set the prompt information through the<p><code>tip</code>attribute, and set the position of the prompt information through the<code>tip position</code>attribute.</p>\n'
'<p>Set the prompt information through the <code>tip</code> attribute, and set the position of the prompt information through the <code>tip-position</code> attribute.</p>\n'
},
'codeFiles': ['tip.vue']
},
@ -81,7 +82,7 @@ export default {
'zh-CN':
'<p>通过 <code>visible-arrow</code> 属性设置下拉弹框是否显示箭头，默认不显示。<code>visible-arrow</code> 为 true 时显示箭头。</p>\n',
'en-US':
'<p>Use the <code>visible arrow</code> attribute to set whether the drop-down pop-up box displays an arrow, which is not displayed by default< Show arrows when code>visible arrow</code>is true.</p>\n'
'<p>Use the <code>visible-arrow</code> attribute to set whether the drop-down pop-up box displays an arrow, which is not displayed by default show arrows when <code>visible-arrow</code> is true.</p>\n'
},
'codeFiles': ['visible-arrow.vue']
},
@ -92,7 +93,7 @@ export default {
'zh-CN':
'<p>通过 <code>hide-on-click</code> 属性设置点击菜单项后是否收起菜单弹框。默认为 true，点击后收起。</p>\n',
'en-US':
'<p>Use the <code>hide on click</code> attribute to set whether to collapse the menu pop-up after clicking on the menu item. The default is true, and it will be collapsed after clicking. </p>\n'
'<p>Use the <code>hide-on-click</code> attribute to set whether to collapse the menu pop-up after clicking on the menu item. The default is true, and it will be collapsed after clicking. </p>\n'
},
'codeFiles': ['hide-on-click.vue']
},
@ -102,7 +103,7 @@ export default {
'desc': {
'zh-CN': '<p>通过 <code>title</code> 属性设置触发源的文本，默认为 <code>下拉菜单</code>。</p>\n',
'en-US':
'<p>Set the text of the trigger source through the<code>title</code>attribute, which defaults to the<code>drop-down menu</code>.</p>\n'
'<p>Set the text of the trigger source through the <code>title</code> attribute, which defaults to the <code>drop-down-menu</code>.</p>\n'
},
'codeFiles': ['title.vue']
},
@ -113,7 +114,7 @@ export default {
'zh-CN':
'<p><code>menu-options</code>属性：只使用 tiny-dropdown 组件配置式时使用。</p>\n<p><code>options</code>属性：使用 tiny-dropdown-menu 组件配置式时使用。</p>\n<p><code>text-field</code>属性：指定菜单文案显示的字段，默认为 label。 </p>\n<p><code>title</code>属性：设置触发源的文本。</p>\n',
'en-US':
'<p><code>menu options</code>Properties: Used only when using the tiny dropdown component configuration</p>\n<p><code>options</code>Properties: Used when using the tiny dropdown menu component configuration</p> \n<p><code>text field</code>Attribute: specifies the field displayed in the menu copy, which defaults to label</p> \n<p><code>title</code>Property: Set the text of the trigger source</p>\n'
'<p><code>menu-options</code> properties: used only when using the tiny dropdown component configuration</p>\n<p> <code>options</code> properties: Used when using the tiny dropdown menu component configuration</p> \n<p><code>text-field</code> attribute: specifies the field displayed in the menu copy, which defaults to label</p> \n<p><code>title</code> attribute: Set the text of the trigger source</p>\n'
},
'codeFiles': ['options.vue']
},
@ -135,21 +136,10 @@ export default {
'desc': {
'zh-CN': '<p>通过 <code>inherit-width</code> 属性设置下拉弹框的最小宽度继承触发源的宽度。</p>\n',
'en-US':
'<p>Inherit the width of the trigger source by setting the minimum width of the drop-down pop-up box through the<code>inherit width</code>attribute.</p>\n'
'<p>Inherit the width of the trigger source by setting the minimum width of the drop-down pop-up box through the <code>inherit-width</code> attribute.</p>\n'
},
'codeFiles': ['inherit-width.vue']
},
{
'demoId': 'events',
'name': { 'zh-CN': '事件', 'en-US': 'Events' },
'desc': {
'zh-CN':
'<p><code>button-click</code>：按钮类型时，监听左侧按钮点击事件。</p><p><code>item-click</code>：监听点击菜单项事件。</p><p><code>visible-change</code>：监听下拉弹框显示隐藏发生变化。</p>\n',
'en-US':
'<p><code>button-click</code>: When the button type is selected, listen for the left button click event.</p>\n<p><code>item-click</code>: Listens for menu item click events</p>\n<p>code>visible-change</code>: Listens for changes in the display and hiding of dropdown pop ups.</p>\n'
},
'codeFiles': ['events.vue']
},
{
'demoId': 'slots',
'name': { 'zh-CN': '插槽', 'en-US': 'Slots' },
@ -157,16 +147,27 @@ export default {
'zh-CN':
'<p>通过 <code>default</code> 插槽自定义触发源文本区域。<code>suffix-icon</code> 插槽自定义触发源图标区域。</p>\n',
'en-US':
'<p>Customize the trigger source text area through the<code>default</code>slot.</p>\n<p>Customize the trigger source icon area through the<code>suffix icon</code>slot.</p>\n'
'<p>Customize the trigger source text area through the <code>default</code> slot.</p>\n<p>Customize the trigger source icon area through the <code>suffix-icon</code> slot.</p>\n'
},
'codeFiles': ['slots.vue']
},
{
'demoId': 'events',
'name': { 'zh-CN': '事件', 'en-US': 'Events' },
'desc': {
'zh-CN':
'<p><code>button-click</code>：按钮类型时，监听左侧按钮点击事件。</p><p><code>item-click</code>：监听点击菜单项事件。</p><p><code>visible-change</code>：监听下拉弹框显示隐藏发生变化。</p>\n',
'en-US':
'<p><code>button-click</code>: When the button type is selected, listen for the left button click event.</p>\n<p><code>item-click</code>: Listens for menu item click events</p>\n<p><code>visible-change</code>: Listens for changes in the display and hiding of dropdown pop ups.</p>\n'
},
'codeFiles': ['events.vue']
}
],
apis: [
{
'name': 'dropdown',
'type': 'component',
'properties': [
'props': [
{
'name': 'disabled',
'type': 'boolean',
@ -280,10 +281,11 @@ export default {
},
{
'name': 'type',
'type': '"primary" | "success" | "warning" | "danger" | "info" | "text"',
'type': 'IButtonType',
'typeAnchorName': 'IButtonType',
'defaultValue': '',
'desc': {
'zh-CN': '按钮类型。注意：只在split-button为 true 的情况下有效',
'zh-CN': '按钮类型。注意：只在 split-button 为 true 的情况下有效',
'en-US': 'Button type. Note: Only valid if split button is true'
},
'demoId': 'split-button'
@ -291,7 +293,7 @@ export default {
{
'name': 'title',
'type': 'string',
'defaultValue': '下拉菜单',
'defaultValue': "'下拉菜单'",
'desc': {
'zh-CN': '自定义触发源的文本',
'en-US': 'Text for custom trigger source'
@ -300,8 +302,8 @@ export default {
},
{
'name': 'trigger',
'type': '"hover" | "click"',
'defaultValue': 'hover',
'type': "'hover' | 'click'",
'defaultValue': "'hover'",
'desc': {
'zh-CN': '触发下拉的方式',
'en-US': 'Trigger the dropdown method'
@ -388,11 +390,11 @@ export default {
{
'name': 'dropdown-menu',
'type': 'component',
'properties': [
'props': [
{
'name': 'options',
'type': 'IItem []',
'typeAnchorName': 'IItem',
'type': 'IItemData []',
'typeAnchorName': 'IItemData',
'defaultValue': '[]',
'desc': {
'zh-CN': '通过配置式设置菜单项的属性',
@ -402,8 +404,9 @@ export default {
},
{
'name': 'placement',
'type': ' "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"',
'defaultValue': 'bottom-end',
'type': 'IPlacementType',
'typeAnchorName': 'IPlacementType',
'defaultValue': "'bottom-end'",
'desc': {
'zh-CN': '菜单弹出位置',
'en-US': 'Menu pop-up location '
@ -423,7 +426,7 @@ export default {
{
'name': 'text-field',
'type': 'string',
'defaultValue': 'label',
'defaultValue': "'label'",
'desc': {
'zh-CN': '菜单项文本的字段,结合 options 属性使用',
'en-US': 'The field of menu item text, used in conjunction with the options attribute'
@ -447,7 +450,7 @@ export default {
{
'name': 'dropdown-item',
'type': 'component',
'properties': [
'props': [
{
'name': 'disabled',
'type': 'boolean',
@ -531,7 +534,7 @@ interface IMenuOption {
name: 'IItemClickParam',
type: 'interface',
code: `
interface IMenuOption {
interface IItemClickParam {
itemData: IItemData
// dropdownItem 组件的实例
vm: {
@ -552,6 +555,20 @@ interface IItemData {
disabled?: boolean
divided?: boolean
}
`
},
{
name: 'IButtonType',
type: 'type',
code: `
type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
`
},
{
name: 'IPlacementType',
type: 'type',
code: `
type IPlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
`
}
]

2
packages/renderless/src/dropdown-item/index.ts
View File

@ -173,7 +173,7 @@ export const handleClick =
export const computedGetIcon =
({ constants, designConfig }: Pick<IDropdownItemRenderlessParams, 'constants' | 'designConfig'>) =>
(name: string = 'leftWardArrow'): object => {
(name = 'leftWardArrow'): object | string => {
return designConfig?.icons[name] || constants?.ICON_MAP[name]
}

2
packages/renderless/src/dropdown-item/vue.ts
View File

@ -112,7 +112,7 @@ export const renderless = (
{ parent, emit, vm, dispatch, mode, constants, designConfig }: IDropdownItemRenderlessParamUtils
): IDropdownItemApi => {
const api = {} as IDropdownItemApi
const dropdownMenuVm = inject('dropdownMenuVm') as IDropdownMenuVm
const dropdownMenuVm = inject('dropdownMenuVm', null) as IDropdownMenuVm
if (mode === 'mobile' && dropdownMenuVm) {
dropdownMenuVm.state.children = [...dropdownMenuVm.state.children, vm]

4
packages/vue/src/dropdown-item/src/pc.vue
View File

@ -31,10 +31,10 @@
v-if="itemData.children && itemData.children.length"
class="tiny-dropdown-item__expand tiny-dropdown-menu__item-expand"
>
<component :is="state.getIcon" />
<component :is="state.getIcon"></component>
</span>
<div class="tiny-dropdown-item__content tiny-dropdown-menu__item-content">
<component v-if="icon" :is="icon" class="tiny-svg-size" />
<component v-if="icon" :is="icon" class="tiny-svg-size"></component>
<span class="tiny-dropdown-item__label">
<slot :item-data="itemData">
<span>{{ label }}</span>