From 67d2bc0078739da9c80dcd6b86dd4324f21cd85e Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 17 Oct 2022 22:15:21 +0900
Subject: [PATCH 1/4] add search form component

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

diff --git a/src/components/UI/FormSearch.vue b/src/components/UI/FormSearch.vue
new file mode 100644
index 00000000..848b0148
--- /dev/null
+++ b/src/components/UI/FormSearch.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+
+interface Props {
+  modelValue: string
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: ''
+})
+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">
+    <div :class="$style.searchIcon">
+      <icon name="mdi:magnify" :class="$style.icon" />
+    </div>
+    <input
+      :class="$style.input"
+      :placeholder="props.placeholder"
+      :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;
+  &::placeholder {
+    color: $color-secondary;
+  }
+}
+
+.searchIcon {
+  margin-right: 4px;
+  color: $color-secondary;
+  .container:focus-within & {
+    color: $color-primary;
+  }
+}
+
+.icon {
+  display: flex;
+}
+</style>

From cd50ee0b9c457c2451859c02def166e1404ce982 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 19 Oct 2022 21:26:30 +0900
Subject: [PATCH 2/4] add icon prop

---
 src/components/UI/FormInput.vue  | 11 ++++---
 src/components/UI/FormSearch.vue | 50 +++++---------------------------
 2 files changed, 14 insertions(+), 47 deletions(-)

diff --git a/src/components/UI/FormInput.vue b/src/components/UI/FormInput.vue
index 5d1ec02a..6e4f2f19 100644
--- a/src/components/UI/FormInput.vue
+++ b/src/components/UI/FormInput.vue
@@ -6,14 +6,14 @@ interface Props {
   modelValue: string
   placeholder?: string
   limit?: number
-  hasAtmark?: boolean
+  icon?: 'magnify' | 'at'
   hasAnchor?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   placeholder: '',
   limit: undefined,
-  hasAtmark: false,
+  icon: undefined,
   hasAnchor: false
 })
 const emit = defineEmits<{
@@ -40,7 +40,9 @@ const handleInput = (event: Event) => {
 
 <template>
   <div :class="$style.container" :data-has-anchor="props.hasAnchor">
-    <span v-if="props.hasAtmark" :class="$style.atmark"> @ </span>
+    <div v-if="props.icon !== undefined" :class="$style.iconContainer">
+      <icon :name="`mdi:${props.icon}`" :icon="$style.icon" />
+    </div>
     <input
       :class="$style.input"
       :placeholder="props.placeholder"
@@ -80,7 +82,8 @@ const handleInput = (event: Event) => {
   flex-grow: 1;
 }
 
-.atmark {
+.iconContainer {
+  display: flex;
   margin-right: 4px;
   color: $color-secondary;
   .container:focus-within & {
diff --git a/src/components/UI/FormSearch.vue b/src/components/UI/FormSearch.vue
index 848b0148..aa626432 100644
--- a/src/components/UI/FormSearch.vue
+++ b/src/components/UI/FormSearch.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Icon from '/@/components/UI/Icon.vue'
+import FormInput from '/@/components/UI/FormInput.vue'
 
 interface Props {
   modelValue: string
@@ -19,47 +19,11 @@ const handleInput = (event: Event) => {
 </script>
 
 <template>
-  <div :class="$style.container">
-    <div :class="$style.searchIcon">
-      <icon name="mdi:magnify" :class="$style.icon" />
-    </div>
-    <input
-      :class="$style.input"
-      :placeholder="props.placeholder"
-      :value="props.modelValue"
-      @input="handleInput"
-    />
-  </div>
+  <form-input
+    icon="magnify"
+    :model-value="props.modelValue"
+    @input="handleInput"
+  />
 </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;
-  &::placeholder {
-    color: $color-secondary;
-  }
-}
-
-.searchIcon {
-  margin-right: 4px;
-  color: $color-secondary;
-  .container:focus-within & {
-    color: $color-primary;
-  }
-}
-
-.icon {
-  display: flex;
-}
-</style>
+<style module lang="scss"></style>

From 758bd7f3a851e9ee235e6944d9095f8a01a1ce58 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 19 Oct 2022 22:43:37 +0900
Subject: [PATCH 3/4] remove component

---
 src/components/UI/FormSearch.vue | 29 -----------------------------
 1 file changed, 29 deletions(-)
 delete mode 100644 src/components/UI/FormSearch.vue

diff --git a/src/components/UI/FormSearch.vue b/src/components/UI/FormSearch.vue
deleted file mode 100644
index aa626432..00000000
--- a/src/components/UI/FormSearch.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-import FormInput from '/@/components/UI/FormInput.vue'
-
-interface Props {
-  modelValue: string
-  placeholder?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: ''
-})
-const emit = defineEmits<{
-  (e: 'update:modelValue', modelValue: string): void
-}>()
-
-const handleInput = (event: Event) => {
-  emit('update:modelValue', (event.target as HTMLInputElement).value)
-}
-</script>
-
-<template>
-  <form-input
-    icon="magnify"
-    :model-value="props.modelValue"
-    @input="handleInput"
-  />
-</template>
-
-<style module lang="scss"></style>

From 7bbc89db8491ae2e3f68f139fd8f3ebae67bca44 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 26 Oct 2022 19:07:26 +0900
Subject: [PATCH 4/4] use typeof & refactor

---
 src/components/UI/FormInput.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/UI/FormInput.vue b/src/components/UI/FormInput.vue
index 6e4f2f19..84f7f538 100644
--- a/src/components/UI/FormInput.vue
+++ b/src/components/UI/FormInput.vue
@@ -20,9 +20,11 @@ const emit = defineEmits<{
   (e: 'update:modelValue', modelValue: string): void
 }>()
 
-const isExceeded = computed(
-  () => props.limit && [...props.modelValue].length > props.limit
-)
+//Unicode Codepoint数でカウント
+const textLength = computed(() => [...props.modelValue].length)
+
+const isExceeded = computed(() => props.limit && textLength.value > props.limit)
+
 const isValidLink = computed(() => {
   let url
   try {
@@ -40,7 +42,7 @@ const handleInput = (event: Event) => {
 
 <template>
   <div :class="$style.container" :data-has-anchor="props.hasAnchor">
-    <div v-if="props.icon !== undefined" :class="$style.iconContainer">
+    <div v-if="typeof props.icon !== 'undefined'" :class="$style.iconContainer">
       <icon :name="`mdi:${props.icon}`" :icon="$style.icon" />
     </div>
     <input
@@ -50,7 +52,7 @@ const handleInput = (event: Event) => {
       @input="handleInput"
     />
     <div v-if="limit" :class="$style.count" :data-exceeded="isExceeded">
-      {{ [...props.modelValue].length }}/{{ props.limit }}
+      {{ textLength }}/{{ props.limit }}
     </div>
     <div
       v-if="props.hasAnchor"
@@ -80,6 +82,9 @@ const handleInput = (event: Event) => {
 }
 .input {
   flex-grow: 1;
+  &::placeholder {
+    color: $color-secondary;
+  }
 }
 
 .iconContainer {