sveltekit-ui 1.1.29 → 1.1.31

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 (4) hide show
  1. package/dist/Components/Image/index.svelte +43 -41
  2. package/package.json +4 -4
  3. package/src/lib/Components/Image/index.svelte +43 -41
  4. package/src/routes/test2/+page.svelte +42 -92
package/dist/Components/Image/index.svelte CHANGED
@@ -12,58 +12,60 @@
12
12
  })
13
13
  </script>
14
14
 
15
- {#if manager?.src}
16
- <figure
17
- id={manager?.id}
18
- class="container"
19
- style="
15
+ <div>
16
+ {#if manager?.src}
17
+ <figure
18
+ id={manager?.id}
19
+ class="container"
20
+ style="
20
21
  --border_radius: {manager?.border_radius}rem;
21
22
  aspect-ratio: {manager?.image_aspect_ratio};
22
23
  max-width: {manager?.display_max_width}px;
23
24
  max-height: {manager?.display_max_height}px;
24
25
  height: auto;"
25
- >
26
- <div
27
- class="img_background_blur"
28
- style="background: {manager?.bg_img_style}; filter: blur({manager?.bg_img_blur}px) opacity({manager?.bg_img_opacity}); border-radius: {manager?.border_radius}rem"
29
- ></div>
30
- <div class="main_border_container">
31
- {#if manager?.src_quick}
32
- <div class="main_border_child">
26
+ >
27
+ <div
28
+ class="img_background_blur"
29
+ style="background: {manager?.bg_img_style}; filter: blur({manager?.bg_img_blur}px) opacity({manager?.bg_img_opacity}); border-radius: {manager?.border_radius}rem"
30
+ ></div>
31
+ <div class="main_border_container">
32
+ {#if manager?.src_quick}
33
+ <div class="main_border_child">
34
+ <img
35
+ id={`quick_img_${manager?.id}`}
36
+ class="placeholder_image"
37
+ src={manager?.src_quick}
38
+ alt={manager?.alt}
39
+ width={manager?.image_width}
40
+ height={manager?.image_height}
41
+ style="grid-area: stack; height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
42
+ />
43
+ <div class="placeholder_image_bg"></div>
44
+ </div>
45
+ {/if}
46
+ <picture class="main_border_child" style="z-index: 1;">
33
47
  <img
34
- id={`quick_img_${manager?.id}`}
35
- class="placeholder_image"
36
- src={manager?.src_quick}
48
+ id={`img_${manager?.id}`}
49
+ src={manager?.src}
37
50
  alt={manager?.alt}
38
51
  width={manager?.image_width}
39
52
  height={manager?.image_height}
40
- style="grid-area: stack; height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
53
+ style="height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
41
54
  />
42
- <div class="placeholder_image_bg"></div>
43
- </div>
44
- {/if}
45
- <picture class="main_border_child" style="z-index: 1;">
46
- <img
47
- id={`img_${manager?.id}`}
48
- src={manager?.src}
49
- alt={manager?.alt}
50
- width={manager?.image_width}
51
- height={manager?.image_height}
52
- style="height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
53
- />
54
- </picture>
55
- {#if manager?.is_loading_main_image}
56
- <div class="main_border_child" style="display: grid; place-items: center; z-index: 2;">
57
- <div class="loading_spinner">
58
- <LoadingWheel />
55
+ </picture>
56
+ {#if manager?.is_loading_main_image}
57
+ <div class="main_border_child" style="display: grid; place-items: center; z-index: 2;">
58
+ <div class="loading_spinner">
59
+ <LoadingWheel />
60
+ </div>
59
61
  </div>
60
- </div>
61
- {/if}
62
- </div>
63
- </figure>
64
- {:else}
65
- <p style="font-style: italic;">{manager?.alt ?? "No Image Src"}</p>
66
- {/if}
62
+ {/if}
63
+ </div>
64
+ </figure>
65
+ {:else}
66
+ <p style="font-style: italic;">{manager?.alt ?? "No Image Src"}</p>
67
+ {/if}
68
+ </div>
67
69
 
68
70
  <style>
69
71
  .container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sveltekit-ui",
3
- "version": "1.1.29",
3
+ "version": "1.1.31",
4
4
  "description": "A SvelteKit UI component library for building modern web applications",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -19,14 +19,14 @@
19
19
  "dependencies": {
20
20
  "context-filter-polyfill": "^0.3.23",
21
21
  "qr-code-styling": "^1.9.2",
22
- "svelte": "^5.46.4"
22
+ "svelte": "^5.48.0"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@sveltejs/kit": "^2.22.2"
26
26
  },
27
27
  "devDependencies": {
28
- "@sveltejs/adapter-vercel": "^6.3.0",
29
- "@sveltejs/kit": "^2.49.5",
28
+ "@sveltejs/adapter-vercel": "^6.3.1",
29
+ "@sveltejs/kit": "^2.50.1",
30
30
  "@sveltejs/package": "^2.5.7",
31
31
  "@sveltejs/vite-plugin-svelte": "^6.2.4",
32
32
  "@vercel/analytics": "^1.6.1",
package/src/lib/Components/Image/index.svelte CHANGED
@@ -12,58 +12,60 @@
12
12
  })
13
13
  </script>
14
14
 
15
- {#if manager?.src}
16
- <figure
17
- id={manager?.id}
18
- class="container"
19
- style="
15
+ <div>
16
+ {#if manager?.src}
17
+ <figure
18
+ id={manager?.id}
19
+ class="container"
20
+ style="
20
21
  --border_radius: {manager?.border_radius}rem;
21
22
  aspect-ratio: {manager?.image_aspect_ratio};
22
23
  max-width: {manager?.display_max_width}px;
23
24
  max-height: {manager?.display_max_height}px;
24
25
  height: auto;"
25
- >
26
- <div
27
- class="img_background_blur"
28
- style="background: {manager?.bg_img_style}; filter: blur({manager?.bg_img_blur}px) opacity({manager?.bg_img_opacity}); border-radius: {manager?.border_radius}rem"
29
- ></div>
30
- <div class="main_border_container">
31
- {#if manager?.src_quick}
32
- <div class="main_border_child">
26
+ >
27
+ <div
28
+ class="img_background_blur"
29
+ style="background: {manager?.bg_img_style}; filter: blur({manager?.bg_img_blur}px) opacity({manager?.bg_img_opacity}); border-radius: {manager?.border_radius}rem"
30
+ ></div>
31
+ <div class="main_border_container">
32
+ {#if manager?.src_quick}
33
+ <div class="main_border_child">
34
+ <img
35
+ id={`quick_img_${manager?.id}`}
36
+ class="placeholder_image"
37
+ src={manager?.src_quick}
38
+ alt={manager?.alt}
39
+ width={manager?.image_width}
40
+ height={manager?.image_height}
41
+ style="grid-area: stack; height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
42
+ />
43
+ <div class="placeholder_image_bg"></div>
44
+ </div>
45
+ {/if}
46
+ <picture class="main_border_child" style="z-index: 1;">
33
47
  <img
34
- id={`quick_img_${manager?.id}`}
35
- class="placeholder_image"
36
- src={manager?.src_quick}
48
+ id={`img_${manager?.id}`}
49
+ src={manager?.src}
37
50
  alt={manager?.alt}
38
51
  width={manager?.image_width}
39
52
  height={manager?.image_height}
40
- style="grid-area: stack; height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
53
+ style="height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
41
54
  />
42
- <div class="placeholder_image_bg"></div>
43
- </div>
44
- {/if}
45
- <picture class="main_border_child" style="z-index: 1;">
46
- <img
47
- id={`img_${manager?.id}`}
48
- src={manager?.src}
49
- alt={manager?.alt}
50
- width={manager?.image_width}
51
- height={manager?.image_height}
52
- style="height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
53
- />
54
- </picture>
55
- {#if manager?.is_loading_main_image}
56
- <div class="main_border_child" style="display: grid; place-items: center; z-index: 2;">
57
- <div class="loading_spinner">
58
- <LoadingWheel />
55
+ </picture>
56
+ {#if manager?.is_loading_main_image}
57
+ <div class="main_border_child" style="display: grid; place-items: center; z-index: 2;">
58
+ <div class="loading_spinner">
59
+ <LoadingWheel />
60
+ </div>
59
61
  </div>
60
- </div>
61
- {/if}
62
- </div>
63
- </figure>
64
- {:else}
65
- <p style="font-style: italic;">{manager?.alt ?? "No Image Src"}</p>
66
- {/if}
62
+ {/if}
63
+ </div>
64
+ </figure>
65
+ {:else}
66
+ <p style="font-style: italic;">{manager?.alt ?? "No Image Src"}</p>
67
+ {/if}
68
+ </div>
67
69
 
68
70
  <style>
69
71
  .container {
package/src/routes/test2/+page.svelte CHANGED
@@ -1,101 +1,51 @@
1
1
  <script>
2
2
  import { create_image_manager } from "$lib/Components/Image/index.svelte.js"
3
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
4
 
7
- let cities_prepped = $state(null)
5
+ let sharks_prepped = $state([])
8
6
 
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
- }
7
+ const storage_path = "https://www.contibase.com/api/v1/storage/{storage_id}"
43
8
 
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
- ])
9
+ for (let i = 0; i < 5; i++) {
10
+ let image_manager = create_image_manager({
11
+ storage_path,
12
+ storage_id: "kvkrnnvujtkyxzbyommk",
13
+ storage_id_quick: "sguqjnftjoopdwldskjv",
14
+ alt: "Test",
15
+ image_width: 512,
16
+ image_height: 512,
17
+ display_max_height: 70,
18
+ display_max_width: 70,
19
+ bg_img_blur: 10,
20
+ bg_img_opacity: 0.1,
21
+ })
22
+ sharks_prepped.push({
23
+ image_manager: image_manager,
24
+ })
25
+ }
76
26
  </script>
77
27
 
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>
28
+ <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
29
+ <div>
30
+ <h4 class="label">Sharks in Episode</h4>
31
+ {#if Array.isArray(sharks_prepped) && sharks_prepped.length > 0}
32
+ <div style="display: flex; gap: 1rem;">
33
+ {#each sharks_prepped as shark_prepped}
34
+ <Image manager={shark_prepped?.image_manager} />
35
+ {/each}
36
+ </div>
37
+ {:else}
38
+ <p>No Sharks Found</p>
39
+ {/if}
40
+ </div>
41
+ <div>
42
+ <p class="label">Air Date</p>
43
+ <p>lorem</p>
44
+ <p class="label" style="margin-top: 1rem;">Viewers</p>
45
+ <p>lorem million</p>
46
+ </div>
47
+ <div>
48
+ <p class="label">Prod Code</p>
49
+ <p>lorem</p>
98
50
  </div>
99
- {:else}
100
- <p>No cities found</p>
101
- {/if}
51
+ </div>