bitboss-ui 2.1.112 → 2.1.114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (187) hide show
  1. package/dist/components/BaseCheckbox/types.d.ts +8 -0
  2. package/dist/components/BaseCheckboxGroup/BaseCheckboxGroup.vue.d.ts +1 -222
  3. package/dist/components/BaseCheckboxGroup/types.d.ts +283 -0
  4. package/dist/components/BaseColorInput/BaseColorInput.vue.d.ts +5 -151
  5. package/dist/components/BaseColorInput/ColorPalette.vue.d.ts +1 -17
  6. package/dist/components/BaseColorInput/types.d.ts +233 -0
  7. package/dist/components/BaseRadioGroup/BaseRadioGroup.vue.d.ts +1 -1
  8. package/dist/components/BaseSwitchGroup/BaseSwitchGroup.vue.d.ts +1 -1
  9. package/dist/components/BbCheckboxGroup/BbCheckboxGroup.vue.d.ts +9 -3
  10. package/dist/components/BbColorInput/BbColorInput.vue.d.ts +1 -1
  11. package/dist/components/BbColorPalette/BbColorPalette.vue.d.ts +4 -4
  12. package/dist/components/BbSwitchGroup/BbSwitchGroup.vue.d.ts +1 -1
  13. package/dist/index.d.ts +2 -2
  14. package/dist/index109.js +9 -9
  15. package/dist/index110.js +17 -17
  16. package/dist/index118.js +1 -1
  17. package/dist/index122.js +1 -0
  18. package/dist/index124.js +4 -4
  19. package/dist/index126.js +13 -13
  20. package/dist/index134.js +1 -1
  21. package/dist/index136.js +5 -5
  22. package/dist/index138.js +1 -1
  23. package/dist/index14.js +1 -1
  24. package/dist/index144.js +1 -1
  25. package/dist/index146.js +2 -2
  26. package/dist/index148.js +1 -1
  27. package/dist/index16.js +3 -3
  28. package/dist/index18.js +3 -3
  29. package/dist/index20.js +70 -59
  30. package/dist/index22.js +14 -14
  31. package/dist/index221.js +138 -2
  32. package/dist/index222.js +2 -2
  33. package/dist/index223.js +2 -138
  34. package/dist/index227.js +1 -1
  35. package/dist/index229.js +4 -2
  36. package/dist/index230.js +13 -2
  37. package/dist/index231.js +20 -3
  38. package/dist/index232.js +2 -4
  39. package/dist/index233.js +4 -13
  40. package/dist/index234.js +85 -19
  41. package/dist/index236.js +30 -3
  42. package/dist/index237.js +17 -5
  43. package/dist/index238.js +51 -5
  44. package/dist/index239.js +18 -5
  45. package/dist/index24.js +10 -10
  46. package/dist/index240.js +3 -5
  47. package/dist/index241.js +12 -5
  48. package/dist/index242.js +18 -5
  49. package/dist/index243.js +8 -3
  50. package/dist/index244.js +2 -8
  51. package/dist/index245.js +3 -135
  52. package/dist/index246.js +7 -0
  53. package/dist/index247.js +5 -3
  54. package/dist/index248.js +5 -6
  55. package/dist/index249.js +5 -16
  56. package/dist/index250.js +5 -2
  57. package/dist/index251.js +5 -13
  58. package/dist/index252.js +3 -13
  59. package/dist/index253.js +135 -4
  60. package/dist/index255.js +2 -86
  61. package/dist/index256.js +108 -0
  62. package/dist/index258.js +100 -17
  63. package/dist/index26.js +3 -3
  64. package/dist/index260.js +9 -17
  65. package/dist/index261.js +3 -3
  66. package/dist/index262.js +4 -12
  67. package/dist/index263.js +3 -18
  68. package/dist/index264.js +187 -66
  69. package/dist/index265.js +3 -2
  70. package/dist/index266.js +5 -9
  71. package/dist/index267.js +5 -20
  72. package/dist/index268.js +268 -4
  73. package/dist/index269.js +52 -25
  74. package/dist/index270.js +52 -2
  75. package/dist/index271.js +31 -17
  76. package/dist/index272.js +60 -12
  77. package/dist/index273.js +7 -106
  78. package/dist/index274.js +4 -0
  79. package/dist/index275.js +367 -94
  80. package/dist/index277.js +2 -107
  81. package/dist/index278.js +7 -11
  82. package/dist/index279.js +7 -5
  83. package/dist/index28.js +1 -1
  84. package/dist/index280.js +2 -6
  85. package/dist/index281.js +30 -264
  86. package/dist/index282.js +9 -52
  87. package/dist/index283.js +25 -52
  88. package/dist/index284.js +11 -32
  89. package/dist/index285.js +13 -60
  90. package/dist/index286.js +22 -6
  91. package/dist/index289.js +5 -6
  92. package/dist/index290.js +9 -10
  93. package/dist/index291.js +21 -3
  94. package/dist/index292.js +6 -34
  95. package/dist/index293.js +15 -32
  96. package/dist/index294.js +16 -371
  97. package/dist/index295.js +14 -0
  98. package/dist/index296.js +107 -3
  99. package/dist/index297.js +6 -53
  100. package/dist/index298.js +3 -5
  101. package/dist/index299.js +53 -9
  102. package/dist/index30.js +3 -3
  103. package/dist/index300.js +13 -2
  104. package/dist/index301.js +67 -7
  105. package/dist/index302.js +33 -7
  106. package/dist/index306.js +3 -6
  107. package/dist/index307.js +7 -5
  108. package/dist/index308.js +3 -719
  109. package/dist/index309.js +17 -366
  110. package/dist/index310.js +23 -52
  111. package/dist/index311.js +1 -1
  112. package/dist/index312.js +3 -280
  113. package/dist/index313.js +5 -2
  114. package/dist/index314.js +3 -125
  115. package/dist/index315.js +3 -2
  116. package/dist/index316.js +278 -13
  117. package/dist/index317.js +2 -2
  118. package/dist/index32.js +2 -2
  119. package/dist/index322.js +25 -17
  120. package/dist/index324.js +1 -1
  121. package/dist/index325.js +2 -28
  122. package/dist/index326.js +2 -17
  123. package/dist/index327.js +2 -3
  124. package/dist/index328.js +2 -4
  125. package/dist/index329.js +120 -22
  126. package/dist/index330.js +2 -2
  127. package/dist/index331.js +15 -2
  128. package/dist/index332.js +2 -2
  129. package/dist/index333.js +19 -2
  130. package/dist/index334.js +2 -2
  131. package/dist/index335.js +1 -1
  132. package/dist/index336.js +719 -3
  133. package/dist/index337.js +366 -3
  134. package/dist/index338.js +57 -2
  135. package/dist/index34.js +8 -8
  136. package/dist/index340.js +5 -2
  137. package/dist/index341.js +2 -6
  138. package/dist/index342.js +6 -5
  139. package/dist/index343.js +2 -3
  140. package/dist/index344.js +6 -34
  141. package/dist/index345.js +66 -128
  142. package/dist/index346.js +65 -396
  143. package/dist/index347.js +35 -67
  144. package/dist/index348.js +128 -66
  145. package/dist/index349.js +390 -220
  146. package/dist/index352.js +1 -1
  147. package/dist/index353.js +1 -1
  148. package/dist/index354.js +1 -1
  149. package/dist/index355.js +200 -7
  150. package/dist/index356.js +208 -149
  151. package/dist/index357.js +91 -257
  152. package/dist/index358.js +225 -131
  153. package/dist/index359.js +133 -21
  154. package/dist/index36.js +4 -4
  155. package/dist/index360.js +24 -0
  156. package/dist/index362.js +1 -1
  157. package/dist/index363.js +2 -93
  158. package/dist/index367.js +1 -1
  159. package/dist/index38.js +133 -131
  160. package/dist/index40.js +7 -7
  161. package/dist/index42.js +2 -2
  162. package/dist/index44.js +16 -15
  163. package/dist/index46.js +6 -6
  164. package/dist/index50.js +2 -2
  165. package/dist/index54.js +1 -1
  166. package/dist/index56.js +1 -1
  167. package/dist/index58.js +2 -2
  168. package/dist/index60.js +2 -2
  169. package/dist/index62.js +5 -5
  170. package/dist/index66.js +3 -1
  171. package/dist/index68.js +1 -1
  172. package/dist/index74.js +4 -4
  173. package/dist/index82.js +4 -4
  174. package/dist/index84.js +1 -1
  175. package/dist/index86.js +2 -2
  176. package/dist/index88.js +3 -3
  177. package/dist/index90.js +1 -1
  178. package/dist/index93.js +3 -3
  179. package/dist/index95.js +2 -2
  180. package/dist/index97.js +5 -5
  181. package/dist/index99.js +1 -1
  182. package/package.json +2 -2
  183. package/dist/index235.js +0 -190
  184. package/dist/index254.js +0 -25
  185. package/dist/index257.js +0 -32
  186. package/dist/index259.js +0 -53
  187. package/dist/index361.js +0 -4
package/dist/index355.js CHANGED
@@ -1,9 +1,202 @@
1
- function l(n, c, r = 1) {
2
- const o = Math.max(Math.ceil((c - n) / r), 0), t = new Array(o);
3
- for (let e = 0; e < o; e++, n += r)
4
- t[e] = n;
5
- return t;
6
- }
1
+ import { defineComponent as U, useTemplateRef as L, computed as n, watch as f, ref as W, createElementBlock as s, openBlock as u, withModifiers as X, normalizeStyle as x, normalizeClass as z, createElementVNode as c, renderSlot as r, createTextVNode as I, toDisplayString as h, unref as E, Fragment as Z, renderList as w } from "vue";
2
+ import { isNil as g } from "./index274.js";
3
+ import { isNotNil as ee } from "./index150.js";
4
+ import { useVirtualizer as te } from "./index366.js";
5
+ import { hash as N } from "./index240.js";
6
+ import { useLocale as oe } from "./index230.js";
7
+ import { useListboxFocus as ae } from "./index367.js";
8
+ import { indexBy as ie } from "./index291.js";
9
+ const le = { class: "bb-listbox__outer-container scrollbar-border" }, ne = {
10
+ ref: "inner",
11
+ class: "bb-listbox__inner-container",
12
+ tabindex: "-1"
13
+ }, se = {
14
+ key: 0,
15
+ class: "bb-listbox__loading"
16
+ }, ue = {
17
+ key: 1,
18
+ class: "bb-listbox__no-data"
19
+ }, de = ["aria-activedescendant", "aria-multiselectable"], ce = ["aria-selected", "data-index", "id"], re = { class: "autocomplete-option__label" }, _e = /* @__PURE__ */ U({
20
+ __name: "FlatListBox",
21
+ props: {
22
+ compact: { type: Boolean },
23
+ options: {},
24
+ open: { type: Boolean },
25
+ loading: { type: Boolean },
26
+ multiple: { type: Boolean },
27
+ transitionDuration: { default: 250 },
28
+ loadingText: {},
29
+ noDataText: {},
30
+ optionHeight: {}
31
+ },
32
+ emits: ["option:selected", "option:unselected", "focused:change"],
33
+ setup(F, { expose: M, emit: R }) {
34
+ const i = F, v = R, { t: _ } = oe(), d = L("inner"), V = L("listbox"), y = n(() => i.optionHeight ? i.optionHeight : i.compact ? 32 : 40), p = te({
35
+ get count() {
36
+ return i.options.length;
37
+ },
38
+ getScrollElement: () => d.value ?? null,
39
+ estimateSize: () => y.value,
40
+ overscan: 5
41
+ }), C = n(() => p.value.getVirtualItems()), O = n(() => p.value.getTotalSize()), H = n(
42
+ () => i.options.map((e, a) => ({
43
+ index: a,
44
+ text: e.text,
45
+ value: e.value,
46
+ valueHash: e.valueHash,
47
+ item: e.item,
48
+ selected: !!e.selected,
49
+ disabled: !!e.disabled,
50
+ focused: a === l.value
51
+ }))
52
+ ), o = n(() => ie(H.value, "index")), k = (e) => `listbox-option-${e}`, m = n(() => {
53
+ if (g(l.value)) return;
54
+ const e = o.value[l.value];
55
+ if (e)
56
+ return k(e.valueHash);
57
+ }), b = n(() => H.value.length > 0), {
58
+ focusedIndex: l,
59
+ focusNext: A,
60
+ focusPrevious: P,
61
+ focusFirst: Y,
62
+ focusLast: j,
63
+ focusFirstSelected: q,
64
+ focusLastSelected: G,
65
+ focusByHash: J,
66
+ blur: B,
67
+ getHighlighted: K
68
+ } = ae(() => i.options, { disabled: () => !i.open });
69
+ f(l, (e) => {
70
+ d.value && ee(e) && p.value.scrollToIndex(e, {
71
+ align: "center",
72
+ behavior: "smooth"
73
+ }), v("focused:change", m.value);
74
+ });
75
+ const T = () => {
76
+ if (g(l.value) || !i.open) return;
77
+ const e = o.value[l.value];
78
+ e.disabled || (e.selected ? v("option:unselected", e) : v("option:selected", e));
79
+ }, $ = W(0), S = () => {
80
+ d.value && ($.value = d.value.scrollHeight);
81
+ }, Q = (e) => {
82
+ if (e.preventDefault(), d.value && e.target instanceof HTMLElement && V.value) {
83
+ let a = e.target, t = a.dataset.index;
84
+ for (; g(t) && a.parentElement; )
85
+ a = a.parentElement, t = a.dataset.index;
86
+ if (t) {
87
+ const D = o.value[+t];
88
+ D && !D.disabled && (l.value = +t, T());
89
+ }
90
+ }
91
+ };
92
+ return f(
93
+ () => i.open,
94
+ () => {
95
+ S();
96
+ },
97
+ { flush: "post" }
98
+ ), f(
99
+ () => i.options,
100
+ (e, a) => {
101
+ N(e.map((t) => t.valueHash)) !== N(a.map((t) => t.valueHash)) && (p.value.calculateRange(), S(), B());
102
+ },
103
+ { flush: "post" }
104
+ ), M({
105
+ focusNext: A,
106
+ focusPrevious: P,
107
+ focusFirst: Y,
108
+ focusFirstSelected: q,
109
+ focusLast: j,
110
+ focusLastSelected: G,
111
+ blur: B,
112
+ confirmOption: T,
113
+ focusByHash: J,
114
+ getHighlighted: K,
115
+ getActiveDescendantId: () => m.value
116
+ }), (e, a) => (u(), s("span", {
117
+ class: z(["bb-listbox", {
118
+ "bb-listbox--compact": e.compact,
119
+ "bb-listbox--loading": e.loading,
120
+ "bb-listbox--multiple": e.multiple,
121
+ "bb-listbox--no-data": !b.value,
122
+ "bb-listbox--open": e.open
123
+ }]),
124
+ style: x({
125
+ "--transition-duration": `${e.transitionDuration}ms`,
126
+ "--overlay-min-height": `${$.value}px`,
127
+ "--option-height": `${y.value}px`
128
+ }),
129
+ onClick: X(Q, ["stop"])
130
+ }, [
131
+ c("span", le, [
132
+ c("span", ne, [
133
+ r(e.$slots, "options:prepend"),
134
+ e.loading && !b.value ? (u(), s("span", se, [
135
+ r(e.$slots, "loading", {}, () => [
136
+ I(h(e.loadingText || E(_)("common.loadingText").value), 1)
137
+ ])
138
+ ])) : b.value ? (u(), s("span", {
139
+ key: 2,
140
+ role: "listbox",
141
+ ref: "listbox",
142
+ style: x({
143
+ height: `${O.value}px`
144
+ }),
145
+ "aria-activedescendant": m.value,
146
+ "aria-multiselectable": e.multiple ? !0 : void 0,
147
+ tabindex: "-1"
148
+ }, [
149
+ (u(!0), s(Z, null, w(C.value, (t) => (u(), s("span", {
150
+ key: o.value[t.index].valueHash,
151
+ "aria-selected": o.value[t.index].focused ? !0 : void 0,
152
+ class: z({
153
+ "bb-listbox__option autocomplete-option": !0,
154
+ "autocomplete-option--focused": o.value[t.index].focused,
155
+ "autocomplete-option--selected": o.value[t.index].selected,
156
+ "autocomplete-option--disabled": o.value[t.index].disabled
157
+ }),
158
+ "data-index": t.index,
159
+ id: k(o.value[t.index].valueHash),
160
+ role: "option",
161
+ style: x({
162
+ transform: `translateY(${t.start}px)`
163
+ })
164
+ }, [
165
+ r(e.$slots, "option", {
166
+ disabled: o.value[t.index].disabled,
167
+ focused: o.value[t.index].focused,
168
+ index: t.index,
169
+ item: o.value[t.index].item,
170
+ selected: o.value[t.index].selected,
171
+ text: o.value[t.index].text,
172
+ value: o.value[t.index].value
173
+ }, () => [
174
+ a[0] || (a[0] = c("svg", {
175
+ class: "autocomplete-option__checkbox",
176
+ role: "presentation",
177
+ viewBox: "276.411 158.834 114.971 114.97"
178
+ }, [
179
+ c("path", {
180
+ d: "M 297.574 224.786 L 318.309 243.134 L 371.568 189.232",
181
+ fill: "none",
182
+ "stroke-linecap": "round",
183
+ "stroke-width": "14px"
184
+ })
185
+ ], -1)),
186
+ c("span", re, h(o.value[t.index].text), 1)
187
+ ])
188
+ ], 14, ce))), 128))
189
+ ], 12, de)) : (u(), s("span", ue, [
190
+ r(e.$slots, "no-data", {}, () => [
191
+ I(h(e.noDataText || E(_)("common.noDataText").value), 1)
192
+ ])
193
+ ])),
194
+ r(e.$slots, "options:append")
195
+ ], 512)
196
+ ])
197
+ ], 6));
198
+ }
199
+ });
7
200
  export {
8
- l as range
201
+ _e as default
9
202
  };
package/dist/index356.js CHANGED
@@ -1,202 +1,261 @@
1
- import { defineComponent as U, useTemplateRef as L, computed as n, watch as f, ref as W, createElementBlock as s, openBlock as u, withModifiers as X, normalizeStyle as x, normalizeClass as z, createElementVNode as c, renderSlot as r, createTextVNode as I, toDisplayString as h, unref as E, Fragment as Z, renderList as w } from "vue";
2
- import { isNil as g } from "./index250.js";
3
- import { isNotNil as ee } from "./index150.js";
4
- import { useVirtualizer as te } from "./index366.js";
5
- import { hash as N } from "./index261.js";
6
- import { useLocale as oe } from "./index233.js";
7
- import { useListboxFocus as ae } from "./index367.js";
8
- import { indexBy as ie } from "./index267.js";
9
- const le = { class: "bb-listbox__outer-container scrollbar-border" }, ne = {
1
+ import { defineComponent as pe, useTemplateRef as G, computed as i, watch as E, ref as ve, createElementBlock as r, openBlock as c, withModifiers as he, normalizeStyle as V, normalizeClass as J, createElementVNode as v, renderSlot as b, createTextVNode as P, toDisplayString as x, unref as g, Fragment as Y, renderList as K } from "vue";
2
+ import { isNil as f } from "./index274.js";
3
+ import { useVirtualizer as be } from "./index366.js";
4
+ import { useLocale as me } from "./index230.js";
5
+ import { useListboxFocus as xe } from "./index367.js";
6
+ import { indexBy as A } from "./index291.js";
7
+ const ge = { class: "bb-listbox__outer-container scrollbar-border" }, fe = {
10
8
  ref: "inner",
11
9
  class: "bb-listbox__inner-container",
12
10
  tabindex: "-1"
13
- }, se = {
11
+ }, He = {
14
12
  key: 0,
15
13
  class: "bb-listbox__loading"
16
- }, ue = {
14
+ }, _e = {
17
15
  key: 1,
18
16
  class: "bb-listbox__no-data"
19
- }, de = ["aria-activedescendant", "aria-multiselectable"], ce = ["aria-selected", "data-index", "id"], re = { class: "autocomplete-option__label" }, _e = /* @__PURE__ */ U({
20
- __name: "FlatListBox",
17
+ }, ye = ["aria-activedescendant", "aria-multiselectable"], Ie = ["aria-labelledby", "aria-disabled"], $e = ["id"], ke = { class: "bb-listbox__group-header-label" }, Be = ["aria-selected", "aria-setsize", "aria-posinset", "id", "data-index"], De = { class: "autocomplete-option__label" }, Ee = /* @__PURE__ */ pe({
18
+ __name: "GroupedListBox",
21
19
  props: {
22
20
  compact: { type: Boolean },
23
- options: {},
24
- open: { type: Boolean },
21
+ groups: {},
22
+ headerHeight: {},
25
23
  loading: { type: Boolean },
26
- multiple: { type: Boolean },
27
- transitionDuration: { default: 250 },
28
24
  loadingText: {},
25
+ multiple: { type: Boolean },
29
26
  noDataText: {},
30
- optionHeight: {}
27
+ open: { type: Boolean },
28
+ optionHeight: {},
29
+ transitionDuration: { default: 250 }
31
30
  },
32
31
  emits: ["option:selected", "option:unselected", "focused:change"],
33
- setup(F, { expose: M, emit: R }) {
34
- const i = F, v = R, { t: _ } = oe(), d = L("inner"), V = L("listbox"), y = n(() => i.optionHeight ? i.optionHeight : i.compact ? 32 : 40), p = te({
32
+ setup(Q, { expose: U, emit: W }) {
33
+ const s = Q, H = W, { t: F } = me(), h = G("inner"), X = G("listbox"), _ = i(() => s.optionHeight ? s.optionHeight : s.compact ? 32 : 40), y = i(() => s.headerHeight ? s.headerHeight : s.compact ? 24 : 32), Z = i(() => {
34
+ let e = 0;
35
+ return s.groups.map((a, t) => {
36
+ const l = a.id, p = e, d = a.options.length, D = y.value + d * _.value, M = `group-header-${a.id}`, S = typeof a.data == "string" ? a.data : JSON.stringify(a.data), T = a.options.every((O) => O.disabled), z = a.data, L = a.options;
37
+ return e += d, {
38
+ offset: p,
39
+ length: d,
40
+ height: D,
41
+ id: l,
42
+ headerId: M,
43
+ label: S,
44
+ index: t,
45
+ allOptionsAreDisabled: T,
46
+ data: z,
47
+ options: L
48
+ };
49
+ });
50
+ }), n = i(
51
+ () => A(Z.value, "index")
52
+ ), m = i(() => s.groups.flatMap(
53
+ (e, a) => e.options.map((t, l) => {
54
+ const p = t.valueHash, d = n.value[a].offset + l, D = e.id, M = !!t.selected, S = !!t.disabled, T = t.item, z = t.text, L = t.value, O = d === u.value;
55
+ return {
56
+ id: p,
57
+ globalIndex: d,
58
+ groupIndex: a,
59
+ groupId: D,
60
+ indexInGroup: l,
61
+ selected: M,
62
+ disabled: S,
63
+ item: T,
64
+ text: z,
65
+ value: L,
66
+ valueHash: t.valueHash,
67
+ focused: O
68
+ };
69
+ })
70
+ )), o = i(() => A(m.value, "id")), I = i(
71
+ () => A(m.value, "globalIndex")
72
+ ), N = (e) => `listbox-option-${e}`, $ = i(() => {
73
+ if (f(u.value)) return;
74
+ const e = I.value[u.value];
75
+ if (e)
76
+ return N(e.valueHash);
77
+ }), k = i(() => m.value.length > 0), w = (e) => y.value + s.groups[e].options.length * _.value, B = be({
35
78
  get count() {
36
- return i.options.length;
79
+ return s.groups.length;
37
80
  },
38
- getScrollElement: () => d.value ?? null,
39
- estimateSize: () => y.value,
40
- overscan: 5
41
- }), C = n(() => p.value.getVirtualItems()), O = n(() => p.value.getTotalSize()), H = n(
42
- () => i.options.map((e, a) => ({
43
- index: a,
81
+ getScrollElement: () => h.value ?? null,
82
+ estimateSize: (e) => w(e),
83
+ overscan: 2
84
+ }), ee = i(() => B.value.getVirtualItems()), te = i(() => B.value.getTotalSize()), {
85
+ focusedIndex: u,
86
+ focusNext: ae,
87
+ focusPrevious: le,
88
+ focusFirst: se,
89
+ focusLast: oe,
90
+ focusFirstSelected: ne,
91
+ focusLastSelected: ie,
92
+ focusByHash: ue,
93
+ blur: C,
94
+ getHighlighted: de
95
+ } = xe(
96
+ i(() => m.value),
97
+ { disabled: () => !s.open }
98
+ ), re = () => {
99
+ if (!h.value || f(u.value)) return;
100
+ const e = h.value.querySelector(
101
+ `[data-index="${u.value}"]`
102
+ );
103
+ e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
104
+ };
105
+ E(u, () => {
106
+ re(), H("focused:change", $.value);
107
+ });
108
+ const R = () => {
109
+ if (f(u.value) || !s.open) return;
110
+ const e = I.value[u.value];
111
+ if (!e || e.disabled) return;
112
+ const a = {
44
113
  text: e.text,
45
114
  value: e.value,
46
- valueHash: e.valueHash,
47
115
  item: e.item,
48
- selected: !!e.selected,
49
- disabled: !!e.disabled,
50
- focused: a === l.value
51
- }))
52
- ), o = n(() => ie(H.value, "index")), k = (e) => `listbox-option-${e}`, m = n(() => {
53
- if (g(l.value)) return;
54
- const e = o.value[l.value];
55
- if (e)
56
- return k(e.valueHash);
57
- }), b = n(() => H.value.length > 0), {
58
- focusedIndex: l,
59
- focusNext: A,
60
- focusPrevious: P,
61
- focusFirst: Y,
62
- focusLast: j,
63
- focusFirstSelected: q,
64
- focusLastSelected: G,
65
- focusByHash: J,
66
- blur: B,
67
- getHighlighted: K
68
- } = ae(() => i.options, { disabled: () => !i.open });
69
- f(l, (e) => {
70
- d.value && ee(e) && p.value.scrollToIndex(e, {
71
- align: "center",
72
- behavior: "smooth"
73
- }), v("focused:change", m.value);
74
- });
75
- const T = () => {
76
- if (g(l.value) || !i.open) return;
77
- const e = o.value[l.value];
78
- e.disabled || (e.selected ? v("option:unselected", e) : v("option:selected", e));
79
- }, $ = W(0), S = () => {
80
- d.value && ($.value = d.value.scrollHeight);
81
- }, Q = (e) => {
82
- if (e.preventDefault(), d.value && e.target instanceof HTMLElement && V.value) {
116
+ valueHash: e.valueHash,
117
+ selected: e.selected,
118
+ disabled: e.disabled
119
+ };
120
+ e.selected ? H("option:unselected", a) : H("option:selected", a);
121
+ }, j = ve(0), q = () => {
122
+ h.value && (j.value = h.value.scrollHeight);
123
+ }, ce = (e) => {
124
+ if (e.preventDefault(), h.value && e.target instanceof HTMLElement && X.value) {
83
125
  let a = e.target, t = a.dataset.index;
84
- for (; g(t) && a.parentElement; )
126
+ for (; f(t) && a.parentElement; )
85
127
  a = a.parentElement, t = a.dataset.index;
86
128
  if (t) {
87
- const D = o.value[+t];
88
- D && !D.disabled && (l.value = +t, T());
129
+ const l = I.value[+t];
130
+ l && !l.disabled && (u.value = +t, R());
89
131
  }
90
132
  }
91
133
  };
92
- return f(
93
- () => i.open,
94
- () => {
95
- S();
96
- },
97
- { flush: "post" }
98
- ), f(
99
- () => i.options,
134
+ return E(() => s.open, q, { flush: "post" }), E(
135
+ () => s.groups,
100
136
  (e, a) => {
101
- N(e.map((t) => t.valueHash)) !== N(a.map((t) => t.valueHash)) && (p.value.calculateRange(), S(), B());
137
+ const t = e.flatMap((p) => p.options.map((d) => d.valueHash)).join(","), l = a.flatMap((p) => p.options.map((d) => d.valueHash)).join(",");
138
+ t !== l && (B.value.measure(), q(), C());
102
139
  },
103
140
  { flush: "post" }
104
- ), M({
105
- focusNext: A,
106
- focusPrevious: P,
107
- focusFirst: Y,
108
- focusFirstSelected: q,
109
- focusLast: j,
110
- focusLastSelected: G,
111
- blur: B,
112
- confirmOption: T,
113
- focusByHash: J,
114
- getHighlighted: K,
115
- getActiveDescendantId: () => m.value
116
- }), (e, a) => (u(), s("span", {
117
- class: z(["bb-listbox", {
141
+ ), U({
142
+ focusNext: ae,
143
+ focusPrevious: le,
144
+ focusFirst: se,
145
+ focusFirstSelected: ne,
146
+ focusLast: oe,
147
+ focusLastSelected: ie,
148
+ blur: C,
149
+ confirmOption: R,
150
+ focusByHash: ue,
151
+ getHighlighted: de,
152
+ getActiveDescendantId: () => $.value
153
+ }), (e, a) => (c(), r("span", {
154
+ class: J(["bb-listbox bb-listbox--grouped", {
118
155
  "bb-listbox--compact": e.compact,
119
156
  "bb-listbox--loading": e.loading,
120
157
  "bb-listbox--multiple": e.multiple,
121
- "bb-listbox--no-data": !b.value,
158
+ "bb-listbox--no-data": !k.value,
122
159
  "bb-listbox--open": e.open
123
160
  }]),
124
- style: x({
161
+ style: V({
125
162
  "--transition-duration": `${e.transitionDuration}ms`,
126
- "--overlay-min-height": `${$.value}px`,
127
- "--option-height": `${y.value}px`
163
+ "--overlay-min-height": `${j.value}px`,
164
+ "--option-height": `${_.value}px`,
165
+ "--group-header-height": `${y.value}px`
128
166
  }),
129
- onClick: X(Q, ["stop"])
167
+ onClick: he(ce, ["stop"])
130
168
  }, [
131
- c("span", le, [
132
- c("span", ne, [
133
- r(e.$slots, "options:prepend"),
134
- e.loading && !b.value ? (u(), s("span", se, [
135
- r(e.$slots, "loading", {}, () => [
136
- I(h(e.loadingText || E(_)("common.loadingText").value), 1)
169
+ v("span", ge, [
170
+ v("span", fe, [
171
+ b(e.$slots, "options:prepend"),
172
+ e.loading && !k.value ? (c(), r("span", He, [
173
+ b(e.$slots, "loading", {}, () => [
174
+ P(x(e.loadingText || g(F)("common.loadingText").value), 1)
137
175
  ])
138
- ])) : b.value ? (u(), s("span", {
176
+ ])) : k.value ? (c(), r("span", {
139
177
  key: 2,
140
178
  role: "listbox",
141
179
  ref: "listbox",
142
- style: x({
143
- height: `${O.value}px`
144
- }),
145
- "aria-activedescendant": m.value,
180
+ style: V({ height: `${te.value}px` }),
181
+ "aria-activedescendant": $.value,
146
182
  "aria-multiselectable": e.multiple ? !0 : void 0,
147
183
  tabindex: "-1"
148
184
  }, [
149
- (u(!0), s(Z, null, w(C.value, (t) => (u(), s("span", {
150
- key: o.value[t.index].valueHash,
151
- "aria-selected": o.value[t.index].focused ? !0 : void 0,
152
- class: z({
153
- "bb-listbox__option autocomplete-option": !0,
154
- "autocomplete-option--focused": o.value[t.index].focused,
155
- "autocomplete-option--selected": o.value[t.index].selected,
156
- "autocomplete-option--disabled": o.value[t.index].disabled
157
- }),
158
- "data-index": t.index,
159
- id: k(o.value[t.index].valueHash),
160
- role: "option",
161
- style: x({
162
- transform: `translateY(${t.start}px)`
163
- })
185
+ (c(!0), r(Y, null, K(ee.value, (t) => (c(), r("span", {
186
+ key: n.value[t.index].id,
187
+ style: V({ transform: `translateY(${t.start}px)` }),
188
+ role: "group",
189
+ "aria-labelledby": n.value[t.index].headerId,
190
+ "aria-disabled": n.value[t.index].allOptionsAreDisabled,
191
+ class: "bb-listbox__group"
164
192
  }, [
165
- r(e.$slots, "option", {
166
- disabled: o.value[t.index].disabled,
167
- focused: o.value[t.index].focused,
168
- index: t.index,
169
- item: o.value[t.index].item,
170
- selected: o.value[t.index].selected,
171
- text: o.value[t.index].text,
172
- value: o.value[t.index].value
173
- }, () => [
174
- a[0] || (a[0] = c("svg", {
175
- class: "autocomplete-option__checkbox",
176
- role: "presentation",
177
- viewBox: "276.411 158.834 114.971 114.97"
178
- }, [
179
- c("path", {
180
- d: "M 297.574 224.786 L 318.309 243.134 L 371.568 189.232",
181
- fill: "none",
182
- "stroke-linecap": "round",
183
- "stroke-width": "14px"
184
- })
185
- ], -1)),
186
- c("span", re, h(o.value[t.index].text), 1)
187
- ])
188
- ], 14, ce))), 128))
189
- ], 12, de)) : (u(), s("span", ue, [
190
- r(e.$slots, "no-data", {}, () => [
191
- I(h(e.noDataText || E(_)("common.noDataText").value), 1)
193
+ v("span", {
194
+ class: "bb-listbox__group-header",
195
+ role: "presentation",
196
+ id: n.value[t.index].headerId
197
+ }, [
198
+ b(e.$slots, "group", {
199
+ text: n.value[t.index].label,
200
+ item: n.value[t.index].data,
201
+ index: t.index,
202
+ length: n.value[t.index].length,
203
+ disabled: n.value[t.index].allOptionsAreDisabled
204
+ }, () => [
205
+ v("span", ke, x(n.value[t.index].label), 1)
206
+ ])
207
+ ], 8, $e),
208
+ (c(!0), r(Y, null, K(n.value[t.index].options, (l) => (c(), r("span", {
209
+ key: l.valueHash,
210
+ "aria-selected": o.value[l.valueHash].selected ? !0 : void 0,
211
+ "aria-setsize": n.value[t.index].length,
212
+ "aria-posinset": o.value[l.valueHash].indexInGroup + 1,
213
+ id: N(l.valueHash),
214
+ class: J({
215
+ "bb-listbox__option autocomplete-option": !0,
216
+ "autocomplete-option--focused": g(u) === o.value[l.valueHash].globalIndex,
217
+ "autocomplete-option--selected": o.value[l.valueHash].selected,
218
+ "autocomplete-option--disabled": o.value[l.valueHash].disabled
219
+ }),
220
+ "data-index": o.value[l.valueHash].globalIndex,
221
+ role: "option"
222
+ }, [
223
+ b(e.$slots, "option", {
224
+ disabled: !!o.value[l.valueHash].disabled,
225
+ focused: g(u) === o.value[l.valueHash].globalIndex,
226
+ index: o.value[l.valueHash].globalIndex,
227
+ item: o.value[l.valueHash].item,
228
+ selected: !!o.value[l.valueHash].selected,
229
+ text: o.value[l.valueHash].text,
230
+ value: o.value[l.valueHash].value
231
+ }, () => [
232
+ a[0] || (a[0] = v("svg", {
233
+ class: "autocomplete-option__checkbox",
234
+ role: "presentation",
235
+ viewBox: "276.411 158.834 114.971 114.97"
236
+ }, [
237
+ v("path", {
238
+ d: "M 297.574 224.786 L 318.309 243.134 L 371.568 189.232",
239
+ fill: "none",
240
+ "stroke-linecap": "round",
241
+ "stroke-width": "14px"
242
+ })
243
+ ], -1)),
244
+ v("span", De, x(o.value[l.valueHash].text), 1)
245
+ ])
246
+ ], 10, Be))), 128))
247
+ ], 12, Ie))), 128))
248
+ ], 12, ye)) : (c(), r("span", _e, [
249
+ b(e.$slots, "no-data", {}, () => [
250
+ P(x(e.noDataText || g(F)("common.noDataText").value), 1)
192
251
  ])
193
252
  ])),
194
- r(e.$slots, "options:append")
253
+ b(e.$slots, "options:append")
195
254
  ], 512)
196
255
  ])
197
256
  ], 6));
198
257
  }
199
258
  });
200
259
  export {
201
- _e as default
260
+ Ee as default
202
261
  };