@sierra-95/svelte-scaffold 1.1.4 → 1.2.0

package/dist/Modules/FilePicker/Cloud/cloudStore.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { fileInputStore, User, buttonRipple, isMobile, isTablet, addToast } from '../../../index.js';
-    import Previews from './previews.svelte';
-    import Storage from '../ActionsMenu/media_storage.svelte';
+    import { fileInputStore, MenuItem, isDesktop } from '../../../index.js';
+    import Content from './content.svelte';
+    import Storage from './storage.svelte';
 
-    export let processing: boolean;
-    const tabs: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'| 'Others'; icon: string }[] = [
-        { name: 'Documents', icon: 'fa fa-file-o' },
+    const menuItem: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'| 'Others'; icon: string }[] = [
+        { name: 'Documents', icon: 'fa fa-file-alt' },
         { name: 'Music', icon: 'fa fa-music' },
         { name: 'Pictures', icon: 'fa fa-file-image-o' },
         { name: 'Videos', icon: 'fa fa-film' },
@@ -14,120 +12,60 @@
     ];
 
     $: if ($fileInputStore.disabledMenuItem?.includes($fileInputStore.activeMenu)) {
-		const firstAvailable = tabs.find(tab => !$fileInputStore.disabledMenuItem?.includes(tab.name));
+		const firstAvailable = menuItem.find(item => !$fileInputStore.disabledMenuItem?.includes(item.name));
 		if (firstAvailable) $fileInputStore.activeMenu = firstAvailable.name;
 	}
-
-    type MediaItem = {
-        id: string;
-    };
-
-    type MediaResponse = {
-        Audio: MediaItem[];
-        Documents: MediaItem[];
-        Images: MediaItem[];
-        Videos: MediaItem[];
-        Others: MediaItem[];
-    };
-
-    let media: MediaResponse | null = null;
-    let childFunctionRef : Storage;
-
-    async function loadMedia(){
-        if (!$User.userId || !$fileInputStore.serverGetUrl) return;
-        try {
-            processing = true;
-            const params = new URLSearchParams({
-                userId: $User.userId
-            });
-
-            const res = await fetch(`${$fileInputStore.serverGetUrl}?${params.toString()}`);
-
-            const data = await res.json();
-
-            if (!res.ok) {
-                //console.log('Error fetching media:', data);
-                addToast({
-                    status: 'error',
-                    message: data || "Failed to fetch media."
-                });
-                return;
-            }
-            media = data;
-        } catch (e) {
-            console.error("catch error:", e);
-            addToast({
-                status: 'error',
-                message: "An error occurred while fetching media."
-            });
-        } finally {
-            processing = false;
-        }
-    }
-
-    onMount(async () => {
-        await loadMedia();
-    });
-
-    $: if ($fileInputStore.requestReload && childFunctionRef){
-        fileInputStore.update(store => ({ 
-            ...store,
-            requestReload: false
-        }));
-        loadMedia();
-        childFunctionRef.loadMediaStorage();
-    };
-
 </script>
-
 <style>
-    #sierra-cloud-store nav{
-        flex-direction: column;
+    #sierra-cloud-store{
+        position: relative;
+        display: flex;
+        height: 400px;
     }
-    #sierra-cloud-store .icon-active {
-        border-radius: 3px;
-        background-color: var(--menu-item-active);
-    }
-    #sierra-cloud-store i{
-        color: var(--icon-theme);
+    #sierra-cloud-store nav{
+        padding-top: 1rem;
     }
-    #sierra-cloud-store .icon-active i{
-        color: var(--primary-bg);
+    #sierra-cloud-store main{
+        overflow-y: auto;
+        padding: 1rem;
     }
-    @media (max-width: 768px) {
-        #sierra-cloud-store {
+    @media (max-width: 1024px) {
+        #sierra-cloud-store{
             flex-direction: column-reverse;
         }
         #sierra-cloud-store nav{
-            flex-direction: row;
-        }
-        #sierra-cloud-store nav button {
+            display: flex;
             justify-content: center;
+            padding: 0.5rem 0rem;
+        }
+        #sierra-cloud-store main{
+            flex: 1;
         }
     }
 </style>
-<main id="sierra-cloud-store" style="display: flex; gap: 1rem; height: 100%; min-height: 300px;">
-    <nav style="display: flex; gap: {$isMobile ? '1rem' : '0.5rem'}; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
-        {#each tabs as tab}
-            <button 
-                use:buttonRipple
-                on:click={() => 
+<main id="sierra-cloud-store">
+    <nav>
+        {#each menuItem as item}
+            <MenuItem 
+                onclick={() => 
                     fileInputStore.update(store =>({
                         ...store,
-                        activeMenu: tab.name
+                        activeMenu: item.name
                     }))
-                } 
-                style="
-                    width:100%; padding:{$isMobile? '0.5rem':' 0.1rem 0.5rem'};
-                    {$fileInputStore.disabledMenuItem?.includes(tab.name) ? 'display: none;' : 'display: flex; align-items: center; gap: 0.5rem;'}
-                "
-                class={`sierra-text-ellipsis ${$fileInputStore.activeMenu === tab.name ? 'icon-active' : ''}`}
-            >
-                <i class={tab.icon} style="font-size: {$isMobile ? '15px' : '10px'}; "></i>
-                {$isMobile ? '' : tab.name}
-            </button>
+                }
+                rounded={!$isDesktop ? '8px' : '0px'}
+                title={item.name}
+                hidden={$fileInputStore.disabledMenuItem?.includes(item.name)}
+                active={$fileInputStore.activeMenu === item.name} 
+                icon={item.icon} 
+                iconSize='15px' 
+                iconBg={ $fileInputStore.activeMenu === item.name ? 'var(--primary-bg)' : 'var(--text-secondary)'}
+                iconGap="10px">{!$isDesktop ? '' : item.name}
+            </MenuItem>
         {/each}
-        <Storage hidden={$isMobile || $isTablet} bind:this={childFunctionRef}/>
+        <Storage/>
     </nav>
-    <Previews {media} />
+    <main>
+        <Content/>
+    </main>
 </main>

package/dist/Modules/FilePicker/Cloud/cloudStore.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,9 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CloudStore: $$__sveltets_2_IsomorphicComponent<{
-    processing: boolean;
-}, {
+declare const CloudStore: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type CloudStore = InstanceType<typeof CloudStore>;

package/dist/Modules/FilePicker/Cloud/content.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { fileInputStore, addToast, PreviewImage, PreviewVideo, PreviewAudio, PreviewDocument, PreviewGenericFile } from "../../../index.js";
+    import type {FileInputStoreMediaItem} from '../../../index.js';
+
+    let itemCount = $state(0);
+    let totalSizeMB = $state(0);
+    let currentCategory = $state('');
+    let lastSelectedCategory = $state('');
+    const categoryMap = {
+        Documents: "document",
+        Music: "audio",
+        Pictures: "image",
+        Videos: "video",
+        Others: "other"
+    };
+    const media = $state<{
+        Images: any[];
+        Videos: any[];
+        Audio: any[];
+        Documents: any[];
+        Others: any[];
+    }>({
+        Images: [],
+        Videos: [],
+        Audio: [],
+        Documents: [],
+        Others: []
+    });
+    async function loadMedia(category: string) {
+        if (!$fileInputStore.serverGetUrl) return;
+        try {
+            $fileInputStore.processing = true;
+            const res = await fetch(`${$fileInputStore.serverGetUrl}?category=${category}`);
+            const data = await res.json();
+
+            if (!res.ok) {
+                addToast({
+                    status: 'error',
+                    message: data || "Failed to fetch media."
+                });
+                return;
+            }
+            media.Images = [];
+            media.Videos = [];
+            media.Audio = [];
+            media.Documents = [];
+            media.Others = [];
+            //console.log('Fetched media:', data);
+            for (const item of data) {
+                switch (item.category) {
+                    case "image":
+                        media.Images.push(item);
+                        break;
+                    case "video":
+                        media.Videos.push(item);
+                        break;
+                    case "audio":
+                        media.Audio.push(item);
+                        break;
+                    case "document":
+                        media.Documents.push(item);
+                        break;
+                    default:
+                        media.Others.push(item);
+                }
+            }
+        } catch (e) {
+            console.error("catch error:", e);
+            addToast({
+                status: 'error',
+                message: "An error occurred while fetching media."
+            });
+        } finally {
+            $fileInputStore.processing = false;
+        }
+    }
+
+    $effect(()=> {
+        if( !browser) return;
+        if($fileInputStore.activeMenu){
+            currentCategory = categoryMap[$fileInputStore.activeMenu];
+            if (lastSelectedCategory !== currentCategory) {
+                loadMedia(currentCategory);
+                lastSelectedCategory = currentCategory;
+            }
+        }
+        if($fileInputStore.submissions){
+            const submissions = $fileInputStore.submissions || [];
+            itemCount = submissions.length;
+            const totalBytes = submissions.reduce(
+                (sum: number, item: FileInputStoreMediaItem) => sum + (item.size_bytes || 0),
+                0
+            );
+            totalSizeMB = +(totalBytes / (1024 * 1024)).toFixed(2);
+        }
+        if($fileInputStore.requestReload){
+            $fileInputStore.requestReload = false;
+            loadMedia(currentCategory);
+        }
+    })
+</script>
+
+
+{#if $fileInputStore.activeMenu === 'Music'}
+    <PreviewAudio {media} />
+{:else if $fileInputStore.activeMenu === 'Documents'}
+    <PreviewDocument {media} />
+{:else if $fileInputStore.activeMenu === 'Pictures'}
+    <PreviewImage {media} />
+{:else if $fileInputStore.activeMenu === 'Videos'}
+    <PreviewVideo {media} />
+{:else if $fileInputStore.activeMenu === 'Others'}
+    <PreviewGenericFile {media} />
+{/if}
+<div hidden={itemCount === 0} style="position: absolute; top: 0; right: 0;padding: 2px 5px; box-shadow: var(--box-shadow); background: var(--background); z-index: 1;">
+    {itemCount} {itemCount === 1 ? 'item' : 'items'} selected ({totalSizeMB} MB)
+</div>

package/dist/Modules/FilePicker/Cloud/content.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Content: import("svelte").Component<Record<string, never>, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/Modules/FilePicker/Cloud/storage.svelte

@@ -0,0 +1,40 @@
+<script>
+    import { onMount } from 'svelte';
+    import { fileInputStore,CustomProgress, isDesktop, addToast} from '../../../index.js';
+
+    let {
+        padding = "0.5rem",
+        width = "100%",
+        forceRender = $bindable(false),
+    } = $props()
+
+    let progress = $state(0);
+    let progressColor = $state("var(--primary-bg)");
+    
+    onMount(()=>{
+        if(!$fileInputStore.usedBytes || !$fileInputStore.maxBytes){
+            addToast({
+                status: 'warning',
+                message: 'Unable to calculate storage usage. Please configure your cloud storage settings.',
+                persistent: true,
+            });
+            return;
+        }
+        progress = ($fileInputStore.usedBytes / $fileInputStore.maxBytes) * 100;
+    })
+    $effect(()=>{
+        if(progress){
+            progressColor = progress < 60
+            ? 'var(--primary-bg)'
+            : progress < 90
+            ? 'var(--warning-bg)'
+            : 'var(--error-bg)';
+        }
+    })
+</script>
+
+
+<div hidden={!$isDesktop && !forceRender} style="padding: 0.5rem  {padding}; width: {width};">
+    <CustomProgress value={progress} color={progressColor}/>
+    <h3 style="font-size: 0.8rem;">{progress.toFixed(2)}% of 100 MB</h3>
+</div>

package/dist/Modules/FilePicker/Cloud/storage.svelte.d.ts

@@ -0,0 +1,15 @@
+export default Storage;
+type Storage = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Storage: import("svelte").Component<{
+    padding?: string;
+    width?: string;
+    forceRender?: boolean;
+}, {}, "forceRender">;
+type $$ComponentProps = {
+    padding?: string;
+    width?: string;
+    forceRender?: boolean;
+};

package/dist/Modules/FilePicker/Upload/upload.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import {fileInputStore,FileInput, addToast} from '../../../index.js'
+    
+    async function handleUpload() {
+        if( $fileInputStore.selectedFiles.length === 0 || !$fileInputStore.serverUploadUrl) return;
+
+        try {
+            $fileInputStore.processing = true;
+            const formData = new FormData();
+
+            $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
+
+            const res = await fetch($fileInputStore.serverUploadUrl, {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await res.json();
+
+            if (!res.ok) {
+                addToast({
+                    status: 'error',
+                    message: data || 'Upload failed',
+                    persistent: true
+                });
+                return;
+            }
+
+            fileInputStore.update(store => {
+                store.selectedFiles = [];
+                store.activeTab = 'Cloud';
+                return store;
+            });
+            addToast({
+                status: 'success',
+                message: 'Files uploaded successfully!'
+            });
+        } catch (err) {
+            addToast({
+                status: 'error',
+                message: `Upload failed: ${err}`,
+                persistent: true
+            });
+        } finally {
+            $fileInputStore.processing = false;
+        }
+    }
+</script>
+
+
+<FileInput 
+    minHeight="400px" 
+    bind:processing={$fileInputStore.processing} 
+    onclick={handleUpload} 
+/>

package/dist/Modules/FilePicker/{Cloud/previews.svelte.d.ts → Upload/upload.svelte.d.ts}

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,10 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Previews: $$__sveltets_2_IsomorphicComponent<{
-    media: any;
-}, {
+declare const Upload: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Previews = InstanceType<typeof Previews>;
-export default Previews;
+type Upload = InstanceType<typeof Upload>;
+export default Upload;

package/dist/Modules/FilePicker/main.svelte

@@ -1,83 +1,31 @@
 <script lang="ts">
-    import {Backdrop,Wrapper,fileInputStore, LinearProgress,FileInput, User, Tabs, resetFileInputStore, addToast} from '../../index.js'
+    import {Backdrop,Wrapper,fileInputStore, LinearProgress, Tabs, resetFileInputStore, addToast} from '../../index.js'
+    
     import CloudStore from './Cloud/cloudStore.svelte';
-    import Actions from './ActionsMenu/Actions.svelte';
-
-    let processing: boolean = false;
-
-    async function handleUpload() {
-        if(!$User.userId || !$fileInputStore.r2_key || $fileInputStore.selectedFiles.length === 0 || !$fileInputStore.serverUploadUrl) return;
-
-        try {
-            processing = true;
-            const formData = new FormData();
-
-            $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
-            formData.append('r2_key', $fileInputStore.r2_key);
-            formData.append('userid', $User.userId);
-
-            const res = await fetch($fileInputStore.serverUploadUrl, {
-                method: 'POST',
-                body: formData
-            });
-
-            const data = await res.json();
-
-            if (!res.ok) {
-                addToast({
-                    status: 'error',
-                    message: data || 'Upload failed',
-                    persistent: true
-                });
-                return;
-            }
-
-            data.forEach((item: { original_name: string; code: number; }) => {
-                if (item.code === 500) {
-                    addToast({
-                        status: 'error',
-                        message: `Failed to upload file: ${item.original_name}`
-                    });
-                }
-            });
-
-            fileInputStore.update(store => {
-                store.selectedFiles = [];
-                store.activeTab = 'Cloud';
-                store.requestReload = true;
-                return store;
-            });
-        } catch (err) {
-            addToast({
-                status: 'error',
-                message: `Upload failed: ${err}`,
-                persistent: true
-            });
-        } finally {
-            processing = false;
-        }
-    }
+    import Actions from './Actions/Actions.svelte';
+    import UploadMedia from './Upload/upload.svelte';
 
     function onEscape(){
         resetFileInputStore();
     }
+    
 </script>
 
 
 {#snippet Cloud()}
-    <CloudStore bind:processing />
+    <CloudStore />
 {/snippet}
 
 {#snippet Upload()}
-    <FileInput bind:processing onclick={handleUpload} />
+    <UploadMedia />
 {/snippet}
 
 {#snippet actions()}
-    <Actions bind:processing />
+    <Actions/>
 {/snippet}
 
 <Backdrop onClose={onEscape} bind:open={$fileInputStore.uploadModalOpen} zIndex={15}>
-    <Wrapper maxWidth="700px" minHeight="300px" padding="0px">
+    <Wrapper maxWidth="700px" padding="0px">
         <Tabs
             bind:active={$fileInputStore.activeTab}
             tabs={[
@@ -86,7 +34,8 @@
             ]}
             snippets={{ Cloud, Upload }}
             actions={actions}
+            padding="0px"
         />
-        {#if processing}<LinearProgress />{/if}
+        {#if $fileInputStore.processing}<LinearProgress />{/if}
     </Wrapper>
 </Backdrop>

package/dist/stores/modules/editor.d.ts

@@ -1,3 +1,5 @@
+export type EditorFeature = 'text-formatting' | 'headings' | 'text-color' | 'text-align' | 'lists' | 'images' | 'links' | 'youtube' | 'history' | 'export';
+export type ImageInsertMode = 'filepicker' | 'url';
 export type EditorState = {
     content: any;
     export: boolean;
@@ -6,9 +8,9 @@ export type EditorState = {
     serverGetUrl: string;
     serverUploadUrl: string;
     serverDeleteUrl: string;
-    serverStorageUrl: string;
     serverDownloadUrl: string;
-    useFilePicker: boolean;
+    enabledFeatures: EditorFeature[];
+    insertImageMode: ImageInsertMode[];
 };
 export declare const editorStore: import("svelte/store").Writable<EditorState>;
 export declare function resetEditorStore(): void;

package/dist/stores/modules/editor.js

@@ -7,9 +7,9 @@ const defaultEditorState = {
     serverGetUrl: '',
     serverUploadUrl: '',
     serverDeleteUrl: '',
-    serverStorageUrl: '',
     serverDownloadUrl: '',
-    useFilePicker: true,
+    enabledFeatures: [],
+    insertImageMode: ['filepicker', 'url']
 };
 export const editorStore = writable({
     ...defaultEditorState

package/dist/stores/modules/fileInput.d.ts

@@ -23,9 +23,11 @@ export type FileInputState = {
     serverGetUrl: string;
     serverUploadUrl: string;
     serverDeleteUrl: string;
-    serverStorageUrl: string;
     serverDownloadUrl: string;
     requestReload: boolean;
+    processing?: boolean;
+    usedBytes: number;
+    maxBytes: number;
 };
 export declare const fileInputStore: import("svelte/store").Writable<FileInputState>;
 export declare function resetFileInputStore(): void;

package/dist/stores/modules/fileInput.js

@@ -15,9 +15,11 @@ const defaultFileInputState = {
     serverGetUrl: '',
     serverUploadUrl: '',
     serverDeleteUrl: '',
-    serverStorageUrl: '',
     serverDownloadUrl: '',
-    requestReload: false
+    requestReload: false,
+    processing: false,
+    usedBytes: 0,
+    maxBytes: 0
 };
 export const fileInputStore = writable({
     ...defaultFileInputState

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.1.4",
+	"version": "1.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/Modules/FilePicker/ActionsMenu/Actions.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const Actions: import("svelte").Component<{
-    processing?: any;
-}, {}, "processing">;
-type Actions = ReturnType<typeof Actions>;
-export default Actions;

package/dist/Modules/FilePicker/ActionsMenu/delete_media.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const DeleteMedia: import("svelte").Component<{
-    processing?: any;
-    openActionsMenu?: any;
-}, {}, "processing" | "openActionsMenu">;
-type DeleteMedia = ReturnType<typeof DeleteMedia>;
-export default DeleteMedia;

package/dist/Modules/FilePicker/ActionsMenu/download_media.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const DownloadMedia: import("svelte").Component<{
-    processing?: any;
-    openActionsMenu?: any;
-}, {}, "processing" | "openActionsMenu">;
-type DownloadMedia = ReturnType<typeof DownloadMedia>;
-export default DownloadMedia;