@axium/storage 0.4.0 → 0.4.2

package/dist/client.d.ts

@@ -1,5 +1,4 @@
 import type { StorageItemMetadata, StorageItemUpdate, UserFilesInfo } from './common.js';
-import type { ItemSelection } from './selection.js';
 export declare function parseItem(result: StorageItemMetadata): StorageItemMetadata;
 export interface UploadOptions {
     parentId?: string;
@@ -13,8 +12,3 @@ export declare function downloadItem(fileId: string): Promise<Blob>;
 export declare function updateItemMetadata(fileId: string, metadata: StorageItemUpdate): Promise<StorageItemMetadata>;
 export declare function deleteItem(fileId: string): Promise<StorageItemMetadata>;
 export declare function getUserFiles(userId: string): Promise<UserFilesInfo>;
-export interface SidebarContext {
-    selection: ItemSelection<string, StorageItemMetadata>;
-    items: StorageItemMetadata[];
-    getDirectory(id: string, assignTo?: StorageItemMetadata[]): Promise<StorageItemMetadata[]>;
-}

package/dist/plugin.d.ts

@@ -37,8 +37,9 @@ declare const _default: {
     exports: {
         ".": string;
         "./*": string;
-        "./lib": string;
-        "./lib/*": string;
+        "./sidebar": string;
+        "./components": string;
+        "./components/*": string;
     };
     files: string[];
     scripts: {

package/lib/StorageSidebar.svelte

@@ -1,37 +1,20 @@
 <script lang="ts">
-	import { getDirectoryMetadata, type SidebarContext } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
-	import { ItemSelection } from '@axium/storage/selection';
-	import { setContext } from 'svelte';
 	import StorageSidebarItem from './StorageSidebarItem.svelte';
+	import { items as sb_items, getDirectory } from '@axium/storage/sidebar';
 
-	let { root, sidebar = $bindable() }: { root: string | StorageItemMetadata[]; sidebar?: SidebarContext } = $props();
+	let { root }: { root: string | StorageItemMetadata[] } = $props();
 
 	let items = $state<StorageItemMetadata[]>([]);
 
-	const allItems: StorageItemMetadata[] = [];
-
-	sidebar = {
-		selection: new ItemSelection(allItems),
-		items: allItems,
-		async getDirectory(id: string, assignTo?: StorageItemMetadata[]) {
-			const data = await getDirectoryMetadata(id);
-			this.items.push(...data);
-			assignTo = data;
-			return data;
-		},
-	};
-
-	setContext('storage:sidebar', () => sidebar);
-
 	if (typeof root != 'string') {
-		allItems.push(...root);
+		sb_items.push(...root);
 		items = root;
 	}
 </script>
 
 <div id="StorageSidebar">
-	{#await typeof root == 'string' ? sidebar.getDirectory(root, items) : root}
+	{#await typeof root == 'string' ? getDirectory(root, items) : root}
 		<i>Loading...</i>
 	{:then}
 		{#each items as _, i (_.id)}

package/lib/StorageSidebarItem.svelte

@@ -1,42 +1,53 @@
 <script lang="ts">
 	import * as icon from '@axium/core/icons';
 	import { ClipboardCopy, FormDialog, Icon } from '@axium/server/components';
-	import { deleteItem, updateItemMetadata, type SidebarContext } from '@axium/storage/client';
+	import { deleteItem, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
-	import { getContext } from 'svelte';
+	import { debug, getDirectory, selection, toggle, toggleRange } from '@axium/storage/sidebar';
 	import StorageSidebarItem from './StorageSidebarItem.svelte';
 
 	let {
 		item = $bindable(),
 		items = $bindable(),
-		debug = false,
 	}: {
 		item: StorageItemMetadata;
 		/** The items list for the parent directory */
 		items: StorageItemMetadata[];
-		debug?: boolean;
 	} = $props();
 
-	const sb = getContext<() => SidebarContext>('storage:sidebar')();
-
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 	let popover = $state<HTMLDivElement>();
 
 	function oncontextmenu(e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();
-		popover?.togglePopover();
+		popover!.togglePopover();
+		_forcePopover = true;
 	}
 
 	function onclick(e: MouseEvent) {
-		if (e.shiftKey) sb.selection.toggleRange(item.id);
-		else if (e.ctrlKey) sb.selection.toggle(item.id);
+		if (e.shiftKey) toggleRange(item.id);
+		else if (e.ctrlKey) toggle(item.id);
 		else {
-			sb.selection.clear();
-			sb.selection.add(item.id);
+			selection.clear();
+			toggle(item.id);
 		}
 	}
 
+	let _forcePopover = false;
+
+	/**
+	 * Workaround for https://github.com/whatwg/html/issues/10905
+	 * @todo Remove when the problem is fixed.
+	 */
+	function onpointerup(e: PointerEvent) {
+		if (!_forcePopover) return;
+		e.stopPropagation();
+		e.preventDefault();
+		popover!.togglePopover();
+		_forcePopover = false;
+	}
+
 	let children = $state<StorageItemMetadata[]>([]);
 </script>
 
@@ -47,6 +58,7 @@
 			e.preventDefault();
 			dialogs[name].showModal();
 		}}
+		class="action"
 	>
 		<Icon {i} --size="14px" />
 		{text}
@@ -63,12 +75,12 @@
 
 {#if item.type == 'inode/directory'}
 	<details>
-		<summary class={['StorageSidebarItem', sb.selection.has(item.id) && 'selected']} {onclick} {oncontextmenu}>
+		<summary class={['StorageSidebarItem', selection.has(item.id) && 'selected']} {onclick} {oncontextmenu} {onpointerup}>
 			<Icon i={icon.forMime(item.type)} />
 			<span class="name">{item.name}</span>
 		</summary>
 		<div>
-			{#await sb.getDirectory(item.id, children)}
+			{#await getDirectory(item.id, children)}
 				<i>Loading...</i>
 			{:then}
 				{#each children as _, i (_.id)}
@@ -80,7 +92,7 @@
 		</div>
 	</details>
 {:else}
-	<div class={['StorageSidebarItem', sb.selection.has(item.id) && 'selected']} {onclick} {oncontextmenu}>
+	<div class={['StorageSidebarItem', selection.has(item.id) && 'selected']} {onclick} {oncontextmenu} {onpointerup}>
 		<Icon i={icon.forMime(item.type)} />
 		<span class="name">{item.name}</span>
 	</div>
@@ -167,4 +179,10 @@
 	details > div {
 		padding-left: 0.5em;
 	}
+
+	div.action:hover {
+		cursor: pointer;
+		background-color: #223;
+		border-radius: 0.25em;
+	}
 </style>

package/lib/sidebar.svelte.ts

@@ -0,0 +1,42 @@
+import type { StorageItemMetadata } from '@axium/storage/common';
+import { getDirectoryMetadata } from '@axium/storage/client';
+import { SvelteSet } from 'svelte/reactivity';
+
+export const selection = $state(new SvelteSet());
+
+export const items = $state<StorageItemMetadata[]>([]);
+
+let lastSelected = $state<string>();
+
+export function getLastSelected() {
+	return lastSelected;
+}
+
+/** @todo move this into user preferences somehow */
+export let debug = false;
+
+export async function getDirectory(id: string, assignTo?: StorageItemMetadata[]) {
+	const data = await getDirectoryMetadata(id);
+	items.push(...data);
+	assignTo = data;
+	return data;
+}
+
+export function toggle(id: string): boolean {
+	const has = selection.has(id);
+	if (has) selection.delete(id);
+	else {
+		selection.add(id);
+		lastSelected = id;
+	}
+	return has;
+}
+
+export function toggleRange(id: string) {
+	const from = items.findIndex(item => item.id === lastSelected);
+	const until = items.findIndex(item => item.id === id);
+	if (from === -1 || until === -1) return;
+
+	const range = items.slice(Math.min(from, until), Math.max(from, until) + 1);
+	for (const item of range) toggle(item.id);
+}

package/lib/tsconfig.json

@@ -2,9 +2,12 @@
 	"extends": "../tsconfig.json",
 	"compilerOptions": {
 		"rootDir": "..",
-		"noEmit": true
+		"noEmit": true,
+		"module": "preserve",
+		"moduleResolution": "Bundler",
+		"allowImportingTsExtensions": true
 	},
-	"include": ["**/*.svelte"],
+	"include": ["**/*.svelte", "**/*.ts"],
 	"exclude": [],
 	"references": [{ "path": ".." }]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.4.0",
+	"version": "0.4.2",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -22,8 +22,9 @@
 	"exports": {
 		".": "./dist/index.js",
 		"./*": "./dist/*.js",
-		"./lib": "./lib/index.js",
-		"./lib/*": "./lib/*.js"
+		"./sidebar": "./lib/sidebar.svelte.js",
+		"./components": "./lib/index.js",
+		"./components/*": "./lib/*.svelte"
 	},
 	"files": [
 		"dist",

package/dist/selection.d.ts

@@ -1,17 +0,0 @@
-import { SvelteSet } from 'svelte/reactivity';
-export declare class ItemSelection<T, V extends {
-    id: T;
-}> extends SvelteSet<T> {
-    /**
-     * The list of items that can be selected.
-     */
-    items: V[];
-    constructor(
-    /**
-     * The list of items that can be selected.
-     */
-    items: V[]);
-    last?: T;
-    toggle(id: T): boolean;
-    toggleRange(id: T): void;
-}

package/dist/selection.js

@@ -1,32 +0,0 @@
-import { SvelteSet } from 'svelte/reactivity';
-export class ItemSelection extends SvelteSet {
-    items;
-    constructor(
-    /**
-     * The list of items that can be selected.
-     */
-    items) {
-        super([]);
-        this.items = items;
-    }
-    last;
-    toggle(id) {
-        const has = this.has(id);
-        if (has)
-            this.delete(id);
-        else {
-            this.add(id);
-            this.last = id;
-        }
-        return has;
-    }
-    toggleRange(id) {
-        const from = this.items.findIndex(item => item.id === this.last);
-        const until = this.items.findIndex(item => item.id === id);
-        if (from === -1 || until === -1)
-            return;
-        const range = this.items.slice(Math.min(from, until), Math.max(from, until) + 1);
-        for (const item of range)
-            this.toggle(item.id);
-    }
-}