ActionEntryButton 컴포넌트 추가

This commit is contained in:
static
2025-01-26 23:18:52 +09:00
parent 32ecf46341
commit 0f2c5f8b33
7 changed files with 122 additions and 166 deletions

View 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>

View File

@@ -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";