@natachah/vanilla-frontend 0.2.6 → 0.2.8
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/.gitlab-ci.yml +5 -1
- package/docs/pages/components/dialog.html +15 -15
- package/docs/pages/javascript/consent.html +6 -6
- package/docs/pages/javascript/tabpanel.html +7 -7
- package/docs/src/js/doc-layout.js +1 -1
- package/js/_dialog.js +8 -0
- package/natachah-vanilla-frontend-0.2.8.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +21 -3
- package/natachah-vanilla-frontend-0.2.6.tgz +0 -0
package/.gitlab-ci.yml
CHANGED
|
@@ -41,8 +41,12 @@ publish-job:
|
|
|
41
41
|
environment: production
|
|
42
42
|
rules:
|
|
43
43
|
- if: $CI_COMMIT_REF_NAME == "production"
|
|
44
|
+
id_tokens:
|
|
45
|
+
NPM_ID_TOKEN:
|
|
46
|
+
aud: "npm:registry.npmjs.org"
|
|
47
|
+
SIGSTORE_ID_TOKEN:
|
|
48
|
+
aud: sigstore
|
|
44
49
|
script:
|
|
45
|
-
- echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > .npmrc
|
|
46
50
|
- echo "Fichiers dans le répertoire public avant publication :"
|
|
47
51
|
- ls -R public
|
|
48
52
|
- npm pack
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
|
|
27
27
|
<doc-demo>
|
|
28
28
|
<button aria-controls="demoDialog">Open the dialog</button>
|
|
29
|
-
<dialog id="demoDialog" class="demo-dialog">
|
|
30
|
-
<h3
|
|
29
|
+
<dialog id="demoDialog" class="demo-dialog" aria-labelledby="demoDialogTitle">
|
|
30
|
+
<h3 title="demoDialogTitle">Hey this is a dialog as non-modal !</h3>
|
|
31
31
|
<p>Hello there !</p>
|
|
32
32
|
<button data-dialog-close>Close the dialog</button>
|
|
33
33
|
</dialog>
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
</div>
|
|
43
43
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
44
44
|
<button aria-controls="myDialog">Open the dialog</button>
|
|
45
|
-
<dialog id="myDialog" aria-modal="true">
|
|
45
|
+
<dialog id="myDialog" aria-modal="true" aria-label="demo">
|
|
46
46
|
Content of the dialog
|
|
47
47
|
<button data-dialog-close>Close the dialog</button>
|
|
48
48
|
</dialog>
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
|
|
94
94
|
<doc-demo>
|
|
95
95
|
<button aria-controls="demoDialogLayout">Open the dialog</button>
|
|
96
|
-
<dialog id="demoDialogLayout" class="demo-dialog" aria-modal="true">
|
|
97
|
-
<header
|
|
96
|
+
<dialog id="demoDialogLayout" class="demo-dialog" aria-labelledby="demoDialogLayoutTitle" aria-modal="true">
|
|
97
|
+
<header id="demoDialogLayoutTitle">This is a header</header>
|
|
98
98
|
<div>
|
|
99
99
|
<p>This is the content</p>
|
|
100
100
|
<p>This dialog is a modal</p>
|
|
@@ -105,8 +105,8 @@
|
|
|
105
105
|
</doc-demo>
|
|
106
106
|
|
|
107
107
|
<doc-code>
|
|
108
|
-
<dialog id="myDialog" class="demo-dialog" aria-modal="true">
|
|
109
|
-
<header
|
|
108
|
+
<dialog id="myDialog" class="demo-dialog" aria-labelledby="myDialogTitle" aria-modal="true">
|
|
109
|
+
<header id="myDialogTitle">This is a header</header>
|
|
110
110
|
<div>
|
|
111
111
|
<p>This is the content</p>
|
|
112
112
|
<button data-dialog-close>Close</button>
|
|
@@ -121,8 +121,8 @@
|
|
|
121
121
|
|
|
122
122
|
<doc-demo>
|
|
123
123
|
<button aria-controls="demoDialogForm">Open the dialog</button>
|
|
124
|
-
<dialog id="demoDialogForm" class="demo-dialog" aria-modal="true">
|
|
125
|
-
<h3>Dialog with form</h3>
|
|
124
|
+
<dialog id="demoDialogForm" class="demo-dialog" aria-labelledby="demoDialogFormTitle" aria-modal="true">
|
|
125
|
+
<h3 id="demoDialogFormTitle">Dialog with form</h3>
|
|
126
126
|
<form method="POST">
|
|
127
127
|
<label for="animal">What is your favorite animal</label>
|
|
128
128
|
<input id="animal" type="text" name="animal" required>
|
|
@@ -134,8 +134,8 @@
|
|
|
134
134
|
|
|
135
135
|
<doc-code>
|
|
136
136
|
<button aria-controls="myDialog">Open the dialog</button>
|
|
137
|
-
<dialog id="myDialog" aria-modal="true">
|
|
138
|
-
<h3>Dialog with form</h3>
|
|
137
|
+
<dialog id="myDialog" aria-labelledby="demoDialogFormTitle" aria-modal="true">
|
|
138
|
+
<h3 id="myDialogTitle">Dialog with form</h3>
|
|
139
139
|
<form method="POST">
|
|
140
140
|
<label for="animal">What is your favorite animal</label>
|
|
141
141
|
<input id="animal" type="text" name="animal" required>
|
|
@@ -151,8 +151,8 @@
|
|
|
151
151
|
|
|
152
152
|
<doc-demo>
|
|
153
153
|
<button aria-controls="demoDialogFormJs">Open the dialog</button>
|
|
154
|
-
<dialog id="demoDialogFormJs" class="demo-dialog" aria-modal="true">
|
|
155
|
-
<h3>Dialog with form</h3>
|
|
154
|
+
<dialog id="demoDialogFormJs" class="demo-dialog" aria-labelledby="demoDialogFormJsTitle" aria-modal="true">
|
|
155
|
+
<h3 id="demoDialogFormJsTitle">Dialog with form</h3>
|
|
156
156
|
<form method="dialog">
|
|
157
157
|
<label for="animal">What is your favorite animal</label>
|
|
158
158
|
<input id="animal" type="text" name="animal" required>
|
|
@@ -170,8 +170,8 @@
|
|
|
170
170
|
</div>
|
|
171
171
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
172
172
|
<button aria-controls="myDialog">Open the dialog</button>
|
|
173
|
-
<dialog id="myDialog" aria-modal="true">
|
|
174
|
-
<h3>Dialog with form</h3>
|
|
173
|
+
<dialog id="myDialog" aria-labelledby="myDialogTitle" aria-modal="true">
|
|
174
|
+
<h3 id="myDialogTitle">Dialog with form</h3>
|
|
175
175
|
<form method="dialog">
|
|
176
176
|
<label for="animal">What is your favorite animal</label>
|
|
177
177
|
<input id="animal" type="text" name="animal" required>
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
<button role="tab" aria-controls="js">JS</button>
|
|
20
20
|
</div>
|
|
21
21
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
22
|
-
<dialog id="cookies">
|
|
22
|
+
<dialog id="cookies" aria-labelledby="cookiesTitle">
|
|
23
23
|
<div>
|
|
24
|
-
<h1>Cookies Consent</h1>
|
|
24
|
+
<h1 id="cookiesTitle">Cookies Consent</h1>
|
|
25
25
|
<p>This website use <b>ONLY</b> necessary cookies to ensure you get the best experience !</p>
|
|
26
26
|
<button data-dialog-close>Ok</button>
|
|
27
27
|
</div>
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
<p>You can save some preference (aka. custom values) by adding a <code><form></code> inside the <code><dialog></code>.</p>
|
|
40
40
|
<p>Make sure to have a <code><button></code> to <b>ONLY</b> save the necessary, and one to submit the form.</p>
|
|
41
41
|
<doc-code>
|
|
42
|
-
<dialog id="cookies">
|
|
43
|
-
<div>
|
|
42
|
+
<dialog id="cookies" aria-labelledby="cookiesTitle">
|
|
43
|
+
<div id="cookiesTitle">
|
|
44
44
|
<h1>Cookies Consent</h1>
|
|
45
45
|
<p><b>Accept:</b> will save the checkboxes</p>
|
|
46
46
|
<p><b>Decline:</b> will ONLY save the necessary</p>
|
|
@@ -75,10 +75,10 @@
|
|
|
75
75
|
|
|
76
76
|
</doc-layout>
|
|
77
77
|
|
|
78
|
-
<dialog id="demoCookies" aria-modal="true">
|
|
78
|
+
<dialog id="demoCookies" aria-labelledby="demoCookiesTitle" aria-modal="true">
|
|
79
79
|
<div>
|
|
80
80
|
|
|
81
|
-
<h1>
|
|
81
|
+
<h1 id="demoCookiesTitle">
|
|
82
82
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 122.25" xml:space="preserve">
|
|
83
83
|
<path d="M101.77,49.38c2.09,3.1,4.37,5.11,6.86,5.78c2.45,0.66,5.32,0.06,8.7-2.01c1.36-0.84,3.14-0.41,3.97,0.95 c0.28,0.46,0.42,0.96,0.43,1.47c0.13,1.4,0.21,2.82,0.24,4.26c0.03,1.46,0.02,2.91-0.05,4.35h0v0c0,0.13-0.01,0.26-0.03,0.38 c-0.91,16.72-8.47,31.51-20,41.93c-11.55,10.44-27.06,16.49-43.82,15.69v0.01h0c-0.13,0-0.26-0.01-0.38-0.03 c-16.72-0.91-31.51-8.47-41.93-20C5.31,90.61-0.73,75.1,0.07,58.34H0.07v0c0-0.13,0.01-0.26,0.03-0.38 C1,41.22,8.81,26.35,20.57,15.87C32.34,5.37,48.09-0.73,64.85,0.07V0.07h0c1.6,0,2.89,1.29,2.89,2.89c0,0.4-0.08,0.78-0.23,1.12 c-1.17,3.81-1.25,7.34-0.27,10.14c0.89,2.54,2.7,4.51,5.41,5.52c1.44,0.54,2.2,2.1,1.74,3.55l0.01,0 c-1.83,5.89-1.87,11.08-0.52,15.26c0.82,2.53,2.14,4.69,3.88,6.4c1.74,1.72,3.9,3,6.39,3.78c4.04,1.26,8.94,1.18,14.31-0.55 C99.73,47.78,101.08,48.3,101.77,49.38L101.77,49.38z M59.28,57.86c2.77,0,5.01,2.24,5.01,5.01c0,2.77-2.24,5.01-5.01,5.01 c-2.77,0-5.01-2.24-5.01-5.01C54.27,60.1,56.52,57.86,59.28,57.86L59.28,57.86z M37.56,78.49c3.37,0,6.11,2.73,6.11,6.11 s-2.73,6.11-6.11,6.11s-6.11-2.73-6.11-6.11S34.18,78.49,37.56,78.49L37.56,78.49z M50.72,31.75c2.65,0,4.79,2.14,4.79,4.79 c0,2.65-2.14,4.79-4.79,4.79c-2.65,0-4.79-2.14-4.79-4.79C45.93,33.89,48.08,31.75,50.72,31.75L50.72,31.75z M119.3,32.4 c1.98,0,3.58,1.6,3.58,3.58c0,1.98-1.6,3.58-3.58,3.58s-3.58-1.6-3.58-3.58C115.71,34.01,117.32,32.4,119.3,32.4L119.3,32.4z M93.62,22.91c2.98,0,5.39,2.41,5.39,5.39c0,2.98-2.41,5.39-5.39,5.39c-2.98,0-5.39-2.41-5.39-5.39 C88.23,25.33,90.64,22.91,93.62,22.91L93.62,22.91z M97.79,0.59c3.19,0,5.78,2.59,5.78,5.78c0,3.19-2.59,5.78-5.78,5.78 c-3.19,0-5.78-2.59-5.78-5.78C92.02,3.17,94.6,0.59,97.79,0.59L97.79,0.59z M76.73,80.63c4.43,0,8.03,3.59,8.03,8.03 c0,4.43-3.59,8.03-8.03,8.03s-8.03-3.59-8.03-8.03C68.7,84.22,72.29,80.63,76.73,80.63L76.73,80.63z M31.91,46.78 c4.8,0,8.69,3.89,8.69,8.69c0,4.8-3.89,8.69-8.69,8.69s-8.69-3.89-8.69-8.69C23.22,50.68,27.11,46.78,31.91,46.78L31.91,46.78z M107.13,60.74c-3.39-0.91-6.35-3.14-8.95-6.48c-5.78,1.52-11.16,1.41-15.76-0.02c-3.37-1.05-6.32-2.81-8.71-5.18 c-2.39-2.37-4.21-5.32-5.32-8.75c-1.51-4.66-1.69-10.2-0.18-16.32c-3.1-1.8-5.25-4.53-6.42-7.88c-1.06-3.05-1.28-6.59-0.61-10.35 C47.27,5.95,34.3,11.36,24.41,20.18C13.74,29.69,6.66,43.15,5.84,58.29l0,0.05v0h0l-0.01,0.13v0C5.07,73.72,10.55,87.82,20.02,98.3 c9.44,10.44,22.84,17.29,38,18.1l0.05,0h0v0l0.13,0.01h0c15.24,0.77,29.35-4.71,39.83-14.19c10.44-9.44,17.29-22.84,18.1-38l0-0.05 v0h0l0.01-0.13v0c0.07-1.34,0.09-2.64,0.06-3.91C112.98,61.34,109.96,61.51,107.13,60.74L107.13,60.74z M116.15,64.04L116.15,64.04 L116.15,64.04L116.15,64.04z M58.21,116.42L58.21,116.42L58.21,116.42L58.21,116.42z" />
|
|
84
84
|
</svg>
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
</div>
|
|
24
24
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
25
25
|
<div id="myPanel">
|
|
26
|
-
<div role="tablist">
|
|
27
|
-
<button role="tab" aria-controls="one">One</button>
|
|
28
|
-
<button role="tab" aria-controls="two">Two</button>
|
|
26
|
+
<div role="tablist" aria-label="My demo tabpanel">
|
|
27
|
+
<button id="tab-1" role="tab" aria-controls="one">One</button>
|
|
28
|
+
<button id="tab-2" role="tab" aria-controls="two">Two</button>
|
|
29
29
|
</div>
|
|
30
|
-
<div id="one" role="tabpanel">
|
|
30
|
+
<div id="one" role="tabpanel" aria-labelledby="tab-1">
|
|
31
31
|
This is the first panel
|
|
32
32
|
</div>
|
|
33
|
-
<div id="two" role="tabpanel">
|
|
33
|
+
<div id="two" role="tabpanel" aria-labelledby="tab-2">
|
|
34
34
|
This is the seconde panel
|
|
35
35
|
</div>
|
|
36
36
|
</div>
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
<doc-code data-type="js">
|
|
77
77
|
const myPanel = document.getElementById('myPanel')
|
|
78
78
|
myPanel.addEventListener('tabpanel:changed', (e) => {
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
const thecurrentButton = e.detail.current
|
|
80
|
+
console.log('It has changed !')
|
|
81
81
|
})
|
|
82
82
|
</doc-code>
|
|
83
83
|
|
|
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
|
|
|
18
18
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
|
|
19
19
|
<path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
|
|
20
20
|
</svg>
|
|
21
|
-
0.2.
|
|
21
|
+
0.2.8
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
package/js/_dialog.js
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -74,14 +74,32 @@
|
|
|
74
74
|
// State: focus
|
|
75
75
|
@if(list.index($states, 'focus')) {
|
|
76
76
|
|
|
77
|
+
@if(list.index($states, 'hover')) {
|
|
78
|
+
|
|
79
|
+
&:focus,
|
|
80
|
+
&:focus-visible {
|
|
81
|
+
color: var(--#{$name}-focus-color, var(--#{$name}-hover-color, $default-color));
|
|
82
|
+
background-color: var(--#{$name}-focus-background, var(--#{$name}-hover-background, $default-hover-background));
|
|
83
|
+
border-color: var(--#{$name}-focus-border-color, var(--#{$name}-hover-border-color, $default-border-color));
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@else {
|
|
88
|
+
|
|
89
|
+
&:focus,
|
|
90
|
+
&:focus-visible {
|
|
91
|
+
color: var(--#{$name}-focus-color, $default-color);
|
|
92
|
+
background-color: var(--#{$name}-focus-background, $default-hover-background);
|
|
93
|
+
border-color: var(--#{$name}-focus-border-color, $default-border-color);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
77
97
|
&:focus,
|
|
78
98
|
&:focus-visible {
|
|
79
|
-
color: var(--#{$name}-focus-color, var(--#{$name}-hover-color, $default-color));
|
|
80
|
-
background-color: var(--#{$name}-focus-background, var(--#{$name}-hover-background, $default-hover-background));
|
|
81
|
-
border-color: var(--#{$name}-focus-border-color, var(--#{$name}-hover-border-color, $default-border-color));
|
|
82
99
|
outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, color-mix(in srgb, var(--#{$name}-border-color, currentcolor), transparent var(--outline-opacity)));
|
|
83
100
|
outline-offset: var(--#{$name}-outline-offset, var(--outline-offset));
|
|
84
101
|
}
|
|
102
|
+
|
|
85
103
|
}
|
|
86
104
|
|
|
87
105
|
// State: active
|
|
Binary file
|