日付コンポーネントの実装

src/components/UI/FormDate.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+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">
+    <input
+      :class="$style.input"
+      :data-is-blank="props.modelValue === ''"
+      type="datetime-local"
+      :value="props.modelValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<style module lang="scss">
+.container {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid $color-secondary;
+  border-radius: 6px;
+  &:focus-within {
+    border-color: $color-primary;
+  }
+}
+.input {
+  flex-grow: 1;
+  &[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;
+  color: $color-secondary;
+  .container:focus-within & {
+    color: $color-primary;
+  }
+}
+</style>

src/components/UI/FormDuration.vue

@@ -0,0 +1,77 @@
+<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>()
+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">
+      <div :class="$style.sinceHead">
+        <p :class="$style.head">～から</p>
+        <required v-if="sinceRequired" />
+      </div>
+      <form-date
+        :model-value="modelValue.since"
+        @update:model-value="handleInput($event, 'since')"
+      />
+    </div>
+    <p :class="$style.wave">～</p>
+    <div :class="$style.formDate">
+      <div :class="$style.untilHead">
+        <p :class="$style.head">～まで</p>
+      </div>
+      <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;
+}
+.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;
+}
+.head {
+  font-size: 0.75rem;
+}
+</style>

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>