AddFolder.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <SmartModal v-if="show" @close="$emit('hide-modal')">
  3. <template #header>
  4. <h3 class="heading">{{ $t("new_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. :placeholder="$t('my_new_folder')"
  19. @keyup.enter="addFolder"
  20. />
  21. </template>
  22. <template #footer>
  23. <span></span>
  24. <span>
  25. <button class="icon button" @click="hideModal">
  26. {{ $t("cancel") }}
  27. </button>
  28. <button class="icon button primary" @click="addFolder">
  29. {{ $t("save") }}
  30. </button>
  31. </span>
  32. </template>
  33. </SmartModal>
  34. </template>
  35. <script>
  36. export default {
  37. props: {
  38. show: Boolean,
  39. folder: { type: Object, default: () => {} },
  40. folderPath: { type: String, default: null },
  41. collectionIndex: { type: Number, default: null },
  42. },
  43. data() {
  44. return {
  45. name: null,
  46. }
  47. },
  48. methods: {
  49. addFolder() {
  50. this.$emit("add-folder", {
  51. name: this.name,
  52. folder: this.folder,
  53. path: this.folderPath || `${this.collectionIndex}`,
  54. })
  55. this.hideModal()
  56. },
  57. hideModal() {
  58. this.name = null
  59. this.$emit("hide-modal")
  60. },
  61. },
  62. }
  63. </script>