@sierra-95/svelte-scaffold 1.0.70 → 1.0.72

package/dist/Core/components/Form/Form/form.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-    import { enhance } from '$app/forms';
     import {Carousel} from '../../../../index.js';
 
-    type _method = 'dialog' |'get' | 'post' | 'DIALOG' | 'GET' | 'POST';
     const {
         children,
         formBackground = 'white',
@@ -11,9 +9,6 @@
         period = 5000,
         carouselButtonColor = 'white',
         tailwindCss = '',
-        method = 'post' as _method,
-        enhanceAction = null,
-        ...rest
     } = $props();
 
 
@@ -21,9 +16,9 @@
 
 <main id="karakal-form" style="background-color: {pageBackground};">
     <Carousel images={images} period={period} buttonColor={carouselButtonColor}/>
-    <form use:enhance={enhanceAction} method={method} {...rest} class={tailwindCss} style="background-color: {formBackground};">
+    <div class={`form-container ${tailwindCss}`} style="background-color: {formBackground};">
         {@render children()} 
-    </form>
+    </div>
 </main>
 
 <style>
@@ -34,7 +29,7 @@
         align-items: center;
         justify-content: center;
     }
-    #karakal-form form{
+    #karakal-form .form-container{
         z-index: 2;
         max-width: 500px;
         width: 100%;
@@ -47,7 +42,7 @@
         #karakal-form{
             min-height: 100%;
         }
-        #karakal-form form{
+        #karakal-form .form-container{
             border-radius: 0;
             margin: 0;
             padding: 20px;

package/dist/Core/components/Form/Form/form.svelte.d.ts

@@ -6,8 +6,6 @@ declare const Form: import("svelte").Component<{
     period?: number;
     carouselButtonColor?: string;
     tailwindCss?: string;
-    method?: "dialog" | "get" | "post" | "DIALOG" | "GET" | "POST";
-    enhanceAction?: any;
-} & Record<string, any>, {}, "">;
+}, {}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

package/dist/Hooks/buildSearch.d.ts

@@ -1,17 +1,4 @@
-export type SectionItem = {
-    id?: string;
-    path: string;
-    label: string;
-    icon?: string;
-    hidden?: boolean;
-    children?: SectionItem[];
-    TOC?: Partial<Record<string, string>>;
-};
-export type Section = {
-    label: string;
-    hidden?: boolean;
-    items: SectionItem[];
-};
+import type { Section } from '../index.js';
 export type SearchResult = {
     label: string;
     path: string;

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

@@ -6,24 +6,6 @@
   border-bottom: 1px solid var(--border);
   background-color: var(--header);
 }
-#sierra-header .bar {
-  width: 30px;
-  height: 3px;
-  margin: 4px auto;
-  border-radius: 5px;
-  transition: 0.3s;
-}
-#sierra-header button:hover .bar:nth-of-type(1) {
-  -webkit-transform: translateY(1.5px) rotate(-4.5deg);
-  -ms-transform: translateY(1.5px) rotate(-4.5deg);
-  transform: translateY(1.5px) rotate(-4.5deg);
-}
-
-#sierra-header button:hover .bar:nth-of-type(3) {
-  -webkit-transform: translateY(-1.5px) rotate(4.5deg);
-  -ms-transform: translateY(-1.5px) rotate(4.5deg);
-  transform: translateY(-1.5px) rotate(4.5deg);
-}
 
 #sierra-header img{
   width: var(--header-image-size);

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

@@ -1,47 +1,25 @@
 <script lang="ts">
-  import {buttonRipple} from '../../../index.js';
-  import GridIcon from './gridIcon.svelte';
-  import Hamburger from './hamburger.svelte';
+  import {layoutStore, ButtonHamburger} from '../../../index.js';
   import './header.css';
    const {
-    headerTitle,
-    headerLink,
-    headerImage, 
-    headerImageSize,
     toggleMenu = (() => {}),
-    headerCenterContent,
-    headerRightContent,
-    toggleMenuColor,
-    toggleMenuSize,
-    gridToggle
   } = $props();
 
-  function conditionalRipple(node: HTMLElement) {
-    if (gridToggle) {
-      return buttonRipple(node);
-    }
-  }
 </script>
 <header id='sierra-header'>
   <div style="display: flex; align-items: center; gap: 1rem;">
-    <a href={headerLink} style="display: flex; align-items: center; gap: 0.5rem; color: inherit; margin-left: 1rem;'}">
-      {#if headerImage}
-          <img style="--header-image-size : {headerImageSize}" src={headerImage} alt="Logo"/>
+    <a href={$layoutStore.headerLink} style="display: flex; align-items: center; gap: 0.5rem; color: inherit; margin-left: 1rem;'}">
+      {#if $layoutStore.headerImage}
+          <img style="--header-image-size : {$layoutStore.headerImageSize}" src={$layoutStore.headerImage} alt="Logo"/>
       {/if}
-      {#if headerTitle}
-        <h2>{headerTitle}</h2>
+      {#if $layoutStore.headerTitle}
+        <h2>{$layoutStore.headerTitle}</h2>
       {/if}
     </a>
   </div>
-  <div>{@render headerCenterContent?.()}</div>
+  <div>{@render $layoutStore.headerCenterContent?.()}</div>
   <div style="display: flex; gap: 1rem; align-items: center;">
-    {@render headerRightContent?.()}
-    <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} 
-        <Hamburger {toggleMenuColor} />
-      {/if}
-    </button>
+    {@render $layoutStore.headerRightContent?.()}
+    <div style="margin-right: 1rem;"><ButtonHamburger onclick={toggleMenu} barColor={$layoutStore.toggleMenuColor}/></div>
   </div>
 </header>

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

@@ -1,15 +1,6 @@
 import './header.css';
 declare const Header: import("svelte").Component<{
-    headerTitle: any;
-    headerLink: any;
-    headerImage: any;
-    headerImageSize: any;
     toggleMenu?: any;
-    headerCenterContent: any;
-    headerRightContent: any;
-    toggleMenuColor: any;
-    toggleMenuSize: any;
-    gridToggle: any;
 }, {}, "">;
 type Header = ReturnType<typeof Header>;
 export default Header;

package/dist/Modules/Layout/Menu/menu.svelte

@@ -3,20 +3,22 @@
 	import { onMount } from 'svelte';
     import { page } from '$app/state';
     import { afterNavigate, beforeNavigate } from '$app/navigation';
-    import { isLoading, validateLayoutMenuSections, GlobalSearch } from '../../../index.js';
-	import type {Section} from '../../../index.js';
+    import { isLoading, validateLayoutMenuSections, GlobalSearch, layoutStore } from '../../../index.js';
 
 	export let toggleMenu: () => void;
 	export let closeMobileMenu: () => void;
 	export let isMenuOpen: boolean;
-	export let sections: Section[];
-	export let menuActiveIconColor: string;
+
+	$: sections = $layoutStore.sections;
 
 	function isParentActive(item: any, pathname: string) {
 		if (item.path === '/') {
 			return pathname === '/';
 		}
-		return pathname === item.path || pathname.startsWith(item.path + '/');
+		if (item.children) {
+			return pathname === item.path || pathname.startsWith(item.path + '/');
+		}
+		return pathname === item.path;
 	}
 
 	let openSubsections = new Set();
@@ -89,7 +91,7 @@
 						closeMobileMenu();
 					}
 				}}
-				style="{isMenuOpen? '':'border-radius: unset;border-left: none;'}; --menu-active-icon-color: {menuActiveIconColor};"
+				style="{isMenuOpen? '':'border-radius: unset;border-left: none;'}; --menu-active-icon-color: {$layoutStore.menuActiveIconColor};"
 				class={`
 					icon-base
 					${

package/dist/Modules/Layout/Menu/menu.svelte.d.ts

@@ -1,5 +1,4 @@
 import './menu.css';
-import type { Section } from '../../../index.js';
 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;
@@ -17,8 +16,6 @@ declare const Menu: $$__sveltets_2_IsomorphicComponent<{
     toggleMenu: () => void;
     closeMobileMenu: () => void;
     isMenuOpen: boolean;
-    sections: Section[];
-    menuActiveIconColor: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Modules/Layout/background.svelte

@@ -1,5 +1,8 @@
+<script>
+  import { layoutStore } from "../../stores/modules/layout.js";
+</script>
 <style>
-  .background-svg {
+  .sierra-layout-background {
     position: absolute;
     top: 0;
     left: 0;
@@ -8,21 +11,24 @@
     z-index: -1;
   }
 </style>
+{#if $layoutStore.backgroundColor}
+  <main style="background-color: {$layoutStore.backgroundColor};" class="sierra-layout-background"></main>
+{:else}
+  <svg class="sierra-layout-background" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice">
+    <defs>
+      <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="var(--background-v1-gradient-line-start)" />
+        <stop offset="100%" stop-color="var(--background-v1-gradient-line-end)" />
+      </linearGradient>
+    </defs>
+    <line x1="100" y1="0" x2="100" y2="1000" stroke="url(#lineGradient)" stroke-width="2" opacity="0.3" />
+    <line x1="300" y1="0" x2="250" y2="1000" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
+    <line x1="700" y1="0" x2="750" y2="1000" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
+    <line x1="900" y1="0" x2="900" y2="1000" stroke="url(#lineGradient)" stroke-width="2" opacity="0.3" />
 
-<svg class="background-svg" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice">
-  <defs>
-    <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="var(--background-v1-gradient-line-start)" />
-      <stop offset="100%" stop-color="var(--background-v1-gradient-line-end)" />
-    </linearGradient>
-  </defs>
-  <line x1="100" y1="0" x2="100" y2="1000" stroke="url(#lineGradient)" stroke-width="2" opacity="0.3" />
-  <line x1="300" y1="0" x2="250" y2="1000" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
-  <line x1="700" y1="0" x2="750" y2="1000" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
-  <line x1="900" y1="0" x2="900" y2="1000" stroke="url(#lineGradient)" stroke-width="2" opacity="0.3" />
-
-  <line x1="0" y1="200" x2="1000" y2="200" stroke="url(#lineGradient)" stroke-width="1" opacity="0.15" />
-  <line x1="0" y1="400" x2="1000" y2="450" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
-  <line x1="0" y1="650" x2="1000" y2="600" stroke="url(#lineGradient)" stroke-width="1" opacity="0.15" />
-  <line x1="0" y1="850" x2="1000" y2="850" stroke="url(#lineGradient)" stroke-width="2" opacity="0.25" />
-</svg>
+    <line x1="0" y1="200" x2="1000" y2="200" stroke="url(#lineGradient)" stroke-width="1" opacity="0.15" />
+    <line x1="0" y1="400" x2="1000" y2="450" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
+    <line x1="0" y1="650" x2="1000" y2="600" stroke="url(#lineGradient)" stroke-width="1" opacity="0.15" />
+    <line x1="0" y1="850" x2="1000" y2="850" stroke="url(#lineGradient)" stroke-width="2" opacity="0.25" />
+  </svg>
+{/if}

package/dist/Modules/Layout/main.svelte

@@ -1,7 +1,7 @@
 <script>
 	import './main.css';
     import { onMount } from 'svelte';
-	import {LinearProgress, isLoading, isMobile, isTablet, Modal, Toast, theme,FilePicker} from '../../index.js'
+	import {LinearProgress, isLoading, isMobile, isTablet, Modal, Toast, theme,FilePicker, layoutStore} from '../../index.js'
 	import Header from './Header/header.svelte';
 	import Menu from './Menu/menu.svelte';
 	import Background from './background.svelte';
@@ -9,19 +9,6 @@
 	
 	let { 
 		children, 
-		headerTitle = '',
-		headerLink = '',
-		headerImage = '',
-		headerImageSize = '30px',
-		sections = [],
-		contentCenter = false,
-		headerCenterContent = null,
-		headerRightContent = null,
-		paddingOff = false,
-		gridToggle = false, 
-		toggleMenuColor = 'var(--hamburger)',
-		toggleMenuSize = "25px",
-		menuActiveIconColor = 'var(--primary-bg)',
 	} = $props();
 
 	let isSmallscreen = $state(true);
@@ -75,18 +62,7 @@
 	<Modal />
 	<Toast />
 	<FilePicker />
-	<Header 
-		{headerTitle}
-		{headerLink}
-		{headerImage}
-		{headerImageSize}
-		{toggleMenu}
-		{headerCenterContent}
-		{headerRightContent}
-		{toggleMenuColor}
-		{toggleMenuSize}
-		{gridToggle}
-	/>
+	<Header {toggleMenu}/>
 	{#if $isLoading}<LinearProgress />{/if}
 	<div id="sierra-layout">
 		<div
@@ -99,17 +75,15 @@
 			}
 		>
 		<Menu 
-			{sections} 
 			{isMenuOpen} 
 			{toggleMenu}
 			{closeMobileMenu} 
-			{menuActiveIconColor}
 		/>
 		<Collapse {isMenuOpen} {toggleMenu}/>
 		</div>
-		<div data-label="Content Container" class="content" role="none" onclick={closeMobileMenu} style={paddingOff ? 'padding: 0px;' : 'padding: 20px'}>
+		<div data-label="Content Container" class="content" role="none" onclick={closeMobileMenu} style={$layoutStore.paddingOff ? 'padding: 0px;' : 'padding: 20px'}>
 			<Background />
-			{#if contentCenter}
+			{#if $layoutStore.contentCenter}
 				<div id='sierra-wrapper'>
 					{@render children()}
 				</div>

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

@@ -5,33 +5,7 @@ type Main = {
 };
 declare const Main: import("svelte").Component<{
     children: any;
-    headerTitle?: string;
-    headerLink?: string;
-    headerImage?: string;
-    headerImageSize?: string;
-    sections?: any[];
-    contentCenter?: boolean;
-    headerCenterContent?: any;
-    headerRightContent?: any;
-    paddingOff?: boolean;
-    gridToggle?: boolean;
-    toggleMenuColor?: string;
-    toggleMenuSize?: string;
-    menuActiveIconColor?: string;
 }, {}, "">;
 type $$ComponentProps = {
     children: any;
-    headerTitle?: string;
-    headerLink?: string;
-    headerImage?: string;
-    headerImageSize?: string;
-    sections?: any[];
-    contentCenter?: boolean;
-    headerCenterContent?: any;
-    headerRightContent?: any;
-    paddingOff?: boolean;
-    gridToggle?: boolean;
-    toggleMenuColor?: string;
-    toggleMenuSize?: string;
-    menuActiveIconColor?: string;
 };

package/dist/global.css

@@ -159,8 +159,8 @@ body[data-theme='dark']{
 }
 
 .sierra-input .underline-input{
-  border: none;
-  border-bottom: 1px solid var(--input-border);
+  border: none !important;
+  border-bottom: 1px solid var(--input-border) !important; 
   border-radius: 0;
   padding: 0.15rem 0;
 }

package/dist/index.d.ts

@@ -48,9 +48,11 @@ 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 { layoutStore, resetLayoutStore } from './stores/modules/layout.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';
 export { buildSearchIndex } from './Hooks/buildSearch.js';
 export { isValidEmail } from './Hooks/validateForms.js';
-export type { Section, SectionItem, SearchResult } from './Hooks/buildSearch.js';
+export type { SearchResult } from './Hooks/buildSearch.js';
+export type { Section, SectionItem } from './stores/modules/layout.js';

package/dist/index.js

@@ -60,6 +60,7 @@ export { modalStore, resetModalStore } from './stores/core/modal.js';
 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';
+export { layoutStore, resetLayoutStore } from './stores/modules/layout.js';
 //#######################HOOKS/UTILS########################
 export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES, IMAGE_MIME_TYPES_PREVIEW } from './Hooks/preview.js';
 export { validateLayoutMenuSections } from './Hooks/layout_menu.js';

package/dist/stores/modules/layout.d.ts

@@ -0,0 +1,31 @@
+export type SectionItem = {
+    id?: string;
+    path: string;
+    label: string;
+    icon?: string;
+    hidden?: boolean;
+    children?: SectionItem[];
+    TOC?: Partial<Record<string, string>>;
+};
+export type Section = {
+    label: string;
+    hidden?: boolean;
+    items: SectionItem[];
+};
+export type LayoutState = {
+    headerTitle: string;
+    headerLink: string;
+    headerImage: string;
+    headerImageSize: string;
+    sections: Section[];
+    contentCenter: boolean;
+    headerCenterContent: any;
+    headerRightContent: any;
+    paddingOff: boolean;
+    toggleMenuColor: string;
+    toggleMenuSize: string;
+    menuActiveIconColor: string;
+    backgroundColor: string;
+};
+export declare const layoutStore: import("svelte/store").Writable<LayoutState>;
+export declare function resetLayoutStore(): void;

package/dist/stores/modules/layout.js

@@ -0,0 +1,22 @@
+import { writable } from 'svelte/store';
+const defaultLayoutState = {
+    headerTitle: '',
+    headerLink: '',
+    headerImage: '',
+    headerImageSize: '30px',
+    sections: [],
+    contentCenter: false,
+    headerCenterContent: null,
+    headerRightContent: null,
+    paddingOff: false,
+    toggleMenuColor: 'black',
+    toggleMenuSize: "25px",
+    menuActiveIconColor: 'var(--primary-bg)',
+    backgroundColor: ''
+};
+export const layoutStore = writable({
+    ...defaultLayoutState
+});
+export function resetLayoutStore() {
+    layoutStore.set({ ...defaultLayoutState });
+}

package/package.json

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

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

@@ -1,16 +0,0 @@
-<script>
-    let { 
-        toggleMenuColor,
-        toggleMenuSize,
-    } = $props();
-</script>
-<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={toggleMenuColor} d="M640 384v256H384V384h256zm64 0h192v256H704V384zm-64 512H384V704h256v192zm64 0V704h192v192H704zm-64-768v192H384V128h256zm64 0h192v192H704V128zM320 384v256H128V384h192zm0 512H128V704h192v192zm0-768v192H128V128h192z"/>
-    </g>
-</svg>

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

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

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

@@ -1,10 +0,0 @@
-<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/Modules/Layout/Header/hamburger.svelte.d.ts

@@ -1,11 +0,0 @@
-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;
-};