add リスト名、カードテキストの編集機能

suimenkathemove · Dec 9, 2019 · 1aced96 · 1aced96
1 parent fe18f01
commit 1aced96
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,6 +5,7 @@
       :key="list.id"
       class="list"
       :list="list"
+      :listName.sync="list.name"
       @add-card="addCard"
     />
     <input type="text" class="list-input" @change="addList" />

diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -1,17 +1,47 @@
 <template>
   <div class="card">
-    {{ card.text }}
+    <div
+      :contenteditable="contenteditable"
+      @dblclick="onDoubleClick"
+      @keypress.enter="onKeyPressEnter"
+      @blur="onBlur"
+    >
+      {{ card.text }}
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
 import { ICard } from "@/types";
 
 @Component
 export default class Card extends Vue {
   @Prop({ type: Object, required: true })
   readonly card!: ICard;
+
+  @PropSync("cardText", { type: String, required: true })
+  syncedCardText!: ICard["text"];
+
+  contenteditable = false;
+
+  onDoubleClick(event: MouseEvent & { currentTarget: HTMLDivElement }): void {
+    this.contenteditable = true;
+
+    event.currentTarget.focus();
+  }
+
+  onKeyPressEnter(
+    event: KeyboardEvent & { currentTarget: HTMLDivElement }
+  ): void {
+    event.currentTarget.blur();
+  }
+
+  onBlur(event: FocusEvent & { currentTarget: HTMLDivElement }): void {
+    this.syncedCardText = event.currentTarget.innerText;
+
+    this.contenteditable = false;
+  }
 }
 </script>
 

diff --git a/src/components/List.vue b/src/components/List.vue
@@ -1,13 +1,26 @@
 <template>
   <div class="list">
-    {{ list.name }}
-    <Card v-for="card in list.cards" :key="card.id" class="card" :card="card" />
+    <div
+      :contenteditable="contenteditable"
+      @dblclick="onDoubleClick"
+      @keypress.enter="onKeyPressEnter"
+      @blur="onBlur"
+    >
+      {{ list.name }}
+    </div>
+    <Card
+      v-for="card in list.cards"
+      :key="card.id"
+      class="card"
+      :card="card"
+      :cardText.sync="card.text"
+    />
     <input type="text" class="card-input" @change="addCard" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Emit } from "vue-property-decorator";
+import { Component, Vue, Prop, Emit, PropSync } from "vue-property-decorator";
 import Card from "@/components/Card.vue";
 import { IList } from "@/types";
 
@@ -25,6 +38,11 @@ export default class List extends Vue {
   @Prop({ type: Object, required: true })
   readonly list!: IList;
 
+  @PropSync("listName", { type: String, required: true })
+  syncedListName!: IList["name"];
+
+  contenteditable = false;
+
   @Emit()
   addCard(event: Event & { currentTarget: HTMLInputElement }): IAddCardEvent {
     const text = event.currentTarget.value;
@@ -36,6 +54,24 @@ export default class List extends Vue {
       text
     };
   }
+
+  onDoubleClick(event: MouseEvent & { currentTarget: HTMLDivElement }): void {
+    this.contenteditable = true;
+
+    event.currentTarget.focus();
+  }
+
+  onKeyPressEnter(
+    event: KeyboardEvent & { currentTarget: HTMLDivElement }
+  ): void {
+    event.currentTarget.blur();
+  }
+
+  onBlur(event: FocusEvent & { currentTarget: HTMLDivElement }): void {
+    this.syncedListName = event.currentTarget.innerText;
+
+    this.contenteditable = false;
+  }
 }
 </script>