@bonsae/nrg 0.1.0

package/src/core/client/components/node-red-select-input.vue

@@ -0,0 +1,86 @@
+<template>
+  <div style="display: flex; flex-direction: column; width: 100%">
+    <input
+      ref="selectInput"
+      type="text"
+      class="node-input-select"
+      style="width: 100%"
+    />
+    <div v-if="error" class="node-red-vue-input-error-message">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    value: {
+      type: [String, Array],
+      default: () => "",
+    },
+    options: {
+      type: Array,
+      required: true,
+      validator: function (value) {
+        if (!Array.isArray(value)) {
+          console.warn(
+            "[WARN] Invalid value for 'options' property. It must be an array.",
+          );
+          return false;
+        }
+        const isValid = value.every(
+          (item) =>
+            typeof item === "object" &&
+            item !== null &&
+            typeof item.value === "string" &&
+            typeof item.label === "string" &&
+            Object.prototype.hasOwnProperty.call(item, "value") &&
+            Object.prototype.hasOwnProperty.call(item, "label"),
+        );
+
+        if (!isValid) {
+          console.warn(
+            "[WARN] Invalid value for 'options' property. Each item must be an object with 'value' and 'label' properties being strings.",
+            value,
+          );
+        }
+        return isValid;
+      },
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:value"],
+  mounted() {
+    const inputElement = this.$refs.selectInput;
+    const $selectInput = $(inputElement);
+    $selectInput.typedInput({
+      types: [
+        {
+          multiple: this.multiple,
+          options: this.options,
+        },
+      ],
+    });
+
+    $selectInput.typedInput(
+      "value",
+      Array.isArray(this.value) ? this.value.join(",") : this.value,
+    );
+    $selectInput.on("change", () => {
+      const newValue = this.multiple
+        ? ($selectInput.typedInput("value")?.split(",").filter(Boolean) ?? [])
+        : $selectInput.typedInput("value");
+      this.$emit("update:value", newValue);
+    });
+  },
+});
+</script>

package/src/core/client/components/node-red-typed-input.vue

@@ -0,0 +1,130 @@
+<template>
+  <div style="display: flex; flex-direction: column; width: 100%">
+    <input
+      ref="typedInput"
+      type="text"
+      class="node-red-typed-input"
+      style="flex: 1; width: 100%"
+    />
+    <div v-if="error" class="node-red-vue-input-error-message">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { TYPED_INPUT_TYPES } from "../../constants";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Object,
+      required: true,
+      validator: function (obj) {
+        if (typeof obj !== "object" || obj === null) {
+          console.warn(
+            "[WARN] Invalid value for 'value' property. It must be an object.",
+          );
+          return false;
+        }
+        const isValid =
+          typeof obj?.value === "string" && typeof obj?.type === "string";
+        if (!isValid) {
+          console.warn(
+            "[WARN] Invalid value for 'value' property. It must be an object with 'value' and 'type' properties being strings.",
+            obj,
+          );
+        }
+        return isValid;
+      },
+    },
+    types: {
+      type: Array,
+      default: () => TYPED_INPUT_TYPES,
+    },
+    error: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:value"],
+  computed: {
+    isProvidedValueTypeValid() {
+      const type = this.value.type;
+      const types = this.types;
+
+      return types.includes(type);
+    },
+  },
+  watch: {
+    isProvidedValueTypeValid: {
+      handler(newValue) {
+        if (!newValue) {
+          console.warn(
+            `Validation failed: this.value.type (${this.value.type}) must be one of the provided types (${this.types}).`,
+          );
+        }
+      },
+      immediate: true,
+    },
+    error(newVal) {
+      this.$nextTick(() => {
+        const targetDiv = this.$el.querySelector(
+          ".red-ui-typedInput-container",
+        );
+        if (newVal) {
+          targetDiv.classList.add("input-error");
+        } else {
+          targetDiv.classList.remove("input-error");
+        }
+      });
+    },
+  },
+  mounted() {
+    const inputElement = this.$refs.typedInput;
+    this.$input = $(inputElement).typedInput({
+      default: this.value.type || this.types[0],
+      types: this.types,
+    });
+
+    this.$input.typedInput("value", this.value.value || "");
+    this.$input.typedInput("type", this.value.type || this.types[0]);
+
+    // NOTE: when typed input is just a text input, it isn't emiting change while typing because it is updating the value in a hidden input
+    this.$nextTick(() => {
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.attributeName === "value") {
+            this.onChange();
+          }
+        }
+      });
+
+      observer.observe(inputElement, {
+        attributes: true,
+        attributeFilter: ["value"],
+      });
+
+      this._observer = observer;
+    });
+
+    // NOTE: this emits changes to all types that lose focus when choosing a value, but text inputs
+    this.$input.on("change", () => {
+      this.onChange();
+    });
+  },
+  methods: {
+    onChange() {
+      const newValue = this.$input.typedInput("value");
+      const newType = this.$input.typedInput("type");
+      if (this.value.value !== newValue || this.value.type !== newType) {
+        this.$emit("update:value", {
+          value: newValue,
+          type: newType,
+        });
+      }
+    },
+  },
+});
+</script>

package/src/core/client/components.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Global component type declarations for Volar / Vue Language Server.
+ * Provides autocompletion and type-checking for NRG form components
+ * used inside Vue SFC <template> blocks.
+ */
+
+export {};
+
+declare module "vue" {
+  export interface GlobalComponents {
+    NodeRedInput: (typeof import("./components/node-red-input.vue"))["default"];
+    NodeRedTypedInput: (typeof import("./components/node-red-typed-input.vue"))["default"];
+    NodeRedConfigInput: (typeof import("./components/node-red-config-input.vue"))["default"];
+    NodeRedSelectInput: (typeof import("./components/node-red-select-input.vue"))["default"];
+    NodeRedEditorInput: (typeof import("./components/node-red-editor-input.vue"))["default"];
+    NodeRedJsonSchemaForm: (typeof import("./components/node-red-json-schema-form.vue"))["default"];
+  }
+}

package/src/core/client/globals.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Global type declarations for the Node-RED editor environment.
+ * These are provided by Node-RED at runtime, not imported.
+ */
+
+// jQuery — injected by Node-RED editor
+declare const $: any;
+
+// Node-RED editor API — injected by Node-RED editor
+declare const RED: {
+  nodes: {
+    registerType(type: string, definition: any): void;
+    node(id: string): any;
+    dirty(): boolean;
+  };
+  [key: string]: any;
+};