wired-radio - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0-alpha.0

lib/wired-radio.d.ts

@@ -1,2 +0,4 @@
-import { WiredBase, TemplateResult, CSSResult, PropertyValues } from 'wired-lib/lib/wired-base';
+import { WiredBase } from 'wired-lib/lib/wired-base';
+import { TemplateResult, CSSResultArray } from 'lit-element';
+import { Point } from 'wired-lib';
 export declare class WiredRadio extends WiredBase {
@@ -6,10 +8,13 @@ checked: boolean;
     name?: string;
-    iconsize: number;
-    private dot?;
-    static readonly styles: CSSResult;
+    private focused;
+    private input?;
+    private svgCheck?;
+    static readonly styles: CSSResultArray;
+    focus(): void;
+    wiredRender(force?: boolean): void;
     render(): TemplateResult;
-    private refreshDisabledState;
-    toggleCheck(): void;
-    firstUpdated(): void;
-    updated(changed: PropertyValues): void;
+    private onChange;
+    protected canvasSize(): Point;
+    protected draw(svg: SVGSVGElement, size: Point): void;
+    private refreshCheckVisibility;
 }

lib/wired-radio.js

@@ -10,4 +10,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { WiredBase, customElement, property, html, css } from 'wired-lib/lib/wired-base';
-import { ellipse } from 'wired-lib';
+import { WiredBase, BaseCSS } from 'wired-lib/lib/wired-base';
+import { customElement, property, css, html, query } from 'lit-element';
+import { ellipse, svgNode, fire } from 'wired-lib';
 let WiredRadio = class WiredRadio extends WiredBase {
@@ -18,114 +19,93 @@ constructor() {
         this.disabled = false;
-        this.iconsize = 24;
+        this.focused = false;
     }
     static get styles() {
-        return css `
-    :host {
-      display: inline-block;
-      position: relative;
-      padding: 5px;
-      font-family: inherit;
-      width: 150px;
-      outline: none;
-      opacity: 0;
-    }
+        return [
+            BaseCSS,
+            css `
+      :host {
+        display: inline-block;
+        font-family: inherit;
+      }
+      :host([disabled]) {
+        opacity: 0.6 !important;
+        cursor: default;
+        pointer-events: none;
+      }
+      :host([disabled]) svg {
+        background: rgba(0, 0, 0, 0.07);
+      }
 
-    :host(.wired-rendered) {
-      opacity: 1;
+      #container {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        user-select: none;
+        min-height: 24px;
+        cursor: pointer;
+      }
+      span {
+        margin-left: 1.5ex;
+      }
+      input {
+        opacity: 0;
+      }
+      path {
+        stroke: var(--wired-radio-icon-color, currentColor);
+        stroke-width: var(--wired-radio-default-swidth, 0.7);
+      }
+      g path {
+        stroke-width: 0;
+        fill: var(--wired-radio-icon-color, currentColor);
+      }
+      #container.focused {
+        --wired-radio-default-swidth: 1.5;
+      }
+      `
+        ];
     }
-  
-    :host(.wired-disabled) {
-      opacity: 0.45 !important;
-      cursor: default;
-      pointer-events: none;
+    focus() {
+        if (this.input) {
+            this.input.focus();
+        }
+        else {
+            super.focus();
+        }
     }
-
-    :host(:focus) path {
-      stroke-width: 1.5;
+    wiredRender(force = false) {
+        super.wiredRender(force);
+        this.refreshCheckVisibility();
     }
-  
-    #container {
-      display: inline-block;
-      white-space: nowrap;
-    }
-  
-    .inline {
-      display: inline-block;
-      vertical-align: middle;
-      -moz-user-select: none;
-      user-select: none;
-    }
-  
-    #checkPanel {
-      cursor: pointer;
-    }
-  
-    svg {
-      display: block;
-    }
-  
-    path {
-      stroke: var(--wired-radio-icon-color, currentColor);
-      stroke-width: 0.7;
-      fill: transparent;
-    }
-  
-    .filledPath {
-      fill: var(--wired-radio-icon-color, currentColor);
-    }
-    `;
-    }
     render() {
         return html `
-    <div id="container" @click="${this.toggleCheck}">
-      <div id="checkPanel" class="inline">
-        <svg id="svg" width="0" height="0"></svg>
-      </div>
-      <div class="inline">
-        <slot></slot>
-      </div>
-    </div>
+    <label id="container" class="${this.focused ? 'focused' : ''}">
+      <input type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" 
+        @change="${this.onChange}"
+        @focus="${() => this.focused = true}"
+        @blur="${() => this.focused = false}">
+      <span><slot></slot></span>
+      <div id="overlay"><svg></svg></div>
+    </label>
     `;
     }
-    refreshDisabledState() {
-        if (this.disabled) {
-            this.classList.add('wired-disabled');
-        }
-        else {
-            this.classList.remove('wired-disabled');
-        }
-        this.tabIndex = this.disabled ? -1 : +(this.getAttribute('tabindex') || 0);
+    onChange() {
+        this.checked = this.input.checked;
+        this.refreshCheckVisibility();
+        fire(this, 'change', { checked: this.checked });
     }
-    toggleCheck() {
-        this.checked = !(this.checked || false);
-        this.fireEvent('change', { checked: this.checked });
+    canvasSize() {
+        return [24, 24];
     }
-    firstUpdated() {
-        this.setAttribute('role', 'checkbox');
-        this.addEventListener('keydown', (event) => {
-            if ((event.keyCode === 13) || (event.keyCode === 32)) {
-                event.preventDefault();
-                this.toggleCheck();
-            }
-        });
+    draw(svg, size) {
+        ellipse(svg, size[0] / 2, size[1] / 2, size[0], size[1]);
+        this.svgCheck = svgNode('g');
+        svg.appendChild(this.svgCheck);
+        const iw = Math.max(size[0] * 0.6, 5);
+        const ih = Math.max(size[1] * 0.6, 5);
+        ellipse(this.svgCheck, size[0] / 2, size[1] / 2, iw, ih);
     }
-    updated(changed) {
-        if (changed.has('disabled')) {
-            this.refreshDisabledState();
+    refreshCheckVisibility() {
+        if (this.svgCheck) {
+            this.svgCheck.style.display = this.checked ? '' : 'none';
         }
-        const svg = this.shadowRoot.getElementById('svg');
-        while (svg.hasChildNodes()) {
-            svg.removeChild(svg.lastChild);
-        }
-        this.dot = undefined;
-        const s = { width: this.iconsize || 24, height: this.iconsize || 24 };
-        svg.setAttribute('width', `${s.width}`);
-        svg.setAttribute('height', `${s.height}`);
-        ellipse(svg, s.width / 2, s.height / 2, s.width, s.height);
-        const iw = Math.max(s.width * 0.6, 5);
-        const ih = Math.max(s.height * 0.6, 5);
-        this.dot = ellipse(svg, s.width / 2, s.height / 2, iw, ih);
-        this.dot.classList.add('filledPath');
-        this.dot.style.display = this.checked ? '' : 'none';
-        this.classList.add('wired-rendered');
     }
@@ -146,5 +126,9 @@ };
 __decorate([
-    property({ type: Number }),
+    property(),
     __metadata("design:type", Object)
-], WiredRadio.prototype, "iconsize", void 0);
+], WiredRadio.prototype, "focused", void 0);
+__decorate([
+    query('input'),
+    __metadata("design:type", HTMLInputElement)
+], WiredRadio.prototype, "input", void 0);
 WiredRadio = __decorate([
@@ -151,0 +135,0 @@ customElement('wired-radio')

package.json

 {
   "name": "wired-radio",
-  "version": "1.0.0",
+  "version": "2.0.0-alpha.0",
   "description": "Hand-drawn sketchy radio button - web component",
@@ -30,5 +30,5 @@ "main": "lib/wired-radio.js",
   "dependencies": {
-    "wired-lib": "^1.0.0"
+    "wired-lib": "^2.0.0-alpha.0"
   },
-  "gitHead": "9ab7130927eef2f905a001f1b593ad24e8dbc856"
+  "gitHead": "e77d05e711b8d275706b586adeb14cf03c2fc625"
 }

src/wired-radio.ts

@@ -1,3 +0,4 @@
-import { WiredBase, customElement, property, TemplateResult, html, css, CSSResult, PropertyValues } from 'wired-lib/lib/wired-base';
-import { ellipse } from 'wired-lib';
+import { WiredBase, BaseCSS } from 'wired-lib/lib/wired-base';
+import { customElement, property, css, TemplateResult, html, CSSResultArray, query } from 'lit-element';
+import { ellipse, Point, svgNode, fire } from 'wired-lib';
 
@@ -9,122 +10,104 @@ @customElement('wired-radio')
   @property({ type: String }) name?: string;
-  @property({ type: Number }) iconsize = 24;
+  @property() private focused = false;
 
-  private dot?: SVGElement;
+  @query('input') private input?: HTMLInputElement;
 
-  static get styles(): CSSResult {
-    return css`
-    :host {
-      display: inline-block;
-      position: relative;
-      padding: 5px;
-      font-family: inherit;
-      width: 150px;
-      outline: none;
-      opacity: 0;
-    }
+  private svgCheck?: SVGElement;
 
-    :host(.wired-rendered) {
-      opacity: 1;
-    }
-  
-    :host(.wired-disabled) {
-      opacity: 0.45 !important;
-      cursor: default;
-      pointer-events: none;
-    }
+  static get styles(): CSSResultArray {
+    return [
+      BaseCSS,
+      css`
+      :host {
+        display: inline-block;
+        font-family: inherit;
+      }
+      :host([disabled]) {
+        opacity: 0.6 !important;
+        cursor: default;
+        pointer-events: none;
+      }
+      :host([disabled]) svg {
+        background: rgba(0, 0, 0, 0.07);
+      }
 
-    :host(:focus) path {
-      stroke-width: 1.5;
+      #container {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        user-select: none;
+        min-height: 24px;
+        cursor: pointer;
+      }
+      span {
+        margin-left: 1.5ex;
+      }
+      input {
+        opacity: 0;
+      }
+      path {
+        stroke: var(--wired-radio-icon-color, currentColor);
+        stroke-width: var(--wired-radio-default-swidth, 0.7);
+      }
+      g path {
+        stroke-width: 0;
+        fill: var(--wired-radio-icon-color, currentColor);
+      }
+      #container.focused {
+        --wired-radio-default-swidth: 1.5;
+      }
+      `
+    ];
+  }
+
+  focus() {
+    if (this.input) {
+      this.input.focus();
+    } else {
+      super.focus();
     }
-  
-    #container {
-      display: inline-block;
-      white-space: nowrap;
-    }
-  
-    .inline {
-      display: inline-block;
-      vertical-align: middle;
-      -moz-user-select: none;
-      user-select: none;
-    }
-  
-    #checkPanel {
-      cursor: pointer;
-    }
-  
-    svg {
-      display: block;
-    }
-  
-    path {
-      stroke: var(--wired-radio-icon-color, currentColor);
-      stroke-width: 0.7;
-      fill: transparent;
-    }
-  
-    .filledPath {
-      fill: var(--wired-radio-icon-color, currentColor);
-    }
-    `;
   }
 
+  wiredRender(force = false) {
+    super.wiredRender(force);
+    this.refreshCheckVisibility();
+  }
+
   render(): TemplateResult {
     return html`
-    <div id="container" @click="${this.toggleCheck}">
-      <div id="checkPanel" class="inline">
-        <svg id="svg" width="0" height="0"></svg>
-      </div>
-      <div class="inline">
-        <slot></slot>
-      </div>
-    </div>
+    <label id="container" class="${this.focused ? 'focused' : ''}">
+      <input type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" 
+        @change="${this.onChange}"
+        @focus="${() => this.focused = true}"
+        @blur="${() => this.focused = false}">
+      <span><slot></slot></span>
+      <div id="overlay"><svg></svg></div>
+    </label>
     `;
   }
 
-  private refreshDisabledState() {
-    if (this.disabled) {
-      this.classList.add('wired-disabled');
-    } else {
-      this.classList.remove('wired-disabled');
-    }
-    this.tabIndex = this.disabled ? -1 : +(this.getAttribute('tabindex') || 0);
+  private onChange() {
+    this.checked = this.input!.checked;
+    this.refreshCheckVisibility();
+    fire(this, 'change', { checked: this.checked });
   }
 
-  toggleCheck() {
-    this.checked = !(this.checked || false);
-    this.fireEvent('change', { checked: this.checked });
+  protected canvasSize(): Point {
+    return [24, 24];
   }
 
-  firstUpdated() {
-    this.setAttribute('role', 'checkbox');
-    this.addEventListener('keydown', (event) => {
-      if ((event.keyCode === 13) || (event.keyCode === 32)) {
-        event.preventDefault();
-        this.toggleCheck();
-      }
-    });
+  protected draw(svg: SVGSVGElement, size: Point) {
+    ellipse(svg, size[0] / 2, size[1] / 2, size[0], size[1]);
+    this.svgCheck = svgNode('g');
+    svg.appendChild(this.svgCheck);
+    const iw = Math.max(size[0] * 0.6, 5);
+    const ih = Math.max(size[1] * 0.6, 5);
+    ellipse(this.svgCheck, size[0] / 2, size[1] / 2, iw, ih);
   }
 
-  updated(changed: PropertyValues) {
-    if (changed.has('disabled')) {
-      this.refreshDisabledState();
+  private refreshCheckVisibility() {
+    if (this.svgCheck) {
+      this.svgCheck.style.display = this.checked ? '' : 'none';
     }
-    const svg = (this.shadowRoot!.getElementById('svg') as any) as SVGSVGElement;
-    while (svg.hasChildNodes()) {
-      svg.removeChild(svg.lastChild!);
-    }
-    this.dot = undefined;
-    const s = { width: this.iconsize || 24, height: this.iconsize || 24 };
-    svg.setAttribute('width', `${s.width}`);
-    svg.setAttribute('height', `${s.height}`);
-    ellipse(svg, s.width / 2, s.height / 2, s.width, s.height);
-
-    const iw = Math.max(s.width * 0.6, 5);
-    const ih = Math.max(s.height * 0.6, 5);
-    this.dot = ellipse(svg, s.width / 2, s.height / 2, iw, ih);
-    this.dot.classList.add('filledPath');
-    this.dot.style.display = this.checked ? '' : 'none';
-    this.classList.add('wired-rendered');
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

11201

decreased by-37.18%

Number of package files

7

decreased by-12.5%

Lines of code

259

decreased by-5.13%

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedwired-lib@2.1.0(transitive)

• - Removedroughjs@3.1.0(transitive)

• - Removedwired-lib@1.0.0(transitive)

• - Removedworkly@1.3.1(transitive)

• Updatedwired-lib@^2.0.0-alpha.0