barcode component

README.md

@@ -18,20 +18,21 @@ inputs and outputs
 ### Bugs 🐞
  - datalist do not work on firefox mobile
 
-### Improvements 💡
- - semantic html tests, no string cmp
-
- - allow children in docs and examples (ctrl case)
+### Next release
  - merge tag and alert inside ctrl
 
+### Improvements 💡
+ - semantic html tests, no string cmp
  - formatter should be a component?
  - allow icon with input to avoid unicode and translation
  - separate input and output options
  - allow to see other tests variants
- - remove or minimize lang support
- - remove non bootstrap options support, minimize options and review settings
  - dynamic validation with functions
  - input wrapper review
+ - allow children in docs and examples (ctrl case)
+ - remove or minimize lang support
+ - remove non bootstrap options support, minimize options and review settings
+ - separate router and data-app as a plugin
 
 ### Tests and docs 🧪
  - chart
@@ -46,7 +47,6 @@ inputs and outputs
  - core router
 
 ### New components 📋
- - barcode
  - carousel
  - maps
  - code component (html/js) and remove highlight.js from page source
@@ -55,6 +55,10 @@ inputs and outputs
 It's a very simple project.
 Any contribution, any feedback is greatly appreciated.
 
+## Support ⭐
+If this project was useful to you, consider giving it a star on github, it's a
+way to increase evidence and attract more contributors.
+
 ## Acknowledgment 🙏
 This work would not be possible if it were not for these related projects:
  - [FontAwesome](https://fontawesome.com/)
@@ -65,6 +69,7 @@ This work would not be possible if it were not for these related projects:
  - [highlight.js](https://highlightjs.org/)
  - [Cytoscape.js](https://js.cytoscape.org/)
  - [Chart.js](https://www.chartjs.org/)
+ - [JsBarcode](https://lindell.me/JsBarcode/)
  - [QUnit](https://qunitjs.com/)
 
 A huge thank you to all the people who contributed to these projects.

index.js

@@ -105,15 +105,17 @@ export default ({build, root, routes}) => {
     })
 
     if (typeof routes[route] == 'function') {
+      const base = {url, route, path, Path, Params, query, Query}
       const state = {
-        url, route, path, Path, Params, query, Query, old, root,
+        ...base,
+        old, root,
         ...components 
       }
       if (typeof stop == 'function') {
         stop(state)
       }
       stop = routes[route](state)
-      old = state
+      old = base
     }
 
     const hash = '#'+url

src/barcode/index.js

@@ -0,0 +1,27 @@
+var script = null
+export default ({
+  height,
+  barcode
+}) => {
+  const target = document.createElement("img")
+  const build = () => {
+    JsBarcode(target, barcode, {
+      displayValue: true
+    })
+    target.height = height || 100
+  }
+  if (!window.JsBarcode) {
+    if (!script) {
+      script = document.createElement('script')
+      script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/'+
+        'JsBarcode.all.min.js'
+      script.async = false
+      document.head.appendChild(script)
+    }
+    script.addEventListener('load', build)
+  } else {
+    build()
+  }
+
+  return target
+}

src/barcode/spec.js

@@ -0,0 +1,47 @@
+import barcode from './index.js'
+
+export default ({
+  icon: 'barcode',
+  title: 'barcode',
+  description: 'Generate barcode with img tag',
+  component: barcode,
+  properties: {
+    barcode: {
+      type: 'string',
+      description: 'The text or value that will be used to generate the barcode.'
+    },
+    height: {
+      type: 'integer',
+      description: 'The height of the img tag in pixels.'
+    }
+  },
+  examples: [
+    {
+      title: 'A default size',
+      data: [
+        {
+          barcode: 'hjkl6789'
+        }, {
+          barcode: 'hjkl6789',
+          height: 100
+        }
+      ]
+    }, {
+      title: 'A big size',
+      data: [
+        {
+          barcode: 'abc1234',
+          height: 200 
+        }
+      ]
+    }, {
+      title: 'A small size',
+      data: [
+        {
+          barcode: 'dog',
+          height: 50
+        }
+      ]
+    }
+  ]
+})

src/comp.js

@@ -11,6 +11,7 @@ import table from './table/spec.js'
 import sidebar from './sidebar/spec.js'
 import graph from './graph/spec.js'
 import chart from './chart/spec.js'
+import barcode from './barcode/spec.js'
 
 export default [
   app,
@@ -25,5 +26,6 @@ export default [
   table,
   sidebar,
   graph,
-  chart
+  chart,
+  barcode
 ]

src/spinner/index.js

@@ -8,7 +8,10 @@ export default () => node(({div, span, text}) =>
   }, [
     div({
       class: 'spinner-border',
-      style: 'width: 5rem; height: 5rem;',
+      style: {
+        width: '5rem',
+        height: '5rem'
+      },
       role: 'status'
     }, [
       span({