Repository: Tencent/tdesign-mobile-vue
Pull request #1349 (2024-04-28 02:01:43)

refactor(swiper): sfc to tsx & placement支持outside
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [x] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue
### 相关 PR
https://github.com/Tencent/tdesign-common/pull/1781
<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(Swiper): 修复 `placement` 值为 `outside` 无效的问题
- feat(Swiper): `sfc` 改 `tsx`

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/8864260916)
<!-- AUTO_PREVIEW_HOOK -->
anlyyao: rebase 一下develop分支，处理冲突

Patch:
diff --git a/src/_common b/src/_common
index a8d0cac7..32e1b6c5 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit a8d0cac78f86ad80746b07b9cfd3b152b101253c
+Subproject commit 32e1b6c5776e2907ca6c5a6487a6a27a5e959415
diff --git a/src/swiper/demos/mobile.vue b/src/swiper/demos/mobile.vue
index f2a18c8b..649393c6 100644
--- a/src/swiper/demos/mobile.vue
+++ b/src/swiper/demos/mobile.vue
@@ -20,6 +20,9 @@
     <tdesign-demo-block title="02 组件样式" summary="垂直模式">
       <vertical />
     </tdesign-demo-block>
+    <tdesign-demo-block summary="outside模式">
+      <outside />
+    </tdesign-demo-block>
   </div>
 </template>
 <script lang="ts" setup>
@@ -29,6 +32,7 @@ import fraction from './fraction.vue';
 import control from './control.vue';
 import card from './card.vue';
 import vertical from './vertical.vue';
+import outside from './outside.vue';
 </script>
 
 <style lang="less">
diff --git a/src/swiper/demos/outside.vue b/src/swiper/demos/outside.vue
new file mode 100644
index 00000000..8806a654
--- /dev/null
+++ b/src/swiper/demos/outside.vue
@@ -0,0 +1,40 @@
+<template>
+  <div style="padding: 0 16px">
+    <t-swiper
+      :navigation="{ type: 'dots', placement: 'outside' }"
+      :autoplay="false"
+      @click="handleClick"
+      @change="handleChange"
+    >
+      <t-swiper-item v-for="(item, index) in swiperList" :key="index" style="height: 192px">
+        <img :src="item" class="img" />
+      </t-swiper-item>
+    </t-swiper>
+  </div>
+</template>
+<script lang="ts" setup>
+const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
+const swiperList = [
+  `${imageCdn}/swiper1.png`,
+  `${imageCdn}/swiper2.png`,
+  `${imageCdn}/swiper1.png`,
+  `${imageCdn}/swiper2.png`,
+  `${imageCdn}/swiper1.png`,
+];
+
+const handleChange = (index: number, context: any) => {
+  console.log('基础示例,页数变化到》》》', index, context);
+};
+
+const handleClick = (value: number) => {
+  console.log('click: ', value);
+};
+</script>
+
+<style>
+img {
+  display: block;
+  width: 100%;
+  height: 192px;
+}
+</style>
diff --git a/src/swiper/index.ts b/src/swiper/index.ts
index e40ecfa3..cf987d72 100644
--- a/src/swiper/index.ts
+++ b/src/swiper/index.ts
@@ -1,5 +1,5 @@
-import _Swiper from './swiper.vue';
-import _SwiperItem from './swiper-item.vue';
+import _Swiper from './swiper';
+import _SwiperItem from './swiper-item';
 import { withInstall, WithInstallType } from '../shared';
 import { TdSwiperProps } from './type';
 
diff --git a/src/swiper/swiper-item.tsx b/src/swiper/swiper-item.tsx
new file mode 100644
index 00000000..cef0f781
--- /dev/null
+++ b/src/swiper/swiper-item.tsx
@@ -0,0 +1,63 @@
+import { ref, inject, computed, getCurrentInstance, onMounted, onUnmounted, watch, defineComponent } from 'vue';
+import { useElementBounding } from '@vueuse/core';
+import { usePrefixClass } from '../hooks/useClass';
+import { useTNodeJSX } from '../hooks/tnode';
+
+import config from '../config';
+
+const { prefix } = config;
+const name = `${prefix}-swiper-item`;
+export default defineComponent({
+  name,
+  setup() {
+    const { addChild, removeChild, isVertical, root, items, setContainerHeight } = inject('parent') as any;
+    const swiperItemClass = usePrefixClass('swiper-item');
+    const readerTNodeJSX = useTNodeJSX();
+    const selfRef = ref(null);
+    const rootStyle = ref('');
+    const instance = getCurrentInstance();
+
+    const direction = computed(() => (isVertical.value ? 'Y' : 'X'));
+
+    const calcTranslateStyle = (index: number, activeIndex: number) => {
+      const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0;
+      const lastItemIndex = items.value.length - 1;
+      let step = index - activeIndex;
+      // lastItem
+      if (activeIndex === lastItemIndex && index === 0) {
+        step = 1;
+      }
+      // firstItem
+      if (activeIndex === 0 && index === lastItemIndex && index !== 1) {
+        step = -1;
+      }
+
+      if (activeIndex === index) step = 0;
+
+      rootStyle.value = `transform: translate${direction.value}(${step * distance}px)`;
+    };
+    const { height } = useElementBounding(selfRef);
+
+    watch(height, (val) => {
+      setContainerHeight(val);
+    });
+
+    onMounted(() => {
+      addChild({
+        proxy: instance?.proxy,
+        uid: instance?.uid,
+        calcTranslateStyle,
+      });
+    });
+
+    onUnmounted(() => {
+      removeChild(instance?.uid);
+    });
+
+    return () => (
+      <div ref={selfRef} class={swiperItemClass.value} style={rootStyle.value}>
+        {readerTNodeJSX('default')}
+      </div>
+    );
+  },
+});
diff --git a/src/swiper/swiper-item.vue b/src/swiper/swiper-item.vue
deleted file mode 100644
index cc3f5725..00000000
--- a/src/swiper/swiper-item.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div ref="selfRef" :class="name" :style="rootStyle">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { ref, inject, computed, getCurrentInstance, onMounted, onUnmounted, watch } from 'vue';
-import { useElementBounding } from '@vueuse/core';
-
-import config from '../config';
-
-const { prefix } = config;
-const name = `${prefix}-swiper-item`;
-
-export default {
-  name,
-};
-</script>
-
-<script lang="ts" setup>
-const { addChild, removeChild, isVertical, root, loop, items, setContainerHeight } = inject('parent') as any;
-const selfRef = ref(null);
-const rootStyle = ref('');
-const instance = getCurrentInstance();
-
-const direction = computed(() => (isVertical.value ? 'Y' : 'X'));
-
-const calcTranslateStyle = (index: number, activeIndex: number) => {
-  const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0;
-  const lastItemIndex = items.value.length - 1;
-  let step = index - activeIndex;
-  // lastItem
-  if (activeIndex === lastItemIndex && index === 0) {
-    step = 1;
-  }
-  // firstItem
-  if (activeIndex === 0 && index === lastItemIndex && index !== 1) {
-    step = -1;
-  }
-
-  if (activeIndex === index) step = 0;
-
-  rootStyle.value = `transform: translate${direction.value}(${step * distance}px)`;
-};
-const { height } = useElementBounding(selfRef);
-
-watch(height, (val) => {
-  setContainerHeight(val);
-});
-
-onMounted(() => {
-  addChild({
-    proxy: instance?.proxy,
-    uid: instance?.uid,
-    calcTranslateStyle,
-  });
-});
-
-onUnmounted(() => {
-  removeChild(instance?.uid);
-});
-</script>
diff --git a/src/swiper/swiper.md b/src/swiper/swiper.md
index 4eb73d59..dbfbc12a 100644
--- a/src/swiper/swiper.md
+++ b/src/swiper/swiper.md
@@ -53,3 +53,4 @@ type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、
 --td-swiper-nav-fraction-font-size | 12px | - 
 --td-swiper-nav-fraction-height | 24px | - 
 --td-swiper-border-radius | 8px | - 
+--td-swiper-placement-outside-padding | 18px | - 
diff --git a/src/swiper/swiper.tsx b/src/swiper/swiper.tsx
new file mode 100644
index 00000000..5b0d655a
--- /dev/null
+++ b/src/swiper/swiper.tsx
@@ -0,0 +1,329 @@
+import { onMounted, computed, ref, provide, watch, onUnmounted, toRefs, defineComponent } from 'vue';
+import isObject from 'lodash/isObject';
+import isNumber from 'lodash/isNumber';
+import { useSwipe } from '../swipe-cell/useSwipe';
+
+import config from '../config';
+import props from './props';
+import { SwiperChangeSource, SwiperNavigation } from './type';
+import { useVModel } from '../shared';
+import { preventDefault } from '../shared/dom';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-swiper`;
+const navName = `${prefix}-swiper-nav`;
+export default defineComponent({
+  name,
+  props,
+  emits: ['change', 'update:current', 'update:modelValue'],
+  setup(props, context) {
+    const swiperClass = usePrefixClass('swiper');
+    const readerTNodeJSX = useTNodeJSX();
+    const setOffset = (offset: number, direction = 'X'): void => {
+      translateContainer.value = `translate${direction}(${offset}px)`;
+    };
+
+    const root = ref();
+    const items = ref<any>([]);
+
+    const { current: value, modelValue } = toRefs(props);
+
+    const [current, setCurrent] = useVModel(value, modelValue, props.defaultCurrent);
+    const swiperContainer = ref<HTMLElement | null>(null);
+
+    const animating = ref(false);
+    const disabled = ref(false);
+    const isSwiperDisabled = computed(() => props.disabled === true);
+    const translateContainer = ref('');
+
+    const isVertical = computed(() => props.direction === 'vertical');
+    const containerHeight = ref('auto');
+
+    const navigation = computed((): SwiperNavigation => props.navigation);
+
+    const isBottomPagination = computed(() => {
+      let isShowSwiperNav = false;
+      if (typeof props.navigation === 'object') {
+        isShowSwiperNav =
+          (!navigation.value?.paginationPosition || navigation.value?.paginationPosition === 'bottom') &&
+          (navigation.value?.type === 'dots' || navigation.value?.type === 'dots-bar') &&
+          enableNavigation?.value;
+      }
+      return isShowSwiperNav;
+    });
+
+    const rootClass = computed(() => {
+      return [
+        `${swiperClass.value}`,
+        `${swiperClass.value}--${props.type}`,
+        `${
+          isBottomPagination.value && navigation.value?.placement
+            ? `${swiperClass.value}--${navigation.value?.placement}`
+            : ''
+        }`,
+      ];
+    });
+
+    const enableNavigation = computed(() => {
+      if (typeof props.navigation === 'object') {
+        return navigation.value?.minShowNum ? items.value.length >= navigation.value?.minShowNum : true;
+      }
+      return false;
+    });
+
+    let autoplayTimer: any = null;
+
+    const onItemClick = () => {
+      props.onClick?.(current.value ?? 0);
+    };
+
+    const move = (step: number, source: SwiperChangeSource, isReset = false) => {
+      animating.value = true;
+      processIndex(isReset ? step : (current.value as number) + step, source);
+
+      const moveDirection = !isVertical.value ? 'X' : 'Y';
+      const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0;
+
+      translateContainer.value = `translate${moveDirection}(${isReset ? 0 : -1 * distance * step}px)`;
+    };
+
+    const handleAnimationEnd = () => {
+      disabled.value = false;
+      animating.value = false;
+      translateContainer.value = 'translateX(0)';
+
+      updateItemPosition();
+    };
+
+    const stopAutoplay = () => {
+      if (!autoplayTimer) return;
+      clearInterval(autoplayTimer as number);
+      autoplayTimer = null;
+    };
+
+    const startAutoplay = () => {
+      if (typeof props.current === 'number') return false;
+      if (!props?.autoplay || autoplayTimer !== null) return false; // stop repeat autoplay
+      autoplayTimer = setInterval(() => {
+        goNext('autoplay');
+      }, props?.interval);
+    };
+
+    const goPrev = (source: SwiperChangeSource) => {
+      disabled.value = true;
+      move(-1, source);
+    };
+    const goNext = (source: SwiperChangeSource) => {
+      disabled.value = true;
+      move(1, source);
+    };
+
+    const processIndex = (index: number, source: SwiperChangeSource) => {
+      const max = items.value.length;
+      let val = index;
+
+      if (index < 0) {
+        val = props.loop ? max - 1 : 0;
+      }
+      if (index >= max) {
+        val = props.loop ? 0 : max - 1;
+      }
+      setCurrent(val);
+      context.emit('change', val, { source });
+    };
+
+    const { lengthX, lengthY } = useSwipe(swiperContainer, {
+      onSwipeStart() {
+        if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
+        stopAutoplay();
+      },
+      onSwipe(e: TouchEvent) {
+        if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
+        onTouchMove(e);
+      },
+      onSwipeEnd() {
+        if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
+        onTouchEnd();
+      },
+    });
+
+    const onTouchMove = (event: TouchEvent) => {
+      preventDefault(event, false);
+      const distanceX = lengthX.value;
+      const distanceY = lengthY.value;
+
+      animating.value = false;
+
+      if (!isVertical.value) {
+        setOffset(-distanceX);
+      } else {
+        setOffset(-distanceY, 'Y');
+      }
+    };
+
+    const onTouchEnd = () => {
+      const distanceX = lengthX.value;
+      const distanceY = lengthY.value;
+
+      if ((!isVertical.value && distanceX < -100) || (isVertical.value && distanceY < -100)) {
+        move(-1, 'touch');
+      } else if ((!isVertical.value && distanceX > 100) || (isVertical.value && distanceY > 100)) {
+        move(1, 'touch');
+      } else {
+        move(current.value as number, 'touch', true);
+      }
+      startAutoplay();
+    };
+
+    const addChild = (item: any) => {
+      items.value.push(item);
+    };
+
+    const removeChild = (uid: number) => {
+      const index = items.value.findIndex((item: any) => item.uid === uid);
+      items.value.splice(index, 1);
+
+      if (current.value + 1 > items.value.length) {
+        goNext('autoplay');
+      }
+    };
+
+    const updateItemPosition = () => {
+      items.value.forEach((item: any, index: number) => {
+        item.calcTranslateStyle(index, current.value);
+      });
+    };
+
+    const setContainerHeight = (height: number | string) =>
+      (containerHeight.value = isNumber(height) ? `${height}px` : height);
+
+    const updateContainerHeight = () => {
+      const target = items.value[current.value ?? 0];
+      const rect = target?.proxy?.$el.getBoundingClientRect();
+
+      if (props.height) {
+        setContainerHeight(props.height);
+      } else if (rect) {
+        setContainerHeight(rect.height);
+      }
+      updateItemPosition();
+    };
+
+    watch(current, updateContainerHeight);
+
+    provide('parent', {
+      loop: props.loop,
+      root,
+      items,
+      isVertical,
+      addChild,
+      removeChild,
+      setContainerHeight,
+    });
+
+    onMounted(() => {
+      startAutoplay();
+      updateItemPosition();
+      updateContainerHeight();
+    });
+
+    onUnmounted(() => {
+      stopAutoplay();
+    });
+    return () => {
+      const swiperNav = () => {
+        if (navigation.value && enableNavigation.value) {
+          const controlsNav = () => {
+            if (!isVertical.value && !!navigation.value?.showControls) {
+              return (
+                <span class={`${navName}__btn`}>
+                  <span class={`${navName}__btn--prev`} onClick={() => goPrev('nav')} />
+                  <span class={`${navName}__btn--next`} onClick={() => goNext('nav')} />
+                </span>
+              );
+            }
+          };
+          const typeNav = () => {
+            if ('type' in navigation.value) {
+              // dots
+              const dots = () => {
+                if (['dots', 'dots-bar'].includes(navigation.value?.type || '')) {
+                  return (
+                    <>
+                      {items.value.map((_: any, index: number) => (
+                        <span
+                          key={`page${index}`}
+                          class={[
+                            `${navName}__${navigation.value?.type}-item`,
+                            index === current.value ? `${navName}__${navigation.value?.type}-item--active` : '',
+                            `${navName}__${navigation.value?.type}-item--${props.direction}`,
+                          ]}
+                        />
+                      ))}
+                    </>
+                  );
+                }
+              };
+              // fraction
+              const fraction = () => {
+                if (navigation.value?.type === 'fraction') {
+                  return <span>{`${(current.value ?? 0) + 1}/${items.value.length}`}</span>;
+                }
+              };
+              return (
+                <span
+                  class={[
+                    `${navName}--${props.direction}`,
+                    `${navName}__${navigation.value?.type || ''}`,
+                    `${navName}--${navigation.value?.paginationPosition || 'bottom'}`,
+                    `${
+                      isBottomPagination.value && navigation.value?.placement
+                        ? `${navName}--${navigation.value?.placement}`
+                        : ''
+                    }`,
+                  ]}
+                >
+                  {dots()}
+                  {fraction()}
+                </span>
+              );
+            }
+          };
+
+          return (
+            <>
+              {controlsNav()}
+              {typeNav()}
+            </>
+          );
+        }
+        return isObject(props.navigation) ? '' : readerTNodeJSX('navigation');
+      };
+      return (
+        <div ref={root} class={rootClass.value}>
+          <div
+            ref={swiperContainer}
+            class={`${swiperClass.value}__container`}
+            style={{
+              flexDirection: !isVertical.value ? 'row' : 'column',
+              transition: animating.value ? `transform ${props.duration}ms` : 'none',
+              transform: translateContainer.value,
+              height: containerHeight.value,
+            }}
+            onTransitionend={(event: TransitionEvent) => {
+              if (event.target === event.currentTarget) {
+                handleAnimationEnd();
+              }
+            }}
+            onClick={onItemClick}
+          >
+            {readerTNodeJSX('default')}
+          </div>
+          {swiperNav()}
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/swiper/swiper.vue b/src/swiper/swiper.vue
deleted file mode 100644
index 1508bf85..00000000
--- a/src/swiper/swiper.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<template>
-  <div ref="root" :class="rootClass">
-    <div
-      ref="swiperContainer"
-      :class="`${name}__container`"
-      :style="{
-        flexDirection: !isVertical ? 'row' : 'column',
-        transition: animating ? `transform ${duration}ms` : 'none',
-        transform: translateContainer,
-        height: containerHeight,
-      }"
-      @transitionend.self="handleAnimationEnd"
-      @click="onItemClick"
-    >
-      <slot />
-    </div>
-    <!-- 导航器 -->
-    <template v-if="navigation && enableNavigation">
-      <span v-if="!isVertical && !!navigation?.showControls" :class="`${navName}__btn`">
-        <span :class="`${navName}__btn--prev`" @click="goPrev('nav')" />
-        <span :class="`${navName}__btn--next`" @click="goNext('nav')" />
-      </span>
-      <span
-        v-if="'type' in navigation"
-        :class="[
-          `${navName}--${direction}`,
-          `${navName}__${navigation.type || ''}`,
-          `${navName}--${navigation.paginationPosition || 'bottom'}`,
-        ]"
-      >
-        <template v-if="['dots', 'dots-bar'].includes(navigation.type || '')">
-          <span
-            v-for="(_, index) in items.length"
-            :key="'page' + index"
-            :class="[
-              `${navName}__${navigation.type}-item`,
-              { [`${navName}__${navigation.type}-item--active`]: index === current },
-              `${navName}__${navigation.type}-item--${direction}`,
-            ]"
-          >
-          </span>
-        </template>
-        <span v-if="navigation.type && navigation.type === 'fraction'">
-          {{ (current ?? 0) + 1 + '/' + items.length }}
-        </span>
-      </span>
-    </template>
-    <template v-else-if="computedNavigation">
-      <t-node :content="computedNavigation" />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  getCurrentInstance,
-  onMounted,
-  computed,
-  ref,
-  provide,
-  defineEmits,
-  defineExpose,
-  defineProps,
-  watch,
-  onUnmounted,
-  toRefs,
-} from 'vue';
-import isObject from 'lodash/isObject';
-import isNumber from 'lodash/isNumber';
-import { useSwipe } from '../swipe-cell/useSwipe';
-
-import config from '../config';
-import SwiperProps from './props';
-import { SwiperChangeSource, SwiperNavigation } from './type';
-import { renderTNode, TNode, useVModel } from '../shared';
-import { preventDefault } from '../shared/dom';
-
-const { prefix } = config;
-const name = `${prefix}-swiper`;
-
-export default {
-  name,
-};
-</script>
-
-<script lang="ts" setup>
-const navName = `${prefix}-swiper-nav`;
-const self = getCurrentInstance();
-
-const setOffset = (offset: number, direction = 'X'): void => {
-  translateContainer.value = `translate${direction}(${offset}px)`;
-};
-
-const root = ref();
-const items = ref<any>([]);
-const props = defineProps(SwiperProps);
-const emit = defineEmits(['change', 'update:current', 'update:modelValue']);
-
-const { current: value, modelValue } = toRefs(props);
-
-const [current, setCurrent] = useVModel(value, modelValue, props.defaultCurrent);
-const swiperContainer = ref<HTMLElement | null>(null);
-const computedNavigation = computed(() => (isObject(props.navigation) ? '' : renderTNode(self, 'navigation')));
-
-const animating = ref(false);
-const disabled = ref(false);
-const isSwiperDisabled = computed(() => props.disabled === true);
-const translateContainer = ref('');
-
-const isVertical = computed(() => props.direction === 'vertical');
-const containerHeight = ref('auto');
-
-const rootClass = computed(() => {
-  return [`${name}`, `${name}--${props.type}`];
-});
-
-const navigation = computed((): SwiperNavigation => props.navigation);
-
-const enableNavigation = computed(() => {
-  if (typeof props.navigation === 'object') {
-    return navigation.value?.minShowNum ? items.value.length >= navigation.value?.minShowNum : true;
-  }
-  return false;
-});
-
-let autoplayTimer: any = null;
-
-const onItemClick = () => {
-  props.onClick?.(current.value ?? 0);
-};
-
-const move = (step: number, source: SwiperChangeSource, isReset = false) => {
-  animating.value = true;
-  processIndex(isReset ? step : (current.value as number) + step, source);
-
-  const moveDirection = !isVertical.value ? 'X' : 'Y';
-  const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0;
-
-  translateContainer.value = `translate${moveDirection}(${isReset ? 0 : -1 * distance * step}px)`;
-};
-
-const handleAnimationEnd = () => {
-  disabled.value = false;
-  animating.value = false;
-  translateContainer.value = 'translateX(0)';
-
-  updateItemPosition();
-};
-
-const stopAutoplay = () => {
-  if (!autoplayTimer) return;
-  clearInterval(autoplayTimer as number);
-  autoplayTimer = null;
-};
-
-const startAutoplay = () => {
-  if (typeof props.current === 'number') return false;
-  if (!props?.autoplay || autoplayTimer !== null) return false; // stop repeat autoplay
-  autoplayTimer = setInterval(() => {
-    goNext('autoplay');
-  }, props?.interval);
-};
-
-const goPrev = (source: SwiperChangeSource) => {
-  disabled.value = true;
-  move(-1, source);
-};
-const goNext = (source: SwiperChangeSource) => {
-  disabled.value = true;
-  move(1, source);
-};
-
-const processIndex = (index: number, source: SwiperChangeSource) => {
-  const max = items.value.length;
-  let val = index;
-
-  if (index < 0) {
-    val = props.loop ? max - 1 : 0;
-  }
-  if (index >= max) {
-    val = props.loop ? 0 : max - 1;
-  }
-  setCurrent(val);
-  emit('change', val, { source });
-};
-
-const { lengthX, lengthY } = useSwipe(swiperContainer, {
-  onSwipeStart() {
-    if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
-    stopAutoplay();
-  },
-  onSwipe(e: TouchEvent) {
-    if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
-    onTouchMove(e);
-  },
-  onSwipeEnd() {
-    if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
-    onTouchEnd();
-  },
-});
-
-const onTouchMove = (event: TouchEvent) => {
-  preventDefault(event, false);
-  const distanceX = lengthX.value;
-  const distanceY = lengthY.value;
-
-  animating.value = false;
-
-  if (!isVertical.value) {
-    setOffset(-distanceX);
-  } else {
-    setOffset(-distanceY, 'Y');
-  }
-};
-
-const onTouchEnd = () => {
-  const distanceX = lengthX.value;
-  const distanceY = lengthY.value;
-
-  if ((!isVertical.value && distanceX < -100) || (isVertical.value && distanceY < -100)) {
-    move(-1, 'touch');
-  } else if ((!isVertical.value && distanceX > 100) || (isVertical.value && distanceY > 100)) {
-    move(1, 'touch');
-  } else {
-    move(current.value as number, 'touch', true);
-  }
-  startAutoplay();
-};
-
-const addChild = (item: any) => {
-  items.value.push(item);
-};
-
-const removeChild = (uid: number) => {
-  const index = items.value.findIndex((item: any) => item.uid === uid);
-  items.value.splice(index, 1);
-
-  if (current.value + 1 > items.value.length) {
-    goNext('autoplay');
-  }
-};
-
-const updateItemPosition = () => {
-  items.value.forEach((item: any, index: number) => {
-    item.calcTranslateStyle(index, current.value);
-  });
-};
-
-const setContainerHeight = (height: number | string) =>
-  (containerHeight.value = isNumber(height) ? `${height}px` : height);
-
-const updateContainerHeight = () => {
-  const target = items.value[current.value ?? 0];
-  const rect = target?.proxy?.$el.getBoundingClientRect();
-
-  if (props.height) {
-    setContainerHeight(props.height);
-  } else if (rect) {
-    setContainerHeight(rect.height);
-  }
-  updateItemPosition();
-};
-
-watch(current, updateContainerHeight);
-
-provide('parent', {
-  loop: props.loop,
-  root,
-  items,
-  isVertical,
-  addChild,
-  removeChild,
-  setContainerHeight,
-});
-
-onMounted(() => {
-  startAutoplay();
-  updateItemPosition();
-  updateContainerHeight();
-});
-
-onUnmounted(() => {
-  stopAutoplay();
-});
-
-defineExpose({
-  swiperContainer,
-  goPrev,
-  goNext,
-  setOffset,
-});
-</script>


Test patch:
diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
new file mode 100644
index 00000000..ff0e5c82
--- /dev/null
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -0,0 +1,7111 @@
+// Vitest Snapshot v1
+
+exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    ConfigProvider 全局配置
+  </h1>
+  <p
+    class="summary"
+  >
+    全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 配置示例
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        Upload
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="upload-demo"
+        data-v-41cb315a=""
+      >
+        <div
+          class="t-upload"
+          data-v-41cb315a=""
+        >
+          
+          <div
+            class="t-upload__item"
+          >
+            <div
+              class="t-image t-image--round t-upload__image"
+            >
+              <div
+                class="t-image__mask"
+              >
+                <div
+                  class="t-loading"
+                  style="font-size: 20px;"
+                >
+                  <div
+                    class="t-loading__dots"
+                    style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  >
+                    
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                    />
+                    
+                  </div>
+                  <!--v-if-->
+                  <!---->
+                </div>
+              </div>
+              <picture>
+                <!--v-if-->
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/upload6.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </picture>
+            </div>
+            <div
+              class="t-upload__progress-mask"
+            >
+              
+              <svg
+                class="t-icon t-icon-loading t-upload__progress-loading"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+              <div
+                class="t-upload__progress-text"
+              >
+                Uploading...
+              </div>
+              
+              <!---->
+            </div>
+            <svg
+              class="t-icon t-icon-close t-upload__delete-btn"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-upload__item"
+          >
+            <div
+              class="t-image t-image--round t-upload__image"
+            >
+              <div
+                class="t-image__mask"
+              >
+                <div
+                  class="t-loading"
+                  style="font-size: 20px;"
+                >
+                  <div
+                    class="t-loading__dots"
+                    style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  >
+                    
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                    />
+                    
+                  </div>
+                  <!--v-if-->
+                  <!---->
+                </div>
+              </div>
+              <picture>
+                <!--v-if-->
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </picture>
+            </div>
+            <div
+              class="t-upload__progress-mask"
+            >
+              
+              <svg
+                class="t-icon t-icon-loading t-upload__progress-loading"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+              <div
+                class="t-upload__progress-text"
+              >
+                68%
+              </div>
+              
+              <!---->
+            </div>
+            <svg
+              class="t-icon t-icon-close t-upload__delete-btn"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-upload__item"
+          >
+            <div
+              class="t-image t-image--round t-upload__image"
+            >
+              <div
+                class="t-image__mask"
+              >
+                <div
+                  class="t-loading"
+                  style="font-size: 20px;"
+                >
+                  <div
+                    class="t-loading__dots"
+                    style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  >
+                    
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                    />
+                    
+                  </div>
+                  <!--v-if-->
+                  <!---->
+                </div>
+              </div>
+              <picture>
+                <!--v-if-->
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </picture>
+            </div>
+            <div
+              class="t-upload__progress-mask"
+            >
+              <svg
+                class="t-icon t-icon-close-circle"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+                  fill="currentColor"
+                />
+              </svg>
+              <div
+                class="t-upload__progress-text"
+              >
+                Failed
+              </div>
+            </div>
+            <svg
+              class="t-icon t-icon-close t-upload__delete-btn"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          
+          <div
+            class="t-upload__item t-upload__item--add"
+          >
+            <div
+              class="t-upload__add-icon"
+            >
+              <svg
+                class="t-icon t-icon-add"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+          <input
+            accept="image/png"
+            hidden=""
+            multiple=""
+            type="file"
+          />
+          <!--v-if-->
+        </div>
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        Table
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <!-- 全局配置：空数据呈现，演示 -->
+      <div
+        class="t-table t-vertical-align-middle t-table--bordered"
+        style="position: relative;"
+      >
+        <div
+          class="t-table__content"
+        >
+          <table
+            class="t-table--layout-fixed"
+          >
+            <colgroup>
+              
+              <col
+                style="width: 80px; min-width: undefined;"
+              />
+              <col
+                style="width: 80px; min-width: undefined;"
+              />
+              <col
+                style="width: 80px; min-width: undefined;"
+              />
+              
+            </colgroup>
+            <thead
+              class="t-table__header t-table--bordered"
+            >
+              <tr>
+                
+                <th
+                  class="t-table__th-type"
+                >
+                  <div>
+                    Type
+                  </div>
+                </th>
+                <th
+                  class="t-table__th-platform"
+                >
+                  <div>
+                    Platform
+                  </div>
+                </th>
+                <th
+                  class="t-table__th-property"
+                >
+                  <div>
+                    Property
+                  </div>
+                </th>
+                
+              </tr>
+            </thead>
+            <tbody
+              class="t-table__body"
+            >
+              <tr
+                class="t-table__empty-row"
+              >
+                <td
+                  colspan="3"
+                >
+                  <div
+                    class="t-table__empty"
+                  >
+                    Empty Data Test
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <!---->
+        </div>
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        其他组件
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="rate-demo-cell rate-demo-cell--space"
+        data-v-0f72cd9e=""
+      >
+        <div
+          class="rate-demo-cell__label"
+          data-v-0f72cd9e=""
+        >
+          Rating
+        </div>
+        <div
+          class="t-rate"
+          data-v-0f72cd9e=""
+        >
+          <div
+            class="t-rate__wrapper"
+          >
+            
+            <div
+              class="t-rate__icon t-rate__icon--unselected"
+              size="24px"
+              style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+            >
+              <svg
+                class="t-icon t-icon-star-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-rate__icon t-rate__icon--unselected"
+              size="24px"
+              style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+            >
+              <svg
+                class="t-icon t-icon-star-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-rate__icon t-rate__icon--unselected"
+              size="24px"
+              style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+            >
+              <svg
+                class="t-icon t-icon-star-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-rate__icon t-rate__icon--unselected"
+              size="24px"
+              style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+            >
+              <svg
+                class="t-icon t-icon-star-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-rate__icon t-rate__icon--unselected"
+              size="24px"
+              style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
+            >
+              <svg
+                class="t-icon t-icon-star-filled"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            
+          </div>
+          <span
+            class="t-rate__text"
+          >
+            No score
+          </span>
+          <!--v-if-->
+        </div>
+      </div>
+      <div
+        data-v-0f72cd9e=""
+      >
+        <teleport-stub
+          disabled="false"
+          to="[object HTMLBodyElement]"
+        >
+          <div
+            class="t-overlay"
+            style="z-index: 1000; transition-duration: 300ms; display: none;"
+          >
+            <!---->
+          </div>
+          <div
+            class="t-popup t-popup--bottom"
+            style="display: none;"
+          >
+            <!--v-if-->
+            
+            <div
+              class="t-calendar t-calendar--popup"
+            >
+              <div
+                class="t-calendar__title"
+              >
+                Select Date
+              </div>
+              <svg
+                class="t-icon t-icon-close t-calendar__close-btn"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
+              <div
+                class="t-calendar__days"
+              >
+                
+                <div
+                  class="t-calendar__days-item"
+                >
+                  Sun
+                </div>
+                <div
+                  class="t-calendar__days-item"
+                >
+                  Mon
+                </div>
+                <div
+                  class="t-calendar__days-item"
+                >
+                  Tue
+                </div>
+                <div
+                  class="t-calendar__days-item"
+                >
+                  Wed
+                </div>
+                <div
+                  class="t-calendar__days-item"
+                >
+                  Thu
+                </div>
+                <div
+                  class="t-calendar__days-item"
+                >
+                  Fri
+                </div>
+                <div
+                  class="t-calendar__days-item"
+                >
+                  Sat
+                </div>
+                
+              </div>
+              <div
+                class="t-calendar__months"
+                style="overflow: auto;"
+              >
+                
+                
+                <div
+                  class="t-calendar__month"
+                >
+                  December 2020
+                </div>
+                <div
+                  class="t-calendar__dates"
+                >
+                  
+                  <div />
+                  <div />
+                  
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    1
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    2
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    3
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    4
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    5
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    6
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    7
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    8
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    9
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    10
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    11
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    12
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    13
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    14
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    15
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    16
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    17
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    18
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    19
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    20
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    21
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    22
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    23
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    24
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    25
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    26
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    27
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--selected"
+                  >
+                    
+                    <!---->
+                    28
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    29
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    30
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    31
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                </div>
+                
+                
+                <div
+                  class="t-calendar__month"
+                >
+                  January 2021
+                </div>
+                <div
+                  class="t-calendar__dates"
+                >
+                  
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    1
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    2
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    3
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    4
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    5
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    6
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    7
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    8
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    9
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    10
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    11
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    12
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    13
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    14
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    15
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    16
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    17
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    18
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    19
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    20
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    21
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    22
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    23
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    24
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    25
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    26
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    27
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    28
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    29
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    30
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    31
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                </div>
+                
+                
+                <div
+                  class="t-calendar__month"
+                >
+                  February 2021
+                </div>
+                <div
+                  class="t-calendar__dates"
+                >
+                  
+                  <div />
+                  
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    1
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    2
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    3
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    4
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    5
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    6
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    7
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    8
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    9
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    10
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    11
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    12
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    13
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    14
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    15
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    16
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    17
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    18
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    19
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    20
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    21
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    22
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    23
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    24
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    25
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    26
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    27
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    28
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                </div>
+                
+                
+                <div
+                  class="t-calendar__month"
+                >
+                  March 2021
+                </div>
+                <div
+                  class="t-calendar__dates"
+                >
+                  
+                  <div />
+                  
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    1
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    2
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    3
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    4
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    5
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    6
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    7
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    8
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    9
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    10
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    11
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    12
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    13
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    14
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    15
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    16
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    17
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    18
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    19
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    20
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    21
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    22
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    23
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    24
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    25
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    26
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    27
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    28
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    29
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    30
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    31
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                </div>
+                
+                
+                <div
+                  class="t-calendar__month"
+                >
+                  April 2021
+                </div>
+                <div
+                  class="t-calendar__dates"
+                >
+                  
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    1
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    2
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    3
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    4
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    5
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    6
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    7
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    8
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    9
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    10
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    11
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    12
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    13
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    14
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    15
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    16
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    17
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    18
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    19
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    20
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    21
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    22
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    23
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    24
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    25
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    26
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    27
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    28
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    29
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    30
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                </div>
+                
+                
+                <div
+                  class="t-calendar__month"
+                >
+                  May 2021
+                </div>
+                <div
+                  class="t-calendar__dates"
+                >
+                  
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    1
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    2
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    3
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    4
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    5
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    6
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    7
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    8
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    9
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    10
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    11
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    12
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    13
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    14
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    15
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    16
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    17
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    18
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    19
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    20
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    21
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    22
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    23
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    24
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    25
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    26
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    27
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    28
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    29
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    30
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    31
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                </div>
+                
+                
+                <div
+                  class="t-calendar__month"
+                >
+                  June 2021
+                </div>
+                <div
+                  class="t-calendar__dates"
+                >
+                  
+                  <div />
+                  <div />
+                  
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    1
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    2
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    3
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    4
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    5
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    6
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    7
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    8
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    9
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    10
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    11
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    12
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    13
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    14
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    15
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    16
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    17
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    18
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    19
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    20
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    21
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    22
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    23
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    24
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    25
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    26
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    27
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item"
+                  >
+                    
+                    <!---->
+                    28
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    29
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                  <div
+                    class="t-calendar__dates-item t-calendar__dates-item--disabled"
+                  >
+                    
+                    <!---->
+                    30
+                    <!---->
+                    
+                  </div>
+                  
+                  
+                </div>
+                
+                
+              </div>
+              <div
+                class="t-calendar__footer"
+              >
+                <button
+                  aria-disabled="false"
+                  class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
+                  role="button"
+                  type="button"
+                >
+                  <!---->
+                  <span
+                    class="t-button__content"
+                  >
+                    Confirm
+                  </span>
+                  <!---->
+                </button>
+              </div>
+            </div>
+            
+          </div>
+        </teleport-stub>
+      </div>
+      <div
+        class="t-cell t-cell--middle"
+        data-v-0f72cd9e=""
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!---->
+          <!---->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          Single select date
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <div
+          class="t-cell__right"
+        >
+          <div
+            class="t-cell__right-icon"
+          >
+            <svg
+              class="t-icon t-icon-chevron-right"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-cell t-cell--middle"
+        data-v-0f72cd9e=""
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!---->
+          <!---->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          Select time
+          <!---->
+          <!---->
+        </div>
+        <div
+          class="t-cell__note"
+        >
+          YY-MM-DD
+        </div>
+        <!---->
+      </div>
+      <teleport-stub
+        data-v-0f72cd9e=""
+        disabled="false"
+        to="[object HTMLBodyElement]"
+      >
+        <div
+          class="t-overlay"
+          style="z-index: 1000; transition-duration: 300ms; display: none;"
+        >
+          <!---->
+        </div>
+        <div
+          class="t-popup t-popup--bottom"
+          style="display: none;"
+        >
+          <!--v-if-->
+          
+          <div
+            class="t-picker t-date-time-picker"
+            data-v-0f72cd9e=""
+          >
+            <div
+              class="t-picker__toolbar"
+            >
+              <div
+                class="t-picker__cancel"
+              >
+                Cancel
+              </div>
+              <div
+                class="t-picker__title"
+              >
+                title test
+              </div>
+              <div
+                class="t-picker__confirm"
+              >
+                Confirm
+              </div>
+            </div>
+            <!---->
+            <div
+              class="t-picker__main"
+            >
+              
+              <div
+                class="t-picker-item__group"
+              >
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, -160px, 0);"
+                >
+                  
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2015 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2016 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2017 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2018 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2019 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2020 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item t-picker-item__item--active"
+                  >
+                    2021 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2022 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2023 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2024 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2025 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2026 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2027 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2028 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2029 Year
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2030 Year
+                  </li>
+                  
+                </ul>
+              </div>
+              <div
+                class="t-picker-item__group"
+              >
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, -360px, 0);"
+                >
+                  
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    1 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    3 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    4 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    5 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    6 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    7 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    8 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    9 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    10 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    11 Month
+                  </li>
+                  <li
+                    class="t-picker-item__item t-picker-item__item--active"
+                  >
+                    12 Month
+                  </li>
+                  
+                </ul>
+              </div>
+              <div
+                class="t-picker-item__group"
+              >
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, -800px, 0);"
+                >
+                  
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    1 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    3 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    4 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    5 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    6 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    7 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    8 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    9 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    10 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    11 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    12 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    13 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    14 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    15 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    16 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    17 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    18 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    19 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    20 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    21 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    22 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item t-picker-item__item--active"
+                  >
+                    23 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    24 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    25 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    26 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    27 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    28 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    29 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    30 Date
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    31 Date
+                  </li>
+                  
+                </ul>
+              </div>
+              
+              <div
+                class="t-picker__mask t-picker__mask--top"
+              />
+              <div
+                class="t-picker__mask t-picker__mask--bottom"
+              />
+              <div
+                class="t-picker__indicator"
+              />
+            </div>
+          </div>
+          
+        </div>
+      </teleport-stub>
+      
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="rate-demo-cell rate-demo-cell--space"
+    data-v-0f72cd9e=""
+  >
+    <div
+      class="rate-demo-cell__label"
+      data-v-0f72cd9e=""
+    >
+      Rating
+    </div>
+    <div
+      class="t-rate"
+      data-v-0f72cd9e=""
+    >
+      <div
+        class="t-rate__wrapper"
+      >
+        
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          size="24px"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          size="24px"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          size="24px"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          size="24px"
+          style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-rate__icon t-rate__icon--unselected"
+          size="24px"
+          style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
+        >
+          <svg
+            class="t-icon t-icon-star-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        
+      </div>
+      <span
+        class="t-rate__text"
+      >
+        No score
+      </span>
+      <!--v-if-->
+    </div>
+  </div>
+  <div
+    data-v-0f72cd9e=""
+  >
+    <teleport-stub
+      disabled="false"
+      to="[object HTMLBodyElement]"
+    >
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-popup t-popup--bottom"
+        style="display: none;"
+      >
+        <!--v-if-->
+        
+        <div
+          class="t-calendar t-calendar--popup"
+        >
+          <div
+            class="t-calendar__title"
+          >
+            Select Date
+          </div>
+          <svg
+            class="t-icon t-icon-close t-calendar__close-btn"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+              fill="currentColor"
+            />
+          </svg>
+          <div
+            class="t-calendar__days"
+          >
+            
+            <div
+              class="t-calendar__days-item"
+            >
+              Sun
+            </div>
+            <div
+              class="t-calendar__days-item"
+            >
+              Mon
+            </div>
+            <div
+              class="t-calendar__days-item"
+            >
+              Tue
+            </div>
+            <div
+              class="t-calendar__days-item"
+            >
+              Wed
+            </div>
+            <div
+              class="t-calendar__days-item"
+            >
+              Thu
+            </div>
+            <div
+              class="t-calendar__days-item"
+            >
+              Fri
+            </div>
+            <div
+              class="t-calendar__days-item"
+            >
+              Sat
+            </div>
+            
+          </div>
+          <div
+            class="t-calendar__months"
+            style="overflow: auto;"
+          >
+            
+            
+            <div
+              class="t-calendar__month"
+            >
+              December 2020
+            </div>
+            <div
+              class="t-calendar__dates"
+            >
+              
+              <div />
+              <div />
+              
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                1
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                2
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                3
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                4
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                5
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                6
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                7
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                8
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                9
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                10
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                11
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                12
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                13
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                14
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                15
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                16
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                17
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                18
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                19
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                20
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                21
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                22
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                23
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                24
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                25
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                26
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                27
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--selected"
+              >
+                
+                <!---->
+                28
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                29
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                30
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                31
+                <!---->
+                
+              </div>
+              
+              
+            </div>
+            
+            
+            <div
+              class="t-calendar__month"
+            >
+              January 2021
+            </div>
+            <div
+              class="t-calendar__dates"
+            >
+              
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
+              
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                1
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                2
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                3
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                4
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                5
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                6
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                7
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                8
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                9
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                10
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                11
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                12
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                13
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                14
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                15
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                16
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                17
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                18
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                19
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                20
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                21
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                22
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                23
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                24
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                25
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                26
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                27
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                28
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                29
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                30
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                31
+                <!---->
+                
+              </div>
+              
+              
+            </div>
+            
+            
+            <div
+              class="t-calendar__month"
+            >
+              February 2021
+            </div>
+            <div
+              class="t-calendar__dates"
+            >
+              
+              <div />
+              
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                1
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                2
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                3
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                4
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                5
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                6
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                7
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                8
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                9
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                10
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                11
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                12
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                13
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                14
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                15
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                16
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                17
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                18
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                19
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                20
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                21
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                22
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                23
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                24
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                25
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                26
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                27
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                28
+                <!---->
+                
+              </div>
+              
+              
+            </div>
+            
+            
+            <div
+              class="t-calendar__month"
+            >
+              March 2021
+            </div>
+            <div
+              class="t-calendar__dates"
+            >
+              
+              <div />
+              
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                1
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                2
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                3
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                4
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                5
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                6
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                7
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                8
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                9
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                10
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                11
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                12
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                13
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                14
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                15
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                16
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                17
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                18
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                19
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                20
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                21
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                22
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                23
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                24
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                25
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                26
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                27
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                28
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                29
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                30
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                31
+                <!---->
+                
+              </div>
+              
+              
+            </div>
+            
+            
+            <div
+              class="t-calendar__month"
+            >
+              April 2021
+            </div>
+            <div
+              class="t-calendar__dates"
+            >
+              
+              <div />
+              <div />
+              <div />
+              <div />
+              
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                1
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                2
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                3
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                4
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                5
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                6
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                7
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                8
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                9
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                10
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                11
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                12
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                13
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                14
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                15
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                16
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                17
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                18
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                19
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                20
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                21
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                22
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                23
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                24
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                25
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                26
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                27
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                28
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                29
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                30
+                <!---->
+                
+              </div>
+              
+              
+            </div>
+            
+            
+            <div
+              class="t-calendar__month"
+            >
+              May 2021
+            </div>
+            <div
+              class="t-calendar__dates"
+            >
+              
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
+              
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                1
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                2
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                3
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                4
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                5
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                6
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                7
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                8
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                9
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                10
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                11
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                12
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                13
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                14
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                15
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                16
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                17
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                18
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                19
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                20
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                21
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                22
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                23
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                24
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                25
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                26
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                27
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                28
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                29
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                30
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                31
+                <!---->
+                
+              </div>
+              
+              
+            </div>
+            
+            
+            <div
+              class="t-calendar__month"
+            >
+              June 2021
+            </div>
+            <div
+              class="t-calendar__dates"
+            >
+              
+              <div />
+              <div />
+              
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                1
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                2
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                3
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                4
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                5
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                6
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                7
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                8
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                9
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                10
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                11
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                12
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                13
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                14
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                15
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                16
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                17
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                18
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                19
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                20
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                21
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                22
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                23
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                24
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                25
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                26
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                27
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item"
+              >
+                
+                <!---->
+                28
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                29
+                <!---->
+                
+              </div>
+              
+              
+              <div
+                class="t-calendar__dates-item t-calendar__dates-item--disabled"
+              >
+                
+                <!---->
+                30
+                <!---->
+                
+              </div>
+              
+              
+            </div>
+            
+            
+          </div>
+          <div
+            class="t-calendar__footer"
+          >
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                Confirm
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
+      </div>
+    </teleport-stub>
+  </div>
+  <div
+    class="t-cell t-cell--middle"
+    data-v-0f72cd9e=""
+  >
+    <div
+      class="t-cell__left"
+    >
+      <!---->
+      <!---->
+    </div>
+    <div
+      class="t-cell__title"
+    >
+      Single select date
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <div
+      class="t-cell__right"
+    >
+      <div
+        class="t-cell__right-icon"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    class="t-cell t-cell--middle"
+    data-v-0f72cd9e=""
+  >
+    <div
+      class="t-cell__left"
+    >
+      <!---->
+      <!---->
+    </div>
+    <div
+      class="t-cell__title"
+    >
+      Select time
+      <!---->
+      <!---->
+    </div>
+    <div
+      class="t-cell__note"
+    >
+      YY-MM-DD
+    </div>
+    <!---->
+  </div>
+  <teleport-stub
+    data-v-0f72cd9e=""
+    disabled="false"
+    to="[object HTMLBodyElement]"
+  >
+    <div
+      class="t-overlay"
+      style="z-index: 1000; transition-duration: 300ms; display: none;"
+    >
+      <!---->
+    </div>
+    <div
+      class="t-popup t-popup--bottom"
+      style="display: none;"
+    >
+      <!--v-if-->
+      
+      <div
+        class="t-picker t-date-time-picker"
+        data-v-0f72cd9e=""
+      >
+        <div
+          class="t-picker__toolbar"
+        >
+          <div
+            class="t-picker__cancel"
+          >
+            Cancel
+          </div>
+          <div
+            class="t-picker__title"
+          >
+            title test
+          </div>
+          <div
+            class="t-picker__confirm"
+          >
+            Confirm
+          </div>
+        </div>
+        <!---->
+        <div
+          class="t-picker__main"
+        >
+          
+          <div
+            class="t-picker-item__group"
+          >
+            <ul
+              class="t-picker-item"
+              style="transform: translate3d(0, -160px, 0);"
+            >
+              
+              <li
+                class="t-picker-item__item"
+              >
+                2015 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2016 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2017 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2018 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2019 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2020 Year
+              </li>
+              <li
+                class="t-picker-item__item t-picker-item__item--active"
+              >
+                2021 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2022 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2023 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2024 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2025 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2026 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2027 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2028 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2029 Year
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2030 Year
+              </li>
+              
+            </ul>
+          </div>
+          <div
+            class="t-picker-item__group"
+          >
+            <ul
+              class="t-picker-item"
+              style="transform: translate3d(0, -360px, 0);"
+            >
+              
+              <li
+                class="t-picker-item__item"
+              >
+                1 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                3 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                4 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                5 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                6 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                7 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                8 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                9 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                10 Month
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                11 Month
+              </li>
+              <li
+                class="t-picker-item__item t-picker-item__item--active"
+              >
+                12 Month
+              </li>
+              
+            </ul>
+          </div>
+          <div
+            class="t-picker-item__group"
+          >
+            <ul
+              class="t-picker-item"
+              style="transform: translate3d(0, -800px, 0);"
+            >
+              
+              <li
+                class="t-picker-item__item"
+              >
+                1 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                2 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                3 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                4 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                5 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                6 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                7 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                8 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                9 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                10 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                11 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                12 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                13 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                14 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                15 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                16 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                17 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                18 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                19 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                20 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                21 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                22 Date
+              </li>
+              <li
+                class="t-picker-item__item t-picker-item__item--active"
+              >
+                23 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                24 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                25 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                26 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                27 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                28 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                29 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                30 Date
+              </li>
+              <li
+                class="t-picker-item__item"
+              >
+                31 Date
+              </li>
+              
+            </ul>
+          </div>
+          
+          <div
+            class="t-picker__mask t-picker__mask--top"
+          />
+          <div
+            class="t-picker__mask t-picker__mask--bottom"
+          />
+          <div
+            class="t-picker__indicator"
+          />
+        </div>
+      </div>
+      
+    </div>
+  </teleport-stub>
+  
+</div>
+`;
+
+exports[`ConfigProvider > ConfigProvider tableEnVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- 全局配置：空数据呈现，演示 -->
+  <div
+    class="t-table t-vertical-align-middle t-table--bordered"
+    style="position: relative;"
+  >
+    <div
+      class="t-table__content"
+    >
+      <table
+        class="t-table--layout-fixed"
+      >
+        <colgroup>
+          
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          
+        </colgroup>
+        <thead
+          class="t-table__header t-table--bordered"
+        >
+          <tr>
+            
+            <th
+              class="t-table__th-type"
+            >
+              <div>
+                Type
+              </div>
+            </th>
+            <th
+              class="t-table__th-platform"
+            >
+              <div>
+                Platform
+              </div>
+            </th>
+            <th
+              class="t-table__th-property"
+            >
+              <div>
+                Property
+              </div>
+            </th>
+            
+          </tr>
+        </thead>
+        <tbody
+          class="t-table__body"
+        >
+          <tr
+            class="t-table__empty-row"
+          >
+            <td
+              colspan="3"
+            >
+              <div
+                class="t-table__empty"
+              >
+                Empty Data Test
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <!---->
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`ConfigProvider > ConfigProvider uploadEnVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="upload-demo"
+    data-v-41cb315a=""
+  >
+    <div
+      class="t-upload"
+      data-v-41cb315a=""
+    >
+      
+      <div
+        class="t-upload__item"
+      >
+        <div
+          class="t-image t-image--round t-upload__image"
+        >
+          <div
+            class="t-image__mask"
+          >
+            <div
+              class="t-loading"
+              style="font-size: 20px;"
+            >
+              <div
+                class="t-loading__dots"
+                style="animation-duration: 800ms; width: 20px; height: 20px;"
+              >
+                
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0s;"
+                />
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                />
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                />
+                
+              </div>
+              <!--v-if-->
+              <!---->
+            </div>
+          </div>
+          <picture>
+            <!--v-if-->
+            <img
+              alt=""
+              class="t-image__img"
+              src="https://tdesign.gtimg.com/mobile/demos/upload6.png"
+              style="object-fit: fill; object-position: center;"
+            />
+          </picture>
+        </div>
+        <div
+          class="t-upload__progress-mask"
+        >
+          
+          <svg
+            class="t-icon t-icon-loading t-upload__progress-loading"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          <div
+            class="t-upload__progress-text"
+          >
+            Uploading...
+          </div>
+          
+          <!---->
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item"
+      >
+        <div
+          class="t-image t-image--round t-upload__image"
+        >
+          <div
+            class="t-image__mask"
+          >
+            <div
+              class="t-loading"
+              style="font-size: 20px;"
+            >
+              <div
+                class="t-loading__dots"
+                style="animation-duration: 800ms; width: 20px; height: 20px;"
+              >
+                
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0s;"
+                />
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                />
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                />
+                
+              </div>
+              <!--v-if-->
+              <!---->
+            </div>
+          </div>
+          <picture>
+            <!--v-if-->
+            <img
+              alt=""
+              class="t-image__img"
+              src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+              style="object-fit: fill; object-position: center;"
+            />
+          </picture>
+        </div>
+        <div
+          class="t-upload__progress-mask"
+        >
+          
+          <svg
+            class="t-icon t-icon-loading t-upload__progress-loading"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          <div
+            class="t-upload__progress-text"
+          >
+            68%
+          </div>
+          
+          <!---->
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item"
+      >
+        <div
+          class="t-image t-image--round t-upload__image"
+        >
+          <div
+            class="t-image__mask"
+          >
+            <div
+              class="t-loading"
+              style="font-size: 20px;"
+            >
+              <div
+                class="t-loading__dots"
+                style="animation-duration: 800ms; width: 20px; height: 20px;"
+              >
+                
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0s;"
+                />
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                />
+                <div
+                  class="t-loading__dot"
+                  style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                />
+                
+              </div>
+              <!--v-if-->
+              <!---->
+            </div>
+          </div>
+          <picture>
+            <!--v-if-->
+            <img
+              alt=""
+              class="t-image__img"
+              src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+              style="object-fit: fill; object-position: center;"
+            />
+          </picture>
+        </div>
+        <div
+          class="t-upload__progress-mask"
+        >
+          <svg
+            class="t-icon t-icon-close-circle"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+              fill="currentColor"
+            />
+          </svg>
+          <div
+            class="t-upload__progress-text"
+          >
+            Failed
+          </div>
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      
+      <div
+        class="t-upload__item t-upload__item--add"
+      >
+        <div
+          class="t-upload__add-icon"
+        >
+          <svg
+            class="t-icon t-icon-add"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <input
+        accept="image/png"
+        hidden=""
+        multiple=""
+        type="file"
+      />
+      <!--v-if-->
+    </div>
+  </div>
+  
+</div>
+`;
diff --git a/src/config-provider/__test__/demo.test.jsx b/src/config-provider/__test__/demo.test.jsx
new file mode 100644
index 00000000..03950d45
--- /dev/null
+++ b/src/config-provider/__test__/demo.test.jsx
@@ -0,0 +1,29 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import { mount } from '@vue/test-utils';
+import MockDate from 'mockdate';
+
+import mobileVue from '@/config-provider/demos/mobile.vue';
+import otherEnVue from '@/config-provider/demos/other-en.vue';
+import tableEnVue from '@/config-provider/demos/table-en.vue';
+import uploadEnVue from '@/config-provider/demos/upload-en.vue';
+
+MockDate.set('2020-12-28');
+
+const mapper = {
+  mobileVue,
+  otherEnVue,
+  tableEnVue,
+  uploadEnVue,
+};
+
+describe('ConfigProvider', () => {
+  Object.keys(mapper).forEach((demoName) => {
+    it(`ConfigProvider ${demoName} demo works fine`, () => {
+      const wrapper = mount(mapper[demoName]);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/guide/__test__/__snapshots__/demo.test.jsx.snap b/src/guide/__test__/__snapshots__/demo.test.jsx.snap
new file mode 100644
index 00000000..2c0fce05
--- /dev/null
+++ b/src/guide/__test__/__snapshots__/demo.test.jsx.snap
@@ -0,0 +1,451 @@
+// Vitest Snapshot v1
+
+exports[`Guide > Guide baseVue demo works fine 1`] = `
+<div
+  class="guide-demo"
+  data-v-0878fddc=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+    data-v-0878fddc=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      用户引导
+    </span>
+    <!---->
+  </button>
+  <!--v-if-->
+</div>
+`;
+
+exports[`Guide > Guide customPopoverVue demo works fine 1`] = `
+<div
+  class="guide-demo"
+  data-v-3d2ff394=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+    data-v-3d2ff394=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      用户引导
+      
+    </span>
+    <!---->
+  </button>
+  <!--v-if-->
+</div>
+`;
+
+exports[`Guide > Guide dialogBodyVue demo works fine 1`] = `
+<div
+  class="dialog-body"
+  data-v-36c645cc=""
+>
+  <p
+    data-v-36c645cc=""
+  >
+    用户引导的说明文案
+  </p>
+  <div
+    class="img-wrapper"
+    data-v-36c645cc=""
+  >
+    <img
+      alt="demo"
+      data-v-36c645cc=""
+      src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Guide > Guide dialogVue demo works fine 1`] = `
+<div
+  class="guide-demo"
+  data-v-29551fda=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+    data-v-29551fda=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      用户引导
+      
+    </span>
+    <!---->
+  </button>
+  <!--v-if-->
+</div>
+`;
+
+exports[`Guide > Guide mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+  data-v-810e7326=""
+>
+  <h1
+    class="title"
+    data-v-810e7326=""
+  >
+    Guide 引导
+  </h1>
+  <p
+    class="summary"
+    data-v-810e7326=""
+  >
+    逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-810e7326=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        基础引导
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="guide-demo"
+        data-v-0878fddc=""
+        data-v-810e7326=""
+      >
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+          data-v-0878fddc=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            用户引导
+          </span>
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-810e7326=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        不带遮罩的引导
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="guide-demo"
+        data-v-810e7326=""
+        data-v-f1ceb786=""
+      >
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+          data-v-f1ceb786=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            用户引导
+            
+          </span>
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-810e7326=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        弹窗形式的引导
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="guide-demo"
+        data-v-29551fda=""
+        data-v-810e7326=""
+      >
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+          data-v-29551fda=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            用户引导
+            
+          </span>
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-810e7326=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        气泡与弹窗混合的引导
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="guide-demo"
+        data-v-810e7326=""
+        data-v-f2851d8a=""
+      >
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+          data-v-f2851d8a=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            用户引导
+            
+          </span>
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-810e7326=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        自定义气泡
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="guide-demo"
+        data-v-3d2ff394=""
+        data-v-810e7326=""
+      >
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+          data-v-3d2ff394=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            用户引导
+            
+          </span>
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Guide > Guide myPopoverVue demo works fine 1`] = `
+<div
+  class="my-popover"
+  data-v-7cb786cf=""
+>
+  <svg
+    class="t-icon t-icon-arrow-up pop-icon"
+    data-v-7cb786cf=""
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+  >
+    <path
+      d="M11 19.5V7.91l-4.5 4.5L5.09 11 12 4.09 18.91 11l-1.41 1.41-4.5-4.5V19.5h-2z"
+      fill="currentColor"
+    />
+  </svg>
+  <p
+    class="popover-desc"
+    data-v-7cb786cf=""
+  >
+    自定义的图形或说明文案，用来解释或指导该功能使用。
+  </p>
+  <div
+    class="popover-action"
+    data-v-7cb786cf=""
+  >
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-extra-small t-button--base t-button--light t-button--rectangle"
+      data-v-7cb786cf=""
+      role="button"
+      type="button"
+    >
+      <!---->
+      <span
+        class="t-button__content"
+      >
+        
+         跳过 
+        
+      </span>
+      <!---->
+    </button>
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+`;
+
+exports[`Guide > Guide noMaskVue demo works fine 1`] = `
+<div
+  class="guide-demo"
+  data-v-f1ceb786=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+    data-v-f1ceb786=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      用户引导
+      
+    </span>
+    <!---->
+  </button>
+  <!--v-if-->
+</div>
+`;
+
+exports[`Guide > Guide popoverDialogVue demo works fine 1`] = `
+<div
+  class="guide-demo"
+  data-v-f2851d8a=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+    data-v-f2851d8a=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      用户引导
+      
+    </span>
+    <!---->
+  </button>
+  <!--v-if-->
+</div>
+`;
diff --git a/src/guide/__test__/demo.test.jsx b/src/guide/__test__/demo.test.jsx
new file mode 100644
index 00000000..db826507
--- /dev/null
+++ b/src/guide/__test__/demo.test.jsx
@@ -0,0 +1,33 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import { mount } from '@vue/test-utils';
+import baseVue from '@/guide/demos/base.vue';
+import customPopoverVue from '@/guide/demos/custom-popover.vue';
+import dialogBodyVue from '@/guide/demos/dialog-body.vue';
+import dialogVue from '@/guide/demos/dialog.vue';
+import mobileVue from '@/guide/demos/mobile.vue';
+import myPopoverVue from '@/guide/demos/my-popover.vue';
+import noMaskVue from '@/guide/demos/no-mask.vue';
+import popoverDialogVue from '@/guide/demos/popover-dialog.vue';
+
+const mapper = {
+  baseVue,
+  customPopoverVue,
+  dialogBodyVue,
+  dialogVue,
+  mobileVue,
+  myPopoverVue,
+  noMaskVue,
+  popoverDialogVue,
+};
+
+describe('Guide', () => {
+  Object.keys(mapper).forEach((demoName) => {
+    it(`Guide ${demoName} demo works fine`, () => {
+      const wrapper = mount(mapper[demoName]);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
index 76093e55..62a74e6b 100644
--- a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -1161,8 +1161,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
                 
                 
               </div>
-              <!-- 导航器 -->
-              <!--v-if-->
+              <!---->
             </div>
           </div>
         </div>
@@ -1335,8 +1334,7 @@ exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
             
             
           </div>
-          <!-- 导航器 -->
-          <!--v-if-->
+          <!---->
         </div>
       </div>
     </div>
diff --git a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
index 7e97906c..dc6e0163 100644
--- a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
@@ -71,15 +71,16 @@ exports[`Swiper > Swiper baseVue demo works fine 1`] = `
       
       
     </div>
-    <!-- 导航器 -->
     
-    <!--v-if-->
+    <!---->
     <span
       class="t-swiper-nav--horizontal t-swiper-nav__dots t-swiper-nav--bottom"
     >
       
       
-      <!--v-if-->
+      
+      
+      <!---->
     </span>
     
   </div>
@@ -154,15 +155,16 @@ exports[`Swiper > Swiper cardVue demo works fine 1`] = `
     
     
   </div>
-  <!-- 导航器 -->
   
-  <!--v-if-->
+  <!---->
   <span
     class="t-swiper-nav--horizontal t-swiper-nav__dots t-swiper-nav--bottom"
   >
     
     
-    <!--v-if-->
+    
+    
+    <!---->
   </span>
   
 </div>
@@ -239,7 +241,6 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
       
       
     </div>
-    <!-- 导航器 -->
     
     <span
       class="t-swiper-nav__btn"
@@ -251,7 +252,7 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
         class="t-swiper-nav__btn--next"
       />
     </span>
-    <!--v-if-->
+    <!---->
     
   </div>
 </div>
@@ -328,15 +329,16 @@ exports[`Swiper > Swiper customVue demo works fine 1`] = `
       
       
     </div>
-    <!-- 导航器 -->
     
-    <!--v-if-->
+    <!---->
     <span
       class="t-swiper-nav--horizontal t-swiper-nav__dots-bar t-swiper-nav--bottom"
     >
       
       
-      <!--v-if-->
+      
+      
+      <!---->
     </span>
     
   </div>
@@ -414,13 +416,12 @@ exports[`Swiper > Swiper fractionVue demo works fine 1`] = `
       
       
     </div>
-    <!-- 导航器 -->
     
-    <!--v-if-->
+    <!---->
     <span
       class="t-swiper-nav--horizontal t-swiper-nav__fraction t-swiper-nav--bottom-right"
     >
-      <!--v-if-->
+      <!---->
       <span>
         1/0
       </span>
@@ -535,15 +536,16 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             
             
           </div>
-          <!-- 导航器 -->
           
-          <!--v-if-->
+          <!---->
           <span
             class="t-swiper-nav--horizontal t-swiper-nav__dots t-swiper-nav--bottom"
           >
             
             
-            <!--v-if-->
+            
+            
+            <!---->
           </span>
           
         </div>
@@ -638,15 +640,16 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             
             
           </div>
-          <!-- 导航器 -->
           
-          <!--v-if-->
+          <!---->
           <span
             class="t-swiper-nav--horizontal t-swiper-nav__dots-bar t-swiper-nav--bottom"
           >
             
             
-            <!--v-if-->
+            
+            
+            <!---->
           </span>
           
         </div>
@@ -741,13 +744,12 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             
             
           </div>
-          <!-- 导航器 -->
           
-          <!--v-if-->
+          <!---->
           <span
             class="t-swiper-nav--horizontal t-swiper-nav__fraction t-swiper-nav--bottom-right"
           >
-            <!--v-if-->
+            <!---->
             <span>
               1/0
             </span>
@@ -845,7 +847,6 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             
             
           </div>
-          <!-- 导航器 -->
           
           <span
             class="t-swiper-nav__btn"
@@ -857,7 +858,7 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
               class="t-swiper-nav__btn--next"
             />
           </span>
-          <!--v-if-->
+          <!---->
           
         </div>
       </div>
@@ -958,15 +959,120 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
             
             
           </div>
-          <!-- 导航器 -->
           
-          <!--v-if-->
+          <!---->
           <span
             class="t-swiper-nav--vertical t-swiper-nav__dots-bar t-swiper-nav--right"
           >
             
             
-            <!--v-if-->
+            
+            
+            <!---->
+          </span>
+          
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        outside模式
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        style="padding: 0px 16px;"
+      >
+        <div
+          class="t-swiper t-swiper--default t-swiper--outside"
+        >
+          <div
+            class="t-swiper__container"
+            style="flex-direction: row; transition: none; height: auto;"
+          >
+            
+            
+            <div
+              class="t-swiper-item"
+              style="height: 192px;"
+            >
+              
+              <img
+                class="img"
+                src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+              />
+              
+            </div>
+            <div
+              class="t-swiper-item"
+              style="height: 192px;"
+            >
+              
+              <img
+                class="img"
+                src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
+              />
+              
+            </div>
+            <div
+              class="t-swiper-item"
+              style="height: 192px;"
+            >
+              
+              <img
+                class="img"
+                src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+              />
+              
+            </div>
+            <div
+              class="t-swiper-item"
+              style="height: 192px;"
+            >
+              
+              <img
+                class="img"
+                src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
+              />
+              
+            </div>
+            <div
+              class="t-swiper-item"
+              style="height: 192px;"
+            >
+              
+              <img
+                class="img"
+                src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+              />
+              
+            </div>
+            
+            
+          </div>
+          
+          <!---->
+          <span
+            class="t-swiper-nav--horizontal t-swiper-nav__dots t-swiper-nav--bottom t-swiper-nav--outside"
+          >
+            
+            
+            
+            
+            <!---->
           </span>
           
         </div>
@@ -977,6 +1083,93 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Swiper > Swiper outsideVue demo works fine 1`] = `
+<div
+  style="padding: 0px 16px;"
+>
+  <div
+    class="t-swiper t-swiper--default t-swiper--outside"
+  >
+    <div
+      class="t-swiper__container"
+      style="flex-direction: row; transition: none; height: auto;"
+    >
+      
+      
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
+        />
+        
+      </div>
+      <div
+        class="t-swiper-item"
+        style="height: 192px;"
+      >
+        
+        <img
+          class="img"
+          src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
+        />
+        
+      </div>
+      
+      
+    </div>
+    
+    <!---->
+    <span
+      class="t-swiper-nav--horizontal t-swiper-nav__dots t-swiper-nav--bottom t-swiper-nav--outside"
+    >
+      
+      
+      
+      
+      <!---->
+    </span>
+    
+  </div>
+</div>
+`;
+
 exports[`Swiper > Swiper verticalVue demo works fine 1`] = `
 <div
   style="padding: 0px 16px;"
@@ -1048,15 +1241,16 @@ exports[`Swiper > Swiper verticalVue demo works fine 1`] = `
       
       
     </div>
-    <!-- 导航器 -->
     
-    <!--v-if-->
+    <!---->
     <span
       class="t-swiper-nav--vertical t-swiper-nav__dots-bar t-swiper-nav--right"
     >
       
       
-      <!--v-if-->
+      
+      
+      <!---->
     </span>
     
   </div>
diff --git a/src/swiper/__test__/demo.test.jsx b/src/swiper/__test__/demo.test.jsx
index b42102a1..38b0a1f3 100644
--- a/src/swiper/__test__/demo.test.jsx
+++ b/src/swiper/__test__/demo.test.jsx
@@ -9,6 +9,7 @@ import controlVue from '@/swiper/demos/control.vue';
 import customVue from '@/swiper/demos/custom.vue';
 import fractionVue from '@/swiper/demos/fraction.vue';
 import mobileVue from '@/swiper/demos/mobile.vue';
+import outsideVue from '@/swiper/demos/outside.vue';
 import verticalVue from '@/swiper/demos/vertical.vue';
 
 const mapper = {
@@ -18,6 +19,7 @@ const mapper = {
   customVue,
   fractionVue,
   mobileVue,
+  outsideVue,
   verticalVue,
 };
 
diff --git a/src/swiper/__test__/index.test.jsx b/src/swiper/__test__/index.test.jsx
index 566f4b11..e4fc9e0f 100644
--- a/src/swiper/__test__/index.test.jsx
+++ b/src/swiper/__test__/index.test.jsx
@@ -1,8 +1,8 @@
 import { describe, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { ref } from 'vue';
-import Swiper from '../swiper.vue';
-import SwiperItem from '../swiper-item.vue';
+import Swiper from '../swiper';
+import SwiperItem from '../swiper-item';
 
 const sleep = (duration) =>
   new Promise((resolve) =>