Skip to content

Commit

Permalink
feat: link variant for button
Browse files Browse the repository at this point in the history
  • Loading branch information
paring-chan committed Jan 3, 2025

Verified

This commit was signed with the committer’s verified signature.
paring-chan 파링
1 parent 69f2189 commit 56deb10
Showing 21 changed files with 103 additions and 134 deletions.
58 changes: 0 additions & 58 deletions .github/workflows/preview.yml

This file was deleted.

14 changes: 4 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
@@ -22,20 +22,21 @@
"gen": "node scripts/generateGlobImports.mjs",
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json",
"storybook": "pnpm gen && storybook dev -p 6006",
"build-storybook": "pnpm gen && storybook build",
"build-storybook": "pnpm gen && storybook build --debug",
"build": "pnpm gen && svelte-package",
"prepack": "pnpm build && publint"
},
"devDependencies": {
"@chromatic-com/storybook": "^3.2.3",
"@fluent/bundle": "^0.18.0",
"@fontsource/ibm-plex-sans-kr": "^5.1.0",
"@laynezh/vite-plugin-lib-assets": "^0.5.24",
"@melt-ui/pp": "^0.3.2",
"@melt-ui/svelte": "^0.85.0",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
"@storybook/addon-svelte-csf": "5.0.0-next.3",
"@storybook/addon-svelte-csf": "5.0.0-next.21",
"@storybook/blocks": "^8.4.7",
"@storybook/svelte": "^8.4.7",
"@storybook/svelte-vite": "^8.4.7",
@@ -47,7 +48,6 @@
"glob": "^11.0.0",
"prettier-plugin-svelte": "^3.2.7",
"publint": "^0.2.12",
"sass-embedded": "^1.80.6",
"semantic-release": "^24.2.0",
"storybook": "^8.4.7",
"svelte": "5.1.9",
@@ -56,7 +56,6 @@
"typescript": "^5.6.3",
"vite": "^5.4.10",
"vite-plugin-dts": "^4.3.0",
"@fontsource/ibm-plex-sans-kr": "^5.1.0",
"vite-tsconfig-paths": "^5.0.1"
},
"peerDependencies": {
@@ -90,10 +89,5 @@
]
]
},
"packageManager": "[email protected]+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
"pnpm": {
"patchedDependencies": {
"@sveltejs/[email protected]": "patches/@[email protected]"
}
}
"packageManager": "[email protected]+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74"
}
13 changes: 0 additions & 13 deletions patches/@[email protected]

This file was deleted.

65 changes: 41 additions & 24 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 31 additions & 13 deletions src/lib/components/Button.svelte
Original file line number Diff line number Diff line change
@@ -3,33 +3,51 @@
import { useActions, type ActionArray } from 'svelte-component-actions'
import Icon from './Icon.svelte'
import { emptyMeltElement, melt, type AnyMeltElement } from '@melt-ui/svelte'
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements'
// @ts-expect-error invalid type
export let meltElement: AnyMeltElement = emptyMeltElement
type BaseProps =
| ({ link?: false } & HTMLAttributes<HTMLButtonElement>)
| ({ link: true } & HTMLAnchorAttributes)
export let use: ActionArray = []
type Props = BaseProps & {
meltElement?: AnyMeltElement
use?: ActionArray
variant?: ButtonStyle
size?: ButtonSize
export let variant: ButtonStyle = 'primary'
export let size: ButtonSize = 'lg'
leftIcon?: string
rightIcon?: string
iconOnly?: boolean
}
export let leftIcon: string | null = null
export let rightIcon: string | null = null
export let iconOnly: boolean = false
const {
// @ts-expect-error invalid type
meltElement = emptyMeltElement,
use = [],
variant = 'primary',
size = 'lg',
leftIcon,
rightIcon,
children,
iconOnly = false,
link,
...rest
}: Props = $props()
</script>

<button
<svelte:element
this={link ? 'a' : 'button'}
use:useActions={use}
use:melt={$meltElement}
class="button button-style-{variant} button-size-{size}"
class:icon-only={iconOnly}
on:click
{...$$restProps}
{...rest}
>
{#if leftIcon}
<Icon alt="icon" icon={leftIcon} size={24} />
{/if}
<slot />
{@render children?.()}
{#if rightIcon}
<Icon alt="icon" icon={rightIcon} size={24} />
{/if}
</button>
</svelte:element>
Loading

0 comments on commit 56deb10

Please sign in to comment.