kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-14 22:08:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

ActionEntryButton 컴포넌트 추가

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/components/atoms/buttons/ActionEntryButton.svelte Normal file
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>

1
src/lib/components/atoms/buttons/index.ts
View File

@@ -1,3 +1,4 @@
export { default as ActionEntryButton } from "./ActionEntryButton.svelte";
export { default as Button } from "./Button.svelte"; export { default as Button } from "./Button.svelte";
export { default as EntryButton } from "./EntryButton.svelte"; export { default as EntryButton } from "./EntryButton.svelte";
export { default as FloatingButton } from "./FloatingButton.svelte"; export { default as FloatingButton } from "./FloatingButton.svelte";

6
src/lib/components/molecules/labels/IconLabel.svelte
View File

@@ -18,12 +18,12 @@
<div class={["flex-shrink-0 text-lg", props.iconClass]}> <div class={["flex-shrink-0 text-lg", props.iconClass]}>
<Icon /> <Icon />
</div> </div>
<div class="flex flex-grow flex-col gap-y-1 truncate text-left"> <div class="flex flex-grow flex-col overflow-x-hidden text-left">
<p class={["font-medium", props.textClass]}> <p class={["truncate font-medium", props.textClass]}>
{@render children?.()} {@render children?.()}
</p> </p>
{#if subtext} {#if subtext}
<p class="text-xs text-gray-800"> <p class="truncate text-xs text-gray-800">
{@render subtext()} {@render subtext()}
</p> </p>
{/if} {/if}

56
src/lib/molecules/Categories/Category.svelte
View File

@@ -2,11 +2,11 @@
import type { Component } from "svelte"; import type { Component } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements"; import type { SvelteHTMLElements } from "svelte/elements";
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { ActionEntryButton } from "$lib/components/atoms";
import { CategoryLabel } from "$lib/components/molecules";
import type { CategoryInfo } from "$lib/modules/filesystem"; import type { CategoryInfo } from "$lib/modules/filesystem";
import type { SelectedCategory } from "./service"; import type { SelectedCategory } from "./service";
import IconCategory from "~icons/material-symbols/category";
interface Props { interface Props {
info: Writable<CategoryInfo | null>; info: Writable<CategoryInfo | null>;
menuIcon?: Component<SvelteHTMLElements["svg"]>; menuIcon?: Component<SvelteHTMLElements["svg"]>;
@@ -14,58 +14,30 @@
onMenuClick?: (category: SelectedCategory) => void; onMenuClick?: (category: SelectedCategory) => void;
} }
let { info, menuIcon: MenuIcon, onclick, onMenuClick }: Props = $props(); let { info, menuIcon, onclick, onMenuClick }: Props = $props();
const openCategory = () => { const openCategory = () => {
const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo; const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onclick({ id, dataKey, dataKeyVersion, name });
onclick({ id, dataKey, dataKeyVersion, name });
}, 100);
}; };
const openMenu = (e: Event) => { const openMenu = () => {
e.stopPropagation();
const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo; const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onMenuClick!({ id, dataKey, dataKeyVersion, name });
onMenuClick!({ id, dataKey, dataKeyVersion, name });
}, 100);
}; };
</script> </script>
{#if $info} {#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions --> <ActionEntryButton
<!-- svelte-ignore a11y_click_events_have_key_events --> class="h-12"
<div id="button" onclick={openCategory} class="h-12 rounded-xl"> onclick={openCategory}
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition"> actionButtonIcon={menuIcon}
<div class="flex-shrink-0 text-lg"> onActionButtonClick={openMenu}
<IconCategory /> >
</div> <CategoryLabel name={$info.name!} />
<p title={$info.name} class="flex-grow truncate font-medium"> </ActionEntryButton>
{$info.name}
</p>
{#if MenuIcon && onMenuClick}
<button
id="open-menu"
onclick={openMenu}
class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
>
<MenuIcon class="text-lg" />
</button>
{/if}
</div>
</div>
{/if} {/if}
<style>
#button:active:not(:has(#open-menu:active)) {
@apply bg-gray-100;
}
#button-content:active:not(:has(#open-menu:active)) {
@apply scale-95;
}
</style>

53
src/lib/organisms/Category/File.svelte
View File

@@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { ActionEntryButton } from "$lib/components/atoms";
import { DirectoryEntryLabel } from "$lib/components/molecules";
import type { FileInfo } from "$lib/modules/filesystem"; import type { FileInfo } from "$lib/modules/filesystem";
import type { SelectedFile } from "./service"; import type { SelectedFile } from "./service";
import IconDraft from "~icons/material-symbols/draft";
import IconClose from "~icons/material-symbols/close"; import IconClose from "~icons/material-symbols/close";
interface Props { interface Props {
@@ -18,52 +19,24 @@
const { id, dataKey, dataKeyVersion, name } = $info as FileInfo; const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onclick({ id, dataKey, dataKeyVersion, name });
onclick({ id, dataKey, dataKeyVersion, name });
}, 100);
}; };
const removeFile = (e: Event) => { const removeFile = () => {
e.stopPropagation();
const { id, dataKey, dataKeyVersion, name } = $info as FileInfo; const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onRemoveClick!({ id, dataKey, dataKeyVersion, name });
onRemoveClick!({ id, dataKey, dataKeyVersion, name });
}, 100);
}; };
</script> </script>
{#if $info} {#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions --> <ActionEntryButton
<!-- svelte-ignore a11y_click_events_have_key_events --> class="h-12"
<div id="button" onclick={openFile} class="h-12 rounded-xl"> onclick={openFile}
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition"> actionButtonIcon={onRemoveClick && IconClose}
<div class="flex-shrink-0 text-lg text-blue-400"> onActionButtonClick={removeFile}
<IconDraft /> >
</div> <DirectoryEntryLabel type="file" name={$info.name} />
<p title={$info.name} class="flex-grow truncate font-medium"> </ActionEntryButton>
{$info.name}
</p>
{#if onRemoveClick}
<button
id="remove-file"
onclick={removeFile}
class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
>
<IconClose class="text-lg" />
</button>
{/if}
</div>
</div>
{/if} {/if}
<style>
#button:active:not(:has(#remove-file:active)) {
@apply bg-gray-100;
}
#button-content:active:not(:has(#remove-file:active)) {
@apply scale-95;
}
</style>

60
src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
View File

@@ -1,10 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { ActionEntryButton } from "$lib/components/atoms";
import { DirectoryEntryLabel } from "$lib/components/molecules";
import type { FileInfo } from "$lib/modules/filesystem"; import type { FileInfo } from "$lib/modules/filesystem";
import { formatDateTime } from "$lib/modules/util"; import { formatDateTime } from "$lib/modules/util";
import type { SelectedEntry } from "../service.svelte"; import type { SelectedEntry } from "../service.svelte";
import IconDraft from "~icons/material-symbols/draft";
import IconMoreVert from "~icons/material-symbols/more-vert"; import IconMoreVert from "~icons/material-symbols/more-vert";
interface Props { interface Props {
@@ -19,55 +20,28 @@
const { id, dataKey, dataKeyVersion, name } = $info!; const { id, dataKey, dataKeyVersion, name } = $info!;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onclick({ type: "file", id, dataKey, dataKeyVersion, name });
onclick({ type: "file", id, dataKey, dataKeyVersion, name });
}, 100);
}; };
const openMenu = (e: Event) => { const openMenu = () => {
e.stopPropagation();
const { id, dataKey, dataKeyVersion, name } = $info!; const { id, dataKey, dataKeyVersion, name } = $info!;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
}, 100);
}; };
</script> </script>
{#if $info} {#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions --> <ActionEntryButton
<!-- svelte-ignore a11y_click_events_have_key_events --> class="h-14"
<div id="button" onclick={openFile} class="h-14 rounded-xl"> onclick={openFile}
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition"> actionButtonIcon={IconMoreVert}
<div class="flex-shrink-0 text-lg"> onActionButtonClick={openMenu}
<IconDraft class="text-blue-400" /> >
</div> <DirectoryEntryLabel
<div class="flex-grow overflow-hidden"> type="file"
<p title={$info.name} class="truncate font-medium"> name={$info.name}
{$info.name} subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
</p> />
<p class="text-xs text-gray-800"> </ActionEntryButton>
{formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
</p>
</div>
<button
id="open-menu"
onclick={openMenu}
class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
>
<IconMoreVert class="text-lg" />
</button>
</div>
</div>
{/if} {/if}
<style>
#button:active:not(:has(#open-menu:active)) {
@apply bg-gray-100;
}
#button-content:active:not(:has(#open-menu:active)) {
@apply scale-95;
}
</style>

51
src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
View File

@@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { ActionEntryButton } from "$lib/components/atoms";
import { DirectoryEntryLabel } from "$lib/components/molecules";
import type { DirectoryInfo } from "$lib/modules/filesystem"; import type { DirectoryInfo } from "$lib/modules/filesystem";
import type { SelectedEntry } from "../service.svelte"; import type { SelectedEntry } from "../service.svelte";
import IconFolder from "~icons/material-symbols/folder";
import IconMoreVert from "~icons/material-symbols/more-vert"; import IconMoreVert from "~icons/material-symbols/more-vert";
type SubDirectoryInfo = DirectoryInfo & { id: number }; type SubDirectoryInfo = DirectoryInfo & { id: number };
@@ -20,50 +21,24 @@
const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo; const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
}, 100);
}; };
const openMenu = (e: Event) => { const openMenu = () => {
e.stopPropagation();
const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo; const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => { onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
}, 100);
}; };
</script> </script>
{#if $info} {#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions --> <ActionEntryButton
<!-- svelte-ignore a11y_click_events_have_key_events --> class="h-14"
<div id="button" onclick={openDirectory} class="h-14 rounded-xl"> onclick={openDirectory}
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition"> actionButtonIcon={IconMoreVert}
<div class="flex-shrink-0 text-lg"> onActionButtonClick={openMenu}
<IconFolder /> >
</div> <DirectoryEntryLabel type="directory" name={$info.name!} />
<p title={$info.name} class="flex-grow truncate font-medium"> </ActionEntryButton>
{$info.name}
</p>
<button
id="open-menu"
onclick={openMenu}
class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
>
<IconMoreVert class="text-lg" />
</button>
</div>
</div>
{/if} {/if}
<style>
#button:active:not(:has(#open-menu:active)) {
@apply bg-gray-100;
}
#button-content:active:not(:has(#open-menu:active)) {
@apply scale-95;
}
</style>