.rmli-element-border

src/components/Add.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <div :class="['rmli-note rmli-add', {'rmli-focus': hasFocus}, {'rmli-timeline-note': settings.hasTimeline}]" @click="$emit('click')">
+  <div :class="['rmli-note rmli-add', {'rmli-focus': hasFocus}, {'rmli-timeline-note': settings.hasTimeline}, 'rmli-add-animation-' + animationStep]" @click="$emit('click')">
     <div class="rmli-placeholder-container">
         <span class="rmli-placeholder" v-if="hasPlaceHolder"  @click="onPlaceHolderClick"> {{placeholder}} </span> 
         <div 
@@ -15,6 +15,7 @@
             @blur="onBlur"/>
     </div>
   </div>
+  <TypeAhead ref="typehead" v-if="hasFocus" @select="onTypeAhead"/>
 </template>
 
 <style lang="scss">
@@ -33,6 +34,7 @@ export default {
   props: ['placeholder'],
   data: function () {
     return {
+      animationStep: 'none'
     }
   },
   components: {
@@ -52,13 +54,21 @@ export default {
         this.hasFocus = false
         if (text) {
             this.$emit('add', this.getValue())
+            this.animationStep = 'hidden'
+            setTimeout(() => {
+              this.animationStep = 'grow'
+            }, 500)
+            setTimeout(() => {
+              this.animationStep = 'none'
+            }, 1500)
         }
         this.reset()
     },
     reset () {
         // make somehow invisible and then popin again...
         this.setInnerHTML('')
         this.hasPlaceHolder = true
+      
     },
     setInnerHTML (html) {
       if (this.$refs.input) {

src/components/Note.vue

@@ -79,7 +79,7 @@
       <div v-if="isTodoQuery && !hasFocus" @click="focus">
          <div :class="['rmli-editable']" v-html="todosText" @mousedown="onMouseDown"/>
       </div>
-      <TypeAhead ref="typehead" v-if="hasFocus"/>
+      <TypeAhead ref="typehead" v-if="hasFocus" @select="onTypeAhead"/>
   </div>
 </template>
 
@@ -332,6 +332,12 @@ export default {
         this.insertAtCursor(text)
       }
     },
+    onTypeAhead (v) {
+      Logger.log(-3, 'Note.onTypeAhead() ', v)
+      if (v) {
+        this.insertAtCursor(v + ' ')
+      }
+    },
     onAlarm (v) {
       Logger.log(-3, 'Note.onAlarm() ', v)
       this.$emit('alarm', v)

src/components/TypeAhead.vue

@@ -1,7 +1,17 @@
 
 <template>
-  <div :class="['rmli-type-ahead', {'rmli-type-ahead-visible': isVisible}]" :style="'top :' + (caretPosition.top + 18) + 'px; left: ' + caretPosition.left + 'px' ">
-    {{text}} {{tagsAndPersons.length}}
+  <div 
+    :class="['rmli-type-ahead', {'rmli-type-ahead-visible': isVisible}]" 
+    :style="'top :' + (caretPosition.top + 24) + 'px; left: ' + caretPosition.left + 'px' " 
+   >
+      <span
+        v-for="(o) in matches"
+        :key="o.label"
+        :class="['rmli-type-ahead-item', {'rmli-type-ahead-item-selected': o.label === selected.value}]"
+        @mousedown.stop.prevent="select(o, $event)"
+      >
+        {{ o.label }}
+      </span>
   </div>
 </template>
 
@@ -17,34 +27,86 @@ const validTagRegex = /[a-zA-Z0-9\-_&]/
 
 export default {
   name: 'TypeAhead',
-  emits: ['change', 'focus', 'click'],
+  emits: ['change', 'focus', 'click', 'select'],
   props: {
   },
   data: function () {
     return {
-        isVisible:false,
+        isOpen:false,
         caretPosition: {top: 0, left:0},
-        text: ''
+        text: '',
+        selected: {
+          value: false
+        }
+    }
+  },
+  computed: {
+     hints() {
+      return this.tagsAndPersons.map(o => {
+        if (o.toLowerCase) {
+          return {
+            label: o,
+            value: o
+          }
+        }
+        return o
+      })
+    },
+    matches () {
+      return this.hints.filter(o => {
+        return o.value.toLowerCase().indexOf(this.text) === 0
+      })
+    },
+    isVisible () {
+      return this.isOpen && this.matches.length > 0
     }
   },
   inject: ['tagsAndPersons'],
   components: {
   },
   methods: {
     onKeyDown (e) {
-      Logger.log(-1, 'TypeAhead.onKeyDown()', e.key, e)
+      Logger.log(3, 'TypeAhead.onKeyDown()', e.key, e)
       const key = e.key
       if (key === '@' || key === "#") {
           this.open()
       }
+
+      if ('Backspace' === key) { // back
+        this.text = this.text.substring(0, this.text.length-1)
+        return
+      }
      
       if ('ArrowDown' === key) { // Down
         e.preventDefault();
+        let index = this.matches.findIndex(o => o.value === this.selected.value)
+        if (index === -1) {
+          this.selected = this.matches[0]
+        } else {
+          this.selected = this.matches[index + 1]
+        }
         return
       }
 
       if ('ArrowUp' === key) { // UP
         e.preventDefault();
+        let index = this.matches.findIndex(o => o.value === this.selected.value)
+        if (index === -1) {
+          this.selected = this.matches[0]
+        } else {
+          this.selected = this.matches[index - 1]
+        }
+        return
+      }
+
+      if ('Enter' === key) { // enter
+        e.preventDefault();
+        if (this.matches.length === 1) {
+          this.select(this.matches[0])
+        }
+        if (this.selected.value) {
+          this.select(this.selected)
+        }
         return
       }
 
@@ -53,9 +115,6 @@ export default {
       }
 
       this.text += e.key
-     
-      
-      
     },
     isValidTagChar (e) {
       var char = String.fromCharCode(e.keyCode);
@@ -64,16 +123,28 @@ export default {
       }
       return false
     },
+    select (o) {
+      let value = o.value.substring(this.text.length)
+      Logger.log(-1, 'TypeAhead.select()', value)
+      this.$emit('select', value)
+      this.close()
+    },
     open() {
       Logger.log(-1, 'TypeAhead.open()')
       this.caretPosition = Util.getCaretTopPoint()
-      this.isVisible = true
+      this.isOpen = true
       this.text = ''
+      this.selected = {
+        value: false
+      }
     },
     close () {
       Logger.log(-1, 'TypeAhead.close()')
-      this.isVisible = false
+      this.isOpen = false
       this.text = ''
+      this.selected = {
+        value: false
+      }
     }
   },
   mounted () {

src/scss/add.scss

@@ -2,7 +2,9 @@
 
 .rmli-add.rmli-note{
     border-top: 1px solid rgba(0,0,0, 0.00);
-    padding: $spacing-m 0px; 
+    padding: $spacing-m 0px;
+    padding-top: $spacing-l;
+
 
     &.rmli-timeline-note {
         border-left-color: transparent;
@@ -15,6 +17,15 @@
             border-left-color: rgba($border-color-focus, 1);
         }
     }
+
+    &.rmli-add-animation-hidden{
+        height: 0px;
+        overflow: hidden;
+        padding: 0px;
+    }
+    &.rmli-add-animation-grow{
+        transition: all 0.5s;
+    }
 }
 
 .rmli-add-pop {

src/scss/ds.scss

@@ -66,8 +66,8 @@ $border-radius-xl: 30px;
 $border-radius-m: 8px;
 $border-radius-s: 2px;
 
-$shadow-s: 0 2px 10px rgba(0,0,0, 0.15);
-$shadow-m: 0 5px 20px rgba(0,0,0, 0.15);
-
+$shadow-s: 0 2px 8px rgba(0,0,0, 0.15);
+$shadow-m: 0 5px 24px rgba(0,0,0, 0.15);
+$shadow-l: 0 5px 32px rgba(0,0,0, 0.15);
 
 $dialog-background: #fff;

src/scss/editor.scss

@@ -22,6 +22,7 @@
         align-items: center;       
     }
 
+
     .rmli-element-border{
         border-top: 1px solid rgba(0,0,0, 0.05);
 

src/scss/tooltip.scss

@@ -10,7 +10,8 @@
 
     &:hover .rmli-tooltip-message{
         display: block;
-        width: 70px;
+        min-width: 70px;
+        max-width: 200px;
         position: absolute;
         top:100%;
         right: 0px;
@@ -22,5 +23,6 @@
         border-radius: $border-radius-m;
         text-align: left;
         text-align: center;
+        white-space: nowrap;
     }
 }

src/scss/type-ahead.scss

@@ -3,12 +3,32 @@
 .rmli-type-ahead {
     border: 1px solid red;
     display: none;
+    border:1px solid $border-color-hover;
+    box-shadow: $shadow-l;
+    z-index: 1000;
+    max-height: 150px;
+    overflow: auto;
+    background: #fff;
+    border-radius: $border-radius-m;
+    font-size: $font-size-s;
+    padding: $spacing-xs;
+    box-sizing: border-box;
+
+    flex-direction: column;
+    gap: $spacing-xs;
+
+    .rmli-type-ahead-item {
+        cursor: pointer;
+
+        &.rmli-type-ahead-item-selected {
+            color: $color1-hover;
+        }
+    }
 }
 
 .rmli-type-ahead-visible {
-    display: block;
+    display: flex;
     position: fixed;
-    width: 100px;
-    height: 64px;
-    background: rgb(134, 134, 165);
+    max-width: 200px;
+    max-height: 150px;
 }

src/util/Animation.js

@@ -0,0 +1,3 @@
+export default function animate (list) {
+
+}

src/util/Util.js

@@ -1,4 +1,4 @@
-import Logger from './Logger'
+
 /**
  *  enterring a<enter><enter>b will give such an HTML
  * 
@@ -52,7 +52,6 @@ export function innerText(node, lastChildWasBr = { isTrue: true }, level = 0) {
         }
         if (childNode.nodeType === 3 && childNode.textContent) {
             let text = childNode.textContent
-            Logger.space(level + 1, childNode.text)
             result += text;
             /**
              * If the text index with a \n, we should ignore

src/views/Editor.vue

@@ -52,7 +52,7 @@
                   </h1>
 
                   <transition-group name="list" tag="div">
-                    <div :class="'rmli-element ' + (i === 0 ? 'rmli-element-no-border' : '')" v-for="(element,i) in filteredElements.pinned" :key="element.id" :data-element-id="element.id">
+                    <div :class="'rmli-element '" v-for="(element) in filteredElements.pinned" :key="element.id" :data-element-id="element.id">
                         <component 
                           :is="element.type" 
                           :element="element" 
@@ -80,7 +80,7 @@
                       {{selectedFolder ? selectedFolder.label : $t('list.rest')}}
                   </h1>
 
-                  <div class="rmli-element rmli-element-add rmli-element-no-border rmli-element-add-top">
+                  <div class="rmli-element rmli-element-add rmli-element-add-top">
                     <Add @add="addStart" :placeholder="$t('add.start')" ref="add" :settings="settings"/>
                   </div>