Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<BaseRequiredField
is="v-combobox"
:model-value="modelValue"
@update:model-value="$emit('update:modelValue', $event)"
:label-key="labelKey"
:label="label"
:required="required"
:item-title="itemTitle"
:item-value="itemValue"
:return-object="false"
:items="items"
v-bind="$attrs"
>
<template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}"></slot>
</template>
</BaseRequiredField>
</template>
<script setup lang="ts">
// region import // 各種ライブラリ・DI対象・ローカルコンポーネント・型の import をまとめる
import BaseRequiredField from '@/components/atoms/BaseRequiredField.vue'
// endregion import
// region type // このファイル内でのみ使う型定義（interface, type alias など）
defineOptions({ name: 'RequiredComboBox' })
// endregion type
// region i18n // useI18n などを初期化し、t() / d() を取り出す
// endregion i18n
// region router // useRouter / useRoute など、画面遷移やクエリ取得に関する処理
// endregion router
// region store // Pinia の useXxxStore を読み込み、状態/アクションを利用
// endregion store
// region props // defineProps による外部から受け取る値の定義
const props = withDefaults(defineProps<{
modelValue?: string | number | null
items: Array<any>
labelKey?: string
label?: string
required?: boolean
itemTitle?: string
itemValue?: string
}>(), {
itemTitle: 'label',
itemValue: 'value',
})
// endregion props
// region emits // defineEmits による親へ送るイベント定義
const emit = defineEmits<{
(e: 'update:modelValue', v: string | number | null): void
}>()
// endregion emits
// region slots // スロットの型情報や利用（useSlots / defineSlots）
// endregion slots
// region constant // このコンポーネント専用の定数/enum/テーブルなど（不変の値）
// endregion constant
// region state // ref / reactive / useForm など、変化する状態を定義
// endregion state
// region computed // 派生状態（computed）をまとめる
// 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 から呼ばれるイベントハンドラ
// 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>
|