-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #109 from traP-jp/update-textbox
Textboxのデザイン更新に対応
- Loading branch information
Showing
5 changed files
with
104 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,28 @@ | ||
| <script setup lang="ts"> | ||
| import MaterialIcon from '@/components/MaterialIcon.vue' | ||
| import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue' | ||
| import { computed } from 'vue' | ||
| import { computed, ref } from 'vue' | ||
| import isEmail from 'validator/lib/isEmail' | ||
| import PlainTextbox from '@/components/Controls/Textbox/PlainTextbox.vue' | ||
| defineOptions({ | ||
| inheritAttrs: false | ||
| }) | ||
| const { errorMessage = '', label = '' } = defineProps<{ | ||
| disabled?: boolean | ||
| const props = defineProps<{ | ||
| 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) | ||
| const shownErrorMessage = ref<string | undefined>() | ||
| const updateError = () => { | ||
| shownErrorMessage.value = isEmailError.value | ||
| ? 'メールアドレスの形式が正しくありません。' | ||
| : props.errorMessage | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex flex-col gap-2"> | ||
| <TextboxLabel v-if="label != ''" :is-required="isRequired" :label="label" /> | ||
| <input | ||
| v-model.lazy="value" | ||
| v-bind="$attrs" | ||
| :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> | ||
| <PlainTextbox | ||
| v-bind="$attrs" | ||
| v-model="value" | ||
| :error-message="shownErrorMessage" | ||
| @blur="updateError" | ||
| /> | ||
| </template> | ||
|
|
||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,20 @@ | ||
| <script setup lang="ts"> | ||
| import MaterialIcon from '@/components/MaterialIcon.vue' | ||
| import TextboxLabel from '@/components/Controls/Textbox/TextboxLabel.vue' | ||
| import PlainTextbox from '@/components/Controls/Textbox/PlainTextbox.vue' | ||
| import { computed, ref } from 'vue' | ||
| import type { Icon } from '@/components/MaterialIcon.vue' | ||
| defineOptions({ | ||
| inheritAttrs: false | ||
| }) | ||
| 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) | ||
| const visible = ref<boolean>(false) | ||
| const rightIcon = computed<Icon>(() => (visible.value ? 'visibility_off' : 'visibility')) | ||
| const toggleVisibility = () => (visible.value = !visible.value) | ||
| </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" | ||
| v-bind="$attrs" | ||
| :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> | ||
| <PlainTextbox | ||
| displays-length | ||
| :right-icon="rightIcon" | ||
| :type="visible ? 'text' : 'password'" | ||
| @click-right="toggleVisibility" | ||
| /> | ||
| </template> | ||
|
|
||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters