btn-kit - npm Package Compare versions

Comparing version 0.0.1-alpha.1 to 0.0.1-alpha.2

package.json

 {
   "name": "btn-kit",
-  "version": "0.0.1-alpha.1",
-  "description": "btn-kit is a customizable button component for web apps with built-in features like icon support, predefined styles, various button types and sizes, and UI customization.",
+  "version": "0.0.1-alpha.2",
+  "description": "btn-kit is a Vue 3 component for creating buttons for web applications. Built-in features include icon support, different button types and sizes, states, effects.",
   "author": "ux-ui.pro",
+  "homepage": "https://btn-kit.ux-ui.pro/",
   "license": "MIT",
@@ -24,4 +25,3 @@ "repository": {
       "require": "./dist/btn-kit.umd.cjs"
-    },
-    "./index.css": "./dist/index.css"
+    }
   },
@@ -28,0 +28,0 @@ "exclude": [

README.md

@@ -5,4 +5,4 @@ <div align="center">
 # btn-kit
-<sup>btn-kit is a customizable button component for web apps with built-in features like icon support,<br>
-predefined styles, various button types and sizes, and UI customization.</sup>
+<sup>btn-kit is a Vue 3 component for creating buttons for web applications.<br>
+Built-in features include icon support, different button types and sizes, states, effects.</sup>
 
@@ -15,3 +15,5 @@ [![npm](https://img.shields.io/npm/v/btn-kit.svg?colorB=brightgreen)](https://www.npmjs.com/package/btn-kit)
 
-<h3><a href="https://qpgzlf.csb.app/">Demo</a></h3>
+<h3><a href="https://btn-kit.ux-ui.pro/build">Constructor</a></h3>
+<h3><a href="https://qpgzlf.csb.app/">Sandbox</a></h3>
+<h3><a href="https://btn-kit.ux-ui.pro/docs">Docs</a></h3>
 </div>
@@ -21,3 +23,3 @@ <br>
 ## Install
-```
+```bash
 $ yarn add btn-kit
@@ -27,15 +29,20 @@ ```
 
-## Use
-<sub>import</sub>
+## Import
 ```javascript
-import Button from 'btn-kit'
-import 'btn-kit/dist/style.css'
+import AppButton from 'btn-kit'
+import 'btn-kit/dist/index.css'
+
+app.component('AppButton', AppButton)
 ```
+<br>
 
-<sub>To use all the functionality of btn-kit, it is enough to create a button theme, to set its background color and text color.</sub>
+## Usage
 ```vue
 <template>
-	<Button theme="awesome-button">
-		<span class="label">Текст</span>
-	</Button>
+    <AppButton
+        theme="awesome"
+        size="md"
+    >
+        <span class="label">Text</span>
+    </AppButton>
 </template>
@@ -45,10 +52,9 @@
 .btn--theme {
-    &-awesome-button {
+    &-awesome {
+        --vbk-background-h: 180;
+        --vbk-background-s: 100%;
+        --vbk-background-l: 25%;
         --vbk-color-h: 0;
         --vbk-color-s: 0%;
-        --vbk-color-l: 100%;
-
-        --vbk-background-h: 0;
-        --vbk-background-s: 53%;
-        --vbk-background-l: 58%;
+        --vbk-color-l: 90%;
     }
@@ -60,68 +66,3 @@ }
 
-## Options
-| Option         | Type     | Default      | Description                              |
-| :------------- | :------: | :----------: | :--------------------------------------- |
-| **theme**      | String   | —            | ...                                      |
-| **size**       | String   | `md`         | `sm`, `md`, `lg` — ...                   |
-| **shape**      | String   | —            | `rounded` — ...<br>`round` — ...         |
-| **variation**  | String   | contained    | `outlined` — ...<br>`text` — ...         |
-| **ripple**     | Boolean  | `false`      | ...                                      |
-| **disabled**   | Boolean  | `false`      | ...                                      |
-| **progress**   | Boolean  | `false`      | ...                                      |
-<br>
-
-## Events
-| Option         | Type     | Default      | Description                              |
-| :------------- | :------: | :----------: | :--------------------------------------- |
-| **route**      | String   | —            | ...                                      |
-| **href**       | String   | —            | ...                                      |
-| **@click**     | String   | —            | ...                                      |
-<br>
-
-## Customize
-```css
---vbk-ripple-background
---vbk-ripple-mix-blend
---vbk-ripple-opacity
---vbk-ripple-speed
-
-
---vbk-color-h
---vbk-color-s
---vbk-color-l
---vbk-color-a
-
---vbk-background-h
---vbk-background-s
---vbk-background-l
---vbk-background-a
-
-
---vbk-icon-size
-
-
---vbk-font-weight
---vbk-font-size
---vbk-text-transform
---vbk-letter-spacing
-
-
---vbk-group-padding
-
-
---vbk-border-width
-
---vbk-rounded-radius
---vbk-round-radius
-
---vbk-outline-color
-
-?
---vbk-background-active
---vbk-background-hover
-?
-```
-<br>
-
 ## License
 btn-kit is released under MIT license

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

13791

decreased by-11.11%

Number of lines in readme file

62

decreased by-48.76%

No dependency changes