@sierra-95/svelte-scaffold 1.0.9 → 1.0.10

package/dist/components/Core/Form/Input/FileInput/fileInput.svelte

@@ -1,159 +1,159 @@
-<script lang="ts">
-    import { onDestroy } from 'svelte';
-    import {fileInputStore, Button, setToastMessage, DOCUMENT_MIME_TYPES} from '../../../../../index.js'
-    import Preview from './preview.svelte';
-
-    const {
-        processing=$bindable(false),
-        minHeight = '300px',
-        ...rest
-    } = $props();
-
-    let fileInput: HTMLInputElement;
-
-    const typeMap: Record<'image' | 'audio' | 'video' | 'documents' | 'others', string[]> = {
-        image: ['image/'],
-        audio: ['audio/'],
-        video: ['video/'],
-        documents: Array.from(DOCUMENT_MIME_TYPES),
-        others: []
-    };
-
-    //Validate and add files
-    function isAllowedType(file: File): boolean {
-        return $fileInputStore.uploadType.some(type => {
-            if (type === 'others') return true;
-            const prefixes = typeMap[type];
-            return prefixes.some(prefix => file.type.startsWith(prefix));
-        });
-    }
-
-    function allowedTypes(){
-        const allowedTypes = $fileInputStore.uploadType
-            .filter(t => t !== 'others') 
-            .map(t => {
-                if (t === 'documents') return 'Documents (PDF, Word, Excel, TXT)';
-                return t.charAt(0).toUpperCase() + t.slice(1);
-            })
-            .join(', ');
-        return allowedTypes;
-    }
-
-    function processFiles(files: FileList | File[]) {
-        const validFiles: File[] = [];
-
-        for (const file of files) {
-            if (!isAllowedType(file)) {
-                setToastMessage(
-                    'error',
-                    `"${file.name}" is not an allowed file type. Allowed types: ${allowedTypes()}`
-                );
-                continue; // skip invalid
-            }
-
-            if (file.size > $fileInputStore.sizeConstraint) {
-                setToastMessage(
-                    'error',
-                    `"${file.name}" exceeds the allowed file size`
-                );
-                continue; // skip oversized
-            }
-            validFiles.push(file); 
-        }
-
-        if (validFiles.length > 0) {
-            fileInputStore.update(state => ({
-                ...state,
-                selectedFiles: [...state.selectedFiles, ...validFiles]
-            }));
-        }
-        clearInput();
-    }
-
-
-
-    //Handle file selection via input
-    function handleFileChange(event: Event) {
-        const files = (event.target as HTMLInputElement).files;
-        if (!files || files.length === 0) return;
-        processFiles(files);
-    }
-
-    //Handle drag and drop
-    function handleDrop(event: DragEvent) {
-        event.preventDefault();
-        if (!event.dataTransfer?.files.length) return;
-        processFiles(event.dataTransfer.files);
-    }
-
-    function handleDragOver(event: DragEvent) {
-        event.preventDefault();
-    }
-
-    function clearInput() {
-        if (fileInput) {
-            fileInput.value = '';
-        }
-    }
-    //Delete selected files
-    function handleClear() {
-        fileInputStore.update(state => ({
-            ...state,
-            selectedFiles: []
-        }));
-        clearInput();
-    }
-
-    onDestroy(() => {
-        handleClear();
-    });
-
-</script>
-
-<main style="padding: 1rem; height: 100%; min-height: {minHeight};">
-    <input
-        bind:this={fileInput}
-        type="file"
-        accept={$fileInputStore.uploadType
-            .map(t => {
-                if (t === 'documents') return Array.from(DOCUMENT_MIME_TYPES).join(',');
-                if (t === 'others') return '';
-                return `${t}/*`;
-            })
-            .filter(Boolean)
-            .join(',')
-        }
-        hidden
-        multiple
-        onchange={handleFileChange}
-    />
-    <div
-        role="none"
-        ondrop={handleDrop}
-        ondragover={handleDragOver}
-        style="border: 2px dotted var(--text-tertiary);border-radius: 0.5rem; padding: 2rem; text-align: center; cursor: pointer;"
-        onclick={() => fileInput.click()}
-    >Drag & drop image here or click to choose file
-    </div>
-
-    <Preview />
-
-    <div style="display: flex; justify-content: flex-end; gap: 2rem; margin-top: 1rem;">
-        {#if $fileInputStore.selectedFiles.length > 0}
-            <Button
-                variant="outlined"
-                color="warning"
-                onclick={handleClear}
-            >Clear All
-            </Button>
-        {/if}
-        <Button 
-            endIcon="fa-cloud-arrow-up"
-            onclick={(e: MouseEvent) => {
-                rest.onclick?.(e);
-            }}
-            isLoading={processing}
-            disabled={$fileInputStore.selectedFiles.length === 0}
-        >Upload</Button>
-    </div>
+<script lang="ts">
+    import { onDestroy } from 'svelte';
+    import {fileInputStore, Button, setToastMessage, DOCUMENT_MIME_TYPES} from '../../../../../index.js'
+    import Preview from './preview.svelte';
+
+    const {
+        processing=$bindable(false),
+        minHeight = '300px',
+        ...rest
+    } = $props();
+
+    let fileInput: HTMLInputElement;
+
+    const typeMap: Record<'image' | 'audio' | 'video' | 'documents' | 'others', string[]> = {
+        image: ['image/'],
+        audio: ['audio/'],
+        video: ['video/'],
+        documents: Array.from(DOCUMENT_MIME_TYPES),
+        others: []
+    };
+
+    //Validate and add files
+    function isAllowedType(file: File): boolean {
+        return $fileInputStore.uploadType.some(type => {
+            if (type === 'others') return true;
+            const prefixes = typeMap[type];
+            return prefixes.some(prefix => file.type.startsWith(prefix));
+        });
+    }
+
+    function allowedTypes(){
+        const allowedTypes = $fileInputStore.uploadType
+            .filter(t => t !== 'others') 
+            .map(t => {
+                if (t === 'documents') return 'Documents (PDF, Word, Excel, TXT)';
+                return t.charAt(0).toUpperCase() + t.slice(1);
+            })
+            .join(', ');
+        return allowedTypes;
+    }
+
+    function processFiles(files: FileList | File[]) {
+        const validFiles: File[] = [];
+
+        for (const file of files) {
+            if (!isAllowedType(file)) {
+                setToastMessage(
+                    'error',
+                    `"${file.name}" is not an allowed file type. Allowed types: ${allowedTypes()}`
+                );
+                continue; // skip invalid
+            }
+
+            if (file.size > $fileInputStore.sizeConstraint) {
+                setToastMessage(
+                    'error',
+                    `"${file.name}" exceeds the allowed file size`
+                );
+                continue; // skip oversized
+            }
+            validFiles.push(file); 
+        }
+
+        if (validFiles.length > 0) {
+            fileInputStore.update(state => ({
+                ...state,
+                selectedFiles: [...state.selectedFiles, ...validFiles]
+            }));
+        }
+        clearInput();
+    }
+
+
+
+    //Handle file selection via input
+    function handleFileChange(event: Event) {
+        const files = (event.target as HTMLInputElement).files;
+        if (!files || files.length === 0) return;
+        processFiles(files);
+    }
+
+    //Handle drag and drop
+    function handleDrop(event: DragEvent) {
+        event.preventDefault();
+        if (!event.dataTransfer?.files.length) return;
+        processFiles(event.dataTransfer.files);
+    }
+
+    function handleDragOver(event: DragEvent) {
+        event.preventDefault();
+    }
+
+    function clearInput() {
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    }
+    //Delete selected files
+    function handleClear() {
+        fileInputStore.update(state => ({
+            ...state,
+            selectedFiles: []
+        }));
+        clearInput();
+    }
+
+    onDestroy(() => {
+        handleClear();
+    });
+
+</script>
+
+<main style="padding: 1rem; height: 100%; min-height: {minHeight};">
+    <input
+        bind:this={fileInput}
+        type="file"
+        accept={$fileInputStore.uploadType
+            .map(t => {
+                if (t === 'documents') return Array.from(DOCUMENT_MIME_TYPES).join(',');
+                if (t === 'others') return '';
+                return `${t}/*`;
+            })
+            .filter(Boolean)
+            .join(',')
+        }
+        hidden
+        multiple
+        onchange={handleFileChange}
+    />
+    <div
+        role="none"
+        ondrop={handleDrop}
+        ondragover={handleDragOver}
+        style="border: 2px dotted var(--text-tertiary);border-radius: 0.5rem; padding: 2rem; text-align: center; cursor: pointer;"
+        onclick={() => fileInput.click()}
+    >Drag & drop image here or click to choose file
+    </div>
+
+    <Preview />
+
+    <div style="display: flex; justify-content: flex-end; gap: 2rem; margin-top: 1rem;">
+        {#if $fileInputStore.selectedFiles.length > 0}
+            <Button
+                variant="outlined"
+                color="warning"
+                onclick={handleClear}
+            >Clear All
+            </Button>
+        {/if}
+        <Button 
+            endIcon="fa-cloud-arrow-up"
+            onclick={(e: MouseEvent) => {
+                rest.onclick?.(e);
+            }}
+            isLoading={processing}
+            disabled={$fileInputStore.selectedFiles.length === 0}
+        >Upload</Button>
+    </div>
 </main>

package/dist/components/Core/Form/Input/FileInput/preview.svelte

@@ -1,51 +1,51 @@
-<script lang="ts">
-    import {fileInputStore, PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo, PreviewGenericFile, DOCUMENT_MIME_TYPES} from '../../../../../index.js';
-
-    function getMediaCategory(file: File):
-        'Audio' | 'Documents' | 'Images' | 'Videos' | 'Others' {
-
-        if (file.type.startsWith('audio/')) return 'Audio';
-        if (file.type.startsWith('image/')) return 'Images';
-        if (file.type.startsWith('video/')) return 'Videos';
-        if (DOCUMENT_MIME_TYPES.has(file.type)) return 'Documents';
-
-        return 'Others';
-    }
-
-    $: media = $fileInputStore.selectedFiles.reduce(
-        (acc, file) => {
-            acc[getMediaCategory(file)].push(file);
-            return acc;
-        },
-        {
-            Audio: [] as File[],
-            Documents: [] as File[],
-            Images: [] as File[],
-            Videos: [] as File[],
-            Others: [] as File[],
-        }
-    );
-</script>
-
-<div style="max-height: 300px; overflow-y: auto; padding: 0.5rem;">
-    {#if media.Audio.length > 0}
-        <h3 style="margin: 1rem 0rem;">Audio</h3>
-        <PreviewAudio buttonTimes urlsOnly={false} {media}/>
-    {/if}
-    {#if media.Documents.length > 0}
-        <h3 style="margin: 1rem 0rem;">Documents</h3>
-        <PreviewDocument buttonTimes urlsOnly={false} {media}/>
-    {/if}
-    {#if media.Images.length > 0}
-        <h3 style="margin: 1rem 0rem;">Images</h3>
-        <PreviewImage buttonTimes urlsOnly={false} {media}/>
-    {/if}
-    {#if media.Videos.length > 0}
-        <h3 style="margin: 1rem 0rem;">Videos</h3>
-        <PreviewVideo buttonTimes urlsOnly={false} {media}/>
-    {/if}
-    {#if media.Others.length > 0}
-        <h3 style="margin: 1rem 0rem;">Other Files</h3>
-        <PreviewGenericFile buttonTimes urlsOnly={false} {media}/>
-    {/if}
+<script lang="ts">
+    import {fileInputStore, PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo, PreviewGenericFile, DOCUMENT_MIME_TYPES} from '../../../../../index.js';
+
+    function getMediaCategory(file: File):
+        'Audio' | 'Documents' | 'Images' | 'Videos' | 'Others' {
+
+        if (file.type.startsWith('audio/')) return 'Audio';
+        if (file.type.startsWith('image/')) return 'Images';
+        if (file.type.startsWith('video/')) return 'Videos';
+        if (DOCUMENT_MIME_TYPES.has(file.type)) return 'Documents';
+
+        return 'Others';
+    }
+
+    $: media = $fileInputStore.selectedFiles.reduce(
+        (acc, file) => {
+            acc[getMediaCategory(file)].push(file);
+            return acc;
+        },
+        {
+            Audio: [] as File[],
+            Documents: [] as File[],
+            Images: [] as File[],
+            Videos: [] as File[],
+            Others: [] as File[],
+        }
+    );
+</script>
+
+<div style="max-height: 300px; overflow-y: auto; padding: 0.5rem;">
+    {#if media.Audio.length > 0}
+        <h3 style="margin: 1rem 0rem;">Audio</h3>
+        <PreviewAudio buttonTimes urlsOnly={false} {media}/>
+    {/if}
+    {#if media.Documents.length > 0}
+        <h3 style="margin: 1rem 0rem;">Documents</h3>
+        <PreviewDocument buttonTimes urlsOnly={false} {media}/>
+    {/if}
+    {#if media.Images.length > 0}
+        <h3 style="margin: 1rem 0rem;">Images</h3>
+        <PreviewImage buttonTimes urlsOnly={false} {media}/>
+    {/if}
+    {#if media.Videos.length > 0}
+        <h3 style="margin: 1rem 0rem;">Videos</h3>
+        <PreviewVideo buttonTimes urlsOnly={false} {media}/>
+    {/if}
+    {#if media.Others.length > 0}
+        <h3 style="margin: 1rem 0rem;">Other Files</h3>
+        <PreviewGenericFile buttonTimes urlsOnly={false} {media}/>
+    {/if}
 </div>

package/dist/components/Core/Form/Input/SearchBar/search.svelte

@@ -1,69 +1,69 @@
-<script lang="ts">
-    import {isMobile} from '../../../../../index.js';
-    let {
-        width = '250px',
-        height = '30px',
-        value = $bindable(''),
-        placeholder = 'Search',
-        isVisible = $bindable(!$isMobile),
-        ...rest
-    } = $props();
-
-    $effect(() => {
-        isVisible = $isMobile ? false : true;
-    });
-</script>
-<style>
-    #sierra-search-bar #sierra-search-input{
-        width: 100%;
-        height: 100%;
-        border-top-left-radius: 25px;
-        border-bottom-left-radius: 25px;
-        background: transparent;
-        border: 1px solid var(--input-border);
-        border-right: none;
-    }
-    #sierra-search-bar div{
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 0px 10px 0px 0px; /*top right bottom left */
-        height: 100%;
-        border: 1px solid var(--input-border);
-        border-left: none;
-        border-top-right-radius: 25px;
-        border-bottom-right-radius: 25px;
-    }
-</style>
-<main id="sierra-search-bar"
-    style="
-        height: {height}; 
-        width: {width}; {isVisible? 'display:flex;' :  'display:none;'}
-        transform: translateX({isVisible && isMobile ? '0' : '100%'});
-        opacity: {isVisible && isMobile ? 1 : 0};
-        transition: transform 0.3s ease, opacity 0.3s ease;
-    ">
-    <input
-        id="sierra-search-input"
-        type="text"
-        bind:value={value}
-        placeholder={placeholder}
-    />
-    <div>
-        {#if value}
-            <button aria-label="Clear search" onclick={() => value = ''} style="color: var(--primary-bg);">
-                <i class="fa fa-times-circle"></i>
-            </button>
-        {/if}
-        <button 
-            aria-label="Search"
-            onclick={(e: MouseEvent) => {
-                rest.onclick?.(e);
-            }}
-        ><i class="fa fa-search"></i>
-        </button>
-    </div>
-</main>
-<button aria-label="Show search bar" onclick={() => isVisible = true} style="{isVisible? 'display:none;' : ''}">
-    <i class="fa fa-search"></i>
+<script lang="ts">
+    import {isMobile} from '../../../../../index.js';
+    let {
+        width = '250px',
+        height = '30px',
+        value = $bindable(''),
+        placeholder = 'Search',
+        isVisible = $bindable(!$isMobile),
+        ...rest
+    } = $props();
+
+    $effect(() => {
+        isVisible = $isMobile ? false : true;
+    });
+</script>
+<style>
+    #sierra-search-bar #sierra-search-input{
+        width: 100%;
+        height: 100%;
+        border-top-left-radius: 25px;
+        border-bottom-left-radius: 25px;
+        background: transparent;
+        border: 1px solid var(--input-border);
+        border-right: none;
+    }
+    #sierra-search-bar div{
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 0px 10px 0px 0px; /*top right bottom left */
+        height: 100%;
+        border: 1px solid var(--input-border);
+        border-left: none;
+        border-top-right-radius: 25px;
+        border-bottom-right-radius: 25px;
+    }
+</style>
+<main id="sierra-search-bar"
+    style="
+        height: {height}; 
+        width: {width}; {isVisible? 'display:flex;' :  'display:none;'}
+        transform: translateX({isVisible && isMobile ? '0' : '100%'});
+        opacity: {isVisible && isMobile ? 1 : 0};
+        transition: transform 0.3s ease, opacity 0.3s ease;
+    ">
+    <input
+        id="sierra-search-input"
+        type="text"
+        bind:value={value}
+        placeholder={placeholder}
+    />
+    <div>
+        {#if value}
+            <button aria-label="Clear search" onclick={() => value = ''} style="color: var(--primary-bg);">
+                <i class="fa fa-times-circle"></i>
+            </button>
+        {/if}
+        <button 
+            aria-label="Search"
+            onclick={(e: MouseEvent) => {
+                rest.onclick?.(e);
+            }}
+        ><i class="fa fa-search"></i>
+        </button>
+    </div>
+</main>
+<button aria-label="Show search bar" onclick={() => isVisible = true} style="{isVisible? 'display:none;' : ''}">
+    <i class="fa fa-search"></i>
 </button>

package/dist/components/Core/Form/Input/input/input.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  export let id: string = '';
-  export let label: string = '';
-  export let value: string | number = '';
-  export let type: string = 'text';
-  export let placeholder: string = '';
-</script>
-
-<label class="sierra-input" for={id}>{label}
-  <input 
-    id={id} 
-    name={id} 
-    type={type} 
-    bind:value={value}
-    placeholder={placeholder}
-  />
+<script lang="ts">
+  export let id: string = '';
+  export let label: string = '';
+  export let value: string | number = '';
+  export let type: string = 'text';
+  export let placeholder: string = '';
+</script>
+
+<label class="sierra-input" for={id}>{label}
+  <input 
+    id={id} 
+    name={id} 
+    type={type} 
+    bind:value={value}
+    placeholder={placeholder}
+  />
 </label>

package/dist/components/Core/Form/Input/password/password.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
-    export let id: string = '';
-    export let label: string = '';
-    export let value: string = '';
-    export let placeholder: string = '';
-    let show: boolean = false;
-</script>
-
-<label class="sierra-input" for={id}>{label}
-    <div style="position: relative; background-color: transparent;">
-        <input
-            style="width: 100%;"
-            type={show ? "text" : "password"} 
-            id={id} 
-            name={id}
-            bind:value={value} 
-            placeholder={placeholder}
-        />
-        <button on:click|preventDefault={() => show = !show}>
-            {#if show}
-                <i class="fa fa-eye"></i>
-            {:else}  
-                <i class="fa fa-eye-slash"></i>
-            {/if}
-        </button>
-    </div>
+<script lang="ts">
+    export let id: string = '';
+    export let label: string = '';
+    export let value: string = '';
+    export let placeholder: string = '';
+    let show: boolean = false;
+</script>
+
+<label class="sierra-input" for={id}>{label}
+    <div style="position: relative; background-color: transparent;">
+        <input
+            style="width: 100%;"
+            type={show ? "text" : "password"} 
+            id={id} 
+            name={id}
+            bind:value={value} 
+            placeholder={placeholder}
+        />
+        <button on:click|preventDefault={() => show = !show}>
+            {#if show}
+                <i class="fa fa-eye"></i>
+            {:else}  
+                <i class="fa fa-eye-slash"></i>
+            {/if}
+        </button>
+    </div>
 </label>