Added advanced mode for SelectOption

newcat · Aug 17, 2020 · f95cb65 · f95cb65
1 parent 6a029f7
commit f95cb65
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 12 deletions.
diff --git a/docs/plugins/options.md b/docs/plugins/options.md
@@ -62,7 +62,7 @@ A dropdown select which allows the user to choose one of predefined values.
 **Value Type**: `string`
 
 **Additional Properties**
-* `items`: `string[]` (required) An array of items the user can choose from
+* `items`: `string[]|Array<{ text: string, value: any }>` (required) An array of items the user can choose from
 
 
 ### `SliderOption`

diff --git a/packages/baklavajs-playground/src/App.vue b/packages/baklavajs-playground/src/App.vue
@@ -29,6 +29,7 @@ import MathNode from "./MathNode";
 import AdvancedNode from "./AdvancedNode";
 import CommentNode from "./CommentNode";
 import OptionTestNode from "./OptionTestNode";
+import SelectTestNode from "./SelectTestNode";
 
 import AddOption from "./AddOption";
 import TriggerOption from "./TriggerOption.vue";
@@ -91,6 +92,7 @@ export default class App extends Vue {
         this.editor.registerNodeType("AdvancedNode", AdvancedNode);
         this.editor.registerNodeType("CommentNode", CommentNode);
         this.editor.registerNodeType("OptionTestNode", OptionTestNode);
+        this.editor.registerNodeType("SelectTestNode", SelectTestNode);
         this.editor.addNode(new TestNode());
         this.editor.addNode(new TestNode());
         this.editor.addNode(new TestNode());

diff --git a/packages/baklavajs-playground/src/SelectTestNode.ts b/packages/baklavajs-playground/src/SelectTestNode.ts
@@ -0,0 +1,16 @@
+import { NodeBuilder } from "../../baklavajs-core/src";
+
+export default new NodeBuilder("SelectTestNode")
+    .addOption("Simple", "SelectOption", "A", undefined, { items: ["A", "B", "C"] })
+    .addOption("Advanced", "SelectOption", 3, undefined, { items: [
+        { text: "X", value: 1 },
+        { text: "Y", value: 2 },
+        { text: "Z", value: 3 },
+    ] })
+    .addOutputInterface("Simple")
+    .addOutputInterface("Advanced")
+    .onCalculate((n) => {
+        n.getInterface("Simple").value = n.getOptionValue("Simple");
+        n.getInterface("Advanced").value = n.getOptionValue("Advanced");
+    })
+    .build();
diff --git a/packages/baklavajs-plugin-options-vue/src/SelectOption.vue b/packages/baklavajs-plugin-options-vue/src/SelectOption.vue
@@ -5,7 +5,7 @@
     v-click-outside="() => { open = false; }"
 >
     <div class="__selected">
-        <div class="__text">{{ selected }}</div>
+        <div class="__text">{{ selectedText }}</div>
         <div class="__icon">
             <i-arrow></i-arrow>
         </div>
@@ -14,11 +14,11 @@
         <div class="__dropdown" v-show="open">
             <div class="item --header">{{ name }}</div>
             <div
-                v-for="item in items"
-                :key="item"
-                :class="['item', { '--active': selected === item }]"
+                v-for="(item, i) in items"
+                :key="i"
+                :class="['item', { '--active': isSelected(item) }]"
                 @click="setSelected(item)"
-            >{{ item }}</div>
+            >{{ isAdvancedMode ? item.text : item }}</div>
         </div>
     </transition>
 </div>
@@ -32,6 +32,12 @@ import { INodeOption } from "../../baklavajs-core/types";
 // @ts-ignore
 import ClickOutside from "v-click-outside";
 
+interface IAdvancedItem {
+    text: string;
+    value: any;
+}
+type ItemType = string|IAdvancedItem;
+
 @Component({
     components: {
         "i-arrow": Arrow
@@ -47,22 +53,44 @@ export default class SelectOption extends Vue {
     @Prop({ type: String })
     name!: string;
 
-    @Prop({ type: String })
+    @Prop()
     value!: any;
 
     @Prop({ type: Object })
     option!: INodeOption;
 
-    get selected() {
-        return this.value || "";
+    get isAdvancedMode() {
+        return !this.items.every((i) => typeof(i) === "string");
+    }
+
+    get selectedText() {
+        if (this.value) {
+            return this.isAdvancedMode ?
+                this.getItemByValue(this.value)?.text ?? "" :
+                this.value;
+        } else {
+            return "";
+        }
     }
 
-    get items() {
+    get items(): ItemType[] {
         return this.option.items || [];
     }
 
-    setSelected(item: string) {
-        this.$emit("input", item);
+    isSelected(item: ItemType) {
+        if (this.isAdvancedMode) {
+            return (item as IAdvancedItem).value === this.value;
+        } else {
+            return item === this.value;
+        }
+    }
+
+    setSelected(item: ItemType) {
+        this.$emit("input", this.isAdvancedMode ? (item as IAdvancedItem).value : item as string);
+    }
+
+    getItemByValue(value: any) {
+        return (this.items as IAdvancedItem[]).find((i) => i.value === value);
     }
 
 }