KvcDialog

モーダルダイアログコンポーネントです。確認ダイアログやフォーム入力用のモーダルウィンドウを表示できます。

ライブデモ

基本的な使い方

<template>
  <kvc-button @click="showDialog = true">
    ダイアログを開く
  </kvc-button>
  <kvc-dialog v-model="showDialog" title="ダイアログタイトル">
    <p>ダイアログの内容</p>
  </kvc-dialog>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(false)
</script>

プロパティ

プロパティ型デフォルト説明
modelValuebooleanfalseダイアログの表示状態（v-model）
titlestring'Title'ダイアログのタイトル
widthstring | number-ダイアログの幅
showIconbooleanfalseアイコンを表示するかどうか
iconType'info' | 'warning' | 'error' | 'success' | 'question''info'アイコンの種類
cancelTextstring'Cancel'キャンセルボタンのテキスト
confirmTextstring'OK'確認ボタンのテキスト
showCancelbooleantrueキャンセルボタンを表示するかどうか
showConfirmbooleantrue確認ボタンを表示するかどうか

イベント

イベント名ペイロード説明
update:modelValuebooleanダイアログの表示状態が変更されたときに発火
cancel-キャンセルボタンがクリックされたときに発火
confirm-確認ボタンがクリックされたときに発火
close-ダイアログが閉じられたときに発火

スロット

スロット名説明
defaultダイアログの内容を配置するデフォルトスロット

使用例

基本的な使用

<template>
  <kvc-button @click="openDialog">
    ダイアログを開く
  </kvc-button>

  <kvc-dialog v-model="isOpen" title="お知らせ">
    <p>これは重要なお知らせです。</p>
    <template #footer>
      <kvc-row>
        <kvc-button color="save" @click="closeDialog">
          OK
        </kvc-button>
      </kvc-row>
    </template>
  </kvc-dialog>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)

const openDialog = () => {
  isOpen.value = true
}

const closeDialog = () => {
  isOpen.value = false
}
</script>

確認ダイアログ

<template>
  <kvc-button color="error" @click="showConfirm = true">
    削除
  </kvc-button>

  <kvc-dialog v-model="showConfirm" title="削除の確認" width="400px">
    <p>本当に削除しますか？この操作は取り消せません。</p>
    <template #footer>
      <kvc-row>
        <kvc-button color="error" @click="handleDelete">
          削除
        </kvc-button>
        <kvc-button @click="showConfirm = false">
          キャンセル
        </kvc-button>
      </kvc-row>
    </template>
  </kvc-dialog>
</template>

<script setup>
import { ref } from 'vue'

const showConfirm = ref(false)

const handleDelete = () => {
  console.log('Deleted')
  showConfirm.value = false
}
</script>

フォーム入力ダイアログ

<template>
  <kvc-button color="save" @click="openFormDialog">
    新規作成
  </kvc-button>

  <kvc-dialog v-model="showForm" title="新規アイテム作成" width="800px">
      <kvc-field label="タイトル" required>
        <kvc-text-input v-model="formData.title" />
      </kvc-field>

      <kvc-field label="カテゴリ" required>
        <kvc-dropdown v-model="formData.category" :items="categories" />
      </kvc-field>

      <kvc-field label="説明">
        <kvc-textarea v-model="formData.description" :rows="5" />
      </kvc-field>

      <kvc-field label="開始日">
        <kvc-date-picker v-model="formData.startDate" />
      </kvc-field>

    <template #footer>
      <kvc-row>
        <kvc-button color="save" @click="handleSubmit">
          作成
        </kvc-button>
        <kvc-button @click="closeFormDialog">
          キャンセル
        </kvc-button>
      </kvc-row>
    </template>
  </kvc-dialog>
</template>

<script setup>
import { ref } from 'vue'

const showForm = ref(false)

const formData = ref({
  title: '',
  category: '',
  description: '',
  startDate: ''
})

const categories = ref([
  { label: 'カテゴリA', value: 'a' },
  { label: 'カテゴリB', value: 'b' },
  { label: 'カテゴリC', value: 'c' }
])

const openFormDialog = () => {
  showForm.value = true
}

const closeFormDialog = () => {
  showForm.value = false
  // フォームをリセット
  formData.value = {
    title: '',
    category: '',
    description: '',
    startDate: ''
  }
}

const handleSubmit = () => {
  console.log('Submitted:', formData.value)
  closeFormDialog()
}
</script>

詳細表示ダイアログ

<template>
  <kvc-button @click="openDetail(item)">
    詳細を見る
  </kvc-button>

  <kvc-dialog v-model="showDetail" title="アイテム詳細" width="700px">
    <div v-if="selectedItem">
      <kvc-field label="ID">
        <p>{{ selectedItem.id }}</p>
      </kvc-field>

      <kvc-field label="タイトル">
        <p>{{ selectedItem.title }}</p>
      </kvc-field>

      <kvc-field label="作成日">
        <p>{{ selectedItem.createdAt }}</p>
      </kvc-field>

      <kvc-field label="ステータス">
        <p>{{ selectedItem.status }}</p>
      </kvc-field>

      <kvc-field label="説明">
        <p>{{ selectedItem.description }}</p>
      </kvc-field>
    </div>

    <template #footer>
      <kvc-row>
        <kvc-button color="save" @click="handleEdit">
          編集
        </kvc-button>
        <kvc-button @click="showDetail = false">
          閉じる
        </kvc-button>
      </kvc-row>
    </template>
  </kvc-dialog>
</template>

<script setup>
import { ref } from 'vue'

const showDetail = ref(false)
const selectedItem = ref(null)

const item = {
  id: '123',
  title: 'サンプルアイテム',
  createdAt: '2024-01-15',
  status: '進行中',
  description: 'これはサンプルの説明文です。'
}

const openDetail = (item) => {
  selectedItem.value = item
  showDetail.value = true
}

const handleEdit = () => {
  console.log('Edit:', selectedItem.value)
  showDetail.value = false
}
</script>

外側クリックで閉じない

<template>
  <kvc-button @click="showImportant = true">
    重要な通知
  </kvc-button>

  <kvc-dialog
    v-model="showImportant"
    title="重要な通知"
    :close-on-click-outside="false"
  >
    <p>この通知は必ず確認してください。</p>
    <p>外側をクリックしても閉じません。</p>

    <template #footer>
      <kvc-row>
        <kvc-button color="save" @click="handleAcknowledge">
          確認しました
        </kvc-button>
      </kvc-row>
    </template>
  </kvc-dialog>
</template>

<script setup>
import { ref } from 'vue'

const showImportant = ref(false)

const handleAcknowledge = () => {
  console.log('Acknowledged')
  showImportant.value = false
}
</script>

ダイアログのサイズ調整

<template>
  <kvc-row>
    <kvc-button @click="showSmall = true">
      小サイズ
    </kvc-button>
    <kvc-button @click="showMedium = true">
      中サイズ
    </kvc-button>
    <kvc-button @click="showLarge = true">
      大サイズ
    </kvc-button>
  </kvc-row>

  <kvc-dialog v-model="showSmall" title="小サイズ" width="400px">
    <p>小さいダイアログです。</p>
  </kvc-dialog>

  <kvc-dialog v-model="showMedium" title="中サイズ" width="600px">
    <p>中サイズのダイアログです。</p>
  </kvc-dialog>

  <kvc-dialog v-model="showLarge" title="大サイズ" width="900px">
    <p>大きいダイアログです。</p>
  </kvc-dialog>
</template>

<script setup>
import { ref } from 'vue'

const showSmall = ref(false)
const showMedium = ref(false)
const showLarge = ref(false)
</script>

TypeScript サポート

import type { KvcDialogProps } from '@zygapp/kintone-vue3-component'

const props: KvcDialogProps = {
  modelValue: false,
  title: 'ダイアログタイトル',
  width: '600px',
  closeOnClickOutside: true
}

スタイリング

カスタムスタイルを適用する場合：

<template>
  <kvc-dialog v-model="show" title="カスタムダイアログ" class="custom-dialog">
    <p>内容</p>
  </kvc-dialog>
</template>

<style scoped>
.custom-dialog {
  /* カスタムスタイル */
}
</style>
最終更新:
Contributors: k.kato