@axium/storage 0.3.17 → 0.4.1

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 _Sidebar {
-    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/dist/server.js

@@ -62,7 +62,8 @@ export async function currentUsage(userId) {
         .select(eb => eb.fn.countAll().as('items'))
         .select(eb => eb.fn.sum('size').as('bytes'))
         .executeTakeFirstOrThrow();
-    result.bytes ||= 0;
+    result.bytes = Number(result.bytes || 0);
+    result.items = Number(result.items);
     return result;
 }
 export async function get(itemId) {

package/lib/StorageList.svelte

@@ -5,9 +5,8 @@
 	import { deleteItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 
-	const { id }: { id: string } = $props();
+	let { id, items = $bindable([]) }: { id: string; items?: StorageItemMetadata[] } = $props();
 
-	let items = $state<StorageItemMetadata[]>([]);
 	let activeIndex = $state<number>(-1);
 	let activeItem = $derived(items[activeIndex]);
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
@@ -36,7 +35,7 @@
 {/snippet}
 
 <div class="StorageList">
-	{#await getDirectoryMetadata(id).then(data => (items = data)) then}
+	{#await items.length || getDirectoryMetadata(id).then(data => (items = data)) then}
 		<div class="StorageListItem header">
 			<span></span>
 			<span>Name</span>
@@ -45,7 +44,7 @@
 		</div>
 		{#each items as item, i (item.id)}
 			<div class="StorageListItem">
-				<Icon i={iconForMime(item.type)} />
+				<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
 				<span class="name">{item.name}</span>
 				<span>{item.modifiedAt.toLocaleString()}</span>
 				<span>{formatBytes(item.size)}</span>

package/lib/StorageSidebar.svelte

@@ -1,38 +1,26 @@
 <script lang="ts">
-	import { getDirectoryMetadata, type _Sidebar } 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';
 
-	const { root }: { root: string | StorageItemMetadata[] } = $props();
+	let { root }: { root: string | StorageItemMetadata[] } = $props();
 
 	let items = $state<StorageItemMetadata[]>([]);
 
-	const allItems: StorageItemMetadata[] = [];
-
-	const sidebar = $state<_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('files:sidebar', () => sidebar);
-
-	if (typeof root == 'string') allItems.push(...items);
+	if (typeof root != 'string') {
+		sb_items.push(...root);
+		items = root;
+	}
 </script>
 
-<div id="FilesSidebar">
-	{#await typeof root == 'string' ? sidebar.getDirectory(root, items) : root}
+<div id="StorageSidebar">
+	{#await typeof root == 'string' ? getDirectory(root, items) : root}
 		<i>Loading...</i>
 	{:then}
 		{#each items as _, i (_.id)}
 			<StorageSidebarItem bind:item={items[i]} bind:items />
+		{:else}
+			<i>No files yet</i>
 		{/each}
 	{:catch error}
 		<i style:color="#c44">{error.message}</i>

package/lib/StorageSidebarItem.svelte

@@ -1,24 +1,20 @@
 <script lang="ts">
 	import * as icon from '@axium/core/icons';
 	import { ClipboardCopy, FormDialog, Icon } from '@axium/server/components';
-	import { deleteItem, updateItemMetadata, type _Sidebar } from '@axium/storage/client';
+	import { deleteItem, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
-	import { getContext } from 'svelte';
 	import StorageSidebarItem from './StorageSidebarItem.svelte';
+	import { debug, getDirectory, selection, toggle, toggleRange } from '@axium/storage/sidebar';
 
 	let {
 		item = $bindable(),
 		items = $bindable(),
-		debug = false,
 	}: {
 		item: StorageItemMetadata;
 		/** The items list for the parent directory */
 		items: StorageItemMetadata[];
-		debug?: boolean;
 	} = $props();
 
-	const sb = getContext<() => _Sidebar>('files:sidebar')();
-
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 	let popover = $state<HTMLDivElement>();
 
@@ -29,11 +25,11 @@
 	}
 
 	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();
+			selection.add(item.id);
 		}
 	}
 
@@ -63,12 +59,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}>
 			<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 +76,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}>
 		<Icon i={icon.forMime(item.type)} />
 		<span class="name">{item.name}</span>
 	</div>

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 getLastedSelected() {
+	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.3.17",
+	"version": "0.4.1",
 	"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);
-    }
-}