KvcWrap

ラッパーコンポーネントです。フォーム要素やコンテンツをグループ化するために使用します。formまたはdivとして描画できます。

基本的な使い方

<template>
  <kvc-wrap>
    <kvc-field label="名前">
      <kvc-text-input v-model="name" />
    </kvc-field>
    <kvc-field label="メール">
      <kvc-text-input v-model="email" type="email" />
    </kvc-field>
  </kvc-wrap>
</template>

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

const name = ref('')
const email = ref('')
</script>

プロパティ

プロパティ	型	デフォルト	説明
tag	`'form' \| 'div'`	`'div'`	描画するHTMLタグ

イベント

イベント名	ペイロード	説明
submit	`Event`	フォーム送信時に発火（tag="form"の場合のみ）

スロット

スロット名	説明
default	コンテンツを配置するデフォルトスロット

使用例

divとして使用（デフォルト）

<template>
  <kvc-wrap>
    <kvc-field label="ユーザー名">
      <kvc-text-input v-model="username" />
    </kvc-field>
    <kvc-field label="パスワード">
      <kvc-text-input v-model="password" type="password" />
    </kvc-field>
    <kvc-button @click="handleLogin">
      ログイン
    </kvc-button>
  </kvc-wrap>
</template>

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

const username = ref('')
const password = ref('')

const handleLogin = () => {
  console.log('Login attempt:', { username: username.value, password: password.value })
}
</script>

formとして使用

<template>
  <kvc-wrap tag="form" @submit="handleSubmit">
    <kvc-field label="お名前" required>
      <kvc-text-input v-model="form.name" />
    </kvc-field>

    <kvc-field label="メールアドレス" required>
      <kvc-text-input v-model="form.email" type="email" />
    </kvc-field>

    <kvc-field label="メッセージ">
      <kvc-textarea v-model="form.message" :rows="5" />
    </kvc-field>

    <kvc-button color="save" type="submit">
      送信
    </kvc-button>
  </kvc-wrap>
</template>

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

const form = ref({
  name: '',
  email: '',
  message: ''
})

const handleSubmit = (event) => {
  event.preventDefault()
  console.log('Form submitted:', form.value)
}
</script>

複数のフィールドをグループ化

<template>
  <kvc-wrap>
    <h2>ユーザー情報</h2>
    <kvc-field label="姓">
      <kvc-text-input v-model="user.lastName" />
    </kvc-field>
    <kvc-field label="名">
      <kvc-text-input v-model="user.firstName" />
    </kvc-field>

    <h2>連絡先情報</h2>
    <kvc-field label="電話番号">
      <kvc-text-input v-model="user.phone" />
    </kvc-field>
    <kvc-field label="メールアドレス">
      <kvc-text-input v-model="user.email" type="email" />
    </kvc-field>

    <kvc-button color="save" @click="saveUser">
      保存
    </kvc-button>
  </kvc-wrap>
</template>

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

const user = ref({
  lastName: '',
  firstName: '',
  phone: '',
  email: ''
})

const saveUser = () => {
  console.log('Saving user:', user.value)
}
</script>

ネストしたレイアウト

<template>
  <kvc-wrap>
    <kvc-wrap tag="form" @submit="handleSubmit">
      <kvc-field label="タイトル">
        <kvc-text-input v-model="article.title" />
      </kvc-field>

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

      <kvc-field label="内容">
        <kvc-textarea v-model="article.content" :rows="10" />
      </kvc-field>

      <kvc-row>
        <kvc-button color="save" type="submit">
          保存
        </kvc-button>
        <kvc-button @click="handleCancel">
          キャンセル
        </kvc-button>
      </kvc-row>
    </kvc-wrap>
  </kvc-wrap>
</template>

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

const article = ref({
  title: '',
  category: '',
  content: ''
})

const categories = ref([
  { label: 'ニュース', value: 'news' },
  { label: 'ブログ', value: 'blog' },
  { label: 'チュートリアル', value: 'tutorial' }
])

const handleSubmit = (event) => {
  event.preventDefault()
  console.log('Article submitted:', article.value)
}

const handleCancel = () => {
  console.log('Cancelled')
}
</script>

TypeScript サポート

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

const props: KvcWrapProps = {
  tag: 'form'
}

スタイリング

KvcWrapコンポーネントは、kintone風のレイアウトを提供するために、内部でスペーシングやマージンを調整します。カスタムスタイルを適用する場合は、CSSクラスを追加することができます。

<template>
  <kvc-wrap class="custom-form">
    <!-- コンテンツ -->
  </kvc-wrap>
</template>

<style scoped>
.custom-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>