sveltekit-ui 1.1.9 → 1.1.11
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.
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
box-shadow: 0 0 0 1px oklch(var(--l10-t) var(--c3) var(--primary-h) / var(--o5));
|
|
75
75
|
border-radius: var(--border_radius);
|
|
76
76
|
width: fit-content;
|
|
77
|
+
min-width: 100%;
|
|
77
78
|
max-width: 100%;
|
|
78
79
|
}
|
|
79
80
|
.img_background_blur {
|
|
@@ -106,6 +107,7 @@
|
|
|
106
107
|
height: auto;
|
|
107
108
|
}
|
|
108
109
|
img {
|
|
110
|
+
width: fit-content;
|
|
109
111
|
max-width: 100%;
|
|
110
112
|
height: auto;
|
|
111
113
|
vertical-align: middle;
|
|
@@ -45,18 +45,20 @@ export function create_image_manager(config) {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
if (image_el
|
|
51
|
-
|
|
52
|
-
is_loading_main_image = false
|
|
53
|
-
} else {
|
|
54
|
-
image_el.onload = () => {
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
let image_el = document?.querySelector(`#img_${id}`)
|
|
50
|
+
if (image_el) {
|
|
51
|
+
if (image_el?.complete) {
|
|
55
52
|
set_image_dimensions(image_el)
|
|
56
53
|
is_loading_main_image = false
|
|
54
|
+
} else {
|
|
55
|
+
image_el.onload = () => {
|
|
56
|
+
set_image_dimensions(image_el)
|
|
57
|
+
is_loading_main_image = false
|
|
58
|
+
}
|
|
57
59
|
}
|
|
58
60
|
}
|
|
59
|
-
}
|
|
61
|
+
}, 8000)
|
|
60
62
|
}
|
|
61
63
|
|
|
62
64
|
function set_image_dimensions(el) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sveltekit-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.11",
|
|
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.45.
|
|
22
|
+
"svelte": "^5.45.3"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@sveltejs/kit": "^2.22.2"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@sveltejs/kit": "^2.49.0",
|
|
30
30
|
"@sveltejs/package": "^2.5.7",
|
|
31
31
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
32
|
-
"@vercel/analytics": "^1.6.
|
|
32
|
+
"@vercel/analytics": "^1.6.1",
|
|
33
33
|
"typescript": "^5.9.3",
|
|
34
34
|
"vite": "^7.2.6"
|
|
35
35
|
},
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
box-shadow: 0 0 0 1px oklch(var(--l10-t) var(--c3) var(--primary-h) / var(--o5));
|
|
75
75
|
border-radius: var(--border_radius);
|
|
76
76
|
width: fit-content;
|
|
77
|
+
min-width: 100%;
|
|
77
78
|
max-width: 100%;
|
|
78
79
|
}
|
|
79
80
|
.img_background_blur {
|
|
@@ -106,6 +107,7 @@
|
|
|
106
107
|
height: auto;
|
|
107
108
|
}
|
|
108
109
|
img {
|
|
110
|
+
width: fit-content;
|
|
109
111
|
max-width: 100%;
|
|
110
112
|
height: auto;
|
|
111
113
|
vertical-align: middle;
|
|
@@ -45,18 +45,20 @@ export function create_image_manager(config) {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
if (image_el
|
|
51
|
-
|
|
52
|
-
is_loading_main_image = false
|
|
53
|
-
} else {
|
|
54
|
-
image_el.onload = () => {
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
let image_el = document?.querySelector(`#img_${id}`)
|
|
50
|
+
if (image_el) {
|
|
51
|
+
if (image_el?.complete) {
|
|
55
52
|
set_image_dimensions(image_el)
|
|
56
53
|
is_loading_main_image = false
|
|
54
|
+
} else {
|
|
55
|
+
image_el.onload = () => {
|
|
56
|
+
set_image_dimensions(image_el)
|
|
57
|
+
is_loading_main_image = false
|
|
58
|
+
}
|
|
57
59
|
}
|
|
58
60
|
}
|
|
59
|
-
}
|
|
61
|
+
}, 8000)
|
|
60
62
|
}
|
|
61
63
|
|
|
62
64
|
function set_image_dimensions(el) {
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { create_image_manager } from "$lib/Components/Image/index.svelte.js"
|
|
3
|
+
import Image from "$lib/Components/Image/index.svelte"
|
|
4
|
+
import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
|
|
5
|
+
import Button from "$lib/Components/Button/index.svelte"
|
|
6
|
+
|
|
7
|
+
let cities_prepped = $state(null)
|
|
8
|
+
|
|
9
|
+
function prep_cities(input) {
|
|
10
|
+
let cities_prepped_loc = []
|
|
11
|
+
if (Array.isArray(input)) {
|
|
12
|
+
for (let item of input) {
|
|
13
|
+
let image_manager = create_image_manager({
|
|
14
|
+
src: `https://www.contibase.com/api/v1/storage/bzvetqlquljjjeqfsmjq__cities__${item?.key}__hero`,
|
|
15
|
+
src_quick: `https://www.contibase.com/api/v1/storage/bzvetqlquljjjeqfsmjq__cities__${item?.key}__hero_sm`,
|
|
16
|
+
alt: `${item?.name}`,
|
|
17
|
+
image_aspect_ratio: 1.78,
|
|
18
|
+
display_max_height: 300,
|
|
19
|
+
display_max_width: 500,
|
|
20
|
+
bg_img_blur: 50,
|
|
21
|
+
bg_img_opacity: 0.2,
|
|
22
|
+
})
|
|
23
|
+
let visit_button_manager = create_button_manager({
|
|
24
|
+
type: "primary",
|
|
25
|
+
text: "Visit",
|
|
26
|
+
support_icon: "arrow_tailed",
|
|
27
|
+
on_click: () => goto(`/cities/${item?.key}`),
|
|
28
|
+
})
|
|
29
|
+
cities_prepped_loc.push({
|
|
30
|
+
get image_manager() {
|
|
31
|
+
return image_manager
|
|
32
|
+
},
|
|
33
|
+
get visit_button_manager() {
|
|
34
|
+
return visit_button_manager
|
|
35
|
+
},
|
|
36
|
+
...item,
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
cities_prepped_loc.sort((a, b) => (a.name || "").localeCompare(b.name || "", "en", { sensitivity: "base" }))
|
|
41
|
+
cities_prepped = cities_prepped_loc
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
prep_cities([
|
|
45
|
+
{
|
|
46
|
+
id: "yvdqirnvxpgecmtpgvsz",
|
|
47
|
+
key: "columbus_ohio",
|
|
48
|
+
name: "Columbus, Ohio",
|
|
49
|
+
is_active: true,
|
|
50
|
+
db_epoch_created: 1762968995,
|
|
51
|
+
db_epoch_updated: 1763402167,
|
|
52
|
+
inbound_email_address: "fjgvxn@jclouseau.com",
|
|
53
|
+
newsletter_from_email_address: "newsletter@columbus-oh.city-updates.com",
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
id: "nqyrcjevkbankapcqekj",
|
|
57
|
+
key: "san_diego_california",
|
|
58
|
+
name: "San Diego, California",
|
|
59
|
+
is_active: true,
|
|
60
|
+
db_epoch_created: 1764692227,
|
|
61
|
+
db_epoch_updated: 1764692825,
|
|
62
|
+
inbound_email_address: "qjmbsn@jclouseau.com",
|
|
63
|
+
newsletter_from_email_address: "newsletter@san-diego-ca.city-updates.com",
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
id: "wpfodxxjxucidismakoy",
|
|
67
|
+
key: "cleveland_ohio",
|
|
68
|
+
name: "Cleveland, Ohio",
|
|
69
|
+
is_active: true,
|
|
70
|
+
db_epoch_created: 1763140713,
|
|
71
|
+
db_epoch_updated: 1764692841,
|
|
72
|
+
inbound_email_address: "brtqyu@jclouseau.com",
|
|
73
|
+
newsletter_from_email_address: "newsletter@cleveland-oh.city-updates.com",
|
|
74
|
+
},
|
|
75
|
+
])
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
{#if Array.isArray(cities_prepped) && cities_prepped.length > 0}
|
|
79
|
+
<div style="margin: 1rem;">
|
|
80
|
+
<div
|
|
81
|
+
style="display: grid;
|
|
82
|
+
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
|
|
83
|
+
gap: 1rem;
|
|
84
|
+
justify-items: center;
|
|
85
|
+
margin: 0 auto;
|
|
86
|
+
max-width: 1200px;"
|
|
87
|
+
>
|
|
88
|
+
{#each cities_prepped as city_prepped}
|
|
89
|
+
<div class="card" style="margin: 0; width: 100%;">
|
|
90
|
+
<div style="width: 100%; aspect-ratio: 16/9;">
|
|
91
|
+
<Image manager={city_prepped?.image_manager} />
|
|
92
|
+
</div>
|
|
93
|
+
<h2>{city_prepped?.name}</h2>
|
|
94
|
+
<Button manager={city_prepped?.visit_button_manager} />
|
|
95
|
+
</div>
|
|
96
|
+
{/each}
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
{:else}
|
|
100
|
+
<p>No cities found</p>
|
|
101
|
+
{/if}
|