@intechstudio/grid-uikit 0.0.1 → 0.0.2
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/dist/MeltSelect.svelte +23 -39
- package/dist/MeltSelect.svelte.d.ts +5 -1
- package/package.json +1 -1
package/dist/MeltSelect.svelte
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
<script>import { createSelect, melt } from "@melt-ui/svelte";
|
|
2
2
|
export let options;
|
|
3
3
|
export let target;
|
|
4
|
-
let
|
|
4
|
+
export let size = "auto";
|
|
5
|
+
function getDefaultSelected() {
|
|
6
|
+
const obj = options.find((e) => e.value === target);
|
|
7
|
+
return { label: obj?.title, value: obj?.value };
|
|
8
|
+
}
|
|
5
9
|
const {
|
|
6
10
|
elements: { trigger, menu, option },
|
|
7
11
|
states: { selected, selectedLabel, open },
|
|
@@ -13,65 +17,45 @@ const {
|
|
|
13
17
|
fitViewport: true,
|
|
14
18
|
sameWidth: true
|
|
15
19
|
},
|
|
16
|
-
defaultSelected:
|
|
20
|
+
defaultSelected: getDefaultSelected()
|
|
17
21
|
});
|
|
18
|
-
$:
|
|
22
|
+
$:
|
|
19
23
|
if ($selected) {
|
|
20
24
|
handleSelectionChange();
|
|
21
25
|
}
|
|
26
|
+
$:
|
|
27
|
+
if (target) {
|
|
28
|
+
handleTargetChange();
|
|
29
|
+
}
|
|
30
|
+
function handleTargetChange() {
|
|
31
|
+
if ($selected.value === target) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
const obj = options.find((e) => e.value === target);
|
|
35
|
+
selected.set({ label: obj?.title, value: obj?.value });
|
|
22
36
|
}
|
|
23
37
|
function handleSelectionChange() {
|
|
24
|
-
if (
|
|
25
|
-
|
|
26
|
-
selected.set(() => {
|
|
27
|
-
const s = { value: void 0, label: void 0 };
|
|
28
|
-
const item = options.find((e) => {
|
|
29
|
-
return e.value === target;
|
|
30
|
-
});
|
|
31
|
-
if (typeof item !== "undefined") {
|
|
32
|
-
s.value = target;
|
|
33
|
-
s.label = item.title;
|
|
34
|
-
oldTarget = target;
|
|
35
|
-
console.log(s);
|
|
36
|
-
return s;
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
} else {
|
|
41
|
-
if (target !== oldTarget) {
|
|
42
|
-
selected.update((s) => {
|
|
43
|
-
const item = options.find((e) => {
|
|
44
|
-
return e.value === target;
|
|
45
|
-
});
|
|
46
|
-
if (typeof item !== "undefined") {
|
|
47
|
-
s.value = target;
|
|
48
|
-
s.label = item.title;
|
|
49
|
-
oldTarget = target;
|
|
50
|
-
return s;
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
if (target !== $selected.value) {
|
|
55
|
-
oldTarget = target = $selected.value;
|
|
56
|
-
}
|
|
38
|
+
if ($selected.value === target) {
|
|
39
|
+
return;
|
|
57
40
|
}
|
|
41
|
+
target = $selected.value;
|
|
58
42
|
}
|
|
59
43
|
</script>
|
|
60
44
|
|
|
61
|
-
<div class="flex flex-col gap-1">
|
|
45
|
+
<div class="flex flex-col gap-1" class:flex-grow={size === "full"}>
|
|
62
46
|
<button
|
|
63
47
|
{...$trigger}
|
|
64
48
|
use:trigger
|
|
65
49
|
class="w-full flex flex-row border border-black p-2"
|
|
66
50
|
>
|
|
67
|
-
<div class="flex flex-grow">{$selectedLabel || " "}</div>
|
|
51
|
+
<div class="flex flex-grow truncate">{$selectedLabel || " "}</div>
|
|
68
52
|
<div class="flex">▼</div>
|
|
69
53
|
</button>
|
|
70
54
|
{#if $open}
|
|
71
55
|
<div
|
|
72
56
|
{...$menu}
|
|
73
57
|
use:menu
|
|
74
|
-
class="bg-gray-900 text-white/80 border border-white/50 rounded z-
|
|
58
|
+
class="bg-gray-900 text-white/80 border border-white/50 rounded z-40"
|
|
75
59
|
>
|
|
76
60
|
{#each options as item}
|
|
77
61
|
<div
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
|
-
options:
|
|
4
|
+
options: {
|
|
5
|
+
title: string;
|
|
6
|
+
value: any;
|
|
7
|
+
}[];
|
|
5
8
|
target: any;
|
|
9
|
+
size?: "auto" | "full" | undefined;
|
|
6
10
|
};
|
|
7
11
|
events: {
|
|
8
12
|
[evt: string]: CustomEvent<any>;
|