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

feat(tag): add tag-mobile (#976) 

* feat(tag): add tag-mobile

Signed-off-by: jacknan <zhumaonan@aliyun.com>

* feat(tag): remove tsx

Signed-off-by: jacknan <zhumaonan@aliyun.com>

---------

Signed-off-by: jacknan <zhumaonan@aliyun.com>
This commit is contained in:
jacknan 2023-12-14 15:56:53 +08:00 committed by GitHub
parent a1e84ad9c2
commit 74e976e2a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 393 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
examples/sites/demos/mobile/app/tag/basic-usage.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="tiny-tag-demo">
<tiny-tag color="default" text="默认" />
<tiny-tag color="default"> 默认默认默认默认默认默认默认默认</tiny-tag>
</div>
</template>
<script>
import { Tag } from '@opentiny/vue'
export default {
components: {
TinyTag: Tag
}
}
</script>
<style>
.tiny-tag-demo {
padding: 10px;
}
.tiny-mobile-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>

30
examples/sites/demos/mobile/app/tag/different-color.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="tiny-tag-demo">
<tiny-tag color="default" text=""> 默认 </tiny-tag>
<tiny-tag color="red" text="红色" />
<tiny-tag color="blue" text="蓝色"> </tiny-tag>
<tiny-tag color="yellow" text="黄色"> </tiny-tag>
<tiny-tag color="green" text="绿色"> </tiny-tag>
</div>
</template>
<script>
import { Tag } from '@opentiny/vue'
export default {
components: {
TinyTag: Tag
}
}
</script>
<style>
.tiny-tag-demo {
padding: 10px;
}
.tiny-mobile-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>

26
examples/sites/demos/mobile/app/tag/max-width.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="tiny-tag-demo">
<tiny-tag color="default" max-width="100"> 默认默认默认默认默认默认默认默认 </tiny-tag>
</div>
</template>
<script>
import { Tag } from '@opentiny/vue'
export default {
components: {
TinyTag: Tag
}
}
</script>
<style>
.tiny-tag-demo {
padding: 10px;
}
.tiny-mobile-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>

27
examples/sites/demos/mobile/app/tag/mini.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="tiny-tag-demo">
<tiny-tag color="default"> 默认 </tiny-tag>
<tiny-tag color="default" mini> 小尺寸 </tiny-tag>
</div>
</template>
<script>
import { Tag } from '@opentiny/vue'
export default {
components: {
TinyTag: Tag
}
}
</script>
<style>
.tiny-tag-demo {
padding: 10px;
}
.tiny-mobile-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>

7
examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md Normal file
View File

@ -0,0 +1,7 @@
---
title: Tag 标签
---
# Tag 标签
<div>用于标记事物的属性和维度</div>

7
examples/sites/demos/mobile/app/tag/webdoc/tag.en.md Normal file
View File

@ -0,0 +1,7 @@
---
title: Tag
---
# Tag
<div>Used to mark transaction attributes and dimensions</div>

96
examples/sites/demos/mobile/app/tag/webdoc/tag.js Normal file
View File

@ -0,0 +1,96 @@
export default {
column: '2',
owner: '',
demos: [
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '基本用法',
'en-US': 'Basic Usage'
},
'codeFiles': ['basic-usage.vue']
},
{
'demoId': 'different-color',
'name': { 'zh-CN': '不同颜色', 'en-US': 'Different Color' },
'desc': {
'zh-CN': '不同颜色',
'en-US': 'Different Color'
},
'codeFiles': ['different-color.vue']
},
{
'demoId': 'max-width',
'name': { 'zh-CN': '最大宽度', 'en-US': 'Max Width' },
'desc': {
'zh-CN': '最大宽度',
'en-US': 'Max Width'
},
'codeFiles': ['max-width.vue']
},
{
'demoId': 'mini',
'name': { 'zh-CN': '小尺寸', 'en-US': 'Mini' },
'desc': {
'zh-CN': '小尺寸',
'en-US': 'Mini'
},
'codeFiles': ['mini.vue']
}
],
apis: [
{
'name': 'tag',
'type': 'component',
'props': [
{
'name': 'color',
'type': 'string',
'defaultValue': 'default',
'desc': {
'zh-CN': '文字颜色：default、red、blue、yellow、green',
'en-US': 'text color: default、red、blue、yellow、green'
},
'demoId': 'different-color'
},
{
'name': 'max-width',
'type': 'string | number',
'defaultValue': '',
'desc': { 'zh-CN': '最大宽度', 'en-US': 'max width' },
'demoId': 'max-width'
},
{
'name': 'mini',
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '小尺寸',
'en-US': 'mini'
},
'demoId': 'mini'
},
{
'name': 'text',
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': '文字',
'en-US': 'Text'
},
'demoId': 'basic-usage'
}
],
'slots': [
{
'name': 'default',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '标签内容', 'en-US': 'Label Content' },
'demoId': 'slot-default'
}
]
}
]
}

3
examples/sites/demos/mobile/menus.js
View File

@ -113,7 +113,8 @@ export const cmpMenus = [
{ name: 'Icon', nameCn: '图标', key: 'icon' },
{ name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
{ name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },
{ name: 'UserHead', nameCn: '用户头像', key: 'user-head' }
{ name: 'UserHead', nameCn: '用户头像', key: 'user-head' },
{ name: 'Tag', nameCn: '标签', key: 'tag' }
]
}
]

6
packages/modules.json
View File

@ -2434,6 +2434,7 @@
"exclude": false,
"mode": [
"mobile-first",
"mobile",
"pc"
]
},
@ -2456,6 +2457,11 @@
"type": "template",
"exclude": false
},
"TagMobile": {
"path": "vue/src/tag/src/mobile.vue",
"type": "template",
"exclude": false
},
"TagMobileFirst": {
"path": "vue/src/tag/src/mobile-first.vue",
"type": "template",

6
packages/renderless/src/tag/vue.ts
View File

@ -22,7 +22,11 @@ export const renderless = (
const state: ITagState = reactive({
type: computed(() => props.theme || props.type),
show: true,
selected: false
selected: false,
mini: props.mini,
color: props.color,
text: props.text,
maxWidth: props.maxWidth
})
const api: ITagApi = {

4
packages/renderless/types/tag.type.ts
View File

@ -6,6 +6,10 @@ export interface ITagState {
type: string | undefined
show: boolean
selected: boolean
text: string
color: string
mini: boolean
maxWidth: string | number
}
export interface ITagApi {

59
packages/theme-mobile/src/tag/index.less Normal file
View File

@ -0,0 +1,59 @@
/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
@import '../custom.less';
@import './vars.less';
@tag-prefix-cls: ~'@{css-prefix}mobile-tag';
.@{tag-prefix-cls} {
.component-css-vars-tag();
line-height: var(--ti-mobile-tag-height-default);
padding: 0 var(--ti-mobile-tag-padding-default);
text-align: center;
font-size: var(--ti-mobile-tag-font-size-default);
color: var(--ti-mobile-tag-color-default);
background-color: var(--ti-mobile-tag-bg-color-default);
display: inline-block;
border-radius: var(--ti-mobile-tag-border-radius-default);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&-mini {
line-height: var(--ti-mobile-tag-height-mini);
padding: 0 var(--ti-mobile-tag-padding-mini);
font-size: var(--ti-mobile-tag-font-size-mini);
border-radius: var(--ti-mobile-tag-border-radius-mini);
}
&-red {
color: var(--ti-mobile-tag-color-red);
background-color: var(--ti-mobile-tag-bg-color-red);
}
&-blue {
color: var(--ti-mobile-tag-color-blue);
background-color: var(--ti-mobile-tag-bg-color-blue);
}
&-yellow {
color: var(--ti-mobile-tag-color-yellow);
background-color: var(--ti-mobile-tag-bg-color-yellow);
}
&-green {
color: var(--ti-mobile-tag-color-green);
background-color: var(--ti-mobile-tag-bg-color-green);
}
}

50
packages/theme-mobile/src/tag/vars.less Normal file
View File

@ -0,0 +1,50 @@
/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
.component-css-vars-tag() {
// 默认文字色值
--ti-mobile-tag-color-default: var(--ti-mobile-color-text-primary, #191919);
// 红色文字色值
--ti-mobile-tag-color-red: var(--ti-mobile-color-eror, #f23030);
// 蓝色文字色值
--ti-mobile-tag-color-blue: var(--ti-mobile-color-info, #1476ff);
// 黄色文字色值
--ti-mobile-tag-color-yellow: var(--ti-mobile-color-warning, #d96900);
// 绿色文字色值
--ti-mobile-tag-color-green: var(--ti-mobile-color-success, #029931);
// 默认背景色
--ti-mobile-tag-bg-color-default: var(--ti-mobile-color-bg-disabled, #f0f0f0);
// 红色背景色
--ti-mobile-tag-bg-color-red: var(--ti-mobile-color-error-subtler, #fce3e1);
// 蓝色背景色
--ti-mobile-tag-bg-color-blue: var(--ti-mobile-color-info-subtle, #deecff);
// 黄色背景色
--ti-mobile-tag-bg-color-yellow: var(--ti-mobile-color-warning-subtle, #ffebd1);
// 绿色背景色
--ti-mobile-tag-bg-color-green: var(--ti-mobile-color-success-subtle, #e6f2d5);
// 默认高度
--ti-mobile-tag-height-default: var(--ti-mobile-space-6x, 24px);
// 小尺寸高度
--ti-mobile-tag-height-mini: calc(var(--ti-mobile-space-4x) + 2px);
// 默认字体尺寸
--ti-mobile-tag-font-size-default: var(--ti-mobile-font-size-m, 14px);
// 小尺寸字体尺寸
--ti-mobile-tag-font-size-mini: var(--ti-mobile-font-size-s, 12px);
// 默认间距
--ti-mobile-tag-padding-default: var(--ti-mobile-space-2x, 8px);
// 小尺寸间距
--ti-mobile-tag-padding-mini: var(--ti-mobile-space-1x, 4px);
// 默认圆角尺寸
--ti-mobile-tag-border-radius-default: var(--ti-mobile-border-radius-s, 4px);
// 小尺寸圆角尺寸
--ti-mobile-tag-border-radius-mini: var(--ti-mobile-border-radius-xs, 2px);
}

14
packages/vue/src/tag/src/index.ts
View File

@ -10,7 +10,7 @@
*
*/
import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
import template from 'virtual-template?pc|mobile-first'
import template from 'virtual-template?pc|mobile|mobile-first'
export const tagProps = {
...$props,
@ -34,7 +34,17 @@ export const tagProps = {
validator: (value: string) => Boolean(~['dark', 'light', 'plain'].indexOf(value))
},
beforeDelete: Function,
value: [Number, String]
value: [Number, String],
// mobile
mini: {
type: Boolean,
default: false
},
maxWidth: {
type: [String, Number],
default: null
}
}
export default defineComponent({

35
packages/vue/src/tag/src/mobile.vue Normal file
View File

@ -0,0 +1,35 @@
<!--
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
-->
<template>
<div
:class="['tiny-mobile-tag', 'tiny-mobile-tag-' + state.color, state.mini ? 'tiny-mobile-tag-mini' : null]"
:style="{ maxWidth: state.maxWidth ? `${state.maxWidth}px` : null }"
>
<slot>{{ state.text }}</slot>
</div>
</template>
<script lang="ts">
import { renderless, api } from '@opentiny/vue-renderless/tag/vue'
import { props, setup, h, defineComponent } from '@opentiny/vue-common'
import type { ITagApi } from '@opentiny/vue-renderless/types/tag.type'
import '@opentiny/vue-theme-mobile/tag/index.less'
export default defineComponent({
emits: ['click', 'close'],
props: [...props, 'text', 'color', 'width', 'mini', 'maxWidth'],
setup(props, context) {
return setup({ props, context, renderless, api, h }) as unknown as ITagApi
}
})
</script>