sveltekit-ui 1.0.73 → 1.0.74

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 (7) hide show
  1. package/dist/Components/ColorInput/index.svelte.js +23 -20
  2. package/dist/Components/Qr/index.svelte.js +1 -1
  3. package/dist/Components/QrInput/index.svelte.js +8 -4
  4. package/package.json +1 -1
  5. package/src/lib/Components/ColorInput/index.svelte.js +23 -20
  6. package/src/lib/Components/Qr/index.svelte.js +1 -1
  7. package/src/lib/Components/QrInput/index.svelte.js +8 -4
package/dist/Components/ColorInput/index.svelte.js CHANGED
@@ -5,16 +5,30 @@ import { create_popover_manager } from "../Popover/index.svelte.js"
5
5
 
6
6
  export function create_color_input_manager(config) {
7
7
  const base_range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
8
- const val_base = {
8
+ let val_base = $state({
9
9
  l: 19,
10
10
  c: 10,
11
11
  h: 15,
12
12
  o: 24,
13
13
  is_dark_theme_invert: true,
14
- }
14
+ })
15
15
 
16
16
  let id = create_unique_id(null, 20)
17
17
  let val = $state(null)
18
+ let is_dark_theme_invert_checkbox_manager = $state(null)
19
+ let popover_manager = $state(null)
20
+ let toggle_button_manager = $state(null)
21
+ let finish_button_manager = $state(null)
22
+ let lightness_up_button_manager = $state(null)
23
+ let lightness_down_button_manager = $state(null)
24
+ let chroma_up_button_manager = $state(null)
25
+ let chroma_down_button_manager = $state(null)
26
+ let hue_up_button_manager = $state(null)
27
+ let hue_down_button_manager = $state(null)
28
+ let opacity_up_button_manager = $state(null)
29
+ let opacity_down_button_manager = $state(null)
30
+ let set_null_button_manager = $state(null)
31
+
18
32
  let is_show_opacity = $derived(set_closurable(config?.is_show_opacity, true))
19
33
  let l_options = $derived(order_num_options(set_closurable(config?.l_options, base_range)))
20
34
  let c_options = $derived(order_num_options(set_closurable(config?.c_options, base_range)))
@@ -30,20 +44,6 @@ export function create_color_input_manager(config) {
30
44
  return null
31
45
  }
32
46
 
33
- let is_dark_theme_invert_checkbox_manager = $state(null)
34
- let popover_manager = $state(null)
35
- let toggle_button_manager = $state(null)
36
- let finish_button_manager = $state(null)
37
- let lightness_up_button_manager = $state(null)
38
- let lightness_down_button_manager = $state(null)
39
- let chroma_up_button_manager = $state(null)
40
- let chroma_down_button_manager = $state(null)
41
- let hue_up_button_manager = $state(null)
42
- let hue_down_button_manager = $state(null)
43
- let opacity_up_button_manager = $state(null)
44
- let opacity_down_button_manager = $state(null)
45
- let set_null_button_manager = $state(null)
46
-
47
47
  let css_val = $derived(
48
48
  typeof val?.l === "number" && typeof val?.c === "number" && typeof val?.h === "number" && typeof val?.o === "number"
49
49
  ? `oklch(var(--l${val.l}) var(--c${val.c}) var(--h${val.h}) / var(--o${val.o}))`
@@ -70,12 +70,12 @@ export function create_color_input_manager(config) {
70
70
  c: val_static?.c ?? val_base?.c,
71
71
  h: val_static?.h ?? val_base?.h,
72
72
  o: val_static?.o ?? val_base?.o,
73
- is_dark_theme_invert: val_static?.is_dark_theme_invert ?? true,
73
+ is_dark_theme_invert: val_static?.is_dark_theme_invert ?? is_dark_theme_invert_checkbox_manager?.val,
74
74
  }
75
75
  } else {
76
76
  val = null
77
77
  }
78
- is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
78
+ is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert ?? val_base?.is_dark_theme_invert)
79
79
  if (config?.on_change) {
80
80
  config?.on_change(val)
81
81
  }
@@ -183,8 +183,9 @@ export function create_color_input_manager(config) {
183
183
  }
184
184
 
185
185
  function init(config) {
186
+ val_base.is_dark_theme_invert = config?.is_dark_theme_invert
186
187
  is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
187
- val: val?.is_dark_theme_invert,
188
+ val: config?.is_dark_theme_invert,
188
189
  type: "toggle",
189
190
  on_change: (input) => set_is_dark_theme_invert(input),
190
191
  })
@@ -306,7 +307,9 @@ export function create_color_input_manager(config) {
306
307
 
307
308
  return {
308
309
  id,
309
- val_base,
310
+ get val_base() {
311
+ return val_base
312
+ },
310
313
  get val() {
311
314
  return val
312
315
  },
package/dist/Components/Qr/index.svelte.js CHANGED
@@ -31,7 +31,7 @@ export function create_qr_manager(config) {
31
31
  let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
32
32
  let is_show_download = $derived(set_closurable(config?.is_show_download, false))
33
33
 
34
- let scale = $derived(display_size / size)
34
+ let scale = $derived(display_size && size ? display_size / size : 0.25)
35
35
 
36
36
  function get_options() {
37
37
  // convert "var(--primary-t)" to css the works for qr_ download like oklch(0.67 0.26 203)
package/dist/Components/QrInput/index.svelte.js CHANGED
@@ -101,22 +101,26 @@ export function create_qr_input_manager(config) {
101
101
  })
102
102
  color_manager = create_color_input_manager({
103
103
  is_show_opacity: false,
104
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
104
+ is_dark_theme_invert: false,
105
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
105
106
  val: config?.val?.color ?? null,
106
107
  })
107
108
  corner_color_manager = create_color_input_manager({
108
109
  is_show_opacity: false,
109
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
110
+ is_dark_theme_invert: false,
111
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
110
112
  val: config?.val?.corner_color ?? null,
111
113
  })
112
114
  background_color_manager = create_color_input_manager({
113
115
  is_show_opacity: true,
114
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
116
+ is_dark_theme_invert: false,
117
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
115
118
  val: config?.val?.background_color ?? null,
116
119
  })
117
120
  border_color_manager = create_color_input_manager({
118
121
  is_show_opacity: false,
119
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
122
+ is_dark_theme_invert: false,
123
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
120
124
  val: config?.val?.border_color ?? null,
121
125
  })
122
126
  is_show_copy_checkbox_manager = create_checkbox_manager({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sveltekit-ui",
3
- "version": "1.0.73",
3
+ "version": "1.0.74",
4
4
  "description": "A SvelteKit UI component library for building modern web applications",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/lib/Components/ColorInput/index.svelte.js CHANGED
@@ -5,16 +5,30 @@ import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
5
5
 
6
6
  export function create_color_input_manager(config) {
7
7
  const base_range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
8
- const val_base = {
8
+ let val_base = $state({
9
9
  l: 19,
10
10
  c: 10,
11
11
  h: 15,
12
12
  o: 24,
13
13
  is_dark_theme_invert: true,
14
- }
14
+ })
15
15
 
16
16
  let id = create_unique_id(null, 20)
17
17
  let val = $state(null)
18
+ let is_dark_theme_invert_checkbox_manager = $state(null)
19
+ let popover_manager = $state(null)
20
+ let toggle_button_manager = $state(null)
21
+ let finish_button_manager = $state(null)
22
+ let lightness_up_button_manager = $state(null)
23
+ let lightness_down_button_manager = $state(null)
24
+ let chroma_up_button_manager = $state(null)
25
+ let chroma_down_button_manager = $state(null)
26
+ let hue_up_button_manager = $state(null)
27
+ let hue_down_button_manager = $state(null)
28
+ let opacity_up_button_manager = $state(null)
29
+ let opacity_down_button_manager = $state(null)
30
+ let set_null_button_manager = $state(null)
31
+
18
32
  let is_show_opacity = $derived(set_closurable(config?.is_show_opacity, true))
19
33
  let l_options = $derived(order_num_options(set_closurable(config?.l_options, base_range)))
20
34
  let c_options = $derived(order_num_options(set_closurable(config?.c_options, base_range)))
@@ -30,20 +44,6 @@ export function create_color_input_manager(config) {
30
44
  return null
31
45
  }
32
46
 
33
- let is_dark_theme_invert_checkbox_manager = $state(null)
34
- let popover_manager = $state(null)
35
- let toggle_button_manager = $state(null)
36
- let finish_button_manager = $state(null)
37
- let lightness_up_button_manager = $state(null)
38
- let lightness_down_button_manager = $state(null)
39
- let chroma_up_button_manager = $state(null)
40
- let chroma_down_button_manager = $state(null)
41
- let hue_up_button_manager = $state(null)
42
- let hue_down_button_manager = $state(null)
43
- let opacity_up_button_manager = $state(null)
44
- let opacity_down_button_manager = $state(null)
45
- let set_null_button_manager = $state(null)
46
-
47
47
  let css_val = $derived(
48
48
  typeof val?.l === "number" && typeof val?.c === "number" && typeof val?.h === "number" && typeof val?.o === "number"
49
49
  ? `oklch(var(--l${val.l}) var(--c${val.c}) var(--h${val.h}) / var(--o${val.o}))`
@@ -70,12 +70,12 @@ export function create_color_input_manager(config) {
70
70
  c: val_static?.c ?? val_base?.c,
71
71
  h: val_static?.h ?? val_base?.h,
72
72
  o: val_static?.o ?? val_base?.o,
73
- is_dark_theme_invert: val_static?.is_dark_theme_invert ?? true,
73
+ is_dark_theme_invert: val_static?.is_dark_theme_invert ?? is_dark_theme_invert_checkbox_manager?.val,
74
74
  }
75
75
  } else {
76
76
  val = null
77
77
  }
78
- is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
78
+ is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert ?? val_base?.is_dark_theme_invert)
79
79
  if (config?.on_change) {
80
80
  config?.on_change(val)
81
81
  }
@@ -183,8 +183,9 @@ export function create_color_input_manager(config) {
183
183
  }
184
184
 
185
185
  function init(config) {
186
+ val_base.is_dark_theme_invert = config?.is_dark_theme_invert
186
187
  is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
187
- val: val?.is_dark_theme_invert,
188
+ val: config?.is_dark_theme_invert,
188
189
  type: "toggle",
189
190
  on_change: (input) => set_is_dark_theme_invert(input),
190
191
  })
@@ -306,7 +307,9 @@ export function create_color_input_manager(config) {
306
307
 
307
308
  return {
308
309
  id,
309
- val_base,
310
+ get val_base() {
311
+ return val_base
312
+ },
310
313
  get val() {
311
314
  return val
312
315
  },
package/src/lib/Components/Qr/index.svelte.js CHANGED
@@ -31,7 +31,7 @@ export function create_qr_manager(config) {
31
31
  let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
32
32
  let is_show_download = $derived(set_closurable(config?.is_show_download, false))
33
33
 
34
- let scale = $derived(display_size / size)
34
+ let scale = $derived(display_size && size ? display_size / size : 0.25)
35
35
 
36
36
  function get_options() {
37
37
  // convert "var(--primary-t)" to css the works for qr_ download like oklch(0.67 0.26 203)
package/src/lib/Components/QrInput/index.svelte.js CHANGED
@@ -101,22 +101,26 @@ export function create_qr_input_manager(config) {
101
101
  })
102
102
  color_manager = create_color_input_manager({
103
103
  is_show_opacity: false,
104
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
104
+ is_dark_theme_invert: false,
105
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
105
106
  val: config?.val?.color ?? null,
106
107
  })
107
108
  corner_color_manager = create_color_input_manager({
108
109
  is_show_opacity: false,
109
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
110
+ is_dark_theme_invert: false,
111
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
110
112
  val: config?.val?.corner_color ?? null,
111
113
  })
112
114
  background_color_manager = create_color_input_manager({
113
115
  is_show_opacity: true,
114
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
116
+ is_dark_theme_invert: false,
117
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
115
118
  val: config?.val?.background_color ?? null,
116
119
  })
117
120
  border_color_manager = create_color_input_manager({
118
121
  is_show_opacity: false,
119
- l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
122
+ is_dark_theme_invert: false,
123
+ l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
120
124
  val: config?.val?.border_color ?? null,
121
125
  })
122
126
  is_show_copy_checkbox_manager = create_checkbox_manager({