パスワード表示に対応

src/components/Controls/Textbox/BasicTextbox.vue

@@ -1,28 +1,40 @@
 <script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import { ref } from 'vue'
+
 const {
   disabled = false,
   error = false,
-  placeholder = ''
+  placeholder = '',
+  isPassword = false
 } = defineProps<{
   disabled?: boolean
   error?: boolean
   placeholder?: string
+  isPassword?: boolean
 }>()
 const value = defineModel<string>('value')
+const passwordShown = ref(false)
 </script>
 
 <template>
-  <input
-    v-model="value"
-    :class="[
-      { 'border-border-secondary outline-text-primary focus:border-text-primary': !error },
-      { 'border-status-error outline outline-1 outline-status-error': error },
-      'fontstyle-ui-body max-w-full rounded border bg-background-primary px-4 py-1 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
-    ]"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    type="text"
-  />
+  <div class="relative inline-block">
+    <input
+      v-model="value"
+      :class="[
+        { 'border-border-secondary outline-text-primary focus:border-text-primary': !error },
+        { 'border-status-error outline outline-1 outline-status-error': error },
+        { 'pr-11.5': isPassword },
+        'fontstyle-ui-body max-w-full rounded border bg-background-primary px-4 py-1 text-text-primary placeholder:text-text-tertiary focus:outline focus:outline-1 disabled:bg-background-secondary'
+      ]"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :type="isPassword && !passwordShown ? 'password' : 'text'"
+    />
+    <span v-if="isPassword" class="absolute right-4 top-1.75 select-none" @click="() => passwordShown = !passwordShown">
+      <MaterialIcon :icon="passwordShown ? 'visibility_off' : 'visibility'" size="1.25rem"/>
+    </span>
+  </div>
 </template>
 
 <style scoped></style>

src/components/Controls/Textbox/DecoratedTextbox.vue

@@ -6,6 +6,7 @@ import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
 const { errorMessage = '', label = '' } = defineProps<{
   disabled?: boolean
   errorMessage?: string
+  isPassword?: boolean
   isRequired?: boolean
   label?: string
   placeholder?: string
@@ -22,6 +23,7 @@ const value = defineModel<string>('value')
         class="w-full"
         :disabled
         :error="errorMessage != ''"
+        :is-password="isPassword"
         :placeholder="placeholder"
       />
     </div>

src/components/MaterialIcon.vue

@@ -14,6 +14,8 @@ export type Icon =
   | 'open_in_new'
   | 'person'
   | 'settings'
+  | 'visibility'
+  | 'visibility_off'
 const { size = '1.5rem', isFilled = false } = defineProps<{
   icon: Icon
   size?: string

tailwind.config.js

@@ -25,9 +25,11 @@ export default {
     },
     extend: {
       spacing: {
-        '7.5': '1.875rem',
         '1.625': '0.40625rem',
+        '1.75': '0.4375rem',
         '4.5': '1.125rem',
+        '7.5': '1.875rem',
+        '11.5': '2.875rem',
         '27': '6.75rem',
         '50': '12.5rem',
         '62.5': '15.625rem'