@sierra-95/svelte-scaffold 1.0.30 → 1.0.32

package/dist/Hooks/preview.d.ts

@@ -2,4 +2,5 @@ import type { FileInputStoreMediaItem } from '../index.js';
 export declare function getPreviewUrlForMedia(file: File): string;
 export declare function toggleSelectForMedia(item: FileInputStoreMediaItem, urlsOnly: boolean): void;
 export declare function removeFileForMedia(index: number, e: Event): void;
+export declare const IMAGE_MIME_TYPES_PREVIEW: string[];
 export declare const DOCUMENT_MIME_TYPES: Set<string>;

package/dist/Hooks/preview.js

@@ -22,6 +22,13 @@ export function removeFileForMedia(index, e) {
         selectedFiles: state.selectedFiles.filter((_, i) => i !== index)
     }));
 }
+export const IMAGE_MIME_TYPES_PREVIEW = [
+    'image/jpeg',
+    'image/png',
+    'image/webp',
+    'image/gif',
+    'image/svg+xml'
+];
 export const DOCUMENT_MIME_TYPES = new Set([
     'application/pdf',
     'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

package/dist/components/Core/others/Previews/GenericFile/genericFile.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import {ButtonTimes,ButtonSelect, fileInputStore, removeFileForMedia, toggleSelectForMedia} from '../../../../../index.js'
+    import Generic from '../generic.svelte';
     export let media;
     export let buttonTimes = false;
     export let urlsOnly = true;
@@ -10,7 +11,7 @@
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Others as item}
             <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 70px; cursor: pointer;">
-                <img src="https://files.michaelmachohi.com/svelte-scaffold/icons/generic.icon.png" alt="Generic File Icon" style="height: 70px;"/>
+                <Generic/>
                 {#if buttonTimes}
                     <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e

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

@@ -1,17 +1,44 @@
 <script lang="ts">
-    import {ButtonTimes, fileInputStore, ButtonSelect, getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia} from '../../../../../index.js'
+    import {ButtonTimes, fileInputStore, ButtonSelect, getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, IMAGE_MIME_TYPES_PREVIEW} from '../../../../../index.js'
+    import Generic from '../generic.svelte';
+    
     export let media;
     export let buttonTimes = false;
     export let urlsOnly = true;
+    
+    function isPreviewable(item: any): boolean {
+        if (urlsOnly) {
+            return IMAGE_MIME_TYPES_PREVIEW.includes((item).mime_type);
+        }
+
+        return IMAGE_MIME_TYPES_PREVIEW.includes((item).type);
+    }
+
+    function previewUrl(item: any): string | null {
+        if (!item) return null;
+
+        return isPreviewable(item)
+            ? (urlsOnly ? (item).url : getPreviewUrlForMedia(item))
+            : null;
+    }
+
 </script>
 
+{#snippet imageTag(url: string)}
+    <img src={url} alt={url} style="width: 100%; height: 100px; object-fit: cover" />
+{/snippet}
+
 {#if media.Images.length === 0}
     <p>No images available.</p>
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Images 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);">
-                <img src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} alt={item} style="width: 100%; height: 100px; object-fit: cover;border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;" />
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; cursor: pointer; width: {previewUrl(item)? '150px':''}">
+                {#if previewUrl(item)}
+                    {@render imageTag(item.url)}
+                {:else} 
+                    <Generic/>
+                {/if}
                 <h3 style="margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
                 {#if buttonTimes}
                     <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(

package/dist/components/Core/others/Previews/generic.svelte

@@ -0,0 +1 @@
+<img src="https://files.michaelmachohi.com/svelte-scaffold/icons/generic.icon.png" alt="Generic File Icon" style="height: 70px;"/>

package/dist/components/Core/others/Previews/generic.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Generic;
+type Generic = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Generic: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -63,7 +63,7 @@
         await loadMedia();
     });
 
-    $: if ($fileInputStore.requestReload){
+    $: if ($fileInputStore.requestReload && childFunctionRef){
         fileInputStore.update(store => ({ 
             ...store,
             requestReload: false

package/dist/components/Modules/Layout/Header/gridIcon.svelte

@@ -1,16 +1,16 @@
 <script>
     let { 
-        dashboardMenuSize,
-        dashboardMenuColor
+        toggleMenuColor,
+        toggleMenuSize,
     } = $props();
 </script>
-<svg width={dashboardMenuSize} height={dashboardMenuSize} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000">
+<svg width={toggleMenuSize} height={toggleMenuSize} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000">
     <g id="SVGRepo_bgCarrier" stroke-width="0"/>
 
     <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
 
     <g id="SVGRepo_iconCarrier">
 
-    <path fill={dashboardMenuColor} d="M640 384v256H384V384h256zm64 0h192v256H704V384zm-64 512H384V704h256v192zm64 0V704h192v192H704zm-64-768v192H384V128h256zm64 0h192v192H704V128zM320 384v256H128V384h192zm0 512H128V704h192v192zm0-768v192H128V128h192z"/>
+    <path fill={toggleMenuColor} d="M640 384v256H384V384h256zm64 0h192v256H704V384zm-64 512H384V704h256v192zm64 0V704h192v192H704zm-64-768v192H384V128h256zm64 0h192v192H704V128zM320 384v256H128V384h192zm0 512H128V704h192v192zm0-768v192H128V128h192z"/>
     </g>
 </svg>

package/dist/components/Modules/Layout/Header/gridIcon.svelte.d.ts

@@ -4,10 +4,10 @@ type GridIcon = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const GridIcon: import("svelte").Component<{
-    dashboardMenuSize: any;
-    dashboardMenuColor: any;
+    toggleMenuColor: any;
+    toggleMenuSize: any;
 }, {}, "">;
 type $$ComponentProps = {
-    dashboardMenuSize: any;
-    dashboardMenuColor: any;
+    toggleMenuColor: any;
+    toggleMenuSize: any;
 };

package/dist/components/Modules/Layout/Header/hamburger.svelte

@@ -0,0 +1,10 @@
+<script>
+    let { 
+        toggleMenuColor,
+    } = $props();
+</script>
+<div>
+    <div class="bar" style="background-color: {toggleMenuColor};"></div>
+    <div class="bar" style="background-color: {toggleMenuColor};"></div>
+    <div class="bar" style="background-color: {toggleMenuColor};"></div>
+</div>

package/dist/components/Modules/Layout/Header/hamburger.svelte.d.ts

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

package/dist/components/Modules/Layout/Header/header.css

@@ -10,7 +10,6 @@
   width: 30px;
   height: 3px;
   margin: 4px auto;
-  background-color: var(--hamburger);
   border-radius: 5px;
   transition: 0.3s;
 }

package/dist/components/Modules/Layout/Header/header.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {buttonRipple} from '../../../../index.js';
   import GridIcon from './gridIcon.svelte';
+  import Hamburger from './hamburger.svelte';
   import './header.css';
    const {
     headerTitle,
@@ -10,13 +11,13 @@
     toggleMenu = (() => {}),
     headerCenterContent,
     headerRightContent,
-    dashboardMenuColor, 
-    dashboardMenuSize,
-    dashboardMenu,
+    toggleMenuColor,
+    toggleMenuSize,
+    gridToggle
   } = $props();
 
   function conditionalRipple(node: HTMLElement) {
-    if (dashboardMenu) {
+    if (gridToggle) {
       return buttonRipple(node);
     }
   }
@@ -35,13 +36,11 @@
   <div>{@render headerCenterContent?.()}</div>
   <div style="display: flex; gap: 1rem; align-items: center;">
     {@render headerRightContent?.()}
-    <button use:conditionalRipple onclick={toggleMenu} title="Menu" style="margin-right: 1rem;">
-      {#if dashboardMenu}
-        <GridIcon {dashboardMenuColor} {dashboardMenuSize} />
+    <button use:conditionalRipple onclick={toggleMenu} title="Menu" style="display:flex;align-items:center;justify-content:center;margin-right: 1rem; height:40px; width:40px;">
+      {#if gridToggle}
+        <GridIcon {toggleMenuColor} {toggleMenuSize} />
       {:else} 
-        <div class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
+        <Hamburger {toggleMenuColor} />
       {/if}
     </button>
   </div>

package/dist/components/Modules/Layout/Header/header.svelte.d.ts

@@ -7,9 +7,9 @@ declare const Header: import("svelte").Component<{
     toggleMenu?: any;
     headerCenterContent: any;
     headerRightContent: any;
-    dashboardMenuColor: any;
-    dashboardMenuSize: any;
-    dashboardMenu: any;
+    toggleMenuColor: any;
+    toggleMenuSize: any;
+    gridToggle: any;
 }, {}, "">;
 type Header = ReturnType<typeof Header>;
 export default Header;

package/dist/components/Modules/Layout/main.svelte

@@ -18,9 +18,9 @@
 		headerCenterContent = null,
 		headerRightContent = null,
 		paddingOff = false,
-		dashboardMenu = false, 
-		dashboardMenuColor = 'var(--text)',
-		dashboardMenuSize = "30px",
+		gridToggle = false, 
+		toggleMenuColor = 'var(--hamburger)',
+		toggleMenuSize = "25px",
 	} = $props();
 
 
@@ -80,9 +80,9 @@
 		{toggleMenu}
 		{headerCenterContent}
 		{headerRightContent}
-		{dashboardMenuColor}
-		{dashboardMenuSize}
-		{dashboardMenu}
+		{toggleMenuColor}
+		{toggleMenuSize}
+		{gridToggle}
 	/>
 	{#if $isLoading}<LinearProgress />{/if}
 	<div id="sierra-layout">

package/dist/components/Modules/Layout/main.svelte.d.ts

@@ -14,9 +14,9 @@ declare const Main: import("svelte").Component<{
     headerCenterContent?: any;
     headerRightContent?: any;
     paddingOff?: boolean;
-    dashboardMenu?: boolean;
-    dashboardMenuColor?: string;
-    dashboardMenuSize?: string;
+    gridToggle?: boolean;
+    toggleMenuColor?: string;
+    toggleMenuSize?: string;
 }, {}, "">;
 type $$ComponentProps = {
     children: any;
@@ -29,7 +29,7 @@ type $$ComponentProps = {
     headerCenterContent?: any;
     headerRightContent?: any;
     paddingOff?: boolean;
-    dashboardMenu?: boolean;
-    dashboardMenuColor?: string;
-    dashboardMenuSize?: string;
+    gridToggle?: boolean;
+    toggleMenuColor?: string;
+    toggleMenuSize?: string;
 };

package/dist/index.d.ts

@@ -40,6 +40,6 @@ export { editorStore, resetEditorStore } from './stores/modules/editor.js';
 export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
 export type { FileInputStoreMediaItem } from './stores/modules/fileInput.js';
 export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modules/toast.js';
-export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES } from './Hooks/preview.js';
+export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES, IMAGE_MIME_TYPES_PREVIEW } from './Hooks/preview.js';
 export { validateLayoutMenuSections } from './Hooks/layout_menu.js';
 export { buttonRipple } from './Hooks/button.js';

package/dist/index.js

@@ -52,6 +52,6 @@ export { editorStore, resetEditorStore } from './stores/modules/editor.js';
 export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
 export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modules/toast.js';
 //#######################HOOKS/UTILS########################
-export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES } from './Hooks/preview.js';
+export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES, IMAGE_MIME_TYPES_PREVIEW } from './Hooks/preview.js';
 export { validateLayoutMenuSections } from './Hooks/layout_menu.js';
 export { buttonRipple } from './Hooks/button.js';

package/package.json

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