create-nodality-vue 1.0.0-beta.11 → 1.0.0-beta.3

package/bin/index.js

@@ -43,7 +43,7 @@ function createVueProject(projectName) {
     },
     dependencies: {
       vue: "^3.0.0",
-      nodality: "^1.0.0-beta.8",
+      nodality: "^1.0.0-beta.4",
     },
     devDependencies: {
       vite: "^4.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nodality-vue",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.3",
   "description": "A scaffolding tool for creating Vue.js projects integrated with Nodality.",
   "main": "bin/index.js",
   "bin": {

package/templates/src/App.vue

@@ -1,43 +1,25 @@
 <template>
-  <HelloWorld :text="textInstance" v-model:msg="welcomeMessage"/>
+  <div id="app">
+    <HelloWorld :text="textInstance" v-model:msg="welcomeMessage" />
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-import {Text} from "nodality";
+import HelloWorld from "./components/HelloWorld.vue";
+import { Text } from "nodality";
+
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  },
- 
-  watch: {
-    // Watch for changes to welcomeMessage and recreate the instance
-    welcomeMessage() {
-      console.log(this.welcomeMessage) // THIS WORKS
-       this.textInstance = new Text(this.welcomeMessage).set({ size: "S1", color: "#1abc9c" });
-    },
-  },
   data() {
     return {
-      welcomeMessage: "Welcome to Your Vue.js App", // Define a reactive property
-     textInstance: null
-    }
+      welcomeMessage: "Welcome to Nodality + Vue.js",
+      textInstance: null,
+    };
   },
-   created() {
-    // Initialize the Text instance when the component is created
-    this.textInstance = new Text(this.welcomeMessage).set({ size: "S1", color: "#1abc9c" });
+  created() {
+    this.textInstance = new Text(this.welcomeMessage).set({
+      size: "S1",
+      color: "#1abc9c",
+    });
   },
-}
+};
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

package/templates/src/components/HelloWorld.vue

@@ -1,37 +1,40 @@
-<script setup>
-import { useTemplateRef, onMounted, defineProps, defineEmits, watch } from 'vue'
-
-// Define props to accept the msg value
-const props = defineProps({
-  msg: String,
-  text: Object
-}) 
-
-const emit = defineEmits(['update:msg'])
-
-// the first argument must match the ref value in the template
-const input = useTemplateRef('my-input')
-let mycomp = useTemplateRef('my-comp')
-
-onMounted(() => {
-  input.value.focus()
- let ela = props.text.render();//document.createElement("h1");
- mycomp.value.appendChild(ela);
-})
-
-watch(() => props.msg, () => { // 12:21:57 Wow!!!
-
- mycomp.value.innerHTML = ""; // Clear existing content
-    const element = props.text.render(); // Call the render method
-    mycomp.value.appendChild(element);
-})
-
-function updateMessage(event) {
-  emit('update:msg', event.target.value)
-}
-</script>
-
 <template>
-<input ref="my-input" :value="msg" @input="updateMessage" />
-<div ref="my-comp"/>
-</template>
+  <div>
+    <input v-model="message" @input="updateText" placeholder="Edit me" />
+    <div ref="renderedText" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: Object,
+    msg: String,
+  },
+  data() {
+    return {
+      message: this.msg || "",
+    };
+  },
+  watch: {
+    message(newValue) {
+      this.$emit("update:msg", newValue);
+    },
+  },
+  mounted() {
+    this.renderText();
+  },
+  updated() {
+    this.renderText();
+  },
+  methods: {
+    updateText(event) {
+      this.text.set({ text: event.target.value }).render(this.$refs.renderedText);
+    },
+    renderText() {
+      this.$refs.renderedText.innerHTML = "";
+      this.text.render(this.$refs.renderedText);
+    },
+  },
+};
+</script>