kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-12 21:08:46 +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 EntryButton } from "./EntryButton.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]}>
<Icon />
</div>
<div class="flex flex-grow flex-col gap-y-1 truncate text-left">
<p class={["font-medium", props.textClass]}>
<div class="flex flex-grow flex-col overflow-x-hidden text-left">
<p class={["truncate font-medium", props.textClass]}>
{@render children?.()}
</p>
{#if subtext}
<p class="text-xs text-gray-800">
<p class="truncate text-xs text-gray-800">
{@render subtext()}
</p>
{/if}

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

@@ -2,11 +2,11 @@
import type { Component } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
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 { SelectedCategory } from "./service";
import IconCategory from "~icons/material-symbols/category";
interface Props {
info: Writable<CategoryInfo | null>;
menuIcon?: Component<SvelteHTMLElements["svg"]>;
@@ -14,58 +14,30 @@
onMenuClick?: (category: SelectedCategory) => void;
}
let { info, menuIcon: MenuIcon, onclick, onMenuClick }: Props = $props();
let { info, menuIcon, onclick, onMenuClick }: Props = $props();
const openCategory = () => {
const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onclick({ id, dataKey, dataKeyVersion, name });
}, 100);
onclick({ id, dataKey, dataKeyVersion, name });
};
const openMenu = (e: Event) => {
e.stopPropagation();
const openMenu = () => {
const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onMenuClick!({ id, dataKey, dataKeyVersion, name });
}, 100);
onMenuClick!({ id, dataKey, dataKeyVersion, name });
};
</script>
{#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div id="button" onclick={openCategory} class="h-12 rounded-xl">
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
<div class="flex-shrink-0 text-lg">
<IconCategory />
</div>
<p title={$info.name} class="flex-grow truncate font-medium">
{$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>
<ActionEntryButton
class="h-12"
onclick={openCategory}
actionButtonIcon={menuIcon}
onActionButtonClick={openMenu}
>
<CategoryLabel name={$info.name!} />
</ActionEntryButton>
{/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">
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 { SelectedFile } from "./service";
import IconDraft from "~icons/material-symbols/draft";
import IconClose from "~icons/material-symbols/close";
interface Props {
@@ -18,52 +19,24 @@
const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onclick({ id, dataKey, dataKeyVersion, name });
}, 100);
onclick({ id, dataKey, dataKeyVersion, name });
};
const removeFile = (e: Event) => {
e.stopPropagation();
const removeFile = () => {
const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onRemoveClick!({ id, dataKey, dataKeyVersion, name });
}, 100);
onRemoveClick!({ id, dataKey, dataKeyVersion, name });
};
</script>
{#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div id="button" onclick={openFile} class="h-12 rounded-xl">
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
<div class="flex-shrink-0 text-lg text-blue-400">
<IconDraft />
</div>
<p title={$info.name} class="flex-grow truncate font-medium">
{$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>
<ActionEntryButton
class="h-12"
onclick={openFile}
actionButtonIcon={onRemoveClick && IconClose}
onActionButtonClick={removeFile}
>
<DirectoryEntryLabel type="file" name={$info.name} />
</ActionEntryButton>
{/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">
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 { formatDateTime } from "$lib/modules/util";
import type { SelectedEntry } from "../service.svelte";
import IconDraft from "~icons/material-symbols/draft";
import IconMoreVert from "~icons/material-symbols/more-vert";
interface Props {
@@ -19,55 +20,28 @@
const { id, dataKey, dataKeyVersion, name } = $info!;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onclick({ type: "file", id, dataKey, dataKeyVersion, name });
}, 100);
onclick({ type: "file", id, dataKey, dataKeyVersion, name });
};
const openMenu = (e: Event) => {
e.stopPropagation();
const openMenu = () => {
const { id, dataKey, dataKeyVersion, name } = $info!;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
}, 100);
onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
};
</script>
{#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div id="button" onclick={openFile} class="h-14 rounded-xl">
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
<div class="flex-shrink-0 text-lg">
<IconDraft class="text-blue-400" />
</div>
<div class="flex-grow overflow-hidden">
<p title={$info.name} class="truncate font-medium">
{$info.name}
</p>
<p class="text-xs text-gray-800">
{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>
<ActionEntryButton
class="h-14"
onclick={openFile}
actionButtonIcon={IconMoreVert}
onActionButtonClick={openMenu}
>
<DirectoryEntryLabel
type="file"
name={$info.name}
subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
/>
</ActionEntryButton>
{/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">
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 { SelectedEntry } from "../service.svelte";
import IconFolder from "~icons/material-symbols/folder";
import IconMoreVert from "~icons/material-symbols/more-vert";
type SubDirectoryInfo = DirectoryInfo & { id: number };
@@ -20,50 +21,24 @@
const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
}, 100);
onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
};
const openMenu = (e: Event) => {
e.stopPropagation();
const openMenu = () => {
const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
}, 100);
onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
};
</script>
{#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div id="button" onclick={openDirectory} class="h-14 rounded-xl">
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
<div class="flex-shrink-0 text-lg">
<IconFolder />
</div>
<p title={$info.name} class="flex-grow truncate font-medium">
{$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>
<ActionEntryButton
class="h-14"
onclick={openDirectory}
actionButtonIcon={IconMoreVert}
onActionButtonClick={openMenu}
>
<DirectoryEntryLabel type="directory" name={$info.name!} />
</ActionEntryButton>
{/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>