EditFolder.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <SmartModal v-if="show" @close="$emit('hide-modal')">
  3. <template #header>
  4. <h3 class="heading">{{ $t("edit_folder") }}</h3>
  5. <div>
  6. <button class="icon button" @click="hideModal">
  7. <i class="material-icons">close</i>
  8. </button>
  9. </div>
  10. </template>
  11. <template #body>
  12. <label for="selectLabel">{{ $t("label") }}</label>
  13. <input
  14. id="selectLabel"
  15. v-model="name"
  16. class="input"
  17. type="text"
  18. @keyup.enter="editFolder"
  19. />
  20. </template>
  21. <template #footer>
  22. <span></span>
  23. <span>
  24. <button class="icon button" @click="hideModal">
  25. {{ $t("cancel") }}
  26. </button>
  27. <button class="icon button primary" @click="editFolder">
  28. {{ $t("save") }}
  29. </button>
  30. </span>
  31. </template>
  32. </SmartModal>
  33. </template>
  34. <script>
  35. export default {
  36. props: {
  37. show: Boolean,
  38. },
  39. data() {
  40. return {
  41. name: null,
  42. }
  43. },
  44. methods: {
  45. editFolder() {
  46. this.$emit("submit", this.name)
  47. this.hideModal()
  48. },
  49. hideModal() {
  50. this.name = null
  51. this.$emit("hide-modal")
  52. },
  53. },
  54. }
  55. </script>