feat: support react and add new components: rich-text-editor/color-picker/divider/calendar-view
Signed-off-by: <zenglingka@> Match-id-548aa1beff6c51cfa5ae3660c42da4b4ba4b955b
This commit is contained in:
OpenTiny
parent
05843de80f
commit
16f9f9e070
|
|
@ -246,7 +246,8 @@
|
|||
"avatar_url": "https://avatars.githubusercontent.com/u/103579791?v=4",
|
||||
"profile": "https://github.com/pe-3",
|
||||
"contributions": [
|
||||
"code"
|
||||
"code",
|
||||
"doc"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -293,6 +294,78 @@
|
|||
"contributions": [
|
||||
"test"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "Zz-ZzzZ",
|
||||
"name": "Zz-ZzzZ",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/48228016?v=4",
|
||||
"profile": "https://zz-zzzz.github.io/",
|
||||
"contributions": [
|
||||
"test"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "lyx-jay",
|
||||
"name": "Lyx",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/39766860?v=4",
|
||||
"profile": "https://github.com/lyx-jay",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "chenguang1994",
|
||||
"name": "Spark Bill",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/31501915?v=4",
|
||||
"profile": "https://github.com/chenguang1994",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "Zuowendong",
|
||||
"name": "wendZzoo",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/45628596?v=4",
|
||||
"profile": "https://github.com/Zuowendong",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "gweesin",
|
||||
"name": "Gweesin Chan",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/42909374?v=4",
|
||||
"profile": "https://github.com/gweesin",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "Binks123",
|
||||
"name": "Binks_",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/103343025?v=4",
|
||||
"profile": "https://github.com/Binks123",
|
||||
"contributions": [
|
||||
"doc"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "yoyo201626",
|
||||
"name": "yoyo",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/104079404?v=4",
|
||||
"profile": "https://github.com/yoyo201626",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "wkif",
|
||||
"name": "Kif",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/62132584?v=4",
|
||||
"profile": "https://hexo.kifroom.icu/",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 8,
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ artifacts:
|
|||
# - config_path: ./dist/dept/package.json
|
||||
# - config_path: ./dist/detail-page/package.json
|
||||
# - config_path: ./dist/dialog-box/package.json
|
||||
# - config_path: ./dist/dialog-select/package.json
|
||||
# - config_path: ./dist/drop-roles/package.json
|
||||
# - config_path: ./dist/drop-times/package.json
|
||||
# - config_path: ./dist/dropdown/package.json
|
||||
|
|
@ -97,6 +98,7 @@ artifacts:
|
|||
# - config_path: ./dist/espace/package.json
|
||||
# - config_path: ./dist/exception/package.json
|
||||
# - config_path: ./dist/file-upload/package.json
|
||||
# - config_path: ./dist/filter-panel/package.json
|
||||
# - config_path: ./dist/floatbar/package.json
|
||||
# - config_path: ./dist/form/package.json
|
||||
# - config_path: ./dist/form-item/package.json
|
||||
|
|
@ -108,6 +110,7 @@ artifacts:
|
|||
# - config_path: ./dist/grid-toolbar/package.json
|
||||
# - config_path: ./dist/hrapprover/package.json
|
||||
# - config_path: ./dist/icon/package.json
|
||||
# - config_path: ./dist/infinite-scroll/package.json
|
||||
# - config_path: ./dist/image/package.json
|
||||
# - config_path: ./dist/image-viewer/package.json
|
||||
# - config_path: ./dist/input/package.json
|
||||
|
|
@ -166,6 +169,7 @@ artifacts:
|
|||
# - config_path: ./dist/table/package.json
|
||||
# - config_path: ./dist/tabs/package.json
|
||||
# - config_path: ./dist/tag/package.json
|
||||
# - config_path: ./dist/tag-group/package.json
|
||||
# - config_path: ./dist/text-popup/package.json
|
||||
# - config_path: ./dist/time/package.json
|
||||
# - config_path: ./dist/time-line/package.json
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@ steps:
|
|||
|
||||
tool_params:
|
||||
secsolar:
|
||||
source_dir: ./
|
||||
source_dir: ./
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ dist/
|
|||
dist2/
|
||||
dist2.7/
|
||||
dist3/
|
||||
dist-react/
|
||||
allDist/
|
||||
packages/**/runtime
|
||||
coverage/
|
||||
|
|
@ -11,7 +12,15 @@ coverage/
|
|||
/packages/vue/index.ts
|
||||
/packages/vue/pc.ts
|
||||
/packages/vue/mobile.ts
|
||||
/packages/vue/mobile-first.ts
|
||||
/packages/vue/app.ts
|
||||
/packages/vue-icon-saas/src
|
||||
/packages/vue-icon-saas/index.ts
|
||||
|
||||
/packages/react/index.ts
|
||||
/packages/react/pc.ts
|
||||
/packages/react/mobile.ts
|
||||
/packages/react/app.ts
|
||||
|
||||
/examples/**/playwright-report
|
||||
vite.config.ts.timestamp*
|
||||
|
|
@ -25,8 +34,6 @@ vitest.config.ts.timestamp*
|
|||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-lock.yaml
|
||||
yarn.lock
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
|
|
@ -48,5 +55,3 @@ packages/theme/scripts/theme-result.txt
|
|||
packages/theme/scripts/themeExcel.xlsx
|
||||
|
||||
packages/theme/src/theme/*-theme/component.js
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx lint-staged
|
||||
npx lint-staged
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"useTabs": false,
|
||||
"tabWidth": 2,
|
||||
"proseWrap": "preserve",
|
||||
"arrowParens": "always",
|
||||
"overrides": [
|
||||
{
|
||||
"files": ".prettierrc",
|
||||
|
|
@ -19,4 +20,4 @@
|
|||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -81,5 +81,6 @@
|
|||
"bold": false,
|
||||
"italic": false
|
||||
}
|
||||
]
|
||||
],
|
||||
"vue.codeActions.enabled": false
|
||||
}
|
||||
|
|
|
|||
12
README.md
12
README.md
|
|
@ -117,13 +117,23 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|||
<tr>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/linxiang07"><img src="https://avatars.githubusercontent.com/u/40119767?v=4?s=100" width="100px;" alt="linxiang"/><br /><sub><b>linxiang</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=linxiang07" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://bollome.netlify.app/"><img src="https://avatars.githubusercontent.com/u/103836393?v=4?s=100" width="100px;" alt="程序员包子"/><br /><sub><b>程序员包子</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=coderbaozi" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/pe-3"><img src="https://avatars.githubusercontent.com/u/103579791?v=4?s=100" width="100px;" alt="peter G"/><br /><sub><b>peter G</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/pe-3"><img src="https://avatars.githubusercontent.com/u/103579791?v=4?s=100" width="100px;" alt="peter G"/><br /><sub><b>peter G</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Code">💻</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/gimmyhehe"><img src="https://avatars.githubusercontent.com/u/26026184?v=4?s=100" width="100px;" alt="gimmyhehe"/><br /><sub><b>gimmyhehe</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=gimmyhehe" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/KevinAndrewDong"><img src="https://avatars.githubusercontent.com/u/20911103?v=4?s=100" width="100px;" alt="dong"/><br /><sub><b>dong</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=KevinAndrewDong" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="http://www.linglan01.cn"><img src="https://avatars.githubusercontent.com/u/58327088?v=4?s=100" width="100px;" alt="凌览"/><br /><sub><b>凌览</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=CatsAndMice" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Caesar-ch"><img src="https://avatars.githubusercontent.com/u/74941512?v=4?s=100" width="100px;" alt="Caesar-ch"/><br /><sub><b>Caesar-ch</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Caesar-ch" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/chenqifeng66"><img src="https://avatars.githubusercontent.com/u/97503755?v=4?s=100" width="100px;" alt="chenqifeng66"/><br /><sub><b>chenqifeng66</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenqifeng66" title="Tests">⚠️</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://zz-zzzz.github.io/"><img src="https://avatars.githubusercontent.com/u/48228016?v=4?s=100" width="100px;" alt="Zz-ZzzZ"/><br /><sub><b>Zz-ZzzZ</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zz-ZzzZ" title="Tests">⚠️</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/lyx-jay"><img src="https://avatars.githubusercontent.com/u/39766860?v=4?s=100" width="100px;" alt="Lyx"/><br /><sub><b>Lyx</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=lyx-jay" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/chenguang1994"><img src="https://avatars.githubusercontent.com/u/31501915?v=4?s=100" width="100px;" alt="Spark Bill"/><br /><sub><b>Spark Bill</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenguang1994" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Zuowendong"><img src="https://avatars.githubusercontent.com/u/45628596?v=4?s=100" width="100px;" alt="wendZzoo"/><br /><sub><b>wendZzoo</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zuowendong" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/gweesin"><img src="https://avatars.githubusercontent.com/u/42909374?v=4?s=100" width="100px;" alt="Gweesin Chan"/><br /><sub><b>Gweesin Chan</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=gweesin" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Binks123"><img src="https://avatars.githubusercontent.com/u/103343025?v=4?s=100" width="100px;" alt="Binks_"/><br /><sub><b>Binks_</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Binks123" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/yoyo201626"><img src="https://avatars.githubusercontent.com/u/104079404?v=4?s=100" width="100px;" alt="yoyo"/><br /><sub><b>yoyo</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=yoyo201626" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://hexo.kifroom.icu/"><img src="https://avatars.githubusercontent.com/u/62132584?v=4?s=100" width="100px;" alt="Kif"/><br /><sub><b>Kif</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=wkif" title="Code">💻</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
module.exports = { extends: ['@commitlint/config-conventional'] }
|
||||
module.exports = { extends: ['@commitlint/config-conventional'] }
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</div>
|
||||
</tiny-floatbar>
|
||||
<!-- 切换主题 -->
|
||||
<tiny-dropdown class="!fixed bottom20 right140" @item-click="changeTheme">
|
||||
<tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme">
|
||||
<span title="切换主题">
|
||||
<SvgTheme></SvgTheme>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<tiny-badge data="我的待办" :value="0"></tiny-badge>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyBadge: Badge
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button type="primary" banner native-type="submit">默认按钮</tiny-button>
|
||||
<tiny-button type="primary" custom-class="mt-4" banner plain>线性按钮</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="demo">
|
||||
<tiny-button>默认按钮</tiny-button>
|
||||
<tiny-button button-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
|
||||
<tiny-button custom-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
image: 'webnova/static/images/hae-logo.png'
|
||||
image: '/static/images/hae-logo.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
image: 'webnova/static/images/hae-logo.png'
|
||||
image: '/static/images/hae-logo.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ export default {
|
|||
codeFiles: ['click.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dynamic-disable-button',
|
||||
demoId: 'dynamic-disabled',
|
||||
name: {
|
||||
'zh-CN': '动态禁用按钮',
|
||||
'en-US': 'events'
|
||||
|
|
@ -124,7 +124,19 @@ export default {
|
|||
'zh-CN': '<p>设置 <code>disabled</code>属性为 true 后，可以禁用按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-disable-button.vue']
|
||||
codeFiles: ['dynamic-disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'banner',
|
||||
name: {
|
||||
'zh-CN': '通知栏按钮',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加<code>banner</code>属性设置通栏按钮<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['banner.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div class="w-80">
|
||||
<tiny-carousel aspect-ratio="2:1" :loop="false">
|
||||
<tiny-carousel-item class="">
|
||||
<img src="webnova/static/images/dsj.png" alt="" />
|
||||
<img src="/static/images/dsj.png" alt="" />
|
||||
</tiny-carousel-item>
|
||||
<tiny-carousel-item class="">
|
||||
<img src="webnova/static/images/jz.png" alt="" />
|
||||
<img src="/static/images/jz.png" alt="" />
|
||||
</tiny-carousel-item>
|
||||
<tiny-carousel-item class="">
|
||||
<img src="webnova/static/images/ld.png" alt="" />
|
||||
<img src="/static/images/ld.png" alt="" />
|
||||
</tiny-carousel-item>
|
||||
<tiny-carousel-item class="">
|
||||
<img src="webnova/static/images/px.png" alt="" />
|
||||
<img src="/static/images/px.png" alt="" />
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-cell :data="data"></tiny-cell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cell } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCell: Cell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: '进行中'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-cell :data="data" disabled></tiny-cell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cell } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCell: Cell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: '进行中'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-cell :data="data" :icon="icon"></tiny-cell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cell } from '@opentiny/vue'
|
||||
import { IconWriting } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCell: Cell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: '',
|
||||
icon: IconWriting()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-cell :data="data" placeholder="请选择日期"></tiny-cell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cell } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCell: Cell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Cell 单元格
|
||||
---
|
||||
|
||||
# Cell 单元格
|
||||
|
||||
<div>
|
||||
此组件主要用于移动下拉选择组件（DatePickerMobile、SelectMobile 等）显示值的承载容器
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Cell 单元格
|
||||
---
|
||||
|
||||
# Cell 单元格
|
||||
|
||||
<div>
|
||||
此组件主要用于移动下拉选择组件（DatePickerMobile、SelectMobile 等）显示值的承载容器
|
||||
</div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'with-date-picker',
|
||||
name: {
|
||||
'zh-CN': '结合日期选择一起使用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['with-date-picker.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'placeholder',
|
||||
name: {
|
||||
'zh-CN': '占位文本',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['placeholder.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'icon',
|
||||
name: {
|
||||
'zh-CN': 'icon 图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以传入一个 svg 对象替换默认的下拉图标<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['icon.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-cell :data="formatDatetime(datetime)" @click="datetimeVisibility = true"></tiny-cell>
|
||||
<tiny-date-picker-mobile-first
|
||||
v-model="datetime"
|
||||
type="datetime"
|
||||
title="日期时间选择"
|
||||
:visible="datetimeVisibility"
|
||||
@update:visible="datetimeVisibility = $event"
|
||||
>
|
||||
</tiny-date-picker-mobile-first>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePickerMobileFirst, Cell } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePickerMobileFirst: DatePickerMobileFirst,
|
||||
TinyCell: Cell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datetimeVisibility: false,
|
||||
datetime: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDatetime(value) {
|
||||
if (!value) return ''
|
||||
const date = new Date(value)
|
||||
return this.getFormatDate(date)
|
||||
},
|
||||
getFormatDate(date) {
|
||||
// 格式示例：2020/11/11 12:01:22
|
||||
return `${date.getFullYear()}/${this.addZero(date.getMonth() + 1)}/${this.addZero(date.getDate())} ${this.addZero(
|
||||
date.getHours()
|
||||
)}:${this.addZero(date.getMinutes())}:${this.addZero(date.getSeconds())}`
|
||||
},
|
||||
addZero(time) {
|
||||
return ('0' + time).slice(-2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-column-list-item
|
||||
v-model="checked"
|
||||
:show-checkbox="true"
|
||||
image="webnova/static/images/1.jpg"
|
||||
image="/static/images/1.jpg"
|
||||
size="medium"
|
||||
:options="options1"
|
||||
:flex-grow="[1, 1]"
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item image="webnova/static/images/1.jpg" size="medium" :options="options2" class="mb-3">
|
||||
<tiny-column-list-item image="/static/images/1.jpg" size="medium" :options="options2" class="mb-3">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item
|
||||
image="webnova/static/images/1.jpg"
|
||||
:flex-grow="[0, 0]"
|
||||
:flex-basis="['25%', '25%']"
|
||||
class="mb-3"
|
||||
>
|
||||
<tiny-column-list-item image="/static/images/1.jpg" :flex-grow="[0, 0]" :flex-basis="['25%', '25%']" class="mb-3">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item image="webnova/static/images/1.jpg" @icon-click="iconClick" :options="options">
|
||||
<tiny-column-list-item image="/static/images/1.jpg" @icon-click="iconClick" :options="options">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item image="webnova/static/images/1.jpg" @icon-click="iconClick" :options="options">
|
||||
<tiny-column-list-item image="/static/images/1.jpg" @icon-click="iconClick" :options="options">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-column-list-item
|
||||
v-model="checked"
|
||||
:show-checkbox="true"
|
||||
image="webnova/static/images/1.jpg"
|
||||
image="/static/images/1.jpg"
|
||||
:size="size"
|
||||
:options="options"
|
||||
:flex-grow="[1, 3]"
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item image="webnova/static/images/1.jpg" :size="size" :options="options">
|
||||
<tiny-column-list-item image="/static/images/1.jpg" :size="size" :options="options">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
|
|||
|
|
@ -21,23 +21,23 @@ export default {
|
|||
fileList1: [
|
||||
{
|
||||
name: 'Snipaste_2022-12-02_18-05-51.png',
|
||||
url: 'webnova/static/images/ld.png'
|
||||
url: '/static/images/ld.png'
|
||||
}
|
||||
],
|
||||
fileList2: [
|
||||
{
|
||||
name: 'test1.png',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'uploading',
|
||||
percentage: '50'
|
||||
},
|
||||
{
|
||||
name: 'test2',
|
||||
url: 'webnova/static/images/ry.png'
|
||||
url: '/static/images/ry.png'
|
||||
},
|
||||
{
|
||||
name: 'test3',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'fail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -33,23 +33,23 @@ export default {
|
|||
fileList1: [
|
||||
{
|
||||
name: 'Snipaste_2022-12-02_18-05-51.png',
|
||||
url: 'webnova/static/images/ld.png'
|
||||
url: '/static/images/ld.png'
|
||||
}
|
||||
],
|
||||
fileList2: [
|
||||
{
|
||||
name: 'test1.png',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'uploading',
|
||||
percentage: '50'
|
||||
},
|
||||
{
|
||||
name: 'test2',
|
||||
url: 'webnova/static/images/ry.png'
|
||||
url: '/static/images/ry.png'
|
||||
},
|
||||
{
|
||||
name: 'test3',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'fail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default {
|
|||
fileList1: [
|
||||
{
|
||||
name: 'ld.png',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'uploading',
|
||||
percentage: 30
|
||||
}
|
||||
|
|
@ -36,13 +36,13 @@ export default {
|
|||
fileList2: [
|
||||
{
|
||||
name: 'ld.png',
|
||||
url: 'webnova/static/images/ld.png'
|
||||
url: '/static/images/ld.png'
|
||||
}
|
||||
],
|
||||
fileList3: [
|
||||
{
|
||||
name: 'ld.png',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'fail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -18,17 +18,17 @@ export default {
|
|||
fileList: [
|
||||
{
|
||||
name: 'test1.png',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'uploading',
|
||||
percentage: '50'
|
||||
},
|
||||
{
|
||||
name: 'test2',
|
||||
url: 'webnova/static/images/ry.png'
|
||||
url: '/static/images/ry.png'
|
||||
},
|
||||
{
|
||||
name: 'test3',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'fail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -18,17 +18,17 @@ export default {
|
|||
fileList: [
|
||||
{
|
||||
name: 'Snipaste_2022-12-02_18-05-51.png',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'uploading',
|
||||
percentage: '50'
|
||||
},
|
||||
{
|
||||
name: 'test2',
|
||||
url: 'webnova/static/images/ry.png'
|
||||
url: '/static/images/ry.png'
|
||||
},
|
||||
{
|
||||
name: 'test1',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'fail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default {
|
|||
fileList: [
|
||||
{
|
||||
name: 'Snipaste_2022-12-02_18-05-51.png',
|
||||
url: 'webnova/static/images/ld.png'
|
||||
url: '/static/images/ld.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,23 +23,23 @@ export default {
|
|||
fileList1: [
|
||||
{
|
||||
name: 'Snipaste_2022-12-02_18-05-51.png',
|
||||
url: 'webnova/static/images/ld.png'
|
||||
url: '/static/images/ld.png'
|
||||
}
|
||||
],
|
||||
fileList2: [
|
||||
{
|
||||
name: 'test1.png',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'uploading',
|
||||
percentage: '50'
|
||||
},
|
||||
{
|
||||
name: 'test2',
|
||||
url: 'webnova/static/images/ry.png'
|
||||
url: '/static/images/ry.png'
|
||||
},
|
||||
{
|
||||
name: 'test3',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'fail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
fileList: [
|
||||
{
|
||||
name: 'test3',
|
||||
url: 'webnova/static/images/ld.png',
|
||||
url: '/static/images/ld.png',
|
||||
status: 'fail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
class="text-xs"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<tiny-async-flowchart
|
||||
ref="chart"
|
||||
:fetch="fetchFunc"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
>
|
||||
</tiny-async-flowchart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Flowchart from '@opentiny/vue-flowchart'
|
||||
import AsyncFlowchart from '@opentiny/vue-async-flowchart'
|
||||
|
||||
const { createConfig, Node } = Flowchart
|
||||
const nodeWrapperSize = 32
|
||||
|
||||
const chartData = {
|
||||
nodes: [
|
||||
{
|
||||
name: '0',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '开始', subtitle: '张三', auxi: '2023-01-01' }
|
||||
},
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
info: {
|
||||
col: 1,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '申请人', subtitle: '张三', auxi: '2023-01-02' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
info: {
|
||||
col: 2,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '制单会计', subtitle: '协同：张三、张四、张五、张六、张七', auxi: '2023-01-03' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
info: {
|
||||
col: 3,
|
||||
row: 0,
|
||||
status: 2,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
info: {
|
||||
col: 4,
|
||||
row: 0,
|
||||
status: 4,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '', error: '人员变更，未同步' }
|
||||
}
|
||||
}
|
||||
],
|
||||
links: [
|
||||
{ from: '0', to: '1', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
|
||||
{ from: '1', to: '2', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
|
||||
{ from: '2', to: '3', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
|
||||
{ from: '3', to: '4', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } }
|
||||
]
|
||||
}
|
||||
|
||||
const chartConfig = createConfig()
|
||||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
|
||||
height: 0,
|
||||
gap: 60,
|
||||
padding: 12,
|
||||
prior: 'vertical',
|
||||
align: 'left',
|
||||
status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
|
||||
colors: { 1: '#00a874', 2: '#0067d1', 3: '#999', 4: '#eb171f' },
|
||||
ongoingBackgroundColor: '#f3f8fe',
|
||||
popoverPlacement: 'bottom',
|
||||
renderOuter: (h, node) => {
|
||||
return h(Node, { props: { node, config: chartConfig } })
|
||||
},
|
||||
type: 'dot',
|
||||
nodeWrapperSize
|
||||
})
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAsyncFlowchart: AsyncFlowchart
|
||||
},
|
||||
methods: {
|
||||
onClickNode(afterNode, e) {
|
||||
console.log(afterNode, e)
|
||||
},
|
||||
onClickLink(afterLink, e) {
|
||||
console.log(afterLink, e)
|
||||
},
|
||||
onClickBlank(param, e) {
|
||||
console.log(param, e)
|
||||
},
|
||||
fetchFunc() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ data: chartData, config: chartConfig })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -79,6 +79,7 @@ const chartConfig = createConfig()
|
|||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
|
||||
height: 0,
|
||||
gap: 60,
|
||||
padding: 12,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,221 @@
|
|||
<template>
|
||||
<tiny-async-flowchart
|
||||
ref="chart"
|
||||
:fetch="fetchFunc"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
@click-group="onClickGroup"
|
||||
>
|
||||
</tiny-async-flowchart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Flowchart from '@opentiny/vue-flowchart'
|
||||
import AsyncFlowchart from '@opentiny/vue-async-flowchart'
|
||||
|
||||
const { createConfig, Node } = Flowchart
|
||||
const nodeWrapperSize = 32
|
||||
|
||||
const chartData = {
|
||||
nodes: [
|
||||
{
|
||||
name: '0',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '开始', subtitle: '张三', auxi: '2023-01-01' }
|
||||
},
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 1,
|
||||
status: 1,
|
||||
other: { title: '申请人', subtitle: '张三', auxi: '2023-01-02' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 2,
|
||||
status: 1,
|
||||
other: { title: '制单会计', subtitle: '协同：张三、张四、张五、张六、张七', auxi: '2023-01-03' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 3,
|
||||
status: 2,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
info: {
|
||||
col: 1,
|
||||
row: 3,
|
||||
status: 4,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '', error: '人员变更，未同步' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 4,
|
||||
status: 3,
|
||||
other: { title: '复核会计', subtitle: '协同：张三、张四', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
info: { col: 0, row: 5, status: 3, other: { title: '结束' } },
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
links: [
|
||||
{ from: '0', to: '1', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
|
||||
{ from: '1', to: '2', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
|
||||
{ from: '2', to: '3', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
|
||||
{
|
||||
from: '2',
|
||||
to: '4',
|
||||
fromJoint: 'bottom',
|
||||
toJoint: 'top',
|
||||
linkOffset: 96,
|
||||
showArrow: false,
|
||||
info: { status: 1, style: 'solid', other: { title: '条件1' } }
|
||||
},
|
||||
{ from: '3', to: '5', fromJoint: 'bottom', toJoint: 'top', info: { status: 3, style: 'solid' } },
|
||||
{
|
||||
from: '4',
|
||||
to: '5',
|
||||
fromJoint: 'bottom',
|
||||
toJoint: 'top',
|
||||
arrowEndMinus: 96,
|
||||
// showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件2' } }
|
||||
},
|
||||
{ from: '5', to: '6', fromJoint: 'bottom', toJoint: 'top', info: { status: 3, style: 'dashed' } }
|
||||
],
|
||||
groups: [
|
||||
{
|
||||
nodes: ['2', '3'],
|
||||
padding: [20, 100],
|
||||
// fillStyle: '#f5f6f8',
|
||||
lineDash: [6, 6],
|
||||
strokeStyle: '#8d959e',
|
||||
title: '主账',
|
||||
titlePosition: 'top-left' /* top/top-left */,
|
||||
titleClass: 'bg-color-bg-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chartConfig = createConfig()
|
||||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
extraWidth: 200, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
|
||||
height: 0,
|
||||
gap: 60,
|
||||
padding: 12,
|
||||
prior: 'vertical',
|
||||
align: 'left',
|
||||
status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
|
||||
colors: { 1: '#0067D1', 2: '#0067d1', 3: 'rgba(22,30,38,0.2)', 4: '#eb171f' },
|
||||
ongoingBackgroundColor: '#f3f8fe',
|
||||
popoverPlacement: 'right',
|
||||
type: 'dot',
|
||||
renderOuter: (h, node) => {
|
||||
return h(Node, { props: { node, config: chartConfig, titleClass: 'bg-color-bg-1' } })
|
||||
},
|
||||
nodeLayout: 'left-right' /* up-down/left-right */,
|
||||
nodeSize: 'medium' /* mini/small/medium */,
|
||||
nodeWrapperSize,
|
||||
titleMaxWidth: 90,
|
||||
linkEndMinus: 6,
|
||||
showOnly: '' /* icon/title */,
|
||||
linkPath: [
|
||||
{
|
||||
filter: { from: '4', to: '5' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0 / 2, y: y0 + h0 }
|
||||
// 终点
|
||||
const t = { x: x1 + w1, y: y1 + h1 / 2 }
|
||||
// 拐点
|
||||
const c = { x: f.x, y: t.y }
|
||||
// // a. 返回连线路径
|
||||
// return [f, c, t]
|
||||
// b. 返回连线路径、中点、线性渐变
|
||||
return {
|
||||
path: [f, c, t],
|
||||
mid: { x: (f.x + c.x) / 2, y: (f.y + c.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['gold', 'blue'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '2', to: '4' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1 + w1 / 2, y: y1 }
|
||||
// 拐点
|
||||
const c = { x: t.x, y: f.y }
|
||||
// a. 返回连线路径
|
||||
return [f, c, t]
|
||||
// // b. 返回连线路径、中点
|
||||
// return { path: [f, c, t], mid: c }
|
||||
}
|
||||
}
|
||||
],
|
||||
condClass: 'bg-color-bg-1'
|
||||
})
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAsyncFlowchart: AsyncFlowchart
|
||||
},
|
||||
methods: {
|
||||
onClickNode(afterNode, e) {
|
||||
console.log(afterNode, e)
|
||||
},
|
||||
onClickLink(afterLink, e) {
|
||||
console.log(afterLink, e)
|
||||
},
|
||||
onClickBlank(param, e) {
|
||||
console.log(param, e)
|
||||
},
|
||||
onClickGroup(afterGroup, e) {
|
||||
console.log(afterGroup, e)
|
||||
},
|
||||
fetchFunc() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ data: chartData, config: chartConfig })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -125,6 +125,7 @@ const chartConfig = createConfig()
|
|||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
extraWidth: 200, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
|
||||
height: 0,
|
||||
gap: 60,
|
||||
padding: 12,
|
||||
|
|
|
|||
|
|
@ -149,6 +149,7 @@ const chartConfig = createConfig()
|
|||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
|
||||
height: 240,
|
||||
gap: 24,
|
||||
padding: 12,
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ const chartConfig = createConfig()
|
|||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
|
||||
height: 0,
|
||||
gap: 24,
|
||||
padding: 12,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
class="text-xs"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export default {
|
|||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: '/basic-usage',
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '垂直图形',
|
||||
'en-US': 'events'
|
||||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['/basic-usage.vue']
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'horizon',
|
||||
|
|
@ -50,6 +50,30 @@ export default {
|
|||
},
|
||||
codeFiles: ['dot-horizon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dot-horizon-async',
|
||||
name: {
|
||||
'zh-CN': '点模式-水平图形-异步',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dot-horizon-async.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dot-vertical-async',
|
||||
name: {
|
||||
'zh-CN': '点模式-垂直图形-异步',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dot-vertical-async.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'holistic',
|
||||
name: {
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export default {
|
|||
area: '华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
logo: '/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
|
|
@ -117,7 +117,7 @@ export default {
|
|||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
logo: '/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
|
|
@ -131,7 +131,7 @@ export default {
|
|||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
logo: '/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
area: '华北区',
|
||||
address: '梅州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
logo: '/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
|
|
@ -159,7 +159,7 @@ export default {
|
|||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
logo: '/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
area: '华北区',
|
||||
address: '广州天河区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
logo: '/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '如果内容超过100px',
|
||||
tag3: '总集',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-search mini></tiny-search>
|
||||
<tiny-search v-model="value" placeholder="请输入关键词" big></tiny-search>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -8,6 +8,11 @@ import { Search } from '@opentiny/vue'
|
|||
export default {
|
||||
components: {
|
||||
TinySearch: Search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -28,28 +28,16 @@ export default {
|
|||
codeFiles: ['clearable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'mini-mode',
|
||||
demoId: 'big-mode',
|
||||
name: {
|
||||
'zh-CN': '迷你模式',
|
||||
'zh-CN': '大尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `mini` 设置组件为 mini 模式。<p>',
|
||||
'zh-CN': '<p>可通过 `big` 设置组件为 big 模式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['mini-mode.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'transparent-mode',
|
||||
name: {
|
||||
'zh-CN': '透明模式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `transparent` 设置组件为透明模式（`mini`模式下有效）。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['transparent-mode.vue']
|
||||
codeFiles: ['big-mode.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'default-value',
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default {
|
|||
userHeadOption: {
|
||||
type: 'image',
|
||||
size: 40,
|
||||
value: 'webnova/static/images/1.jpg',
|
||||
value: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
iconOptions: [
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
userHeadOption: {
|
||||
type: 'image',
|
||||
size: 40,
|
||||
value: 'webnova/static/images/1.jpg',
|
||||
value: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
iconOptions: [
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
userHeadOption: {
|
||||
type: 'image',
|
||||
size: 40,
|
||||
value: 'webnova/static/images/1.jpg',
|
||||
value: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
iconOptions: [
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div class="flex justify-between">
|
||||
<tiny-time-line :data="data">
|
||||
<template #left="data">
|
||||
<div style="margin-top: -14px; margin-left: 10px">
|
||||
<tiny-user-head type="image" round v-model="imgUrl" scale="0.8"></tiny-user-head>
|
||||
<div class="ml-1.5 -mt-1.5">
|
||||
<tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
|
||||
</div>
|
||||
<span style="margin-left: 6px; display: inline-block; font-size: 12px">
|
||||
<span class="ml-2 inline-block text-xs leading-5 mb-6">
|
||||
{{ data.slotScope.title }}
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -13,10 +13,12 @@
|
|||
|
||||
<tiny-time-line :data="data1">
|
||||
<template #left="data1">
|
||||
<div style="margin-top: -14px; margin-left: 10px">
|
||||
<tiny-user-head type="image" round v-model="imgUrl" scale="0.8"></tiny-user-head>
|
||||
<div class="ml-1.5 -mt-1.5">
|
||||
<tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
|
||||
</div>
|
||||
<span style="margin-left: 6px; display: inline-block; font-size: 12px"> {{ data1.slotScope.title }} </span>
|
||||
<span class="ml-2 inline-block text-xs leading-5 mb-6">
|
||||
{{ data1.slotScope.title }}
|
||||
</span>
|
||||
</template>
|
||||
</tiny-time-line>
|
||||
</div>
|
||||
|
|
@ -33,7 +35,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
imgUrl: '/static/images/1.jpg',
|
||||
data: [{ title: '节点标题1' }, { title: '节点标题2' }, { title: '节点标题3' }, { title: '节点标题4' }],
|
||||
data1: [
|
||||
{ title: '节点标题1' },
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
return {
|
||||
text: '中文',
|
||||
textEn: 'Meta',
|
||||
imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg'
|
||||
imgUrl: '/static/images/1.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,67 +117,67 @@ export default {
|
|||
imageList1: [
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
}
|
||||
],
|
||||
imageList2: [
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
}
|
||||
],
|
||||
imageList3: [
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
|
||||
modelValue: '/static/images/1.jpg',
|
||||
round: true
|
||||
}
|
||||
],
|
||||
text: '中文',
|
||||
textEn: 'Meta',
|
||||
imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg'
|
||||
imgUrl: '/static/images/1.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
text: '文字',
|
||||
imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg'
|
||||
imgUrl: '/static/images/1.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export const cmpMenus = [
|
|||
labelEn: 'Container',
|
||||
key: 'cmp_container',
|
||||
children: [
|
||||
{ name: 'Cell', nameCn: '单元格', key: 'cell' },
|
||||
{ name: 'ActionSheet', nameCn: '动作面板', key: 'action-sheet' },
|
||||
{ name: 'Drawer', nameCn: '抽屉', key: 'drawer' },
|
||||
{ name: 'Card', nameCn: '卡片', key: 'card' },
|
||||
|
|
|
|||
|
|
@ -191,9 +191,9 @@ const colorRules = [
|
|||
[/^(c|bg)-([\w|-]+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `var(--${color})` })],
|
||||
[/^(c|bg)#(\w+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `#${color}` })]
|
||||
]
|
||||
export const rules = [...sizeRules, ...layoutRules, ...fontRules, ...borderRules, ...utilRules, ...colorRules]
|
||||
export const rules: any[] = [...sizeRules, ...layoutRules, ...fontRules, ...borderRules, ...utilRules, ...colorRules]
|
||||
|
||||
export const shortcuts = [
|
||||
export const shortcuts: any[] = [
|
||||
[/^(m|p)x(-?\d+)$/, ([, t, c]) => `${t}l${c} ${t}r${c}`],
|
||||
[/^(m|p)y(-?\d+)$/, ([, t, c]) => `${t}t${c} ${t}b${c}`],
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Opentiny React 组件调试</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "@opentiny/react-docs",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@opentiny/react": "workspace:~",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.14",
|
||||
"@types/react-dom": "^18.2.6",
|
||||
"@typescript-eslint/eslint-plugin": "^5.61.0",
|
||||
"@typescript-eslint/parser": "^5.61.0",
|
||||
"@vitejs/plugin-react": "^4.0.1",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "^8.44.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"postcss": "^8.4.16",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.0",
|
||||
"vite-plugin-react": "^4.0.1",
|
||||
"vite-plugin-svgr": "^3.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
import { Alert } from '@opentiny/react'
|
||||
|
||||
// 在这里导入组件，进行 api 调试
|
||||
function App() {
|
||||
return (
|
||||
<div
|
||||
className='app'
|
||||
>
|
||||
<Alert
|
||||
description='吃饭了吗'
|
||||
></Alert>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.app {
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './main.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<App />
|
||||
)
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'../../packages/react/src/**/*.{css,less,vue,js,jsx,ts,tsx}',
|
||||
'!../../packages/react/src/**/node_modules',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import svgr from "vite-plugin-svgr";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }), svgr()
|
||||
],
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
module.exports = {
|
||||
printWidth: 160, // 一行120字符数，如果超过会进行换行
|
||||
tabWidth: 2, // tab等2个空格
|
||||
useTabs: false, // 用空格缩进行
|
||||
semi: true, // 行尾使用分号
|
||||
singleQuote: true, // 字符串使用单引号
|
||||
quoteProps: 'as-needed', // 仅在需要时在对象属性添加引号
|
||||
jsxSingleQuote: false, // 在JSX中使用双引号
|
||||
trailingComma: 'es5', // 使用尾逗号(对象、数组等)
|
||||
bracketSpacing: true, // 对象的括号间增加空格
|
||||
jsxBracketSameLine: false, // 将多行JSX元素的>放在最后一行的末尾
|
||||
arrowParens: 'avoid', // 在唯一的arrow函数参数周围省略括号
|
||||
vueIndentScriptAndStyle: false, // 不缩进Vue文件中的<script>和<style>标记内的代码
|
||||
endOfLine: 'lf', // 仅限换行（\n）
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
*.js
|
||||
*.ts
|
||||
*.png
|
||||
*.eot
|
||||
*.ttf
|
||||
*.woff
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
module.exports = {
|
||||
extends: "stylelint-config-standard",//stylelint-config-airbnb
|
||||
rules: {
|
||||
"string-quotes": "single",
|
||||
"property-no-unknown": true,
|
||||
"selector-pseudo-class-no-unknown": true,
|
||||
"at-rule-empty-line-before": "always",
|
||||
"block-no-empty": true,
|
||||
"indentation": 4 // http://cui.ulanqab.huawei.com/#/articalDetail?id=b76da810d8ed8
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
# react 组件文档开发说明
|
||||
|
||||
## 命令
|
||||
|
||||
### 启动
|
||||
|
||||
```bash
|
||||
pnpm start
|
||||
```
|
||||
|
||||
### 打包
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### 编译 react.jsx 为 react.js
|
||||
|
||||
```bash
|
||||
pnpm build:react2
|
||||
```
|
||||
|
||||
此 vue 项目，vue自身需要 jsx，所以使用 react 的 jsx，只能将其编译为 .js 才能使用
|
||||
|
||||
## 开发说明
|
||||
|
||||
### 目录说明
|
||||
|
||||
主要是 demos 底下的文件是用来配置文档展示那些组件，以及写组件示例的
|
||||
|
||||
```b
|
||||
demos
|
||||
/app
|
||||
/alert
|
||||
/webdoc
|
||||
/alert.json 配置 alert 组件的文档展示
|
||||
/base.vue base 示例文件，导入 base.jsx，注册 web comp
|
||||
/base.jsx base 写 react 示例
|
||||
/webdoc
|
||||
/introduce.md 组件库的介绍文档
|
||||
/menu.js 组件库的左侧菜单配置
|
||||
/config.js demo 配置
|
||||
/overviewimage 组件总览的图标，在这里添加图标
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
NAnchor: typeof import('naive-ui')['NAnchor']
|
||||
NAnchorLink: typeof import('naive-ui')['NAnchorLink']
|
||||
NCard: typeof import('naive-ui')['NCard']
|
||||
NCode: typeof import('naive-ui')['NCode']
|
||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||
NDataTable: typeof import('naive-ui')['NDataTable']
|
||||
NInput: typeof import('naive-ui')['NInput']
|
||||
NLayout: typeof import('naive-ui')['NLayout']
|
||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||
NMenu: typeof import('naive-ui')['NMenu']
|
||||
NSpace: typeof import('naive-ui')['NSpace']
|
||||
NSpin: typeof import('naive-ui')['NSpin']
|
||||
NTabPane: typeof import('naive-ui')['NTabPane']
|
||||
NTabs: typeof import('naive-ui')['NTabs']
|
||||
NTooltip: typeof import('naive-ui')['NTooltip']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert description="type 为默认值 success"></TinyAlert>
|
||||
<TinyAlert type="error" description="type 为 error"></TinyAlert>
|
||||
<TinyAlert type="info" description="type 为 info"></TinyAlert>
|
||||
<TinyAlert type="warning" description="type 为 warning"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-base-demo></alert-base-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlertBase from '@/webcomps/alert/base.js'
|
||||
customElements.define(
|
||||
'alert-base-demo',
|
||||
AlertBase
|
||||
)
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert center description="文字居中"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<alert-center-demo></alert-center-demo>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertCenter from "@/webcomps/alert/center.js";
|
||||
customElements.define("alert-center-demo", AlertCenter);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert size="normal" description="size 为 normal"></TinyAlert>
|
||||
<TinyAlert size="large" title="size 为 large"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-size-demo></alert-size-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlertSize from "@/webcomps/alert/size.js";
|
||||
customElements.define("alert-size-demo", AlertSize);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert size="large" title="通过属性设置自定义 title"></TinyAlert>
|
||||
<br/>
|
||||
<TinyAlert
|
||||
size="large"
|
||||
slots={{
|
||||
title: () => '通过 slot 设置自定义 title'
|
||||
}}
|
||||
>
|
||||
</TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-title-demo></alert-title-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertTitle from "@/webcomps/alert/title.js";
|
||||
customElements.define("alert-title-demo", AlertTitle);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Alert as TinyAlert } from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyAlert description="type 为默认值 success"></TinyAlert>
|
||||
<TinyAlert type="info" description="type 为 info"></TinyAlert>
|
||||
<TinyAlert type="error" description="type 为 error"></TinyAlert>
|
||||
<TinyAlert type="success" description="type 为 success"></TinyAlert>
|
||||
<TinyAlert type="warning" description="type 为 warning"></TinyAlert>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-type-demo></alert-type-demo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import AlertType from "@/webcomps/alert/type.js";
|
||||
customElements.define("alert-type-demo", AlertType);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Alert 警告
|
||||
---
|
||||
|
||||
# Alert 警告
|
||||
|
||||
<div>Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Alert
|
||||
---
|
||||
|
||||
# Alert
|
||||
|
||||
<div>Alert alarms, including warning, error, info, and success.</div>
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
{
|
||||
"column": "2",
|
||||
"owner": "",
|
||||
"demos": [
|
||||
{
|
||||
"demoId": "base",
|
||||
"name": {
|
||||
"zh-CN": "基本用法",
|
||||
"en-US": "Basic Usage"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "详细用法参考如下示例",
|
||||
"en-US": "For details, see the following example."
|
||||
},
|
||||
"codeFiles": [
|
||||
"base.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "type",
|
||||
"name": {
|
||||
"zh-CN": "类型",
|
||||
"en-US": "Type"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>type</code> 设置不同的类型。可选值：success、warning、info、error，默认值：success 。</p>\n",
|
||||
"en-US": "<p>Set different types through <code>type</code>. The options are success, warning, info, and error. The default value is success. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"type.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "size",
|
||||
"name": {
|
||||
"zh-CN": "大尺寸",
|
||||
"en-US": "Large Size"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>size</code> 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。</p>\n",
|
||||
"en-US": "<p>Set different sizes through the <code>size</code> attribute. The options are nomal and large. The default value is nomal. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"size.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "title",
|
||||
"name": {
|
||||
"zh-CN": "自定义标题",
|
||||
"en-US": "Custom Title"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>当 <code>size</code> 为 large 时显示标题，可设置 <code>title</code> 或 <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>\n",
|
||||
"en-US": "<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code>. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"title.vue"
|
||||
]
|
||||
},
|
||||
{
|
||||
"demoId": "center",
|
||||
"name": {
|
||||
"zh-CN": "文字居中",
|
||||
"en-US": "Center text"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过 <code>center</code> 属性可使文字显示居中。</p>\n",
|
||||
"en-US": "<p>You can use the <code>center</code> property to center the text. </p>\n"
|
||||
},
|
||||
"codeFiles": [
|
||||
"center.vue"
|
||||
]
|
||||
}
|
||||
],
|
||||
"apis": [
|
||||
{
|
||||
"name": "alert",
|
||||
"type": "component",
|
||||
"properties": [
|
||||
{
|
||||
"name": "closable",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 true",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告是否可以关闭",
|
||||
"en-US": "Set whether alarms can be disabled."
|
||||
},
|
||||
"demoId": "closable"
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "String , Object",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的图标，默认会根据 type 值自动使用对应图标",
|
||||
"en-US": "Set the alarm icon. By default, the corresponding icon is automatically used based on the value of type."
|
||||
},
|
||||
"demoId": "icon"
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"type": "String",
|
||||
"defaultValue": "该属性的默认值为 normal",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的大小 nomal/large， 缺省为 nomal。;该属性的可选值为 nomal / large",
|
||||
"en-US": "Set the warning size to nomal or large. The default value is nomal. ;The value of this attribute can be nomal or large"
|
||||
},
|
||||
"demoId": "size"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的标题，在 size 为 large 时有效，默认根据 type 自动设置",
|
||||
"en-US": "Set the warning title. This parameter is valid only when size is set to large. By default, the alarm title is automatically set based on type."
|
||||
},
|
||||
"demoId": "title"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"type": "String",
|
||||
"defaultValue": "该属性的默认值为 success",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的类型;该属性的可选值为 success/warning/info/error",
|
||||
"en-US": "Set the alarm type. The value of this attribute can be success / warning / info / error"
|
||||
},
|
||||
"demoId": "type"
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "设置警告的提示内容，默认为空;",
|
||||
"en-US": "Set the warning prompt content. The default value is null."
|
||||
},
|
||||
"demoId": "custom-description"
|
||||
},
|
||||
{
|
||||
"name": "center",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 false",
|
||||
"desc": {
|
||||
"zh-CN": "文字是否居中",
|
||||
"en-US": "Whether the text is centered"
|
||||
},
|
||||
"demoId": "center"
|
||||
},
|
||||
{
|
||||
"name": "close-text",
|
||||
"type": "String",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "关闭按钮自定义文本",
|
||||
"en-US": "Customized text of the close button"
|
||||
},
|
||||
"demoId": "close-text"
|
||||
},
|
||||
{
|
||||
"name": "show-icon",
|
||||
"type": "Boolean",
|
||||
"defaultValue": "该属性的默认值为 true",
|
||||
"desc": {
|
||||
"zh-CN": "是否显示图标",
|
||||
"en-US": "Display icon"
|
||||
},
|
||||
"demoId": "show-icon"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "close",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "关闭 alert 时触发的事件",
|
||||
"en-US": "Event triggered when the alert function is disabled"
|
||||
},
|
||||
"demoId": "close-events"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"name": "default",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "组件默认插槽",
|
||||
"en-US": "Default slot of the component"
|
||||
},
|
||||
"demoId": "slot-default"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "标题的内容",
|
||||
"en-US": "Title content"
|
||||
},
|
||||
"demoId": "title"
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "提示内容",
|
||||
"en-US": "Prompt Content"
|
||||
},
|
||||
"demoId": "custom-description"
|
||||
},
|
||||
{
|
||||
"name": "close",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "自定义关闭按钮，当 closable 属性为 false 时有效",
|
||||
"en-US": ""
|
||||
},
|
||||
"demoId": "custom-close"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Button as TinyButton} from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyButton>默认按钮</TinyButton>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<button-click-demo></button-click-demo>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonClick from "@/webcomps/button/button-click-webcomp.js";
|
||||
customElements.define("button-click-demo", ButtonClick);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Button as TinyButton} from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyButton round type='primary'>主要按钮</TinyButton>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<button-round-demo></button-round-demo>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonRound from "@/webcomps/button/button-round-webcomp.js";
|
||||
customElements.define("button-round-demo", ButtonRound);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Button as TinyButton} from '@pe-3/react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
|
||||
function App(props) {
|
||||
return (<div>
|
||||
{props.children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
ReactDOM.createRoot(this).render(
|
||||
<App>
|
||||
<TinyButton type='success'>成功按钮</TinyButton>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<button-type-demo></button-type-demo>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonType from "@/webcomps/button/button-type-webcomp.js";
|
||||
customElements.define("button-type-demo", ButtonType);
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Button 按钮
|
||||
---
|
||||
|
||||
# Button 按钮
|
||||
|
||||
<div>
|
||||
|
||||
按钮组件一般用于触发一些操作。
|
||||
|
||||
```typescript
|
||||
import { Button } from '@opentiny/vue';
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Button 按钮
|
||||
---
|
||||
|
||||
# Button 按钮
|
||||
|
||||
<div> 按钮组件一般用于触发一些操作。</div>
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
{
|
||||
"column": "2",
|
||||
"demos": [
|
||||
{
|
||||
"demoId": "button-type",
|
||||
"name": {
|
||||
"zh-CN": "按钮类型",
|
||||
"en-US": "button type"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过属性<code>type</code>配置按钮类型，包含<code>success</code>、<code>info</code>、<code>warning</code>、<code>danger</code>四种类型。",
|
||||
"en-US": "<p>button type</p>"
|
||||
},
|
||||
"codeFiles": ["button-type.vue"]
|
||||
},
|
||||
{
|
||||
"demoId": "button-round",
|
||||
"name": {
|
||||
"zh-CN": "圆角按钮",
|
||||
"en-US": "button round"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>通过<code>round</code>属性设置按钮是否圆角",
|
||||
"en-US": "<p>button round</p>"
|
||||
},
|
||||
"codeFiles": ["button-round.vue"]
|
||||
},
|
||||
{
|
||||
"demoId": "button-click",
|
||||
"name": {
|
||||
"zh-CN": "事件",
|
||||
"en-US": "events"
|
||||
},
|
||||
"desc": {
|
||||
"zh-CN": "<p>按钮点击事件。",
|
||||
"en-US": "<p>bbutton click</p>"
|
||||
},
|
||||
"codeFiles": ["button-click.vue"]
|
||||
}
|
||||
],
|
||||
"apis": [
|
||||
{
|
||||
"name": "Button",
|
||||
"type": "component",
|
||||
"properties": [
|
||||
{
|
||||
"name": "type",
|
||||
"type": "primary | success | warning",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "<p>展示按钮不同的状态</p>",
|
||||
"en-US": "display different button"
|
||||
},
|
||||
"demoId": "button-type"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "click",
|
||||
"type": "",
|
||||
"defaultValue": "",
|
||||
"desc": {
|
||||
"zh-CN": "<p>点击按钮时触发的回调</p>",
|
||||
"en-US": "Click"
|
||||
},
|
||||
"demoId": "button-click"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export default {
|
||||
isMobile: false,
|
||||
initApp: (app) => { }
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Button按钮</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#ECF3FB" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
|
||||
<stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
|
||||
<stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
|
||||
<stop stop-color="#F0F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
|
||||
<stop stop-color="#D5E6F9" offset="0%"></stop>
|
||||
<stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
|
||||
<stop stop-color="#CEE6FE" offset="0%"></stop>
|
||||
<stop stop-color="#8AB5F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
|
||||
<stop stop-color="#BFD6F9" offset="0%"></stop>
|
||||
<stop stop-color="#F3F6FE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
|
||||
<stop stop-color="#CAD9F3" offset="0%"></stop>
|
||||
<stop stop-color="#D5E3F7" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="44.0988019%" y1="53.2030982%" x2="128.792906%" y2="41.8419999%" id="linearGradient-9">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-10">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-11">
|
||||
<stop stop-color="#5073E5" offset="0%"></stop>
|
||||
<stop stop-color="#5E7CE0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
|
||||
<stop stop-color="#FFCC00" offset="0%"></stop>
|
||||
<stop stop-color="#FF9D00" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-13" cx="76" cy="45" r="8"></circle>
|
||||
<filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-14">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
|
||||
<feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
|
||||
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.661752894 0 0 0 0 0.324547702 0 0 0 0 0.00489962574 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-15">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.841553619 0 0 0 0 0.341832308 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-16" points="75.7129876 43.8022814 74.2754034 57.814413 78.9449685 55.9202277 81.4194729 62.8022814 83.8096817 61.7804537 81.2116343 54.9762941 85.8108161 53.4874666"></polygon>
|
||||
<filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-17">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-697.000000, -327.000000)">
|
||||
<g id="Button按钮" transform="translate(697.000000, 327.000000)">
|
||||
<g id="编组">
|
||||
<g transform="translate(9.000000, 1.000000)" id="多边形">
|
||||
<polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
|
||||
<polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
|
||||
<polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
|
||||
<polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
|
||||
</g>
|
||||
<g id="编组" transform="translate(17.000000, 38.000000)">
|
||||
<rect id="矩形备份" fill="url(#linearGradient-9)" opacity="0.303770519" x="7" y="0" width="78" height="23" rx="4"></rect>
|
||||
<rect id="矩形" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="0" y="16" width="90" height="30" rx="4"></rect>
|
||||
<path d="M14.784,25.576 L14.784,27.176 L18.528,27.176 L18.528,37 L20.4,37 L20.4,27.176 L24.144,27.176 L24.144,25.576 L14.784,25.576 Z M26.576,25.352 C26.224,25.352 25.936,25.464 25.696,25.688 C25.456,25.912 25.344,26.2 25.344,26.552 C25.344,26.904 25.456,27.192 25.696,27.432 C25.936,27.656 26.224,27.768 26.576,27.768 C26.928,27.768 27.216,27.656 27.456,27.432 C27.696,27.208 27.824,26.904 27.824,26.552 C27.824,26.2 27.696,25.912 27.472,25.688 C27.232,25.464 26.928,25.352 26.576,25.352 Z M25.664,28.728 L25.664,37 L27.488,37 L27.488,28.728 L25.664,28.728 Z M33.456,28.504 C32.16,28.504 31.152,28.936 30.432,29.8 C29.76,30.584 29.424,31.608 29.424,32.856 C29.424,34.136 29.76,35.176 30.448,35.976 C31.152,36.808 32.144,37.224 33.424,37.224 C34.496,37.224 35.36,36.952 36,36.424 C36.656,35.88 37.088,35.048 37.28,33.928 L35.472,33.928 C35.328,35.128 34.656,35.736 33.44,35.736 C32.736,35.736 32.208,35.48 31.856,34.984 C31.472,34.472 31.296,33.752 31.296,32.84 C31.296,31.944 31.488,31.24 31.872,30.744 C32.256,30.232 32.784,29.992 33.456,29.992 C34,29.992 34.448,30.12 34.784,30.376 C35.104,30.632 35.328,31.016 35.44,31.544 L37.248,31.544 C37.088,30.504 36.672,29.736 36.016,29.224 C35.376,28.744 34.528,28.504 33.456,28.504 Z M38.72,25.352 L38.72,37 L40.544,37 L40.544,34.104 L41.376,33.32 L44.272,37 L46.608,37 L42.624,32.152 L46.288,28.728 L43.936,28.728 L40.544,32.008 L40.544,25.352 L38.72,25.352 Z M53.056,25.576 L53.056,37 L54.928,37 L54.928,29.128 L54.992,29.128 L58.352,37 L59.968,37 L63.328,29.128 L63.392,29.128 L63.392,37 L65.264,37 L65.264,25.576 L63.072,25.576 L59.2,34.536 L59.136,34.536 L55.248,25.576 L53.056,25.576 Z M70.864,28.504 C69.632,28.504 68.656,28.92 67.952,29.768 C67.216,30.6 66.864,31.624 66.864,32.856 C66.864,34.232 67.248,35.304 68.016,36.088 C68.736,36.84 69.712,37.224 70.944,37.224 C72.048,37.224 72.96,36.904 73.696,36.28 C74.272,35.768 74.656,35.112 74.848,34.344 L73.024,34.344 C72.8,34.808 72.56,35.144 72.288,35.352 C71.936,35.608 71.488,35.736 70.928,35.736 C70.272,35.736 69.76,35.528 69.408,35.128 C69.056,34.728 68.848,34.136 68.784,33.368 L74.976,33.368 C74.976,31.88 74.64,30.712 73.984,29.88 C73.264,28.952 72.224,28.504 70.864,28.504 Z M70.912,29.992 C72.192,29.992 72.912,30.648 73.072,31.992 L68.816,31.992 C68.928,31.336 69.152,30.84 69.488,30.504 C69.84,30.152 70.304,29.992 70.912,29.992 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<g id="椭圆形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
|
||||
<circle stroke="url(#linearGradient-12)" stroke-width="4" stroke-linejoin="square" cx="76" cy="45" r="6"></circle>
|
||||
</g>
|
||||
<g id="路径-2">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
|
||||
<use fill="#000000" fill-rule="evenodd" xlink:href="#path-16"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue