diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..99d897c --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 shubhadip + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/index.html b/index.html index b5b1252..c6d3ff1 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + Svelte + TS + Svelte Otp
diff --git a/package-lock.json b/package-lock.json index ca66de1..2f45e48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6153,6 +6153,16 @@ "integrity": "sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==", "dev": true }, + "prism-svelte": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz", + "integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==" + }, + "prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==" + }, "process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -7012,6 +7022,15 @@ } } }, + "svelte-prism": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/svelte-prism/-/svelte-prism-1.1.6.tgz", + "integrity": "sha512-FEVBqD1wcSKYwRpgaMGRfEIQPquKMwo+vl91lnFHhQCtTivxgkCS6ZWNOyvZGRsNbWk50fYZOWOp3xXIBWNeSw==", + "requires": { + "prism-svelte": "^0.4.7", + "prismjs": "^1.27.0" + } + }, "temp-dir": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz", diff --git a/package.json b/package.json index 7f69125..734842e 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "svelte-otp", "private": true, "version": "0.0.0", + "description": "svelte Otp", "type": "module", "scripts": { "dev": "vite", @@ -73,5 +74,8 @@ "commitizen": { "path": "git-cz" } + }, + "dependencies": { + "svelte-prism": "^1.1.6" } } diff --git a/src/App.svelte b/src/App.svelte index b1c6d6c..aec2384 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,4 +1,4 @@ - + +
+ +
+ + diff --git a/src/app.css b/src/app.css index 6347ee5..689b528 100644 --- a/src/app.css +++ b/src/app.css @@ -24,11 +24,6 @@ a:hover { } body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; } h1 { @@ -41,8 +36,6 @@ h1 { } #app { - max-width: 1280px; - margin: 0 auto; padding: 2rem; text-align: center; } @@ -84,9 +77,56 @@ button:focus-visible { width: 24px; } -.customWrapperClass { -} - .button-otp{ margin: 32px 0px; + background: #333333; + color: #FFFFFF; + border-radius: 16px; + padding: 16px; + font-weight: bold; +} + +code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} + +/** +* examples css starts here +* this is global css +*/ + +.title { + font-weight: bold; + font-size: 24px; +} +.container { + background-color: #f6f7f6; + margin-top: 20px; + padding: 25px; + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + justify-content:space-between; + .codesnippet { + width: 80%; + border: 1px solid #222; + margin-bottom: 16px; + border-radius: 5px; + .language-html { + display: flex; + align-items: center; + justify-content: center; + } + } + .prism-multi{ + display: flex; + flex-direction: row; + align-items:center; + justify-content: space-around; + } + label{ + font-size: 18px; + margin-top: 16px; + display: block; + font-weight: bold; + } } \ No newline at end of file diff --git a/src/examples/Focus/Index.svelte b/src/examples/Focus/Index.svelte new file mode 100644 index 0000000..faf1868 --- /dev/null +++ b/src/examples/Focus/Index.svelte @@ -0,0 +1,36 @@ + + +
+ +
+
+ +
+
+ +
+ +
+
+ diff --git a/src/examples/GetValue/Index.svelte b/src/examples/GetValue/Index.svelte new file mode 100644 index 0000000..1160af9 --- /dev/null +++ b/src/examples/GetValue/Index.svelte @@ -0,0 +1,67 @@ + + +
+
+
+ + +
+ +

EmittedValue: {emittedValue}

+
Get Value
+
+
+ + diff --git a/src/examples/Index.svelte b/src/examples/Index.svelte new file mode 100644 index 0000000..bda9015 --- /dev/null +++ b/src/examples/Index.svelte @@ -0,0 +1,36 @@ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ \ No newline at end of file diff --git a/src/examples/MaskInput/Index.svelte b/src/examples/MaskInput/Index.svelte new file mode 100644 index 0000000..fde7bb1 --- /dev/null +++ b/src/examples/MaskInput/Index.svelte @@ -0,0 +1,26 @@ + + +
+
+
+ +
+
+ +
+ +
+
+ diff --git a/src/examples/NumberOfInputs/Index.svelte b/src/examples/NumberOfInputs/Index.svelte new file mode 100644 index 0000000..d8fac9d --- /dev/null +++ b/src/examples/NumberOfInputs/Index.svelte @@ -0,0 +1,23 @@ + + +
+
+
+
+ +
+
+ +
+ +
+
+
+ diff --git a/src/examples/NumberOfInputs/index.postcss b/src/examples/NumberOfInputs/index.postcss new file mode 100644 index 0000000..e69de29 diff --git a/src/examples/PlaceholderSeparators/Index.svelte b/src/examples/PlaceholderSeparators/Index.svelte new file mode 100644 index 0000000..507a2dc --- /dev/null +++ b/src/examples/PlaceholderSeparators/Index.svelte @@ -0,0 +1,34 @@ + + +
+
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+ diff --git a/src/examples/Prefill/Index.svelte b/src/examples/Prefill/Index.svelte new file mode 100644 index 0000000..bc0417e --- /dev/null +++ b/src/examples/Prefill/Index.svelte @@ -0,0 +1,62 @@ + + +
+
+
+ + +
+ + +
+
+ + diff --git a/src/examples/Styles/Index.svelte b/src/examples/Styles/Index.svelte new file mode 100644 index 0000000..59d377e --- /dev/null +++ b/src/examples/Styles/Index.svelte @@ -0,0 +1,35 @@ + + +
+
+

Css Styles :

+ +
+
+ diff --git a/src/examples/examples.postcss b/src/examples/examples.postcss new file mode 100644 index 0000000..2a0d603 --- /dev/null +++ b/src/examples/examples.postcss @@ -0,0 +1,10 @@ +.main-container { + display: flex; + flex-direction: column; + + + .example { + width: 100%; + border: 1px solid white; + } +} \ No newline at end of file diff --git a/src/lib/OtpInput/OtpInput.svelte b/src/lib/OtpInput/OtpInput.svelte index 63f0e24..fbe3359 100644 --- a/src/lib/OtpInput/OtpInput.svelte +++ b/src/lib/OtpInput/OtpInput.svelte @@ -16,7 +16,7 @@ export let customWrapperClass = ''; export let customInputWrapperClass = ''; export let maskInput = false; - export let autoFousNextOnInput = true; + export let autoFocusNextOnInput = true; export let focusPreviousOnDelete = true; export let emitEventOnPrefill = false; @@ -58,7 +58,6 @@ completevalue, isInputComplete: isInputComplete && completevalue.length === numberOfInputs, }; - if (extrakeys) { returnObj = { ...returnObj, @@ -73,19 +72,20 @@ } let components = getComponents(); - - async function prefillValueOnInitialValueChange() : Promise { - if (initialValue !== undefined && initialValue.trim().length > 0) { - components = getComponents(); - await tick(); - if (emitEventOnPrefill) { - checkValidity(true, { onValueUpdateOrPrefill: true }); - } - } - } $: { + /* eslint-disable */ + async function prefillValueOnInitialValueChange() : Promise { + if (initialValue !== undefined && initialValue.trim().length > 0) { + components = getComponents(); + await tick(); + if (emitEventOnPrefill) { + checkValidity(true, { onValueUpdateOrPrefill: true }); + } + } + }; prefillValueOnInitialValueChange(); + /* eslint-enable */ } const dispatch = createEventDispatcher(); @@ -107,7 +107,7 @@ /* eslint-enable */ } - if (!isDeleteEvent && autoFousNextOnInput) { + if (!isDeleteEvent && autoFocusNextOnInput) { nextIndex = currentIndex < components.length - 1 ? currentIndex + 1 : currentIndex; /* eslint-disable */ const nextRef: {[x:string]: any} = components[nextIndex].ref; diff --git a/src/lib/TextInput/Index.svelte b/src/lib/TextInput/Index.svelte index 78d7a07..c81f50f 100644 --- a/src/lib/TextInput/Index.svelte +++ b/src/lib/TextInput/Index.svelte @@ -16,6 +16,7 @@ handleChange(componentIndex, e); } } + diff --git a/src/lib/TextInput/textinput.postcss b/src/lib/TextInput/textinput.postcss index 3acc338..b2fec46 100644 --- a/src/lib/TextInput/textinput.postcss +++ b/src/lib/TextInput/textinput.postcss @@ -4,4 +4,11 @@ width: 24px; height: 24px; } -} \ No newline at end of file + input[type=number]::-webkit-inner-spin-button, + input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; + } +}