@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/tab-bar-item/tab-bar-item.css

@@ -0,0 +1,117 @@
+:host {
+  flex: 1;
+}
+.t-tab-bar-item {
+  flex: 1;
+  height: var(--td-tab-bar-height, 80rpx);
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+  margin: 16rpx 0;
+  padding: 0 24rpx;
+}
+.t-tab-bar-item--split + .t-tab-bar-item--split::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--td-tab-bar-border-color, var(--td-border-color, var(--td-gray-color-3, #e7e7e7)));
+  transform: scaleX(0.5);
+  top: 16rpx;
+  bottom: 16rpx;
+}
+.t-tab-bar-item--crowded {
+  padding: 0 16rpx;
+}
+.t-tab-bar-item--round {
+  border-radius: 99px;
+}
+.t-tab-bar-item__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16rpx;
+  color: var(--td-tab-bar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-tab-bar-item__content--checked .t-tab-bar-item__text,
+.t-tab-bar-item__content--checked .t-tab-bar-item__icon {
+  color: var(--td-tab-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  font-weight: 600;
+}
+.t-tab-bar-item__content--tag {
+  border-radius: 99px;
+}
+.t-tab-bar-item__content--tag.t-tab-bar-item__content--checked {
+  background-color: var(--td-tab-bar-active-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-tab-bar-item__icon {
+  display: contents;
+}
+.t-tab-bar-item__icon:empty {
+  display: none;
+}
+.t-tab-bar-item__text {
+  display: flex;
+  align-items: center;
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-tab-bar-item__text--small {
+  font: var(--td-font-body-extraSmall, 20rpx / 32rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-tab-bar-item__icon-menu {
+  margin-right: 8rpx;
+}
+.t-tab-bar-item__spread {
+  position: absolute;
+  top: 0;
+  left: 7%;
+  width: 86%;
+  background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  transform: translate3d(0, calc(-100% - 32rpx), 0);
+  z-index: 1;
+  border-radius: 12rpx;
+  color: var(--td-tab-bar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  box-shadow: var(--td-tab-bar-spread-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
+}
+.t-tab-bar-item__spread::before {
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: 16rpx solid transparent;
+  border-top: 16rpx solid var(--td-tab-bar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  transform: translate3d(-50%, 32rpx, 0);
+}
+.t-tab-bar-item__spread-item {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  flex-direction: column;
+}
+.t-tab-bar-item__spread-item--active {
+  background-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, 0.05));
+}
+.t-tab-bar-item__spread-item-split {
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  background-color: var(--td-tab-bar-spread-border-color, var(--td-border-color, var(--td-gray-color-3, #e7e7e7)));
+  width: 80%;
+  height: 1px;
+  transform: translateY(0.5);
+}
+.t-tab-bar-item__spread-item-text {
+  padding-top: 24rpx;
+}

package/dist/tab-bar-item/tab-bar-item.vue

@@ -0,0 +1,222 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="tools.cls(classPrefix, [
+      ['split', split],
+      ['crowded', crowded], shape]
+    ) + ' ' + tClass"
+  >
+    <view
+      :class="tools.cls(classPrefix + '__content', [['checked', isChecked], theme])"
+      :hover-class="classPrefix + '__content--active'"
+      :hover-stay-time="200"
+      :aria-selected="(!hasChildren || !isSpread) && isChecked ? true : false"
+      :aria-expanded="hasChildren && isSpread ? true : ''"
+      :aria-role="hasChildren ? 'button' : 'tab'"
+      :aria-label="ariaLabel || (badgeProps.dot || badgeProps.count ? tools.getBadgeAriaLabel({ ...badgeProps }) : '')"
+      @click="toggle"
+    >
+      <view
+        :class="classPrefix + '__icon'"
+        :style="'height: ' + (iconOnly ? 24 : 20) + 'px'"
+        :aria-hidden="badgeProps.dot || badgeProps.count"
+      >
+        <t-badge
+          v-if="badgeProps.dot || badgeProps.count"
+          :count="badgeProps.count || 0"
+          :max-count="badgeProps.maxCount || 99"
+          :dot="badgeProps.dot || false"
+          :content="badgeProps.content || ''"
+          :size="badgeProps.size || 'medium'"
+          :visible="badgeProps.visible"
+          :offset="badgeProps.offset || [0, 0]"
+          :t-class-count="prefix + '-badge-class'"
+        >
+          <block
+            v-if="_icon"
+            name="icon"
+          >
+            <t-icon
+              :custom-style="_icon.style || ''"
+              :t-class="_icon.tClass || ''"
+              :prefix="_icon.prefix"
+              :name="_icon.name"
+              :size="_icon.size || (iconOnly ? 24 : 20)"
+              :color="_icon.color"
+              :aria-hidden="_icon.ariaHidden"
+              :aria-label="_icon.ariaLabel"
+              :aria-role="_icon.ariaRole"
+              @click="_icon.click || ''"
+            />
+          </block>
+          <!-- 避免被 badge 组件识别为空，t-badge__content:not(:empty) -->
+          <view v-else />
+        </t-badge>
+        <block
+          v-else-if="!!icon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_icon.style || ''"
+            :t-class="_icon.tClass || ''"
+            :prefix="_icon.prefix"
+            :name="_icon.name"
+            :size="_icon.size || (iconOnly ? 24 : 20)"
+            :color="_icon.color"
+            :aria-hidden="!iconOnly"
+            :aria-label="_icon.ariaLabel"
+            :aria-role="_icon.ariaRole"
+            @click="_icon.click || ''"
+          />
+        </block>
+        <slot name="icon" />
+      </view>
+      <view :class="tools.cls(classPrefix + '__text', [['small', !!icon]])">
+        <t-icon
+          v-if="hasChildren"
+          name="view-list"
+          size="32rpx"
+          :t-class="classPrefix + '__icon-menu'"
+        />
+        <slot />
+      </view>
+    </view>
+    <view
+      v-if="hasChildren && isSpread"
+      :class="classPrefix + '__spread'"
+    >
+      <view
+        v-for="(child, index) in (subTabBar || [])"
+        :key="index"
+        :class="classPrefix + '__spread-item'"
+        :hover-class="classPrefix + '__spread-item--active'"
+        :hover-stay-time="200"
+        :data-value="child.value || index"
+        aria-role="tab"
+        @click="selectChild"
+      >
+        <view
+          v-if="index !== 0"
+          :class="classPrefix + '__spread-item-split'"
+        />
+
+        <view
+          :class="classPrefix + '__spread-item-text'"
+          :data-value="child.value || index"
+        >
+          {{ child.label }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TBadge from '../badge/badge';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, calcIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+const classPrefix = `${prefix}-tab-bar-item`;
+
+
+export default uniComponent({
+  name: classPrefix,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ChildrenMixin(RELATION_MAP.TabBarItem)],
+  components: {
+    TIcon,
+    TBadge,
+  },
+  props: {
+    ...props,
+  },
+  emits: [],
+  watch: {
+    subTabBar: {
+      handler(value) {
+        this.hasChildren = value?.length > 0;
+      },
+      immediate: true,
+    },
+    icon: {
+      handler(v) {
+        this._icon = calcIcon(v);
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix,
+      isSpread: false,
+      isChecked: false,
+      hasChildren: false,
+      currentName: '',
+      split: true,
+      iconOnly: false,
+      theme: '',
+      crowded: false,
+      shape: 'normal',
+      tools,
+    };
+  },
+  async mounted() {
+    const res = await getRect(this, `.${classPrefix}__text`);
+
+    this.iconOnly = res.height === 0;
+  },
+  methods: {
+    innerAfterLinked() {
+      const parent = this[RELATION_MAP.TabBarItem];
+      const { theme, split, shape } = parent;
+
+      this.theme = theme;
+      this.split = split;
+      this.shape = shape;
+      this.currentName = this.value ? this.value : parent.initName();
+
+      parent.updateChildren();
+    },
+    showSpread() {
+      this.isSpread = true;
+    },
+    toggle() {
+      const { currentName, hasChildren, isSpread } = this;
+
+      if (hasChildren) {
+        this.isSpread = !isSpread;
+      }
+      this[RELATION_MAP.TabBarItem].updateValue(currentName);
+      this[RELATION_MAP.TabBarItem].changeOtherSpread(currentName);
+    },
+    selectChild(event) {
+      const { value } = event.target.dataset;
+
+      this[RELATION_MAP.TabBarItem].updateValue(value);
+      this.isSpread = false;
+    },
+    checkActive(value) {
+      const { currentName, subTabBar = [] } = this;
+      const isChecked = subTabBar?.some(item => item.value === value) || currentName === value;
+
+      this.isChecked = isChecked;
+    },
+    closeSpread() {
+      this.isSpread = false;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tab-bar-item.css';
+
+</style>

package/dist/tab-bar-item/type.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps as BadgeProps } from '../badge/type';
+
+export interface TdTabBarItemProps {
+  /**
+   * 图标右上角提示信息
+   * @default {}
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 图标名称。传入对象时透传至 Icon 组件
+   */
+  icon?: string | object;
+  /**
+   * 二级菜单
+   */
+  subTabBar?: SubTabBarItem[];
+  /**
+   * 标识符
+   */
+  value?: string | number;
+}
+
+export interface SubTabBarItem {
+  value: string;
+  label: string;
+}

package/dist/tab-panel/props.ts

@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 透传至 Badge 组件 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 是否禁用当前选项卡 */
+  disabled: Boolean,
+  /** `1.0.0-rc.1`。图标，传对象则透传至 Icon */
+  icon: {
+    type: [String, Object],
+  },
+  /** 选项卡名称 */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** 是否启用选项卡懒加载 */
+  lazy: Boolean,
+  /** 用于自定义选项卡面板内容 */
+  panel: {
+    type: String,
+  },
+  /** 选项卡的值，唯一标识 */
+  value: {
+    type: [String, Number],
+  },
+};

package/dist/tab-panel/tab-panel.css

@@ -0,0 +1,15 @@
+.t-tab-panel {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.t-tab-panel--active {
+  height: auto;
+}
+.t-tab-panel--inactive {
+  height: 0;
+  overflow: visible;
+}

package/dist/tab-panel/tab-panel.vue

@@ -0,0 +1,100 @@
+<template>
+  <view
+    v-if="!lazy || hasActivated"
+    :id="id"
+    :class="tClass + ' ' + classPrefix + ' ' + (active ? classPrefix + '--active' : classPrefix + '--inactive')"
+    :style="tools._style([customStyle, hide ? 'display: none' : ''])"
+    aria-role="tabpanel"
+  >
+    <view v-if="panel">
+      {{ panel }}
+    </view>
+    <slot />
+    <slot name="panel" />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-tab-panel`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ChildrenMixin(RELATION_MAP.TabPanel)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      active: false,
+      hide: true,
+      id: '',
+      hasActivated: false,
+      tools,
+    };
+  },
+  watch: {
+    label: 'update',
+    badgeProps: {
+      handler() {
+        this.update();
+      },
+      deep: true,
+    },
+    disabled: 'update',
+
+    icon: 'update',
+    panel: 'update',
+    value: 'update',
+
+    lazy: 'update',
+  },
+  methods: {
+    setParent(parent) {
+      this[RELATION_MAP.TabPanel] = parent;
+      if (!parent.children.includes(this)) {
+        parent.children.push(this);
+      }
+      parent.innerAfterLinked(this);
+    },
+    setId(id) {
+      this.id = id;
+    },
+    getComputedName() {
+      if (this.value != null) {
+        return `${this.value}`;
+      }
+      return `${this.dataIndex}`;
+    },
+    update() {
+      this[RELATION_MAP.TabPanel]?.updateTabs();
+    },
+
+    render(active, parent) {
+      this.initialized = this.initialized || active;
+
+      if (active && !this.hasActivated) {
+        this.hasActivated = true;
+      }
+
+      this.active = active;
+      this.hide = !parent.animation && !active;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tab-panel.css';
+</style>

package/dist/tab-panel/type.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TabValue } from '../tabs/type';
+
+export interface TdTabPanelProps {
+  /**
+   * 透传至 Badge 组件
+   * @default {}
+   */
+  badgeProps?: object;
+  /**
+   * 是否禁用当前选项卡
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * `1.0.0-rc.1`。图标，传对象则透传至 Icon
+   */
+  icon?: string | object;
+  /**
+   * 选项卡名称
+   * @default ''
+   */
+  label?: string;
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: boolean;
+  /**
+   * 用于自定义选项卡面板内容
+   */
+  panel?: string;
+  /**
+   * 选项卡的值，唯一标识
+   */
+  value?: TabValue;
+}

package/dist/tabs/README.en-US.md

@@ -0,0 +1,89 @@
+:: BASE_DOC ::
+
+## API
+
+### Tabs Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tabs/type.ts) | N
+bottom-line-mode | String | fixed | options: fixed/auto/full | N
+show-bottom-line | Boolean | true | \- | N
+space-evenly | Boolean | true | \- | N
+split | Boolean | true | \- | N
+sticky | Boolean | false | \- | N
+sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tabs/type.ts) | N
+swipeable | Boolean | true | \- | N
+theme | String | line | options: line/tag/card | N
+value | String / Number | - | `v-model:value` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tabs/type.ts) | N
+default-value | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tabs/type.ts) | N
+
+### Tabs Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: TabValue; label: string })` | \-
+click | `(context: { value: TabValue; label: string })` | \-
+scroll | `(context: { scrollTop: number, isFixed: boolean })` | \-
+
+### Tabs Slots
+
+name | Description
+-- | --
+\- | \-
+middle | \-
+
+### Tabs External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-active | \-
+t-class-content | \-
+t-class-item | \-
+t-class-track | \-
+
+
+### TabPanel Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | {} | \- | N
+disabled | Boolean | false | \- | N
+icon | String / Object | - | \- | N
+label | String | - | \- | N
+lazy | Boolean | false | Enable tab lazy loading | N
+panel | String | - | \- | N
+value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/tab-panel/type.ts) | N
+
+### TabPanel Slots
+
+name | Description
+-- | --
+\- | \-
+panel | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-border-color | @component-stroke | -
+--td-tab-font | @font-body-medium | -
+--td-tab-icon-size | 36rpx | -
+--td-tab-item-active-color | @brand-color | -
+--td-tab-item-color | @text-color-primary | -
+--td-tab-item-disabled-color | @text-color-disabled | -
+--td-tab-item-height | 96rpx | -
+--td-tab-item-tag-active-bg | @brand-color-light | -
+--td-tab-item-tag-bg | @bg-color-secondarycontainer | -
+--td-tab-item-tag-height | 64rpx | -
+--td-tab-item-vertical-height | 108rpx | -
+--td-tab-item-vertical-width | 208rpx | -
+--td-tab-nav-bg-color | @bg-color-container | -
+--td-tab-track-color | @brand-color | -
+--td-tab-track-radius | 8rpx | -
+--td-tab-track-thickness | 6rpx | -
+--td-tab-track-width | 32rpx | -