simplesvelte 2.2.23 → 2.3.1
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.
- package/README.md +214 -214
- package/dist/AG_GRID_SERVER_API.md +373 -373
- package/dist/Grid.svelte +129 -129
- package/dist/Input.svelte +142 -142
- package/dist/Label.svelte +43 -43
- package/dist/Modal.svelte +39 -39
- package/dist/Select.svelte +493 -472
- package/dist/TextArea.svelte +43 -43
- package/dist/styles.css +10 -10
- package/package.json +1 -1
package/dist/Grid.svelte
CHANGED
|
@@ -1,129 +1,129 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { onMount } from 'svelte'
|
|
3
|
-
import { env } from '$env/dynamic/public'
|
|
4
|
-
import {
|
|
5
|
-
AllEnterpriseModule,
|
|
6
|
-
ClientSideRowModelModule,
|
|
7
|
-
createGrid,
|
|
8
|
-
LicenseManager,
|
|
9
|
-
ModuleRegistry,
|
|
10
|
-
themeQuartz,
|
|
11
|
-
type GridApi,
|
|
12
|
-
type GridOptions,
|
|
13
|
-
} from 'ag-grid-enterprise'
|
|
14
|
-
|
|
15
|
-
type Props = {
|
|
16
|
-
gridEl?: HTMLDivElement
|
|
17
|
-
gridData?: any[] // Replace with your actual data type
|
|
18
|
-
gridOptions: GridOptions
|
|
19
|
-
class?: string
|
|
20
|
-
}
|
|
21
|
-
let { gridEl = $bindable(), gridData, gridOptions, class: gridClass = 'grow' }: Props = $props()
|
|
22
|
-
|
|
23
|
-
// Register modules once
|
|
24
|
-
|
|
25
|
-
let gridApi: GridApi | undefined
|
|
26
|
-
let initCheckInterval: ReturnType<typeof setInterval> | undefined
|
|
27
|
-
let attemptCount = 0
|
|
28
|
-
|
|
29
|
-
function initializeGrid() {
|
|
30
|
-
if (!gridEl) {
|
|
31
|
-
console.log('⏳ Grid: Element not available yet')
|
|
32
|
-
return
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
if (gridApi) {
|
|
36
|
-
console.log('ℹ️ Grid: Already initialized, skipping')
|
|
37
|
-
return
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
attemptCount++
|
|
41
|
-
console.log(`📊 Grid: Initializing AG Grid (attempt ${attemptCount})...`)
|
|
42
|
-
console.log('📋 Grid: Registering modules...')
|
|
43
|
-
ModuleRegistry.registerModules([AllEnterpriseModule, ClientSideRowModelModule])
|
|
44
|
-
|
|
45
|
-
if (env.PUBLIC_AGGRID_KEY) {
|
|
46
|
-
LicenseManager.setLicenseKey(env.PUBLIC_AGGRID_KEY)
|
|
47
|
-
console.log('✅ Grid: License key applied successfully')
|
|
48
|
-
} else {
|
|
49
|
-
console.warn('⚠️ Grid: No license key found. Running in trial mode.')
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
const gridConfig = {
|
|
53
|
-
...gridOptions,
|
|
54
|
-
theme: themeQuartz,
|
|
55
|
-
...(gridData !== undefined && { rowData: gridData }),
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
console.log('🎨 Grid: Creating grid instance...')
|
|
59
|
-
gridApi = createGrid(gridEl, gridConfig)
|
|
60
|
-
|
|
61
|
-
if (gridData !== undefined) {
|
|
62
|
-
const rowCount = gridData.length
|
|
63
|
-
console.log(`✅ Grid: Initialized with ${rowCount} row(s) (client-side)`)
|
|
64
|
-
} else {
|
|
65
|
-
console.log('✅ Grid: Initialized with server-side data source')
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// Clear the interval once grid is created
|
|
69
|
-
if (initCheckInterval) {
|
|
70
|
-
console.log('⏹️ Grid: Stopping initialization checks')
|
|
71
|
-
clearInterval(initCheckInterval)
|
|
72
|
-
initCheckInterval = undefined
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
onMount(() => {
|
|
77
|
-
console.log('🚀 Grid: Component mounted')
|
|
78
|
-
|
|
79
|
-
// Try to initialize immediately
|
|
80
|
-
initializeGrid()
|
|
81
|
-
|
|
82
|
-
// If grid wasn't created, set up interval to keep checking
|
|
83
|
-
if (!gridApi) {
|
|
84
|
-
console.log('⏱️ Grid: Element not ready, checking every 100ms...')
|
|
85
|
-
initCheckInterval = setInterval(() => {
|
|
86
|
-
initializeGrid()
|
|
87
|
-
}, 100)
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// Cleanup function to destroy grid and clear interval when component unmounts
|
|
91
|
-
return () => {
|
|
92
|
-
console.log('💥 Grid: Component unmounting')
|
|
93
|
-
if (initCheckInterval) {
|
|
94
|
-
console.log('⏹️ Grid: Clearing initialization interval')
|
|
95
|
-
clearInterval(initCheckInterval)
|
|
96
|
-
initCheckInterval = undefined
|
|
97
|
-
}
|
|
98
|
-
if (gridApi) {
|
|
99
|
-
console.log('🧹 Grid: Destroying grid instance')
|
|
100
|
-
gridApi.destroy()
|
|
101
|
-
gridApi = undefined
|
|
102
|
-
console.log('✅ Grid: Cleanup complete')
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
})
|
|
106
|
-
|
|
107
|
-
// Update grid when options or data change
|
|
108
|
-
$effect(() => {
|
|
109
|
-
if (gridApi && gridData !== undefined) {
|
|
110
|
-
const rowCount = gridData.length
|
|
111
|
-
console.log(`🔄 Grid: Data changed, updating grid with ${rowCount} row(s)`)
|
|
112
|
-
|
|
113
|
-
try {
|
|
114
|
-
gridApi.updateGridOptions({
|
|
115
|
-
...gridOptions,
|
|
116
|
-
rowData: gridData,
|
|
117
|
-
})
|
|
118
|
-
gridApi.refreshCells()
|
|
119
|
-
console.log('✅ Grid: Data update complete')
|
|
120
|
-
} catch (error) {
|
|
121
|
-
console.error('❌ Grid: Error updating data:', error)
|
|
122
|
-
}
|
|
123
|
-
} else if (!gridApi && gridData !== undefined) {
|
|
124
|
-
console.log('⚠️ Grid: Data available but grid not initialized yet')
|
|
125
|
-
}
|
|
126
|
-
})
|
|
127
|
-
</script>
|
|
128
|
-
|
|
129
|
-
<div bind:this={gridEl} class={gridClass}></div>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from 'svelte'
|
|
3
|
+
import { env } from '$env/dynamic/public'
|
|
4
|
+
import {
|
|
5
|
+
AllEnterpriseModule,
|
|
6
|
+
ClientSideRowModelModule,
|
|
7
|
+
createGrid,
|
|
8
|
+
LicenseManager,
|
|
9
|
+
ModuleRegistry,
|
|
10
|
+
themeQuartz,
|
|
11
|
+
type GridApi,
|
|
12
|
+
type GridOptions,
|
|
13
|
+
} from 'ag-grid-enterprise'
|
|
14
|
+
|
|
15
|
+
type Props = {
|
|
16
|
+
gridEl?: HTMLDivElement
|
|
17
|
+
gridData?: any[] // Replace with your actual data type
|
|
18
|
+
gridOptions: GridOptions
|
|
19
|
+
class?: string
|
|
20
|
+
}
|
|
21
|
+
let { gridEl = $bindable(), gridData, gridOptions, class: gridClass = 'grow' }: Props = $props()
|
|
22
|
+
|
|
23
|
+
// Register modules once
|
|
24
|
+
|
|
25
|
+
let gridApi: GridApi | undefined
|
|
26
|
+
let initCheckInterval: ReturnType<typeof setInterval> | undefined
|
|
27
|
+
let attemptCount = 0
|
|
28
|
+
|
|
29
|
+
function initializeGrid() {
|
|
30
|
+
if (!gridEl) {
|
|
31
|
+
console.log('⏳ Grid: Element not available yet')
|
|
32
|
+
return
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
if (gridApi) {
|
|
36
|
+
console.log('ℹ️ Grid: Already initialized, skipping')
|
|
37
|
+
return
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
attemptCount++
|
|
41
|
+
console.log(`📊 Grid: Initializing AG Grid (attempt ${attemptCount})...`)
|
|
42
|
+
console.log('📋 Grid: Registering modules...')
|
|
43
|
+
ModuleRegistry.registerModules([AllEnterpriseModule, ClientSideRowModelModule])
|
|
44
|
+
|
|
45
|
+
if (env.PUBLIC_AGGRID_KEY) {
|
|
46
|
+
LicenseManager.setLicenseKey(env.PUBLIC_AGGRID_KEY)
|
|
47
|
+
console.log('✅ Grid: License key applied successfully')
|
|
48
|
+
} else {
|
|
49
|
+
console.warn('⚠️ Grid: No license key found. Running in trial mode.')
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const gridConfig = {
|
|
53
|
+
...gridOptions,
|
|
54
|
+
theme: themeQuartz,
|
|
55
|
+
...(gridData !== undefined && { rowData: gridData }),
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
console.log('🎨 Grid: Creating grid instance...')
|
|
59
|
+
gridApi = createGrid(gridEl, gridConfig)
|
|
60
|
+
|
|
61
|
+
if (gridData !== undefined) {
|
|
62
|
+
const rowCount = gridData.length
|
|
63
|
+
console.log(`✅ Grid: Initialized with ${rowCount} row(s) (client-side)`)
|
|
64
|
+
} else {
|
|
65
|
+
console.log('✅ Grid: Initialized with server-side data source')
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Clear the interval once grid is created
|
|
69
|
+
if (initCheckInterval) {
|
|
70
|
+
console.log('⏹️ Grid: Stopping initialization checks')
|
|
71
|
+
clearInterval(initCheckInterval)
|
|
72
|
+
initCheckInterval = undefined
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
onMount(() => {
|
|
77
|
+
console.log('🚀 Grid: Component mounted')
|
|
78
|
+
|
|
79
|
+
// Try to initialize immediately
|
|
80
|
+
initializeGrid()
|
|
81
|
+
|
|
82
|
+
// If grid wasn't created, set up interval to keep checking
|
|
83
|
+
if (!gridApi) {
|
|
84
|
+
console.log('⏱️ Grid: Element not ready, checking every 100ms...')
|
|
85
|
+
initCheckInterval = setInterval(() => {
|
|
86
|
+
initializeGrid()
|
|
87
|
+
}, 100)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Cleanup function to destroy grid and clear interval when component unmounts
|
|
91
|
+
return () => {
|
|
92
|
+
console.log('💥 Grid: Component unmounting')
|
|
93
|
+
if (initCheckInterval) {
|
|
94
|
+
console.log('⏹️ Grid: Clearing initialization interval')
|
|
95
|
+
clearInterval(initCheckInterval)
|
|
96
|
+
initCheckInterval = undefined
|
|
97
|
+
}
|
|
98
|
+
if (gridApi) {
|
|
99
|
+
console.log('🧹 Grid: Destroying grid instance')
|
|
100
|
+
gridApi.destroy()
|
|
101
|
+
gridApi = undefined
|
|
102
|
+
console.log('✅ Grid: Cleanup complete')
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
})
|
|
106
|
+
|
|
107
|
+
// Update grid when options or data change
|
|
108
|
+
$effect(() => {
|
|
109
|
+
if (gridApi && gridData !== undefined) {
|
|
110
|
+
const rowCount = gridData.length
|
|
111
|
+
console.log(`🔄 Grid: Data changed, updating grid with ${rowCount} row(s)`)
|
|
112
|
+
|
|
113
|
+
try {
|
|
114
|
+
gridApi.updateGridOptions({
|
|
115
|
+
...gridOptions,
|
|
116
|
+
rowData: gridData,
|
|
117
|
+
})
|
|
118
|
+
gridApi.refreshCells()
|
|
119
|
+
console.log('✅ Grid: Data update complete')
|
|
120
|
+
} catch (error) {
|
|
121
|
+
console.error('❌ Grid: Error updating data:', error)
|
|
122
|
+
}
|
|
123
|
+
} else if (!gridApi && gridData !== undefined) {
|
|
124
|
+
console.log('⚠️ Grid: Data available but grid not initialized yet')
|
|
125
|
+
}
|
|
126
|
+
})
|
|
127
|
+
</script>
|
|
128
|
+
|
|
129
|
+
<div bind:this={gridEl} class={gridClass}></div>
|
package/dist/Input.svelte
CHANGED
|
@@ -1,142 +1,142 @@
|
|
|
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
|
-
zodErrors?: {
|
|
27
|
-
expected: string
|
|
28
|
-
code: string
|
|
29
|
-
path: string[]
|
|
30
|
-
message: string
|
|
31
|
-
}[]
|
|
32
|
-
[x: string]: any
|
|
33
|
-
}
|
|
34
|
-
let {
|
|
35
|
-
value = $bindable(),
|
|
36
|
-
element = $bindable(),
|
|
37
|
-
label,
|
|
38
|
-
type = 'text',
|
|
39
|
-
name,
|
|
40
|
-
required,
|
|
41
|
-
disabled,
|
|
42
|
-
class: myClass,
|
|
43
|
-
error,
|
|
44
|
-
zodErrors,
|
|
45
|
-
...rest
|
|
46
|
-
}: Props = $props()
|
|
47
|
-
function getValue() {
|
|
48
|
-
if (type == 'date') {
|
|
49
|
-
if (!value) return ''
|
|
50
|
-
const dateString = new Date(value).toISOString().split('T')[0]
|
|
51
|
-
return dateString
|
|
52
|
-
} else if (type == 'datetime-local') {
|
|
53
|
-
if (!value) return ''
|
|
54
|
-
const date = new Date(value)
|
|
55
|
-
const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
|
|
56
|
-
return dateString
|
|
57
|
-
}
|
|
58
|
-
return value ?? ''
|
|
59
|
-
}
|
|
60
|
-
function setValue(newValue: any) {
|
|
61
|
-
if (type == 'number') {
|
|
62
|
-
if (isNaN(Number(newValue))) {
|
|
63
|
-
value = null
|
|
64
|
-
} else {
|
|
65
|
-
value = Number(newValue)
|
|
66
|
-
}
|
|
67
|
-
} else if (type == 'date') {
|
|
68
|
-
const date = new SvelteDate(newValue)
|
|
69
|
-
if (isNaN(date.getTime())) {
|
|
70
|
-
value = null
|
|
71
|
-
} else {
|
|
72
|
-
date.setUTCHours(0, 0, 0, 0)
|
|
73
|
-
value = date
|
|
74
|
-
}
|
|
75
|
-
} else if (type == 'datetime-local') {
|
|
76
|
-
const date = new SvelteDate(newValue)
|
|
77
|
-
if (isNaN(date.getTime())) {
|
|
78
|
-
value = null
|
|
79
|
-
} else {
|
|
80
|
-
date.setSeconds(0, 0)
|
|
81
|
-
value = date
|
|
82
|
-
}
|
|
83
|
-
} else {
|
|
84
|
-
value = newValue
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
// File input handlers - FileList is readonly
|
|
89
|
-
function getFiles() {
|
|
90
|
-
return value
|
|
91
|
-
}
|
|
92
|
-
function setFiles(fileList: FileList | null) {
|
|
93
|
-
// FileList is readonly, so we just set it directly
|
|
94
|
-
value = fileList
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
let inputClass = $derived.by(() => {
|
|
98
|
-
if (type == 'file') return 'file-input w-full'
|
|
99
|
-
if (type == 'checkbox') return 'checkbox checkbox-lg'
|
|
100
|
-
return 'input w-full'
|
|
101
|
-
})
|
|
102
|
-
|
|
103
|
-
let showOptional = $derived.by(() => {
|
|
104
|
-
return !required && !disabled && type != 'checkbox'
|
|
105
|
-
})
|
|
106
|
-
|
|
107
|
-
const errorText = $derived.by(() => {
|
|
108
|
-
if (error) return error
|
|
109
|
-
if (!name) return undefined
|
|
110
|
-
if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
|
|
111
|
-
return undefined
|
|
112
|
-
})
|
|
113
|
-
</script>
|
|
114
|
-
|
|
115
|
-
{#if type != 'file'}
|
|
116
|
-
<input type="hidden" {name} value={value ?? ''} />
|
|
117
|
-
{/if}
|
|
118
|
-
|
|
119
|
-
<Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
|
|
120
|
-
{#if type == 'checkbox'}
|
|
121
|
-
<input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
|
|
122
|
-
{:else if type == 'file'}
|
|
123
|
-
<input
|
|
124
|
-
bind:this={element}
|
|
125
|
-
{name}
|
|
126
|
-
type="file"
|
|
127
|
-
{disabled}
|
|
128
|
-
{required}
|
|
129
|
-
class={inputClass}
|
|
130
|
-
{...rest}
|
|
131
|
-
bind:files={getFiles, setFiles} />
|
|
132
|
-
{:else}
|
|
133
|
-
<input
|
|
134
|
-
bind:this={element}
|
|
135
|
-
{type}
|
|
136
|
-
{disabled}
|
|
137
|
-
{required}
|
|
138
|
-
class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
|
|
139
|
-
{...rest}
|
|
140
|
-
bind:value={getValue, setValue} />
|
|
141
|
-
{/if}
|
|
142
|
-
</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
|
+
zodErrors?: {
|
|
27
|
+
expected: string
|
|
28
|
+
code: string
|
|
29
|
+
path: string[]
|
|
30
|
+
message: string
|
|
31
|
+
}[]
|
|
32
|
+
[x: string]: any
|
|
33
|
+
}
|
|
34
|
+
let {
|
|
35
|
+
value = $bindable(),
|
|
36
|
+
element = $bindable(),
|
|
37
|
+
label,
|
|
38
|
+
type = 'text',
|
|
39
|
+
name,
|
|
40
|
+
required,
|
|
41
|
+
disabled,
|
|
42
|
+
class: myClass,
|
|
43
|
+
error,
|
|
44
|
+
zodErrors,
|
|
45
|
+
...rest
|
|
46
|
+
}: Props = $props()
|
|
47
|
+
function getValue() {
|
|
48
|
+
if (type == 'date') {
|
|
49
|
+
if (!value) return ''
|
|
50
|
+
const dateString = new Date(value).toISOString().split('T')[0]
|
|
51
|
+
return dateString
|
|
52
|
+
} else if (type == 'datetime-local') {
|
|
53
|
+
if (!value) return ''
|
|
54
|
+
const date = new Date(value)
|
|
55
|
+
const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
|
|
56
|
+
return dateString
|
|
57
|
+
}
|
|
58
|
+
return value ?? ''
|
|
59
|
+
}
|
|
60
|
+
function setValue(newValue: any) {
|
|
61
|
+
if (type == 'number') {
|
|
62
|
+
if (isNaN(Number(newValue))) {
|
|
63
|
+
value = null
|
|
64
|
+
} else {
|
|
65
|
+
value = Number(newValue)
|
|
66
|
+
}
|
|
67
|
+
} else if (type == 'date') {
|
|
68
|
+
const date = new SvelteDate(newValue)
|
|
69
|
+
if (isNaN(date.getTime())) {
|
|
70
|
+
value = null
|
|
71
|
+
} else {
|
|
72
|
+
date.setUTCHours(0, 0, 0, 0)
|
|
73
|
+
value = date
|
|
74
|
+
}
|
|
75
|
+
} else if (type == 'datetime-local') {
|
|
76
|
+
const date = new SvelteDate(newValue)
|
|
77
|
+
if (isNaN(date.getTime())) {
|
|
78
|
+
value = null
|
|
79
|
+
} else {
|
|
80
|
+
date.setSeconds(0, 0)
|
|
81
|
+
value = date
|
|
82
|
+
}
|
|
83
|
+
} else {
|
|
84
|
+
value = newValue
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// File input handlers - FileList is readonly
|
|
89
|
+
function getFiles() {
|
|
90
|
+
return value
|
|
91
|
+
}
|
|
92
|
+
function setFiles(fileList: FileList | null) {
|
|
93
|
+
// FileList is readonly, so we just set it directly
|
|
94
|
+
value = fileList
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
let inputClass = $derived.by(() => {
|
|
98
|
+
if (type == 'file') return 'file-input w-full'
|
|
99
|
+
if (type == 'checkbox') return 'checkbox checkbox-lg'
|
|
100
|
+
return 'input w-full'
|
|
101
|
+
})
|
|
102
|
+
|
|
103
|
+
let showOptional = $derived.by(() => {
|
|
104
|
+
return !required && !disabled && type != 'checkbox'
|
|
105
|
+
})
|
|
106
|
+
|
|
107
|
+
const errorText = $derived.by(() => {
|
|
108
|
+
if (error) return error
|
|
109
|
+
if (!name) return undefined
|
|
110
|
+
if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
|
|
111
|
+
return undefined
|
|
112
|
+
})
|
|
113
|
+
</script>
|
|
114
|
+
|
|
115
|
+
{#if type != 'file'}
|
|
116
|
+
<input type="hidden" {name} value={value ?? ''} />
|
|
117
|
+
{/if}
|
|
118
|
+
|
|
119
|
+
<Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
|
|
120
|
+
{#if type == 'checkbox'}
|
|
121
|
+
<input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
|
|
122
|
+
{:else if type == 'file'}
|
|
123
|
+
<input
|
|
124
|
+
bind:this={element}
|
|
125
|
+
{name}
|
|
126
|
+
type="file"
|
|
127
|
+
{disabled}
|
|
128
|
+
{required}
|
|
129
|
+
class={inputClass}
|
|
130
|
+
{...rest}
|
|
131
|
+
bind:files={getFiles, setFiles} />
|
|
132
|
+
{:else}
|
|
133
|
+
<input
|
|
134
|
+
bind:this={element}
|
|
135
|
+
{type}
|
|
136
|
+
{disabled}
|
|
137
|
+
{required}
|
|
138
|
+
class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
|
|
139
|
+
{...rest}
|
|
140
|
+
bind:value={getValue, setValue} />
|
|
141
|
+
{/if}
|
|
142
|
+
</Label>
|
package/dist/Label.svelte
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { type Snippet } from 'svelte'
|
|
3
|
-
type Props = {
|
|
4
|
-
class?: string
|
|
5
|
-
labelClass?: string
|
|
6
|
-
label: string | undefined
|
|
7
|
-
name?: string
|
|
8
|
-
optional?: boolean
|
|
9
|
-
disabled?: boolean
|
|
10
|
-
children?: Snippet
|
|
11
|
-
error?: string
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
let {
|
|
15
|
-
class: className = '',
|
|
16
|
-
labelClass = '',
|
|
17
|
-
name = '',
|
|
18
|
-
optional = false,
|
|
19
|
-
label,
|
|
20
|
-
disabled,
|
|
21
|
-
children,
|
|
22
|
-
error,
|
|
23
|
-
}: Props = $props()
|
|
24
|
-
</script>
|
|
25
|
-
|
|
26
|
-
{#if label}
|
|
27
|
-
<label class="flex w-full flex-col {className}" for={name}>
|
|
28
|
-
<div class="label mb-1 p-0 text-sm">
|
|
29
|
-
<span class={labelClass}>{label}</span>
|
|
30
|
-
{#if optional && !disabled}
|
|
31
|
-
<span class="label">(Optional)</span>
|
|
32
|
-
{/if}
|
|
33
|
-
</div>
|
|
34
|
-
{@render children?.()}
|
|
35
|
-
{#if error}
|
|
36
|
-
<div>
|
|
37
|
-
<span class="text-xs text-red-500">{error}</span>
|
|
38
|
-
</div>
|
|
39
|
-
{/if}
|
|
40
|
-
</label>
|
|
41
|
-
{:else}
|
|
42
|
-
{@render children?.()}
|
|
43
|
-
{/if}
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { type Snippet } from 'svelte'
|
|
3
|
+
type Props = {
|
|
4
|
+
class?: string
|
|
5
|
+
labelClass?: string
|
|
6
|
+
label: string | undefined
|
|
7
|
+
name?: string
|
|
8
|
+
optional?: boolean
|
|
9
|
+
disabled?: boolean
|
|
10
|
+
children?: Snippet
|
|
11
|
+
error?: string
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
let {
|
|
15
|
+
class: className = '',
|
|
16
|
+
labelClass = '',
|
|
17
|
+
name = '',
|
|
18
|
+
optional = false,
|
|
19
|
+
label,
|
|
20
|
+
disabled,
|
|
21
|
+
children,
|
|
22
|
+
error,
|
|
23
|
+
}: Props = $props()
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if label}
|
|
27
|
+
<label class="flex w-full flex-col {className}" for={name}>
|
|
28
|
+
<div class="label mb-1 p-0 text-sm">
|
|
29
|
+
<span class={labelClass}>{label}</span>
|
|
30
|
+
{#if optional && !disabled}
|
|
31
|
+
<span class="label">(Optional)</span>
|
|
32
|
+
{/if}
|
|
33
|
+
</div>
|
|
34
|
+
{@render children?.()}
|
|
35
|
+
{#if error}
|
|
36
|
+
<div>
|
|
37
|
+
<span class="text-xs text-red-500">{error}</span>
|
|
38
|
+
</div>
|
|
39
|
+
{/if}
|
|
40
|
+
</label>
|
|
41
|
+
{:else}
|
|
42
|
+
{@render children?.()}
|
|
43
|
+
{/if}
|