vue-dd release 1.1.1

Author: infinite-system

README.md

@@ -41,7 +41,7 @@ Use `:model-value` instead of `v-model`
 ## Beautiful & Pixel Perfect
   - dark and light modes are built in
   - fully configurable & fully themeable via CSS
-  - functions content are highlighted with highlight.js 
+  - functions code is highlighted with highlight.js 
   - highlight.js is built in to retain 0 dependecy architecture
 
 ## Zero dependencies

docs/docs/index.md

@@ -1 +1,6 @@
+<script setup>
+const  a = 'a'
+</script>
 # Hello World!!
+
+{{ a }}

vue-dd/src/NodeComplex.vue

@@ -249,25 +249,15 @@
 </template>
 
 <script>
-import { isReactive, isRef } from 'vue';
 import NodePrimitive from "./NodePrimitive.vue";
+import { isReactive, isRef } from 'vue';
+import { isPromise } from './helpers.js';
 
 import hljs from './highlight.js/core.min.js';
 import javascript from './highlight.js/javascript.min.js';
 
 hljs.registerLanguage('javascript', javascript);
 
-export function isObject (item) {
-  return (item && typeof item === 'object' && !Array.isArray(item));
-}
-
-function isPromise (p) {
-  return p !== null &&
-      typeof p === 'object' &&
-      typeof p.then === 'function' &&
-      typeof p.catch === 'function';
-}
-
 // this is needed for cache, does not need to be reactive
 let allPointerCache = {}
 

vue-dd/src/VueDd.vue

@@ -75,12 +75,12 @@
   </div>
 </template>
 <script>
-import NodeComplex, { isObject } from "./NodeComplex.vue";
+import NodeComplex from "./NodeComplex.vue";
 import NodePrimitive from "./NodePrimitive.vue";
 import { isRef } from "vue";
+import { isObject, makeId } from "./helpers.js";
 
 // this is important
-let uniqueId = 1
 let unwrapCache = {}
 
 export default {
@@ -124,7 +124,7 @@ export default {
   },
   data () {
     return {
-      rootId: this.makeId(),
+      rootId: makeId(this.id, this.name, window),
       openClass: false,
       css: this.class,
       useOpenSpecific: this.openSpecific,
@@ -137,7 +137,6 @@ export default {
   },
 
   created () {
-
     if (this.save || this.saveFocus) {
       // this is very important for save functionality
       this.initMemory();
@@ -261,14 +260,6 @@ export default {
       return [...this.openSpecific, ...(this.useFocus === null ? [] : [String(this.useFocus)])]
     },
 
-    makeId () {
-      if (this.id !== '') {
-        return this.id
-      } else {
-        return `dd_${uniqueId++}`
-      }
-    },
-
     focusEmit (setup) {
 
       let { pointer, focusElement } = setup
@@ -377,7 +368,7 @@ export default {
     },
 
     store () {
-      const key = 'dd.' + this.rootId
+      const key = 'vue-dd.' + this.rootId
       return {
         get: () => {
           try {

vue-dd/src/helpers.js

@@ -0,0 +1,62 @@
+/**
+ * Returns a hash code from a string
+ * @param  {String} str The string to hash.
+ * @return {Number}    A 32bit integer
+ * @see http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
+ */
+export function hashCode (str) {
+  let hash = 0;
+  for (let i = 0, len = str.length; i < len; i++) {
+    let chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+}
+
+export function isObject (item) {
+  return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+export function isPromise (p) {
+  return p !== null &&
+    typeof p === 'object' &&
+    typeof p.then === 'function' &&
+    typeof p.catch === 'function';
+}
+
+let uniqueId = 1
+
+export function makeId (id, name, window) {
+  if (id !== '') {
+    return id
+  } else {
+    // auto-generate id
+    const locationHash = getLocationHash(window)
+
+    return `${name}_${uniqueId++}_${locationHash}`
+  }
+}
+
+function getLocationHash (window) {
+
+  // determine router type without importing vue-router package
+  // by analyzing the urls
+  // hash router will have a forward slash after the # sign #/about
+  const isHashRouter = window.location.hash
+    && typeof window.location.hash[1] !== 'undefined'
+    && window.location.hash[1] === '/'
+
+  let smartLocation = ''
+  if (isHashRouter) {
+    // use full route path
+    smartLocation = window.location.href.toString()
+  } else {
+    // if hash is not a location hash
+    const url = new URL(window.location.href)
+    url.hash = "" // strip away hash
+    smartLocation = url.toString()
+  }
+
+  return hashCode(smartLocation).toString(16).replace('-', '_')
+}