@rokkit/forms 1.0.0-next.122 → 1.0.0-next.123
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/forms",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.123",
|
|
4
4
|
"module": "src/index.js",
|
|
5
5
|
"author": "Jerry Thomas <me@jerrythomas.name>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@rokkit/states": "latest",
|
|
33
33
|
"@rokkit/ui": "latest",
|
|
34
34
|
"@rokkit/bits-ui": "latest",
|
|
35
|
-
"ramda": "^0.
|
|
35
|
+
"ramda": "^0.31.3",
|
|
36
36
|
"valibot": "^1.1.0"
|
|
37
37
|
}
|
|
38
38
|
}
|
package/src/NestedEditor.svelte
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
</script>
|
|
49
49
|
|
|
50
50
|
<container class="flex h-full w-full flex-row">
|
|
51
|
-
<aside class="border-r-
|
|
51
|
+
<aside class="border-r-surface-z2 flex h-full w-80 border-r">
|
|
52
52
|
<Tree items={schema} {fields} class="h-full w-full" on:move={handleMove} />
|
|
53
53
|
</aside>
|
|
54
54
|
<content class="flex h-full w-full flex-col gap-4 overflow-hidden p-8">
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
{#each elements as element (element.scope)}
|
|
57
57
|
<div class="form-element">
|
|
58
58
|
{#if element.type === 'range'}
|
|
59
|
-
<label class="
|
|
59
|
+
<label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
|
|
60
60
|
{element.label}: {element.value}
|
|
61
61
|
<input
|
|
62
62
|
type="range"
|
|
@@ -65,11 +65,11 @@
|
|
|
65
65
|
max={element.constraints?.max}
|
|
66
66
|
step={element.constraints?.step}
|
|
67
67
|
oninput={(e) => handleRangeChange(element.scope, e)}
|
|
68
|
-
class="mt-1 h-2 w-full cursor-pointer appearance-none rounded-lg
|
|
68
|
+
class="bg-surface-200 dark:bg-surface-700 mt-1 h-2 w-full cursor-pointer appearance-none rounded-lg"
|
|
69
69
|
/>
|
|
70
70
|
</label>
|
|
71
71
|
{:else if element.type === 'number'}
|
|
72
|
-
<label class="
|
|
72
|
+
<label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
|
|
73
73
|
{element.label}
|
|
74
74
|
<input
|
|
75
75
|
type="number"
|
|
@@ -78,26 +78,26 @@
|
|
|
78
78
|
max={element.constraints?.max}
|
|
79
79
|
step={element.constraints?.step}
|
|
80
80
|
oninput={(e) => handleNumberChange(element.scope, e)}
|
|
81
|
-
class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border
|
|
81
|
+
class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
|
|
82
82
|
/>
|
|
83
83
|
</label>
|
|
84
84
|
{:else if element.type === 'checkbox'}
|
|
85
|
-
<label class="flex items-center text-sm font-medium
|
|
85
|
+
<label class="text-surface-700 dark:text-surface-300 flex items-center text-sm font-medium">
|
|
86
86
|
<input
|
|
87
87
|
type="checkbox"
|
|
88
88
|
checked={element.value}
|
|
89
89
|
onchange={(e) => handleCheckboxChange(element.scope, e)}
|
|
90
|
-
class="text-primary-600 focus:ring-primary-500 mr-2 h-4 w-4 rounded
|
|
90
|
+
class="text-primary-600 focus:ring-primary-500 border-surface-300 dark:border-surface-600 mr-2 h-4 w-4 rounded"
|
|
91
91
|
/>
|
|
92
92
|
{element.label}
|
|
93
93
|
</label>
|
|
94
94
|
{:else if element.type === 'select'}
|
|
95
|
-
<label class="
|
|
95
|
+
<label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
|
|
96
96
|
{element.label}
|
|
97
97
|
<select
|
|
98
98
|
value={element.value}
|
|
99
99
|
onchange={(e) => handleTextChange(element.scope, e)}
|
|
100
|
-
class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border
|
|
100
|
+
class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
|
|
101
101
|
>
|
|
102
102
|
{#each element.constraints?.options || [] as option, index (index)}
|
|
103
103
|
<option value={option}>{option}</option>
|
|
@@ -106,13 +106,13 @@
|
|
|
106
106
|
</label>
|
|
107
107
|
{:else}
|
|
108
108
|
<!-- Default text input -->
|
|
109
|
-
<label class="
|
|
109
|
+
<label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
|
|
110
110
|
{element.label}
|
|
111
111
|
<input
|
|
112
112
|
type="text"
|
|
113
113
|
value={element.value || ''}
|
|
114
114
|
oninput={(e) => handleTextChange(element.scope, e)}
|
|
115
|
-
class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border
|
|
115
|
+
class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
|
|
116
116
|
/>
|
|
117
117
|
</label>
|
|
118
118
|
{/if}
|