@sierra-95/svelte-scaffold 1.0.79 → 1.0.80

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

@@ -22,7 +22,18 @@
 
 <Backdrop onClose={close} bind:open={$modalStore.open} zIndex={20}>
   <Wrapper>
-    <h2 style="font-size: 1.3rem;">{$modalStore.title}</h2>
+    <div style="display: flex; align-items: center; gap: {$modalStore.logo_url_spacing};">
+      {#if $modalStore.logo_url}
+        <img src={$modalStore.logo_url} alt="Modal Logo" 
+          style="width: {$modalStore.logo_url_size};" 
+        />
+      {/if}
+      <h2 style="
+        font: {$modalStore.titleFont};
+        font-weight: {$modalStore.titleFontWeight};
+        font-size: {$modalStore.titleFontSize};
+      ">{$modalStore.title}</h2>
+    </div>
     {#if $modalStore?.content}
       <h3 style="font-size: 1rem;">{$modalStore.content}</h3>
     {/if}

package/dist/Core/components/Form/Input/Date/date.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  let {
+    id = '',
+    label = '',
+    value = $bindable(""),
+    type = 'text',
+    placeholder = '',
+    underline = false,
+    borderSize = '1px',
+    borderColor = 'var(--input-border)',
+    background = 'transparent',
+    width = '100%',
+    maxWidth = '',
+    textColor = 'inherit',
+    ...rest
+  } = $props();
+</script>
+
+<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+  <input 
+    id={id} 
+    name={id} 
+    type="date" 
+    bind:value={value}
+    placeholder={placeholder}
+    required={rest.required}
+    readonly={rest.readonly}
+    class="{underline? 'underline-input':''}"
+    style="background-color: {background}; border: {borderSize} solid {borderColor};"
+    onclick={(e: MouseEvent) => {
+      rest.onclick?.(e);
+    }}
+    />
+</label>

package/dist/Core/components/Form/Input/Date/date.svelte.d.ts

@@ -0,0 +1,16 @@
+declare const Date: import("svelte").Component<{
+    id?: string;
+    label?: string;
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    underline?: boolean;
+    borderSize?: string;
+    borderColor?: string;
+    background?: string;
+    width?: string;
+    maxWidth?: string;
+    textColor?: string;
+} & Record<string, any>, {}, "value">;
+type Date = ReturnType<typeof Date>;
+export default Date;

package/dist/Core/components/Form/Input/Time/time.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  let {
+    id = '',
+    label = '',
+    value = $bindable(""),
+    type = 'text',
+    placeholder = '',
+    underline = false,
+    borderSize = '1px',
+    borderColor = 'var(--input-border)',
+    background = 'transparent',
+    width = '100%',
+    maxWidth = '',
+    textColor = 'inherit',
+    ...rest
+  } = $props();
+</script>
+
+<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+  <input 
+    id={id} 
+    name={id} 
+    type="time" 
+    bind:value={value}
+    placeholder={placeholder}
+    required={rest.required}
+    readonly={rest.readonly}
+    class="{underline? 'underline-input':''}"
+    style="background-color: {background}; border: {borderSize} solid {borderColor};"
+    onclick={(e: MouseEvent) => {
+      rest.onclick?.(e);
+    }}
+    />
+</label>

package/dist/Core/components/Form/Input/Time/time.svelte.d.ts

@@ -0,0 +1,16 @@
+declare const Time: import("svelte").Component<{
+    id?: string;
+    label?: string;
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    underline?: boolean;
+    borderSize?: string;
+    borderColor?: string;
+    background?: string;
+    width?: string;
+    maxWidth?: string;
+    textColor?: string;
+} & Record<string, any>, {}, "value">;
+type Time = ReturnType<typeof Time>;
+export default Time;

package/dist/Core/components/others/ColorPicker/colors.d.ts

@@ -0,0 +1,2 @@
+export default colors;
+declare const colors: string[];

package/dist/Core/components/others/ColorPicker/colors.js

@@ -0,0 +1,21 @@
+const colors = [
+  // Grayscale
+  '#000000', '#2E2E2E', '#595959', '#7F7F7F', '#A6A6A6', '#D9D9D9',
+
+  // Reds
+  '#7F1D1D', '#991B1B', '#B91C1C', '#DC2626', '#EF4444', '#F87171',
+
+  // Oranges / Browns
+  '#78350F', '#92400E', '#A16207', '#D97706', '#F59E0B', '#FDBA74',
+
+  // Yellows / Golds
+  '#854D0E', '#A16207', '#CA8A04', '#EAB308', '#FACC15', '#FEF08A',
+
+  // Greens
+  '#14532D', '#166534', '#15803D', '#16A34A', '#22C55E', '#86EFAC',
+
+  // Blues
+  '#1E3A8A', '#1D4ED8', '#2563EB', '#3B82F6', '#60A5FA', '#93C5FD',
+];
+
+export default colors;

package/dist/Core/components/others/ColorPicker/main.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { DropdownContainer } from '../../../../index.js';
+    import colors from './colors.js'
+
+    let {
+        selectedColor=$bindable(''),
+        openDropdown =$bindable(false),
+        dropdownTrigger,
+        onSelect =(color: string) => {},
+    } =$props();
+
+    let recentColors = $state<string[]>([]);
+
+    const STORAGE_KEY = 'sierra_recent_colors';
+    const MAX = 6;
+
+    function saveRecentColor(color: string) {
+        let stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');        
+        stored = stored.filter((c: string) => c !== color); // remove if already exists (so it moves to the end)        
+        stored.push(color); // add new color to the end
+        if (stored.length > MAX) {
+            stored.shift(); // removes first (oldest)
+        }
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
+        recentColors = stored;
+    }
+
+    onMount(() => {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (!stored) {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify([]));
+            recentColors = [];
+        } else {
+            recentColors = JSON.parse(stored);
+        }
+    });
+
+    function handleSelect(color: string) {
+        selectedColor = color;
+        onSelect?.(color);
+        openDropdown = false;
+        saveRecentColor(color);
+    }
+</script>
+
+{#snippet Color(color:string)}
+    <button
+        aria-label={`Select color: ${color}`}
+        class="color-swatch"
+        style="background-color: {color};"
+        onclick={() => handleSelect(color)}
+    ></button>
+{/snippet}
+<DropdownContainer bind:open={openDropdown} dropdownTrigger={dropdownTrigger}>
+    <div class="color-picker">
+        {#each colors as color}
+            {@render Color?.(color)}
+        {/each}
+    </div>
+
+    {#if recentColors.length > 0}
+        <p style="margin-left: 5px; font-size: 12px; color: var(--text-secondary);">Recently used</p>
+        <div class="color-picker">
+            {#each recentColors as color}
+                {@render Color?.(color)}
+            {/each}
+        </div>
+    {/if}
+</DropdownContainer>
+
+<style>
+    .color-picker {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 5px;
+        padding: 5px;
+    }
+    .color-picker .color-swatch {
+        width: 20px;
+        height: 20px;
+        border-radius: 50% !important;
+        transition: transform 0.1s ease-in-out;
+    }
+
+    .color-picker .color-swatch:hover {
+        transform: scale(1.1);
+    }
+</style>

package/dist/Core/components/others/ColorPicker/main.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const Main: import("svelte").Component<{
+    selectedColor?: string;
+    openDropdown?: boolean;
+    dropdownTrigger: any;
+    onSelect?: Function;
+}, {}, "selectedColor" | "openDropdown">;
+type Main = ReturnType<typeof Main>;
+export default Main;

package/dist/Modules/Editor/Nodes/TextColor/textColor.svelte

@@ -1,88 +1,61 @@
 <script lang="ts">
-	import './styles.css';
 	import { onMount } from 'svelte';
-	import {theme, DropdownContainer} from '../../../../index.js';
-	import colors from '../../colors.js';
-	
-	import type { Editor } from "@tiptap/core";
-	export let editor: Editor;
+	import {theme, ColorPicker} from '../../../../index.js';
 
-	let textColor: HTMLDivElement;
-	let highlightColor = '#ffe066';
-	let textColorDropdown = false;
-	let highlightDropdown = false;
+	const {
+		editor,
+	}= $props();
+
+	let textColor = $state<HTMLDivElement>();
+	let highlightColor = $state('#ffe066');
+	let textColorDropdown = $state(false);
+	let highlightDropdown = $state(false);
 
 	onMount(() => {
-		if (!editor) return;
+		if (!editor || !textColor) return;
 		const value = $theme === 'dark' ? '#ffffff' : '#000000';
-		editor.chain().focus().setColor(value).run();
-		textColor.style.backgroundColor = value;
+		setTextColor(value);
 	});
 
-	function applyColor(color: string) {
+	function setTextColor(color: string) {
+		if (!editor || !textColor) return;
 		editor.chain().focus().setColor(color).run();
 		textColor.style.backgroundColor = color;
-		textColorDropdown = false;
+	}
+
+	function setHighlightColor(color: string) {
+		highlightColor = color;
+		if (editor) editor.chain().focus().setHighlight({ color }).run();
 	}
 </script>
 
 {#if editor}
 
 <main id="editor-text-color" style="display: flex; gap: 0.5rem; align-items: center;">
-	<DropdownContainer bind:open={textColorDropdown}>
-		{#snippet dropdownTrigger()}
-			<button aria-label="Text Color" title="Color" on:click={() => textColorDropdown = !textColorDropdown}>
-				<i class="fa fa-font"></i>
-				<div bind:this={textColor} style="height: 3px; border-radius: 0.3125rem;"></div>
-			</button>
-		{/snippet}
-		{#if textColorDropdown}
-			<div class="text-color-selector-dropdown ">
-				{#each colors as color}
-					<div
-						role="none"
-						class="color-swatch"
-						style="background-color: {color};"
-						on:click={() => applyColor(color)}
-					></div>
-				{/each}
-			</div>
-		{/if}
-	</DropdownContainer>
+	{#snippet TriggerText()}
+		<button aria-label="Text Color" title="Color" onclick={() => textColorDropdown = !textColorDropdown}>
+			<i class="fa fa-font"></i>
+			<div bind:this={textColor} style="height: 3px; border-radius: 0.3125rem;"></div>
+		</button>
+	{/snippet}
+	<ColorPicker bind:openDropdown={textColorDropdown} dropdownTrigger={TriggerText} onSelect={setTextColor}/>
 
 	<div style="display: flex;">
 		<button
 			aria-label="Highlight"
 			title="Highlight"
 			class="{editor.isActive('highlight') ? 'active' : ''}"
-			on:click={() => editor.chain().focus().toggleHighlight().run()} 
+			onclick={() => editor.chain().focus().toggleHighlight().run()} 
 			style={editor.isActive('highlight') ? `background-color: ${highlightColor};` : ''}
 		>
 		<i class="fa fa-font"></i>
 		</button>
-		<DropdownContainer bind:open={highlightDropdown}>
-			{#snippet dropdownTrigger()}
-				<button aria-label="Highlight Color" on:click={() => highlightDropdown = !highlightDropdown}>
-					<i class="fa fa-chevron-down {highlightDropdown ? 'active' : ''}"></i>
-				</button>
-			{/snippet}
-			{#if highlightDropdown}
-				<div class="text-color-selector-dropdown">
-					{#each colors as color}
-						<div
-							role="none"
-							class="color-swatch"
-							style="background-color: {color};"
-							on:click={() => {
-								editor.chain().focus().setHighlight({ color }).run();
-								highlightDropdown = false;
-								highlightColor = color;
-							}}
-						></div>
-					{/each}
-				</div>
-			{/if}
-		</DropdownContainer>
+		{#snippet TriggerHighlight()}
+			<button id="color-picker-trigger" aria-label="Highlight Color" onclick={() => highlightDropdown = !highlightDropdown}>
+				<i class="fa fa-chevron-down {highlightDropdown ? 'active' : ''}"></i>
+			</button>
+		{/snippet}
+		<ColorPicker bind:openDropdown={highlightDropdown} dropdownTrigger={TriggerHighlight} onSelect={setHighlightColor}/>
 	</div>
 </main>
 {/if}

package/dist/Modules/Editor/Nodes/TextColor/textColor.svelte.d.ts

@@ -1,22 +1,5 @@
-import './styles.css';
-import type { Editor } from "@tiptap/core";
-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 TextColor: $$__sveltets_2_IsomorphicComponent<{
-    editor: Editor;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TextColor = InstanceType<typeof TextColor>;
+declare const TextColor: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type TextColor = ReturnType<typeof TextColor>;
 export default TextColor;

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

@@ -18,6 +18,7 @@
           color: {$layoutStore.headerTitleColor};
           font-family: {$layoutStore.headerTitleFont};
           font-size: {$layoutStore.headerTitleFontSize};
+          font-weight: {$layoutStore.headerTitleFontWeight};
         ">{$layoutStore.headerTitle}</h2>
       {/if}
     </a>

package/dist/global.css

@@ -261,4 +261,12 @@ button:disabled{
   transform: scale(0);
   opacity: 0.4;
   background: currentColor;
+}
+
+/**/
+i.fa-chevron-down {
+  transition: transform 0.2s;
+}
+i.fa-chevron-down.active {
+  transform: rotate(180deg);
 }

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as Select } from './Core/components/Form/Input/select/select.sv
 export { default as FileInput } from './Core/components/Form/Input/FileInput/fileInput.svelte';
 export { default as SearchBar } from './Core/components/Form/Input/SearchBar/search.svelte';
 export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
+export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
+export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
 export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
 export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';
 export { default as PreviewVideo } from './Core/components/others/Previews/Video/video.svelte';
@@ -38,6 +40,7 @@ export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.sv
 export { default as Form } from './Core/components/Form/Form/form.svelte';
 export { default as Carousel } from './Core/components/others/Carousel/carousel.svelte';
 export { default as Avatar } from './Core/components/others/Avatar/avatar.svelte';
+export { default as ColorPicker } from './Core/components/others/ColorPicker/main.svelte';
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 export { default as Editor } from './Modules/Editor/main.svelte';
 export { default as Layout } from './Modules/Layout/main.svelte';

package/dist/index.js

@@ -20,6 +20,8 @@ export { default as Select } from './Core/components/Form/Input/select/select.sv
 export { default as FileInput } from './Core/components/Form/Input/FileInput/fileInput.svelte';
 export { default as SearchBar } from './Core/components/Form/Input/SearchBar/search.svelte';
 export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
+export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
+export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
 //Previews
 export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
 export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';
@@ -46,6 +48,7 @@ export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.sv
 export { default as Form } from './Core/components/Form/Form/form.svelte';
 export { default as Carousel } from './Core/components/others/Carousel/carousel.svelte';
 export { default as Avatar } from './Core/components/others/Avatar/avatar.svelte';
+export { default as ColorPicker } from './Core/components/others/ColorPicker/main.svelte';
 //####################Features##################################
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 //####################MODULES COMPONENTS########################

package/dist/stores/core/modal.d.ts

@@ -4,7 +4,13 @@ export function resetModalStore(): void;
 export type ModalData = {
     open: boolean;
     title: string;
+    titleFont?: string;
+    titleFontSize?: string;
+    titleFontWeight?: string;
     content?: string;
+    logo_url?: string;
+    logo_url_size?: string;
+    logo_url_spacing?: string;
     confirmText?: string;
     cancelText?: string;
     onConfirm?: (() => void) | null;

package/dist/stores/core/modal.js

@@ -2,15 +2,21 @@ import { writable } from 'svelte/store';
 
 /**
  * @typedef {{
- *   open: boolean,
- *   title: string,
- *   content?: string,
- *   confirmText?: string,
- *   cancelText?: string,
- *   onConfirm?: (() => void) | null,
- *   onCancel?: (() => void) | null,
- *   closeOnOverlay?: boolean,
- *   render?: (() => any) | null
+  *   open: boolean,
+  *   title: string,
+  *   titleFont?: string,
+  *   titleFontSize?: string,
+  *   titleFontWeight?: string,
+  *   content?: string,
+  *   logo_url?: string,
+  *   logo_url_size?: string,
+  *   logo_url_spacing?: string,
+  *   confirmText?: string,
+  *   cancelText?: string,
+  *   onConfirm?: (() => void) | null,
+  *   onCancel?: (() => void) | null,
+  *   closeOnOverlay?: boolean,
+  *   render?: (() => any) | null
  * }} ModalData
  */
 
@@ -18,7 +24,13 @@ import { writable } from 'svelte/store';
 const defaultModalState = {
   open: false,
   title: '',
+  titleFont: 'inherit',
+  titleFontSize: '1.3rem',
+  titleFontWeight: 'inherit',
   content: '',
+  logo_url: '',
+  logo_url_size: '30px',
+  logo_url_spacing: '1rem',
   confirmText: 'Confirm',
   cancelText: 'Cancel',
   onConfirm: null,

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

@@ -20,6 +20,7 @@ export type LayoutState = {
     headerTitleColor?: string;
     headerTitleFont?: string;
     headerTitleFontSize?: string;
+    headerTitleFontWeight?: string;
     headerLink: string;
     headerImage: string;
     headerImageSize: string;

package/dist/stores/modules/layout.js

@@ -5,6 +5,7 @@ const defaultLayoutState = {
     headerTitleColor: 'inherit',
     headerTitleFont: 'inherit',
     headerTitleFontSize: 'inherit',
+    headerTitleFontWeight: 'inherit',
     headerLink: '',
     headerImage: '',
     headerImageSize: '30px',

package/package.json

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

package/dist/Modules/Editor/Nodes/TextColor/styles.css

@@ -1,18 +0,0 @@
-#editor-text-color .text-color-selector-dropdown {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 5px;
-  padding: 5px;
-}
-
-#editor-text-color .color-swatch {
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 50%;
-  transition: transform 0.1s ease-in-out;
-}
-
-#editor-text-color .color-swatch:hover {
-  transform: scale(1.1);
-}