Skip to content

Commit

Permalink
chore: update snapshot
Browse files Browse the repository at this point in the history
  • Loading branch information
@uyarn
uyarn committed Jan 29, 2024
1 parent 69402ca commit c201ea2
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 14 deletions.
2 changes: 1 addition & 1 deletion src/popup/_example/container.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<t-space size="large">
<t-popup content="触发元素的父元素是组件根元素，通过 CSSSelector 定义" attach="#myPopup">
<t-popup content="触发元素的父元素是组件根元素，通过 CSSSelector 定义" attach="#myPopup" trigger="click">
<div id="myPopup">
<t-button variant="outline">父元素为组件本身</t-button>
</div>
Expand Down
49 changes: 48 additions & 1 deletion src/popup/_example/plugin.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
<template>
<t-space size="large">
<t-button variant="outline" class="trigger-element1" @click="handleElement1">已渲染的节点1</t-button>
<t-button variant="outline" class="trigger-element2" @click="handleElement2"
>通过Plugin打开，并修改不同浮层的配置</t-button
>
<div>
<span>这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作</span>
<a class="trigger-element3" style="color: var(--td-text-color-brand)" @click="handleCreatePopupOffset"
>点击此链接，会打开浮层进行跳转操作</a
>
</div>
</t-space>
</template>

Expand All @@ -9,10 +18,48 @@ import { PopupPlugin } from 'tdesign-vue-next';
function handleElement1() {
PopupPlugin('.trigger-element1', '渲染文本内容', {
placement: 'bottom',
showArrow: true,
trigger: 'hover',
destroyOnClose: true,
});
}
function handleElement2() {
PopupPlugin('.trigger-element2', '渲染文本的内容', {
placement: 'right',
showArrow: false,
});
}
function handleCreatePopupOffset() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
PopupPlugin('.trigger-element3', (h) => <div>透传popperOptions，在offset里控制节点位置</div>, {
placement: 'bottom',
attach: '.trigger-element3',
showArrow: true,
popperOptions: {
modifiers: [
{
name: 'offset',
trigger: 'click',
options: {
offset: ({ reference }) => {
const target = document.querySelector('.trigger-element3');
let { lineHeight } = getComputedStyle(target);
if (lineHeight === 'normal') {
const temp = document.createElement('div');
temp.innerText = 't';
document.body.appendChild(temp);
lineHeight = `${temp.offsetHeight}px`;
document.body.removeChild(temp);
}
const isBreakLine = reference.height > parseInt(lineHeight, 10);
return isBreakLine ? [null, -reference.height + 10] : [0, 0];
},
},
},
],
},
});
}
</script>
19 changes: 8 additions & 11 deletions src/popup/plugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,18 @@ export const createPopupPlugin: PopupPluginMethod = (trigger, content, popupProp
triggerEl = currentTriggerEl;
removeOverlayInstance();

let overlayAttach = getAttach(popupProps?.attach || 'body');

// const delay = [].concat(popupProps?.delay ?? [250, 150]);
// const closeDelay = delay[1] ?? delay[0];
if (overlayAttach === document.body) {
// don't allow mount on body directly
const popupDom = document.createElement('div');
document.body.appendChild(popupDom);
overlayAttach = popupDom;
}
const overlayAttach = getAttach(popupProps?.attach || 'body');

const popupDom = document.createElement('div');
popupDom.style.cssText = 'position: absolute; top: 0px; left: 0px; width: 100%';

const overlayInstance = createApp(popupOverlayComponent, {
...popupProps,
content,
triggerElement: triggerEl,
}).mount(overlayAttach).$el;
}).mount(popupDom).$el;

overlayAttach.appendChild(popupDom);

popperInstance = createPopper(triggerEl, overlayInstance, {
placement: getPopperPlacement(popupProps?.placement || ('top' as TdPopupProps['placement'])),
Expand Down
38 changes: 38 additions & 0 deletions test/unit/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98667,6 +98667,44 @@ exports[`csr snapshot test > csr test ./src/popup/_example/plugin.vue 1`] = `
<!---->


<div
class="t-space-item"
>
<button
class="t-button t-button--variant-outline t-button--theme-default trigger-element2"
href=""
tabindex="0"
type="button"
>
<span
class="t-button__text"
>

通过Plugin打开，并修改不同浮层的配置

</span>
</button>
</div>
<!---->


<div
class="t-space-item"
>
<div>
<span>
这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作
</span>
<a
class="trigger-element3"
>
点击此链接，会打开浮层进行跳转操作
</a>
</div>
</div>
<!---->


</div>
`;

Expand Down
2 changes: 1 addition & 1 deletion test/unit/snap/__snapshots__/ssr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -788,7 +788,7 @@ exports[`ssr snapshot test > ssr test ./src/popup/_example/disabled.vue 1`] = `"

exports[`ssr snapshot test > ssr test ./src/popup/_example/placement.vue 1`] = `"<div class=\\"container\\" data-v-b59115c6><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement top center\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> top <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement top left\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> top-left <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement top right\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> top-right <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement bottom center\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> bottom <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement bottom left\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> bottom-left <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement bottom right\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> bottom-right <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement align\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> left <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement top-align\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> left-top <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement bottom-align\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> left-bottom <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement right-full align\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> right <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement right-full top-align\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> right-top <!--]--></span></button><!----><!--]--><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default placement right-full bottom-align\\" type=\\"button\\" href tabindex=\\"0\\" data-v-b59115c6><span class=\\"t-button__text\\"><!--[--> right-bottom <!--]--></span></button><!----><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/popup/_example/plugin.vue 1`] = `"<div class=\\"t-space t-space-horizontal\\" style=\\"gap:24px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-outline t-button--theme-default trigger-element1\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->已渲染的节点1<!--]--></span></button></div><!----><!--]--><!--]--></div>"`;
exports[`ssr snapshot test > ssr test ./src/popup/_example/plugin.vue 1`] = `"<div class=\\"t-space t-space-horizontal\\" style=\\"gap:24px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-outline t-button--theme-default trigger-element1\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->已渲染的节点1<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-outline t-button--theme-default trigger-element2\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->通过Plugin打开，并修改不同浮层的配置<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div><span>这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作</span><a class=\\"trigger-element3\\" style=\\"color:var(--td-text-color-brand);\\">点击此链接，会打开浮层进行跳转操作</a></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/popup/_example/style.vue 1`] = `"<div class=\\"t-space t-space-horizontal\\" style=\\"gap:24px;\\" data-v-be976c2e><!--[--><!--[--><div class=\\"t-space-item\\"><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\" data-v-be976c2e><span class=\\"t-button__text\\"><!--[-->自定义浮层类名<!--]--></span></button><!----><!--]--></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\" data-v-be976c2e><span class=\\"t-button__text\\"><!--[-->固定浮层宽度<!--]--></span></button><!----><!--]--></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\" data-v-be976c2e><span class=\\"t-button__text\\"><!--[-->浮层最大宽度<!--]--></span></button><!----><!--]--></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\" data-v-be976c2e><span class=\\"t-button__text\\"><!--[-->浮层和触发元素同宽<!--]--></span></button><!----><!--]--></div><!----><!--]--><!--]--></div>"`;

Expand Down

0 comments on commit c201ea2

Please sign in to comment.