From 66c1f2ec9c516da147c7eca9e8cb11c3eea2e1e2 Mon Sep 17 00:00:00 2001 From: Shinichi Okada Date: Sun, 17 Jul 2022 11:38:17 +0200 Subject: [PATCH] feat: add kbd component and page --- mdsvex.config.js | 1 + src/lib/index.ts | 7 + src/lib/kbd/ArrowKeyDown.svelte | 16 + src/lib/kbd/ArrowKeyLeft.svelte | 16 + src/lib/kbd/ArrowKeyRight.svelte | 16 + src/lib/kbd/ArrowKeyUp.svelte | 16 + src/lib/kbd/Kbd.svelte | 9 + src/routes/__layout.svelte | 5 + src/routes/blocks/KbdBlock.svelte | 54 +++ src/routes/blocks/index.ts | 1 + src/routes/index.svelte | 2 + src/routes/kbd/index.md | 321 ++++++++++++++++ src/routes/layouts/kbdLayout.svelte | 32 ++ src/routes/props/FloatingLabelInput.json | 2 +- src/routes/props/Kbd.json | 1 + src/routes/props/SidebarItem.json | 2 +- static/images/components/keyboard.svg | 462 +++++++++++++++++++++++ tests/test.ts | 6 + 18 files changed, 967 insertions(+), 2 deletions(-) create mode 100644 src/lib/kbd/ArrowKeyDown.svelte create mode 100644 src/lib/kbd/ArrowKeyLeft.svelte create mode 100644 src/lib/kbd/ArrowKeyRight.svelte create mode 100644 src/lib/kbd/ArrowKeyUp.svelte create mode 100644 src/lib/kbd/Kbd.svelte create mode 100644 src/routes/blocks/KbdBlock.svelte create mode 100644 src/routes/kbd/index.md create mode 100644 src/routes/layouts/kbdLayout.svelte create mode 100644 src/routes/props/Kbd.json create mode 100644 static/images/components/keyboard.svg diff --git a/mdsvex.config.js b/mdsvex.config.js index 6b4f563fb..9f45233cd 100644 --- a/mdsvex.config.js +++ b/mdsvex.config.js @@ -18,6 +18,7 @@ const config = defineConfig({ footerLayout: './src/routes/layouts/footerLayout.svelte', formLayout: './src/routes/layouts/formLayout.svelte', iconLayout: './src/routes/layouts/iconLayout.svelte', + kbdLayout: './src/routes/layouts/kbdLayout.svelte', listgroupLayout: './src/routes/layouts/listgroupLayout.svelte', modalLayout: './src/routes/layouts/modalLayout.svelte', navbarLayout: './src/routes/layouts/navbarLayout.svelte', diff --git a/src/lib/index.ts b/src/lib/index.ts index f20165c71..49349459b 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -70,6 +70,13 @@ export { default as Select } from './forms/Select.svelte'; export { default as Textarea } from './forms/Textarea.svelte'; export { default as Toggle } from './forms/Toggle.svelte'; +// Kbd +export { default as Kbd } from './kbd/Kbd.svelte'; +export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte'; +export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte'; +export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte'; +export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte'; + // List export { default as List } from './list-group/List.svelte'; diff --git a/src/lib/kbd/ArrowKeyDown.svelte b/src/lib/kbd/ArrowKeyDown.svelte new file mode 100644 index 000000000..014290c5c --- /dev/null +++ b/src/lib/kbd/ArrowKeyDown.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/kbd/ArrowKeyLeft.svelte b/src/lib/kbd/ArrowKeyLeft.svelte new file mode 100644 index 000000000..11f7c62fe --- /dev/null +++ b/src/lib/kbd/ArrowKeyLeft.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/kbd/ArrowKeyRight.svelte b/src/lib/kbd/ArrowKeyRight.svelte new file mode 100644 index 000000000..7e7b284ce --- /dev/null +++ b/src/lib/kbd/ArrowKeyRight.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/kbd/ArrowKeyUp.svelte b/src/lib/kbd/ArrowKeyUp.svelte new file mode 100644 index 000000000..395b5e765 --- /dev/null +++ b/src/lib/kbd/ArrowKeyUp.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/kbd/Kbd.svelte b/src/lib/kbd/Kbd.svelte new file mode 100644 index 000000000..365cd0295 --- /dev/null +++ b/src/lib/kbd/Kbd.svelte @@ -0,0 +1,9 @@ + + + + + diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index d0517d5f6..058698af1 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -175,6 +175,11 @@ Icons +