@bonsae/nrg 0.6.1 → 0.6.3

package/src/core/client/components/node-red-toggle.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="nrg-toggle-wrapper">
-    <label class="nrg-toggle" :class="{ 'nrg-toggle--checked': modelValue }">
-      <input
-        type="checkbox"
-        :checked="modelValue"
-        class="nrg-toggle__input"
-        @change="
-          $emit(
-            'update:modelValue',
-            ($event.target as HTMLInputElement).checked,
-          )
-        "
-      />
-      <span v-if="icon || label" class="nrg-toggle__label">
-        <i v-if="icon" :class="iconClass"></i>
-        {{ label }}
-      </span>
-      <span class="nrg-toggle__slider"></span>
-    </label>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "NodeRedToggle",
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    iconClass(): string {
-      if (!this.icon) return "";
-      const name = this.icon.startsWith("fa-") ? this.icon : `fa-${this.icon}`;
-      return `fa ${name}`;
-    },
-  },
-});
-</script>
-
-<style scoped>
-.nrg-toggle-wrapper {
-  display: inline-flex;
-  align-items: center;
-}
-
-.nrg-toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  gap: 8px;
-  user-select: none;
-}
-
-.nrg-toggle__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.nrg-toggle__slider {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  min-width: 36px;
-  height: 20px;
-  background-color: var(--red-ui-secondary-border-color, #ccc);
-  border-radius: 10px;
-  transition: background-color 0.2s ease;
-}
-
-.nrg-toggle__slider::after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  background-color: white;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-}
-
-.nrg-toggle--checked .nrg-toggle__slider {
-  background-color: var(--red-ui-text-color-link, #0070d2);
-}
-
-.nrg-toggle--checked .nrg-toggle__slider::after {
-  transform: translateX(16px);
-}
-
-.nrg-toggle__label {
-  cursor: default;
-  white-space: nowrap;
-}
-
-.nrg-toggle__label i {
-  margin-right: 2px;
-}
-</style>

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

@@ -1,158 +0,0 @@
-<template>
-  <div style="display: flex; flex-direction: column; width: 100%">
-    <slot name="label">
-      <NodeRedInputLabel
-        v-if="label"
-        :label="label"
-        :icon="icon"
-        :required="required"
-      />
-    </slot>
-    <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 NodeRedInputLabel from "./node-red-input-label.vue";
-import { TYPED_INPUT_TYPES } from "../../constants";
-
-export default defineComponent({
-  components: { NodeRedInputLabel },
-  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,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    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();
-    });
-  },
-  beforeUnmount() {
-    if (this._observer) {
-      this._observer.disconnect();
-      this._observer = null;
-    }
-  },
-  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>