sveltekit-ui 1.1.28 → 1.1.30

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 (6) hide show
  1. package/dist/Components/Chart/index.svelte.js +6 -6
  2. package/dist/Components/Image/index.svelte +43 -41
  3. package/package.json +3 -3
  4. package/src/lib/Components/Chart/index.svelte.js +6 -6
  5. package/src/lib/Components/Image/index.svelte +43 -41
  6. package/src/routes/test2/+page.svelte +42 -92
package/dist/Components/Chart/index.svelte.js CHANGED
@@ -211,7 +211,7 @@ export function create_chart_manager(config) {
211
211
  return "-"
212
212
  }
213
213
 
214
- function base_time(high, cleanTicTimeChange) {
214
+ function base_time(high, clean_tic_time_change) {
215
215
  const dHigh = new Date(high * 1000)
216
216
  const year = dHigh.getFullYear()
217
217
  const month = dHigh.getMonth()
@@ -259,13 +259,13 @@ export function create_chart_manager(config) {
259
259
  d.setHours(0)
260
260
  d.setMinutes(0)
261
261
  d.setMilliseconds(0)
262
- switch (ticBases[cleanTicTimeChange]?.focus) {
262
+ switch (ticBases[clean_tic_time_change]?.focus) {
263
263
  case "y": {
264
264
  break
265
265
  }
266
266
  case "M": {
267
267
  d.setFullYear(year)
268
- for (let item of ticBases[cleanTicTimeChange].values) {
268
+ for (let item of ticBases[clean_tic_time_change].values) {
269
269
  if (item < month) {
270
270
  d.setMonth(item)
271
271
  break
@@ -276,7 +276,7 @@ export function create_chart_manager(config) {
276
276
  case "d": {
277
277
  d.setFullYear(year)
278
278
  d.setMonth(month)
279
- for (let item of ticBases[cleanTicTimeChange].values) {
279
+ for (let item of ticBases[clean_tic_time_change].values) {
280
280
  if (item < day) {
281
281
  d.setDate(item)
282
282
  break
@@ -288,7 +288,7 @@ export function create_chart_manager(config) {
288
288
  d.setFullYear(year)
289
289
  d.setMonth(month)
290
290
  d.setDate(day)
291
- for (let item of ticBases[cleanTicTimeChange].values) {
291
+ for (let item of ticBases[clean_tic_time_change].values) {
292
292
  if (item < hour) {
293
293
  d.setHours(item)
294
294
  break
@@ -301,7 +301,7 @@ export function create_chart_manager(config) {
301
301
  d.setMonth(month)
302
302
  d.setDate(day)
303
303
  d.setHours(hour)
304
- for (let item of ticBases[cleanTicTimeChange].values) {
304
+ for (let item of ticBases[clean_tic_time_change].values) {
305
305
  if (item < minute) {
306
306
  d.setMinutes(item)
307
307
  break
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.28",
3
+ "version": "1.1.30",
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.3"
22
+ "svelte": "^5.46.4"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@sveltejs/kit": "^2.22.2"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@sveltejs/adapter-vercel": "^6.3.0",
29
- "@sveltejs/kit": "^2.49.4",
29
+ "@sveltejs/kit": "^2.49.5",
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/Chart/index.svelte.js CHANGED
@@ -211,7 +211,7 @@ export function create_chart_manager(config) {
211
211
  return "-"
212
212
  }
213
213
 
214
- function base_time(high, cleanTicTimeChange) {
214
+ function base_time(high, clean_tic_time_change) {
215
215
  const dHigh = new Date(high * 1000)
216
216
  const year = dHigh.getFullYear()
217
217
  const month = dHigh.getMonth()
@@ -259,13 +259,13 @@ export function create_chart_manager(config) {
259
259
  d.setHours(0)
260
260
  d.setMinutes(0)
261
261
  d.setMilliseconds(0)
262
- switch (ticBases[cleanTicTimeChange]?.focus) {
262
+ switch (ticBases[clean_tic_time_change]?.focus) {
263
263
  case "y": {
264
264
  break
265
265
  }
266
266
  case "M": {
267
267
  d.setFullYear(year)
268
- for (let item of ticBases[cleanTicTimeChange].values) {
268
+ for (let item of ticBases[clean_tic_time_change].values) {
269
269
  if (item < month) {
270
270
  d.setMonth(item)
271
271
  break
@@ -276,7 +276,7 @@ export function create_chart_manager(config) {
276
276
  case "d": {
277
277
  d.setFullYear(year)
278
278
  d.setMonth(month)
279
- for (let item of ticBases[cleanTicTimeChange].values) {
279
+ for (let item of ticBases[clean_tic_time_change].values) {
280
280
  if (item < day) {
281
281
  d.setDate(item)
282
282
  break
@@ -288,7 +288,7 @@ export function create_chart_manager(config) {
288
288
  d.setFullYear(year)
289
289
  d.setMonth(month)
290
290
  d.setDate(day)
291
- for (let item of ticBases[cleanTicTimeChange].values) {
291
+ for (let item of ticBases[clean_tic_time_change].values) {
292
292
  if (item < hour) {
293
293
  d.setHours(item)
294
294
  break
@@ -301,7 +301,7 @@ export function create_chart_manager(config) {
301
301
  d.setMonth(month)
302
302
  d.setDate(day)
303
303
  d.setHours(hour)
304
- for (let item of ticBases[cleanTicTimeChange].values) {
304
+ for (let item of ticBases[clean_tic_time_change].values) {
305
305
  if (item < minute) {
306
306
  d.setMinutes(item)
307
307
  break
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>