@webitel/ui-sdk 24.12.14 → 24.12.15
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/CHANGELOG.md +11 -0
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.js +2498 -2392
- package/dist/ui-sdk.umd.cjs +15 -15
- package/package.json +1 -1
- package/src/components/index.js +3 -0
- package/src/components/on-demand/wt-selection-popup/wt-selection-popup.vue +158 -0
- package/src/locale/en/en.js +1 -0
- package/src/locale/ru/ru.js +1 -0
- package/src/locale/ua/ua.js +1 -0
package/package.json
CHANGED
package/src/components/index.js
CHANGED
|
@@ -68,6 +68,8 @@ import WtTooltip from './wt-tooltip/wt-tooltip.vue';
|
|
|
68
68
|
import WtNavigationMenu
|
|
69
69
|
from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
|
|
70
70
|
import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue';
|
|
71
|
+
import WtSelectionPopup
|
|
72
|
+
from './on-demand/wt-selection-popup/wt-selection-popup.vue';
|
|
71
73
|
|
|
72
74
|
const Components = {
|
|
73
75
|
WtActionBar,
|
|
@@ -135,6 +137,7 @@ const Components = {
|
|
|
135
137
|
WtExpansionPanel,
|
|
136
138
|
WtNavigationMenu,
|
|
137
139
|
WtStartPage,
|
|
140
|
+
WtSelectionPopup,
|
|
138
141
|
};
|
|
139
142
|
|
|
140
143
|
export default Components;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<wt-popup
|
|
3
|
+
class="wt-selection-popup"
|
|
4
|
+
overflow
|
|
5
|
+
size="sm"
|
|
6
|
+
v-bind="$attrs"
|
|
7
|
+
@close="close"
|
|
8
|
+
>
|
|
9
|
+
<template #title>
|
|
10
|
+
{{ title }}
|
|
11
|
+
</template>
|
|
12
|
+
<template #main>
|
|
13
|
+
<ul class="wt-selection-popup__options">
|
|
14
|
+
<li
|
|
15
|
+
v-for="(option, key) of options"
|
|
16
|
+
:key="key"
|
|
17
|
+
:class="{'active': option.value === selected.value }"
|
|
18
|
+
class="wt-selection-popup__item-wrapper"
|
|
19
|
+
@click="selectOption(option)"
|
|
20
|
+
>
|
|
21
|
+
<slot
|
|
22
|
+
:option="option"
|
|
23
|
+
name="option"
|
|
24
|
+
>
|
|
25
|
+
<wt-icon
|
|
26
|
+
v-if="option.icon"
|
|
27
|
+
:icon="option.icon"
|
|
28
|
+
size="sm"
|
|
29
|
+
/>
|
|
30
|
+
<h4 class="wt-selection-popup__item-header">
|
|
31
|
+
{{ option.title }}
|
|
32
|
+
</h4>
|
|
33
|
+
<p
|
|
34
|
+
v-if="option.description"
|
|
35
|
+
class="popup-options__item-text">
|
|
36
|
+
{{ option.description }}
|
|
37
|
+
</p>
|
|
38
|
+
<wt-tooltip>
|
|
39
|
+
<template #activator>
|
|
40
|
+
<wt-icon-btn
|
|
41
|
+
v-if="option.description"
|
|
42
|
+
color="info"
|
|
43
|
+
icon="rounded-info"
|
|
44
|
+
/>
|
|
45
|
+
</template>
|
|
46
|
+
{{ option.description }}
|
|
47
|
+
</wt-tooltip>
|
|
48
|
+
</slot>
|
|
49
|
+
</li>
|
|
50
|
+
</ul>
|
|
51
|
+
<!--Slot for displaying specific template styling-->
|
|
52
|
+
<slot name="after-section" />
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<template #actions>
|
|
56
|
+
<wt-button
|
|
57
|
+
:disabled="!selected"
|
|
58
|
+
@click="add"
|
|
59
|
+
>
|
|
60
|
+
{{ t('reusable.create') }}
|
|
61
|
+
</wt-button>
|
|
62
|
+
<wt-button
|
|
63
|
+
color="secondary"
|
|
64
|
+
@click="close"
|
|
65
|
+
>
|
|
66
|
+
{{ t('reusable.close') }}
|
|
67
|
+
</wt-button>
|
|
68
|
+
</template>
|
|
69
|
+
</wt-popup>
|
|
70
|
+
</template>
|
|
71
|
+
|
|
72
|
+
<script setup>
|
|
73
|
+
import { useI18n } from 'vue-i18n';
|
|
74
|
+
|
|
75
|
+
const props = defineProps({
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Popup title
|
|
79
|
+
*/
|
|
80
|
+
|
|
81
|
+
title: {
|
|
82
|
+
type: String,
|
|
83
|
+
},
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Selected value. The scheme repeats attribute `option` from `options`
|
|
87
|
+
*/
|
|
88
|
+
|
|
89
|
+
selected: {
|
|
90
|
+
type: Object,
|
|
91
|
+
},
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* All displayed values. Should have following schema: `{ value: '', title: '', description: '', icon: ''}`
|
|
95
|
+
*/
|
|
96
|
+
|
|
97
|
+
options: {
|
|
98
|
+
type: Array,
|
|
99
|
+
default: () => [],
|
|
100
|
+
},
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
const emit = defineEmits(['change', 'add', 'close']);
|
|
104
|
+
|
|
105
|
+
const { t } = useI18n();
|
|
106
|
+
|
|
107
|
+
function add() {
|
|
108
|
+
emit('add', props.selected);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function close() {
|
|
112
|
+
emit('close');
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
function selectOption(option) {
|
|
116
|
+
emit('change', option);
|
|
117
|
+
}
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<style lang="scss" scoped>
|
|
121
|
+
@import '../../../css/main.scss';
|
|
122
|
+
|
|
123
|
+
.wt-selection-popup {
|
|
124
|
+
&__options {
|
|
125
|
+
display: flex;
|
|
126
|
+
flex-direction: column;
|
|
127
|
+
gap: var(--spacing-xs);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&__item-wrapper {
|
|
131
|
+
position: relative;
|
|
132
|
+
display: flex;
|
|
133
|
+
align-items: center;
|
|
134
|
+
padding: var(--spacing-xs);
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
transition: var(--transition);
|
|
137
|
+
border: 1px solid var(--text-main-color);
|
|
138
|
+
border-radius: var(--border-radius);
|
|
139
|
+
|
|
140
|
+
&:hover,
|
|
141
|
+
&.active {
|
|
142
|
+
border: 1px solid var(--primary-color);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.wt-icon {
|
|
146
|
+
margin-right: var(--spacing-xs);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.wt-tooltip {
|
|
150
|
+
margin-left: auto;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&__item-header {
|
|
155
|
+
@extend %typo-subtitle-2;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
</style>
|
package/src/locale/en/en.js
CHANGED
package/src/locale/ru/ru.js
CHANGED