@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/tabs/index.js

@@ -0,0 +1,311 @@
+import { SmartComponent } from '../common/component';
+import { touch } from '../mixins/touch';
+import { getAllRect, getRect, groupSetData, nextTick, requestAnimationFrame, } from '../common/utils';
+import { isDef } from '../common/validator';
+import { useChildren } from '../common/relation';
+import tyApi from '../common/ty';
+SmartComponent({
+    mixins: [touch],
+    classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class', 'wrap-class'],
+    relation: useChildren('tab', function () {
+        this.updateTabs();
+    }),
+    props: {
+        sticky: Boolean,
+        border: Boolean,
+        swipeable: Boolean,
+        titleActiveColor: String,
+        titleInactiveColor: String,
+        color: String,
+        animated: {
+            type: Boolean,
+            observer() {
+                this.children.forEach((child, index) => child.updateRender(index === this.data.currentIndex, this));
+            },
+        },
+        lineWidth: {
+            type: null,
+            value: 16,
+            observer: 'resize',
+        },
+        lineHeight: {
+            type: null,
+            value: -1,
+        },
+        active: {
+            type: null,
+            value: 0,
+            observer(name) {
+                if (name !== this.getCurrentName()) {
+                    this.setCurrentIndexByName(name);
+                }
+            },
+        },
+        type: {
+            type: String,
+            value: 'line',
+        },
+        ellipsis: {
+            type: Boolean,
+            value: true,
+        },
+        duration: {
+            type: Number,
+            value: 0.3,
+        },
+        zIndex: {
+            type: Number,
+            value: 1,
+        },
+        swipeThreshold: {
+            type: Number,
+            value: 5,
+            observer(value) {
+                this.setData({
+                    scrollable: this.children.length > value || !this.data.ellipsis,
+                });
+            },
+        },
+        offsetTop: {
+            type: Number,
+            value: 0,
+        },
+        lazyRender: {
+            type: Boolean,
+            value: true,
+        },
+        useBeforeChange: {
+            type: Boolean,
+            value: false,
+        },
+        inactiveDestroy: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        tabs: [],
+        scrollLeft: 0,
+        scrollable: false,
+        currentIndex: 0,
+        container: null,
+        skipTransition: true,
+        scrollWithAnimation: false,
+        lineOffsetLeft: 0,
+        inited: false,
+        hasSubTitle: false,
+    },
+    mounted() {
+        requestAnimationFrame(() => {
+            this.swiping = true;
+            this.setData({
+                container: () => this.createSelectorQuery().select('.smart-tabs'),
+            });
+            this.resize();
+            this.scrollIntoView();
+        });
+    },
+    methods: {
+        updateTabs() {
+            const { children = [], data } = this;
+            this.setData({
+                tabs: children.map((child) => child.data),
+                scrollable: this.children.length > data.swipeThreshold || !data.ellipsis,
+            });
+            this.setCurrentIndexByName(data.active || this.getCurrentName());
+        },
+        trigger(eventName, child) {
+            const { currentIndex } = this.data;
+            const data = this.getChildData(currentIndex, child);
+            if (!isDef(data)) {
+                return;
+            }
+            this.$emit(eventName, data);
+        },
+        onTap(event) {
+            const { index } = event.currentTarget.dataset;
+            const child = this.children[index];
+            if (child.data.disabled) {
+                this.trigger('disabled', child);
+                return;
+            }
+            this.onBeforeChange(index)
+                .then(() => {
+                tyApi.selectionVibrate();
+                this.setCurrentIndex(index);
+                nextTick(() => {
+                    this.trigger('click');
+                });
+            })
+                .catch(err => { });
+        },
+        // correct the index of active tab
+        setCurrentIndexByName(name) {
+            const { children = [] } = this;
+            const matched = children.filter((child) => child.getComputedName() === name);
+            if (matched.length) {
+                this.setCurrentIndex(matched[0].index);
+            }
+        },
+        setCurrentIndex(currentIndex) {
+            const { data, children = [] } = this;
+            if (!isDef(currentIndex) || currentIndex >= children.length || currentIndex < 0) {
+                return;
+            }
+            let hasSubTitle = false;
+            groupSetData(this, () => {
+                const task = [];
+                children.forEach((item, index) => {
+                    const active = index === currentIndex;
+                    if (active !== item.data.active || !item.inited) {
+                        active
+                            ? task.push(() => item.updateRender(active, this))
+                            : task.unshift(() => item.updateRender(active, this));
+                    }
+                    if (item.data.subtitle) {
+                        hasSubTitle = true;
+                    }
+                });
+                task.forEach(fun => fun());
+            });
+            if (currentIndex === data.currentIndex) {
+                if (!data.inited) {
+                    this.resize();
+                }
+                return;
+            }
+            const shouldEmitChange = data.currentIndex !== null;
+            this.setData({ currentIndex, hasSubTitle });
+            requestAnimationFrame(() => {
+                this.resize();
+                this.scrollIntoView();
+            });
+            nextTick(() => {
+                this.trigger('input');
+                if (shouldEmitChange) {
+                    this.trigger('change');
+                }
+            });
+        },
+        getCurrentName() {
+            const activeTab = this.children[this.data.currentIndex];
+            if (activeTab) {
+                return activeTab.getComputedName();
+            }
+        },
+        resize() {
+            const { currentIndex, ellipsis, skipTransition, type } = this.data;
+            Promise.all([
+                getAllRect(this, '.smart-tab'),
+                type === 'line' ? getRect(this, '.smart-tabs__line') : Promise.resolve({ width: 0 }),
+            ]).then(([rects = [], lineRect]) => {
+                const rect = rects === null || rects === void 0 ? void 0 : rects[currentIndex];
+                if (rect == null || rect === undefined) {
+                    return;
+                }
+                const { width: cardWidth, height: cardHeight } = rects[currentIndex];
+                let lineOffsetLeft = rects
+                    .slice(0, currentIndex)
+                    .reduce((prev, curr) => prev + curr.width, 0);
+                if (type === 'line') {
+                    lineOffsetLeft += (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
+                }
+                this.setData({ lineOffsetLeft, inited: true, cardWidth, cardHeight });
+                this.swiping = true;
+                if (skipTransition) {
+                    // waiting transition end
+                    setTimeout(() => {
+                        this.setData({ skipTransition: false });
+                    }, this.data.duration * 1000);
+                }
+            });
+        },
+        // scroll active tab into view
+        scrollIntoView() {
+            const { currentIndex, scrollable, scrollWithAnimation } = this.data;
+            if (!scrollable) {
+                return;
+            }
+            Promise.all([getAllRect(this, '.smart-tab'), getRect(this, '.smart-tabs__nav')]).then(([tabRects, navRect]) => {
+                const tabRect = tabRects === null || tabRects === void 0 ? void 0 : tabRects[currentIndex];
+                // On Android the layout query can resolve before the tabs are laid out,
+                // in which case there is nothing to scroll to yet.
+                if (tabRect == null || navRect == null) {
+                    return;
+                }
+                const offsetLeft = tabRects
+                    .slice(0, currentIndex)
+                    .reduce((prev, curr) => prev + curr.width, 0);
+                this.setData({
+                    scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
+                });
+                if (!scrollWithAnimation) {
+                    nextTick(() => {
+                        this.setData({ scrollWithAnimation: true });
+                    });
+                }
+            });
+        },
+        onTouchScroll(event) {
+            this.$emit('scroll', event.detail);
+        },
+        onTouchStart(event) {
+            if (!this.data.swipeable)
+                return;
+            this.swiping = true;
+            this.touchStart(event);
+        },
+        onTouchMove(event) {
+            if (!this.data.swipeable || !this.swiping)
+                return;
+            this.touchMove(event);
+        },
+        // watch swipe touch end
+        onTouchEnd() {
+            if (!this.data.swipeable || !this.swiping)
+                return;
+            const { direction, deltaX, offsetX } = this;
+            const minSwipeDistance = 50;
+            if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
+                const index = this.getAvaiableTab(deltaX);
+                if (index !== -1) {
+                    this.onBeforeChange(index)
+                        .then(() => this.setCurrentIndex(index))
+                        .catch(err => { });
+                }
+            }
+            this.swiping = false;
+        },
+        getAvaiableTab(direction) {
+            const { tabs, currentIndex } = this.data;
+            const step = direction > 0 ? -1 : 1;
+            for (let i = step; currentIndex + i < tabs.length && currentIndex + i >= 0; i += step) {
+                const index = currentIndex + i;
+                if (index >= 0 && index < tabs.length && tabs[index] && !tabs[index].disabled) {
+                    return index;
+                }
+            }
+            return -1;
+        },
+        onBeforeChange(index) {
+            const { useBeforeChange } = this.data;
+            if (!useBeforeChange) {
+                return Promise.resolve();
+            }
+            return new Promise((resolve, reject) => {
+                this.$emit('before-change', Object.assign(Object.assign({}, this.getChildData(index)), { callback: status => (status ? resolve() : reject()) }));
+            });
+        },
+        getChildData(index, child) {
+            const currentChild = child || this.children[index];
+            if (!isDef(currentChild)) {
+                return;
+            }
+            return {
+                index: currentChild.index,
+                name: currentChild.getComputedName(),
+                title: currentChild.data.title,
+            };
+        },
+    },
+});

package/dist/tabs/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-info": "../info/index",
+    "smart-sticky": "../sticky/index"
+  }
+}

package/dist/tabs/index.wxml

@@ -0,0 +1,69 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="custom-class {{ utils.bem('tabs') }}">
+  <smart-sticky
+    disabled="{{ !sticky }}"
+    z-index="{{ zIndex }}"
+    offset-top="{{ offsetTop }}"
+    container="{{ container }}"
+    bind:scroll="onTouchScroll"
+  >
+    <view class="{{ utils.bem('tabs--') + type }} {{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'smart-hairline--top-bottom' : '' }} {{ hasSubTitle ? 'smart-tabs--line_subtitle' : '' }} wrap-class">
+      <slot name="nav-left" />
+
+      <scroll-view
+        scroll-x="{{ scrollable }}"
+        scroll-with-animation="{{ scrollWithAnimation }}"
+        scroll-left="{{ scrollLeft }}"
+        class="{{ utils.bem('tabs__scroll', [type]) }}"
+        style="{{ color ? 'border-color: ' + color : '' }}"
+      >
+        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
+          <view wx:if="{{ type === 'line' }}" class="smart-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth, inited }) }}" />
+          <view wx:if="{{ type === 'card' }}" class="smart-tabs__card" style="{{ computed.cardStyle({ color, lineOffsetLeft, cardHeight, skipTransition, duration, cardWidth, inited }) }}" />
+          <view
+            wx:for="{{ tabs }}"
+            wx:key="index"
+            data-index="{{ index }}"
+            class="{{ computed.tabClass(index === currentIndex) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
+            style="{{ computed.tabStyle({ active: index === currentIndex, ellipsis, color, type, disabled: item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable }) }}"
+            bind:tap="onTap"
+          >
+            <view class="smart-tab-content">
+              <view class="smart-tab-text {{ ellipsis ? 'smart-ellipsis' : '' }}" style="{{ item.titleStyle }}">
+                {{ item.title }}
+              </view>
+              <view wx:if="{{!!item.subtitle}}" class="{{ ellipsis ? 'smart-ellipsis' : '' }}" style="{{ item.subtitleStyle }}">
+                {{ item.subtitle }}
+              </view>
+              <smart-info
+                wx:if="{{ item.info !== null || item.dot }}"
+                info="{{ item.info }}"
+                dot="{{ item.dot }}"
+                custom-class="smart-tab__title__info"
+              />
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+
+      <slot name="nav-right" />
+    </view>
+  </smart-sticky>
+
+  <view
+    class="smart-tabs__content"
+    bind:touchstart="onTouchStart"
+    bind:touchmove="onTouchMove"
+    bind:touchend="onTouchEnd"
+    bind:touchcancel="onTouchEnd"
+  >
+    <view
+      class="{{ utils.bem('tabs__track', [{ animated }]) }} smart-tabs__track"
+      style="{{ computed.trackStyle({ duration, currentIndex, animated }) }}"
+    >
+      <slot />
+    </view>
+  </view>
+</view>

package/dist/tabs/index.wxs

@@ -0,0 +1,93 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function tabClass(active) {
+  var classes = ['tab-class'];
+
+  if (active) {
+    classes.push('tab-active-class');
+  }
+
+  return classes.join(' ');
+}
+
+function tabStyle(data) {
+  var titleColor = data.active
+    ? data.titleActiveColor
+    : data.titleInactiveColor;
+
+  var ellipsis = data.scrollable && data.ellipsis;
+
+  // card theme color
+  if (data.type === 'card') {
+    return style({
+      'border-color': data.color,
+      'background-color': !data.disabled && data.active && data.type !== 'card' ? data.color : null,
+      color: titleColor || (!data.disabled && !data.active && data.type !== 'card' ? data.color : null),
+      'flex-basis': ellipsis ? 88 / data.swipeThreshold + '%' : null,
+    });
+  }
+
+  return style({
+    color: titleColor,
+    'flex-basis': ellipsis ? 88 / data.swipeThreshold + '%' : null,
+  });
+}
+
+function navStyle(color, type) {
+  return style({
+    'border-color': type === 'card' && color ? color : null,
+  });
+}
+
+function trackStyle(data) {
+  if (!data.animated) {
+    return '';
+  }
+
+  return style({
+    left: -100 * data.currentIndex + '%',
+    'transition-duration': data.duration + 's',
+    '-webkit-transition-duration': data.duration + 's',
+  });
+}
+
+function lineStyle(data) {
+  return style({
+    width: utils.addUnit(data.lineWidth),
+    opacity: data.inited ? 1 : 0,
+    transform: 'translateX(' + data.lineOffsetLeft + 'px)',
+    '-webkit-transform': 'translateX(' + data.lineOffsetLeft + 'px)',
+    'background-color': data.color,
+    height: data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
+    'border-radius':
+      data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
+    'transition-duration': !data.skipTransition ? data.duration + 's' : null,
+    '-webkit-transition-duration': !data.skipTransition
+      ? data.duration + 's'
+      : null,
+  });
+}
+
+function cardStyle(data) {
+  return style({
+    width: utils.addUnit(data.cardWidth),
+    opacity: data.inited ? 1 : 0,
+    transform: 'translateX(' + data.lineOffsetLeft + 'px)',
+    '-webkit-transform': 'translate(' + data.lineOffsetLeft + 'px, 0px)',
+    'background-color': data.color,
+    'transition-duration': data.skipTransition ? null : data.duration + 's',
+    '-webkit-transition-duration': data.skipTransition ? null : data.duration + 's'
+  });
+}
+
+
+module.exports = {
+  tabClass: tabClass,
+  tabStyle: tabStyle,
+  trackStyle: trackStyle,
+  lineStyle: lineStyle,
+  navStyle: navStyle,
+  cardStyle: cardStyle,
+};

package/dist/tabs/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{background-color:var(--tabs-card-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;padding:var(--tabs-card-padding,2px);width:100%}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:100%}.smart-tabs__nav--card .smart-tab{align-items:center;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:center}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__card-box{background-color:initial;height:100%;pointer-events:none;position:relative;width:100%}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:var(--tabs-card-active-border-radius,6px);height:100%;left:var(--tabs-card-active-left,0);opacity:0;position:absolute;top:var(--tabs-card-active-top,0);z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%;z-index:1}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--line_subtitle{height:var(--tabs-sub-line-height,64px)}.smart-tabs--card{height:var(--tabs-card-height,32px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;position:relative;text-align:center;transition:font-size .5s,color .5s,opacity .5s,text-shadow .5s}.smart-tab-content{margin:0 auto;max-width:100%;position:relative;width:-webkit-fit-content;width:fit-content}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{right:0;transform:translateX(100%)}

package/dist/tag/README.md

@@ -0,0 +1,184 @@
+---
+category: 展示
+new: true
+---
+
+# Tag 标签
+
+> v2.0.0 开始加入
+
+### 介绍
+
+用于标记关键词和概括主要内容。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-tag": "@tuya/miniapp-smart-ui/lib/tag/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `type` 属性控制标签颜色，默认为灰色。
+
+```html
+<smart-tag type="primary">标签</smart-tag>
+<smart-tag type="success">标签</smart-tag>
+<smart-tag type="danger">标签</smart-tag>
+<smart-tag type="warning">标签</smart-tag>
+```
+
+### 空心样式
+
+设置 `plain` 属性设置为空心样式。
+
+```html
+<smart-tag plain type="primary">标签</smart-tag>
+<smart-tag plain type="success">标签</smart-tag>
+<smart-tag plain type="danger">标签</smart-tag>
+<smart-tag plain type="warning">标签</smart-tag>
+```
+
+### 圆角样式
+
+通过 `round` 设置为圆角样式。
+
+```html
+<smart-tag round type="primary">标签</smart-tag>
+<smart-tag round type="success">标签</smart-tag>
+<smart-tag round type="danger">标签</smart-tag>
+<smart-tag round type="warning">标签</smart-tag>
+```
+
+### 标记样式
+
+通过 `mark` 设置为标记样式(半圆角)。
+
+```html
+<smart-tag mark type="primary">标签</smart-tag>
+<smart-tag mark type="success">标签</smart-tag>
+<smart-tag mark type="danger">标签</smart-tag>
+<smart-tag mark type="warning">标签</smart-tag>
+```
+
+### 自定义颜色
+```html
+<smart-tag color="rgba(16, 208, 208, 1)">标签</smart-tag>
+<smart-tag color="rgba(16, 208, 208, 0.2)" text-color="rgba(16, 208, 208, 1)">标签</smart-tag>
+<smart-tag color="rgba(16, 208, 208, 1)" plain>标签</smart-tag>
+```
+
+### 标签大小
+
+```html
+<smart-tag type="danger">标签</smart-tag>
+<smart-tag type="danger" size="medium">标签</smart-tag>
+<smart-tag type="danger" size="large">标签</smart-tag>
+```
+
+### 可关闭标签
+
+添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
+
+```html
+<smart-tag
+  ty:if="{{ show.primary }}"
+  closeable
+  size="medium"
+  type="primary"
+  id="primary"
+  bind:close="onClose"
+>
+  标签
+</smart-tag>
+<smart-tag
+  ty:if="{{ show.success }}"
+  closeable
+  size="medium"
+  type="success"
+  id="success"
+  bind:close="onClose"
+>
+  标签
+</smart-tag>
+```
+
+```js
+Page({
+  data: {
+    show: {
+      primary: true,
+      success: true,
+    },
+  },
+  onClose(event) {
+    this.setData({
+      [`show.${event.target.id}`]: false,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                                  | 类型      | 默认值  |
+| ---------- | ----------------------------------------------------- | --------- | ------- |
+| close-icon-aria-label `v2.13.0` | 关闭按钮的无障碍读屏文案，透传至关闭图标的 `ariaLabel` | _string_  | -       |
+| closeable  | 是否为可关闭标签                                      | _boolean_ | `false` |
+| color      | 标签颜色                                              | _string_  | -       |
+| mark       | 是否为标记样式                                        | _boolean_ | `false` |
+| plain      | 是否为空心样式                                        | _boolean_ | `false` |
+| round      | 是否为圆角样式                                        | _boolean_ | `false` |
+| size       | 大小, 可选值为 `large` `medium`                       | _string_  | -       |
+| text-color | 文本颜色，优先级高于 `color` 属性                     | _string_  | `white` |
+| type       | 类型，可选值为 `primary` `success` `danger` `warning` | _string_  | -       |
+
+### Slot
+
+| 名称 | 说明                |
+| ---- | ------------------- |
+| -    | 自定义 Tag 显示内容 |
+
+### Events
+
+| 事件名     | 说明           | 回调参数 |
+| ---------- | -------------- | -------- |
+| bind:close | 关闭标签时触发 | -        |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --tag-padding        | _2px 8px_                           | 组件padding    |
+| --tag-text-color        | _#fff_                         | 文字颜色    |
+| --tag-border-radius  | _4px_    | 组件外部radius    |
+| --tag-line-height  | _17px_    | 文字默认行高    |
+| --tag-medium-line-height  | _20px_    | medium尺寸文字行高    |
+| --tag-large-line-height  | _22px_    | large尺寸文字行高    |
+| --tag-font-size  | _12px_  | 字体默认大小   |
+| --tag-medium-font-size  | _14px_    | medium尺寸字体大小    |
+| --tag-large-font-size  | _16px_    | large尺寸字体大小    |
+| --tag-round-border-radius  | _999px_    | round模式组件外部radius    |
+| --tag-default-color  | _#969799_    | default模式背景色或边框色    |
+| --tag-danger-color  | _#ee0a24_    | danger模式背景色或边框色    |
+| --tag-primary-color  | _#1989fa_    | primary模式背景色或边框色    |
+| --tag-success-color  | _#07c160_    | success模式背景色或边框色    |
+| --tag-warning-color  | _#ff976a_    | warning模式背景色或边框色    |
+| --tag-plain-background-color  | _transparent_    | 空心模式背景色    |

package/dist/tag/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-tag{align-items:center;border-radius:var(--tag-border-radius,4px);color:var(--tag-text-color,#fff);display:inline-flex;font-size:var(--tag-font-size,12px);line-height:var(--tag-line-height,17px);padding:var(--tag-padding,2px 8px);position:relative}.smart-tag--default{background-color:var(--tag-default-color,#969799)}.smart-tag--default.smart-tag--plain{color:var(--tag-default-color,#969799)}.smart-tag--danger{background-color:var(--tag-danger-color,#ee0a24)}.smart-tag--danger.smart-tag--plain{color:var(--tag-danger-color,#ee0a24)}.smart-tag--primary{background-color:var(--tag-primary-color,#1989fa)}.smart-tag--primary.smart-tag--plain{color:var(--tag-primary-color,#1989fa)}.smart-tag--success{background-color:var(--tag-success-color,#07c160)}.smart-tag--success.smart-tag--plain{color:var(--tag-success-color,#07c160)}.smart-tag--warning{background-color:var(--tag-warning-color,#ff976a)}.smart-tag--warning.smart-tag--plain{color:var(--tag-warning-color,#ff976a)}.smart-tag--plain{background-color:var(--tag-plain-background-color,transparent)}.smart-tag--plain:before{border:1px solid;border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.smart-tag--medium{font-size:var(--tag-medium-font-size,14px);line-height:var(--tag-medium-line-height,20px)}.smart-tag--large{font-size:var(--tag-large-font-size,16px);line-height:var(--tag-large-line-height,22px)}.smart-tag--mark{border-radius:0 var(--tag-round-border-radius,999px) var(--tag-round-border-radius,999px) 0}.smart-tag--mark:after{content:"";display:block;width:2px}.smart-tag--round{border-radius:var(--tag-round-border-radius,999px)}.smart-tag__close{margin-left:2px;min-width:1em}

package/dist/tag/index.d.ts

@@ -0,0 +1 @@
+export {};