feat(Swiper): support cardScale API

src/slider/slider-button.tsx

@@ -1,15 +1,17 @@
-import Vue, { VNode, PropType, VueConstructor } from 'vue';
-import { Styles } from '../common';
-import Slider from './slider';
-import Tooltip from '../tooltip/index';
-import ITooltip from '../tooltip/tooltip';
+import Vue, { PropType, VNode, VueConstructor } from 'vue';
+
+import { formatLabel, formatPrecision } from '../_common/js/slider/utils';
 import { getIEVersion } from '../_common/js/utils/helper';
-import { TdSliderProps } from './type';
-import { TdTooltipProps } from '../tooltip/type';
-import { renderTNodeJSX } from '../utils/render-tnode';
 import { getClassPrefixMixins } from '../config-provider/config-receiver';
-import { formatLabel } from '../_common/js/slider/utils';
+import Tooltip from '../tooltip/index';
+import ITooltip from '../tooltip/tooltip';
 import mixins from '../utils/mixins';
+import { renderTNodeJSX } from '../utils/render-tnode';
+import Slider from './slider';
+
+import type { Styles } from '../common';
+import type { TdTooltipProps } from '../tooltip/type';
+import type { TdSliderProps } from './type';
 
 const classPrefixMixins = getClassPrefixMixins('slider__button');
 
@@ -301,7 +303,7 @@ export default mixins(classPrefixMixins, Vue as VueConstructor<SliderInstanceTyp
       const steps = Math.round(newPos / perStepLen);
       let value = steps * perStepLen * this.rangeDiff * 0.01;
       value += this.min;
-      value = Number(parseFloat(`${value}`).toFixed(this.precision));
+      value = formatPrecision(value, this.precision);
       this.$emit('input', value);
       this.$nextTick(() => {
         this.showTooltipComponent();

src/slider/slider.tsx

@@ -1,13 +1,16 @@
 import Vue, { VNode } from 'vue';
+
+import { formatPrecision } from '../_common/js/slider/utils';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+import InputNumber from '../input-number/index';
 import { emitEvent } from '../utils/event';
-import { TNode, ClassName } from '../common';
+import mixins from '../utils/mixins';
 import props from './props';
-import InputNumber from '../input-number/index';
-import TSliderMark from './slider-mark';
-import { SliderValue, TdSliderProps } from './type';
 import TSliderButton from './slider-button';
-import { getClassPrefixMixins } from '../config-provider/config-receiver';
-import mixins from '../utils/mixins';
+import TSliderMark from './slider-mark';
+
+import type { ClassName, TNode } from '../common';
+import type { SliderValue, TdSliderProps } from './type';
 
 const classPrefixMixins = getClassPrefixMixins('slider');
 
@@ -186,9 +189,10 @@ export default mixins(classPrefixMixins).extend({
     value(newVal: SliderValue) {
       if (this.dragging === true) return;
       if (Array.isArray(newVal) && this.range) {
-        [this.firstValue, this.secondValue] = newVal;
+        this.firstValue = formatPrecision(newVal[0], this.precision);
+        this.secondValue = formatPrecision(newVal[1], this.precision);
       } else {
-        this.prevValue = newVal as number;
+        this.prevValue = formatPrecision(newVal as number, this.precision);
       }
     },
     dragging(newVal: boolean) {
@@ -211,18 +215,18 @@ export default mixins(classPrefixMixins).extend({
       const { min, max, value } = this;
       if (this.range) {
         if (Array.isArray(value)) {
-          this.firstValue = Math.max(min || 0, value[0] ?? 0);
-          this.secondValue = Math.min(max || 100, value[1] ?? 0);
+          this.firstValue = formatPrecision(Math.max(min || 0, value[0] ?? 0), this.precision);
+          this.secondValue = formatPrecision(Math.min(max || 100, value[1] ?? 0), this.precision);
         } else {
-          this.firstValue = min || 0;
-          this.secondValue = max || 100;
+          this.firstValue = formatPrecision(min || 0, this.precision);
+          this.secondValue = formatPrecision(max || 100, this.precision);
         }
         valuetext = `${this.firstValue}-${this.secondValue}`;
       } else {
         if (typeof this.value !== 'number') {
-          this.prevValue = min;
+          this.prevValue = formatPrecision(min, this.precision);
         } else {
-          this.prevValue = Math.min(max, Math.max(min, value as number));
+          this.prevValue = formatPrecision(Math.min(max, Math.max(min, value as number)), this.precision);
         }
         valuetext = String(this.prevValue);
       }
@@ -250,12 +254,12 @@ export default mixins(classPrefixMixins).extend({
         if (firstValue < min) firstValue = min;
         if (secondValue < min) secondValue = this.secondValue;
         if (secondValue > max) secondValue = max;
-        return [firstValue, secondValue];
+        return [formatPrecision(firstValue, this.precision), formatPrecision(secondValue, this.precision)];
       }
       let prevValue = value as number;
       if (prevValue < min) prevValue = min;
       if (prevValue > max) prevValue = max;
-      return prevValue;
+      return formatPrecision(prevValue, this.precision);
     },
     // 相应button的位置
     setPosition(percent: number): void {

src/swiper/__tests__/__snapshots__/index.test.jsx.snap

@@ -197,28 +197,6 @@ exports[`Swiper > :props > :navigation 1`] = `
 </div>
 `;
 
-exports[`Swiper > :props > :theme 1`] = `
-<div
-  class="t-swiper"
->
-  <div
-    class="t-swiper__wrap t-swiper--inside"
-  >
-    <div
-      class="t-swiper__content"
-    >
-      <div
-        class="t-swiper__container"
-        style="transform: translate3d(-0%, 0px, 0px);"
-      />
-    </div>
-    <ul
-      class="t-swiper__navigation t-swiper__navigation-bars"
-    />
-  </div>
-</div>
-`;
-
 exports[`Swiper > :props > :type 1`] = `
 <div
   class="t-swiper"

src/swiper/__tests__/index.test.jsx

@@ -140,19 +140,6 @@ describe('Swiper', () => {
       });
       expect(wrapper.element).toMatchSnapshot();
     });
-    it(':theme', () => {
-      const wrapper = mount({
-        render() {
-          return (
-            <Swiper theme={'dark'}>
-              <SwiperItem>1</SwiperItem>
-              <SwiperItem>2</SwiperItem>
-            </Swiper>
-          );
-        },
-      });
-      expect(wrapper.element).toMatchSnapshot();
-    });
     it(':type', () => {
       const wrapper = mount({
         render() {

src/swiper/_example/card.vue

@@ -1,24 +1,33 @@
 <template>
   <div class="tdesign-demo-block--swiper">
-    <t-swiper type="card" :height="280">
-      <t-swiper-item>
-        <div class="demo-item">1</div>
-      </t-swiper-item>
-      <t-swiper-item>
-        <div class="demo-item">2</div>
-      </t-swiper-item>
-      <t-swiper-item>
-        <div class="demo-item">3</div>
-      </t-swiper-item>
-      <t-swiper-item>
-        <div class="demo-item">4</div>
-      </t-swiper-item>
-      <t-swiper-item>
-        <div class="demo-item">5</div>
-      </t-swiper-item>
-      <t-swiper-item>
-        <div class="demo-item">6</div>
-      </t-swiper-item>
-    </t-swiper>
+    <t-space direction="vertical" :size="50" style="width: 100%">
+      <t-space direction="vertical" style="width: 100%">
+        <t-tag theme="primary" variant="outline">卡片缩放比例</t-tag>
+
+        <t-slider v-model="cardScale" :min="0" :max="1" :step="0.01" :marks="marks" />
+      </t-space>
+
+      <t-swiper type="card" :height="280" :autoplay="false" :card-scale="cardScale">
+        <t-swiper-item v-for="i in 6" :key="i">
+          <div class="demo-item">{{ i }}</div>
+        </t-swiper-item>
+      </t-swiper>
+    </t-space>
   </div>
 </template>
+
+<script>
+export default {
+  data() {
+    const DEFAULT_SCALE = 210 / 332;
+
+    return {
+      cardScale: DEFAULT_SCALE,
+      DEFAULT_SCALE,
+      marks: {
+        [DEFAULT_SCALE]: 'Default',
+      },
+    };
+  },
+};
+</script>

src/swiper/_usage/props.json

@@ -47,21 +47,6 @@
     "defaultValue": true,
     "options": []
   },
-  {
-    "name": "theme",
-    "type": "enum",
-    "defaultValue": "light",
-    "options": [
-      {
-        "label": "light",
-        "value": "light"
-      },
-      {
-        "label": "dark",
-        "value": "dark"
-      }
-    ]
-  },
   {
     "name": "trigger",
     "type": "enum",

src/swiper/props.ts

@@ -22,6 +22,11 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 卡片模式下非当前展示轮播图的缩放比例 */
+  cardScale: {
+    type: Number,
+    default: 210 / 332,
+  },
   /** 当前轮播在哪一项（下标） */
   current: {
     type: Number,
@@ -69,15 +74,6 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 深色模式和浅色模式 */
-  theme: {
-    type: String as PropType<TdSwiperProps['theme']>,
-    default: 'light' as TdSwiperProps['theme'],
-    validator(val: TdSwiperProps['theme']): boolean {
-      if (!val) return true;
-      return ['light', 'dark'].includes(val);
-    },
-  },
   /** 触发切换的方式：悬浮、点击等 */
   trigger: {
     type: String as PropType<TdSwiperProps['trigger']>,

src/swiper/swiper-item.tsx

@@ -1,31 +1,37 @@
 import { VNode } from 'vue';
-import props from './props';
 import { getClassPrefixMixins } from '../config-provider/config-receiver';
 import mixins from '../utils/mixins';
+import props from './props';
 
 const classPrefixMixins = getClassPrefixMixins('swiper');
 
+const CARD_SCALE = 210 / 332; // 缩放比例
+const ITEM_WIDTH = 0.415; // 依据设计稿使用t-swiper__card控制每个swiper的宽度为41.5%
+
 const swiperItemProps = {
   index: {
     type: Number,
   },
   currentIndex: {
     type: Number,
   },
+  cardScale: {
+    type: Number,
+    default: CARD_SCALE,
+  },
   isSwitching: {
     type: Boolean,
     default: false,
   },
-  getWrapAttribute: {
-    type: Function,
+  swiperWidth: {
+    type: Number,
+    default: 0,
   },
   swiperItemLength: {
     type: Number,
     default: 0,
   },
 };
-const CARD_SCALE = 210 / 332; // 缩放比例
-const itemWidth = 0.415; // 依据设计稿使用t-swiper__card控制每个swiper的宽度为41.5%
 
 export default mixins(classPrefixMixins).extend({
   name: 'TSwiperItem',
@@ -58,16 +64,19 @@ export default mixins(classPrefixMixins).extend({
     },
     translateX(): number {
       if (this.type !== 'card') return 0;
-      const wrapWidth = this.getWrapAttribute('offsetWidth');
+      const { swiperWidth } = this;
       const translateIndex = !this.active && this.swiperItemLength > 2 ? this.disposeIndex : this.index;
       const inStage = Math.abs(translateIndex - this.currentIndex) <= 1;
       if (inStage) {
-        return (wrapWidth * ((translateIndex - this.currentIndex) * (1 - itemWidth * CARD_SCALE) - itemWidth + 1)) / 2;
+        return (
+          (swiperWidth * ((translateIndex - this.currentIndex) * (1 - ITEM_WIDTH * this.cardScale) - ITEM_WIDTH + 1))
+          / 2
+        );
       }
       if (translateIndex < this.currentIndex) {
-        return (-itemWidth * (1 + CARD_SCALE) * wrapWidth) / 2;
+        return (-ITEM_WIDTH * (1 + this.cardScale) * swiperWidth) / 2;
       }
-      return ((2 + itemWidth * (CARD_SCALE - 1)) * wrapWidth) / 2;
+      return ((2 + ITEM_WIDTH * (this.cardScale - 1)) * swiperWidth) / 2;
     },
     zIndex(): number {
       if (this.type !== 'card') return 0;
@@ -94,7 +103,7 @@ export default mixins(classPrefixMixins).extend({
         const translateIndex = !this.active && this.swiperItemLength > 2 ? this.disposeIndex : this.index;
         const isActivity = translateIndex === this.currentIndex;
         return {
-          transform: `translateX(${this.translateX}px) scale(${isActivity ? 1 : CARD_SCALE})`,
+          transform: `translateX(${this.translateX}px) scale(${isActivity ? 1 : this.cardScale})`,
           transition: `transform ${this.duration / 1000}s ease`,
           zIndex: this.zIndex,
         };

src/swiper/swiper.en-US.md

@@ -1,25 +1,26 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Swiper Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-animation | String | slide | options：slide/fade | N
+animation | String | slide | options: slide/fade | N
 autoplay | Boolean | true | \- | N
+cardScale | Number | 210/332 | \- | N
 current | Number | 0 | `v-model` is supported | N
 defaultCurrent | Number | 0 | uncontrolled property | N
-direction | String | horizontal | options：horizontal/vertical | N
+direction | String | horizontal | options: horizontal/vertical | N
 duration | Number | 300 | \- | N
 height | Number | - | \- | N
 interval | Number | 5000 | \- | N
 loop | Boolean | true | \- | N
-navigation | Object / Slot / Function | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+navigation | Object / Slot / Function | - | Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 stopOnHover | Boolean | true | \- | N
-theme | String | light | options：light/dark | N
-trigger | String | hover | options：hover/click | N
-type | String | default | options：default/card | N
-onChange | Function |  | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N
+trigger | String | hover | options: hover/click | N
+type | String | default | options: default/card | N
+onChange | Function |  | Typescript: `(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N
 
 ### Swiper Events
 
@@ -31,7 +32,7 @@ change | `(current: number, context: { source: SwiperChangeSource })` | [see mor
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-placement | String | inside | options：inside/outside | N
-showSlideBtn | String | always | options：always/hover/never | N
-size | String | medium | options：small/medium/large | N
-type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts) | N
+placement | String | inside | options: inside/outside | N
+showSlideBtn | String | always | options: always/hover/never | N
+size | String | medium | options: small/medium/large | N
+type | String | - | Typescript: `SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts) | N