mirror of
https://github.com/kmc7468/arkvault.git
synced 2025-12-18 07:58:57 +00:00
ActionEntryButton 컴포넌트 추가
This commit is contained in:
61
src/lib/components/atoms/buttons/ActionEntryButton.svelte
Normal file
61
src/lib/components/atoms/buttons/ActionEntryButton.svelte
Normal file
@@ -0,0 +1,61 @@
|
||||
<script lang="ts">
|
||||
import type { Component, Snippet } from "svelte";
|
||||
import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
|
||||
|
||||
interface Props {
|
||||
actionButtonClass?: ClassValue;
|
||||
actionButtonIcon?: Component<SvelteHTMLElements["svg"]>;
|
||||
children?: Snippet;
|
||||
class?: ClassValue;
|
||||
onActionButtonClick?: () => void;
|
||||
onclick?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
actionButtonIcon: ActionButtonIcon,
|
||||
children,
|
||||
onActionButtonClick,
|
||||
onclick,
|
||||
...props
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div
|
||||
id="container"
|
||||
onclick={onclick && (() => setTimeout(onclick, 100))}
|
||||
class={["rounded-xl", props.class]}
|
||||
>
|
||||
<div id="children" class="flex h-full items-center justify-between gap-x-4 p-2 transition">
|
||||
<div class="flex-grow overflow-x-hidden">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{#if ActionButtonIcon}
|
||||
<button
|
||||
id="action-button"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (onActionButtonClick) {
|
||||
setTimeout(onActionButtonClick, 100);
|
||||
}
|
||||
}}
|
||||
class={[
|
||||
"flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100",
|
||||
props.actionButtonClass,
|
||||
]}
|
||||
>
|
||||
<ActionButtonIcon />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#container:active:not(:has(#action-button:active)) {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
#children:active:not(:has(#action-button:active)) {
|
||||
@apply scale-95;
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +1,4 @@
|
||||
export { default as ActionEntryButton } from "./ActionEntryButton.svelte";
|
||||
export { default as Button } from "./Button.svelte";
|
||||
export { default as EntryButton } from "./EntryButton.svelte";
|
||||
export { default as FloatingButton } from "./FloatingButton.svelte";
|
||||
|
||||
Reference in New Issue
Block a user