AppNavigationItem improved editing mode and AppNavigationNewItem component

src/components/AppNavigationItem/AppNavigationItem.vue

@@ -82,12 +82,12 @@ prevent the user from collapsing the items.
 </AppNavigationItem>
 ```
 ### Editable element
-Add the prop `:editable=true` and an edit placeholder if you need it. By devault
+Add the prop `:editable=true` and an edit placeholder if you need it. By default
 the placeholder is the previous title of the element.
 
 ```
 <AppNavigationItem title="Editable Item" :editable="true"
- editPlaceholder="your_placeholder_here" />
+ editPlaceholder="your_placeholder_here" icon="icon-folder" @update:title="function(value){alert(value)}" />
 ```
 ### Undo element
 Just set the `undo` and `title` props. When clicking the undo button, an `undo` event is emitted.
@@ -111,14 +111,14 @@ Just set the `pinned` prop.
  'app-navigation-entry--no-icon': !isIconShown,
  'app-navigation-entry--opened': opened,
  'app-navigation-entry--pinned': pinned,
- 'app-navigation-entry--editing' : editing,
+ 'app-navigation-entry--editing' : editingActive,
  'app-navigation-entry--deleted': undo,
  'app-navigation-entry--collapsible': collapsible,
  'active': isActive
  }"
  class="app-navigation-entry">
  <!-- Icon and title -->
- <a v-if="!undo && !editing"
+ <a v-if="!undo"
  class="app-navigation-entry-link"
  href="#"
  @click="onClick">
@@ -129,9 +129,15 @@ Just set the `pinned` prop.
  class="app-navigation-entry-icon">
  <slot v-if="!loading" v-show="isIconShown" name="icon" />
  </div>
- <span class="app-navigation-entry__title" :title="title">
+ <span v-if="!editingActive" class="app-navigation-entry__title" :title="title">
  {{ title }}
  </span>
+ <div v-if="editingActive" class="editingContainer">
+ <InputConfirmCancel v-model="editingValue"
+ :placeholder="editPlaceholder !== '' ? editPlaceholder : title"
+ @cancel="cancelEditing"
+ @confirm="handleEditingDone" />
+ </div>
  </a>
 
  <AppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
@@ -150,31 +156,14 @@ Just set the `pinned` prop.
  :force-menu="forceMenu"
  :default-icon="menuIcon"
  @update:open="onMenuToggle">
- <ActionButton v-if="editable && !editing" icon="icon-rename" @click="handleEdit">
+ <ActionButton v-if="editable && !editingActive" icon="icon-rename" @click="handleEdit">
  {{ editLabel }}
  </ActionButton>
  <ActionButton v-if="undo" icon="app-navigation-entry__deleted-button icon-history" @click="handleUndo" />
  <slot name="actions" />
  </Actions>
  </div>
 
- <!-- edit entry -->
- <div v-if="editing" class="app-navigation-entry__edit">
- <form @submit.prevent="handleRename" @keydown.esc.exact.prevent="cancelEdit">
- <input ref="inputTitle"
- v-model="newTitle"
- type="text"
- class="app-navigation-entry__edit-input"
- :placeholder="editPlaceholder !== '' ? editPlaceholder : title">
- <button type="submit"
- class="icon-confirm"
- @click.stop.prevent="handleRename" />
- <button type="reset"
- class="icon-close"
- @click.stop.prevent="cancelEdit" />
- </form>
- </div>
-
  <!-- Children elements -->
  <ul v-if="canHaveChildren && hasChildren" class="app-navigation-entry__children">
  <slot />
@@ -188,6 +177,7 @@ import Actions from '../Actions/Actions'
 import ActionButton from '../ActionButton/ActionButton'
 import AppNavigationIconCollapsible from './AppNavigationIconCollapsible'
 import isMobile from '../../mixins/isMobile'
+import InputConfirmCancel from './InputConfirmCancel.vue'
 
 export default {
  name: 'AppNavigationItem',
@@ -196,6 +186,7 @@ export default {
  Actions,
  ActionButton,
  AppNavigationIconCollapsible,
+ InputConfirmCancel,
  },
  directives: {
  ClickOutside,
@@ -267,7 +258,7 @@ export default {
  default: '',
  },
  /**
- * Only for 'editable' items, sets placeholder text for the editing form.
+ * Only for items in 'editable' mode, sets the placeholder text for the editing form.
  */
  editPlaceholder: {
  type: String,
@@ -321,9 +312,9 @@ export default {
 
  data() {
  return {
- newTitle: '',
+ editingValue: '',
  opened: this.open,
- editing: false,
+ editingActive: false,
  }
  },
  computed: {
@@ -405,20 +396,20 @@ export default {
 
  // Edition methods
  handleEdit() {
- this.newTitle = this.title
- this.editing = true
+ this.editingValue = this.title
+ this.editingActive = true
  this.onMenuToggle(false)
  this.$nextTick(() => {
- this.$refs.inputTitle.focus()
+ // this.$refs.editingInput.focus()
  })
  },
- cancelEdit() {
- this.editing = false
+ cancelEditing() {
+ this.editingActive = false
  },
- handleRename() {
- this.$emit('update:title', this.newTitle)
- this.newTitle = ''
- this.editing = false
+ handleEditingDone() {
+ this.$emit('update:title', this.editingValue)
+ this.editingValue = ''
+ this.editingActive = false
  },
 
  // Undo methods
@@ -429,7 +420,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '../../fonts/scss/iconfont-vue';
 
 .app-navigation-entry {
@@ -468,16 +459,21 @@ export default {
  }
  }
 
+ &:not(.app-navigation-entry--editing) {
+ .app-navigation-entry-link, .app-navigation-entry-div {
+ padding-right: $icon-margin;
+ }
+ }
+
  // Main entry link
- .app-navigation-entry-link {
+ .app-navigation-entry-link, .app-navigation-entry-div {
  z-index: 100; /* above the bullet to allow click*/
  display: flex;
  overflow: hidden;
  flex: 1 1 0;
  box-sizing: border-box;
  min-height: $clickable-area;
  padding: 0;
- padding-right: $icon-margin;
  white-space: nowrap;
  color: var(--color-main-text);
  background-repeat: no-repeat;
@@ -500,6 +496,12 @@ export default {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
+ padding-left: 6px;
+ }
+
+ .editingContainer {
+ width: calc(100% - #{$clickable-area});
+ margin: auto;
  }
  }
 
@@ -534,56 +536,6 @@ export default {
  }
 }
 
-.app-navigation-entry__edit {
- flex: 1 0 100%;
- /* Ugly hack for overriding the main entry link */
- /* align the input correctly with the link text
- 44px-6px padding for the input */
- padding-left: $clickable-area - $icon-margin - 6px !important;
- form {
- display: flex;
- width: 100%;
- .app-navigation-entry__edit-input {
- flex: 1 1 100%;
- }
-
- // submit and cancel buttons
- button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: $clickable-area !important;
- color: var(--color-main-text);
- background: none;
- font-size: 16px;
-
- // icon hover/focus feedback
- &::before {
- opacity: $opacity_normal;
- }
- &:hover,
- &:focus {
- &::before {
- opacity: $opacity_full;
- }
- }
-
- &.icon-confirm {
- @include iconfont('confirm');
- }
-
- &.icon-close {
- @include iconfont('close');
- }
- }
- .icon-close {
- margin: 0;
- border: none;
- background-color: transparent;
- }
- }
-}
-
 /* Makes the icon of the collapsible element disappear
 * When hovering on the root element */
 .app-navigation-entry--collapsible {