|
|
@@ -0,0 +1,128 @@
|
|
|
+<!-- NumKeyboard Demo -->
|
|
|
+<script>
|
|
|
+ import { NumKeyboard, Cell, Toast } from 'stdf';
|
|
|
+ import { Confetti } from 'svelte-confetti';
|
|
|
+
|
|
|
+ let visible1 = false;
|
|
|
+ let visible2 = false;
|
|
|
+ let visible3 = false;
|
|
|
+ let visible4 = false;
|
|
|
+ let visible5 = false;
|
|
|
+ let visible6 = false;
|
|
|
+ let visible7 = false;
|
|
|
+ let visible8 = false;
|
|
|
+ let visible9 = false;
|
|
|
+ let visible10 = false;
|
|
|
+ let visible11 = false;
|
|
|
+ let visible12 = false;
|
|
|
+ let visible13 = false;
|
|
|
+ let visible14 = false;
|
|
|
+ let visible15 = false;
|
|
|
+ let visible16 = false;
|
|
|
+ let visible17 = false;
|
|
|
+ let visible18 = false;
|
|
|
+ let visible19 = false;
|
|
|
+
|
|
|
+ // Demonstrate listening for click events
|
|
|
+ let visibleToast = false;
|
|
|
+ let key = '';
|
|
|
+ const clickFunc = e => {
|
|
|
+ key = e.detail.key;
|
|
|
+ visibleToast = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ // Demonstrate listening for open and close events
|
|
|
+ let loveDom = null;
|
|
|
+ // The distance from loveDom to the bottom of the window
|
|
|
+ let loveDomBottom = 0;
|
|
|
+ let value = '0';
|
|
|
+ $: doneDisabled = value !== '5201314';
|
|
|
+ let top = 0;
|
|
|
+ const loveFunc = e => {
|
|
|
+ value = e.detail.numStr || '0';
|
|
|
+ };
|
|
|
+ const openFunc = e => {
|
|
|
+ // If the distance from loveDom to the bottom of the window is less than the height of the keyboard, move loveDom up to the height of the keyboard
|
|
|
+ loveDomBottom = window.innerHeight - loveDom.getBoundingClientRect().bottom;
|
|
|
+ if (loveDomBottom < e.detail.keyboardHeight) {
|
|
|
+ top = -(e.detail.keyboardHeight - loveDomBottom) - 50;
|
|
|
+ } else {
|
|
|
+ top = 0;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const closeFunc = () => {
|
|
|
+ top = 0;
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<Cell title="Basic" on:click={() => (visible1 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible1} />
|
|
|
+
|
|
|
+<Cell title="No show done" on:click={() => (visible2 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible2} done={false} />
|
|
|
+
|
|
|
+<Cell title="Show close" on:click={() => (visible3 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible3} close />
|
|
|
+
|
|
|
+<Cell title="Show close and not show done" subTitle="Must hidden dot" on:click={() => (visible9 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible9} close dot={false} done={false} />
|
|
|
+
|
|
|
+<Cell title="Digit up and down" on:click={() => (visible4 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible4} reverse />
|
|
|
+
|
|
|
+<Cell title="Increase key height" on:click={() => (visible5 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible5} height="16" />
|
|
|
+
|
|
|
+<Cell title="Increase spacing" on:click={() => (visible6 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible6} gap="4" p="4" />
|
|
|
+
|
|
|
+<Cell title="The decimal point is not displayed" on:click={() => (visible7 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible7} dot={false} />
|
|
|
+
|
|
|
+<Cell title="Unnecessary all are not displayed" on:click={() => (visible8 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible8} done={false} dot={false} />
|
|
|
+
|
|
|
+<Cell title="Block type" on:click={() => (visible10 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible10} type="block" height="14" p="0" />
|
|
|
+
|
|
|
+<Cell title="Customize the doneText" on:click={() => (visible18 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible18} doneText="Transfer" />
|
|
|
+
|
|
|
+<Cell title="Listen click event" on:click={() => (visible11 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible11} on:click={clickFunc} />
|
|
|
+<Toast bind:visible={visibleToast} duration={500} message={`clicked ${key}`}></Toast>
|
|
|
+
|
|
|
+<div
|
|
|
+ class="relative text-center text-xl mx-16 rounded-full py-3 bg-primary text-white dark:bg-dark dark:text-black backdrop-blur transition-all"
|
|
|
+ style="top:{top}px"
|
|
|
+ bind:this={loveDom}
|
|
|
+>
|
|
|
+ {value}
|
|
|
+ {#if !doneDisabled}
|
|
|
+ <span class="absolute left-1/2"><Confetti rounded amount="100" /></span>
|
|
|
+ {/if}
|
|
|
+</div>
|
|
|
+<Cell title="Please enter 5201314" on:click={() => (visible12 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible12} bind:doneDisabled on:click={loveFunc} on:open={openFunc} on:close={closeFunc} />
|
|
|
+
|
|
|
+<Cell title="Increase key corners" on:click={() => (visible13 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible13} radius="2xl" />
|
|
|
+
|
|
|
+<Cell title="Done key injection Class" on:click={() => (visible14 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible14} doneClass="!bg-gradient-to-r from-[#9820a8] to-[#d16b98]" />
|
|
|
+
|
|
|
+<Cell title="Panel and key injection Class" on:click={() => (visible15 = true)} />
|
|
|
+<NumKeyboard
|
|
|
+ bind:visible={visible15}
|
|
|
+ panelClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]"
|
|
|
+ keyClass="!bg-transparent border border-white/40 !text-white"
|
|
|
+/>
|
|
|
+
|
|
|
+<Cell title="Custom transition animations" subTitle="By popup" on:click={() => (visible16 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible16} popup={{ duration: 1000, easeType: 'bounceOut' }} />
|
|
|
+
|
|
|
+<Cell title="Opaque background when open" subTitle="By mask in popup" on:click={() => (visible17 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible17} popup={{ mask: 0.4 }} />
|
|
|
+
|
|
|
+<Cell title="Customize key fonts" subTitle="Needs imported and config in tailwind.config.js" on:click={() => (visible19 = true)} />
|
|
|
+<NumKeyboard bind:visible={visible19} keyClass="font-Trueno" />
|
dufu1991
