|
|
|
@ -7,6 +7,7 @@ import {
|
|
|
|
|
FlowComponent,
|
|
|
|
|
createSignal,
|
|
|
|
|
createEffect,
|
|
|
|
|
For,
|
|
|
|
|
} from "solid-js";
|
|
|
|
|
import { validateInput } from "~/hooks/validation";
|
|
|
|
|
import AsteriskIcon from "~icons/ph/asterisk-bold";
|
|
|
|
@ -245,3 +246,55 @@ export const NumberInput: Component<
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// TODO: Move input-group into separate component
|
|
|
|
|
|
|
|
|
|
export const Select: Component<
|
|
|
|
|
{
|
|
|
|
|
value: string | number;
|
|
|
|
|
options: [string | number, string][];
|
|
|
|
|
label: string;
|
|
|
|
|
labelMinWidth?: string;
|
|
|
|
|
onChange: (v: any) => void;
|
|
|
|
|
} & JSX.InputHTMLAttributes<HTMLSelectElement>
|
|
|
|
|
> = (p) => {
|
|
|
|
|
p = mergeProps(
|
|
|
|
|
{
|
|
|
|
|
labelMinWidth: "95px",
|
|
|
|
|
},
|
|
|
|
|
p
|
|
|
|
|
);
|
|
|
|
|
const [props, rest] = splitProps(p, [
|
|
|
|
|
"value",
|
|
|
|
|
"options",
|
|
|
|
|
"label",
|
|
|
|
|
"labelMinWidth",
|
|
|
|
|
"onChange",
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div class="shrink form-control">
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<span
|
|
|
|
|
class="bg-slate-200/70"
|
|
|
|
|
style={{ "min-width": props.labelMinWidth }}
|
|
|
|
|
>
|
|
|
|
|
{props.label}
|
|
|
|
|
</span>
|
|
|
|
|
<select
|
|
|
|
|
class="flex-1 select select-sm select-bordered"
|
|
|
|
|
onChange={(e) => props.onChange(e.currentTarget.value)}
|
|
|
|
|
{...rest}
|
|
|
|
|
>
|
|
|
|
|
<For each={props.options}>
|
|
|
|
|
{([type, label]) => (
|
|
|
|
|
<option selected={type === props.value} value={type}>
|
|
|
|
|
{label}
|
|
|
|
|
</option>
|
|
|
|
|
)}
|
|
|
|
|
</For>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|