sveltekit-ui 1.0.21 → 1.0.22
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.
|
@@ -294,7 +294,11 @@ export function create_content_input_manager(config) {
|
|
|
294
294
|
return
|
|
295
295
|
}
|
|
296
296
|
setTimeout(() => {
|
|
297
|
-
|
|
297
|
+
if (location_to_add_element == "sibling") {
|
|
298
|
+
add_sibling_el(element?.selector_id, input)
|
|
299
|
+
} else {
|
|
300
|
+
add_child_el(element?.selector_id, input)
|
|
301
|
+
}
|
|
298
302
|
}, 500)
|
|
299
303
|
},
|
|
300
304
|
})
|
|
@@ -445,6 +449,7 @@ export function create_content_input_manager(config) {
|
|
|
445
449
|
}
|
|
446
450
|
|
|
447
451
|
function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
|
|
452
|
+
console.log("add_sibling_el", selector_id, el_type_id)
|
|
448
453
|
let dom_el_parent = get_parent_el(selector_id)
|
|
449
454
|
const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
|
|
450
455
|
? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
|
|
@@ -464,8 +469,10 @@ export function create_content_input_manager(config) {
|
|
|
464
469
|
}
|
|
465
470
|
|
|
466
471
|
function initiate_add_sibling_el_to_selector(selector_id) {
|
|
472
|
+
console.log("initiate_add_sibling_el_to_selector", selector_id)
|
|
467
473
|
const dom_el_parent = get_parent_el(selector_id)
|
|
468
474
|
const avail_element_ids = calc_child_element_options(dom_el_parent)
|
|
475
|
+
console.log("avail_element_ids", avail_element_ids)
|
|
469
476
|
if (avail_element_ids.length > 1) {
|
|
470
477
|
location_to_add_element = "sibling"
|
|
471
478
|
find_and_open_add_element_popover_selector_id(selected_version_prepped, selector_id ?? "root")
|
|
@@ -511,6 +518,7 @@ export function create_content_input_manager(config) {
|
|
|
511
518
|
}
|
|
512
519
|
|
|
513
520
|
function add_el_to_el_children(selector_id, new_element) {
|
|
521
|
+
console.log("add_el_to_el_children", selector_id)
|
|
514
522
|
add_version(add_child_to_el_recursive(selected_version_prepped?.element, selector_id, new_element))
|
|
515
523
|
}
|
|
516
524
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sveltekit-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.22",
|
|
4
4
|
"description": "A SvelteKit UI component library for building modern web applications",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"context-filter-polyfill": "^0.3.23",
|
|
21
21
|
"qr-code-styling": "^1.9.2",
|
|
22
|
-
"svelte": "^5.38.
|
|
22
|
+
"svelte": "^5.38.2"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@sveltejs/kit": "^2.22.2"
|
|
@@ -294,7 +294,11 @@ export function create_content_input_manager(config) {
|
|
|
294
294
|
return
|
|
295
295
|
}
|
|
296
296
|
setTimeout(() => {
|
|
297
|
-
|
|
297
|
+
if (location_to_add_element == "sibling") {
|
|
298
|
+
add_sibling_el(element?.selector_id, input)
|
|
299
|
+
} else {
|
|
300
|
+
add_child_el(element?.selector_id, input)
|
|
301
|
+
}
|
|
298
302
|
}, 500)
|
|
299
303
|
},
|
|
300
304
|
})
|
|
@@ -445,6 +449,7 @@ export function create_content_input_manager(config) {
|
|
|
445
449
|
}
|
|
446
450
|
|
|
447
451
|
function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
|
|
452
|
+
console.log("add_sibling_el", selector_id, el_type_id)
|
|
448
453
|
let dom_el_parent = get_parent_el(selector_id)
|
|
449
454
|
const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
|
|
450
455
|
? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
|
|
@@ -464,8 +469,10 @@ export function create_content_input_manager(config) {
|
|
|
464
469
|
}
|
|
465
470
|
|
|
466
471
|
function initiate_add_sibling_el_to_selector(selector_id) {
|
|
472
|
+
console.log("initiate_add_sibling_el_to_selector", selector_id)
|
|
467
473
|
const dom_el_parent = get_parent_el(selector_id)
|
|
468
474
|
const avail_element_ids = calc_child_element_options(dom_el_parent)
|
|
475
|
+
console.log("avail_element_ids", avail_element_ids)
|
|
469
476
|
if (avail_element_ids.length > 1) {
|
|
470
477
|
location_to_add_element = "sibling"
|
|
471
478
|
find_and_open_add_element_popover_selector_id(selected_version_prepped, selector_id ?? "root")
|
|
@@ -511,6 +518,7 @@ export function create_content_input_manager(config) {
|
|
|
511
518
|
}
|
|
512
519
|
|
|
513
520
|
function add_el_to_el_children(selector_id, new_element) {
|
|
521
|
+
console.log("add_el_to_el_children", selector_id)
|
|
514
522
|
add_version(add_child_to_el_recursive(selected_version_prepped?.element, selector_id, new_element))
|
|
515
523
|
}
|
|
516
524
|
|
package/src/routes/+page.svelte
CHANGED
|
@@ -1,12 +1,217 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import Content from "$lib/Components/Content/index.svelte"
|
|
3
|
+
import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
|
|
2
4
|
import Button from "$lib/Components/Button/index.svelte"
|
|
3
5
|
import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
|
|
4
|
-
import Code from "$lib/Components/Code/index.svelte"
|
|
5
|
-
import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
|
|
6
6
|
import { goto } from "$app/navigation"
|
|
7
7
|
import { definitions, docs_definition_to_sample_code, docs_overview_code_sample } from "$lib/client/docs/index.js"
|
|
8
8
|
import { copy_to_clipboard } from "$lib/client/index.js"
|
|
9
9
|
|
|
10
|
+
let content_manager = create_content_manager({
|
|
11
|
+
val: {
|
|
12
|
+
type_id: "div",
|
|
13
|
+
children: [
|
|
14
|
+
{
|
|
15
|
+
type_id: "h1",
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
type_id: "base_text",
|
|
19
|
+
children: [],
|
|
20
|
+
attributes: { content: "Welcome to Sveltekit-UI", text_color: null },
|
|
21
|
+
selector_id: "bbnzrnzw",
|
|
22
|
+
},
|
|
23
|
+
],
|
|
24
|
+
attributes: null,
|
|
25
|
+
selector_id: "pbteeefl",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
type_id: "p",
|
|
29
|
+
children: [
|
|
30
|
+
{
|
|
31
|
+
type_id: "link",
|
|
32
|
+
children: [
|
|
33
|
+
{
|
|
34
|
+
type_id: "base_text",
|
|
35
|
+
children: [],
|
|
36
|
+
attributes: { content: "View on npm", text_color: null },
|
|
37
|
+
selector_id: "blkoesdt",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
attributes: {
|
|
41
|
+
href: "https://www.npmjs.com/package/sveltekit-ui",
|
|
42
|
+
display_text: "View on npm",
|
|
43
|
+
text_color: null,
|
|
44
|
+
is_show_preview: null,
|
|
45
|
+
},
|
|
46
|
+
selector_id: "ubywmlua",
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
attributes: null,
|
|
50
|
+
selector_id: "eqmjdjek",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type_id: "p",
|
|
54
|
+
children: [
|
|
55
|
+
{
|
|
56
|
+
type_id: "base_text",
|
|
57
|
+
children: [],
|
|
58
|
+
attributes: { content: "Install using:", text_color: null },
|
|
59
|
+
selector_id: "dfbrrcxs",
|
|
60
|
+
},
|
|
61
|
+
],
|
|
62
|
+
attributes: null,
|
|
63
|
+
selector_id: "hqknvvyg",
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
type_id: "code_inline",
|
|
67
|
+
children: [],
|
|
68
|
+
attributes: { content: "npm i sveltekit-ui" },
|
|
69
|
+
selector_id: "wzxmkjdq",
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
type_id: "p",
|
|
73
|
+
children: [
|
|
74
|
+
{
|
|
75
|
+
type_id: "base_text",
|
|
76
|
+
children: [],
|
|
77
|
+
attributes: { content: "Quick start with our recommended starter template:", text_color: null },
|
|
78
|
+
selector_id: "nkrvpazw",
|
|
79
|
+
},
|
|
80
|
+
],
|
|
81
|
+
attributes: null,
|
|
82
|
+
selector_id: "ooilajut",
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
type_id: "code_inline",
|
|
86
|
+
children: [],
|
|
87
|
+
attributes: { content: "npx create-sveltekit-ui-site my-project" },
|
|
88
|
+
selector_id: "fvxsjfnx",
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
type_id: "p",
|
|
92
|
+
children: [
|
|
93
|
+
{
|
|
94
|
+
type_id: "base_text",
|
|
95
|
+
children: [],
|
|
96
|
+
attributes: {
|
|
97
|
+
content:
|
|
98
|
+
"Our components use Svelte 5 Runes and are primarily built in JavaScript. This architecture gives you complete control over your component tree via a single parent object, which you can pass down through your HTML and CSS components as needed.",
|
|
99
|
+
text_color: null,
|
|
100
|
+
},
|
|
101
|
+
selector_id: "wfysglbt",
|
|
102
|
+
},
|
|
103
|
+
],
|
|
104
|
+
attributes: null,
|
|
105
|
+
selector_id: "inasxfam",
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type_id: "p",
|
|
109
|
+
children: [
|
|
110
|
+
{
|
|
111
|
+
type_id: "base_text",
|
|
112
|
+
children: [],
|
|
113
|
+
attributes: {
|
|
114
|
+
content:
|
|
115
|
+
"After extensive work, we are excited to announce a public release as of July 2025, and we welcome you to use and contribute to sveltekit-ui.",
|
|
116
|
+
text_color: null,
|
|
117
|
+
},
|
|
118
|
+
selector_id: "padlkhfq",
|
|
119
|
+
},
|
|
120
|
+
],
|
|
121
|
+
attributes: null,
|
|
122
|
+
selector_id: "nvyunqlk",
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
type_id: "p",
|
|
126
|
+
children: [
|
|
127
|
+
{
|
|
128
|
+
type_id: "base_text",
|
|
129
|
+
children: [],
|
|
130
|
+
attributes: { content: "For easier building, check out the ", text_color: null },
|
|
131
|
+
selector_id: "upxajwlo",
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
type_id: "link",
|
|
135
|
+
children: [
|
|
136
|
+
{
|
|
137
|
+
type_id: "base_text",
|
|
138
|
+
children: [],
|
|
139
|
+
attributes: { content: "contibase code generator", text_color: null },
|
|
140
|
+
selector_id: "gfxhzqfl",
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
attributes: {
|
|
144
|
+
href: "https://www.contibase.com/code_generator",
|
|
145
|
+
display_text: "contibase code generator",
|
|
146
|
+
text_color: null,
|
|
147
|
+
is_show_preview: null,
|
|
148
|
+
},
|
|
149
|
+
selector_id: "cbmfgeuw",
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type_id: "base_text",
|
|
153
|
+
children: [],
|
|
154
|
+
attributes: {
|
|
155
|
+
content: ". Contibase is also highly compatible with sveltekit-ui and is a great companion project.",
|
|
156
|
+
text_color: null,
|
|
157
|
+
},
|
|
158
|
+
selector_id: "jygcousk",
|
|
159
|
+
},
|
|
160
|
+
],
|
|
161
|
+
attributes: null,
|
|
162
|
+
selector_id: "tdiisewe",
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
type_id: "h2",
|
|
166
|
+
children: [
|
|
167
|
+
{
|
|
168
|
+
type_id: "base_text",
|
|
169
|
+
children: [],
|
|
170
|
+
attributes: { content: "Sample Usage", text_color: null },
|
|
171
|
+
selector_id: "rlhqrfgt",
|
|
172
|
+
},
|
|
173
|
+
],
|
|
174
|
+
attributes: null,
|
|
175
|
+
selector_id: "zxmfiiet",
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
type_id: "code",
|
|
179
|
+
children: [],
|
|
180
|
+
attributes: {
|
|
181
|
+
content: docs_overview_code_sample,
|
|
182
|
+
language: "svelte",
|
|
183
|
+
},
|
|
184
|
+
selector_id: "tqjlpmsi",
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
type_id: "p",
|
|
188
|
+
children: [
|
|
189
|
+
{
|
|
190
|
+
type_id: "base_text",
|
|
191
|
+
children: [],
|
|
192
|
+
attributes: {
|
|
193
|
+
content: "Explore the documentation to learn more about each component and for further usage examples.",
|
|
194
|
+
text_color: null,
|
|
195
|
+
},
|
|
196
|
+
selector_id: "gsqceimv",
|
|
197
|
+
},
|
|
198
|
+
],
|
|
199
|
+
attributes: null,
|
|
200
|
+
selector_id: "amkvgomx",
|
|
201
|
+
},
|
|
202
|
+
],
|
|
203
|
+
attributes: {
|
|
204
|
+
background_color: null,
|
|
205
|
+
border_color: null,
|
|
206
|
+
border_radius: null,
|
|
207
|
+
padding: null,
|
|
208
|
+
align_content: null,
|
|
209
|
+
justify_content: null,
|
|
210
|
+
},
|
|
211
|
+
selector_id: "nguqpvmf",
|
|
212
|
+
},
|
|
213
|
+
})
|
|
214
|
+
|
|
10
215
|
let button_manager = create_button_manager({
|
|
11
216
|
text: "Visit Docs",
|
|
12
217
|
mt: 2,
|
|
@@ -14,13 +219,6 @@
|
|
|
14
219
|
on_click: () => goto("/button"),
|
|
15
220
|
})
|
|
16
221
|
|
|
17
|
-
let overview_sample_code_manager = create_code_manager({
|
|
18
|
-
language: "svelte",
|
|
19
|
-
content: docs_overview_code_sample,
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
const overview_intro = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file.`
|
|
23
|
-
|
|
24
222
|
let copy_all_docs_button_manager = create_button_manager({
|
|
25
223
|
type: "outlined",
|
|
26
224
|
text: "Copy All Docs",
|
|
@@ -29,7 +227,7 @@
|
|
|
29
227
|
mt: 2,
|
|
30
228
|
support_icon: "clipboard",
|
|
31
229
|
on_click: () => {
|
|
32
|
-
const overview =
|
|
230
|
+
const overview = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file.
|
|
33
231
|
|
|
34
232
|
${docs_overview_code_sample}
|
|
35
233
|
|
|
@@ -48,56 +246,10 @@ below are the docs for each component individually
|
|
|
48
246
|
copy_to_clipboard(overview + JSON.stringify(docs_prepped))
|
|
49
247
|
},
|
|
50
248
|
})
|
|
51
|
-
|
|
52
|
-
let copy_npm_button_manager = create_button_manager({
|
|
53
|
-
type: "outlined",
|
|
54
|
-
is_uniform: true,
|
|
55
|
-
is_success_animation: true,
|
|
56
|
-
support_icon: "clipboard",
|
|
57
|
-
on_click: () => copy_to_clipboard("npm i sveltekit-ui"),
|
|
58
|
-
})
|
|
59
|
-
let copy_quick_start_button_manager = create_button_manager({
|
|
60
|
-
type: "outlined",
|
|
61
|
-
is_uniform: true,
|
|
62
|
-
is_success_animation: true,
|
|
63
|
-
support_icon: "clipboard",
|
|
64
|
-
on_click: () => copy_to_clipboard("npx create-sveltekit-ui-site my-project"),
|
|
65
|
-
})
|
|
66
249
|
</script>
|
|
67
250
|
|
|
68
251
|
<div class="container">
|
|
69
|
-
<
|
|
70
|
-
<p>
|
|
71
|
-
npm package at <a href="https://www.npmjs.com/package/sveltekit-ui" target="_blank" rel="noopener noreferrer"
|
|
72
|
-
>https://www.npmjs.com/package/sveltekit-ui</a
|
|
73
|
-
>
|
|
74
|
-
</p>
|
|
75
|
-
<div style="display: inline-flex; gap: .5rem;">
|
|
76
|
-
<code>npm i sveltekit-ui</code>
|
|
77
|
-
<Button manager={copy_npm_button_manager} />
|
|
78
|
-
</div>
|
|
79
|
-
|
|
80
|
-
<h4>Quick start project with starter template (recommended)</h4>
|
|
81
|
-
<div style="display: inline-flex; gap: .5rem;">
|
|
82
|
-
<code>npx create-sveltekit-ui-site my-project</code>
|
|
83
|
-
<Button manager={copy_quick_start_button_manager} />
|
|
84
|
-
</div>
|
|
85
|
-
<p>
|
|
86
|
-
Our components use svelte 5 Runes. We have taken an approach where components are mostly built in javascript to
|
|
87
|
-
allow for control of your entire tree of components in one parent object that can then be passed down through all
|
|
88
|
-
HTML and CSS components.
|
|
89
|
-
</p>
|
|
90
|
-
<p>
|
|
91
|
-
After a lot of work, these components are in a state that we are happy to release to the public and encourage people
|
|
92
|
-
to use as of July 2025. You can also go to
|
|
93
|
-
<a href="https://www.contibase.com/code_generator" target="_blank" rel="noopener noreferrer"
|
|
94
|
-
>www.contibase.com/code_generator</a
|
|
95
|
-
>
|
|
96
|
-
to help you build with sveltekit-ui. Contibase is also a very compatible project to use alongside sveltekit-ui.
|
|
97
|
-
</p>
|
|
98
|
-
<br />
|
|
99
|
-
<Code manager={overview_sample_code_manager} />
|
|
100
|
-
<p>Explore the docs for details on each individual component</p>
|
|
252
|
+
<Content manager={content_manager} />
|
|
101
253
|
<Button manager={button_manager} />
|
|
102
254
|
<Button manager={copy_all_docs_button_manager} />
|
|
103
255
|
<p>
|