@sierra-95/svelte-scaffold 1.2.0 → 1.2.2

package/dist/Core/components/Form/Button/default/button.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const Button: import("svelte").Component<{
     variant?: "contained" | "outlined";
-    color?: "none" | "primary" | "warning" | "error";
+    color?: "none" | "warning" | "error" | "primary";
     type?: "button" | "submit" | "reset";
     title?: string;
     pill?: boolean;

package/dist/{Modules/FilePicker/Cloud/storage.svelte → Core/components/others/Progress/StorageGauge/storagegauge.svelte}

@@ -1,18 +1,18 @@
 <script>
     import { onMount } from 'svelte';
-    import { fileInputStore,CustomProgress, isDesktop, addToast} from '../../../index.js';
+    import { fileInputConfig,CustomProgress, addToast} from '../../../../../index.js';
 
     let {
         padding = "0.5rem",
         width = "100%",
-        forceRender = $bindable(false),
+        ...rest
     } = $props()
 
     let progress = $state(0);
     let progressColor = $state("var(--primary-bg)");
     
     onMount(()=>{
-        if(!$fileInputStore.usedBytes || !$fileInputStore.maxBytes){
+        if(!$fileInputConfig.usedBytes || !$fileInputConfig.maxBytes){
             addToast({
                 status: 'warning',
                 message: 'Unable to calculate storage usage. Please configure your cloud storage settings.',
@@ -20,7 +20,7 @@
             });
             return;
         }
-        progress = ($fileInputStore.usedBytes / $fileInputStore.maxBytes) * 100;
+        progress = ($fileInputConfig.usedBytes / $fileInputConfig.maxBytes) * 100;
     })
     $effect(()=>{
         if(progress){
@@ -34,7 +34,7 @@
 </script>
 
 
-<div hidden={!$isDesktop && !forceRender} style="padding: 0.5rem  {padding}; width: {width};">
+<div {...rest} 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 → Core/components/others/Progress/StorageGauge/storagegauge.svelte.d.ts}

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { insertImageAndMoveCursor } from '../../tools.js';
-	import {fileInputStore, resetFileInputStore, editorStore, modalStore, Input, DropdownContainer, MenuItem, addToast} from '../../../../index.js';
+	import {fileInputStore, fileInputConfig,resetFileInputStore, editorStore,editorConfig, modalStore, Input, DropdownContainer, MenuItem, addToast} from '../../../../index.js';
 
 
   	import type { Editor } from "@tiptap/core";
@@ -9,11 +9,10 @@
 	let openDropdown = false;
 	function handleInsertImage(){
 		if(
-			!$editorStore.r2_key ||
-			!$editorStore.serverGetUrl ||
-			!$editorStore.serverUploadUrl ||
-			!$editorStore.serverDeleteUrl ||
-			!$editorStore.serverDownloadUrl
+			!$editorConfig.serverGetUrl ||
+			!$editorConfig.serverUploadUrl ||
+			!$editorConfig.serverDeleteUrl ||
+			!$editorConfig.serverDownloadUrl
 		){
 			addToast({
 				status: 'error',
@@ -22,17 +21,19 @@
 			});
 			return;
 		}
-		fileInputStore.update(store => ({ 
-			...store, 
-			uploadType: ['image'],
-			disabledMenuItem: ['Music', 'Videos', 'Documents', 'Others'],
-			r2_key: $editorStore.r2_key,
-			serverGetUrl: $editorStore.serverGetUrl,
-			serverUploadUrl: $editorStore.serverUploadUrl,
-			serverDeleteUrl: $editorStore.serverDeleteUrl,
-			serverDownloadUrl: $editorStore.serverDownloadUrl,
-			uploadModalOpen: true 
-		}));
+		fileInputConfig.update(config => { 
+			config.serverGetUrl = $editorConfig.serverGetUrl;
+			config.serverUploadUrl = $editorConfig.serverUploadUrl;
+			config.serverDeleteUrl = $editorConfig.serverDeleteUrl;		
+			config.serverDownloadUrl = $editorConfig.serverDownloadUrl;
+			return config;
+		});
+		fileInputStore.update(store => { 
+			store.uploadType = ['image'];
+			store.disabledMenuItem = ['Music', 'Videos', 'Documents', 'Others'];
+			store.uploadModalOpen = true;
+			return store;
+		});
 	}
 
 	$: if (

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { get } from "svelte/store";
-    import {modalStore, fileInputStore, MenuItem, addToast} from "../../../index.js";
+    import {modalStore, fileInputStore, MenuItem, addToast, fileInputConfig} from "../../../index.js";
 
     let {
         openActionsMenu = $bindable(),
@@ -24,11 +24,11 @@
         const idsToDelete = store.submissions.map(item => item.id);
         
         if (!idsToDelete || idsToDelete.length === 0) return;
-        if (!$fileInputStore.serverDeleteUrl) return;
+        if (!$fileInputConfig.serverDeleteUrl) return;
 
         try {
             $fileInputStore.processing = true;
-            const response = await fetch($fileInputStore.serverDeleteUrl, {
+            const response = await fetch($fileInputConfig.serverDeleteUrl, {
                 method: 'DELETE',
                 headers: {
                     'Content-Type': 'application/json'

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { get } from "svelte/store";
-    import {MenuItem, fileInputStore, addToast} from "../../../index.js";
+    import {MenuItem, fileInputStore, fileInputConfig, addToast} from "../../../index.js";
 
     let {
         openActionsMenu = $bindable(),
@@ -33,7 +33,7 @@
 
     async function download(id: string) {
         try {
-            const downloadURL = $fileInputStore.serverDownloadUrl + `?id=${id}`;
+            const downloadURL = $fileInputConfig.serverDownloadUrl + `?id=${id}`;
             const res = await fetch(downloadURL, {
                 method: 'GET',
             });

package/dist/Modules/FilePicker/Actions/properties.svelte

@@ -1,6 +1,6 @@
 <script>
-    import {Wrapper, Backdrop, fileInputStore} from "../../../index.js";
-    import Storage from "../Cloud/storage.svelte";
+    import {Wrapper, Backdrop, fileInputStore, StorageGauge} from "../../../index.js";
+
     let {
         showProperties = $bindable(),
     } = $props();
@@ -17,7 +17,7 @@
 <Backdrop bind:open={showProperties}>
     <Wrapper>
         <div style="display: flex; justify-content: space-between; gap: 1rem">
-            <Storage padding="0rem" forceRender={true}/>
+            <StorageGauge padding="0rem"/>
             <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/Cloud/cloudStore.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-    import { fileInputStore, MenuItem, isDesktop } from '../../../index.js';
+    import { fileInputStore, MenuItem, isDesktop, StorageGauge } from '../../../index.js';
     import Content from './content.svelte';
-    import Storage from './storage.svelte';
-
+    
     const menuItem: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'| 'Others'; icon: string }[] = [
         { name: 'Documents', icon: 'fa fa-file-alt' },
         { name: 'Music', icon: 'fa fa-music' },
@@ -63,7 +62,7 @@
                 iconGap="10px">{!$isDesktop ? '' : item.name}
             </MenuItem>
         {/each}
-        <Storage/>
+        <StorageGauge hidden={!$isDesktop}/>
     </nav>
     <main>
         <Content/>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { browser } from "$app/environment";
-    import { fileInputStore, addToast, PreviewImage, PreviewVideo, PreviewAudio, PreviewDocument, PreviewGenericFile } from "../../../index.js";
+    import { fileInputStore, fileInputConfig ,addToast, PreviewImage, PreviewVideo, PreviewAudio, PreviewDocument, PreviewGenericFile } from "../../../index.js";
     import type {FileInputStoreMediaItem} from '../../../index.js';
 
     let itemCount = $state(0);
@@ -28,10 +28,10 @@
         Others: []
     });
     async function loadMedia(category: string) {
-        if (!$fileInputStore.serverGetUrl) return;
+        if (!$fileInputConfig.serverGetUrl) return;
         try {
             $fileInputStore.processing = true;
-            const res = await fetch(`${$fileInputStore.serverGetUrl}?category=${category}`);
+            const res = await fetch(`${$fileInputConfig.serverGetUrl}?category=${category}`);
             const data = await res.json();
 
             if (!res.ok) {

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import {fileInputStore,FileInput, addToast} from '../../../index.js'
+    import {fileInputStore,FileInput, fileInputConfig, addToast} from '../../../index.js'
     
     async function handleUpload() {
-        if( $fileInputStore.selectedFiles.length === 0 || !$fileInputStore.serverUploadUrl) return;
+        if( $fileInputStore.selectedFiles.length === 0 || !$fileInputConfig.serverUploadUrl) return;
 
         try {
             $fileInputStore.processing = true;
@@ -10,7 +10,7 @@
 
             $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
 
-            const res = await fetch($fileInputStore.serverUploadUrl, {
+            const res = await fetch($fileInputConfig.serverUploadUrl, {
                 method: 'POST',
                 body: formData
             });

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import './global.css';
 export { default as CircularProgress } from './Core/components/others/Progress/CircularProgress/CircularProgress.svelte';
 export { default as LinearProgress } from './Core/components/others/Progress/LinearProgress/LinearProgress.svelte';
 export { default as CustomProgress } from './Core/components/others/Progress/CustomProgress/customProgress.svelte';
+export { default as StorageGauge } from './Core/components/others/Progress/StorageGauge/storagegauge.svelte';
 export { default as Button } from './Core/components/Form/Button/default/button.svelte';
 export { default as ButtonFlip } from './Core/components/Form/Button/Flip/button.svelte';
 export { default as ButtonMarquee } from './Core/components/Form/Button/Marquee/button.svelte';
@@ -49,8 +50,8 @@ export { isLoading, isLoggedIn, theme, } from './stores/core/general.js';
 export { isMobile, isTablet, isDesktop } from './stores/core/deviceWidth.js';
 export { User, resetUserStore } from './stores/core/user.js';
 export { modalStore, resetModalStore } from './stores/core/modal.js';
-export { editorStore, resetEditorStore } from './stores/modules/editor.js';
-export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
+export { editorStore, resetEditorStore, editorConfig } from './stores/modules/editor.js';
+export { fileInputStore, resetFileInputStore, fileInputConfig } from './stores/modules/fileInput.js';
 export type { FileInputStoreMediaItem } from './stores/modules/fileInput.js';
 export { layoutStore, resetLayoutStore } from './stores/modules/layout.js';
 export { addToast, removeToast, toasts } from './stores/features/toastManager.js';

package/dist/index.js

@@ -4,6 +4,7 @@ import './global.css';
 export { default as CircularProgress } from './Core/components/others/Progress/CircularProgress/CircularProgress.svelte';
 export { default as LinearProgress } from './Core/components/others/Progress/LinearProgress/LinearProgress.svelte';
 export { default as CustomProgress } from './Core/components/others/Progress/CustomProgress/customProgress.svelte';
+export { default as StorageGauge } from './Core/components/others/Progress/StorageGauge/storagegauge.svelte';
 //Buttons
 export { default as Button } from './Core/components/Form/Button/default/button.svelte';
 export { default as ButtonFlip } from './Core/components/Form/Button/Flip/button.svelte';
@@ -61,8 +62,8 @@ export { isMobile, isTablet, isDesktop } from './stores/core/deviceWidth.js';
 export { User, resetUserStore } from './stores/core/user.js';
 export { modalStore, resetModalStore } from './stores/core/modal.js';
 //Modules
-export { editorStore, resetEditorStore } from './stores/modules/editor.js';
-export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
+export { editorStore, resetEditorStore, editorConfig } from './stores/modules/editor.js';
+export { fileInputStore, resetFileInputStore, fileInputConfig } from './stores/modules/fileInput.js';
 export { layoutStore, resetLayoutStore } from './stores/modules/layout.js';
 export { addToast, removeToast, toasts } from './stores/features/toastManager.js';
 //#######################HOOKS/UTILS########################

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

@@ -1,16 +1,18 @@
 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;
-    onExport: any;
-    r2_key: string;
+export type EditorConfig = {
     serverGetUrl: string;
     serverUploadUrl: string;
     serverDeleteUrl: string;
     serverDownloadUrl: string;
+};
+export type EditorState = {
+    content: any;
+    export: boolean;
+    onExport: any;
     enabledFeatures: EditorFeature[];
     insertImageMode: ImageInsertMode[];
 };
+export declare const editorConfig: import("svelte/store").Writable<EditorConfig>;
 export declare const editorStore: import("svelte/store").Writable<EditorState>;
 export declare function resetEditorStore(): void;

package/dist/stores/modules/editor.js

@@ -1,16 +1,20 @@
 import { writable } from 'svelte/store';
+const defaultConfig = {
+    serverGetUrl: '',
+    serverUploadUrl: '',
+    serverDeleteUrl: '',
+    serverDownloadUrl: ''
+};
 const defaultEditorState = {
     content: {},
     export: false,
     onExport: () => { },
-    r2_key: '',
-    serverGetUrl: '',
-    serverUploadUrl: '',
-    serverDeleteUrl: '',
-    serverDownloadUrl: '',
     enabledFeatures: [],
     insertImageMode: ['filepicker', 'url']
 };
+export const editorConfig = writable({
+    ...defaultConfig
+});
 export const editorStore = writable({
     ...defaultEditorState
 });

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

@@ -19,15 +19,17 @@ export type FileInputState = {
     manage: boolean;
     submissions: FileInputStoreMediaItem[];
     submissionComplete: boolean;
-    r2_key: string;
+    requestReload: boolean;
+    processing?: boolean;
+};
+export type FileInputConfig = {
     serverGetUrl: string;
     serverUploadUrl: string;
     serverDeleteUrl: string;
     serverDownloadUrl: string;
-    requestReload: boolean;
-    processing?: boolean;
     usedBytes: number;
     maxBytes: number;
 };
+export declare const fileInputConfig: import("svelte/store").Writable<FileInputConfig>;
 export declare const fileInputStore: import("svelte/store").Writable<FileInputState>;
 export declare function resetFileInputStore(): void;

package/dist/stores/modules/fileInput.js

@@ -11,16 +11,20 @@ const defaultFileInputState = {
     manage: false,
     submissions: [],
     submissionComplete: false,
-    r2_key: '',
+    requestReload: false,
+    processing: false,
+};
+const defaultFileInputConfig = {
     serverGetUrl: '',
     serverUploadUrl: '',
     serverDeleteUrl: '',
     serverDownloadUrl: '',
-    requestReload: false,
-    processing: false,
     usedBytes: 0,
-    maxBytes: 0
+    maxBytes: 104857600
 };
+export const fileInputConfig = writable({
+    ...defaultFileInputConfig
+});
 export const fileInputStore = writable({
     ...defaultFileInputState
 });

package/package.json

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