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

feat: sync site code (#613)

This commit is contained in:
ajaxzheng 2023-10-22 19:53:42 -07:00 committed by GitHub
parent 7dc567d0bd
commit 7dd22db4a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
211 changed files with 4637 additions and 1208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -82,6 +82,5 @@
"italic": false
}
],
"vue.codeActions.enabled": false,
"git.ignoreLimitWarning": true
"vue.codeActions.enabled": false
}

6
examples/docs/newsrc/mobile-first.vue
View File

@ -23,15 +23,15 @@
<div v-html="state.currDemo?.desc['zh-CN']"></div>
</div>
<!-- 预览 -->
<div class="rel px20">
<div class="rel px20 minh200" style="transform: translateX(0)">
<component :is="state.comp"></component>
</div>
</div>
<!-- API表格 -->
<div v-if="state.currApi.length" class="my20 f24 fw-bold">组件API</div>
<div v-if="state.currApi.length" class="mt20 f24 fw-bold">组件API</div>
<div v-for="(oneGroup, idx) in state.currApi" :key="idx">
<div class="f-r f-pos-start fw-bold">
<div class="mt20 f-r f-pos-start fw-bold">
<div :id="oneGroup.name" class="f18">
{{ oneGroup.name }}
</div>

4
examples/docs/newsrc/mobile.vue
View File

@ -31,10 +31,10 @@
</div>
</div>
<!-- API表格 -->
<div v-if="state.currApi.length" class="my20 f24 fw-bold">组件API</div>
<div v-if="state.currApi.length" class="mt20 f24 fw-bold">组件API</div>
<div v-for="(oneGroup, idx) in state.currApi" :key="idx">
<div class="f-r f-pos-start fw-bold">
<div class="mt20 f-r f-pos-start fw-bold">
<div :id="oneGroup.name" class="f18">
{{ oneGroup.name }}
</div>

2
examples/docs/newsrc/pc.vue
View File

@ -38,7 +38,7 @@
<!-- API表格 -->
<div v-if="state.currApi?.length" class="mt20 f24 fw-bold">组件API</div>
<div v-for="(oneGroup, idx) in state.currApi" :key="idx">
<div class="f-r f-pos-start fw-bold">
<div class="mt20 f-r f-pos-start fw-bold">
<div :id="oneGroup.name" class="f18">
{{ oneGroup.name }}
</div>

2
examples/sites/demos/mobile-first/app/dropdown/button-dropdown.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-dropdown split-button>
<tiny-dropdown single-button>
标准按钮
<template #dropdown>
<tiny-dropdown-menu>

2
examples/sites/demos/mobile-first/app/dropdown/button-size.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-dropdown split-button type="primary" size="medium">
<tiny-dropdown single-button type="primary" size="medium">
<span>更多</span>
<template #dropdown>
<tiny-dropdown-menu>

2
examples/sites/demos/mobile-first/app/dropdown/button-type.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-dropdown split-button type="primary">
<tiny-dropdown single-button type="primary">
按钮类型
<template #dropdown>
<tiny-dropdown-menu>

2
examples/sites/demos/mobile-first/app/dropdown/events-button-click.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-dropdown split-button @button-click="buttonClick">
<tiny-dropdown single-button @button-click="buttonClick">
标准按钮
<template #dropdown>
<tiny-dropdown-menu>

4
examples/sites/demos/mobile-first/app/dropdown/pop-direction.vue
View File

@ -2,11 +2,11 @@
<tiny-layout>
<tiny-row>
<tiny-col :span="2">
<p>默认</p>
<p>下居右</p>
<tiny-dropdown>
<span>更多</span>
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-menu placement="bottom-start">
<tiny-dropdown-item>选择一</tiny-dropdown-item>
<tiny-dropdown-item>选择二</tiny-dropdown-item>
<tiny-dropdown-item>选择三</tiny-dropdown-item>

4
examples/sites/demos/mobile-first/app/dropdown/webdoc/dropdown.js
View File

@ -47,7 +47,7 @@ export default {
'en-US': 'events'
},
desc: {
'zh-CN': '<p>可以通过 `split-button` 属性设置按钮下拉菜单。<p>',
'zh-CN': '<p>可以通过 `single-button` 属性设置按钮下拉菜单。<p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['button-dropdown.vue']
@ -160,7 +160,7 @@ export default {
'en-US': 'events'
},
desc: {
'zh-CN': '<p>当下拉触发元素呈现为按钮组，即`split-button`属性为`true`时，点击左侧按钮的事件回调<p>',
'zh-CN': '<p>当下拉触发元素呈现为按钮组，即`single-button`属性为`true`时，点击左侧按钮的事件回调<p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['events-button-click.vue']

29
examples/sites/demos/mobile-first/app/tabbar/active-inactive-color.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<tiny-tabbar v-model="activeName" active-color="red" inactive-color="grey">
<tiny-tabbar-item name="消息" :icon="IconWebPlus"> 工作台 </tiny-tabbar-item>
<tiny-tabbar-item name="邮件" :icon="IconMail"> 消息 </tiny-tabbar-item>
<tiny-tabbar-item name="人员" :icon="IconMarkOn"> 导航 </tiny-tabbar-item>
<tiny-tabbar-item name="设置" :icon="IconUser"> 我的 </tiny-tabbar-item>
</tiny-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from '@opentiny/vue'
import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
export default {
components: {
TinyTabbar: Tabbar,
TinyTabbarItem: TabbarItem
},
data() {
return {
activeName: '人员',
IconWebPlus: IconWebPlus(),
IconMail: IconMail(),
IconMarkOn: IconMarkOn(),
IconUser: IconUser()
}
}
}
</script>

29
examples/sites/demos/mobile-first/app/tabbar/badge.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<tiny-tabbar v-model="activeName">
<tiny-tabbar-item :icon="IconWebPlus" :badge="20"> 工作台 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMail" dot> 消息 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMarkOn" :badge="5"> 导航 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconUser"> 我的 </tiny-tabbar-item>
</tiny-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from '@opentiny/vue'
import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
export default {
components: {
TinyTabbar: Tabbar,
TinyTabbarItem: TabbarItem
},
data() {
return {
activeName: 0,
IconWebPlus: IconWebPlus(),
IconMail: IconMail(),
IconMarkOn: IconMarkOn(),
IconUser: IconUser()
}
}
}
</script>

29
examples/sites/demos/mobile-first/app/tabbar/base.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<tiny-tabbar v-model="activeName">
<tiny-tabbar-item :icon="IconWebPlus"> 工作台 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMail"> 消息 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMarkOn"> 导航 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconUser"> 我的 </tiny-tabbar-item>
</tiny-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from '@opentiny/vue'
import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
export default {
components: {
TinyTabbar: Tabbar,
TinyTabbarItem: TabbarItem
},
data() {
return {
activeName: 0,
IconWebPlus: IconWebPlus(),
IconMail: IconMail(),
IconMarkOn: IconMarkOn(),
IconUser: IconUser()
}
}
}
</script>

29
examples/sites/demos/mobile-first/app/tabbar/border.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<tiny-tabbar v-model="activeName" :border="false">
<tiny-tabbar-item :icon="IconWebPlus"> 工作台 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMail"> 消息 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMarkOn"> 导航 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconUser"> 我的 </tiny-tabbar-item>
</tiny-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from '@opentiny/vue'
import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
export default {
components: {
TinyTabbar: Tabbar,
TinyTabbarItem: TabbarItem
},
data() {
return {
activeName: 0,
IconWebPlus: IconWebPlus(),
IconMail: IconMail(),
IconMarkOn: IconMarkOn(),
IconUser: IconUser()
}
}
}
</script>

34
examples/sites/demos/mobile-first/app/tabbar/event-change.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<tiny-tabbar v-model="activeName" @change="handleChange">
<tiny-tabbar-item :icon="IconWebPlus"> 工作台 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMail"> 消息 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMarkOn"> 导航 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconUser"> 我的 </tiny-tabbar-item>
</tiny-tabbar>
</template>
<script>
import { Tabbar, TabbarItem, Modal } from '@opentiny/vue'
import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
export default {
components: {
TinyTabbar: Tabbar,
TinyTabbarItem: TabbarItem
},
data() {
return {
activeName: 0,
IconWebPlus: IconWebPlus(),
IconMail: IconMail(),
IconMarkOn: IconMarkOn(),
IconUser: IconUser()
}
},
methods: {
handleChange(val) {
Modal.message({ message: '当前标签页为：' + val, status: 'info' })
}
}
}
</script>

31
examples/sites/demos/mobile-first/app/tabbar/options.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<tiny-tabbar v-model="activeName" :item-list="itemList" :show-number="3"></tiny-tabbar>
</template>
<script>
import { Tabbar } from '@opentiny/vue'
import { IconWebPlus, IconMail, IconMarkOn, IconUser, IconEllipsis } from '@opentiny/vue-icon'
export default {
components: {
TinyTabbar: Tabbar
},
data() {
return {
activeName: 1,
IconWebPlus: IconWebPlus(),
IconMail: IconMail(),
IconMarkOn: IconMarkOn(),
IconUser: IconUser(),
IconEllipsis: IconEllipsis(),
itemList: [
{ text: '工作台', icon: IconWebPlus(), badge: 30 },
{ text: '消息', icon: IconMail(), dot: true },
{ text: '导航', icon: IconMarkOn() },
{ text: '我的', icon: IconUser() },
{ text: '更多', icon: IconEllipsis() }
]
}
}
}
</script>

37
examples/sites/demos/mobile-first/app/tabbar/slot-icon.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<tiny-tabbar v-model="activeName">
<tiny-tabbar-item>
自定义
<template #icon="data">
<img :src="data.active ? icon.active : icon.inactive" />
</template>
</tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMail"> 消息 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconMarkOn"> 导航 </tiny-tabbar-item>
<tiny-tabbar-item :icon="IconUser"> 我的 </tiny-tabbar-item>
</tiny-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from '@opentiny/vue'
import { IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
export default {
components: {
TinyTabbar: Tabbar,
TinyTabbarItem: TabbarItem
},
data() {
return {
activeName: 0,
IconMail: IconMail(),
IconMarkOn: IconMarkOn(),
IconUser: IconUser(),
icon: {
active: 'https://his-beta.huawei.com/opentiny/webnova/static/img/tiny3bg.b5dd307.jpg',
inactive: 'https://his-beta.huawei.com/opentiny/webnova/static/img/tjdk.22c8d3d.png'
}
}
}
}
</script>

9
examples/sites/demos/mobile-first/app/tabbar/webdoc/tabbar.cn.md Normal file
View File

@ -0,0 +1,9 @@
---
title: Tabbar 标签栏
---
# Tabbar 标签栏
<div>
移动端底部tab切换功能
</div>

9
examples/sites/demos/mobile-first/app/tabbar/webdoc/tabbar.en.md Normal file
View File

@ -0,0 +1,9 @@
---
title: Tabbar 标签栏
---
# Tabbar 标签栏
<div>
移动端底部tab切换功能
</div>

232
examples/sites/demos/mobile-first/app/tabbar/webdoc/tabbar.js Normal file
View File

@ -0,0 +1,232 @@
export default {
column: '2',
owner: '',
demos: [
{
demoId: 'base',
name: {
'zh-CN': '基本用法',
'en-US': 'basic usage'
},
desc: {
'zh-CN': '<p>通过<code>type</code>设置不同的类型。可选值：success、warning、info、error，默认值：info 。</p>',
'en-US': '<p>button type</p>'
},
codeFiles: ['base.vue']
},
{
demoId: 'active-inactive-color',
name: {
'zh-CN': '自定义颜色',
'en-US': 'button round'
},
desc: {
'zh-CN':
'<p>通过设置<code>active-color</code>属性自定义颜色，<code>inactive-color</code>属性设置未激活颜色</p>',
'en-US': '<p>button round</p>'
},
codeFiles: ['active-inactive-color.vue']
},
{
demoId: 'badge',
name: {
'zh-CN': '徽标提示',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>通过添加<code>badge</code>属性设置徽标数值，通过添加<code>dot</code>属性显示圆点徽标<p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['badge.vue']
},
{
demoId: 'border',
name: {
'zh-CN': '无边框',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>通过添加<code>border</code>属性去除边框<p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['border.vue']
},
{
demoId: 'event-change',
name: {
'zh-CN': '切换事件',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>通过添加<code>change</code>事件实现事件切换<p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['event-change.vue']
},
{
demoId: 'slot-icon',
name: {
'zh-CN': '自定义图标',
'en-US': 'events'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['slot-icon.vue']
},
{
demoId: 'options',
name: {
'zh-CN': '循环配置',
'en-US': 'events'
},
desc: {
'zh-CN':
'<p>通过<code>show-number</code>属性设置展示个数，默认值为 5 可在 Tabbar 组件上设置 <code>item-list</code> 属性，可循环配置 TabbarItem。<p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['options.vue']
}
],
apis: [
{
'name': 'Tabbar',
'type': 'component',
'props': [
{
'name': 'active-color',
'type': 'string',
'defaultValue': '',
'desc': { 'zh-CN': '设置被激活时的颜色', 'en-US': 'Whether the text is centered' },
'demoId': 'active-inactive-color'
},
{
'name': 'border',
'type': 'boolean',
'defaultValue': 'true',
'desc': { 'zh-CN': '设置底部导航上边框', 'en-US': 'Set whether alarms can be disabled.' },
'demoId': 'custom-close'
},
{
'name': 'inactive-color',
'type': 'string',
'defaultValue': '',
'desc': { 'zh-CN': '设置底部导航未被激活颜色', 'en-US': 'Customized text of the close button' },
'demoId': 'active-inactive-color'
},
{
'name': 'item-list',
'type': 'Object[]',
'defaultValue': '[]',
'desc': {
'zh-CN': '设置底部导航虚幻遍历需要放的数组;',
'en-US': 'Set the warning prompt content. The default value is null.'
},
'demoId': 'options'
},
{
'name': 'show-number',
'type': 'number',
'defaultValue': '5',
'desc': {
'zh-CN': '设置底部导航需要展示的项数',
'en-US':
'Set the alarm icon. By default, the corresponding icon is automatically used based on the value of type.'
},
'demoId': 'options'
},
{
'name': 'v-model',
'type': 'number | string',
'defaultValue': '0',
'desc': { 'zh-CN': '设置底部导航双向数据绑定', 'en-US': 'Display icon' },
'demoId': 'base'
}
],
'events': [
{
'name': 'change',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '选项改变时触发的事件',
'en-US': 'Event triggered when the alert function is disabled'
},
'demoId': 'event-change'
}
],
'slots': [
{
'name': 'default',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '底部导航每一项', 'en-US': '' },
'demoId': 'base'
}
]
},
{
'name': 'TabbarItem',
'type': 'component',
'props': [
{
'name': 'badge',
'type': 'number | string',
'defaultValue': '',
'desc': { 'zh-CN': '设置底部导航选项徽标', 'en-US': '' },
'demoId': 'badge'
},
{
'name': 'dot',
'type': 'boolean',
'defaultValue': '',
'desc': { 'zh-CN': '设置底部导航选项点', 'en-US': '' },
'demoId': 'badge'
},
{
'name': 'icon',
'type': 'Object',
'defaultValue': '',
'desc': { 'zh-CN': '设置底部导航上自定义图标', 'en-US': '' },
'demoId': 'slot-icon'
},
{
'name': 'name',
'type': 'number | string',
'defaultValue': '',
'desc': { 'zh-CN': '设置底部导航选项标题', 'en-US': '' },
'demoId': 'base'
},
{
'name': 'text',
'type': 'string',
'defaultValue': '',
'desc': { 'zh-CN': '设置底部导航循环时设定的标题', 'en-US': '' },
'demoId': 'base'
}
],
'events': [
{
'name': 'click',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '选项点击时触发的事件',
'en-US': 'Event triggered when the alert function is disabled'
},
'demoId': 'event-change'
}
],
'slots': [
{
'name': 'default',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '底部导航每一项', 'en-US': '' },
'demoId': 'base'
}
]
}
]
}

13
examples/sites/demos/mobile-first/menus.js
View File

@ -11,8 +11,9 @@ export const cmpMenus = [
{
label: '导航组件',
labelEn: 'Navigation',
key: 'cmp_navigation',
key: 'cmp_navigation_components',
children: [
{ name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
{ name: 'CalendarBar', nameCn: '日历栏', key: 'calendar-bar' },
{ name: 'Filter', nameCn: '过滤器', key: 'filter' },
{ name: 'FilterBar', nameCn: '过滤栏', key: 'filter-bar' },
@ -27,7 +28,7 @@ export const cmpMenus = [
{
label: '容器组件',
labelEn: 'Container',
key: 'cmp_container',
key: 'cmp_container_components',
children: [
{ name: 'Cell', nameCn: '单元格', key: 'cell' },
{ name: 'ActionSheet', nameCn: '动作面板', key: 'action-sheet' },
@ -42,7 +43,7 @@ export const cmpMenus = [
{
label: '表单组件',
labelEn: 'Form',
key: 'cmp_form',
key: 'cmp_form_components',
children: [
{ name: 'DatePickerMobile', nameCn: '日期选择器', key: 'date-picker-mobile' },
{ name: 'TimePickerMobile', nameCn: '时间选择器', key: 'time-picker-mobile' },
@ -64,7 +65,7 @@ export const cmpMenus = [
{
label: '数据组件',
labelEn: 'Data',
key: 'cmp_data',
key: 'cmp_data_components',
children: [
{ name: 'Grid', nameCn: '表格', key: 'grid' },
{ name: 'ColumnListItem', nameCn: '分区列表项', key: 'column-list-item' },
@ -75,7 +76,7 @@ export const cmpMenus = [
{
label: '提示组件',
labelEn: 'Tooltip',
key: 'cmp_tooltip',
key: 'cmp_tips_components',
children: [
{ name: 'Alert', nameCn: '警告', key: 'alert' },
{ name: 'Badge', nameCn: '标记', key: 'badge' },
@ -91,7 +92,7 @@ export const cmpMenus = [
{
label: '其它组件',
labelEn: 'Others',
key: 'cmp_others',
key: 'cmp_other_components',
children: [
{ name: 'Exception', nameCn: '缺省页', key: 'exception' },
{ name: 'Image', nameCn: '图片预览', key: 'image' },

18
examples/sites/demos/pc/app/area/webdoc/area.js
View File

@ -31,6 +31,15 @@ export default {
},
'codeFiles': ['size.vue']
},
{
'demoId': 'disabled',
'name': { 'zh-CN': '禁用', 'en-US': 'Set Disabled' },
'desc': {
'zh-CN': '<p>通过 <code>disabled</code> 设置组件禁用默认值为 false 。</p>\n',
'en-US': '<p>Use <code>disabled</code> to disable the component. The default value is false. </p>\n'
},
'codeFiles': ['disabled.vue']
},
{
'demoId': 'area-events',
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
@ -41,15 +50,6 @@ export default {
'The <code>change-region</code> event is triggered when the value of the Region drop-down list box changes. The <code>change-rep</code> event is triggered when the value of the Rep drop-down list box changes. The <code>change-office</code> event is triggered when the value of the Office drop-down list box changes. </p>\n'
},
'codeFiles': ['area-events.vue']
},
{
'demoId': 'disabled',
'name': { 'zh-CN': '设置组件大小', 'en-US': 'Set Component Size' },
'desc': {
'zh-CN': '<p>通过 <code>disabled</code> 设置组件禁用默认值为 false 。</p>\n',
'en-US': '<p>Use <code>disabled</code> to disable the component. The default value is false. </p>\n'
},
'codeFiles': ['disabled.vue']
}
],
apis: [

29
examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
View File

@ -16,7 +16,8 @@ export default {
'name': { 'zh-CN': '显示模式', 'en-US': 'Display mode' },
'desc': {
'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 year、month。</p>\n',
'en-US': '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are year and month. </p>\n'
'en-US':
'<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are year and month. </p>\n'
},
'codeFiles': ['calendar-mode.vue']
},
@ -39,13 +40,22 @@ export default {
'codeFiles': ['calendar-schedule-slot.vue']
},
{
'demoId': 'calendar-timeline',
'name': { 'zh-CN': '日程模式插槽', 'en-US': '' },
'demoId': 'calendar-timeline-slot',
'name': { 'zh-CN': '时间线插槽', 'en-US': '' },
'desc': {
'zh-CN': '<p>时间下模式下提供 timeline1-timeline7 这 7 个插槽，方便用户自定义日程展示。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['calendar-timeline-slot.vue']
},
{
'demoId': 'calendar-timeline-rang',
'name': { 'zh-CN': '时间线范围配置', 'en-US': '' },
'desc': {
'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['calendar-timeline-slot.vue']
'codeFiles': ['calendar-timeline-range.vue']
},
{
'demoId': 'multi-select',
@ -60,7 +70,8 @@ export default {
'demoId': 'calendar-day-mark',
'name': { 'zh-CN': '日期标记', 'en-US': '' },
'desc': {
'zh-CN': '<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
'zh-CN':
'<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['calendar-day-mark.vue']
@ -87,7 +98,8 @@ export default {
'demoId': 'custom-day-bg-color',
'name': { 'zh-CN': '自定义日期单元格背景色', 'en-US': 'Add Schedule Event' },
'desc': {
'zh-CN': '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
'zh-CN':
'<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['custom-day-bg-color.vue']
@ -105,7 +117,8 @@ export default {
'demoId': 'calendar-event',
'name': { 'zh-CN': '事件', 'en-US': '' },
'desc': {
'zh-CN': '<p>日历抛出的事件有以下这些：</p>\n<p>new-schedule:新增日程按钮点击事件</p>\n<p>selected-date-change:选中日期改变事件</p>\n<p>prev-week-click：上一周按钮点击事件</p>\n<p>next-week-click：下一周按钮点击事件</p>\n<p>week-change：周改变事件</p>\n<p>year-change：年改变事件</p>\n<p>month-change：月改变事件</p>\n',
'zh-CN':
'<p>日历抛出的事件有以下这些：</p>\n<p>new-schedule:新增日程按钮点击事件</p>\n<p>selected-date-change:选中日期改变事件</p>\n<p>prev-week-click：上一周按钮点击事件</p>\n<p>next-week-click：下一周按钮点击事件</p>\n<p>week-change：周改变事件</p>\n<p>year-change：年改变事件</p>\n<p>month-change：月改变事件</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['calendar-event.vue']
@ -245,7 +258,7 @@ export default {
'en-US': ''
},
'demoId': 'basic-usage'
},
}
],
'events': [
{

10
examples/sites/demos/pc/app/checkbox/button-chek-box.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="chek-box-true-label-demo">
<tiny-checkbox-button
v-model="checked"
text="复选框"
@ -10,7 +10,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { CheckboxButton, Modal } from '@opentiny/vue'
export default {
@ -32,3 +32,9 @@ export default {
}
}
</script>
<style scoped>
.chek-box-true-label-demo > * {
margin: 4px;
}
</style>

10
examples/sites/demos/pc/app/checkbox/text.vue
View File

@ -1,11 +1,11 @@
<template>
<div>
<div class="chek-box-text-demo">
<tiny-checkbox v-model="checked" text="复选框" true-label="真文本" false-label="假文本"></tiny-checkbox>
<tiny-button @click="getValue">获取文本</tiny-button>
</div>
</template>
<script lang="jsx">
<script>
import { Checkbox, Modal, Button } from '@opentiny/vue'
export default {
@ -28,3 +28,9 @@ export default {
}
}
</script>
<style scoped>
.chek-box-text-demo> * {
margin: 4px;
}
</style>

2
examples/sites/demos/pc/app/checkbox/vertical-checkbox.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-checkbox-group v-model="checkboxGroup" vertical text-color="#666">
<tiny-checkbox-group v-model="checkboxGroup" vertical>
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</template>

18
examples/sites/demos/pc/app/form/validate-type-composition-api.vue
View File

@ -2,7 +2,7 @@
<div class="demo-form-valid-text">
<div class="mb-12">
<div>提示形式：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
<div>行内形式：<tiny-button-group :data="inlineList" v-model="inlineType"></tiny-button-group></div>
<div>错误文本类型：<tiny-button-group :data="messageTypeList" v-model="messageType"></tiny-button-group></div>
</div>
<tiny-form
ref="ruleFormRef"
@ -10,7 +10,7 @@
:rules="rules"
label-width="100px"
:validate-type="validType"
:inline-message="inlineType"
:message-type="messageType"
>
<tiny-form-item label="必填" prop="users">
<tiny-input v-model="createData.users"></tiny-input>
@ -18,8 +18,8 @@
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="URL" prop="url">
<tiny-input v-model="createData.url"></tiny-input>
<tiny-form-item label="短输入框" prop="input">
<tiny-input v-model="createData.input" style="width: 180px"></tiny-input>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email" validate-type="text">
<tiny-input v-model="createData.email"></tiny-input>
@ -49,7 +49,7 @@ const ruleFormRef = ref()
const createData = reactive({
users: '',
url: '',
input: '',
email: '',
datepicker: '',
textarea: ''
@ -60,15 +60,17 @@ const rules = ref({
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'blur' }
],
datepicker: { type: 'date' },
url: { required: true, type: 'url' },
input: { required: true },
email: { required: true, type: 'email' }
})
const messageType = ref('block')
const validType = ref('text')
const inlineType = ref(false)
const validTypeList = ref([
{ text: 'tip', value: 'tip' },
{ text: 'text', value: 'text' }
{ text: '默认', value: 'none' },
{ text: '行内', value: 'inline' },
{ text: '块级', value: 'block' }
])
const inlineList = ref([
{ text: 'false', value: false },

21
examples/sites/demos/pc/app/form/validate-type.vue
View File

@ -2,7 +2,7 @@
<div class="demo-form-valid-text">
<div class="mb-12">
<div>提示形式：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
<div>行内形式：<tiny-button-group :data="inlineList" v-model="inlineType"></tiny-button-group></div>
<div>错误文本类型：<tiny-button-group :data="messageTypeList" v-model="messageType"></tiny-button-group></div>
</div>
<tiny-form
ref="ruleFormRef"
@ -10,7 +10,7 @@
:rules="rules"
label-width="100px"
:validate-type="validType"
:inline-message="inlineType"
:message-type="messageType"
>
<tiny-form-item label="必填" prop="users">
<tiny-input v-model="createData.users"></tiny-input>
@ -18,8 +18,8 @@
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="URL" prop="url">
<tiny-input v-model="createData.url"></tiny-input>
<tiny-form-item label="短输入框" prop="input">
<tiny-input v-model="createData.input" style="width: 180px"></tiny-input>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email" validate-type="text">
<tiny-input v-model="createData.email"></tiny-input>
@ -50,20 +50,21 @@ export default {
return {
createData: {
users: '',
url: '',
input: '',
email: '',
datepicker: '',
textarea: ''
},
validType: 'text',
inlineType: false,
messageType: 'block',
validTypeList: [
{ text: 'tip', value: 'tip' },
{ text: 'text', value: 'text' }
],
inlineList: [
{ text: 'false', value: false },
{ text: 'true', value: true }
messageTypeList: [
{ text: '默认', value: 'none' },
{ text: '行内', value: 'inline' },
{ text: '块级', value: 'block' }
],
rules: {
users: [
@ -71,7 +72,7 @@ export default {
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'blur' }
],
datepicker: { type: 'date' },
url: { required: true, type: 'url' },
input: { required: true },
email: { required: true, type: 'email' }
}
}

38
examples/sites/demos/pc/app/form/webdoc/form.js
View File

@ -86,7 +86,7 @@ export default {
name: { 'zh-CN': '校验提示的形式', 'en-US': 'Disable form' },
desc: {
'zh-CN':
'<p>通过 <code>validate-type</code> 可设置校验提示信息是以 <code>text</code> 文本显示还是以 <code>tip</code> 提示框的形式显示，默认为 <code>tip</code> 。通过<code>inline-message</code>可以控制文本显示时是否以行内形式展示校验信息。也可直接配置在某一个 <code>&lt;form-item&gt;</code> 上控制某一项的校验提示形式。</p>\n',
'<p>通过 <code>validate-type</code> 可设置校验提示信息是以 <code>text</code> 文本显示还是以 <code>tip</code> 提示框的形式显示，默认为 <code>tip</code> 。通过<code>message-type</code>可以控制文本显示时是否以行内形式展示校验信息。也可直接配置在某一个 <code>&lt;form-item&gt;</code> 上控制某一项的校验提示形式。</p>\n',
'en-US':
'<p>You can set whether to disable the form by <code>disabled</code>. The default value is <code>false</code>. </p>\n'
},
@ -217,10 +217,22 @@ export default {
{
name: 'inline-message',
type: 'boolean',
defaultValue: 'false',
defaultValue: '',
desc: {
'zh-CN': '是否以行内形式展示校验信息',
'en-US': 'Display validation information in line format'
'zh-CN': '(推荐使用message-type设置)是否以行内形式展示校验信息',
'en-US':
'(It is recommended to use message-type setting) Whether to display the verification information inline form'
},
demoId: 'validate-type'
},
{
name: 'message-type',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '配置文本类型错误类型，可配置行内或者块级，默认为absolute定位;该属性的可选值为 inline | block',
'en-US':
'Configure the text type error type, which can be configured at the inline or block level. The default is absolute positioning; the optional value of this attribute is inline | block'
},
demoId: 'validate-type'
},
@ -435,10 +447,22 @@ export default {
{
name: 'inline-message',
type: 'boolean',
defaultValue: 'false',
defaultValue: '',
desc: {
'zh-CN': '以行内形式展示校验信息;该属性的可选值为 -',
'en-US': 'The validation information is displayed in rows. The optional value of this attribute is -'
'zh-CN': '(推荐使用message-type设置)是否以行内形式展示校验信息',
'en-US':
'(It is recommended to use message-type setting) Whether to display the verification information inline form'
},
demoId: 'validate-type'
},
{
name: 'message-type',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '配置文本类型错误类型，可配置行内或者块级，默认为absolute定位;该属性的可选值为 inline | block',
'en-US':
'Configure the text type error type, which can be configured at the inline or block level. The default is absolute positioning; the optional value of this attribute is inline | block'
},
demoId: 'validate-type'
},

6
examples/sites/demos/pc/app/grid/custom/server-storage.vue
View File

@ -129,7 +129,7 @@ export default {
// 模拟接口请求回来的数据
this.loading = false
const configs = this.$refs.auiGrid.getColumns()
const configs = this.$refs.tinyGrid.getColumns()
// 字段 introduction 在字段 address 前面
const result = [
@ -154,10 +154,10 @@ export default {
}
// 更新个性化面板数据
this.$refs.auiGridToolbar.updateColumn(configs)
this.$refs.tinyGridToolbar.updateColumn(configs)
// 更新表格列，第二个参数为 true 表示同时调整列顺序
this.$refs.auiGrid.reloadCustoms(configs, true)
this.$refs.tinyGrid.reloadCustoms(configs, true)
}, 0)
},
getData({ page }) {

8
examples/sites/demos/pc/app/modal/lock-view-composition-api.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-button @click="btnClick" :reset-time="0">不锁界面不要遮罩层</tiny-button>
<tiny-button @click="btnClick" :reset-time="0">不锁界面 且 隐藏遮罩层</tiny-button>
</template>
<script setup lang="jsx">
@ -7,9 +7,9 @@ import { Button as TinyButton, Modal } from '@opentiny/vue'
function btnClick() {
Modal.alert({
message: '不锁界面不要遮罩层',
lockView: false,
mask: false
message: '设置为不锁界面 且 隐藏遮罩层',
lockView: false, // 设置不锁界面
mask: false // 设置隐藏遮罩层
})
}
</script>

8
examples/sites/demos/pc/app/modal/lock-view.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-button @click="btnClick" :reset-time="0">不锁界面不要遮罩层</tiny-button>
<tiny-button @click="btnClick" :reset-time="0">不锁界面 且 隐藏遮罩层</tiny-button>
</template>
<script lang="jsx">
@ -12,9 +12,9 @@ export default {
methods: {
btnClick() {
Modal.alert({
message: '不锁界面不要遮罩层',
lockView: false,
mask: false
message: '设置为不锁界面 且 隐藏遮罩层',
lockView: false, // 设置不锁界面
mask: false // 设置隐藏遮罩层
})
}
}

5
examples/sites/demos/pc/app/modal/webdoc/modal.js
View File

@ -74,9 +74,10 @@ export default {
},
{
'demoId': 'lock-view1',
'name': { 'zh-CN': '显示遮罩层', 'en-US': 'Display Mask Layer' },
'name': { 'zh-CN': '隐藏遮罩层', 'en-US': 'Display Mask Layer' },
'desc': {
'zh-CN': '<p>可通过 <code>mask</code> 属性设置是否显示遮罩层，默认为 <code>true</code>。</p>\n',
'zh-CN':
'<p>可通过 <code>mask</code> 属性设置是否显示遮罩层，默认为 <code>true</code>。设置为<code>false</code>时隐藏遮罩层</p>\n',
'en-US':
'<p>You can set whether to display the mask layer through the <code>mask</code> attribute. The default value is <code>true</code>. </p>\n'
},

2
examples/sites/demos/pc/app/scroll-text/custom-text-style-composition-api.vue
View File

@ -8,6 +8,6 @@ import { ScrollText as TinyScrollText } from '@opentiny/vue'
<style scoped>
.scrollclass {
background-color: red;
background-color: #b8d9f9;
}
</style>

2
examples/sites/demos/pc/app/scroll-text/custom-text-style.spec.ts
View File

@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
test('自定义文本样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/scroll-text/custom-text-style')
await expect(page.locator('.scrollclass')).toHaveCSS('background-color', 'rgb(255, 0, 0)')
await expect(page.locator('.scrollclass')).toHaveCSS('background-color', 'rgb(184, 217, 249)')
})

2
examples/sites/demos/pc/app/scroll-text/custom-text-style.vue
View File

@ -14,6 +14,6 @@ export default {
<style scoped>
.scrollclass {
background-color: red;
background-color: #b8d9f9;
}
</style>

2
examples/sites/demos/pc/app/user-head/basic-usage-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-user-head type="icon"></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/user-head/basic-usage.vue
View File

@ -2,7 +2,7 @@
<tiny-user-head type="icon"></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

23
examples/sites/demos/pc/app/user-head/color-composition-api.vue
View File

@ -1,21 +1,24 @@
<template>
<div>
<tiny-user-head
v-model="labelText"
class="head-item"
type="label"
value="Ai"
background-color="#40a9ff"
color="#fa8c16"
></tiny-user-head>
<tiny-user-head
class="head-item"
type="icon"
background-color="rgb(250, 140, 22)"
color="rgb(64, 169, 255)"
background-color="#b8d9f9"
color="#fff"
></tiny-user-head>
<tiny-user-head class="head-item" type="icon" background-color="#2e86de" color="#fff"></tiny-user-head>
</div>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
const labelText = 'Ai'
</script>
<style lang="less" scoped>
.tiny-user-head {
margin-right: 10px;
}
</style>

4
examples/sites/demos/pc/app/user-head/color.spec.ts
View File

@ -4,7 +4,7 @@ test('自定义颜色', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/user-head/color')
const div1 = page.locator('.tiny-user-head__portrait').first()
await expect(div1).toHaveCSS('background-color', 'rgb(64, 169, 255)')
await expect(div1).toHaveCSS('background-color', 'rgb(184, 217, 249)')
const div2 = page.locator('div:nth-child(2) > .tiny-user-head__portrait')
await expect(div2).toHaveCSS('background-color', 'rgb(250, 140, 22)')
await expect(div2).toHaveCSS('background-color', 'rgb(46, 134, 222)')
})

26
examples/sites/demos/pc/app/user-head/color.vue
View File

@ -1,27 +1,33 @@
<template>
<div>
<tiny-user-head
v-model="labelText"
class="head-item"
type="label"
value="Ai"
background-color="#40a9ff"
color="#fa8c16"
></tiny-user-head>
<tiny-user-head
class="head-item"
type="icon"
background-color="rgb(250, 140, 22)"
color="rgb(64, 169, 255)"
background-color="#b8d9f9"
color="#fff"
></tiny-user-head>
<tiny-user-head class="head-item" type="icon" background-color="#2e86de" color="#fff"></tiny-user-head>
</div>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {
components: {
TinyUserHead: UserHead
},
data() {
return {
labelText: 'Ai'
}
}
}
</script>
<style lang="less" scoped>
.tiny-user-head {
margin-right: 10px;
}
</style>

4
examples/sites/demos/pc/app/user-head/custom-background-color-composition-api.vue
View File

@ -1,7 +1,7 @@
<template>
<tiny-user-head type="icon" background-color="var(--ti-common-color-line-active)"></tiny-user-head>
<tiny-user-head type="icon" background-color="#a4d9c6"></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/user-head/custom-background-color.spec.ts
View File

@ -4,5 +4,5 @@ test('自定义背景颜色', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/user-head/custom-background-color')
const div1 = page.locator('.tiny-user-head__portrait')
await expect(div1).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(div1).toHaveCSS('background-color', 'rgb(164, 217, 198)')
})

4
examples/sites/demos/pc/app/user-head/custom-background-color.vue
View File

@ -1,8 +1,8 @@
<template>
<tiny-user-head type="icon" background-color="var(--ti-common-color-line-active)"></tiny-user-head>
<tiny-user-head type="icon" background-color="#a4d9c6"></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/user-head/custom-user-head-content-composition-api.vue
View File

@ -9,7 +9,7 @@
</tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
import { iconMail } from '@opentiny/vue-icon'

6
examples/sites/demos/pc/app/user-head/custom-user-head-content.vue
View File

@ -9,14 +9,14 @@
</tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
import { IconMail } from '@opentiny/vue-icon'
import { iconMail } from '@opentiny/vue-icon'
export default {
components: {
TinyUserHead: UserHead,
IconMail: IconMail()
IconMail: iconMail()
}
}
</script>

6
examples/sites/demos/pc/app/user-head/icon-user-head-composition-api.vue
View File

@ -1,10 +1,10 @@
<template>
<tiny-user-head type="icon" :value="IconSmile"></tiny-user-head>
<tiny-user-head v-model="tinyIconSmile" type="icon"></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
import { iconSmile } from '@opentiny/vue-icon'
const IconSmile = iconSmile()
const tinyIconSmile = iconSmile()
</script>

8
examples/sites/demos/pc/app/user-head/icon-user-head.vue
View File

@ -1,10 +1,10 @@
<template>
<tiny-user-head type="icon" :value="IconSmile"></tiny-user-head>
<tiny-user-head v-model="tinyIconSmile" type="icon"></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
import { IconSmile } from '@opentiny/vue-icon'
import { iconSmile } from '@opentiny/vue-icon'
export default {
components: {
@ -12,7 +12,7 @@ export default {
},
data() {
return {
IconSmile: IconSmile()
tinyIconSmile: iconSmile()
}
}
}

6
examples/sites/demos/pc/app/user-head/image-user-head-composition-api.vue
View File

@ -1,10 +1,10 @@
<template>
<tiny-user-head type="image" :value="imgUrl"></tiny-user-head>
<tiny-user-head v-model="imgUrl" type="image"></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import { UserHead as TinyUserHead } from '@opentiny/vue'
const imgUrl = ref('localhost:3000/webnova/static/img/compontent.b2f0f5b.png')
const imgUrl = ref('/static/images/ld.png')
</script>

6
examples/sites/demos/pc/app/user-head/image-user-head.vue
View File

@ -1,8 +1,8 @@
<template>
<tiny-user-head type="image" :value="imgUrl"></tiny-user-head>
<tiny-user-head v-model="imgUrl" type="image"></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {
@ -11,7 +11,7 @@ export default {
},
data() {
return {
imgUrl: 'localhost:3000/webnova/static/img/compontent.b2f0f5b.png'
imgUrl: '/static/images/ld.png'
}
}
}

4
examples/sites/demos/pc/app/user-head/label-user-head-composition-api.vue
View File

@ -1,8 +1,8 @@
<template>
<tiny-user-head class="head-item" type="label" round v-model="text"></tiny-user-head>
<tiny-user-head v-model="text" class="head-item" type="label" round></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import { UserHead as TinyUserHead } from '@opentiny/vue'

4
examples/sites/demos/pc/app/user-head/label-user-head.vue
View File

@ -1,8 +1,8 @@
<template>
<tiny-user-head class="head-item" type="label" round v-model="text"></tiny-user-head>
<tiny-user-head v-model="text" class="head-item" type="label" round></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/user-head/message-count-limit-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-user-head :message-total="100" :message-upper-limit="99" type="icon"></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/user-head/message-count-limit.vue
View File

@ -2,7 +2,7 @@
<tiny-user-head :message-total="100" :message-upper-limit="99" type="icon"></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/user-head/message-count-total-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-user-head :message-total="100" type="icon"></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/user-head/message-count-total.vue
View File

@ -2,7 +2,7 @@
<tiny-user-head :message-total="100" type="icon"></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/user-head/message-count-type-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-user-head :message-total="100" message-type="basic" type="icon"></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/user-head/message-count-type.vue
View File

@ -2,7 +2,7 @@
<tiny-user-head :message-total="100" message-type="basic" type="icon"></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/user-head/min-user-head-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-user-head type="icon" min></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/user-head/min-user-head.vue
View File

@ -2,7 +2,7 @@
<tiny-user-head type="icon" min></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/user-head/round-user-head-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-user-head type="icon" round></tiny-user-head>
</template>
<script setup lang="jsx">
<script setup>
import { UserHead as TinyUserHead } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/user-head/round-user-head.vue
View File

@ -2,7 +2,7 @@
<tiny-user-head type="icon" round></tiny-user-head>
</template>
<script lang="jsx">
<script>
import { UserHead } from '@opentiny/vue'
export default {

10
examples/sites/demos/pc/app/user/allow-copy-composition-api.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<tiny-user v-model="user" auto-close allow-copy></tiny-user>
</template>
<script setup>
import { ref } from 'vue'
import { User as TinyUser } from '@opentiny/vue'
const user = ref('702973890055088')
</script>

18
examples/sites/demos/pc/app/user/allow-copy.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<tiny-user v-model="user" auto-close allow-copy></tiny-user>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user: '702973890055088'
}
}
}
</script>

2
examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
View File

@ -2,7 +2,7 @@
<tiny-user v-model="user"></tiny-user>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import { User as TinyUser } from '@opentiny/vue'

26
examples/sites/demos/pc/app/user/batch-composition-api.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
</template>
<script setup>
import { ref } from 'vue'
import { User as TinyUser } from '@opentiny/vue'
const user1 = ref('702973890055088')
const user2 = ref('421000103624002')
const user3 = ref('421000103624003')
const user4 = ref('421000103624004')
const user5 = ref('421000103624005')
const user6 = ref('421000103624006')
const user7 = ref('421000103624007')
const user8 = ref('421000103624008')
const user9 = ref('421000103624009')
</script>

36
examples/sites/demos/pc/app/user/batch.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div>
<tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
<tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
</div>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user1: '702973890055088',
user2: '421000103624002',
user3: '421000103624003',
user4: '421000103624004',
user5: '421000103624005',
user6: '421000103624006',
user7: '421000103624007',
user8: '421000103624008',
user9: '421000103624009'
}
}
}
</script>

10
examples/sites/demos/pc/app/user/display-only-composition-api.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
</template>
<script setup>
import { ref } from 'vue'
import { User as TinyUser } from '@opentiny/vue'
const user = ref('702973890055088')
</script>

18
examples/sites/demos/pc/app/user/display-only.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user: '702973890055088'
}
}
}
</script>

18
examples/sites/demos/pc/app/user/event-change-composition-api.vue
View File

@ -1,14 +1,26 @@
<template>
<tiny-user v-model="user" multiple @change="change"></tiny-user>
<tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import { User as TinyUser, Modal } from '@opentiny/vue'
const user = ref('441047913162396,702973890055088,421000103624183')
function change(val) {
const change = (val) => {
Modal.message({ message: `${val}`, status: 'info' })
}
const handleFocus = () => {
Modal.message({
message: '组件聚焦'
})
}
const handleBlur = () => {
Modal.message({
message: '组件失焦'
})
}
</script>

14
examples/sites/demos/pc/app/user/event-change.vue
View File

@ -1,8 +1,8 @@
<template>
<tiny-user v-model="user" multiple @change="change"></tiny-user>
<tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
</template>
<script lang="jsx">
<script>
import { User, Modal } from '@opentiny/vue'
export default {
@ -17,6 +17,16 @@ export default {
methods: {
change(val) {
Modal.message({ message: `${val}`, status: 'info' })
},
handleFocus() {
Modal.message({
message: '组件聚焦'
})
},
handleBlur() {
Modal.message({
message: '组件失焦'
})
}
}
}

13
examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div>
<tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
{{ user }}
</div>
</template>
<script setup>
import { ref } from 'vue'
import { User as TinyUser } from '@opentiny/vue'
const user = ref('702973890055088,421000103624002,421000103624003')
</script>

21
examples/sites/demos/pc/app/user/hidden-tips-disable.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
<tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
{{ user }}
</div>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user: '702973890055088,421000103624002,421000103624003'
}
}
}
</script>

10
examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<tiny-user v-model="user" multiple hide-selected></tiny-user>
</template>
<script setup>
import { ref } from 'vue'
import { User as TinyUser } from '@opentiny/vue'
const user = ref('702973890055088')
</script>

18
examples/sites/demos/pc/app/user/hide-selected.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<tiny-user v-model="user" multiple hide-selected></tiny-user>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user: '702973890055088'
}
}
}
</script>

18
examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<tiny-user v-model="user" style="width: 400px" multiple hover-expand></tiny-user>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user: '702973890055088,421000103624002,421000103624003'
}
}
}
</script>

18
examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<tiny-user v-model="user" style="width: 400px" multiple hover-expand></tiny-user>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user: '702973890055088,421000103624002,421000103624003'
}
}
}
</script>

10
examples/sites/demos/pc/app/user/nodata-text-composition-api.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
</template>
<script setup>
import { ref } from 'vue'
import { User as TinyUser } from '@opentiny/vue'
const user = ref('702973890055088')
</script>

18
examples/sites/demos/pc/app/user/nodata-text.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
</template>
<script>
import { User } from '@opentiny/vue'
export default {
components: {
TinyUser: User
},
data() {
return {
user: '702973890055088'
}
}
}
</script>

74
examples/sites/demos/pc/app/user/webdoc/user.js
View File

@ -32,9 +32,38 @@ export default {
},
'codeFiles': ['multiple-users-tag.vue']
},
{
'demoId': 'hide-selected',
'name': { 'zh-CN': '隐藏已选择用户', 'en-US': '' },
'desc': {
'zh-CN':
'<p>设置 <code>hide-selected</code> 属性为 <code>true</code>，过滤搜索结果，已选择的人员不出现在搜索列表中。默认为 <code>false</code>，表示不过滤。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['hide-selected.vue']
},
{
'demoId': 'multiple-users-hover-expand',
'name': { 'zh-CN': '折叠 Tag， hover 展开', 'en-US': 'Collapse Tag' },
'desc': {
'zh-CN':
'<p>多选时通过设置 <code>hover-expand</code> 为 true ，默认折叠 tag, hover 时展示所有 tag。tag 超出隐藏并展示 tooltip。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['multiple-users-hover-expand.vue']
},
{
'demoId': 'allow-copy',
'name': { 'zh-CN': '单用户场景支持复制', 'en-US': '' },
'desc': {
'zh-CN': '<p>通过 <code>allow-copy</code> 设置输入框账号可通过鼠标选中，然后按 Ctrl + C 或右键进行复制。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['allow-copy.vue']
},
{
'demoId': 'tag-copy',
'name': { 'zh-CN': 'user选择器选项可复制', 'en-US': 'User selector options can be copied' },
'name': { 'zh-CN': '多用户场景支持复制', 'en-US': 'User selector options can be copied' },
'desc': {
'zh-CN':
'<p>通过 <code>tag-selectable</code> 输入框中已选择的选项可通过鼠标选择，然后按 Ctrl + C 或右键进行复制。</p>\n',
@ -45,9 +74,10 @@ export default {
},
{
'demoId': 'tag-copy-all',
'name': { 'zh-CN': 'user选择器选项可复制', 'en-US': 'User selector options can be copied' },
'name': { 'zh-CN': 'user选择器选项可一键复制', 'en-US': 'User selector options can be copied' },
'desc': {
'zh-CN': '<p>设置 <code>copyable</code> 属性后，可以复制所有的 <code>tag</code> 文本内容以逗号分隔</p>\n',
'zh-CN':
'<p>设置 <code>copyable</code> 属性后，可以点击复制按钮复制所有的 <code>tag</code> 文本内容以逗号分隔</p>\n',
'en-US':
'<p>After the <code>copyable</code> attribute is set, all <code>tag</code> text contents can be copied and separated by commas.</p>\n'
},
@ -162,6 +192,15 @@ export default {
},
'codeFiles': ['user-options.vue']
},
{
'demoId': 'no-data-text',
'name': { 'zh-CN': '自定义选自定义空数据文本项文本', 'en-US': '' },
'desc': {
'zh-CN': '<p>通过 <code>no-data-text</code> 设置未查询到数据时的空数据提示。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['no-data-text.vue']
},
{
'demoId': 'custom-service',
'name': { 'zh-CN': '自定义服务', 'en-US': 'Custom Service' },
@ -191,6 +230,35 @@ export default {
'<p>You can use the <code>size</code> attribute to specify the size of the text box, including medium, small, and mini. </p>\n'
},
'codeFiles': ['user-select-size.vue']
},
{
'demoId': 'hidden-tips-disable',
'name': { 'zh-CN': '禁用多选不展示用户信息', 'en-US': '' },
'desc': {
'zh-CN':
'<p>设置 <code>show-tips</code> 属性可展示用户信息，默认展示。</p>\n<p>设置 <code>max-width</code> 属性可设置 tips 展示信息最大宽度，默认`200`。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['hidden-tips-disable.vue']
},
{
'demoId': 'batch',
'name': { 'zh-CN': '合并请求用户信息', 'en-US': '' },
'desc': {
'zh-CN':
'<p>在进行批量发起用户信息查询时，例如同页面使用了多处 user 组件，通过配置 <code>batch</code> 为 <code>true</code> 将用户信息查询进行合并（组件内部会进行请求合并）。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['batch.vue']
},
{
'demoId': 'display-only',
'name': { 'zh-CN': '只读', 'en-US': '' },
'desc': {
'zh-CN': '<p>通过 <code>display-only</code> 属性设置只读态。</p>\n',
'en-US': '<p></p>\n'
},
'codeFiles': ['display-only.vue']
}
],
apis: [

22
examples/sites/demos/saas/menus.js Normal file
View File

@ -0,0 +1,22 @@
// 合并mobile-first和pc的菜单，作为saas官网的菜单
import { docMenus, cmpMenus as pcCmpMenus } from '../pc/menus'
import { cmpMenus as mfCmpMenus } from '../mobile-first/menus'
// mobile-first上所有分类，pc上都有，因此可以用pc端menu分类进行合并
const cmpMenus = pcCmpMenus.map((pcMenusitem) => {
const mfMenusItem = mfCmpMenus.find((i) => i.key === pcMenusitem.key)
pcMenusitem.children = pcMenusitem.children.map((i) => ({ ...i, mode: ['saas'] }))
if (mfMenusItem?.children) {
mfMenusItem.children.forEach((mfMenusChild) => {
const matchChild = pcMenusitem.children.find((pcMenusChild) => pcMenusChild.key === mfMenusChild.key)
if (matchChild) {
matchChild.mode.push('mobile-first')
} else {
pcMenusitem.children.push({ ...mfMenusChild, mode: ['mobile-first'] })
}
})
}
return pcMenusitem
})
export { docMenus, cmpMenus }

2
examples/sites/env/.env vendored
View File

@ -5,4 +5,4 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='pc'
VITE_APP_BUILD_BASE_URL='/'
VITE_PLAYGROUND_URL=/playground.html

1
examples/sites/env/.env.inneralpha vendored
View File

@ -5,3 +5,4 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='pc'
VITE_APP_BUILD_BASE_URL=https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tiny-vue-web-doc/${staticReleaseVersion}/
VITE_PLAYGROUND_URL=/vue-playground

1
examples/sites/env/.env.innerprod vendored
View File

@ -5,3 +5,4 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='pc'
VITE_APP_BUILD_BASE_URL=https://res.hc-cdn.com/tiny-vue-web-doc/${staticReleaseVersion}/
VITE_PLAYGROUND_URL=/vue-playground

1
examples/sites/env/.env.innersaas vendored
View File

@ -5,3 +5,4 @@ VITE_TINY_THEME='saas'
# 官网应用类型：pc / mobile / mobile-first
VITE_APP_MODE='pc'
VITE_APP_BUILD_BASE_URL=https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tiny-vue-saas/${staticReleaseVersion}/
VITE_PLAYGROUND_URL=/vue-playground

1
examples/sites/env/.env.mobile vendored
View File

@ -5,3 +5,4 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='mobile'
VITE_APP_BUILD_BASE_URL='/'
VITE_PLAYGROUND_URL=/playground.html

1
examples/sites/env/.env.mobilealpha vendored
View File

@ -5,3 +5,4 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='mobile'
VITE_APP_BUILD_BASE_URL=https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tiny-vue-web-doc/${staticReleaseVersion}/
VITE_PLAYGROUND_URL=/vue-playground

1
examples/sites/env/.env.mobileprod vendored
View File

@ -5,3 +5,4 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='mobile'
VITE_APP_BUILD_BASE_URL=//res.hc-cdn.com/tiny-vue-mobile-doc/
VITE_PLAYGROUND_URL=/vue-playground

3
examples/sites/env/.env.open vendored
View File

@ -4,4 +4,5 @@ VITE_BUILD_TARGET='open'
# 官网应用类型：pc / mobile / mobile-first
VITE_APP_MODE='pc'
VITE_APP_BUILD_BASE_URL=https://res.hc-cdn.com/tiny-vue-web-doc/${staticReleaseVersion}/
VITE_APP_BUILD_BASE_URL=https://res.hc-cdn.com/tiny-vue-web-doc/${staticReleaseVersion}/
VITE_PLAYGROUND_URL=/vue-playground

3
examples/sites/env/.env.opendev vendored
View File

@ -4,4 +4,5 @@ VITE_BUILD_TARGET='open'
# 官网应用类型：pc / mobile / mobile-first
VITE_APP_MODE='pc'
VITE_APP_BUILD_BASE_URL='/'
VITE_APP_BUILD_BASE_URL='/'
VITE_PLAYGROUND_URL=/playground.html

1
examples/sites/env/.env.saas vendored
View File

@ -6,3 +6,4 @@ VITE_TINY_THEME='saas'
VITE_APP_MODE='pc'
VITE_APP_BUILD_BASE_URL='/'
VITE_PLAYGROUND_URL=/playground.html

4
examples/sites/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-docs",
"version": "2.1.13",
"version": "2.1.17",
"scripts": {
"start": "vite",
"start:saas": "vite --mode saas",
@ -78,4 +78,4 @@
"vite-plugin-dynamic-import": "1.5.0",
"vue-tsc": "^1.8.5"
}
}
}

73
examples/sites/playground/App.vue
View File

@ -17,17 +17,40 @@ const versions = ['3.10.0', '3.9.1', '3.8.4']
const latestVersion = versions[0]
const cdnHost = 'https://unpkg.com'
const searchObj = new URLSearchParams(location.search)
const tinyMode = searchObj.get('mode')
const tinyTheme = tinyMode === 'saas' ? 'aurora' : searchObj.get('theme')
const createImportMap = (version) => {
const imports = {
'@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
'@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
'@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
'@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`,
'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
}
if (['aurora', 'smb'].includes(tinyTheme)) {
imports[`@opentiny/vue-design-${tinyTheme}`] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}@${version}/index.js`
}
return {
imports: {
'@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
'@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
'@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
'@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`,
'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
}
imports
}
}
const getTinyTheme = (version) => {
let theme = tinyMode === 'saas' ? 'saas' : tinyTheme
if (!['smb', 'default', 'aurora', 'saas'].includes(theme)) {
theme = 'default'
}
const tinyThemeMap = {
default: `${cdnHost}/@opentiny/vue-theme@${version}/index.css`,
smb: `${cdnHost}/@opentiny/vue-theme@${version}/index.css`,
aurora: `${cdnHost}/@opentiny/vue-theme@${version}/index.css`,
saas: `${cdnHost}/@opentiny/vue-theme-saas@${version}/index.css`
}
return tinyThemeMap[theme]
}
// 如果hash有效，它格式为： 3.8.4|eNqIVV9p.............
const hash = location.hash.slice(1)
const shareData = hash.split('|')
@ -59,9 +82,21 @@ const state = reactive({
],
// 版本切换
versions: versions.map((item) => ({ value: item })),
selectVersion: shareData.length === 2 ? shareData[0] : latestVersion
selectVersion: shareData.length === 2 ? shareData[0] : latestVersion,
previewOptions: {}
})
function setTinyDesign() {
// 目前只有aurora和smb有design包
if (['aurora', 'smb'].includes(tinyTheme)) {
state.previewOptions.customCode = {
importCode: `import designConfig from '@opentiny/vue-design-${tinyTheme}';
import { design } from '@opentiny/vue-common';`,
useCode: `app.provide(design.configKey, designConfig)`
}
}
}
function versionChange(version) {
const importMap = createImportMap(version)
store.state.files['import-map.json'] = new File('', JSON.stringify(importMap))
@ -73,7 +108,7 @@ function versionChange(version) {
const link = iframeWin.document.createElement('link')
link.id = 'tiny-theme'
link.rel = 'stylesheet'
link.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
link.href = getTinyTheme(version)
iframeWin.document.head.append(link)
}, 300)
}
@ -82,9 +117,9 @@ function getDemoName(name, apiMode) {
return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`)
}
const getDemoCode = async ({ cmpId, fileName, apiMode }) => {
const getDemoCode = async ({ cmpId, fileName, apiMode, mode }) => {
const demoName = getDemoName(`${getWebdocPath(cmpId)}/${fileName}`, apiMode)
const path = `${staticDemoPath}/${demoName}`
const path = tinyMode === 'mobile-first' ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`
const code = await fetchDemosFile(path)
.then((code) => {
return code
@ -96,8 +131,8 @@ const getDemoCode = async ({ cmpId, fileName, apiMode }) => {
return code
}
const loadFileCode = async ({ cmpId, fileName, apiMode }) => {
const code = await getDemoCode({ cmpId, fileName, apiMode })
const loadFileCode = async ({ cmpId, fileName, apiMode, mode }) => {
const code = await getDemoCode({ cmpId, fileName, apiMode, mode })
store.state.mainFile = fileName
store.state.activeFile = fileName
store.addFile(new File(fileName, code, false))
@ -105,6 +140,7 @@ const loadFileCode = async ({ cmpId, fileName, apiMode }) => {
}
onMounted(() => {
setTinyDesign()
// 初始加载,有分享则加载分享，否则加载默认版本的默认文件
if (shareData.length === 2) {
const demoFile = Object.values(store.state.files).find(
@ -119,19 +155,24 @@ onMounted(() => {
store.state.activeFile = demoFile
versionChange(shareData[0])
} else {
const searchObj = new URLSearchParams(location.search)
const fileName = searchObj.get('fileName')
const cmpId = searchObj.get('cmpId')
const apiMode = searchObj.get('apiMode')
const mode = searchObj.get('mode')
if (fileName && cmpId && apiMode) {
loadFileCode({ cmpId, fileName, apiMode })
loadFileCode({ cmpId, fileName, apiMode, mode })
}
}
})
// 分享功能
function share() {
const hash = store.serialize()
const shareUrl = location.origin + '/tiny-vue/playground#' + state.selectVersion + '|' + hash
const shareUrl =
location.origin +
`${import.meta.env.VITE_PLAYGROUND_URL}?mode=${tinyMode}&theme=${tinyTheme}#` +
state.selectVersion +
'|' +
hash
navigator.clipboard.writeText(shareUrl)
Notify({

3
examples/sites/playground/main.js
View File

@ -1,4 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
const app = createApp(App)
app.mount('#app')

2
examples/sites/src/main.js
View File

@ -55,6 +55,8 @@ if (notMatchLang) {
let app = createApp(App)
app.config.performance = true
// 注入全局的saas主题变量
app.config.globalProperties.tiny_theme = { value: import.meta.env.VITE_TINY_THEME }
if (import.meta.env.VITE_TINY_THEME === 'saas') {
import('./tailwind.css')

8
examples/sites/src/menus.jsx
View File

@ -1,4 +1,4 @@
import { docMenus, cmpMenus } from '@demos/menus.js'
import { docMenus, cmpMenus } from '@menu/menus.js'
import { appData, $t2 } from './tools'
@ -49,4 +49,8 @@ function genMenus() {
return [...standaloneOptions, ...docOptions, ...cmpOptions]
}
export { genMenus }
const getAllComponents = () =>
cmpMenus.reduce((acc, current) => {
return acc.concat(current.children)
}, [])
export { genMenus, getAllComponents }

6
examples/sites/src/router.js
View File

@ -6,16 +6,10 @@ import { $local } from './tools/storage'
const Components = () => import('@/views/components/components.vue')
const Docs = () => import('@/views/docs/docs.vue')
const Overview = () => import('@/views/overview.vue')
const Playground = () => import('../playground/App.vue')
const context = import.meta.env.VITE_CONTEXT
let routes = [
// 演练场，无中英文
{
path: `${context}playground`,
component: Playground
},
// 组件总览
{
path: `${context}:lang/overview`,

1
examples/sites/src/tools/index.js
View File

@ -3,3 +3,4 @@ export * from './utils.js'
export * from '@/i18n/index'
export * from './appData.js'
export * from './useApiMode.js'
export * from './useTemplateMode.js'

49
examples/sites/src/tools/useTemplateMode.js Normal file
View File

@ -0,0 +1,49 @@
import { reactive, computed, watch } from 'vue'
import { router } from '@/router.js'
import { getAllComponents } from '@/menus.jsx'
import demoConfig from '@demos/config.js'
import { staticDemoPath } from '../views/components/cmpConfig'
const allMenus = getAllComponents()
const templateModeState = reactive({
isSaas: import.meta.env.VITE_TINY_THEME === 'saas',
modeList: [],
mode: null
})
watch(
() => router.currentRoute.value.params.cmpId,
(cmpId) => {
if (!cmpId || !templateModeState.isSaas) {
templateModeState.mode = demoConfig.isMobile ? 'mobile' : 'pc'
templateModeState.modeList = []
} else {
const list = allMenus.find((i) => i.key === router.currentRoute.value.params.cmpId).mode
templateModeState.modeList = list
templateModeState.mode = list[0]
}
}
)
const staticPath = computed(() => {
if (templateModeState.mode === 'mobile-first') {
return '@demos/mobile-first/app'
}
return staticDemoPath
})
const optionsList = computed(() =>
templateModeState.modeList.map((item) => {
if (item === 'mobile-first') {
return { value: item, text: '多端' }
}
return { value: item, text: item }
})
)
export const useTemplateMode = () => {
return { templateModeState, staticPath, optionsList }
}
export default useTemplateMode

66
examples/sites/src/tools/useTheme.js
View File

@ -3,8 +3,8 @@ import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
import { hooks } from '@opentiny/vue-common'
import { Notify } from '@opentiny/vue'
import designSmbConfig from '@opentiny/vue-design-smb';
import designAuroraConfig from '@opentiny/vue-design-aurora';
import designSmbConfig from '@opentiny/vue-design-smb'
import designAuroraConfig from '@opentiny/vue-design-aurora'
import { appData } from './appData'
const CURRENT_THEME_KEY = 'tiny-current-theme'
@ -37,44 +37,44 @@ function showTip() {
isShowTip = true
}
export default function useTheme() {
const theme = new TinyThemeTool()
const lastThemeKey = localStorage.getItem(CURRENT_THEME_KEY)
const currThemeLabel = hooks.ref(lastThemeKey || 'tiny-default-theme')
const designConfig = computed(() => {
return designConfigMap[currThemeLabel.value]
})
const theme = new TinyThemeTool()
const lastThemeKey = localStorage.getItem(CURRENT_THEME_KEY)
const currThemeLabel = hooks.ref(lastThemeKey || 'tiny-default-theme')
const designConfig = computed(() => {
return designConfigMap[currThemeLabel.value]
})
const THEME_MAP = {
'tiny-aurora-theme': tinyAuroraTheme,
'tiny-smb-theme': tinySmbTheme,
'tiny-infinity-theme': tinyInfinityTheme
}
const THEME_MAP = {
'tiny-aurora-theme': tinyAuroraTheme,
'tiny-smb-theme': tinySmbTheme,
'tiny-infinity-theme': tinyInfinityTheme
}
const changeTheme = (themeValue) => {
currThemeLabel.value = themeValue
}
const changeTheme = (themeValue) => {
currThemeLabel.value = themeValue
}
watch(
() => currThemeLabel.value,
(newVal) => {
localStorage.setItem(CURRENT_THEME_KEY, newVal)
theme.changeTheme(THEME_MAP[newVal])
// 若部分主题样式切换不生效，第一次则提示用户需要手动刷新
if (!isShowTip) {
showTip()
}
watch(
() => currThemeLabel.value,
(newVal) => {
localStorage.setItem(CURRENT_THEME_KEY, newVal)
theme.changeTheme(THEME_MAP[newVal])
// 若部分主题样式切换不生效，第一次则提示用户需要手动刷新
if (!isShowTip) {
showTip()
}
)
// 切换上次缓存的主题
if (THEME_MAP[lastThemeKey]) {
theme.changeTheme(THEME_MAP[lastThemeKey])
}
)
// 返回拷贝，防止原始数据被修改
const getThemeData = () => JSON.parse(JSON.stringify(themeData))
// 切换上次缓存的主题
if (THEME_MAP[lastThemeKey]) {
theme.changeTheme(THEME_MAP[lastThemeKey])
}
// 返回拷贝，防止原始数据被修改
const getThemeData = () => JSON.parse(JSON.stringify(themeData))
export default function useTheme() {
return {
getThemeData,
changeTheme,

Some files were not shown because too many files have changed in this diff Show More