simplesvelte 2.2.23 → 2.4.0

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/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}