@sierra-95/svelte-scaffold 1.0.1

package/README.md

@@ -0,0 +1,8 @@
+# @sierra-95/svelte-scaffold
+[![Alt text](https://files.michaelmachohi.com/logos/michaelmachohi.favicon.png)](https://michaelmachohi.com)
+[![npm version](https://img.shields.io/npm/v/@sierra-95/svelte-scaffold.svg)](https://www.npmjs.com/package/@sierra-95/svelte-scaffold)
+[![npm downloads](https://img.shields.io/npm/dm/@sierra-95/svelte-scaffold.svg)](https://www.npmjs.com/package/@sierra-95/svelte-ui)
+
+## Documentation
+Full documentation: [https://svelte.michaelmachohi.com](https://svelte.michaelmachohi.com)
+

package/dist/Hooks/layout_menu.d.ts

@@ -0,0 +1 @@
+export declare function validateLayoutMenuSections(sections: Array<any>): void;

package/dist/Hooks/layout_menu.js

@@ -0,0 +1,24 @@
+import { setToastMessage } from '../index.js';
+export function validateLayoutMenuSections(sections) {
+    const seenPaths = new Set();
+    for (const section of sections) {
+        for (const item of section.items) {
+            // Skip items that aren't parents
+            if (!item.children)
+                continue;
+            // Check for missing id
+            if (!item.id) {
+                setToastMessage('warning', `Parent item "${item.label}" with path "${item.path}" is missing an 'id'. Each parent must have a unique 'id'.`);
+                console.warn(`Missing id on parent item:`, item);
+            }
+            // Check for duplicate paths
+            if (seenPaths.has(item.path)) {
+                setToastMessage('warning', `Duplicate parent path detected: "${item.path}". Each parent must have a unique path.`);
+                console.warn(`Duplicate parent path: "${item.path}"`, item);
+            }
+            else {
+                seenPaths.add(item.path);
+            }
+        }
+    }
+}

package/dist/Hooks/preview.d.ts

@@ -0,0 +1,3 @@
+export declare function getPreviewUrlForMedia(file: File): string;
+export declare function toggleSelectForMedia(id: string, url: string, urlsOnly: boolean): void;
+export declare function removeFileForMedia(index: number, e: Event): void;

package/dist/Hooks/preview.js

@@ -0,0 +1,24 @@
+import { fileInputStore } from '../index.js';
+export function getPreviewUrlForMedia(file) {
+    return URL.createObjectURL(file);
+}
+export function toggleSelectForMedia(id, url, urlsOnly) {
+    if (!urlsOnly)
+        return;
+    fileInputStore.update(state => {
+        const index = state.submissions.findIndex(item => item.id === id);
+        return {
+            ...state,
+            submissions: index === -1
+                ? [...state.submissions, { id, url }] // select
+                : state.submissions.filter(item => item.id !== id) // deselect
+        };
+    });
+}
+export function removeFileForMedia(index, e) {
+    e.stopPropagation();
+    fileInputStore.update(state => ({
+        ...state,
+        selectedFiles: state.selectedFiles.filter((_, i) => i !== index)
+    }));
+}

package/dist/components/Core/Alerts/Backdrop/backdrop.svelte

@@ -0,0 +1,27 @@
+<script>
+    let { 
+        open = $bindable(false),
+        zIndex = 15,
+		children
+	} = $props();
+</script>
+<style>
+    #sierra-blur {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        backdrop-filter: blur(2px);
+  }
+</style>
+{#if open}
+    <div id="sierra-blur" style="z-index: {zIndex};">
+        {@render children?.()}
+    </div>
+{/if}

package/dist/components/Core/Alerts/Backdrop/backdrop.svelte.d.ts

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

package/dist/components/Core/Alerts/Modal/modal.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { modalStore, Button, Backdrop, Wrapper, resetModalStore} from '../../../../index.js';
+  import { onMount } from 'svelte';
+
+  function close() {
+    resetModalStore();
+  }
+  /**
+	 * @param {{ key: string; }} e
+	 */
+  function handleKeydown(e) {
+    if (e.key === 'Escape') close();
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+    return () => window.removeEventListener('keydown', handleKeydown);
+  });
+</script>
+
+
+<Backdrop bind:open={$modalStore.open} zIndex={20}>
+  <Wrapper>
+    <h2 style="font-size: 1.3rem;">{$modalStore.title}</h2>
+    {#if $modalStore?.content}
+      <h3 style="font-size: 1rem;">{$modalStore.content}</h3>
+    {/if}
+    {@render $modalStore.render?.()}
+    <div style="display: flex; gap: 30px; margin-top: 20px;">
+      <Button onclick={() => { $modalStore.onConfirm?.(); close();}}>
+      {$modalStore.confirmText}
+      </Button>
+      {#if $modalStore.cancelText}
+          <button onclick={() => {$modalStore.onCancel?.();close();}}
+          >{$modalStore.cancelText}
+          </button>
+      {/if}
+    </div>
+  </Wrapper>
+</Backdrop>

package/dist/components/Core/Alerts/Modal/modal.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Modal;
+type Modal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Modal: $$__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/Core/Alerts/Toast/toast.css

@@ -0,0 +1,39 @@
+#toast{
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    width: 300px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-left: 6px solid var(--retval);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+    background-color: var(--background-secondary);
+    z-index: 25;
+}
+#toast div:nth-child(1){
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: bold;
+    color: var(--retval);
+    padding: 5px 5px 5px 10px;
+}
+#toast div:nth-child(1) div{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+#toast div:nth-child(2){
+    padding: 0px 5px 5px 20px; 
+}
+#toast p {
+    max-width: 250px;
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: normal;
+}
+#toast i.fa-times{
+    color: var(--text);
+    cursor: pointer;
+    padding-right: 20px;
+}

package/dist/components/Core/Alerts/Toast/toast.svelte

@@ -0,0 +1,32 @@
+<script>
+	import './toast.css';
+    import {toastCarrier, clearToastMessage} from '../../../../index.js';
+
+    const statusClass = {
+		info: 'var(--primary-bg)',
+		success: 'var(--primary-bg)',
+		error: 'var(--error-bg)',
+		warning: 'var(--warning-bg)'
+	};
+	$: retval = statusClass[$toastCarrier.status]
+</script>
+{#if $toastCarrier.message}
+	<div id="toast" style="--retval: {retval};">
+		<div>
+			<div>
+				{#if $toastCarrier.status === 'info'}
+					<i class="fa-solid fa-circle-info"></i>
+				{:else if $toastCarrier.status === 'success'}
+					<i class="fa-solid fa-circle-check"></i>
+				{:else if $toastCarrier.status === 'error'}
+					<i class="fa-solid fa-circle-xmark"></i>
+				{:else if $toastCarrier.status === 'warning'}
+					<i class="fa-solid fa-triangle-exclamation"></i>
+				{/if}
+				<p>{$toastCarrier.status}</p>
+			</div>
+			<i on:click={clearToastMessage} role="none" class="fa-solid fa-times"></i>
+		</div>
+		<div>{ $toastCarrier.message }</div>
+	</div>
+{/if}

package/dist/components/Core/Alerts/Toast/toast.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Toast;
+type Toast = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Toast: $$__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/Core/Alerts/Wrapper/wrapper.svelte

@@ -0,0 +1,19 @@
+<script>
+    let { 
+        padding = '20px',
+        minHeight = '100px',
+        maxWidth = '500px',
+		children
+	} = $props();
+</script>
+<style>
+    #sierra-wrapper {
+        background-color: var(--background-secondary);
+        border-radius: 5px;
+        box-shadow: var(--box-shadow);
+        width: 100%;
+    }
+</style>
+<div id="sierra-wrapper" role='none' style="max-width: {maxWidth}; min-height: {minHeight}; padding: {padding};" onclick={e => e.stopPropagation()}>
+    {@render children?.()}
+</div>

package/dist/components/Core/Alerts/Wrapper/wrapper.svelte.d.ts

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

package/dist/components/Core/Alerts/site-under-maintenance/site-under-maintenance.svelte

@@ -0,0 +1,34 @@
+<script>
+  const {email} = $props();
+</script>
+<style>        
+  #maintenance {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 1rem;
+    z-index: 5;
+    backdrop-filter: blur(2px);
+    color: white;
+  }
+  #maintenance a{
+    text-decoration: underline;
+  }
+</style>
+  
+<div id="maintenance">
+      <h1>Under Construction</h1>
+      <p>This site is still being built and will be available soon. Thanks for your patience.</p>
+      <p>
+      Need immediate assistance?<br>
+      Contact <a href="mailto:{email}">{email}</a>
+    </p>
+</div>

package/dist/components/Core/Alerts/site-under-maintenance/site-under-maintenance.svelte.d.ts

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

package/dist/components/Core/Form/Hr/hr.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    export let width: string = "100%";
+    export let color: string = "var(--text-tertiary)";
+</script>
+
+<style>
+    #sierra-hr {
+        margin: auto;
+    }
+</style>
+<hr id="sierra-hr" style="width: {width}; color: {color};"/>

package/dist/components/Core/Form/Hr/hr.svelte.d.ts

@@ -0,0 +1,21 @@
+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 Hr: $$__sveltets_2_IsomorphicComponent<{
+    width?: string;
+    color?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Hr = InstanceType<typeof Hr>;
+export default Hr;

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

@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { onDestroy } from 'svelte';
+    import {fileInputStore, Button, setToastMessage} 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' | 'pdf', string[]> = {
+        image: ['image/'],
+        audio: ['audio/'],
+        video: ['video/'],
+        pdf: ['application/pdf']
+    };
+
+
+    //Validate and add files
+    function isAllowedType(file: File): boolean {
+        return $fileInputStore.uploadType.some(type =>
+            typeMap[type].some(prefix => file.type.startsWith(prefix))
+        );
+    }
+
+    function validateAndAddFile(file: File) {
+        if (!isAllowedType(file)) {
+            setToastMessage('error', `"${file.name}" is not an allowed file type`);
+            return;
+        }
+
+        if (file.size > $fileInputStore.sizeConstraint) {
+            setToastMessage('error', `"${file.name}" exceeds the allowed file size`);
+            return;
+        }
+
+        fileInputStore.update(state => ({
+            ...state,
+            selectedFiles: [...state.selectedFiles, file]
+        }));
+    }
+
+
+    //Handle file selection via input
+    function handleFileChange(event: Event) {
+        const files = (event.target as HTMLInputElement).files;
+        if (!files || files.length === 0) return;
+
+        for (const file of files) {
+            validateAndAddFile(file);
+        }
+    }
+
+    //Handle drag and drop
+    function handleDrop(event: DragEvent) {
+        event.preventDefault();
+        if (!event.dataTransfer?.files.length) return;
+
+        for (const file of event.dataTransfer.files) {
+            validateAndAddFile(file);
+        }
+
+    }
+
+    function handleDragOver(event: DragEvent) {
+        event.preventDefault();
+    }
+
+    //Delete selected files
+    function handleClear() {
+        fileInputStore.update(state => ({
+            ...state,
+            selectedFiles: []
+        }));
+        if (fileInput) {
+            fileInput.value = '';
+        }
+
+    }
+
+    onDestroy(() => {
+        handleClear();
+    });
+
+</script>
+
+<main style="padding: 1rem; height: 100%; min-height: {minHeight};">
+    <input
+        bind:this={fileInput}
+        type="file"
+        accept={$fileInputStore.uploadType
+            .map(t => (t === 'pdf' ? 'application/pdf' : `${t}/*`))
+            .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 
+            onclick={(e: MouseEvent) => {
+                rest.onclick?.(e);
+            }}
+            isLoading={processing}
+            disabled={$fileInputStore.selectedFiles.length === 0}
+        >Upload</Button>
+    </div>
+</main>

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

@@ -0,0 +1,6 @@
+declare const FileInput: import("svelte").Component<{
+    processing?: boolean;
+    minHeight?: string;
+} & Record<string, any>, {}, "processing">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import {fileInputStore, PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo} from '../../../../../index.js';
+
+
+    $: media = {
+        Audio:  $fileInputStore.selectedFiles.filter(file =>
+            file.type.startsWith('audio/')
+        ),
+        Documents: $fileInputStore.selectedFiles.filter(
+            file => file.type === 'application/pdf'
+        ),
+        Images: $fileInputStore.selectedFiles.filter(file =>
+            file.type.startsWith('image/')
+        ),
+        Videos: $fileInputStore.selectedFiles.filter(file =>
+            file.type.startsWith('video/')
+        )
+    };
+</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}
+</div>

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

@@ -0,0 +1,18 @@
+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;
+}
+declare const Preview: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Preview = InstanceType<typeof Preview>;
+export default Preview;

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

@@ -0,0 +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 id="sierra-input" for={id}>{label}
+  <input 
+    id={id} 
+    name={id} 
+    type={type} 
+    bind:value={value}
+    placeholder={placeholder}
+  />
+</label>

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

@@ -0,0 +1,24 @@
+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 Input: $$__sveltets_2_IsomorphicComponent<{
+    id?: string;
+    label?: string;
+    value?: string | number;
+    type?: string;
+    placeholder?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

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

@@ -0,0 +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 id="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>