@sierra-95/svelte-scaffold 1.1.1 → 1.1.3

package/dist/Core/components/Form/Input/PasswordStrength/passwordStrength.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    const {
+        minLength = 8,
+        new_password = $bindable(""),
+        confirm_password = $bindable("")
+    }=$props();
+
+    type PasswordStrengthResult = {
+        strength: "Weak" | "Medium" | "Strong";
+        suggestions: string[];
+        score: number;
+    }
+
+    let results: PasswordStrengthResult = $state({
+        strength: "Weak",
+        suggestions: [],
+        score: 0
+    })
+
+    const strengthColors = {
+        Weak: "var(--error-bg)",
+        Medium: "var(--warning-bg)",
+        Strong: "var(--primary-bg)"
+    } as const;
+
+    function passwordStrength(password: string): PasswordStrengthResult {
+        let suggestions: string[] = [];
+        let score = 0;
+
+        if (password.length >= minLength) score++;
+        else suggestions.push(`Use at least ${minLength} characters`);
+
+        if (/[a-z]/.test(password)) score++;
+        else suggestions.push("Add lowercase letters");
+
+        if (/[A-Z]/.test(password)) score++;
+        else suggestions.push("Add uppercase letters");
+
+        if (/[0-9]/.test(password)) score++;
+        else suggestions.push("Include numbers");
+
+        if (/[^A-Za-z0-9]/.test(password)) score++;
+        else suggestions.push("Use special characters");
+
+        let strength: PasswordStrengthResult["strength"] =
+            score <= 2 ? "Weak" :
+            score <= 4 ? "Medium" :
+            "Strong";
+        return { strength, suggestions, score };
+    }
+
+    function passwordsMatch() {
+        return new_password && confirm_password && new_password === confirm_password;
+    }
+    $effect(()=>{
+        if (new_password) {
+            const { strength, suggestions, score } = passwordStrength(new_password);
+            results = { strength, suggestions, score };
+        }
+    })
+</script>
+{#if new_password}
+    <p>
+        <span style="font-weight: bold;">Score: </span>
+        <span style="color: {strengthColors[results.strength]}">{results.score}</span><span style="color: var(--text-secondary);">/5</span>
+        <span style="color: {strengthColors[results.strength]}">{results.strength}</span>
+    </p>
+
+    {#if results.suggestions.length}
+        <p>
+            <span style="font-weight: bold;">Suggestions: </span>
+            <span style="color: var(--text-secondary);">
+                {#each results.suggestions as tip, index}
+                    {tip}{index < results.suggestions.length - 1 ? ", " : ""}
+                {/each}
+            </span>
+        </p>
+    {/if}
+{/if}
+
+{#if confirm_password}
+    {#if !passwordsMatch()}
+        <p style="color: var(--error-bg);">Passwords do not match</p>
+    {/if}
+{/if}

package/dist/Core/components/Form/Input/PasswordStrength/passwordStrength.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const PasswordStrength: import("svelte").Component<{
+    minLength?: number;
+    new_password?: string;
+    confirm_password?: string;
+}, {}, "new_password" | "confirm_password">;
+type PasswordStrength = ReturnType<typeof PasswordStrength>;
+export default PasswordStrength;

package/dist/Core/components/Menus/Tabs/main.svelte

@@ -24,6 +24,7 @@
       <div style="display: flex;">
         {#each tabs as tab}
           <button
+            type="button"
             class="tab {active === tab.key ? 'active' : ''}"
             onclick={() => active = tab.key}
           >

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

@@ -46,6 +46,7 @@
 
 {#snippet Color(color:string)}
     <button
+        type="button"
         aria-label={`Select color: ${color}`}
         class="color-swatch"
         style="background-color: {color};"

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

@@ -43,7 +43,7 @@
       {$modalStore.confirmText}
       </Button>
       {#if $modalStore.cancelText}
-        <button onclick={close}
+        <button type="button" onclick={close}
         >{$modalStore.cancelText}
         </button>
       {/if}

package/dist/Modules/Editor/Marks/Links/links.svelte

@@ -82,6 +82,6 @@
     <Input underline label="Edit link URL" id="link-url" bind:value={url}/>
 {/snippet}
 
-<button aria-label="Link Button" on:click={ editor.isActive('link')? updateLink : newLink} title="Add/Edit Link">
+<button type="button" aria-label="Link Button" on:click={ editor.isActive('link')? updateLink : newLink} title="Add/Edit Link">
   <i class="fa fa-link"></i>
 </button>

package/dist/Modules/Editor/Marks/TextFormatting/textFormatting.svelte

@@ -20,6 +20,7 @@
 	<div style="display: flex; gap: 0.5rem">
 		{#each actions as { name, icon }}
 			<button
+				type="button"
 				aria-label="Text Formatting: {name}"
 				title={name.charAt(0).toUpperCase() + name.slice(1)}
 				on:click={() => runToggle(name)}

package/dist/Modules/Editor/Nodes/Headings/heading.svelte

@@ -38,7 +38,7 @@
 {#if editor}
   <DropdownContainer bind:open>
     {#snippet dropdownTrigger()}
-        <button aria-label="Heading Options" on:click={() => (open = !open)} style="display: flex; align-items: center; gap: 4px;">
+        <button type="button" aria-label="Heading Options" on:click={() => (open = !open)} style="display: flex; align-items: center; gap: 4px;">
           <h5 style="font-weight: bold;">H{editor.getAttributes('heading').level}</h5>
           <i class="fa fa-chevron-down {open ? 'active' : ''}"></i>
         </button>

package/dist/Modules/Editor/Nodes/History/history.svelte

@@ -12,10 +12,10 @@
   }
 </script>
 
-<button on:click={undo} aria-label="Undo" title="Undo" disabled={!editor.can().undo()}>
+<button type="button" on:click={undo} aria-label="Undo" title="Undo" disabled={!editor.can().undo()}>
     <i class="fa fa-undo"></i>
 </button>
 
-<button on:click={redo} aria-label="Redo" title="Redo" disabled={!editor.can().redo()}>
+<button type="button" on:click={redo} aria-label="Redo" title="Redo" disabled={!editor.can().redo()}>
     <i class="fa fa-redo"></i>
 </button>

package/dist/Modules/Editor/Nodes/Images/images.svelte

@@ -89,7 +89,7 @@
 {/snippet}
 <DropdownContainer bind:open={openDropdown} width="150px">
 	{#snippet dropdownTrigger()}
-		<button aria-label="Insert Image" title="Insert File" on:click={() => openDropdown = !openDropdown}>
+		<button type="button" aria-label="Insert Image" title="Insert File" on:click={() => openDropdown = !openDropdown}>
 			<i class="fa fa-file"></i>
 		</button>
 	{/snippet}

package/dist/Modules/Editor/Nodes/Lists/lists.svelte

@@ -13,6 +13,7 @@
 
 <div style="display: flex; gap: 0.5rem">
   <button
+    type="button"
     aria-label="Bullet List"
     title="Bullet List"
     on:click={toggleBullet}
@@ -21,6 +22,7 @@
   </button>
 
   <button
+    type="button"
     aria-label="Ordered List"
     title="Ordered List"
     on:click={toggleOrdered}

package/dist/Modules/Editor/Nodes/TextAlign/textAlign.svelte

@@ -35,7 +35,7 @@
 {#if editor}
   <DropdownContainer bind:open>
     {#snippet dropdownTrigger()}
-        <button aria-label="Text Align Options" on:click={() => (open = !open)}>
+        <button type="button" aria-label="Text Align Options" on:click={() => (open = !open)}>
           <i class="fa-solid fa-align-{currentAlignment.value}"></i>
         </button>
     {/snippet}

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

@@ -33,7 +33,7 @@
 
 <main id="editor-text-color" style="display: flex; gap: 0.5rem; align-items: center;">
 	{#snippet TriggerText()}
-		<button aria-label="Text Color" title="Color" onclick={() => textColorDropdown = !textColorDropdown}>
+		<button type="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>
@@ -42,6 +42,7 @@
 
 	<div style="display: flex;">
 		<button
+			type="button"
 			aria-label="Highlight"
 			title="Highlight"
 			class="{editor.isActive('highlight') ? 'active' : ''}"
@@ -51,7 +52,7 @@
 		<i class="fa fa-font"></i>
 		</button>
 		{#snippet TriggerHighlight()}
-			<button id="color-picker-trigger" aria-label="Highlight Color" onclick={() => highlightDropdown = !highlightDropdown}>
+			<button type="button" id="color-picker-trigger" aria-label="Highlight Color" onclick={() => highlightDropdown = !highlightDropdown}>
 				<i class="fa fa-chevron-down {highlightDropdown ? 'active' : ''}"></i>
 			</button>
 		{/snippet}

package/dist/Modules/Editor/Nodes/Youtube/youtube.svelte

@@ -30,6 +30,7 @@
 {/snippet}
 
 <button 
+  type="button"
   aria-label="Youtube URL"
   on:click={() => triggerModal()} 
   title="Insert YouTube video">

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { default as SearchBar } from './Core/components/Form/Input/SearchBar/sea
 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 PasswordStrength } from './Core/components/Form/Input/PasswordStrength/passwordStrength.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';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as SearchBar } from './Core/components/Form/Input/SearchBar/sea
 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 PasswordStrength } from './Core/components/Form/Input/PasswordStrength/passwordStrength.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';

package/package.json

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