├── .gitignore ├── .prettierrc ├── LICENSE ├── Makefile ├── README.md ├── docs ├── .nojekyll ├── _app │ ├── assets │ │ └── pages │ │ │ └── index.svelte-0ca39d9d.css │ ├── chunks │ │ └── vendor-abe6fb47.js │ ├── error.svelte-dd95ac88.js │ ├── layout.svelte-7586f5cb.js │ ├── manifest.json │ ├── pages │ │ └── index.svelte-42e5e8fa.js │ └── start-da35a418.js ├── favicon.png ├── index.html └── social.png ├── jsconfig.json ├── package.json ├── package ├── .gitignore ├── Keyboard.svelte ├── Keyboard.svelte.d.ts ├── LICENSE ├── README.md ├── layouts │ ├── azerty │ │ ├── crossword.d.ts │ │ ├── crossword.js │ │ ├── standard.d.ts │ │ ├── standard.js │ │ ├── wordle.d.ts │ │ └── wordle.js │ └── qwerty │ │ ├── crossword.d.ts │ │ ├── crossword.js │ │ ├── standard.d.ts │ │ ├── standard.js │ │ ├── wordle.d.ts │ │ └── wordle.js ├── package.json └── svg │ ├── backspace.d.ts │ ├── backspace.js │ ├── enter.d.ts │ └── enter.js ├── pnpm-lock.yaml ├── src ├── app.html ├── lib │ ├── Keyboard.svelte │ ├── layouts │ │ ├── azerty │ │ │ ├── crossword.js │ │ │ ├── standard.js │ │ │ └── wordle.js │ │ └── qwerty │ │ │ ├── crossword.js │ │ │ ├── standard.js │ │ │ └── wordle.js │ └── svg │ │ ├── backspace.js │ │ └── enter.js └── routes │ └── index.svelte ├── static ├── favicon.png └── social.png └── svelte.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .svelte-kit 4 | build -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "svelteSortOrder" : "scripts-markup-styles", 3 | "svelteStrictMode": true 4 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Russell Samora 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | PHONY: github 2 | 3 | github: 4 | rm -rf docs 5 | cp -r build docs 6 | touch docs/.nojekyll 7 | git add -A 8 | git commit -m "update github pages" 9 | git push 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-keyboard 2 | 3 | A svelte component for when you want a permanent, on-screen keyboard. [View Demo](https://russellsamora.github.io/svelte-keyboard/). 4 | 5 | ## Installation 6 | 7 | `npm install svelte-keyboard` 8 | 9 | ## Usage 10 | 11 | ```svelte 12 | 19 | 20 | 21 | ``` 22 | 23 | ### Localization Layouts 24 | 25 | - `qwerty` - (_default_) 26 | - `azerty` 27 | 28 | ### Preset Layouts 29 | 30 | - `standard` - (_default_) two pages with all basic keys 31 | - `crossword` - one page, just capitalized letters and Backspace 32 | - `wordle` - one page, just capitalized letters, Backspace, and Enter 33 | 34 | 35 | ### Custom Layout 36 | 37 | ```svelte 38 | 41 | 42 | 43 | ``` 44 | 45 | If you want value to be different than the display key, pass a `display` property. If you want keys to be laid out on the second page, include `page: 1` (defaults to `page: 0`) . 46 | 47 | 48 | ```svelte 49 | 50 | ``` 51 | 52 | ### Custom Styles 53 | Use style props on the component (showing defaults): 54 | ```svelte 55 | 78 | ``` 79 | 80 | For any other properties, use global CSS on the selector `.svelte-keyboard button.key`. Note: `stroke-width` is for svg icons. 81 | 82 | To give specific keys a class (e.g., "clicked") you can use the `keyClass` prop: 83 | ```svelte 84 | 85 | ``` 86 | The `keyClass` object is key/value pairs where they key is the key name (e.g., "x" or "Enter") and the value is the class name(s) to apply (e.g., "clicked" or "clicked hide"). You can then use global styling `:global(.key.clicked) { ... }` to apply custom styles. 87 | 88 | ### Special values 89 | 90 | - `Backspace` displays a backspace svg icon 91 | - `Enter` displays an enter svg icon 92 | - `Space` displays a spacebar 93 | - `Shift` displays "ABC" or "abc" to toggle case, no event fires 94 | - `Page1` displays "123" and will switch to the second page, no event fires 95 | - `Page0` displays "abc" and will switch to the first page, no event fires 96 | 97 | If you want to say the word instead of an icon, add this prop: 98 | ```svelte 99 | 100 | ``` 101 | 102 | ## Development 103 | 104 | change basepath to "" for dev and "svelte-keyboard" for deploy. 105 | 106 | ``` 107 | npm run dev; 108 | ``` 109 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russellsamora/svelte-keyboard/2bf6a5f9dd8d76cdc28a8f75713f02398a7697de/docs/.nojekyll -------------------------------------------------------------------------------- /docs/_app/assets/pages/index.svelte-0ca39d9d.css: -------------------------------------------------------------------------------- 1 | .row.svelte-zcceq3{display:flex;justify-content:center;touch-action:manipulation}button.svelte-zcceq3{appearance:none;display:inline-block;text-align:center;vertical-align:baseline;cursor:pointer;line-height:1;transform-origin:50% 50%;user-select:none;background:var(--background, #eee);color:var(--color, #111);border:var(--border, none);border-radius:var(--border-radius, 2px);box-shadow:var(--box-shadow, none);flex:var(--flex, 1);font-family:var(--font-family, sans-serif);font-size:var(--font-size, 20px);font-weight:var(--font-weight, normal);height:var(--height, 3.5rem);margin:var(--margin, .125rem);opacity:var(--opacity, 1);text-transform:var(--text-transform, none);-webkit-tap-highlight-color:transparent}button.single.svelte-zcceq3{min-width:var(--min-width, 2rem)}button.active.svelte-zcceq3,button.svelte-zcceq3:active{background:var(--active-background, #ccc);border:var(--active-border, none);box-shadow:var(--active-box-shadow, none);color:var(--active-color, #111);opacity:var(--active-opacity, 1);transform:var(--active-transform, none)}button.key--Space.svelte-zcceq3{width:var(--space-width, 20%);flex:var(--space-flex, 3)}button.key--Page0.svelte-zcceq3,button.key--Page1.svelte-zcceq3,button.key--Shift.svelte-zcceq3,button.key--Backspace.svelte-zcceq3,button.key--Enter.svelte-zcceq3{flex:var(--special-flex, 1.5)}.page.svelte-zcceq3{display:none}.page.visible.svelte-zcceq3{display:block}.svelte-keyboard svg{stroke-width:var(--stroke-width, 3px)}h1.svelte-1u02d6p.svelte-1u02d6p,h3.svelte-1u02d6p.svelte-1u02d6p,p.svelte-1u02d6p.svelte-1u02d6p,div.svelte-1u02d6p.svelte-1u02d6p{margin:0 auto;max-width:30rem;padding:1rem 0}.info.svelte-1u02d6p>.svelte-1u02d6p{padding:0}.key.clicked{--background:pink} 2 | -------------------------------------------------------------------------------- /docs/_app/chunks/vendor-abe6fb47.js: -------------------------------------------------------------------------------- 1 | function h(){}function J(t,n){for(const e in n)t[e]=n[e];return t}function M(t){return t()}function H(){return Object.create(null)}function m(t){t.forEach(M)}function K(t){return typeof t=="function"}function Q(t,n){return t!=t?n==n:t!==n||t&&typeof t=="object"||typeof t=="function"}function W(t){return Object.keys(t).length===0}function dt(t,n,e,i){if(t){const c=L(t,n,e,i);return t[0](c)}}function L(t,n,e,i){return t[1]&&i?J(e.ctx.slice(),t[1](i(n))):e.ctx}function _t(t,n,e,i){if(t[2]&&i){const c=t[2](i(e));if(n.dirty===void 0)return c;if(typeof c=="object"){const u=[],s=Math.max(n.dirty.length,c.length);for(let l=0;l32){const n=[],e=t.ctx.length/32;for(let i=0;i>1);e(c)<=i?t=c+1:n=c}return t}function Y(t){if(t.hydrate_init)return;t.hydrate_init=!0;let n=t.childNodes;if(t.nodeName==="HEAD"){const r=[];for(let o=0;o0&&n[e[c]].claim_order<=o?c+1:X(1,c,x=>n[e[x]].claim_order,o))-1;i[r]=e[a]+1;const f=a+1;e[f]=r,c=Math.max(f,c)}const u=[],s=[];let l=n.length-1;for(let r=e[c]+1;r!=0;r=i[r-1]){for(u.push(n[r-1]);l>=r;l--)s.push(n[l]);l--}for(;l>=0;l--)s.push(n[l]);u.reverse(),s.sort((r,o)=>r.claim_order-o.claim_order);for(let r=0,o=0;r=u[o].claim_order;)o++;const a=ot.removeEventListener(n,e,i)}function bt(t,n,e){e==null?t.removeAttribute(n):t.getAttribute(n)!==e&&t.setAttribute(n,e)}function et(t){return Array.from(t.childNodes)}function q(t){t.claim_info===void 0&&(t.claim_info={last_index:0,total_claimed:0})}function z(t,n,e,i,c=!1){q(t);const u=(()=>{for(let s=t.claim_info.last_index;s=0;s--){const l=t[s];if(n(l)){const r=e(l);return r===void 0?t.splice(s,1):t[s]=r,c?r===void 0&&t.claim_info.last_index--:t.claim_info.last_index=s,l}}return i()})();return u.claim_order=t.claim_info.total_claimed,t.claim_info.total_claimed+=1,u}function it(t,n,e,i){return z(t,c=>c.nodeName===n,c=>{const u=[];for(let s=0;sc.removeAttribute(s))},()=>i(n))}function $t(t,n,e){return it(t,n,e,B)}function ct(t,n){return z(t,e=>e.nodeType===3,e=>{const i=""+n;if(e.data.startsWith(i)){if(e.data.length!==i.length)return e.splitText(i.length)}else e.data=i},()=>A(n),!0)}function Et(t){return ct(t," ")}function D(t,n,e){for(let i=e;i{const i=t.$$.callbacks[n];if(i){const c=rt(n,e);i.slice().forEach(u=>{u.call(t,c)})}}}function jt(t,n){E().$$.context.set(t,n)}const y=[],P=[],w=[],G=[],F=Promise.resolve();let N=!1;function I(){N||(N=!0,F.then(R))}function Ct(){return I(),F}function v(t){w.push(t)}const S=new Set;let T=0;function R(){const t=p;do{for(;T{k.delete(t),i&&(e&&t.d(1),i())}),t.o(n)}}function Bt(t,n){const e={},i={},c={$$scope:1};let u=t.length;for(;u--;){const s=t[u],l=n[u];if(l){for(const r in s)r in l||(i[r]=1);for(const r in l)c[r]||(e[r]=l[r],c[r]=1);t[u]=l}else for(const r in s)c[r]=1}for(const s in i)s in e||(e[s]=void 0);return e}function qt(t){return typeof t=="object"&&t!==null?t:{}}function zt(t){t&&t.c()}function Dt(t,n){t&&t.l(n)}function ut(t,n,e,i){const{fragment:c,on_mount:u,on_destroy:s,after_update:l}=t.$$;c&&c.m(n,e),i||v(()=>{const r=u.map(M).filter(K);s?s.push(...r):m(r),t.$$.on_mount=[]}),l.forEach(v)}function ft(t,n){const e=t.$$;e.fragment!==null&&(m(e.on_destroy),e.fragment&&e.fragment.d(n),e.on_destroy=e.fragment=null,e.ctx=[])}function at(t,n){t.$$.dirty[0]===-1&&(y.push(t),I(),t.$$.dirty.fill(0)),t.$$.dirty[n/31|0]|=1<{const C=j.length?j[0]:x;return o.ctx&&c(o.ctx[f],o.ctx[f]=C)&&(!o.skip_bound&&o.bound[f]&&o.bound[f](C),a&&at(t,f)),x}):[],o.update(),a=!0,m(o.before_update),o.fragment=i?i(o.ctx):!1,n.target){if(n.hydrate){U();const f=et(n.target);o.fragment&&o.fragment.l(f),f.forEach($)}else o.fragment&&o.fragment.c();n.intro&&ot(t.$$.fragment),ut(t,n.target,n.anchor,n.customElement),V(),R()}g(r)}class Pt{$destroy(){ft(this,1),this.$destroy=h}$on(n,e){const i=this.$$.callbacks[n]||(this.$$.callbacks[n]=[]);return i.push(e),()=>{const c=i.indexOf(e);c!==-1&&i.splice(c,1)}}$set(n){this.$$set&&!W(n)&&(this.$$.skip_bound=!0,this.$$set(n),this.$$.skip_bound=!1)}}const _=[];function Gt(t,n=h){let e;const i=new Set;function c(l){if(Q(t,l)&&(t=l,e)){const r=!_.length;for(const o of i)o[1](),_.push(o,t);if(r){for(let o=0;o<_.length;o+=2)_[o][0](_[o+1]);_.length=0}}}function u(l){c(l(t))}function s(l,r=h){const o=[l,r];return i.add(o),i.size===1&&(e=n(c)||h),l(t),()=>{i.delete(o),i.size===0&&(e(),e=null)}}return{set:c,update:u,subscribe:s}}export{qt as A,ft as B,J as C,Gt as D,Ct as E,dt as F,ht as G,mt as H,_t as I,Z as J,h as K,At as L,xt as M,m as N,pt as O,St as P,O as Q,wt as R,Pt as S,et as a,bt as b,$t as c,$ as d,B as e,kt as f,nt as g,ct as h,Ot as i,Tt as j,gt as k,yt as l,Et as m,Mt as n,Lt as o,Ht as p,ot as q,jt as r,Q as s,A as t,vt as u,Nt as v,zt as w,Dt as x,ut as y,Bt as z}; 2 | -------------------------------------------------------------------------------- /docs/_app/error.svelte-dd95ac88.js: -------------------------------------------------------------------------------- 1 | import{S as K,i as w,s as y,e as v,t as E,c as b,a as d,h as P,d as m,g as n,J as R,j,k as N,l as q,m as S,K as C}from"./chunks/vendor-abe6fb47.js";function H(r){let f,t=r[1].frame+"",a;return{c(){f=v("pre"),a=E(t)},l(l){f=b(l,"PRE",{});var s=d(f);a=P(s,t),s.forEach(m)},m(l,s){n(l,f,s),R(f,a)},p(l,s){s&2&&t!==(t=l[1].frame+"")&&j(a,t)},d(l){l&&m(f)}}}function J(r){let f,t=r[1].stack+"",a;return{c(){f=v("pre"),a=E(t)},l(l){f=b(l,"PRE",{});var s=d(f);a=P(s,t),s.forEach(m)},m(l,s){n(l,f,s),R(f,a)},p(l,s){s&2&&t!==(t=l[1].stack+"")&&j(a,t)},d(l){l&&m(f)}}}function z(r){let f,t,a,l,s=r[1].message+"",c,k,u,p,i=r[1].frame&&H(r),o=r[1].stack&&J(r);return{c(){f=v("h1"),t=E(r[0]),a=N(),l=v("pre"),c=E(s),k=N(),i&&i.c(),u=N(),o&&o.c(),p=q()},l(e){f=b(e,"H1",{});var _=d(f);t=P(_,r[0]),_.forEach(m),a=S(e),l=b(e,"PRE",{});var h=d(l);c=P(h,s),h.forEach(m),k=S(e),i&&i.l(e),u=S(e),o&&o.l(e),p=q()},m(e,_){n(e,f,_),R(f,t),n(e,a,_),n(e,l,_),R(l,c),n(e,k,_),i&&i.m(e,_),n(e,u,_),o&&o.m(e,_),n(e,p,_)},p(e,[_]){_&1&&j(t,e[0]),_&2&&s!==(s=e[1].message+"")&&j(c,s),e[1].frame?i?i.p(e,_):(i=H(e),i.c(),i.m(u.parentNode,u)):i&&(i.d(1),i=null),e[1].stack?o?o.p(e,_):(o=J(e),o.c(),o.m(p.parentNode,p)):o&&(o.d(1),o=null)},i:C,o:C,d(e){e&&m(f),e&&m(a),e&&m(l),e&&m(k),i&&i.d(e),e&&m(u),o&&o.d(e),e&&m(p)}}}function D({error:r,status:f}){return{props:{error:r,status:f}}}function A(r,f,t){let{status:a}=f,{error:l}=f;return r.$$set=s=>{"status"in s&&t(0,a=s.status),"error"in s&&t(1,l=s.error)},[a,l]}class F extends K{constructor(f){super();w(this,f,A,z,y,{status:0,error:1})}}export{F as default,D as load}; 2 | -------------------------------------------------------------------------------- /docs/_app/layout.svelte-7586f5cb.js: -------------------------------------------------------------------------------- 1 | import{S as l,i,s as r,F as u,G as f,H as _,I as c,q as p,o as d}from"./chunks/vendor-abe6fb47.js";function m(n){let s;const o=n[1].default,e=u(o,n,n[0],null);return{c(){e&&e.c()},l(t){e&&e.l(t)},m(t,a){e&&e.m(t,a),s=!0},p(t,[a]){e&&e.p&&(!s||a&1)&&f(e,o,t,t[0],s?c(o,t[0],a,null):_(t[0]),null)},i(t){s||(p(e,t),s=!0)},o(t){d(e,t),s=!1},d(t){e&&e.d(t)}}}function $(n,s,o){let{$$slots:e={},$$scope:t}=s;return n.$$set=a=>{"$$scope"in a&&o(0,t=a.$$scope)},[t,e]}class b extends l{constructor(s){super();i(this,s,$,m,r,{})}}export{b as default}; 2 | -------------------------------------------------------------------------------- /docs/_app/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | ".svelte-kit/runtime/client/start.js": { 3 | "file": "start-da35a418.js", 4 | "src": ".svelte-kit/runtime/client/start.js", 5 | "isEntry": true, 6 | "imports": [ 7 | "_vendor-abe6fb47.js" 8 | ], 9 | "dynamicImports": [ 10 | ".svelte-kit/runtime/components/layout.svelte", 11 | ".svelte-kit/runtime/components/error.svelte", 12 | "src/routes/index.svelte" 13 | ] 14 | }, 15 | ".svelte-kit/runtime/components/layout.svelte": { 16 | "file": "layout.svelte-7586f5cb.js", 17 | "src": ".svelte-kit/runtime/components/layout.svelte", 18 | "isEntry": true, 19 | "isDynamicEntry": true, 20 | "imports": [ 21 | "_vendor-abe6fb47.js" 22 | ] 23 | }, 24 | ".svelte-kit/runtime/components/error.svelte": { 25 | "file": "error.svelte-dd95ac88.js", 26 | "src": ".svelte-kit/runtime/components/error.svelte", 27 | "isEntry": true, 28 | "isDynamicEntry": true, 29 | "imports": [ 30 | "_vendor-abe6fb47.js" 31 | ] 32 | }, 33 | "src/routes/index.svelte": { 34 | "file": "pages/index.svelte-42e5e8fa.js", 35 | "src": "src/routes/index.svelte", 36 | "isEntry": true, 37 | "isDynamicEntry": true, 38 | "imports": [ 39 | "_vendor-abe6fb47.js" 40 | ], 41 | "css": [ 42 | "assets/pages/index.svelte-0ca39d9d.css" 43 | ] 44 | }, 45 | "_vendor-abe6fb47.js": { 46 | "file": "chunks/vendor-abe6fb47.js" 47 | } 48 | } -------------------------------------------------------------------------------- /docs/_app/pages/index.svelte-42e5e8fa.js: -------------------------------------------------------------------------------- 1 | var st = Object.defineProperty, ut = Object.defineProperties; var nt = Object.getOwnPropertyDescriptors; var Kl = Object.getOwnPropertySymbols; var vt = Object.prototype.hasOwnProperty, it = Object.prototype.propertyIsEnumerable; var Al = (r, l, o) => l in r ? st(r, l, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[l] = o, Ll = (r, l) => { for (var o in l || (l = {})) vt.call(l, o) && Al(r, o, l[o]); if (Kl) for (var o of Kl(l)) it.call(l, o) && Al(r, o, l[o]); return r }, Ul = (r, l) => ut(r, nt(l)); import { S as Ml, i as Wl, s as Jl, e as w, k as C, c as d, a as p, m as V, d as s, b as h, L as me, g as _, J as i, M as ll, N as ft, O as gl, K as Ql, P as wt, t as k, h as b, j as we, Q as dt, l as Fl, R as pt, w as ge, x as ke, f as E, y as be, q as Ee, o as Se, B as De } from "../chunks/vendor-abe6fb47.js"; var Xl = [{ row: 0, value: "q" }, { row: 0, value: "w" }, { row: 0, value: "e" }, { row: 0, value: "r" }, { row: 0, value: "t" }, { row: 0, value: "y" }, { row: 0, value: "u" }, { row: 0, value: "i" }, { row: 0, value: "o" }, { row: 0, value: "p" }, { row: 1, value: "a" }, { row: 1, value: "s" }, { row: 1, value: "d" }, { row: 1, value: "f" }, { row: 1, value: "g" }, { row: 1, value: "h" }, { row: 1, value: "j" }, { row: 1, value: "k" }, { row: 1, value: "l" }, { row: 2, value: "Shift" }, { row: 2, value: "z" }, { row: 2, value: "x" }, { row: 2, value: "c" }, { row: 2, value: "v" }, { row: 2, value: "b" }, { row: 2, value: "n" }, { row: 2, value: "m" }, { row: 2, value: "Backspace" }, { row: 3, value: "Page1" }, { row: 3, value: "," }, { row: 3, value: "Space" }, { row: 3, value: "." }, { row: 3, value: "Enter" }, { row: 0, value: "1", page: 1 }, { row: 0, value: "2", page: 1 }, { row: 0, value: "3", page: 1 }, { row: 0, value: "4", page: 1 }, { row: 0, value: "5", page: 1 }, { row: 0, value: "6", page: 1 }, { row: 0, value: "7", page: 1 }, { row: 0, value: "8", page: 1 }, { row: 0, value: "9", page: 1 }, { row: 0, value: "0", page: 1 }, { row: 1, value: "!", page: 1 }, { row: 1, value: "@", page: 1 }, { row: 1, value: "#", page: 1 }, { row: 1, value: "$", page: 1 }, { row: 1, value: "%", page: 1 }, { row: 1, value: "^", page: 1 }, { row: 1, value: "&", page: 1 }, { row: 1, value: "*", page: 1 }, { row: 1, value: "(", page: 1 }, { row: 1, value: ")", page: 1 }, { row: 2, value: "-", page: 1 }, { row: 2, value: "_", page: 1 }, { row: 2, value: "=", page: 1 }, { row: 2, value: "+", page: 1 }, { row: 2, value: ";", page: 1 }, { row: 2, value: ":", page: 1 }, { row: 2, value: "'", page: 1 }, { row: 2, value: '"', page: 1 }, { row: 2, value: "<", page: 1 }, { row: 2, value: ">", page: 1 }, { row: 3, value: "Page0", page: 1 }, { row: 3, value: "/", page: 1 }, { row: 3, value: "?", page: 1 }, { row: 3, value: "[", page: 1 }, { row: 3, value: "]", page: 1 }, { row: 3, value: "{", page: 1 }, { row: 3, value: "}", page: 1 }, { row: 3, value: "|", page: 1 }, { row: 3, value: "\\", page: 1 }, { row: 3, value: "~", page: 1 }], ct = [{ row: 0, value: "q" }, { row: 0, value: "w" }, { row: 0, value: "e" }, { row: 0, value: "r" }, { row: 0, value: "t" }, { row: 0, value: "y" }, { row: 0, value: "u" }, { row: 0, value: "i" }, { row: 0, value: "o" }, { row: 0, value: "p" }, { row: 1, value: "a" }, { row: 1, value: "s" }, { row: 1, value: "d" }, { row: 1, value: "f" }, { row: 1, value: "g" }, { row: 1, value: "h" }, { row: 1, value: "j" }, { row: 1, value: "k" }, { row: 1, value: "l" }, { row: 2, value: "z" }, { row: 2, value: "x" }, { row: 2, value: "c" }, { row: 2, value: "v" }, { row: 2, value: "b" }, { row: 2, value: "n" }, { row: 2, value: "m" }, { row: 2, value: "Backspace" }], _t = [{ row: 0, value: "q" }, { row: 0, value: "w" }, { row: 0, value: "e" }, { row: 0, value: "r" }, { row: 0, value: "t" }, { row: 0, value: "y" }, { row: 0, value: "u" }, { row: 0, value: "i" }, { row: 0, value: "o" }, { row: 0, value: "p" }, { row: 1, value: "a" }, { row: 1, value: "s" }, { row: 1, value: "d" }, { row: 1, value: "f" }, { row: 1, value: "g" }, { row: 1, value: "h" }, { row: 1, value: "j" }, { row: 1, value: "k" }, { row: 1, value: "l" }, { row: 2, value: "Enter" }, { row: 2, value: "z" }, { row: 2, value: "x" }, { row: 2, value: "c" }, { row: 2, value: "v" }, { row: 2, value: "b" }, { row: 2, value: "n" }, { row: 2, value: "m" }, { row: 2, value: "Backspace" }], ht = '', yt = ''; function Yl(r, l, o) { const t = r.slice(); return t[26] = l[o], t[28] = o, t } function Zl(r, l, o) { const t = r.slice(); return t[29] = l[o], t } function $l(r, l, o) { const t = r.slice(); return t[32] = l[o].value, t[33] = l[o].display, t } function mt(r) { let l = r[33] + "", o; return { c() { o = k(l) }, l(t) { o = b(t, l) }, m(t, a) { _(t, o, a) }, p(t, a) { a[0] & 8 && l !== (l = t[33] + "") && we(o, l) }, d(t) { t && s(o) } } } function gt(r) { let l, o = r[33] + "", t; return { c() { l = new dt, t = Fl(), this.h() }, l(a) { l = pt(a), t = Fl(), this.h() }, h() { l.a = t }, m(a, n) { l.m(o, a, n), _(a, t, n) }, p(a, n) { n[0] & 8 && o !== (o = a[33] + "") && l.p(o) }, d(a) { a && s(t), a && l.d() } } } function xl(r) { let l, o, t, a, n; function u(m, D) { return D[0] & 8 && (o = null), o == null && (o = !!m[33].includes(" [...new Set(v)], j = (v, y) => { if (v.preventDefault(), o(2, O = y), y.includes("Page")) o(1, F = +y.substr(-1)); else if (y === "Shift") o(9, R = !R); else { let B = y; R && bt.includes(y) && (B = y.toUpperCase()), T("keydown", B) } return v.stopPropagation(), !1 }, ee = v => { setTimeout(() => { v === O && o(2, O = void 0) }, 50) }, Ve = (v, y) => j(y, v), A = (v, y) => j(y, v), Ie = v => ee(v), le = v => ee(v); return r.$$set = v => { "custom" in v && o(6, N = v.custom), "layout" in v && o(7, m = v.layout), "noSwap" in v && o(8, D = v.noSwap), "keyClass" in v && o(0, Q = v.keyClass) }, r.$$.update = () => { r.$$.dirty[0] & 192 && o(17, t = N || K[m] || Xl), r.$$.dirty[0] & 131840 && o(16, a = t.map(v => { let y = v.display; const B = de[v.value]; return B && !D.includes(v.value) && !v.noSwap && (y = B), y || (y = R ? v.value.toUpperCase() : v.value), v.value === "Shift" && (y = R ? B : B.toUpperCase()), Ul(Ll({}, v), { display: y }) })), r.$$.dirty[0] & 65536 && o(14, n = a.filter(v => !v.page)), r.$$.dirty[0] & 65536 && o(12, u = a.filter(v => v.page)), r.$$.dirty[0] & 16384 && o(13, f = z(n.map(v => v.row))), r.$$.dirty[0] & 8192 && f.sort((v, y) => v - y), r.$$.dirty[0] & 4096 && o(15, g = z(u.map(v => v.row))), r.$$.dirty[0] & 32768 && g.sort((v, y) => v - y), r.$$.dirty[0] & 24576 && o(11, I = f.map(v => n.filter(y => y.row === v))), r.$$.dirty[0] & 12288 && o(10, H = f.map(v => u.filter(y => y.row === v))), r.$$.dirty[0] & 3072 && o(3, S = [I, H]) }, [Q, F, O, S, j, ee, N, m, D, R, H, I, u, f, n, g, a, t, Ve, A, Ie, le] } class Ce extends Ml { constructor(l) { super(); Wl(this, l, Et, kt, Jl, { custom: 6, layout: 7, noSwap: 8, keyClass: 0 }, null, [-1, -1]) } } function St(r) { let l, o, t, a, n, u, f, g, I, H, S, N, m, D, Q, F = (r[0][0] || "") + "", R, O, K, T, de, z, j, ee, Ve, A, Ie, le, v = (r[0][1] || "") + "", y, B, X, Y, te, Ge, L, pe, tl, al, ae, rl, Pe, qe = (r[0][2] || "") + "", Ne, Oe, re, Z, oe, Ke, U, ce, ol, sl, se, ul, He, ze = (r[0][3] || "") + "", Ae, Le, ue, $, P, Ue, M, _e, nl, vl, ne, il, Be, Re = (r[0][4] || "") + "", Me, We, ve, x, q, Je, W, he, fl, wl, ie, dl, Te, je = (r[0][5] || "") + "", Qe, Fe, fe, J, G; return T = new Ce({}), T.$on("keydown", r[2]), Y = new Ce({ props: { layout: "wordle" } }), Y.$on("keydown", r[3]), Z = new Ce({ props: { custom: [{ row: 0, value: "s" }, { row: 0, value: "v" }, { row: 0, value: "e" }, { row: 0, value: "l" }, { row: 0, value: "t" }, { row: 0, value: "e" }, { row: 1, value: "k" }, { row: 1, value: "e" }, { row: 1, value: "y" }, { row: 1, value: "b" }, { row: 1, value: "o" }, { row: 1, value: "a" }, { row: 1, value: "r" }, { row: 1, value: "d" }] } }), Z.$on("keydown", r[4]), $ = new Ce({}), $.$on("keydown", r[5]), x = new Ce({}), x.$on("keydown", r[6]), J = new Ce({ props: { keyClass: r[1] } }), J.$on("keydown", r[7]), { c() { l = w("h1"), o = k("svelte-keyboard"), t = C(), a = w("p"), n = k("A virtual keyboard component for Svelte. Read the docs on "), u = w("a"), f = k("github."), g = C(), I = w("div"), H = w("h3"), S = k("Default"), N = C(), m = w("p"), D = k("key pressed: "), Q = w("strong"), R = k(F), O = C(), K = w("div"), ge(T.$$.fragment), de = C(), z = w("div"), j = w("h3"), ee = k("Preset Layout (Wordle)"), Ve = C(), A = w("p"), Ie = k("key pressed: "), le = w("strong"), y = k(v), B = C(), X = w("div"), te = w("div"), ge(Y.$$.fragment), Ge = C(), L = w("div"), pe = w("h3"), tl = k("Custom Layout"), al = C(), ae = w("p"), rl = k("key pressed: "), Pe = w("strong"), Ne = k(qe), Oe = C(), re = w("div"), oe = w("div"), ge(Z.$$.fragment), Ke = C(), U = w("div"), ce = w("h3"), ol = k("Custom Style - A"), sl = C(), se = w("p"), ul = k("key pressed: "), He = w("strong"), Ae = k(ze), Le = C(), ue = w("div"), P = w("div"), ge($.$$.fragment), Ue = C(), M = w("div"), _e = w("h3"), nl = k("Custom Style - B"), vl = C(), ne = w("p"), il = k("key pressed: "), Be = w("strong"), Me = k(Re), We = C(), ve = w("div"), q = w("div"), ge(x.$$.fragment), Je = C(), W = w("div"), he = w("h3"), fl = k("Custom Key Class"), wl = C(), ie = w("p"), dl = k("key pressed: "), Te = w("strong"), Qe = k(je), Fe = C(), fe = w("div"), ge(J.$$.fragment), this.h() }, l(e) { l = d(e, "H1", { class: !0 }); var c = p(l); o = b(c, "svelte-keyboard"), c.forEach(s), t = V(e), a = d(e, "P", { class: !0 }); var ye = p(a); n = b(ye, "A virtual keyboard component for Svelte. Read the docs on "), u = d(ye, "A", { href: !0 }); var kl = p(u); f = b(kl, "github."), kl.forEach(s), ye.forEach(s), g = V(e), I = d(e, "DIV", { class: !0 }); var Xe = p(I); H = d(Xe, "H3", { class: !0 }); var bl = p(H); S = b(bl, "Default"), bl.forEach(s), N = V(Xe), m = d(Xe, "P", { class: !0 }); var pl = p(m); D = b(pl, "key pressed: "), Q = d(pl, "STRONG", {}); var El = p(Q); R = b(El, F), El.forEach(s), pl.forEach(s), Xe.forEach(s), O = V(e), K = d(e, "DIV", { class: !0 }); var Sl = p(K); ke(T.$$.fragment, Sl), Sl.forEach(s), de = V(e), z = d(e, "DIV", { class: !0 }); var Ye = p(z); j = d(Ye, "H3", { class: !0 }); var Dl = p(j); ee = b(Dl, "Preset Layout (Wordle)"), Dl.forEach(s), Ve = V(Ye), A = d(Ye, "P", { class: !0 }); var cl = p(A); Ie = b(cl, "key pressed: "), le = d(cl, "STRONG", {}); var Cl = p(le); y = b(Cl, v), Cl.forEach(s), cl.forEach(s), Ye.forEach(s), B = V(e), X = d(e, "DIV", { class: !0 }); var Vl = p(X); te = d(Vl, "DIV", { style: !0 }); var tt = p(te); ke(Y.$$.fragment, tt), Vl.forEach(s), Ge = V(e), L = d(e, "DIV", { class: !0 }); var Ze = p(L); pe = d(Ze, "H3", { class: !0 }); var Il = p(pe); tl = b(Il, "Custom Layout"), Il.forEach(s), al = V(Ze), ae = d(Ze, "P", { class: !0 }); var _l = p(ae); rl = b(_l, "key pressed: "), Pe = d(_l, "STRONG", {}); var Pl = p(Pe); Ne = b(Pl, qe), Pl.forEach(s), _l.forEach(s), Ze.forEach(s), Oe = V(e), re = d(e, "DIV", { class: !0 }); var ql = p(re); oe = d(ql, "DIV", { style: !0 }); var at = p(oe); ke(Z.$$.fragment, at), ql.forEach(s), Ke = V(e), U = d(e, "DIV", { class: !0 }); var $e = p(U); ce = d($e, "H3", { class: !0 }); var Hl = p(ce); ol = b(Hl, "Custom Style - A"), Hl.forEach(s), sl = V($e), se = d($e, "P", { class: !0 }); var hl = p(se); ul = b(hl, "key pressed: "), He = d(hl, "STRONG", {}); var zl = p(He); Ae = b(zl, ze), zl.forEach(s), hl.forEach(s), $e.forEach(s), Le = V(e), ue = d(e, "DIV", { class: !0 }); var Bl = p(ue); P = d(Bl, "DIV", { style: !0 }); var rt = p(P); ke($.$$.fragment, rt), Bl.forEach(s), Ue = V(e), M = d(e, "DIV", { class: !0 }); var xe = p(M); _e = d(xe, "H3", { class: !0 }); var Rl = p(_e); nl = b(Rl, "Custom Style - B"), Rl.forEach(s), vl = V(xe), ne = d(xe, "P", { class: !0 }); var yl = p(ne); il = b(yl, "key pressed: "), Be = d(yl, "STRONG", {}); var Tl = p(Be); Me = b(Tl, Re), Tl.forEach(s), yl.forEach(s), xe.forEach(s), We = V(e), ve = d(e, "DIV", { class: !0 }); var jl = p(ve); q = d(jl, "DIV", { style: !0 }); var ot = p(q); ke(x.$$.fragment, ot), jl.forEach(s), Je = V(e), W = d(e, "DIV", { class: !0 }); var el = p(W); he = d(el, "H3", { class: !0 }); var Gl = p(he); fl = b(Gl, "Custom Key Class"), Gl.forEach(s), wl = V(el), ie = d(el, "P", { class: !0 }); var ml = p(ie); dl = b(ml, "key pressed: "), Te = d(ml, "STRONG", {}); var Nl = p(Te); Qe = b(Nl, je), Nl.forEach(s), ml.forEach(s), el.forEach(s), Fe = V(e), fe = d(e, "DIV", { class: !0 }); var Ol = p(fe); ke(J.$$.fragment, Ol), Ol.forEach(s), this.h() }, h() { h(l, "class", "svelte-1u02d6p"), h(u, "href", "https://github.com/russellsamora/svelte-keyboard"), h(a, "class", "svelte-1u02d6p"), h(H, "class", "svelte-1u02d6p"), h(m, "class", "svelte-1u02d6p"), h(I, "class", "info svelte-1u02d6p"), h(K, "class", "svelte-1u02d6p"), h(j, "class", "svelte-1u02d6p"), h(A, "class", "svelte-1u02d6p"), h(z, "class", "info svelte-1u02d6p"), E(te, "display", "contents"), E(te, "--text-transform", "uppercase"), h(X, "class", "svelte-1u02d6p"), h(pe, "class", "svelte-1u02d6p"), h(ae, "class", "svelte-1u02d6p"), h(L, "class", "info svelte-1u02d6p"), E(oe, "display", "contents"), E(oe, "--flex", "0 auto"), h(re, "class", "svelte-1u02d6p"), h(ce, "class", "svelte-1u02d6p"), h(se, "class", "svelte-1u02d6p"), h(U, "class", "info svelte-1u02d6p"), E(P, "display", "contents"), E(P, "--background", "black"), E(P, "--color", "white"), E(P, "--border-radius", "16px"), E(P, "--font-family", "monospace"), E(P, "--font-weight", "400"), E(P, "--stroke-width", "2px"), E(P, "--active-background", "lightgreen"), E(P, "--active-color", "black"), h(ue, "class", "svelte-1u02d6p"), h(_e, "class", "svelte-1u02d6p"), h(ne, "class", "svelte-1u02d6p"), h(M, "class", "info svelte-1u02d6p"), E(q, "display", "contents"), E(q, "--background", "pink"), E(q, "--color", "darkred"), E(q, "--border-radius", "4px"), E(q, "--box-shadow", "2px 2px 2px 0 red"), E(q, "--active-background", "pink"), E(q, "--active-color", "darkred"), E(q, "--active-transform", "translate(2px, 2px)"), E(q, "--font-size", "18px"), h(ve, "class", "svelte-1u02d6p"), h(he, "class", "svelte-1u02d6p"), h(ie, "class", "svelte-1u02d6p"), h(W, "class", "info svelte-1u02d6p"), h(fe, "class", "svelte-1u02d6p") }, m(e, c) { _(e, l, c), i(l, o), _(e, t, c), _(e, a, c), i(a, n), i(a, u), i(u, f), _(e, g, c), _(e, I, c), i(I, H), i(H, S), i(I, N), i(I, m), i(m, D), i(m, Q), i(Q, R), _(e, O, c), _(e, K, c), be(T, K, null), _(e, de, c), _(e, z, c), i(z, j), i(j, ee), i(z, Ve), i(z, A), i(A, Ie), i(A, le), i(le, y), _(e, B, c), _(e, X, c), i(X, te), be(Y, te, null), _(e, Ge, c), _(e, L, c), i(L, pe), i(pe, tl), i(L, al), i(L, ae), i(ae, rl), i(ae, Pe), i(Pe, Ne), _(e, Oe, c), _(e, re, c), i(re, oe), be(Z, oe, null), _(e, Ke, c), _(e, U, c), i(U, ce), i(ce, ol), i(U, sl), i(U, se), i(se, ul), i(se, He), i(He, Ae), _(e, Le, c), _(e, ue, c), i(ue, P), be($, P, null), _(e, Ue, c), _(e, M, c), i(M, _e), i(_e, nl), i(M, vl), i(M, ne), i(ne, il), i(ne, Be), i(Be, Me), _(e, We, c), _(e, ve, c), i(ve, q), be(x, q, null), _(e, Je, c), _(e, W, c), i(W, he), i(he, fl), i(W, wl), i(W, ie), i(ie, dl), i(ie, Te), i(Te, Qe), _(e, Fe, c), _(e, fe, c), be(J, fe, null), G = !0 }, p(e, [c]) { (!G || c & 1) && F !== (F = (e[0][0] || "") + "") && we(R, F), (!G || c & 1) && v !== (v = (e[0][1] || "") + "") && we(y, v), (!G || c & 1) && qe !== (qe = (e[0][2] || "") + "") && we(Ne, qe), (!G || c & 1) && ze !== (ze = (e[0][3] || "") + "") && we(Ae, ze), (!G || c & 1) && Re !== (Re = (e[0][4] || "") + "") && we(Me, Re), (!G || c & 1) && je !== (je = (e[0][5] || "") + "") && we(Qe, je); const ye = {}; c & 2 && (ye.keyClass = e[1]), J.$set(ye) }, i(e) { G || (Ee(T.$$.fragment, e), Ee(Y.$$.fragment, e), Ee(Z.$$.fragment, e), Ee($.$$.fragment, e), Ee(x.$$.fragment, e), Ee(J.$$.fragment, e), G = !0) }, o(e) { Se(T.$$.fragment, e), Se(Y.$$.fragment, e), Se(Z.$$.fragment, e), Se($.$$.fragment, e), Se(x.$$.fragment, e), Se(J.$$.fragment, e), G = !1 }, d(e) { e && s(l), e && s(t), e && s(a), e && s(g), e && s(I), e && s(O), e && s(K), De(T), e && s(de), e && s(z), e && s(B), e && s(X), De(Y), e && s(Ge), e && s(L), e && s(Oe), e && s(re), De(Z), e && s(Ke), e && s(U), e && s(Le), e && s(ue), De($), e && s(Ue), e && s(M), e && s(We), e && s(ve), De(x), e && s(Je), e && s(W), e && s(Fe), e && s(fe), De(J) } } } function Dt(r, l, o) { let t = []; const a = {}; return [t, a, ({ detail: S }) => o(0, t[0] = S, t), ({ detail: S }) => o(0, t[1] = S, t), ({ detail: S }) => o(0, t[2] = S, t), ({ detail: S }) => o(0, t[3] = S, t), ({ detail: S }) => o(0, t[4] = S, t), ({ detail: S }) => { o(0, t[5] = S, t), o(1, a[S] = "clicked", a) }] } class It extends Ml { constructor(l) { super(); Wl(this, l, Dt, St, Jl, {}) } } export { It as default }; 2 | -------------------------------------------------------------------------------- /docs/_app/start-da35a418.js: -------------------------------------------------------------------------------- 1 | var ae=Object.defineProperty,oe=Object.defineProperties;var le=Object.getOwnPropertyDescriptors;var q=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var X=(a,e,t)=>e in a?ae(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t,v=(a,e)=>{for(var t in e||(e={}))M.call(e,t)&&X(a,t,e[t]);if(q)for(var t of q(e))Y.call(e,t)&&X(a,t,e[t]);return a},B=(a,e)=>oe(a,le(e));var F=(a,e)=>{var t={};for(var r in a)M.call(a,r)&&e.indexOf(r)<0&&(t[r]=a[r]);if(a!=null&&q)for(var r of q(a))e.indexOf(r)<0&&Y.call(a,r)&&(t[r]=a[r]);return t};import{S as ce,i as fe,s as ue,e as he,c as de,a as _e,d as $,b as K,f as N,g as R,t as pe,h as ge,j as me,k as we,l as m,m as be,n as P,o as w,p as O,q as b,r as ve,u as ye,v as W,w as S,x as T,y as L,z as C,A as j,B as U,C as x,D as J,E as H}from"./chunks/vendor-abe6fb47.js";function ke(a){let e,t,r;const l=[a[1]||{}];var i=a[0][0];function o(s){let n={};for(let c=0;c{U(f,1)}),O()}i?(e=new i(o()),S(e.$$.fragment),b(e.$$.fragment,1),L(e,t.parentNode,t)):e=null}else i&&e.$set(c)},i(s){r||(e&&b(e.$$.fragment,s),r=!0)},o(s){e&&w(e.$$.fragment,s),r=!1},d(s){s&&$(t),e&&U(e,s)}}}function $e(a){let e,t,r;const l=[a[1]||{}];var i=a[0][0];function o(s){let n={$$slots:{default:[Le]},$$scope:{ctx:s}};for(let c=0;c{U(f,1)}),O()}i?(e=new i(o(s)),S(e.$$.fragment),b(e.$$.fragment,1),L(e,t.parentNode,t)):e=null}else i&&e.$set(c)},i(s){r||(e&&b(e.$$.fragment,s),r=!0)},o(s){e&&w(e.$$.fragment,s),r=!1},d(s){s&&$(t),e&&U(e,s)}}}function Ee(a){let e,t,r;const l=[a[2]||{}];var i=a[0][1];function o(s){let n={};for(let c=0;c{U(f,1)}),O()}i?(e=new i(o()),S(e.$$.fragment),b(e.$$.fragment,1),L(e,t.parentNode,t)):e=null}else i&&e.$set(c)},i(s){r||(e&&b(e.$$.fragment,s),r=!0)},o(s){e&&w(e.$$.fragment,s),r=!1},d(s){s&&$(t),e&&U(e,s)}}}function Re(a){let e,t,r;const l=[a[2]||{}];var i=a[0][1];function o(s){let n={$$slots:{default:[Se]},$$scope:{ctx:s}};for(let c=0;c{U(f,1)}),O()}i?(e=new i(o(s)),S(e.$$.fragment),b(e.$$.fragment,1),L(e,t.parentNode,t)):e=null}else i&&e.$set(c)},i(s){r||(e&&b(e.$$.fragment,s),r=!0)},o(s){e&&w(e.$$.fragment,s),r=!1},d(s){s&&$(t),e&&U(e,s)}}}function Se(a){let e,t,r;const l=[a[3]||{}];var i=a[0][2];function o(s){let n={};for(let c=0;c{U(f,1)}),O()}i?(e=new i(o()),S(e.$$.fragment),b(e.$$.fragment,1),L(e,t.parentNode,t)):e=null}else i&&e.$set(c)},i(s){r||(e&&b(e.$$.fragment,s),r=!0)},o(s){e&&w(e.$$.fragment,s),r=!1},d(s){s&&$(t),e&&U(e,s)}}}function Le(a){let e,t,r,l;const i=[Re,Ee],o=[];function s(n,c){return n[0][2]?0:1}return e=s(a),t=o[e]=i[e](a),{c(){t.c(),r=m()},l(n){t.l(n),r=m()},m(n,c){o[e].m(n,c),R(n,r,c),l=!0},p(n,c){let f=e;e=s(n),e===f?o[e].p(n,c):(P(),w(o[f],1,1,()=>{o[f]=null}),O(),t=o[e],t?t.p(n,c):(t=o[e]=i[e](n),t.c()),b(t,1),t.m(r.parentNode,r))},i(n){l||(b(t),l=!0)},o(n){w(t),l=!1},d(n){o[e].d(n),n&&$(r)}}}function Q(a){let e,t=a[5]&&Z(a);return{c(){e=he("div"),t&&t.c(),this.h()},l(r){e=de(r,"DIV",{id:!0,"aria-live":!0,"aria-atomic":!0,style:!0});var l=_e(e);t&&t.l(l),l.forEach($),this.h()},h(){K(e,"id","svelte-announcer"),K(e,"aria-live","assertive"),K(e,"aria-atomic","true"),N(e,"position","absolute"),N(e,"left","0"),N(e,"top","0"),N(e,"clip","rect(0 0 0 0)"),N(e,"clip-path","inset(50%)"),N(e,"overflow","hidden"),N(e,"white-space","nowrap"),N(e,"width","1px"),N(e,"height","1px")},m(r,l){R(r,e,l),t&&t.m(e,null)},p(r,l){r[5]?t?t.p(r,l):(t=Z(r),t.c(),t.m(e,null)):t&&(t.d(1),t=null)},d(r){r&&$(e),t&&t.d()}}}function Z(a){let e;return{c(){e=pe(a[6])},l(t){e=ge(t,a[6])},m(t,r){R(t,e,r)},p(t,r){r&64&&me(e,t[6])},d(t){t&&$(e)}}}function Ue(a){let e,t,r,l,i;const o=[$e,ke],s=[];function n(f,h){return f[0][1]?0:1}e=n(a),t=s[e]=o[e](a);let c=a[4]&&Q(a);return{c(){t.c(),r=we(),c&&c.c(),l=m()},l(f){t.l(f),r=be(f),c&&c.l(f),l=m()},m(f,h){s[e].m(f,h),R(f,r,h),c&&c.m(f,h),R(f,l,h),i=!0},p(f,[h]){let u=e;e=n(f),e===u?s[e].p(f,h):(P(),w(s[u],1,1,()=>{s[u]=null}),O(),t=s[e],t?t.p(f,h):(t=s[e]=o[e](f),t.c()),b(t,1),t.m(r.parentNode,r)),f[4]?c?c.p(f,h):(c=Q(f),c.c(),c.m(l.parentNode,l)):c&&(c.d(1),c=null)},i(f){i||(b(t),i=!0)},o(f){w(t),i=!1},d(f){s[e].d(f),f&&$(r),c&&c.d(f),f&&$(l)}}}function Ae(a,e,t){let{stores:r}=e,{page:l}=e,{components:i}=e,{props_0:o=null}=e,{props_1:s=null}=e,{props_2:n=null}=e;ve("__svelte__",r),ye(r.page.notify);let c=!1,f=!1,h=null;return W(()=>{const u=r.page.subscribe(()=>{c&&(t(5,f=!0),t(6,h=document.title||"untitled page"))});return t(4,c=!0),u}),a.$$set=u=>{"stores"in u&&t(7,r=u.stores),"page"in u&&t(8,l=u.page),"components"in u&&t(0,i=u.components),"props_0"in u&&t(1,o=u.props_0),"props_1"in u&&t(2,s=u.props_1),"props_2"in u&&t(3,n=u.props_2)},a.$$.update=()=>{a.$$.dirty&384&&r.page.set(l)},[i,o,s,n,c,f,h,r,l]}class Ne extends ce{constructor(e){super();fe(this,e,Ae,Ue,ue,{stores:7,page:8,components:0,props_0:1,props_1:2,props_2:3})}}const Pe="modulepreload",ee={},Oe="/svelte-keyboard/_app/",z=function(e,t){return!t||t.length===0?e():Promise.all(t.map(r=>{if(r=`${Oe}${r}`,r in ee)return;ee[r]=!0;const l=r.endsWith(".css"),i=l?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${r}"]${i}`))return;const o=document.createElement("link");if(o.rel=l?"stylesheet":Pe,l||(o.as="script",o.crossOrigin=""),o.href=r,document.head.appendChild(o),l)return new Promise((s,n)=>{o.addEventListener("load",s),o.addEventListener("error",n)})})).then(()=>e())},I=[()=>z(()=>import("./layout.svelte-7586f5cb.js"),["layout.svelte-7586f5cb.js","chunks/vendor-abe6fb47.js"]),()=>z(()=>import("./error.svelte-dd95ac88.js"),["error.svelte-dd95ac88.js","chunks/vendor-abe6fb47.js"]),()=>z(()=>import("./pages/index.svelte-42e5e8fa.js"),["pages/index.svelte-42e5e8fa.js","assets/pages/index.svelte-0ca39d9d.css","chunks/vendor-abe6fb47.js"])],Te=[[/^\/$/,[I[0],I[2]],[I[1]]]],Ce=[I[0](),I[1]()];function je(a){let e=a.baseURI;if(!e){const t=a.getElementsByTagName("base");e=t.length?t[0].href:a.URL}return e}let te="";function xe(a){te=a.base,a.assets}function G(){return{x:pageXOffset,y:pageYOffset}}function se(a){return a.composedPath().find(t=>t instanceof Node&&t.nodeName.toUpperCase()==="A")}function re(a){return a instanceof SVGAElement?new URL(a.href.baseVal,document.baseURI):new URL(a.href)}class Ie{constructor({base:e,routes:t,trailing_slash:r,renderer:l}){var i,o;this.base=e,this.routes=t,this.trailing_slash=r,this.navigating=0,this.renderer=l,l.router=this,this.enabled=!0,document.body.setAttribute("tabindex","-1"),this.current_history_index=(o=(i=history.state)==null?void 0:i["sveltekit:index"])!=null?o:0,this.current_history_index===0&&history.replaceState(B(v({},history.state),{"sveltekit:index":0}),"",location.href),this.callbacks={before_navigate:[],after_navigate:[]}}init_listeners(){"scrollRestoration"in history&&(history.scrollRestoration="manual"),addEventListener("beforeunload",i=>{let o=!1;const s={from:this.renderer.current.url,to:null,cancel:()=>o=!0};this.callbacks.before_navigate.forEach(n=>n(s)),o?(i.preventDefault(),i.returnValue=""):history.scrollRestoration="auto"}),addEventListener("load",()=>{history.scrollRestoration="manual"});let e;addEventListener("scroll",()=>{clearTimeout(e),e=setTimeout(()=>{const i=B(v({},history.state||{}),{"sveltekit:scroll":G()});history.replaceState(i,document.title,window.location.href)},200)});const t=i=>{const o=se(i);o&&o.href&&o.hasAttribute("sveltekit:prefetch")&&this.prefetch(re(o))};let r;const l=i=>{clearTimeout(r),r=setTimeout(()=>{var o;(o=i.target)==null||o.dispatchEvent(new CustomEvent("sveltekit:trigger_prefetch",{bubbles:!0}))},20)};addEventListener("touchstart",t),addEventListener("mousemove",l),addEventListener("sveltekit:trigger_prefetch",t),addEventListener("click",i=>{if(!this.enabled||i.button||i.which!==1||i.metaKey||i.ctrlKey||i.shiftKey||i.altKey||i.defaultPrevented)return;const o=se(i);if(!o||!o.href)return;const s=re(o);if(s.toString()===location.href){location.hash||i.preventDefault();return}const c=(o.getAttribute("rel")||"").split(/\s+/);if(!(o.hasAttribute("download")||c&&c.includes("external"))&&!(o instanceof SVGAElement?o.target.baseVal:o.target)){if(s.href.split("#")[0]===location.href.split("#")[0]){setTimeout(()=>history.pushState({},"",s.href));const f=this.parse(s);return f?this.renderer.update(f,[],!1):void 0}this._navigate({url:s,scroll:o.hasAttribute("sveltekit:noscroll")?G():null,keepfocus:!1,chain:[],details:{state:{},replaceState:!1},accepted:()=>i.preventDefault(),blocked:()=>i.preventDefault()})}}),addEventListener("popstate",i=>{if(i.state&&this.enabled){if(i.state["sveltekit:index"]===this.current_history_index)return;this._navigate({url:new URL(location.href),scroll:i.state["sveltekit:scroll"],keepfocus:!1,chain:[],details:null,accepted:()=>{this.current_history_index=i.state["sveltekit:index"]},blocked:()=>{const o=this.current_history_index-i.state["sveltekit:index"];history.go(o)}})}})}owns(e){return e.origin===location.origin&&e.pathname.startsWith(this.base)}parse(e){if(this.owns(e)){const t=decodeURI(e.pathname.slice(this.base.length)||"/");return{id:e.pathname+e.search,routes:this.routes.filter(([r])=>r.test(t)),url:e,path:t}}}async goto(e,{noscroll:t=!1,replaceState:r=!1,keepfocus:l=!1,state:i={}}={},o){const s=new URL(e,je(document));return this.enabled?this._navigate({url:s,scroll:t?G():null,keepfocus:l,chain:o,details:{state:i,replaceState:r},accepted:()=>{},blocked:()=>{}}):(location.href=s.href,new Promise(()=>{}))}enable(){this.enabled=!0}disable(){this.enabled=!1}async prefetch(e){const t=this.parse(e);if(!t)throw new Error("Attempted to prefetch a URL that does not belong to this app");return this.renderer.load(t)}after_navigate(e){W(()=>(this.callbacks.after_navigate.push(e),()=>{const t=this.callbacks.after_navigate.indexOf(e);this.callbacks.after_navigate.splice(t,1)}))}before_navigate(e){W(()=>(this.callbacks.before_navigate.push(e),()=>{const t=this.callbacks.before_navigate.indexOf(e);this.callbacks.before_navigate.splice(t,1)}))}async _navigate({url:e,scroll:t,keepfocus:r,chain:l,details:i,accepted:o,blocked:s}){const n=this.renderer.current.url;let c=!1;const f={from:n,to:e,cancel:()=>c=!0};if(this.callbacks.before_navigate.forEach(d=>d(f)),c){s();return}const h=this.parse(e);if(!h)return location.href=e.href,new Promise(()=>{});o(),this.navigating||dispatchEvent(new CustomEvent("sveltekit:navigation-start")),this.navigating++;let{pathname:u}=e;if(this.trailing_slash==="never"?u!=="/"&&u.endsWith("/")&&(u=u.slice(0,-1)):this.trailing_slash==="always"&&!e.pathname.split("/").pop().includes(".")&&!u.endsWith("/")&&(u+="/"),h.url=new URL(e.origin+u+e.search+e.hash),i){const d=i.replaceState?0:1;i.state["sveltekit:index"]=this.current_history_index+=d,history[i.replaceState?"replaceState":"pushState"](i.state,"",h.url)}if(await this.renderer.handle_navigation(h,l,!1,{scroll:t,keepfocus:r}),this.navigating--,!this.navigating){dispatchEvent(new CustomEvent("sveltekit:navigation-end"));const d={from:n,to:e};this.callbacks.after_navigate.forEach(y=>y(d))}}}function ie(a){return a instanceof Error||a&&a.name&&a.message?a:new Error(JSON.stringify(a))}function Ve(a){let e=5381,t=a.length;if(typeof a=="string")for(;t;)e=e*33^a.charCodeAt(--t);else for(;t;)e=e*33^a[--t];return(e>>>0).toString(36)}function De(a){const e=a.status&&a.status>=400&&a.status<=599&&!a.redirect;if(a.error||e){const t=a.status;if(!a.error&&e)return{status:t||500,error:new Error};const r=typeof a.error=="string"?new Error(a.error):a.error;return r instanceof Error?!t||t<400||t>599?(console.warn('"error" returned from load() without a valid status code \u2014 defaulting to 500'),{status:500,error:r}):{status:t,error:r}:{status:500,error:new Error(`"error" property returned from load() must be a string or instance of Error, received type "${typeof r}"`)}}if(a.redirect){if(!a.status||Math.floor(a.status/100)!==3)return{status:500,error:new Error('"redirect" property returned from load() must be accompanied by a 3xx status code')};if(typeof a.redirect!="string")return{status:500,error:new Error('"redirect" property returned from load() must be a string')}}if(a.context)throw new Error('You are returning "context" from a load function. "context" was renamed to "stuff", please adjust your code accordingly.');return a}function ne(a){const e=J(a);let t=!0;function r(){t=!0,e.update(o=>o)}function l(o){t=!1,e.set(o)}function i(o){let s;return e.subscribe(n=>{(s===void 0||t&&n!==s)&&o(s=n)})}return{notify:r,set:l,subscribe:i}}function qe(a,e){const t=typeof a=="string"?a:a.url;let r=`script[data-type="svelte-data"][data-url=${JSON.stringify(t)}]`;e&&typeof e.body=="string"&&(r+=`[data-body="${Ve(e.body)}"]`);const l=document.querySelector(r);if(l&&l.textContent){const i=JSON.parse(l.textContent),{body:o}=i,s=F(i,["body"]);return Promise.resolve(new Response(o,s))}return fetch(a,e)}class Be{constructor({Root:e,fallback:t,target:r,session:l}){this.Root=e,this.fallback=t,this.router,this.target=r,this.started=!1,this.session_id=1,this.invalid=new Set,this.invalidating=null,this.autoscroll=!0,this.updating=!1,this.current={url:null,session_id:0,branch:[]},this.cache=new Map,this.loading={id:null,promise:null},this.stores={url:ne({}),page:ne({}),navigating:J(null),session:J(l)},this.$session=null,this.root=null;let i=!1;this.stores.session.subscribe(async o=>{if(this.$session=o,!i||!this.router)return;this.session_id+=1;const s=this.router.parse(new URL(location.href));s&&this.update(s,[],!0)}),i=!0}disable_scroll_handling(){(this.updating||!this.started)&&(this.autoscroll=!1)}async start({status:e,error:t,nodes:r,url:l,params:i}){const o=[];let s={},n,c;l.hash=window.location.hash;try{for(let f=0;f10||t.includes(e.url.pathname))o=await this._load_error({status:500,error:new Error("Redirect loop"),url:e.url});else{this.router?this.router.goto(new URL(o.redirect,e.url).href,{replaceState:!0},[...t,e.url.pathname]):location.href=new URL(o.redirect,location.href).href;return}if(this.updating=!0,this.started?(this.current=o.state,this.root.$set(o.props),this.stores.navigating.set(null)):this._init(o),l){const{scroll:c,keepfocus:f}=l;if(f||((n=getSelection())==null||n.removeAllRanges(),document.body.focus()),await H(),this.autoscroll){const h=e.url.hash&&document.getElementById(e.url.hash.slice(1));c?scrollTo(c.x,c.y):h?h.scrollIntoView():scrollTo(0,0)}}else await H();if(this.loading.promise=null,this.loading.id=null,this.autoscroll=!0,this.updating=!1,!this.router)return;const s=o.state.branch[o.state.branch.length-1];s&&s.module.router===!1?this.router.disable():this.router.enable()}load(e){return this.loading.promise=this._get_navigation_result(e,!1),this.loading.id=e.id,this.loading.promise}invalidate(e){return this.invalid.add(e),this.invalidating||(this.invalidating=Promise.resolve().then(async()=>{const t=this.router&&this.router.parse(new URL(location.href));t&&await this.update(t,[],!0),this.invalidating=null})),this.invalidating}_init(e){this.current=e.state;const t=document.querySelector("style[data-svelte]");if(t&&t.remove(),this.root=new this.Root({target:this.target,props:v({stores:this.stores},e.props),hydrate:!0}),this.started=!0,this.router){const r={from:null,to:new URL(location.href)};this.router.callbacks.after_navigate.forEach(l=>l(r))}}async _get_navigation_result(e,t){if(this.loading.id===e.id&&this.loading.promise)return this.loading.promise;for(let r=0;rn()),i+=1;else break}const o=await this._load({route:l,info:e},t);if(o)return o}return await this._load_error({status:404,error:new Error(`Not found: ${e.url.pathname}`),url:e.url})}async _get_navigation_result_from_branch({url:e,params:t,stuff:r,branch:l,status:i,error:o}){const s=l.filter(Boolean),n=s.find(u=>u.loaded&&u.loaded.redirect),c={redirect:n&&n.loaded?n.loaded.redirect:void 0,state:{url:e,params:t,branch:l,session_id:this.session_id},props:{components:s.map(u=>u.module.default)}};for(let u=0;u{Object.defineProperty(c.props.page,d,{get:()=>{throw new Error(`$page.${d} has been replaced by $page.url.${y}`)}})};u("origin","origin"),u("path","pathname"),u("query","searchParams")}const f=s[s.length-1],h=f.loaded&&f.loaded.maxage;if(h){const u=e.pathname+e.search;let d=!1;const y=()=>{this.cache.get(u)===c&&this.cache.delete(u),E(),clearTimeout(A)},A=setTimeout(y,h*1e3),E=this.stores.session.subscribe(()=>{d&&y()});d=!0,this.cache.set(u,c)}return c}async _load_node({status:e,error:t,module:r,url:l,params:i,stuff:o}){const s={module:r,uses:{params:new Set,url:!1,session:!1,stuff:!1,dependencies:[]},loaded:null,stuff:o},n={};for(const f in i)Object.defineProperty(n,f,{get(){return s.uses.params.add(f),i[f]},enumerable:!0});const c=this.$session;if(r.load){const{started:f}=this,h={params:n,get url(){return s.uses.url=!0,l},get session(){return s.uses.session=!0,c},get stuff(){return s.uses.stuff=!0,v({},o)},fetch(d,y){const A=typeof d=="string"?d:d.url,{href:E}=new URL(A,l);return s.uses.dependencies.push(E),f?fetch(d,y):qe(d,y)}};t&&(h.status=e,h.error=t);const u=await r.load.call(null,h);if(!u)throw new Error("load function must return a value");s.loaded=De(u),s.loaded.stuff&&(s.stuff=s.loaded.stuff)}return s}async _load({route:e,info:{url:t,path:r}},l){const i=t.pathname+t.search;if(!l){const _=this.cache.get(i);if(_)return _}const[o,s,n,c]=e,f=c?c(o.exec(r)):{},h=this.current.url&&{url:i!==this.current.url.pathname+this.current.url.search,params:Object.keys(f).filter(_=>this.current.params[_]!==f[_]),session:this.session_id!==this.current.session_id};let u=[],d={},y=!1,A=200,E;s.forEach(_=>_());e:for(let _=0;_k.uses.params.has(D))||h.session&&k.uses.session||k.uses.dependencies.some(D=>this.invalid.has(D))||y&&k.uses.stuff){if(p=await this._load_node({module:g,url:t,params:f,stuff:d}),p&&p.loaded){if(p.loaded.fallthrough)return;if(p.loaded.error&&(A=p.loaded.status,E=p.loaded.error),p.loaded.redirect)return{redirect:p.loaded.redirect,props:{},state:this.current};p.loaded.stuff&&(y=!0)}}else p=k}catch(g){A=500,E=ie(g)}if(E){for(;_--;)if(n[_]){let g,k,V=_;for(;!(k=u[V]);)V-=1;try{if(g=await this._load_node({status:A,error:E,module:await n[_](),url:t,params:f,stuff:k.stuff}),g&&g.loaded&&g.loaded.error)continue;g&&g.loaded&&g.loaded.stuff&&(d=v(v({},d),g.loaded.stuff)),u=u.slice(0,V+1).concat(g);break e}catch{continue}}return await this._load_error({status:A,error:E,url:t})}else p&&p.loaded&&p.loaded.stuff&&(d=v(v({},d),p.loaded.stuff)),u.push(p)}return await this._get_navigation_result_from_branch({url:t,params:f,stuff:d,branch:u,status:A,error:E})}async _load_error({status:e,error:t,url:r}){var c,f;const l={},i=await this._load_node({module:await this.fallback[0],url:r,params:l,stuff:{}}),o=await this._load_node({status:e,error:t,module:await this.fallback[1],url:r,params:l,stuff:i&&i.loaded&&i.loaded.stuff||{}}),s=[i,o],n=v(v({},(c=i==null?void 0:i.loaded)==null?void 0:c.stuff),(f=o==null?void 0:o.loaded)==null?void 0:f.stuff);return await this._get_navigation_result_from_branch({url:r,params:l,stuff:n,branch:s,status:e,error:t})}}async function Je({paths:a,target:e,session:t,route:r,spa:l,trailing_slash:i,hydrate:o}){const s=new Be({Root:Ne,fallback:Ce,target:e,session:t}),n=r?new Ie({base:a.base,routes:Te,trailing_slash:i,renderer:s}):null;xe(a),o&&await s.start(o),n&&(l&&n.goto(location.href,{replaceState:!0},[]),n.init_listeners()),dispatchEvent(new CustomEvent("sveltekit:start"))}export{Je as start}; 2 | -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russellsamora/svelte-keyboard/2bf6a5f9dd8d76cdc28a8f75713f02398a7697de/docs/favicon.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | svelte-keyboard 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 47 | 48 | 49 |
50 | 51 | 52 |

svelte-keyboard

53 |

A virtual keyboard component for Svelte. Read the docs on github.

54 | 55 |

Default

56 |

key pressed:

57 |
68 |
78 |
88 |
94 |
95 |
106 |
117 |
128 |
139 |
140 |
141 |
142 | 143 |

Preset Layout (Wordle)

144 |

key pressed:

145 |
156 |
166 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | 184 |

Custom Layout

185 |

key pressed:

186 |
193 |
202 |
203 |
204 |
205 |
206 |
207 |
208 | 209 |

Custom Style - A

210 |

key pressed:

211 |
222 |
232 |
242 |
248 |
249 |
260 |
271 |
282 |
293 |
294 |
295 |
296 | 297 |

Custom Style - B

298 |

key pressed:

299 |
310 |
320 |
330 |
336 |
337 |
348 |
359 |
370 |
381 |
382 |
383 |
384 | 385 |

Custom Key Class

386 |

key pressed:

387 |
398 |
408 |
418 |
424 |
425 |
436 |
447 |
458 |
469 |
470 |
471 |
472 |
473 | 474 |
475 | 476 | 477 | -------------------------------------------------------------------------------- /docs/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russellsamora/svelte-keyboard/2bf6a5f9dd8d76cdc28a8f75713f02398a7697de/docs/social.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "$lib": ["src/lib"], 6 | "$lib/*": ["src/lib/*"] 7 | } 8 | }, 9 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"] 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-keyboard", 3 | "version": "0.5.5", 4 | "description": "Keyboard component for Svelte", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/russellsamora/svelte-keyboard.git" 8 | }, 9 | "keywords": [ 10 | "svelte", 11 | "keyboard" 12 | ], 13 | "author": "russell samora", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/russellsamora/svelte-keyboard/issues" 17 | }, 18 | "homepage": "https://github.com/russellsamora/svelte-keyboard#readme", 19 | "scripts": { 20 | "dev": "svelte-kit dev --host", 21 | "build": "svelte-kit build", 22 | "package": "svelte-kit package", 23 | "preview": "svelte-kit preview" 24 | }, 25 | "devDependencies": { 26 | "@sveltejs/adapter-static": "next", 27 | "@sveltejs/kit": "next", 28 | "prettier": "^2.4.1", 29 | "prettier-plugin-svelte": "^2.4.0", 30 | "svelte": "^3.46.2", 31 | "svelte2tsx": "^0.4.14", 32 | "typescript": "^4.5.5" 33 | }, 34 | "exports": { 35 | ".": "./Keyboard.svelte" 36 | }, 37 | "type": "module", 38 | "typings": "./Keyboard.svelte.d.ts" 39 | } -------------------------------------------------------------------------------- /package/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .svelte-kit 4 | build -------------------------------------------------------------------------------- /package/Keyboard.svelte: -------------------------------------------------------------------------------- 1 | 103 | 104 |
105 | {#each rowData as row, i} 106 |
107 | {#each row as keys} 108 |
109 | {#each keys as { value, display }} 110 |
126 | {/each} 127 |
128 | {/each} 129 |
130 | 131 | 203 | -------------------------------------------------------------------------------- /package/Keyboard.svelte.d.ts: -------------------------------------------------------------------------------- 1 | /** @typedef {typeof __propDef.props} KeyboardProps */ 2 | /** @typedef {typeof __propDef.events} KeyboardEvents */ 3 | /** @typedef {typeof __propDef.slots} KeyboardSlots */ 4 | export default class Keyboard extends SvelteComponentTyped<{ 5 | custom: any; 6 | localizationLayout?: string; 7 | layout?: string; 8 | noSwap?: any[]; 9 | keyClass?: {}; 10 | }, { 11 | keydown: CustomEvent; 12 | } & { 13 | [evt: string]: CustomEvent; 14 | }, {}> { 15 | } 16 | export type KeyboardProps = typeof __propDef.props; 17 | export type KeyboardEvents = typeof __propDef.events; 18 | export type KeyboardSlots = typeof __propDef.slots; 19 | import { SvelteComponentTyped } from "svelte"; 20 | declare const __propDef: { 21 | props: { 22 | custom: any; 23 | localizationLayout?: string; 24 | layout?: string; 25 | noSwap?: any[]; 26 | keyClass?: {}; 27 | }; 28 | events: { 29 | keydown: CustomEvent; 30 | } & { 31 | [evt: string]: CustomEvent; 32 | }; 33 | slots: {}; 34 | }; 35 | export {}; 36 | -------------------------------------------------------------------------------- /package/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Russell Samora 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. -------------------------------------------------------------------------------- /package/README.md: -------------------------------------------------------------------------------- 1 | # svelte-keyboard 2 | 3 | A svelte component for when you want a permanent, on-screen keyboard. [View Demo](https://russellsamora.github.io/svelte-keyboard/). 4 | 5 | ## Installation 6 | 7 | `npm install svelte-keyboard` 8 | 9 | ## Usage 10 | 11 | ```svelte 12 | 19 | 20 | 21 | ``` 22 | 23 | ### Localization Layouts 24 | 25 | - `qwerty` - (_default_) 26 | - `azerty` 27 | 28 | ### Preset Layouts 29 | 30 | - `standard` - (_default_) two pages with all basic keys 31 | - `crossword` - one page, just capitalized letters and Backspace 32 | - `wordle` - one page, just capitalized letters, Backspace, and Enter 33 | 34 | 35 | ### Custom Layout 36 | 37 | ```svelte 38 | 41 | 42 | 43 | ``` 44 | 45 | If you want value to be different than the display key, pass a `display` property. If you want keys to be laid out on the second page, include `page: 1` (defaults to `page: 0`) . 46 | 47 | 48 | ```svelte 49 | 50 | ``` 51 | 52 | ### Custom Styles 53 | Use style props on the component (showing defaults): 54 | ```svelte 55 | 78 | ``` 79 | 80 | For any other properties, use global CSS on the selector `.svelte-keyboard button.key`. Note: `stroke-width` is for svg icons. 81 | 82 | To give specific keys a class (e.g., "clicked") you can use the `keyClass` prop: 83 | ```svelte 84 | 85 | ``` 86 | The `keyClass` object is key/value pairs where they key is the key name (e.g., "x" or "Enter") and the value is the class name(s) to apply (e.g., "clicked" or "clicked hide"). You can then use global styling `:global(.key.clicked) { ... }` to apply custom styles. 87 | 88 | ### Special values 89 | 90 | - `Backspace` displays a backspace svg icon 91 | - `Enter` displays an enter svg icon 92 | - `Space` displays a spacebar 93 | - `Shift` displays "ABC" or "abc" to toggle case, no event fires 94 | - `Page1` displays "123" and will switch to the second page, no event fires 95 | - `Page0` displays "abc" and will switch to the first page, no event fires 96 | 97 | If you want to say the word instead of an icon, add this prop: 98 | ```svelte 99 | 100 | ``` 101 | 102 | ## Development 103 | 104 | change basepath to "" for dev and "svelte-keyboard" for deploy. 105 | 106 | ``` 107 | npm run dev; 108 | ``` 109 | -------------------------------------------------------------------------------- /package/layouts/azerty/crossword.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: { 2 | row: number; 3 | value: string; 4 | }[]; 5 | export default _default; 6 | -------------------------------------------------------------------------------- /package/layouts/azerty/crossword.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "a" 4 | }, { 5 | "row": 0, 6 | "value": "z" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "q" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 1, 60 | "value": "m" 61 | }, { 62 | "row": 2, 63 | "value": "w" 64 | }, { 65 | "row": 2, 66 | "value": "x" 67 | }, { 68 | "row": 2, 69 | "value": "c" 70 | }, { 71 | "row": 2, 72 | "value": "v" 73 | }, { 74 | "row": 2, 75 | "value": "b" 76 | }, { 77 | "row": 2, 78 | "value": "n" 79 | }, { 80 | "row": 2, 81 | "value": "Backspace" 82 | }]; -------------------------------------------------------------------------------- /package/layouts/azerty/standard.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: ({ 2 | row: number; 3 | value: string; 4 | page?: undefined; 5 | } | { 6 | row: number; 7 | value: string; 8 | page: number; 9 | })[]; 10 | export default _default; 11 | -------------------------------------------------------------------------------- /package/layouts/azerty/standard.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "a" 4 | }, { 5 | "row": 0, 6 | "value": "z" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "q" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 1, 60 | "value": "m" 61 | }, { 62 | "row": 2, 63 | "value": "Shift", 64 | }, { 65 | "row": 2, 66 | "value": "w" 67 | }, { 68 | "row": 2, 69 | "value": "x" 70 | }, { 71 | "row": 2, 72 | "value": "c" 73 | }, { 74 | "row": 2, 75 | "value": "v" 76 | }, { 77 | "row": 2, 78 | "value": "b" 79 | }, { 80 | "row": 2, 81 | "value": "n" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }, { 86 | "row": 3, 87 | "value": "Page1", 88 | }, { 89 | "row": 3, 90 | "value": ",", 91 | }, { 92 | "row": 3, 93 | "value": "Space", 94 | }, { 95 | "row": 3, 96 | "value": ".", 97 | }, { 98 | "row": 3, 99 | "value": "Enter", 100 | }, { 101 | "row": 0, 102 | "value": "1", 103 | "page": 1 104 | }, { 105 | "row": 0, 106 | "value": "2", 107 | "page": 1 108 | }, { 109 | "row": 0, 110 | "value": "3", 111 | "page": 1 112 | }, { 113 | "row": 0, 114 | "value": "4", 115 | "page": 1 116 | }, { 117 | "row": 0, 118 | "value": "5", 119 | "page": 1 120 | }, { 121 | "row": 0, 122 | "value": "6", 123 | "page": 1 124 | }, { 125 | "row": 0, 126 | "value": "7", 127 | "page": 1 128 | }, { 129 | "row": 0, 130 | "value": "8", 131 | "page": 1 132 | }, { 133 | "row": 0, 134 | "value": "9", 135 | "page": 1 136 | }, { 137 | "row": 0, 138 | "value": "0", 139 | "page": 1 140 | }, { 141 | "row": 1, 142 | "value": "!", 143 | "page": 1 144 | }, { 145 | "row": 1, 146 | "value": "@", 147 | "page": 1 148 | }, { 149 | "row": 1, 150 | "value": "#", 151 | "page": 1 152 | }, { 153 | "row": 1, 154 | "value": "$", 155 | "page": 1 156 | }, { 157 | "row": 1, 158 | "value": "%", 159 | "page": 1 160 | }, { 161 | "row": 1, 162 | "value": "^", 163 | "page": 1 164 | }, { 165 | "row": 1, 166 | "value": "&", 167 | "page": 1 168 | }, { 169 | "row": 1, 170 | "value": "*", 171 | "page": 1 172 | }, { 173 | "row": 1, 174 | "value": "(", 175 | "page": 1 176 | }, { 177 | "row": 1, 178 | "value": ")", 179 | "page": 1 180 | }, { 181 | "row": 2, 182 | "value": "-", 183 | "page": 1 184 | }, { 185 | "row": 2, 186 | "value": "_", 187 | "page": 1 188 | }, { 189 | "row": 2, 190 | "value": "=", 191 | "page": 1 192 | }, { 193 | "row": 2, 194 | "value": "+", 195 | "page": 1 196 | }, { 197 | "row": 2, 198 | "value": ";", 199 | "page": 1 200 | }, { 201 | "row": 2, 202 | "value": ":", 203 | "page": 1 204 | }, { 205 | "row": 2, 206 | "value": "'", 207 | "page": 1 208 | }, { 209 | "row": 2, 210 | "value": "\"", 211 | "page": 1 212 | }, { 213 | "row": 2, 214 | "value": "<", 215 | "page": 1 216 | }, { 217 | "row": 2, 218 | "value": ">", 219 | "page": 1 220 | }, { 221 | "row": 3, 222 | "value": "Page0", 223 | "page": 1 224 | }, { 225 | "row": 3, 226 | "value": "/", 227 | "page": 1 228 | }, { 229 | "row": 3, 230 | "value": "?", 231 | "page": 1 232 | }, { 233 | "row": 3, 234 | "value": "[", 235 | "page": 1 236 | }, { 237 | "row": 3, 238 | "value": "]", 239 | "page": 1 240 | }, { 241 | "row": 3, 242 | "value": "{", 243 | "page": 1 244 | }, { 245 | "row": 3, 246 | "value": "}", 247 | "page": 1 248 | }, { 249 | "row": 3, 250 | "value": "|", 251 | "page": 1 252 | }, { 253 | "row": 3, 254 | "value": "\\", 255 | "page": 1 256 | }, { 257 | "row": 3, 258 | "value": "~", 259 | "page": 1 260 | }]; -------------------------------------------------------------------------------- /package/layouts/azerty/wordle.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: { 2 | row: number; 3 | value: string; 4 | }[]; 5 | export default _default; 6 | -------------------------------------------------------------------------------- /package/layouts/azerty/wordle.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "a" 4 | }, { 5 | "row": 0, 6 | "value": "z" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "q" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 1, 60 | "value": "m" 61 | }, { 62 | "row": 2, 63 | "value": "Enter" 64 | }, { 65 | "row": 2, 66 | "value": "w" 67 | }, { 68 | "row": 2, 69 | "value": "x" 70 | }, { 71 | "row": 2, 72 | "value": "c" 73 | }, { 74 | "row": 2, 75 | "value": "v" 76 | }, { 77 | "row": 2, 78 | "value": "b" 79 | }, { 80 | "row": 2, 81 | "value": "n" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }]; -------------------------------------------------------------------------------- /package/layouts/qwerty/crossword.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: { 2 | row: number; 3 | value: string; 4 | }[]; 5 | export default _default; 6 | -------------------------------------------------------------------------------- /package/layouts/qwerty/crossword.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "q" 4 | }, { 5 | "row": 0, 6 | "value": "w" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "a" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 2, 60 | "value": "z" 61 | }, { 62 | "row": 2, 63 | "value": "x" 64 | }, { 65 | "row": 2, 66 | "value": "c" 67 | }, { 68 | "row": 2, 69 | "value": "v" 70 | }, { 71 | "row": 2, 72 | "value": "b" 73 | }, { 74 | "row": 2, 75 | "value": "n" 76 | }, { 77 | "row": 2, 78 | "value": "m" 79 | }, { 80 | "row": 2, 81 | "value": "Backspace" 82 | }]; -------------------------------------------------------------------------------- /package/layouts/qwerty/standard.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: ({ 2 | row: number; 3 | value: string; 4 | page?: undefined; 5 | } | { 6 | row: number; 7 | value: string; 8 | page: number; 9 | })[]; 10 | export default _default; 11 | -------------------------------------------------------------------------------- /package/layouts/qwerty/standard.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "q" 4 | }, { 5 | "row": 0, 6 | "value": "w" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "a" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 2, 60 | "value": "Shift", 61 | }, { 62 | "row": 2, 63 | "value": "z" 64 | }, { 65 | "row": 2, 66 | "value": "x" 67 | }, { 68 | "row": 2, 69 | "value": "c" 70 | }, { 71 | "row": 2, 72 | "value": "v" 73 | }, { 74 | "row": 2, 75 | "value": "b" 76 | }, { 77 | "row": 2, 78 | "value": "n" 79 | }, { 80 | "row": 2, 81 | "value": "m" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }, { 86 | "row": 3, 87 | "value": "Page1", 88 | }, { 89 | "row": 3, 90 | "value": ",", 91 | }, { 92 | "row": 3, 93 | "value": "Space", 94 | }, { 95 | "row": 3, 96 | "value": ".", 97 | }, { 98 | "row": 3, 99 | "value": "Enter", 100 | }, { 101 | "row": 0, 102 | "value": "1", 103 | "page": 1 104 | }, { 105 | "row": 0, 106 | "value": "2", 107 | "page": 1 108 | }, { 109 | "row": 0, 110 | "value": "3", 111 | "page": 1 112 | }, { 113 | "row": 0, 114 | "value": "4", 115 | "page": 1 116 | }, { 117 | "row": 0, 118 | "value": "5", 119 | "page": 1 120 | }, { 121 | "row": 0, 122 | "value": "6", 123 | "page": 1 124 | }, { 125 | "row": 0, 126 | "value": "7", 127 | "page": 1 128 | }, { 129 | "row": 0, 130 | "value": "8", 131 | "page": 1 132 | }, { 133 | "row": 0, 134 | "value": "9", 135 | "page": 1 136 | }, { 137 | "row": 0, 138 | "value": "0", 139 | "page": 1 140 | }, { 141 | "row": 1, 142 | "value": "!", 143 | "page": 1 144 | }, { 145 | "row": 1, 146 | "value": "@", 147 | "page": 1 148 | }, { 149 | "row": 1, 150 | "value": "#", 151 | "page": 1 152 | }, { 153 | "row": 1, 154 | "value": "$", 155 | "page": 1 156 | }, { 157 | "row": 1, 158 | "value": "%", 159 | "page": 1 160 | }, { 161 | "row": 1, 162 | "value": "^", 163 | "page": 1 164 | }, { 165 | "row": 1, 166 | "value": "&", 167 | "page": 1 168 | }, { 169 | "row": 1, 170 | "value": "*", 171 | "page": 1 172 | }, { 173 | "row": 1, 174 | "value": "(", 175 | "page": 1 176 | }, { 177 | "row": 1, 178 | "value": ")", 179 | "page": 1 180 | }, { 181 | "row": 2, 182 | "value": "-", 183 | "page": 1 184 | }, { 185 | "row": 2, 186 | "value": "_", 187 | "page": 1 188 | }, { 189 | "row": 2, 190 | "value": "=", 191 | "page": 1 192 | }, { 193 | "row": 2, 194 | "value": "+", 195 | "page": 1 196 | }, { 197 | "row": 2, 198 | "value": ";", 199 | "page": 1 200 | }, { 201 | "row": 2, 202 | "value": ":", 203 | "page": 1 204 | }, { 205 | "row": 2, 206 | "value": "'", 207 | "page": 1 208 | }, { 209 | "row": 2, 210 | "value": "\"", 211 | "page": 1 212 | }, { 213 | "row": 2, 214 | "value": "<", 215 | "page": 1 216 | }, { 217 | "row": 2, 218 | "value": ">", 219 | "page": 1 220 | }, { 221 | "row": 3, 222 | "value": "Page0", 223 | "page": 1 224 | }, { 225 | "row": 3, 226 | "value": "/", 227 | "page": 1 228 | }, { 229 | "row": 3, 230 | "value": "?", 231 | "page": 1 232 | }, { 233 | "row": 3, 234 | "value": "[", 235 | "page": 1 236 | }, { 237 | "row": 3, 238 | "value": "]", 239 | "page": 1 240 | }, { 241 | "row": 3, 242 | "value": "{", 243 | "page": 1 244 | }, { 245 | "row": 3, 246 | "value": "}", 247 | "page": 1 248 | }, { 249 | "row": 3, 250 | "value": "|", 251 | "page": 1 252 | }, { 253 | "row": 3, 254 | "value": "\\", 255 | "page": 1 256 | }, { 257 | "row": 3, 258 | "value": "~", 259 | "page": 1 260 | }]; -------------------------------------------------------------------------------- /package/layouts/qwerty/wordle.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: { 2 | row: number; 3 | value: string; 4 | }[]; 5 | export default _default; 6 | -------------------------------------------------------------------------------- /package/layouts/qwerty/wordle.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "q" 4 | }, { 5 | "row": 0, 6 | "value": "w" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "a" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 2, 60 | "value": "Enter" 61 | }, { 62 | "row": 2, 63 | "value": "z" 64 | }, { 65 | "row": 2, 66 | "value": "x" 67 | }, { 68 | "row": 2, 69 | "value": "c" 70 | }, { 71 | "row": 2, 72 | "value": "v" 73 | }, { 74 | "row": 2, 75 | "value": "b" 76 | }, { 77 | "row": 2, 78 | "value": "n" 79 | }, { 80 | "row": 2, 81 | "value": "m" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }]; -------------------------------------------------------------------------------- /package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-keyboard", 3 | "version": "0.5.5", 4 | "description": "Keyboard component for Svelte", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/russellsamora/svelte-keyboard.git" 8 | }, 9 | "keywords": [ 10 | "svelte", 11 | "keyboard" 12 | ], 13 | "author": "russell samora", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/russellsamora/svelte-keyboard/issues" 17 | }, 18 | "homepage": "https://github.com/russellsamora/svelte-keyboard#readme", 19 | "devDependencies": { 20 | "@sveltejs/adapter-static": "next", 21 | "@sveltejs/kit": "next", 22 | "prettier": "^2.4.1", 23 | "prettier-plugin-svelte": "^2.4.0", 24 | "svelte": "^3.46.2", 25 | "svelte2tsx": "^0.4.14", 26 | "typescript": "^4.5.5" 27 | }, 28 | "exports": { 29 | "./package.json": "./package.json", 30 | "./.DS_Store": "./.DS_Store", 31 | "./Keyboard.svelte": "./Keyboard.svelte", 32 | "./layouts/azerty/crossword": "./layouts/azerty/crossword.js", 33 | "./layouts/azerty/standard": "./layouts/azerty/standard.js", 34 | "./layouts/azerty/wordle": "./layouts/azerty/wordle.js", 35 | "./layouts/qwerty/crossword": "./layouts/qwerty/crossword.js", 36 | "./layouts/qwerty/standard": "./layouts/qwerty/standard.js", 37 | "./layouts/qwerty/wordle": "./layouts/qwerty/wordle.js", 38 | "./svg/backspace": "./svg/backspace.js", 39 | "./svg/enter": "./svg/enter.js", 40 | ".": "./Keyboard.svelte" 41 | }, 42 | "type": "module", 43 | "typings": "./Keyboard.svelte.d.ts", 44 | "svelte": "./Keyboard.svelte" 45 | } -------------------------------------------------------------------------------- /package/svg/backspace.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: ""; 2 | export default _default; 3 | -------------------------------------------------------------------------------- /package/svg/backspace.js: -------------------------------------------------------------------------------- 1 | export default `` -------------------------------------------------------------------------------- /package/svg/enter.d.ts: -------------------------------------------------------------------------------- 1 | declare var _default: ""; 2 | export default _default; 3 | -------------------------------------------------------------------------------- /package/svg/enter.js: -------------------------------------------------------------------------------- 1 | export default `` -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: 5.3 2 | 3 | specifiers: 4 | '@sveltejs/adapter-static': next 5 | '@sveltejs/kit': next 6 | prettier: ^2.4.1 7 | prettier-plugin-svelte: ^2.4.0 8 | svelte: ^3.46.2 9 | svelte2tsx: ^0.4.14 10 | typescript: ^4.5.5 11 | 12 | devDependencies: 13 | '@sveltejs/adapter-static': 1.0.0-next.26 14 | '@sveltejs/kit': 1.0.0-next.242_svelte@3.46.2 15 | prettier: 2.5.1 16 | prettier-plugin-svelte: 2.6.0_prettier@2.5.1+svelte@3.46.2 17 | svelte: 3.46.2 18 | svelte2tsx: 0.4.14_svelte@3.46.2+typescript@4.5.5 19 | typescript: 4.5.5 20 | 21 | packages: 22 | 23 | /@rollup/pluginutils/4.1.2: 24 | resolution: {integrity: sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==} 25 | engines: {node: '>= 8.0.0'} 26 | dependencies: 27 | estree-walker: 2.0.2 28 | picomatch: 2.3.1 29 | dev: true 30 | 31 | /@sveltejs/adapter-static/1.0.0-next.26: 32 | resolution: {integrity: sha512-LXR0HkPygZ+m9wJhFqbYWbJ0jquhgUK6vL/8AwnqbAZGGtQFloMpf49WOANk7MiLBeY6L97W5jPLSxHiDW3T0Q==} 33 | dependencies: 34 | tiny-glob: 0.2.9 35 | dev: true 36 | 37 | /@sveltejs/kit/1.0.0-next.242_svelte@3.46.2: 38 | resolution: {integrity: sha512-sVAkwU0pvCPm4wel+FLWMD7HO+tGG1byAH+xEnoy42uIoATx73YT+uTPuHMJXIOw40yhF1ykac1nLIcdGkattg==} 39 | engines: {node: '>=14.13'} 40 | hasBin: true 41 | peerDependencies: 42 | svelte: ^3.44.0 43 | dependencies: 44 | '@sveltejs/vite-plugin-svelte': 1.0.0-next.35_svelte@3.46.2+vite@2.7.13 45 | sade: 1.8.1 46 | svelte: 3.46.2 47 | vite: 2.7.13 48 | transitivePeerDependencies: 49 | - diff-match-patch 50 | - less 51 | - sass 52 | - stylus 53 | - supports-color 54 | dev: true 55 | 56 | /@sveltejs/vite-plugin-svelte/1.0.0-next.35_svelte@3.46.2+vite@2.7.13: 57 | resolution: {integrity: sha512-PuhI+1L6xqn5gc6jiK4mHmeS8kf3c1E+IaAsJclHbZTNiPQdC5SiTM3cV0FAA4zhwHmXV6pjt8rRHRx8ouFv3g==} 58 | engines: {node: ^14.13.1 || >= 16} 59 | peerDependencies: 60 | diff-match-patch: ^1.0.5 61 | svelte: ^3.44.0 62 | vite: ^2.7.0 63 | peerDependenciesMeta: 64 | diff-match-patch: 65 | optional: true 66 | dependencies: 67 | '@rollup/pluginutils': 4.1.2 68 | debug: 4.3.3 69 | kleur: 4.1.4 70 | magic-string: 0.25.7 71 | svelte: 3.46.2 72 | svelte-hmr: 0.14.9_svelte@3.46.2 73 | vite: 2.7.13 74 | transitivePeerDependencies: 75 | - supports-color 76 | dev: true 77 | 78 | /debug/4.3.3: 79 | resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==} 80 | engines: {node: '>=6.0'} 81 | peerDependencies: 82 | supports-color: '*' 83 | peerDependenciesMeta: 84 | supports-color: 85 | optional: true 86 | dependencies: 87 | ms: 2.1.2 88 | dev: true 89 | 90 | /dedent-js/1.0.1: 91 | resolution: {integrity: sha1-vuX7fJ5yfYXf+iRZDRDsGrElUwU=} 92 | dev: true 93 | 94 | /esbuild-android-arm64/0.13.15: 95 | resolution: {integrity: sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==} 96 | cpu: [arm64] 97 | os: [android] 98 | requiresBuild: true 99 | dev: true 100 | optional: true 101 | 102 | /esbuild-darwin-64/0.13.15: 103 | resolution: {integrity: sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==} 104 | cpu: [x64] 105 | os: [darwin] 106 | requiresBuild: true 107 | dev: true 108 | optional: true 109 | 110 | /esbuild-darwin-arm64/0.13.15: 111 | resolution: {integrity: sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==} 112 | cpu: [arm64] 113 | os: [darwin] 114 | requiresBuild: true 115 | dev: true 116 | optional: true 117 | 118 | /esbuild-freebsd-64/0.13.15: 119 | resolution: {integrity: sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==} 120 | cpu: [x64] 121 | os: [freebsd] 122 | requiresBuild: true 123 | dev: true 124 | optional: true 125 | 126 | /esbuild-freebsd-arm64/0.13.15: 127 | resolution: {integrity: sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==} 128 | cpu: [arm64] 129 | os: [freebsd] 130 | requiresBuild: true 131 | dev: true 132 | optional: true 133 | 134 | /esbuild-linux-32/0.13.15: 135 | resolution: {integrity: sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==} 136 | cpu: [ia32] 137 | os: [linux] 138 | requiresBuild: true 139 | dev: true 140 | optional: true 141 | 142 | /esbuild-linux-64/0.13.15: 143 | resolution: {integrity: sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==} 144 | cpu: [x64] 145 | os: [linux] 146 | requiresBuild: true 147 | dev: true 148 | optional: true 149 | 150 | /esbuild-linux-arm/0.13.15: 151 | resolution: {integrity: sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==} 152 | cpu: [arm] 153 | os: [linux] 154 | requiresBuild: true 155 | dev: true 156 | optional: true 157 | 158 | /esbuild-linux-arm64/0.13.15: 159 | resolution: {integrity: sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==} 160 | cpu: [arm64] 161 | os: [linux] 162 | requiresBuild: true 163 | dev: true 164 | optional: true 165 | 166 | /esbuild-linux-mips64le/0.13.15: 167 | resolution: {integrity: sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==} 168 | cpu: [mips64el] 169 | os: [linux] 170 | requiresBuild: true 171 | dev: true 172 | optional: true 173 | 174 | /esbuild-linux-ppc64le/0.13.15: 175 | resolution: {integrity: sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==} 176 | cpu: [ppc64] 177 | os: [linux] 178 | requiresBuild: true 179 | dev: true 180 | optional: true 181 | 182 | /esbuild-netbsd-64/0.13.15: 183 | resolution: {integrity: sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==} 184 | cpu: [x64] 185 | os: [netbsd] 186 | requiresBuild: true 187 | dev: true 188 | optional: true 189 | 190 | /esbuild-openbsd-64/0.13.15: 191 | resolution: {integrity: sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==} 192 | cpu: [x64] 193 | os: [openbsd] 194 | requiresBuild: true 195 | dev: true 196 | optional: true 197 | 198 | /esbuild-sunos-64/0.13.15: 199 | resolution: {integrity: sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==} 200 | cpu: [x64] 201 | os: [sunos] 202 | requiresBuild: true 203 | dev: true 204 | optional: true 205 | 206 | /esbuild-windows-32/0.13.15: 207 | resolution: {integrity: sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==} 208 | cpu: [ia32] 209 | os: [win32] 210 | requiresBuild: true 211 | dev: true 212 | optional: true 213 | 214 | /esbuild-windows-64/0.13.15: 215 | resolution: {integrity: sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==} 216 | cpu: [x64] 217 | os: [win32] 218 | requiresBuild: true 219 | dev: true 220 | optional: true 221 | 222 | /esbuild-windows-arm64/0.13.15: 223 | resolution: {integrity: sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==} 224 | cpu: [arm64] 225 | os: [win32] 226 | requiresBuild: true 227 | dev: true 228 | optional: true 229 | 230 | /esbuild/0.13.15: 231 | resolution: {integrity: sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==} 232 | hasBin: true 233 | requiresBuild: true 234 | optionalDependencies: 235 | esbuild-android-arm64: 0.13.15 236 | esbuild-darwin-64: 0.13.15 237 | esbuild-darwin-arm64: 0.13.15 238 | esbuild-freebsd-64: 0.13.15 239 | esbuild-freebsd-arm64: 0.13.15 240 | esbuild-linux-32: 0.13.15 241 | esbuild-linux-64: 0.13.15 242 | esbuild-linux-arm: 0.13.15 243 | esbuild-linux-arm64: 0.13.15 244 | esbuild-linux-mips64le: 0.13.15 245 | esbuild-linux-ppc64le: 0.13.15 246 | esbuild-netbsd-64: 0.13.15 247 | esbuild-openbsd-64: 0.13.15 248 | esbuild-sunos-64: 0.13.15 249 | esbuild-windows-32: 0.13.15 250 | esbuild-windows-64: 0.13.15 251 | esbuild-windows-arm64: 0.13.15 252 | dev: true 253 | 254 | /estree-walker/2.0.2: 255 | resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} 256 | dev: true 257 | 258 | /fsevents/2.3.2: 259 | resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} 260 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} 261 | os: [darwin] 262 | requiresBuild: true 263 | dev: true 264 | optional: true 265 | 266 | /function-bind/1.1.1: 267 | resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} 268 | dev: true 269 | 270 | /globalyzer/0.1.0: 271 | resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==} 272 | dev: true 273 | 274 | /globrex/0.1.2: 275 | resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} 276 | dev: true 277 | 278 | /has/1.0.3: 279 | resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==} 280 | engines: {node: '>= 0.4.0'} 281 | dependencies: 282 | function-bind: 1.1.1 283 | dev: true 284 | 285 | /is-core-module/2.8.1: 286 | resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==} 287 | dependencies: 288 | has: 1.0.3 289 | dev: true 290 | 291 | /kleur/4.1.4: 292 | resolution: {integrity: sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==} 293 | engines: {node: '>=6'} 294 | dev: true 295 | 296 | /lower-case/2.0.2: 297 | resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} 298 | dependencies: 299 | tslib: 2.3.1 300 | dev: true 301 | 302 | /magic-string/0.25.7: 303 | resolution: {integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==} 304 | dependencies: 305 | sourcemap-codec: 1.4.8 306 | dev: true 307 | 308 | /mri/1.2.0: 309 | resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} 310 | engines: {node: '>=4'} 311 | dev: true 312 | 313 | /ms/2.1.2: 314 | resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} 315 | dev: true 316 | 317 | /nanoid/3.2.0: 318 | resolution: {integrity: sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==} 319 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} 320 | hasBin: true 321 | dev: true 322 | 323 | /no-case/3.0.4: 324 | resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} 325 | dependencies: 326 | lower-case: 2.0.2 327 | tslib: 2.3.1 328 | dev: true 329 | 330 | /pascal-case/3.1.2: 331 | resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} 332 | dependencies: 333 | no-case: 3.0.4 334 | tslib: 2.3.1 335 | dev: true 336 | 337 | /path-parse/1.0.7: 338 | resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} 339 | dev: true 340 | 341 | /picocolors/1.0.0: 342 | resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} 343 | dev: true 344 | 345 | /picomatch/2.3.1: 346 | resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} 347 | engines: {node: '>=8.6'} 348 | dev: true 349 | 350 | /postcss/8.4.5: 351 | resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==} 352 | engines: {node: ^10 || ^12 || >=14} 353 | dependencies: 354 | nanoid: 3.2.0 355 | picocolors: 1.0.0 356 | source-map-js: 1.0.2 357 | dev: true 358 | 359 | /prettier-plugin-svelte/2.6.0_prettier@2.5.1+svelte@3.46.2: 360 | resolution: {integrity: sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==} 361 | peerDependencies: 362 | prettier: ^1.16.4 || ^2.0.0 363 | svelte: ^3.2.0 364 | dependencies: 365 | prettier: 2.5.1 366 | svelte: 3.46.2 367 | dev: true 368 | 369 | /prettier/2.5.1: 370 | resolution: {integrity: sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==} 371 | engines: {node: '>=10.13.0'} 372 | hasBin: true 373 | dev: true 374 | 375 | /resolve/1.22.0: 376 | resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==} 377 | hasBin: true 378 | dependencies: 379 | is-core-module: 2.8.1 380 | path-parse: 1.0.7 381 | supports-preserve-symlinks-flag: 1.0.0 382 | dev: true 383 | 384 | /rollup/2.66.1: 385 | resolution: {integrity: sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==} 386 | engines: {node: '>=10.0.0'} 387 | hasBin: true 388 | optionalDependencies: 389 | fsevents: 2.3.2 390 | dev: true 391 | 392 | /sade/1.8.1: 393 | resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} 394 | engines: {node: '>=6'} 395 | dependencies: 396 | mri: 1.2.0 397 | dev: true 398 | 399 | /source-map-js/1.0.2: 400 | resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} 401 | engines: {node: '>=0.10.0'} 402 | dev: true 403 | 404 | /sourcemap-codec/1.4.8: 405 | resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} 406 | dev: true 407 | 408 | /supports-preserve-symlinks-flag/1.0.0: 409 | resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} 410 | engines: {node: '>= 0.4'} 411 | dev: true 412 | 413 | /svelte-hmr/0.14.9_svelte@3.46.2: 414 | resolution: {integrity: sha512-bKE9+4qb4sAnA+TKHiYurUl970rjA0XmlP9TEP7K/ncyWz3m81kA4HOgmlZK/7irGK7gzZlaPDI3cmf8fp/+tg==} 415 | peerDependencies: 416 | svelte: '>=3.19.0' 417 | dependencies: 418 | svelte: 3.46.2 419 | dev: true 420 | 421 | /svelte/3.46.2: 422 | resolution: {integrity: sha512-RXSAtYNefe01Sb1lXtZ2I+gzn3t/h/59hoaRNeRrm8IkMIu6BSiAkbpi41xb+C44x54YKnbk9+dtfs3pM4hECA==} 423 | engines: {node: '>= 8'} 424 | dev: true 425 | 426 | /svelte2tsx/0.4.14_svelte@3.46.2+typescript@4.5.5: 427 | resolution: {integrity: sha512-udF0Z/DA98OfjPFBU1GBJRpYHEvsxA8ozwYVN08AOWMnQyxoSyWWlYspiq2m9xAjLo/pWnhec9z1d6jc9umqjA==} 428 | peerDependencies: 429 | svelte: ^3.24 430 | typescript: ^4.1.2 431 | dependencies: 432 | dedent-js: 1.0.1 433 | pascal-case: 3.1.2 434 | svelte: 3.46.2 435 | typescript: 4.5.5 436 | dev: true 437 | 438 | /tiny-glob/0.2.9: 439 | resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} 440 | dependencies: 441 | globalyzer: 0.1.0 442 | globrex: 0.1.2 443 | dev: true 444 | 445 | /tslib/2.3.1: 446 | resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} 447 | dev: true 448 | 449 | /typescript/4.5.5: 450 | resolution: {integrity: sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==} 451 | engines: {node: '>=4.2.0'} 452 | hasBin: true 453 | dev: true 454 | 455 | /vite/2.7.13: 456 | resolution: {integrity: sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==} 457 | engines: {node: '>=12.2.0'} 458 | hasBin: true 459 | peerDependencies: 460 | less: '*' 461 | sass: '*' 462 | stylus: '*' 463 | peerDependenciesMeta: 464 | less: 465 | optional: true 466 | sass: 467 | optional: true 468 | stylus: 469 | optional: true 470 | dependencies: 471 | esbuild: 0.13.15 472 | postcss: 8.4.5 473 | resolve: 1.22.0 474 | rollup: 2.66.1 475 | optionalDependencies: 476 | fsevents: 2.3.2 477 | dev: true 478 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | svelte-keyboard 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | %svelte.head% 21 | 22 | 23 |
%svelte.body%
24 | 25 | 26 | -------------------------------------------------------------------------------- /src/lib/Keyboard.svelte: -------------------------------------------------------------------------------- 1 | 103 | 104 |
105 | {#each rowData as row, i} 106 |
107 | {#each row as keys} 108 |
109 | {#each keys as { value, display }} 110 |
126 | {/each} 127 |
128 | {/each} 129 |
130 | 131 | 203 | -------------------------------------------------------------------------------- /src/lib/layouts/azerty/crossword.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "a" 4 | }, { 5 | "row": 0, 6 | "value": "z" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "q" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 1, 60 | "value": "m" 61 | }, { 62 | "row": 2, 63 | "value": "w" 64 | }, { 65 | "row": 2, 66 | "value": "x" 67 | }, { 68 | "row": 2, 69 | "value": "c" 70 | }, { 71 | "row": 2, 72 | "value": "v" 73 | }, { 74 | "row": 2, 75 | "value": "b" 76 | }, { 77 | "row": 2, 78 | "value": "n" 79 | }, { 80 | "row": 2, 81 | "value": "Backspace" 82 | }]; -------------------------------------------------------------------------------- /src/lib/layouts/azerty/standard.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "a" 4 | }, { 5 | "row": 0, 6 | "value": "z" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "q" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 1, 60 | "value": "m" 61 | }, { 62 | "row": 2, 63 | "value": "Shift", 64 | }, { 65 | "row": 2, 66 | "value": "w" 67 | }, { 68 | "row": 2, 69 | "value": "x" 70 | }, { 71 | "row": 2, 72 | "value": "c" 73 | }, { 74 | "row": 2, 75 | "value": "v" 76 | }, { 77 | "row": 2, 78 | "value": "b" 79 | }, { 80 | "row": 2, 81 | "value": "n" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }, { 86 | "row": 3, 87 | "value": "Page1", 88 | }, { 89 | "row": 3, 90 | "value": ",", 91 | }, { 92 | "row": 3, 93 | "value": "Space", 94 | }, { 95 | "row": 3, 96 | "value": ".", 97 | }, { 98 | "row": 3, 99 | "value": "Enter", 100 | }, { 101 | "row": 0, 102 | "value": "1", 103 | "page": 1 104 | }, { 105 | "row": 0, 106 | "value": "2", 107 | "page": 1 108 | }, { 109 | "row": 0, 110 | "value": "3", 111 | "page": 1 112 | }, { 113 | "row": 0, 114 | "value": "4", 115 | "page": 1 116 | }, { 117 | "row": 0, 118 | "value": "5", 119 | "page": 1 120 | }, { 121 | "row": 0, 122 | "value": "6", 123 | "page": 1 124 | }, { 125 | "row": 0, 126 | "value": "7", 127 | "page": 1 128 | }, { 129 | "row": 0, 130 | "value": "8", 131 | "page": 1 132 | }, { 133 | "row": 0, 134 | "value": "9", 135 | "page": 1 136 | }, { 137 | "row": 0, 138 | "value": "0", 139 | "page": 1 140 | }, { 141 | "row": 1, 142 | "value": "!", 143 | "page": 1 144 | }, { 145 | "row": 1, 146 | "value": "@", 147 | "page": 1 148 | }, { 149 | "row": 1, 150 | "value": "#", 151 | "page": 1 152 | }, { 153 | "row": 1, 154 | "value": "$", 155 | "page": 1 156 | }, { 157 | "row": 1, 158 | "value": "%", 159 | "page": 1 160 | }, { 161 | "row": 1, 162 | "value": "^", 163 | "page": 1 164 | }, { 165 | "row": 1, 166 | "value": "&", 167 | "page": 1 168 | }, { 169 | "row": 1, 170 | "value": "*", 171 | "page": 1 172 | }, { 173 | "row": 1, 174 | "value": "(", 175 | "page": 1 176 | }, { 177 | "row": 1, 178 | "value": ")", 179 | "page": 1 180 | }, { 181 | "row": 2, 182 | "value": "-", 183 | "page": 1 184 | }, { 185 | "row": 2, 186 | "value": "_", 187 | "page": 1 188 | }, { 189 | "row": 2, 190 | "value": "=", 191 | "page": 1 192 | }, { 193 | "row": 2, 194 | "value": "+", 195 | "page": 1 196 | }, { 197 | "row": 2, 198 | "value": ";", 199 | "page": 1 200 | }, { 201 | "row": 2, 202 | "value": ":", 203 | "page": 1 204 | }, { 205 | "row": 2, 206 | "value": "'", 207 | "page": 1 208 | }, { 209 | "row": 2, 210 | "value": "\"", 211 | "page": 1 212 | }, { 213 | "row": 2, 214 | "value": "<", 215 | "page": 1 216 | }, { 217 | "row": 2, 218 | "value": ">", 219 | "page": 1 220 | }, { 221 | "row": 3, 222 | "value": "Page0", 223 | "page": 1 224 | }, { 225 | "row": 3, 226 | "value": "/", 227 | "page": 1 228 | }, { 229 | "row": 3, 230 | "value": "?", 231 | "page": 1 232 | }, { 233 | "row": 3, 234 | "value": "[", 235 | "page": 1 236 | }, { 237 | "row": 3, 238 | "value": "]", 239 | "page": 1 240 | }, { 241 | "row": 3, 242 | "value": "{", 243 | "page": 1 244 | }, { 245 | "row": 3, 246 | "value": "}", 247 | "page": 1 248 | }, { 249 | "row": 3, 250 | "value": "|", 251 | "page": 1 252 | }, { 253 | "row": 3, 254 | "value": "\\", 255 | "page": 1 256 | }, { 257 | "row": 3, 258 | "value": "~", 259 | "page": 1 260 | }]; -------------------------------------------------------------------------------- /src/lib/layouts/azerty/wordle.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "a" 4 | }, { 5 | "row": 0, 6 | "value": "z" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "q" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 1, 60 | "value": "m" 61 | }, { 62 | "row": 2, 63 | "value": "Enter" 64 | }, { 65 | "row": 2, 66 | "value": "w" 67 | }, { 68 | "row": 2, 69 | "value": "x" 70 | }, { 71 | "row": 2, 72 | "value": "c" 73 | }, { 74 | "row": 2, 75 | "value": "v" 76 | }, { 77 | "row": 2, 78 | "value": "b" 79 | }, { 80 | "row": 2, 81 | "value": "n" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }]; -------------------------------------------------------------------------------- /src/lib/layouts/qwerty/crossword.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "q" 4 | }, { 5 | "row": 0, 6 | "value": "w" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "a" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 2, 60 | "value": "z" 61 | }, { 62 | "row": 2, 63 | "value": "x" 64 | }, { 65 | "row": 2, 66 | "value": "c" 67 | }, { 68 | "row": 2, 69 | "value": "v" 70 | }, { 71 | "row": 2, 72 | "value": "b" 73 | }, { 74 | "row": 2, 75 | "value": "n" 76 | }, { 77 | "row": 2, 78 | "value": "m" 79 | }, { 80 | "row": 2, 81 | "value": "Backspace" 82 | }]; -------------------------------------------------------------------------------- /src/lib/layouts/qwerty/standard.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "q" 4 | }, { 5 | "row": 0, 6 | "value": "w" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "a" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 2, 60 | "value": "Shift", 61 | }, { 62 | "row": 2, 63 | "value": "z" 64 | }, { 65 | "row": 2, 66 | "value": "x" 67 | }, { 68 | "row": 2, 69 | "value": "c" 70 | }, { 71 | "row": 2, 72 | "value": "v" 73 | }, { 74 | "row": 2, 75 | "value": "b" 76 | }, { 77 | "row": 2, 78 | "value": "n" 79 | }, { 80 | "row": 2, 81 | "value": "m" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }, { 86 | "row": 3, 87 | "value": "Page1", 88 | }, { 89 | "row": 3, 90 | "value": ",", 91 | }, { 92 | "row": 3, 93 | "value": "Space", 94 | }, { 95 | "row": 3, 96 | "value": ".", 97 | }, { 98 | "row": 3, 99 | "value": "Enter", 100 | }, { 101 | "row": 0, 102 | "value": "1", 103 | "page": 1 104 | }, { 105 | "row": 0, 106 | "value": "2", 107 | "page": 1 108 | }, { 109 | "row": 0, 110 | "value": "3", 111 | "page": 1 112 | }, { 113 | "row": 0, 114 | "value": "4", 115 | "page": 1 116 | }, { 117 | "row": 0, 118 | "value": "5", 119 | "page": 1 120 | }, { 121 | "row": 0, 122 | "value": "6", 123 | "page": 1 124 | }, { 125 | "row": 0, 126 | "value": "7", 127 | "page": 1 128 | }, { 129 | "row": 0, 130 | "value": "8", 131 | "page": 1 132 | }, { 133 | "row": 0, 134 | "value": "9", 135 | "page": 1 136 | }, { 137 | "row": 0, 138 | "value": "0", 139 | "page": 1 140 | }, { 141 | "row": 1, 142 | "value": "!", 143 | "page": 1 144 | }, { 145 | "row": 1, 146 | "value": "@", 147 | "page": 1 148 | }, { 149 | "row": 1, 150 | "value": "#", 151 | "page": 1 152 | }, { 153 | "row": 1, 154 | "value": "$", 155 | "page": 1 156 | }, { 157 | "row": 1, 158 | "value": "%", 159 | "page": 1 160 | }, { 161 | "row": 1, 162 | "value": "^", 163 | "page": 1 164 | }, { 165 | "row": 1, 166 | "value": "&", 167 | "page": 1 168 | }, { 169 | "row": 1, 170 | "value": "*", 171 | "page": 1 172 | }, { 173 | "row": 1, 174 | "value": "(", 175 | "page": 1 176 | }, { 177 | "row": 1, 178 | "value": ")", 179 | "page": 1 180 | }, { 181 | "row": 2, 182 | "value": "-", 183 | "page": 1 184 | }, { 185 | "row": 2, 186 | "value": "_", 187 | "page": 1 188 | }, { 189 | "row": 2, 190 | "value": "=", 191 | "page": 1 192 | }, { 193 | "row": 2, 194 | "value": "+", 195 | "page": 1 196 | }, { 197 | "row": 2, 198 | "value": ";", 199 | "page": 1 200 | }, { 201 | "row": 2, 202 | "value": ":", 203 | "page": 1 204 | }, { 205 | "row": 2, 206 | "value": "'", 207 | "page": 1 208 | }, { 209 | "row": 2, 210 | "value": "\"", 211 | "page": 1 212 | }, { 213 | "row": 2, 214 | "value": "<", 215 | "page": 1 216 | }, { 217 | "row": 2, 218 | "value": ">", 219 | "page": 1 220 | }, { 221 | "row": 3, 222 | "value": "Page0", 223 | "page": 1 224 | }, { 225 | "row": 3, 226 | "value": "/", 227 | "page": 1 228 | }, { 229 | "row": 3, 230 | "value": "?", 231 | "page": 1 232 | }, { 233 | "row": 3, 234 | "value": "[", 235 | "page": 1 236 | }, { 237 | "row": 3, 238 | "value": "]", 239 | "page": 1 240 | }, { 241 | "row": 3, 242 | "value": "{", 243 | "page": 1 244 | }, { 245 | "row": 3, 246 | "value": "}", 247 | "page": 1 248 | }, { 249 | "row": 3, 250 | "value": "|", 251 | "page": 1 252 | }, { 253 | "row": 3, 254 | "value": "\\", 255 | "page": 1 256 | }, { 257 | "row": 3, 258 | "value": "~", 259 | "page": 1 260 | }]; -------------------------------------------------------------------------------- /src/lib/layouts/qwerty/wordle.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "row": 0, 3 | "value": "q" 4 | }, { 5 | "row": 0, 6 | "value": "w" 7 | }, { 8 | "row": 0, 9 | "value": "e" 10 | }, { 11 | "row": 0, 12 | "value": "r" 13 | }, { 14 | "row": 0, 15 | "value": "t" 16 | }, { 17 | "row": 0, 18 | "value": "y" 19 | }, { 20 | "row": 0, 21 | "value": "u" 22 | }, { 23 | "row": 0, 24 | "value": "i" 25 | }, { 26 | "row": 0, 27 | "value": "o" 28 | }, { 29 | "row": 0, 30 | "value": "p" 31 | }, { 32 | "row": 1, 33 | "value": "a" 34 | }, { 35 | "row": 1, 36 | "value": "s" 37 | }, { 38 | "row": 1, 39 | "value": "d" 40 | }, { 41 | "row": 1, 42 | "value": "f" 43 | }, { 44 | "row": 1, 45 | "value": "g" 46 | }, { 47 | "row": 1, 48 | "value": "h" 49 | }, { 50 | "row": 1, 51 | "value": "j" 52 | }, { 53 | "row": 1, 54 | "value": "k" 55 | }, { 56 | "row": 1, 57 | "value": "l" 58 | }, { 59 | "row": 2, 60 | "value": "Enter" 61 | }, { 62 | "row": 2, 63 | "value": "z" 64 | }, { 65 | "row": 2, 66 | "value": "x" 67 | }, { 68 | "row": 2, 69 | "value": "c" 70 | }, { 71 | "row": 2, 72 | "value": "v" 73 | }, { 74 | "row": 2, 75 | "value": "b" 76 | }, { 77 | "row": 2, 78 | "value": "n" 79 | }, { 80 | "row": 2, 81 | "value": "m" 82 | }, { 83 | "row": 2, 84 | "value": "Backspace" 85 | }]; -------------------------------------------------------------------------------- /src/lib/svg/backspace.js: -------------------------------------------------------------------------------- 1 | export default `` -------------------------------------------------------------------------------- /src/lib/svg/enter.js: -------------------------------------------------------------------------------- 1 | export default `` -------------------------------------------------------------------------------- /src/routes/index.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

svelte-keyboard

9 |

10 | A virtual keyboard component for Svelte. Read the docs on github. 13 |

14 | 15 |
16 |

Default (Qwerty)

17 |

key pressed: {keys[0] || ""}

18 |
19 |
20 | 21 |
22 | 23 |
24 |

Default (Azerty)

25 |

key pressed: {keys[1] || ""}

26 |
27 |
28 | 32 |
33 | 34 |
35 |

Preset Layout (Wordle - Qwerty)

36 |

key pressed: {keys[2] || ""}

37 |
38 |
39 | 44 |
45 | 46 |
47 |

Preset Layout (Wordle - Azerty)

48 |

key pressed: {keys[3] || ""}

49 |
50 |
51 | 57 |
58 | 59 |
60 |

Preset Layout (Crossword - Qwerty)

61 |

key pressed: {keys[4] || ""}

62 |
63 |
64 | 69 |
70 | 71 |
72 |

Preset Layout (Crossword - Azerty)

73 |

key pressed: {keys[5] || ""}

74 |
75 |
76 | 82 |
83 | 84 |
85 |

Custom Layout

86 |

key pressed: {keys[6] || ""}

87 |
88 |
89 | 109 |
110 | 111 |
112 |

Custom Style - A

113 |

key pressed: {keys[7] || ""}

114 |
115 |
116 | 127 |
128 | 129 |
130 |

Custom Style - B

131 |

key pressed: {keys[8] || ""}

132 |
133 |
134 | 145 |
146 | 147 |
148 |

Custom Key Class

149 |

key pressed: {keys[9] || ""}

150 |
151 |
152 | 159 |
160 | 161 | 179 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russellsamora/svelte-keyboard/2bf6a5f9dd8d76cdc28a8f75713f02398a7697de/static/favicon.png -------------------------------------------------------------------------------- /static/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russellsamora/svelte-keyboard/2bf6a5f9dd8d76cdc28a8f75713f02398a7697de/static/social.png -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-static'; 2 | 3 | const config = { 4 | kit: { 5 | adapter: adapter(), 6 | target: '#svelte', 7 | paths: { 8 | base: "/svelte-keyboard" 9 | }, 10 | } 11 | }; 12 | 13 | export default config; 14 | --------------------------------------------------------------------------------