@markout-lang/bootstrap-kit 0.2.1 → 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/README.md +33 -17
- package/package.json +4 -1
- package/parts/accordion.htm +8 -8
- package/parts/alert.htm +6 -6
- package/parts/badge.htm +4 -4
- package/parts/base.htm +15 -15
- package/parts/breadcrumb.htm +3 -3
- package/parts/button.htm +33 -33
- package/parts/card.htm +17 -17
- package/parts/carousel.htm +9 -9
- package/parts/check.htm +26 -26
- package/parts/collapse.htm +6 -6
- package/parts/dropdown.htm +10 -10
- package/parts/image.htm +11 -11
- package/parts/input.htm +49 -32
- package/parts/list-group.htm +6 -6
- package/parts/modal.htm +13 -13
- package/parts/nav.htm +11 -11
- package/parts/navbar.htm +21 -10
- package/parts/offcanvas.htm +11 -11
- package/parts/pagination.htm +10 -10
- package/parts/placeholder.htm +5 -5
- package/parts/popover.htm +6 -6
- package/parts/progress.htm +10 -10
- package/parts/scrollspy.htm +7 -7
- package/parts/select.htm +13 -13
- package/parts/spinner.htm +5 -5
- package/parts/table.htm +13 -13
- package/parts/theme.htm +4 -4
- package/parts/toast.htm +14 -14
- package/parts/tooltip.htm +5 -5
package/README.md
CHANGED
|
@@ -65,24 +65,24 @@ all of them.
|
|
|
65
65
|
**Parameters for the chrome, the slot for the content.** What a card *has* —
|
|
66
66
|
a title, a footer, an image — is a parameter. What it *contains* is slotted.
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
**`::extra` adds classes.** A `class` written at a usage site *replaces* the
|
|
69
69
|
one a definition sets, which is the language's rule and not something this
|
|
70
|
-
kit overrides. So every component takes
|
|
70
|
+
kit overrides. So every component takes `::extra` for the utility classes a
|
|
71
71
|
caller wants on top:
|
|
72
72
|
|
|
73
73
|
```html
|
|
74
|
-
<bs-alert
|
|
74
|
+
<bs-alert ::variant="warning" ::extra="mb-0">Careful</bs-alert>
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
**Comments in a tag: `//` for one line, `/* … */` for more.** Both are
|
|
78
78
|
stripped at parse time. A run of `//` lines reads as a stack of fragments;
|
|
79
79
|
one block says it once.
|
|
80
80
|
|
|
81
|
-
**Lists are arrays.**
|
|
81
|
+
**Lists are arrays.** `::items`, `::options`, `::columns`, `::rows`, `::slides`.
|
|
82
82
|
The default value of each is the shape it expects — read the definition to
|
|
83
83
|
see it.
|
|
84
84
|
|
|
85
|
-
**Callbacks are values, not events.**
|
|
85
|
+
**Callbacks are values, not events.** `::select`, `::check` and `::link` are
|
|
86
86
|
functions the component calls. `:on-click` and friends stay what they are in
|
|
87
87
|
the language: DOM events.
|
|
88
88
|
|
|
@@ -95,19 +95,32 @@ and a plugin left holding a removed element leaves its backdrop, its popper
|
|
|
95
95
|
and the page's scroll lock behind.
|
|
96
96
|
|
|
97
97
|
**Values are read and written.** `bs-input`, `bs-select`, `bs-check`,
|
|
98
|
-
`bs-range`, `bs-modal`, `bs-offcanvas` and `bs-toast` keep
|
|
99
|
-
|
|
98
|
+
`bs-range`, `bs-modal`, `bs-offcanvas` and `bs-toast` keep `::value` or
|
|
99
|
+
`::open` in step with what is on screen. Name the instance and read it from
|
|
100
100
|
anywhere:
|
|
101
101
|
|
|
102
102
|
```html
|
|
103
|
-
<bs-input :aka="email"
|
|
104
|
-
<bs-button
|
|
103
|
+
<bs-input :aka="email" ::label="Email" ::type="email" />
|
|
104
|
+
<bs-button ::disabled=${!email.value}>Send</bs-button>
|
|
105
105
|
```
|
|
106
106
|
|
|
107
107
|
That holds however deeply the component sits: a `bs-toast :aka="saved"`
|
|
108
108
|
written inside a `bs-toast-container` is still named where you wrote it, so
|
|
109
109
|
`saved.open = true` reaches it from anywhere on the page.
|
|
110
110
|
|
|
111
|
+
`bs-input` and `bs-textarea` answer `valid` the same way -- is there a value,
|
|
112
|
+
and does it pass `check`? -- which is what a submit button needs:
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<bs-input :aka="email" ::label="Email" ::check=${v => v.includes('@')} />
|
|
116
|
+
<bs-button ::disabled=${!email.valid}>Send</bs-button>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
It is not the negation of the error state. An empty field is not marked
|
|
120
|
+
wrong, which is what keeps a form from opening in red, and it is not
|
|
121
|
+
something to submit either -- so it shows nothing and answers `false`.
|
|
122
|
+
`required` is what makes empty an error as well as a gap.
|
|
123
|
+
|
|
111
124
|
**Optional regions are `:if`.** A region that exists only when a parameter
|
|
112
125
|
was given is written `:if=${header}`, and nothing inside it evaluates while
|
|
113
126
|
the condition is false — which is what makes `${user.name}` safe to write in
|
|
@@ -142,7 +155,7 @@ it binds the item as `data`. The kit has no use for it: every optional region
|
|
|
142
155
|
here renders a parameter it already has a name for.
|
|
143
156
|
|
|
144
157
|
Optional parts of a component are parameters, and a named slot where markup
|
|
145
|
-
belongs — `bs-card`'s header is both:
|
|
158
|
+
belongs — `bs-card`'s header is both: `::header` sets the text, and a
|
|
146
159
|
`:slot="header"` replaces it with markup. A `<:slot>` may sit inside a
|
|
147
160
|
`:for-data` but not inside a `:for-each`, which is what makes that possible.
|
|
148
161
|
|
|
@@ -152,10 +165,10 @@ The CDN URLs and their hashes are tokens like any other, so a page points the
|
|
|
152
165
|
kit at its own copy without forking `base.htm`:
|
|
153
166
|
|
|
154
167
|
```html
|
|
155
|
-
<head
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
168
|
+
<head :const-bsCssUrl="/vendor/bootstrap.min.css"
|
|
169
|
+
:const-bsJsUrl="/vendor/bootstrap.bundle.min.js"
|
|
170
|
+
:const-bsCssIntegrity=${null}
|
|
171
|
+
:const-bsJsIntegrity=${null}>
|
|
159
172
|
<:import src="/bootstrap-kit/all.htm" />
|
|
160
173
|
</head>
|
|
161
174
|
```
|
|
@@ -188,7 +201,7 @@ Four reasons this is worth having rather than a convenience:
|
|
|
188
201
|
variables, so restyling everything is setting one value at the import site:
|
|
189
202
|
|
|
190
203
|
```html
|
|
191
|
-
<head
|
|
204
|
+
<head :const-bsRadius="1rem" :const-bsLinkDecoration="none">
|
|
192
205
|
<:import src="/bootstrap-kit/all.htm" />
|
|
193
206
|
</head>
|
|
194
207
|
```
|
|
@@ -207,7 +220,7 @@ flashes the wrong mode, and `<bs-theme-toggle />` to switch it.
|
|
|
207
220
|
|
|
208
221
|
## Components
|
|
209
222
|
|
|
210
|
-
Every tag also takes
|
|
223
|
+
Every tag also takes `::extra`. Defaults are in the definitions, which are
|
|
211
224
|
commented.
|
|
212
225
|
|
|
213
226
|
### Content
|
|
@@ -230,6 +243,9 @@ commented.
|
|
|
230
243
|
| `bs-range` | `label` `name` `min` `max` `step` `value` `disabled` `showValue` |
|
|
231
244
|
| `bs-input-group` | `prefix` `suffix` `size` |
|
|
232
245
|
|
|
246
|
+
`bs-input` and `bs-textarea` also answer `valid`, which is read rather than
|
|
247
|
+
passed -- see *Values are read and written* above.
|
|
248
|
+
|
|
233
249
|
### Components
|
|
234
250
|
|
|
235
251
|
| Tag | Parameters |
|
|
@@ -277,7 +293,7 @@ Bootstrap, and each says so in its own file:
|
|
|
277
293
|
cannot reach it by name. `$host` is the instance it was slotted *into* —
|
|
278
294
|
the one place the kit needs the structural relationship rather than the
|
|
279
295
|
lexical one. No id is written by anyone.
|
|
280
|
-
- **`bs-pagination` says
|
|
296
|
+
- **`bs-pagination` says `::current`, not `::page`.** `page` is already the
|
|
281
297
|
name of `<html>`'s own scope, so a parameter of that name would resolve to
|
|
282
298
|
the scope rather than to the number.
|
|
283
299
|
- **`bs-tooltip` and `bs-popover` construct their plugin from a
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@markout-lang/bootstrap-kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Bootstrap 5.3 as Markout components: one part per component, with the id wiring, the ARIA attributes and the repetition written once",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -11,6 +11,9 @@
|
|
|
11
11
|
"url": "https://github.com/fcapolini/markout/issues"
|
|
12
12
|
},
|
|
13
13
|
"homepage": "https://markout.dev",
|
|
14
|
+
"peerDependencies": {
|
|
15
|
+
"@markout-lang/core": "^0.5.0"
|
|
16
|
+
},
|
|
14
17
|
"markout": {
|
|
15
18
|
"root": "/bootstrap-kit"
|
|
16
19
|
},
|
package/parts/accordion.htm
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
markup belongs in a slot rather than in an array.
|
|
7
7
|
|
|
8
8
|
<bs-accordion>
|
|
9
|
-
<bs-accordion-item
|
|
10
|
-
<bs-accordion-item
|
|
9
|
+
<bs-accordion-item ::title="First" ::open>…</bs-accordion-item>
|
|
10
|
+
<bs-accordion-item ::title="Second">…</bs-accordion-item>
|
|
11
11
|
</bs-accordion>
|
|
12
12
|
|
|
13
13
|
The item needs one thing from the accordion — the id Bootstrap closes the
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
class="accordion ${extra ?? ''}"
|
|
29
29
|
|
|
30
30
|
// parameters
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
::extra=${null} // extra classes for this instance
|
|
32
|
+
::exclusive=${true} // one open panel at a time
|
|
33
|
+
::flush=${false}
|
|
34
34
|
|
|
35
35
|
/*
|
|
36
36
|
private: the id the items point at. Owned here rather than
|
|
@@ -48,9 +48,9 @@
|
|
|
48
48
|
class="accordion-item ${extra ?? ''}"
|
|
49
49
|
|
|
50
50
|
// parameters
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
::extra=${null} // extra classes for this instance
|
|
52
|
+
::title=${''}
|
|
53
|
+
::open=${false}
|
|
54
54
|
|
|
55
55
|
// private: the accordion this item was slotted into, if any
|
|
56
56
|
:_parent=${$host && $host.exclusive ? $host._id : null}
|
package/parts/alert.htm
CHANGED
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
role="alert"
|
|
23
23
|
|
|
24
24
|
// parameters
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
::extra=${null} // extra classes for this instance
|
|
26
|
+
::variant=${'primary'}
|
|
27
|
+
::heading=${null}
|
|
28
|
+
::dismissible=${false}
|
|
29
29
|
|
|
30
30
|
// private
|
|
31
31
|
:_class=${['alert', `alert-${variant}`, extra].filter(s => s).join(' ')}
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
|
|
41
41
|
<:slot />
|
|
42
42
|
|
|
43
|
-
<bs-close
|
|
44
|
-
|
|
43
|
+
<bs-close ::dismiss="alert"
|
|
44
|
+
::label="Close alert"
|
|
45
45
|
:if=${dismissible} />
|
|
46
46
|
</:define>
|
|
47
47
|
|
package/parts/badge.htm
CHANGED
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
<:define tag="bs-badge:span"
|
|
10
10
|
|
|
11
11
|
// parameters
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
::extra=${null} // extra classes for this instance
|
|
13
|
+
::variant=${'primary'}
|
|
14
|
+
::pill=${false}
|
|
15
|
+
::position=${null} // 'top-end' | 'bottom-end' — for a badge on a button
|
|
16
16
|
|
|
17
17
|
// private
|
|
18
18
|
:_class=${[
|
package/parts/base.htm
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
once into Bootstrap's own CSS variables below, so restyling the kit means
|
|
7
7
|
setting one value at the import site instead of patching each component:
|
|
8
8
|
|
|
9
|
-
<head
|
|
9
|
+
<head :const-bsRadius="1rem">
|
|
10
10
|
<:import src="/bootstrap-kit/all.htm" />
|
|
11
11
|
</head>
|
|
12
12
|
|
|
@@ -16,25 +16,25 @@
|
|
|
16
16
|
forking this file — and so does a page serving its own Sass build, which is
|
|
17
17
|
how a design system gets past what the tokens below can reach:
|
|
18
18
|
|
|
19
|
-
<head
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
<head :const-bsCssUrl="/vendor/bootstrap.min.css"
|
|
20
|
+
:const-bsJsUrl="/vendor/bootstrap.bundle.min.js"
|
|
21
|
+
:const-bsCssIntegrity=${null}
|
|
22
|
+
:const-bsJsIntegrity=${null}>
|
|
23
23
|
-->
|
|
24
24
|
<lib
|
|
25
25
|
// where Bootstrap comes from
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
:const-bsCssUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'}
|
|
27
|
+
:const-bsCssIntegrity=${'sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB'}
|
|
28
|
+
:const-bsJsUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'}
|
|
29
|
+
:const-bsJsIntegrity=${'sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI'}
|
|
30
30
|
|
|
31
31
|
// tokens
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
:const-bsRadius=${'0.375rem'}
|
|
33
|
+
:const-bsRadiusSm=${'0.25rem'}
|
|
34
|
+
:const-bsRadiusLg=${'0.5rem'}
|
|
35
|
+
:const-bsRadiusPill=${'50rem'}
|
|
36
|
+
:const-bsFontSans=${'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'}
|
|
37
|
+
:const-bsLinkDecoration=${'underline'}
|
|
38
38
|
>
|
|
39
39
|
<meta charset="utf-8">
|
|
40
40
|
<meta name="viewport"
|
package/parts/breadcrumb.htm
CHANGED
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
class=${extra}
|
|
16
16
|
|
|
17
17
|
// parameters
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
::extra=${null} // extra classes for this instance
|
|
19
|
+
::items=${[
|
|
20
20
|
{ name: 'Home', link: '#' },
|
|
21
21
|
{ name: 'Library', link: '#' },
|
|
22
22
|
{ name: 'Data' },
|
|
23
23
|
]}
|
|
24
|
-
|
|
24
|
+
::divider=${null}
|
|
25
25
|
|
|
26
26
|
/*
|
|
27
27
|
Bootstrap reads the separator from a CSS custom property, and
|
package/parts/button.htm
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
a modal, an offcanvas or a collapse is this same tag rather than a
|
|
10
10
|
component of its own:
|
|
11
11
|
|
|
12
|
-
<bs-button
|
|
13
|
-
<bs-button
|
|
12
|
+
<bs-button ::toggle="modal" ::target="#signup">Sign up</bs-button>
|
|
13
|
+
<bs-button ::dismiss="modal" ::variant="secondary">Close</bs-button>
|
|
14
14
|
|
|
15
15
|
Note the two spellings of "conditional attribute" used throughout the kit:
|
|
16
16
|
a plain `name=${expr}` sets a VALUE and removes the attribute when the
|
|
@@ -20,16 +20,16 @@
|
|
|
20
20
|
<:define tag="bs-button:button"
|
|
21
21
|
|
|
22
22
|
// parameters
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
23
|
+
::extra=${null} // extra classes for this instance
|
|
24
|
+
::variant=${'primary'}
|
|
25
|
+
::outline=${false}
|
|
26
|
+
::size=${null}
|
|
27
|
+
::active=${false}
|
|
28
|
+
::disabled=${false}
|
|
29
|
+
::type=${'button'}
|
|
30
|
+
::toggle=${null}
|
|
31
|
+
::target=${null}
|
|
32
|
+
::dismiss=${null}
|
|
33
33
|
|
|
34
34
|
// private
|
|
35
35
|
:_class=${[
|
|
@@ -59,16 +59,16 @@
|
|
|
59
59
|
<:define tag="bs-link:a"
|
|
60
60
|
|
|
61
61
|
// parameters
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
62
|
+
::extra=${null} // extra classes for this instance
|
|
63
|
+
::href=${'#'}
|
|
64
|
+
::variant=${null}
|
|
65
|
+
::outline=${false}
|
|
66
|
+
::size=${null}
|
|
67
|
+
::active=${false}
|
|
68
|
+
::disabled=${false}
|
|
69
|
+
::button=${false}
|
|
70
|
+
::toggle=${null}
|
|
71
|
+
::target=${null}
|
|
72
72
|
|
|
73
73
|
// private
|
|
74
74
|
:_class=${[
|
|
@@ -99,10 +99,10 @@
|
|
|
99
99
|
<:define tag="bs-button-group:div"
|
|
100
100
|
|
|
101
101
|
// parameters
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
102
|
+
::extra=${null} // extra classes for this instance
|
|
103
|
+
::label=${'Button group'}
|
|
104
|
+
::size=${null}
|
|
105
|
+
::vertical=${false}
|
|
106
106
|
|
|
107
107
|
// private
|
|
108
108
|
:_class=${[
|
|
@@ -127,9 +127,9 @@
|
|
|
127
127
|
role="toolbar"
|
|
128
128
|
|
|
129
129
|
// parameters
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
130
|
+
::extra=${null} // extra classes for this instance
|
|
131
|
+
::label=${'Toolbar'}
|
|
132
|
+
::gap=${2}
|
|
133
133
|
|
|
134
134
|
aria-label=${label}
|
|
135
135
|
:class-gap-1=${gap === 1}
|
|
@@ -149,10 +149,10 @@
|
|
|
149
149
|
class="btn-close ${extra ?? ''}"
|
|
150
150
|
|
|
151
151
|
// parameters
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
152
|
+
::extra=${null} // extra classes for this instance
|
|
153
|
+
::label=${'Close'}
|
|
154
|
+
::dismiss=${null}
|
|
155
|
+
::disabled=${false}
|
|
156
156
|
|
|
157
157
|
aria-label=${label}
|
|
158
158
|
:attr-disabled=${disabled}
|
package/parts/card.htm
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
given, which is the kit's general shape — a caller writes what the card
|
|
8
8
|
HAS, not the markup that produces it.
|
|
9
9
|
|
|
10
|
-
<bs-card
|
|
10
|
+
<bs-card ::title="Card title" ::footer="2 days ago">
|
|
11
11
|
<p class="card-text">Some quick example text.</p>
|
|
12
12
|
</bs-card>
|
|
13
13
|
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
<:define tag="bs-card:div"
|
|
20
20
|
|
|
21
21
|
// parameters
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
22
|
+
::extra=${null} // extra classes for this instance
|
|
23
|
+
::bodyExtra=${null} // extra classes for the body: `p-0`, `p-4`, `d-flex`
|
|
24
|
+
::title=${null}
|
|
25
|
+
::subtitle=${null}
|
|
26
|
+
::header=${null}
|
|
27
|
+
::footer=${null}
|
|
28
|
+
::image=${null}
|
|
29
|
+
::imageAlt=${''}
|
|
30
|
+
::imageBottom=${false}
|
|
31
|
+
::variant=${null} // colours the whole card, e.g. 'primary'
|
|
32
|
+
::border=${null} // colours only the border
|
|
33
|
+
::align=${null} // 'center' | 'end'
|
|
34
34
|
|
|
35
35
|
// private
|
|
36
36
|
:_class=${[
|
|
@@ -84,10 +84,10 @@
|
|
|
84
84
|
<:define tag="bs-card-group:div"
|
|
85
85
|
|
|
86
86
|
// parameters
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
::extra=${null} // extra classes for this instance
|
|
88
|
+
::cols=${3}
|
|
89
|
+
::gap=${4}
|
|
90
|
+
::attached=${false} // a seamless strip instead of separate cards
|
|
91
91
|
|
|
92
92
|
// private
|
|
93
93
|
:_class=${attached
|
package/parts/carousel.htm
CHANGED
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
class="carousel slide ${extra ?? ''}"
|
|
14
14
|
|
|
15
15
|
// parameters
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
::extra=${null} // extra classes for this instance
|
|
17
|
+
::slides=${[]}
|
|
18
|
+
::controls=${true}
|
|
19
|
+
::indicators=${true}
|
|
20
|
+
::captions=${true}
|
|
21
|
+
::fade=${false}
|
|
22
|
+
::ride=${true}
|
|
23
|
+
::interval=${5000}
|
|
24
|
+
::dark=${false}
|
|
25
25
|
|
|
26
26
|
// private
|
|
27
27
|
:_id=${`bs-carousel-${$id}`}
|
package/parts/check.htm
CHANGED
|
@@ -12,16 +12,16 @@
|
|
|
12
12
|
<:define tag="bs-check:div"
|
|
13
13
|
|
|
14
14
|
// parameters
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
::extra=${null} // extra classes for this instance
|
|
16
|
+
::label=${null}
|
|
17
|
+
::type=${'checkbox'} // 'checkbox' | 'radio' | 'switch'
|
|
18
|
+
::name=${null}
|
|
19
|
+
::value=${null}
|
|
20
|
+
::checked=${false}
|
|
21
|
+
::inline=${false}
|
|
22
|
+
::reverse=${false}
|
|
23
|
+
::disabled=${false}
|
|
24
|
+
::help=${null}
|
|
25
25
|
|
|
26
26
|
// private
|
|
27
27
|
:_id=${`bs-check-${$id}`}
|
|
@@ -62,13 +62,13 @@
|
|
|
62
62
|
role="group"
|
|
63
63
|
|
|
64
64
|
// parameters
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
65
|
+
::extra=${null} // extra classes for this instance
|
|
66
|
+
::legend=${null}
|
|
67
|
+
::type=${'radio'}
|
|
68
|
+
::options=${[]}
|
|
69
|
+
::value=${null}
|
|
70
|
+
::inline=${false}
|
|
71
|
+
::disabled=${false}
|
|
72
72
|
|
|
73
73
|
// private
|
|
74
74
|
:_name=${`bs-check-group-${$id}`}
|
|
@@ -113,15 +113,15 @@
|
|
|
113
113
|
class="mb-3 ${extra ?? ''}"
|
|
114
114
|
|
|
115
115
|
// parameters
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
116
|
+
::extra=${null} // extra classes for this instance
|
|
117
|
+
::label=${null}
|
|
118
|
+
::name=${null}
|
|
119
|
+
::min=${0}
|
|
120
|
+
::max=${100}
|
|
121
|
+
::step=${1}
|
|
122
|
+
::value=${50}
|
|
123
|
+
::disabled=${false}
|
|
124
|
+
::showValue=${false}
|
|
125
125
|
|
|
126
126
|
// private
|
|
127
127
|
:_id=${`bs-range-${$id}`}
|
package/parts/collapse.htm
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
anything can open a collapse, and often several things do — so the region
|
|
7
7
|
takes a `:name` and a `bs-button` points at it:
|
|
8
8
|
|
|
9
|
-
<bs-button
|
|
10
|
-
<bs-collapse
|
|
9
|
+
<bs-button ::toggle="collapse" ::target="#details">Details</bs-button>
|
|
10
|
+
<bs-collapse ::name="details">…</bs-collapse>
|
|
11
11
|
|
|
12
12
|
`:horizontal` collapses width instead of height, in which case Bootstrap
|
|
13
13
|
needs the content to have a width of its own.
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
class="collapse ${extra ?? ''}"
|
|
17
17
|
|
|
18
18
|
// parameters
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
::extra=${null} // extra classes for this instance
|
|
20
|
+
::name=${null}
|
|
21
|
+
::open=${false}
|
|
22
|
+
::horizontal=${false}
|
|
23
23
|
|
|
24
24
|
id=${name}
|
|
25
25
|
:class-show=${open}
|
package/parts/dropdown.htm
CHANGED
|
@@ -15,21 +15,21 @@
|
|
|
15
15
|
<:define tag="bs-dropdown:div"
|
|
16
16
|
|
|
17
17
|
// parameters
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
::extra=${null} // extra classes for this instance
|
|
19
|
+
::label=${'Dropdown'}
|
|
20
|
+
::items=${[
|
|
21
21
|
{ name: 'Action', link: '#' },
|
|
22
22
|
{ name: 'Another action', link: '#' },
|
|
23
23
|
{ divider: true },
|
|
24
24
|
{ name: 'Something else here', link: '#' },
|
|
25
25
|
]}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
::variant=${'primary'}
|
|
27
|
+
::outline=${false}
|
|
28
|
+
::size=${null}
|
|
29
|
+
::split=${false}
|
|
30
|
+
::direction=${'down'} // 'down' | 'up' | 'start' | 'end'
|
|
31
|
+
::align=${'start'} // 'start' | 'end'
|
|
32
|
+
::dark=${false}
|
|
33
33
|
|
|
34
34
|
// private
|
|
35
35
|
:_id=${`bs-dropdown-${$id}`}
|
package/parts/image.htm
CHANGED
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
<:define tag="bs-image:img"
|
|
9
9
|
|
|
10
10
|
// parameters
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
::extra=${null} // extra classes for this instance
|
|
12
|
+
::src=${null}
|
|
13
|
+
::alt=${''}
|
|
14
|
+
::fluid=${true}
|
|
15
|
+
::thumbnail=${false}
|
|
16
|
+
::rounded=${false}
|
|
17
17
|
|
|
18
18
|
class=${extra}
|
|
19
19
|
src=${src}
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
class="figure ${extra ?? ''}"
|
|
29
29
|
|
|
30
30
|
// parameters
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
::extra=${null} // extra classes for this instance
|
|
32
|
+
::src=${null}
|
|
33
|
+
::alt=${''}
|
|
34
|
+
::caption=${null}
|
|
35
|
+
::align=${null} // 'center' | 'end'
|
|
36
36
|
>
|
|
37
37
|
<img class="figure-img img-fluid rounded"
|
|
38
38
|
src=${src}
|