@dargmuesli/nuxt-cookie-control 5.0.0-beta.1 → 5.0.0-beta.2
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/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/components/CookieControl.vue +11 -12
- package/dist/runtime/styles.css +98 -47
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { resolve } from 'node:path';
|
|
|
2
2
|
import { createResolver, defineNuxtModule, addPlugin, addImports, addTemplate, extendWebpackConfig, resolvePath } from '@nuxt/kit';
|
|
3
3
|
|
|
4
4
|
const name = "@dargmuesli/nuxt-cookie-control";
|
|
5
|
-
const version = "5.0.0-beta.
|
|
5
|
+
const version = "5.0.0-beta.2";
|
|
6
6
|
|
|
7
7
|
const en = {
|
|
8
8
|
accept: "Accept",
|
|
@@ -52,14 +52,14 @@
|
|
|
52
52
|
v-text="localeStrings?.settingsUnsaved"
|
|
53
53
|
/>
|
|
54
54
|
<div class="cookieControl__ModalContent">
|
|
55
|
-
<div>
|
|
55
|
+
<div class="cookieControl__ModalContentInner">
|
|
56
56
|
<slot name="modal" />
|
|
57
57
|
<button
|
|
58
58
|
class="cookieControl__ModalClose"
|
|
59
59
|
@click="isModalActive = false"
|
|
60
60
|
v-text="localeStrings?.close"
|
|
61
61
|
/>
|
|
62
|
-
<
|
|
62
|
+
<template v-for="cookieType in CookieType" :key="cookieType">
|
|
63
63
|
<template v-if="moduleOptions.cookies[cookieType].length">
|
|
64
64
|
<h3
|
|
65
65
|
v-text="
|
|
@@ -80,14 +80,14 @@
|
|
|
80
80
|
cookieType === CookieType.NECESSARY &&
|
|
81
81
|
cookie.name !== 'functional'
|
|
82
82
|
"
|
|
83
|
-
:id="resolveTranslatable(cookie.name)"
|
|
83
|
+
:id="resolveTranslatable(cookie.name, props.locale)"
|
|
84
84
|
type="checkbox"
|
|
85
85
|
disabled
|
|
86
86
|
checked
|
|
87
87
|
/>
|
|
88
88
|
<input
|
|
89
89
|
v-else
|
|
90
|
-
:id="resolveTranslatable(cookie.name)"
|
|
90
|
+
:id="resolveTranslatable(cookie.name, props.locale)"
|
|
91
91
|
type="checkbox"
|
|
92
92
|
:checked="
|
|
93
93
|
getCookieIds(localCookiesEnabled).includes(
|
|
@@ -102,7 +102,9 @@
|
|
|
102
102
|
"
|
|
103
103
|
@change="toogleCookie(cookie)"
|
|
104
104
|
/>
|
|
105
|
-
<label
|
|
105
|
+
<label
|
|
106
|
+
:for="resolveTranslatable(cookie.name, props.locale)"
|
|
107
|
+
>
|
|
106
108
|
{{ getName(cookie.name) }}
|
|
107
109
|
</label>
|
|
108
110
|
<span class="cookieControl__ModalCookieName">
|
|
@@ -128,7 +130,7 @@
|
|
|
128
130
|
</li>
|
|
129
131
|
</ul>
|
|
130
132
|
</template>
|
|
131
|
-
</
|
|
133
|
+
</template>
|
|
132
134
|
<div class="cookieControl__ModalButtons">
|
|
133
135
|
<button
|
|
134
136
|
@click="
|
|
@@ -176,7 +178,7 @@ import {
|
|
|
176
178
|
getCookieIds,
|
|
177
179
|
removeCookie,
|
|
178
180
|
setCookie,
|
|
179
|
-
|
|
181
|
+
resolveTranslatable,
|
|
180
182
|
} from '../methods'
|
|
181
183
|
|
|
182
184
|
import { useCookieControl } from '#imports'
|
|
@@ -195,7 +197,6 @@ const {
|
|
|
195
197
|
isModalActive,
|
|
196
198
|
moduleOptions,
|
|
197
199
|
} = useCookieControl()
|
|
198
|
-
const resolveTranslatable = useResolveTranslatable(props.locale)
|
|
199
200
|
|
|
200
201
|
// data
|
|
201
202
|
const expires = new Date()
|
|
@@ -254,13 +255,11 @@ const toogleCookie = (cookie: Cookie) => {
|
|
|
254
255
|
const getDescription = (description: Translatable) =>
|
|
255
256
|
`${
|
|
256
257
|
moduleOptions.isDashInDescriptionEnabled === false ? '' : '-'
|
|
257
|
-
} ${resolveTranslatable(description)}`
|
|
258
|
+
} ${resolveTranslatable(description, props.locale)}`
|
|
258
259
|
const getName = (name: Translatable) => {
|
|
259
260
|
return name === 'functional'
|
|
260
261
|
? localeStrings.value?.cookiesFunctional
|
|
261
|
-
:
|
|
262
|
-
? name
|
|
263
|
-
: name[props.locale]
|
|
262
|
+
: resolveTranslatable(name, props.locale)
|
|
264
263
|
}
|
|
265
264
|
const init = () => {
|
|
266
265
|
expires.setTime(expires.getTime() + moduleOptions.cookieExpiryOffsetMs)
|
package/dist/runtime/styles.css
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
.cookieControl__Modal-enter-active,
|
|
1
|
+
.cookieControl__Modal-enter-active,
|
|
2
|
+
.cookieControl__Modal-leave-active {
|
|
2
3
|
transition: opacity 0.25s;
|
|
3
4
|
}
|
|
4
|
-
.cookieControl__Modal-enter,
|
|
5
|
+
.cookieControl__Modal-enter,
|
|
6
|
+
.cookieControl__Modal-leave-to {
|
|
5
7
|
opacity: 0;
|
|
6
8
|
}
|
|
7
9
|
.cookieControl__Bar--center {
|
|
@@ -9,16 +11,40 @@
|
|
|
9
11
|
left: 50%;
|
|
10
12
|
transform: translate(-50%, -50%);
|
|
11
13
|
}
|
|
12
|
-
.cookieControl__Bar--center-enter-active,
|
|
14
|
+
.cookieControl__Bar--center-enter-active,
|
|
15
|
+
.cookieControl__Bar--top-left-enter-active,
|
|
16
|
+
.cookieControl__Bar--top-full-enter-active,
|
|
17
|
+
.cookieControl__Bar--top-right-enter-active,
|
|
18
|
+
.cookieControl__Bar--bottom-left-enter-active,
|
|
19
|
+
.cookieControl__Bar--bottom-full-enter-active,
|
|
20
|
+
.cookieControl__Bar--bottom-right-enter-active,
|
|
21
|
+
.cookieControl__Bar--center-leave-active,
|
|
22
|
+
.cookieControl__Bar--top-left-leave-active,
|
|
23
|
+
.cookieControl__Bar--top-full-leave-active,
|
|
24
|
+
.cookieControl__Bar--top-right-leave-active,
|
|
25
|
+
.cookieControl__Bar--bottom-left-leave-active,
|
|
26
|
+
.cookieControl__Bar--bottom-full-leave-active,
|
|
27
|
+
.cookieControl__Bar--bottom-right-leave-active {
|
|
13
28
|
transition: transform 0.25s;
|
|
14
29
|
}
|
|
15
|
-
.cookieControl__Bar--top-left-enter,
|
|
30
|
+
.cookieControl__Bar--top-left-enter,
|
|
31
|
+
.cookieControl__Bar--top-full-enter,
|
|
32
|
+
.cookieControl__Bar--top-right-enter,
|
|
33
|
+
.cookieControl__Bar--top-left-leave-to,
|
|
34
|
+
.cookieControl__Bar--top-full-leave-to,
|
|
35
|
+
.cookieControl__Bar--top-right-leave-to {
|
|
16
36
|
transform: translateY(-100%);
|
|
17
37
|
}
|
|
18
|
-
.cookieControl__Bar--bottom-left-enter,
|
|
38
|
+
.cookieControl__Bar--bottom-left-enter,
|
|
39
|
+
.cookieControl__Bar--bottom-full-enter,
|
|
40
|
+
.cookieControl__Bar--bottom-right-enter,
|
|
41
|
+
.cookieControl__Bar--bottom-left-leave-to,
|
|
42
|
+
.cookieControl__Bar--bottom-right-leave-to,
|
|
43
|
+
.cookieControl__Bar--bottom-full-leave-to {
|
|
19
44
|
transform: translateY(100%);
|
|
20
45
|
}
|
|
21
|
-
.cookieControl__Bar--center-enter,
|
|
46
|
+
.cookieControl__Bar--center-enter,
|
|
47
|
+
.cookieControl__Bar--center-leave-to {
|
|
22
48
|
transform: translate(-50%, -50%) scale(0.95);
|
|
23
49
|
}
|
|
24
50
|
.cookieControl {
|
|
@@ -37,9 +63,10 @@
|
|
|
37
63
|
.cookieControl__Bar {
|
|
38
64
|
position: fixed;
|
|
39
65
|
background-color: var(--cookie-control-barBackground);
|
|
40
|
-
font-family: Arial,
|
|
66
|
+
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
41
67
|
}
|
|
42
|
-
.cookieControl__Bar h3,
|
|
68
|
+
.cookieControl__Bar h3,
|
|
69
|
+
.cookieControl__Bar p {
|
|
43
70
|
color: var(--cookie-control-barTextColor);
|
|
44
71
|
max-width: 900px;
|
|
45
72
|
}
|
|
@@ -68,7 +95,8 @@
|
|
|
68
95
|
align-items: flex-end;
|
|
69
96
|
justify-content: space-between;
|
|
70
97
|
}
|
|
71
|
-
.cookieControl__Bar--top-full,
|
|
98
|
+
.cookieControl__Bar--top-full,
|
|
99
|
+
.cookieControl__Bar--bottom-full {
|
|
72
100
|
left: 0;
|
|
73
101
|
right: 0;
|
|
74
102
|
}
|
|
@@ -78,25 +106,41 @@
|
|
|
78
106
|
.cookieControl__Bar--bottom-full {
|
|
79
107
|
bottom: 0;
|
|
80
108
|
}
|
|
81
|
-
.cookieControl__Bar--center p,
|
|
109
|
+
.cookieControl__Bar--center p,
|
|
110
|
+
.cookieControl__Bar--top-left p,
|
|
111
|
+
.cookieControl__Bar--top-right p,
|
|
112
|
+
.cookieControl__Bar--bottom-left p,
|
|
113
|
+
.cookieControl__Bar--bottom-right p {
|
|
82
114
|
max-width: 400px;
|
|
83
115
|
}
|
|
84
|
-
.cookieControl__Bar--center .cookieControl__BarContainer,
|
|
116
|
+
.cookieControl__Bar--center .cookieControl__BarContainer,
|
|
117
|
+
.cookieControl__Bar--top-left .cookieControl__BarContainer,
|
|
118
|
+
.cookieControl__Bar--top-right .cookieControl__BarContainer,
|
|
119
|
+
.cookieControl__Bar--bottom-left .cookieControl__BarContainer,
|
|
120
|
+
.cookieControl__Bar--bottom-right .cookieControl__BarContainer {
|
|
85
121
|
flex-direction: column;
|
|
86
122
|
}
|
|
87
|
-
.cookieControl__Bar--center .cookieControl__BarButtons,
|
|
123
|
+
.cookieControl__Bar--center .cookieControl__BarButtons,
|
|
124
|
+
.cookieControl__Bar--top-left .cookieControl__BarButtons,
|
|
125
|
+
.cookieControl__Bar--top-right .cookieControl__BarButtons,
|
|
126
|
+
.cookieControl__Bar--bottom-left .cookieControl__BarButtons,
|
|
127
|
+
.cookieControl__Bar--bottom-right .cookieControl__BarButtons {
|
|
88
128
|
margin-top: 20px;
|
|
89
129
|
}
|
|
90
|
-
.cookieControl__Bar--top-left,
|
|
130
|
+
.cookieControl__Bar--top-left,
|
|
131
|
+
.cookieControl__Bar--top-right {
|
|
91
132
|
top: 20px;
|
|
92
133
|
}
|
|
93
|
-
.cookieControl__Bar--bottom-left,
|
|
134
|
+
.cookieControl__Bar--bottom-left,
|
|
135
|
+
.cookieControl__Bar--bottom-right {
|
|
94
136
|
bottom: 20px;
|
|
95
137
|
}
|
|
96
|
-
.cookieControl__Bar--top-left,
|
|
138
|
+
.cookieControl__Bar--top-left,
|
|
139
|
+
.cookieControl__Bar--bottom-left {
|
|
97
140
|
left: 20px;
|
|
98
141
|
}
|
|
99
|
-
.cookieControl__Bar--top-right,
|
|
142
|
+
.cookieControl__Bar--top-right,
|
|
143
|
+
.cookieControl__Bar--bottom-right {
|
|
100
144
|
right: 20px;
|
|
101
145
|
}
|
|
102
146
|
.cookieControl__BarButtons {
|
|
@@ -113,14 +157,14 @@
|
|
|
113
157
|
text-align: center;
|
|
114
158
|
}
|
|
115
159
|
.cookieControl__Modal:before {
|
|
116
|
-
content:
|
|
160
|
+
content: '';
|
|
117
161
|
min-height: 100vh;
|
|
118
162
|
display: inline-block;
|
|
119
163
|
vertical-align: middle;
|
|
120
164
|
}
|
|
121
165
|
.cookieControl__Modal:after {
|
|
122
166
|
position: absolute;
|
|
123
|
-
content:
|
|
167
|
+
content: '';
|
|
124
168
|
top: 0;
|
|
125
169
|
left: 0;
|
|
126
170
|
right: 0;
|
|
@@ -131,7 +175,6 @@
|
|
|
131
175
|
}
|
|
132
176
|
.cookieControl__Modal > div {
|
|
133
177
|
font-size: initial;
|
|
134
|
-
padding-top: 80px;
|
|
135
178
|
}
|
|
136
179
|
.cookieControl__Modal button {
|
|
137
180
|
color: var(--cookie-control-modalButtonColor);
|
|
@@ -159,7 +202,7 @@
|
|
|
159
202
|
}
|
|
160
203
|
.cookieControl__ModalContent h3 {
|
|
161
204
|
font-size: 24px;
|
|
162
|
-
margin:
|
|
205
|
+
margin: 15px 0px;
|
|
163
206
|
}
|
|
164
207
|
.cookieControl__ModalContent h3:first-of-type {
|
|
165
208
|
margin-top: 0;
|
|
@@ -211,7 +254,7 @@
|
|
|
211
254
|
}
|
|
212
255
|
.cookieControl__ModalContent label:before {
|
|
213
256
|
position: absolute;
|
|
214
|
-
content:
|
|
257
|
+
content: '';
|
|
215
258
|
top: 50%;
|
|
216
259
|
left: 3px;
|
|
217
260
|
width: 15px;
|
|
@@ -221,6 +264,11 @@
|
|
|
221
264
|
transform: translate3d(0, -50%, 0);
|
|
222
265
|
background-color: var(--cookie-control-checkboxInactiveCircleBackground);
|
|
223
266
|
}
|
|
267
|
+
.cookieControl__ModalContentInner {
|
|
268
|
+
display: flex;
|
|
269
|
+
flex-direction: column;
|
|
270
|
+
gap: 10px;
|
|
271
|
+
}
|
|
224
272
|
.cookieControl__ModalInputWrapper {
|
|
225
273
|
display: flex;
|
|
226
274
|
align-items: flex-start;
|
|
@@ -234,17 +282,15 @@
|
|
|
234
282
|
text-transform: none;
|
|
235
283
|
}
|
|
236
284
|
.cookieControl__ModalClose {
|
|
237
|
-
|
|
285
|
+
align-self: flex-end;
|
|
238
286
|
top: 20px;
|
|
239
287
|
right: 20px;
|
|
240
288
|
}
|
|
241
289
|
.cookieControl__ModalButtons {
|
|
242
290
|
display: flex;
|
|
243
|
-
margin-top:
|
|
244
|
-
align-items:
|
|
245
|
-
|
|
246
|
-
.cookieControl__ModalButtons button + button {
|
|
247
|
-
margin-left: 20px;
|
|
291
|
+
margin-top: 40px;
|
|
292
|
+
align-items: stretch;
|
|
293
|
+
gap: 20px;
|
|
248
294
|
}
|
|
249
295
|
.cookieControl__ModalUnsaved {
|
|
250
296
|
position: absolute;
|
|
@@ -259,24 +305,30 @@
|
|
|
259
305
|
padding: 20px;
|
|
260
306
|
border: 2px solid #ddd;
|
|
261
307
|
}
|
|
262
|
-
.cookieControl__BlockedIframe p,
|
|
263
|
-
|
|
308
|
+
.cookieControl__BlockedIframe p,
|
|
309
|
+
.cookieControl__BlockedIframe a {
|
|
310
|
+
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
264
311
|
}
|
|
265
312
|
@media screen and (max-width: 768px) {
|
|
266
313
|
.cookieControl__Bar {
|
|
267
314
|
flex-direction: column;
|
|
268
315
|
left: 0;
|
|
269
316
|
right: 0;
|
|
270
|
-
|
|
271
|
-
.cookieControl__Bar p,
|
|
317
|
+
}
|
|
318
|
+
.cookieControl__Bar p,
|
|
319
|
+
.cookieControl__Bar h3 {
|
|
272
320
|
max-width: 100%;
|
|
273
|
-
|
|
274
|
-
.cookieControl__Bar--top-full,
|
|
321
|
+
}
|
|
322
|
+
.cookieControl__Bar--top-full,
|
|
323
|
+
.cookieControl__Bar--top-left,
|
|
324
|
+
.cookieControl__Bar--top-right {
|
|
275
325
|
top: 0;
|
|
276
|
-
|
|
277
|
-
.cookieControl__Bar--bottom-full,
|
|
326
|
+
}
|
|
327
|
+
.cookieControl__Bar--bottom-full,
|
|
328
|
+
.cookieControl__Bar--bottom-left,
|
|
329
|
+
.cookieControl__Bar--bottom-right {
|
|
278
330
|
bottom: 0;
|
|
279
|
-
|
|
331
|
+
}
|
|
280
332
|
.cookieControl__ModalContent {
|
|
281
333
|
position: absolute;
|
|
282
334
|
top: 0;
|
|
@@ -285,29 +337,28 @@
|
|
|
285
337
|
bottom: 0;
|
|
286
338
|
max-width: none;
|
|
287
339
|
max-height: 100%;
|
|
288
|
-
padding:
|
|
289
|
-
|
|
340
|
+
padding: 20px;
|
|
341
|
+
}
|
|
290
342
|
.cookieControl__BarButtons {
|
|
291
343
|
width: 100%;
|
|
292
344
|
margin-top: 20px;
|
|
293
345
|
flex-direction: column;
|
|
294
346
|
justify-content: center;
|
|
295
|
-
|
|
347
|
+
}
|
|
296
348
|
.cookieControl__BarButtons button {
|
|
297
349
|
width: 100%;
|
|
298
|
-
|
|
350
|
+
}
|
|
299
351
|
.cookieControl__BarButtons button + button {
|
|
300
352
|
margin: 10px 0 0;
|
|
301
|
-
|
|
302
|
-
.cookieControl__BarContainer,
|
|
353
|
+
}
|
|
354
|
+
.cookieControl__BarContainer,
|
|
355
|
+
.cookieControl__ModalButtons {
|
|
303
356
|
flex-direction: column;
|
|
304
|
-
|
|
357
|
+
gap: 0;
|
|
358
|
+
}
|
|
305
359
|
.cookieControl__ModalButtons button {
|
|
306
360
|
width: 100%;
|
|
307
|
-
|
|
308
|
-
.cookieControl__ModalButtons button + button {
|
|
309
|
-
margin: 10px 0 0;
|
|
310
|
-
}
|
|
361
|
+
}
|
|
311
362
|
}
|
|
312
363
|
.cookieControl__ControlButton {
|
|
313
364
|
position: fixed;
|