@webamoki/web-svelte 0.5.33 → 0.5.35

package/dist/components/form/fields/MessageField.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import { Textarea } from '../../../shadcn/components/ui/textarea/index.js';
+	import { Lock, LockOpen } from '@lucide/svelte';
+
+	interface Props extends FieldWrapperProps<T, U, M> {
+		value?: string;
+		class?: string;
+		placeholder?: string;
+		defaultHeight?: number;
+		showLock?: boolean;
+		defaultLocked?: boolean;
+	}
+	let {
+		value = $bindable(),
+		class: className,
+		placeholder,
+		defaultHeight = 100,
+		showLock = true,
+		defaultLocked = false,
+		...fieldProps
+	}: Props = $props();
+
+	let locked = $state(defaultLocked);
+</script>
+
+<FieldWrapper {...fieldProps}>
+	{#snippet formElem(props)}
+		<div class="flex w-full items-start gap-2">
+			<!-- Textarea itself -->
+			<Textarea
+				bind:value
+				class={`${className || ''} ${locked ? 'resize-none' : 'resize-y'}`}
+				{placeholder}
+				style={defaultHeight ? `height: ${defaultHeight}px` : undefined}
+				{...props}
+			/>
+
+			<!-- Lock/unlock button -->
+			{#if showLock}
+				<button
+					type="button"
+					class="flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-gray-300 px-4 py-3 text-gray-500 transition-all hover:bg-gray-50 focus:border-transparent focus:ring-2 focus:ring-primary focus:outline-none"
+					onclick={() => (locked = !locked)}
+					aria-label={locked ? 'Unlock height' : 'Lock height'}
+				>
+					{#if locked}
+						<Lock class="size-5" />
+					{:else}
+						<LockOpen class="size-5" />
+					{/if}
+				</button>
+			{/if}
+		</div>
+	{/snippet}
+</FieldWrapper>

package/dist/components/form/fields/MessageField.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { FormPath } from 'sveltekit-superforms';
+import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & {
+        value?: string;
+        class?: string;
+        placeholder?: string;
+        defaultHeight?: number;
+        showLock?: boolean;
+        defaultLocked?: boolean;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const MessageField: $$IsomorphicComponent;
+type MessageField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof MessageField<T, U, M>>;
+export default MessageField;

package/dist/components/form/fields/PasswordField.svelte

@@ -15,14 +15,14 @@
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
-		<div class="flex w-full items-center gap-2">
+		<div class="flex w-full items-stretch gap-2">
 			<!-- Input itself -->
 			<Input type={inputType} bind:value {...props} />
 
 			<!-- Show/hide button outside input -->
 			<button
 				type="button"
-				class="flex cursor-pointer items-center justify-center rounded-md border px-3 py-2 text-gray-500"
+				class="flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-gray-300 px-4 text-gray-500 transition-all hover:bg-gray-50 focus:border-transparent focus:ring-2 focus:ring-primary focus:outline-none"
 				onclick={() => (show = !show)}
 				aria-label={show ? 'Hide password' : 'Show password'}
 			>

package/dist/components/form/fields/SelectField.svelte

@@ -38,7 +38,7 @@
 	let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
 	let keyToItem: Map<string, I> = new Map(items.map((item) => [getKey(item), item] as const));
 
-	// Enforce string key functino
+	// Enforce string key function
 	function getKey(item: I) {
 		const key = _getKey(item);
 		return key.toString();

package/dist/components/form/fields/SelectMultiField.svelte

@@ -38,7 +38,7 @@
 	let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
 	let keyToItem: Map<string, I> = new Map(items.map((item) => [getKey(item), item] as const));
 
-	// Enforce string key functino
+	// Enforce string key function
 	function getKey(item: I) {
 		const key = _getKey(item);
 		return key.toString();
@@ -70,7 +70,7 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<Select type="multiple" {...props} bind:value={getKeyFromValue, setValueFromKey}>
-			<SelectTrigger class={cn('w-[180px] cursor-pointer truncate', className)}>
+			<SelectTrigger class={cn('w-full cursor-pointer truncate', className)}>
 				<span class="block truncate">
 					{getPreview()}
 				</span>

package/dist/components/form/index.d.ts

@@ -9,8 +9,9 @@ import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
 import TextField from './fields/TextField.svelte';
 import TextFieldNullable from './fields/TextFieldNullable.svelte';
+import MessageField from './fields/MessageField.svelte';
 import TimeField from './fields/TimeField.svelte';
 import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
 import Form from './Form.svelte';
-export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
+export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, MessageField, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/dist/components/form/index.js

@@ -9,8 +9,9 @@ import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
 import TextField from './fields/TextField.svelte';
 import TextFieldNullable from './fields/TextFieldNullable.svelte';
+import MessageField from './fields/MessageField.svelte';
 import TimeField from './fields/TimeField.svelte';
 import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
 import Form from './Form.svelte';
-export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
+export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, MessageField, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/dist/components/ui/search/SearchBar.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <div class="relative w-full max-w-sm">
-	<Search class="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
+	<Search class="absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
 	<Input
 		type="search"
 		{placeholder}

package/dist/shadcn/components/ui/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea };

package/dist/shadcn/components/ui/textarea/index.js

@@ -0,0 +1,4 @@
+import Root from './textarea.svelte';
+export { Root, 
+//
+Root as Textarea };

package/dist/shadcn/components/ui/textarea/textarea.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		'w-full resize-y rounded-lg border border-gray-300 px-4 py-3 outline-none',
+		'transition-[border-color,box-shadow,opacity]',
+		'focus:border-transparent focus:ring-2 focus:ring-primary',
+		'disabled:cursor-not-allowed disabled:opacity-50',
+		'aria-invalid:border-red-500 aria-invalid:focus:ring-red-300',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/dist/shadcn/components/ui/textarea/textarea.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.33",
+  "version": "0.5.35",
   "license": "MIT",
   "files": [
     "dist",