updated README.md

Author: infinite-system

README.md

@@ -7,12 +7,21 @@ https://user-images.githubusercontent.com/150185/213549880-e6b645bd-11f0-461a-b1
 https://user-images.githubusercontent.com/150185/213549905-360698e2-0c6b-4fd1-8023-803e22b68e27.mov
 
 Video example code:
+
+```html
+<script setup>
+```
 ```js
 import { getCurrentInstance } from 'vue'
 const instance = getCurrentInstance()
 ```
 ```html
-<vue-dd name="setupState" v-model="instance.setupState" max-height="300px" />
+</script>
+```
+```html
+<template>
+  <vue-dd name="setupState" v-model="instance.setupState" max-height="300px" />
+</template>
 ```
 
 ## About

vue-dd/README.md

@@ -8,6 +8,7 @@ https://user-images.githubusercontent.com/150185/213549905-360698e2-0c6b-4fd1-80
 
 Video example code:
 ```js
+import VueDd from 'vue-dd'
 import { getCurrentInstance } from 'vue'
 const instance = getCurrentInstance()
 ```
@@ -31,7 +32,9 @@ yarn add vue-dd
 Add globally in main.js
 ```js
 import VueDd from 'vue-dd'
+// create app
 const app = createApp(App)
+// register component
 app.component('VueDd', VueDd)
 ```
 or add locally

vue-dd/src/NodeComplex.vue

@@ -708,10 +708,8 @@ export default {
     open: {
       handler (value, oldValue) {
 
-
         if (!value) {
 
-
           const hideEverything = () => {
             this.useOpenLevel = 0
             this.useOpenSpecific = []

vue-dd/src/NodePrimitive.vue

@@ -6,8 +6,8 @@
     <span
         v-if="showName"
         :class="{
-          'vue-dd-key' : true,
-          'vue-dd-key-of-array' : parentIsArray,
+          'vue-dd-key': true,
+          'vue-dd-key-of-array': parentIsArray,
         }">{{ name }}<span class="vue-dd-colon">:</span></span><span
       v-if="parentOpen && saveFocus"
       ref="focusElement"
@@ -17,8 +17,8 @@
       @mouseup="hover=false"
       @mouseleave="hover=false"
       :class="{
-        'vue-dd-focus-hover':hover,
-        'vue-dd-focus-selected':isFocused
+        'vue-dd-focus-hover': hover,
+        'vue-dd-focus-selected': isFocused
       }"
   ></span>
     <span v-if="type === 'null'"
@@ -27,6 +27,8 @@
           class="vue-dd-undefined">undefined</span>
     <span v-else-if="type === 'number'"
           class="vue-dd-number">{{ modelValue }}</span>
+    <span v-else-if="type === 'bigint'"
+          class="vue-dd-bigint">{{ modelValue }}</span>
     <span v-else-if="type === 'string'"
           class="vue-dd-string">"{{ escapeQuotesFn(modelValue) }}"</span>
     <span v-else-if="type === 'boolean'"
@@ -35,7 +37,7 @@
     <span v-else-if="type === 'symbol'"
           class="vue-dd-symbol">{{ modelValue.toString() }}</span>
     <span v-else
-          class="vue-dd-false">[unknown_type]{{ modelValue }}</span>
+          class="vue-dd-unknown">[unknown_type]{{ modelValue }}</span>
     <span class="vue-dd-comma" v-if="shouldComma">,</span>
   </span>
 </template>

vue-dd/src/css/VueDd.css

@@ -260,7 +260,6 @@ button.vue-dd-expand:active {
   color: #55606a;
 }
 
-
 .vue-dd-dark pre.vue-dd-f-start {
   padding: 0;
   margin: 0;
@@ -337,6 +336,11 @@ button.vue-dd-arrow-collapsed {
   color: #21BA45;
   -webkit-user-select: none;
 }
+
+.vue-dd-dark .vue-dd-instance {
+
+}
+
 .vue-dd-instance + .vue-dd-size {
   margin-left: 2px;
 }
@@ -408,8 +412,27 @@ button.vue-dd-arrow-collapsed {
   color: #4067b2;
 }
 
+.vue-dd-bigint {
+  color: #5a38be;
+}
+
+.vue-dd-dark .vue-dd-bigint {
+  color: #7046e8;
+}
+
 .vue-dd-false {
-  cursor: default;
+  color: #f34747;
+}
+
+.vue-dd-dark .vue-dd-false {
+  color: #f34747;
+}
+
+.vue-dd-unknown {
+  color: #f34747;
+}
+
+.vue-dd-dark .vue-dd-unknown {
   color: #f34747;
 }
 
@@ -518,23 +541,28 @@ button.vue-dd-arrow-collapsed {
 }
 
 .vue-dd-comma {
+  color: #999;
   padding-right: 3px;
 }
 
+.vue-dd-dark .vue-dd-comma {
+  color: #333;
+}
+
 .vue-dd-obj-char {
-  color: #2c3e50;
+  color: #7490ab;
   padding: 0 1px;
 }
 
-.vue-dd-dark.vue-dd-obj-char {
+.vue-dd-dark .vue-dd-obj-char {
   color: #555;
 }
 
 .vue-dd-arr-char {
-  color: #2c3e50;
+  color: #7490ab;
   padding: 0 1px;
 }
 
-.vue-dd-dark.vue-dd-arr-char {
+.vue-dd-dark .vue-dd-arr-char {
   color: #555;
 }

vue3/src/components/VueDdTest.vue

@@ -66,7 +66,7 @@ const set = reactive(new Set())
   Window object displayed:
   <br />
   dark: <base-checkbox v-model="dark" /><br />
-  <vue-dd name="setupState" :dark="dark" v-model="instance.setupState" max-height="300px" :deep="true" />
+  <vue-dd name="setupState" :dark="dark" v-model="instance.setupState" max-height="300px" :deep="false" />
 <!--  <vue-dd name="test" delimiter="$" :dark="dark" v-model="bool" />-->
 <!--  <vue-dd name="ref" :dark="dark" v-model="text" />-->
 <!--  <vue-dd name="refObject" :dark="dark" v-model="refObject" />-->

vue3/src/main.ts

@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import VueDd from 'vue-dd'
+// import VueDd from 'vue-dd'
 
-// import VueDd from '../../vue-dd/src/VueDd.vue'
+import VueDd from '../../vue-dd/src/VueDd.vue'
 
 import App from './App.vue'
 import router from './router'