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

feat(label): add label mobile (#1098) 

* feat(label): add label mobile

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

* feat(label): add label mobile

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

---------

Signed-off-by: jacknan <zhumaonan@aliyun.com>
This commit is contained in:
jacknan 2023-12-14 16:06:14 +08:00 committed by GitHub
parent 013ac583bf
commit c99c840f2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 1043 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/sites/demos/mobile/app/label/base.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="mobile-label-demo">
<h2>基础文本</h2>
<tiny-label label="基础文本"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
</style>

23
examples/sites/demos/mobile/app/label/bold.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="mobile-label-demo">
<tiny-label label="123456789" bold></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
</style>

34
examples/sites/demos/mobile/app/label/color.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="mobile-label-demo">
<h2>可选颜色值</h2>
<tiny-label label="主要文本色" color="primary"></tiny-label>
<tiny-label label="次要文本色" color="secondary"></tiny-label>
<tiny-label label="辅助文本色" color="placeholder"></tiny-label>
<tiny-label label="禁用文本色" color="disabled"></tiny-label>
<tiny-label label="文本反色" color="inverse"></tiny-label>
<tiny-label label="主题色" color="brand"></tiny-label>
<tiny-label label="链接文本色" color="link"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
.tiny-mobile-label {
margin-right: 20px;
}
</style>

28
examples/sites/demos/mobile/app/label/decimal.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="mobile-label-demo">
<h2>数字文本</h2>
<tiny-label type="number" label="-00数字文本25[[{5512e36431.334厄3000}" :decimal="3"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
.tiny-mobile-label {
margin-right: 20px;
}
</style>

31
examples/sites/demos/mobile/app/label/ellipsis.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="mobile-label-demo">
<h2>不限制显示行数</h2>
<tiny-label :label="text"></tiny-label>
<h2>限制显示行数2</h2>
<tiny-label :label="text" :ellipsis="2"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
},
data() {
return {
text: '12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890'
}
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
</style>

24
examples/sites/demos/mobile/app/label/limit.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="mobile-label-demo">
<h2>是否限制文本数</h2>
<tiny-label :limit="5" label="123456789"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
</style>

30
examples/sites/demos/mobile/app/label/position.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="mobile-label-demo">
<h2>可选位置</h2>
<tiny-label position="left" :wholeline="true" label="靠左展示"></tiny-label>
<tiny-label position="center" :wholeline="true" label="剧中展示"></tiny-label>
<tiny-label position="right" :wholeline="true" label="靠右展示"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
.tiny-mobile-label {
margin-right: 20px;
}
</style>

24
examples/sites/demos/mobile/app/label/required.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="mobile-label-demo">
<h2>是否带*号</h2>
<tiny-label label="123456789" is-required></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
</style>

31
examples/sites/demos/mobile/app/label/size.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="mobile-label-demo">
<h2>可选大小</h2>
<tiny-label label="large" size="large"></tiny-label>
<tiny-label label="normal" size="normal"></tiny-label>
<tiny-label label="small" size="small"></tiny-label>
<tiny-label label="mini" size="mini"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
.tiny-mobile-label {
margin-right: 20px;
}
</style>

30
examples/sites/demos/mobile/app/label/type.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="mobile-label-demo">
<h2>基础文本</h2>
<tiny-label type="base" label="基础文本"></tiny-label>
<h2>数字文本</h2>
<tiny-label type="number" label="-00数字文本25[[{5512e36431.334厄3000}"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
.tiny-mobile-label {
margin-right: 20px;
}
</style>

11
examples/sites/demos/mobile/app/label/webdoc/label.cn.md Normal file
View File

@ -0,0 +1,11 @@
---
title: Label 文本框
---
# Label 文本框
<div>
Label 文本框
</div>

11
examples/sites/demos/mobile/app/label/webdoc/label.en.md Normal file
View File

@ -0,0 +1,11 @@
---
title: Label 文本框
---
# Label 文本框
<div>
Label
</div>

247
examples/sites/demos/mobile/app/label/webdoc/label.js Normal file
View File

@ -0,0 +1,247 @@
export default {
column: '2',
owner: '',
demos: [
{
demoId: 'base',
name: {
'zh-CN': '基础用法',
'en-US': 'base'
},
desc: {
'zh-CN': '<p>基础用法</p>',
'en-US': '<p>base</p>'
},
codeFiles: ['base.vue']
},
{
demoId: 'type',
name: {
'zh-CN': '类型',
'en-US': 'type'
},
desc: {
'zh-CN': '<p>类型</p>',
'en-US': '<p>type</p>'
},
codeFiles: ['type.vue']
},
{
demoId: 'decimal',
name: {
'zh-CN': '小数点位数',
'en-US': 'decimal'
},
desc: {
'zh-CN': '<p>小数点位数</p>',
'en-US': '<p>decimal</p>'
},
codeFiles: ['decimal.vue']
},
{
demoId: 'bold',
name: {
'zh-CN': '加粗',
'en-US': 'bold'
},
desc: {
'zh-CN': '<p>加粗</p>',
'en-US': '<p>bold</p>'
},
codeFiles: ['bold.vue']
},
{
demoId: 'color',
name: {
'zh-CN': '不同颜色',
'en-US': 'different color'
},
desc: {
'zh-CN': '<p>不同颜色</p>',
'en-US': '<p>different color</p>'
},
codeFiles: ['color.vue']
},
{
demoId: 'size',
name: {
'zh-CN': '不同尺寸',
'en-US': 'different size'
},
desc: {
'zh-CN': '<p>不同尺寸</p>',
'en-US': '<p>different size</p>'
},
codeFiles: ['size.vue']
},
{
demoId: 'wholeline',
name: {
'zh-CN': '整行展示',
'en-US': 'whole line'
},
desc: {
'zh-CN': '<p>整行展示</p>',
'en-US': '<p>whole line</p>'
},
codeFiles: ['wholeline.vue']
},
{
demoId: 'limit',
name: {
'zh-CN': '限制文本字数',
'en-US': 'limit text length'
},
desc: {
'zh-CN': '<p>限制文本字数</p>',
'en-US': '<p>limit text length</p>'
},
codeFiles: ['limit.vue']
},
{
demoId: 'position',
name: {
'zh-CN': '整行显示文字位置',
'en-US': 'text position'
},
desc: {
'zh-CN': '<p>整行显示时，文字位置</p>',
'en-US': '<p>text position</p>'
},
codeFiles: ['position.vue']
},
{
demoId: 'ellipsis',
name: {
'zh-CN': '最大显示行数',
'en-US': 'max line'
},
desc: {
'zh-CN': '<p>最大显示行数</p>',
'en-US': '<p>max line</p>'
},
codeFiles: ['ellipsis.vue']
},
{
demoId: 'required',
name: {
'zh-CN': '是否添加*号',
'en-US': 'required'
},
desc: {
'zh-CN': '<p>是否添加*号</p>',
'en-US': '<p>required</p>'
},
codeFiles: ['required.vue']
}
],
apis: [
{
name: 'Label', // 组件名称展示使用
type: 'component', // API 类型
properties: [
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '<p>文本</p>',
'en-US': 'text'
},
demoId: 'base'
},
{
name: 'type',
type: 'string',
defaultValue: 'base',
desc: {
'zh-CN': '<p>类型 \n base, number</p>',
'en-US': 'type'
},
demoId: 'type'
},
{
name: ' color',
type: 'string',
defaultValue: 'primary',
desc: {
'zh-CN': '<p>文本颜色:primary,secondary,placeholder,disabled,inverse,brand,link</p>',
'en-US': 'text color'
},
demoId: 'color'
},
{
name: 'size',
type: 'string',
defaultValue: 'normal',
desc: {
'zh-CN': '<p>文本大小:large,normal,small,mini</p>',
'en-US': 'text size'
},
demoId: 'size'
},
{
name: 'wholeline',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否整行显示</p>',
'en-US': 'whole line display'
},
demoId: 'wholeline'
},
{
name: 'position',
type: 'string',
defaultValue: 'left',
desc: {
'zh-CN': '<p>整行显示时的位置:left,center,right</p>',
'en-US': 'position of whole line dispaly'
},
demoId: 'position'
},
{
name: 'ellipsis',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '<p>支持超出省略号显示的行数</p>',
'en-US': 'ellipsis'
},
demoId: 'ellipsis'
},
{
name: 'decimal',
type: 'number',
defaultValue: '2',
desc: {
'zh-CN': '<p>小数点的位数</p>',
'en-US': 'decimal'
},
demoId: 'decimal'
},
{
name: 'limit',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '<p>限制文本的字数</p>',
'en-US': 'text limit'
},
demoId: 'limit'
},
{
name: 'is-required',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否添加*号</p>',
'en-US': 'is required'
},
demoId: 'required'
}
],
slots: []
}
]
}

24
examples/sites/demos/mobile/app/label/wholeline.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="mobile-label-demo">
<h2>是否整行</h2>
<tiny-label :wholeline="true" label="整行展示"></tiny-label>
</div>
</template>
<script>
import { Label } from '@opentiny/vue'
export default {
components: {
TinyLabel: Label
}
}
</script>
<style scoped>
.mobile-label-demo {
height: 100%;
background: #f4f4f4;
overflow-y: auto;
}
</style>

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

@ -79,6 +79,7 @@ export const cmpMenus = [
{ name: 'Slider', nameCn: '滑块', key: 'slider' },
{ name: 'CheckboxGroup', nameCn: '复选框组', key: 'checkboxgroup' },
{ name: 'Input', nameCn: '输入框', key: 'input' },
{ name: 'Label', nameCn: '文本', key: 'label' },
{ name: 'Radio', nameCn: '单选', key: 'radio' },
{ name: 'Search', nameCn: '搜索框', key: 'search' },
{ name: 'Switch', nameCn: '开关', key: 'switch' },

21
packages/modules.json
View File

@ -394,13 +394,13 @@
"mobile"
]
},
"CascaderSelectMobileFirst": {
"path": "vue/src/cascader-select/src/mobile-first.vue",
"CascaderSelectMobile": {
"path": "vue/src/cascader-select/src/mobile.vue",
"type": "template",
"exclude": false
},
"CascaderSelectMobile": {
"path": "vue/src/cascader-select/src/mobile.vue",
"CascaderSelectMobileFirst": {
"path": "vue/src/cascader-select/src/mobile-first.vue",
"type": "template",
"exclude": false
},
@ -1451,6 +1451,19 @@
"type": "template",
"exclude": false
},
"Label": {
"path": "vue/src/label/index.ts",
"type": "component",
"exclude": false,
"mode": [
"mobile"
]
},
"LabelMobile": {
"path": "vue/src/label/src/mobile.vue",
"type": "template",
"exclude": false
},
"Layout": {
"path": "vue/src/layout/index.ts",
"type": "component",

78
packages/renderless/src/label/index.ts Normal file
View File

@ -0,0 +1,78 @@
/**
* 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 type { ILabelProps } from 'types/label.type'
const prefix = 'tiny-mobile-label-'
function numFormat(num, decimal) {
let str = ''
str = (Math.round(num * 100) / 100)
.toFixed(decimal)
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
return $1 + ','
})
return str
}
function handleNumberLabel(label, decimal) {
let val = label
// 去除-和.以外的非数字字符
const reg1 = /[^(\-|\+)?\d+(\.\d+)?$]/g
// 去掉前缀多余的0
const reg2 = /0*([1-9]\d*|0\.\d+)/
val = val.replace(reg1, '').replace(reg2, '$1')
let arr = val.split('.')
let numStr = ''
for (let i = 0; i < arr.length; i++) {
if (i === arr.length - 1 && arr.length > 1) {
numStr += '.'
}
numStr += arr[i]
}
numStr = numFormat(numStr, decimal)
numStr = numStr.replace(/\d+/, (s) => {
return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
})
return numStr
}
export const handleClick =
({ emit, state }) =>
() => {
emit('click', state.label)
}
export const computeLabel = (props: ILabelProps) => () => {
let label = props.label
if (props.type === 'number') {
label = handleNumberLabel(props.label, props.decimal)
}
if (props.limit !== 0 && label.length > props.limit) {
return label.slice(0, props.limit)
}
return label
}
export const computeLabelClass = (props: ILabelProps) => () => {
return [
`${prefix}${props.size}`,
`${prefix}${props.color}`,
`${prefix}${props.position}`,
props.wholeline || props.ellipsis === 1 || props.ellipsis === 2 || props.ellipsis === 3 ? `${prefix}wholeline` : '',
props.ellipsis > 0 && props.ellipsis < 4 ? `${prefix}ellipsis${props.ellipsis}` : '',
props.bold ? `${prefix}bold` : ''
]
}

48
packages/renderless/src/label/vue.ts Normal file
View File

@ -0,0 +1,48 @@
/**
* 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 type {
ILabelState,
ILabelProps,
ILabelRenderlessParamUtils,
ISharedRenderlessParamHooks,
ILabelApi
} from '@/types'
import { handleClick, computeLabel, computeLabelClass } from './index'
export const api = ['state', 'handleClick', 'computeLabel', 'computeLabelStyle', 'computeLabelClass']
export const renderless = (
props: ILabelProps,
{ computed, onBeforeUnmount, reactive, watch, inject }: ISharedRenderlessParamHooks,
{ emit, parent }: ILabelRenderlessParamUtils
) => {
parent.tinyForm = parent.tinyForm || inject('form', null)
const state: ILabelState = reactive({
label: computed(() => api.computeLabel()),
type: props.type,
color: props.color,
size: props.size,
labelClass: computed(() => api.computeLabelClass()),
isRequired: props.isRequired
})
const api: ILabelApi = {
state,
handleClick: handleClick({ emit, state }),
computeLabel: computeLabel(props),
// computeLabelStyle: computeLabelStyle(props, state),
computeLabelClass: computeLabelClass(props)
}
return api
}

1
packages/renderless/types/index.ts
View File

@ -205,3 +205,4 @@ export * from './year-range.type'
export * from './year-table.type'
export * from './color-picker.type'
export * from './color-select-panel.type'
export * from './label.type'

30
packages/renderless/types/label.type.ts Normal file
View File

@ -0,0 +1,30 @@
import type { ComputedRef, ExtractPropTypes } from 'vue'
import type { labelProps } from '@/label/src'
import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
export type ILabelProps = ExtractPropTypes<typeof labelProps>
export interface ILabelState {
label: ComputedRef<string>
type: ComputedRef<string>
color: ComputedRef<string>
size: ComputedRef<string>
labelStyle: ComputedRef<object>
labelClass: ComputedRef<string>
isRequired: ComputedRef<boolean>
}
export interface ILabelApi {
state: ILabelState
handleClick: (event: MouseEvent) => void
computeLabel: () => string
computeLabelStyle: () => object
computeLabelClass: () => []
}
export type ILabelRenderlessParams = ISharedRenderlessFunctionParams<never> & {
api: ILabelApi
state: ILabelState
props: ILabelProps
}
export type ILabelRenderlessParamUtils = ISharedRenderlessParamUtils<never>

103
packages/theme-mobile/src/label/index.less Normal file
View File

@ -0,0 +1,103 @@
/**
* 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';
@label-prefix-cls: ~'@{css-prefix}mobile-label';
.@{label-prefix-cls} {
display: inline-block;
word-break: break-word;
hyphens: auto;
white-space: normal;
&-isRequired {
color: var(--ti-mobile-label-text-color-required);
margin-left: var(--ti-mobile-label-required-padding-left);
}
&-wholeline {
width: 100%;
}
&-ellipsis2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
&-bold {
font-weight: bold;
}
&-left {
text-align: left;
}
&-center {
text-align: center;
}
&-right {
text-align: right;
}
&-large {
font-size: var(--ti-mobile-label-text-size-large);
line-height: var(--ti-mobile-label-text-size-large);
}
&-normal {
font-size: var(--ti-mobile-label-text-size-normal);
line-height: var(--ti-mobile-label-text-size-normal);
}
&-small {
font-size: var(--ti-mobile-label-text-size-small);
line-height: var(--ti-mobile-label-text-size-small);
}
&-mini {
font-size: var(--ti-mobile-label-text-size-mini);
line-height: var(--ti-mobile-label-text-size-mini);
}
&-primary {
color: var(--ti-mobile-label-text-color-primary);
}
&-secondary {
color: var(--ti-mobile-label-text-color-secondary);
}
&-placeholder {
color: var(--ti-mobile-label-text-color-placeholder);
}
&-disabled {
color: var(--ti-mobile-label-text-color-disabled);
}
&-inverse {
color: var(--ti-mobile-label-text-color-inverse);
}
&-brand {
color: var(--ti-mobile-label-text-color-brand);
}
&-link {
color: var(--ti-mobile-label-text-color-link);
}
}

28
packages/theme-mobile/src/label/vars.less Normal file
View File

@ -0,0 +1,28 @@
:root {
// 主要文本色、灰色标签文本色
--ti-mobile-label-text-color-primary: var(--ti-mobile-color-text-primary, #191919);
// 次要文本色
--ti-mobile-label-text-color-secondary: var(--ti-mobile-color-text-secondary, #595959);
// 占位符、辅助文本色
--ti-mobile-label-text-color-placeholder: var(--ti-mobile-color-text-placeholder, #808080);
// 禁用文本色
--ti-mobile-label-text-color-disabled: var(--ti-mobile-color-text-disabled, #c2c2c2);
// 文本反色
--ti-mobile-label-text-color-inverse: var(--ti-mobile-color-text-inverse, #fff);
// 主题色
--ti-mobile-label-text-color-brand: var(--ti-mobile-color-text-brand, #595959);
// 文本链接、文本按钮色
--ti-mobile-label-text-color-link: var(--ti-mobile-color-text-link, #1476ff);
// 文本*号色
--ti-mobile-label-text-color-required: var(--ti-mobile-color-error, #f23030);
// 文字尺寸-大
--ti-mobile-label-text-size-large: var(--ti-mobile-font-size-xl, 18px);
// 文字尺寸-常规
--ti-mobile-label-text-size-normal: var(--ti-mobile-font-size-l, 16px);
// 文字尺寸-小
--ti-mobile-label-text-size-small: var(--ti-mobile-font-size-m, 14px);
// 文字尺寸-极小
--ti-mobile-label-text-size-mini: var(--ti-mobile-font-size-s, 12px);
// *号距离左边距离
--ti-mobile-label-required-padding-left: var(--ti-mobile-space-1x, 4px);
}

1
packages/vue/package.json
View File

@ -146,6 +146,7 @@
"@opentiny/vue-index-bar-anchor": "workspace:~",
"@opentiny/vue-input": "workspace:~",
"@opentiny/vue-ip-address": "workspace:~",
"@opentiny/vue-label": "workspace:~",
"@opentiny/vue-layout": "workspace:~",
"@opentiny/vue-link": "workspace:~",
"@opentiny/vue-link-menu": "workspace:~",

30
packages/vue/src/label/index.ts Normal file
View File

@ -0,0 +1,30 @@
/**
* 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 Label from './src/index'
import '@opentiny/vue-theme-mobile/label/index.less'
import { version } from './package.json'
/* istanbul ignore next */
Label.install = function (Vue) {
Vue.component(Label.name, Label)
}
Label.version = version
/* istanbul ignore next */
if (process.env.BUILD_TARGET === 'runtime') {
if (typeof window !== 'undefined' && window.Vue) {
Label.install(window.Vue)
}
}
export default Label

22
packages/vue/src/label/package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "@opentiny/vue-link",
"version": "3.7.0",
"description": "",
"main": "lib/index.js",
"module": "index.ts",
"sideEffects": false,
"type": "module",
"devDependencies": {
"@opentiny-internal/vue-test-utils": "workspace:*",
"vitest": "^0.31.0"
},
"scripts": {
"build": "pnpm -w build:ui $npm_package_name",
"//postversion": "pnpm build"
},
"dependencies": {
"@opentiny/vue-common": "workspace:~",
"@opentiny/vue-renderless": "workspace:~"
},
"license": "MIT"
}

69
packages/vue/src/label/src/index.ts Normal file
View File

@ -0,0 +1,69 @@
/**
* 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 { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
import template from 'virtual-template?mobile'
export const labelProps = {
...$props,
label: {
type: String,
default: ''
},
color: {
type: String,
default: 'primary'
},
size: {
type: String,
default: 'normal'
},
type: {
type: String,
default: 'base'
},
wholeline: {
type: Boolean,
default: false
},
position: {
type: String,
default: 'left'
},
ellipsis: {
type: Number,
default: 0
},
decimal: {
type: Number,
default: 2
},
limit: {
type: Number,
default: 0
},
isRequired: {
type: Boolean,
default: false
},
bold: {
type: Boolean,
default: false
}
}
export default defineComponent({
name: $prefix + 'Label',
props: labelProps,
setup(props, context) {
return $setup({ props, context, template })
}
})

43
packages/vue/src/label/src/mobile.vue Normal file
View File

@ -0,0 +1,43 @@
<!--
* 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-label', state.labelClass]" :style="state.labelStyle">
<span>{{ state.label }}</span>
<span v-if="state.isRequired" class="tiny-mobile-label-isRequired">*</span>
</div>
</template>
<script lang="ts">
import { renderless, api } from '@opentiny/vue-renderless/label/vue'
import { props, setup, defineComponent } from '@opentiny/vue-common'
export default defineComponent({
props: [
...props,
'label',
'color',
'size',
'type',
'wholeline',
'position',
'ellipsis',
'decimal',
'limit',
'isRequired',
'bold'
],
emits: ['click'],
setup(props, context) {
return setup({ props, context, renderless, api })
}
})
</script>