@sierra-95/svelte-scaffold 1.0.9 → 1.0.10

package/dist/components/Core/Menus/DropdownContainer/dropdown.svelte

@@ -1,94 +1,94 @@
-<script lang="ts">
-    import { browser } from '$app/environment';
-    import { onMount, onDestroy } from 'svelte';
-    import { scale } from 'svelte/transition';
-    import { quintOut } from 'svelte/easing';
-
-    let { 
-        top = '130%',
-        width = 'auto',
-        open = $bindable(true), 
-        dropdownTrigger = null,
-        children = null,
-    } = $props();
-
-
-    let dropdown = $state<HTMLElement | null>(null);
-    let dropdownStyle = $state({ left: '0', right: 'auto' });
-    
-    const adjustDropdownPosition = () => {
-        if (!container || !dropdown) return;
-        const rect = container.getBoundingClientRect();
-        const dropdownWidth = dropdown.offsetWidth;
-        const viewportWidth = window.innerWidth;
-
-        // Check if dropdown would overflow right
-        if (rect.left + dropdownWidth > viewportWidth) {
-            dropdownStyle = { left: 'auto', right: '0' };
-        } else {
-            dropdownStyle = { left: '0', right: 'auto' };
-        }
-    };
-
-    $effect(() => {
-        if (open) {
-            adjustDropdownPosition();
-        }
-    });
-
-    // Close dropdown on outside click
-    let container = $state<HTMLElement | null>(null);
-
-    const handleClose = () => {
-        open = false;
-    };
-    const handleDocumentClick = (event: MouseEvent) => {
-        if (open && container && !container.contains(event.target as Node)) {
-            handleClose();
-        }
-    };
-    if (browser) {
-        onMount(() => {
-            document.addEventListener('click', handleDocumentClick);
-        });
-        onDestroy(() => {
-            document.removeEventListener('click', handleDocumentClick);
-        });
-    }
-</script>
-
-<style>
-    #sierra-dropdown {
-        position: relative;
-    }
-    #sierra-dropdown .dropdown-paper {
-        position: absolute;
-        background-color: var(--background-secondary);
-        border-radius: 5px;
-        box-shadow: var(--box-shadow);
-        min-width: 5px;
-        min-height: 5px;
-        z-index: 5;
-    }
-</style>
-
-<main id="sierra-dropdown" bind:this={container}>
-    {@render dropdownTrigger?.()}
-    {#if open}
-        <div
-            bind:this={dropdown}
-            class="dropdown-paper"
-            transition:scale={{
-                start: 0.9,
-                duration: 180,
-                easing: quintOut,
-                opacity: 0
-            }}
-            style="
-                transform-origin: top; top: {top}; width: {width};
-                left: {dropdownStyle.left}; right: {dropdownStyle.right};
-            "
-        >{@render children?.()}
-        </div>
-    {/if}
-</main>
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { onMount, onDestroy } from 'svelte';
+    import { scale } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
+
+    let { 
+        top = '130%',
+        width = 'auto',
+        open = $bindable(true), 
+        dropdownTrigger = null,
+        children = null,
+    } = $props();
+
+
+    let dropdown = $state<HTMLElement | null>(null);
+    let dropdownStyle = $state({ left: '0', right: 'auto' });
+    
+    const adjustDropdownPosition = () => {
+        if (!container || !dropdown) return;
+        const rect = container.getBoundingClientRect();
+        const dropdownWidth = dropdown.offsetWidth;
+        const viewportWidth = window.innerWidth;
+
+        // Check if dropdown would overflow right
+        if (rect.left + dropdownWidth > viewportWidth) {
+            dropdownStyle = { left: 'auto', right: '0' };
+        } else {
+            dropdownStyle = { left: '0', right: 'auto' };
+        }
+    };
+
+    $effect(() => {
+        if (open) {
+            adjustDropdownPosition();
+        }
+    });
+
+    // Close dropdown on outside click
+    let container = $state<HTMLElement | null>(null);
+
+    const handleClose = () => {
+        open = false;
+    };
+    const handleDocumentClick = (event: MouseEvent) => {
+        if (open && container && !container.contains(event.target as Node)) {
+            handleClose();
+        }
+    };
+    if (browser) {
+        onMount(() => {
+            document.addEventListener('pointerdown', handleDocumentClick, true);
+        });
+        onDestroy(() => {
+            document.removeEventListener('pointerdown', handleDocumentClick, true);
+        });
+    }
+</script>
+
+<style>
+    #sierra-dropdown {
+        position: relative;
+    }
+    #sierra-dropdown .dropdown-paper {
+        position: absolute;
+        background-color: var(--background-secondary);
+        border-radius: 5px;
+        box-shadow: var(--box-shadow);
+        min-width: 5px;
+        min-height: 5px;
+        z-index: 5;
+    }
+</style>
+
+<main id="sierra-dropdown" bind:this={container}>
+    {@render dropdownTrigger?.()}
+    {#if open}
+        <div
+            bind:this={dropdown}
+            class="dropdown-paper"
+            transition:scale={{
+                start: 0.9,
+                duration: 180,
+                easing: quintOut,
+                opacity: 0
+            }}
+            style="
+                transform-origin: top; top: {top}; width: {width};
+                left: {dropdownStyle.left}; right: {dropdownStyle.right};
+            "
+        >{@render children?.()}
+        </div>
+    {/if}
+</main>

package/dist/components/Core/Menus/MenuItem/menuItem.svelte

@@ -1,44 +1,44 @@
-<script lang="ts">
-    const {
-        icon = '',
-        active = false,
-        disabled = false,
-        iconSize = '20px',
-        iconBg: iconBg = 'var(--primary-bg)',
-        children = null,
-        ...rest
-    } = $props();
-</script>
-<style>
-    #sierra-menu-item {
-        display: flex;
-        align-items: center;
-        padding: 10px 16px;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-    }
-    
-    #sierra-menu-item:hover {
-        background-color: var(--menu-item-hover);
-    }
-    #sierra-menu-item.disabled {
-        cursor: not-allowed;
-        opacity: 0.6;
-    }
-</style>
-<div
-    id="sierra-menu-item"
-    role="none" 
-    style="background-color: {active ? 'var(--menu-item-active)' : ''}"
-    class="{disabled? 'disabled':''}"
-    {...rest}
-    onclick={(e: MouseEvent) => {
-		rest.onclick?.(e);
-	}}
->
-    {#if icon}
-        <i style="font-size: {iconSize}; color: {iconBg}" 
-        class="fa {icon}"></i>
-    {/if}
-    <h4 style="margin-left: {icon ? '20px' : '0'};">{@render children?.()}</h4>
+<script lang="ts">
+    const {
+        icon = '',
+        active = false,
+        disabled = false,
+        iconSize = '20px',
+        iconBg: iconBg = 'var(--primary-bg)',
+        children = null,
+        ...rest
+    } = $props();
+</script>
+<style>
+    #sierra-menu-item {
+        display: flex;
+        align-items: center;
+        padding: 10px 16px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+    }
+    
+    #sierra-menu-item:hover {
+        background-color: var(--menu-item-hover);
+    }
+    #sierra-menu-item.disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+</style>
+<div
+    id="sierra-menu-item"
+    role="none" 
+    style="background-color: {active ? 'var(--menu-item-active)' : ''}"
+    class="{disabled? 'disabled':''}"
+    {...rest}
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+>
+    {#if icon}
+        <i style="font-size: {iconSize}; color: {iconBg}" 
+        class="fa {icon}"></i>
+    {/if}
+    <h4 style="margin-left: {icon ? '20px' : '0'};">{@render children?.()}</h4>
 </div>

package/dist/components/Core/Menus/UserMenu/profile.svelte

@@ -1,35 +1,35 @@
-<script lang="ts">
-  import {DropdownContainer} from '../../../../index.js';
-
-  let { 
-    top = '150%',
-    width = '300px',
-    iconSize = '30px',
-    iconBg = 'var(--primary-bg)',
-    user = $bindable({}),
-    open = $bindable(false),
-    children = null,
-   } = $props();
-
-  const handleClick = () => {
-    open = !open;
-  };
-</script>
-
-<DropdownContainer bind:open {top} {width}>
-    {#snippet dropdownTrigger()}
-        <button aria-label="none" onclick={handleClick}>
-          <i style="font-size: {iconSize}; color: {iconBg}" class="fa-solid fa-user"></i>
-        </button>
-    {/snippet}
-    <div style="padding:15px; border-bottom:1px solid var(--border);">
-      {#if Object.keys(user).length > 0}
-        {#each Object.entries(user) as [key, value], i}
-          <p>{value}</p>
-        {/each}
-      {:else}
-        <p>No user info</p>
-      {/if}
-    </div> 
-    {@render children?.()}
+<script lang="ts">
+  import {DropdownContainer} from '../../../../index.js';
+
+  let { 
+    top = '150%',
+    width = '300px',
+    iconSize = '30px',
+    iconBg = 'var(--primary-bg)',
+    user = $bindable({}),
+    open = $bindable(false),
+    children = null,
+   } = $props();
+
+  const handleClick = () => {
+    open = !open;
+  };
+</script>
+
+<DropdownContainer bind:open {top} {width}>
+    {#snippet dropdownTrigger()}
+        <button aria-label="none" onclick={handleClick}>
+          <i style="font-size: {iconSize}; color: {iconBg}" class="fa-solid fa-user"></i>
+        </button>
+    {/snippet}
+    <div style="padding:15px; border-bottom:1px solid var(--border);">
+      {#if Object.keys(user).length > 0}
+        {#each Object.entries(user) as [key, value], i}
+          <p>{value}</p>
+        {/each}
+      {:else}
+        <p>No user info</p>
+      {/if}
+    </div> 
+    {@render children?.()}
 </DropdownContainer>

package/dist/components/Core/others/Button/Flip/button.css

@@ -1,51 +1,51 @@
-.btn-flip {
-  position: relative;
-  display: inline-block;
-  width: 150px; /* you can fix width if needed */
-  height: 40px;
-  text-align: center;
-  perspective: 1000px;
-  color: var(--text-color);
-}
-
-.btn-flip::before,
-.btn-flip::after {
-  content: attr(data-front);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 30px;
-  line-height: 40px;
-  transition: 0.5s;
-  backface-visibility: hidden;
-  box-sizing: border-box;
-}
-
-.btn-flip::before {
-  content: attr(data-front);
-  background: var(--bg-front);
-  transform: translateY(0) rotateX(0);
-  opacity: 1;
-}
-
-.btn-flip::after {
-  content: attr(data-back);
-  background: var(--bg-back);
-  transform: translateY(-50%) rotateX(90deg);
-  opacity: 0;
-}
-
-.btn-flip:hover::before {
-  opacity: 0;
-  transform: translateY(50%) rotateX(90deg);
-}
-
-.btn-flip:hover::after {
-  opacity: 1;
-  transform: translateY(0) rotateX(0);
+.btn-flip {
+  position: relative;
+  display: inline-block;
+  width: 150px; /* you can fix width if needed */
+  height: 40px;
+  text-align: center;
+  perspective: 1000px;
+  color: var(--text-color);
+}
+
+.btn-flip::before,
+.btn-flip::after {
+  content: attr(data-front);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30px;
+  line-height: 40px;
+  transition: 0.5s;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+}
+
+.btn-flip::before {
+  content: attr(data-front);
+  background: var(--bg-front);
+  transform: translateY(0) rotateX(0);
+  opacity: 1;
+}
+
+.btn-flip::after {
+  content: attr(data-back);
+  background: var(--bg-back);
+  transform: translateY(-50%) rotateX(90deg);
+  opacity: 0;
+}
+
+.btn-flip:hover::before {
+  opacity: 0;
+  transform: translateY(50%) rotateX(90deg);
+}
+
+.btn-flip:hover::after {
+  opacity: 1;
+  transform: translateY(0) rotateX(0);
 }

package/dist/components/Core/others/Button/Flip/button.svelte

@@ -1,79 +1,79 @@
-<script lang="ts">
-    type _buttonType = 'button' | 'submit' | 'reset';
-    const {
-        back = "back",
-        front = "front",
-        bgFront = "var(--primary-bg)",
-        bgBack = "var(--primary-bg)",
-        color = "var(--button-text)",
-        title = "",
-        type = 'button' as _buttonType, 
-        disabled = false,
-        ...rest
-    } = $props();
-</script>
-<button 
-    type={type}
-    title={title}
-    disabled={disabled}
-    aria-label="Flip button" 
-    class="btn-flip" 
-    data-back={back} 
-    data-front={front}
-    style="--bg-front: {bgFront}; --bg-back: {bgBack}; --text-color: {color}"
-    onclick={(e: MouseEvent) => {
-		rest.onclick?.(e);
-	}} 
-></button>
-<style>.btn-flip {
-  position: relative;
-  display: inline-block;
-  width: 150px; /* you can fix width if needed */
-  height: 40px;
-  text-align: center;
-  perspective: 1000px;
-  color: var(--text-color);
-}
-
-.btn-flip::before,
-.btn-flip::after {
-  content: attr(data-front);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 30px;
-  line-height: 40px;
-  transition: 0.5s;
-  backface-visibility: hidden;
-  box-sizing: border-box;
-}
-
-.btn-flip::before {
-  content: attr(data-front);
-  background: var(--bg-front);
-  transform: translateY(0) rotateX(0);
-  opacity: 1;
-}
-
-.btn-flip::after {
-  content: attr(data-back);
-  background: var(--bg-back);
-  transform: translateY(-50%) rotateX(90deg);
-  opacity: 0;
-}
-
-.btn-flip:hover::before {
-  opacity: 0;
-  transform: translateY(50%) rotateX(90deg);
-}
-
-.btn-flip:hover::after {
-  opacity: 1;
-  transform: translateY(0) rotateX(0);
-}
-</style>
+<script lang="ts">
+    type _buttonType = 'button' | 'submit' | 'reset';
+    const {
+        back = "back",
+        front = "front",
+        bgFront = "var(--primary-bg)",
+        bgBack = "var(--primary-bg)",
+        color = "var(--button-text)",
+        title = "",
+        type = 'button' as _buttonType, 
+        disabled = false,
+        ...rest
+    } = $props();
+</script>
+<button 
+    type={type}
+    title={title}
+    disabled={disabled}
+    aria-label="Flip button" 
+    class="btn-flip" 
+    data-back={back} 
+    data-front={front}
+    style="--bg-front: {bgFront}; --bg-back: {bgBack}; --text-color: {color}"
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}} 
+></button>
+<style>.btn-flip {
+  position: relative;
+  display: inline-block;
+  width: 150px; /* you can fix width if needed */
+  height: 40px;
+  text-align: center;
+  perspective: 1000px;
+  color: var(--text-color);
+}
+
+.btn-flip::before,
+.btn-flip::after {
+  content: attr(data-front);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30px;
+  line-height: 40px;
+  transition: 0.5s;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+}
+
+.btn-flip::before {
+  content: attr(data-front);
+  background: var(--bg-front);
+  transform: translateY(0) rotateX(0);
+  opacity: 1;
+}
+
+.btn-flip::after {
+  content: attr(data-back);
+  background: var(--bg-back);
+  transform: translateY(-50%) rotateX(90deg);
+  opacity: 0;
+}
+
+.btn-flip:hover::before {
+  opacity: 0;
+  transform: translateY(50%) rotateX(90deg);
+}
+
+.btn-flip:hover::after {
+  opacity: 1;
+  transform: translateY(0) rotateX(0);
+}
+</style>

package/dist/components/Core/others/Button/Marquee/button.css

@@ -1,37 +1,37 @@
-  .marquee-container {
-    overflow: hidden;
-    white-space: nowrap;
-    position: relative;
-    font-size: 1rem;
-    padding: 0.2rem 10px; 
-    cursor: pointer;
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-  }
-
-  .marquee {
-    display: inline-block;
-    white-space: nowrap;
-    transition: none;
-  }
-
-  /* scrolling animation only active when hovered */
-  .scrolling {
-    animation: scroll 2s linear infinite;
-  }
-
-  @keyframes scroll {
-    0% {
-      transform: translateX(0%);
-    }
-    100% {
-      transform: translateX(-66.66%); 
-    }
-  }
-  .marquee:not(.scrolling) span:not(:first-child) {
-    visibility: hidden;
-  }
-
-  .marquee span {
-    margin-right: 2rem;
+  .marquee-container {
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    font-size: 1rem;
+    padding: 0.2rem 10px; 
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+  }
+
+  .marquee {
+    display: inline-block;
+    white-space: nowrap;
+    transition: none;
+  }
+
+  /* scrolling animation only active when hovered */
+  .scrolling {
+    animation: scroll 2s linear infinite;
+  }
+
+  @keyframes scroll {
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-66.66%); 
+    }
+  }
+  .marquee:not(.scrolling) span:not(:first-child) {
+    visibility: hidden;
+  }
+
+  .marquee span {
+    margin-right: 2rem;
   }