@infinitoui/infinito-button - npm Package Compare versions

Comparing version 1.4.0 to 1.5.7

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.5.7](http://git.infinitynewtab.com/Starlab/infinitoui/compare/v1.5.6...v1.5.7) (2021-01-29)
+
+
+### Features
+
+* **button:** 添加loading状态 ([077225e](http://git.infinitynewtab.com/Starlab/infinitoui/commits/077225e4ff8cdb828362775e334afeb1a978f0da))
+
+
+
+
+
 # [1.4.0](http://git.infinitynewtab.com/Starlab/infinitoui/compare/v1.3.0...v1.4.0) (2020-12-30)
@@ -8,0 +19,0 @@

lib/infinito-button-css.js

 import { css } from 'lit-element';
-export default css `:host{--button-color: #fff;--button-padding: 0 8px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:inline-block;font-size:14px}:host([primary]){--button-color: #333;--font-color: #fff}:host([disabled]) button{opacity:0.5;cursor:not-allowed}button{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:32px;padding:var(--button-padding);color:var(--font-color);font-size:var(--font-size);text-align:center;border:1px solid var(--border-color);background:var(--button-color);border-radius:var(--border-raduis);outline:none;overflow:hidden;cursor:pointer;transition:all .3s}button:hover{color:var(--hover-font-color);background:var(--hover-color)}
+export default css `:host{--button-color: #fff;--button-padding: 0 8px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:inline-block;font-size:14px}:host([primary]){--button-color: #333;--font-color: #fff}:host([disabled]) button{opacity:0.5;cursor:not-allowed}:host([loading]) button{opacity:0.5;cursor:not-allowed}button{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:32px;padding:var(--button-padding);color:var(--font-color);font-size:var(--font-size);text-align:center;border:1px solid var(--border-color);background:var(--button-color);border-radius:var(--border-raduis);outline:none;overflow:hidden;cursor:pointer;transition:all .3s}button:hover{color:var(--hover-font-color);background:var(--hover-color)}button>span{display:flex;align-items:center;justify-content:center;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button .loading{width:36px}
 `;

lib/infinito-button.d.ts

@@ -26,8 +26,10 @@ import { LitElement, TemplateResult } from 'lit-element';
     /**
-     * 按钮文字
-     * @type {string}
-     * @attr label
+     * 是否显示spinning
+     * @type {boolean}
+     * @attr
      */
-    label: string;
+    loading: boolean;
+    firstUpdated(): void;
     render(): TemplateResult;
+    protected renderSpin(): TemplateResult;
 }
@@ -34,0 +36,0 @@ declare global {

lib/infinito-button.js

@@ -12,2 +12,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import styles from './infinito-button-css';
+import spinner from '@infinitoui/infinito-button/src/images/spinner.svg';
 /**
@@ -38,16 +39,32 @@ * @element infinito-button
         /**
-         * 按钮文字
-         * @type {string}
-         * @attr label
+         * 是否显示spinning
+         * @type {boolean}
+         * @attr
          */
-        this.label = '';
+        this.loading = false;
     }
+    firstUpdated() {
+        this.addEventListener('click', (e) => {
+            if (this.loading) {
+                e.stopPropagation();
+            }
+        }, true);
+    }
     render() {
         return html `
       <button ?disabled="${this.disabled}" >
-        <span>${this.label}</span>
-        <slot></slot>
+        <span>
+          <slot></slot>
+          ${this.renderSpin()}
+        </span>
       </button>
     `;
     }
+    renderSpin() {
+        if (!this.loading)
+            return html ``;
+        return html `
+      <img class="loading" src=${spinner} />
+    `;
+    }
 };
@@ -60,5 +77,5 @@ InfinitoButton.styles = styles;
 __decorate([
-    property({ type: String }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
-], InfinitoButton.prototype, "label", void 0);
+], InfinitoButton.prototype, "loading", void 0);
 InfinitoButton = __decorate([
@@ -65,0 +82,0 @@ customElement('infinito-button')

package.json

 {
   "name": "@infinitoui/infinito-button",
-  "version": "1.4.0",
+  "version": "1.5.7",
   "description": "button",
@@ -26,3 +26,3 @@ "main": "lib/infinito-button.js",
   },
-  "gitHead": "d8f3a8b2577fab74e7a1c63e046dca0506ddcfa7"
+  "gitHead": "962cba77a73e54cd05b9115a7635bdfdf64ad683"
 }

src/infinito-button-css.ts

 import { css } from 'lit-element'
-export default css`:host{--button-color: #fff;--button-padding: 0 8px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:inline-block;font-size:14px}:host([primary]){--button-color: #333;--font-color: #fff}:host([disabled]) button{opacity:0.5;cursor:not-allowed}button{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:32px;padding:var(--button-padding);color:var(--font-color);font-size:var(--font-size);text-align:center;border:1px solid var(--border-color);background:var(--button-color);border-radius:var(--border-raduis);outline:none;overflow:hidden;cursor:pointer;transition:all .3s}button:hover{color:var(--hover-font-color);background:var(--hover-color)}
+export default css`:host{--button-color: #fff;--button-padding: 0 8px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:inline-block;font-size:14px}:host([primary]){--button-color: #333;--font-color: #fff}:host([disabled]) button{opacity:0.5;cursor:not-allowed}:host([loading]) button{opacity:0.5;cursor:not-allowed}button{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:32px;padding:var(--button-padding);color:var(--font-color);font-size:var(--font-size);text-align:center;border:1px solid var(--border-color);background:var(--button-color);border-radius:var(--border-raduis);outline:none;overflow:hidden;cursor:pointer;transition:all .3s}button:hover{color:var(--hover-font-color);background:var(--hover-color)}button>span{display:flex;align-items:center;justify-content:center;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button .loading{width:36px}
 `

src/infinito-button.ts

@@ -5,2 +5,4 @@ import { customElement, LitElement, html, property, TemplateResult } from 'lit-element'
 
+import spinner from '@infinitoui/infinito-button/src/images/spinner.svg'
+
 /**
@@ -32,9 +34,35 @@ * @element infinito-button
 
+  /**
+   * 是否显示spinning
+   * @type {boolean}
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true }) loading = false
+
+  firstUpdated() {
+    this.addEventListener('click', (e) => {
+      if (this.loading) {
+        e.stopPropagation()
+      }
+    }, true)
+  }
+
   render(): TemplateResult {
     return html`
       <button ?disabled="${this.disabled}" >
-        <span><slot></slot></span>
+        <span>
+          <slot></slot>
+          ${this.renderSpin()}
+        </span>
       </button>
     `
   }
+
+  protected renderSpin(): TemplateResult {
+    if (!this.loading) return html``
+
+    return html`
+      <img class="loading" src=${spinner} />
+    `
+  }
 }
@@ -41,0 +69,0 @@

Fixed alerts

New author

Supply chain risk

A 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

Total package byte prevSize

18750

increased by10.65%

Lines of code

232

increased by24.73%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes