carousel component

README.md

@@ -18,7 +18,7 @@ inputs and outputs
 ### Bugs 🐞
  - datalist do not work on firefox mobile
 
-### Next release
+### Next release 📋
  - merge tag and alert inside ctrl
 
 ### Improvements 💡
@@ -47,7 +47,6 @@ inputs and outputs
  - core router
 
 ### New components 📋
- - carousel
  - maps
  - code component (html/js) and remove highlight.js from page source
 

index.html

@@ -146,7 +146,7 @@
               <ul class="dropdown-menu">
                 <li data-app-path="Icons">
                   <a
-                    href="https://fontawesome.com/search?o=r&m=free&s=solid"
+                    href="https://fontawesome.com/search?o=r&amp;m=free&amp;s=solid"
                     target="_blank"
                     class="dropdown-item"
                     data-app-active="active"
@@ -163,7 +163,7 @@
                 </li>
                 <li data-app-path="Brands">
                   <a
-                    href="https://fontawesome.com/search?o=r&m=free&f=brands"
+                    href="https://fontawesome.com/search?o=r&amp;m=free&amp;f=brands"
                     target="_blank"
                     class="dropdown-item"
                     data-app-active="active"
@@ -297,6 +297,23 @@
                     </span>
                   </a>
                 </li>
+                <li data-app-path="JsBarcode">
+                  <a
+                    href="https://lindell.me/JsBarcode/"
+                    target="_blank"
+                    class="dropdown-item"
+                    data-app-active="active"
+                    title="Barcode component dependency."
+                  >
+                    <span
+                      data-bs-toggle="collapse"
+                      data-bs-target=".navbar-collapse.show"
+                    >
+                      <i class="fa-solid fa-barcode"></i>
+                      JsBarcode
+                    </span>
+                  </a>
+                </li>
                 <li data-app-path="QUnit">
                   <a
                     href="https://qunitjs.com/api/"
@@ -413,4 +430,4 @@ <h1 data-app-text="title">App</h1>
     </footer>
     <script type="module" src="app.js"></script>
   </body>
-</html>
+</html>

src/barcode/spec.js

@@ -12,7 +12,8 @@ export default ({
     },
     height: {
       type: 'integer',
-      description: 'The height of the img tag in pixels.'
+      description: 'The height of the img tag in pixels.',
+      default: 100
     }
   },
   examples: [

src/carousel/index.js

@@ -0,0 +1,115 @@
+import node from '../hyperscript/node.js'
+import spinner from '../spinner/index.js'
+import {uid} from '../lib.js'
+
+export default ({
+  images,
+  index,
+  interval,
+  inverted,
+  noIndicators,
+  noControls,
+  noCaption,
+  noTouch,
+  fade
+}) => {
+  images = (images || []).map(image => ({
+    interval,
+    ...image
+  }))
+  index = images[index] == null ? 0 : index
+  const id = uid('carousel')
+
+  return node(({
+    div,
+    button,
+    img,
+    h5,
+    text,
+    p,
+    span
+  }) => 
+    div({
+      id,
+      class: [
+        'carousel',
+        'slide',
+        fade ? 'carousel-fade' : ''
+      ],
+      dataBsRide: interval ? 'carousel' : null,
+      dataBsPause: interval ? 'false' : null,
+      dataBsTouch: noTouch ? 'false' : null,
+      dataBsTheme: inverted ? 'dark' : null
+    }, [
+      noIndicators ? null : div({
+        class: 'carousel-indicators'
+      }, images.map(({title}, i) => 
+        button({
+          type: 'button',
+          dataBsTarget: '#'+id,
+          dataBsSlideTo: i,
+          class: i == index ? 'active' : null,
+          ariaCurrent: i == index ? 'true' : null,
+          ariaLabel: title
+        }),
+      )),
+      div({
+        class: 'carousel-inner'
+      }, images.map(({src, title, description, interval}, i) => 
+        div({
+          class: [
+            'carousel-item',
+            i == index ? 'active' : ''
+          ],
+          dataBsInterval: interval
+        }, [
+          img({
+            src,
+            class: [
+              'd-block',
+              'w-100'
+            ],
+            alt: title,
+            title: noCaption ? description : null
+          }),
+          noCaption || (!title && !description) ? null : div({
+            class: [
+              'carousel-caption',
+              'd-none',
+              'd-md-block'
+            ]
+          }, [
+            !title ? null : h5({}, [
+              text(title)
+            ]),
+            !description ? null : p({}, [
+              text(description)
+            ])
+          ])
+        ])
+      )),
+      noControls ? null : button({
+        class: 'carousel-control-prev',
+        type: 'button',
+        dataBsTarget: '#'+id,
+        dataBsSlide: 'prev'
+      }, [
+        span({
+          class: 'carousel-control-prev-icon',
+          ariaHidden: 'true'
+        })
+      ]),
+      noControls ? null : button({
+        class: 'carousel-control-next',
+        type: 'button',
+        dataBsTarget: '#'+id,
+        dataBsSlide: 'next'
+      }, [
+        span({
+          class: 'carousel-control-next-icon',
+          ariaHidden: 'true'
+        })
+      ])
+    ])
+  )
+}