cfor - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

lib/checkbox.js

@@ -68,5 +68,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       <div id="iconPanel" class="${state}">
-        <cf-icon id="uicon" .path="${PATH_UNFILLLED}"></cf-icon>
-        <cf-icon id="cicon" .path="${PATH_FILLED}"></cf-icon>
-        <cf-icon id="iicon" .path="${PATH_INDETERMINATE}"></cf-icon>
+        <cf-icon id="uicon" .icon="${PATH_UNFILLLED}"></cf-icon>
+        <cf-icon id="cicon" .icon="${PATH_FILLED}"></cf-icon>
+        <cf-icon id="iicon" .icon="${PATH_INDETERMINATE}"></cf-icon>
       </div>
@@ -73,0 +73,0 @@ ${this.label ? html `<label>${this.label}</label>` : null}

lib/icon-button-toggle.js

@@ -85,3 +85,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       button:focus::before {
-        opacity: 0.1;
+        opacity: 0.2;
       }
@@ -137,6 +137,6 @@ button:active::after {
         button:hover::before {
-          opacity: 0.05;
+          opacity: 0.1;
         }
         button:focus:hover::before {
-          opacity: 0.1;
+          opacity: 0.2;
         }
@@ -143,0 +143,0 @@ }

lib/icon-button.js

@@ -72,6 +72,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       button:focus::before {
-        opacity: 0.1;
+        opacity: 0.2;
       }
       button:active::after {
-        opacity: 0.1;
+        opacity: 0.2;
         transform: scale(1);
@@ -97,6 +97,6 @@ transition: opacity 0.28s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
         button:hover::before {
-          opacity: 0.05;
+          opacity: 0.1;
         }
         button:focus:hover::before {
-          opacity: 0.1;
+          opacity: 0.2;
         }
@@ -103,0 +103,0 @@ }

lib/icon.d.ts

@@ -8,5 +8,5 @@ import { Component, TemplateResult } from './core/component.js';
 export declare class C4Icon extends Component {
-    path: string;
+    icon?: string;
     static styles: import("lit").CSSResultGroup[];
     render(): TemplateResult;
 }

lib/icon.js

@@ -11,15 +11,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { Component, ce, html, css, property } from './core/component.js';
+import { iconMap } from './icon-map';
 let C4Icon = class C4Icon extends Component {
-    constructor() {
-        super(...arguments);
-        this.path = 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z';
-    }
     render() {
-        return html `
-    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
-      <g>
-        <path d=${this.path}></path>
-      </g>
-    </svg>
-    `;
+        if (this.icon) {
+            const path = iconMap.get(this.icon) || this.icon;
+            return html `
+        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
+          <g>
+            <path d=${path}></path>
+          </g>
+        </svg>
+      `;
+        }
+        return html `<slot></slot>`;
     }
@@ -47,2 +48,10 @@ };
       }
+      ::slotted(svg) {
+        pointer-events: none;
+        display: block;
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+        stroke: none;
+      }
     `
@@ -52,4 +61,4 @@ ];
     property(),
-    __metadata("design:type", Object)
-], C4Icon.prototype, "path", void 0);
+    __metadata("design:type", String)
+], C4Icon.prototype, "icon", void 0);
 C4Icon = __decorate([
@@ -56,0 +65,0 @@ ce('cf-icon')

lib/select.js

@@ -99,3 +99,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       
-      <cf-icon id="trailingIcon" .path="${ICON}"></cf-icon>
+      <cf-icon id="trailingIcon" .icon="${ICON}"></cf-icon>
     </label>
@@ -102,0 +102,0 @@ <cf-menu

lib/tab.d.ts

@@ -9,7 +9,12 @@ import { Component, TemplateResult } from './core/component.js';
 export declare class C4Tab extends Component {
-    value: string;
     icon?: string;
     label: string;
     topIcon: boolean;
+    _focusable: boolean;
     private _b?;
+    private _selected;
+    private _value?;
+    get value(): string;
+    set value(v: string);
+    _setSelected(value: boolean): void;
     static styles: import("lit").CSSResultGroup[];
@@ -16,0 +21,0 @@ render(): TemplateResult;

lib/tab.js

@@ -10,3 +10,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Component, ce, html, css, property, query } from './core/component.js';
+import { Component, ce, html, css, property, query, state } from './core/component.js';
 import { FLEX_STYLE, FONT_STYLE } from './core/styles.js';
@@ -18,6 +18,16 @@ import { classMap } from 'lit/directives/class-map.js';
         super(...arguments);
-        this.value = '';
         this.label = '';
         this.topIcon = false;
+        this._focusable = true;
+        this._selected = false;
     }
+    get value() {
+        return this._value || this.label;
+    }
+    set value(v) {
+        this._value = v;
+    }
+    _setSelected(value) {
+        this._selected = value;
+    }
     render() {
@@ -27,6 +37,7 @@ const cc = {
             topicon: this.topIcon,
-            haslabel: !!this.label
+            haslabel: !!this.label,
+            selected: this._selected
         };
         return html `
-    <button class="horiz center2 ${classMap(cc)}" >
+    <button class="horiz center2 ${classMap(cc)}" tabindex="${this._focusable ? 0 : -1}">
       ${this.icon ? html `<cf-icon .icon="${this.icon}"></cf-icon>` : null}
@@ -52,3 +63,5 @@ ${this.label ? html `<span id="label">${this.label}</span>` : null}
         font-size: 14px;
-        color: var(--c4-theme-primary, #6200ee);
+        color: var(--c4-tab-default-color, rgba(0,0,0,.6));
+        min-width: var(--c4-tab-min-width, 90px);
+        max-width: var(--c4-tab-max-width, 360px);
       }
@@ -74,2 +87,3 @@ button {
         border: none;
+        overflow-wrap: anywhere;
       }
@@ -83,3 +97,3 @@ button::before {
         height: 100%;
-        background: currentColor;
+        background: var(--c4-theme-primary, #6200ee);
         opacity: 0;
@@ -95,3 +109,3 @@ pointer-events: none;
         height: 100%;
-        background: currentcolor;
+        background: var(--c4-theme-primary, #6200ee);
         opacity: 0;
@@ -129,2 +143,5 @@ pointer-events: none;
       }
+      button.selected {
+        color: var(--c4-theme-primary, #6200ee);
+      }
 
@@ -143,6 +160,2 @@ @media (hover: hover) {
     property(),
-    __metadata("design:type", Object)
-], C4Tab.prototype, "value", void 0);
-__decorate([
-    property(),
     __metadata("design:type", String)
@@ -159,5 +172,18 @@ ], C4Tab.prototype, "icon", void 0);
 __decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], C4Tab.prototype, "_focusable", void 0);
+__decorate([
     query('button'),
     __metadata("design:type", HTMLButtonElement)
 ], C4Tab.prototype, "_b", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], C4Tab.prototype, "_selected", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], C4Tab.prototype, "value", null);
 C4Tab = __decorate([
@@ -164,0 +190,0 @@ ce('cf-tab')

package.json

 {
   "name": "cfor",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "C for ______",
+  "type": "module",
   "main": "index.js",
@@ -23,11 +24,11 @@ "scripts": {
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.30.0",
-    "@web/dev-server": "^0.1.22",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.25",
     "eslint": "^7.32.0",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.4"
   },
   "dependencies": {
-    "lit": "^2.0.0-rc.3"
+    "lit": "^2.0.2"
   }
-}
+}

src/checkbox.ts

@@ -181,5 +181,5 @@ import { Component, ce, html, TemplateResult, css, property, state } from './core/component.js';
       <div id="iconPanel" class="${state}">
-        <cf-icon id="uicon" .path="${PATH_UNFILLLED}"></cf-icon>
-        <cf-icon id="cicon" .path="${PATH_FILLED}"></cf-icon>
-        <cf-icon id="iicon" .path="${PATH_INDETERMINATE}"></cf-icon>
+        <cf-icon id="uicon" .icon="${PATH_UNFILLLED}"></cf-icon>
+        <cf-icon id="cicon" .icon="${PATH_FILLED}"></cf-icon>
+        <cf-icon id="iicon" .icon="${PATH_INDETERMINATE}"></cf-icon>
       </div>
@@ -186,0 +186,0 @@ ${this.label ? html`<label>${this.label}</label>` : null}

src/icon-button-toggle.ts

@@ -67,3 +67,3 @@ import { Component, ce, html, TemplateResult, css, property } from './core/component.js';
       button:focus::before {
-        opacity: 0.1;
+        opacity: 0.2;
       }
@@ -119,6 +119,6 @@ button:active::after {
         button:hover::before {
-          opacity: 0.05;
+          opacity: 0.1;
         }
         button:focus:hover::before {
-          opacity: 0.1;
+          opacity: 0.2;
         }
@@ -125,0 +125,0 @@ }

src/icon-button.ts

@@ -64,6 +64,6 @@ import { Component, ce, html, TemplateResult, css, property } from './core/component.js';
       button:focus::before {
-        opacity: 0.1;
+        opacity: 0.2;
       }
       button:active::after {
-        opacity: 0.1;
+        opacity: 0.2;
         transform: scale(1);
@@ -89,6 +89,6 @@ transition: opacity 0.28s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
         button:hover::before {
-          opacity: 0.05;
+          opacity: 0.1;
         }
         button:focus:hover::before {
-          opacity: 0.1;
+          opacity: 0.2;
         }
@@ -95,0 +95,0 @@ }

src/icon.ts

 import { Component, ce, html, TemplateResult, css, property } from './core/component.js';
+import { iconMap } from './icon-map';
 
@@ -11,3 +12,3 @@ declare global {
 export class C4Icon extends Component {
-  @property() path = 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z';
+  @property() icon?: string;
 
@@ -34,13 +35,25 @@ static styles = [
       }
+      ::slotted(svg) {
+        pointer-events: none;
+        display: block;
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+        stroke: none;
+      }
     `
   ]
   render(): TemplateResult {
-    return html`
-    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
-      <g>
-        <path d=${this.path}></path>
-      </g>
-    </svg>
-    `;
+    if (this.icon) {
+      const path = iconMap.get(this.icon) || this.icon;
+      return html`
+        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
+          <g>
+            <path d=${path}></path>
+          </g>
+        </svg>
+      `;
+    }
+    return html`<slot></slot>`;
   }
 }

src/select.ts

@@ -377,3 +377,3 @@ import { Component, ce, html, TemplateResult, css, property, state, query } from './core/component.js';
       
-      <cf-icon id="trailingIcon" .path="${ICON}"></cf-icon>
+      <cf-icon id="trailingIcon" .icon="${ICON}"></cf-icon>
     </label>
@@ -380,0 +380,0 @@ <cf-menu

src/tab.ts

@@ -1,2 +0,2 @@
-import { Component, ce, html, TemplateResult, css, property, query } from './core/component.js';
+import { Component, ce, html, TemplateResult, css, property, query, state } from './core/component.js';
 import { FLEX_STYLE, FONT_STYLE } from './core/styles.js';
@@ -15,9 +15,25 @@ import { classMap, ClassInfo } from 'lit/directives/class-map.js';
 export class C4Tab extends Component {
-  @property() value = '';
   @property() icon?: string;
   @property() label = '';
   @property({ type: Boolean, attribute: 'top-icon' }) topIcon = false;
+  @property({ type: Boolean }) _focusable = true;
 
   @query('button') private _b?: HTMLButtonElement;
 
+  @state() private _selected = false;
+  private _value?: string;
+
+  @property({ type: String })
+  get value(): string {
+    return this._value || this.label;
+  }
+
+  set value(v: string) {
+    this._value = v;
+  }
+
+  _setSelected(value: boolean): void {
+    this._selected = value;
+  }
+
   static styles = [
@@ -33,3 +49,5 @@ Component.styles,
         font-size: 14px;
-        color: var(--c4-theme-primary, #6200ee);
+        color: var(--c4-tab-default-color, rgba(0,0,0,.6));
+        min-width: var(--c4-tab-min-width, 90px);
+        max-width: var(--c4-tab-max-width, 360px);
       }
@@ -55,2 +73,3 @@ button {
         border: none;
+        overflow-wrap: anywhere;
       }
@@ -64,3 +83,3 @@ button::before {
         height: 100%;
-        background: currentColor;
+        background: var(--c4-theme-primary, #6200ee);
         opacity: 0;
@@ -76,3 +95,3 @@ pointer-events: none;
         height: 100%;
-        background: currentcolor;
+        background: var(--c4-theme-primary, #6200ee);
         opacity: 0;
@@ -110,2 +129,5 @@ pointer-events: none;
       }
+      button.selected {
+        color: var(--c4-theme-primary, #6200ee);
+      }
 
@@ -126,6 +148,7 @@ @media (hover: hover) {
       topicon: this.topIcon,
-      haslabel: !!this.label
+      haslabel: !!this.label,
+      selected: this._selected
     };
     return html`
-    <button class="horiz center2 ${classMap(cc)}" >
+    <button class="horiz center2 ${classMap(cc)}" tabindex="${this._focusable ? 0 : -1}">
       ${this.icon ? html`<cf-icon .icon="${this.icon}"></cf-icon>` : null}
@@ -132,0 +155,0 @@ ${this.label ? html`<span id="label">${this.label}</span>` : null}

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Improved metrics

Total package byte prevSize

551141

increased by28.02%

Number of package files

125

increased by40.45%

Lines of code

17708

increased by28.34%

Number of medium supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Dependency changes

• Updatedlit@^2.0.2