@ironsource/shared-ui 2.1.2-rc.0 → 2.1.3-rc.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/AppHeader.vue_vue_type_style_index_0_scoped_aa538d40_lang.css +1 -0
- package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_f0c4710f_lang.css +1 -0
- package/DropdownV4.vue_vue_type_style_index_0_scoped_78c1497e_lang.css +1 -0
- package/InlineCopy.vue_vue_type_style_index_0_scoped_117ac157_lang.css +1 -0
- package/README.md +1 -1
- package/components/appHeader/AppHeader.vue.d.ts +5 -0
- package/components/appHeader/AppHeader.vue.js +2 -2
- package/components/appHeader/AppHeader.vue2.js +33 -29
- package/components/appHeader/index.d.ts +9 -0
- package/components/dropdown/v4/DefaultDropdownTrigger.vue.d.ts +5 -0
- package/components/dropdown/v4/DefaultDropdownTrigger.vue.js +2 -2
- package/components/dropdown/v4/DefaultDropdownTrigger.vue2.js +15 -13
- package/components/dropdown/v4/DropdownV4.vue.d.ts +5 -0
- package/components/dropdown/v4/DropdownV4.vue.js +2 -2
- package/components/dropdown/v4/DropdownV4.vue2.js +60 -58
- package/components/dropdown/v4/dropdownStoryArgs.d.ts +8 -0
- package/components/dropdown/v4/index.d.ts +40 -2
- package/components/inlineCopy/InlineCopy.vue.d.ts +5 -0
- package/components/inlineCopy/InlineCopy.vue.js +2 -2
- package/components/inlineCopy/InlineCopy.vue2.js +29 -27
- package/components/inlineCopy/index.d.ts +11 -0
- package/index.d.ts +120 -4
- package/package.json +6 -2
- package/AppHeader.vue_vue_type_style_index_0_scoped_5afbd3dd_lang.css +0 -1
- package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_5fa01c78_lang.css +0 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_258b9f7e_lang.css +0 -1
- package/InlineCopy.vue_vue_type_style_index_0_scoped_39577dfc_lang.css +0 -1
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import "../../../DropdownV4.
|
|
1
|
+
import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_78c1497e_lang.css"; import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as ae, computed as F, openBlock as i, createElementBlock as n, mergeProps as s, unref as e, renderSlot as I, createElementVNode as y, createVNode as a, withCtx as u, Transition as de, normalizeClass as V, normalizeStyle as re, isRef as se, createCommentVNode as d, createTextVNode as g, toDisplayString as ue, withModifiers as x, Fragment as ce, renderList as fe, toRaw as T, createBlock as me, resolveDynamicComponent as ye } from "vue";
|
|
2
2
|
import A from "../../button/v4/ButtonV4.vue.js";
|
|
3
3
|
import "../../button/v4/IconButtonV4.vue.js";
|
|
4
4
|
import "./DropdownV4.vue.js";
|
|
5
|
-
import
|
|
5
|
+
import pe from "./DefaultDropdownTrigger.vue.js";
|
|
6
6
|
import ge from "./IconButtonDropdownTrigger.vue.js";
|
|
7
7
|
import he from "./ChipDropdownTrigger.vue.js";
|
|
8
|
-
import
|
|
8
|
+
import ke from "./AppDropdownTrigger.vue.js";
|
|
9
9
|
import $ from "./OptionV4.vue.js";
|
|
10
|
-
import
|
|
10
|
+
import Te from "../../search/v4/SearchV4.vue.js";
|
|
11
11
|
import H from "../../typography/v4/Typography.vue.js";
|
|
12
|
-
import { Dropdown as
|
|
12
|
+
import { Dropdown as be } from "floating-vue";
|
|
13
13
|
import { DropdownTestIdModifiers as c } from "../../../testids/index.js";
|
|
14
|
-
import { dropdownCommon as
|
|
14
|
+
import { dropdownCommon as ve } from "../common/Dropdown.common.js";
|
|
15
15
|
import Ie from "../../loader/v4/Loader.vue.js";
|
|
16
|
-
import { useTestIdAttrs as
|
|
17
|
-
import { TRIGGERS as
|
|
18
|
-
import { useElementSize as
|
|
19
|
-
const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 },
|
|
16
|
+
import { useTestIdAttrs as we } from "../../../utils/testIds.js";
|
|
17
|
+
import { TRIGGERS as p } from "./Dropdown.types.js";
|
|
18
|
+
import { useElementSize as Ce } from "@vueuse/core";
|
|
19
|
+
const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be = { key: 1 }, Ne = { key: 2 }, Oe = {
|
|
20
20
|
key: 0,
|
|
21
21
|
class: "inline-search-wrapper"
|
|
22
22
|
}, De = {
|
|
@@ -28,7 +28,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
28
28
|
}, Re = { key: 2 }, Pe = ["aria-selected", "aria-disabled", "onClick"], ze = {
|
|
29
29
|
key: 1,
|
|
30
30
|
class: "actions-wrapper"
|
|
31
|
-
}, Ke = { class: "actions-clear-all" },
|
|
31
|
+
}, Ke = { class: "actions-clear-all" }, Fe = { class: "actions-apply-cancel" }, ot = /* @__PURE__ */ ae({
|
|
32
32
|
__name: "DropdownV4",
|
|
33
33
|
props: {
|
|
34
34
|
modelValue: { default: null },
|
|
@@ -56,9 +56,10 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
56
56
|
triggerHelperText: { default: "" },
|
|
57
57
|
triggerFeedbackText: { default: "" },
|
|
58
58
|
triggerFeedbackVariant: { default: null },
|
|
59
|
+
triggerFeedbackShowIcon: { type: Boolean, default: !1 },
|
|
59
60
|
size: { default: "medium" },
|
|
60
61
|
mandatory: { type: Boolean, default: !1 },
|
|
61
|
-
predefinedTrigger: { default:
|
|
62
|
+
predefinedTrigger: { default: p.DEFAULT },
|
|
62
63
|
inlineSearch: { type: Boolean, default: !1 },
|
|
63
64
|
inlineSearchPlaceholder: { default: "Search" },
|
|
64
65
|
onSearch: { type: Function, default: null },
|
|
@@ -87,19 +88,19 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
87
88
|
}, {
|
|
88
89
|
onKeydown: h,
|
|
89
90
|
open: f,
|
|
90
|
-
toggleMenu:
|
|
91
|
+
toggleMenu: w,
|
|
91
92
|
onButtonKeydown: M,
|
|
92
|
-
query:
|
|
93
|
+
query: C,
|
|
93
94
|
containerProps: G,
|
|
94
95
|
calculateTableHeight: X,
|
|
95
|
-
wrapperProps:
|
|
96
|
+
wrapperProps: B,
|
|
96
97
|
filteredOptions: q,
|
|
97
|
-
allSelected:
|
|
98
|
+
allSelected: N,
|
|
98
99
|
isIndeterminate: Y,
|
|
99
100
|
onSelectAll: j,
|
|
100
101
|
virtualOptions: O,
|
|
101
102
|
isSelected: S,
|
|
102
|
-
selectedOption:
|
|
103
|
+
selectedOption: k,
|
|
103
104
|
onSelect: D,
|
|
104
105
|
activeIndex: E,
|
|
105
106
|
onCancel: J,
|
|
@@ -112,15 +113,15 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
112
113
|
el: le,
|
|
113
114
|
onClearAllSelections: P,
|
|
114
115
|
clearAll: oe
|
|
115
|
-
} =
|
|
116
|
+
} = ve(r, W, L);
|
|
116
117
|
U({
|
|
117
118
|
selectItem: D,
|
|
118
119
|
scrollTo: Z
|
|
119
120
|
});
|
|
120
|
-
const m =
|
|
121
|
-
|
|
121
|
+
const m = we(r.testId, c), z = F(() => !r.predefinedTrigger || r.predefinedTrigger === p.DEFAULT ? pe : r.predefinedTrigger === p.APP ? ke : null), { width: K } = Ce(R), ie = F(() => r.optionsListWidth ? r.optionsListWidth : !r.predefinedTrigger || r.predefinedTrigger === p.DEFAULT || r.predefinedTrigger === p.APP ? K.value - 2 > 240 ? `${K.value - 2}px` : `${L.DROPLIST_MIN_WIDTH}px` : "auto"), ne = () => {
|
|
122
|
+
w();
|
|
122
123
|
};
|
|
123
|
-
return (
|
|
124
|
+
return (b, o) => (i(), n("div", s({
|
|
124
125
|
ref_key: "el",
|
|
125
126
|
ref: le,
|
|
126
127
|
class: ["dropdown dropdown--main-wrapper", [{ "dropdown--disabled": t.disabled, "full-width": t.fullWidth }]],
|
|
@@ -129,9 +130,9 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
129
130
|
onKeydown: o[6] || (o[6] = //@ts-ignore
|
|
130
131
|
(...l) => e(h) && e(h)(...l))
|
|
131
132
|
}), [
|
|
132
|
-
I(
|
|
133
|
-
|
|
134
|
-
a(e(
|
|
133
|
+
I(b.$slots, "label", {}, void 0, !0),
|
|
134
|
+
y("div", Ae, [
|
|
135
|
+
a(e(be), s({
|
|
135
136
|
theme: t.theme,
|
|
136
137
|
"popper-class": [
|
|
137
138
|
t.popperClass,
|
|
@@ -156,7 +157,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
156
157
|
key: 0,
|
|
157
158
|
ref_key: "listRef",
|
|
158
159
|
ref: _,
|
|
159
|
-
class:
|
|
160
|
+
class: V(["light-theme-v4", {
|
|
160
161
|
"dropdown--disabled": t.disabled,
|
|
161
162
|
"inline-search": t.inlineSearch
|
|
162
163
|
}]),
|
|
@@ -169,10 +170,10 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
169
170
|
(...l) => e(h) && e(h)(...l))
|
|
170
171
|
}, [
|
|
171
172
|
e(f) && t.inlineSearch ? (i(), n("div", Oe, [
|
|
172
|
-
a(e(
|
|
173
|
-
modelValue: e(
|
|
173
|
+
a(e(Te), {
|
|
174
|
+
modelValue: e(C),
|
|
174
175
|
"onUpdate:modelValue": [
|
|
175
|
-
o[3] || (o[3] = (l) => se(
|
|
176
|
+
o[3] || (o[3] = (l) => se(C) ? C.value = l : null),
|
|
176
177
|
t.onClear
|
|
177
178
|
],
|
|
178
179
|
placeholder: t.inlineSearchPlaceholder,
|
|
@@ -183,17 +184,17 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
183
184
|
onKeydown: e(h)
|
|
184
185
|
}, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
|
|
185
186
|
])) : d("", !0),
|
|
186
|
-
I(
|
|
187
|
-
|
|
187
|
+
I(b.$slots, "input-list", { open: e(f) }, void 0, !0),
|
|
188
|
+
y("div", s({
|
|
188
189
|
class: ["list-container", { "list-container--multi": t.multi }],
|
|
189
190
|
style: { height: `${e(X)}rem` }
|
|
190
191
|
}, {
|
|
191
192
|
...e(G),
|
|
192
193
|
...e(m)[e(c).LIST_CONTAINER]
|
|
193
194
|
}), [
|
|
194
|
-
|
|
195
|
+
y("ul", s(e(B), {
|
|
195
196
|
style: {
|
|
196
|
-
height: Number(e(
|
|
197
|
+
height: Number(e(B).style.height) - 4
|
|
197
198
|
},
|
|
198
199
|
role: "listbox",
|
|
199
200
|
class: ["list", { "list--multi": t.multi }]
|
|
@@ -218,15 +219,15 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
218
219
|
t.showSelectAll !== !1 && t.multi ? (i(), n("li", Re, [
|
|
219
220
|
a(e($), s(
|
|
220
221
|
{
|
|
221
|
-
"aria-selected": e(
|
|
222
|
+
"aria-selected": e(N),
|
|
222
223
|
"aria-disabled": !!t.disabled,
|
|
223
|
-
"selected-prop": e(
|
|
224
|
+
"selected-prop": e(N),
|
|
224
225
|
"is-indeterminate": e(Y),
|
|
225
226
|
"select-all-option": ""
|
|
226
227
|
},
|
|
227
228
|
e(m)[e(c).SELECT_ALL],
|
|
228
229
|
{
|
|
229
|
-
onClick: o[4] || (o[4] =
|
|
230
|
+
onClick: o[4] || (o[4] = x((l) => e(j)(), ["stop"]))
|
|
230
231
|
}
|
|
231
232
|
), {
|
|
232
233
|
default: u(() => [
|
|
@@ -235,21 +236,21 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
235
236
|
_: 1
|
|
236
237
|
}, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
|
|
237
238
|
])) : d("", !0),
|
|
238
|
-
e(O).length && !t.loading ? (i(!0), n(ce, { key: 3 }, fe(e(O), ({ data: l, index:
|
|
239
|
-
key:
|
|
240
|
-
"aria-selected": e(S)(
|
|
239
|
+
e(O).length && !t.loading ? (i(!0), n(ce, { key: 3 }, fe(e(O), ({ data: l, index: v }) => (i(), n("li", {
|
|
240
|
+
key: v,
|
|
241
|
+
"aria-selected": e(S)(T(e(k)), l),
|
|
241
242
|
"aria-disabled": !!t.disabled,
|
|
242
|
-
onClick:
|
|
243
|
+
onClick: x(() => e(D)(l, v), ["stop"])
|
|
243
244
|
}, [
|
|
244
|
-
I(
|
|
245
|
+
I(b.$slots, "default", {
|
|
245
246
|
option: l,
|
|
246
|
-
selected: e(S)(
|
|
247
|
-
active:
|
|
247
|
+
selected: e(S)(T(e(k)), l),
|
|
248
|
+
active: T(e(E)) === v
|
|
248
249
|
}, () => [
|
|
249
250
|
a(e($), {
|
|
250
251
|
option: l,
|
|
251
|
-
selected: e(S)(
|
|
252
|
-
active:
|
|
252
|
+
selected: e(S)(T(e(k)), l),
|
|
253
|
+
active: T(e(E)) === v,
|
|
253
254
|
"name-key": t.optionNameKey,
|
|
254
255
|
"image-key": t.optionImageKey,
|
|
255
256
|
"icon-key": t.optionIconKey,
|
|
@@ -260,7 +261,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
260
261
|
], 16)
|
|
261
262
|
], 16),
|
|
262
263
|
t.multi ? (i(), n("div", ze, [
|
|
263
|
-
|
|
264
|
+
y("div", Ke, [
|
|
264
265
|
a(e(A), s(
|
|
265
266
|
{
|
|
266
267
|
ref_key: "clearAll",
|
|
@@ -278,7 +279,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
278
279
|
_: 1
|
|
279
280
|
}, 16, ["onClick"])
|
|
280
281
|
]),
|
|
281
|
-
|
|
282
|
+
y("div", Fe, [
|
|
282
283
|
a(e(A), s(
|
|
283
284
|
{
|
|
284
285
|
ref_key: "cancel",
|
|
@@ -316,31 +317,32 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
316
317
|
})
|
|
317
318
|
]),
|
|
318
319
|
default: u(() => [
|
|
319
|
-
|
|
320
|
-
class:
|
|
320
|
+
y("div", {
|
|
321
|
+
class: V(["button__container", {
|
|
321
322
|
"button__container--open": !!e(f),
|
|
322
323
|
[`button__container--${t.size}`]: !0,
|
|
323
324
|
"button__container--disabled": t.disabled
|
|
324
325
|
}])
|
|
325
326
|
}, [
|
|
326
|
-
I(
|
|
327
|
-
|
|
327
|
+
I(b.$slots, "dropdown-trigger", {}, () => [
|
|
328
|
+
y("div", {
|
|
328
329
|
ref_key: "buttonRef",
|
|
329
330
|
ref: R
|
|
330
331
|
}, [
|
|
331
332
|
e(z) ? (i(), n("div", Le, [
|
|
332
|
-
(i(), me(
|
|
333
|
+
(i(), me(ye(e(z)), {
|
|
333
334
|
placeholder: t.placeholder,
|
|
334
335
|
open: e(f),
|
|
335
336
|
label: t.triggerLabel,
|
|
336
337
|
"hover-help-text": t.triggerHelperText,
|
|
337
338
|
"feedback-text": t.triggerFeedbackText,
|
|
338
339
|
"feedback-variant": t.triggerFeedbackVariant,
|
|
340
|
+
"show-feedback-icon": t.triggerFeedbackShowIcon,
|
|
339
341
|
mandatory: t.mandatory,
|
|
340
342
|
"test-id": t.testId,
|
|
341
343
|
multi: t.multi,
|
|
342
344
|
disabled: t.disabled,
|
|
343
|
-
"selected-option": e(
|
|
345
|
+
"selected-option": e(k),
|
|
344
346
|
"display-value": t.displayValue,
|
|
345
347
|
options: t.options,
|
|
346
348
|
"option-name-key": t.optionNameKey,
|
|
@@ -352,23 +354,23 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne
|
|
|
352
354
|
size: t.size,
|
|
353
355
|
onKeydown: e(M),
|
|
354
356
|
onClick: ne
|
|
355
|
-
}, null, 40, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
|
|
357
|
+
}, null, 40, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "show-feedback-icon", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
|
|
356
358
|
])) : d("", !0),
|
|
357
|
-
t.predefinedTrigger === e(
|
|
359
|
+
t.predefinedTrigger === e(p).ICON_BUTTON ? (i(), n("div", Be, [
|
|
358
360
|
a(e(ge), {
|
|
359
|
-
onClick: o[0] || (o[0] = (l) => e(
|
|
361
|
+
onClick: o[0] || (o[0] = (l) => e(w)())
|
|
360
362
|
})
|
|
361
363
|
])) : d("", !0),
|
|
362
|
-
t.predefinedTrigger === e(
|
|
364
|
+
t.predefinedTrigger === e(p).CHIP ? (i(), n("div", Ne, [
|
|
363
365
|
a(e(he), {
|
|
364
366
|
open: e(f),
|
|
365
367
|
label: t.placeholder,
|
|
366
368
|
"test-id": t.testId,
|
|
367
369
|
options: t.options,
|
|
368
|
-
"selected-option": e(
|
|
370
|
+
"selected-option": e(k),
|
|
369
371
|
"display-value": t.displayValue,
|
|
370
372
|
multi: t.multi,
|
|
371
|
-
onClick: o[1] || (o[1] = (l) => e(
|
|
373
|
+
onClick: o[1] || (o[1] = (l) => e(w)()),
|
|
372
374
|
onClear: o[2] || (o[2] = (l) => e(P)())
|
|
373
375
|
}, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi"])
|
|
374
376
|
])) : d("", !0)
|
|
@@ -29,6 +29,14 @@ export declare const dropDownStoryArgs: {
|
|
|
29
29
|
category: string;
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
|
+
triggerFeedbackShowIcon: {
|
|
33
|
+
control: {
|
|
34
|
+
type: string;
|
|
35
|
+
};
|
|
36
|
+
table: {
|
|
37
|
+
category: string;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
32
40
|
predefinedTrigger: {
|
|
33
41
|
description: string;
|
|
34
42
|
options: ("default" | "icon-button" | "chip" | "app")[];
|
|
@@ -561,6 +561,7 @@ declare const DropdownTypes: () => (({
|
|
|
561
561
|
hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
|
|
562
562
|
feedbackText: string;
|
|
563
563
|
feedbackVariant: "success" | "warning" | "error";
|
|
564
|
+
showFeedbackIcon: boolean;
|
|
564
565
|
statusDotType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
|
|
565
566
|
}> & Omit<Readonly<import("vue").ExtractPropTypes<{
|
|
566
567
|
label: {
|
|
@@ -653,13 +654,17 @@ declare const DropdownTypes: () => (({
|
|
|
653
654
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
654
655
|
default: any;
|
|
655
656
|
};
|
|
657
|
+
showFeedbackIcon: {
|
|
658
|
+
type: import("vue").PropType<boolean>;
|
|
659
|
+
default: boolean;
|
|
660
|
+
};
|
|
656
661
|
statusDotType: {
|
|
657
662
|
type: import("vue").PropType<"default" | "disabled" | "success" | "warning" | "error" | "archive">;
|
|
658
663
|
default: any;
|
|
659
664
|
};
|
|
660
665
|
}>> & {
|
|
661
666
|
onClick?: () => any;
|
|
662
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "open" | "mandatory" | "loading" | "testId" | "options" | "singleAppSelection" | "placeholder" | "multi" | "selectedOption" | "brandIconType" | "optionNameKey" | "optionImageKey" | "optionIconKey" | "optionIconType" | "hoverHelpText" | "hoverHelpTextPlacement" | "feedbackText" | "feedbackVariant" | "statusDotType">;
|
|
667
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "open" | "mandatory" | "loading" | "testId" | "options" | "singleAppSelection" | "placeholder" | "multi" | "selectedOption" | "brandIconType" | "optionNameKey" | "optionImageKey" | "optionIconKey" | "optionIconType" | "hoverHelpText" | "hoverHelpTextPlacement" | "feedbackText" | "feedbackVariant" | "showFeedbackIcon" | "statusDotType">;
|
|
663
668
|
$attrs: {
|
|
664
669
|
[x: string]: unknown;
|
|
665
670
|
};
|
|
@@ -764,6 +769,10 @@ declare const DropdownTypes: () => (({
|
|
|
764
769
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
765
770
|
default: any;
|
|
766
771
|
};
|
|
772
|
+
showFeedbackIcon: {
|
|
773
|
+
type: import("vue").PropType<boolean>;
|
|
774
|
+
default: boolean;
|
|
775
|
+
};
|
|
767
776
|
statusDotType: {
|
|
768
777
|
type: import("vue").PropType<"default" | "disabled" | "success" | "warning" | "error" | "archive">;
|
|
769
778
|
default: any;
|
|
@@ -794,6 +803,7 @@ declare const DropdownTypes: () => (({
|
|
|
794
803
|
hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
|
|
795
804
|
feedbackText: string;
|
|
796
805
|
feedbackVariant: "success" | "warning" | "error";
|
|
806
|
+
showFeedbackIcon: boolean;
|
|
797
807
|
statusDotType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
|
|
798
808
|
}, {}, string> & {
|
|
799
809
|
beforeCreate?: (() => void) | (() => void)[];
|
|
@@ -906,6 +916,10 @@ declare const DropdownTypes: () => (({
|
|
|
906
916
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
907
917
|
default: any;
|
|
908
918
|
};
|
|
919
|
+
showFeedbackIcon: {
|
|
920
|
+
type: import("vue").PropType<boolean>;
|
|
921
|
+
default: boolean;
|
|
922
|
+
};
|
|
909
923
|
statusDotType: {
|
|
910
924
|
type: import("vue").PropType<"default" | "disabled" | "success" | "warning" | "error" | "archive">;
|
|
911
925
|
default: any;
|
|
@@ -1007,6 +1021,10 @@ declare const DropdownTypes: () => (({
|
|
|
1007
1021
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
1008
1022
|
default: any;
|
|
1009
1023
|
};
|
|
1024
|
+
showFeedbackIcon: {
|
|
1025
|
+
type: import("vue").PropType<boolean>;
|
|
1026
|
+
default: boolean;
|
|
1027
|
+
};
|
|
1010
1028
|
statusDotType: {
|
|
1011
1029
|
type: import("vue").PropType<"default" | "disabled" | "success" | "warning" | "error" | "archive">;
|
|
1012
1030
|
default: any;
|
|
@@ -1037,6 +1055,7 @@ declare const DropdownTypes: () => (({
|
|
|
1037
1055
|
hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
|
|
1038
1056
|
feedbackText: string;
|
|
1039
1057
|
feedbackVariant: "success" | "warning" | "error";
|
|
1058
|
+
showFeedbackIcon: boolean;
|
|
1040
1059
|
statusDotType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
|
|
1041
1060
|
}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
1042
1061
|
$slots: {
|
|
@@ -1352,6 +1371,7 @@ declare const DropdownTypes: () => (({
|
|
|
1352
1371
|
triggerHelperText: string;
|
|
1353
1372
|
triggerFeedbackText: string;
|
|
1354
1373
|
triggerFeedbackVariant: "success" | "warning" | "error";
|
|
1374
|
+
triggerFeedbackShowIcon: boolean;
|
|
1355
1375
|
searchAutoFocus: boolean;
|
|
1356
1376
|
predefinedTrigger: "default" | "icon-button" | "chip" | "app";
|
|
1357
1377
|
fullWidth: boolean;
|
|
@@ -1515,6 +1535,10 @@ declare const DropdownTypes: () => (({
|
|
|
1515
1535
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
1516
1536
|
default: any;
|
|
1517
1537
|
};
|
|
1538
|
+
triggerFeedbackShowIcon: {
|
|
1539
|
+
type: import("vue").PropType<boolean>;
|
|
1540
|
+
default: boolean;
|
|
1541
|
+
};
|
|
1518
1542
|
searchAutoFocus: {
|
|
1519
1543
|
type: import("vue").PropType<boolean>;
|
|
1520
1544
|
default: boolean;
|
|
@@ -1541,7 +1565,7 @@ declare const DropdownTypes: () => (({
|
|
|
1541
1565
|
"onUpdate:isOpen"?: (value: unknown) => any;
|
|
1542
1566
|
onOpened?: () => any;
|
|
1543
1567
|
onClosed?: () => any;
|
|
1544
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "isOnTop" | "multi" | "inlineSearch" | "noResultsText" | "showSelectAll" | "defaultOpen" | "skidding" | "onSearch" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "valueToCopy" | "optionNameKey" | "optionImageKey" | "optionIconKey" | "optionIconType" | "onClear" | "inlineSearchPlaceholder" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "searchAutoFocus" | "predefinedTrigger" | "fullWidth" | "optionsListWidth" | "statusType">;
|
|
1568
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "isOnTop" | "multi" | "inlineSearch" | "noResultsText" | "showSelectAll" | "defaultOpen" | "skidding" | "onSearch" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "valueToCopy" | "optionNameKey" | "optionImageKey" | "optionIconKey" | "optionIconType" | "onClear" | "inlineSearchPlaceholder" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "searchAutoFocus" | "predefinedTrigger" | "fullWidth" | "optionsListWidth" | "statusType">;
|
|
1545
1569
|
$attrs: {
|
|
1546
1570
|
[x: string]: unknown;
|
|
1547
1571
|
};
|
|
@@ -1713,6 +1737,10 @@ declare const DropdownTypes: () => (({
|
|
|
1713
1737
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
1714
1738
|
default: any;
|
|
1715
1739
|
};
|
|
1740
|
+
triggerFeedbackShowIcon: {
|
|
1741
|
+
type: import("vue").PropType<boolean>;
|
|
1742
|
+
default: boolean;
|
|
1743
|
+
};
|
|
1716
1744
|
searchAutoFocus: {
|
|
1717
1745
|
type: import("vue").PropType<boolean>;
|
|
1718
1746
|
default: boolean;
|
|
@@ -1784,6 +1812,7 @@ declare const DropdownTypes: () => (({
|
|
|
1784
1812
|
triggerHelperText: string;
|
|
1785
1813
|
triggerFeedbackText: string;
|
|
1786
1814
|
triggerFeedbackVariant: "success" | "warning" | "error";
|
|
1815
|
+
triggerFeedbackShowIcon: boolean;
|
|
1787
1816
|
searchAutoFocus: boolean;
|
|
1788
1817
|
predefinedTrigger: "default" | "icon-button" | "chip" | "app";
|
|
1789
1818
|
fullWidth: boolean;
|
|
@@ -1967,6 +1996,10 @@ declare const DropdownTypes: () => (({
|
|
|
1967
1996
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
1968
1997
|
default: any;
|
|
1969
1998
|
};
|
|
1999
|
+
triggerFeedbackShowIcon: {
|
|
2000
|
+
type: import("vue").PropType<boolean>;
|
|
2001
|
+
default: boolean;
|
|
2002
|
+
};
|
|
1970
2003
|
searchAutoFocus: {
|
|
1971
2004
|
type: import("vue").PropType<boolean>;
|
|
1972
2005
|
default: boolean;
|
|
@@ -2158,6 +2191,10 @@ declare const DropdownTypes: () => (({
|
|
|
2158
2191
|
type: import("vue").PropType<"success" | "warning" | "error">;
|
|
2159
2192
|
default: any;
|
|
2160
2193
|
};
|
|
2194
|
+
triggerFeedbackShowIcon: {
|
|
2195
|
+
type: import("vue").PropType<boolean>;
|
|
2196
|
+
default: boolean;
|
|
2197
|
+
};
|
|
2161
2198
|
searchAutoFocus: {
|
|
2162
2199
|
type: import("vue").PropType<boolean>;
|
|
2163
2200
|
default: boolean;
|
|
@@ -2229,6 +2266,7 @@ declare const DropdownTypes: () => (({
|
|
|
2229
2266
|
triggerHelperText: string;
|
|
2230
2267
|
triggerFeedbackText: string;
|
|
2231
2268
|
triggerFeedbackVariant: "success" | "warning" | "error";
|
|
2269
|
+
triggerFeedbackShowIcon: boolean;
|
|
2232
2270
|
searchAutoFocus: boolean;
|
|
2233
2271
|
predefinedTrigger: "default" | "icon-button" | "chip" | "app";
|
|
2234
2272
|
fullWidth: boolean;
|
|
@@ -2,22 +2,27 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
2
2
|
text: string;
|
|
3
3
|
size: 'small' | 'medium';
|
|
4
4
|
testId: string;
|
|
5
|
+
hideTextValue: boolean;
|
|
5
6
|
}>, {
|
|
6
7
|
size: string;
|
|
7
8
|
text: string;
|
|
8
9
|
testId: string;
|
|
10
|
+
hideTextValue: boolean;
|
|
9
11
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
10
12
|
text: string;
|
|
11
13
|
size: 'small' | 'medium';
|
|
12
14
|
testId: string;
|
|
15
|
+
hideTextValue: boolean;
|
|
13
16
|
}>, {
|
|
14
17
|
size: string;
|
|
15
18
|
text: string;
|
|
16
19
|
testId: string;
|
|
20
|
+
hideTextValue: boolean;
|
|
17
21
|
}>>>, {
|
|
18
22
|
text: string;
|
|
19
23
|
size: 'small' | 'medium';
|
|
20
24
|
testId: string;
|
|
25
|
+
hideTextValue: boolean;
|
|
21
26
|
}>;
|
|
22
27
|
export default _default;
|
|
23
28
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./InlineCopy.vue2.js";
|
|
2
2
|
/* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../InlineCopy.
|
|
4
|
-
const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-
|
|
3
|
+
// import "../../InlineCopy.vue_vue_type_style_index_0_scoped_117ac157_lang.css"; //*');
|
|
4
|
+
const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-117ac157"]]);
|
|
5
5
|
export {
|
|
6
6
|
t as default
|
|
7
7
|
};
|
|
@@ -1,54 +1,56 @@
|
|
|
1
|
-
import "../../InlineCopy.
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { useClipboard as
|
|
1
|
+
import "../../InlineCopy.vue_vue_type_style_index_0_scoped_117ac157_lang.css"; import { defineComponent as d, computed as f, openBlock as s, createElementBlock as y, createBlock as x, unref as e, mergeProps as i, withCtx as c, createTextVNode as C, toDisplayString as T, createCommentVNode as I, createVNode as l } from "vue";
|
|
2
|
+
import h from "../icon/v4/IconV4.vue.js";
|
|
3
|
+
import k from "../typography/v4/Typography.vue.js";
|
|
4
|
+
import { useClipboard as V } from "@vueuse/core";
|
|
5
5
|
import { Snackbar as z } from "../snackbar/v4/index.js";
|
|
6
|
-
import
|
|
7
|
-
import { useTestIdAttrs as
|
|
6
|
+
import B from "../tooltip/v4/TooltipV4.vue.js";
|
|
7
|
+
import { useTestIdAttrs as _ } from "../../utils/testIds.js";
|
|
8
8
|
import { InlineCopyTestIdModifiers as r } from "../../testids/index.js";
|
|
9
|
-
const
|
|
9
|
+
const M = /* @__PURE__ */ d({
|
|
10
10
|
__name: "InlineCopy",
|
|
11
11
|
props: {
|
|
12
12
|
text: { default: "" },
|
|
13
13
|
size: { default: "small" },
|
|
14
|
-
testId: { default: "" }
|
|
14
|
+
testId: { default: "" },
|
|
15
|
+
hideTextValue: { type: Boolean, default: !1 }
|
|
15
16
|
},
|
|
16
|
-
setup(
|
|
17
|
-
const
|
|
18
|
-
switch (
|
|
17
|
+
setup(t) {
|
|
18
|
+
const o = t, { copy: n, copied: p } = V({}), m = f(() => {
|
|
19
|
+
switch (o.size) {
|
|
19
20
|
case "medium":
|
|
20
21
|
return "0.875rem";
|
|
21
22
|
case "small":
|
|
22
23
|
default:
|
|
23
24
|
return "0.75rem";
|
|
24
25
|
}
|
|
25
|
-
}),
|
|
26
|
-
await
|
|
26
|
+
}), u = async () => {
|
|
27
|
+
await n(o.text), p.value && z({
|
|
27
28
|
title: "Copied successfully",
|
|
28
29
|
type: "success",
|
|
29
30
|
duration: 2e3
|
|
30
31
|
});
|
|
31
|
-
},
|
|
32
|
-
return (
|
|
32
|
+
}, a = _(o.testId, r);
|
|
33
|
+
return (N, S) => (s(), y("div", {
|
|
33
34
|
class: "inline-copy",
|
|
34
|
-
onClick:
|
|
35
|
+
onClick: u
|
|
35
36
|
}, [
|
|
36
|
-
|
|
37
|
+
t.hideTextValue ? I("", !0) : (s(), x(e(k), i({
|
|
38
|
+
key: 0,
|
|
37
39
|
variant: "caption",
|
|
38
|
-
style: { fontSize:
|
|
39
|
-
},
|
|
40
|
-
default:
|
|
41
|
-
|
|
40
|
+
style: { fontSize: e(m) }
|
|
41
|
+
}, e(a)[e(r).TEXT]), {
|
|
42
|
+
default: c(() => [
|
|
43
|
+
C(T(t.text), 1)
|
|
42
44
|
]),
|
|
43
45
|
_: 1
|
|
44
|
-
}, 16, ["style"]),
|
|
45
|
-
|
|
46
|
-
default:
|
|
47
|
-
|
|
46
|
+
}, 16, ["style"])),
|
|
47
|
+
l(e(B), { text: "Copy to clipboar" }, {
|
|
48
|
+
default: c(() => [
|
|
49
|
+
l(e(h), i({
|
|
48
50
|
class: "icon-copy",
|
|
49
51
|
name: "copy",
|
|
50
52
|
size: "16px"
|
|
51
|
-
},
|
|
53
|
+
}, e(a)[e(r).COPY_BTN]), null, 16)
|
|
52
54
|
]),
|
|
53
55
|
_: 1
|
|
54
56
|
})
|
|
@@ -56,5 +58,5 @@ const P = /* @__PURE__ */ u({
|
|
|
56
58
|
}
|
|
57
59
|
});
|
|
58
60
|
export {
|
|
59
|
-
|
|
61
|
+
M as default
|
|
60
62
|
};
|
|
@@ -15,6 +15,11 @@ declare const InlineCopyTypes: () => import("vue").DefineComponent<{
|
|
|
15
15
|
required: true;
|
|
16
16
|
default: string;
|
|
17
17
|
};
|
|
18
|
+
hideTextValue: {
|
|
19
|
+
type: import("vue").PropType<boolean>;
|
|
20
|
+
required: true;
|
|
21
|
+
default: boolean;
|
|
22
|
+
};
|
|
18
23
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
19
24
|
text: {
|
|
20
25
|
type: import("vue").PropType<string>;
|
|
@@ -31,9 +36,15 @@ declare const InlineCopyTypes: () => import("vue").DefineComponent<{
|
|
|
31
36
|
required: true;
|
|
32
37
|
default: string;
|
|
33
38
|
};
|
|
39
|
+
hideTextValue: {
|
|
40
|
+
type: import("vue").PropType<boolean>;
|
|
41
|
+
required: true;
|
|
42
|
+
default: boolean;
|
|
43
|
+
};
|
|
34
44
|
}>>, {
|
|
35
45
|
text: string;
|
|
36
46
|
size: "small" | "medium";
|
|
37
47
|
testId: string;
|
|
48
|
+
hideTextValue: boolean;
|
|
38
49
|
}>[];
|
|
39
50
|
export { InlineCopy, InlineCopyTypes };
|