removed button element to stop them from submitting forms, moved the …

…focus eye to a more elegant ui positioning.
infinite-system · May 7, 2023 · 0acc34f · 0acc34f
1 parent 49bbb97
commit 0acc34f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 44 deletions.
diff --git a/vue-dd/demo/App.vue b/vue-dd/demo/App.vue
@@ -1,10 +1,11 @@
+<script setup lang="ts">
+ const w = window
+</script>
 <template>
-
+Test
+  <vue-dd v-model="w" />
 </template>
 
-<script setup lang="ts">
-
-</script>
 
 <style>
 .rendererParent {

diff --git a/vue-dd/package.json b/vue-dd/package.json
@@ -15,6 +15,7 @@
   "types": "./dist/src/index.d.ts",
   "style": "./dist/style.css",
   "scripts": {
+    "dev": "vite dev --host",
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "cypress": "cypress run --component",

diff --git a/vue-dd/src/NodeComplex.vue b/vue-dd/src/NodeComplex.vue
@@ -1,13 +1,28 @@
 <template>
   <div :id="id" :class="{'vue-dd-body':true, 'vue-dd-box-closed': !isOpen}">
     <div class="vue-dd-start">
+      <!--focus-->
+      <span v-if="saveFocus"
+            ref="focusElement"
+            class="vue-dd-focus vue-dd-icon-eye"
+            @click.prevent="focusEmit"
+            @mouseenter="hover=true"
+            @mouseup="hover=false"
+            @mouseleave="hover=false"
+            :class="{
+              'vue-dd-focus-hover':hover,
+              'vue-dd-focus-selected':isFocused
+            }"
+      ></span>
+
       <!--arrow-->
-      <button
+      <span
         v-if="arrow"
         @click.prevent="toggleOpen"
         class="vue-dd-arrow"
         :class="{'vue-dd-arrow-collapsed': !isOpen}"
-        v-html="isOpen ? arrowOpen : arrowClosed"></button>
+        v-html="isOpen ? arrowOpen : arrowClosed"></span>
+
 
       <!--name-->
       <span
@@ -20,19 +35,6 @@
             'vue-dd-key-of-array': parentIsArray
           }">{{ name }}</span><span class="vue-dd-colon" v-if="level !== 0">:</span>
 
-      <!--focus-->
-      <span v-if="isOpen && saveFocus"
-            ref="focusElement"
-            class="vue-dd-focus vue-dd-icon-eye"
-            @click.prevent="focusEmit"
-            @mouseenter="hover=true"
-            @mouseup="hover=false"
-            @mouseleave="hover=false"
-            :class="{
-              'vue-dd-focus-hover':hover,
-              'vue-dd-focus-selected':isFocused
-            }"
-      ></span>
 
       <!--R-->
       <span v-if="isIterable && isReactive"
@@ -128,10 +130,10 @@
         <span v-if="isIterable && isPromise" class="vue-dd-promise-content">&lt;pending&gt;</span>
 
         <!--expand button-->
-        <button
+        <span
           v-if="isIterable && !isOpen && !allowPreview"
           @click.prevent="expand"
-          class="vue-dd-expand"><span class="vue-dd-size-bracket">(</span><span class="vue-dd-expand-more" v-html="more"></span><span class="vue-dd-size-bracket">)</span></button>
+          class="vue-dd-expand"><span class="vue-dd-size-bracket">(</span><span class="vue-dd-expand-more" v-html="more"></span><span class="vue-dd-size-bracket">)</span></span>
 
         <div v-if="isIterable && (isOpen || expanded)">
 
@@ -240,11 +242,11 @@
         </div>
 
         <!--expand button-->
-        <button
+        <span
           v-if="isIterable && !isOpen && allowPreview && preview < items.length"
           @click.prevent="expand"
           class="vue-dd-expand"
-          v-html="more"></button>
+          v-html="more"></span>
 
         <!--} or ]-->
         <span v-if="isIterable" :class="charClass" v-html="charClose" />

diff --git a/vue-dd/src/NodePrimitive.vue b/vue-dd/src/NodePrimitive.vue
@@ -4,23 +4,24 @@
       class="vue-dd-primitive"
       @click.prevent="$emit('openParent')">
     <span
-        v-if="showName"
+        v-if="parentOpen && saveFocus"
+        ref="focusElement"
+        class="vue-dd-focus vue-dd-icon-eye"
+        @click.prevent="focusEmit"
+        @mouseenter="hover=true"
+        @mouseup="hover=false"
+        @mouseleave="hover=false"
         :class="{
-          'vue-dd-key': true,
-          'vue-dd-key-of-array': parentIsArray,
-        }">{{ name }}</span><span class="vue-dd-colon">:</span><span
-      v-if="parentOpen && saveFocus"
-      ref="focusElement"
-      class="vue-dd-focus vue-dd-icon-eye"
-      @click.prevent="focusEmit"
-      @mouseenter="hover=true"
-      @mouseup="hover=false"
-      @mouseleave="hover=false"
-      :class="{
         'vue-dd-focus-hover': hover,
         'vue-dd-focus-selected': isFocused
       }"
-  ></span>
+    ></span>
+    <span
+        v-if="showName"
+        :class="{
+          'vue-dd-key': true,
+          'vue-dd-key-of-array': parentIsArray,
+        }">{{ name }}</span><span class="vue-dd-colon">:</span>
     <span v-if="type === 'null'"
           class="vue-dd-null">null</span>
     <span v-else-if="type === 'undefined'"

diff --git a/vue-dd/src/css/VueDd.css b/vue-dd/src/css/VueDd.css
@@ -193,7 +193,7 @@ div.vue-dd-start {
   color: #116dea;
 }
 
-button.vue-dd-expand {
+span.vue-dd-expand {
   vertical-align: middle;
   background: none;
   border: 0;
@@ -209,16 +209,16 @@ button.vue-dd-expand {
   letter-spacing: -0px;
 }
 
-button.vue-dd-expand:hover {
+span.vue-dd-expand:hover {
   background: rgba(0, 0, 0, 0.05);
   color: #21BA45;
 }
 
-.vue-dd-dark button.vue-dd-expand {
+.vue-dd-dark span.vue-dd-expand {
   /*background: rgba(19, 19, 19, 0.97);*/
 }
 
-.vue-dd-dark button.vue-dd-expand:hover {
+.vue-dd-dark span.vue-dd-expand:hover {
   background: rgba(255, 255, 255, 0.05);
 }
 
@@ -232,7 +232,7 @@ button.vue-dd-expand:hover {
   margin: 0;
 }
 
-button.vue-dd-expand:active {
+span.vue-dd-expand:active {
   padding-top: 4px;
   padding-bottom: 2px !important;
 }
@@ -316,7 +316,7 @@ button.vue-dd-expand:active {
   color: #cbeaff;
 }
 
-button.vue-dd-arrow {
+span.vue-dd-arrow {
   border: none;
   display: inline-block;
   background: none;
@@ -330,11 +330,11 @@ button.vue-dd-arrow {
   vertical-align: middle;
 }
 
-button.vue-dd-arrow:hover {
+span.vue-dd-arrow:hover {
   color: slategray;
 }
 
-button.vue-dd-arrow-collapsed {
+span.vue-dd-arrow-collapsed {
   padding: 0 2px 0 2px;
   transform: rotate(-90deg);
 }