1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111

import { attr, className, el, on, raf, svg, type ElementFn } from "../../dom";
import { compute, Signal } from "../../signal";

export const styles = /* css */ `
  .sl-wrapper {
    --_caret-size: 10px;
    --_caret-width: 8px;

    position: relative;
    display: inline-flex;
    box-sizing: border-box;
  }

  .sl-select {
    appearance: none;
    padding: var(--action-vertical-padding) var(--action-horizontal-padding);
    padding-right: calc(var(--action-horizontal-padding) * 2 + var(--_caret-size));
    margin: 0;
    border: 1px solid var(--action-border);
    border: none;
    box-sizing: border-box;
    font-size: calc(var(--font-size) * 0.8);
    width: 100%;

    background: transparent;
    border-radius: var(--action-radius);
    color: inherit;
    cursor: pointer;
    outline: none;
  }
  .sl-select:hover {
    background-color: var(--action-overlay);
  }
  .sl-select:focus {
    outline: none;
  }
  .sl-select:focus-visible {
    outline: 2px solid SelectedItem;
  }

  .sl-caret {
    position: absolute;
    right: var(--action-horizontal-padding);
    width: var(--_caret-size);
    height: var(--_caret-size);
    top: 0;
    bottom: 0;
    margin: auto 0;

    pointer-events: none;
    stroke: currentColor;
    stroke-width: var(--_caret-width);
    fill: none;
  }
`;

interface SelectboxProps {
  attrs?: readonly ElementFn<HTMLSelectElement>[];

  options: readonly HTMLOptionElement[];

  wrapperAttrs?: readonly ElementFn<HTMLElement>[];

  value: string | undefined | Signal<string | undefined>;

  onChange?(value: string): void;
}

export function selectBox({
  options,
  attrs = [],
  wrapperAttrs = [],
  value,
  onChange,
}: SelectboxProps): HTMLElement {
  return el(
    "div",
    [className("sl-wrapper"), ...wrapperAttrs],
    [
      el(
        "select",
        [
          className("sl-select"),
          raf(
            compute(() => (el) => {
              el.value = (value instanceof Signal ? value.get() : value) || "";
            }),
          ),
          on("change", (ev) => {
            if (!(ev.currentTarget instanceof HTMLSelectElement)) {
              return;
            }

            onChange?.(ev.currentTarget.value);
          }),
          ...attrs,
        ],
        options,
      ),
      svg(
        "svg",
        [
          attr("viewBox", "0 0 100 100"),
          className("sl-caret"),
          attr("aria-hidden", "true"),
        ],
        [svg("path", [attr("d", "M0,25 l50,50 l50,-50")])],
      ),
    ],
  );
}