コンポーネント分割・BasicTextboxを廃止・autocomplete追加

traP-jp · Nov 19, 2024 · e8851fc · e8851fc
1 parent c1deafe
commit e8851fc
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 53 deletions.
diff --git a/src/components/Controls/Textbox/BasicTextbox.vue b/src/components/Controls/Textbox/BasicTextbox.vue
diff --git a/src/components/Controls/Textbox/EmailTextbox.vue b/src/components/Controls/Textbox/EmailTextbox.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
+
+const { errorMessage = '', label = '' } = defineProps<{
+  disabled?: boolean
+  errorMessage?: string
+  isRequired?: boolean
+  label?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+const value = defineModel<string>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <TextboxLabel v-if="label != ''" :is-required="isRequired" :label="label" />
+    <input
+      v-model="value"
+      :autocomplete="autocomplete"
+      :class="[
+        {
+          'border-border-secondary outline-text-primary focus:border-text-primary':
+            errorMessage == ''
+        },
+        { 'border-status-error outline outline-1 outline-status-error': errorMessage != '' },
+        'fontstyle-ui-body w-full rounded border bg-background-primary py-1 pl-4 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+      ]"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      type="email"
+    />
+    <div v-if="errorMessage != ''" class="flex items-start gap-2 pl-1 text-status-error">
+      <MaterialIcon icon="error" size="1.25rem" />
+      <span class="fontstyle-ui-control">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/Controls/Textbox/PasswordTextbox.vue b/src/components/Controls/Textbox/PasswordTextbox.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
+import { ref } from 'vue'
+
+const { errorMessage = '', label = '' } = defineProps<{
+  disabled?: boolean
+  errorMessage?: string
+  isRequired?: boolean
+  label?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+const value = defineModel<string>()
+const passwordShown = ref<boolean>(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <TextboxLabel v-if="label != ''" :is-required="isRequired" :label="label" />
+    <span class="relative">
+      <input
+        v-model="value"
+        :class="[
+          {
+            'border-border-secondary outline-text-primary focus:border-text-primary':
+              errorMessage == ''
+          },
+          { 'border-status-error outline outline-1 outline-status-error': errorMessage != '' },
+          'fontstyle-ui-body w-full rounded border bg-background-primary py-1 pl-4 pr-11.5 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+        ]"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="passwordShown ? 'text' : 'password'"
+        :autocomplete="autocomplete"
+      />
+      <span
+        class="absolute right-4 top-1.75 select-none"
+        @click="() => (passwordShown = !passwordShown)"
+      >
+        <MaterialIcon :icon="passwordShown ? 'visibility_off' : 'visibility'" size="1.25rem" />
+      </span>
+    </span>
+    <div v-if="errorMessage != ''" class="flex items-start gap-2 pl-1 text-status-error">
+      <MaterialIcon icon="error" size="1.25rem" />
+      <span class="fontstyle-ui-control">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/...nts/Controls/Textbox/DecoratedTextbox.vue → ...ponents/Controls/Textbox/PlainTextbox.vue b/...nts/Controls/Textbox/DecoratedTextbox.vue → ...ponents/Controls/Textbox/PlainTextbox.vue
@@ -1,32 +1,36 @@
 <script setup lang="ts">
-import BasicTextbox from '@/components/Controls/Textbox/BasicTextbox.vue'
 import MaterialIcon from '@/components/MaterialIcon.vue'
 import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
 
 const { errorMessage = '', label = '' } = defineProps<{
   disabled?: boolean
   errorMessage?: string
-  isPassword?: boolean
   isRequired?: boolean
   label?: string
   placeholder?: string
+  autocomplete?: string
 }>()
-const value = defineModel<string>('value')
+const value = defineModel<string>()
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <TextboxLabel v-if="label != ''" :is-required="isRequired" :label="label" />
-    <div>
-      <BasicTextbox
-        v-model="value"
-        class="w-full"
-        :disabled
-        :error="errorMessage != ''"
-        :is-password="isPassword"
-        :placeholder="placeholder"
-      />
-    </div>
+    <input
+      v-model="value"
+      :autocomplete="autocomplete"
+      :class="[
+        {
+          'border-border-secondary outline-text-primary focus:border-text-primary':
+            errorMessage == ''
+        },
+        { 'border-status-error outline outline-1 outline-status-error': errorMessage != '' },
+        'fontstyle-ui-body w-full rounded border bg-background-primary py-1 pl-4 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+      ]"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      type="text"
+    />
     <div v-if="errorMessage != ''" class="flex items-start gap-2 pl-1 text-status-error">
       <MaterialIcon icon="error" size="1.25rem" />
       <span class="fontstyle-ui-control">{{ errorMessage }}</span>