From 5a4c273226117624f42f0f4ab014109f3452bc4a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 4 Jan 2023 16:03:51 +0900
Subject: [PATCH 1/6] add form date

---
 src/components/UI/FormDate.vue | 50 ++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/UI/FormDate.vue

diff --git a/src/components/UI/FormDate.vue b/src/components/UI/FormDate.vue
new file mode 100644
index 00000000..e6f23550
--- /dev/null
+++ b/src/components/UI/FormDate.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+
+interface Props {
+  modelValue: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', modelValue: string): void
+}>()
+
+const handleInput = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <icon name="mdi:calendar-clock" :class="$style.icon" />
+    <input
+      :class="$style.input"
+      type="datetime-local"
+      :value="props.modelValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<style module lang="scss">
+.container {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid $color-secondary;
+  border-radius: 6px;
+  &:focus-within {
+    border-color: $color-primary;
+  }
+}
+.input {
+  flex-grow: 1;
+}
+.icon {
+  color: $color-secondary;
+  .container:focus-within & {
+    color: $color-primary;
+  }
+}
+</style>

From 84e170dfb59d3a44eef3cec94caa7e208b094a4a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 4 Jan 2023 17:01:43 +0900
Subject: [PATCH 2/6] add form duration

---
 src/components/UI/FormDate.vue     |  5 +++
 src/components/UI/FormDuration.vue | 59 ++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/components/UI/FormDuration.vue

diff --git a/src/components/UI/FormDate.vue b/src/components/UI/FormDate.vue
index e6f23550..58c66137 100644
--- a/src/components/UI/FormDate.vue
+++ b/src/components/UI/FormDate.vue
@@ -20,6 +20,7 @@ const handleInput = (event: Event) => {
     <icon name="mdi:calendar-clock" :class="$style.icon" />
     <input
       :class="$style.input"
+      :data-is-blank="props.modelValue === ''"
       type="datetime-local"
       :value="props.modelValue"
       @input="handleInput"
@@ -40,8 +41,12 @@ const handleInput = (event: Event) => {
 }
 .input {
   flex-grow: 1;
+  &[data-is-blank='true'] {
+    color: $color-secondary;
+  }
 }
 .icon {
+  margin-right: 0.25rem;
   color: $color-secondary;
   .container:focus-within & {
     color: $color-primary;
diff --git a/src/components/UI/FormDuration.vue b/src/components/UI/FormDuration.vue
new file mode 100644
index 00000000..aa3ef608
--- /dev/null
+++ b/src/components/UI/FormDuration.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import FormDate from '/@/components/UI/FormDate.vue'
+import { Duration } from '/@/lib/apis'
+
+type DateType = 'since' | 'until'
+
+interface Props {
+  modelValue: Duration
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', modelValue: Duration): void
+}>()
+
+const handleInput = (value: string, dateType: DateType) => {
+  const duration: Duration = {
+    since: dateType === 'since' ? value : props.modelValue.since,
+    until: dateType === 'until' ? value : props.modelValue.until
+  }
+  emit('update:modelValue', duration)
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.formDate">
+      <p :class="$style.body2">～から</p>
+      <form-date
+        :model-value="modelValue.since"
+        @update:model-value="handleInput($event, 'since')"
+      />
+    </div>
+    <p :class="$style.wave">～</p>
+    <div :class="$style.formDate">
+      <p :class="$style.body2">～まで</p>
+      <form-date
+        :model-value="modelValue.until ?? ''"
+        @update:model-value="handleInput($event, 'until')"
+      />
+    </div>
+  </div>
+</template>
+
+<style module lang="scss">
+.container {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+.wave {
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+}
+.body2 {
+  font-size: 0.875rem;
+}
+</style>

From 699edb15b2f9d429f273e84ea2125eb98be562cb Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 4 Jan 2023 17:07:58 +0900
Subject: [PATCH 3/6] add required on since

---
 src/components/UI/FormDuration.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/UI/FormDuration.vue b/src/components/UI/FormDuration.vue
index aa3ef608..891c92ff 100644
--- a/src/components/UI/FormDuration.vue
+++ b/src/components/UI/FormDuration.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import FormDate from '/@/components/UI/FormDate.vue'
 import { Duration } from '/@/lib/apis'
+import Required from '/@/components/UI/Required.vue'
 
 type DateType = 'since' | 'until'
 
 interface Props {
   modelValue: Duration
+  sinceRequired?: boolean
 }
 
 const props = defineProps<Props>()
@@ -25,7 +27,10 @@ const handleInput = (value: string, dateType: DateType) => {
 <template>
   <div :class="$style.container">
     <div :class="$style.formDate">
-      <p :class="$style.body2">～から</p>
+      <div :class="$style.sinceHead">
+        <p :class="$style.head">～から</p>
+        <required />
+      </div>
       <form-date
         :model-value="modelValue.since"
         @update:model-value="handleInput($event, 'since')"
@@ -33,7 +38,9 @@ const handleInput = (value: string, dateType: DateType) => {
     </div>
     <p :class="$style.wave">～</p>
     <div :class="$style.formDate">
-      <p :class="$style.body2">～まで</p>
+      <div :class="$style.untilHead">
+        <p :class="$style.head">～まで</p>
+      </div>
       <form-date
         :model-value="modelValue.until ?? ''"
         @update:model-value="handleInput($event, 'until')"
@@ -48,12 +55,23 @@ const handleInput = (value: string, dateType: DateType) => {
   align-items: flex-end;
   gap: 0.5rem;
 }
+.sinceHead {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.untilHead {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
 .wave {
   height: 2.75rem;
   display: flex;
   align-items: center;
 }
-.body2 {
-  font-size: 0.875rem;
+.head {
+  font-size: 0.75rem;
 }
 </style>

From e560495c5ee3e43a23bca2176d12f6c876481e39 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 4 Jan 2023 17:11:27 +0900
Subject: [PATCH 4/6] add v-if

---
 src/components/UI/FormDuration.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/FormDuration.vue b/src/components/UI/FormDuration.vue
index 891c92ff..61be7712 100644
--- a/src/components/UI/FormDuration.vue
+++ b/src/components/UI/FormDuration.vue
@@ -29,7 +29,7 @@ const handleInput = (value: string, dateType: DateType) => {
     <div :class="$style.formDate">
       <div :class="$style.sinceHead">
         <p :class="$style.head">～から</p>
-        <required />
+        <required v-if="sinceRequired" />
       </div>
       <form-date
         :model-value="modelValue.since"

From e33135be20879ae4fbcae9df60f79a7cef1aada1 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 8 Mar 2023 22:53:23 +0900
Subject: [PATCH 5/6] =?UTF-8?q?input=E3=81=AE=E3=82=A2=E3=82=A4=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/calendar-clock.svg       |  3 +++
 public/icons/calendar-clock_focus.svg |  3 +++
 src/components/UI/FormDate.vue        | 15 +++++++++++----
 src/pages/Index.vue                   | 21 ++++++---------------
 4 files changed, 23 insertions(+), 19 deletions(-)
 create mode 100644 public/icons/calendar-clock.svg
 create mode 100644 public/icons/calendar-clock_focus.svg

diff --git a/public/icons/calendar-clock.svg b/public/icons/calendar-clock.svg
new file mode 100644
index 00000000..1e238a67
--- /dev/null
+++ b/public/icons/calendar-clock.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M15 13h1.5v2.82l2.44 1.41l-.75 1.3L15 16.69V13m4-5H5v11h4.67c-.43-.91-.67-1.93-.67-3a7 7 0 0 1 7-7c1.07 0 2.09.24 3 .67V8M5 21a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v6.1c1.24 1.26 2 2.99 2 4.9a7 7 0 0 1-7 7c-1.91 0-3.64-.76-4.9-2H5m11-9.85A4.85 4.85 0 0 0 11.15 16c0 2.68 2.17 4.85 4.85 4.85A4.85 4.85 0 0 0 20.85 16c0-2.68-2.17-4.85-4.85-4.85Z"/>
+</svg>
\ No newline at end of file
diff --git a/public/icons/calendar-clock_focus.svg b/public/icons/calendar-clock_focus.svg
new file mode 100644
index 00000000..af46a8ed
--- /dev/null
+++ b/public/icons/calendar-clock_focus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#005bac" d="M15 13h1.5v2.82l2.44 1.41l-.75 1.3L15 16.69V13m4-5H5v11h4.67c-.43-.91-.67-1.93-.67-3a7 7 0 0 1 7-7c1.07 0 2.09.24 3 .67V8M5 21a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v6.1c1.24 1.26 2 2.99 2 4.9a7 7 0 0 1-7 7c-1.91 0-3.64-.76-4.9-2H5m11-9.85A4.85 4.85 0 0 0 11.15 16c0 2.68 2.17 4.85 4.85 4.85A4.85 4.85 0 0 0 20.85 16c0-2.68-2.17-4.85-4.85-4.85Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/UI/FormDate.vue b/src/components/UI/FormDate.vue
index 58c66137..8b3ec2d6 100644
--- a/src/components/UI/FormDate.vue
+++ b/src/components/UI/FormDate.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import Icon from '/@/components/UI/Icon.vue'
-
 interface Props {
   modelValue: string
 }
@@ -17,7 +15,6 @@ const handleInput = (event: Event) => {
 
 <template>
   <div :class="$style.container">
-    <icon name="mdi:calendar-clock" :class="$style.icon" />
     <input
       :class="$style.input"
       :data-is-blank="props.modelValue === ''"
@@ -32,7 +29,7 @@ const handleInput = (event: Event) => {
 .container {
   display: flex;
   align-items: center;
-  padding: 8px;
+  padding: 0.5rem;
   border: 1px solid $color-secondary;
   border-radius: 6px;
   &:focus-within {
@@ -44,6 +41,16 @@ const handleInput = (event: Event) => {
   &[data-is-blank='true'] {
     color: $color-secondary;
   }
+  &::-webkit-calendar-picker-indicator {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background-image: url('/icons/calendar-clock.svg');
+  }
+  &:focus::-webkit-calendar-picker-indicator {
+    background-image: url('/icons/calendar-clock_focus.svg');
+  }
 }
 .icon {
   margin-right: 0.25rem;
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index c2080b63..3919176b 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,23 +1,14 @@
 <script lang="ts" setup>
-import ContentHeader from '/@/components/Layout/ContentHeader.vue'
-import PageInfoPanels from '/@/components/Index/PageInfoPanels.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
+import FormDuration from '/@/components/UI/FormDuration.vue'
+import { ref } from 'vue'
+import { Duration } from '/@/lib/apis'
+
+const value = ref<Duration>({ since: '', until: '' })
 </script>
 
 <template>
   <page-container>
-    <content-header
-      icon-name="mdi:apps"
-      :header-texts="[{ title: 'Top', url: '/' }]"
-      detail="ポートフォリオの設定を変更します"
-      :class="$style.header"
-    />
-    <page-info-panels />
+    <form-duration v-model="value" />
   </page-container>
 </template>
-
-<style lang="scss" module>
-.header {
-  margin: 4rem 0 2rem;
-}
-</style>

From 290d2ac3aa00d679b43277b0d48c8814f7038650 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 22 Mar 2023 20:20:58 +0900
Subject: [PATCH 6/6] =?UTF-8?q?Index.vue=E3=82=92=E6=88=BB=E3=81=97?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 3919176b..c2080b63 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,14 +1,23 @@
 <script lang="ts" setup>
+import ContentHeader from '/@/components/Layout/ContentHeader.vue'
+import PageInfoPanels from '/@/components/Index/PageInfoPanels.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
-import FormDuration from '/@/components/UI/FormDuration.vue'
-import { ref } from 'vue'
-import { Duration } from '/@/lib/apis'
-
-const value = ref<Duration>({ since: '', until: '' })
 </script>
 
 <template>
   <page-container>
-    <form-duration v-model="value" />
+    <content-header
+      icon-name="mdi:apps"
+      :header-texts="[{ title: 'Top', url: '/' }]"
+      detail="ポートフォリオの設定を変更します"
+      :class="$style.header"
+    />
+    <page-info-panels />
   </page-container>
 </template>
+
+<style lang="scss" module>
+.header {
+  margin: 4rem 0 2rem;
+}
+</style>