@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/switch/switch.vue

@@ -0,0 +1,122 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="tClass + ' ' + classPrefix"
+    :aria-checked="checked"
+    :aria-disabled="disabled"
+    aria-role="switch"
+    @click="handleSwitch"
+  >
+    <view :class="tools.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size]) + ' ' + tClassBody">
+      <view
+        :class="
+          tools.cls(classPrefix + '__dot', [['checked', checked], ['disabled', disabled], ['plain', label.length != 2 && icon.length != 2 && !loading], size]) +
+            ' ' +
+            tClassDot
+        "
+        :aria-hidden="true"
+      >
+        <view
+          v-if="label"
+          :class="tools.cls(classPrefix + '__label', [['checked', checked], ['disabled', disabled], size]) + ' ' + tClassLabel"
+        >
+          <t-loading
+            v-if="loading"
+            inherit-color
+            size="32rpx"
+          />
+          <text v-else-if="label.length == 2">
+            {{ checked ? label[0] : label[1] }}
+          </text>
+          <t-icon
+            v-else-if="icon.length == 2"
+            :name="checked ? icon[0] : icon[1]"
+            :t-class="tools.cls(classPrefix + '__icon', [['checked', checked], size])"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TLoading from '../loading/loading';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-switch`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-label`,
+    `${prefix}-class-body`,
+    `${prefix}-class-dot`,
+  ],
+  components: {
+    TIcon,
+    TLoading,
+  },
+  props: {
+    ...props,
+  },
+  emits: ['change'],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      checked: false,
+      tools,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler(val) {
+        const [activeValue] = this.customValue;
+
+        this.checked = val === activeValue;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleSwitch() {
+      const { loading, disabled, dataValue, customValue } = this;
+      const [activeValue, inactiveValue] = customValue;
+      if (loading || disabled) return;
+
+      this._trigger('change', {
+        value: dataValue === activeValue ? inactiveValue : activeValue,
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './switch.css';
+</style>

package/dist/switch/type.ts

@@ -0,0 +1,51 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSwitchProps<T = SwitchValue> {
+  /**
+   * 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']
+   * @default [true, false]
+   */
+  customValue?: Array<SwitchValue>;
+  /**
+   * 是否禁用组件。优先级：Switch.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 开关的图标；[打开时的图标，关闭时的图标]
+   * @default []
+   */
+  icon?: string[];
+  /**
+   * 开关内容，[开启时内容，关闭时内容]。示例：['开', '关']
+   * @default []
+   */
+  label?: string[];
+  /**
+   * 是否处于加载中状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 开关尺寸
+   * @default medium
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * 开关值
+   */
+  value?: SwitchValue;
+  /**
+   * 开关值，非受控属性
+   */
+  defaultValue?: SwitchValue;
+  /**
+   * 数据发生变化时触发
+   */
+  onChange?: (context: { value: SwitchValue }) => void;
+}
+
+export type SwitchValue = string | number | boolean;

package/dist/tab-bar/README.en-US.md

@@ -0,0 +1,58 @@
+:: BASE_DOC ::
+
+## API
+
+### TabBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+bordered | Boolean | true | \- | N
+fixed | Boolean | true | \- | N
+placeholder | Boolean | false | \- | N
+safe-area-inset-bottom | Boolean | true | \- | N
+shape | String | normal | options: normal/round | N
+split | Boolean | true | \- | N
+theme | String | normal | options: normal/tag | N
+value | String / Number / Array | - | `v-model:value` is supported。Typescript: `string \| number \| Array<string \| number>` | N
+default-value | String / Number / Array | - | uncontrolled property。Typescript: `string \| number \| Array<string \| number>` | N
+z-index | Number | 1 | \- | N
+
+### TabBar External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+
+### TabBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | {} | Typescript: `BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
+icon | String / Object | - | \- | N
+sub-tab-bar | Array | - | Typescript: `SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
+value | String / Number | - | \- | N
+
+### TabBarItem Slots
+
+name | Description
+-- | --
+icon | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-bar-bg-color | @bg-color-container | -
+--td-tab-bar-border-color | @border-level-1-color | -
+--td-tab-bar-round-shadow | @shadow-3 | -
+--td-tab-bar-active-bg | @brand-color-light | -
+--td-tab-bar-active-color | @brand-color | -
+--td-tab-bar-color | @text-color-primary | -
+--td-tab-bar-height | 80rpx | -
+--td-tab-bar-hover-bg-color | rgba(0, 0, 0, 0.05) | -
+--td-tab-bar-spread-border-color | @border-color | -
+--td-tab-bar-spread-shadow | @shadow-3 | -

package/dist/tab-bar/README.md

@@ -0,0 +1,104 @@
+---
+title: TabBar 标签栏
+description: 用于在不同功能模块之间进行快速切换，位于页面底部。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TTabBar from '@tdesign/uniapp/tab-bar/tab-bar.vue';
+import TTabBarItem from '@tdesign/uniapp/tab-bar-item/tab-bar-item.vue';
+```
+
+### 组件类型
+#### 纯文本标签栏
+
+{{ text-only }}
+
+#### 图标加文字标签栏
+
+{{ base }}
+
+#### 纯图标标签栏
+
+{{ icon-only }}
+
+#### 双层级纯文本标签栏
+
+{{ sub }}
+
+### 组件样式
+
+#### 弱选中标签栏
+
+{{ badge }}
+
+#### 悬浮胶囊标签栏
+
+{{ round }}
+
+#### 自定义主题
+
+{{ custom }}
+
+## API
+
+### TabBar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+bordered | Boolean | true | 是否显示外边框 | N
+fixed | Boolean | true | 是否固定在底部 | N
+placeholder | Boolean | false | 固定在底部时是否开启占位 | N
+safe-area-inset-bottom | Boolean | true | 是否开启底部安全区适配 | N
+shape | String | normal | 标签栏的形状。可选项：normal/round | N
+split | Boolean | true | 是否需要分割线 | N
+theme | String | normal | 选项风格。可选项：normal/tag | N
+value | String / Number / Array | - | 当前选中标签的索引。支持语法糖 `v-model:value`。TS 类型：`string \| number \| Array<string \| number>` | N
+default-value | String / Number / Array | - | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array<string \| number>` | N
+z-index | Number | 1 | 标签栏层级 | N
+
+### TabBar External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+
+### TabBarItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | {} | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
+icon | String / Object | - | 图标名称。传入对象时透传至 Icon 组件 | N
+sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
+value | String / Number | - | 标识符 | N
+
+### TabBarItem Slots
+
+名称 | 描述
+-- | --
+icon | 图标插槽，用于自定义图标区域内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tab-bar-bg-color | @bg-color-container | -
+--td-tab-bar-border-color | @border-level-1-color | -
+--td-tab-bar-round-shadow | @shadow-3 | -
+--td-tab-bar-active-bg | @brand-color-light | -
+--td-tab-bar-active-color | @brand-color | -
+--td-tab-bar-color | @text-color-primary | -
+--td-tab-bar-height | 80rpx | -
+--td-tab-bar-hover-bg-color | rgba(0, 0, 0, 0.05) | -
+--td-tab-bar-spread-border-color | @border-color | -
+--td-tab-bar-spread-shadow | @shadow-3 | -

package/dist/tab-bar/props.ts

@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTabBarProps } from './type';
+export default {
+  /** 是否显示外边框 */
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否固定在底部 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 固定在底部时是否开启占位 */
+  placeholder: Boolean,
+  /** 是否开启底部安全区适配 */
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标签栏的形状 */
+  shape: {
+    type: String,
+    default: 'normal' as TdTabBarProps['shape'],
+    validator(val: TdTabBarProps['shape']): boolean {
+      if (!val) return true;
+      return ['normal', 'round'].includes(val);
+    },
+  },
+  /** 是否需要分割线 */
+  split: {
+    type: Boolean,
+    default: true,
+  },
+  /** 选项风格 */
+  theme: {
+    type: String,
+    default: 'normal' as TdTabBarProps['theme'],
+    validator(val: TdTabBarProps['theme']): boolean {
+      if (!val) return true;
+      return ['normal', 'tag'].includes(val);
+    },
+  },
+  /** 当前选中标签的索引 */
+  value: {
+    type: [String, Number, Array],
+  },
+  /** 当前选中标签的索引，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Array],
+  },
+  /** 标签栏层级 */
+  zIndex: {
+    type: Number,
+    default: 1,
+  },
+};

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

@@ -0,0 +1,42 @@
+.t-tab-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  position: relative;
+  background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+.t-tab-bar--normal.t-tab-bar--border::before {
+  z-index: 1;
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid var(--td-tab-bar-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
+  transform: scaleY(0.5);
+  transform-origin: 0 0;
+}
+.t-tab-bar--fixed {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.t-tab-bar--normal.t-tab-bar--safe {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.t-tab-bar--round {
+  margin-left: 32rpx;
+  margin-right: 32rpx;
+  border-radius: 999px;
+  box-shadow: var(--td-tab-bar-round-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--fixed.t-tab-bar--round.t-tab-bar--safe {
+  bottom: constant(safe-area-inset-bottom);
+  bottom: env(safe-area-inset-bottom);
+}

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

@@ -0,0 +1,141 @@
+<template>
+  <!-- #ifdef VUE2 -->
+  <view>
+    <!-- #endif -->
+    <view
+      v-if="fixed && placeholder"
+      :class="classPrefix + '__placeholder'"
+      :style="'height: ' + placeholderHeight + 'px;'"
+    />
+    <view
+      :style="tools._style(['z-index: ' + zIndex, customStyle])"
+      :class="tools.cls(classPrefix, [
+        ['border', bordered], ['fixed', fixed],
+        ['safe', safeAreaInsetBottom], shape]
+      ) + ' ' + tClass"
+      aria-role="tablist"
+    >
+      <slot />
+    </view>
+  <!-- #ifdef VUE2 -->
+  </view>
+  <!-- #endif -->
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { coalesce, getRect, nextTick } from '../common/utils';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import tools from '../common/utils.wxs';
+
+const classPrefix = `${prefix}-tab-bar`;
+
+
+export default uniComponent({
+  name: classPrefix,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'value',
+    event: 'change',
+  }],
+  externalClasses: [`${prefix}-class`],
+  mixins: [ParentMixin(RELATION_MAP.TabBarItem)],
+  props: {
+    ...props,
+  },
+  emits: [
+    'change',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix,
+      tools,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(e) {
+        this.dataValue = e;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler() {
+        this.updateChildren();
+      },
+      immediate: true,
+    },
+    'fixed'() {
+      this.setPlaceholderHeight();
+    },
+    placeholder() {
+      this.setPlaceholderHeight();
+    },
+  },
+  mounted() {
+    this.setPlaceholderHeight();
+    this.showChildren();
+  },
+  methods: {
+    setPlaceholderHeight() {
+      if (!this.fixed || !this.placeholder) {
+        return;
+      }
+      nextTick().then(() => {
+        getRect(this, `.${classPrefix}`).then((res) => {
+          this.placeholderHeight = res.height;
+        });
+      });
+    },
+    showChildren() {
+      const { dataValue } = this;
+
+      this.children.forEach((child) => {
+        this.crowded = this.children.length > 3;
+
+        if (child.value === dataValue) {
+          child.showSpread();
+        }
+      });
+    },
+
+    updateChildren() {
+      const { dataValue } = this;
+
+      this.children?.forEach((child) => {
+        child.checkActive(dataValue);
+      });
+    },
+
+    updateValue(value) {
+      this._trigger('change', { value });
+    },
+
+    changeOtherSpread(value) {
+      this.children.forEach((child) => {
+        if (child.value !== value) {
+          child.closeSpread();
+        }
+      });
+    },
+
+    initName() {
+      return (this.backupValue += 1);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tab-bar.css';
+/* #ifndef MP-WEIXIN */
+:deep(t-tab-bar-item) {
+  flex: 1;
+}
+/* #endif */
+</style>

package/dist/tab-bar/type.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdTabBarProps {
+  /**
+   * 是否显示外边框
+   * @default true
+   */
+  bordered?: boolean;
+  /**
+   * 是否固定在底部
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 固定在底部时是否开启占位
+   * @default false
+   */
+  placeholder?: boolean;
+  /**
+   * 是否开启底部安全区适配
+   * @default true
+   */
+  safeAreaInsetBottom?: boolean;
+  /**
+   * 标签栏的形状
+   * @default normal
+   */
+  shape?: 'normal' | 'round';
+  /**
+   * 是否需要分割线
+   * @default true
+   */
+  split?: boolean;
+  /**
+   * 选项风格
+   * @default normal
+   */
+  theme?: 'normal' | 'tag';
+  /**
+   * 当前选中标签的索引
+   */
+  value?: string | number | Array<string | number>;
+  /**
+   * 当前选中标签的索引，非受控属性
+   */
+  defaultValue?: string | number | Array<string | number>;
+  /**
+   * 标签栏层级
+   * @default 1
+   */
+  zIndex?: number;
+}

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

@@ -0,0 +1,25 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 图标右上角提示信息 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 图标名称。传入对象时透传至 Icon 组件 */
+  icon: {
+    type: [String, Object],
+  },
+  /** 二级菜单 */
+  subTabBar: {
+    type: Array,
+  },
+  /** 标识符 */
+  value: {
+    type: [String, Number],
+  },
+};