From c99c840f2e29299e4b011b490661512f78870055 Mon Sep 17 00:00:00 2001 From: jacknan Date: Thu, 14 Dec 2023 16:06:14 +0800 Subject: [PATCH] feat(label): add label mobile (#1098) * feat(label): add label mobile Signed-off-by: jacknan * feat(label): add label mobile Signed-off-by: jacknan --------- Signed-off-by: jacknan --- .../sites/demos/mobile/app/label/base.vue | 24 ++ .../sites/demos/mobile/app/label/bold.vue | 23 ++ .../sites/demos/mobile/app/label/color.vue | 34 +++ .../sites/demos/mobile/app/label/decimal.vue | 28 ++ .../sites/demos/mobile/app/label/ellipsis.vue | 31 +++ .../sites/demos/mobile/app/label/limit.vue | 24 ++ .../sites/demos/mobile/app/label/position.vue | 30 +++ .../sites/demos/mobile/app/label/required.vue | 24 ++ .../sites/demos/mobile/app/label/size.vue | 31 +++ .../sites/demos/mobile/app/label/type.vue | 30 +++ .../demos/mobile/app/label/webdoc/label.cn.md | 11 + .../demos/mobile/app/label/webdoc/label.en.md | 11 + .../demos/mobile/app/label/webdoc/label.js | 247 ++++++++++++++++++ .../demos/mobile/app/label/wholeline.vue | 24 ++ examples/sites/demos/mobile/menus.js | 1 + packages/modules.json | 21 +- packages/renderless/src/label/index.ts | 78 ++++++ packages/renderless/src/label/vue.ts | 48 ++++ packages/renderless/types/index.ts | 1 + packages/renderless/types/label.type.ts | 30 +++ packages/theme-mobile/src/label/index.less | 103 ++++++++ packages/theme-mobile/src/label/vars.less | 28 ++ packages/vue/package.json | 1 + packages/vue/src/label/index.ts | 30 +++ packages/vue/src/label/package.json | 22 ++ packages/vue/src/label/src/index.ts | 69 +++++ packages/vue/src/label/src/mobile.vue | 43 +++ 27 files changed, 1043 insertions(+), 4 deletions(-) create mode 100644 examples/sites/demos/mobile/app/label/base.vue create mode 100644 examples/sites/demos/mobile/app/label/bold.vue create mode 100644 examples/sites/demos/mobile/app/label/color.vue create mode 100644 examples/sites/demos/mobile/app/label/decimal.vue create mode 100644 examples/sites/demos/mobile/app/label/ellipsis.vue create mode 100644 examples/sites/demos/mobile/app/label/limit.vue create mode 100644 examples/sites/demos/mobile/app/label/position.vue create mode 100644 examples/sites/demos/mobile/app/label/required.vue create mode 100644 examples/sites/demos/mobile/app/label/size.vue create mode 100644 examples/sites/demos/mobile/app/label/type.vue create mode 100644 examples/sites/demos/mobile/app/label/webdoc/label.cn.md create mode 100644 examples/sites/demos/mobile/app/label/webdoc/label.en.md create mode 100644 examples/sites/demos/mobile/app/label/webdoc/label.js create mode 100644 examples/sites/demos/mobile/app/label/wholeline.vue create mode 100644 packages/renderless/src/label/index.ts create mode 100644 packages/renderless/src/label/vue.ts create mode 100644 packages/renderless/types/label.type.ts create mode 100644 packages/theme-mobile/src/label/index.less create mode 100644 packages/theme-mobile/src/label/vars.less create mode 100644 packages/vue/src/label/index.ts create mode 100644 packages/vue/src/label/package.json create mode 100644 packages/vue/src/label/src/index.ts create mode 100644 packages/vue/src/label/src/mobile.vue diff --git a/examples/sites/demos/mobile/app/label/base.vue b/examples/sites/demos/mobile/app/label/base.vue new file mode 100644 index 000000000..06c491ed2 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/base.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/bold.vue b/examples/sites/demos/mobile/app/label/bold.vue new file mode 100644 index 000000000..84e1dca32 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/bold.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/color.vue b/examples/sites/demos/mobile/app/label/color.vue new file mode 100644 index 000000000..e70d599d6 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/color.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/decimal.vue b/examples/sites/demos/mobile/app/label/decimal.vue new file mode 100644 index 000000000..4eb59d398 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/decimal.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/ellipsis.vue b/examples/sites/demos/mobile/app/label/ellipsis.vue new file mode 100644 index 000000000..9e9a77c2d --- /dev/null +++ b/examples/sites/demos/mobile/app/label/ellipsis.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/limit.vue b/examples/sites/demos/mobile/app/label/limit.vue new file mode 100644 index 000000000..d7a40ded8 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/limit.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/position.vue b/examples/sites/demos/mobile/app/label/position.vue new file mode 100644 index 000000000..892f56060 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/position.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/required.vue b/examples/sites/demos/mobile/app/label/required.vue new file mode 100644 index 000000000..cdb3e9d76 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/required.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/size.vue b/examples/sites/demos/mobile/app/label/size.vue new file mode 100644 index 000000000..53631504c --- /dev/null +++ b/examples/sites/demos/mobile/app/label/size.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/type.vue b/examples/sites/demos/mobile/app/label/type.vue new file mode 100644 index 000000000..0d487ff3f --- /dev/null +++ b/examples/sites/demos/mobile/app/label/type.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/label/webdoc/label.cn.md b/examples/sites/demos/mobile/app/label/webdoc/label.cn.md new file mode 100644 index 000000000..0c3ee14d0 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/webdoc/label.cn.md @@ -0,0 +1,11 @@ +--- +title: Label 文本框 +--- + +# Label 文本框 + +
+ +Label 文本框 + +
\ No newline at end of file diff --git a/examples/sites/demos/mobile/app/label/webdoc/label.en.md b/examples/sites/demos/mobile/app/label/webdoc/label.en.md new file mode 100644 index 000000000..6ba5ab336 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/webdoc/label.en.md @@ -0,0 +1,11 @@ +--- +title: Label 文本框 +--- + +# Label 文本框 + +
+ +Label + +
\ No newline at end of file diff --git a/examples/sites/demos/mobile/app/label/webdoc/label.js b/examples/sites/demos/mobile/app/label/webdoc/label.js new file mode 100644 index 000000000..bb70dcfc4 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/webdoc/label.js @@ -0,0 +1,247 @@ +export default { + column: '2', + owner: '', + demos: [ + { + demoId: 'base', + name: { + 'zh-CN': '基础用法', + 'en-US': 'base' + }, + desc: { + 'zh-CN': '

基础用法

', + 'en-US': '

base

' + }, + codeFiles: ['base.vue'] + }, + { + demoId: 'type', + name: { + 'zh-CN': '类型', + 'en-US': 'type' + }, + desc: { + 'zh-CN': '

类型

', + 'en-US': '

type

' + }, + codeFiles: ['type.vue'] + }, + { + demoId: 'decimal', + name: { + 'zh-CN': '小数点位数', + 'en-US': 'decimal' + }, + desc: { + 'zh-CN': '

小数点位数

', + 'en-US': '

decimal

' + }, + codeFiles: ['decimal.vue'] + }, + { + demoId: 'bold', + name: { + 'zh-CN': '加粗', + 'en-US': 'bold' + }, + desc: { + 'zh-CN': '

加粗

', + 'en-US': '

bold

' + }, + codeFiles: ['bold.vue'] + }, + { + demoId: 'color', + name: { + 'zh-CN': '不同颜色', + 'en-US': 'different color' + }, + desc: { + 'zh-CN': '

不同颜色

', + 'en-US': '

different color

' + }, + codeFiles: ['color.vue'] + }, + { + demoId: 'size', + name: { + 'zh-CN': '不同尺寸', + 'en-US': 'different size' + }, + desc: { + 'zh-CN': '

不同尺寸

', + 'en-US': '

different size

' + }, + codeFiles: ['size.vue'] + }, + { + demoId: 'wholeline', + name: { + 'zh-CN': '整行展示', + 'en-US': 'whole line' + }, + desc: { + 'zh-CN': '

整行展示

', + 'en-US': '

whole line

' + }, + codeFiles: ['wholeline.vue'] + }, + { + demoId: 'limit', + name: { + 'zh-CN': '限制文本字数', + 'en-US': 'limit text length' + }, + desc: { + 'zh-CN': '

限制文本字数

', + 'en-US': '

limit text length

' + }, + codeFiles: ['limit.vue'] + }, + { + demoId: 'position', + name: { + 'zh-CN': '整行显示文字位置', + 'en-US': 'text position' + }, + desc: { + 'zh-CN': '

整行显示时，文字位置

', + 'en-US': '

text position

' + }, + codeFiles: ['position.vue'] + }, + { + demoId: 'ellipsis', + name: { + 'zh-CN': '最大显示行数', + 'en-US': 'max line' + }, + desc: { + 'zh-CN': '

最大显示行数

', + 'en-US': '

max line

' + }, + codeFiles: ['ellipsis.vue'] + }, + { + demoId: 'required', + name: { + 'zh-CN': '是否添加*号', + 'en-US': 'required' + }, + desc: { + 'zh-CN': '

是否添加*号

', + 'en-US': '

required

' + }, + codeFiles: ['required.vue'] + } + ], + apis: [ + { + name: 'Label', // 组件名称展示使用 + type: 'component', // API 类型 + properties: [ + { + name: 'label', + type: 'string', + defaultValue: '', + desc: { + 'zh-CN': '

文本

', + 'en-US': 'text' + }, + demoId: 'base' + }, + { + name: 'type', + type: 'string', + defaultValue: 'base', + desc: { + 'zh-CN': '

类型 \n base, number

', + 'en-US': 'type' + }, + demoId: 'type' + }, + { + name: ' color', + type: 'string', + defaultValue: 'primary', + desc: { + 'zh-CN': '

文本颜色:primary,secondary,placeholder,disabled,inverse,brand,link

', + 'en-US': 'text color' + }, + demoId: 'color' + }, + { + name: 'size', + type: 'string', + defaultValue: 'normal', + desc: { + 'zh-CN': '

文本大小:large,normal,small,mini

', + 'en-US': 'text size' + }, + demoId: 'size' + }, + { + name: 'wholeline', + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': '

是否整行显示

', + 'en-US': 'whole line display' + }, + demoId: 'wholeline' + }, + { + name: 'position', + type: 'string', + defaultValue: 'left', + desc: { + 'zh-CN': '

整行显示时的位置:left,center,right

', + 'en-US': 'position of whole line dispaly' + }, + demoId: 'position' + }, + { + name: 'ellipsis', + type: 'number', + defaultValue: '', + desc: { + 'zh-CN': '

支持超出省略号显示的行数

', + 'en-US': 'ellipsis' + }, + demoId: 'ellipsis' + }, + { + name: 'decimal', + type: 'number', + defaultValue: '2', + desc: { + 'zh-CN': '

小数点的位数

', + 'en-US': 'decimal' + }, + demoId: 'decimal' + }, + { + name: 'limit', + type: 'number', + defaultValue: '', + desc: { + 'zh-CN': '

限制文本的字数

', + 'en-US': 'text limit' + }, + demoId: 'limit' + }, + { + name: 'is-required', + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': '

是否添加*号

', + 'en-US': 'is required' + }, + demoId: 'required' + } + ], + slots: [] + } + ] +} diff --git a/examples/sites/demos/mobile/app/label/wholeline.vue b/examples/sites/demos/mobile/app/label/wholeline.vue new file mode 100644 index 000000000..40035f345 --- /dev/null +++ b/examples/sites/demos/mobile/app/label/wholeline.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/sites/demos/mobile/menus.js b/examples/sites/demos/mobile/menus.js index 873a08471..4fdd916dd 100644 --- a/examples/sites/demos/mobile/menus.js +++ b/examples/sites/demos/mobile/menus.js @@ -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' }, diff --git a/packages/modules.json b/packages/modules.json index 3e18f4db2..ce3ebe235 100644 --- a/packages/modules.json +++ b/packages/modules.json @@ -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", diff --git a/packages/renderless/src/label/index.ts b/packages/renderless/src/label/index.ts new file mode 100644 index 000000000..bf5d63be6 --- /dev/null +++ b/packages/renderless/src/label/index.ts @@ -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` : '' + ] +} diff --git a/packages/renderless/src/label/vue.ts b/packages/renderless/src/label/vue.ts new file mode 100644 index 000000000..220517920 --- /dev/null +++ b/packages/renderless/src/label/vue.ts @@ -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 +} diff --git a/packages/renderless/types/index.ts b/packages/renderless/types/index.ts index e2368c490..98b0ff20c 100644 --- a/packages/renderless/types/index.ts +++ b/packages/renderless/types/index.ts @@ -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' diff --git a/packages/renderless/types/label.type.ts b/packages/renderless/types/label.type.ts new file mode 100644 index 000000000..690c6ea48 --- /dev/null +++ b/packages/renderless/types/label.type.ts @@ -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 + +export interface ILabelState { + label: ComputedRef + type: ComputedRef + color: ComputedRef + size: ComputedRef + labelStyle: ComputedRef + labelClass: ComputedRef + isRequired: ComputedRef +} + +export interface ILabelApi { + state: ILabelState + handleClick: (event: MouseEvent) => void + computeLabel: () => string + computeLabelStyle: () => object + computeLabelClass: () => [] +} +export type ILabelRenderlessParams = ISharedRenderlessFunctionParams & { + api: ILabelApi + state: ILabelState + props: ILabelProps +} + +export type ILabelRenderlessParamUtils = ISharedRenderlessParamUtils diff --git a/packages/theme-mobile/src/label/index.less b/packages/theme-mobile/src/label/index.less new file mode 100644 index 000000000..44218209c --- /dev/null +++ b/packages/theme-mobile/src/label/index.less @@ -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); + } +} diff --git a/packages/theme-mobile/src/label/vars.less b/packages/theme-mobile/src/label/vars.less new file mode 100644 index 000000000..130a07b30 --- /dev/null +++ b/packages/theme-mobile/src/label/vars.less @@ -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); +} diff --git a/packages/vue/package.json b/packages/vue/package.json index daf3bc1e7..e9bde0706 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -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:~", diff --git a/packages/vue/src/label/index.ts b/packages/vue/src/label/index.ts new file mode 100644 index 000000000..56ad50535 --- /dev/null +++ b/packages/vue/src/label/index.ts @@ -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 diff --git a/packages/vue/src/label/package.json b/packages/vue/src/label/package.json new file mode 100644 index 000000000..0a51ee6ad --- /dev/null +++ b/packages/vue/src/label/package.json @@ -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" +} diff --git a/packages/vue/src/label/src/index.ts b/packages/vue/src/label/src/index.ts new file mode 100644 index 000000000..737d77c41 --- /dev/null +++ b/packages/vue/src/label/src/index.ts @@ -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 }) + } +}) diff --git a/packages/vue/src/label/src/mobile.vue b/packages/vue/src/label/src/mobile.vue new file mode 100644 index 000000000..1399f037f --- /dev/null +++ b/packages/vue/src/label/src/mobile.vue @@ -0,0 +1,43 @@ + + + +