@luminescent/ui 0.11.0 → 0.12.0
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
CHANGED
|
@@ -826,6 +826,204 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
826
826
|
}), 1, null)
|
|
827
827
|
], 1, "0s_4");
|
|
828
828
|
}, "ColorPickerRaw_component_CWQPPcezhyA"));
|
|
829
|
+
const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
830
|
+
return /* @__PURE__ */ qwik._jsxS("svg", {
|
|
831
|
+
...props,
|
|
832
|
+
children: /* @__PURE__ */ qwik._jsxQ("path", null, {
|
|
833
|
+
d: "M112 184l144 144 144-144",
|
|
834
|
+
fill: "none",
|
|
835
|
+
stroke: "currentColor",
|
|
836
|
+
"stroke-linecap": "round",
|
|
837
|
+
"stroke-linejoin": "round",
|
|
838
|
+
"stroke-width": "48"
|
|
839
|
+
}, null, 3, null)
|
|
840
|
+
}, {
|
|
841
|
+
height: qwik._fnSignal((p0) => p0.width, [
|
|
842
|
+
props
|
|
843
|
+
], "p0.width"),
|
|
844
|
+
viewBox: "0 0 512 512",
|
|
845
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
846
|
+
}, 0, "rN_0");
|
|
847
|
+
}, "ChevronDown_component_V0linof0cMQ"));
|
|
848
|
+
const Dropdown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
849
|
+
return /* @__PURE__ */ qwik._jsxQ("div", null, {
|
|
850
|
+
class: "flex flex-col"
|
|
851
|
+
}, [
|
|
852
|
+
/* @__PURE__ */ qwik._jsxQ("label", null, {
|
|
853
|
+
class: "text-gray-300 pb-1 select-none",
|
|
854
|
+
for: qwik._fnSignal((p0) => p0.id, [
|
|
855
|
+
props
|
|
856
|
+
], "p0.id")
|
|
857
|
+
}, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "Zz_0"), 1, null),
|
|
858
|
+
/* @__PURE__ */ qwik._jsxC(DropdownRaw, {
|
|
859
|
+
...props
|
|
860
|
+
}, 0, "Zz_1")
|
|
861
|
+
], 1, "Zz_2");
|
|
862
|
+
}, "Dropdown_component_B5UM3uiu2TE"));
|
|
863
|
+
const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
864
|
+
const props1 = qwik._restProps(props, [
|
|
865
|
+
"id",
|
|
866
|
+
"values",
|
|
867
|
+
"class",
|
|
868
|
+
"display",
|
|
869
|
+
"color",
|
|
870
|
+
"size"
|
|
871
|
+
]);
|
|
872
|
+
const store = qwik.useStore({
|
|
873
|
+
opened: false,
|
|
874
|
+
value: props1.value
|
|
875
|
+
});
|
|
876
|
+
qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
|
|
877
|
+
.lui-scroll {
|
|
878
|
+
scroll-behavior: smooth;
|
|
879
|
+
}
|
|
880
|
+
.lui-scroll::-webkit-scrollbar {
|
|
881
|
+
appearance: none;
|
|
882
|
+
-webkit-appearance: none;
|
|
883
|
+
width: 8px;
|
|
884
|
+
height: 8px;
|
|
885
|
+
}
|
|
886
|
+
.lui-scroll::-webkit-scrollbar-track {
|
|
887
|
+
background-color: transparent;
|
|
888
|
+
}
|
|
889
|
+
.lui-scroll::-webkit-scrollbar-thumb {
|
|
890
|
+
background-color: #ffffff20;
|
|
891
|
+
border: 1px solid #ffffff20;
|
|
892
|
+
border-radius: 3px;
|
|
893
|
+
}
|
|
894
|
+
.lui-scroll::-webkit-scrollbar-corner {
|
|
895
|
+
background-color: transparent;
|
|
896
|
+
}
|
|
897
|
+
`, "DropdownRaw_component_useStyles_UFDvrln9Bfk"));
|
|
898
|
+
return /* @__PURE__ */ qwik._jsxQ("div", null, {
|
|
899
|
+
class: "relative touch-manipulation"
|
|
900
|
+
}, [
|
|
901
|
+
props.values && /* @__PURE__ */ qwik._jsxS("select", {
|
|
902
|
+
...props1,
|
|
903
|
+
children: props.values.map((value, i) => {
|
|
904
|
+
return /* @__PURE__ */ qwik._jsxQ("option", {
|
|
905
|
+
value: qwik._wrapSignal(value, "value")
|
|
906
|
+
}, null, `${value.value}`, 1, i);
|
|
907
|
+
})
|
|
908
|
+
}, {
|
|
909
|
+
class: {
|
|
910
|
+
"hidden": true
|
|
911
|
+
},
|
|
912
|
+
id: qwik._fnSignal((p0) => p0.id, [
|
|
913
|
+
props
|
|
914
|
+
], "p0.id")
|
|
915
|
+
}, 0, "Zz_3"),
|
|
916
|
+
/* @__PURE__ */ qwik._jsxC(Button, {
|
|
917
|
+
get color() {
|
|
918
|
+
return props.color;
|
|
919
|
+
},
|
|
920
|
+
get size() {
|
|
921
|
+
return props.size ?? "sm";
|
|
922
|
+
},
|
|
923
|
+
get class() {
|
|
924
|
+
return {
|
|
925
|
+
"flex": true,
|
|
926
|
+
...props.class
|
|
927
|
+
};
|
|
928
|
+
},
|
|
929
|
+
children: [
|
|
930
|
+
qwik._fnSignal((p0) => p0.display, [
|
|
931
|
+
props
|
|
932
|
+
], "p0.display"),
|
|
933
|
+
!props.display && /* @__PURE__ */ qwik._jsxQ("span", null, {
|
|
934
|
+
class: "flex-1 text-left",
|
|
935
|
+
id: qwik._fnSignal((p0) => `lui-${p0.id}-name`, [
|
|
936
|
+
props
|
|
937
|
+
], "`lui-${p0.id}-name`")
|
|
938
|
+
}, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "Zz_4"),
|
|
939
|
+
/* @__PURE__ */ qwik._jsxC(ChevronDown, {
|
|
940
|
+
width: 16,
|
|
941
|
+
get class() {
|
|
942
|
+
return {
|
|
943
|
+
"motion-safe:transition-all duration-200": true,
|
|
944
|
+
"transform rotate-180": store.opened
|
|
945
|
+
};
|
|
946
|
+
},
|
|
947
|
+
[qwik._IMMUTABLE]: {
|
|
948
|
+
class: qwik._fnSignal((p0) => ({
|
|
949
|
+
"motion-safe:transition-all duration-200": true,
|
|
950
|
+
"transform rotate-180": p0.opened
|
|
951
|
+
}), [
|
|
952
|
+
store
|
|
953
|
+
], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
|
|
954
|
+
width: qwik._IMMUTABLE
|
|
955
|
+
}
|
|
956
|
+
}, 3, "Zz_5")
|
|
957
|
+
],
|
|
958
|
+
onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
959
|
+
const [store2] = qwik.useLexicalScope();
|
|
960
|
+
store2.opened = !store2.opened;
|
|
961
|
+
}, "DropdownRaw_component_div_Button_onClick_d8M33E0JtyQ", [
|
|
962
|
+
store
|
|
963
|
+
]),
|
|
964
|
+
[qwik._IMMUTABLE]: {
|
|
965
|
+
class: qwik._fnSignal((p0) => ({
|
|
966
|
+
"flex": true,
|
|
967
|
+
...p0.class
|
|
968
|
+
}), [
|
|
969
|
+
props
|
|
970
|
+
], '{"flex":true,...p0.class}'),
|
|
971
|
+
color: qwik._fnSignal((p0) => p0.color, [
|
|
972
|
+
props
|
|
973
|
+
], "p0.color"),
|
|
974
|
+
onClick$: qwik._IMMUTABLE,
|
|
975
|
+
size: qwik._fnSignal((p0) => p0.size ?? "sm", [
|
|
976
|
+
props
|
|
977
|
+
], 'p0.size??"sm"')
|
|
978
|
+
}
|
|
979
|
+
}, 1, "Zz_6"),
|
|
980
|
+
/* @__PURE__ */ qwik._jsxQ("div", {
|
|
981
|
+
class: {
|
|
982
|
+
"motion-safe:transition-all absolute top-full left-0 p-1 mt-2 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 lui-scroll overflow-auto select-none": true,
|
|
983
|
+
"pointer-events-none opacity-0 scale-95": !store.opened
|
|
984
|
+
}
|
|
985
|
+
}, {
|
|
986
|
+
id: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
|
|
987
|
+
props
|
|
988
|
+
], "`lui-${p0.id}-opts`")
|
|
989
|
+
}, [
|
|
990
|
+
props.values.map(({ name, value, color = "transparent" }, i) => {
|
|
991
|
+
return /* @__PURE__ */ qwik._jsxC(Button, {
|
|
992
|
+
color,
|
|
993
|
+
get size() {
|
|
994
|
+
return props.size ?? "sm";
|
|
995
|
+
},
|
|
996
|
+
children: name,
|
|
997
|
+
onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
998
|
+
const [props2, store2, value2] = qwik.useLexicalScope();
|
|
999
|
+
store2.opened = false;
|
|
1000
|
+
const select = document.getElementById(props2.id);
|
|
1001
|
+
if (select) {
|
|
1002
|
+
select.value = value2.toString();
|
|
1003
|
+
select.dispatchEvent(new Event("change"));
|
|
1004
|
+
}
|
|
1005
|
+
store2.value = value2.toString();
|
|
1006
|
+
}, "DropdownRaw_component_div_div_Button_onClick_FOKnkeI0cno", [
|
|
1007
|
+
props,
|
|
1008
|
+
store,
|
|
1009
|
+
value
|
|
1010
|
+
]),
|
|
1011
|
+
[qwik._IMMUTABLE]: {
|
|
1012
|
+
size: qwik._fnSignal((p0) => p0.size ?? "sm", [
|
|
1013
|
+
props
|
|
1014
|
+
], 'p0.size??"sm"')
|
|
1015
|
+
}
|
|
1016
|
+
}, 1, i);
|
|
1017
|
+
}),
|
|
1018
|
+
/* @__PURE__ */ qwik._jsxC(qwik.Slot, {
|
|
1019
|
+
name: "extra-buttons",
|
|
1020
|
+
[qwik._IMMUTABLE]: {
|
|
1021
|
+
name: qwik._IMMUTABLE
|
|
1022
|
+
}
|
|
1023
|
+
}, 3, "Zz_7")
|
|
1024
|
+
], 1, null)
|
|
1025
|
+
], 1, "Zz_8");
|
|
1026
|
+
}, "DropdownRaw_component_Hj5Qd2ULo0U"));
|
|
829
1027
|
const LoadingIcon = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
830
1028
|
const props1 = qwik._restProps(props, [
|
|
831
1029
|
"width",
|
|
@@ -931,7 +1129,7 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
|
|
|
931
1129
|
class: {
|
|
932
1130
|
"bg-gray-800/50 border-b border-gray-700/50": !props.floating,
|
|
933
1131
|
'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': !props.floating,
|
|
934
|
-
"relative mt-2": props.floating
|
|
1132
|
+
"relative mt-2 mx-2": props.floating
|
|
935
1133
|
}
|
|
936
1134
|
}, null, /* @__PURE__ */ qwik._jsxQ("div", {
|
|
937
1135
|
class: {
|
|
@@ -1184,194 +1382,6 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
|
|
|
1184
1382
|
}, 0, "gk_7")
|
|
1185
1383
|
], 1, "gk_8");
|
|
1186
1384
|
}, "NumberInputRaw_component_8sGf0eS1rvo"));
|
|
1187
|
-
const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
1188
|
-
return /* @__PURE__ */ qwik._jsxS("svg", {
|
|
1189
|
-
...props,
|
|
1190
|
-
children: /* @__PURE__ */ qwik._jsxQ("path", null, {
|
|
1191
|
-
d: "M112 184l144 144 144-144",
|
|
1192
|
-
fill: "none",
|
|
1193
|
-
stroke: "currentColor",
|
|
1194
|
-
"stroke-linecap": "round",
|
|
1195
|
-
"stroke-linejoin": "round",
|
|
1196
|
-
"stroke-width": "48"
|
|
1197
|
-
}, null, 3, null)
|
|
1198
|
-
}, {
|
|
1199
|
-
height: qwik._fnSignal((p0) => p0.width, [
|
|
1200
|
-
props
|
|
1201
|
-
], "p0.width"),
|
|
1202
|
-
viewBox: "0 0 512 512",
|
|
1203
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
1204
|
-
}, 0, "rN_0");
|
|
1205
|
-
}, "ChevronDown_component_V0linof0cMQ"));
|
|
1206
|
-
const SelectInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
1207
|
-
return /* @__PURE__ */ qwik._jsxQ("div", null, {
|
|
1208
|
-
class: "flex flex-col"
|
|
1209
|
-
}, [
|
|
1210
|
-
/* @__PURE__ */ qwik._jsxQ("label", null, {
|
|
1211
|
-
class: "text-gray-300 pb-1 select-none",
|
|
1212
|
-
for: qwik._fnSignal((p0) => p0.id, [
|
|
1213
|
-
props
|
|
1214
|
-
], "p0.id")
|
|
1215
|
-
}, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "cA_0"), 1, null),
|
|
1216
|
-
/* @__PURE__ */ qwik._jsxC(SelectInputRaw, {
|
|
1217
|
-
...props
|
|
1218
|
-
}, 0, "cA_1")
|
|
1219
|
-
], 1, "cA_2");
|
|
1220
|
-
}, "SelectInput_component_m80ag1KuJSk"));
|
|
1221
|
-
const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
1222
|
-
const props1 = qwik._restProps(props, [
|
|
1223
|
-
"id",
|
|
1224
|
-
"values",
|
|
1225
|
-
"class",
|
|
1226
|
-
"display",
|
|
1227
|
-
"color",
|
|
1228
|
-
"size"
|
|
1229
|
-
]);
|
|
1230
|
-
const store = qwik.useStore({
|
|
1231
|
-
opened: false,
|
|
1232
|
-
value: props1.value
|
|
1233
|
-
});
|
|
1234
|
-
qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
|
|
1235
|
-
.lui-scroll {
|
|
1236
|
-
scroll-behavior: smooth;
|
|
1237
|
-
}
|
|
1238
|
-
.lui-scroll::-webkit-scrollbar {
|
|
1239
|
-
appearance: none;
|
|
1240
|
-
-webkit-appearance: none;
|
|
1241
|
-
width: 8px;
|
|
1242
|
-
height: 8px;
|
|
1243
|
-
}
|
|
1244
|
-
.lui-scroll::-webkit-scrollbar-track {
|
|
1245
|
-
background-color: transparent;
|
|
1246
|
-
}
|
|
1247
|
-
.lui-scroll::-webkit-scrollbar-thumb {
|
|
1248
|
-
background-color: #ffffff20;
|
|
1249
|
-
border: 1px solid #ffffff20;
|
|
1250
|
-
border-radius: 3px;
|
|
1251
|
-
}
|
|
1252
|
-
.lui-scroll::-webkit-scrollbar-corner {
|
|
1253
|
-
background-color: transparent;
|
|
1254
|
-
}
|
|
1255
|
-
`, "SelectInputRaw_component_useStyles_Zc40Za0ngqc"));
|
|
1256
|
-
return /* @__PURE__ */ qwik._jsxQ("div", null, {
|
|
1257
|
-
class: "relative touch-manipulation"
|
|
1258
|
-
}, [
|
|
1259
|
-
/* @__PURE__ */ qwik._jsxS("select", {
|
|
1260
|
-
...props1,
|
|
1261
|
-
children: props.values.map((value, i) => {
|
|
1262
|
-
return /* @__PURE__ */ qwik._jsxQ("option", {
|
|
1263
|
-
value: qwik._wrapSignal(value, "value")
|
|
1264
|
-
}, null, `${value.value}`, 1, i);
|
|
1265
|
-
})
|
|
1266
|
-
}, {
|
|
1267
|
-
class: {
|
|
1268
|
-
"hidden": true
|
|
1269
|
-
},
|
|
1270
|
-
id: qwik._fnSignal((p0) => p0.id, [
|
|
1271
|
-
props
|
|
1272
|
-
], "p0.id")
|
|
1273
|
-
}, 0, null),
|
|
1274
|
-
/* @__PURE__ */ qwik._jsxC(Button, {
|
|
1275
|
-
get color() {
|
|
1276
|
-
return props.color;
|
|
1277
|
-
},
|
|
1278
|
-
get size() {
|
|
1279
|
-
return props.size ?? "sm";
|
|
1280
|
-
},
|
|
1281
|
-
get class() {
|
|
1282
|
-
return {
|
|
1283
|
-
"flex": true,
|
|
1284
|
-
...props.class
|
|
1285
|
-
};
|
|
1286
|
-
},
|
|
1287
|
-
children: [
|
|
1288
|
-
qwik._fnSignal((p0) => p0.display, [
|
|
1289
|
-
props
|
|
1290
|
-
], "p0.display"),
|
|
1291
|
-
!props.display && /* @__PURE__ */ qwik._jsxQ("span", null, {
|
|
1292
|
-
class: "flex-1 text-left",
|
|
1293
|
-
id: qwik._fnSignal((p0) => `lui-${p0.id}-name`, [
|
|
1294
|
-
props
|
|
1295
|
-
], "`lui-${p0.id}-name`")
|
|
1296
|
-
}, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "cA_3"),
|
|
1297
|
-
/* @__PURE__ */ qwik._jsxC(ChevronDown, {
|
|
1298
|
-
width: 16,
|
|
1299
|
-
get class() {
|
|
1300
|
-
return {
|
|
1301
|
-
"motion-safe:transition-all duration-200": true,
|
|
1302
|
-
"transform rotate-180": store.opened
|
|
1303
|
-
};
|
|
1304
|
-
},
|
|
1305
|
-
[qwik._IMMUTABLE]: {
|
|
1306
|
-
class: qwik._fnSignal((p0) => ({
|
|
1307
|
-
"motion-safe:transition-all duration-200": true,
|
|
1308
|
-
"transform rotate-180": p0.opened
|
|
1309
|
-
}), [
|
|
1310
|
-
store
|
|
1311
|
-
], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
|
|
1312
|
-
width: qwik._IMMUTABLE
|
|
1313
|
-
}
|
|
1314
|
-
}, 3, "cA_4")
|
|
1315
|
-
],
|
|
1316
|
-
onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
1317
|
-
const [store2] = qwik.useLexicalScope();
|
|
1318
|
-
store2.opened = !store2.opened;
|
|
1319
|
-
}, "SelectInputRaw_component_div_Button_onClick_9Gkbglaqsdw", [
|
|
1320
|
-
store
|
|
1321
|
-
]),
|
|
1322
|
-
[qwik._IMMUTABLE]: {
|
|
1323
|
-
class: qwik._fnSignal((p0) => ({
|
|
1324
|
-
"flex": true,
|
|
1325
|
-
...p0.class
|
|
1326
|
-
}), [
|
|
1327
|
-
props
|
|
1328
|
-
], '{"flex":true,...p0.class}'),
|
|
1329
|
-
color: qwik._fnSignal((p0) => p0.color, [
|
|
1330
|
-
props
|
|
1331
|
-
], "p0.color"),
|
|
1332
|
-
onClick$: qwik._IMMUTABLE,
|
|
1333
|
-
size: qwik._fnSignal((p0) => p0.size ?? "sm", [
|
|
1334
|
-
props
|
|
1335
|
-
], 'p0.size??"sm"')
|
|
1336
|
-
}
|
|
1337
|
-
}, 1, "cA_5"),
|
|
1338
|
-
/* @__PURE__ */ qwik._jsxQ("div", {
|
|
1339
|
-
class: {
|
|
1340
|
-
"motion-safe:transition-all absolute top-full left-0 p-1 mt-2 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 lui-scroll overflow-auto select-none": true,
|
|
1341
|
-
"pointer-events-none opacity-0 scale-95": !store.opened
|
|
1342
|
-
}
|
|
1343
|
-
}, {
|
|
1344
|
-
id: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
|
|
1345
|
-
props
|
|
1346
|
-
], "`lui-${p0.id}-opts`")
|
|
1347
|
-
}, props.values.map(({ name, value, color = "transparent" }, i) => {
|
|
1348
|
-
return /* @__PURE__ */ qwik._jsxC(Button, {
|
|
1349
|
-
color,
|
|
1350
|
-
get size() {
|
|
1351
|
-
return props.size ?? "sm";
|
|
1352
|
-
},
|
|
1353
|
-
children: name,
|
|
1354
|
-
onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
1355
|
-
const [props2, store2, value2] = qwik.useLexicalScope();
|
|
1356
|
-
store2.opened = false;
|
|
1357
|
-
const select = document.getElementById(props2.id);
|
|
1358
|
-
select.value = value2.toString();
|
|
1359
|
-
store2.value = value2.toString();
|
|
1360
|
-
select.dispatchEvent(new Event("change"));
|
|
1361
|
-
}, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
|
|
1362
|
-
props,
|
|
1363
|
-
store,
|
|
1364
|
-
value
|
|
1365
|
-
]),
|
|
1366
|
-
[qwik._IMMUTABLE]: {
|
|
1367
|
-
size: qwik._fnSignal((p0) => p0.size ?? "sm", [
|
|
1368
|
-
props
|
|
1369
|
-
], 'p0.size??"sm"')
|
|
1370
|
-
}
|
|
1371
|
-
}, 1, i);
|
|
1372
|
-
}), 1, null)
|
|
1373
|
-
], 1, "cA_6");
|
|
1374
|
-
}, "SelectInputRaw_component_Itdx5yPeQd4"));
|
|
1375
1385
|
const TextArea = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
|
|
1376
1386
|
return /* @__PURE__ */ qwik._jsxQ("div", null, {
|
|
1377
1387
|
class: "flex flex-col"
|
|
@@ -1904,6 +1914,8 @@ exports.ButtonAnchor = ButtonAnchor;
|
|
|
1904
1914
|
exports.Card = Card;
|
|
1905
1915
|
exports.ColorInput = ColorInput;
|
|
1906
1916
|
exports.ColorPickerRaw = ColorPickerRaw;
|
|
1917
|
+
exports.Dropdown = Dropdown;
|
|
1918
|
+
exports.DropdownRaw = DropdownRaw;
|
|
1907
1919
|
exports.Header = Header;
|
|
1908
1920
|
exports.InputClasses = InputClasses;
|
|
1909
1921
|
exports.LoadingIcon = LoadingIcon;
|
|
@@ -1921,8 +1933,6 @@ exports.LogoWaterfall = LogoWaterfall;
|
|
|
1921
1933
|
exports.Nav = Nav;
|
|
1922
1934
|
exports.NumberInput = NumberInput;
|
|
1923
1935
|
exports.NumberInputRaw = NumberInputRaw;
|
|
1924
|
-
exports.SelectInput = SelectInput;
|
|
1925
|
-
exports.SelectInputRaw = SelectInputRaw;
|
|
1926
1936
|
exports.TextArea = TextArea;
|
|
1927
1937
|
exports.TextAreaRaw = TextAreaRaw;
|
|
1928
1938
|
exports.TextInput = TextInput;
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _wrapSignal, _IMMUTABLE, useStore, useLexicalScope, _wrapProp, useOn,
|
|
1
|
+
import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _wrapSignal, _IMMUTABLE, useStore, useLexicalScope, _wrapProp, useOn, useStylesQrl, useSignal } from "@builder.io/qwik";
|
|
2
2
|
import { Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
3
3
|
const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
|
|
4
4
|
class: "block h-32 -mt-32",
|
|
@@ -824,6 +824,204 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
824
824
|
}), 1, null)
|
|
825
825
|
], 1, "0s_4");
|
|
826
826
|
}, "ColorPickerRaw_component_CWQPPcezhyA"));
|
|
827
|
+
const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
828
|
+
return /* @__PURE__ */ _jsxS("svg", {
|
|
829
|
+
...props,
|
|
830
|
+
children: /* @__PURE__ */ _jsxQ("path", null, {
|
|
831
|
+
d: "M112 184l144 144 144-144",
|
|
832
|
+
fill: "none",
|
|
833
|
+
stroke: "currentColor",
|
|
834
|
+
"stroke-linecap": "round",
|
|
835
|
+
"stroke-linejoin": "round",
|
|
836
|
+
"stroke-width": "48"
|
|
837
|
+
}, null, 3, null)
|
|
838
|
+
}, {
|
|
839
|
+
height: _fnSignal((p0) => p0.width, [
|
|
840
|
+
props
|
|
841
|
+
], "p0.width"),
|
|
842
|
+
viewBox: "0 0 512 512",
|
|
843
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
844
|
+
}, 0, "rN_0");
|
|
845
|
+
}, "ChevronDown_component_V0linof0cMQ"));
|
|
846
|
+
const Dropdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
847
|
+
return /* @__PURE__ */ _jsxQ("div", null, {
|
|
848
|
+
class: "flex flex-col"
|
|
849
|
+
}, [
|
|
850
|
+
/* @__PURE__ */ _jsxQ("label", null, {
|
|
851
|
+
class: "text-gray-300 pb-1 select-none",
|
|
852
|
+
for: _fnSignal((p0) => p0.id, [
|
|
853
|
+
props
|
|
854
|
+
], "p0.id")
|
|
855
|
+
}, /* @__PURE__ */ _jsxC(Slot, null, 3, "Zz_0"), 1, null),
|
|
856
|
+
/* @__PURE__ */ _jsxC(DropdownRaw, {
|
|
857
|
+
...props
|
|
858
|
+
}, 0, "Zz_1")
|
|
859
|
+
], 1, "Zz_2");
|
|
860
|
+
}, "Dropdown_component_B5UM3uiu2TE"));
|
|
861
|
+
const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
862
|
+
const props1 = _restProps(props, [
|
|
863
|
+
"id",
|
|
864
|
+
"values",
|
|
865
|
+
"class",
|
|
866
|
+
"display",
|
|
867
|
+
"color",
|
|
868
|
+
"size"
|
|
869
|
+
]);
|
|
870
|
+
const store = useStore({
|
|
871
|
+
opened: false,
|
|
872
|
+
value: props1.value
|
|
873
|
+
});
|
|
874
|
+
useStylesQrl(/* @__PURE__ */ inlinedQrl(`
|
|
875
|
+
.lui-scroll {
|
|
876
|
+
scroll-behavior: smooth;
|
|
877
|
+
}
|
|
878
|
+
.lui-scroll::-webkit-scrollbar {
|
|
879
|
+
appearance: none;
|
|
880
|
+
-webkit-appearance: none;
|
|
881
|
+
width: 8px;
|
|
882
|
+
height: 8px;
|
|
883
|
+
}
|
|
884
|
+
.lui-scroll::-webkit-scrollbar-track {
|
|
885
|
+
background-color: transparent;
|
|
886
|
+
}
|
|
887
|
+
.lui-scroll::-webkit-scrollbar-thumb {
|
|
888
|
+
background-color: #ffffff20;
|
|
889
|
+
border: 1px solid #ffffff20;
|
|
890
|
+
border-radius: 3px;
|
|
891
|
+
}
|
|
892
|
+
.lui-scroll::-webkit-scrollbar-corner {
|
|
893
|
+
background-color: transparent;
|
|
894
|
+
}
|
|
895
|
+
`, "DropdownRaw_component_useStyles_UFDvrln9Bfk"));
|
|
896
|
+
return /* @__PURE__ */ _jsxQ("div", null, {
|
|
897
|
+
class: "relative touch-manipulation"
|
|
898
|
+
}, [
|
|
899
|
+
props.values && /* @__PURE__ */ _jsxS("select", {
|
|
900
|
+
...props1,
|
|
901
|
+
children: props.values.map((value, i) => {
|
|
902
|
+
return /* @__PURE__ */ _jsxQ("option", {
|
|
903
|
+
value: _wrapSignal(value, "value")
|
|
904
|
+
}, null, `${value.value}`, 1, i);
|
|
905
|
+
})
|
|
906
|
+
}, {
|
|
907
|
+
class: {
|
|
908
|
+
"hidden": true
|
|
909
|
+
},
|
|
910
|
+
id: _fnSignal((p0) => p0.id, [
|
|
911
|
+
props
|
|
912
|
+
], "p0.id")
|
|
913
|
+
}, 0, "Zz_3"),
|
|
914
|
+
/* @__PURE__ */ _jsxC(Button, {
|
|
915
|
+
get color() {
|
|
916
|
+
return props.color;
|
|
917
|
+
},
|
|
918
|
+
get size() {
|
|
919
|
+
return props.size ?? "sm";
|
|
920
|
+
},
|
|
921
|
+
get class() {
|
|
922
|
+
return {
|
|
923
|
+
"flex": true,
|
|
924
|
+
...props.class
|
|
925
|
+
};
|
|
926
|
+
},
|
|
927
|
+
children: [
|
|
928
|
+
_fnSignal((p0) => p0.display, [
|
|
929
|
+
props
|
|
930
|
+
], "p0.display"),
|
|
931
|
+
!props.display && /* @__PURE__ */ _jsxQ("span", null, {
|
|
932
|
+
class: "flex-1 text-left",
|
|
933
|
+
id: _fnSignal((p0) => `lui-${p0.id}-name`, [
|
|
934
|
+
props
|
|
935
|
+
], "`lui-${p0.id}-name`")
|
|
936
|
+
}, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "Zz_4"),
|
|
937
|
+
/* @__PURE__ */ _jsxC(ChevronDown, {
|
|
938
|
+
width: 16,
|
|
939
|
+
get class() {
|
|
940
|
+
return {
|
|
941
|
+
"motion-safe:transition-all duration-200": true,
|
|
942
|
+
"transform rotate-180": store.opened
|
|
943
|
+
};
|
|
944
|
+
},
|
|
945
|
+
[_IMMUTABLE]: {
|
|
946
|
+
class: _fnSignal((p0) => ({
|
|
947
|
+
"motion-safe:transition-all duration-200": true,
|
|
948
|
+
"transform rotate-180": p0.opened
|
|
949
|
+
}), [
|
|
950
|
+
store
|
|
951
|
+
], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
|
|
952
|
+
width: _IMMUTABLE
|
|
953
|
+
}
|
|
954
|
+
}, 3, "Zz_5")
|
|
955
|
+
],
|
|
956
|
+
onClick$: /* @__PURE__ */ inlinedQrl(() => {
|
|
957
|
+
const [store2] = useLexicalScope();
|
|
958
|
+
store2.opened = !store2.opened;
|
|
959
|
+
}, "DropdownRaw_component_div_Button_onClick_d8M33E0JtyQ", [
|
|
960
|
+
store
|
|
961
|
+
]),
|
|
962
|
+
[_IMMUTABLE]: {
|
|
963
|
+
class: _fnSignal((p0) => ({
|
|
964
|
+
"flex": true,
|
|
965
|
+
...p0.class
|
|
966
|
+
}), [
|
|
967
|
+
props
|
|
968
|
+
], '{"flex":true,...p0.class}'),
|
|
969
|
+
color: _fnSignal((p0) => p0.color, [
|
|
970
|
+
props
|
|
971
|
+
], "p0.color"),
|
|
972
|
+
onClick$: _IMMUTABLE,
|
|
973
|
+
size: _fnSignal((p0) => p0.size ?? "sm", [
|
|
974
|
+
props
|
|
975
|
+
], 'p0.size??"sm"')
|
|
976
|
+
}
|
|
977
|
+
}, 1, "Zz_6"),
|
|
978
|
+
/* @__PURE__ */ _jsxQ("div", {
|
|
979
|
+
class: {
|
|
980
|
+
"motion-safe:transition-all absolute top-full left-0 p-1 mt-2 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 lui-scroll overflow-auto select-none": true,
|
|
981
|
+
"pointer-events-none opacity-0 scale-95": !store.opened
|
|
982
|
+
}
|
|
983
|
+
}, {
|
|
984
|
+
id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
|
|
985
|
+
props
|
|
986
|
+
], "`lui-${p0.id}-opts`")
|
|
987
|
+
}, [
|
|
988
|
+
props.values.map(({ name, value, color = "transparent" }, i) => {
|
|
989
|
+
return /* @__PURE__ */ _jsxC(Button, {
|
|
990
|
+
color,
|
|
991
|
+
get size() {
|
|
992
|
+
return props.size ?? "sm";
|
|
993
|
+
},
|
|
994
|
+
children: name,
|
|
995
|
+
onClick$: /* @__PURE__ */ inlinedQrl(() => {
|
|
996
|
+
const [props2, store2, value2] = useLexicalScope();
|
|
997
|
+
store2.opened = false;
|
|
998
|
+
const select = document.getElementById(props2.id);
|
|
999
|
+
if (select) {
|
|
1000
|
+
select.value = value2.toString();
|
|
1001
|
+
select.dispatchEvent(new Event("change"));
|
|
1002
|
+
}
|
|
1003
|
+
store2.value = value2.toString();
|
|
1004
|
+
}, "DropdownRaw_component_div_div_Button_onClick_FOKnkeI0cno", [
|
|
1005
|
+
props,
|
|
1006
|
+
store,
|
|
1007
|
+
value
|
|
1008
|
+
]),
|
|
1009
|
+
[_IMMUTABLE]: {
|
|
1010
|
+
size: _fnSignal((p0) => p0.size ?? "sm", [
|
|
1011
|
+
props
|
|
1012
|
+
], 'p0.size??"sm"')
|
|
1013
|
+
}
|
|
1014
|
+
}, 1, i);
|
|
1015
|
+
}),
|
|
1016
|
+
/* @__PURE__ */ _jsxC(Slot, {
|
|
1017
|
+
name: "extra-buttons",
|
|
1018
|
+
[_IMMUTABLE]: {
|
|
1019
|
+
name: _IMMUTABLE
|
|
1020
|
+
}
|
|
1021
|
+
}, 3, "Zz_7")
|
|
1022
|
+
], 1, null)
|
|
1023
|
+
], 1, "Zz_8");
|
|
1024
|
+
}, "DropdownRaw_component_Hj5Qd2ULo0U"));
|
|
827
1025
|
const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
828
1026
|
const props1 = _restProps(props, [
|
|
829
1027
|
"width",
|
|
@@ -929,7 +1127,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
|
929
1127
|
class: {
|
|
930
1128
|
"bg-gray-800/50 border-b border-gray-700/50": !props.floating,
|
|
931
1129
|
'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': !props.floating,
|
|
932
|
-
"relative mt-2": props.floating
|
|
1130
|
+
"relative mt-2 mx-2": props.floating
|
|
933
1131
|
}
|
|
934
1132
|
}, null, /* @__PURE__ */ _jsxQ("div", {
|
|
935
1133
|
class: {
|
|
@@ -1182,194 +1380,6 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
|
|
|
1182
1380
|
}, 0, "gk_7")
|
|
1183
1381
|
], 1, "gk_8");
|
|
1184
1382
|
}, "NumberInputRaw_component_8sGf0eS1rvo"));
|
|
1185
|
-
const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
1186
|
-
return /* @__PURE__ */ _jsxS("svg", {
|
|
1187
|
-
...props,
|
|
1188
|
-
children: /* @__PURE__ */ _jsxQ("path", null, {
|
|
1189
|
-
d: "M112 184l144 144 144-144",
|
|
1190
|
-
fill: "none",
|
|
1191
|
-
stroke: "currentColor",
|
|
1192
|
-
"stroke-linecap": "round",
|
|
1193
|
-
"stroke-linejoin": "round",
|
|
1194
|
-
"stroke-width": "48"
|
|
1195
|
-
}, null, 3, null)
|
|
1196
|
-
}, {
|
|
1197
|
-
height: _fnSignal((p0) => p0.width, [
|
|
1198
|
-
props
|
|
1199
|
-
], "p0.width"),
|
|
1200
|
-
viewBox: "0 0 512 512",
|
|
1201
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
1202
|
-
}, 0, "rN_0");
|
|
1203
|
-
}, "ChevronDown_component_V0linof0cMQ"));
|
|
1204
|
-
const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
1205
|
-
return /* @__PURE__ */ _jsxQ("div", null, {
|
|
1206
|
-
class: "flex flex-col"
|
|
1207
|
-
}, [
|
|
1208
|
-
/* @__PURE__ */ _jsxQ("label", null, {
|
|
1209
|
-
class: "text-gray-300 pb-1 select-none",
|
|
1210
|
-
for: _fnSignal((p0) => p0.id, [
|
|
1211
|
-
props
|
|
1212
|
-
], "p0.id")
|
|
1213
|
-
}, /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_0"), 1, null),
|
|
1214
|
-
/* @__PURE__ */ _jsxC(SelectInputRaw, {
|
|
1215
|
-
...props
|
|
1216
|
-
}, 0, "cA_1")
|
|
1217
|
-
], 1, "cA_2");
|
|
1218
|
-
}, "SelectInput_component_m80ag1KuJSk"));
|
|
1219
|
-
const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
1220
|
-
const props1 = _restProps(props, [
|
|
1221
|
-
"id",
|
|
1222
|
-
"values",
|
|
1223
|
-
"class",
|
|
1224
|
-
"display",
|
|
1225
|
-
"color",
|
|
1226
|
-
"size"
|
|
1227
|
-
]);
|
|
1228
|
-
const store = useStore({
|
|
1229
|
-
opened: false,
|
|
1230
|
-
value: props1.value
|
|
1231
|
-
});
|
|
1232
|
-
useStylesQrl(/* @__PURE__ */ inlinedQrl(`
|
|
1233
|
-
.lui-scroll {
|
|
1234
|
-
scroll-behavior: smooth;
|
|
1235
|
-
}
|
|
1236
|
-
.lui-scroll::-webkit-scrollbar {
|
|
1237
|
-
appearance: none;
|
|
1238
|
-
-webkit-appearance: none;
|
|
1239
|
-
width: 8px;
|
|
1240
|
-
height: 8px;
|
|
1241
|
-
}
|
|
1242
|
-
.lui-scroll::-webkit-scrollbar-track {
|
|
1243
|
-
background-color: transparent;
|
|
1244
|
-
}
|
|
1245
|
-
.lui-scroll::-webkit-scrollbar-thumb {
|
|
1246
|
-
background-color: #ffffff20;
|
|
1247
|
-
border: 1px solid #ffffff20;
|
|
1248
|
-
border-radius: 3px;
|
|
1249
|
-
}
|
|
1250
|
-
.lui-scroll::-webkit-scrollbar-corner {
|
|
1251
|
-
background-color: transparent;
|
|
1252
|
-
}
|
|
1253
|
-
`, "SelectInputRaw_component_useStyles_Zc40Za0ngqc"));
|
|
1254
|
-
return /* @__PURE__ */ _jsxQ("div", null, {
|
|
1255
|
-
class: "relative touch-manipulation"
|
|
1256
|
-
}, [
|
|
1257
|
-
/* @__PURE__ */ _jsxS("select", {
|
|
1258
|
-
...props1,
|
|
1259
|
-
children: props.values.map((value, i) => {
|
|
1260
|
-
return /* @__PURE__ */ _jsxQ("option", {
|
|
1261
|
-
value: _wrapSignal(value, "value")
|
|
1262
|
-
}, null, `${value.value}`, 1, i);
|
|
1263
|
-
})
|
|
1264
|
-
}, {
|
|
1265
|
-
class: {
|
|
1266
|
-
"hidden": true
|
|
1267
|
-
},
|
|
1268
|
-
id: _fnSignal((p0) => p0.id, [
|
|
1269
|
-
props
|
|
1270
|
-
], "p0.id")
|
|
1271
|
-
}, 0, null),
|
|
1272
|
-
/* @__PURE__ */ _jsxC(Button, {
|
|
1273
|
-
get color() {
|
|
1274
|
-
return props.color;
|
|
1275
|
-
},
|
|
1276
|
-
get size() {
|
|
1277
|
-
return props.size ?? "sm";
|
|
1278
|
-
},
|
|
1279
|
-
get class() {
|
|
1280
|
-
return {
|
|
1281
|
-
"flex": true,
|
|
1282
|
-
...props.class
|
|
1283
|
-
};
|
|
1284
|
-
},
|
|
1285
|
-
children: [
|
|
1286
|
-
_fnSignal((p0) => p0.display, [
|
|
1287
|
-
props
|
|
1288
|
-
], "p0.display"),
|
|
1289
|
-
!props.display && /* @__PURE__ */ _jsxQ("span", null, {
|
|
1290
|
-
class: "flex-1 text-left",
|
|
1291
|
-
id: _fnSignal((p0) => `lui-${p0.id}-name`, [
|
|
1292
|
-
props
|
|
1293
|
-
], "`lui-${p0.id}-name`")
|
|
1294
|
-
}, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "cA_3"),
|
|
1295
|
-
/* @__PURE__ */ _jsxC(ChevronDown, {
|
|
1296
|
-
width: 16,
|
|
1297
|
-
get class() {
|
|
1298
|
-
return {
|
|
1299
|
-
"motion-safe:transition-all duration-200": true,
|
|
1300
|
-
"transform rotate-180": store.opened
|
|
1301
|
-
};
|
|
1302
|
-
},
|
|
1303
|
-
[_IMMUTABLE]: {
|
|
1304
|
-
class: _fnSignal((p0) => ({
|
|
1305
|
-
"motion-safe:transition-all duration-200": true,
|
|
1306
|
-
"transform rotate-180": p0.opened
|
|
1307
|
-
}), [
|
|
1308
|
-
store
|
|
1309
|
-
], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
|
|
1310
|
-
width: _IMMUTABLE
|
|
1311
|
-
}
|
|
1312
|
-
}, 3, "cA_4")
|
|
1313
|
-
],
|
|
1314
|
-
onClick$: /* @__PURE__ */ inlinedQrl(() => {
|
|
1315
|
-
const [store2] = useLexicalScope();
|
|
1316
|
-
store2.opened = !store2.opened;
|
|
1317
|
-
}, "SelectInputRaw_component_div_Button_onClick_9Gkbglaqsdw", [
|
|
1318
|
-
store
|
|
1319
|
-
]),
|
|
1320
|
-
[_IMMUTABLE]: {
|
|
1321
|
-
class: _fnSignal((p0) => ({
|
|
1322
|
-
"flex": true,
|
|
1323
|
-
...p0.class
|
|
1324
|
-
}), [
|
|
1325
|
-
props
|
|
1326
|
-
], '{"flex":true,...p0.class}'),
|
|
1327
|
-
color: _fnSignal((p0) => p0.color, [
|
|
1328
|
-
props
|
|
1329
|
-
], "p0.color"),
|
|
1330
|
-
onClick$: _IMMUTABLE,
|
|
1331
|
-
size: _fnSignal((p0) => p0.size ?? "sm", [
|
|
1332
|
-
props
|
|
1333
|
-
], 'p0.size??"sm"')
|
|
1334
|
-
}
|
|
1335
|
-
}, 1, "cA_5"),
|
|
1336
|
-
/* @__PURE__ */ _jsxQ("div", {
|
|
1337
|
-
class: {
|
|
1338
|
-
"motion-safe:transition-all absolute top-full left-0 p-1 mt-2 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 lui-scroll overflow-auto select-none": true,
|
|
1339
|
-
"pointer-events-none opacity-0 scale-95": !store.opened
|
|
1340
|
-
}
|
|
1341
|
-
}, {
|
|
1342
|
-
id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
|
|
1343
|
-
props
|
|
1344
|
-
], "`lui-${p0.id}-opts`")
|
|
1345
|
-
}, props.values.map(({ name, value, color = "transparent" }, i) => {
|
|
1346
|
-
return /* @__PURE__ */ _jsxC(Button, {
|
|
1347
|
-
color,
|
|
1348
|
-
get size() {
|
|
1349
|
-
return props.size ?? "sm";
|
|
1350
|
-
},
|
|
1351
|
-
children: name,
|
|
1352
|
-
onClick$: /* @__PURE__ */ inlinedQrl(() => {
|
|
1353
|
-
const [props2, store2, value2] = useLexicalScope();
|
|
1354
|
-
store2.opened = false;
|
|
1355
|
-
const select = document.getElementById(props2.id);
|
|
1356
|
-
select.value = value2.toString();
|
|
1357
|
-
store2.value = value2.toString();
|
|
1358
|
-
select.dispatchEvent(new Event("change"));
|
|
1359
|
-
}, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
|
|
1360
|
-
props,
|
|
1361
|
-
store,
|
|
1362
|
-
value
|
|
1363
|
-
]),
|
|
1364
|
-
[_IMMUTABLE]: {
|
|
1365
|
-
size: _fnSignal((p0) => p0.size ?? "sm", [
|
|
1366
|
-
props
|
|
1367
|
-
], 'p0.size??"sm"')
|
|
1368
|
-
}
|
|
1369
|
-
}, 1, i);
|
|
1370
|
-
}), 1, null)
|
|
1371
|
-
], 1, "cA_6");
|
|
1372
|
-
}, "SelectInputRaw_component_Itdx5yPeQd4"));
|
|
1373
1383
|
const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
1374
1384
|
return /* @__PURE__ */ _jsxQ("div", null, {
|
|
1375
1385
|
class: "flex flex-col"
|
|
@@ -1903,6 +1913,8 @@ export {
|
|
|
1903
1913
|
Card,
|
|
1904
1914
|
ColorInput,
|
|
1905
1915
|
ColorPickerRaw,
|
|
1916
|
+
Dropdown,
|
|
1917
|
+
DropdownRaw,
|
|
1906
1918
|
Header,
|
|
1907
1919
|
InputClasses,
|
|
1908
1920
|
LoadingIcon,
|
|
@@ -1920,8 +1932,6 @@ export {
|
|
|
1920
1932
|
Nav,
|
|
1921
1933
|
NumberInput,
|
|
1922
1934
|
NumberInputRaw,
|
|
1923
|
-
SelectInput,
|
|
1924
|
-
SelectInputRaw,
|
|
1925
1935
|
TextArea,
|
|
1926
1936
|
TextAreaRaw,
|
|
1927
1937
|
TextInput,
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { JSXChildren, PropsOf } from '@builder.io/qwik';
|
|
2
|
+
import type { buttonColorClasses, sizeClasses } from './Button';
|
|
3
|
+
interface DropdownProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
|
|
4
|
+
class?: {
|
|
5
|
+
[key: string]: boolean;
|
|
6
|
+
};
|
|
7
|
+
display?: JSXChildren;
|
|
8
|
+
color?: keyof typeof buttonColorClasses;
|
|
9
|
+
size?: keyof typeof sizeClasses;
|
|
10
|
+
id: string;
|
|
11
|
+
values: {
|
|
12
|
+
name: JSXChildren;
|
|
13
|
+
value: string | number;
|
|
14
|
+
color?: keyof typeof buttonColorClasses;
|
|
15
|
+
}[];
|
|
16
|
+
}
|
|
17
|
+
export declare const Dropdown: import("@builder.io/qwik").Component<DropdownProps>;
|
|
18
|
+
export declare const DropdownRaw: import("@builder.io/qwik").Component<DropdownProps>;
|
|
19
|
+
export {};
|
|
@@ -3,11 +3,11 @@ export * from './elements/Blobs';
|
|
|
3
3
|
export * from './elements/Button';
|
|
4
4
|
export * from './elements/Card';
|
|
5
5
|
export * from './elements/ColorInput';
|
|
6
|
+
export * from './elements/Dropdown';
|
|
6
7
|
export * from './elements/Header';
|
|
7
8
|
export * from './elements/LoadingIcon';
|
|
8
9
|
export * from './elements/Nav';
|
|
9
10
|
export * from './elements/NumberInput';
|
|
10
|
-
export * from './elements/SelectInput';
|
|
11
11
|
export * from './elements/TextArea';
|
|
12
12
|
export * from './elements/TextInput';
|
|
13
13
|
export * from './elements/Toggle';
|