[Timeline] tests & features & bugs (Tencent#2395)

* feat(timeline): tests & bugs & features * refactor(timeline): rename file name * fix(timeline): dot center * fix(dialog): ssr need string to telport * fix(dialog): teleport
sinbadmaster · Jun 2, 2023 · 532e107 · 532e107
1 parent b3f44ef
commit 532e107
Show file tree

Hide file tree

Showing 22 changed files with 485 additions and 202 deletions.
diff --git a/src/dialog/_example/base.vue b/src/dialog/_example/base.vue
@@ -5,6 +5,7 @@
       v-model:visible="visible"
       header="对话框标题"
       body="对话框内容"
+      attach="body"
       :confirm-on-enter="true"
       :on-cancel="onCancel"
       :on-esc-keydown="onEscKeydown"

diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
@@ -25,7 +25,7 @@ import { useAction, useSameTarget } from './hooks';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
 import useDestroyOnClose from '../hooks/useDestroyOnClose';
 import { stack } from './stack';
-import { getAttach, getScrollbarWidth } from '../utils/dom';
+import { getAttach, getScrollbarWidth, getSSRAttach } from '../utils/dom';
 
 import type { TdDialogProps } from './type';
 import isUndefined from 'lodash/isUndefined';
@@ -449,7 +449,7 @@ export default defineComponent({
       },
     ];
     return (
-      <Teleport disabled={!this.attach} to={getAttach(this.attach)}>
+      <Teleport disabled={!this.attach} to={getSSRAttach() || getAttach(this.attach)}>
         <Transition
           duration={300}
           name={`${COMPONENT_NAME}-zoom__vue`}

diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
@@ -2,7 +2,7 @@ import { onBeforeUnmount, onMounted, computed, defineComponent, nextTick, onUpda
 import { CloseIcon as TdCloseIcon } from 'tdesign-icons-vue-next';
 import { useConfig, usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
-import { isServer, getScrollbarWidth, getAttach } from '../utils/dom';
+import { isServer, getScrollbarWidth, getAttach, getSSRAttach } from '../utils/dom';
 import props from './props';
 import { DrawerCloseContext } from './type';
 import { useAction } from '../dialog/hooks';
@@ -244,7 +244,7 @@ export default defineComponent({
       const headerContent = renderTNodeJSX('header');
       const defaultFooter = getDefaultFooter();
       return (
-        <Teleport disabled={!props.attach} to={getAttach(props.attach)}>
+        <Teleport disabled={!props.attach} to={getSSRAttach() || getAttach(props.attach)}>
           <div
             ref={drawerEle}
             class={drawerClasses.value}

diff --git a/src/form/index.ts b/src/form/index.ts
@@ -1,12 +1,12 @@
 import _Form from './form';
 import _FormItem from './form-item';
 import withInstall from '../utils/withInstall';
-import { TdFormProps, TdFormItemProps } from './type';
+import { TdFormProps, TdFormItemProps, Data } from './type';
 
 import './style';
 
 export * from './type';
-export type FormProps = TdFormProps;
+export type FormProps<FormData extends Data = Data> = TdFormProps<FormData>;
 export type FormItemProps = TdFormItemProps;
 
 export const Form = withInstall(_Form);

diff --git a/src/loading/loading.tsx b/src/loading/loading.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, watch, onMounted, toRefs, CSSProperties, Teleport } from 'vue';
 import GradientIcon from './icon/gradient';
-import { addClass, removeClass, getAttach } from '../utils/dom';
+import { addClass, removeClass, getAttach, getSSRAttach } from '../utils/dom';
 import { renderTNodeJSX, renderContent } from '../utils/render-tnode';
 import props from './props';
 
@@ -125,7 +125,7 @@ export default defineComponent({
     if (this.fullscreen) {
       if (!this.showFullScreenLoading || !this.loading) return null;
       return (
-        <Teleport disabled={!this.attach} to={getAttach(this.attach)}>
+        <Teleport disabled={!this.attach} to={getSSRAttach() || getAttach(this.attach)}>
           <div class={fullScreenClasses} style={this.styles}>
             <div class={baseClasses}>
               {indicator}
@@ -155,7 +155,7 @@ export default defineComponent({
     if (this.attach) {
       if (!this.showAttachedLoading || !this.loading) return null;
       return (
-        <Teleport disabled={!this.attach} to={getAttach(this.attach)}>
+        <Teleport disabled={!this.attach} to={getSSRAttach() || getAttach(this.attach)}>
           <div class={attachClasses} style={this.styles}>
             {indicator}
             {text}

diff --git a/src/popup/container.tsx b/src/popup/container.tsx
@@ -13,7 +13,7 @@ import {
   onUpdated,
   ComponentInternalInstance,
 } from 'vue';
-import { getAttach } from '../utils/dom';
+import { getAttach, getSSRAttach } from '../utils/dom';
 import props from './props';
 import useResizeObserver from '../hooks/useResizeObserver';
 import isUndefined from 'lodash/isUndefined';
@@ -184,7 +184,7 @@ export default defineComponent({
           {this.$slots.default()}
         </Trigger>
         {this.mountContent && (
-          <Teleport to={getAttach(this.attach, this.triggerEl)}>
+          <Teleport to={getSSRAttach() || getAttach(this.attach, this.triggerEl)}>
             <Content onResize={this.emitResize} onVnodeMounted={this.emitContentMounted}>
               {this.$slots.content && this.$slots.content()}
             </Content>

diff --git a/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap b/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap
@@ -0,0 +1,137 @@
+// Vitest Snapshot v1
+
+exports[`TimelineItem Component > props.content works fine 1`] = `
+<li
+  class="t-timeline-item t-timeline-item-top"
+>
+  <!---->
+  <div
+    class="t-timeline-item__wrapper"
+  >
+    <div
+      class="t-timeline-item__dot t-timeline-item__dot--default"
+    >
+      <!---->
+      <!---->
+    </div>
+    <div
+      class="t-timeline-item__tail t-timeline-item__tail--theme-default"
+    />
+  </div>
+  <div
+    class="t-timeline-item__content"
+  >
+    <span
+      class="custom-node"
+    >
+      TNode
+    </span>
+    <!---->
+  </div>
+</li>
+`;
+
+exports[`TimelineItem Component > props.label works fine 1`] = `
+<li
+  class="t-timeline-item t-timeline-item-top"
+>
+  <div
+    class="t-timeline-item__label t-timeline-item__label--alternate"
+  >
+    <span
+      class="custom-node"
+    >
+      TNode
+    </span>
+  </div>
+  <div
+    class="t-timeline-item__wrapper"
+  >
+    <div
+      class="t-timeline-item__dot t-timeline-item__dot--default"
+    >
+      <!---->
+      <!---->
+    </div>
+    <div
+      class="t-timeline-item__tail t-timeline-item__tail--theme-default"
+    />
+  </div>
+  <div
+    class="t-timeline-item__content"
+  >
+    <!---->
+    <!---->
+  </div>
+</li>
+`;
+
+exports[`TimelineItem Component > slots.content works fine 1`] = `
+<li
+  class="t-timeline-item t-timeline-item-top"
+>
+  <!---->
+  <div
+    class="t-timeline-item__wrapper"
+  >
+    <div
+      class="t-timeline-item__dot t-timeline-item__dot--default"
+    >
+      <!---->
+      <!---->
+    </div>
+    <div
+      class="t-timeline-item__tail t-timeline-item__tail--theme-default"
+    />
+  </div>
+  <div
+    class="t-timeline-item__content"
+  >
+    
+    <span
+      class="custom-node"
+    >
+      TNode
+    </span>
+    
+    <!---->
+  </div>
+</li>
+`;
+
+exports[`TimelineItem Component > slots.label works fine 1`] = `
+<li
+  class="t-timeline-item t-timeline-item-top"
+>
+  <div
+    class="t-timeline-item__label t-timeline-item__label--alternate"
+  >
+    
+    <span
+      class="custom-node"
+    >
+      TNode
+    </span>
+    
+  </div>
+  <div
+    class="t-timeline-item__wrapper"
+  >
+    <div
+      class="t-timeline-item__dot t-timeline-item__dot--default"
+    >
+      <!---->
+      <!---->
+    </div>
+    <div
+      class="t-timeline-item__tail t-timeline-item__tail--theme-default"
+    />
+  </div>
+  <div
+    class="t-timeline-item__content"
+  >
+    <!---->
+    <!---->
+  </div>
+</li>
+`;
diff --git a/src/timeline/__tests__/mount.jsx b/src/timeline/__tests__/mount.jsx
@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils';
+import { Timeline, TimelineItem } from '../../timeline';
+
+export function getTimelineDefaultMount(Timeline, props, events) {
+  return mount(
+    <Timeline {...props} {...events}>
+      <TimelineItem label="2022-01-01">Event1</TimelineItem>
+      <TimelineItem label="2022-02-01">Event2</TimelineItem>
+      <TimelineItem label="2022-03-01">Event3</TimelineItem>
+      <TimelineItem label="2022-04-01" dotColor="yellowgreen">
+        Event4
+      </TimelineItem>
+    </Timeline>,
+  );
+}
+
+// labelAlign 优先级比较
+export function getTimelineItemMount(TimelineItem, props) {
+  return mount(
+    <Timeline labelAlign="right">
+      <TimelineItem {...props} label="2022-01-01">
+        Event1
+      </TimelineItem>
+      <TimelineItem label="2022-02-01">Event2</TimelineItem>
+      <TimelineItem label="2022-03-01">Event3</TimelineItem>
+      <TimelineItem label="2022-04-01">Event4</TimelineItem>
+    </Timeline>,
+  );
+}
+
+export default getTimelineDefaultMount;