@natachah/vanilla-frontend 0.2.8 → 0.3.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/docs/main-demo.js +2 -0
- package/docs/main.js +1 -1
- package/docs/pages/base/layout.html +131 -0
- package/docs/pages/base/media.html +2 -0
- package/docs/pages/components/button.html +9 -10
- package/docs/pages/components/disclosure.html +0 -139
- package/docs/pages/components/loading.html +4 -4
- package/docs/pages/{components → customs}/badge.html +4 -8
- package/docs/pages/{components → customs}/breadcrumb.html +1 -1
- package/docs/pages/{components → customs}/card.html +4 -8
- package/docs/pages/{components → customs}/list.html +0 -65
- package/docs/pages/{components → customs}/slider.html +14 -29
- package/docs/pages/demo/layout.html +85 -0
- package/docs/pages/javascript/toggle.html +4 -2
- package/docs/pages/quick-start/customization.html +115 -86
- package/docs/pages/quick-start/mixins.html +22 -54
- package/docs/src/js/doc-layout.js +13 -9
- package/js/_drawer.js +12 -0
- package/js/_toggle.js +12 -3
- package/js/tests/toggle.test.js +15 -9
- package/natachah-vanilla-frontend-0.3.0.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +58 -87
- package/scss/base/_layout.scss +61 -0
- package/scss/base/_media.scss +2 -0
- package/scss/base/_typography.scss +2 -2
- package/scss/base/index.scss +1 -0
- package/scss/components/_badge.scss +12 -0
- package/scss/components/_button.scss +12 -0
- package/scss/components/_card.scss +12 -0
- package/scss/components/_disclosure.scss +0 -3
- package/scss/components/index.scss +3 -3
- package/scss/themes/_root.scss +43 -3
- package/scss/vanilla-frontend-doc.scss +34 -0
- package/docs/pages/test.html +0 -15
- package/natachah-vanilla-frontend-0.2.8.tgz +0 -0
- package/scss/abstracts/_options.scss +0 -44
- /package/docs/pages/{components → customs}/drawer.html +0 -0
- /package/docs/pages/{components → customs}/dropdown.html +0 -0
- /package/docs/pages/{components → customs}/grid.html +0 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Layout > Demo</title>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
#content {
|
|
11
|
+
--subgrid-gap-block: 1rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.container-full {
|
|
15
|
+
background-color: #eee;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.subgrid>div {
|
|
19
|
+
grid-column: -1 / 1;
|
|
20
|
+
outline: 1px dashed #000;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@media (min-width: 720px) {
|
|
24
|
+
.subgrid>div {
|
|
25
|
+
grid-column: span 3;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (min-width: 1024px) {
|
|
30
|
+
.subgrid>div {
|
|
31
|
+
grid-column: span 6;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@media (min-width: 1440px) {}
|
|
36
|
+
</style>
|
|
37
|
+
|
|
38
|
+
</head>
|
|
39
|
+
|
|
40
|
+
<body data-preload>
|
|
41
|
+
|
|
42
|
+
<header>
|
|
43
|
+
<div class="container">
|
|
44
|
+
<p>The header !</p>
|
|
45
|
+
<a href="/pages/base/layout.html">Go back to documentation</a>
|
|
46
|
+
</div>
|
|
47
|
+
</header>
|
|
48
|
+
<main id="content">
|
|
49
|
+
|
|
50
|
+
<section class="container">
|
|
51
|
+
<h1>Classic container</h1>
|
|
52
|
+
<p>This is a demo for the default layout CSS that you can use as starter for your website !</p>
|
|
53
|
+
<p>This section as the <code>.container</code> to display is content into the center of the layout.</p>
|
|
54
|
+
</section>
|
|
55
|
+
|
|
56
|
+
<section class="container-full">
|
|
57
|
+
<h2>Full container</h2>
|
|
58
|
+
<p>This section as the <code>.container-full</code> to display is content into the full layout.</p>
|
|
59
|
+
</section>
|
|
60
|
+
|
|
61
|
+
<section class="container subgrid">
|
|
62
|
+
<div>
|
|
63
|
+
<h2>Classic container with subgrid</h2>
|
|
64
|
+
<p>You can add the <code>.subgrid</code> to a <code>.container</code> to re-use the layout grid.</p>
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
67
|
+
|
|
68
|
+
<section class="container-full subgrid">
|
|
69
|
+
<div>
|
|
70
|
+
<h2>Full container with subgrid</h2>
|
|
71
|
+
<p>You can add also the <code>.subgrid</code> to a <code>.container-full</code> to re-use the layout grid.</p>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
|
|
75
|
+
</main>
|
|
76
|
+
<footer>
|
|
77
|
+
<div class="container">
|
|
78
|
+
<p>The footer !</p>
|
|
79
|
+
</div>
|
|
80
|
+
</footer>
|
|
81
|
+
|
|
82
|
+
<script type="module" src="/main-demo.js"></script>
|
|
83
|
+
</body>
|
|
84
|
+
|
|
85
|
+
</html>
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
|
|
120
120
|
<p>The component also work with <code><select></code> and it support the <code><optgroup></code>.</p>
|
|
121
121
|
<doc-demo>
|
|
122
|
-
<select class="demo-toggle" name="select" aria-controls="selectA selectB selectG" aria-expanded="false">
|
|
122
|
+
<select class="demo-toggle" name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
|
|
123
123
|
<option value="null">--</option>
|
|
124
124
|
<option value="A">aaa</option>
|
|
125
125
|
<option value="B">bbb</option>
|
|
@@ -131,10 +131,11 @@
|
|
|
131
131
|
<div id="selectA" data-toggle-when="A" hidden>Hello there, I'm A !</div>
|
|
132
132
|
<div id="selectB" data-toggle-when="B" hidden>Hello there, I'm B !</div>
|
|
133
133
|
<div id="selectG" data-toggle-when="group" hidden>Hello there, I'm GROUP for C or D !</div>
|
|
134
|
+
<div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I'm present if not A !</div>
|
|
134
135
|
</doc-demo>
|
|
135
136
|
|
|
136
137
|
<doc-code>
|
|
137
|
-
<select name="select" aria-controls="selectA selectB selectG" aria-expanded="false">
|
|
138
|
+
<select name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
|
|
138
139
|
<option value="null">--</option>
|
|
139
140
|
<option value="A">aaa</option>
|
|
140
141
|
<option value="B">bbb</option>
|
|
@@ -147,6 +148,7 @@
|
|
|
147
148
|
<div id="selectA" data-toggle-when="A" hidden>Hello there, I'm A !</div>
|
|
148
149
|
<div id="selectB" data-toggle-when="B" hidden>Hello there, I'm B !</div>
|
|
149
150
|
<div id="selectG" data-toggle-when="mygroup" hidden>Hello there, I'm GROUP for C or D !</div>
|
|
151
|
+
<div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I'm present if not A !</div>
|
|
150
152
|
</doc-code>
|
|
151
153
|
|
|
152
154
|
<h2>Javascript</h2>
|
|
@@ -28,70 +28,109 @@
|
|
|
28
28
|
<doc-code data-type="css">
|
|
29
29
|
:root {
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
31
|
+
// Typography
|
|
32
|
+
--font-size: 16px;
|
|
33
|
+
--line-height: 1.5;
|
|
34
|
+
--font-family: Arial;
|
|
35
|
+
--font-weight: normal;
|
|
36
|
+
--font-weight-light: 300;
|
|
37
|
+
--font-weight-medium: 500;
|
|
38
|
+
--font-weight-bold: 600;
|
|
39
|
+
|
|
40
|
+
--font-size-h1: 2.25em; // 36px
|
|
41
|
+
--font-size-h2: 2.00em; // 32px
|
|
42
|
+
--font-size-h3: 1.75em; // 28px
|
|
43
|
+
--font-size-h4: 1.50em; // 24px
|
|
44
|
+
--font-size-h5: 1.25em; // 20px
|
|
45
|
+
--font-size-h6: 1.125em; // 18px
|
|
46
|
+
--font-size-large: 1.25em;
|
|
47
|
+
--font-size-medium: 1.125em;
|
|
48
|
+
--font-size-small: .875em;
|
|
49
|
+
|
|
50
|
+
// Anchor
|
|
51
|
+
--decoration: none;
|
|
52
|
+
|
|
53
|
+
// Layouts
|
|
54
|
+
--padding-inline: .75em;
|
|
55
|
+
--padding-block: .5em;
|
|
56
|
+
|
|
57
|
+
// Border
|
|
58
|
+
--border-size: 1px;
|
|
59
|
+
--border-style: solid;
|
|
60
|
+
--border-radius: .25rem;
|
|
61
|
+
|
|
62
|
+
// Outline (:focus)
|
|
63
|
+
--outline-size: 3px;
|
|
64
|
+
--outline-style: solid;
|
|
65
|
+
--outline-offset: 0;
|
|
66
|
+
//--outline-color: var(--color-primary); To override default behavior
|
|
67
|
+
|
|
68
|
+
// Backdrop
|
|
69
|
+
--backdrop-color: rgba(255, 255, 255, .5);
|
|
70
|
+
|
|
71
|
+
// Hover (color-mix)
|
|
72
|
+
--hover-color: black;
|
|
73
|
+
--hover-percent: 5%;
|
|
74
|
+
|
|
75
|
+
// Active (color-mix)
|
|
76
|
+
--active-color: black;
|
|
77
|
+
--active-percent: 10%;
|
|
78
|
+
|
|
79
|
+
// Focus (color-mix)
|
|
80
|
+
--focus-color: currentColor;
|
|
81
|
+
--focus-percent: 50%;
|
|
82
|
+
|
|
83
|
+
// Disabled
|
|
84
|
+
--disabled-opacity: 50%;
|
|
85
|
+
|
|
86
|
+
// Colors
|
|
87
|
+
--color-body: white;
|
|
88
|
+
--color-font: black;
|
|
89
|
+
--color-primary: #B790E5;
|
|
90
|
+
--color-error: #DC3030;
|
|
91
|
+
--color-success: #008A00;
|
|
92
|
+
--color-warning: #FFA500;
|
|
93
|
+
|
|
94
|
+
// Contrasts
|
|
95
|
+
--color-warning-contrast: black;
|
|
96
|
+
|
|
97
|
+
// Form
|
|
98
|
+
--form-border-color: currentColor;
|
|
99
|
+
--form-active-background: color-mix(in srgb, var(--form-background, transparent), var(--active-color, currentColor) 40%);
|
|
100
|
+
|
|
101
|
+
// Icons
|
|
102
|
+
--icon-external: url('data:image/svg+xml,...');
|
|
103
|
+
--icon-date: url('data:image/svg+xml,...');
|
|
104
|
+
--icon-time: url('data:image/svg+xml,...');
|
|
105
|
+
--icon-file: url('data:image/svg+xml,...');
|
|
106
|
+
--icon-select: url('data:image/svg+xml,...');
|
|
107
|
+
--icon-radio: url('data:image/svg+xml,...');
|
|
108
|
+
--icon-check: url('data:image/svg+xml,...');
|
|
109
|
+
--icon-switch: var(--icon-radio);
|
|
110
|
+
|
|
111
|
+
// Layout
|
|
112
|
+
--layout-width: 1280px;
|
|
113
|
+
--layout-gap-block: 1rem;
|
|
114
|
+
--layout-gap-inline: 1rem;
|
|
115
|
+
--layout-columns: 1;
|
|
116
|
+
|
|
117
|
+
@media (min-width: 720px) {
|
|
118
|
+
--layout-columns: 6;
|
|
119
|
+
--layout-gap-block: 1rem;
|
|
120
|
+
--layout-gap-inline: 1rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@media (min-width: 1024px) {
|
|
124
|
+
--layout-columns: 12;
|
|
125
|
+
--layout-gap-block: 2rem;
|
|
126
|
+
--layout-gap-inline: 2rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@media (min-width: 1440px) {
|
|
130
|
+
--layout-columns: 12;
|
|
131
|
+
--layout-gap-block: 4rem;
|
|
132
|
+
--layout-gap-inline: 2rem;
|
|
133
|
+
}
|
|
95
134
|
|
|
96
135
|
}
|
|
97
136
|
</doc-code>
|
|
@@ -103,20 +142,20 @@
|
|
|
103
142
|
// This is the light theme (or if there is none)
|
|
104
143
|
html[data-theme=light],
|
|
105
144
|
html:not([data-theme]) {
|
|
106
|
-
|
|
107
|
-
|
|
145
|
+
--color-body: white;
|
|
146
|
+
--color-font: black;
|
|
108
147
|
}
|
|
109
148
|
|
|
110
149
|
// This is for the dark theme
|
|
111
150
|
html[data-theme=dark] {
|
|
112
|
-
|
|
113
|
-
|
|
151
|
+
--color-body: black;
|
|
152
|
+
--color-font: white;
|
|
114
153
|
}
|
|
115
154
|
|
|
116
155
|
// This is for the dark theme
|
|
117
156
|
html[data-theme=my-custom-theme] {
|
|
118
|
-
|
|
119
|
-
|
|
157
|
+
--color-body: white;
|
|
158
|
+
--color-font: orange;
|
|
120
159
|
}
|
|
121
160
|
</doc-code>
|
|
122
161
|
|
|
@@ -126,28 +165,18 @@
|
|
|
126
165
|
|
|
127
166
|
<h2>SCSS options</h2>
|
|
128
167
|
|
|
129
|
-
<p>
|
|
168
|
+
<p>You can set custom settings with <code>@use "@natachah/vanilla-frontend/scss/components/..." with ( ... );.</code>. These custom values will override the default variables.</p>
|
|
130
169
|
|
|
131
|
-
<
|
|
132
|
-
<li><code>$color-variations</code> enable color variation for components</li>
|
|
133
|
-
<li><code>$outline-variations</code>> enable outline variation for components</li>
|
|
134
|
-
<li><code>$default-item-properties</code>> define the default properties to use for items <em>(see mixins)</em></li>
|
|
135
|
-
</ul>
|
|
170
|
+
<p>There is also a <code>$default-item-properties</code> to define the default properties to use for items <em>(see mixins)</em></p>
|
|
136
171
|
|
|
137
|
-
<p>
|
|
172
|
+
<p>There is 3 component sthat use this:</p>
|
|
138
173
|
|
|
139
174
|
<doc-code data-type="scss">
|
|
140
|
-
@use
|
|
141
|
-
$colors: (
|
|
142
|
-
primary,
|
|
143
|
-
danger
|
|
144
|
-
)
|
|
145
|
-
);
|
|
146
|
-
@use "@natachah/vanilla-frontend/scss/base";
|
|
175
|
+
@use "./components/badge" with ($colors: ('primary'), $outline: true);
|
|
176
|
+
@use "./components/button" with ($colors: ('primary'), $outline: true);
|
|
177
|
+
@use "./components/card" with ($colors: ('primary'), $outline: true);
|
|
147
178
|
</doc-code>
|
|
148
179
|
|
|
149
|
-
<p>You can do the same with the default file <code>@natachah/vanilla-frontend/scss/abstracts/_default.scss</code></p>
|
|
150
|
-
|
|
151
180
|
</doc-layout>
|
|
152
181
|
<script type="module" src="/main.js"></script>
|
|
153
182
|
</body>
|
|
@@ -45,8 +45,6 @@
|
|
|
45
45
|
@include as-item($name, $states: (), $properties: default.$item-properties)
|
|
46
46
|
</doc-code>
|
|
47
47
|
|
|
48
|
-
<p>This mixin also include the <b>outline</b> and <b>color</b> variations. It also create some CSS custom properties with the <code>$name</code> value as <code>--{$name}-color</code> with fallback values from the <code>$properties</code>.</p>
|
|
49
|
-
|
|
50
48
|
<blockquote class="warning">
|
|
51
49
|
<p>The default properties are set inside the <code>default.$item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
|
|
52
50
|
</blockquote>
|
|
@@ -93,65 +91,35 @@
|
|
|
93
91
|
|
|
94
92
|
<p>This mixin will create the <code>.outline</code> class to transform an item to the outline varation.</p>
|
|
95
93
|
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
/// @param {string} $name - Name of the component
|
|
106
|
-
/// @param {array} $states - List of interactions
|
|
107
|
-
/// @param {string} $color - The initial color of the item (used for color, border and :hover background)
|
|
108
|
-
/// @param {string} $contrast - The initial contrast color of the item (:hover color)
|
|
109
|
-
/// @access public
|
|
110
|
-
///
|
|
111
|
-
|
|
112
|
-
@include with-outline-variations($name, $states: (), $color: var(--#{$name}-background, var(--color-font)), $contrast: var(--#{$name}-color, var(--color-body)))
|
|
113
|
-
</doc-code>
|
|
114
|
-
<doc-code id="setting" data-type="scss" role="tabpanel">
|
|
115
|
-
$outline-variations: (
|
|
116
|
-
my-component-name
|
|
117
|
-
);
|
|
118
|
-
</doc-code>
|
|
119
|
-
</div>
|
|
94
|
+
<doc-code id="scss" data-type="scss" >
|
|
95
|
+
/// Create some outline variations
|
|
96
|
+
///
|
|
97
|
+
/// @param {string} $name - Name of the component
|
|
98
|
+
/// @param {array} $states - List of interactions
|
|
99
|
+
/// @param {string} $color - The color of the item
|
|
100
|
+
/// @param {string} $contrast - The color contrast of the item
|
|
101
|
+
/// @access public
|
|
102
|
+
///
|
|
120
103
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
</blockquote>
|
|
104
|
+
@include with-outline-variation($name, $states: (), $color: var(--color-font), $contrast: var(--color-body))
|
|
105
|
+
</doc-code>
|
|
124
106
|
|
|
125
107
|
<h2>Set color variation</h2>
|
|
126
108
|
|
|
127
109
|
<p>This mixin will create the <code>.COLOR</code> classes to transform an item to multiple color variations.</p>
|
|
128
110
|
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
/// @param {string} $name - Name of the component
|
|
139
|
-
/// @param {boolean} @param {array} $states - List of interactions
|
|
140
|
-
/// @access public
|
|
141
|
-
///
|
|
142
|
-
|
|
143
|
-
@include with-color-variations($name, $states: ())
|
|
144
|
-
</doc-code>
|
|
145
|
-
<doc-code id="setting" data-type="scss" role="tabpanel">
|
|
146
|
-
$color-variations: (
|
|
147
|
-
my-component-name: (primary, other-color)
|
|
148
|
-
);
|
|
149
|
-
</doc-code>
|
|
150
|
-
</div>
|
|
111
|
+
<doc-code id="scss" data-type="scss">
|
|
112
|
+
/// Create some color variations
|
|
113
|
+
///
|
|
114
|
+
/// @param {string} $name - Name of the component
|
|
115
|
+
/// @param {array} $states - List of interactions
|
|
116
|
+
/// @param {array} $colors - List of colors
|
|
117
|
+
/// @param {boolean} $withOutline - Thit outline colored version
|
|
118
|
+
/// @access public
|
|
119
|
+
///
|
|
151
120
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
</blockquote>
|
|
121
|
+
@include with-color-variations($name, $states: (), $colors: (), $withOutline: true)
|
|
122
|
+
</doc-code>
|
|
155
123
|
|
|
156
124
|
<h2>Transform table to be responsive</h2>
|
|
157
125
|
|
|
@@ -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.
|
|
21
|
+
0.3.0v
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
|
@@ -58,27 +58,31 @@ class DocLayout extends HTMLElement {
|
|
|
58
58
|
<h2>Base</h2>
|
|
59
59
|
<ul>
|
|
60
60
|
<li><a href="/pages/base/reset.html">Reset</a></li>
|
|
61
|
+
<li><a href="/pages/base/layout.html">Layout</a></li>
|
|
61
62
|
<li><a href="/pages/base/typography.html">Typography</a></li>
|
|
62
63
|
<li><a href="/pages/base/media.html">Media</a></li>
|
|
63
64
|
</ul>
|
|
64
65
|
<h2>Components</h2>
|
|
65
66
|
<ul>
|
|
66
|
-
<li><a href="/pages/components/badge.html">Badge</a></li>
|
|
67
|
-
<li><a href="/pages/components/breadcrumb.html">Breadcrumb</a></li>
|
|
68
67
|
<li><a href="/pages/components/button.html">Button</a></li>
|
|
69
|
-
<li><a href="/pages/components/card.html">Card</a></li>
|
|
70
68
|
<li><a href="/pages/components/dialog.html">Dialog</a></li>
|
|
71
69
|
<li><a href="/pages/components/disclosure.html">Disclosure</a></li>
|
|
72
|
-
<li><a href="/pages/components/drawer.html">Drawer</a></li>
|
|
73
|
-
<li><a href="/pages/components/dropdown.html">Dropdown</a></li>
|
|
74
70
|
<li><a href="/pages/components/form.html">Form</a></li>
|
|
75
|
-
<li><a href="/pages/components/grid.html">Grid</a></li>
|
|
76
|
-
<li><a href="/pages/components/list.html">List</a></li>
|
|
77
71
|
<li><a href="/pages/components/loading.html">Loading</a></li>
|
|
78
72
|
<li><a href="/pages/components/progress.html">Progress</a></li>
|
|
79
|
-
<li><a href="/pages/components/slider.html">Slider</a></li>
|
|
80
73
|
<li><a href="/pages/components/table.html">Table</a></li>
|
|
81
74
|
</ul>
|
|
75
|
+
<h2>Custom components</h2>
|
|
76
|
+
<ul>
|
|
77
|
+
<li><a href="/pages/customs/badge.html">Badge</a></li>
|
|
78
|
+
<li><a href="/pages/customs/breadcrumb.html">Breadcrumb</a></li>
|
|
79
|
+
<li><a href="/pages/customs/card.html">Card</a></li>
|
|
80
|
+
<li><a href="/pages/customs/drawer.html">Drawer</a></li>
|
|
81
|
+
<li><a href="/pages/customs/dropdown.html">Dropdown</a></li>
|
|
82
|
+
<li><a href="/pages/customs/grid.html">Grid</a></li>
|
|
83
|
+
<li><a href="/pages/customs/list.html">List</a></li>
|
|
84
|
+
<li><a href="/pages/customs/slider.html">Slider</a></li>
|
|
85
|
+
</ul>
|
|
82
86
|
<h2>Javascript</h2>
|
|
83
87
|
<ul>
|
|
84
88
|
<li><a href="/pages/javascript/autofill.html">Autofill</a></li>
|
package/js/_drawer.js
CHANGED
|
@@ -92,6 +92,14 @@ export default class Drawer extends BaseComponent {
|
|
|
92
92
|
// On click on the backdrop, close the drawer
|
|
93
93
|
if (this._backdrop) this._backdrop.addEventListener('click', () => this.toggle())
|
|
94
94
|
|
|
95
|
+
// On esc close
|
|
96
|
+
this._element.addEventListener('keydown', (e) => {
|
|
97
|
+
if (e.key === 'Escape') {
|
|
98
|
+
e.preventDefault()
|
|
99
|
+
this.toggle(false)
|
|
100
|
+
}
|
|
101
|
+
})
|
|
102
|
+
|
|
95
103
|
}
|
|
96
104
|
|
|
97
105
|
defineDrawerByBreakpoint() {
|
|
@@ -114,8 +122,12 @@ export default class Drawer extends BaseComponent {
|
|
|
114
122
|
this._element.removeAttribute('role')
|
|
115
123
|
this._element.removeAttribute('aria-modal')
|
|
116
124
|
|
|
125
|
+
// Deactivate the trap
|
|
126
|
+
this._trap.deactivate()
|
|
127
|
+
|
|
117
128
|
// The drawer should be cookie or open
|
|
118
129
|
drawerStatus = this._cookie ? this._cookie.get('drawer-is-open') : true
|
|
130
|
+
|
|
119
131
|
}
|
|
120
132
|
|
|
121
133
|
if (drawerStatus != this._isOpen) this.toggle(drawerStatus)
|
package/js/_toggle.js
CHANGED
|
@@ -92,16 +92,25 @@ export default class Toggle extends BaseComponent {
|
|
|
92
92
|
toggle() {
|
|
93
93
|
|
|
94
94
|
// Define the group value for <select>
|
|
95
|
-
const
|
|
95
|
+
const selectedOption = this._element.options?.[this._element.selectedIndex]
|
|
96
|
+
const groupValue = (this._type === 'select' && selectedOption) ? (selectedOption.parentElement.label ?? null) : null
|
|
96
97
|
|
|
97
98
|
// Check for each toggables elements
|
|
98
99
|
this._toggables.forEach(toggable => {
|
|
99
100
|
|
|
100
101
|
// Define if there is a [data-toggle-when] attribute, otherwise check on the true value
|
|
101
|
-
|
|
102
|
+
let toggleValue = toggable.getAttribute('data-toggle-when') ?? null
|
|
103
|
+
|
|
104
|
+
// Define if there a [data-toggle-when-not] attribute
|
|
105
|
+
const toggleNotValue = toggable.getAttribute('data-toggle-when-not') ?? null
|
|
102
106
|
|
|
103
107
|
// Toggle the [hidden] attribute
|
|
104
|
-
|
|
108
|
+
if (this.value !== 'null' && toggleNotValue !== null) {
|
|
109
|
+
toggable.hidden = toggleNotValue === this.value
|
|
110
|
+
} else {
|
|
111
|
+
toggleValue = toggleValue ?? 'true'
|
|
112
|
+
toggable.hidden = this.value !== toggleValue && groupValue !== toggleValue
|
|
113
|
+
}
|
|
105
114
|
|
|
106
115
|
if (!toggable.hidden) {
|
|
107
116
|
const focus = toggable.getAttribute('tabindex') === '0' ? toggable : toggable.querySelector('[tabindex="0"]') ?? toggable.querySelector('button, a, input')
|
package/js/tests/toggle.test.js
CHANGED
|
@@ -38,16 +38,17 @@ beforeAll(() => {
|
|
|
38
38
|
'<input id="fakeRadioB" type="radio" name="fake-radio" aria-controls="fakeCollapseRadioB" aria-expanded="false">' +
|
|
39
39
|
'<div id="fakeCollapseRadioA" hidden></div>' +
|
|
40
40
|
'<div id="fakeCollapseRadioB" hidden></div>' +
|
|
41
|
-
'<select id="fakeSelect" aria-controls="fakeCollapseSelectA fakeCollapseSelectB
|
|
41
|
+
'<select id="fakeSelect" aria-controls="fakeCollapseSelectA fakeCollapseSelectB fakeCollapseSelectG fakeCollapseSelectN" aria-expanded="false">' +
|
|
42
42
|
'<option value="null"></option>' +
|
|
43
43
|
'<option value="A"></option>' +
|
|
44
|
-
'<optgroup label="
|
|
44
|
+
'<optgroup label="group">' +
|
|
45
45
|
'<option value="B"></option>' +
|
|
46
46
|
'</optgroup>' +
|
|
47
47
|
'</select>' +
|
|
48
48
|
'<div id="fakeCollapseSelectA" data-toggle-when="A" hidden></div>' +
|
|
49
49
|
'<div id="fakeCollapseSelectB" data-toggle-when="B" hidden></div>' +
|
|
50
|
-
'<div id="fakeCollapseSelectG" data-toggle-when="
|
|
50
|
+
'<div id="fakeCollapseSelectG" data-toggle-when="group" hidden></div>' +
|
|
51
|
+
'<div id="fakeCollapseSelectN" data-toggle-when-not="A" hidden></div>'
|
|
51
52
|
|
|
52
53
|
fakeToggleButton = new Toggle(document.getElementById('fakeButton'))
|
|
53
54
|
fakeToggleCheckbox = new Toggle(document.getElementById('fakeCheckbox'))
|
|
@@ -67,7 +68,7 @@ describe('Structure of the class', () => {
|
|
|
67
68
|
expect(fakeToggleRadioA._type).toBe('radio')
|
|
68
69
|
expect(fakeToggleSelect._type).toBe('select')
|
|
69
70
|
expect(fakeToggleButton._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapse')])
|
|
70
|
-
expect(fakeToggleSelect._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapseSelectA, #fakeCollapseSelectB, #
|
|
71
|
+
expect(fakeToggleSelect._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapseSelectA, #fakeCollapseSelectB, #fakeCollapseSelectG, #fakeCollapseSelectN')])
|
|
71
72
|
})
|
|
72
73
|
|
|
73
74
|
})
|
|
@@ -160,22 +161,27 @@ describe('#Toggle()', () => {
|
|
|
160
161
|
test('Toggle the [hidden] attribute on the <div>', () => {
|
|
161
162
|
const divA = document.getElementById('fakeCollapseSelectA')
|
|
162
163
|
const divB = document.getElementById('fakeCollapseSelectB')
|
|
163
|
-
const
|
|
164
|
+
const divG = document.getElementById('fakeCollapseSelectG')
|
|
165
|
+
const divN = document.getElementById('fakeCollapseSelectN')
|
|
164
166
|
expect(divA.hidden).toBeTruthy()
|
|
165
167
|
expect(divB.hidden).toBeTruthy()
|
|
166
|
-
expect(
|
|
168
|
+
expect(divG.hidden).toBeTruthy()
|
|
169
|
+
expect(divN.hidden).toBeTruthy()
|
|
167
170
|
fireEvent.change(fakeToggleSelect._element, { target: { value: 'A' } })
|
|
168
171
|
expect(divA.hidden).toBeFalsy()
|
|
169
172
|
expect(divB.hidden).toBeTruthy()
|
|
170
|
-
expect(
|
|
173
|
+
expect(divG.hidden).toBeTruthy()
|
|
174
|
+
expect(divN.hidden).toBeTruthy()
|
|
171
175
|
fireEvent.change(fakeToggleSelect._element, { target: { value: 'B' } })
|
|
172
176
|
expect(divA.hidden).toBeTruthy()
|
|
173
177
|
expect(divB.hidden).toBeFalsy()
|
|
174
|
-
expect(
|
|
178
|
+
expect(divG.hidden).toBeFalsy()
|
|
179
|
+
expect(divN.hidden).toBeFalsy()
|
|
175
180
|
fireEvent.change(fakeToggleSelect._element, { target: { value: 'null' } })
|
|
176
181
|
expect(divA.hidden).toBeTruthy()
|
|
177
182
|
expect(divB.hidden).toBeTruthy()
|
|
178
|
-
expect(
|
|
183
|
+
expect(divG.hidden).toBeTruthy()
|
|
184
|
+
expect(divN.hidden).toBeTruthy()
|
|
179
185
|
})
|
|
180
186
|
|
|
181
187
|
})
|
|
Binary file
|