@tdesign/uniapp 0.8.0 → 0.9.0

package/dist/image/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-image />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TImage from '@tdesign/uniapp/image/image.vue';

package/dist/image-viewer/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-image-viewer />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TImageViewer from '@tdesign/uniapp/image-viewer/image-viewer.vue';

package/dist/index.js

@@ -1,3 +1,16 @@
 // This file is intentionally empty.
 // It serves as the runtime entry point for module resolvers.
 // All meaningful exports from this package are type-only.
+
+// mixins
+export { handlePageScroll } from './mixins/page-scroll';
+
+// 函数式调用
+export { default as DialogPlugin } from './dialog/index';
+export { default as Dialog } from './dialog/index';
+export { default as MessagePlugin } from './message/index';
+export { default as Message } from './message/index';
+export { default as Toast, showToast, hideToast } from './toast/index';
+export { default as ToastPlugin } from './toast/index';
+export { default as ActionSheetPlugin, ActionSheetTheme } from './action-sheet/index';
+export { default as ActionSheet } from './action-sheet/index';

package/dist/indexes/README.md

@@ -7,7 +7,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-indexes />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TIndexes from '@tdesign/uniapp/indexes/indexes.vue';

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/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-input />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TInput from '@tdesign/uniapp/input/input.vue';

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.js';
+import props from './props';
 
 
 const name = `${prefix}-input`;
@@ -205,9 +206,6 @@ export default {
         tools,
 
         dataValue: coalesce(this.value, this.defaultValue),
-
-      // rawValue: '',
-      // innerMaxLen: -1,
       };
     },
     watch: {
@@ -282,30 +280,7 @@ export default {
           this.dataValue = value;
           this.count = isDef(value) ? String(value).length : 0;
         }
-
-      // this.updateInnerMaxLen();
       },
-      // updateInnerMaxLen() {
-      // this.innerMaxLen = this.getInnerMaxLen();
-      // },
-      // getInnerMaxLen() {
-      //   const {
-      //     allowInputOverMax,
-      //     maxcharacter,
-      //     maxlength,
-      //     dataValue,
-      //     rawValue,
-      //     count,
-      //   } = this;
-      //   return getInnerMaxLen({
-      //     allowInputOverMax,
-      //     maxcharacter,
-      //     maxlength,
-      //     dataValue,
-      //     rawValue,
-      //     count,
-      //   });
-      // },
 
       updateClearIconVisible(value = false) {
         const { clearTrigger, disabled, readonly } = this;
@@ -370,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/link/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-link />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TLink from '@tdesign/uniapp/link/link.vue';

package/dist/loading/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-loading />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 
 ```js

package/dist/message/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-message />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TMessage from '@tdesign/uniapp/message/message.vue';
@@ -16,10 +18,13 @@ import TMessage from '@tdesign/uniapp/message/message.vue';
 
 ### 引入 API
 
-若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：
+若以 API 形式调用 Message，则需在页面中引入组件 API：
 
 ```js
-import Message from '@tdesign/uniapp/message/index';
+// MessagePlugin 和 Message 均可使用
+import { MessagePlugin } from '@tdesign/uniapp';
+// 或
+// import { Message } from '@tdesign/uniapp';
 ```
 
 ### 组件类型

package/dist/mixins/page-scroll.d.ts

@@ -0,0 +1,19 @@
+interface Bus {
+  on(evtName: string, listener: (...args: any[]) => void): void;
+  once(evtName: string, listener: (...args: any[]) => void): void;
+  emit(evtName: string, ...args: any[]): void;
+  off(evtName: string, listener?: (...args: any[]) => void): void;
+}
+
+export declare const bus: Bus;
+export declare const PAGE_SCROLL_EVENT_NAME: string;
+
+declare function pageScrollMixin(
+  funcName?: string,
+  useBus?: boolean,
+): Record<string, any>;
+
+export default pageScrollMixin;
+
+export declare function getScroller(el: Element, root?: Window): Element | Window;
+export declare function handlePageScroll(e: any): Bus;

package/dist/mixins/skyline.js

@@ -1,4 +1,4 @@
-import { getCurrentPage } from '../common/utils.js';
+import { getCurrentPage } from '../common/utils';
 
 export default {
   data() {

package/dist/navbar/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-navbar />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TNavbar from '@tdesign/uniapp/navbar/navbar.vue';

package/dist/notice-bar/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-notice-bar />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TNoticeBar from '@tdesign/uniapp/notice-bar/notice-bar.vue';

package/dist/overlay/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-overlay />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TOverlay from '@tdesign/uniapp/overlay/overlay.vue';

package/dist/picker/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-picker />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TPicker from '@tdesign/uniapp/picker/picker.vue';

package/dist/popover/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-popover />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TPopover from '@tdesign/uniapp/popover/popover.vue';

package/dist/popup/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-popup />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TPopup from '@tdesign/uniapp/popup/popup.vue';

package/dist/progress/README.md

@@ -9,9 +9,9 @@ isComponent: true
 
 ## 引入
 
-### 引入组件
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-progress />`。详细配置请参考 [快速开始](../getting-started)。
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+如需手动引入：
 
 ```js
 import TProgress from '@tdesign/uniapp/progress/progress.vue';

package/dist/pull-down-refresh/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-pull-down-refresh />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TPullDownRefresh from '@tdesign/uniapp/pull-down-refresh/pull-down-refresh.vue';

package/dist/qrcode/README.md

@@ -7,7 +7,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-qrcode />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TQRCode from '@tdesign/uniapp/qrcode/qrcode.vue';

package/dist/radio/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-radio />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TRadio from '@tdesign/uniapp/radio/radio.vue';

package/dist/rate/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-rate />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TRate from '@tdesign/uniapp/rate/rate.vue';

package/dist/rate/rate.css

@@ -60,6 +60,7 @@
   box-shadow: var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12));
   background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
   transform: translateX(-50%);
+  z-index: 2;
 }
 .t-rate__tips--bottom {
   top: calc(100% + 16rpx);

package/dist/result/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-result />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TResult from '@tdesign/uniapp/result/result.vue';

package/dist/search/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-search />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TSearch from '@tdesign/uniapp/search/search.vue';

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 | -