@markout-lang/bootstrap-kit 0.2.2 → 0.4.0

package/parts/check.htm

@@ -12,23 +12,22 @@
   <:define tag="bs-check:div"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :type=${'checkbox'}   // 'checkbox' | 'radio' | 'switch'
-    :name=${null}
-    :value=${null}
-    :checked=${false}
-    :inline=${false}
-    :reverse=${false}
-    :disabled=${false}
-    :help=${null}
+    ::label=${null}
+    ::type=${'checkbox'}   // 'checkbox' | 'radio' | 'switch'
+    ::name=${null}
+    ::value=${null}
+    ::checked=${false}
+    ::inline=${false}
+    ::reverse=${false}
+    ::disabled=${false}
+    ::help=${null}
 
     // private
     :_id=${`bs-check-${$id}`}
     :_helpId=${`bs-check-help-${$id}`}
     :_type=${type === 'switch' ? 'checkbox' : type}
 
-    class="form-check ${extra ?? ''}"
+    class="form-check"
     :class-form-switch=${type === 'switch'}
     :class-form-check-inline=${inline}
     :class-form-check-reverse=${reverse}
@@ -41,6 +40,7 @@
       role=${type === 'switch' ? 'switch' : null}
       aria-describedby=${help ? _helpId : null}
       :attr-checked=${checked}
+      :prop-checked=${checked}
       :attr-disabled=${disabled}
       :on-change=${ev => checked = ev.target.checked}>
 
@@ -56,23 +56,41 @@
     A whole group of radios or checkboxes from one array, sharing a name and
     reporting the selection back through `:value`. Entries are strings or
     `{ name, value, disabled }`, as in `bs-select`.
+
+    What `:value` HOLDS is decided by `:type`, because that is what the two
+    controls mean: a radio group submits one value and a checkbox group
+    submits every box that is ticked, under the same name. So a radio group's
+    `:value` is the selected value or `null`, and a checkbox or switch
+    group's is an ARRAY, in the order the options were given rather than the
+    order they were clicked — a summary sentence reading it should not
+    reorder itself under the reader.
+
+    It used to be one value either way, which made a checkbox group behave
+    like a radio group that could not make up its mind: ticking a second box
+    unticked the first, and unticking a box left it ticked. Not a shape
+    guessed from a value — `:type` is declared, and it is the same thing that
+    already picks the input's type and the switch class.
   -->
   <:define tag="bs-check-group:div"
-    class="mb-3 ${extra ?? ''}"
+    class="mb-3"
     role="group"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :legend=${null}
-    :type=${'radio'}
-    :options=${[]}
-    :value=${null}
-    :inline=${false}
-    :disabled=${false}
+    ::legend=${null}
+    ::type=${'radio'}
+    ::options=${[]}
+    ::value=${type === 'radio' ? null : []}
+    ::inline=${false}
+    ::disabled=${false}
 
     // private
     :_name=${`bs-check-group-${$id}`}
     :_legendId=${`bs-check-group-legend-${$id}`}
+    :_multi=${type !== 'radio'}
+    // a lone value read as a list of one, the way `:options` reads a lone
+    // string as an entry: passing `:value="Slack"` to a checkbox group says
+    // something unambiguous, and spreading a string into characters is not it
+    :_selected=${!_multi ? [] : Array.isArray(value) ? value : value == null ? [] : [value]}
 
     aria-labelledby=${legend ? _legendId : null}
     :_options=${options.map(o =>
@@ -100,9 +118,17 @@
         type=${type === 'switch' ? 'checkbox' : type}
         name=${_name}
         value=${option.value}
-        :attr-checked=${option.value === value}
+        :attr-checked=${_multi ? _selected.includes(option.value) : option.value === value}
+        :prop-checked=${_multi ? _selected.includes(option.value) : option.value === value}
         :attr-disabled=${disabled || option.disabled}
-        :on-change=${ev => value = ev.target.value}>
+        :on-change=${(ev) => {
+          if (!_multi) { value = ev.target.value; return; }
+          const on = ev.target.checked;
+          const hit = ev.target.value;
+          value = _options
+            .filter(o => (o.value === hit ? on : _selected.includes(o.value)))
+            .map(o => o.value);
+        }}>
       <label class="form-check-label"
         for="${_name}-${option.value}">${option.name}</label>
     </div>
@@ -110,18 +136,17 @@
 
   <!--- A range slider, with its label and its current value. -->
   <:define tag="bs-range:div"
-    class="mb-3 ${extra ?? ''}"
+    class="mb-3"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :name=${null}
-    :min=${0}
-    :max=${100}
-    :step=${1}
-    :value=${50}
-    :disabled=${false}
-    :showValue=${false}
+    ::label=${null}
+    ::name=${null}
+    ::min=${0}
+    ::max=${100}
+    ::step=${1}
+    ::value=${50}
+    ::disabled=${false}
+    ::showValue=${false}
 
     // private
     :_id=${`bs-range-${$id}`}
@@ -157,6 +182,7 @@
       max=${max}
       step=${step}
       value=${value}
+      :prop-value=${value}
       :attr-disabled=${disabled}
       :on-input=${ev => value = Number(ev.target.value)}>
   </:define>

package/parts/collapse.htm

@@ -6,20 +6,19 @@
     anything can open a collapse, and often several things do — so the region
     takes a `:name` and a `bs-button` points at it:
 
-      <bs-button :toggle="collapse" :target="#details">Details</bs-button>
-      <bs-collapse :name="details">…</bs-collapse>
+      <bs-button ::toggle="collapse" ::target="#details">Details</bs-button>
+      <bs-collapse ::name="details">…</bs-collapse>
 
     `:horizontal` collapses width instead of height, in which case Bootstrap
     needs the content to have a width of its own.
   -->
   <:define tag="bs-collapse:div"
-    class="collapse ${extra ?? ''}"
+    class="collapse"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :open=${false}
-    :horizontal=${false}
+    ::name=${null}
+    ::open=${false}
+    ::horizontal=${false}
 
     id=${name}
     :class-show=${open}

package/parts/dropdown.htm

@@ -15,25 +15,24 @@
   <:define tag="bs-dropdown:div"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${'Dropdown'}
-    :items=${[
+    ::label=${'Dropdown'}
+    ::items=${[
       { name: 'Action', link: '#' },
       { name: 'Another action', link: '#' },
       { divider: true },
       { name: 'Something else here', link: '#' },
     ]}
-    :variant=${'primary'}
-    :outline=${false}
-    :size=${null}
-    :split=${false}
-    :direction=${'down'}   // 'down' | 'up' | 'start' | 'end'
-    :align=${'start'}      // 'start' | 'end'
-    :dark=${false}
+    ::variant=${'primary'}
+    ::outline=${false}
+    ::size=${null}
+    ::split=${false}
+    ::direction=${'down'}   // 'down' | 'up' | 'start' | 'end'
+    ::align=${'start'}      // 'start' | 'end'
+    ::dark=${false}
 
     // private
     :_id=${`bs-dropdown-${$id}`}
-    :_class=${[direction === 'down' ? 'dropdown' : `drop${direction}`, extra]
+    :_class=${[direction === 'down' ? 'dropdown' : `drop${direction}`]
               .filter(s => s).join(' ')}
     :_btnClass=${[
       'btn',

package/parts/image.htm

@@ -8,14 +8,12 @@
   <:define tag="bs-image:img"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :src=${null}
-    :alt=${''}
-    :fluid=${true}
-    :thumbnail=${false}
-    :rounded=${false}
+    ::src=${null}
+    ::alt=${''}
+    ::fluid=${true}
+    ::thumbnail=${false}
+    ::rounded=${false}
 
-    class=${extra}
     src=${src}
     alt=${alt}
     :class-img-fluid=${fluid}
@@ -25,14 +23,13 @@
 
   <!--- An image with its caption, as one thing. -->
   <:define tag="bs-figure:figure"
-    class="figure ${extra ?? ''}"
+    class="figure"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :src=${null}
-    :alt=${''}
-    :caption=${null}
-    :align=${null}      // 'center' | 'end'
+    ::src=${null}
+    ::alt=${''}
+    ::caption=${null}
+    ::align=${null}      // 'center' | 'end'
   >
     <img class="figure-img img-fluid rounded"
       src=${src}

package/parts/input.htm

@@ -9,8 +9,8 @@
     typed, so a page can name the instance and read it from anywhere else on
     the page —
 
-      <bs-input :aka="email" :label="Email" :type="email" />
-      <bs-button :disabled=${!email.value}>Send</bs-button>
+      <bs-input :aka="email" ::label="Email" ::type="email" />
+      <bs-button ::disabled=${!email.value}>Send</bs-button>
 
     — which is `:aka` doing what it does everywhere else, not a mechanism
     special to forms.
@@ -21,8 +21,8 @@
 
     `:valid` is the other side of that, and what a form's own controls read —
 
-      <bs-input :aka="email" :label="Email" :check=${v => v.includes('@')} />
-      <bs-button :disabled=${!email.valid}>Send</bs-button>
+      <bs-input :aka="email" ::label="Email" ::check=${v => v.includes('@')} />
+      <bs-button ::disabled=${!email.valid}>Send</bs-button>
 
     It is deliberately NOT the negation of the error state, which is the one
     thing about it worth knowing. An untouched field is not wrong — that is
@@ -35,23 +35,22 @@
     layouts are two regions rather than one with a class toggled on it.
   -->
   <:define tag="bs-input:div"
-    class="mb-3 ${extra ?? ''}"
+    class="mb-3"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :type=${'text'}
-    :name=${null}
-    :value=${''}
-    :placeholder=${''}
-    :help=${null}
-    :size=${null}            // 'sm' | 'lg'
-    :disabled=${false}
-    :readonly=${false}
-    :required=${false}
-    :floating=${false}
-    :check=${(v) => true}
-    :message=${'Please check this value.'}
+    ::label=${null}
+    ::type=${'text'}
+    ::name=${null}
+    ::value=${''}
+    ::placeholder=${''}
+    ::help=${null}
+    ::size=${null}            // 'sm' | 'lg'
+    ::disabled=${false}
+    ::readonly=${false}
+    ::required=${false}
+    ::floating=${false}
+    ::check=${(v) => true}
+    ::message=${'Please check this value.'}
 
     // private
     :_id=${`bs-input-${$id}`}
@@ -75,6 +74,7 @@
         type=${type}
         name=${name}
         value=${value}
+        :prop-value=${value}
         placeholder=${placeholder}
         aria-describedby=${help ? _helpId : null}
         :class-is-invalid=${_invalid}
@@ -97,6 +97,7 @@
         type=${type}
         name=${name}
         value=${value}
+        :prop-value=${value}
         placeholder=${placeholder || label || ' '}
         :class-is-invalid=${_invalid}
         :attr-disabled=${disabled}
@@ -116,21 +117,20 @@
     `rows`, and a type that isn't one of HTML's would be a small lie.
   -->
   <:define tag="bs-textarea:div"
-    class="mb-3 ${extra ?? ''}"
+    class="mb-3"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :label=${null}
-    :name=${null}
-    :value=${''}
-    :placeholder=${''}
-    :rows=${3}
-    :help=${null}
-    :disabled=${false}
-    :readonly=${false}
-    :required=${false}
-    :check=${(v) => true}
-    :message=${'Please check this value.'}
+    ::label=${null}
+    ::name=${null}
+    ::value=${''}
+    ::placeholder=${''}
+    ::rows=${3}
+    ::help=${null}
+    ::disabled=${false}
+    ::readonly=${false}
+    ::required=${false}
+    ::check=${(v) => true}
+    ::message=${'Please check this value.'}
 
     // private
     :_id=${`bs-textarea-${$id}`}
@@ -155,6 +155,7 @@
       :attr-disabled=${disabled}
       :attr-readonly=${readonly}
       :attr-required=${required}
+      :prop-value=${value}
       :on-input=${ev => value = ev.target.value}>${value}</textarea>
 
     <div class="form-text"
@@ -172,13 +173,12 @@
   <:define tag="bs-input-group:div"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :prefix=${null}
-    :suffix=${null}
-    :size=${null}
+    ::prefix=${null}
+    ::suffix=${null}
+    ::size=${null}
 
     // private
-    :_class=${['input-group', size ? `input-group-${size}` : '', extra]
+    :_class=${['input-group', size ? `input-group-${size}` : '']
               .filter(s => s).join(' ')}
 
     class=${_class}

package/parts/list-group.htm

@@ -14,21 +14,19 @@
   <:define tag="bs-list-group:div"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::items=${[
       { name: 'An item', active: true },
       { name: 'A second item' },
       { name: 'A disabled item', disabled: true },
     ]}
-    :flush=${false}
-    :horizontal=${false}
+    ::flush=${false}
+    ::horizontal=${false}
 
     // private
     :_class=${[
       'list-group',
       flush ? 'list-group-flush' : '',
       horizontal ? 'list-group-horizontal' : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}
@@ -49,8 +47,8 @@
           :if=${item.text}>${item.text}</span>
       </span>
 
-      <bs-badge :variant=${item.badge?.variant ?? 'secondary'}
-        :pill
+      <bs-badge ::variant=${item.badge?.variant ?? 'secondary'}
+        ::pill
         :if=${item.badge}>${item.badge?.name ?? item.badge}</bs-badge>
     </a>
   </:define>

package/parts/modal.htm

@@ -5,8 +5,8 @@
   <!---
     A modal. Opened the Bootstrap way, by a trigger naming it:
 
-      <bs-button :toggle="modal" :target="#signup">Sign up</bs-button>
-      <bs-modal :name="signup" :title="Sign up">…</bs-modal>
+      <bs-button ::toggle="modal" ::target="#signup">Sign up</bs-button>
+      <bs-modal ::name="signup" ::title="Sign up">…</bs-modal>
 
     The footer is a named slot with a working default, so a modal that only
     needs a Close button doesn't have to say so. That is also why it isn't an
@@ -19,19 +19,18 @@
     amount of markup expresses them, and a handler is what runs them.
   -->
   <:define tag="bs-modal:div"
-    class="modal fade ${extra ?? ''}"
+    class="modal fade"
     tabindex="-1"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :title=${''}
-    :size=${null}          // 'sm' | 'lg' | 'xl'
-    :centered=${false}
-    :scrollable=${false}
-    :fullscreen=${null}    // true | 'sm-down' | 'md-down' | ...
-    :staticBackdrop=${false}
-    :open=${false}
+    ::name=${null}
+    ::title=${''}
+    ::size=${null}          // 'sm' | 'lg' | 'xl'
+    ::centered=${false}
+    ::scrollable=${false}
+    ::fullscreen=${null}    // true | 'sm-down' | 'md-down' | ...
+    ::staticBackdrop=${false}
+    ::open=${false}
 
     // private
     :_labelId=${`bs-modal-title-${$id}`}
@@ -100,7 +99,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id=${_labelId}>${title}</h1>
-          <bs-close :dismiss="modal" />
+          <bs-close ::dismiss="modal" />
         </div>
 
         <div class="modal-body">
@@ -109,7 +108,7 @@
 
         <div class="modal-footer">
           <:slot name="footer">
-            <bs-button :variant="secondary" :dismiss="modal">Close</bs-button>
+            <bs-button ::variant="secondary" ::dismiss="modal">Close</bs-button>
           </:slot>
         </div>
       </div>

package/parts/nav.htm

@@ -12,18 +12,17 @@
   <:define tag="bs-nav:ul"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::items=${[
       { name: 'Active', link: '#', active: true },
       { name: 'Link', link: '#' },
       { name: 'Disabled', link: '#', disabled: true },
     ]}
-    :variant=${null}      // 'tabs' | 'pills' | 'underline'
-    :fill=${false}
-    :justified=${false}
-    :vertical=${false}
-    :align=${'start'}     // 'start' | 'center' | 'end'
-    :toggle=${null}       // 'tab' | 'pill' — for tabbed panes
+    ::variant=${null}      // 'tabs' | 'pills' | 'underline'
+    ::fill=${false}
+    ::justified=${false}
+    ::vertical=${false}
+    ::align=${'start'}     // 'start' | 'center' | 'end'
+    ::toggle=${null}       // 'tab' | 'pill' — for tabbed panes
 
     // private
     :_class=${[
@@ -34,7 +33,6 @@
       vertical ? 'flex-column' : '',
       align === 'center' ? 'justify-content-center' : '',
       align === 'end' ? 'justify-content-end' : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     class=${_class}
@@ -70,13 +68,12 @@
   </:define>
 
   <:define tag="bs-tab-pane:div"
-    class="tab-pane fade ${extra ?? ''}"
+    class="tab-pane fade"
     role="tabpanel"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :active=${false}
+    ::name=${null}
+    ::active=${false}
 
     id=${name}
     :class-show=${active}

package/parts/navbar.htm

@@ -17,19 +17,18 @@
   <:define tag="bs-navbar:nav"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :items=${[
+    ::items=${[
       { name: 'Home', link: '#', active: true },
       { name: 'Features', link: '#' },
       { name: 'Pricing', link: '#' },
     ]}
-    :brand=${'#'}
-    :expand=${'lg'}
-    :container=${'container'}   // 'container' | 'container-fluid' | ...
-    :sticky=${false}
-    :fixed=${false}
-    :theme=${null}              // 'light' | 'dark' — independent of the page
-    :bg=${'body-tertiary'}
+    ::brand=${'#'}
+    ::expand=${'lg'}
+    ::container=${'container'}   // 'container' | 'container-fluid' | ...
+    ::sticky=${false}
+    ::fixed=${false}
+    ::theme=${null}              // 'light' | 'dark' — independent of the page
+    ::bg=${'body-tertiary'}
 
     // private
     :_id=${`bs-navbar-${$id}`}
@@ -37,7 +36,6 @@
       'navbar',
       expand ? `navbar-expand-${expand}` : '',
       bg ? `bg-${bg}` : '',
-      extra,
     ].filter(s => s).join(' ')}
 
     // The gap under the links is only wanted while they are stacked, which

package/parts/offcanvas.htm

@@ -6,29 +6,27 @@
     An offcanvas panel: the same shape as `bs-modal`, opened by a trigger
     naming it or by the `:open` value.
 
-      <bs-button :toggle="offcanvas" :target="#menu">Menu</bs-button>
-      <bs-offcanvas :name="menu" :title="Menu">…</bs-offcanvas>
+      <bs-button ::toggle="offcanvas" ::target="#menu">Menu</bs-button>
+      <bs-offcanvas ::name="menu" ::title="Menu">…</bs-offcanvas>
   -->
   <:define tag="bs-offcanvas:div"
     class="offcanvas"
     tabindex="-1"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :name=${null}
-    :title=${''}
-    :placement=${'start'}   // 'start' | 'end' | 'top' | 'bottom'
-    :backdrop=${true}
-    :scroll=${false}
-    :responsive=${null}     // 'lg' — an offcanvas below this breakpoint only
-    :open=${false}
+    ::name=${null}
+    ::title=${''}
+    ::placement=${'start'}   // 'start' | 'end' | 'top' | 'bottom'
+    ::backdrop=${true}
+    ::scroll=${false}
+    ::responsive=${null}     // 'lg' — an offcanvas below this breakpoint only
+    ::open=${false}
 
     // private
     :_labelId=${`bs-offcanvas-title-${$id}`}
     :_class=${[
       responsive ? `offcanvas-${responsive}` : 'offcanvas',
       `offcanvas-${placement}`,
-      extra,
     ].join(' ')}
 
     class=${_class}
@@ -79,7 +77,7 @@
   >
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id=${_labelId}>${title}</h5>
-      <bs-close :dismiss="offcanvas" />
+      <bs-close ::dismiss="offcanvas" />
     </div>
 
     <div class="offcanvas-body">

package/parts/pagination.htm

@@ -19,16 +19,15 @@
   <:define tag="bs-pagination:nav"
 
     // parameters
-    :extra=${null}      // extra classes for this instance
-    :current=${1}
-    :pages=${5}
-    :size=${null}          // 'sm' | 'lg'
-    :align=${'start'}      // 'start' | 'center' | 'end'
-    :prev=${'«'}
-    :next=${'»'}
-    :link=${(n) => null}
-    :select=${(n) => {}}
-    :label=${'Page navigation'}
+    ::current=${1}
+    ::pages=${5}
+    ::size=${null}          // 'sm' | 'lg'
+    ::align=${'start'}      // 'start' | 'center' | 'end'
+    ::prev=${'«'}
+    ::next=${'»'}
+    ::link=${(n) => null}
+    ::select=${(n) => {}}
+    ::label=${'Page navigation'}
 
     // private
     :_class=${[
@@ -39,7 +38,6 @@
     ].filter(s => s).join(' ')}
     :_numbers=${Array.from({ length: pages }, (_, i) => i + 1)}
 
-    class=${extra}
     aria-label=${label}
   >
     <ul class=${_class}>