Skip to content

Commit

Permalink
fix: KMenu floating popover automatic adjustment failed
Browse files Browse the repository at this point in the history
@baiwusanyu-c
baiwusanyu-c committed Jan 22, 2025
1 parent e79a514 commit b8312c7
Showing 16 changed files with 144 additions and 136 deletions.
6 changes: 3 additions & 3 deletions components/AutoComplete/__test__/__snapshots__/auto-complete.spec.ts.snap
View file

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions components/ColorPicker/__test__/__snapshots__/color-picker.spec.ts.snap
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions components/Dropdown/__test__/__snapshots__/dropdown.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Test: KDropdown > api: handleOpen 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item--base k-dropdown-item--base__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div> <button id="handle_open">open</button>"`;
exports[`Test: KDropdown > api: handleOpen 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item--base k-dropdown-item--base__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div> <button id="handle_open">open</button>"`;

exports[`Test: KDropdown > props: cls 1`] = `"<div aria-hidden="true" class="flex k-dropdown--test svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown k-dropdown--test" role="menu" tabindex="0" slot="triggerEl"></button></div> "`;

exports[`Test: KDropdown > props: disabled 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-cur-disabled k-button--disabled" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> "`;

exports[`Test: KDropdown > props: disabled 2`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item__disabled k-dropdown-item__disabled__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div>"`;
exports[`Test: KDropdown > props: disabled 2`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item__disabled k-dropdown-item__disabled__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div>"`;

exports[`Test: KDropdown > props: divider 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item__disabled k-dropdown-item__disabled__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div> <div class="k-dropdown-item k-dropdown-item__divider" aria-hidden="true" data-testid="k_dropdown__item"></div></div></div> </div>"`;
exports[`Test: KDropdown > props: divider 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item__disabled k-dropdown-item__disabled__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div> <div class="k-dropdown-item k-dropdown-item__divider" aria-hidden="true" data-testid="k_dropdown__item"></div></div></div> </div>"`;

exports[`Test: KDropdown > props: maxHeight 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: 10px;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item--base k-dropdown-item--base__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div>"`;
exports[`Test: KDropdown > props: maxHeight 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: 10px;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item--base k-dropdown-item--base__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div>"`;

exports[`Test: KDropdown > slots: default and dropdown 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item--base k-dropdown-item--base__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div>"`;
exports[`Test: KDropdown > slots: default and dropdown 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><button class="k-dropdown" role="menu" tabindex="0" slot="triggerEl"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true" id="KDropdown_id"> Dropdown List <span class="k-icon--base k-icon-transition i-carbon-chevron-down k-button--primary__icon k-button--primary__icon__fill ml-1" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span></button></button></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div class="k-scrollbar k-dropdown-item-container" slot="contentEl" style="--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent; max-height: undefined;"><div slot="dropdown"><div class="k-dropdown-item k-dropdown-item--base k-dropdown-item--base__dark" aria-hidden="true" data-testid="k_dropdown__item">白发三千丈</div></div></div> </div>"`;
2 changes: 1 addition & 1 deletion components/Ellipsis/__test__/__snapshots__/ellipsis.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@

exports[`Test: KEllipsis > props: cls 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base k-ellipsis--test" slot="triggerEl" aria-hidden="true" style="">...</div></div> "`;

exports[`Test: KEllipsis > props: content 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日胜春朝</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="top" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both; bottom: 8px;" data-popper-reference-hidden="" data-popper-escaped=""><span slot="contentEl">自古逢秋悲寂寥</span> <div k-popover-arrow="true" class="svelte-13arsd0" data-popper-arrow-top=""></div></div>"`;
exports[`Test: KEllipsis > props: content 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日胜春朝</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: -8px;"><span slot="contentEl">自古逢秋悲寂寥</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;

exports[`Test: KEllipsis > props: expand 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="-webkit-line-clamp: 3; display: -webkit-inline-box; overflow: hidden;">我言秋日...</div></div> "`;

100 changes: 50 additions & 50 deletions components/Menu/__test__/__snapshots__/menu.spec.ts.snap
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions components/Popconfirm/__test__/__snapshots__/popconfirm.spec.ts.snap
View file

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions components/Popconfirm/__test__/popconfirm.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人')).toBeTruthy();
expect(
@@ -56,7 +56,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('i-carbon-settings')).toBeTruthy();
expect(host.innerHTML.includes('k-popconfirm--error')).not.toBeTruthy();
@@ -77,7 +77,7 @@ describe('Test: KPopconfirm', () => {
elmSuccess.click();
const elmError = host.querySelector('#test_trigger_success') as HTMLElement;
elmError.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('k-popconfirm--error')).toBeTruthy();
expect(host.innerHTML.includes('k-popconfirm--info')).toBeTruthy();
@@ -93,7 +93,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人')).not.toBeTruthy();
expect(
@@ -110,7 +110,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人')).toBeTruthy();
expect(
@@ -128,7 +128,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人')).toBeTruthy();
expect(
@@ -159,7 +159,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人')).toBeTruthy();
expect(
@@ -288,7 +288,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('test title')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
@@ -302,7 +302,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('test content')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
@@ -316,7 +316,7 @@ describe('Test: KPopconfirm', () => {
await tick();
const elm = host.querySelector('#test_trigger') as HTMLElement;
elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('test footer')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
10 changes: 5 additions & 5 deletions components/Popover/__test__/__snapshots__/popover.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Test: KPopover > events: change 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both, __svelte_1936640108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
exports[`Test: KPopover > events: change 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both, __svelte_2123877217_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;

exports[`Test: KPopover > props: arrow 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> </div>"`;
exports[`Test: KPopover > props: arrow 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> </div>"`;

exports[`Test: KPopover > props: disabled 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> "`;

exports[`Test: KPopover > props: placement 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
exports[`Test: KPopover > props: placement 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;

exports[`Test: KPopover > props: trigger 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
exports[`Test: KPopover > props: trigger 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">top</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: -8px;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">有美一人，清扬婉兮</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;

exports[`Test: KPopover > slots: triggerEl & contentEl 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">triggerEl</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">contentEl</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
exports[`Test: KPopover > slots: triggerEl & contentEl 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" cls="mx-2">triggerEl</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: -8px;"><div slot="contentEl" class="flex flex-col"><p class="!my-2">contentEl</p></div> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
15 changes: 8 additions & 7 deletions components/Popover/__test__/popover.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -47,7 +47,7 @@ describe('Test: KPopover', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人，清扬婉兮')).toBeTruthy();
expect(host.innerHTML.includes('data-popper-arrow-bottom')).toBeTruthy();
@@ -67,7 +67,7 @@ describe('Test: KPopover', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人，清扬婉兮')).not.toBeTruthy();
expect(host.innerHTML.includes('data-popper-arrow-bottom')).not.toBeTruthy();
@@ -87,7 +87,7 @@ describe('Test: KPopover', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人，清扬婉兮')).toBeTruthy();
expect(host.innerHTML.includes('data-popper-arrow-bottom')).not.toBeTruthy();
@@ -114,7 +114,7 @@ describe('Test: KPopover', () => {
await tick();
const Elm = host.children[0] as HTMLElement;
Elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人，清扬婉兮')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
@@ -179,7 +179,7 @@ describe('Test: KPopover', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(
host.innerHTML.includes('triggerEl') && host.innerHTML.includes('contentEl')
@@ -201,13 +201,14 @@ describe('Test: KPopover', () => {
mockFn();
});
await tick();
await vi.advanceTimersByTimeAsync(300);
const Elm = host.children[0];
Elm.dispatchEvent(
new MouseEvent('mouseenter', {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人，清扬婉兮')).toBeTruthy();
expect(host.innerHTML.includes('data-popper-arrow-bottom')).toBeTruthy();
@@ -218,7 +219,7 @@ describe('Test: KPopover', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(mockFn).toBeCalledTimes(2);
expect(show).not.toBeTruthy();
17 changes: 12 additions & 5 deletions components/Popover/src/index.svelte
View file
Original file line number Diff line number Diff line change
@@ -43,7 +43,7 @@
const dispatch = createEventDispatcher();
const [popperRef, popperContent, updateFloating] = createFloatingActions({
strategy: 'fixed',
strategy: 'absolute',
placement,
middleware: [
offsetMd(offset),
@@ -53,9 +53,9 @@
shift(),
arrowMd({ element: arrowRef! })
],
onComputed({ placement }) {
if (placement !== curPlacement) {
curPlacement = placement as KPopoverProps['placement'];
onComputed({ placement: resolvePlacement }) {
if (resolvePlacement !== curPlacement) {
curPlacement = resolvePlacement as KPopoverProps['placement'];
updateArrow();
}
}
@@ -207,7 +207,14 @@
});
updateFloating({
middleware: [offsetMd(offset)]
middleware: [
offsetMd(offset),
flip({
fallbackPlacements: fallbackPlacements as Placement[]
}),
shift(),
arrowMd({ element: arrowRef! })
]
});
}
return t < 0.5 ? 4 * t * t * t : 0.5 * Math.pow(2 * t - 2, 3) + 1;
10 changes: 5 additions & 5 deletions components/Select/__test__/__snapshots__/select.spec.ts.snap
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion components/Slider/__test__/__snapshots__/slider.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -12,6 +12,6 @@ exports[`Test: KSlider > props: showStops 1`] = `"<div class="k-slider k-slider-

exports[`Test: KSlider > props: size 1`] = `"<div class="k-slider k-slider--base k-slider--lg"><div class="k-slider--runway--lg k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--lg"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;

exports[`Test: KSlider > props: value 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 10%"><div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><span slot="contentEl">10</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div></div> <div class="k-slider--bar" style="width: 10%; left: 0%"></div></div></div>"`;
exports[`Test: KSlider > props: value 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 10%"><div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: -8px;"><span slot="contentEl">10</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div></div> <div class="k-slider--bar" style="width: 10%; left: 0%"></div></div></div>"`;

exports[`Test: KSlider > props: vertical 1`] = `"<div class="k-slider k-slider--base__vertical k-slider--md__vertical"><div class="k-slider--runway--md__vertical k-slider--runway__vertical" aria-hidden="true"> <div class="k-slider--button-wrapper__vertical" aria-hidden="true" style="bottom: 0%"><div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar__vertical" style="height: 0%; bottom: 0%"></div></div></div>"`;
2 changes: 1 addition & 1 deletion components/Slider/__test__/slider.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@ describe('Test: KSlider', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('10')).toBeTruthy();
expect(host.innerHTML.includes('data-popper-arrow-bottom')).toBeTruthy();
6 changes: 3 additions & 3 deletions components/Tooltip/__test__/__snapshots__/tooltip.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Test: KTooltip > props: placement 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" class="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><span slot="contentEl">有美一人，清扬婉兮</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
exports[`Test: KTooltip > props: placement 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl" class="mx-2">top</div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: 8px;"><span slot="contentEl">有美一人，清扬婉兮</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;

exports[`Test: KTooltip > props: trigger 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl">top</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><span slot="contentEl">有美一人，清扬婉兮</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
exports[`Test: KTooltip > props: trigger 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl">top</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: -8px;"><span slot="contentEl">有美一人，清扬婉兮</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;

exports[`Test: KTooltip > slots: triggerEl & contentEl 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl">triggerEl</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><span slot="contentEl">contentEl</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
exports[`Test: KTooltip > slots: triggerEl & contentEl 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div slot="triggerEl">triggerEl</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="animation: __svelte_767937530_0 300ms linear 0ms 1 both; position: absolute; left: 0px; top: -8px;"><span slot="contentEl">contentEl</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div>"`;
6 changes: 3 additions & 3 deletions components/Tooltip/__test__/tooltip.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ describe('Test: KTooltip', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人，清扬婉兮')).toBeTruthy();
expect(host.innerHTML.includes('data-popper-arrow-bottom')).toBeTruthy();
@@ -48,7 +48,7 @@ describe('Test: KTooltip', () => {
await tick();
const Elm = host.children[0].getElementsByTagName('div')[0];
Elm.click();
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(host.innerHTML.includes('有美一人，清扬婉兮')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
@@ -66,7 +66,7 @@ describe('Test: KTooltip', () => {
cancelable: true
})
);
vi.runAllTimers();
await vi.advanceTimersByTimeAsync(300);
await tick();
expect(
host.innerHTML.includes('triggerEl') && host.innerHTML.includes('contentEl')
40 changes: 20 additions & 20 deletions components/Tour/__test__/__snapshots__/tour.spec.ts.snap
View file

Large diffs are not rendered by default.

0 comments on commit b8312c7

Please sign in to comment.