Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
base-elements
Advanced tools
base-elements - npm Package Compare versions
Comparing version 1.2.0 to 2.0.0
@@ -5,13 +5,16 @@ const assert = require('assert') | ||
| // create a circular avatar | ||
| // (obj?) -> obj | ||
| module.exports = function (opts) { | ||
| // (str, obj?) -> html | ||
| module.exports = function (src, opts) { | ||
| opts = opts || {} | ||
| const src = opts.src || '' | ||
| const cls = opts.class || '' | ||
| const size = 'w' + (opts.size || 3) | ||
| const radius = 'br' + (opts.radius || '-100') | ||
| const radius = 'br' + ((opts.radius) | ||
| ? (opts.radius === 100) | ||
| ? '-100' | ||
| : opts.radius | ||
| : '-100') | ||
| assert.equal(typeof src, 'string', 'base-elements/avatar: src should be a string') | ||
| assert.equal(typeof opts, 'object', 'base-elements/avatar: opts should be an object') | ||
| assert.equal(typeof src, 'string', 'base-elements/avatar: src should be a string') | ||
| assert.equal(typeof cls, 'string', 'base-elements/avatar: cls should be a string') | ||
@@ -21,4 +24,3 @@ assert.equal(typeof size, 'string', 'base-elements/avatar: size should be a string') | ||
| assert.ok(size === 'w1' || size === 'w1' || size === 'w2' || size === 'w3' || size === 'w4' || size === 'w5', 'base-elements/avatar: size should be >= 1 && <= 5') | ||
| assert.ok(size === 'br-100' || size === 'br0' || size === 'br1' || size === 'br2' || size === 'br3' || size === 'br4', 'base-elements/avatar: size should be >= 1 && <= 5') | ||
| assert.ok(radius >= 0 && size <= 4, 'base-elements/avatar: radius should be >= 0 && <= 4') | ||
| assert.ok(radius === 'br-100' || radius === 'br0' || radius === 'br1' || radius === 'br2' || radius === 'br3' || radius === 'br4', 'base-elements/avatar: radius should be >= 0 && <= 4 OR 100') | ||
@@ -25,0 +27,0 @@ const clx = size + ' ' + radius + ' ' + cls |
@@ -9,4 +9,4 @@ const mount = require('choo/mount') | ||
| const els = [ | ||
| el('avatar', base.avatar({ src: 'http://lorempixel.com/64/64/cats', size: 3 })), | ||
| el('progress', base.progress({ value: 0.75, class: 'blue' })), | ||
| el('avatar', base.avatar('http://lorempixel.com/64/64/cats', { size: 3 })), | ||
| el('progress', base.progress(0.75, { class: 'blue', reverse: true })), | ||
| el('tooltip', base.tooltip('Yes, this is Henry', { position: 'right' }, html`<div class="dib pointer">Hop on the hoover!</div>`)) | ||
@@ -13,0 +13,0 @@ ] |
| { | ||
| "name": "base-elements", | ||
| "version": "1.2.0", | ||
| "version": "2.0.0", | ||
| "description": "A selection of native DOM elements", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "start": "bankai start --entry=example/index.js --port 8080", | ||
| "start": "bankai start --entry=example/index.js --port 8080 --js.transform=sheetify/transform", | ||
| "build": "bankai build --entry=example/index.js --dir=dist/ && gh-pages -d dist/ && git push", | ||
@@ -9,0 +9,0 @@ "deps": "dependency-check . && dependency-check . -i balloon-css --extra --no-dev", |
@@ -0,30 +1,35 @@ | ||
| const css = require('sheetify') | ||
| const assert = require('assert') | ||
| const html = require('bel') | ||
| const prefix = css` | ||
| :host::-webkit-progress-bar { background-color: rgba(0, 0, 0, .125); } | ||
| :host::-webkit-progress-value { background-color: currentcolor; } | ||
| :host::-moz-progress-bar { background-color: currentcolor; } | ||
| :host.reverse { | ||
| direction: rtl; | ||
| } | ||
| ` | ||
| // create a progress bar | ||
| // (obj?) -> obj | ||
| module.exports = function (opts) { | ||
| // (num, obj?) -> html | ||
| module.exports = function (value, opts) { | ||
| opts = opts || {} | ||
| const cls = opts.class || '' | ||
| const value = opts.value || 0 | ||
| const clr = opts.color || 'blue' | ||
| const direction = opts.direction || 'ltr' | ||
| const direction = opts.reverse | ||
| assert.equal(typeof opts, 'object', 'base-elements/progress: opts should be an object') | ||
| assert.equal(typeof cls, 'string', 'base-elements/progress: cls should be a string') | ||
| assert.equal(typeof value, 'number', 'base-elements/progress: value should be a number') | ||
| assert.ok(value >= 0 && value <= 1, 'base-elements/progress: value should be >= 0 && <= 1') | ||
| assert.equal(typeof opts, 'object', 'base-elements/progress: opts should be an object') | ||
| assert.equal(typeof cls, 'string', 'base-elements/progress: opts.class should be a string') | ||
| const directionClass = (direction) ? ('reverse') : '' | ||
| // TODO(yw): patch sheetify so we can create global styles, inline | ||
| const directionStyle = '.bel_progress { direction:' + direction + ' }' | ||
| const classStyle = 'w-100 db bn input-reset br-100 bel_progress h1 ' + clr + ' ' + cls | ||
| const inlineStyle = '.bel_progress::-webkit-progress-bar { background-color: rgba(0, 0, 0, .125); } .bel_progress::-webkit-progress-value { background-color: currentcolor; } .bel_progress::-moz-progress-bar { background-color: currentcolor; }' | ||
| const classStyle = 'w-100 db bn input-reset br-100 h1 ' + cls + ' ' + prefix + ' ' + directionClass | ||
| return html` | ||
| <div> | ||
| <style>${inlineStyle + ' ' + directionStyle}</style> | ||
| <progress class=${classStyle} value=${value}></progress> | ||
| </div> | ||
| ` | ||
| } |
@@ -22,19 +22,16 @@ # base-elements [![stability][0]][1] | ||
| ## API | ||
| ### avatar(opts) | ||
| Create a circular avatar image. `opts` can contain: | ||
| - __src:__ (default: `null`) set the `src` tag of the element | ||
| ### avatar(src, opts?) | ||
| Create a circular avatar image. | ||
| `src` is a URL. `opts` can contain: | ||
| - __size:__ (default: `3`) set the size of the element. Enums: `{1, 2, 3, 4, | ||
| 5}` | ||
| - __radius:__ (default: `-100`) set the radius of the element. Enums: `{0, 1, 2, 3, 4}` | ||
| - __radius:__ (default: `100`) set the radius of the element. Enums: | ||
| `{0, 1, 2, 3, 4, 100}` | ||
| - __class:__ (default: `''`) set additional classes on the element | ||
| - __style:__ (default: `''`) set additional styles on the element | ||
| ## progress(opts) | ||
| Create a progress bar. `opts` can contain: | ||
| - __value:__ (default: `0`) set the progress of the element (`0 >= x <= 1`) | ||
| - __color:__ (default: `'blue'`) set the color on the element | ||
| - __direction:__ (default: `'ltr'`) set the progress bar direction. Enums: `{ | ||
| 'ltr', 'rtl' }` | ||
| ## progress(value, opts?) | ||
| Create a progress bar. | ||
| `value` is a number between 0 and 1. `opts` can contain: | ||
| - __reverse:__ (default: `'false'`) reverses the progress bar direction | ||
| - __class:__ (default: `''`) set additional classes on the element | ||
| - __style:__ (default: `''`) set additional styles on the element | ||
@@ -46,3 +43,2 @@ ## tooltip(text, opts, child) | ||
| - __class:__ (default: `''`) set additional classes on the element | ||
| - __style:__ (default: `''`) set additional styles on the element | ||
@@ -49,0 +45,0 @@ ## See Also |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by3.5%
148
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-3.97%
10220
- Number of lines in readme file
- decreased by-5.56%
68
No dependency changes