@natachah/vanilla-frontend 0.2.9 → 0.4.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/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/comfort.html +14 -2
- package/docs/pages/quick-start/customization.html +115 -87
- package/docs/pages/quick-start/mixins.html +22 -54
- package/docs/src/js/demo.js +7 -1
- package/docs/src/js/doc-layout.js +13 -9
- package/docs/vite.config.mjs +1 -1
- package/js/_comfort.js +17 -0
- package/js/tests/autofill.test.js +8 -0
- package/js/tests/comfort.test.js +32 -2
- package/js/tests/consent.test.js +4 -0
- package/js/tests/dialog.test.js +4 -1
- package/js/tests/dropdown.test.js +4 -0
- package/js/tests/form-helper.test.js +2 -2
- package/js/tests/scroll.test.js +21 -6
- package/js/tests/slider.test.js +19 -2
- package/js/tests/sortable.test.js +8 -0
- package/js/tests/tabpanel.test.js +4 -0
- package/js/tests/toggle.test.js +4 -0
- package/js/tests/trap.test.js +4 -0
- package/js/tests/tree.test.js +10 -10
- package/natachah-vanilla-frontend-0.4.0.tgz +0 -0
- package/package.json +7 -7
- package/scss/abstracts/_mixins.scss +58 -87
- package/scss/base/_layout.scss +61 -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 -4
- package/scss/vanilla-frontend-doc.scss +34 -0
- package/vitest.config.js +2 -1
- package/docs/pages/test.html +0 -15
- package/natachah-vanilla-frontend-0.2.9.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>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
</doc-code>
|
|
39
39
|
<doc-code id="css" data-type="css" role="tabpanel">
|
|
40
40
|
html[data-theme=dark] {
|
|
41
|
-
|
|
41
|
+
background: black
|
|
42
42
|
}
|
|
43
43
|
</doc-code>
|
|
44
44
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
</doc-code>
|
|
71
71
|
<doc-code id="css" data-type="css" role="tabpanel">
|
|
72
72
|
body {
|
|
73
|
-
|
|
73
|
+
font-size: var(--font-size)
|
|
74
74
|
}
|
|
75
75
|
</doc-code>
|
|
76
76
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
@@ -80,6 +80,18 @@
|
|
|
80
80
|
</doc-code>
|
|
81
81
|
</div>
|
|
82
82
|
|
|
83
|
+
<p>You can also set a custom style by value with some <code><input></code> tag with the <code>data-style-custom="NameOfTheCSSProperty"</code> and <code>value</code> attributes.</p>
|
|
84
|
+
<doc-demo>
|
|
85
|
+
<label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
|
|
86
|
+
<input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color" />
|
|
87
|
+
<button id="resetConfort">Reset</button>
|
|
88
|
+
</doc-demo>
|
|
89
|
+
|
|
90
|
+
<doc-code data-type="html">
|
|
91
|
+
<label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
|
|
92
|
+
<input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color" />
|
|
93
|
+
</doc-code>
|
|
94
|
+
|
|
83
95
|
<h2>Javascript</h2>
|
|
84
96
|
<p>To enable this component you need to import the javascript file and create a new Comfort object.</p>
|
|
85
97
|
<p>You can customize the name of the <b>cookie</b> when initiate the component.</p>
|
|
@@ -28,71 +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
|
-
|
|
95
|
-
|
|
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
|
+
}
|
|
96
134
|
|
|
97
135
|
}
|
|
98
136
|
</doc-code>
|
|
@@ -104,20 +142,20 @@
|
|
|
104
142
|
// This is the light theme (or if there is none)
|
|
105
143
|
html[data-theme=light],
|
|
106
144
|
html:not([data-theme]) {
|
|
107
|
-
|
|
108
|
-
|
|
145
|
+
--color-body: white;
|
|
146
|
+
--color-font: black;
|
|
109
147
|
}
|
|
110
148
|
|
|
111
149
|
// This is for the dark theme
|
|
112
150
|
html[data-theme=dark] {
|
|
113
|
-
|
|
114
|
-
|
|
151
|
+
--color-body: black;
|
|
152
|
+
--color-font: white;
|
|
115
153
|
}
|
|
116
154
|
|
|
117
155
|
// This is for the dark theme
|
|
118
156
|
html[data-theme=my-custom-theme] {
|
|
119
|
-
|
|
120
|
-
|
|
157
|
+
--color-body: white;
|
|
158
|
+
--color-font: orange;
|
|
121
159
|
}
|
|
122
160
|
</doc-code>
|
|
123
161
|
|
|
@@ -127,28 +165,18 @@
|
|
|
127
165
|
|
|
128
166
|
<h2>SCSS options</h2>
|
|
129
167
|
|
|
130
|
-
<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>
|
|
131
169
|
|
|
132
|
-
<
|
|
133
|
-
<li><code>$color-variations</code> enable color variation for components</li>
|
|
134
|
-
<li><code>$outline-variations</code>> enable outline variation for components</li>
|
|
135
|
-
<li><code>$default-item-properties</code>> define the default properties to use for items <em>(see mixins)</em></li>
|
|
136
|
-
</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>
|
|
137
171
|
|
|
138
|
-
<p>
|
|
172
|
+
<p>There is 3 component sthat use this:</p>
|
|
139
173
|
|
|
140
174
|
<doc-code data-type="scss">
|
|
141
|
-
@use
|
|
142
|
-
$colors: (
|
|
143
|
-
primary,
|
|
144
|
-
danger
|
|
145
|
-
)
|
|
146
|
-
);
|
|
147
|
-
@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);
|
|
148
178
|
</doc-code>
|
|
149
179
|
|
|
150
|
-
<p>You can do the same with the default file <code>@natachah/vanilla-frontend/scss/abstracts/_default.scss</code></p>
|
|
151
|
-
|
|
152
180
|
</doc-layout>
|
|
153
181
|
<script type="module" src="/main.js"></script>
|
|
154
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
|
|
package/docs/src/js/demo.js
CHANGED
|
@@ -57,7 +57,13 @@ const checkboxAll = document.getElementById('demoCheckboxAll')
|
|
|
57
57
|
if (checkboxAll) new CheckAll(checkboxAll)
|
|
58
58
|
|
|
59
59
|
import Comfort from "./../../../js/_comfort"
|
|
60
|
-
new Comfort('demo-confort')
|
|
60
|
+
const demoConfort = new Comfort('demo-confort')
|
|
61
|
+
|
|
62
|
+
if (document.getElementById('resetConfort')) {
|
|
63
|
+
document.getElementById('resetConfort').addEventListener('click', () => {
|
|
64
|
+
demoConfort.reset()
|
|
65
|
+
})
|
|
66
|
+
}
|
|
61
67
|
|
|
62
68
|
import Consent from "./../../../js/_consent"
|
|
63
69
|
if (document.getElementById('demoCookies')) {
|
|
@@ -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.4.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/docs/vite.config.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import { fileURLToPath } from 'node:url'
|
|
|
6
6
|
export default defineConfig({
|
|
7
7
|
build: {
|
|
8
8
|
target: 'esnext', //browsers can handle the latest ES features
|
|
9
|
-
cssCodeSplit:
|
|
9
|
+
cssCodeSplit: true,
|
|
10
10
|
rollupOptions: {
|
|
11
11
|
input: Object.fromEntries(
|
|
12
12
|
glob.sync(['./*.html', './pages/**/*.html']).map(file => [
|
package/js/_comfort.js
CHANGED
|
@@ -30,6 +30,10 @@ export default class Comfort extends Cookie {
|
|
|
30
30
|
style: document.querySelectorAll('body [data-style]'),
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
this._inputs = {
|
|
34
|
+
style: document.querySelectorAll('body [data-style-custom]'),
|
|
35
|
+
}
|
|
36
|
+
|
|
33
37
|
// Init the cookie
|
|
34
38
|
this.#init()
|
|
35
39
|
|
|
@@ -54,6 +58,9 @@ export default class Comfort extends Cookie {
|
|
|
54
58
|
// CLICK on style buttons
|
|
55
59
|
this._buttons.style.forEach((button) => button.addEventListener('click', () => this.setStyle(button.getAttribute('data-style'), button.value)))
|
|
56
60
|
|
|
61
|
+
// Change a value input
|
|
62
|
+
this._inputs.style.forEach((input) => input.addEventListener('change', () => this.setStyle(input.getAttribute('data-style-custom'), input.value)))
|
|
63
|
+
|
|
57
64
|
}
|
|
58
65
|
|
|
59
66
|
/**
|
|
@@ -99,6 +106,12 @@ export default class Comfort extends Cookie {
|
|
|
99
106
|
button.setAttribute('aria-pressed', style.hasOwnProperty(attribute) && style[attribute] === button.value)
|
|
100
107
|
})
|
|
101
108
|
|
|
109
|
+
// Set the value attribute on the <input>
|
|
110
|
+
this._inputs.style.forEach(input => {
|
|
111
|
+
const attribute = input.getAttribute('data-style-custom')
|
|
112
|
+
input.setAttribute('value', style.hasOwnProperty(attribute) ? style[attribute] : null)
|
|
113
|
+
})
|
|
114
|
+
|
|
102
115
|
}
|
|
103
116
|
|
|
104
117
|
/**
|
|
@@ -168,6 +181,10 @@ export default class Comfort extends Cookie {
|
|
|
168
181
|
button.removeAttribute('aria-pressed')
|
|
169
182
|
})
|
|
170
183
|
|
|
184
|
+
this._inputs.style.forEach(input => {
|
|
185
|
+
input.removeAttribute('value')
|
|
186
|
+
})
|
|
187
|
+
|
|
171
188
|
}
|
|
172
189
|
|
|
173
190
|
}
|
|
@@ -133,6 +133,10 @@ describe('#Init()', () => {
|
|
|
133
133
|
|
|
134
134
|
describe('#ByOption()', () => {
|
|
135
135
|
|
|
136
|
+
beforeEach(() => {
|
|
137
|
+
vi.restoreAllMocks()
|
|
138
|
+
})
|
|
139
|
+
|
|
136
140
|
test('Emmit the autofill:changed event', () => {
|
|
137
141
|
const eventSpy = vi.spyOn(fakeAutofillSelect, 'emmitEvent')
|
|
138
142
|
expect(eventSpy).not.toHaveBeenCalled()
|
|
@@ -144,6 +148,10 @@ describe('#ByOption()', () => {
|
|
|
144
148
|
|
|
145
149
|
describe('#ByFile()', () => {
|
|
146
150
|
|
|
151
|
+
beforeEach(() => {
|
|
152
|
+
vi.restoreAllMocks()
|
|
153
|
+
})
|
|
154
|
+
|
|
147
155
|
test('Emmit the autofill:changed event', () => {
|
|
148
156
|
const fakeImage = new File(["my testing file"], "my-file.jpg", {
|
|
149
157
|
type: "image/jpeg",
|