@dialpad/dialtone 9.35.0 → 9.36.0
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.
- package/dist/css/dialtone.css +4 -151
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/css/variables-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-light.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-light.css +1 -1
- package/dist/tokens/css/variables-light.css +1 -1
- package/dist/tokens/css/variables-tmo-dark.css +1 -1
- package/dist/tokens/css/variables-tmo-light.css +1 -1
- package/dist/tokens/less/variables-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-light.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-light.less +1 -1
- package/dist/tokens/less/variables-light.less +1 -1
- package/dist/tokens/less/variables-tmo-dark.less +1 -1
- package/dist/tokens/less/variables-tmo-light.less +1 -1
- package/dist/vue2/chunks/{dropdown-IaLNHmVd.js → dropdown-2D4i6Qkg.js} +2 -2
- package/dist/vue2/chunks/{dropdown-IaLNHmVd.js.map → dropdown-2D4i6Qkg.js.map} +1 -1
- package/dist/vue2/chunks/{dropdown-DTtcQEFC.js → dropdown-8L_PePwv.js} +2 -2
- package/dist/vue2/chunks/{dropdown-DTtcQEFC.js.map → dropdown-8L_PePwv.js.map} +1 -1
- package/dist/vue2/chunks/{popover_constants-Qkpb0yh2.js → popover_constants-kQaX7G4a.js} +10 -13
- package/dist/vue2/chunks/popover_constants-kQaX7G4a.js.map +1 -0
- package/dist/vue2/chunks/{popover_constants-JwBF9h1Z.js → popover_constants-qUYTzsS3.js} +10 -13
- package/dist/vue2/chunks/popover_constants-qUYTzsS3.js.map +1 -0
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/dialtone-vue.cjs +2 -2
- package/dist/vue2/dialtone-vue.js +2 -2
- package/dist/vue2/lib/callbar-button-with-popover.cjs +2 -2
- package/dist/vue2/lib/callbar-button-with-popover.js +2 -2
- package/dist/vue2/lib/callbar-button.cjs +1 -2
- package/dist/vue2/lib/callbar-button.cjs.map +1 -1
- package/dist/vue2/lib/callbar-button.js +1 -2
- package/dist/vue2/lib/callbar-button.js.map +1 -1
- package/dist/vue2/lib/combobox-multi-select.cjs +1 -1
- package/dist/vue2/lib/combobox-multi-select.js +1 -1
- package/dist/vue2/lib/combobox-with-popover.cjs +1 -1
- package/dist/vue2/lib/combobox-with-popover.js +1 -1
- package/dist/vue2/lib/contact-row.cjs +1 -2
- package/dist/vue2/lib/contact-row.cjs.map +1 -1
- package/dist/vue2/lib/contact-row.js +1 -2
- package/dist/vue2/lib/contact-row.js.map +1 -1
- package/dist/vue2/lib/datepicker.cjs +1 -2
- package/dist/vue2/lib/datepicker.cjs.map +1 -1
- package/dist/vue2/lib/datepicker.js +1 -2
- package/dist/vue2/lib/datepicker.js.map +1 -1
- package/dist/vue2/lib/dropdown.cjs +2 -2
- package/dist/vue2/lib/dropdown.js +2 -2
- package/dist/vue2/lib/editor.cjs +1 -1
- package/dist/vue2/lib/editor.js +1 -1
- package/dist/vue2/lib/emoji-picker.cjs +1 -2
- package/dist/vue2/lib/emoji-picker.cjs.map +1 -1
- package/dist/vue2/lib/emoji-picker.js +1 -2
- package/dist/vue2/lib/emoji-picker.js.map +1 -1
- package/dist/vue2/lib/emoji-row.cjs +1 -2
- package/dist/vue2/lib/emoji-row.cjs.map +1 -1
- package/dist/vue2/lib/emoji-row.js +1 -2
- package/dist/vue2/lib/emoji-row.js.map +1 -1
- package/dist/vue2/lib/general-row.cjs +32 -8
- package/dist/vue2/lib/general-row.cjs.map +1 -1
- package/dist/vue2/lib/general-row.js +32 -8
- package/dist/vue2/lib/general-row.js.map +1 -1
- package/dist/vue2/lib/group-row.cjs +1 -2
- package/dist/vue2/lib/group-row.cjs.map +1 -1
- package/dist/vue2/lib/group-row.js +1 -2
- package/dist/vue2/lib/group-row.js.map +1 -1
- package/dist/vue2/lib/hovercard.cjs +1 -1
- package/dist/vue2/lib/hovercard.js +1 -1
- package/dist/vue2/lib/ivr-node.cjs +2 -2
- package/dist/vue2/lib/ivr-node.js +2 -2
- package/dist/vue2/lib/message-input.cjs +2 -2
- package/dist/vue2/lib/message-input.js +2 -2
- package/dist/vue2/lib/popover.cjs +2 -2
- package/dist/vue2/lib/popover.cjs.map +1 -1
- package/dist/vue2/lib/popover.js +3 -3
- package/dist/vue2/lib/popover.js.map +1 -1
- package/dist/vue2/lib/tooltip-directive.cjs +1 -2
- package/dist/vue2/lib/tooltip-directive.cjs.map +1 -1
- package/dist/vue2/lib/tooltip-directive.js +1 -2
- package/dist/vue2/lib/tooltip-directive.js.map +1 -1
- package/dist/vue2/lib/tooltip.cjs +36 -31
- package/dist/vue2/lib/tooltip.cjs.map +1 -1
- package/dist/vue2/lib/tooltip.js +37 -32
- package/dist/vue2/lib/tooltip.js.map +1 -1
- package/dist/vue2/style.css +87 -55
- package/dist/vue2/types/components/popover/tippy_utils.d.ts +1 -6
- package/dist/vue2/types/components/popover/tippy_utils.d.ts.map +1 -1
- package/dist/vue2/types/components/tooltip/tooltip.vue.d.ts +40 -36
- package/dist/vue2/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
- package/dist/vue2/types/recipes/leftbar/general_row/general_row.vue.d.ts +19 -0
- package/dist/vue2/types/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
- package/dist/vue3/chunks/{dropdown-w8Do29L5.js → dropdown-XFYig-ys.js} +2 -2
- package/dist/vue3/chunks/{dropdown-w8Do29L5.js.map → dropdown-XFYig-ys.js.map} +1 -1
- package/dist/vue3/chunks/{dropdown-Hn-TeTvZ.js → dropdown-tVfEPEl1.js} +2 -2
- package/dist/vue3/chunks/{dropdown-Hn-TeTvZ.js.map → dropdown-tVfEPEl1.js.map} +1 -1
- package/dist/vue3/chunks/{popover_constants-Qkpb0yh2.js → popover_constants-kQaX7G4a.js} +10 -13
- package/dist/vue3/chunks/popover_constants-kQaX7G4a.js.map +1 -0
- package/dist/vue3/chunks/{popover_constants-JwBF9h1Z.js → popover_constants-qUYTzsS3.js} +10 -13
- package/dist/vue3/chunks/popover_constants-qUYTzsS3.js.map +1 -0
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/dialtone-vue.cjs +2 -2
- package/dist/vue3/dialtone-vue.js +2 -2
- package/dist/vue3/lib/callbar-button-with-popover.cjs +2 -2
- package/dist/vue3/lib/callbar-button-with-popover.js +2 -2
- package/dist/vue3/lib/callbar-button.cjs +1 -2
- package/dist/vue3/lib/callbar-button.cjs.map +1 -1
- package/dist/vue3/lib/callbar-button.js +1 -2
- package/dist/vue3/lib/callbar-button.js.map +1 -1
- package/dist/vue3/lib/combobox-multi-select.cjs +1 -1
- package/dist/vue3/lib/combobox-multi-select.js +1 -1
- package/dist/vue3/lib/combobox-with-popover.cjs +1 -1
- package/dist/vue3/lib/combobox-with-popover.js +1 -1
- package/dist/vue3/lib/contact-row.cjs +1 -2
- package/dist/vue3/lib/contact-row.cjs.map +1 -1
- package/dist/vue3/lib/contact-row.js +1 -2
- package/dist/vue3/lib/contact-row.js.map +1 -1
- package/dist/vue3/lib/datepicker.cjs +1 -2
- package/dist/vue3/lib/datepicker.cjs.map +1 -1
- package/dist/vue3/lib/datepicker.js +1 -2
- package/dist/vue3/lib/datepicker.js.map +1 -1
- package/dist/vue3/lib/dropdown.cjs +2 -2
- package/dist/vue3/lib/dropdown.js +2 -2
- package/dist/vue3/lib/editor.cjs +1 -1
- package/dist/vue3/lib/editor.js +1 -1
- package/dist/vue3/lib/emoji-picker.cjs +1 -2
- package/dist/vue3/lib/emoji-picker.cjs.map +1 -1
- package/dist/vue3/lib/emoji-picker.js +1 -2
- package/dist/vue3/lib/emoji-picker.js.map +1 -1
- package/dist/vue3/lib/emoji-row.cjs +1 -2
- package/dist/vue3/lib/emoji-row.cjs.map +1 -1
- package/dist/vue3/lib/emoji-row.js +1 -2
- package/dist/vue3/lib/emoji-row.js.map +1 -1
- package/dist/vue3/lib/general-row.cjs +47 -10
- package/dist/vue3/lib/general-row.cjs.map +1 -1
- package/dist/vue3/lib/general-row.js +47 -10
- package/dist/vue3/lib/general-row.js.map +1 -1
- package/dist/vue3/lib/group-row.cjs +1 -2
- package/dist/vue3/lib/group-row.cjs.map +1 -1
- package/dist/vue3/lib/group-row.js +1 -2
- package/dist/vue3/lib/group-row.js.map +1 -1
- package/dist/vue3/lib/hovercard.cjs +1 -1
- package/dist/vue3/lib/hovercard.js +1 -1
- package/dist/vue3/lib/ivr-node.cjs +2 -2
- package/dist/vue3/lib/ivr-node.js +2 -2
- package/dist/vue3/lib/message-input.cjs +2 -2
- package/dist/vue3/lib/message-input.js +2 -2
- package/dist/vue3/lib/popover.cjs +2 -2
- package/dist/vue3/lib/popover.cjs.map +1 -1
- package/dist/vue3/lib/popover.js +3 -3
- package/dist/vue3/lib/popover.js.map +1 -1
- package/dist/vue3/lib/tooltip-directive.cjs +1 -2
- package/dist/vue3/lib/tooltip-directive.cjs.map +1 -1
- package/dist/vue3/lib/tooltip-directive.js +1 -2
- package/dist/vue3/lib/tooltip-directive.js.map +1 -1
- package/dist/vue3/lib/tooltip.cjs +40 -52
- package/dist/vue3/lib/tooltip.cjs.map +1 -1
- package/dist/vue3/lib/tooltip.js +42 -54
- package/dist/vue3/lib/tooltip.js.map +1 -1
- package/dist/vue3/style.css +87 -55
- package/dist/vue3/types/components/popover/tippy_utils.d.ts +1 -6
- package/dist/vue3/types/components/popover/tippy_utils.d.ts.map +1 -1
- package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts +22 -47
- package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts +19 -0
- package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/vue2/chunks/popover_constants-JwBF9h1Z.js.map +0 -1
- package/dist/vue2/chunks/popover_constants-Qkpb0yh2.js.map +0 -1
- package/dist/vue2/types/components/tooltip/modifiers.d.ts +0 -8
- package/dist/vue2/types/components/tooltip/modifiers.d.ts.map +0 -1
- package/dist/vue3/chunks/popover_constants-JwBF9h1Z.js.map +0 -1
- package/dist/vue3/chunks/popover_constants-Qkpb0yh2.js.map +0 -1
- package/dist/vue3/types/components/tooltip/modifiers.d.ts +0 -8
- package/dist/vue3/types/components/tooltip/modifiers.d.ts.map +0 -1
|
@@ -136,12 +136,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
136
136
|
default: null;
|
|
137
137
|
};
|
|
138
138
|
/**
|
|
139
|
-
*
|
|
140
|
-
* @see DtLazyShow
|
|
139
|
+
* Whether the tooltip should have a transition effect.
|
|
141
140
|
*/
|
|
142
141
|
transition: {
|
|
143
|
-
type:
|
|
144
|
-
default:
|
|
142
|
+
type: BooleanConstructor;
|
|
143
|
+
default: boolean;
|
|
145
144
|
};
|
|
146
145
|
/**
|
|
147
146
|
* Whether the tooltip will have a delay when being focused or moused over.
|
|
@@ -163,6 +162,12 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
163
162
|
TOOLTIP_KIND_MODIFIERS: {
|
|
164
163
|
hover: string;
|
|
165
164
|
show: string;
|
|
165
|
+
/**
|
|
166
|
+
* A tooltip is a floating label that briefly explains an action, function, or an element.
|
|
167
|
+
* Its content is exclusively text and shouldn't be vital information for users.
|
|
168
|
+
* If richer media is desired, consider using a popover instead.
|
|
169
|
+
* @see https://dialtone.dialpad.com/components/tooltip.html
|
|
170
|
+
*/
|
|
166
171
|
inverted: string;
|
|
167
172
|
hide: string;
|
|
168
173
|
};
|
|
@@ -170,7 +175,6 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
170
175
|
inTimer: null;
|
|
171
176
|
isShown: boolean;
|
|
172
177
|
currentPlacement: any;
|
|
173
|
-
isTouchDevice: boolean;
|
|
174
178
|
}, {
|
|
175
179
|
isVisible(): any;
|
|
176
180
|
tooltipListeners(): {
|
|
@@ -179,18 +183,13 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
179
183
|
};
|
|
180
184
|
tippyProps(): {
|
|
181
185
|
offset: any;
|
|
182
|
-
|
|
183
|
-
trigger: string;
|
|
186
|
+
delay: number | boolean;
|
|
184
187
|
placement: any;
|
|
185
188
|
sticky: any;
|
|
189
|
+
theme: string | undefined;
|
|
190
|
+
animation: string | boolean;
|
|
186
191
|
popperOptions: {
|
|
187
192
|
modifiers: ({
|
|
188
|
-
name: string;
|
|
189
|
-
enabled: boolean;
|
|
190
|
-
phase: string;
|
|
191
|
-
fn: any;
|
|
192
|
-
requiresIfExists: string[];
|
|
193
|
-
} | {
|
|
194
193
|
name: string;
|
|
195
194
|
options: {
|
|
196
195
|
fallbackPlacements: any[];
|
|
@@ -202,7 +201,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
202
201
|
} | {
|
|
203
202
|
name: string;
|
|
204
203
|
enabled: boolean;
|
|
205
|
-
options?: undefined;
|
|
204
|
+
options?: undefined; /**
|
|
205
|
+
* If true, applies inverted styles to the tooltip
|
|
206
|
+
* @values true, false
|
|
207
|
+
*/
|
|
206
208
|
} | {
|
|
207
209
|
name: string;
|
|
208
210
|
options: {
|
|
@@ -210,7 +212,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
210
212
|
tether: boolean;
|
|
211
213
|
fallbackPlacements?: undefined;
|
|
212
214
|
boundary?: undefined;
|
|
213
|
-
};
|
|
215
|
+
}; /**
|
|
216
|
+
* If true, applies inverted styles to the tooltip
|
|
217
|
+
* @values true, false
|
|
218
|
+
*/
|
|
214
219
|
enabled?: undefined;
|
|
215
220
|
})[];
|
|
216
221
|
};
|
|
@@ -228,20 +233,19 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
228
233
|
onEnterTransitionComplete(): void;
|
|
229
234
|
setProps(): void;
|
|
230
235
|
onMount(): void;
|
|
236
|
+
onShow(tooltipInstance: any): false | undefined;
|
|
231
237
|
initOptions(): {
|
|
232
|
-
|
|
238
|
+
content: Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue/types/v3-component-options.js").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> | import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>> | (Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue/types/v3-component-options.js").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> | import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>)[] | undefined;
|
|
239
|
+
arrow: string;
|
|
240
|
+
duration: number;
|
|
233
241
|
interactive: boolean;
|
|
234
242
|
trigger: string;
|
|
235
|
-
|
|
236
|
-
|
|
243
|
+
hideOnClick: boolean;
|
|
244
|
+
touch: boolean;
|
|
245
|
+
onMount: () => void;
|
|
246
|
+
onShow: (tooltipInstance: any) => false | undefined;
|
|
237
247
|
popperOptions: {
|
|
238
248
|
modifiers: ({
|
|
239
|
-
name: string;
|
|
240
|
-
enabled: boolean;
|
|
241
|
-
phase: string;
|
|
242
|
-
fn: any;
|
|
243
|
-
requiresIfExists: string[];
|
|
244
|
-
} | {
|
|
245
249
|
name: string;
|
|
246
250
|
options: {
|
|
247
251
|
fallbackPlacements: any[];
|
|
@@ -253,7 +257,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
253
257
|
} | {
|
|
254
258
|
name: string;
|
|
255
259
|
enabled: boolean;
|
|
256
|
-
options?: undefined;
|
|
260
|
+
options?: undefined; /**
|
|
261
|
+
* If true, applies inverted styles to the tooltip
|
|
262
|
+
* @values true, false
|
|
263
|
+
*/
|
|
257
264
|
} | {
|
|
258
265
|
name: string;
|
|
259
266
|
options: {
|
|
@@ -261,18 +268,16 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
261
268
|
tether: boolean;
|
|
262
269
|
fallbackPlacements?: undefined;
|
|
263
270
|
boundary?: undefined;
|
|
264
|
-
};
|
|
271
|
+
}; /**
|
|
272
|
+
* If true, applies inverted styles to the tooltip
|
|
273
|
+
* @values true, false
|
|
274
|
+
*/
|
|
265
275
|
enabled?: undefined;
|
|
266
276
|
})[];
|
|
267
277
|
};
|
|
268
|
-
contentElement: any;
|
|
269
|
-
allowHTML: boolean;
|
|
270
|
-
zIndex: number;
|
|
271
|
-
onMount: () => void;
|
|
272
278
|
};
|
|
273
279
|
addExternalAnchorEventListeners(): void;
|
|
274
280
|
removeExternalAnchorEventListeners(): void;
|
|
275
|
-
onTouchStart(): void;
|
|
276
281
|
}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, ("shown" | "update:show")[], string, Readonly<import("vue").ExtractPropTypes<{
|
|
277
282
|
/**
|
|
278
283
|
* The id of the tooltip
|
|
@@ -411,12 +416,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
411
416
|
default: null;
|
|
412
417
|
};
|
|
413
418
|
/**
|
|
414
|
-
*
|
|
415
|
-
* @see DtLazyShow
|
|
419
|
+
* Whether the tooltip should have a transition effect.
|
|
416
420
|
*/
|
|
417
421
|
transition: {
|
|
418
|
-
type:
|
|
419
|
-
default:
|
|
422
|
+
type: BooleanConstructor;
|
|
423
|
+
default: boolean;
|
|
420
424
|
};
|
|
421
425
|
/**
|
|
422
426
|
* Whether the tooltip will have a delay when being focused or moused over.
|
|
@@ -440,7 +444,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
440
444
|
inverted: boolean;
|
|
441
445
|
contentClass: string | Record<string, any> | unknown[];
|
|
442
446
|
show: boolean;
|
|
443
|
-
transition:
|
|
447
|
+
transition: boolean;
|
|
444
448
|
offset: unknown[];
|
|
445
449
|
fallbackPlacements: unknown[];
|
|
446
450
|
appendTo: string | HTMLElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../components/tooltip/tooltip.vue.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../components/tooltip/tooltip.vue.js"],"names":[],"mappings":";IA4BI;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;;;;QArLP;;;;;WAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA+BC;;;mBAGG;;;;;;;;mBAHH;;;mBAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAHH;;;mBAGG;;;;;;;;mBAHH;;;mBAGG;;;;;;;;IA7BH;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG"}
|
|
@@ -46,6 +46,13 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
46
46
|
type: StringConstructor;
|
|
47
47
|
default: null;
|
|
48
48
|
};
|
|
49
|
+
/**
|
|
50
|
+
* Number of unread mention messages
|
|
51
|
+
*/
|
|
52
|
+
unreadMentionCount: {
|
|
53
|
+
type: StringConstructor;
|
|
54
|
+
default: null;
|
|
55
|
+
};
|
|
49
56
|
/**
|
|
50
57
|
* Text shown when the unread count is hovered.
|
|
51
58
|
*/
|
|
@@ -134,6 +141,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
134
141
|
getAriaLabel(): any;
|
|
135
142
|
hasActions(): any;
|
|
136
143
|
showUnreadCount(): any;
|
|
144
|
+
showUnreadMentionCount(): any;
|
|
145
|
+
hasUnreadCount(): boolean;
|
|
146
|
+
hasUnreadMentionCount(): boolean;
|
|
147
|
+
shouldApplyCustomStyleForCountBadge(): boolean;
|
|
137
148
|
}, {
|
|
138
149
|
validateProps(): void;
|
|
139
150
|
adjustLabelWidth(): void;
|
|
@@ -185,6 +196,13 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
185
196
|
type: StringConstructor;
|
|
186
197
|
default: null;
|
|
187
198
|
};
|
|
199
|
+
/**
|
|
200
|
+
* Number of unread mention messages
|
|
201
|
+
*/
|
|
202
|
+
unreadMentionCount: {
|
|
203
|
+
type: StringConstructor;
|
|
204
|
+
default: null;
|
|
205
|
+
};
|
|
188
206
|
/**
|
|
189
207
|
* Text shown when the unread count is hovered.
|
|
190
208
|
*/
|
|
@@ -267,6 +285,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
267
285
|
unreadCount: string;
|
|
268
286
|
unreadCountTooltip: string;
|
|
269
287
|
hasUnreads: boolean;
|
|
288
|
+
unreadMentionCount: string;
|
|
270
289
|
activeVoiceChat: boolean;
|
|
271
290
|
dndText: string;
|
|
272
291
|
dndTextTooltip: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"general_row.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/general_row/general_row.vue.js"],"names":[],"mappings":";IAgCI;;;OAGG;;;;;;IASH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;;IASH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG
|
|
1
|
+
{"version":3,"file":"general_row.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/general_row/general_row.vue.js"],"names":[],"mappings":";IAgCI;;;OAGG;;;;;;IASH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;;IASH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA5IH;;;OAGG;;;;;;IASH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;;IASH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG"}
|
|
@@ -8,7 +8,7 @@ const vue = require("vue");
|
|
|
8
8
|
const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-fhnQq0tA.js");
|
|
9
9
|
const lib_popover = require("../lib/popover.cjs");
|
|
10
10
|
const list_item_constants = require("./list_item_constants-EiqkqZvP.js");
|
|
11
|
-
const popover_constants = require("./popover_constants-
|
|
11
|
+
const popover_constants = require("./popover_constants-qUYTzsS3.js");
|
|
12
12
|
const _sfc_main = {
|
|
13
13
|
name: "DtDropdown",
|
|
14
14
|
components: {
|
|
@@ -439,4 +439,4 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
439
439
|
}
|
|
440
440
|
const DtDropdown = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
441
441
|
exports.DtDropdown = DtDropdown;
|
|
442
|
-
//# sourceMappingURL=dropdown-
|
|
442
|
+
//# sourceMappingURL=dropdown-XFYig-ys.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-w8Do29L5.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["DtPopover","SrOnlyCloseButton","KeyboardNavigation","SrOnlyCloseButtonMixin","DROPDOWN_PADDING_CLASSES","getUniqueString","LIST_ITEM_NAVIGATION_TYPES","POPOVER_APPEND_TO_VALUES","EVENT_KEYNAMES","_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-XFYig-ys.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["DtPopover","SrOnlyCloseButton","KeyboardNavigation","SrOnlyCloseButtonMixin","DROPDOWN_PADDING_CLASSES","getUniqueString","LIST_ITEM_NAVIGATION_TYPES","POPOVER_APPEND_TO_VALUES","EVENT_KEYNAMES","_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withC
|
|
|
7
7
|
import { _export_sfc } from "./_plugin-vue_export-helper-caHeSgYY.js";
|
|
8
8
|
import { DtPopover } from "../lib/popover.js";
|
|
9
9
|
import { LIST_ITEM_NAVIGATION_TYPES } from "./list_item_constants-u1xcN9Dd.js";
|
|
10
|
-
import { POPOVER_APPEND_TO_VALUES } from "./popover_constants-
|
|
10
|
+
import { POPOVER_APPEND_TO_VALUES } from "./popover_constants-kQaX7G4a.js";
|
|
11
11
|
const _sfc_main = {
|
|
12
12
|
name: "DtDropdown",
|
|
13
13
|
components: {
|
|
@@ -440,4 +440,4 @@ const DtDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_rende
|
|
|
440
440
|
export {
|
|
441
441
|
DtDropdown
|
|
442
442
|
};
|
|
443
|
-
//# sourceMappingURL=dropdown-
|
|
443
|
+
//# sourceMappingURL=dropdown-tVfEPEl1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-Hn-TeTvZ.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-tVfEPEl1.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
import tippy, { sticky } from "tippy.js";
|
|
2
|
-
const getArrowDetected = (fn) => ({
|
|
3
|
-
name: "arrowDetected",
|
|
4
|
-
enabled: true,
|
|
5
|
-
phase: "main",
|
|
6
|
-
fn,
|
|
7
|
-
requiresIfExists: ["offset"]
|
|
8
|
-
});
|
|
9
2
|
const BASE_TIPPY_DIRECTIONS = [
|
|
10
3
|
"bottom",
|
|
11
4
|
"bottom-start",
|
|
@@ -21,7 +14,7 @@ const BASE_TIPPY_DIRECTIONS = [
|
|
|
21
14
|
"top-end"
|
|
22
15
|
];
|
|
23
16
|
const TIPPY_STICKY_VALUES = [true, false, "reference", "popper"];
|
|
24
|
-
const
|
|
17
|
+
const createTippyPopover = (anchorElement, options) => {
|
|
25
18
|
const { contentElement } = { ...options };
|
|
26
19
|
delete options.contentElement;
|
|
27
20
|
return tippy(anchorElement, {
|
|
@@ -30,6 +23,12 @@ const createTippy = (anchorElement, options) => {
|
|
|
30
23
|
render: () => getContentWrapper(contentElement)
|
|
31
24
|
});
|
|
32
25
|
};
|
|
26
|
+
const createTippy = (anchorElement, options) => {
|
|
27
|
+
return tippy(anchorElement, {
|
|
28
|
+
...options,
|
|
29
|
+
plugins: [sticky]
|
|
30
|
+
});
|
|
31
|
+
};
|
|
33
32
|
const getPopperOptions = ({
|
|
34
33
|
boundary = "clippingParents",
|
|
35
34
|
fallbackPlacements = [],
|
|
@@ -59,10 +58,7 @@ const getPopperOptions = ({
|
|
|
59
58
|
altAxis: !tether,
|
|
60
59
|
tether
|
|
61
60
|
}
|
|
62
|
-
}
|
|
63
|
-
getArrowDetected(({ state }) => {
|
|
64
|
-
onChangePlacement(state.placement);
|
|
65
|
-
})
|
|
61
|
+
}
|
|
66
62
|
]
|
|
67
63
|
};
|
|
68
64
|
};
|
|
@@ -138,7 +134,8 @@ export {
|
|
|
138
134
|
TOOLTIP_KIND_MODIFIERS,
|
|
139
135
|
TOOLTIP_STICKY_VALUES,
|
|
140
136
|
createTippy,
|
|
137
|
+
createTippyPopover,
|
|
141
138
|
getAnchor,
|
|
142
139
|
getPopperOptions
|
|
143
140
|
};
|
|
144
|
-
//# sourceMappingURL=popover_constants-
|
|
141
|
+
//# sourceMappingURL=popover_constants-kQaX7G4a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover_constants-kQaX7G4a.js","sources":["../../components/popover/tippy_utils.js","../../components/tooltip/tooltip_constants.js","../../components/popover/popover_constants.js"],"sourcesContent":["import tippy, { sticky } from 'tippy.js';\n\nexport const BASE_TIPPY_DIRECTIONS = [\n 'bottom', 'bottom-start', 'bottom-end',\n 'right', 'right-start', 'right-end',\n 'left', 'left-start', 'left-end',\n 'top', 'top-start', 'top-end',\n];\n\nexport const TIPPY_STICKY_VALUES = [true, false, 'reference', 'popper'];\nexport const createTippyPopover = (anchorElement, options) => {\n const { contentElement } = { ...options };\n delete options.contentElement;\n return tippy(anchorElement, {\n ...options,\n plugins: [sticky],\n render: () => getContentWrapper(contentElement),\n });\n};\n\nexport const createTippy = (anchorElement, options) => {\n return tippy(anchorElement, {\n ...options,\n plugins: [sticky],\n });\n};\n\nexport const getPopperOptions = ({\n boundary = 'clippingParents',\n fallbackPlacements = [],\n onChangePlacement = () => {},\n hasHideModifierEnabled = false,\n // If set to false the dialog will display over top of the anchor when there is insufficient space.\n // if set to true it will never move from its position relative to the anchor and will clip instead.\n tether = true,\n} = {}) => {\n return {\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements,\n boundary,\n },\n },\n {\n name: 'hide',\n enabled: hasHideModifierEnabled,\n },\n {\n name: 'preventOverflow',\n options: {\n altAxis: !tether,\n tether,\n },\n },\n ],\n };\n};\n\nconst createAnchor = (anchorWrapper) => {\n const span = document.createElement('span');\n span.innerText = anchorWrapper.innerText || '';\n anchorWrapper.innerText = '';\n anchorWrapper.appendChild(span);\n return span;\n};\n\nexport const getAnchor = (anchorWrapper) => {\n const anchor = anchorWrapper?.children[0];\n if (!anchor) return createAnchor(anchorWrapper);\n return anchor;\n};\n\nexport const getContentWrapper = content => {\n // The recommended structure is to use the popper as an outer wrapper\n const popper = document.createElement('div');\n popper.className = 'tippy-box d-ps-absolute';\n popper.appendChild(content);\n return {\n popper,\n };\n};\n","/*\n* Tippy directions - https://atomiks.github.io/tippyjs/v6/all-props/#placement\n* */\nimport { BASE_TIPPY_DIRECTIONS, TIPPY_STICKY_VALUES } from '@/components/popover/tippy_utils';\n\nexport const TOOLTIP_DIRECTIONS = [\n ...BASE_TIPPY_DIRECTIONS,\n];\n\nexport const TOOLTIP_DELAY_MS = 300;\n\nexport const TOOLTIP_KIND_MODIFIERS = {\n hover: `d-tooltip--hover`,\n show: `d-tooltip--show`,\n inverted: `d-tooltip--inverted`,\n hide: `d-tooltip--hide`,\n};\n\nexport const TOOLTIP_STICKY_VALUES = [\n ...TIPPY_STICKY_VALUES,\n];\n\nexport const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];\n\nexport default {\n TOOLTIP_DIRECTIONS,\n TOOLTIP_DELAY_MS,\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_HIDE_ON_CLICK_VARIANTS,\n};\n","import { BASE_TIPPY_DIRECTIONS, TIPPY_STICKY_VALUES } from './tippy_utils';\n\nexport const POPOVER_PADDING_CLASSES = {\n none: undefined,\n small: 'd-p4',\n medium: 'd-p8',\n large: 'd-p16',\n};\nexport const POPOVER_HEADER_FOOTER_PADDING_CLASSES = {\n none: undefined,\n small: 'd-pl4',\n medium: 'd-pl8',\n large: 'd-pl16',\n};\nexport const POPOVER_ROLES = ['dialog', 'menu', 'listbox', 'tree', 'grid'];\nexport const POPOVER_CONTENT_WIDTHS = ['', 'anchor'];\nexport const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];\nexport const POPOVER_APPEND_TO_VALUES = ['parent', 'body'];\nexport const POPOVER_STICKY_VALUES = [\n ...TIPPY_STICKY_VALUES,\n];\nexport const POPOVER_DIRECTIONS = [\n ...BASE_TIPPY_DIRECTIONS,\n];\n\nexport default {\n POPOVER_PADDING_CLASSES,\n POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n POPOVER_ROLES,\n POPOVER_CONTENT_WIDTHS,\n POPOVER_INITIAL_FOCUS_STRINGS,\n POPOVER_APPEND_TO_VALUES,\n POPOVER_STICKY_VALUES,\n POPOVER_DIRECTIONS,\n};\n"],"names":[],"mappings":";AAEO,MAAM,wBAAwB;AAAA,EACnC;AAAA,EAAU;AAAA,EAAgB;AAAA,EAC1B;AAAA,EAAS;AAAA,EAAe;AAAA,EACxB;AAAA,EAAQ;AAAA,EAAc;AAAA,EACtB;AAAA,EAAO;AAAA,EAAa;AACtB;AAEO,MAAM,sBAAsB,CAAC,MAAM,OAAO,aAAa,QAAQ;AAC1D,MAAC,qBAAqB,CAAC,eAAe,YAAY;AAC5D,QAAM,EAAE,eAAc,IAAK,EAAE,GAAG,QAAO;AACvC,SAAO,QAAQ;AACf,SAAO,MAAM,eAAe;AAAA,IAC1B,GAAG;AAAA,IACH,SAAS,CAAC,MAAM;AAAA,IAChB,QAAQ,MAAM,kBAAkB,cAAc;AAAA,EAClD,CAAG;AACH;AAEY,MAAC,cAAc,CAAC,eAAe,YAAY;AACrD,SAAO,MAAM,eAAe;AAAA,IAC1B,GAAG;AAAA,IACH,SAAS,CAAC,MAAM;AAAA,EACpB,CAAG;AACH;AAEY,MAAC,mBAAmB,CAAC;AAAA,EAC/B,WAAW;AAAA,EACX,qBAAqB,CAAE;AAAA,EACvB,oBAAoB,MAAM;AAAA,EAAE;AAAA,EAC5B,yBAAyB;AAAA;AAAA;AAAA,EAGzB,SAAS;AACX,IAAI,OAAO;AACT,SAAO;AAAA,IACL,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP;AAAA,UACA;AAAA,QACD;AAAA,MACF;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,MACV;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS,CAAC;AAAA,UACV;AAAA,QACD;AAAA,MACF;AAAA,IACF;AAAA,EACL;AACA;AAEA,MAAM,eAAe,CAAC,kBAAkB;AACtC,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,YAAY,cAAc,aAAa;AAC5C,gBAAc,YAAY;AAC1B,gBAAc,YAAY,IAAI;AAC9B,SAAO;AACT;AAEY,MAAC,YAAY,CAAC,kBAAkB;AAC1C,QAAM,SAAS,+CAAe,SAAS;AACvC,MAAI,CAAC;AAAQ,WAAO,aAAa,aAAa;AAC9C,SAAO;AACT;AAEO,MAAM,oBAAoB,aAAW;AAE1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,SAAO,YAAY;AACnB,SAAO,YAAY,OAAO;AAC1B,SAAO;AAAA,IACL;AAAA,EACJ;AACA;AC7EY,MAAC,qBAAqB;AAAA,EAChC,GAAG;AACL;AAEY,MAAC,mBAAmB;AAEpB,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AACR;AAEY,MAAC,wBAAwB;AAAA,EACnC,GAAG;AACL;AAEY,MAAC,iCAAiC,CAAC,MAAM,OAAO,QAAQ;ACpBxD,MAAC,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AACY,MAAC,wCAAwC;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AACY,MAAC,gBAAgB,CAAC,UAAU,QAAQ,WAAW,QAAQ,MAAM;AAC7D,MAAC,yBAAyB,CAAC,IAAI,QAAQ;AACvC,MAAC,gCAAgC,CAAC,QAAQ,UAAU,OAAO;AAC3D,MAAC,2BAA2B,CAAC,UAAU,MAAM;AAC7C,MAAC,wBAAwB;AAAA,EACnC,GAAG;AACL;AACY,MAAC,qBAAqB;AAAA,EAChC,GAAG;AACL;"}
|
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const tippy = require("tippy.js");
|
|
3
|
-
const getArrowDetected = (fn) => ({
|
|
4
|
-
name: "arrowDetected",
|
|
5
|
-
enabled: true,
|
|
6
|
-
phase: "main",
|
|
7
|
-
fn,
|
|
8
|
-
requiresIfExists: ["offset"]
|
|
9
|
-
});
|
|
10
3
|
const BASE_TIPPY_DIRECTIONS = [
|
|
11
4
|
"bottom",
|
|
12
5
|
"bottom-start",
|
|
@@ -22,7 +15,7 @@ const BASE_TIPPY_DIRECTIONS = [
|
|
|
22
15
|
"top-end"
|
|
23
16
|
];
|
|
24
17
|
const TIPPY_STICKY_VALUES = [true, false, "reference", "popper"];
|
|
25
|
-
const
|
|
18
|
+
const createTippyPopover = (anchorElement, options) => {
|
|
26
19
|
const { contentElement } = { ...options };
|
|
27
20
|
delete options.contentElement;
|
|
28
21
|
return tippy(anchorElement, {
|
|
@@ -31,6 +24,12 @@ const createTippy = (anchorElement, options) => {
|
|
|
31
24
|
render: () => getContentWrapper(contentElement)
|
|
32
25
|
});
|
|
33
26
|
};
|
|
27
|
+
const createTippy = (anchorElement, options) => {
|
|
28
|
+
return tippy(anchorElement, {
|
|
29
|
+
...options,
|
|
30
|
+
plugins: [tippy.sticky]
|
|
31
|
+
});
|
|
32
|
+
};
|
|
34
33
|
const getPopperOptions = ({
|
|
35
34
|
boundary = "clippingParents",
|
|
36
35
|
fallbackPlacements = [],
|
|
@@ -60,10 +59,7 @@ const getPopperOptions = ({
|
|
|
60
59
|
altAxis: !tether,
|
|
61
60
|
tether
|
|
62
61
|
}
|
|
63
|
-
}
|
|
64
|
-
getArrowDetected(({ state }) => {
|
|
65
|
-
onChangePlacement(state.placement);
|
|
66
|
-
})
|
|
62
|
+
}
|
|
67
63
|
]
|
|
68
64
|
};
|
|
69
65
|
};
|
|
@@ -138,6 +134,7 @@ exports.TOOLTIP_HIDE_ON_CLICK_VARIANTS = TOOLTIP_HIDE_ON_CLICK_VARIANTS;
|
|
|
138
134
|
exports.TOOLTIP_KIND_MODIFIERS = TOOLTIP_KIND_MODIFIERS;
|
|
139
135
|
exports.TOOLTIP_STICKY_VALUES = TOOLTIP_STICKY_VALUES;
|
|
140
136
|
exports.createTippy = createTippy;
|
|
137
|
+
exports.createTippyPopover = createTippyPopover;
|
|
141
138
|
exports.getAnchor = getAnchor;
|
|
142
139
|
exports.getPopperOptions = getPopperOptions;
|
|
143
|
-
//# sourceMappingURL=popover_constants-
|
|
140
|
+
//# sourceMappingURL=popover_constants-qUYTzsS3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover_constants-qUYTzsS3.js","sources":["../../components/popover/tippy_utils.js","../../components/tooltip/tooltip_constants.js","../../components/popover/popover_constants.js"],"sourcesContent":["import tippy, { sticky } from 'tippy.js';\n\nexport const BASE_TIPPY_DIRECTIONS = [\n 'bottom', 'bottom-start', 'bottom-end',\n 'right', 'right-start', 'right-end',\n 'left', 'left-start', 'left-end',\n 'top', 'top-start', 'top-end',\n];\n\nexport const TIPPY_STICKY_VALUES = [true, false, 'reference', 'popper'];\nexport const createTippyPopover = (anchorElement, options) => {\n const { contentElement } = { ...options };\n delete options.contentElement;\n return tippy(anchorElement, {\n ...options,\n plugins: [sticky],\n render: () => getContentWrapper(contentElement),\n });\n};\n\nexport const createTippy = (anchorElement, options) => {\n return tippy(anchorElement, {\n ...options,\n plugins: [sticky],\n });\n};\n\nexport const getPopperOptions = ({\n boundary = 'clippingParents',\n fallbackPlacements = [],\n onChangePlacement = () => {},\n hasHideModifierEnabled = false,\n // If set to false the dialog will display over top of the anchor when there is insufficient space.\n // if set to true it will never move from its position relative to the anchor and will clip instead.\n tether = true,\n} = {}) => {\n return {\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements,\n boundary,\n },\n },\n {\n name: 'hide',\n enabled: hasHideModifierEnabled,\n },\n {\n name: 'preventOverflow',\n options: {\n altAxis: !tether,\n tether,\n },\n },\n ],\n };\n};\n\nconst createAnchor = (anchorWrapper) => {\n const span = document.createElement('span');\n span.innerText = anchorWrapper.innerText || '';\n anchorWrapper.innerText = '';\n anchorWrapper.appendChild(span);\n return span;\n};\n\nexport const getAnchor = (anchorWrapper) => {\n const anchor = anchorWrapper?.children[0];\n if (!anchor) return createAnchor(anchorWrapper);\n return anchor;\n};\n\nexport const getContentWrapper = content => {\n // The recommended structure is to use the popper as an outer wrapper\n const popper = document.createElement('div');\n popper.className = 'tippy-box d-ps-absolute';\n popper.appendChild(content);\n return {\n popper,\n };\n};\n","/*\n* Tippy directions - https://atomiks.github.io/tippyjs/v6/all-props/#placement\n* */\nimport { BASE_TIPPY_DIRECTIONS, TIPPY_STICKY_VALUES } from '@/components/popover/tippy_utils';\n\nexport const TOOLTIP_DIRECTIONS = [\n ...BASE_TIPPY_DIRECTIONS,\n];\n\nexport const TOOLTIP_DELAY_MS = 300;\n\nexport const TOOLTIP_KIND_MODIFIERS = {\n hover: `d-tooltip--hover`,\n show: `d-tooltip--show`,\n inverted: `d-tooltip--inverted`,\n hide: `d-tooltip--hide`,\n};\n\nexport const TOOLTIP_STICKY_VALUES = [\n ...TIPPY_STICKY_VALUES,\n];\n\nexport const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];\n\nexport default {\n TOOLTIP_DIRECTIONS,\n TOOLTIP_DELAY_MS,\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_HIDE_ON_CLICK_VARIANTS,\n};\n","import { BASE_TIPPY_DIRECTIONS, TIPPY_STICKY_VALUES } from './tippy_utils';\n\nexport const POPOVER_PADDING_CLASSES = {\n none: undefined,\n small: 'd-p4',\n medium: 'd-p8',\n large: 'd-p16',\n};\nexport const POPOVER_HEADER_FOOTER_PADDING_CLASSES = {\n none: undefined,\n small: 'd-pl4',\n medium: 'd-pl8',\n large: 'd-pl16',\n};\nexport const POPOVER_ROLES = ['dialog', 'menu', 'listbox', 'tree', 'grid'];\nexport const POPOVER_CONTENT_WIDTHS = ['', 'anchor'];\nexport const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];\nexport const POPOVER_APPEND_TO_VALUES = ['parent', 'body'];\nexport const POPOVER_STICKY_VALUES = [\n ...TIPPY_STICKY_VALUES,\n];\nexport const POPOVER_DIRECTIONS = [\n ...BASE_TIPPY_DIRECTIONS,\n];\n\nexport default {\n POPOVER_PADDING_CLASSES,\n POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n POPOVER_ROLES,\n POPOVER_CONTENT_WIDTHS,\n POPOVER_INITIAL_FOCUS_STRINGS,\n POPOVER_APPEND_TO_VALUES,\n POPOVER_STICKY_VALUES,\n POPOVER_DIRECTIONS,\n};\n"],"names":["sticky"],"mappings":";;AAEO,MAAM,wBAAwB;AAAA,EACnC;AAAA,EAAU;AAAA,EAAgB;AAAA,EAC1B;AAAA,EAAS;AAAA,EAAe;AAAA,EACxB;AAAA,EAAQ;AAAA,EAAc;AAAA,EACtB;AAAA,EAAO;AAAA,EAAa;AACtB;AAEO,MAAM,sBAAsB,CAAC,MAAM,OAAO,aAAa,QAAQ;AAC1D,MAAC,qBAAqB,CAAC,eAAe,YAAY;AAC5D,QAAM,EAAE,eAAc,IAAK,EAAE,GAAG,QAAO;AACvC,SAAO,QAAQ;AACf,SAAO,MAAM,eAAe;AAAA,IAC1B,GAAG;AAAA,IACH,SAAS,CAACA,MAAAA,MAAM;AAAA,IAChB,QAAQ,MAAM,kBAAkB,cAAc;AAAA,EAClD,CAAG;AACH;AAEY,MAAC,cAAc,CAAC,eAAe,YAAY;AACrD,SAAO,MAAM,eAAe;AAAA,IAC1B,GAAG;AAAA,IACH,SAAS,CAACA,MAAAA,MAAM;AAAA,EACpB,CAAG;AACH;AAEY,MAAC,mBAAmB,CAAC;AAAA,EAC/B,WAAW;AAAA,EACX,qBAAqB,CAAE;AAAA,EACvB,oBAAoB,MAAM;AAAA,EAAE;AAAA,EAC5B,yBAAyB;AAAA;AAAA;AAAA,EAGzB,SAAS;AACX,IAAI,OAAO;AACT,SAAO;AAAA,IACL,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP;AAAA,UACA;AAAA,QACD;AAAA,MACF;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,MACV;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS,CAAC;AAAA,UACV;AAAA,QACD;AAAA,MACF;AAAA,IACF;AAAA,EACL;AACA;AAEA,MAAM,eAAe,CAAC,kBAAkB;AACtC,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,YAAY,cAAc,aAAa;AAC5C,gBAAc,YAAY;AAC1B,gBAAc,YAAY,IAAI;AAC9B,SAAO;AACT;AAEY,MAAC,YAAY,CAAC,kBAAkB;AAC1C,QAAM,SAAS,+CAAe,SAAS;AACvC,MAAI,CAAC;AAAQ,WAAO,aAAa,aAAa;AAC9C,SAAO;AACT;AAEO,MAAM,oBAAoB,aAAW;AAE1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,SAAO,YAAY;AACnB,SAAO,YAAY,OAAO;AAC1B,SAAO;AAAA,IACL;AAAA,EACJ;AACA;AC7EY,MAAC,qBAAqB;AAAA,EAChC,GAAG;AACL;AAEY,MAAC,mBAAmB;AAEpB,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AACR;AAEY,MAAC,wBAAwB;AAAA,EACnC,GAAG;AACL;AAEY,MAAC,iCAAiC,CAAC,MAAM,OAAO,QAAQ;ACpBxD,MAAC,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AACY,MAAC,wCAAwC;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AACY,MAAC,gBAAgB,CAAC,UAAU,QAAQ,WAAW,QAAQ,MAAM;AAC7D,MAAC,yBAAyB,CAAC,IAAI,QAAQ;AACvC,MAAC,gCAAgC,CAAC,QAAQ,UAAU,OAAO;AAC3D,MAAC,2BAA2B,CAAC,UAAU,MAAM;AAC7C,MAAC,wBAAwB;AAAA,EACnC,GAAG;AACL;AACY,MAAC,qBAAqB;AAAA,EAChC,GAAG;AACL;;;;;;;;;;;;;;;;;;"}
|