@ironsource/shared-ui 1.4.2-rc.1 → 1.4.2-rc.12
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/Banner.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
- package/Chip.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
- package/Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
- package/IncludeExclude.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
- package/Input.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
- package/Toggle.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
- package/components/banner/Banner.vue.js +3 -3
- package/components/chip/Chip.vue.js +2 -2
- package/components/dropdown/Dropdown.vue.js +19 -4
- package/components/includeExclude/IncludeExclude.vue.d.ts +5 -0
- package/components/includeExclude/IncludeExclude.vue.js +68 -51
- package/components/includeExclude/index.d.ts +11 -0
- package/components/input/Input.vue.d.ts +5 -0
- package/components/input/Input.vue.js +19 -6
- package/components/input/index.d.ts +17 -0
- package/components/toggle/Toggle.vue.d.ts +5 -0
- package/components/toggle/Toggle.vue.js +17 -11
- package/components/toggle/index.d.ts +11 -0
- package/consts/regex.d.ts +1 -0
- package/consts/regex.vue.js +3 -0
- package/consts/style.d.ts +1 -0
- package/consts/style.vue.js +3 -0
- package/index.vue.js +1 -1
- package/package.json +5 -4
- package/utils/style.d.ts +1 -0
- package/utils/style.vue.js +5 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
.label[data-v-
|
|
1
|
+
.label[data-v-36d41da7]{color:#41454d}.banner[data-v-36d41da7]{display:flex;align-items:center;min-height:3rem;border-radius:.5rem;border:1px solid #DDDFE1;overflow:hidden;margin:1rem 0rem;position:relative;color:#53575b}.banner .left-border[data-v-36d41da7]{position:absolute;top:0;left:0;width:5px;height:100%;background-color:#2b76e6}.banner .content-wrapper[data-v-36d41da7]{padding:.875rem 1rem 1rem 1.5rem;display:flex;align-items:center;flex:1;height:3rem}.banner .content-wrapper .icon-container[data-v-36d41da7]{margin-right:1rem;display:grid;align-content:center}.banner .content-wrapper .content[data-v-36d41da7]{flex:1}.banner.banner-type-info .left-border[data-v-36d41da7]{background-color:#3083ff}.banner.banner-type-info .icon[data-v-36d41da7]{color:#3083ff}.banner.banner-type-success .left-border[data-v-36d41da7]{background-color:#22c891}.banner.banner-type-success .icon[data-v-36d41da7]{color:#22c891}.banner.banner-type-error .left-border[data-v-36d41da7]{background-color:#ff6a63}.banner.banner-type-error .icon[data-v-36d41da7]{color:#ff6a63}.banner.banner-type-warning .left-border[data-v-36d41da7]{background-color:#ffb424}.banner.banner-type-warning .icon[data-v-36d41da7]{color:#ffb424}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.label[data-v-
|
|
1
|
+
.label[data-v-287fd6d1]{color:#41454d}.chip-container[data-v-287fd6d1]{max-width:100%;display:flex;align-items:center;justify-content:center;font-family:HelveticaNeue,sans-serif;font-weight:500;font-size:.8125rem;padding:.5rem 1rem;border-radius:1.5rem;background:none;cursor:pointer;border:1px solid #DDDFE1}.chip-container[data-v-287fd6d1]:hover{border-color:#53575b;color:#53575b}.chip-container.disabled[data-v-287fd6d1]{color:#696a6b;pointer-events:none}.chip-container.selected[data-v-287fd6d1]{border-color:#e2eeff;background-color:#e2eeff;color:#3083ff}.chip-container.selected[data-v-287fd6d1]:hover{background-color:#c9dfff;border-color:#c9dfff}.chip-container.selected.disabled[data-v-287fd6d1]{color:#96c0ff}.chip-container.selected .clear-icon[data-v-287fd6d1]{margin-left:8px;margin-right:-8px;color:#96c0ff;display:inline-block}.chip-container.selected .clear-icon[data-v-287fd6d1]:hover{color:#3083ff}.chip-container span.prefix[data-v-287fd6d1]{font-weight:400}.chip-container .clear-icon[data-v-287fd6d1]{display:none;min-width:auto;border:none;background:none;padding:0}.icon[data-v-287fd6d1]{display:flex}.icon--start[data-v-287fd6d1]{margin-right:6px}.icon--end[data-v-287fd6d1]{margin-left:6px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.label[data-v-
|
|
1
|
+
.label[data-v-12b53c10]{color:#41454d}.v-enter-active[data-v-12b53c10],.v-leave-active[data-v-12b53c10]{transition:opacity .25s ease}ol[data-v-12b53c10],ul[data-v-12b53c10],menu[data-v-12b53c10]{list-style:none;margin:0;padding:0}.dropdown[data-v-12b53c10]{display:flex;flex-direction:column}.dropdown--disabled[data-v-12b53c10]{opacity:.7}.list-container[data-v-12b53c10]{padding:.5rem}.list-container--multi[data-v-12b53c10]{margin-bottom:0}.v-popper__arrow-container[data-v-12b53c10]{display:none}.helper-text[data-v-12b53c10]{padding-top:.25rem;color:#696a6b}.helper-text--error[data-v-12b53c10]{color:#da564f}.no-result-container[data-v-12b53c10]{height:100%;display:flex;align-items:center}.no-result[data-v-12b53c10]{color:#8e959d;padding-left:.5rem}.list[data-v-12b53c10]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem;border-radius:.5rem}.list--multi[data-v-12b53c10]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.button__container[data-v-12b53c10]{display:flex;justify-content:center;flex-direction:column;position:relative}.button__container[data-v-12b53c10]:not(.button__container--disabled){cursor:pointer}.loader[data-v-12b53c10]{color:#8e959d;display:flex;height:100%;margin-left:.375rem;justify-self:center;align-items:center}.loader-icon[data-v-12b53c10]{margin-right:.25rem;display:flex}.button[data-v-12b53c10]{font-size:.875rem;line-height:1.25rem;min-width:15rem;color:#53575b;height:2rem;text-align:start;padding:.25rem .75rem;background:#F1F3F4;border-radius:.5rem;display:flex;border:none;align-items:center}.button--lg[data-v-12b53c10]{height:2.5rem}.button[data-v-12b53c10]:hover:not(.button--open):not(.button--disabled){color:#53575b;background:#EDEFF0}.button--open[data-v-12b53c10],.button[data-v-12b53c10]:focus-visible{background:linear-gradient(0deg,#3083FF 0,#3083FF 2px,#F1F3F4 0)}.image-slot[data-v-12b53c10]{margin-right:.5rem}.angle-down[data-v-12b53c10]{margin-left:auto;display:flex;color:#7b838c}.actions[data-v-12b53c10]{display:flex;width:100%;margin-left:auto;padding:.75rem 1rem;border-top:1px solid #DDDFE1;justify-content:flex-end}.actions[data-v-12b53c10]:first-child{padding-right:.25rem}.apply-button[data-v-12b53c10]{margin-left:.25rem}.dropdown-title__text[data-v-12b53c10]{color:#41454d;border-bottom:1px solid #DDDFE1;padding:1rem}.dropdown-title__search[data-v-12b53c10]{padding:3px 0;width:100%;border-bottom:1px solid #DDDFE1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.label[data-v-
|
|
1
|
+
.label[data-v-07db12f0]{color:#41454d}[data-v-07db12f0]::-webkit-scrollbar{width:.625rem;opacity:.7;background-color:transparent}[data-v-07db12f0]::-webkit-scrollbar-thumb{border:3px solid transparent;background-clip:padding-box;border-radius:.625rem;background-color:#d2d5d8!important}[data-v-07db12f0]::-webkit-scrollbar-track{border-radius:.625rem;background-color:transparent}.loader-wrapper[data-v-07db12f0]{display:flex;width:100%;gap:.5rem;padding-left:.5rem;padding-right:.75rem}.include-exclude-wrapper[data-v-07db12f0]{width:100%}.include-exclude-content[data-v-07db12f0]{width:34.0625rem}.include-exclude-list-wrapper[data-v-07db12f0]{border-right:1px #DDDFE1 solid;height:13.75rem}.include-exclude-list[data-v-07db12f0],.include-exclude-selected-list[data-v-07db12f0]{overflow-y:auto;overflow-x:none;padding:.25rem .25rem .25rem .5rem;max-height:13.75rem;height:13.75rem}.no-result-text[data-v-07db12f0]{color:#8e959d;height:100%}.include-exclude-list-wrapper[data-v-07db12f0],.include-exclude-selected-wrapper[data-v-07db12f0]{width:50%;height:100%;display:flex;flex-direction:column;justify-content:flex-start}.include-exclude-list-item-skeleton[data-v-07db12f0]{display:flex;gap:.5rem;margin-bottom:1rem}.include-exclude-list-item-skeleton[data-v-07db12f0]:first-child{margin-top:.5rem}li[data-v-07db12f0]:last-child{padding-bottom:.25rem}.include-exclude-header-left-section[data-v-07db12f0]{border-right:1px solid #DDDFE1;color:#53575b;padding:1.5rem;height:100%;display:flex;align-items:center}.include-exclude-header-right-section[data-v-07db12f0]{flex-grow:1;padding:0 .375rem}.include-exclude-footer[data-v-07db12f0]{height:3rem;display:flex}.include-exclude-container[data-v-07db12f0]{display:flex;align-items:center;justify-content:center;height:100%}.include-exclude-container-wrapper[data-v-07db12f0]{border-top:1px #DDDFE1 solid;border-bottom:1px #DDDFE1 solid}.include-exclude-selected-header-left-selected[data-v-07db12f0]{color:#565c62}.include-exclude-header[data-v-07db12f0]{display:flex;align-items:center;justify-content:space-between;height:3.5rem}.include-exclude-list-header-loading[data-v-07db12f0]{gap:.5rem;padding:0 .25rem 0 .5rem}.include-exclude-list-selected-header-loading[data-v-07db12f0]{padding:0 .25rem 0 .5rem}.include-exclude-list-header-loaded[data-v-07db12f0]{padding:0 1rem}.include-exclude-list-header[data-v-07db12f0],.include-exclude-selected-header[data-v-07db12f0]{height:2.5rem;display:flex;justify-content:space-between;align-items:center;height:2.5625rem;border-bottom:1px #DDDFE1 solid}.include-exclude-header-right-section-search-input[data-v-07db12f0]{width:100%;height:100%}.include-exclude-selected-header-right[data-v-07db12f0]{height:100%;display:flex}.include-exclude-selected-header-left[data-v-07db12f0]{height:100%;display:flex;align-items:center}.dot-skeleton[data-v-07db12f0]{width:1rem;height:1rem}ol[data-v-07db12f0],ul[data-v-07db12f0],menu[data-v-07db12f0]{list-style:none;margin:0;padding:0}.include-exclude-footer-buttons[data-v-07db12f0]{display:flex;align-items:center;justify-content:center;margin-left:auto;gap:.25rem;padding-right:1rem}.switch-enter-from[data-v-07db12f0],.switch-leave-to[data-v-07db12f0]{transition:all .25s ease;opacity:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.label[data-v-
|
|
1
|
+
.label[data-v-487006af]{color:#41454d}.disabled[data-v-487006af]{opacity:70%}.mandatory[data-v-487006af]{margin-left:2px}.info-icon-wrapper[data-v-487006af]{display:flex}.info-icon[data-v-487006af]{margin-left:2px;color:#d2d5d8}.info-icon[data-v-487006af]:hover{color:#626970}.input-size-sm[data-v-487006af]{height:32px}.input-size-lg[data-v-487006af]{height:40px}input[type=password][data-v-487006af]{letter-spacing:6px}.extra-text-container[data-v-487006af]{line-height:16px;margin:4px 0 4px 4px}.extra-text-container .error[data-v-487006af]{color:#da564f}.extra-text-container .help[data-v-487006af]{color:#696a6b}.input-with-label-container[data-v-487006af]{display:flex;flex-direction:column}.label-container[data-v-487006af]{flex-grow:1;white-space:nowrap;display:flex;align-items:center;height:24px}.label-container.direction-top[data-v-487006af]{padding-bottom:.5rem}.input-container[data-v-487006af]{flex-grow:2;display:flex;flex-direction:row;align-items:center;border-radius:.5rem;background:#F1F3F4;padding:0 .75rem}.input-container .input[data-v-487006af]{padding:0;width:100%;border:none;border-radius:0;background:#F1F3F4;color:#53575b;font-family:HelveticaNeue,sans-serif;font-size:.8125rem;line-height:normal}.input-container .input[data-v-487006af]:focus{outline:none}.input-container .input[data-v-487006af]:disabled{color:#8e959d}.input-container .input.view-only[data-v-487006af]{color:#53575b}.input-container .hide-arrows.input[type=number][data-v-487006af]::-webkit-inner-spin-button,.input-container .hide-arrows.input[type=number][data-v-487006af]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.input-container[data-v-487006af] ::placeholder{color:#8e959d}.input-container .label-inside[data-v-487006af]::placeholder{color:#41454d}.input-container .icon-container[data-v-487006af]{display:flex;align-items:center}.input-container .icon-before[data-v-487006af]{padding-right:.5rem}.input-container .icon-after[data-v-487006af]{padding-left:.5rem}.focused[data-v-487006af]{outline:none;background:linear-gradient(0deg,#3083FF 0,#3083FF 2px,#F1F3F4 0)}.focused .input[data-v-487006af]{background:linear-gradient(0deg,#3083FF 0,#3083FF 2px,#F1F3F4 0)}.input-container.error[data-v-487006af]{margin-top:0}.error-icon.error-icon[data-v-487006af],.error-icon.error-icon[data-v-487006af]:hover{color:#ff6a63}.confirm-icon.confirm-icon[data-v-487006af]{padding-left:.25rem}.confirm-icon.confirm-icon[data-v-487006af]:hover{color:#3083ff}.label-direction-left[data-v-487006af]{flex-direction:row;align-items:center;justify-content:space-between}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.label[data-v-
|
|
1
|
+
.label[data-v-27275176]{color:#41454d}.loader[data-v-27275176]{width:10px;height:10px;border:1.2px solid #D2D5D8;border-bottom-color:transparent;border-radius:100%;display:inline-block;box-sizing:border-box;animation:rotation-27275176 1s linear infinite}.loader.loader-active[data-v-27275176]{border:1.2px solid var(--7a6f4588);border-bottom-color:transparent}@keyframes rotation-27275176{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toggle-body[data-v-27275176]{background-color:#d2d5d8;border-radius:100px;width:1.75rem;height:1rem;position:relative;cursor:pointer;display:inline-block}.toggle-body.toggle-disabled[data-v-27275176]{cursor:default;background-color:#d2d5d8b3}.toggle-body.toggle-active.toggle-disabled[data-v-27275176]{background-color:var(--7a6f4588);opacity:.7}.toggle-head[data-v-27275176]{background-color:#fff;border-radius:100px;width:.75rem;height:.75rem;position:absolute;left:.125rem;top:.125rem;transition:transform .25s linear;display:flex;justify-content:center;align-items:center}.toggle-active.toggle-body[data-v-27275176]{background-color:var(--7a6f4588)}.toggle-active .toggle-head[data-v-27275176]{transform:translate(.75rem)}.checkbox[data-v-27275176]{display:none}.item-text[data-v-27275176]{display:inline-block;padding-left:.5rem;line-height:1rem;color:#53575b}.item-text.text-disabled[data-v-27275176]{color:#8e959d}.helper-text[data-v-27275176]{display:block;color:#696a6b;padding-top:.375rem}.error-text[data-v-27275176]{display:block;color:#da564f;padding-top:.375rem}.error-and-help[data-v-27275176]{padding-top:0}.toggle-wrap[data-v-27275176]{height:1rem}
|
|
@@ -3,7 +3,7 @@ import Icon from '../icon/Icon.vue.js';
|
|
|
3
3
|
/* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
4
4
|
|
|
5
5
|
import "../../Banner.vue_vue_type_style_index_0_scoped_true_lang.css";
|
|
6
|
-
const _withScopeId = (n) => (pushScopeId("data-v-
|
|
6
|
+
const _withScopeId = (n) => (pushScopeId("data-v-36d41da7"), n = n(), popScopeId(), n);
|
|
7
7
|
const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "left-border" }, null, -1));
|
|
8
8
|
const _hoisted_2 = { class: "content-wrapper" };
|
|
9
9
|
const _hoisted_3 = { class: "icon-container" };
|
|
@@ -17,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
17
17
|
},
|
|
18
18
|
iconSize: {
|
|
19
19
|
type: String,
|
|
20
|
-
default: "
|
|
20
|
+
default: "md"
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
setup(__props) {
|
|
@@ -53,6 +53,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
|
-
var Banner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
56
|
+
var Banner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-36d41da7"]]);
|
|
57
57
|
|
|
58
58
|
export { Banner as default };
|
|
@@ -51,7 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
51
51
|
onClick: cleared
|
|
52
52
|
}, [
|
|
53
53
|
createVNode(unref(Icon), {
|
|
54
|
-
name: "close",
|
|
54
|
+
name: "close-bold",
|
|
55
55
|
"font-size": "sm"
|
|
56
56
|
})
|
|
57
57
|
])) : createCommentVNode("", true)
|
|
@@ -59,6 +59,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
61
|
});
|
|
62
|
-
var Chip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
62
|
+
var Chip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-287fd6d1"]]);
|
|
63
63
|
|
|
64
64
|
export { Chip as default };
|
|
@@ -11,9 +11,10 @@ import { isObjectInArray } from '../../utils/array.vue.js';
|
|
|
11
11
|
import { objectsEqual } from '../../utils/object.vue.js';
|
|
12
12
|
import { useClamp, useVirtualList, onClickOutside } from '@vueuse/core';
|
|
13
13
|
import { Mode, Type, DropdownContext } from './DropdownContext.vue.js';
|
|
14
|
+
import { pxToRem } from '../../utils/style.vue.js';
|
|
14
15
|
/* empty css *//* empty css */
|
|
15
16
|
import "../../Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css";import "../../Dropdown.vue_vue_type_style_index_1_lang.css";
|
|
16
|
-
const _withScopeId = (n) => (pushScopeId("data-v-
|
|
17
|
+
const _withScopeId = (n) => (pushScopeId("data-v-12b53c10"), n = n(), popScopeId(), n);
|
|
17
18
|
const _hoisted_1 = ["tabindex"];
|
|
18
19
|
const _hoisted_2 = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"];
|
|
19
20
|
const _hoisted_3 = {
|
|
@@ -222,13 +223,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
222
223
|
);
|
|
223
224
|
const hasSubtitle = computed(() => optionsIds.value[0]?.hasSubtitle);
|
|
224
225
|
const isMulti = computed(() => api.mode === Mode.Multi);
|
|
226
|
+
const itemHeight = computed(
|
|
227
|
+
() => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
|
|
228
|
+
);
|
|
225
229
|
const {
|
|
226
230
|
list: virtualOptions,
|
|
227
231
|
containerProps,
|
|
228
232
|
wrapperProps,
|
|
229
233
|
scrollTo
|
|
230
234
|
} = useVirtualList(filteredOptions, {
|
|
231
|
-
itemHeight:
|
|
235
|
+
itemHeight: itemHeight.value
|
|
232
236
|
});
|
|
233
237
|
watch(
|
|
234
238
|
() => props.isOpen,
|
|
@@ -506,6 +510,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
506
510
|
}
|
|
507
511
|
}
|
|
508
512
|
};
|
|
513
|
+
const calculateTableHeight = computed(() => {
|
|
514
|
+
const MAX_NUMBER_OF_OPTIONS = 7;
|
|
515
|
+
const PADDING_PX = 8;
|
|
516
|
+
const optionsLength = virtualOptions.value.length;
|
|
517
|
+
const showSelectAllAddition = props.showSelectAll ? 1 : 0;
|
|
518
|
+
const isThereMoreOptionsThenMax = optionsLength > MAX_NUMBER_OF_OPTIONS;
|
|
519
|
+
const numberOfRows = optionsLength + showSelectAllAddition;
|
|
520
|
+
const numToCalculate = isThereMoreOptionsThenMax ? MAX_NUMBER_OF_OPTIONS + 0.5 : numberOfRows;
|
|
521
|
+
return pxToRem(numToCalculate * itemHeight.value + PADDING_PX);
|
|
522
|
+
});
|
|
509
523
|
expose({
|
|
510
524
|
selectItem: onSelect,
|
|
511
525
|
scrollTo
|
|
@@ -569,7 +583,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
569
583
|
}, [
|
|
570
584
|
renderSlot(_ctx.$slots, "input-list", { open: unref(open) }, void 0, true),
|
|
571
585
|
createElementVNode("div", mergeProps(unref(containerProps), {
|
|
572
|
-
class: ["list-container", { "list-container--multi": __props.multi }]
|
|
586
|
+
class: ["list-container", { "list-container--multi": __props.multi }],
|
|
587
|
+
style: { height: `${unref(calculateTableHeight)}rem` }
|
|
573
588
|
}), [
|
|
574
589
|
createElementVNode("ul", mergeProps(unref(wrapperProps), {
|
|
575
590
|
role: "listbox",
|
|
@@ -753,6 +768,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
753
768
|
};
|
|
754
769
|
}
|
|
755
770
|
});
|
|
756
|
-
var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
771
|
+
var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-12b53c10"]]);
|
|
757
772
|
|
|
758
773
|
export { Dropdown as default };
|
|
@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
19
19
|
skiddingOffset?: number;
|
|
20
20
|
hasSubtitle?: boolean;
|
|
21
21
|
keyField: string;
|
|
22
|
+
testId?: string;
|
|
22
23
|
}>, {
|
|
23
24
|
titleText: string;
|
|
24
25
|
loading: boolean;
|
|
@@ -35,6 +36,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
35
36
|
distanceOffset: number;
|
|
36
37
|
skiddingOffset: number;
|
|
37
38
|
hasSubtitle: boolean;
|
|
39
|
+
testId: string;
|
|
38
40
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
39
41
|
"update:modelValue": (value: unknown) => void;
|
|
40
42
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -57,6 +59,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
57
59
|
skiddingOffset?: number;
|
|
58
60
|
hasSubtitle?: boolean;
|
|
59
61
|
keyField: string;
|
|
62
|
+
testId?: string;
|
|
60
63
|
}>, {
|
|
61
64
|
titleText: string;
|
|
62
65
|
loading: boolean;
|
|
@@ -73,6 +76,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
73
76
|
distanceOffset: number;
|
|
74
77
|
skiddingOffset: number;
|
|
75
78
|
hasSubtitle: boolean;
|
|
79
|
+
testId: string;
|
|
76
80
|
}>>> & {
|
|
77
81
|
"onUpdate:modelValue"?: (value: unknown) => any;
|
|
78
82
|
}, {
|
|
@@ -91,6 +95,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
91
95
|
alwayesOpen: boolean;
|
|
92
96
|
distanceOffset: number;
|
|
93
97
|
skiddingOffset: number;
|
|
98
|
+
testId: string;
|
|
94
99
|
}>;
|
|
95
100
|
export default _default;
|
|
96
101
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -11,39 +11,42 @@ import EmptyState from '../emptyState/EmptyState.vue.js';
|
|
|
11
11
|
import { useToggle } from '../../composables/useToggle.vue.js';
|
|
12
12
|
import { IncludeExcludeContext } from './IncludeExcludeContext.vue.js';
|
|
13
13
|
import { onClickOutside, useClamp, useVirtualList } from '@vueuse/core';
|
|
14
|
+
import { IncludeExcludeTestIdModifiers } from 'e2e-test-ids';
|
|
14
15
|
/* empty css */
|
|
15
16
|
import "../../IncludeExclude.vue_vue_type_style_index_0_scoped_true_lang.css";
|
|
16
|
-
const _hoisted_1 =
|
|
17
|
-
const _hoisted_2 =
|
|
18
|
-
const _hoisted_3 = { class: "include-exclude-header
|
|
19
|
-
const _hoisted_4 = { class: "include-exclude-
|
|
20
|
-
const _hoisted_5 = {
|
|
17
|
+
const _hoisted_1 = ["data-testid"];
|
|
18
|
+
const _hoisted_2 = ["data-testid"];
|
|
19
|
+
const _hoisted_3 = { class: "include-exclude-header" };
|
|
20
|
+
const _hoisted_4 = { class: "include-exclude-header-left-section" };
|
|
21
|
+
const _hoisted_5 = { class: "include-exclude-header-right-section" };
|
|
22
|
+
const _hoisted_6 = { class: "include-exclude-container-wrapper" };
|
|
23
|
+
const _hoisted_7 = {
|
|
21
24
|
key: 0,
|
|
22
25
|
class: "include-exclude-container"
|
|
23
26
|
};
|
|
24
|
-
const
|
|
27
|
+
const _hoisted_8 = {
|
|
25
28
|
key: 1,
|
|
26
29
|
class: "include-exclude-container"
|
|
27
30
|
};
|
|
28
|
-
const
|
|
29
|
-
const
|
|
31
|
+
const _hoisted_9 = ["data-testid"];
|
|
32
|
+
const _hoisted_10 = {
|
|
30
33
|
key: 1,
|
|
31
34
|
class: "loader-wrapper"
|
|
32
35
|
};
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
36
|
+
const _hoisted_11 = ["aria-selected", "aria-disabled", "onClick"];
|
|
37
|
+
const _hoisted_12 = { key: 1 };
|
|
38
|
+
const _hoisted_13 = { class: "loader-wrapper" };
|
|
39
|
+
const _hoisted_14 = ["data-testid"];
|
|
40
|
+
const _hoisted_15 = {
|
|
38
41
|
key: 0,
|
|
39
42
|
class: "loader-wrapper"
|
|
40
43
|
};
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
const
|
|
46
|
-
const
|
|
44
|
+
const _hoisted_16 = { class: "include-exclude-selected-header-left" };
|
|
45
|
+
const _hoisted_17 = { class: "include-exclude-selected-header-right" };
|
|
46
|
+
const _hoisted_18 = { key: 1 };
|
|
47
|
+
const _hoisted_19 = { class: "loader-wrapper" };
|
|
48
|
+
const _hoisted_20 = { class: "include-exclude-footer" };
|
|
49
|
+
const _hoisted_21 = { class: "include-exclude-footer-buttons" };
|
|
47
50
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
48
51
|
__name: "IncludeExclude",
|
|
49
52
|
props: {
|
|
@@ -65,7 +68,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
65
68
|
distanceOffset: { default: 0 },
|
|
66
69
|
skiddingOffset: { default: 0 },
|
|
67
70
|
hasSubtitle: { type: Boolean, default: false },
|
|
68
|
-
keyField: null
|
|
71
|
+
keyField: null,
|
|
72
|
+
testId: { default: "" }
|
|
69
73
|
},
|
|
70
74
|
emits: ["update:modelValue"],
|
|
71
75
|
setup(__props, { emit }) {
|
|
@@ -301,6 +305,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
301
305
|
ref: buttonRef,
|
|
302
306
|
class: "include-exclude-trigger",
|
|
303
307
|
tabindex: "0",
|
|
308
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).TRIGGER}`,
|
|
304
309
|
onClick: triggerAction,
|
|
305
310
|
onKeydown: onButtonKeydown
|
|
306
311
|
}, [
|
|
@@ -310,16 +315,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
310
315
|
ref: buttonRef
|
|
311
316
|
}, "Default trigger", 512)
|
|
312
317
|
], true)
|
|
313
|
-
],
|
|
318
|
+
], 40, _hoisted_1)
|
|
314
319
|
]),
|
|
315
320
|
content: withCtx(() => [
|
|
316
321
|
createElementVNode("div", {
|
|
317
322
|
ref_key: "popoverWrapperRef",
|
|
318
323
|
ref: popoverWrapperRef,
|
|
319
|
-
class: "include-exclude-content"
|
|
324
|
+
class: "include-exclude-content",
|
|
325
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).CONTENT}`
|
|
320
326
|
}, [
|
|
321
|
-
createElementVNode("div",
|
|
322
|
-
createElementVNode("div",
|
|
327
|
+
createElementVNode("div", _hoisted_3, [
|
|
328
|
+
createElementVNode("div", _hoisted_4, [
|
|
323
329
|
renderSlot(_ctx.$slots, "header-left-section", {}, () => [
|
|
324
330
|
__props.titleText ? (openBlock(), createBlock(unref(Text), {
|
|
325
331
|
key: 0,
|
|
@@ -334,7 +340,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
334
340
|
})) : createCommentVNode("", true)
|
|
335
341
|
], true)
|
|
336
342
|
]),
|
|
337
|
-
createElementVNode("div",
|
|
343
|
+
createElementVNode("div", _hoisted_5, [
|
|
338
344
|
renderSlot(_ctx.$slots, "header-right-section", {}, () => [
|
|
339
345
|
createVNode(unref(Search), {
|
|
340
346
|
ref_key: "searchRef",
|
|
@@ -344,18 +350,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
344
350
|
class: "include-exclude-header-right-section-search-input",
|
|
345
351
|
variant: "transparent",
|
|
346
352
|
placeholder: __props.searchPlaceholder,
|
|
347
|
-
disabled: __props.loading
|
|
348
|
-
|
|
353
|
+
disabled: __props.loading,
|
|
354
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).SEARCH}`
|
|
355
|
+
}, null, 8, ["modelValue", "placeholder", "disabled", "data-testid"])
|
|
349
356
|
], true)
|
|
350
357
|
])
|
|
351
358
|
]),
|
|
352
|
-
createElementVNode("div",
|
|
359
|
+
createElementVNode("div", _hoisted_6, [
|
|
353
360
|
createVNode(Transition, {
|
|
354
361
|
name: "switch",
|
|
355
362
|
mode: "out-in"
|
|
356
363
|
}, {
|
|
357
364
|
default: withCtx(() => [
|
|
358
|
-
!unref(filteredOptions)?.length && !__props.loading ? (openBlock(), createElementBlock("div",
|
|
365
|
+
!unref(filteredOptions)?.length && !__props.loading ? (openBlock(), createElementBlock("div", _hoisted_7, [
|
|
359
366
|
renderSlot(_ctx.$slots, "no-result", {}, () => [
|
|
360
367
|
createVNode(unref(EmptyState), {
|
|
361
368
|
size: "lg",
|
|
@@ -365,8 +372,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
365
372
|
"icon-height": 72
|
|
366
373
|
})
|
|
367
374
|
], true)
|
|
368
|
-
])) : (openBlock(), createElementBlock("div",
|
|
369
|
-
createElementVNode("div",
|
|
375
|
+
])) : (openBlock(), createElementBlock("div", _hoisted_8, [
|
|
376
|
+
createElementVNode("div", {
|
|
377
|
+
class: "include-exclude-list-wrapper",
|
|
378
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).LIST}`
|
|
379
|
+
}, [
|
|
370
380
|
createElementVNode("div", {
|
|
371
381
|
class: normalizeClass(["include-exclude-list-header", {
|
|
372
382
|
"include-exclude-list-header-loading": __props.loading,
|
|
@@ -380,9 +390,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
380
390
|
"is-indeterminate": unref(selectedOption)?.length > 0 && !unref(isAllFilteredSelected),
|
|
381
391
|
disabled: !unref(filteredOptions)?.length,
|
|
382
392
|
label: "Select all",
|
|
393
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).SELECT_ALL}`,
|
|
383
394
|
onClick: toggleSelectAll
|
|
384
|
-
}, null, 8, ["is-checked", "is-indeterminate", "disabled"])) : createCommentVNode("", true),
|
|
385
|
-
__props.loading ? (openBlock(), createElementBlock("div",
|
|
395
|
+
}, null, 8, ["is-checked", "is-indeterminate", "disabled", "data-testid"])) : createCommentVNode("", true),
|
|
396
|
+
__props.loading ? (openBlock(), createElementBlock("div", _hoisted_10, [
|
|
386
397
|
createVNode(unref(Skeleton), {
|
|
387
398
|
class: "dot-skeleton",
|
|
388
399
|
round: ""
|
|
@@ -409,16 +420,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
409
420
|
selected: toRaw(unref(selectedOption)) === data,
|
|
410
421
|
active: toRaw(unref(activeIndex)) === index
|
|
411
422
|
}, void 0, true)
|
|
412
|
-
], 8,
|
|
423
|
+
], 8, _hoisted_11);
|
|
413
424
|
}), 128))
|
|
414
425
|
], 16)) : createCommentVNode("", true),
|
|
415
|
-
__props.loading ? (openBlock(), createElementBlock("ul",
|
|
426
|
+
__props.loading ? (openBlock(), createElementBlock("ul", _hoisted_12, [
|
|
416
427
|
(openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
|
|
417
428
|
return createElementVNode("li", {
|
|
418
429
|
key: n,
|
|
419
430
|
class: "include-exclude-list-item-skeleton"
|
|
420
431
|
}, [
|
|
421
|
-
createElementVNode("div",
|
|
432
|
+
createElementVNode("div", _hoisted_13, [
|
|
422
433
|
createVNode(unref(Skeleton), {
|
|
423
434
|
class: "dot-skeleton",
|
|
424
435
|
round: ""
|
|
@@ -429,18 +440,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
429
440
|
}), 64))
|
|
430
441
|
])) : createCommentVNode("", true)
|
|
431
442
|
], 16)
|
|
432
|
-
]),
|
|
433
|
-
createElementVNode("div",
|
|
443
|
+
], 8, _hoisted_9),
|
|
444
|
+
createElementVNode("div", {
|
|
445
|
+
class: "include-exclude-selected-wrapper",
|
|
446
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).LIST_SELECTED}`
|
|
447
|
+
}, [
|
|
434
448
|
createElementVNode("div", {
|
|
435
449
|
class: normalizeClass(["include-exclude-selected-header", {
|
|
436
450
|
"include-exclude-list-selected-header-loading": __props.loading,
|
|
437
451
|
"include-exclude-list-header-loaded": !__props.loading
|
|
438
452
|
}])
|
|
439
453
|
}, [
|
|
440
|
-
__props.loading ? (openBlock(), createElementBlock("div",
|
|
454
|
+
__props.loading ? (openBlock(), createElementBlock("div", _hoisted_15, [
|
|
441
455
|
createVNode(unref(Skeleton), { round: "" })
|
|
442
456
|
])) : createCommentVNode("", true),
|
|
443
|
-
createElementVNode("div",
|
|
457
|
+
createElementVNode("div", _hoisted_16, [
|
|
444
458
|
!__props.loading ? (openBlock(), createBlock(unref(Text), {
|
|
445
459
|
key: 0,
|
|
446
460
|
class: "include-exclude-selected-header-left-selected",
|
|
@@ -452,20 +466,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
452
466
|
_: 1
|
|
453
467
|
})) : createCommentVNode("", true)
|
|
454
468
|
]),
|
|
455
|
-
createElementVNode("div",
|
|
469
|
+
createElementVNode("div", _hoisted_17, [
|
|
456
470
|
unref(selectedOption)?.length && !__props.loading && __props.showClearAll ? (openBlock(), createBlock(unref(Button), {
|
|
457
471
|
key: 0,
|
|
458
472
|
variant: "link",
|
|
459
473
|
theme: "third",
|
|
460
474
|
size: "md",
|
|
461
475
|
strong: false,
|
|
476
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).CLEAR_ALL}`,
|
|
462
477
|
onClick: clearSelections
|
|
463
478
|
}, {
|
|
464
479
|
default: withCtx(() => [
|
|
465
480
|
createTextVNode("Clear all")
|
|
466
481
|
]),
|
|
467
482
|
_: 1
|
|
468
|
-
})) : createCommentVNode("", true)
|
|
483
|
+
}, 8, ["data-testid"])) : createCommentVNode("", true)
|
|
469
484
|
])
|
|
470
485
|
], 2),
|
|
471
486
|
createElementVNode("div", mergeProps({ class: "include-exclude-selected-list" }, unref(containerPropsSelected)), [
|
|
@@ -483,28 +498,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
483
498
|
]);
|
|
484
499
|
}), 128))
|
|
485
500
|
], 16)) : createCommentVNode("", true),
|
|
486
|
-
__props.loading ? (openBlock(), createElementBlock("ul",
|
|
501
|
+
__props.loading ? (openBlock(), createElementBlock("ul", _hoisted_18, [
|
|
487
502
|
(openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
|
|
488
503
|
return createElementVNode("li", {
|
|
489
504
|
key: n,
|
|
490
505
|
class: "include-exclude-list-item-skeleton"
|
|
491
506
|
}, [
|
|
492
|
-
createElementVNode("div",
|
|
507
|
+
createElementVNode("div", _hoisted_19, [
|
|
493
508
|
createVNode(unref(Skeleton), { round: "" })
|
|
494
509
|
])
|
|
495
510
|
]);
|
|
496
511
|
}), 64))
|
|
497
512
|
])) : createCommentVNode("", true)
|
|
498
513
|
], 16)
|
|
499
|
-
])
|
|
514
|
+
], 8, _hoisted_14)
|
|
500
515
|
]))
|
|
501
516
|
]),
|
|
502
517
|
_: 3
|
|
503
518
|
})
|
|
504
519
|
]),
|
|
505
520
|
renderSlot(_ctx.$slots, "footer", {}, () => [
|
|
506
|
-
createElementVNode("div",
|
|
507
|
-
createElementVNode("div",
|
|
521
|
+
createElementVNode("div", _hoisted_20, [
|
|
522
|
+
createElementVNode("div", _hoisted_21, [
|
|
508
523
|
createVNode(unref(Button), {
|
|
509
524
|
ref_key: "cancel",
|
|
510
525
|
ref: cancel,
|
|
@@ -512,36 +527,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
512
527
|
variant: "border",
|
|
513
528
|
theme: "third",
|
|
514
529
|
text: "Cancel",
|
|
530
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).ACTION_CANCEL}`,
|
|
515
531
|
onClick: onCancel
|
|
516
532
|
}, {
|
|
517
533
|
default: withCtx(() => [
|
|
518
534
|
createTextVNode("Cancel")
|
|
519
535
|
]),
|
|
520
536
|
_: 1
|
|
521
|
-
},
|
|
537
|
+
}, 8, ["data-testid"]),
|
|
522
538
|
createVNode(unref(Button), {
|
|
523
539
|
ref_key: "apply",
|
|
524
540
|
ref: apply,
|
|
525
541
|
size: "sm",
|
|
526
542
|
theme: "primary",
|
|
527
543
|
text: "Apply",
|
|
544
|
+
"data-testid": `${__props.testId}-${unref(IncludeExcludeTestIdModifiers).ACTION_APPLY}`,
|
|
528
545
|
onClick: onApply
|
|
529
546
|
}, {
|
|
530
547
|
default: withCtx(() => [
|
|
531
548
|
createTextVNode("Apply")
|
|
532
549
|
]),
|
|
533
550
|
_: 1
|
|
534
|
-
},
|
|
551
|
+
}, 8, ["data-testid"])
|
|
535
552
|
])
|
|
536
553
|
])
|
|
537
554
|
], true)
|
|
538
|
-
],
|
|
555
|
+
], 8, _hoisted_2)
|
|
539
556
|
]),
|
|
540
557
|
_: 3
|
|
541
558
|
}, 8, ["distance", "skidding", "open", "placement"]);
|
|
542
559
|
};
|
|
543
560
|
}
|
|
544
561
|
});
|
|
545
|
-
var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
562
|
+
var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-07db12f0"]]);
|
|
546
563
|
|
|
547
564
|
export { IncludeExclude as default };
|
|
@@ -90,6 +90,11 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
|
|
|
90
90
|
} & {
|
|
91
91
|
default: number;
|
|
92
92
|
};
|
|
93
|
+
testId: {
|
|
94
|
+
type: import("vue").PropType<string>;
|
|
95
|
+
} & {
|
|
96
|
+
default: string;
|
|
97
|
+
};
|
|
93
98
|
keyField: {
|
|
94
99
|
type: import("vue").PropType<string>;
|
|
95
100
|
required: true;
|
|
@@ -183,6 +188,11 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
|
|
|
183
188
|
} & {
|
|
184
189
|
default: number;
|
|
185
190
|
};
|
|
191
|
+
testId: {
|
|
192
|
+
type: import("vue").PropType<string>;
|
|
193
|
+
} & {
|
|
194
|
+
default: string;
|
|
195
|
+
};
|
|
186
196
|
keyField: {
|
|
187
197
|
type: import("vue").PropType<string>;
|
|
188
198
|
required: true;
|
|
@@ -205,6 +215,7 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
|
|
|
205
215
|
alwayesOpen: boolean;
|
|
206
216
|
distanceOffset: number;
|
|
207
217
|
skiddingOffset: number;
|
|
218
|
+
testId: string;
|
|
208
219
|
}> | import("vue").DefineComponent<{
|
|
209
220
|
option: {
|
|
210
221
|
type: import("vue").PropType<unknown>;
|
|
@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
15
15
|
step?: number;
|
|
16
16
|
hoverHelpText?: string;
|
|
17
17
|
hoverHelpTextPlacement?: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
|
18
|
+
onlyDigits?: boolean;
|
|
18
19
|
}>, {
|
|
19
20
|
modelValue: string;
|
|
20
21
|
placeholder: string;
|
|
@@ -32,6 +33,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
32
33
|
step: number;
|
|
33
34
|
hoverHelpText: string;
|
|
34
35
|
hoverHelpTextPlacement: string;
|
|
36
|
+
onlyDigits: boolean;
|
|
35
37
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
36
38
|
"update:modelValue": (value: string | number) => void;
|
|
37
39
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -51,6 +53,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
51
53
|
step?: number;
|
|
52
54
|
hoverHelpText?: string;
|
|
53
55
|
hoverHelpTextPlacement?: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
|
56
|
+
onlyDigits?: boolean;
|
|
54
57
|
}>, {
|
|
55
58
|
modelValue: string;
|
|
56
59
|
placeholder: string;
|
|
@@ -68,6 +71,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
68
71
|
step: number;
|
|
69
72
|
hoverHelpText: string;
|
|
70
73
|
hoverHelpTextPlacement: string;
|
|
74
|
+
onlyDigits: boolean;
|
|
71
75
|
}>>> & {
|
|
72
76
|
"onUpdate:modelValue"?: (value: string | number) => any;
|
|
73
77
|
}, {
|
|
@@ -87,6 +91,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
87
91
|
step: number;
|
|
88
92
|
hoverHelpText: string;
|
|
89
93
|
hoverHelpTextPlacement: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
|
94
|
+
onlyDigits: boolean;
|
|
90
95
|
}>;
|
|
91
96
|
export default _default;
|
|
92
97
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { defineComponent, ref, computed, onMounted, nextTick, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, createElementVNode, renderSlot, mergeProps, withKeys, withModifiers } from 'vue';
|
|
2
|
+
import Icon from '../icon/Icon.vue.js';
|
|
2
3
|
/* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
3
4
|
import Text from '../typography/Text.vue.js';
|
|
4
|
-
import Icon from '../icon/Icon.vue.js';
|
|
5
|
-
import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
|
|
6
5
|
/* empty css *//* empty css */import IconButton from '../button/IconButton.vue.js';
|
|
6
|
+
import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
|
|
7
7
|
/* empty css */import { useEditableContext } from '../table-cells/EditableContext.vue.js';
|
|
8
8
|
import '@vueuse/core';
|
|
9
|
-
/* empty css
|
|
9
|
+
/* empty css */import { REGEX_NUMBER_INPUT } from '../../consts/regex.vue.js';
|
|
10
|
+
/* empty css */
|
|
10
11
|
import "../../Input.vue_vue_type_style_index_0_scoped_true_lang.css";
|
|
11
12
|
const _hoisted_1 = { class: "info-icon-wrapper" };
|
|
12
13
|
const _hoisted_2 = {
|
|
@@ -46,7 +47,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
46
47
|
hideNumberArrows: { type: Boolean, default: false },
|
|
47
48
|
step: { default: 1 },
|
|
48
49
|
hoverHelpText: { default: "" },
|
|
49
|
-
hoverHelpTextPlacement: { default: "top" }
|
|
50
|
+
hoverHelpTextPlacement: { default: "top" },
|
|
51
|
+
onlyDigits: { type: Boolean, default: false }
|
|
50
52
|
},
|
|
51
53
|
emits: ["update:modelValue"],
|
|
52
54
|
setup(__props, { emit }) {
|
|
@@ -92,6 +94,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
92
94
|
api.onChange?.(event.target.value);
|
|
93
95
|
emit("update:modelValue", event.target.value);
|
|
94
96
|
};
|
|
97
|
+
const DECIMAL_POINT = ".";
|
|
98
|
+
const handleKeypress = (event) => {
|
|
99
|
+
if (props.onlyDigits) {
|
|
100
|
+
if (!event.key.match(REGEX_NUMBER_INPUT)) {
|
|
101
|
+
event.preventDefault();
|
|
102
|
+
} else if (event.key === DECIMAL_POINT && props.modelValue.toString().includes(DECIMAL_POINT)) {
|
|
103
|
+
event.preventDefault();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
};
|
|
95
107
|
return (_ctx, _cache) => {
|
|
96
108
|
return openBlock(), createElementBlock("div", {
|
|
97
109
|
class: normalizeClass({
|
|
@@ -169,7 +181,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
169
181
|
onInput: handleInput,
|
|
170
182
|
onFocus: _cache[0] || (_cache[0] = ($event) => isFocused.value = true),
|
|
171
183
|
onBlur: _cache[1] || (_cache[1] = ($event) => isFocused.value = false),
|
|
172
|
-
onKeyup: withKeys(withModifiers(onEnter, ["prevent"]), ["enter"])
|
|
184
|
+
onKeyup: withKeys(withModifiers(onEnter, ["prevent"]), ["enter"]),
|
|
185
|
+
onKeypress: handleKeypress
|
|
173
186
|
}), null, 16, _hoisted_3),
|
|
174
187
|
_ctx.$slots["iconAfter"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
175
188
|
renderSlot(_ctx.$slots, "iconAfter", {}, void 0, true)
|
|
@@ -228,6 +241,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
228
241
|
};
|
|
229
242
|
}
|
|
230
243
|
});
|
|
231
|
-
var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
244
|
+
var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-487006af"]]);
|
|
232
245
|
|
|
233
246
|
export { Input as default };
|
|
@@ -83,6 +83,11 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
|
|
|
83
83
|
} & {
|
|
84
84
|
default: string;
|
|
85
85
|
};
|
|
86
|
+
onlyDigits: {
|
|
87
|
+
type: import("vue").PropType<boolean>;
|
|
88
|
+
} & {
|
|
89
|
+
default: boolean;
|
|
90
|
+
};
|
|
86
91
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
87
92
|
"update:modelValue": (value: string | number) => void;
|
|
88
93
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
@@ -166,6 +171,11 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
|
|
|
166
171
|
} & {
|
|
167
172
|
default: string;
|
|
168
173
|
};
|
|
174
|
+
onlyDigits: {
|
|
175
|
+
type: import("vue").PropType<boolean>;
|
|
176
|
+
} & {
|
|
177
|
+
default: boolean;
|
|
178
|
+
};
|
|
169
179
|
}>> & {
|
|
170
180
|
"onUpdate:modelValue"?: (value: string | number) => any;
|
|
171
181
|
}, {
|
|
@@ -185,6 +195,7 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
|
|
|
185
195
|
step: number;
|
|
186
196
|
hoverHelpText: string;
|
|
187
197
|
hoverHelpTextPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
|
|
198
|
+
onlyDigits: boolean;
|
|
188
199
|
}> | import("vue").DefineComponent<{
|
|
189
200
|
ref: {
|
|
190
201
|
type: import("vue").PropType<import("vue").VNodeRef>;
|
|
@@ -296,6 +307,9 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
|
|
|
296
307
|
hoverHelpTextPlacement: {
|
|
297
308
|
type: import("vue").PropType<"top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
|
|
298
309
|
};
|
|
310
|
+
onlyDigits: {
|
|
311
|
+
type: import("vue").PropType<boolean>;
|
|
312
|
+
};
|
|
299
313
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
300
314
|
"update:modelValue": (value: number) => void;
|
|
301
315
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
@@ -409,6 +423,9 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
|
|
|
409
423
|
hoverHelpTextPlacement: {
|
|
410
424
|
type: import("vue").PropType<"top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
|
|
411
425
|
};
|
|
426
|
+
onlyDigits: {
|
|
427
|
+
type: import("vue").PropType<boolean>;
|
|
428
|
+
};
|
|
412
429
|
}>> & {
|
|
413
430
|
"onUpdate:modelValue"?: (value: number) => any;
|
|
414
431
|
}, {}>)[];
|
|
@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
5
5
|
errorText?: string;
|
|
6
6
|
helperText?: string;
|
|
7
7
|
isDisabled?: boolean;
|
|
8
|
+
isLoading?: boolean;
|
|
8
9
|
color?: string;
|
|
9
10
|
}>, {
|
|
10
11
|
activeText: any;
|
|
@@ -12,6 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
12
13
|
errorText: any;
|
|
13
14
|
helperText: any;
|
|
14
15
|
isDisabled: boolean;
|
|
16
|
+
isLoading: boolean;
|
|
15
17
|
color: string;
|
|
16
18
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
17
19
|
"update:modelValue": (value: boolean) => void;
|
|
@@ -22,6 +24,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
22
24
|
errorText?: string;
|
|
23
25
|
helperText?: string;
|
|
24
26
|
isDisabled?: boolean;
|
|
27
|
+
isLoading?: boolean;
|
|
25
28
|
color?: string;
|
|
26
29
|
}>, {
|
|
27
30
|
activeText: any;
|
|
@@ -29,12 +32,14 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
29
32
|
errorText: any;
|
|
30
33
|
helperText: any;
|
|
31
34
|
isDisabled: boolean;
|
|
35
|
+
isLoading: boolean;
|
|
32
36
|
color: string;
|
|
33
37
|
}>>> & {
|
|
34
38
|
"onUpdate:modelValue"?: (value: boolean) => any;
|
|
35
39
|
}, {
|
|
36
40
|
helperText: string;
|
|
37
41
|
color: string;
|
|
42
|
+
isLoading: boolean;
|
|
38
43
|
errorText: string;
|
|
39
44
|
activeText: string;
|
|
40
45
|
inactiveText: string;
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import { defineComponent, useCssVars, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock
|
|
1
|
+
import { defineComponent, useCssVars, openBlock, createElementBlock, createElementVNode, normalizeClass, createCommentVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock } from 'vue';
|
|
2
2
|
/* empty css */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
|
|
3
3
|
import Text from '../typography/Text.vue.js';
|
|
4
4
|
import { COLORS } from '../../consts/colors.vue.js';
|
|
5
5
|
/* empty css */
|
|
6
6
|
import "../../Toggle.vue_vue_type_style_index_0_scoped_true_lang.css";
|
|
7
|
-
const _withScopeId = (n) => (pushScopeId("data-v-6627e5c5"), n = n(), popScopeId(), n);
|
|
8
7
|
const _hoisted_1 = { class: "toggle-wrap" };
|
|
9
|
-
const _hoisted_2 =
|
|
10
|
-
const _hoisted_3 = [
|
|
11
|
-
_hoisted_2
|
|
12
|
-
];
|
|
13
|
-
const _hoisted_4 = ["disabled", "checked"];
|
|
8
|
+
const _hoisted_2 = { class: "toggle-head" };
|
|
9
|
+
const _hoisted_3 = ["disabled", "checked"];
|
|
14
10
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
15
11
|
__name: "Toggle",
|
|
16
12
|
props: {
|
|
@@ -20,13 +16,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
20
16
|
errorText: { default: void 0 },
|
|
21
17
|
helperText: { default: void 0 },
|
|
22
18
|
isDisabled: { type: Boolean, default: false },
|
|
19
|
+
isLoading: { type: Boolean, default: false },
|
|
23
20
|
color: { default: COLORS.PRIMARY_500 }
|
|
24
21
|
},
|
|
25
22
|
emits: ["update:modelValue"],
|
|
26
23
|
setup(__props, { emit }) {
|
|
27
24
|
const props = __props;
|
|
28
25
|
useCssVars((_ctx) => ({
|
|
29
|
-
"
|
|
26
|
+
"7a6f4588": __props.color
|
|
30
27
|
}));
|
|
31
28
|
const toggleValue = () => {
|
|
32
29
|
if (props.isDisabled)
|
|
@@ -39,13 +36,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
39
36
|
createElementVNode("div", {
|
|
40
37
|
class: normalizeClass(["toggle-body", { "toggle-active": __props.modelValue, "toggle-disabled": __props.isDisabled }]),
|
|
41
38
|
onClick: toggleValue
|
|
42
|
-
},
|
|
39
|
+
}, [
|
|
40
|
+
createElementVNode("div", _hoisted_2, [
|
|
41
|
+
__props.isLoading ? (openBlock(), createElementBlock("span", {
|
|
42
|
+
key: 0,
|
|
43
|
+
class: normalizeClass(["loader", {
|
|
44
|
+
"loader-active": __props.modelValue
|
|
45
|
+
}])
|
|
46
|
+
}, null, 2)) : createCommentVNode("", true)
|
|
47
|
+
])
|
|
48
|
+
], 2),
|
|
43
49
|
createElementVNode("input", {
|
|
44
50
|
type: "checkbox",
|
|
45
51
|
disabled: __props.isDisabled,
|
|
46
52
|
checked: __props.modelValue,
|
|
47
53
|
class: "checkbox"
|
|
48
|
-
}, null, 8,
|
|
54
|
+
}, null, 8, _hoisted_3),
|
|
49
55
|
createVNode(unref(Text), {
|
|
50
56
|
size: "sm",
|
|
51
57
|
"is-truncated": "",
|
|
@@ -83,6 +89,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
83
89
|
};
|
|
84
90
|
}
|
|
85
91
|
});
|
|
86
|
-
var Toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
92
|
+
var Toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27275176"]]);
|
|
87
93
|
|
|
88
94
|
export { Toggle as default };
|
|
@@ -13,6 +13,11 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
|
|
|
13
13
|
} & {
|
|
14
14
|
default: string;
|
|
15
15
|
};
|
|
16
|
+
isLoading: {
|
|
17
|
+
type: import("vue").PropType<boolean>;
|
|
18
|
+
} & {
|
|
19
|
+
default: boolean;
|
|
20
|
+
};
|
|
16
21
|
errorText: {
|
|
17
22
|
type: import("vue").PropType<string>;
|
|
18
23
|
} & {
|
|
@@ -50,6 +55,11 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
|
|
|
50
55
|
} & {
|
|
51
56
|
default: string;
|
|
52
57
|
};
|
|
58
|
+
isLoading: {
|
|
59
|
+
type: import("vue").PropType<boolean>;
|
|
60
|
+
} & {
|
|
61
|
+
default: boolean;
|
|
62
|
+
};
|
|
53
63
|
errorText: {
|
|
54
64
|
type: import("vue").PropType<string>;
|
|
55
65
|
} & {
|
|
@@ -75,6 +85,7 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
|
|
|
75
85
|
}, {
|
|
76
86
|
helperText: string;
|
|
77
87
|
color: string;
|
|
88
|
+
isLoading: boolean;
|
|
78
89
|
errorText: string;
|
|
79
90
|
activeText: string;
|
|
80
91
|
inactiveText: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const REGEX_NUMBER_INPUT: RegExp;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PX_TO_REM_RATIO: number;
|
package/index.vue.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './Label.vue_vue_type_style_index_0_scoped_true_lang.css';
|
|
2
2
|
export { AppTriggerTypes } from './components/appTrigger/index.vue.js';
|
|
3
3
|
export { AutocompleteDropdownTypes } from './components/autocompleteDropdown/index.vue.js';
|
|
4
4
|
export { MenuItemTypes } from './components/menuItem/index.vue.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ironsource/shared-ui",
|
|
3
|
-
"version": "1.4.2-rc.
|
|
3
|
+
"version": "1.4.2-rc.12",
|
|
4
4
|
"engines": {
|
|
5
5
|
"npm": ">=7.0.0",
|
|
6
6
|
"node": ">=16.0.0"
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
"date-fns": "^2.29.1",
|
|
49
49
|
"floating-vue": "2.0.0-beta.20",
|
|
50
50
|
"focus-trap": "^6.9.4",
|
|
51
|
-
"vue": "^3.2.31"
|
|
51
|
+
"vue": "^3.2.31",
|
|
52
|
+
"e2e-test-ids": "file:./e2e/shared-test-ids/shared-ids.tar.gz"
|
|
52
53
|
},
|
|
53
54
|
"peerDependencies": {
|
|
54
55
|
"@vueuse/core": "^8.7.5",
|
|
@@ -62,8 +63,6 @@
|
|
|
62
63
|
"@babel/core": "7.17.9",
|
|
63
64
|
"@babel/node": "7.16.8",
|
|
64
65
|
"@commitlint/cli": "^17.0.3",
|
|
65
|
-
"i": "^0.3.7",
|
|
66
|
-
"npm": "^8.19.2",
|
|
67
66
|
"@commitlint/config-conventional": "^17.0.3",
|
|
68
67
|
"@figus/cli": "^2.0.8",
|
|
69
68
|
"@mdx-js/react": "^2.1.2",
|
|
@@ -103,6 +102,7 @@
|
|
|
103
102
|
"happy-dom": "^2.49.0",
|
|
104
103
|
"http-server": "^14.1.1",
|
|
105
104
|
"husky": "^8.0.1",
|
|
105
|
+
"i": "^0.3.7",
|
|
106
106
|
"jest": "^27.5.1",
|
|
107
107
|
"jest-image-snapshot": "^6.1.0",
|
|
108
108
|
"jest-puppeteer": "^6.2.0",
|
|
@@ -110,6 +110,7 @@
|
|
|
110
110
|
"lodash.kebabcase": "^4.1.1",
|
|
111
111
|
"mustache": "^4.2.0",
|
|
112
112
|
"nodejs-file-downloader": "^4.10.1",
|
|
113
|
+
"npm": "^8.19.2",
|
|
113
114
|
"postcss": "^8.4.14",
|
|
114
115
|
"prettier": "^2.6.0",
|
|
115
116
|
"prismjs": "^1.29.0",
|
package/utils/style.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const pxToRem: (value: number) => number;
|