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 110 111 112 113 114 115 116 117 | 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 2x 1x | <template>
<v-btn
:icon="icon"
:color="currentStyle.color"
:variant="variant"
:size="size"
:rounded="rounded"
@click="$emit('click')"
/>
</template>
<script setup lang="ts">
// region import // 各種ライブラリ・DI対象・ローカルコンポーネント・型の import をまとめる
import {computed, defineProps} from 'vue';
// endregion import
// region type // このファイル内でのみ使う型定義（interface, type alias など）
// 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 = defineProps<{
icon: string
color?: string
variant?: 'text' | 'flat' | 'outlined' | 'tonal' | 'plain'
size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large'
rounded?: string | number | boolean
role: keyof typeof styleMap
}>()
// endregion props
// region emits // defineEmits による親へ送るイベント定義
defineEmits(['click'])
// endregion emits
// region slots // スロットの型情報や利用（useSlots / defineSlots）
// endregion slots
// region constant // このコンポーネント専用の定数/enum/テーブルなど（不変の値）
const styleMap = {
ok: { color: 'primary', icon: '' },
save: { color: 'primary', icon: '' },
update: { color: 'primary', icon: '' },
register: { color: 'primary', icon: '' },
create: { color: 'primary', icon: 'mdi-plus' },
add: { color: 'primary', icon: 'mdi-plus' },
edit: { color: 'secondary', icon: 'mdi-pencil' },
cancel: { color: 'secondary', icon: 'mdi-cancel' },
close: { color: 'secondary', icon: 'mdi-close' },
reset: { color: 'warning', icon: 'mdi-reset' },
delete: { color: 'error', icon: 'mdi-delete' },
reload: { color: 'secondary', icon: 'mdi-refresh' },
logout: { color: 'secondary', icon: 'mdi-logout' },
} as const
// endregion constant
// region state // ref / reactive / useForm など、変化する状態を定義
// endregion state
// region computed // 派生状態（computed）をまとめる
const currentStyle = computed(() => {
return styleMap[props.role]
})
// 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>
|