Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(button): [button] Check and modify issues #2348

Merged
merged 1 commit into from
Oct 22, 2024
Merged

feat(button): [button] Check and modify issues #2348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions examples/sites/demos/apis/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default {
'en-US': 'Round button'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
pcDemo: '',
mfDemo: ''
},
{
Expand Down Expand Up @@ -91,8 +91,8 @@ export default {
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '按钮左侧展示的图标，接收为Icon组件',
'en-US': 'The icon displayed by the button is received as an Icon component'
'zh-CN': '按钮左侧展示的图标，接收为<code>Icon</code>组件',
'en-US': 'The icon displayed by the button is received as an <code>Icon</code> component'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'icon',
Expand All @@ -117,8 +117,8 @@ export default {
type: "'button' | 'submit' | 'reset'",
defaultValue: "'button'",
desc: {
'zh-CN': '对应按钮原生 type 属性',
'en-US': 'Set the button native type attribute'
'zh-CN': '对应按钮原生<code>type</code>属性',
'en-US': 'Set the button native <code>type</code> attribute'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
Expand Down Expand Up @@ -191,10 +191,10 @@ export default {
name: 'type',
typeAnchorName: 'IButtonType',
type: 'IButtonType',
defaultValue: 'default',
defaultValue: "'default'",
desc: {
'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
'en-US': 'Display different states of buttons, set to text to display as text buttons'
'zh-CN': '展示按钮不同的状态，设置为<code>text</code>则展示为文本按钮',
'en-US': 'Display different states of buttons, set to <code>text</code> to display as text buttons'
Youyou-smiles marked this conversation as resolved.
Show resolved Hide resolved
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/autofocus-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</template>

<script setup>
import { Button as TinyButton } from '@opentiny/vue'
import { TinyButton } from '@opentiny/vue'
</script>

<style scoped>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</template>

<script setup>
import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow } from '@opentiny/vue'
import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
import { iconDel, iconYes, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'

const IconDel = iconDel()
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/click-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</template>

<script setup>
import { Button as TinyButton, Modal } from '@opentiny/vue'
import { TinyButton, Modal } from '@opentiny/vue'

function click() {
Modal.message({ message: 'click', status: 'info' })
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

<script setup>
import { ref } from 'vue'
import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow, Switch as TinySwitch } from '@opentiny/vue'
import { TinyButton, TinyLayout, TinyRow, TinySwitch } from '@opentiny/vue'
import { iconSearch } from '@opentiny/vue-icon'

const disabled = ref(false)
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/ghost-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</template>

<script setup>
import { Button as TinyButton } from '@opentiny/vue'
import { TinyButton } from '@opentiny/vue'
</script>

<style scoped>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/icon-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</template>

<script setup>
import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow } from '@opentiny/vue'
import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
import { iconDel, iconYes, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'

const TinyIconDel = iconDel()
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/image-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</template>

<script setup>
import { Button as TinyButton } from '@opentiny/vue'
import { TinyButton } from '@opentiny/vue'

const image = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
</script>
15 changes: 1 addition & 14 deletions examples/sites/demos/pc/app/button/loading-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,9 @@
<template>
<div>
<tiny-button type="primary" loading>加载中</tiny-button>
<tiny-button loading>加载中</tiny-button>
<tiny-button type="success" loading>加载中</tiny-button>
<tiny-button type="info" loading>加载中</tiny-button>
<tiny-button type="warning" loading>加载中</tiny-button>
<tiny-button type="danger" loading>加载中</tiny-button>
</div>
</template>

<script setup>
import { Button as TinyButton } from '@opentiny/vue'
import { TinyButton } from '@opentiny/vue'
</script>

<style scoped>
.tiny-button {
margin-bottom: 10px;
margin-left: 0;
margin-right: 24px;
}
</style>
10 changes: 0 additions & 10 deletions examples/sites/demos/pc/app/button/loading.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,6 @@ test('测试图片按钮是否插入图片成功', async ({ page }) => {
const demo = page.locator('#loading')

await expect(demo.locator('.tiny-button:nth-child(1)')).toHaveClass(/is-loading/)
await expect(demo.locator('.tiny-button:nth-child(2)')).toHaveClass(/is-loading/)
await expect(demo.locator('.tiny-button:nth-child(3)')).toHaveClass(/is-loading/)
await expect(demo.locator('.tiny-button:nth-child(4)')).toHaveClass(/is-loading/)
await expect(demo.locator('.tiny-button:nth-child(5)')).toHaveClass(/is-loading/)
await expect(demo.locator('.tiny-button:nth-child(6)')).toHaveClass(/is-loading/)

await expect(demo.locator('.tiny-button:nth-child(1) >> .tiny-icon-loading')).toBeVisible()
await expect(demo.locator('.tiny-button:nth-child(2) >> .tiny-icon-loading')).toBeVisible()
await expect(demo.locator('.tiny-button:nth-child(3) >> .tiny-icon-loading')).toBeVisible()
await expect(demo.locator('.tiny-button:nth-child(4) >> .tiny-icon-loading')).toBeVisible()
await expect(demo.locator('.tiny-button:nth-child(5) >> .tiny-icon-loading')).toBeVisible()
await expect(demo.locator('.tiny-button:nth-child(6) >> .tiny-icon-loading')).toBeVisible()
})
13 changes: 0 additions & 13 deletions examples/sites/demos/pc/app/button/loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
<template>
<div>
<tiny-button type="primary" loading>加载中</tiny-button>
<tiny-button loading>加载中</tiny-button>
<tiny-button type="success" loading>加载中</tiny-button>
<tiny-button type="info" loading>加载中</tiny-button>
<tiny-button type="warning" loading>加载中</tiny-button>
<tiny-button type="danger" loading>加载中</tiny-button>
</div>
</template>

Expand All @@ -18,11 +13,3 @@ export default {
}
}
</script>

<style scoped>
.tiny-button {
margin-bottom: 10px;
margin-left: 0;
margin-right: 24px;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/reset-time-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</template>

<script setup>
import { Button as TinyButton } from '@opentiny/vue'
import { TinyButton } from '@opentiny/vue'
</script>

<style scoped>
Expand Down
52 changes: 23 additions & 29 deletions examples/sites/demos/pc/app/button/size-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,49 +10,43 @@
</tiny-row>

<tiny-row>
<div class="title">朴素按钮尺寸：</div>
<tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
<tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
<tiny-button type="primary" plain> 默认按钮 </tiny-button>
<tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
<tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
</tiny-row>

<tiny-row>
<div class="title">圆角按钮尺寸：</div>
<tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
<tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
<tiny-button type="success" round> 默认按钮 </tiny-button>
<tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
<tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
<div class="title">图标按钮尺寸：</div>
<tiny-button type="success" size="large" :icon="IconEdit"> 超大按钮 </tiny-button>
<tiny-button type="success" size="medium" :icon="IconSearch"> 中等按钮 </tiny-button>
<tiny-button type="success" :icon="IconYes"> 默认按钮 </tiny-button>
<tiny-button type="success" size="small" :icon="IconMail"> 小型按钮 </tiny-button>
<tiny-button type="success" size="mini" :icon="IconDel"> 超小按钮 </tiny-button>
</tiny-row>

<tiny-row>
<div class="title">圆形按钮尺寸：</div>
<tiny-button type="warning" size="large" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="medium" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
<tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="mini" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="large" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="medium" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" :icon="IconEdit" circle></tiny-button>
<tiny-button type="warning" size="small" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="mini" :icon="IconEdit" circle> </tiny-button>
</tiny-row>

<tiny-row>
<div class="title">纯图标按钮尺寸：</div>
<tiny-button :icon="TinyIconDel" type="text" size="large" />
<tiny-button :icon="TinyIconDel" type="text" size="medium" />
<tiny-button :icon="TinyIconDel" type="text" />
<tiny-button :icon="TinyIconDel" type="text" size="small" />
<tiny-button :icon="TinyIconDel" type="text" size="mini" />
<tiny-button :icon="IconDel" type="text" size="large" />
<tiny-button :icon="IconDel" type="text" size="medium" />
<tiny-button :icon="IconDel" type="text" />
<tiny-button :icon="IconDel" type="text" size="small" />
<tiny-button :icon="IconDel" type="text" size="mini" />
</tiny-row>
</tiny-layout>
</template>

<script setup>
import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow } from '@opentiny/vue'
import { iconDel, iconEdit } from '@opentiny/vue-icon'
import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
import { iconDel, iconYes, iconEdit, iconMail, iconSearch } from '@opentiny/vue-icon'

const TinyIconDel = iconDel()
const TinyIconEdit = iconEdit()
const IconDel = iconDel()
const IconEdit = iconEdit()
const IconYes = iconYes()
const IconMail = iconMail()
const IconSearch = iconSearch()
</script>

<style scoped>
Expand Down
50 changes: 22 additions & 28 deletions examples/sites/demos/pc/app/button/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,37 @@
</tiny-row>

<tiny-row>
<div class="title">朴素按钮尺寸：</div>
<tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
<tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
<tiny-button type="primary" plain> 默认按钮 </tiny-button>
<tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
<tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
</tiny-row>

<tiny-row>
<div class="title">圆角按钮尺寸：</div>
<tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
<tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
<tiny-button type="success" round> 默认按钮 </tiny-button>
<tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
<tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
<div class="title">图标按钮尺寸：</div>
<tiny-button type="success" size="large" :icon="IconEdit"> 超大按钮 </tiny-button>
<tiny-button type="success" size="medium" :icon="IconSearch"> 中等按钮 </tiny-button>
<tiny-button type="success" :icon="IconYes"> 默认按钮 </tiny-button>
<tiny-button type="success" size="small" :icon="IconMail"> 小型按钮 </tiny-button>
<tiny-button type="success" size="mini" :icon="IconDel"> 超小按钮 </tiny-button>
</tiny-row>

<tiny-row>
<div class="title">圆形按钮尺寸：</div>
<tiny-button type="warning" size="large" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="medium" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
<tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="mini" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="large" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="medium" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" :icon="IconEdit" circle></tiny-button>
<tiny-button type="warning" size="small" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="mini" :icon="IconEdit" circle> </tiny-button>
</tiny-row>

<tiny-row>
<div class="title">纯图标按钮尺寸：</div>
<tiny-button :icon="TinyIconDel" type="text" size="large" />
<tiny-button :icon="TinyIconDel" type="text" size="medium" />
<tiny-button :icon="TinyIconDel" type="text" />
<tiny-button :icon="TinyIconDel" type="text" size="small" />
<tiny-button :icon="TinyIconDel" type="text" size="mini" />
<tiny-button :icon="IconDel" type="text" size="large" />
<tiny-button :icon="IconDel" type="text" size="medium" />
<tiny-button :icon="IconDel" type="text" />
<tiny-button :icon="IconDel" type="text" size="small" />
<tiny-button :icon="IconDel" type="text" size="mini" />
</tiny-row>
</tiny-layout>
</template>

<script>
import { Button, Layout, Row } from '@opentiny/vue'
import { iconDel, iconEdit } from '@opentiny/vue-icon'
import { IconDel, IconYes, IconEdit, IconMail, IconSearch } from '@opentiny/vue-icon'

export default {
components: {
Expand All @@ -59,8 +50,11 @@ export default {
},
data() {
return {
TinyIconDel: iconDel(),
TinyIconEdit: iconEdit()
IconDel: IconDel(),
IconYes: IconYes(),
IconEdit: IconEdit(),
IconMail: IconMail(),
IconSearch: IconSearch()
Youyou-smiles marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/button/text-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<script setup>
import { iconMail } from '@opentiny/vue-icon'
import { Button as TinyButton } from '@opentiny/vue'
import { TinyButton } from '@opentiny/vue'

const TinyIconMail = iconMail()
</script>
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/button/webdoc/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export default {
},
desc: {
'zh-CN':
'<p>通过 <code>type</code> 设置按钮类型， <code>plain</code> 设置是否为朴素按钮， <code>round</code> 设置是否为圆角按钮， <code>circle</code> 设置是否为圆形按钮。</p>',
'<p>通过 <code>type</code> 设置按钮类型， <code>plain</code> 设置是否为朴素按钮， <code>circle</code> 设置是否为圆形按钮。</p>',
'en-US':
'<p>Set the button type through <code>type</code> , whether it is a plain button, whether it is a rounded button, and whether it is a circular button.</p>'
'<p>Set the button type through <code>type</code> , whether it is a plain button and whether it is a circular button.</p>'
},
codeFiles: ['basic-usage.vue']
},
Expand Down Expand Up @@ -48,9 +48,9 @@ export default {
},
desc: {
'zh-CN':
'<p>通过 <code>icon</code> 设置按钮展示图标， 接收一个图标组件。</p><div class="tip custom-block"><p class="custom-block-title">Icon 图标用法</p><p>先从 <code>@opentiny/vue-icon</code> 中导入需要的 Icon，执行Icon函数得到Icon组件。然后在模板中通过 <code>icon</code> 属性进行引用。</p>',
'<p>通过 <code>icon</code> 设置按钮展示图标， 接收一个图标组件。</p><div class="tip custom-block"><p class="custom-block-title"><code>Icon</code> 图标用法</p><p>先从 <code>@opentiny/vue-icon</code> 中导入需要的<code>Icon</code>，执行<code>Icon</code>函数得到<code>Icon</code>组件。然后在模板中通过 <code>icon</code> 属性进行引用。</p>',
'en-US':
'<p>Display icons and receive an icon component through the <code>icon</code> settings button</ p> <div class="tip custom block"><p class="custom block title">Icon icon usage</p><p>First, import the required Icon from <code>@ opentiny/vue icon</code> , and execute the Icon function to obtain the Icon component. Then refer to it in the template through the <code>icon</code> attribute.</p>'
'<p>Display icons and receive an icon component through the <code>icon</code> settings button</ p> <div class="tip custom block"><p class="custom block title">Icon icon usage</p><p>First, import the required <code>Icon</code> from <code>@ opentiny/vue icon</code> , and execute the <code>Icon</code> function to obtain the <code>Icon</code> component. Then refer to it in the template through the <code>icon</code> attribute.</p>'
Youyou-smiles marked this conversation as resolved.
Show resolved Hide resolved
},
codeFiles: ['icon.vue']
},
Expand Down
Loading