simplesvelte 2.4.10 → 2.4.12

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.
Files changed (3) hide show
  1. package/dist/Input.svelte +145 -141
  2. package/dist/Select.svelte +9 -0
  3. package/package.json +1 -1
package/dist/Input.svelte CHANGED
@@ -1,141 +1,145 @@
1
- <script lang="ts">
2
- import { SvelteDate } from 'svelte/reactivity'
3
- import Label from './Label.svelte'
4
- type Props = {
5
- value?: any
6
- name?: string
7
- label?: string
8
- class?: string
9
- required?: boolean
10
- disabled?: boolean
11
- element?: HTMLElement
12
- type?:
13
- | 'text'
14
- | 'number'
15
- | 'password'
16
- | 'email'
17
- | 'number'
18
- | 'tel'
19
- | 'url'
20
- | 'date'
21
- | 'datetime-local'
22
- | 'color'
23
- | 'file'
24
- | 'checkbox'
25
- error?: string
26
- hideOptional?: boolean
27
- zodErrors?: {
28
- expected: string
29
- code: string
30
- path: string[]
31
- message: string
32
- }[]
33
- [x: string]: any
34
- }
35
- let {
36
- value = $bindable(),
37
- element = $bindable(),
38
- label,
39
- type = 'text',
40
- name,
41
- required,
42
- disabled,
43
- class: myClass,
44
- error,
45
- hideOptional,
46
- zodErrors,
47
- ...rest
48
- }: Props = $props()
49
- function getValue() {
50
- if (type == 'date') {
51
- if (!value) return ''
52
- const dateString = new Date(value).toISOString().split('T')[0]
53
- return dateString
54
- } else if (type == 'datetime-local') {
55
- if (!value) return ''
56
- const date = new Date(value)
57
- const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
58
- return dateString
59
- }
60
- return value ?? ''
61
- }
62
- function setValue(newValue: any) {
63
- if (type == 'number') {
64
- if (isNaN(Number(newValue))) {
65
- value = null
66
- } else {
67
- value = Number(newValue)
68
- }
69
- } else if (type == 'date') {
70
- const date = new SvelteDate(newValue)
71
- if (isNaN(date.getTime())) {
72
- value = null
73
- } else {
74
- date.setUTCHours(0, 0, 0, 0)
75
- value = date
76
- }
77
- } else if (type == 'datetime-local') {
78
- const date = new SvelteDate(newValue)
79
- if (isNaN(date.getTime())) {
80
- value = null
81
- } else {
82
- date.setSeconds(0, 0)
83
- value = date
84
- }
85
- } else {
86
- value = newValue
87
- }
88
- }
89
-
90
- // File input handlers - FileList is readonly
91
- function getFiles() {
92
- return value
93
- }
94
- function setFiles(fileList: FileList | null) {
95
- // FileList is readonly, so we just set it directly
96
- value = fileList
97
- }
98
-
99
- let inputClass = $derived.by(() => {
100
- if (type == 'file') return 'file-input w-full'
101
- if (type == 'checkbox') return 'checkbox checkbox-lg'
102
- return 'input w-full'
103
- })
104
-
105
- let showOptional = $derived.by(() => {
106
- if (hideOptional) return false
107
- return !required && !disabled && type != 'checkbox'
108
- })
109
-
110
- const errorText = $derived.by(() => {
111
- if (error) return error
112
- if (!name) return undefined
113
- if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
114
- return undefined
115
- })
116
- </script>
117
-
118
- <Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
119
- {#if type == 'checkbox'}
120
- <input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
121
- {:else if type == 'file'}
122
- <input
123
- bind:this={element}
124
- {name}
125
- type="file"
126
- {disabled}
127
- {required}
128
- class={inputClass}
129
- {...rest}
130
- bind:files={getFiles, setFiles} />
131
- {:else}
132
- <input
133
- bind:this={element}
134
- {type}
135
- {disabled}
136
- {required}
137
- class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
138
- {...rest}
139
- bind:value={getValue, setValue} />
140
- {/if}
141
- </Label>
1
+ <script lang="ts">
2
+ import { SvelteDate } from 'svelte/reactivity'
3
+ import Label from './Label.svelte'
4
+ type Props = {
5
+ value?: any
6
+ name?: string
7
+ label?: string
8
+ class?: string
9
+ required?: boolean
10
+ disabled?: boolean
11
+ element?: HTMLElement
12
+ type?:
13
+ | 'text'
14
+ | 'number'
15
+ | 'password'
16
+ | 'email'
17
+ | 'number'
18
+ | 'tel'
19
+ | 'url'
20
+ | 'date'
21
+ | 'datetime-local'
22
+ | 'color'
23
+ | 'file'
24
+ | 'checkbox'
25
+ error?: string
26
+ hideOptional?: boolean
27
+ zodErrors?: {
28
+ expected: string
29
+ code: string
30
+ path: string[]
31
+ message: string
32
+ }[]
33
+ [x: string]: any
34
+ }
35
+ let {
36
+ value = $bindable(),
37
+ element = $bindable(),
38
+ label,
39
+ type = 'text',
40
+ name,
41
+ required,
42
+ disabled,
43
+ class: myClass,
44
+ error,
45
+ hideOptional,
46
+ zodErrors,
47
+ ...rest
48
+ }: Props = $props()
49
+ function getValue() {
50
+ if (type == 'date') {
51
+ if (!value) return ''
52
+ const dateString = new Date(value).toISOString().split('T')[0]
53
+ return dateString
54
+ } else if (type == 'datetime-local') {
55
+ if (!value) return ''
56
+ const date = new Date(value)
57
+ const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
58
+ return dateString
59
+ }
60
+ return value ?? ''
61
+ }
62
+ function setValue(newValue: any) {
63
+ if (type == 'number') {
64
+ if (isNaN(Number(newValue))) {
65
+ value = null
66
+ } else {
67
+ value = Number(newValue)
68
+ }
69
+ } else if (type == 'date') {
70
+ const date = new SvelteDate(newValue)
71
+ if (isNaN(date.getTime())) {
72
+ value = null
73
+ } else {
74
+ date.setUTCHours(0, 0, 0, 0)
75
+ value = date
76
+ }
77
+ } else if (type == 'datetime-local') {
78
+ const date = new SvelteDate(newValue)
79
+ if (isNaN(date.getTime())) {
80
+ value = null
81
+ } else {
82
+ date.setSeconds(0, 0)
83
+ value = date
84
+ }
85
+ } else {
86
+ value = newValue
87
+ }
88
+ }
89
+
90
+ // File input handlers - FileList is readonly
91
+ function getFiles() {
92
+ return value
93
+ }
94
+ function setFiles(fileList: FileList | null) {
95
+ // FileList is readonly, so we just set it directly
96
+ value = fileList
97
+ }
98
+
99
+ let inputClass = $derived.by(() => {
100
+ if (type == 'file') return 'file-input w-full'
101
+ if (type == 'checkbox') return 'checkbox checkbox-lg'
102
+ return 'input w-full'
103
+ })
104
+
105
+ let showOptional = $derived.by(() => {
106
+ if (hideOptional) return false
107
+ return !required && !disabled && type != 'checkbox'
108
+ })
109
+
110
+ const errorText = $derived.by(() => {
111
+ if (error) return error
112
+ if (!name) return undefined
113
+ if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
114
+ return undefined
115
+ })
116
+ </script>
117
+
118
+ {#if type != 'file'}
119
+ <input type="hidden" {name} value={value ?? ''} />
120
+ {/if}
121
+
122
+ <Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
123
+ {#if type == 'checkbox'}
124
+ <input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
125
+ {:else if type == 'file'}
126
+ <input
127
+ bind:this={element}
128
+ {name}
129
+ type="file"
130
+ {disabled}
131
+ {required}
132
+ class={inputClass}
133
+ {...rest}
134
+ bind:files={getFiles, setFiles} />
135
+ {:else}
136
+ <input
137
+ bind:this={element}
138
+ {type}
139
+ {disabled}
140
+ {required}
141
+ class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
142
+ {...rest}
143
+ bind:value={getValue, setValue} />
144
+ {/if}
145
+ </Label>
package/dist/Select.svelte CHANGED
@@ -470,6 +470,15 @@
470
470
  }
471
471
  </script>
472
472
 
473
+ <!-- Data inputs for form submission -->
474
+ {#if multiple && Array.isArray(normalizedValue)}
475
+ {#each normalizedValue as val, i (val + '-' + i)}
476
+ <input type="hidden" {name} value={val} />
477
+ {/each}
478
+ {:else if !multiple && normalizedValue !== undefined && normalizedValue !== null && normalizedValue !== ''}
479
+ <input type="hidden" {name} value={normalizedValue} />
480
+ {/if}
481
+
473
482
  <Label {label} {name} optional={!required && !hideOptional} class={className} error={errorText}>
474
483
  {#if !disabled}
475
484
  <!-- Trigger button with popover target and anchor positioning -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "simplesvelte",
3
- "version": "2.4.10",
3
+ "version": "2.4.12",
4
4
  "scripts": {
5
5
  "dev": "bun vite dev",
6
6
  "build": "bun vite build && bun run prepack",