add slot for text

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "vue3-treeview",
-  "version": "0.4.1",
+  "name": "@employee87/vue3-treeview",
+  "version": "0.4.9",
   "private": false,
   "library": "vue3-treeview",
   "license": "MIT",

src/components/Tree.vue

@@ -23,6 +23,13 @@
         />
       </template>
 
+      <template #input="props">
+        <slot
+          name="input"
+          :node="props.node"
+        />
+      </template>
+
       <template #after-input="props">
         <slot
           name="after-input"

src/components/TreeLevel.vue

@@ -26,6 +26,13 @@
         />
       </template>
 
+      <template #input="props">
+        <slot
+          name="input"
+          :node="props.node"
+        />
+      </template>
+
       <template #after-input="props">
         <slot
           name="after-input"

src/components/TreeNode.vue

@@ -72,13 +72,18 @@
           @blur="blur"
         >
 
-        <span 
-          v-else
-          class="node-text"
-          @dblclick="focusInput"
-        >
-          {{ text }}
-        </span>
+        <div v-else @dblclick="focusInput">
+          <slot
+            name="input"
+            :node="node"     
+          >
+            <span 
+              class="node-text"
+            >
+              {{ text }}
+            </span>
+          </slot>
+        </div>
       </div>
 
       <slot
@@ -114,6 +119,13 @@
           />
         </template>
 
+        <template #input="props">
+          <slot
+            name="input"
+            :node="props.node"
+          />
+        </template>
+
         <template #after-input="props">
           <slot
             name="after-input"

src/css/material.css

@@ -33,7 +33,11 @@
 }
 
 .input-wrapper {
-    margin-left: 0.75em;
+    /*margin-left: 0.75em;*/
+    flex:1;
+}
+.input-wrapper > div {
+    flex:1;
 }
 
 .icon-wrapper svg {
@@ -126,13 +130,14 @@
 }
 
 .input-wrapper {
+    display: flex;
+    align-items: center;
+}
+.node-text {
     font-size: 14px;
     position: relative;
     color: #000000;
-    display: flex;
-    align-items: center;
 }
-
 .node-input, .node-text  {
     font-family: 'Roboto', sans-serif;
 }
@@ -145,6 +150,7 @@
     padding-top: 5px;
 }
 
+/*
 .input-wrapper input{
       padding: 4px 0 4px 0;
       display: block;
@@ -165,3 +171,4 @@
     border-bottom-width: 3px;
     border-bottom-color: #3f51b5;
 }
+*/

src/dev.vue

@@ -83,6 +83,10 @@
       <span> {{ props.node.text }} </span>
     </template>
 
+    <template #input="props">
+      <span> {{ props.node.text }} </span>
+    </template>
+
     <template #after-input="props">
       <span> {{ props.node.text }} </span>
     </template!-->