working functor

Author: KommuSoft

package-lock.json

@@ -9,14 +9,20 @@
     },
     "dependencies": {
         "@primeuix/themes": "^1.0.0",
+        "browserify": "^17.0.1",
+        "buffer": "^6.0.3",
         "chart.js": "3.3.2",
+        "csv-parse": "^5.6.0",
         "csv-parser": "^3.2.0",
         "json-tree-view-vue3": "^1.0.2",
+        "node-jq": "^6.0.1",
         "primeflex": "^4.0.0",
         "primeicons": "^7.0.0",
         "primevue": "^4.3.1",
+        "sql-formatter": "^15.5.2",
         "tailwindcss-primeui": "^0.5.0",
         "vue": "^3.4.34",
+        "vue-json-editor": "^1.4.3",
         "vue-papa-parse": "^3.1.0",
         "vue-router": "^4.4.0"
     },

package.json

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/SimpleForm.vue

@@ -0,0 +1,24 @@
+<script setup>
+</script>
+
+<template>
+<InputGroup>
+    <InputGroupAddon>
+      <div :style="color"></div>
+    </InputGroupAddon>
+    <InputText v-bind="$attrs" mask="#******" placeholder="color" :maxlength="7" />
+</InputGroup>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+export default {
+  computed: {
+    color() {
+      return {'background-color': this.$attrs.modelValue, 'width': '100%', 'height': '100%'};
+    }
+  }
+}
+</script>

src/components/input/ColorInput.vue

@@ -0,0 +1,40 @@
+<script setup>
+</script>
+
+<template>
+<InputGroup>
+    <Textarea :model-value="text" @update:model-value="wrap_function" rows="5" cols="30" :invalid="invalid" />
+</InputGroup>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+export default {
+  props: ['modelValue', 'args'],
+  emits: ['update:modelValue'],
+  data () {
+    const text = this.modelValue || '';
+    return {text};
+  },
+  computed: {
+    function () {
+      try {
+        return new Function(...this.args, this.text);
+      } catch {
+        return null;
+      }
+    },
+    invalid() {
+      this.function === null;
+    }
+  },
+  methods: {
+    wrap_function(text) {
+      this.text = text;
+      this.$emit('update:modelValue', this.function);
+    }
+  }
+}
+</script>