All files / src/components/organisms/profile ContactFormModal.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
 
1x
 
1x
1x
 
 
1x
1x
1x
1x
1x
 
1x
 
 
 
 
 
1x
1x
1x
 
 
 
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
 
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
 
  <AppModal v-model="isOpen">
 
    <template #title>
      {{ t('ui.page.profile.contact.root.title') }}
    </template>
 
    <ContactForm
      :relationship-type-items="relationshipTypeItems"
      :editing-contact="editingContact"
      @submitted="handleSubmitted"
    />
 
  </AppModal>
 
</template>
 
<script setup lang="ts">
// region import             // 各種ライブラリ・DI対象・ローカルコンポーネント・型の import をまとめる
import { computed, defineProps } from 'vue'
import { useI18n } from 'vue-i18n'
import AppModal from '@/components/organisms/common/AppModal.vue'
import {
  type Contact,
  type RelationshipType,
} from '@/types/models'
import ContactForm from './ContactForm.vue'
// endregion import
 
// region type               // このファイル内でのみ使う型定義（interface, type alias など）
// endregion type
 
// region i18n               // useI18n などを初期化し、t() / d() を取り出す
const { t } = useI18n()
// endregion i18n
 
// region router             // useRouter / useRoute など、画面遷移やクエリ取得に関する処理
// endregion router
 
// region store              // Pinia の useXxxStore を読み込み、状態/アクションを利用
// endregion store
 
// region props              // defineProps による外部から受け取る値の定義
const props = defineProps<{
  modelValue: boolean
  editingContact: Contact | null
  relationshipTypeItems: RelationshipType[]
}>()
// endregion props
 
// region emits              // defineEmits による親へ送るイベント定義
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'submitted'): void
}>()
// endregion emits
 
// region slots              // スロットの型情報や利用（useSlots / defineSlots）
// endregion slots
 
// region constant           // このコンポーネント専用の定数/enum/テーブルなど（不変の値）
// endregion constant
 
// region state              // ref / reactive / useForm など、変化する状態を定義
// endregion state
 
// region computed           // 派生状態（computed）をまとめる
const isOpen = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value),
})
// endregion computed
 
// region validation         // Zod / Yup / Vee-Validate 等のスキーマ・ルール・フォーム設定
// endregion validation
 
// region permission         // 権限による UI/操作の可否を判定するロジック（isEditable など）
// endregion permission
 
// region api                // Axios クライアントを使った通信処理（fetchXxx / updateXxx など）
// endregion api
 
// region watcher            // watch / watchEffect など、状態の変化に応じた処理
// endregion watcher
 
// region effect             // watcher 以外の副作用（外部ライブラリ初期化・setInterval 等）
// endregion effect
 
// region handler            // ボタン押下・フォーム送信など UI から呼ばれるイベントハンドラ
const close = () => {
  emit('update:modelValue', false)
}
 
const handleSubmitted = () => {
  emit('submitted')
  close()
}
// endregion handler
 
// region lifecycle          // onMounted / onUnmounted / onBeforeRouteLeave などのライフサイクル処理
// endregion lifecycle
 
// region provide-inject     // コンポーネント間で共有する provide / inject の定義
// endregion provide-inject
 
// region expose             // defineExpose により外部へ公開するメソッドやプロパティ
// endregion expose
 
// region devtool            // 開発環境専用のログ出力・debug 情報など（import.meta.env.DEV）
// endregion devtool
 
// region test-id            // data-testid 用の定数定義など（ユニット/E2E テスト向け）
// endregion test-id
</script>
 
<style scoped>
 
</style>