@sierra-95/svelte-scaffold 1.1.4 → 1.2.0

package/dist/Core/components/Menus/MenuItem/menuItem.svelte

@@ -5,7 +5,8 @@
         disabled = false,
         iconSize = '20px',
         iconGap = '20px',
-        iconBg: iconBg = 'var(--primary-bg)',
+        iconBg = 'var(--primary-bg)',
+        rounded = '0px',
         children = null,
         ...rest
     } = $props();
@@ -30,7 +31,7 @@
 <div
     id="sierra-menu-item"
     role="none" 
-    style="background-color: {active ? 'var(--menu-item-active)' : ''}"
+    style="background-color: {active ? 'var(--menu-item-active)' : ''}; border-radius: {rounded};"
     class="{disabled? 'disabled':''}"
     {...rest}
     onclick={(e: MouseEvent) => {

package/dist/Core/components/Menus/MenuItem/menuItem.svelte.d.ts

@@ -5,6 +5,7 @@ declare const MenuItem: import("svelte").Component<{
     iconSize?: string;
     iconGap?: string;
     iconBg?: string;
+    rounded?: string;
     children?: any;
 } & Record<string, any>, {}, "">;
 type MenuItem = ReturnType<typeof MenuItem>;

package/dist/Core/components/Menus/Tabs/main.css

@@ -17,6 +17,5 @@
     background-color: var(--background);
 }
 #sierra-tabs .tab-content{
-    padding: 1rem;
     background-color: var(--background);
 }

package/dist/Core/components/Menus/Tabs/main.svelte

@@ -10,6 +10,7 @@
       iconSize = '15px',
       boxShadow = false,
       actions,
+      padding = '1rem'
     } = $props();
 
     onMount(()=>{
@@ -38,7 +39,7 @@
       {@render actions?.()}
   </div>
 
-  <div class="tab-content">
+  <div style="padding: {padding};" class="tab-content">
     {#if snippets?.[active]}
         {@render snippets[active]()}
     {/if}

package/dist/Core/components/Menus/Tabs/main.svelte.d.ts

@@ -7,6 +7,7 @@ declare const Main: import("svelte").Component<{
     iconSize?: string;
     boxShadow?: boolean;
     actions: any;
+    padding?: string;
 }, {}, "active">;
 type Main = ReturnType<typeof Main>;
 export default Main;

package/dist/Core/components/others/Previews/Audio/audio.svelte

@@ -1,56 +1,17 @@
 <script lang="ts">
-    import {ButtonTimes, fileInputStore, ButtonSelect, removeFileForMedia, toggleSelectForMedia, addToast} from '../../../../../index.js'
+    import {ButtonTimes, fileInputStore, ButtonSelect, removeFileForMedia, toggleSelectForMedia} from '../../../../../index.js'
     export let media;
     export let buttonTimes = false;
     export let urlsOnly = true;
-
-    let audioPlaying: Record<string, boolean> = {};
-    let audioRefs: Record<string, HTMLAudioElement> = {};
-    function togglePlay(id: string) {
-        if(!urlsOnly){
-            addToast({
-                status: 'warning',
-                message: 'Audio preview is disabled for local files.'
-            });
-            return;
-        }
-        const audio = audioRefs[id];
-        if (!audio) return;
-
-        if (audio.paused) {
-            // Pause any other playing audio
-            for (const key in audioRefs) {
-                if (key !== id && !audioRefs[key].paused) {
-                    audioRefs[key].pause();
-                    audioPlaying[key] = false;
-                }
-            }
-            audio.play();
-            audioPlaying[id] = true;
-        } else {
-            audio.pause();
-            audioPlaying[id] = false;
-        }
-    }
-    function getPreviewUrl(file: File) {
-        return URL.createObjectURL(file);
-    }
-    function uuid() {
-        return crypto.randomUUID();
-    }
 </script>
 
 {#if media.Audio.length === 0}
     <p>No audio files available.</p>
 {:else} 
     <div style="display: flex; flex-wrap:wrap; gap: 1rem">
-        {#each media.Audio as item (item.id || uuid())}
-            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px;display: flex; gap: 0.5rem; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); border-radius: 0.3rem; cursor: pointer; background-color: var(--background-tertiary);">
-                <button aria-label="Play or pause audio" on:click|stopPropagation={() => togglePlay(item.id)}>
-                    <i class="fa {audioPlaying[item.id] ? 'fa-pause' : 'fa-play'}" aria-hidden="true"></i>
-                </button>
-                <audio hidden bind:this={audioRefs[item.id]} src={urlsOnly ? item.url : getPreviewUrl(item)} controls></audio>
-                <h3 style=" margin-left:0.2rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+        {#each media.Audio as item}
+            <div title={item.original_name || item.name} style="position: relative; cursor: pointer;" on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none">
+                <img style="height: 70px;" src="https://files.michaelmachohi.com/svelte-scaffold/icons/music.icon.png" alt={item.original_name || item.name}/>
                 {#if buttonTimes}
                     <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e
@@ -59,6 +20,7 @@
                 {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
                     <ButtonSelect />
                 {/if}
+                <h3 style="width: 100px;" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
             </div>
         {/each}
     </div> 

package/dist/Core/components/others/Previews/Document/documents.svelte

@@ -23,7 +23,7 @@
             <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 70px; cursor: pointer;">
                 <img src={getIconUrl(item.type || item.mime_type)} alt="Document Icon" style="height: 70px;"/>
                 {#if buttonTimes}
-                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                    <ButtonTimes onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e
                     )}/>
                 {/if}

package/dist/Core/components/others/Previews/Image/image.svelte

@@ -26,7 +26,7 @@
 <style>
     #sierra-preview-image img{
         width: 100%;
-        height: 100px;
+        height: 70px;
         object-fit: cover;
     }
 </style>
@@ -46,7 +46,7 @@
                 {:else} 
                     <Generic/>
                 {/if}
-                <h3 style="margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+                <h3 class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
                 {#if buttonTimes}
                     <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e

package/dist/Core/components/others/Previews/Video/video.svelte

@@ -10,19 +10,17 @@
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Videos as item}
-            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem; cursor: pointer; background-color: var(--background-tertiary);">    
-                <video on:click|stopPropagation src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} controls style="width: 100%; height: 100px; object-fit: cover; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;">
-                    <track kind="captions" />
-                </video>
-                <h3 style=" margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative;">    
+                <img style="height: 70px;" src="https://files.michaelmachohi.com/svelte-scaffold/icons/videos.icon.png" alt={item.original_name || item.name}/>
                 {#if buttonTimes}
-                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                    <ButtonTimes onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e
                     )}/>
                 {/if}
                 {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
                     <ButtonSelect />
                 {/if}
+                <h3 class="sierra-text-wrap">{item.original_name || item.name}</h3>
             </div>
         {/each}
     </div>

package/dist/Core/components/others/Previews/Video/video.svelte.d.ts

@@ -16,8 +16,6 @@ declare const Video: $$__sveltets_2_IsomorphicComponent<{
     buttonTimes?: boolean;
     urlsOnly?: boolean;
 }, {
-    click: MouseEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type Video = InstanceType<typeof Video>;

package/dist/Modules/Editor/Nodes/Images/images.svelte

@@ -13,7 +13,6 @@
 			!$editorStore.serverGetUrl ||
 			!$editorStore.serverUploadUrl ||
 			!$editorStore.serverDeleteUrl ||
-			!$editorStore.serverStorageUrl ||
 			!$editorStore.serverDownloadUrl
 		){
 			addToast({
@@ -31,7 +30,6 @@
 			serverGetUrl: $editorStore.serverGetUrl,
 			serverUploadUrl: $editorStore.serverUploadUrl,
 			serverDeleteUrl: $editorStore.serverDeleteUrl,
-			serverStorageUrl: $editorStore.serverStorageUrl,
 			serverDownloadUrl: $editorStore.serverDownloadUrl,
 			uploadModalOpen: true 
 		}));
@@ -81,18 +79,37 @@
 			return false;
 		}
 	}
+
+	$: showDropdown = $editorStore.insertImageMode?.length > 1;
+	//$: console.log("showDropdown", showDropdown);
+
+	function handleSingleMode() {
+		if ($editorStore.insertImageMode?.includes('filepicker')) {
+			handleInsertImage();
+		} else if ($editorStore.insertImageMode?.includes('url')) {
+			enterURL();
+		}
+	}
 </script>
+
 {#snippet formContent()}
 <div style="margin: 1rem 0rem;">
 	<Input label="Enter Image URL" id="image-url" underline bind:value={value}/>
 </div>
 {/snippet}
-<DropdownContainer bind:open={openDropdown} width="150px">
-	{#snippet dropdownTrigger()}
-		<button type="button" aria-label="Insert Image" title="Insert File" on:click={() => openDropdown = !openDropdown}>
-			<i class="fa fa-file"></i>
-		</button>
-	{/snippet}
-	<MenuItem onclick={() => { handleInsertImage(); openDropdown = false; }}>File Picker</MenuItem>
-	<MenuItem onclick={() => { enterURL(); openDropdown = false; }}>Enter URL</MenuItem>
-</DropdownContainer>
+
+{#if showDropdown}
+	<DropdownContainer bind:open={openDropdown} width="150px">
+		{#snippet dropdownTrigger()}
+			<button type="button" aria-label="Insert Image" title="Insert File" on:click={() => openDropdown = !openDropdown}>
+				<i class="fa fa-file"></i>
+			</button>
+		{/snippet}
+		<MenuItem onclick={() => { handleInsertImage(); openDropdown = false; }}>File Picker</MenuItem>
+		<MenuItem onclick={() => { enterURL(); openDropdown = false; }}>Enter URL</MenuItem>
+	</DropdownContainer>
+{:else}
+	<button type="button" aria-label="Insert Image" title="Insert File" on:click={() => handleSingleMode()}>
+		<i class="fa fa-file"></i>
+	</button>
+{/if}

package/dist/Modules/Editor/controls.svelte

@@ -3,26 +3,39 @@
         TextFormatting, Headings, TextColor, TextAlign, Images, History, Youtube,
         Export, Lists, Links
     } from './tools.js';
-    import type { Editor } from "@tiptap/core";
+
     import './styles/controls.css';
-    import {Tabs} from '../../index.js';
-
-    export let editor: Editor;
-    
-    const HomeItems = [
-        TextFormatting,
-                History,
-                Headings,
-                TextColor,
-                TextAlign,
-                Lists,
+    import {Tabs, editorStore} from '../../index.js';
+
+    const {editor} = $props();
+
+    let HomeItems: any[] = $state([]);
+    let InsertItems: any[] = $state([]);
+
+    const HOME_TOOLS = [
+        { feature: 'text-formatting', component: TextFormatting },
+        { feature: 'history', component: History },
+        { feature: 'headings', component: Headings },
+        { feature: 'text-color', component: TextColor },
+        { feature: 'text-align', component: TextAlign },
+        { feature: 'lists', component: Lists },
     ] as const;
 
-    const InsertItems = [
-        Images,
-        Links,
-        Youtube,
+    const INSERT_TOOLS = [
+        { feature: 'images', component: Images },
+        { feature: 'links', component: Links },
+        { feature: 'youtube', component: Youtube }
     ] as const;
+
+    $effect(() => {
+        HomeItems = HOME_TOOLS
+            .filter(tool => $editorStore.enabledFeatures.includes(tool.feature))
+            .map(tool => tool.component);
+
+        InsertItems = INSERT_TOOLS
+            .filter(tool => $editorStore.enabledFeatures.includes(tool.feature))
+            .map(tool => tool.component);
+    });
 </script>
 
 {#snippet Home()}

package/dist/Modules/Editor/controls.svelte.d.ts

@@ -1,22 +1,6 @@
-import type { Editor } from "@tiptap/core";
 import './styles/controls.css';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Controls: $$__sveltets_2_IsomorphicComponent<{
-    editor: Editor;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Controls = InstanceType<typeof Controls>;
+declare const Controls: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type Controls = ReturnType<typeof Controls>;
 export default Controls;

package/dist/Modules/FilePicker/{ActionsMenu → Actions}/Actions.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-    import {fileInputStore,resetFileInputStore, DropdownContainer, MenuItem, buttonRipple} from "../../../index.js";
-    import FileProperties from "./file_properties.svelte";
-    import DownloadMedia from "./download_media.svelte";
-    import DeleteMedia from "./delete_media.svelte";
-    
-    let {
-        processing = $bindable(),
-    } = $props();
+    import {fileInputStore,resetFileInputStore, DropdownContainer, MenuItem, buttonRipple, Button} from "../../../index.js";
+    import FileProperties from "./properties.svelte";
+    import DownloadMedia from "./download.svelte";
+    import DeleteMedia from "./delete.svelte";
 
     function handleSelect() {
         fileInputStore.update(store => ({ 
@@ -30,17 +26,19 @@
 
 <FileProperties bind:showProperties />
 <div style="display: flex; gap: 1rem; align-items: center; margin-right: 1rem">
-    <button hidden={$fileInputStore.manage || disableActions} title="Select" onclick={handleSelect} style="color: var(--primary-bg);" aria-label="Select submissions"><i class="fa fa-check-circle-o"></i></button>
     {#snippet TriggerMenu()}
         <button hidden={$fileInputStore.activeTab !== 'Cloud'} disabled={$fileInputStore.submissions.length === 0} use:buttonRipple class="w-10" aria-label="Ellipsis" onclick={() => (openActionsMenu = !openActionsMenu)}>
             <i class="fa fa-bars"></i>
         </button>
     {/snippet} 
     <DropdownContainer bind:open={openActionsMenu} dropdownTrigger={TriggerMenu}>
-        <MenuItem onclick={() => { showProperties = true; openActionsMenu = false; }}>Properties</MenuItem>
-        <DownloadMedia bind:processing bind:openActionsMenu/>
-        <DeleteMedia bind:processing bind:openActionsMenu />
+        <MenuItem icon="fa fa-info-circle" iconGap="10px" iconSize="15px" onclick={() => { showProperties = true; openActionsMenu = false; }}>Properties</MenuItem>
+        <DownloadMedia bind:openActionsMenu/>
+        <DeleteMedia bind:openActionsMenu />
     </DropdownContainer>
     <button title="Cancel" onclick={resetFileInputStore} aria-label="Cancel"><i class="fa fa-xmark"></i></button>
 </div>
+<div hidden={$fileInputStore.manage || disableActions} style="position: absolute; bottom: 1rem; right: 1rem; z-index: 5;">
+    <Button endIcon="fa-check-circle-o" onclick={handleSelect}>Insert</Button>
+</div>
 

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

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

package/dist/Modules/FilePicker/{ActionsMenu/delete_media.svelte → Actions/delete.svelte}

@@ -3,7 +3,6 @@
     import {modalStore, fileInputStore, MenuItem, addToast} from "../../../index.js";
 
     let {
-        processing = $bindable(),
         openActionsMenu = $bindable(),
     } = $props();
 
@@ -28,13 +27,13 @@
         if (!$fileInputStore.serverDeleteUrl) return;
 
         try {
-            processing = true;
+            $fileInputStore.processing = true;
             const response = await fetch($fileInputStore.serverDeleteUrl, {
                 method: 'DELETE',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ id: idsToDelete })
+                body: JSON.stringify(idsToDelete)
             });
 
             const data = await response.json();
@@ -47,20 +46,15 @@
                 });
                 return;
             }
-
-            data.forEach((item: { id: string; code: number }) => {
-                if (item.code === 404) {
-                    addToast({
-                        status: 'error',
-                        message: `Failed to delete file with ID: ${item.id}`
-                    });
-                }
-            });
             fileInputStore.update(store => ({ 
                 ...store,
                 submissions: [],
                 requestReload: true
             }));
+            addToast({
+                status: 'success',
+                message: 'Files deleted successfully.'
+            });
 
         } catch (error) {
             addToast({
@@ -68,9 +62,9 @@
                 message: `Error deleting files: ${error}`
             });
         } finally {
-            processing = false;
+            $fileInputStore.processing = false;
         }
     }
 </script>
 
-<MenuItem iconGap="10px" onclick={handleDelete} icon="fa-trash-o" iconBg="var(--error-bg)" iconSize="12px">Delete</MenuItem>
+<MenuItem iconGap="10px" onclick={handleDelete} icon="fa-trash-o" iconBg="var(--error-bg)" iconSize="15px">Delete</MenuItem>

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

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

package/dist/Modules/FilePicker/{ActionsMenu/download_media.svelte → Actions/download.svelte}

@@ -1,16 +1,15 @@
 <script lang="ts">
     import { get } from "svelte/store";
-    import {MenuItem, fileInputStore, User, addToast} from "../../../index.js";
+    import {MenuItem, fileInputStore, addToast} from "../../../index.js";
 
     let {
-        processing = $bindable(),
         openActionsMenu = $bindable(),
     } = $props();
 
     async function handleDownload() {
         openActionsMenu = false;
         const store = get(fileInputStore);
-        if (!store.submissions?.length || !$User.userId) {
+        if (!store.submissions?.length) {
             addToast({
                 status: 'error',
                 message: 'An error occurred while processing your request.'
@@ -18,13 +17,13 @@
             return;
         };
         try {
-            processing = true;
+            $fileInputStore.processing = true;
             for (const item of store.submissions) {
                 if (!item.id) continue;
                 await download(item.id);
             }
         } finally {
-            processing = false;
+            $fileInputStore.processing = false;
             fileInputStore.update(store => {
                 store.submissions = [];
                 return store;
@@ -34,13 +33,9 @@
 
     async function download(id: string) {
         try {
-            const formData = new FormData();
-            formData.append('id', id);
-            formData.append('userid', $User.userId);
-
-            const res = await fetch($fileInputStore.serverDownloadUrl, {
-                method: 'POST',
-                body: formData
+            const downloadURL = $fileInputStore.serverDownloadUrl + `?id=${id}`;
+            const res = await fetch(downloadURL, {
+                method: 'GET',
             });
 
             if (!res.ok) {
@@ -80,4 +75,9 @@
     }
 </script>
 
-<MenuItem onclick={handleDownload}>Download</MenuItem>
+<MenuItem 
+    icon="fa fa-download" 
+    iconGap="10px" 
+    iconSize="15px"
+    onclick={handleDownload}>Download
+</MenuItem>

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

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

package/dist/Modules/FilePicker/{ActionsMenu/file_properties.svelte → Actions/properties.svelte}

@@ -1,6 +1,6 @@
 <script>
     import {Wrapper, Backdrop, fileInputStore} from "../../../index.js";
-    import Storage from "./media_storage.svelte";
+    import Storage from "../Cloud/storage.svelte";
     let {
         showProperties = $bindable(),
     } = $props();
@@ -16,8 +16,8 @@
 </style>
 <Backdrop bind:open={showProperties}>
     <Wrapper>
-        <div style="display: flex; justify-content: space-between">
-            <Storage padding="0rem" width="80%"/>
+        <div style="display: flex; justify-content: space-between; gap: 1rem">
+            <Storage padding="0rem" forceRender={true}/>
             <button style="align-self: start;" title="Cancel" onclick={() => showProperties = false} aria-label="Cancel"><i class="fa fa-times"></i></button>
         </div>
         <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; max-height: 70vh; overflow-y: auto;">

package/dist/Modules/FilePicker/{ActionsMenu/file_properties.svelte.d.ts → Actions/properties.svelte.d.ts}

@@ -1,9 +1,9 @@
-export default FileProperties;
-type FileProperties = {
+export default Properties;
+type Properties = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const FileProperties: import("svelte").Component<{
+declare const Properties: import("svelte").Component<{
     showProperties?: any;
 }, {}, "showProperties">;
 type $$ComponentProps = {