root/fumas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
relaxed 2024-09-03 17:42:15 +05:00
parent 1d172d17ba
commit 93df24ff73
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/ui/Button.svelte
View File

@ -14,7 +14,7 @@
}; };
</script> </script>
<div class="w-auto m-2 {class_div}"> <div class={class_div !== "" ? class_div : "w-auto m-2"}>
<button <button
on:click={async () => { on:click={async () => {
is_hover = false; is_hover = false;
@ -34,14 +34,18 @@
on:blur={() => { on:blur={() => {
is_hover = false; is_hover = false;
}} }}
class="w-full py-1 px-2 class="
{class_name !== ''
? class_name
: `
w-full py-1 px-2
flex justify-center items-center flex justify-center items-center
text-[var(--w-text)] dark:text-[var(--b-text)] text-xl text-[var(--w-text)] dark:text-[var(--b-text)] text-xl
{is_border ? 'border-2' : 'border-0'} ${is_border ? 'border-2' : 'border-0'}
border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl
text-[var(--w-text)] dark:text-[var(--b-text)] text-[var(--w-text)] dark:text-[var(--b-text)]`}
{is_hover ? 'opacity-80' : 'opacity-100'} ${is_hover ? 'opacity-80' : 'opacity-100'}
{colors[color]} {class_name} {colors[color]}
transition-all duration-100" transition-all duration-100"
> >
<slot></slot> <slot></slot>

9
src/ui/form/Input.svelte
View File

@ -9,7 +9,7 @@ ${is_border ? "border-2" : "border-0"}
text-[var(--w-text)] dark:text-[var(--b-text)] text-[var(--w-text)] dark:text-[var(--b-text)]
border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl`; border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl`;
/** @type {'text' | 'password'}*/ /** @type {'text' | 'password' | 'number'}*/
export let type = "text"; export let type = "text";
</script> </script>
@ -20,6 +20,13 @@ border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl`;
{placeholder} {placeholder}
class="{d_class} {class_name}" class="{d_class} {class_name}"
/> />
{:else if type === "number"}
<input
type="number"
bind:value
{placeholder}
class="{d_class} {class_name}"
/>
{:else} {:else}
<input <input
type="text" type="text"

15
src/ui/form/TextArea.svelte
View File

@ -5,13 +5,14 @@
export let is_border = true; export let is_border = true;
export let is_resize = true; export let is_resize = true;
export let class_name = ""; export let class_name = "";
export let min_h = "40px";
let tx; let tx;
function resize() { function resize() {
setTimeout(() => { setTimeout(() => {
tx.style.height = tx.scrollHeight + "px"; tx.style.height = tx.scrollHeight + "px";
const sh = Number(tx.scrollHeight); const sh = Number(tx.scrollHeight);
if (sh <= 60 || value === "") { if (sh <= 60 || value === "") {
tx.style.height = "40px"; tx.style.height = min_h;
} else { } else {
tx.style.height = "auto"; tx.style.height = "auto";
tx.style.height = tx.scrollHeight + "px"; tx.style.height = tx.scrollHeight + "px";
@ -31,14 +32,16 @@
bind:value bind:value
bind:this={tx} bind:this={tx}
{placeholder} {placeholder}
class="p-2 m-2 h-auto min-h-0 class="
{class_name !== ''
? class_name
: `p-2 m-2 h-auto min-h-0
overflow-y-hidden overflow-y-hidden
focus-visible:outline-none focus-visible:outline-none
bg-[var(--w-bg)] dark:bg-[var(--b-bg)] bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
{is_border ? 'border-2' : 'border-0'} ${is_border ? 'border-2' : 'border-0'}
text-[var(--w-text)] dark:text-[var(--b-text)] text-[var(--w-text)] dark:text-[var(--b-text)]
border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl
{is_resize ? '' : 'resize-none'} ${is_resize ? '' : 'resize-none'}
transition-all transition-all`}"
{class_name}"
></textarea> ></textarea>