chunk.CSY3BYMV.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. import {
  2. getTextContent
  3. } from "./chunk.FMCX45AD.js";
  4. import {
  5. event
  6. } from "./chunk.XX234VRK.js";
  7. import {
  8. T,
  9. h,
  10. n,
  11. o,
  12. r
  13. } from "./chunk.5PIDMFOE.js";
  14. import {
  15. __decorateClass
  16. } from "./chunk.IHGPZX35.js";
  17. // _uyihdawu1:/Users/claviska/Projects/shoelace/src/components/menu/menu.scss
  18. var menu_default = ":host {\n position: relative;\n box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n box-sizing: inherit;\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host {\n display: block;\n}\n\n.menu {\n padding: var(--sl-spacing-x-small) 0;\n}\n.menu:focus {\n outline: none;\n}";
  19. // src/components/menu/menu.ts
  20. var SlMenu = class extends h {
  21. constructor() {
  22. super(...arguments);
  23. this.items = [];
  24. this.typeToSelectString = "";
  25. }
  26. typeToSelect(key) {
  27. clearTimeout(this.typeToSelectTimeout);
  28. this.typeToSelectTimeout = setTimeout(() => this.typeToSelectString = "", 750);
  29. this.typeToSelectString += key.toLowerCase();
  30. for (const item of this.items) {
  31. const slot = item.shadowRoot.querySelector("slot:not([name])");
  32. const label = getTextContent(slot).toLowerCase().trim();
  33. if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {
  34. item.focus();
  35. break;
  36. }
  37. }
  38. }
  39. syncItems() {
  40. this.items = [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => el.tagName.toLowerCase() === "sl-menu-item" && !el.disabled);
  41. }
  42. getActiveItem() {
  43. return this.items.filter((i) => i.shadowRoot.querySelector(".menu-item--focused"))[0];
  44. }
  45. setActiveItem(item) {
  46. item.focus();
  47. }
  48. handleClick(event2) {
  49. const target = event2.target;
  50. const item = target.closest("sl-menu-item");
  51. if (item && !item.disabled) {
  52. this.slSelect.emit({ detail: { item } });
  53. }
  54. }
  55. handleKeyDown(event2) {
  56. if (event2.key === "Enter") {
  57. const item = this.getActiveItem();
  58. event2.preventDefault();
  59. if (item) {
  60. this.slSelect.emit({ detail: { item } });
  61. }
  62. }
  63. if (event2.key === " ") {
  64. event2.preventDefault();
  65. }
  66. if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event2.key)) {
  67. const selectedItem = this.getActiveItem();
  68. let index = selectedItem ? this.items.indexOf(selectedItem) : 0;
  69. if (this.items.length) {
  70. event2.preventDefault();
  71. if (event2.key === "ArrowDown") {
  72. index++;
  73. } else if (event2.key === "ArrowUp") {
  74. index--;
  75. } else if (event2.key === "Home") {
  76. index = 0;
  77. } else if (event2.key === "End") {
  78. index = this.items.length - 1;
  79. }
  80. if (index < 0)
  81. index = 0;
  82. if (index > this.items.length - 1)
  83. index = this.items.length - 1;
  84. this.setActiveItem(this.items[index]);
  85. return;
  86. }
  87. }
  88. this.typeToSelect(event2.key);
  89. }
  90. handleSlotChange() {
  91. this.syncItems();
  92. }
  93. render() {
  94. return T`
  95. <div part="base" class="menu" role="menu" @click=${this.handleClick} @keydown=${this.handleKeyDown} tabindex="0">
  96. <slot @slotchange=${this.handleSlotChange}></slot>
  97. </div>
  98. `;
  99. }
  100. };
  101. SlMenu.styles = r(menu_default);
  102. __decorateClass([
  103. o(".menu")
  104. ], SlMenu.prototype, "menu", 2);
  105. __decorateClass([
  106. o("slot")
  107. ], SlMenu.prototype, "defaultSlot", 2);
  108. __decorateClass([
  109. event("sl-select")
  110. ], SlMenu.prototype, "slSelect", 2);
  111. SlMenu = __decorateClass([
  112. n("sl-menu")
  113. ], SlMenu);
  114. var menu_default2 = SlMenu;
  115. export {
  116. menu_default2 as menu_default
  117. };