pantheon/hestia
2
0
Fork 0
Code Issues 23 Pull requests Projects Releases Packages Wiki Activity Actions

Build out components #45

Merged
BenjaminPalko merged 14 commits from build-out-components into master 2025-01-04 22:14:19 -05:00
Conversation 0 Commits 14 Files changed 28 +10 -17
1 changed files with 10 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d92bbcb5c1 - Show all commits

27
src/lib/components/Actions/Button.svelte
View file

@ -1,38 +1,33 @@
<script lang="ts">
import type { DaisyColor, DaisySize } from '$lib/types';
piopi commented 2025-01-04 21:28:47 -05:00 (Migrated from github.com)
Review
Copy link

Any reason or standard you had to change the onClick to onclick?

Any reason or standard you had to change the onClick to onclick?
BenjaminPalko commented 2025-01-04 21:34:02 -05:00 (Migrated from github.com)
Review
Copy link

Yeah, onclick is the default prop name on elements in svelte, its not the same as with React where it follows JS camel case styling.

Yeah, onclick is the default prop name on elements in svelte, its not the same as with React where it follows JS camel case styling.
piopi commented 2025-01-04 21:34:54 -05:00 (Migrated from github.com)
Review
Copy link

kk thanks, good to know

kk thanks, good to know
BenjaminPalko commented 2025-01-04 21:35:02 -05:00 (Migrated from github.com)
Review
Copy link

actually, I think I'm gonig to redo the typing here, there is redundancy

actually, I think I'm gonig to redo the typing here, there is redundancy
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import type { SvelteHTMLElements } from 'svelte/elements';
import { twMerge } from 'tailwind-merge';
interface Props extends HTMLButtonAttributes {
type Props = {
active?: boolean;
animation?: boolean;
block?: boolean;
children: Snippet;
color?: DaisyColor;
disabled?: boolean;
full?: boolean;
glass?: boolean;
onclick?: () => void;
shape?: 'circle' | 'square';
size?: DaisySize;
type?: HTMLButtonAttributes['type'];
variant?: 'link' | 'outline';
wide?: boolean;
}
} & SvelteHTMLElements['button'];
let {
active = false,
animation = true,
block = false,
children,
class: className,
color,
disabled = false,
disabled,
full = false,
glass = false,
onclick: onClick,
shape,
size,
type = 'button',
wide = false,
variant,
...props
@ -40,8 +35,9 @@
</script>
<button
onclick={onClick}
class="btn"
{...props}
{disabled}
class={twMerge('btn', className)}
class:btn-active={active}
class:no-animation={!animation}
class:btn-block={block}
@ -65,11 +61,8 @@
class:btn-link={variant === 'link'}
class:btn-outline={variant === 'outline'}
class:btn-wide={wide}
{disabled}
{type}
{...props}
>
{@render children()}
{@render children?.()}
</button>
<style></style>