plugin-ui-for-kzt 0.0.12 → 0.0.14
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/components/BaseButton/BaseButton.vue.d.ts +2 -2
- package/dist/components/BaseCalendar/BaseCalendar.vue.d.ts +1 -1
- package/dist/components/BaseCheckbox/BaseCheckbox.vue.d.ts +2 -2
- package/dist/components/BaseDropdown/BaseDropdown.vue.d.ts +1 -1
- package/dist/components/BaseInput/BaseInput.vue.d.ts +2 -2
- package/dist/components/BaseInputCalendar/BaseInputCalendar.vue.d.ts +2 -2
- package/dist/components/BaseInputCurrency/BaseInputCurrency.vue.d.ts +2 -2
- package/dist/components/BaseInputEmail/BaseInputEmail.vue.d.ts +2 -2
- package/dist/components/BaseInputPhone/BaseInputPhone.vue.d.ts +2 -2
- package/dist/components/BaseOpenedListItem/BaseOpenedListItem.vue.d.ts +1 -1
- package/dist/components/BaseRadio/BaseRadio.vue.d.ts +2 -2
- package/dist/components/BaseSelect/BaseSelect.vue.d.ts +1 -1
- package/dist/components/BaseTextarea/BaseTextarea.vue.d.ts +2 -2
- package/dist/components/BaseToggle/BaseToggle.vue.d.ts +2 -2
- package/dist/index.js +1 -1
- package/example/App.vue +244 -242
- package/package.json +1 -1
- package/src/components/Modal/Modal.vue +6 -4
- package/src/plugins/modalPlugin.ts +1 -4
- package/src/store/modal.ts +0 -2
package/example/App.vue
CHANGED
|
@@ -2,244 +2,245 @@
|
|
|
2
2
|
<div class="demo-page">
|
|
3
3
|
<h1>Plugin UI KZT - Компоненты</h1>
|
|
4
4
|
<p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
|
|
5
|
-
|
|
6
|
-
<section>
|
|
7
|
-
<h2>BaseInputPhone.vue</h2>
|
|
8
|
-
<p>Компонент для отображения полей ввода телефонных номеров.</p>
|
|
9
|
-
<p>Пример использования:</p>
|
|
10
|
-
<base-input-phone
|
|
11
|
-
id="phone"
|
|
12
|
-
v-model="phoneModel"
|
|
13
|
-
size="large"
|
|
14
|
-
label="Phone Number"
|
|
15
|
-
placeholder="Enter phone number"
|
|
16
|
-
error="Invalid phone number"
|
|
17
|
-
hint="Please enter a valid phone number"
|
|
18
|
-
:tooltip-options="tooltipOptions"
|
|
19
|
-
/>
|
|
20
|
-
</section>
|
|
21
5
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
6
|
+
<section>
|
|
7
|
+
<h2>BaseInputPhone.vue</h2>
|
|
8
|
+
<p>Компонент для отображения полей ввода телефонных номеров.</p>
|
|
9
|
+
<p>Пример использования:</p>
|
|
10
|
+
<base-input-phone
|
|
11
|
+
id="phone"
|
|
12
|
+
v-model="phoneModel"
|
|
13
|
+
size="large"
|
|
14
|
+
label="Phone Number"
|
|
15
|
+
placeholder="Enter phone number"
|
|
16
|
+
error="Invalid phone number"
|
|
17
|
+
hint="Please enter a valid phone number"
|
|
18
|
+
:tooltip-options="tooltipOptions"
|
|
19
|
+
/>
|
|
20
|
+
</section>
|
|
21
|
+
|
|
22
|
+
<section>
|
|
23
|
+
<h2>BaseSegmentedButtons.vue</h2>
|
|
24
|
+
<p>Компонент для отображения сегментированных кнопок.</p>
|
|
25
|
+
<p>Пример использования:</p>
|
|
26
|
+
<base-segmented-buttons
|
|
27
|
+
id="segmented-buttons"
|
|
28
|
+
v-model="selectedOptionButton"
|
|
29
|
+
:options="[
|
|
30
30
|
{ value: '1', label: 'Option 1' },
|
|
31
31
|
{ value: '2', label: 'Option 2' },
|
|
32
32
|
{ value: '3', label: 'Option 3' }
|
|
33
|
-
]"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
]"
|
|
34
|
+
size="large"
|
|
35
|
+
/>
|
|
36
|
+
</section>
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
38
|
+
<section>
|
|
39
|
+
<h2>BaseInputCurrency.vue</h2>
|
|
40
|
+
<p>Компонент для отображения полей ввода валюты.</p>
|
|
41
|
+
<p>Пример использования:</p>
|
|
42
|
+
<base-input-currency
|
|
43
|
+
id="currency"
|
|
44
|
+
v-model="currencyModel"
|
|
45
|
+
size="large"
|
|
46
|
+
label="Currency Amount"
|
|
47
|
+
placeholder="0.00"
|
|
48
|
+
error="Invalid currency amount"
|
|
49
|
+
hint="Please enter a valid currency amount"
|
|
50
|
+
:tooltip-options="tooltipOptions"
|
|
51
|
+
/>
|
|
52
|
+
</section>
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
<section>
|
|
55
|
+
<h2>BaseIcon.vue</h2>
|
|
56
|
+
<p>Компонент для отображения иконок.</p>
|
|
57
|
+
<p>Пример использования:</p>
|
|
58
|
+
<base-icon name="loader" size="small"/>
|
|
59
|
+
<base-icon name="email-sms" size="medium"/>
|
|
60
|
+
<base-icon name="calendar" size="small"/>
|
|
61
|
+
</section>
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
63
|
+
<section>
|
|
64
|
+
<h2>BaseSiteInput.vue</h2>
|
|
65
|
+
<base-site-input
|
|
66
|
+
v-model="siteModel"
|
|
67
|
+
size="small"
|
|
68
|
+
label="Site"
|
|
69
|
+
hint="Please enter site"
|
|
70
|
+
validation-text="validationText"
|
|
71
|
+
/>
|
|
72
|
+
</section>
|
|
73
73
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
<section>
|
|
75
|
+
<h2>BaseBreadCrumbs.vue</h2>
|
|
76
|
+
<p>Компонент для отображения хлебных крошек.</p>
|
|
77
|
+
<p>Пример использования:</p>
|
|
78
|
+
<base-bread-crumbs :crumbs="[
|
|
79
79
|
{ label: 'Home', to: '/' },
|
|
80
80
|
{ label: 'Products', to: '/products' },
|
|
81
81
|
{ label: 'Electronics', to: '/electronics' },
|
|
82
82
|
{ label: 'Laptops', to: '/laptops' },
|
|
83
83
|
{ label: 'Gaming Laptops', to: '/laptops/gaming' },
|
|
84
|
-
]"
|
|
85
|
-
|
|
84
|
+
]"/>
|
|
85
|
+
</section>
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
<section>
|
|
88
|
+
<h2>BaseLoader.vue</h2>
|
|
89
|
+
<p>Компонент для отображения индикатора загрузки.</p>
|
|
90
|
+
<p>Пример использования:</p>
|
|
91
|
+
<base-loader/>
|
|
92
|
+
</section>
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
94
|
+
<section>
|
|
95
|
+
<h2>BaseButton.vue</h2>
|
|
96
|
+
<p>Компонент для отображения кнопок.</p>
|
|
97
|
+
<p>Пример использования:</p>
|
|
98
|
+
<base-button>Click Me</base-button>
|
|
99
|
+
</section>
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
101
|
+
<section>
|
|
102
|
+
<h2>BaseCheckbox.vue</h2>
|
|
103
|
+
<p>Компонент для отображения чекбоксов.</p>
|
|
104
|
+
<p>Пример использования:</p>
|
|
105
|
+
<base-checkbox id="check" v-model="checkboxModel" label="Accept Terms"/>
|
|
106
|
+
</section>
|
|
107
107
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
108
|
+
<section>
|
|
109
|
+
<h2>BaseRadio.vue</h2>
|
|
110
|
+
<p>Компонент для отображения радиокнопок.</p>
|
|
111
|
+
<p>Пример использования:</p>
|
|
112
|
+
<base-radio id="radio1" v-model="radioModel" label="Option 1"/>
|
|
113
|
+
</section>
|
|
114
114
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
115
|
+
<section>
|
|
116
|
+
<h2>BaseTextarea.vue</h2>
|
|
117
|
+
<p>Компонент для отображения текстовых областей.</p>
|
|
118
|
+
<p>Пример использования:</p>
|
|
119
|
+
<base-textarea
|
|
120
|
+
id="textarea"
|
|
121
|
+
v-model="textAreaModel"
|
|
122
|
+
label="Enter text here"
|
|
123
|
+
size="large"
|
|
124
|
+
/>
|
|
125
|
+
</section>
|
|
126
126
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
127
|
+
<section>
|
|
128
|
+
<h2>BaseToggle.vue</h2>
|
|
129
|
+
<p>Компонент для отображения переключателей.</p>
|
|
130
|
+
<p>Пример использования:</p>
|
|
131
|
+
<base-toggle id="toggle" v-model="toggleModel" label="Enable feature"/>
|
|
132
|
+
</section>
|
|
133
133
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
134
|
+
<section>
|
|
135
|
+
<h2>BaseTooltip.vue</h2>
|
|
136
|
+
<p>Компонент для отображения подсказок.</p>
|
|
137
|
+
<p>Пример использования:</p>
|
|
138
|
+
<base-tooltip
|
|
139
|
+
title="This is a tooltip"
|
|
140
|
+
:content="contentTooltip"
|
|
141
|
+
position="right"
|
|
142
|
+
trigger="click"
|
|
143
|
+
theme="light"
|
|
144
|
+
>
|
|
145
|
+
<template #trigger>
|
|
146
|
+
<base-button>Hover me</base-button>
|
|
147
|
+
</template>
|
|
148
|
+
</base-tooltip>
|
|
149
|
+
</section>
|
|
150
150
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
151
|
+
<section>
|
|
152
|
+
<h2>BaseInput.vue</h2>
|
|
153
|
+
<p>Компонент для отображения текстовых полей.</p>
|
|
154
|
+
<p>Пример использования:</p>
|
|
155
|
+
<base-input id="input" v-model="inputModel" label="Enter text here"/>
|
|
156
|
+
</section>
|
|
157
157
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
158
|
+
<section>
|
|
159
|
+
<h2>BaseInputEmail.vue</h2>
|
|
160
|
+
<p>Компонент для отображения полей ввода электронной почты.</p>
|
|
161
|
+
<p>Пример использования:</p>
|
|
162
|
+
<base-input-email
|
|
163
|
+
id="email"
|
|
164
|
+
v-model="emailModel"
|
|
165
|
+
label="Enter email here"
|
|
166
|
+
size="medium"
|
|
167
|
+
:tooltip-options="tooltipOptions"
|
|
168
|
+
validation-text="validationText Email"
|
|
169
|
+
>
|
|
170
|
+
<template>
|
|
171
|
+
<!-- // #[right-icon]-->
|
|
172
|
+
<base-icon name="calendar" size="medium"/>
|
|
173
|
+
</template>
|
|
174
|
+
</base-input-email>
|
|
175
|
+
</section>
|
|
175
176
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
177
|
+
<section>
|
|
178
|
+
<h2>BaseInputCalendar.vue</h2>
|
|
179
|
+
<p>Компонент для отображения полей ввода даты.</p>
|
|
180
|
+
<p>Пример использования:</p>
|
|
181
|
+
<base-input-calendar
|
|
182
|
+
id="calendar"
|
|
183
|
+
v-model="calendarModel"
|
|
184
|
+
label="Select date here"
|
|
185
|
+
size="medium"
|
|
186
|
+
placeholder="Select date"
|
|
187
|
+
:min-date="new Date()"
|
|
188
|
+
/>
|
|
189
|
+
</section>
|
|
189
190
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
191
|
+
<section>
|
|
192
|
+
<h2>BaseOpenedListItem.vue</h2>
|
|
193
|
+
<p>Компонент для отображения открытых элементов списка.</p>
|
|
194
|
+
<p>Пример использования:</p>
|
|
195
|
+
<base-opened-list-item
|
|
196
|
+
id="list-item"
|
|
197
|
+
label="List Item"
|
|
198
|
+
active
|
|
199
|
+
>
|
|
200
|
+
<template #icon>
|
|
201
|
+
<base-icon name="email-sms"/>
|
|
202
|
+
</template>
|
|
203
|
+
<p>This is the content of the opened list item.</p>
|
|
204
|
+
</base-opened-list-item>
|
|
205
|
+
</section>
|
|
205
206
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
207
|
+
<section>
|
|
208
|
+
<h2>BaseDropdown.vue</h2>
|
|
209
|
+
<p>Компонент для отображения выпадающих списков.</p>
|
|
210
|
+
<p>Пример использования:</p>
|
|
211
|
+
<base-dropdown
|
|
212
|
+
id="dropdown"
|
|
213
|
+
v-model="dropdownModel"
|
|
214
|
+
label="Select an option"
|
|
215
|
+
auto-close
|
|
216
|
+
:options="[
|
|
216
217
|
{ label: 'Option 1', value: 'option1' },
|
|
217
218
|
{ label: 'Option 2', value: 'option2' },
|
|
218
219
|
{ label: 'Option 3', value: 'option3' },
|
|
219
220
|
]"
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
</template>
|
|
224
|
-
<template #dropdown>
|
|
225
|
-
<base-opened-list-item v-for="item in itemsDropdown" :key="item.text">
|
|
226
|
-
<template #icon>
|
|
227
|
-
<base-icon :name="item.name" size="medium" />
|
|
221
|
+
>
|
|
222
|
+
<template #top>
|
|
223
|
+
<base-button>Open Dropdown</base-button>
|
|
228
224
|
</template>
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
225
|
+
<template #dropdown>
|
|
226
|
+
<base-opened-list-item v-for="item in itemsDropdown" :key="item.text">
|
|
227
|
+
<template #icon>
|
|
228
|
+
<base-icon :name="item.name" size="medium"/>
|
|
229
|
+
</template>
|
|
230
|
+
{{ item.text }}
|
|
231
|
+
</base-opened-list-item>
|
|
232
|
+
</template>
|
|
233
|
+
</base-dropdown>
|
|
234
|
+
</section>
|
|
234
235
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
236
|
+
<section>
|
|
237
|
+
<h2>BaseSelect.vue</h2>
|
|
238
|
+
<p>Компонент для отображения выпадающих списков с выбором.</p>
|
|
239
|
+
<p>Пример использования:</p>
|
|
240
|
+
<base-select
|
|
241
|
+
id="select"
|
|
242
|
+
v-model="selectedOption"
|
|
243
|
+
:options="[
|
|
243
244
|
{ id: 1, name: 'Option 1', value: 'option1', label: 'Option 1' },
|
|
244
245
|
{ id: 2, name: 'Option 2', value: 'option2', label: 'Option 2' },
|
|
245
246
|
{ id: 3, name: 'Option 3', value: 'option3', label: 'Option 3', disabled: true },
|
|
@@ -256,31 +257,32 @@
|
|
|
256
257
|
{ id: 14, name: 'Option 14', value: 'option14', label: 'Option 14' },
|
|
257
258
|
{ id: 15, name: 'Option 15', value: 'option15', label: 'Option 15' },
|
|
258
259
|
]"
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
size="small"
|
|
264
|
-
>
|
|
265
|
-
<template #headerIcon>
|
|
266
|
-
<base-icon
|
|
267
|
-
name="email"
|
|
260
|
+
label="Выберите опцию"
|
|
261
|
+
hint="Подсказка"
|
|
262
|
+
error=""
|
|
263
|
+
placeholder="Выберите текст"
|
|
268
264
|
size="small"
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
265
|
+
>
|
|
266
|
+
<template #headerIcon>
|
|
267
|
+
<base-icon
|
|
268
|
+
name="email"
|
|
269
|
+
size="small"
|
|
270
|
+
/>
|
|
271
|
+
</template>
|
|
272
|
+
<template #iconItem>
|
|
273
|
+
<base-icon
|
|
274
|
+
name="email"
|
|
275
|
+
size="small"
|
|
276
|
+
/>
|
|
277
|
+
</template>
|
|
278
|
+
</base-select>
|
|
279
|
+
</section>
|
|
279
280
|
|
|
280
281
|
</div>
|
|
281
282
|
</template>
|
|
282
283
|
<script setup lang="ts">
|
|
283
|
-
import {
|
|
284
|
+
import {ref} from 'vue';
|
|
285
|
+
|
|
284
286
|
const checkboxModel = ref(false);
|
|
285
287
|
const radioModel = ref(false);
|
|
286
288
|
const textAreaModel = ref('');
|
|
@@ -301,24 +303,24 @@ const tooltipOptions = ref({
|
|
|
301
303
|
});
|
|
302
304
|
|
|
303
305
|
const itemsDropdown = ref([
|
|
304
|
-
{
|
|
305
|
-
{
|
|
306
|
-
{
|
|
307
|
-
{
|
|
308
|
-
{
|
|
309
|
-
{
|
|
310
|
-
{
|
|
311
|
-
{
|
|
312
|
-
{
|
|
313
|
-
{
|
|
314
|
-
{
|
|
315
|
-
{
|
|
316
|
-
{
|
|
317
|
-
{
|
|
306
|
+
{name: 'email-sms', text: 'Clipboard Item'},
|
|
307
|
+
{name: 'help', text: 'Clipboard Item 2'},
|
|
308
|
+
{name: 'loader', text: 'Clipboard Item 32'},
|
|
309
|
+
{name: 'loader', text: 'Clipboard Item 33'},
|
|
310
|
+
{name: 'loader', text: 'Clipboard Item 34'},
|
|
311
|
+
{name: 'loader', text: 'Clipboard Item 35'},
|
|
312
|
+
{name: 'loader', text: 'Clipboard Item 31'},
|
|
313
|
+
{name: 'loader', text: 'Clipboard Item 323'},
|
|
314
|
+
{name: 'loader', text: 'Clipboard Item 351'},
|
|
315
|
+
{name: 'loader', text: 'Clipboard Item 3124'},
|
|
316
|
+
{name: 'loader', text: 'Clipboard Item 3512'},
|
|
317
|
+
{name: 'loader', text: 'Clipboard Item 3521'},
|
|
318
|
+
{name: 'loader', text: 'Clipboard Item 3512'},
|
|
319
|
+
{name: 'loader', text: 'Clipboard Item 3512'},
|
|
318
320
|
]);
|
|
319
321
|
const calendarModel = ref('');
|
|
320
322
|
const dropdownModel = ref(false);
|
|
321
|
-
const contentTooltip
|
|
323
|
+
const contentTooltip = ref('<p>Test lorem ipsum asd asdd dasda text lorem ipsum dolor sit amet.</p>');
|
|
322
324
|
</script>
|
|
323
325
|
|
|
324
326
|
<style lang="scss" scoped>
|
package/package.json
CHANGED
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
[getTypeModal.nameClass]: getTypeModal.nameClass.length,
|
|
8
8
|
}"
|
|
9
9
|
>
|
|
10
|
-
{{getTypeModal.nameClass}}
|
|
11
10
|
<div class="modal-container-header-title">
|
|
12
11
|
<component :is="getTypeModal.img"/>
|
|
13
12
|
<div>{{ options.title }}</div>
|
|
@@ -47,7 +46,6 @@ const props = defineProps<IProps>();
|
|
|
47
46
|
const showMore = ref<boolean>(false);
|
|
48
47
|
|
|
49
48
|
const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
|
|
50
|
-
console.log(props.name, 'show props name')
|
|
51
49
|
switch (props.name) {
|
|
52
50
|
case "error":
|
|
53
51
|
return {img: ErrorIcon, nameClass: "error"};
|
|
@@ -62,8 +60,7 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
|
|
|
62
60
|
}
|
|
63
61
|
});
|
|
64
62
|
</script>
|
|
65
|
-
|
|
66
|
-
<style lang="scss" scoped>
|
|
63
|
+
<style lang="scss">
|
|
67
64
|
.modal {
|
|
68
65
|
position: fixed;
|
|
69
66
|
top: 0;
|
|
@@ -75,6 +72,11 @@ const getTypeModal = computed<{ img: any; nameClass: string }>(() => {
|
|
|
75
72
|
align-items: center;
|
|
76
73
|
background: rgba(0, 0, 0, 0.2);
|
|
77
74
|
z-index: 9999;
|
|
75
|
+
}
|
|
76
|
+
</style>
|
|
77
|
+
|
|
78
|
+
<style lang="scss" scoped>
|
|
79
|
+
.modal {
|
|
78
80
|
|
|
79
81
|
&-button-close {
|
|
80
82
|
width: 12px;
|
|
@@ -12,7 +12,6 @@ export default {
|
|
|
12
12
|
app.config.globalProperties.$modal = {
|
|
13
13
|
open(name: IModalType, options: IModalState) {
|
|
14
14
|
modalStore.openModal(name, options); // Открытие модалки через Pinia
|
|
15
|
-
console.log("Current modals:", modalStore.modals);
|
|
16
15
|
},
|
|
17
16
|
close(id: number) {
|
|
18
17
|
modalStore.closeModal(id); // Закрытие модалки через Pinia
|
|
@@ -29,9 +28,8 @@ export default {
|
|
|
29
28
|
(newModals) => {
|
|
30
29
|
// Очищаем контейнер
|
|
31
30
|
modalContainer.innerHTML = "";
|
|
32
|
-
|
|
33
31
|
// Обновляем data-атрибут и класс
|
|
34
|
-
if (newModals.length >
|
|
32
|
+
if (newModals.length > 0) {
|
|
35
33
|
modalContainer.classList.add("modal");
|
|
36
34
|
} else {
|
|
37
35
|
modalContainer.classList.remove("modal");
|
|
@@ -61,7 +59,6 @@ export default {
|
|
|
61
59
|
);
|
|
62
60
|
// ✅ Добавляем ОДИН обработчик клика по фону
|
|
63
61
|
modalContainer.addEventListener("click", (event) => {
|
|
64
|
-
console.log("click on background", modalStore.modals.length);
|
|
65
62
|
|
|
66
63
|
if (modalStore.modals.length > 0) {
|
|
67
64
|
const lastModal = modalStore.modals[modalStore.modals.length - 1];
|
package/src/store/modal.ts
CHANGED
|
@@ -12,10 +12,8 @@ export const useModalStore = defineStore('modal', {
|
|
|
12
12
|
name,
|
|
13
13
|
options,
|
|
14
14
|
});
|
|
15
|
-
console.log('Modal added:', this.modals);
|
|
16
15
|
},
|
|
17
16
|
closeModal(id: number) {
|
|
18
|
-
console.log('Modal removed:', this.modals);
|
|
19
17
|
this.modals = this.modals.filter((modal) => modal.id !== id);
|
|
20
18
|
},
|
|
21
19
|
},
|