Merge pull request #68 from traP-jp/textbox

Textbox

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@types/eslint__js": "^8.42.3",
     "eslint-config-prettier": "^9.1.0",
+    "validator": "^13.12.0",
     "vue": "^3.5.6",
     "vue-router": "^4.3.3"
   },
@@ -25,6 +26,7 @@
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
+    "@types/validator": "^13.12.2",
     "@vitejs/plugin-vue": "^5.1.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",

src/assets/main.css

@@ -1,5 +1,21 @@
 @import './base.css';
 
+.fontstyle-ui-title-large {
+  @apply font-primary;
+  font-size: 2.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 3.25rem;
+}
+
+.fontstyle-ui-title {
+  @apply font-primary;
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 2.25rem;
+}
+
 .fontstyle-ui-subtitle {
   @apply font-primary;
   font-size: 1.25rem;
@@ -8,10 +24,50 @@
   line-height: 1.75rem;
 }
 
+.fontstyle-ui-body {
+  @apply font-primary;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.fontstyle-ui-body-strong {
+  @apply font-primary;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.fontstyle-ui-control {
+  @apply font-primary;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
 .fontstyle-ui-control-strong {
   @apply font-primary;
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 500;
   line-height: 1.25rem;
 }
+
+.fontstyle-ui-caption {
+  @apply font-primary;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.fontstyle-ui-caption {
+  @apply font-primary;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1rem;
+}

src/components/Controls/Textbox/EmailTextbox.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
+import { computed } from 'vue'
+import isEmail from 'validator/lib/isEmail'
+
+const { errorMessage = '', label = '' } = defineProps<{
+  disabled?: boolean
+  errorMessage?: string
+  isRequired?: boolean
+  label?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+const value = defineModel<string>()
+const isEmailError = computed(() => (value.value?.length ?? 0) > 0 && !isEmail(value.value ?? ''))
+const isError = computed(() => errorMessage != '' || isEmailError.value)
+</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': !isError
+        },
+        { 'border-status-error outline outline-1 outline-status-error': isError },
+        '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="isError" class="flex items-start gap-2 pl-1 text-status-error">
+      <MaterialIcon icon="error" size="1.25rem" />
+      <span class="fontstyle-ui-control min-w-0 break-words">{{
+        isEmailError ? 'メールアドレスの形式が正しくありません' : errorMessage
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

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 { computed, ref } from 'vue'
+
+const { errorMessage = '', label = '' } = defineProps<{
+  disabled?: boolean
+  errorMessage?: string
+  isRequired?: boolean
+  label?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+const value = defineModel<string>()
+const isError = computed(() => errorMessage != '')
+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': !isError
+          },
+          { 'border-status-error outline outline-1 outline-status-error': isError },
+          '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="isError" class="flex items-start gap-2 pl-1 text-status-error">
+      <MaterialIcon icon="error" size="1.25rem" />
+      <span class="fontstyle-ui-control min-w-0 break-words">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/Controls/Textbox/PlainTextbox.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import MaterialIcon from '@/components/MaterialIcon.vue'
+import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue'
+import { computed } from 'vue'
+
+const { errorMessage = '', label = '' } = defineProps<{
+  disabled?: boolean
+  errorMessage?: string
+  isRequired?: boolean
+  label?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+const value = defineModel<string>()
+const isError = computed(() => errorMessage != '')
+</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': !isError
+        },
+        { 'border-status-error outline outline-1 outline-status-error': isError },
+        '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="isError" class="flex items-start gap-2 pl-1 text-status-error">
+      <MaterialIcon icon="error" size="1.25rem" />
+      <span class="fontstyle-ui-control min-w-0 break-words">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/Controls/Textbox/TextboxLabel.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { isRequired = false } = defineProps<{
+  isRequired?: boolean
+  label: string
+}>()
+</script>
+
+<template>
+  <span class="flex gap-1 px-1">
+    <span class="fontstyle-ui-control text-text-secondary">{{ label }}</span>
+    <span v-if="isRequired" class="fontstyle-ui-control text-status-error">*</span>
+  </span>
+</template>
+
+<style scoped></style>

src/components/MaterialIcon.vue

@@ -5,6 +5,7 @@ export type Icon =
   | 'code'
   | 'edit'
   | 'edit_note'
+  | 'error'
   | 'format_list_bulleted'
   | 'id_card'
   | 'info'
@@ -13,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

@@ -16,6 +16,7 @@ export default {
       'text-secondary': '#6c6c6c',
       'text-tertiary': '#9a9a9a',
       'text-inv-primary': '#f0f0f0',
+      'status-error': '#e02a2a',
       'red': '#ff0000',
       'white': '#ffffff',
     },
@@ -24,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'