Skip to content

Commit

Permalink
fix: KMenu floating popover automatic adjustment failed
Browse files Browse the repository at this point in the history
  • Loading branch information
baiwusanyu-c committed Jan 22, 2025
1 parent e79a514 commit b8312c7
Show file tree
Hide file tree
Showing 16 changed files with 144 additions and 136 deletions.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions components/Dropdown/__test__/__snapshots__/dropdown.spec.ts.snap
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>"`;
Original file line number Diff line number Diff line change
Expand Up @@ -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> "`;

Expand Down
Loading

0 comments on commit b8312c7

Please sign in to comment.