@sierra-95/svelte-scaffold 1.0.7 → 1.0.9

package/README.md

@@ -1,8 +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)
-
+# @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/preview.d.ts

@@ -1,3 +1,4 @@
 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;
+export declare const DOCUMENT_MIME_TYPES: Set<string>;

package/dist/Hooks/preview.js

@@ -22,3 +22,10 @@ export function removeFileForMedia(index, e) {
         selectedFiles: state.selectedFiles.filter((_, i) => i !== index)
     }));
 }
+export const DOCUMENT_MIME_TYPES = new Set([
+    'application/pdf',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.ms-excel',
+    'text/plain'
+]);

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

@@ -1,27 +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>
+<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/Modal/modal.svelte

@@ -1,40 +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>
+<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/Toast/toast.css

@@ -1,39 +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;
+#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

@@ -1,32 +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}
+<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/Wrapper/wrapper.svelte

@@ -1,19 +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?.()}
+<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/site-under-maintenance/site-under-maintenance.svelte

@@ -1,34 +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>
+<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/Form/Hr/hr.svelte

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