mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-28 15:46:58 +09:00
Bogdan Chadkin
4dfdf50380
Ref https://github.com/webstudio-is/webstudio/issues/3632 This is big one. So I switched to html elements whole forms section in components. Though here I introduced some deviation from specification **Textarea** Initial value is represented as text content ```html <textarea>content</textarea> ```` Though it is trickier to manage text content as state and all frameworks rely on value property of textarea dom interface. **Select** Similar story. There is no value attribute and state is represented by selected boolean attribute on options ```html <select> <option value="value1" selected></option> <option value="value2"></option> </select> ``` We replace selected attribute on option with value attribute on selected when paste. So basically all form elements are using "value" and "checked" attributes which can be easily mapped to html and all frameworks.
30 lines
583 B
TypeScript
30 lines
583 B
TypeScript
import type { PresetStyle, WsComponentMeta } from "@webstudio-is/sdk";
|
|
import { input } from "@webstudio-is/sdk/normalize.css";
|
|
import { props } from "./__generated__/input.props";
|
|
|
|
const presetStyle = {
|
|
input: [
|
|
...input,
|
|
{
|
|
property: "display",
|
|
value: { type: "keyword", value: "block" },
|
|
},
|
|
],
|
|
} satisfies PresetStyle<"input">;
|
|
|
|
export const meta: WsComponentMeta = {
|
|
label: "Text Input",
|
|
presetStyle,
|
|
initialProps: [
|
|
"id",
|
|
"class",
|
|
"name",
|
|
"value",
|
|
"type",
|
|
"placeholder",
|
|
"required",
|
|
"autofocus",
|
|
],
|
|
props,
|
|
};
|