Merge branch 'development' into feature/v-snack-bar-v-model

Author: NEKOYASAN

src/components/AddButton.vue

@@ -4,7 +4,7 @@
     :color="buttonColor"
     :width="buttonSize"
     :height="buttonSize"
-    @click="onClick"
+    @click="$emit('clickAddButton')"
   >
     <v-icon :size="iconSize" :color="iconColor">{{ iconName }}</v-icon>
   </v-btn>
@@ -41,11 +41,6 @@ export default Vue.extend({
       required: false,
       default: '40'
     }
-  },
-  methods: {
-    onClick(): void {
-      this.$emit('addButtonClicked')
-    }
   }
 })
 </script>

src/components/BottomSheetLayer.vue

@@ -1,10 +1,11 @@
 <template>
   <v-bottom-sheet
-    v-model="layer"
+    :value="value"
     persistent
     scrollable
     no-click-animation
     :fullscreen="fullscreen"
+    @input="$emit('input', $event)"
   >
     <v-card class="Layer">
       <v-card-title class="Layer-CardElements Layer-CardTitle">
@@ -32,13 +33,9 @@
 <script lang="ts">
 import Vue from 'vue'
 
-type DataType = {
-  layer: boolean
-}
-
 export default Vue.extend({
   props: {
-    expanded: {
+    value: {
       type: Boolean,
       required: false,
       default: true
@@ -56,16 +53,6 @@ export default Vue.extend({
       required: false,
       default: false
     }
-  },
-  data(): DataType {
-    return {
-      layer: this.expanded
-    }
-  },
-  watch: {
-    expanded(newValue) {
-      this.layer = newValue
-    }
   }
 })
 </script>

src/components/CalendarBar.vue

@@ -65,6 +65,7 @@ export type CalendarBarConfig = {
 export interface DateListWindow {
   list: Array<Date>
   currentDate: Date
+  inputHandler: (value: Date) => Date
   selectDate(date: Date): DateListWindow
   nextDay(): DateListWindow
   prevDay(): DateListWindow
@@ -79,11 +80,13 @@ class DateListWindowImpl implements DateListWindow {
   startWeekOn: StartWeekOn
   currentDate: Date
   list: Array<Date>
+  inputHandler: (value: Date) => Date
 
   constructor(
     view: View = 'Week',
     startWeekOn: StartWeekOn = 'Monday',
-    date: Date = new Date()
+    date: Date = new Date(),
+    inputHandler: (value: Date) => Date
   ) {
     this.view = view
     this.startWeekOn = view === 'Weekday' ? 'Monday' : startWeekOn
@@ -96,6 +99,7 @@ class DateListWindowImpl implements DateListWindow {
       this.startWeekOn,
       this.currentDate
     )
+    this.inputHandler = inputHandler
   }
 
   nextDay(): DateListWindow {
@@ -128,6 +132,9 @@ class DateListWindowImpl implements DateListWindow {
       isValid(date) ? date : new Date()
     )
     this.list = this.generateDateList()
+
+    // CalendarBar を経由して変更を通知
+    this.inputHandler(this.currentDate)
     return this
   }
 
@@ -211,28 +218,18 @@ export default class CalendarBar extends Vue {
   dateListWindow: DateListWindow = new DateListWindowImpl(
     this.config?.view ?? 'Week',
     this.config?.startWeekOn ?? 'Monday',
-    this.date ?? new Date()
+    this.value ?? new Date(),
+    this.input
   )
 
-  @Emit('changeCurrentDate')
-  changeCurrentDate(): Date {
-    return this.dateListWindow.currentDate
-  }
-
-  private get date(): Date {
-    return this.value
-  }
-
   @Emit()
   public input(value: Date) {
     return value
   }
 
-  @Watch('dateListWindow.currentDate', { immediate: true })
-  // @Watch('dateListWindow.currentDate')
-  onChangeCurrentDate() {
-    this.input(this.dateListWindow.currentDate)
-    this.changeCurrentDate()
+  @Watch('value', { immediate: true })
+  onValueChanged(newValue: Date) {
+    this.dateListWindow.selectDate(newValue)
   }
 
   get currentMonthString(): string {

src/components/EditingScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-bottom-sheet v-model="screen" no-click-animation persistent scrollable>
+  <v-bottom-sheet :value="expanded" no-click-animation persistent scrollable>
     <v-card class="EditingScreen">
       <v-card-title class="EditingScreen-CardElements">
         <v-container class="EditingScreen-Container">
@@ -100,7 +100,6 @@ type FourthPageDataType = {
 }
 
 type DataType = {
-  screen: boolean
   page: number
   error: boolean
   lessonId: string
@@ -158,7 +157,6 @@ export default Vue.extend({
   },
   data(): DataType {
     return {
-      screen: this.expanded,
       page: 1,
       error: false,
       isHidden: this.value.isHidden,
@@ -199,9 +197,6 @@ export default Vue.extend({
     }
   },
   watch: {
-    expanded(newValue) {
-      this.screen = newValue
-    },
     value(value) {
       this.isHidden = value.isHidden
       this.lessonId = value.lessonId

src/components/EditorField.vue

@@ -3,11 +3,12 @@
     <span v-if="title" class="EditorField-Title">{{ title }}</span>
     <div class="EditorField-Form">
       <editor-input-field
-        v-model="modelValue"
+        :value="value"
         :label="label"
         :placeholder="placeholder"
         :transparent="transparent"
         :readonly="readonly"
+        @input="$emit('input', $event)"
       />
       <content-card-editor-button
         v-if="iconName"
@@ -24,10 +25,6 @@ import Vue from 'vue'
 import EditorInputField from '@/components/EditorInputField.vue'
 import ContentCardEditorButton from '@/components/ContentCardEditorButton.vue'
 
-type DataType = {
-  modelValue: string
-}
-
 export default Vue.extend({
   components: { EditorInputField, ContentCardEditorButton },
   props: {
@@ -66,19 +63,6 @@ export default Vue.extend({
       required: false,
       default: ''
     }
-  },
-  data(): DataType {
-    return {
-      modelValue: this.value
-    }
-  },
-  watch: {
-    modelValue(value) {
-      this.$emit('input', value)
-    },
-    value(value) {
-      this.modelValue = value
-    }
   }
 })
 </script>

src/components/EditorInputField.vue

@@ -1,6 +1,6 @@
 <template>
   <v-text-field
-    v-model="modelValue"
+    :value="value"
     :color="transparent ? 'white' : '#424242'"
     type="text"
     :hint="hint"
@@ -11,14 +11,13 @@
     class="elevation-0"
     solo
     flat
+    @input="$emit('input', $event)"
   />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-type DataType = {
-  modelValue: string
-}
+
 export default Vue.extend({
   name: 'InputField',
   props: {
@@ -62,19 +61,6 @@ export default Vue.extend({
       required: true,
       default: ''
     }
-  },
-  data(): DataType {
-    return {
-      modelValue: this.value
-    }
-  },
-  watch: {
-    modelValue(value) {
-      this.$emit('input', value)
-    },
-    value(value) {
-      this.modelValue = value
-    }
   }
 })
 </script>

src/components/EditorTextarea.vue

@@ -2,25 +2,22 @@
   <div>
     <span v-if="title" class="EditorTextarea-Title">{{ title }}</span>
     <v-textarea
-      v-model="modelValue"
+      :value="value"
       :hint="hint"
       :label="label"
       :placeholder="placeholder"
       background-color="white"
       class="elevation-0"
       solo
       flat
+      @input="$emit('input', $event)"
     />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 
-type DataType = {
-  modelValue: string
-}
-
 export default Vue.extend({
   props: {
     title: {
@@ -48,19 +45,6 @@ export default Vue.extend({
       required: false,
       default: ''
     }
-  },
-  data(): DataType {
-    return {
-      modelValue: this.value
-    }
-  },
-  watch: {
-    modelValue(value) {
-      this.$emit('input', value)
-    },
-    value(value) {
-      this.modelValue = value
-    }
   }
 })
 </script>