@luminescent/ui-qwik 6.4.21 → 6.4.23
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.
- package/lib/index.qwik.cjs +14 -15
- package/lib/index.qwik.mjs +14 -15
- package/package.json +2 -2
package/lib/index.qwik.cjs
CHANGED
|
@@ -498,7 +498,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
|
|
|
498
498
|
class: "flex gap-4",
|
|
499
499
|
children: [
|
|
500
500
|
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
501
|
-
class: "relative h-
|
|
501
|
+
class: "relative h-37.5 w-31.25 rounded-md",
|
|
502
502
|
style: {
|
|
503
503
|
background: `linear-gradient(to right, #FFFFFF, ${store.hue.color})`
|
|
504
504
|
},
|
|
@@ -508,23 +508,21 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
|
|
|
508
508
|
"preventdefault:touchstart": true,
|
|
509
509
|
children: [
|
|
510
510
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
511
|
-
class: "h-
|
|
511
|
+
class: "h-37.5 w-31.25 rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black"
|
|
512
512
|
}),
|
|
513
513
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
514
514
|
class: {
|
|
515
|
-
"absolute -top-2 -left-2 h-4 w-4 rounded-md border bg-
|
|
516
|
-
"border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
|
|
517
|
-
"border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
|
|
515
|
+
"absolute -top-2 -left-2 h-4 w-4 rounded-md border lum-bg drop-shadow-lg": true
|
|
518
516
|
},
|
|
519
517
|
style: {
|
|
520
|
-
|
|
518
|
+
"--bg-color": store.value,
|
|
521
519
|
transform: `translate(${store.sPosition}px, ${store.bPosition}px)`
|
|
522
520
|
}
|
|
523
521
|
})
|
|
524
522
|
]
|
|
525
523
|
}),
|
|
526
524
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
527
|
-
class: "relative h-
|
|
525
|
+
class: "relative h-37.5 w-2 rounded-md border border-gray-700",
|
|
528
526
|
style: {
|
|
529
527
|
background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
|
|
530
528
|
},
|
|
@@ -533,21 +531,21 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
|
|
|
533
531
|
"preventdefault:mousedown": true,
|
|
534
532
|
"preventdefault:touchstart": true,
|
|
535
533
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
536
|
-
class: "absolute -bottom-2 -left-
|
|
534
|
+
class: "absolute -bottom-2 -left-1.25 h-4 w-4 rounded-md lum-bg! bg-[#ff0000] ",
|
|
537
535
|
style: {
|
|
538
536
|
transform: `translateY(${-store.hue.position}px)`,
|
|
539
|
-
|
|
537
|
+
"--bg-color": store.hue.color
|
|
540
538
|
}
|
|
541
539
|
})
|
|
542
540
|
})
|
|
543
541
|
]
|
|
544
542
|
}),
|
|
545
543
|
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
546
|
-
class: "flex w-
|
|
544
|
+
class: "flex w-37.5 flex-wrap justify-between gap-1",
|
|
547
545
|
children: [
|
|
548
546
|
showInput && /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
549
547
|
class: {
|
|
550
|
-
"mb-2 flex w-
|
|
548
|
+
"mb-2 flex w-37.5 border-b border-b-gray-700 pb-3": true,
|
|
551
549
|
"flex-row gap-1": preview == "left",
|
|
552
550
|
"flex-row-reverse gap-1": preview == "right",
|
|
553
551
|
"flex-col": preview == "top",
|
|
@@ -588,11 +586,11 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
|
|
|
588
586
|
type: "button",
|
|
589
587
|
name: color,
|
|
590
588
|
class: {
|
|
591
|
-
"lum-btn rounded-sm h-[1.6rem] w-[1.6rem]
|
|
589
|
+
"lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0 lum-bg hover:brightness-150": true,
|
|
590
|
+
"border-lum-accent": color === store.value
|
|
592
591
|
},
|
|
593
592
|
style: {
|
|
594
|
-
|
|
595
|
-
borderColor: color === store.value ? "#ffffff" : void 0
|
|
593
|
+
"--bg-color": color
|
|
596
594
|
},
|
|
597
595
|
onClick$: async () => {
|
|
598
596
|
await setColor(color);
|
|
@@ -895,7 +893,7 @@ const SelectMenu = qwik.component$((props) => {
|
|
|
895
893
|
class: "flex flex-col",
|
|
896
894
|
children: [
|
|
897
895
|
/* @__PURE__ */ jsxRuntime.jsx("label", {
|
|
898
|
-
for: props.id,
|
|
896
|
+
for: props.id ? `${props.id}-dropdown` : void 0,
|
|
899
897
|
class: "pb-1 text-lum-text select-none",
|
|
900
898
|
children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
|
|
901
899
|
}),
|
|
@@ -944,6 +942,7 @@ const SelectMenuRaw = qwik.component$(({ values, class: Class, panelClass = "lum
|
|
|
944
942
|
})
|
|
945
943
|
}),
|
|
946
944
|
/* @__PURE__ */ jsxRuntime.jsxs(Dropdown, {
|
|
945
|
+
id: props.id ? `${props.id}-dropdown` : void 0,
|
|
947
946
|
opened: store.opened,
|
|
948
947
|
class: {
|
|
949
948
|
"w-full": true,
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -496,7 +496,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
|
|
|
496
496
|
class: "flex gap-4",
|
|
497
497
|
children: [
|
|
498
498
|
/* @__PURE__ */ jsxs("div", {
|
|
499
|
-
class: "relative h-
|
|
499
|
+
class: "relative h-37.5 w-31.25 rounded-md",
|
|
500
500
|
style: {
|
|
501
501
|
background: `linear-gradient(to right, #FFFFFF, ${store.hue.color})`
|
|
502
502
|
},
|
|
@@ -506,23 +506,21 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
|
|
|
506
506
|
"preventdefault:touchstart": true,
|
|
507
507
|
children: [
|
|
508
508
|
/* @__PURE__ */ jsx("div", {
|
|
509
|
-
class: "h-
|
|
509
|
+
class: "h-37.5 w-31.25 rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black"
|
|
510
510
|
}),
|
|
511
511
|
/* @__PURE__ */ jsx("div", {
|
|
512
512
|
class: {
|
|
513
|
-
"absolute -top-2 -left-2 h-4 w-4 rounded-md border bg-
|
|
514
|
-
"border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
|
|
515
|
-
"border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
|
|
513
|
+
"absolute -top-2 -left-2 h-4 w-4 rounded-md border lum-bg drop-shadow-lg": true
|
|
516
514
|
},
|
|
517
515
|
style: {
|
|
518
|
-
|
|
516
|
+
"--bg-color": store.value,
|
|
519
517
|
transform: `translate(${store.sPosition}px, ${store.bPosition}px)`
|
|
520
518
|
}
|
|
521
519
|
})
|
|
522
520
|
]
|
|
523
521
|
}),
|
|
524
522
|
/* @__PURE__ */ jsx("div", {
|
|
525
|
-
class: "relative h-
|
|
523
|
+
class: "relative h-37.5 w-2 rounded-md border border-gray-700",
|
|
526
524
|
style: {
|
|
527
525
|
background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
|
|
528
526
|
},
|
|
@@ -531,21 +529,21 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
|
|
|
531
529
|
"preventdefault:mousedown": true,
|
|
532
530
|
"preventdefault:touchstart": true,
|
|
533
531
|
children: /* @__PURE__ */ jsx("div", {
|
|
534
|
-
class: "absolute -bottom-2 -left-
|
|
532
|
+
class: "absolute -bottom-2 -left-1.25 h-4 w-4 rounded-md lum-bg! bg-[#ff0000] ",
|
|
535
533
|
style: {
|
|
536
534
|
transform: `translateY(${-store.hue.position}px)`,
|
|
537
|
-
|
|
535
|
+
"--bg-color": store.hue.color
|
|
538
536
|
}
|
|
539
537
|
})
|
|
540
538
|
})
|
|
541
539
|
]
|
|
542
540
|
}),
|
|
543
541
|
/* @__PURE__ */ jsxs("div", {
|
|
544
|
-
class: "flex w-
|
|
542
|
+
class: "flex w-37.5 flex-wrap justify-between gap-1",
|
|
545
543
|
children: [
|
|
546
544
|
showInput && /* @__PURE__ */ jsxs("div", {
|
|
547
545
|
class: {
|
|
548
|
-
"mb-2 flex w-
|
|
546
|
+
"mb-2 flex w-37.5 border-b border-b-gray-700 pb-3": true,
|
|
549
547
|
"flex-row gap-1": preview == "left",
|
|
550
548
|
"flex-row-reverse gap-1": preview == "right",
|
|
551
549
|
"flex-col": preview == "top",
|
|
@@ -586,11 +584,11 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
|
|
|
586
584
|
type: "button",
|
|
587
585
|
name: color,
|
|
588
586
|
class: {
|
|
589
|
-
"lum-btn rounded-sm h-[1.6rem] w-[1.6rem]
|
|
587
|
+
"lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0 lum-bg hover:brightness-150": true,
|
|
588
|
+
"border-lum-accent": color === store.value
|
|
590
589
|
},
|
|
591
590
|
style: {
|
|
592
|
-
|
|
593
|
-
borderColor: color === store.value ? "#ffffff" : void 0
|
|
591
|
+
"--bg-color": color
|
|
594
592
|
},
|
|
595
593
|
onClick$: async () => {
|
|
596
594
|
await setColor(color);
|
|
@@ -893,7 +891,7 @@ const SelectMenu = component$((props) => {
|
|
|
893
891
|
class: "flex flex-col",
|
|
894
892
|
children: [
|
|
895
893
|
/* @__PURE__ */ jsx("label", {
|
|
896
|
-
for: props.id,
|
|
894
|
+
for: props.id ? `${props.id}-dropdown` : void 0,
|
|
897
895
|
class: "pb-1 text-lum-text select-none",
|
|
898
896
|
children: /* @__PURE__ */ jsx(Slot, {})
|
|
899
897
|
}),
|
|
@@ -942,6 +940,7 @@ const SelectMenuRaw = component$(({ values, class: Class, panelClass = "lum-bg-l
|
|
|
942
940
|
})
|
|
943
941
|
}),
|
|
944
942
|
/* @__PURE__ */ jsxs(Dropdown, {
|
|
943
|
+
id: props.id ? `${props.id}-dropdown` : void 0,
|
|
945
944
|
opened: store.opened,
|
|
946
945
|
class: {
|
|
947
946
|
"w-full": true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luminescent/ui-qwik",
|
|
3
|
-
"version": "6.4.
|
|
3
|
+
"version": "6.4.23",
|
|
4
4
|
"description": "Luminescent UI library - Qwik",
|
|
5
5
|
"main": "./lib/index.qwik.mjs",
|
|
6
6
|
"qwik": "./lib/index.qwik.mjs",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"vite-tsconfig-paths": "^6.0.3"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@luminescent/ui": "6.4.
|
|
53
|
+
"@luminescent/ui": "6.4.23"
|
|
54
54
|
},
|
|
55
55
|
"scripts": {
|
|
56
56
|
"build": "qwik build",
|