@tdesign/uniapp 0.8.1 → 0.9.0

package/dist/form-item/form-item.vue

@@ -5,19 +5,24 @@
   >
     <view :class="formItemClass + '-wrap ' + formItemClass + '--' + dataLabelAlign + ' ' + tClassWrap">
       <!-- 标签区域 -->
-      <view
-        v-if="label"
-        :class="labelClass + ' ' + labelClass + '--' + dataLabelAlign
-          + (dataRequiredMark ? ' ' + labelClass + '--required' : '')
-          + (dataRequiredMark && requiredMarkPosition === 'right' ? ' ' + labelClass + '--required-right' : '')
-          + ' ' + tClassLabel"
-        :style="'width: ' + dataLabelWidth"
-      >
-        <label :for="forId">{{ label }}</label>
-        <template v-if="colon">
-          {{ globalConfig.colonText }}
-        </template>
-      </view>
+      <slot name="label">
+        <view
+          v-if="label"
+          :class="labelClass + ' ' + labelClass + '--' + dataLabelAlign
+            + (dataRequiredMark ? ' ' + labelClass + '--required' : '')
+            + (dataRequiredMark && requiredMarkPosition === 'right' ? ' ' + labelClass + '--required-right' : '')
+            + ' ' + tClassLabel"
+          :style="'width: ' + dataLabelWidth"
+        >
+          <label
+            :class="labelClass + '-text'"
+            :for="forId"
+          >{{ label }}</label>
+          <template v-if="colon">
+            {{ globalConfig.colonText }}
+          </template>
+        </view>
+      </slot>
 
       <!-- 内容区域 -->
       <view :class="formClass + '__controls ' + errorClasses + ' ' + tClassControls">
@@ -28,12 +33,14 @@
           <slot />
         </view>
         <!-- 帮助信息 -->
-        <view
-          v-if="help"
-          :class="formItemClass + '-help ' + formClass + '__controls--' + dataContentAlign + ' ' + tClassHelp"
-        >
-          {{ help }}
-        </view>
+        <slot name="help">
+          <view
+            v-if="help"
+            :class="formItemClass + '-help ' + formClass + '__controls--' + dataContentAlign + ' ' + tClassHelp"
+          >
+            {{ help }}
+          </view>
+        </slot>
 
         <!-- 校验提示信息 -->
         <view
@@ -162,14 +169,14 @@ export default {
         const formRules = target.rules?.[this.name];
         const isRequired = formRules?.some(rule => rule.required);
 
-        this.dataRules = formRules;
+        this.dataRules = formRules || [];
         this.colon = target.colon;
         this.dataLabelAlign = labelAlign || target.labelAlign;
         this.dataLabelWidth = normalizeLabelWidth(labelWidth || target.labelWidth);
         this.dataContentAlign = contentAlign || target.contentAlign;
         this.dataRequiredMark = requiredMark || target.requiredMark || globalConfig.requiredMark || isRequired;
         this.dataShowErrorMessage = typeof showErrorMessage === 'boolean' ? showErrorMessage : target.showErrorMessage;
-        this.requiredMarkPosition = target.requiredMarkPosition || globalConfig.requiredMarkPosition;
+        this.requiredMarkPosition = target.requiredMarkPosition || globalConfig.requiredMarkPosition || 'left';
       },
       innerAfterUnlinked() {
         if (this.form) {

package/dist/indexes/computed.js

@@ -1,4 +1,8 @@
-export function getFirstCharacter(str) {
-  return str.toString().substring(0, 1);
+export function getFirstCharacter(str, showFullIndex) {
+  const res = str.toString();
+  if (showFullIndex) {
+    return res;
+  }
+  return res.substring(0, 1);
 }
 

package/dist/indexes/indexes.css

@@ -5,17 +5,22 @@
 .t-indexes__sidebar {
   position: fixed;
   right: var(--td-indexes-sidebar-right, 16rpx);
-  width: var(--td-indexes-sidebar-item-size, 40rpx);
   color: var(--td-indexes-sidebar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
   font: var(--td-indexes-sidebar-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex-flow: column nowrap;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
 }
 .t-indexes__sidebar-item {
-  border-radius: 50%;
+  min-width: var(--td-indexes-sidebar-item-size, 40rpx);
+  height: var(--td-indexes-sidebar-item-size, 40rpx);
+  padding: 0 calc(var(--td-spacer, 16rpx) / 2);
+  box-sizing: border-box;
+  border-radius: var(--td-indexes-sidebar-item-size, 40rpx);
   position: relative;
   text-align: center;
 }

package/dist/indexes/indexes.vue

@@ -22,7 +22,7 @@
           aria-role="button"
           :aria-label="dataCurrent === item ? '已选中' + item : ''"
         >
-          {{ getFirstCharacter(item) }}
+          {{ getFirstCharacter(item, showFullIndex) }}
         </view>
 
         <view

package/dist/indexes/props.ts

@@ -17,6 +17,11 @@ export default {
   indexList: {
     type: Array,
   },
+  /** 索引是否完整展示 */
+  showFullIndex: {
+    type: Boolean,
+    default: false,
+  },
   /** 索引是否吸顶，默认为true */
   sticky: {
     type: Boolean,

package/dist/indexes/type.ts

@@ -17,6 +17,11 @@ export interface TdIndexesProps {
    * 索引字符列表。不传默认 `A-Z`
    */
   indexList?: Array<string | number>;
+  /**
+   * 索引是否完整展示
+   * @default false
+   */
+  showFullIndex?: Boolean;
   /**
    * 索引是否吸顶，默认为true
    * @default true

package/dist/input/input.vue

@@ -143,15 +143,16 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { RELATION_MAP } from '../common/relation/parent-map';
+import { uniComponent } from '../common/src/index';
 import { getCharacterLength, calcIcon, coalesce, nextTick } from '../common/utils';
+import tools from '../common/utils.wxs';
 import { isDef } from '../common/validator';
+import TIcon from '../icon/icon';
+
 import { getInputClass } from './computed.js';
-import tools from '../common/utils.wxs';
-import { RELATION_MAP } from '../common/relation/parent-map';
+import props from './props';
 
 
 const name = `${prefix}-input`;
@@ -344,8 +345,9 @@ export default {
       },
 
       clearInput(e) {
+        this.updateValue('');
+        this.emitChange({ value: this.dataValue });
         this.$emit('clear', e.detail);
-        this.dataValue = '';
       },
 
       onKeyboardHeightChange(e) {

package/dist/search/search.css

@@ -67,6 +67,11 @@
 :deep(.t-search__result-item--highLight) {
   color: var(--td-search-result-high-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
 }
+.t-search__result-list {
+  max-height: 560rpx;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
 .t-search__result-list :deep(.t-search__result-item) {
   padding-left: 0;
 }

package/dist/search/search.vue

@@ -77,7 +77,7 @@
       />
     </view>
     <view
-      v-if="isShowResultList && !isSelected"
+      v-if="isSearching && resultList.length > 0 && !isSelected"
       :class="classPrefix + '__result-list'"
       aria-role="listbox"
     >
@@ -142,8 +142,8 @@ export default {
       return {
         classPrefix: name,
         prefix,
-        isShowResultList: false,
         isSelected: false,
+        isSearching: false,
         showClearIcon: false,
         tools,
 
@@ -156,16 +156,8 @@ export default {
       resultList: {
         handler(val) {
           const { isSelected } = this;
-          if (val.length) {
-            if (isSelected) {
-              // 已选择
-              this.isShowResultList = false;
-              this.isSelected = false;
-            } else {
-              this.isShowResultList = true;
-            }
-          } else {
-            this.isShowResultList = false;
+          if (val.length && isSelected) {
+            this.isSelected = false;
           }
         },
         immediate: true,
@@ -231,6 +223,7 @@ export default {
 
       onFocus(e) {
         const { value } = e.detail;
+        this.isSearching = true;
         this.updateClearIconVisible(true);
         this.$emit('focus', { value });
       },
@@ -243,6 +236,7 @@ export default {
 
       handleClear() {
         this.dataValue = '';
+        this.isSearching = false;
         this.$emit('clear', { value: '' });
         this.$emit('change', {
           value: '',
@@ -256,6 +250,7 @@ export default {
       },
 
       onActionClick() {
+        this.isSearching = false;
         this.$emit('action-click');
       },
 

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

@@ -0,0 +1,42 @@
+:: BASE_DOC ::
+
+## API
+
+### Segmented Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+block | Boolean | false | \- | N
+disabled | Boolean | - | \- | N
+options | Object | [] | Typescript: `string[] \| number[] \| SegmentedItem[] ` `interface SegmentedItem { value: string \| number; label?: string; icon?: string \| object; disabled?: boolean }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/segmented/type.ts) | N
+value | String / Number | - | `v-model:value` is supported | N
+default-value | String / Number | - | uncontrolled property | N
+
+### Segmented Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: string \| number, selectedOption: SegmentedItem })` | \-
+
+### Segmented External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-item | \-
+t-class-thumb | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-font-size-m | 32rpx | -
+--td-segmented-bg-color | @bg-color-component-disabled | -
+--td-segmented-item-active-bg | @bg-color-container | -
+--td-segmented-item-active-color | @brand-color | -
+--td-segmented-item-color | @text-color-primary | -
+--td-segmented-item-disabled-color | @text-color-disabled | -
+--td-segmented-item-label-font | @font-body-medium | -
+--td-segmented-transition | all @anim-duration-base @anim-time-fn-easing | -

package/dist/segmented/README.md

@@ -0,0 +1,75 @@
+---
+title: Segmented 分段控制器
+description: 用于展示多个选项并允许用户选择其中单个选项。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-segmented />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
+
+```js
+import TSegmented from '@tdesign/uniapp/segmented/segmented.vue';
+```
+
+### 组件类型
+
+基础
+
+{{ base }}
+
+自适应宽度
+
+{{ block }}
+
+### 组件状态
+
+控制器禁用态
+
+{{ disabled }}
+
+
+## API
+
+### Segmented Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+block | Boolean | false | 是否撑满父元素宽度 | N
+disabled | Boolean | - | 是否禁用 | N
+options | Object | [] | 数据化配置选项内容。TS 类型：`string[] \| number[] \| SegmentedItem[] ` `interface SegmentedItem { value: string \| number; label?: string; icon?: string \| object; disabled?: boolean }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/segmented/type.ts) | N
+value | String / Number | - | 当前选中的值。支持语法糖 `v-model:value` | N
+default-value | String / Number | - | 当前选中的值。非受控属性 | N
+
+### Segmented Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: string \| number, selectedOption: SegmentedItem })` | 选项值发生变化时触发
+
+### Segmented External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-item | 列表子项样式类
+t-class-thumb | 动画背景样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-font-size-m | 32rpx | -
+--td-segmented-bg-color | @bg-color-component-disabled | -
+--td-segmented-item-active-bg | @bg-color-container | -
+--td-segmented-item-active-color | @brand-color | -
+--td-segmented-item-color | @text-color-primary | -
+--td-segmented-item-disabled-color | @text-color-disabled | -
+--td-segmented-item-label-font | @font-body-medium | -
+--td-segmented-transition | all @anim-duration-base @anim-time-fn-easing | -

package/dist/segmented/props.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSegmentedProps } from './type';
+export default {
+  /** 是否撑满父元素宽度 */
+  block: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 数据化配置选项内容 */
+  options: {
+    type: Object,
+    default: (): TdSegmentedProps['options'] => [],
+  },
+  /** 当前选中的值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 当前选中的值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 选项值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/segmented/segmented.css

@@ -0,0 +1,66 @@
+.t-segmented {
+  display: inline-block;
+  padding: calc(var(--td-spacer, 16rpx) / 4);
+  background-color: var(--td-segmented-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
+  border-radius: calc(var(--td-spacer, 16rpx) / 2);
+}
+.t-segmented--block {
+  display: flex;
+  width: 100%;
+}
+.t-segmented--block .t-segmented__item {
+  flex: 1;
+  min-width: 0;
+}
+.t-segmented--block .t-segmented__item-inner {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-segmented__group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+}
+.t-segmented__thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: var(--td-segmented-item-active-bg, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  border-radius: calc(var(--td-spacer, 16rpx) / 2);
+  transition: var(--td-segmented-transition, all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1)));
+  will-change: transform, width;
+}
+.t-segmented__item {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  padding: calc(var(--td-spacer-1, 24rpx) / 4) var(--td-spacer-1, 24rpx);
+  text-align: center;
+  cursor: pointer;
+  font: var(--td-segmented-item-label-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-segmented-item-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-segmented__item-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+:deep(.t-segmented__item-icon:not(:empty)) {
+  margin-right: calc(var(--td-spacer, 16rpx) / 2);
+}
+.t-segmented__item-icon {
+  font-size: var(--td-font-size-m, 32rpx);
+}
+.t-segmented__item--active {
+  font-weight: 600;
+  color: var(--td-segmented-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-segmented__item--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--td-segmented-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}

package/dist/segmented/segmented.vue

@@ -0,0 +1,174 @@
+<template>
+  <view
+    :class="'' + tools.cls(classPrefix, [['block', block]]) + ' ' + tClass"
+    :style="'' + tools._style([customStyle])"
+  >
+    <view :class="classPrefix + '__group'">
+      <!-- thumb 动画背景 -->
+      <view
+        :class="classPrefix + '__thumb ' + tClassThumb"
+        :style="thumbStyle"
+      />
+
+      <!-- 选项列表 -->
+      <view
+        v-for="(item, index) in segmentItems"
+        :key="index"
+        :class="'' + tools.cls(classPrefix + '__item', [
+          ['active', index === activeIndex],
+          ['disabled', disabled || item.disabled]
+        ]) + ' ' + classPrefix + '-item-' + index + ' ' + tClassItem"
+        @click="handleSelect(index)"
+      >
+        <view :class="classPrefix + '__item-inner'">
+          <block
+            v-if="item.icon"
+            name="icon"
+          >
+            <t-icon
+              :name="item.icon.name || item.icon"
+              :t-class="classPrefix + '__item-icon'"
+            />
+          </block>
+          <span
+            v-if="item.label"
+            :class="classPrefix + '__item-label'"
+          >{{ item.label }}</span>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon, getRect, coalesce } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+const name = `${prefix}-segmented`;
+
+export default {
+  components: {
+    TIcon,
+  },
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
+      },
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-thumb`,
+      `${prefix}-class-item`,
+    ],
+    props: {
+      ...props,
+    },
+    emits: ['change'],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+        segmentItems: [],
+        activeIndex: -1,
+        thumbStyle: '',
+
+        dataValue: coalesce(this.value, this.defaultValue),
+      };
+    },
+    watch: {
+      options: {
+        handler(newOptions) {
+          this.updateOptions(newOptions);
+        },
+        immediate: true,
+      },
+      value: {
+        handler(val) {
+          this.dataValue = val;
+        },
+      },
+      dataValue: {
+        handler() {
+          this.updateActiveIndex();
+        },
+        immediate: true,
+      },
+      segmentItems() {
+        this.updateActiveIndex();
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.updateThumb();
+      });
+    },
+    methods: {
+      updateOptions(options) {
+        if (!options?.length) return;
+        const segmentItems = options.map((option) => {
+          if (typeof option === 'string' || typeof option === 'number') {
+            return { value: option, label: String(option) };
+          }
+          return {
+            ...option,
+            label: option.label ?? String(option.value),
+            icon: option.icon ? calcIcon(option.icon) : null,
+          };
+        });
+        this.segmentItems = segmentItems;
+      },
+
+      updateActiveIndex() {
+        const { dataValue, segmentItems } = this;
+        let activeIndex = -1;
+        if (dataValue != null) {
+          activeIndex = segmentItems.findIndex(item => item.value === dataValue);
+        }
+        if (activeIndex === this.activeIndex) return;
+        this.activeIndex = activeIndex;
+        this.$nextTick(() => {
+          this.updateThumb();
+        });
+      },
+
+      updateThumb() {
+        const { activeIndex, classPrefix } = this;
+        if (activeIndex < 0) return;
+        const groupClass = `.${classPrefix}__group`;
+        const itemClass = `.${classPrefix}-item-${activeIndex}`;
+        Promise.all([
+          getRect(this, itemClass),
+          getRect(this, groupClass),
+        ]).then(([itemRect, groupRect]) => {
+          if (itemRect && groupRect) {
+            const left = itemRect.left - groupRect.left;
+            this.thumbStyle = `width: ${itemRect.width}px; transform: translateX(${left}px);`;
+          }
+        });
+      },
+
+      handleSelect(index) {
+        const { segmentItems, activeIndex, disabled, options } = this;
+        const item = segmentItems[index];
+        if (disabled || !item || item.disabled) return;
+        if (index === activeIndex) return;
+        this._trigger('change', {
+          value: item.value,
+          selectedOption: options[index],
+        });
+      },
+    },
+  }),
+};
+</script>
+<style scoped src="./segmented.css"></style>

package/dist/segmented/type.ts

@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSegmentedProps {
+  /**
+   * 是否撑满父元素宽度
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 数据化配置选项内容
+   * @default []
+   */
+  options?: string[] | number[] | SegmentedItem[];
+  /**
+   * 当前选中的值
+   */
+  value?: string | number;
+  /**
+   * 当前选中的值，非受控属性
+   */
+  defaultValue?: string | number;
+  /**
+   * 选项值发生变化时触发
+   */
+  onChange?: (context: { value: string | number; selectedOption: SegmentedItem }) => void;
+}
+
+export interface SegmentedItem {
+  value: string | number;
+  label?: string;
+  icon?: string | object;
+  disabled?: boolean;
+}