simplesvelte 2.5.0 → 2.5.1

package/dist/Input.svelte

@@ -1,145 +1,145 @@
-<script lang="ts">
-	import { SvelteDate } from 'svelte/reactivity'
-	import Label from './Label.svelte'
-	type Props = {
-		value?: any
-		name?: string
-		label?: string
-		class?: string
-		required?: boolean
-		disabled?: boolean
-		element?: HTMLElement
-		type?:
-			| 'text'
-			| 'number'
-			| 'password'
-			| 'email'
-			| 'number'
-			| 'tel'
-			| 'url'
-			| 'date'
-			| 'datetime-local'
-			| 'color'
-			| 'file'
-			| 'checkbox'
-		error?: string
-		hideOptional?: boolean
-		zodErrors?: {
-			expected: string
-			code: string
-			path: string[]
-			message: string
-		}[]
-		[x: string]: any
-	}
-	let {
-		value = $bindable(),
-		element = $bindable(),
-		label,
-		type = 'text',
-		name,
-		required,
-		disabled,
-		class: myClass,
-		error,
-		hideOptional,
-		zodErrors,
-		...rest
-	}: Props = $props()
-	function getValue() {
-		if (type == 'date') {
-			if (!value) return ''
-			const dateString = new Date(value).toISOString().split('T')[0]
-			return dateString
-		} else if (type == 'datetime-local') {
-			if (!value) return ''
-			const date = new Date(value)
-			const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
-			return dateString
-		}
-		return value ?? ''
-	}
-	function setValue(newValue: any) {
-		if (type == 'number') {
-			if (isNaN(Number(newValue))) {
-				value = null
-			} else {
-				value = Number(newValue)
-			}
-		} else if (type == 'date') {
-			const date = new SvelteDate(newValue)
-			if (isNaN(date.getTime())) {
-				value = null
-			} else {
-				date.setUTCHours(0, 0, 0, 0)
-				value = date
-			}
-		} else if (type == 'datetime-local') {
-			const date = new SvelteDate(newValue)
-			if (isNaN(date.getTime())) {
-				value = null
-			} else {
-				date.setSeconds(0, 0)
-				value = date
-			}
-		} else {
-			value = newValue
-		}
-	}
-
-	// File input handlers - FileList is readonly
-	function getFiles() {
-		return value
-	}
-	function setFiles(fileList: FileList | null) {
-		// FileList is readonly, so we just set it directly
-		value = fileList
-	}
-
-	let inputClass = $derived.by(() => {
-		if (type == 'file') return 'file-input w-full'
-		if (type == 'checkbox') return 'checkbox  checkbox-lg'
-		return 'input w-full'
-	})
-
-	let showOptional = $derived.by(() => {
-		if (hideOptional) return false
-		return !required && !disabled && type != 'checkbox'
-	})
-
-	const errorText = $derived.by(() => {
-		if (error) return error
-		if (!name) return undefined
-		if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
-		return undefined
-	})
-</script>
-
-{#if type != 'file'}
-	<input type="hidden" {name} value={value ?? ''} />
-{/if}
-
-<Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
-	{#if type == 'checkbox'}
-		<input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
-	{:else if type == 'file'}
-		<input
-			bind:this={element}
-			{name}
-			type="file"
-			{disabled}
-			{required}
-			class={inputClass}
-			{...rest}
-			bind:files={getFiles, setFiles} />
-	{:else}
-		<input
-			bind:this={element}
-			{type}
-			{disabled}
-			{required}
-			class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
-			{...rest}
-			bind:value={getValue, setValue} />
-	{/if}
-</Label>
+<script lang="ts">
+	import { SvelteDate } from 'svelte/reactivity'
+	import Label from './Label.svelte'
+	type Props = {
+		value?: any
+		name?: string
+		label?: string
+		class?: string
+		required?: boolean
+		disabled?: boolean
+		element?: HTMLElement
+		type?:
+			| 'text'
+			| 'number'
+			| 'password'
+			| 'email'
+			| 'number'
+			| 'tel'
+			| 'url'
+			| 'date'
+			| 'datetime-local'
+			| 'color'
+			| 'file'
+			| 'checkbox'
+		error?: string
+		hideOptional?: boolean
+		zodErrors?: {
+			expected: string
+			code: string
+			path: string[]
+			message: string
+		}[]
+		[x: string]: any
+	}
+	let {
+		value = $bindable(),
+		element = $bindable(),
+		label,
+		type = 'text',
+		name,
+		required,
+		disabled,
+		class: myClass,
+		error,
+		hideOptional,
+		zodErrors,
+		...rest
+	}: Props = $props()
+	function getValue() {
+		if (type == 'date') {
+			if (!value) return ''
+			const dateString = new Date(value).toISOString().split('T')[0]
+			return dateString
+		} else if (type == 'datetime-local') {
+			if (!value) return ''
+			const date = new Date(value)
+			const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
+			return dateString
+		}
+		return value ?? ''
+	}
+	function setValue(newValue: any) {
+		if (type == 'number') {
+			if (isNaN(Number(newValue))) {
+				value = null
+			} else {
+				value = Number(newValue)
+			}
+		} else if (type == 'date') {
+			const date = new SvelteDate(newValue)
+			if (isNaN(date.getTime())) {
+				value = null
+			} else {
+				date.setUTCHours(0, 0, 0, 0)
+				value = date
+			}
+		} else if (type == 'datetime-local') {
+			const date = new SvelteDate(newValue)
+			if (isNaN(date.getTime())) {
+				value = null
+			} else {
+				date.setSeconds(0, 0)
+				value = date
+			}
+		} else {
+			value = newValue
+		}
+	}
+
+	// File input handlers - FileList is readonly
+	function getFiles() {
+		return value
+	}
+	function setFiles(fileList: FileList | null) {
+		// FileList is readonly, so we just set it directly
+		value = fileList
+	}
+
+	let inputClass = $derived.by(() => {
+		if (type == 'file') return 'file-input w-full'
+		if (type == 'checkbox') return 'checkbox  checkbox-lg'
+		return 'input w-full'
+	})
+
+	let showOptional = $derived.by(() => {
+		if (hideOptional) return false
+		return !required && !disabled && type != 'checkbox'
+	})
+
+	const errorText = $derived.by(() => {
+		if (error) return error
+		if (!name) return undefined
+		if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
+		return undefined
+	})
+</script>
+
+{#if type != 'file'}
+	<input type="hidden" {name} value={value ?? ''} />
+{/if}
+
+<Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
+	{#if type == 'checkbox'}
+		<input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
+	{:else if type == 'file'}
+		<input
+			bind:this={element}
+			{name}
+			type="file"
+			{disabled}
+			{required}
+			class={inputClass}
+			{...rest}
+			bind:files={getFiles, setFiles} />
+	{:else}
+		<input
+			bind:this={element}
+			{type}
+			{disabled}
+			{required}
+			class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
+			{...rest}
+			bind:value={getValue, setValue} />
+	{/if}
+</Label>

package/dist/Label.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-	import { type Snippet } from 'svelte'
-	type Props = {
-		class?: string
-		labelClass?: string
-		label: string | undefined
-		name?: string
-		optional?: boolean
-		disabled?: boolean
-		children?: Snippet
-		error?: string
-	}
-
-	let {
-		class: className = '',
-		labelClass = '',
-		name = '',
-		optional = false,
-		label,
-		disabled,
-		children,
-		error,
-	}: Props = $props()
-</script>
-
-{#if label}
-	<label class="flex w-full flex-col {className}" for={name}>
-		<div class="label mb-1 p-0 text-sm">
-			<span class={labelClass}>{label}</span>
-			{#if optional && !disabled}
-				<span class="label">(Optional)</span>
-			{/if}
-		</div>
-		{@render children?.()}
-		{#if error}
-			<div>
-				<span class="text-xs text-red-500">{error}</span>
-			</div>
-		{/if}
-	</label>
-{:else}
-	{@render children?.()}
-{/if}
+<script lang="ts">
+	import { type Snippet } from 'svelte'
+	type Props = {
+		class?: string
+		labelClass?: string
+		label: string | undefined
+		name?: string
+		optional?: boolean
+		disabled?: boolean
+		children?: Snippet
+		error?: string
+	}
+
+	let {
+		class: className = '',
+		labelClass = '',
+		name = '',
+		optional = false,
+		label,
+		disabled,
+		children,
+		error,
+	}: Props = $props()
+</script>
+
+{#if label}
+	<label class="flex w-full flex-col {className}" for={name}>
+		<div class="label mb-1 p-0 text-sm">
+			<span class={labelClass}>{label}</span>
+			{#if optional && !disabled}
+				<span class="label">(Optional)</span>
+			{/if}
+		</div>
+		{@render children?.()}
+		{#if error}
+			<div>
+				<span class="text-xs text-red-500">{error}</span>
+			</div>
+		{/if}
+	</label>
+{:else}
+	{@render children?.()}
+{/if}

package/dist/Modal.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-
-	let { open = $bindable(), title, children }: Props = $props()
-
-	let dialogEl: HTMLDialogElement | undefined = $state()
-	interface Props {
-		open: boolean
-		title: string
-		children?: Snippet
-	}
-
-	$effect(() => {
-		if (!dialogEl) return
-
-		if (open) {
-			dialogEl.showModal()
-		} else {
-			dialogEl.close()
-		}
-	})
-</script>
-
-<dialog bind:this={dialogEl} onclose={() => (open = false)} class="modal modal-middle overflow-auto">
-	<div class="modal-box pt-12 md:min-w-[32rem]">
-		<form method="dialog">
-			<button
-				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
-				onclick={() => {
-					open = false
-				}}>✕</button>
-		</form>
-		<h1 class="absolute top-2 text-lg font-semibold text-red-700 uppercase">{title}</h1>
-
-		{#if open}
-			{@render children?.()}
-		{/if}
-	</div>
-</dialog>
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	let { open = $bindable(), title, children }: Props = $props()
+
+	let dialogEl: HTMLDialogElement | undefined = $state()
+	interface Props {
+		open: boolean
+		title: string
+		children?: Snippet
+	}
+
+	$effect(() => {
+		if (!dialogEl) return
+
+		if (open) {
+			dialogEl.showModal()
+		} else {
+			dialogEl.close()
+		}
+	})
+</script>
+
+<dialog bind:this={dialogEl} onclose={() => (open = false)} class="modal modal-middle overflow-auto">
+	<div class="modal-box pt-12 md:min-w-[32rem]">
+		<form method="dialog">
+			<button
+				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
+				onclick={() => {
+					open = false
+				}}>✕</button>
+		</form>
+		<h1 class="absolute top-2 text-lg font-semibold text-red-700 uppercase">{title}</h1>
+
+		{#if open}
+			{@render children?.()}
+		{/if}
+	</div>
+</dialog>