@sierra-95/svelte-scaffold 1.0.76 → 1.0.78

package/dist/Core/components/Form/Input/TextArea/textarea.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  let {
+    id = '',
+    label = '',
+    rows = 4,
+    value = $bindable(""),
+    placeholder = '',
+    borderSize = '1px',
+    borderColor = 'var(--input-border)',
+    borderRadius = '4px',
+    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}
+  <textarea 
+    {...rest}
+    id={id} 
+    name={id} 
+    rows={rows}
+    bind:value={value}
+    placeholder={placeholder}
+    required={rest.required}
+    readonly={rest.readonly}
+    style="background-color: {background}; border: {borderSize} solid {borderColor}; border-radius: {borderRadius};"
+    onclick={(e: MouseEvent) => {
+      rest.onclick?.(e);
+    }}></textarea>
+</label>

package/dist/Core/components/Form/Input/TextArea/textarea.svelte.d.ts

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

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

@@ -14,7 +14,6 @@
     maxWidth = '',
     textColor = 'inherit',
     autocomplete = undefined as _autocomplete,
-    required = false,
     ...rest
   } = $props();
 </script>
@@ -27,7 +26,8 @@
     bind:value={value}
     placeholder={placeholder}
     autocomplete={autocomplete ?? undefined}
-    required={required}
+    required={rest.required}
+    readonly={rest.readonly}
     class="{underline? 'underline-input':''}"
     style="background-color: {background}; border: {borderSize} solid {borderColor};"
     onclick={(e: MouseEvent) => {

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

@@ -12,7 +12,6 @@ declare const Input: import("svelte").Component<{
     maxWidth?: string;
     textColor?: string;
     autocomplete?: AutoFill | null | undefined;
-    required?: boolean;
 } & Record<string, any>, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/Core/components/others/Avatar/avatar.svelte

@@ -0,0 +1,75 @@
+<script>
+    const {
+        url = '',
+        borderSize = '1px',
+        borderColor = 'black',
+        avatarSize = '50px',
+        iconSize = '24px',
+        iconColor = '#999999',
+        boxShadow = 'var(--box-shadow)',
+        icon="fa-solid fa-user",
+        zIndex = 0,
+        backgroundColor = 'white',
+        foregroundAlpha = 'rgba(0, 0, 0, 0.5)',
+        upload = false,
+        onClick = () => {}
+    } =$props();
+
+    function handleClick(){
+        if(!upload) return;
+        onClick();
+    }
+
+</script>
+<style>
+    #sierra-avatar{
+        position: relative;
+        border-radius: 50%;
+    }
+    #sierra-avatar div{
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+    }
+    #sierra-avatar img{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+    #sierra-avatar i{
+        transition: transform 0.2s ease;
+    }
+    #sierra-avatar i:hover{
+        transform: translateY(-3px);
+    }
+</style>
+<main id="sierra-avatar" style="
+    border: {borderSize} 
+    solid {borderColor}; 
+    width: {avatarSize}; 
+    height: {avatarSize};
+    background-color: {backgroundColor};
+    box-shadow: {boxShadow};
+    ">
+        <div style="z-index: {zIndex}; {url ? `background-color: ${foregroundAlpha};` : ''}">
+            <i 
+                role="none"
+                style="
+                    font-size: {iconSize};
+                    color: {iconColor};
+                    cursor: pointer;
+                "
+                class="{icon}"
+                onclick={handleClick}
+            ></i>
+        </div>
+        <img hidden={!url} src={url} alt="avatar"/>
+</main>

package/dist/Core/components/others/Avatar/avatar.svelte.d.ts

@@ -0,0 +1,35 @@
+export default Avatar;
+type Avatar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Avatar: import("svelte").Component<{
+    url?: string;
+    borderSize?: string;
+    borderColor?: string;
+    avatarSize?: string;
+    iconSize?: string;
+    iconColor?: string;
+    boxShadow?: string;
+    icon?: string;
+    zIndex?: number;
+    backgroundColor?: string;
+    foregroundAlpha?: string;
+    upload?: boolean;
+    onClick?: Function;
+}, {}, "">;
+type $$ComponentProps = {
+    url?: string;
+    borderSize?: string;
+    borderColor?: string;
+    avatarSize?: string;
+    iconSize?: string;
+    iconColor?: string;
+    boxShadow?: string;
+    icon?: string;
+    zIndex?: number;
+    backgroundColor?: string;
+    foregroundAlpha?: string;
+    upload?: boolean;
+    onClick?: Function;
+};

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

@@ -13,7 +13,12 @@
           <img style="--header-image-size : {$layoutStore.headerImageSize}" src={$layoutStore.headerImage} alt="Logo"/>
       {/if}
       {#if $layoutStore.headerTitle}
-        <h2>{$layoutStore.headerTitle}</h2>
+        <h2
+        style="
+          color: {$layoutStore.headerTitleColor};
+          font-family: {$layoutStore.headerTitleFont};
+          font-size: {$layoutStore.headerTitleFontSize};
+        ">{$layoutStore.headerTitle}</h2>
       {/if}
     </a>
   </div>

package/dist/global.css

@@ -153,7 +153,7 @@ body[data-theme='dark']{
   flex-direction: column;
   gap: 0.2rem;
 }
-.sierra-input input {
+.sierra-input input, .sierra-input textarea {
   padding: 0.75rem;
   border-radius: 4px;
 }
@@ -206,7 +206,8 @@ button{
 }
 /**Select, Input**/
 select:focus,
-input:focus {
+input:focus,
+textarea:focus {
     outline: none;
     box-shadow: none;
 }

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as PasswordInput } from './Core/components/Form/Input/password/
 export { default as Select } from './Core/components/Form/Input/select/select.svelte';
 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 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';
@@ -36,6 +37,7 @@ export { default as HrSplit } from './Core/components/others/Hr/HrSplit/hrsplit.
 export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.svelte';
 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 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

@@ -19,6 +19,7 @@ export { default as PasswordInput } from './Core/components/Form/Input/password/
 export { default as Select } from './Core/components/Form/Input/select/select.svelte';
 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';
 //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';
@@ -44,6 +45,7 @@ export { default as HrSplit } from './Core/components/others/Hr/HrSplit/hrsplit.
 export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.svelte';
 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';
 //####################Features##################################
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 //####################MODULES COMPONENTS########################

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

@@ -16,6 +16,9 @@ export type Section = {
 };
 export type LayoutState = {
     headerTitle: string;
+    headerTitleColor?: string;
+    headerTitleFont?: string;
+    headerTitleFontSize?: string;
     headerLink: string;
     headerImage: string;
     headerImageSize: string;

package/dist/stores/modules/layout.js

@@ -1,6 +1,9 @@
 import { writable } from 'svelte/store';
 const defaultLayoutState = {
     headerTitle: '',
+    headerTitleColor: 'inherit',
+    headerTitleFont: 'inherit',
+    headerTitleFontSize: 'inherit',
     headerLink: '',
     headerImage: '',
     headerImageSize: '30px',

package/package.json

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