From 74e976e2a52cdf5402ff983858c55a6bbf529906 Mon Sep 17 00:00:00 2001 From: jacknan Date: Thu, 14 Dec 2023 15:56:53 +0800 Subject: [PATCH] feat(tag): add tag-mobile (#976) * feat(tag): add tag-mobile Signed-off-by: jacknan * feat(tag): remove tsx Signed-off-by: jacknan --------- Signed-off-by: jacknan --- .../demos/mobile/app/tag/basic-usage.vue | 27 ++++++ .../demos/mobile/app/tag/different-color.vue | 30 ++++++ .../sites/demos/mobile/app/tag/max-width.vue | 26 +++++ examples/sites/demos/mobile/app/tag/mini.vue | 27 ++++++ .../demos/mobile/app/tag/webdoc/tag.cn.md | 7 ++ .../demos/mobile/app/tag/webdoc/tag.en.md | 7 ++ .../sites/demos/mobile/app/tag/webdoc/tag.js | 96 +++++++++++++++++++ examples/sites/demos/mobile/menus.js | 3 +- packages/modules.json | 6 ++ packages/renderless/src/tag/vue.ts | 6 +- packages/renderless/types/tag.type.ts | 4 + packages/theme-mobile/src/tag/index.less | 59 ++++++++++++ packages/theme-mobile/src/tag/vars.less | 50 ++++++++++ packages/vue/src/tag/src/index.ts | 14 ++- packages/vue/src/tag/src/mobile.vue | 35 +++++++ 15 files changed, 393 insertions(+), 4 deletions(-) create mode 100644 examples/sites/demos/mobile/app/tag/basic-usage.vue create mode 100644 examples/sites/demos/mobile/app/tag/different-color.vue create mode 100644 examples/sites/demos/mobile/app/tag/max-width.vue create mode 100644 examples/sites/demos/mobile/app/tag/mini.vue create mode 100644 examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md create mode 100644 examples/sites/demos/mobile/app/tag/webdoc/tag.en.md create mode 100644 examples/sites/demos/mobile/app/tag/webdoc/tag.js create mode 100644 packages/theme-mobile/src/tag/index.less create mode 100644 packages/theme-mobile/src/tag/vars.less create mode 100644 packages/vue/src/tag/src/mobile.vue diff --git a/examples/sites/demos/mobile/app/tag/basic-usage.vue b/examples/sites/demos/mobile/app/tag/basic-usage.vue new file mode 100644 index 000000000..a07ed4111 --- /dev/null +++ b/examples/sites/demos/mobile/app/tag/basic-usage.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/tag/different-color.vue b/examples/sites/demos/mobile/app/tag/different-color.vue new file mode 100644 index 000000000..fdc080229 --- /dev/null +++ b/examples/sites/demos/mobile/app/tag/different-color.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/tag/max-width.vue b/examples/sites/demos/mobile/app/tag/max-width.vue new file mode 100644 index 000000000..5906ebdba --- /dev/null +++ b/examples/sites/demos/mobile/app/tag/max-width.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/tag/mini.vue b/examples/sites/demos/mobile/app/tag/mini.vue new file mode 100644 index 000000000..f03d2e2cd --- /dev/null +++ b/examples/sites/demos/mobile/app/tag/mini.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md b/examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md new file mode 100644 index 000000000..5516915cc --- /dev/null +++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md @@ -0,0 +1,7 @@ +--- +title: Tag 标签 +--- + +# Tag 标签 + +
用于标记事物的属性和维度
diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.en.md b/examples/sites/demos/mobile/app/tag/webdoc/tag.en.md new file mode 100644 index 000000000..c9c66370b --- /dev/null +++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.en.md @@ -0,0 +1,7 @@ +--- +title: Tag +--- + +# Tag + +
Used to mark transaction attributes and dimensions
diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.js b/examples/sites/demos/mobile/app/tag/webdoc/tag.js new file mode 100644 index 000000000..ca75de3d4 --- /dev/null +++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.js @@ -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' + } + ] + } + ] +} diff --git a/examples/sites/demos/mobile/menus.js b/examples/sites/demos/mobile/menus.js index 6957af093..873a08471 100644 --- a/examples/sites/demos/mobile/menus.js +++ b/examples/sites/demos/mobile/menus.js @@ -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' } ] } ] diff --git a/packages/modules.json b/packages/modules.json index ffeaf73d9..3e18f4db2 100644 --- a/packages/modules.json +++ b/packages/modules.json @@ -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", diff --git a/packages/renderless/src/tag/vue.ts b/packages/renderless/src/tag/vue.ts index 15089c394..d2627110f 100644 --- a/packages/renderless/src/tag/vue.ts +++ b/packages/renderless/src/tag/vue.ts @@ -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 = { diff --git a/packages/renderless/types/tag.type.ts b/packages/renderless/types/tag.type.ts index d8151f64b..08d70582b 100644 --- a/packages/renderless/types/tag.type.ts +++ b/packages/renderless/types/tag.type.ts @@ -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 { diff --git a/packages/theme-mobile/src/tag/index.less b/packages/theme-mobile/src/tag/index.less new file mode 100644 index 000000000..94246e348 --- /dev/null +++ b/packages/theme-mobile/src/tag/index.less @@ -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); + } +} diff --git a/packages/theme-mobile/src/tag/vars.less b/packages/theme-mobile/src/tag/vars.less new file mode 100644 index 000000000..d7d5580d9 --- /dev/null +++ b/packages/theme-mobile/src/tag/vars.less @@ -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); +} diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts index 4ce31e298..89169679c 100644 --- a/packages/vue/src/tag/src/index.ts +++ b/packages/vue/src/tag/src/index.ts @@ -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({ diff --git a/packages/vue/src/tag/src/mobile.vue b/packages/vue/src/tag/src/mobile.vue new file mode 100644 index 000000000..937459cea --- /dev/null +++ b/packages/vue/src/tag/src/mobile.vue @@ -0,0 +1,35 @@ + + + + +