Merge pull request #356 from starker-xp/feat-textarea-interface

feat(Interface): Add textarea interface

docs/nodes/pre-defined-interfaces.md

@@ -104,3 +104,12 @@ This interface displays a text field that the user can type into.
 import { TextInputInterface } from "baklavajs";
 new TextInputInterface("Name", "Edit me");
 ```
+
+## TextareaInputInterface
+
+This interface displays a textarea field that the user can type into.
+
+```js
+import { TextareaInputInterface } from "baklavajs";
+new TextareaInputInterface("Name", "Edit me");
+```

packages/renderer-vue/playground/App.vue

@@ -35,6 +35,7 @@ import SidebarNode from "./SidebarNode";
 import DynamicNode from "./DynamicNode";
 import UpdateTestNode from "./UpdateTestNode";
 import MultiInputNode from "./MultiInputNode";
+import { DialogNode } from "./DialogNode";
 
 import ReactiveOutputTestNode from "./ReactiveOutputTestNode";
 
@@ -78,6 +79,7 @@ nodeInterfaceTypes.addTypes(stringType, numberType, booleanType);
 editor.registerNodeType(TestNode, { category: "Tests" });
 editor.registerNodeType(OutputNode, { category: "Outputs" });
 editor.registerNodeType(BuilderTestNode, { category: "Tests" });
+editor.registerNodeType(DialogNode);
 editor.registerNodeType(MathNode);
 editor.registerNodeType(AdvancedNode);
 editor.registerNodeType(CommentNode, { title: "Comment" });

packages/renderer-vue/playground/DialogNode.ts

@@ -0,0 +1,18 @@
+import { NodeInterface, defineNode } from "@baklavajs/core";
+import { TextareaInputInterface } from "../src/nodeinterfaces/textareainput/TextareaInputInterface";
+import { TextInputInterface } from "../src";
+
+export const DialogNode = defineNode({
+    type: "dialog",
+    title: "Dialogue",
+    onCreate() {
+        this.width = 400;
+    },
+    inputs: {
+        input: () => new TextInputInterface("Title", ""),
+        input2: () => new TextareaInputInterface("Description", ""),
+    },
+    outputs: {
+        result: () => new NodeInterface("", ""),
+    },
+});

packages/renderer-vue/src/nodeinterfaces/index.ts

@@ -6,3 +6,4 @@ export * from "./select/SelectInterface";
 export * from "./slider/SliderInterface";
 export * from "./text/TextInterface";
 export * from "./textinput/TextInputInterface";
+export * from "./textareainput/TextareaInputInterface";

packages/renderer-vue/src/nodeinterfaces/textareainput/TextareaInputInterface.ts

@@ -0,0 +1,9 @@
+import { type ComponentOptions, markRaw } from "vue";
+import { NodeInterface } from "@baklavajs/core";
+import TextareaInputInterfaceComponent from "./TextareaInputInterface.vue";
+
+export class TextareaInputInterface extends NodeInterface<string> {
+    component = markRaw(TextareaInputInterfaceComponent) as ComponentOptions;
+}
+
+export { TextareaInputInterfaceComponent };

packages/renderer-vue/src/nodeinterfaces/textareainput/TextareaInputInterface.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <textarea v-model="v" rows="5" class="baklava-input" :placeholder="intf.name" :title="intf.name" />
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import type { TextareaInputInterface } from "./TextareaInputInterface";
+
+export default defineComponent({
+    props: {
+        intf: {
+            type: Object as () => TextareaInputInterface,
+            required: true,
+        },
+        modelValue: {
+            type: String,
+            required: true,
+        },
+    },
+    emits: ["update:modelValue"],
+    setup(props, { emit }) {
+        const v = computed({
+            get: () => props.modelValue,
+            set: (v) => {
+                emit("update:modelValue", v);
+            },
+        });
+        return { v };
+    },
+});
+</script>