@dialpad/dialtone-vue 2.201.0-next.2 → 2.201.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/component-documentation.json +1 -1
- package/dist/dialtone-vue.cjs +1 -1
- package/dist/dialtone-vue.js +260 -262
- package/dist/dialtone-vue.js.map +1 -1
- package/dist/lib/avatar/avatar.cjs +1 -1
- package/dist/lib/avatar/avatar.cjs.map +1 -1
- package/dist/lib/avatar/avatar.js +13 -10
- package/dist/lib/avatar/avatar.js.map +1 -1
- package/dist/lib/pagination/pagination.cjs +1 -1
- package/dist/lib/pagination/pagination.cjs.map +1 -1
- package/dist/lib/pagination/pagination.js +8 -8
- package/dist/lib/pagination/pagination.js.map +1 -1
- package/dist/lib/popover/popover.cjs +1 -1
- package/dist/lib/popover/popover.cjs.map +1 -1
- package/dist/lib/popover/popover.js +31 -13
- package/dist/lib/popover/popover.js.map +1 -1
- package/dist/lib/popover/tippy-utils.cjs +1 -1
- package/dist/lib/popover/tippy-utils.cjs.map +1 -1
- package/dist/lib/popover/tippy-utils.js +39 -35
- package/dist/lib/popover/tippy-utils.js.map +1 -1
- package/dist/lib/split-button/split-button-alpha.cjs +1 -1
- package/dist/lib/split-button/split-button-alpha.cjs.map +1 -1
- package/dist/lib/split-button/split-button-alpha.js +16 -8
- package/dist/lib/split-button/split-button-alpha.js.map +1 -1
- package/dist/lib/split-button/split-button-omega.cjs +1 -1
- package/dist/lib/split-button/split-button-omega.cjs.map +1 -1
- package/dist/lib/split-button/split-button-omega.js +10 -10
- package/dist/lib/split-button/split-button-omega.js.map +1 -1
- package/dist/lib/tooltip/tooltip.cjs +2 -2
- package/dist/lib/tooltip/tooltip.cjs.map +1 -1
- package/dist/lib/tooltip/tooltip.js +7 -7
- package/dist/lib/tooltip/tooltip.js.map +1 -1
- package/dist/lib/tooltip-directive/tooltip.cjs +1 -1
- package/dist/lib/tooltip-directive/tooltip.cjs.map +1 -1
- package/dist/lib/tooltip-directive/tooltip.js +17 -16
- package/dist/lib/tooltip-directive/tooltip.js.map +1 -1
- package/dist/localization/en-US.cjs +0 -2
- package/dist/localization/en-US.cjs.map +1 -1
- package/dist/localization/en-US.js +0 -2
- package/dist/localization/en-US.js.map +1 -1
- package/dist/types/components/pagination/pagination.vue.d.ts.map +1 -1
- package/dist/types/components/popover/popover.vue.d.ts.map +1 -1
- package/dist/types/components/popover/tippy_utils.d.ts.map +1 -1
- package/dist/types/components/rich_text_editor/rich_text_editor.vue.d.ts +1 -1
- package/dist/types/components/split_button/split_button-alpha.vue.d.ts +6 -1
- package/dist/types/components/split_button/split_button.vue.d.ts +2 -2
- package/dist/types/directives/tooltip_directive/tooltip.d.ts.map +1 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts +1 -1
- package/package.json +5 -5
- package/dist/lib/filter-pill/filter-pill.cjs +0 -2
- package/dist/lib/filter-pill/filter-pill.cjs.map +0 -1
- package/dist/lib/filter-pill/filter-pill.js +0 -245
- package/dist/lib/filter-pill/filter-pill.js.map +0 -1
- package/dist/lib/filter-pill/index.cjs +0 -2
- package/dist/lib/filter-pill/index.cjs.map +0 -1
- package/dist/lib/filter-pill/index.js +0 -5
- package/dist/lib/filter-pill/index.js.map +0 -1
- package/dist/types/components/filter_pill/filter_pill.vue.d.ts +0 -151
- package/dist/types/components/filter_pill/filter_pill.vue.d.ts.map +0 -1
- package/dist/types/components/filter_pill/index.d.ts +0 -2
- package/dist/types/components/filter_pill/index.d.ts.map +0 -1
|
@@ -1,245 +0,0 @@
|
|
|
1
|
-
import { DtIconChevronDown as o, DtIconClose as n } from "@dialpad/dialtone-icons/vue2";
|
|
2
|
-
import { DialtoneLocalization as s } from "../../localization/index.js";
|
|
3
|
-
import { n as p } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
|
|
4
|
-
import c from "../button/button.js";
|
|
5
|
-
import d from "../popover/popover.js";
|
|
6
|
-
import u from "../checkbox/checkbox.js";
|
|
7
|
-
import f from "../checkbox-group/checkbox-group.js";
|
|
8
|
-
import { BUTTON_SIZE_MODIFIERS as m } from "../button/button-constants.js";
|
|
9
|
-
import { POPOVER_PADDING_CLASSES as v, POPOVER_APPEND_TO_VALUES as _ } from "../popover/popover-constants.js";
|
|
10
|
-
const h = {
|
|
11
|
-
name: "DtFilterPill",
|
|
12
|
-
components: {
|
|
13
|
-
DtCheckboxGroup: f,
|
|
14
|
-
DtCheckbox: u,
|
|
15
|
-
DtPopover: d,
|
|
16
|
-
DtButton: c,
|
|
17
|
-
DtIconClose: n,
|
|
18
|
-
DtIconChevronDown: o
|
|
19
|
-
},
|
|
20
|
-
inheritAttrs: !1,
|
|
21
|
-
props: {
|
|
22
|
-
/**
|
|
23
|
-
* Array of filters to display in the popover,
|
|
24
|
-
* should be an array of objects with `name` and `active` properties
|
|
25
|
-
*/
|
|
26
|
-
value: {
|
|
27
|
-
type: Array,
|
|
28
|
-
default: () => []
|
|
29
|
-
},
|
|
30
|
-
/**
|
|
31
|
-
* Text shown in tooltip when you hover the alpha button,
|
|
32
|
-
* required if no content is passed to default slot
|
|
33
|
-
*/
|
|
34
|
-
alphaTooltipText: {
|
|
35
|
-
type: String,
|
|
36
|
-
default: ""
|
|
37
|
-
},
|
|
38
|
-
/**
|
|
39
|
-
* HTML disabled attribute
|
|
40
|
-
*/
|
|
41
|
-
disabled: {
|
|
42
|
-
type: Boolean,
|
|
43
|
-
default: !1
|
|
44
|
-
},
|
|
45
|
-
/**
|
|
46
|
-
* Toggles the clear button visibility
|
|
47
|
-
* @values true, false
|
|
48
|
-
*/
|
|
49
|
-
hideClear: {
|
|
50
|
-
type: Boolean,
|
|
51
|
-
default: !1
|
|
52
|
-
},
|
|
53
|
-
/**
|
|
54
|
-
* Label of the button
|
|
55
|
-
*/
|
|
56
|
-
label: {
|
|
57
|
-
type: String,
|
|
58
|
-
default: void 0
|
|
59
|
-
},
|
|
60
|
-
/**
|
|
61
|
-
* Text shown in tooltip when you hover the omega button,
|
|
62
|
-
* required as it is an icon only button
|
|
63
|
-
*/
|
|
64
|
-
omegaTooltipText: {
|
|
65
|
-
type: String,
|
|
66
|
-
default: ""
|
|
67
|
-
},
|
|
68
|
-
/**
|
|
69
|
-
* Sets the element to which the
|
|
70
|
-
* <a class="d-link" href="https://dialtone.dialpad.com/components/popover.html#vue-api" target="_blank">popover component</a>
|
|
71
|
-
* is going to append to
|
|
72
|
-
* @values body, parent, root, HTMLElement
|
|
73
|
-
*/
|
|
74
|
-
popoverAppendTo: {
|
|
75
|
-
type: [HTMLElement, String],
|
|
76
|
-
default: "body",
|
|
77
|
-
validator: (e) => _.includes(e) || e instanceof HTMLElement
|
|
78
|
-
},
|
|
79
|
-
/**
|
|
80
|
-
* If the dropdown does not fit in the direction described by "popoverPlacement",
|
|
81
|
-
* it will attempt to change it's direction to the "popoverFallbackPlacements".
|
|
82
|
-
*
|
|
83
|
-
* @values top, top-start, top-end,
|
|
84
|
-
* right, right-start, right-end,
|
|
85
|
-
* left, left-start, left-end,
|
|
86
|
-
* bottom, bottom-start, bottom-end,
|
|
87
|
-
* auto, auto-start, auto-end
|
|
88
|
-
* */
|
|
89
|
-
popoverFallbackPlacements: {
|
|
90
|
-
type: Array,
|
|
91
|
-
default: () => ["auto"]
|
|
92
|
-
},
|
|
93
|
-
/**
|
|
94
|
-
* Determines maximum height for the popover before overflow.
|
|
95
|
-
* Possible units rem|px|em
|
|
96
|
-
*/
|
|
97
|
-
popoverMaxHeight: {
|
|
98
|
-
type: String,
|
|
99
|
-
default: ""
|
|
100
|
-
},
|
|
101
|
-
/**
|
|
102
|
-
* Determines maximum width for the popover before overflow.
|
|
103
|
-
* Possible units rem|px|%|em
|
|
104
|
-
*/
|
|
105
|
-
popoverMaxWidth: {
|
|
106
|
-
type: String,
|
|
107
|
-
default: ""
|
|
108
|
-
},
|
|
109
|
-
/**
|
|
110
|
-
* Padding size class for the popover content.
|
|
111
|
-
* @values none, small, medium, large
|
|
112
|
-
*/
|
|
113
|
-
popoverPadding: {
|
|
114
|
-
type: String,
|
|
115
|
-
default: "large",
|
|
116
|
-
validator: (e) => Object.keys(v).some((t) => t === e)
|
|
117
|
-
},
|
|
118
|
-
/**
|
|
119
|
-
* The direction the popover displays relative to the anchor.
|
|
120
|
-
* <a class="d-link" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement" target="_blank">Tippy.js docs</a>
|
|
121
|
-
* @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end
|
|
122
|
-
*/
|
|
123
|
-
popoverPlacement: {
|
|
124
|
-
type: String,
|
|
125
|
-
default: "bottom-start"
|
|
126
|
-
},
|
|
127
|
-
/**
|
|
128
|
-
* The size of the button.
|
|
129
|
-
* @values xs, sm, md, lg, xl
|
|
130
|
-
*/
|
|
131
|
-
size: {
|
|
132
|
-
type: String,
|
|
133
|
-
default: "sm",
|
|
134
|
-
validator: (e) => Object.keys(m).includes(e)
|
|
135
|
-
}
|
|
136
|
-
},
|
|
137
|
-
emits: [
|
|
138
|
-
/**
|
|
139
|
-
* Emitted when clicking the clear button
|
|
140
|
-
*
|
|
141
|
-
* @event clear
|
|
142
|
-
* @type {Boolean | Array}
|
|
143
|
-
*/
|
|
144
|
-
"clear",
|
|
145
|
-
/**
|
|
146
|
-
* Emitted when popover is shown or hidden
|
|
147
|
-
*
|
|
148
|
-
* @event opened
|
|
149
|
-
* @type {Boolean | Array}
|
|
150
|
-
*/
|
|
151
|
-
"open",
|
|
152
|
-
/**
|
|
153
|
-
* Emitted when the active filters change
|
|
154
|
-
* @type {Array}
|
|
155
|
-
*/
|
|
156
|
-
"update:value"
|
|
157
|
-
],
|
|
158
|
-
data() {
|
|
159
|
-
return {
|
|
160
|
-
isOpen: !1,
|
|
161
|
-
i18n: new s(),
|
|
162
|
-
filters: this.value
|
|
163
|
-
};
|
|
164
|
-
},
|
|
165
|
-
computed: {
|
|
166
|
-
buttonKind() {
|
|
167
|
-
return this.isActive ? "default" : "muted";
|
|
168
|
-
},
|
|
169
|
-
clearButtonAriaLabel() {
|
|
170
|
-
return this.omegaTooltipText || this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL");
|
|
171
|
-
},
|
|
172
|
-
clearButtonTitle() {
|
|
173
|
-
if (!this.omegaTooltipText)
|
|
174
|
-
return this.clearButtonAriaLabel;
|
|
175
|
-
},
|
|
176
|
-
activeFilters() {
|
|
177
|
-
return this.filters.filter((e) => e.active).map((e) => e.name);
|
|
178
|
-
},
|
|
179
|
-
activeFilterList() {
|
|
180
|
-
return this.activeFilters.length <= 2 ? this.activeFilters.join(", ") : this.activeFilters.slice(0, 2).join(", ") + ", + " + (this.activeFilters.length - 2);
|
|
181
|
-
},
|
|
182
|
-
isActive() {
|
|
183
|
-
return this.activeFilterList.length > 0;
|
|
184
|
-
},
|
|
185
|
-
hasClear() {
|
|
186
|
-
return !this.hideClear && this.activeFilterList.length > 0;
|
|
187
|
-
}
|
|
188
|
-
},
|
|
189
|
-
watch: {
|
|
190
|
-
isOpen(e) {
|
|
191
|
-
this.$emit("open", e);
|
|
192
|
-
},
|
|
193
|
-
filters(e) {
|
|
194
|
-
this.$emit("update:value", e);
|
|
195
|
-
}
|
|
196
|
-
},
|
|
197
|
-
methods: {
|
|
198
|
-
clearFilter(e) {
|
|
199
|
-
this.filters = this.filters.map((t) => (delete t.active, t)), this.$emit("clear", e);
|
|
200
|
-
},
|
|
201
|
-
updateFilters(e, t) {
|
|
202
|
-
this.filters = this.filters.map((i) => i.name !== e.name ? i : { ...i, active: t });
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
};
|
|
206
|
-
var b = function() {
|
|
207
|
-
var t = this, i = t._self._c;
|
|
208
|
-
return i("div", { staticClass: "d-filter-pill", attrs: { "data-qa": "dt-filter-pill" } }, [i("dt-popover", { attrs: { "append-to": t.popoverAppendTo, "fallback-placements": t.popoverFallbackPlacements, "max-height": t.popoverMaxHeight, "max-width": t.popoverMaxWidth, modal: !1, padding: t.popoverPadding, placement: t.popoverPlacement }, scopedSlots: t._u([{ key: "anchor", fn: function({ attrs: l }) {
|
|
209
|
-
return [i("dt-button", t._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.alphaTooltipText, expression: "alphaTooltipText" }], class: [
|
|
210
|
-
"d-filter-pill__primary",
|
|
211
|
-
{
|
|
212
|
-
"d-filter-pill--selected": t.isActive,
|
|
213
|
-
"d-filter-pill__primary--has-clear": t.hasClear
|
|
214
|
-
}
|
|
215
|
-
], attrs: { active: t.isActive, disabled: t.disabled, kind: t.buttonKind, size: t.size, "data-qa": "dt-filter-pill__button", "icon-position": "right", importance: "outlined" }, on: { click: function(a) {
|
|
216
|
-
t.isOpen = !0;
|
|
217
|
-
} }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: a }) {
|
|
218
|
-
return [i("dt-icon-chevron-down", { staticClass: "d-filter-pill__icon", attrs: { size: a, "data-qa": "dt-filter-pill__icon" } })];
|
|
219
|
-
} }], null, !0) }, "dt-button", l, !1), [i("span", { staticClass: "d-filter-pill__label" }, [t._t("default", function() {
|
|
220
|
-
return [i("span", { staticClass: "d-filter-pill__label-alpha", domProps: { textContent: t._s(t.label) } }), t.activeFilterList ? i("span", { staticClass: "d-filter-pill__label-omega", domProps: { textContent: t._s(t.activeFilterList) } }) : t._e()];
|
|
221
|
-
})], 2)])];
|
|
222
|
-
} }, { key: "content", fn: function({ close: l }) {
|
|
223
|
-
return [t._t("content", function() {
|
|
224
|
-
return [t.value.length ? i("dt-checkbox-group", { attrs: { "selected-values": t.activeFilters, "aria-label": t.label, name: "contact-centers" } }, t._l(t.filters, function(a) {
|
|
225
|
-
return i("dt-checkbox", { key: a.name, attrs: { label: a.name, value: a.name }, on: { input: (r) => t.updateFilters(a, r) } });
|
|
226
|
-
}), 1) : t._e()];
|
|
227
|
-
}, { close: l })];
|
|
228
|
-
} }], null, !0), model: { value: t.isOpen, callback: function(l) {
|
|
229
|
-
t.isOpen = l;
|
|
230
|
-
}, expression: "isOpen" } }), t.hasClear ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.omegaTooltipText, expression: "omegaTooltipText" }], class: [
|
|
231
|
-
"d-filter-pill__clear",
|
|
232
|
-
{ "d-filter-pill__clear--selected": t.isActive }
|
|
233
|
-
], attrs: { active: t.isActive, "aria-label": t.clearButtonAriaLabel, disabled: t.disabled, kind: t.buttonKind, size: t.size, title: t.clearButtonTitle, "data-qa": "dt-filter-pill__clear-button", importance: "outlined" }, on: { click: t.clearFilter }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: l }) {
|
|
234
|
-
return [i("dt-icon-close", { attrs: { size: l } })];
|
|
235
|
-
} }], null, !1, 2924703597) }) : t._e()], 1);
|
|
236
|
-
}, g = [], T = /* @__PURE__ */ p(
|
|
237
|
-
h,
|
|
238
|
-
b,
|
|
239
|
-
g
|
|
240
|
-
);
|
|
241
|
-
const O = T.exports;
|
|
242
|
-
export {
|
|
243
|
-
O as default
|
|
244
|
-
};
|
|
245
|
-
//# sourceMappingURL=filter-pill.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"filter-pill.js","sources":["../../../components/filter_pill/filter_pill.vue"],"sourcesContent":["<template>\n <div\n class=\"d-filter-pill\"\n data-qa=\"dt-filter-pill\"\n >\n <dt-popover\n v-model=\"isOpen\"\n :append-to=\"popoverAppendTo\"\n :fallback-placements=\"popoverFallbackPlacements\"\n :max-height=\"popoverMaxHeight\"\n :max-width=\"popoverMaxWidth\"\n :modal=\"false\"\n :padding=\"popoverPadding\"\n :placement=\"popoverPlacement\"\n >\n <template #anchor=\"{ attrs }\">\n <dt-button\n v-dt-tooltip=\"alphaTooltipText\"\n v-bind=\"attrs\"\n :active=\"isActive\"\n :class=\"[\n 'd-filter-pill__primary',\n {\n 'd-filter-pill--selected': isActive,\n 'd-filter-pill__primary--has-clear': hasClear,\n },\n ]\"\n :disabled=\"disabled\"\n :kind=\"buttonKind\"\n :size=\"size\"\n data-qa=\"dt-filter-pill__button\"\n icon-position=\"right\"\n importance=\"outlined\"\n @click=\"isOpen = true\"\n >\n <span class=\"d-filter-pill__label\">\n <!-- @slot Allows you to override the label behavior -->\n <slot>\n <span\n class=\"d-filter-pill__label-alpha\"\n v-text=\"label\"\n />\n <span\n v-if=\"activeFilterList\"\n class=\"d-filter-pill__label-omega\"\n v-text=\"activeFilterList\"\n />\n </slot>\n </span>\n <template #icon=\"{ iconSize }\">\n <dt-icon-chevron-down\n :size=\"iconSize\"\n class=\"d-filter-pill__icon\"\n data-qa=\"dt-filter-pill__icon\"\n />\n </template>\n </dt-button>\n </template>\n <template #content=\"{ close }\">\n <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n <slot\n :close=\"close\"\n name=\"content\"\n >\n <dt-checkbox-group\n v-if=\"value.length\"\n :selected-values=\"activeFilters\"\n :aria-label=\"label\"\n name=\"contact-centers\"\n >\n <dt-checkbox\n v-for=\"filter in filters\"\n :key=\"filter.name\"\n :label=\"filter.name\"\n :value=\"filter.name\"\n @input=\"$event => updateFilters(filter, $event)\"\n />\n </dt-checkbox-group>\n </slot>\n </template>\n </dt-popover>\n <dt-button\n v-if=\"hasClear\"\n v-dt-tooltip=\"omegaTooltipText\"\n :active=\"isActive\"\n :aria-label=\"clearButtonAriaLabel\"\n :class=\"[\n 'd-filter-pill__clear',\n { 'd-filter-pill__clear--selected': isActive },\n ]\"\n :disabled=\"disabled\"\n :kind=\"buttonKind\"\n :size=\"size\"\n :title=\"clearButtonTitle\"\n data-qa=\"dt-filter-pill__clear-button\"\n importance=\"outlined\"\n @click=\"clearFilter\"\n >\n <template #icon=\"{ iconSize }\">\n <dt-icon-close :size=\"iconSize\" />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/popover';\nimport { BUTTON_SIZE_MODIFIERS, DtButton } from '@/components/button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/checkbox';\nimport { DtCheckboxGroup } from '@/components/checkbox_group';\n\nexport default {\n name: 'DtFilterPill',\n\n components: {\n DtCheckboxGroup,\n DtCheckbox,\n DtPopover,\n DtButton,\n DtIconClose,\n DtIconChevronDown,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Array of filters to display in the popover,\n * should be an array of objects with `name` and `active` properties\n */\n value: {\n type: Array,\n default: () => [],\n },\n\n /**\n * Text shown in tooltip when you hover the alpha button,\n * required if no content is passed to default slot\n */\n alphaTooltipText: {\n type: String,\n default: '',\n },\n\n /**\n * HTML disabled attribute\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Toggles the clear button visibility\n * @values true, false\n */\n hideClear: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label of the button\n */\n label: {\n type: String,\n default: undefined,\n },\n\n /**\n * Text shown in tooltip when you hover the omega button,\n * required as it is an icon only button\n */\n omegaTooltipText: {\n type: String,\n default: '',\n },\n\n /**\n * Sets the element to which the\n * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n * is going to append to\n * @values body, parent, root, HTMLElement\n */\n popoverAppendTo: {\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 the dropdown does not fit in the direction described by \"popoverPlacement\",\n * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\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 popoverFallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n popoverMaxHeight: {\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 popoverMaxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Padding size class for the popover content.\n * @values none, small, medium, large\n */\n popoverPadding: {\n type: String,\n default: 'large',\n validator: (padding) => {\n return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n */\n popoverPlacement: {\n type: String,\n default: 'bottom-start',\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'sm',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n },\n\n emits: [\n /**\n * Emitted when clicking the clear button\n *\n * @event clear\n * @type {Boolean | Array}\n */\n 'clear',\n\n /**\n * Emitted when popover is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'open',\n\n /**\n * Emitted when the active filters change\n * @type {Array}\n */\n 'update:value',\n ],\n\n data () {\n return {\n isOpen: false,\n i18n: new DialtoneLocalization(),\n filters: this.value,\n };\n },\n\n computed: {\n buttonKind () {\n return this.isActive ? 'default': 'muted';\n },\n\n clearButtonAriaLabel () {\n return this.omegaTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n },\n\n clearButtonTitle () {\n if (this.omegaTooltipText) return;\n\n return this.clearButtonAriaLabel\n },\n\n activeFilters () {\n return this.filters.filter(filter => filter.active).map(filter => filter.name);\n },\n\n activeFilterList () {\n if (this.activeFilters.length <= 2) {\n return this.activeFilters.join(', ');\n }\n\n return this.activeFilters.slice(0, 2).join(', ') + ', + ' + (this.activeFilters.length - 2);\n },\n\n isActive () {\n return this.activeFilterList.length > 0;\n },\n\n hasClear () {\n return !this.hideClear && this.activeFilterList.length > 0;\n },\n },\n\n watch: {\n isOpen (isOpen) {\n this.$emit('open', isOpen);\n },\n\n filters (filters) {\n this.$emit('update:value', filters);\n },\n },\n\n methods: {\n clearFilter ($event) {\n this.filters = this.filters.map(filter => {\n delete filter.active\n return filter;\n });\n this.$emit('clear', $event)\n },\n\n updateFilters (filter, isActive) {\n this.filters = this.filters.map(f => {\n if (f.name !== filter.name) return f;\n\n return {...f, active: isActive};\n })\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtCheckboxGroup","DtCheckbox","DtPopover","DtButton","DtIconClose","DtIconChevronDown","appendTo","POPOVER_APPEND_TO_VALUES","padding","POPOVER_PADDING_CLASSES","item","s","BUTTON_SIZE_MODIFIERS","DialtoneLocalization","filter","isOpen","filters","$event","isActive","f"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
import { DialtoneLocalization } from '../../localization';
|
|
2
|
-
declare const _default: import('vue').DefineComponent<{
|
|
3
|
-
value: {
|
|
4
|
-
type: ArrayConstructor;
|
|
5
|
-
default: () => never[];
|
|
6
|
-
};
|
|
7
|
-
alphaTooltipText: {
|
|
8
|
-
type: StringConstructor;
|
|
9
|
-
default: string;
|
|
10
|
-
};
|
|
11
|
-
disabled: {
|
|
12
|
-
type: BooleanConstructor;
|
|
13
|
-
default: boolean;
|
|
14
|
-
};
|
|
15
|
-
hideClear: {
|
|
16
|
-
type: BooleanConstructor;
|
|
17
|
-
default: boolean;
|
|
18
|
-
};
|
|
19
|
-
label: {
|
|
20
|
-
type: StringConstructor;
|
|
21
|
-
default: undefined;
|
|
22
|
-
};
|
|
23
|
-
omegaTooltipText: {
|
|
24
|
-
type: StringConstructor;
|
|
25
|
-
default: string;
|
|
26
|
-
};
|
|
27
|
-
popoverAppendTo: {
|
|
28
|
-
type: (StringConstructor | {
|
|
29
|
-
new (): HTMLElement;
|
|
30
|
-
prototype: HTMLElement;
|
|
31
|
-
})[];
|
|
32
|
-
default: string;
|
|
33
|
-
validator: (appendTo: unknown) => boolean;
|
|
34
|
-
};
|
|
35
|
-
popoverFallbackPlacements: {
|
|
36
|
-
type: ArrayConstructor;
|
|
37
|
-
default: () => string[];
|
|
38
|
-
};
|
|
39
|
-
popoverMaxHeight: {
|
|
40
|
-
type: StringConstructor;
|
|
41
|
-
default: string;
|
|
42
|
-
};
|
|
43
|
-
popoverMaxWidth: {
|
|
44
|
-
type: StringConstructor;
|
|
45
|
-
default: string;
|
|
46
|
-
};
|
|
47
|
-
popoverPadding: {
|
|
48
|
-
type: StringConstructor;
|
|
49
|
-
default: string;
|
|
50
|
-
validator: (padding: unknown) => boolean;
|
|
51
|
-
};
|
|
52
|
-
popoverPlacement: {
|
|
53
|
-
type: StringConstructor;
|
|
54
|
-
default: string;
|
|
55
|
-
};
|
|
56
|
-
size: {
|
|
57
|
-
type: StringConstructor;
|
|
58
|
-
default: string;
|
|
59
|
-
validator: (s: unknown) => boolean;
|
|
60
|
-
};
|
|
61
|
-
}, {}, {
|
|
62
|
-
isOpen: boolean;
|
|
63
|
-
i18n: DialtoneLocalization;
|
|
64
|
-
filters: any;
|
|
65
|
-
}, {
|
|
66
|
-
buttonKind(): "default" | "muted";
|
|
67
|
-
clearButtonAriaLabel(): any;
|
|
68
|
-
clearButtonTitle(): any;
|
|
69
|
-
activeFilters(): any;
|
|
70
|
-
activeFilterList(): any;
|
|
71
|
-
isActive(): boolean;
|
|
72
|
-
hasClear(): boolean;
|
|
73
|
-
}, {
|
|
74
|
-
clearFilter($event: any): void;
|
|
75
|
-
updateFilters(filter: any, isActive: any): void;
|
|
76
|
-
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("open" | "clear" | "update:value")[], string, Readonly<import('vue').ExtractPropTypes<{
|
|
77
|
-
value: {
|
|
78
|
-
type: ArrayConstructor;
|
|
79
|
-
default: () => never[];
|
|
80
|
-
};
|
|
81
|
-
alphaTooltipText: {
|
|
82
|
-
type: StringConstructor;
|
|
83
|
-
default: string;
|
|
84
|
-
};
|
|
85
|
-
disabled: {
|
|
86
|
-
type: BooleanConstructor;
|
|
87
|
-
default: boolean;
|
|
88
|
-
};
|
|
89
|
-
hideClear: {
|
|
90
|
-
type: BooleanConstructor;
|
|
91
|
-
default: boolean;
|
|
92
|
-
};
|
|
93
|
-
label: {
|
|
94
|
-
type: StringConstructor;
|
|
95
|
-
default: undefined;
|
|
96
|
-
};
|
|
97
|
-
omegaTooltipText: {
|
|
98
|
-
type: StringConstructor;
|
|
99
|
-
default: string;
|
|
100
|
-
};
|
|
101
|
-
popoverAppendTo: {
|
|
102
|
-
type: (StringConstructor | {
|
|
103
|
-
new (): HTMLElement;
|
|
104
|
-
prototype: HTMLElement;
|
|
105
|
-
})[];
|
|
106
|
-
default: string;
|
|
107
|
-
validator: (appendTo: unknown) => boolean;
|
|
108
|
-
};
|
|
109
|
-
popoverFallbackPlacements: {
|
|
110
|
-
type: ArrayConstructor;
|
|
111
|
-
default: () => string[];
|
|
112
|
-
};
|
|
113
|
-
popoverMaxHeight: {
|
|
114
|
-
type: StringConstructor;
|
|
115
|
-
default: string;
|
|
116
|
-
};
|
|
117
|
-
popoverMaxWidth: {
|
|
118
|
-
type: StringConstructor;
|
|
119
|
-
default: string;
|
|
120
|
-
};
|
|
121
|
-
popoverPadding: {
|
|
122
|
-
type: StringConstructor;
|
|
123
|
-
default: string;
|
|
124
|
-
validator: (padding: unknown) => boolean;
|
|
125
|
-
};
|
|
126
|
-
popoverPlacement: {
|
|
127
|
-
type: StringConstructor;
|
|
128
|
-
default: string;
|
|
129
|
-
};
|
|
130
|
-
size: {
|
|
131
|
-
type: StringConstructor;
|
|
132
|
-
default: string;
|
|
133
|
-
validator: (s: unknown) => boolean;
|
|
134
|
-
};
|
|
135
|
-
}>>, {
|
|
136
|
-
value: unknown[];
|
|
137
|
-
disabled: boolean;
|
|
138
|
-
label: string;
|
|
139
|
-
size: string;
|
|
140
|
-
alphaTooltipText: string;
|
|
141
|
-
hideClear: boolean;
|
|
142
|
-
omegaTooltipText: string;
|
|
143
|
-
popoverAppendTo: string | HTMLElement;
|
|
144
|
-
popoverFallbackPlacements: unknown[];
|
|
145
|
-
popoverMaxHeight: string;
|
|
146
|
-
popoverMaxWidth: string;
|
|
147
|
-
popoverPadding: string;
|
|
148
|
-
popoverPlacement: string;
|
|
149
|
-
}>;
|
|
150
|
-
export default _default;
|
|
151
|
-
//# sourceMappingURL=filter_pill.vue.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"filter_pill.vue.d.ts","sourceRoot":"","sources":["../../../../components/filter_pill/filter_pill.vue"],"names":[],"mappings":"AAwGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA6WqC,gBAAgB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/filter_pill/index.js"],"names":[],"mappings":""}
|