@infinitoui/infinito-button - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

CHANGELOG.md

@@ -6,8 +6,22 @@ # Change Log
 
-# [0.2.0](https://github.com/WUSO01/wc-components-repo/compare/v0.1.1...v0.2.0) (2020-07-07)
+# [1.0.0](http://git.infinitynewtab.com/Starlab/infinitoui/compare/v0.2.0...v1.0.0) (2020-10-19)
 
 
+### Features
+
+* **ci:** 优化构建流程 ([76b4738](http://git.infinitynewtab.com/Starlab/infinitoui/commits/76b4738703947075dff53fd53721d556c8e5a467))
+* **infinito-button:** add css variables ([181207d](http://git.infinitynewtab.com/Starlab/infinitoui/commits/181207db050c83c61c7bfaacd60fbf200ac92187))
+* **infinito-button:** add slot ([a2819b3](http://git.infinitynewtab.com/Starlab/infinitoui/commits/a2819b300cbdeaf640274e1af190d69374d17d48))
+* **storybook:** 添加storybok来替代最开始的demo ([bf9dfc9](http://git.infinitynewtab.com/Starlab/infinitoui/commits/bf9dfc9a216d239778ebd66db3fa6805d4db923f))
+
+
+
+
+
+# [0.2.0](http://git.infinitynewtab.com/Starlab/infinitoui/compare/v0.1.1...v0.2.0) (2020-07-07)
+
+
 ### Reverts
 
-* rever ([2d2b27c](https://github.com/WUSO01/wc-components-repo/commit/2d2b27cbc627af248be6fb6858447aa68b94ba45))
+* rever ([2d2b27c](http://git.infinitynewtab.com/Starlab/infinitoui/commit/2d2b27cbc627af248be6fb6858447aa68b94ba45))
 
@@ -18,3 +32,3 @@
 
-## [0.1.1](https://github.com/WUSO01/wc-components-repo/compare/v0.1.0...v0.1.1) (2020-07-02)
+## [0.1.1](http://git.infinitynewtab.com/Starlab/infinitoui/compare/v0.1.0...v0.1.1) (2020-07-02)
 
@@ -24,3 +38,3 @@
 
-* **all:** 修改README和package的主页链接 ([905f0b4](https://github.com/WUSO01/wc-components-repo/commit/905f0b487097d5b7d1f1c06622ece452e48d2a1a))
+* **all:** 修改README和package的主页链接 ([905f0b4](http://git.infinitynewtab.com/Starlab/infinitoui/commit/905f0b487097d5b7d1f1c06622ece452e48d2a1a))
 
@@ -27,0 +41,0 @@

lib/infinito-button.d.ts

 import { LitElement, TemplateResult } from 'lit-element';
+/**
+ * @element infinito-button
+ *
+ * @fires click - 按钮点击事件
+ *
+ * @slot - 默认插槽，按钮文字或者其他html标签
+ *
+ * @cssprop [--button-color=#fff] 背景颜色
+ * @cssprop [--button-padding=0 8px] 内间距
+ * @cssprop [--border-color=#333] border颜色
+ * @cssprop [--border-radis=6px] 圆角
+ * @cssprop [--fonts-size=14px] 字体大小
+ * @cssprop [--hover-color=#333] hover时按钮背景颜色
+ * @cssprop [--hover-font-color=#fff] hover时文字颜色
+ */
 export declare class InfinitoButton extends LitElement {
+    static styles: import("lit-element").CSSResult;
+    /**
+     * 是否禁用按钮
+     * @type {boolean}
+     * @attr
+     */
     disabled: boolean;
+    /**
+     * 按钮文字
+     * @type {string}
+     * @attr label
+     */
     label: string;
-    static styles: import("lit-element").CSSResult;
     render(): TemplateResult;
@@ -7,0 +32,0 @@ }

lib/infinito-button.js

@@ -10,7 +10,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { customElement, LitElement, html, css, property } from 'lit-element';
+import { customElement, LitElement, html, property } from 'lit-element';
+import styles from './infinito-button-css';
+/**
+ * @element infinito-button
+ *
+ * @fires click - 按钮点击事件
+ *
+ * @slot - 默认插槽，按钮文字或者其他html标签
+ *
+ * @cssprop [--button-color=#fff] 背景颜色
+ * @cssprop [--button-padding=0 8px] 内间距
+ * @cssprop [--border-color=#333] border颜色
+ * @cssprop [--border-radis=6px] 圆角
+ * @cssprop [--fonts-size=14px] 字体大小
+ * @cssprop [--hover-color=#333] hover时按钮背景颜色
+ * @cssprop [--hover-font-color=#fff] hover时文字颜色
+ */
 let InfinitoButton = class InfinitoButton extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * 是否禁用按钮
+         * @type {boolean}
+         * @attr
+         */
         this.disabled = false;
+        /**
+         * 按钮文字
+         * @type {string}
+         * @attr label
+         */
         this.label = '';
@@ -20,7 +46,5 @@ }
         return html `
-      <button
-        ?disabled="${this.disabled}"
-      >
+      <button ?disabled="${this.disabled}" >
         <span>${this.label}</span>
-        <i class="icon"></i>
+        <slot></slot>
       </button>
@@ -30,39 +54,3 @@ `;
 };
-InfinitoButton.styles = css `
-    :host {
-      --button-color: #fff;
-      --button-padding: 0 8px 0 8px;
-      --border-color: #333;
-      --border-raduis: 6px;
-      --font-color: #333;
-      --font-size: 14px;
-      display: inline-block;
-      font-size: 14px;
-    }
-    :host([primary]) {
-      --button-color: #333;
-      --font-color: #fff;
-    }
-    button {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      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;
-    }
-    :host([disabled]) button {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  `;
+InfinitoButton.styles = styles;
 __decorate([
@@ -69,0 +57,0 @@ property({ type: Boolean, reflect: true }),

package.json

 {
   "name": "@infinitoui/infinito-button",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "button",
@@ -10,6 +10,6 @@ "main": "lib/infinito-button.js",
     "type": "git",
-    "url": "https://github.com/WUSO01/wc-components-repo",
+    "url": "http://git.infinitynewtab.com/Starlab/infinitoui",
     "directory": "packages/infinito-button"
   },
-  "homepage": "https://github.com/WUSO01/wc-components-repo/tree/master/packages/infinito-button",
+  "homepage": "http://git.infinitynewtab.com/Starlab/infinitoui/tree/master/packages/infinito-button",
   "keywords": [
@@ -26,3 +26,4 @@ "web-components",
     "access": "public"
-  }
+  },
+  "gitHead": "996cca27eab7d660c72bf39a5b1b7822675d755e"
 }

README.md

@@ -1,13 +0,82 @@
-# @infinitoui/infinito-button
 
-## How to use
+<!-- ⚠️ This README has been generated from the file(s) "readme.blueprint.md" ⚠️--><h1 align="center">@infinitoui/infinito-button</h1>
 
-> yarn add @infinitoui/infinito-button
+<p align="center">
+		<a href="https://npmcharts.com/compare/@infinitoui/infinito-button?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@infinitoui/infinito-button.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@infinitoui/infinito-button"><img alt="NPM Version" src="https://img.shields.io/npm/v/@infinitoui/infinito-button.svg" height="20"/></a>
+<a href="https://github.com/badges/shields"><img alt="TypeScript" src="https://img.shields.io/npm/types/@infinitoui/infinito-button" height="20"/></a>
+	</p>
 
-```javascript
+
+[](#preview)
+
+## Preview
+
+![preview](./images/preview.png)
+
+[](#demo)
+
+## Demo
+
+## Install
+
+> npm install @infinitoui/infinito-button
+
+[](#usage)
+
+## Usage
+
+引入组件：
+
+```js
 import '@infinitoui/infinito-button'
 ```
 
+使用：
+
 ```html
-<infinito-button label="Button"></infinito-button>
-```
+<infinito-button>default</infinito-button>
+<infinito-button primary>primary</infinito-button>
+```
+
+[](#properties)
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description |
+|------------|------------|-----------|---------|-------------|
+| `disabled` | `disabled` | `boolean` | false   | 是否禁用按钮      |
+| `label`    | `label`    | `string`  | ""      | 按钮文字        |
+
+[](#events)
+
+## Events
+
+| Event   | Description |
+|---------|-------------|
+| `click` | 按钮点击事件      |
+
+
+[](#slots)
+
+## Slots
+
+| Name | Description         |
+|------|---------------------|
+|      | 默认插槽，按钮文字或者其他html标签 |
+
+
+[](#css-custom-properties)
+
+## CSS Custom Properties
+
+| Property             | Default | Description  |
+|----------------------|---------|--------------|
+| `--border-color`     | "#333"  | border颜色     |
+| `--border-radis`     | "6px"   | 圆角           |
+| `--button-color`     | "#fff"  | 背景颜色         |
+| `--button-padding`   | "0 8px" | 内间距          |
+| `--fonts-size`       | "14px"  | 字体大小         |
+| `--hover-color`      | "#333"  | hover时按钮背景颜色 |
+| `--hover-font-color` | "#fff"  | hover时文字颜色   |
+

src/infinito-button.ts

@@ -1,54 +0,43 @@
-import { customElement, LitElement, html, css, property, TemplateResult } from 'lit-element'
+import { customElement, LitElement, html, property, TemplateResult } from 'lit-element'
 
+import styles from './infinito-button-css'
+
+/**
+ * @element infinito-button
+ *
+ * @fires click - 按钮点击事件
+ *
+ * @slot - 默认插槽，按钮文字或者其他html标签
+ *
+ * @cssprop [--button-color=#fff] 背景颜色
+ * @cssprop [--button-padding=0 8px] 内间距
+ * @cssprop [--border-color=#333] border颜色
+ * @cssprop [--border-radis=6px] 圆角
+ * @cssprop [--fonts-size=14px] 字体大小
+ * @cssprop [--hover-color=#333] hover时按钮背景颜色
+ * @cssprop [--hover-font-color=#fff] hover时文字颜色
+ */
 @customElement('infinito-button')
 export class InfinitoButton extends LitElement {
+  static styles = styles
+
+  /**
+   * 是否禁用按钮
+   * @type {boolean}
+   * @attr
+   */
   @property({ type: Boolean, reflect: true }) disabled = false
 
+  /**
+   * 按钮文字
+   * @type {string}
+   * @attr label
+   */
   @property({ type: String }) label = ''
 
-  static styles = css`
-    :host {
-      --button-color: #fff;
-      --button-padding: 0 8px 0 8px;
-      --border-color: #333;
-      --border-raduis: 6px;
-      --font-color: #333;
-      --font-size: 14px;
-      display: inline-block;
-      font-size: 14px;
-    }
-    :host([primary]) {
-      --button-color: #333;
-      --font-color: #fff;
-    }
-    button {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      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;
-    }
-    :host([disabled]) button {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  `
-
   render(): TemplateResult {
     return html`
-      <button
-        ?disabled="${this.disabled}"
-      >
+      <button ?disabled="${this.disabled}" >
         <span>${this.label}</span>
-        <i class="icon"></i>
+        <slot></slot>
       </button>
@@ -55,0 +44,0 @@ `

tsconfig.json

 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "rootDir": "./src",
     "outDir": "./lib"
@@ -10,4 +11,4 @@ },
   "exclude": [
-    "src/test/*.ts"
+    "stories/*.ts"
   ]
-}
+}

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

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

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

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16783

increased by95.95%

Number of package files

16

increased by100%

Lines of code

193

increased by22.15%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

83

increased by538.46%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes