svelte-otp - npm Package Compare versions

Comparing version 0.0.6 to 1.0.0

package.json

 {
   "name": "svelte-otp",
-  "version": "0.0.6",
+  "version": "1.0.0",
   "description": "svelte Otp",
   "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build:demo": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write ./src/**/*.{svelte,ts}",
+    "lint": "eslint './src/**/*.{js,ts,svelte}'",
+    "lint:fix": "eslint --fix './src/**/*.{js,ts,svelte}'",
+    "prelint": "npm run format",
+    "cz": "git-cz",
+    "pkg:build": "svelte-package",
+    "postcss-convert": "postcss package/*.css --replace && postcss package/**/*.css --replace ",
+    "build:lib": "npm run pkg:build && npm run postcss-convert",
+    "commit-message": "npm run commitlint -e -V",
+    "semantic-release:local": "npm run build:lib && yarn build:demo && semantic-release --no-ci",
+    "semantic-release": "semantic-release"
+  },
   "devDependencies": {
@@ -71,13 +88,3 @@ "@commitlint/cli": "^11.0.0",
     }
-  },
-  "exports": {
-    "./package.json": "./package.json",
-    "./.DS_Store": "./.DS_Store",
-    "./Index.svelte": "./Index.svelte",
-    "./TextInput/Index.svelte": "./TextInput/Index.svelte",
-    "./TextInput/textinput.css": "./TextInput/textinput.css",
-    "./index.css": "./index.css",
-    ".": "./index.js"
-  },
-  "svelte": "./index.js"
-}
+  }
+}

README.md

@@ -1,3 +0,144 @@
-# Svelte OTP
 
-This library is still in beta.
+# Svelte Otp 
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/01cc3b58-429a-41d5-b1d4-f96641a3245f/deploy-status)](https://app.netlify.com/sites/svelte-otp/deploys)
+
+A Otp Component that can be used with Svelte. 
+
+# Install
+``` bash
+npm install svelte-otp --save
+
+yarn add svelte-otp
+```
+
+- [Demo](#demo)
+- [Usage](#usage)
+- [Props](#available-props)
+- [Events](#events)
+
+## Demo
+
+To view a demo online: <https://svelte-otp.netlify.app/>
+
+To view demo examples locally clone the repo and run `npm install && npm run dev`
+
+``` javascript
+import SvelteOtp from 'svelte-otp';
+
+// main 
+<SvelteOtp	
+    separator="-"
+    placeholder="0000"
+    ...
+/>
+```
+
+## Usage
+
+``` html
+<SvelteOtp	
+		separator="-"
+		placeholder="0000"
+        ...
+	/>
+```
+
+***numberOfInputs* prop**
+
+``` html
+    <SvelteOtp numberOfInputs={6} />
+```
+***numberOfInputs* along with *separator*prop**
+``` html
+<SvelteOtp numberOfInputs={4} separator="-"  />
+```
+**Using *numberOfInputs*, *separator* and *placeholder* props**
+``` html
+<SvelteOtp separator="-" placeholder="******" numberOfInputs={6}  />
+```
+**Masking Input**
+``` html
+<SvelteOtp separator="-" placeholder="****" numberOfInputs={4} maskInput={true} />
+```
+**Change Focus on Input/Delete**
+``` html
+<SvelteOtp 
+	...
+	autoFocusNextOnInput={true}
+	focusPreviousOnDelete={true}
+/>
+```
+**Programtic Access of value of Otp**
+```html
+    let otpInstance: {getValue: () => void};
+    function handleClick() {
+        console.log('value on click', 
+            otpInstance?.getValue());
+    }
+	...
+<SvelteOtp 
+		...
+		bind:this={otpInstance}
+	/>
+```
+
+**Prefill value on some other events/actions**
+``` html
+function callbackFunction(event: CustomEvent) {
+    console.log('emittedValue', event.detail);
+}
+function handlePrefill() {
+    value = '123456';
+}
+<SvelteOtp
+		...
+        bind:initialValue={value}
+		on:notify={callbackFunction}
+		...
+		emitEventOnPrefill={false}
+	/>
+<div class="button-otp" on:click={handleClick}> Get Value </div>
+```
+
+**Event on Otp Filled completely**
+``` html
+function callbackFunction(event: CustomEvent) {
+    console.log('emittedValue', event.detail);
+}
+
+<SvelteOtp
+		...
+		on:notify={callbackFunction}
+		...
+		emitEventOnPrefill={false}
+	/>
+```
+
+## Available props
+
+| Prop                          | Type            | Default     | Description                              |
+|-------------------------------|-----------------|-------------|------------------------------------------|
+| numberOfInputs                | Number          |     4       | Number of Inputs to be shown             |
+| separator                     | String          |             | separator between inputs                 |
+| placeholder                   | String          |             | placeholder for text inputs.             |
+| maskInput                     | Boolean         | false       | mask input values                        |
+| autoFocusNextOnInput          | Boolean         | true        | focus on next input after entering value              |
+| focusPreviousOnDelete         | Boolean         | true        | move focus to previous element on delete                   |
+| emitEventOnPrefill            | Boolean         | false       | emits events on filling all input fields                   |
+
+## Events
+
+Only emitted event.
+
+eventObj = {
+            completevalue: string;
+            isInputComplete: boolean;
+        }
+
+| Event             | Output     | Description                          |
+|-------------------|------------|--------------------------------------|
+| notify            |  eventObj  | Even is emitted when input is complete                 |
+
+## Authors
+[@shubhadip](https://www.github.com/shubhadip)

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

Improved metrics

Total package byte prevSize

33768

increased by225.32%

Number of package files

39

increased by254.55%

Lines of code

242

increased by255.88%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

145

increased by3525%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes