@webamoki/web-svelte 0.7.1 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,39 @@
1
+ <script lang="ts">
2
+ import type { Component, Snippet } from 'svelte';
3
+
4
+ interface Props {
5
+ icon?: Component;
6
+ /**
7
+ * Position of the icon vertically.
8
+ * - 'center': Centers vertically (for single-line inputs)
9
+ * - 'top': Aligns to top with padding (for multi-line inputs like textarea)
10
+ */
11
+ iconPosition?: 'center' | 'top';
12
+ /**
13
+ * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
14
+ */
15
+ flex?: boolean;
16
+ children: Snippet<[{ class: string }]>;
17
+ }
18
+
19
+ let { icon, iconPosition = 'center', flex = false, children }: Props = $props();
20
+
21
+ const iconClass =
22
+ iconPosition === 'top'
23
+ ? 'pointer-events-none absolute top-4 left-4 text-gray-500'
24
+ : 'pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-gray-500';
25
+
26
+ const wrapperClass = flex ? 'relative flex-1' : 'relative';
27
+ </script>
28
+
29
+ {#if icon}
30
+ {@const Icon = icon}
31
+ <div class={wrapperClass}>
32
+ <div class={iconClass}>
33
+ <Icon class="size-5" />
34
+ </div>
35
+ {@render children({ class: 'pl-12' })}
36
+ </div>
37
+ {:else}
38
+ {@render children({ class: '' })}
39
+ {/if}
@@ -0,0 +1,20 @@
1
+ import type { Component, Snippet } from 'svelte';
2
+ interface Props {
3
+ icon?: Component;
4
+ /**
5
+ * Position of the icon vertically.
6
+ * - 'center': Centers vertically (for single-line inputs)
7
+ * - 'top': Aligns to top with padding (for multi-line inputs like textarea)
8
+ */
9
+ iconPosition?: 'center' | 'top';
10
+ /**
11
+ * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
12
+ */
13
+ flex?: boolean;
14
+ children: Snippet<[{
15
+ class: string;
16
+ }]>;
17
+ }
18
+ declare const IconInputWrapper: Component<Props, {}, "">;
19
+ type IconInputWrapper = ReturnType<typeof IconInputWrapper>;
20
+ export default IconInputWrapper;
@@ -1,14 +1,18 @@
1
1
  <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
2
- import type { FormPath } from 'sveltekit-superforms';
3
- import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
2
+ import IconInputWrapper from '../IconInputWrapper.svelte';
4
3
  import { Input } from '../../../shadcn/components/ui/input/index.js';
4
+ import { cn } from '../../../shadcn/utils.js';
5
5
  import { CalendarDate } from '@internationalized/date';
6
+ import type { Component } from 'svelte';
7
+ import type { FormPath } from 'sveltekit-superforms';
8
+ import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
6
9
 
7
10
  interface Props extends FieldWrapperProps<T, U, M> {
8
11
  value?: CalendarDate;
9
12
  class?: string;
13
+ icon?: Component;
10
14
  }
11
- let { value = $bindable(), class: className, ...fieldProps }: Props = $props();
15
+ let { value = $bindable(), class: className, icon, ...fieldProps }: Props = $props();
12
16
 
13
17
  // Getter: format CalendarDate → string (YYYY-MM-DD)
14
18
  function get(): string {
@@ -34,6 +38,10 @@
34
38
 
35
39
  <FieldWrapper {...fieldProps}>
36
40
  {#snippet formElem(props)}
37
- <Input type="date" bind:value={get, set} class={className} {...props} />
41
+ <IconInputWrapper {icon}>
42
+ {#snippet children({ class: iconClass })}
43
+ <Input type="date" bind:value={get, set} class={cn(iconClass, className)} {...props} />
44
+ {/snippet}
45
+ </IconInputWrapper>
38
46
  {/snippet}
39
47
  </FieldWrapper>
@@ -1,10 +1,12 @@
1
+ import { CalendarDate } from '@internationalized/date';
2
+ import type { Component } from 'svelte';
1
3
  import type { FormPath } from 'sveltekit-superforms';
2
4
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
- import { CalendarDate } from '@internationalized/date';
4
5
  declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
5
6
  props: FieldWrapperProps<T, U, M> & {
6
7
  value?: CalendarDate;
7
8
  class?: string;
9
+ icon?: Component;
8
10
  };
9
11
  exports: {};
10
12
  bindings: "value";
@@ -1,8 +1,11 @@
1
1
  <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
2
- import type { FormPath } from 'sveltekit-superforms';
3
- import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
2
+ import IconInputWrapper from '../IconInputWrapper.svelte';
4
3
  import { Textarea } from '../../../shadcn/components/ui/textarea/index.js';
4
+ import { cn } from '../../../shadcn/utils.js';
5
5
  import { Lock, LockOpen } from '@lucide/svelte';
6
+ import type { Component } from 'svelte';
7
+ import type { FormPath } from 'sveltekit-superforms';
8
+ import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
6
9
 
7
10
  interface Props extends FieldWrapperProps<T, U, M> {
8
11
  value?: string;
@@ -11,6 +14,7 @@
11
14
  defaultHeight?: number;
12
15
  showLock?: boolean;
13
16
  defaultLocked?: boolean;
17
+ icon?: Component;
14
18
  }
15
19
  let {
16
20
  value = $bindable(),
@@ -19,6 +23,7 @@
19
23
  defaultHeight = 100,
20
24
  showLock = true,
21
25
  defaultLocked = false,
26
+ icon,
22
27
  ...fieldProps
23
28
  }: Props = $props();
24
29
 
@@ -28,14 +33,18 @@
28
33
  <FieldWrapper {...fieldProps}>
29
34
  {#snippet formElem(props)}
30
35
  <div class="flex w-full items-start gap-2">
31
- <!-- Textarea itself -->
32
- <Textarea
33
- bind:value
34
- class={`${className || ''} ${locked ? 'resize-none' : 'resize-y'}`}
35
- {placeholder}
36
- style={defaultHeight ? `height: ${defaultHeight}px` : undefined}
37
- {...props}
38
- />
36
+ <!-- Textarea itself with optional left icon -->
37
+ <IconInputWrapper {icon} iconPosition="top" flex>
38
+ {#snippet children({ class: iconClass })}
39
+ <Textarea
40
+ bind:value
41
+ class={cn(iconClass, className || '', locked ? 'resize-none' : 'resize-y')}
42
+ {placeholder}
43
+ style={defaultHeight ? `height: ${defaultHeight}px` : undefined}
44
+ {...props}
45
+ />
46
+ {/snippet}
47
+ </IconInputWrapper>
39
48
 
40
49
  <!-- Lock/unlock button -->
41
50
  {#if showLock}
@@ -1,3 +1,4 @@
1
+ import type { Component } from 'svelte';
1
2
  import type { FormPath } from 'sveltekit-superforms';
2
3
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
4
  declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -8,6 +9,7 @@ declare function $$render<T extends Record<string, unknown>, U extends FormPath<
8
9
  defaultHeight?: number;
9
10
  showLock?: boolean;
10
11
  defaultLocked?: boolean;
12
+ icon?: Component;
11
13
  };
12
14
  exports: {};
13
15
  bindings: "value";
@@ -1,18 +1,41 @@
1
1
  <script lang="ts" generics="V,T extends Record<string, unknown>, U extends FormPath<T>, M">
2
+ import IconInputWrapper from '../IconInputWrapper.svelte';
3
+ import { Input } from '../../../shadcn/components/ui/input/index.js';
4
+ import { cn } from '../../../shadcn/utils.js';
5
+ import type { Component } from 'svelte';
2
6
  import type { FormPath } from 'sveltekit-superforms';
3
7
  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
4
- import { Input } from '../../../shadcn/components/ui/input/index.js';
5
8
 
6
9
  interface Props extends FieldWrapperProps<T, U, M> {
7
10
  value?: V;
8
11
  class?: string;
9
12
  step?: HTMLInputElement['step'];
13
+ placeholder?: string;
14
+ icon?: Component;
10
15
  }
11
- let { value = $bindable(), class: className, step, ...fieldProps }: Props = $props();
16
+ let {
17
+ value = $bindable(),
18
+ class: className,
19
+ step,
20
+ placeholder,
21
+ icon,
22
+ ...fieldProps
23
+ }: Props = $props();
12
24
  </script>
13
25
 
14
26
  <FieldWrapper {...fieldProps}>
15
27
  {#snippet formElem(props)}
16
- <Input type="number" bind:value class={className} {step} {...props} />
28
+ <IconInputWrapper {icon}>
29
+ {#snippet children({ class: iconClass })}
30
+ <Input
31
+ type="number"
32
+ bind:value
33
+ class={cn(iconClass, className)}
34
+ {placeholder}
35
+ {step}
36
+ {...props}
37
+ />
38
+ {/snippet}
39
+ </IconInputWrapper>
17
40
  {/snippet}
18
41
  </FieldWrapper>
@@ -1,3 +1,4 @@
1
+ import type { Component } from 'svelte';
1
2
  import type { FormPath } from 'sveltekit-superforms';
2
3
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
4
  declare function $$render<V, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -5,6 +6,8 @@ declare function $$render<V, T extends Record<string, unknown>, U extends FormPa
5
6
  value?: V;
6
7
  class?: string;
7
8
  step?: HTMLInputElement["step"];
9
+ placeholder?: string;
10
+ icon?: Component;
8
11
  };
9
12
  exports: {};
10
13
  bindings: "value";
@@ -1,13 +1,18 @@
1
1
  <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
2
- import type { FormPath } from 'sveltekit-superforms';
3
- import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
2
+ import IconInputWrapper from '../IconInputWrapper.svelte';
4
3
  import { Input } from '../../../shadcn/components/ui/input/index.js';
4
+ import { cn } from '../../../shadcn/utils.js';
5
5
  import { Eye, EyeOff } from '@lucide/svelte';
6
+ import type { Component } from 'svelte';
7
+ import type { FormPath } from 'sveltekit-superforms';
8
+ import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
6
9
 
7
10
  interface Props extends FieldWrapperProps<T, U, M> {
8
11
  value?: string;
12
+ class?: string;
13
+ icon?: Component;
9
14
  }
10
- let { value = $bindable(), ...fieldProps }: Props = $props();
15
+ let { value = $bindable(), class: className, icon, ...fieldProps }: Props = $props();
11
16
 
12
17
  let show = $state(false);
13
18
  let inputType = $derived(show ? 'text' : 'password');
@@ -16,8 +21,12 @@
16
21
  <FieldWrapper {...fieldProps}>
17
22
  {#snippet formElem(props)}
18
23
  <div class="flex w-full items-stretch gap-2">
19
- <!-- Input itself -->
20
- <Input type={inputType} bind:value {...props} />
24
+ <!-- Input itself with optional left icon -->
25
+ <IconInputWrapper {icon} flex>
26
+ {#snippet children({ class: iconClass })}
27
+ <Input type={inputType} bind:value class={cn(iconClass, className)} {...props} />
28
+ {/snippet}
29
+ </IconInputWrapper>
21
30
 
22
31
  <!-- Show/hide button outside input -->
23
32
  <button
@@ -1,8 +1,11 @@
1
+ import type { Component } from 'svelte';
1
2
  import type { FormPath } from 'sveltekit-superforms';
2
3
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
4
  declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
4
5
  props: FieldWrapperProps<T, U, M> & {
5
6
  value?: string;
7
+ class?: string;
8
+ icon?: Component;
6
9
  };
7
10
  exports: {};
8
11
  bindings: "value";
@@ -2,6 +2,7 @@
2
2
  lang="ts"
3
3
  generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
4
4
  >
5
+ import IconInputWrapper from '../IconInputWrapper.svelte';
5
6
  import {
6
7
  Select,
7
8
  SelectContent,
@@ -11,6 +12,7 @@
11
12
  SelectTrigger
12
13
  } from '../../../shadcn/components/ui/select/index.js';
13
14
  import { cn } from '../../../shadcn/utils.js';
15
+ import type { Component } from 'svelte';
14
16
  import type { FormPath } from 'sveltekit-superforms';
15
17
  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
16
18
 
@@ -23,6 +25,7 @@
23
25
  onchange?: (value: V | undefined) => void;
24
26
  class?: string;
25
27
  placeholder: string;
28
+ icon?: Component;
26
29
  }
27
30
  let {
28
31
  value = $bindable(undefined),
@@ -33,6 +36,7 @@
33
36
  onchange,
34
37
  placeholder,
35
38
  items,
39
+ icon,
36
40
  ...fieldProps
37
41
  }: Props = $props();
38
42
  let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
@@ -63,11 +67,15 @@
63
67
  <FieldWrapper {...fieldProps}>
64
68
  {#snippet formElem(props)}
65
69
  <Select type="single" {...props} bind:value={getKeyFromValue, setValueFromKey}>
66
- <SelectTrigger class={cn('w-full cursor-pointer truncate', className)}>
67
- <span class="block truncate">
68
- {value ? getLabel(valueToItem.get(value)!) : placeholder}
69
- </span>
70
- </SelectTrigger>
70
+ <IconInputWrapper {icon}>
71
+ {#snippet children({ class: iconClass })}
72
+ <SelectTrigger class={cn('w-full cursor-pointer truncate', iconClass, className)}>
73
+ <span class="block truncate">
74
+ {value ? getLabel(valueToItem.get(value)!) : placeholder}
75
+ </span>
76
+ </SelectTrigger>
77
+ {/snippet}
78
+ </IconInputWrapper>
71
79
  <SelectContent>
72
80
  <SelectGroup>
73
81
  <SelectLabel>{fieldProps.label}</SelectLabel>
@@ -1,3 +1,4 @@
1
+ import type { Component } from 'svelte';
1
2
  import type { FormPath } from 'sveltekit-superforms';
2
3
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
4
  declare function $$render<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -10,6 +11,7 @@ declare function $$render<I, V, K extends string | number, T extends Record<stri
10
11
  onchange?: (value: V | undefined) => void;
11
12
  class?: string;
12
13
  placeholder: string;
14
+ icon?: Component;
13
15
  };
14
16
  exports: {};
15
17
  bindings: "value";
@@ -2,6 +2,7 @@
2
2
  lang="ts"
3
3
  generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
4
4
  >
5
+ import IconInputWrapper from '../IconInputWrapper.svelte';
5
6
  import {
6
7
  Select,
7
8
  SelectContent,
@@ -11,6 +12,7 @@
11
12
  SelectTrigger
12
13
  } from '../../../shadcn/components/ui/select/index.js';
13
14
  import { cn } from '../../../shadcn/utils.js';
15
+ import type { Component } from 'svelte';
14
16
  import type { FormPath } from 'sveltekit-superforms';
15
17
  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
16
18
 
@@ -23,6 +25,7 @@
23
25
  onchange?: (value: V[]) => void;
24
26
  class?: string;
25
27
  placeholder: string;
28
+ icon?: Component;
26
29
  }
27
30
  let {
28
31
  values = $bindable([]),
@@ -33,6 +36,7 @@
33
36
  onchange,
34
37
  placeholder,
35
38
  items,
39
+ icon,
36
40
  ...fieldProps
37
41
  }: Props = $props();
38
42
  let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
@@ -70,11 +74,15 @@
70
74
  <FieldWrapper {...fieldProps}>
71
75
  {#snippet formElem(props)}
72
76
  <Select type="multiple" {...props} bind:value={getKeyFromValue, setValueFromKey}>
73
- <SelectTrigger class={cn('w-full cursor-pointer truncate', className)}>
74
- <span class="block truncate">
75
- {getPreview()}
76
- </span>
77
- </SelectTrigger>
77
+ <IconInputWrapper {icon}>
78
+ {#snippet children({ class: iconClass })}
79
+ <SelectTrigger class={cn('w-full cursor-pointer truncate', iconClass, className)}>
80
+ <span class="block truncate">
81
+ {getPreview()}
82
+ </span>
83
+ </SelectTrigger>
84
+ {/snippet}
85
+ </IconInputWrapper>
78
86
  <SelectContent>
79
87
  <SelectGroup>
80
88
  <SelectLabel>{fieldProps.label}</SelectLabel>
@@ -1,3 +1,4 @@
1
+ import type { Component } from 'svelte';
1
2
  import type { FormPath } from 'sveltekit-superforms';
2
3
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
4
  declare function $$render<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -10,6 +11,7 @@ declare function $$render<I, V, K extends string | number, T extends Record<stri
10
11
  onchange?: (value: V[]) => void;
11
12
  class?: string;
12
13
  placeholder: string;
14
+ icon?: Component;
13
15
  };
14
16
  exports: {};
15
17
  bindings: "values";
@@ -1,25 +1,34 @@
1
1
  <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
2
+ import IconInputWrapper from '../IconInputWrapper.svelte';
3
+ import { Input } from '../../../shadcn/components/ui/input/index.js';
4
+ import { cn } from '../../../shadcn/utils.js';
5
+ import type { Component } from 'svelte';
2
6
  import type { FormPath } from 'sveltekit-superforms';
3
7
  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
4
- import { Input } from '../../../shadcn/components/ui/input/index.js';
5
8
 
6
9
  interface Props extends FieldWrapperProps<T, U, M> {
7
10
  value?: string;
8
11
  type?: HTMLInputElement['type'];
9
12
  class?: string;
10
13
  placeholder?: string;
14
+ icon?: Component;
11
15
  }
12
16
  let {
13
17
  value = $bindable(),
14
18
  type = 'text',
15
19
  class: className,
16
20
  placeholder,
21
+ icon,
17
22
  ...fieldProps
18
23
  }: Props = $props();
19
24
  </script>
20
25
 
21
26
  <FieldWrapper {...fieldProps}>
22
27
  {#snippet formElem(props)}
23
- <Input {type} bind:value class={className} {placeholder} {...props} />
28
+ <IconInputWrapper {icon}>
29
+ {#snippet children({ class: iconClass })}
30
+ <Input {type} bind:value class={cn(iconClass, className)} {placeholder} {...props} />
31
+ {/snippet}
32
+ </IconInputWrapper>
24
33
  {/snippet}
25
34
  </FieldWrapper>
@@ -1,3 +1,4 @@
1
+ import type { Component } from 'svelte';
1
2
  import type { FormPath } from 'sveltekit-superforms';
2
3
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
4
  declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -6,6 +7,7 @@ declare function $$render<T extends Record<string, unknown>, U extends FormPath<
6
7
  type?: HTMLInputElement["type"];
7
8
  class?: string;
8
9
  placeholder?: string;
10
+ icon?: Component;
9
11
  };
10
12
  exports: {};
11
13
  bindings: "value";
@@ -1,19 +1,23 @@
1
1
  <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
2
+ import { Input } from '../../../shadcn/components/ui/input/index.js';
3
+ import { cn } from '../../../shadcn/utils.js';
4
+ import type { Component } from 'svelte';
2
5
  import type { FormPath } from 'sveltekit-superforms';
3
6
  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
4
- import { Input } from '../../../shadcn/components/ui/input/index.js';
5
7
 
6
8
  interface Props extends FieldWrapperProps<T, U, M> {
7
9
  value?: string | null;
8
10
  type?: HTMLInputElement['type'];
9
11
  class?: string;
10
12
  placeholder?: string;
13
+ icon?: Component;
11
14
  }
12
15
  let {
13
16
  value = $bindable(),
14
17
  type = 'text',
15
18
  class: className,
16
19
  placeholder,
20
+ icon,
17
21
  ...fieldProps
18
22
  }: Props = $props();
19
23
 
@@ -28,6 +32,22 @@
28
32
 
29
33
  <FieldWrapper {...fieldProps}>
30
34
  {#snippet formElem(props)}
31
- <Input {type} bind:value={get, set} class={className} {placeholder} {...props} />
35
+ {#if icon}
36
+ {@const Icon = icon}
37
+ <div class="relative">
38
+ <div class="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-gray-500">
39
+ <Icon class="size-5" />
40
+ </div>
41
+ <Input
42
+ {type}
43
+ bind:value={get, set}
44
+ class={cn('pl-12', className)}
45
+ {placeholder}
46
+ {...props}
47
+ />
48
+ </div>
49
+ {:else}
50
+ <Input {type} bind:value={get, set} class={className} {placeholder} {...props} />
51
+ {/if}
32
52
  {/snippet}
33
53
  </FieldWrapper>
@@ -1,3 +1,4 @@
1
+ import type { Component } from 'svelte';
1
2
  import type { FormPath } from 'sveltekit-superforms';
2
3
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
4
  declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -6,6 +7,7 @@ declare function $$render<T extends Record<string, unknown>, U extends FormPath<
6
7
  type?: HTMLInputElement["type"];
7
8
  class?: string;
8
9
  placeholder?: string;
10
+ icon?: Component;
9
11
  };
10
12
  exports: {};
11
13
  bindings: "value";
@@ -1,15 +1,27 @@
1
1
  <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
2
- import type { FormPath } from 'sveltekit-superforms';
3
- import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
2
+ import IconInputWrapper from '../IconInputWrapper.svelte';
4
3
  import { Input } from '../../../shadcn/components/ui/input/index.js';
4
+ import { cn } from '../../../shadcn/utils.js';
5
5
  import { Time } from '@internationalized/date';
6
+ import type { Component } from 'svelte';
7
+ import type { FormPath } from 'sveltekit-superforms';
8
+ import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
6
9
 
7
10
  interface Props extends FieldWrapperProps<T, U, M> {
8
11
  value?: Time;
9
12
  class?: string;
10
13
  step?: HTMLInputElement['step'];
14
+ placeholder?: string;
15
+ icon?: Component;
11
16
  }
12
- let { value = $bindable(), class: className, step, ...fieldProps }: Props = $props();
17
+ let {
18
+ value = $bindable(),
19
+ class: className,
20
+ step,
21
+ placeholder,
22
+ icon,
23
+ ...fieldProps
24
+ }: Props = $props();
13
25
  // Getter: format Time as string depending on step
14
26
  function get(): string {
15
27
  if (!value) return '00:00:00';
@@ -44,6 +56,17 @@
44
56
 
45
57
  <FieldWrapper {...fieldProps}>
46
58
  {#snippet formElem(props)}
47
- <Input type="time" bind:value={get, set} class={className} {step} {...props} />
59
+ <IconInputWrapper {icon}>
60
+ {#snippet children({ class: iconClass })}
61
+ <Input
62
+ type="time"
63
+ bind:value={get, set}
64
+ class={cn(iconClass, className)}
65
+ {placeholder}
66
+ {step}
67
+ {...props}
68
+ />
69
+ {/snippet}
70
+ </IconInputWrapper>
48
71
  {/snippet}
49
72
  </FieldWrapper>
@@ -1,11 +1,14 @@
1
+ import { Time } from '@internationalized/date';
2
+ import type { Component } from 'svelte';
1
3
  import type { FormPath } from 'sveltekit-superforms';
2
4
  import { type FieldWrapperProps } from '../FieldWrapper.svelte';
3
- import { Time } from '@internationalized/date';
4
5
  declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
5
6
  props: FieldWrapperProps<T, U, M> & {
6
7
  value?: Time;
7
8
  class?: string;
8
9
  step?: HTMLInputElement["step"];
10
+ placeholder?: string;
11
+ icon?: Component;
9
12
  };
10
13
  exports: {};
11
14
  bindings: "value";
@@ -3,15 +3,16 @@ import ChoiceField from './fields/ChoiceField.svelte';
3
3
  import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
4
4
  import DateField from './fields/DateField.svelte';
5
5
  import HexColorField from './fields/HexColorField.svelte';
6
+ import MessageField from './fields/MessageField.svelte';
6
7
  import NumberField from './fields/NumberField.svelte';
7
8
  import PasswordField from './fields/PasswordField.svelte';
8
9
  import SelectField from './fields/SelectField.svelte';
9
10
  import SelectMultiField from './fields/SelectMultiField.svelte';
10
11
  import TextField from './fields/TextField.svelte';
11
12
  import TextFieldNullable from './fields/TextFieldNullable.svelte';
12
- import MessageField from './fields/MessageField.svelte';
13
13
  import TimeField from './fields/TimeField.svelte';
14
14
  import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
15
15
  import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
16
16
  import Form from './Form.svelte';
17
- export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, MessageField, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
17
+ import IconInputWrapper from './IconInputWrapper.svelte';
18
+ export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
@@ -3,15 +3,16 @@ import ChoiceField from './fields/ChoiceField.svelte';
3
3
  import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
4
4
  import DateField from './fields/DateField.svelte';
5
5
  import HexColorField from './fields/HexColorField.svelte';
6
+ import MessageField from './fields/MessageField.svelte';
6
7
  import NumberField from './fields/NumberField.svelte';
7
8
  import PasswordField from './fields/PasswordField.svelte';
8
9
  import SelectField from './fields/SelectField.svelte';
9
10
  import SelectMultiField from './fields/SelectMultiField.svelte';
10
11
  import TextField from './fields/TextField.svelte';
11
12
  import TextFieldNullable from './fields/TextFieldNullable.svelte';
12
- import MessageField from './fields/MessageField.svelte';
13
13
  import TimeField from './fields/TimeField.svelte';
14
14
  import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
15
15
  import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
16
16
  import Form from './Form.svelte';
17
- export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, MessageField, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
17
+ import IconInputWrapper from './IconInputWrapper.svelte';
18
+ export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
package/package.json CHANGED
@@ -3,8 +3,12 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.7.1",
6
+ "version": "0.7.2",
7
7
  "license": "MIT",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/Webamoki/Web-svelte"
11
+ },
8
12
  "files": [
9
13
  "dist",
10
14
  "!dist/**/*.test.*",