@tdesign/uniapp 0.8.1 → 0.9.1

package/dist/popup/popup.vue

@@ -67,15 +67,18 @@
   </view>
 </template>
 <script>
-import TOverlay from '../overlay/overlay';
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
+
+
+import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
 import { transitionMixins } from '../mixins/transition';
 import useCustomNavbar from '../mixins/using-custom-navbar';
-import tools from '../common/utils.wxs';
+import TOverlay from '../overlay/overlay';
+
 import popup from './computed.js';
+import props from './props';
 
 delete props.visible;
 

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

@@ -33,7 +33,7 @@ t-class-label | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-progress-info-dark-color | @text-color-primary | -
 --td-progress-info-light-color | @text-color-anti | -

package/dist/progress/README.md

@@ -68,7 +68,7 @@ t-class-label | 标签样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-progress-info-dark-color | @text-color-primary | -
 --td-progress-info-light-color | @text-color-anti | -

package/dist/progress/progress.vue

@@ -147,13 +147,12 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
-import { getBackgroundColor } from './utils';
+import { uniComponent } from '../common/src/index';
+
 import { unitConvert, isIOS as isIOSValidator } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
 
 import {
   STATUS,
@@ -168,6 +167,8 @@ import {
   getIOSAriaLabel,
   getAndroidAriaLabel,
 } from './computed.js';
+import props from './props';
+import { getBackgroundColor } from './utils';
 
 
 const name = `${prefix}-progress`;

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

@@ -55,6 +55,6 @@ t-class-text | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-pull-down-refresh-color | @text-color-placeholder | -

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

@@ -80,6 +80,6 @@ t-class-text | 文本样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-pull-down-refresh-color | @text-color-placeholder | -

package/dist/pull-down-refresh/pull-down-refresh.vue

@@ -60,17 +60,19 @@
   </scroll-view>
 </template>
 <script>
-import TLoading from '../loading/loading';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import { getRect, systemInfo, unitConvert } from '../common/utils';
 import tools from '../common/utils.wxs';
 import { getObserver } from '../common/wechat';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
+import TLoading from '../loading/loading';
 
 
 import usingConfig from '../mixins/using-config';
+
+import props from './props';
 const componentName = 'pull-down-refresh';
 const name = `${prefix}-${componentName}`;
 const defaultLoadingTexts = ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'];
@@ -345,7 +347,7 @@ export default {
       scrollToTop() {
         let parsed = false;
 
-        // #ifdef APP-PLUS || MP
+        // #ifdef APP || MP
         this.scrollTop = 0;
         setTimeout(() => {
           this.scrollTop = 0.01;

package/dist/qrcode/components/qrcode-canvas/qrcode-canvas.vue

@@ -15,13 +15,14 @@
 </template>
 
 <script>
-import props from './props';
-import useQRCode from '../../hooks/useQRCode';
+import { loadImage } from '../../../common/canvas/index';
+import { prefix } from '../../../common/config';
 import { DEFAULT_MINVERSION, excavateModules, isSupportPath2d, generatePath } from '../../../common/shared/qrcode/utils';
 import { uniComponent } from '../../../common/src/index';
-import { prefix } from '../../../common/config';
-import { loadImage } from '../../../common/canvas/index';
 import { getWindowInfo, nextTick } from '../../../common/utils';
+import useQRCode from '../../hooks/useQRCode';
+
+import props from './props';
 
 export default {
   ...uniComponent({
@@ -63,7 +64,7 @@ export default {
       },
       size() {
         let interval = 0;
-        // #ifdef APP-PLUS
+        // #ifdef APP
         interval = 33;
         // #endif
         setTimeout(() => {
@@ -239,7 +240,7 @@ export default {
           canvas.height = canvasSize;
           // 小程序环境：scale 计算方式（参考 TS 实现）
           scale = canvasSize / qrData.numCells;
-          // #ifdef APP-PLUS
+          // #ifdef APP
           scale /= pixelRatio;
           // #endif
           // #endif
@@ -297,7 +298,7 @@ export default {
             await this.drawIcon(qrData, pixelRatio);
           }
 
-          // #ifdef APP-PLUS
+          // #ifdef APP
           ctx.draw();
           // #endif
 

package/dist/qrcode/components/qrcode-status/qrcode-status.vue

@@ -51,10 +51,11 @@
 </template>
 
 <script>
+import { prefix } from '../../../common/config';
 import TIcon from '../../../icon/icon';
 import TLoading from '../../../loading/loading';
+
 import props from './props';
-import { prefix } from '../../../common/config';
 
 const name = `${prefix}-qrcode`;
 

package/dist/qrcode/qrcode.vue

@@ -36,14 +36,16 @@
 </template>
 
 <script>
-import QrcodeCanvas from './components/qrcode-canvas/qrcode-canvas.vue';
-import QrcodeStatus from './components/qrcode-status/qrcode-status.vue';
 import { prefix } from '../common/config';
-import props from './props';
+
 import { uniComponent } from '../common/src/index';
 import tools from '../common/utils.wxs';
 
 import usingConfig from '../mixins/using-config';
+
+import QrcodeCanvas from './components/qrcode-canvas/qrcode-canvas.vue';
+import QrcodeStatus from './components/qrcode-status/qrcode-status.vue';
+import props from './props';
 const componentName = 'qrcode';
 const name = `${prefix}-${componentName}`;
 

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

@@ -83,7 +83,7 @@ name | Description
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-radio-bg-color | @bg-color-container | -
 --td-radio-border-color | @component-stroke | -

package/dist/radio/README.md

@@ -129,7 +129,7 @@ change | `(context: { value: RadioValue })` | 选中值发生变化时触发
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-radio-bg-color | @bg-color-container | -
 --td-radio-border-color | @component-stroke | -

package/dist/radio/radio.vue

@@ -87,13 +87,14 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
 import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
-import { coalesce } from '../common/utils';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 import { uniComponent } from '../common/src/index';
-import props from './props';
+import { coalesce } from '../common/utils';
 import tools from '../common/utils.wxs';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import TIcon from '../icon/icon';
+
+import props from './props';
 
 
 const name = `${prefix}-radio`;

package/dist/radio-group/radio-group.vue

@@ -34,13 +34,14 @@
   </view>
 </template>
 <script>
-import TRadio from '../radio/radio';
 import { prefix } from '../common/config';
-import { coalesce } from '../common/utils';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
 import { uniComponent } from '../common/src/index';
-import props from './props';
+import { coalesce } from '../common/utils';
 import tools from '../common/utils.wxs';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
+import TRadio from '../radio/radio';
+
+import props from './props';
 
 
 const name = `${prefix}-radio-group`;

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

@@ -39,7 +39,7 @@ t-class-text | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-rate-icon-scale | 1.33 | -
 --td-rate-selected-color | @warning-color | -

package/dist/rate/README.md

@@ -98,7 +98,7 @@ t-class-text | 文本样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-rate-icon-scale | 1.33 | -
 --td-rate-selected-color | @warning-color | -

package/dist/rate/rate.vue

@@ -110,17 +110,20 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+
+import { parseEventDynamicCode } from '../common/event/dynamic';
+import { uniComponent } from '../common/src/index';
 import { unitConvert, getRect, coalesce } from '../common/utils';
 import tools from '../common/utils.wxs';
-import utils from './computed.js';
-import { parseEventDynamicCode } from '../common/event/dynamic';
+import TIcon from '../icon/icon';
 
 
 import usingConfig from '../mixins/using-config';
+
+import utils from './computed.js';
+
+import props from './props';
 const componentName = 'rate';
 const name = `${prefix}-${componentName}`;
 

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

@@ -33,7 +33,7 @@ t-class-title | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-result-description-color | @text-color-secondary | -
 --td-result-description-font | @font-body-medium | -

package/dist/result/README.md

@@ -76,7 +76,7 @@ t-class-title | 标题样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-result-description-color | @text-color-secondary | -
 --td-result-description-font | @font-body-medium | -

package/dist/result/result.vue

@@ -60,13 +60,14 @@
 </template>
 
 <script>
-import TIcon from '../icon/icon';
-import TImage from '../image/image';
-import { uniComponent } from '../common/src/index';
-import props from './props';
 import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
 import { calcIcon } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+
+import props from './props';
 
 
 const name = `${prefix}-result`;

package/dist/row/row.vue

@@ -7,12 +7,16 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
+
+
 import tools from '../common/utils.wxs';
+
 import { getRowStyles } from './computed.js';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
+import props from './props';
+
 
 const name = `${prefix}-row`;
 

package/dist/scroll-view/scroll-view.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
 // import { canUseProxyScrollView } from '../common/version';
 
 

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

@@ -69,7 +69,7 @@ t-class-left | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-search-action-color | @brand-color | -
 --td-search-bg-color | @bg-color-secondarycontainer | -

package/dist/search/README.md

@@ -109,7 +109,7 @@ t-class-left | 左侧图标样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-search-action-color | @brand-color | -
 --td-search-bg-color | @bg-color-secondarycontainer | -

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"
     >
@@ -102,14 +102,17 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
 import TCell from '../cell/cell';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
+
+
 import { getCharacterLength, nextTick } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+
 import { highLight } from './computed.js';
+import props from './props';
 // import { getInnerMaxLen } from '../input/utils';
 
 const name = `${prefix}-search`;
@@ -142,8 +145,8 @@ export default {
       return {
         classPrefix: name,
         prefix,
-        isShowResultList: false,
         isSelected: false,
+        isSearching: false,
         showClearIcon: false,
         tools,
 
@@ -156,16 +159,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,
@@ -205,7 +200,10 @@ export default {
 
         this.showClearIcon = value || String(clearTrigger) === 'always';
       },
-
+      emitChange(data) {
+        this.$emit('update:value', data.value);
+        this.$emit('change', data);
+      },
       onInput(e) {
         let { value } = e.detail;
         // this.rawValue = value;
@@ -221,7 +219,7 @@ export default {
 
         nextTick().then(() => {
           this.dataValue = value;
-          this.$emit('change', {
+          this.emitChange({
             value,
             trigger: 'input-change',
           });
@@ -231,6 +229,7 @@ export default {
 
       onFocus(e) {
         const { value } = e.detail;
+        this.isSearching = true;
         this.updateClearIconVisible(true);
         this.$emit('focus', { value });
       },
@@ -243,11 +242,12 @@ export default {
 
       handleClear() {
         this.dataValue = '';
-        this.$emit('clear', { value: '' });
-        this.$emit('change', {
+        this.isSearching = false;
+        this.emitChange({
           value: '',
           trigger: 'clear',
         });
+        this.$emit('clear', { value: '' });
       },
 
       onConfirm(e) {
@@ -256,6 +256,7 @@ export default {
       },
 
       onActionClick() {
+        this.isSearching = false;
         this.$emit('action-click');
       },
 
@@ -263,8 +264,7 @@ export default {
         const item = this.resultList[index];
         this.dataValue = item;
         this.isSelected = true;
-
-        this.$emit('change', {
+        this.emitChange({
           value: item,
           trigger: 'option-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 | -