@tdesign/uniapp 0.8.1 → 0.9.1

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,177 @@
+<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 { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
+
+
+import { calcIcon, getRect, coalesce } from '../common/utils';
+import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+
+import props from './props';
+
+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;
+}

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

@@ -44,7 +44,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-side-bar-bg-color | @bg-color-secondarycontainer | -
 --td-side-bar-height | 100% | -

package/dist/side-bar/README.md

@@ -77,7 +77,7 @@ value | String / Number | - | 当前选项的值 | N
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-side-bar-bg-color | @bg-color-secondarycontainer | -
 --td-side-bar-height | 100% | -

package/dist/side-bar/side-bar.vue

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

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

@@ -68,12 +68,13 @@
 </template>
 <script>
 import TBadge from '../badge/badge';
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
-import tools from '../common/utils.wxs';
 import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
+import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+
+import props from './props';
 
 
 const name = `${prefix}-side-bar-item`;
@@ -118,8 +119,8 @@ export default {
 
         return tools._style([
           {
-            fontSize: 'var(--td-side-bar-icon-size, 20px)',
-            marginRight: '2px',
+            fontSize: 'var(--td-side-bar-icon-size, 40rpx)',
+            marginRight: '4rpx',
           },
           this.innerIcon.style || '',
         ]);

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

@@ -30,7 +30,7 @@ t-class-row | \-
 ### 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-skeleton-circle-border-radius | @skeleton-circle-border-radius | -
 --td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | -

package/dist/skeleton/README.md

@@ -70,7 +70,7 @@ t-class-row | 列样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-skeleton-circle-border-radius | @skeleton-circle-border-radius | -
 --td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | -

package/dist/skeleton/skeleton.vue

@@ -35,12 +35,15 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
+
+
 import { classNames } from '../common/utils';
-import { isInteger, isNumeric } from '../common/validator';
 import tools from '../common/utils.wxs';
+import { isInteger, isNumeric } from '../common/validator';
+
+import props from './props';
 
 
 const name = `${prefix}-skeleton`;

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

@@ -43,7 +43,7 @@ t-class-cursor | \-
 ### 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-slider-active-color | @brand-color | -
 --td-slider-bar-height | 8rpx | -

package/dist/slider/README.md

@@ -109,7 +109,7 @@ t-class-cursor | 游标样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-slider-active-color | @brand-color | -
 --td-slider-bar-height | 8rpx | -

package/dist/slider/slider.vue

@@ -191,16 +191,18 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
+import Bus from '../common/bus';
 import { prefix } from '../common/config';
-import { trimSingleValue, trimValue } from './tool';
-import props from './props';
+import { uniComponent } from '../common/src/index';
 import { getRect, coalesce, nextTick } from '../common/utils';
-import Bus from '../common/bus';
 import tools from '../common/utils.wxs';
-import { getValue } from './computed.js';
+
 import { isString, isFunction } from '../common/validator';
 
+import { getValue } from './computed.js';
+import props from './props';
+import { trimSingleValue, trimValue } from './tool';
+
 
 const name = `${prefix}-slider`;
 

package/dist/step-item/step-item.vue

@@ -79,13 +79,14 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+
 import { getAriaLabel } from './computed.js';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import props from './props';
 
 
 const name = `${prefix}-steps-item`;

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

@@ -40,7 +40,7 @@ t-class-plus | \-
 ### 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-stepper-input-disabled-bg | @bg-color-component-disabled | -
 --td-stepper-input-disabled-color | @text-color-disabled | -

package/dist/stepper/README.md

@@ -83,7 +83,7 @@ t-class-plus | 右侧递增号样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-stepper-input-disabled-bg | @bg-color-component-disabled | -
 --td-stepper-input-disabled-color | @text-color-disabled | -

package/dist/stepper/stepper.vue

@@ -48,12 +48,14 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
 import { coalesce, nextTick } from '../common/utils';
-import props from './props';
+
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+
+import props from './props';
 
 
 const name = `${prefix}-stepper`;

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

@@ -69,7 +69,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-step-item-circle-size | 44rpx | -
 --td-step-item-circle-text-font | @font-body-medium | -

package/dist/steps/README.md

@@ -129,7 +129,7 @@ t-class-title | 标题样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-step-item-circle-size | 44rpx | -
 --td-step-item-circle-text-font | @font-body-medium | -

package/dist/steps/steps.vue

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

package/dist/sticky/sticky.vue

@@ -12,12 +12,13 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
-import props from './props';
 import { prefix } from '../common/config';
-import pageScrollMixin from '../mixins/page-scroll';
+import { uniComponent } from '../common/src/index';
 import { getRect, nextTick } from '../common/utils';
 import tools from '../common/utils.wxs';
+import pageScrollMixin from '../mixins/page-scroll';
+
+import props from './props';
 
 
 const name = `${prefix}-sticky`;

package/dist/swipe-cell/swipe-cell.vue

@@ -96,12 +96,14 @@
   </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 { getRect } from '../common/utils';
+import tools from '../common/utils.wxs';
 import { getObserver } from '../common/wechat';
+import TIcon from '../icon/icon';
+
 import {
   initLeftWidth,
   initRightWidth,
@@ -111,8 +113,8 @@ import {
   onCloseChange,
   onOpenedChange,
 } from './computed';
-import tools from '../common/utils.wxs';
-import { parseEventDynamicCode } from '../common/event/dynamic';
+import props from './props';
+
 
 let ARRAY = [];
 

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

@@ -72,7 +72,7 @@ t-class | \-
 ### 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-swiper-item-padding | 0 | -
 --td-swiper-radius | @radius-large | -

package/dist/swiper/README.md

@@ -124,7 +124,7 @@ t-class | 根节点样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-swiper-item-padding | 0 | -
 --td-swiper-radius | @radius-large | -

package/dist/swiper/swiper.vue

@@ -67,14 +67,16 @@
   </view>
 </template>
 <script>
-import TSwiperNav from '../swiper-nav/swiper-nav';
-import TImage from '../image/image';
-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 TImage from '../image/image';
+import TSwiperNav from '../swiper-nav/swiper-nav';
+
 import { isPrev, isNext, getImageClass } from './computed.js';
-import { ParentMixin, RELATION_MAP } from '../common/relation';
+import props from './props';
+
 
 const name = `${prefix}-swiper`;