KvcField

フィールドラッパーコンポーネントです。ラベル、入力フィールド、エラーメッセージなどを統一されたレイアウトで表示します。

基本的な使い方

<template>
  <kvc-field label="ユーザー名">
    <kvc-text-input v-model="username" />
  </kvc-field>
</template>

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

const username = ref('')
</script>

プロパティ

プロパティ型デフォルト説明
labelstring-フィールドのラベル
requiredbooleanfalse必須マーク（*）を表示
errorstring-エラーメッセージ
helpstring-ヘルプテキスト

スロット

スロット名説明
default入力コンポーネントを配置するデフォルトスロット
labelラベル部分をカスタマイズするスロット

使用例

基本的な使用

<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>

必須フィールド

<template>
  <kvc-wrap>
    <kvc-field label="会社名" required>
      <kvc-text-input v-model="companyName" />
    </kvc-field>

    <kvc-field label="担当者名" required>
      <kvc-text-input v-model="contactName" />
    </kvc-field>

    <kvc-field label="電話番号">
      <kvc-text-input v-model="phone" />
    </kvc-field>
  </kvc-wrap>
</template>

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

const companyName = ref('')
const contactName = ref('')
const phone = ref('')
</script>

エラーメッセージの表示

<template>
  <kvc-wrap>
    <kvc-field
      label="メールアドレス"
      required
      :error="emailError"
    >
      <kvc-text-input
        v-model="email"
        type="email"
        @blur="validateEmail"
      />
    </kvc-field>

    <kvc-field
      label="パスワード"
      required
      :error="passwordError"
    >
      <kvc-text-input
        v-model="password"
        type="password"
        @blur="validatePassword"
      />
    </kvc-field>

    <kvc-button color="save" @click="handleSubmit">
      登録
    </kvc-button>
  </kvc-wrap>
</template>

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

const email = ref('')
const password = ref('')
const emailError = ref('')
const passwordError = ref('')

const validateEmail = () => {
  if (!email.value) {
    emailError.value = 'メールアドレスを入力してください'
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    emailError.value = '有効なメールアドレスを入力してください'
  } else {
    emailError.value = ''
  }
}

const validatePassword = () => {
  if (!password.value) {
    passwordError.value = 'パスワードを入力してください'
  } else if (password.value.length < 8) {
    passwordError.value = 'パスワードは8文字以上で入力してください'
  } else {
    passwordError.value = ''
  }
}

const handleSubmit = () => {
  validateEmail()
  validatePassword()

  if (!emailError.value && !passwordError.value) {
    console.log('Form submitted:', { email: email.value, password: password.value })
  }
}
</script>

ヘルプテキストの表示

<template>
  <kvc-wrap>
    <kvc-field
      label="ユーザーID"
      required
      help="半角英数字とアンダースコアのみ使用できます"
    >
      <kvc-text-input v-model="userId" />
    </kvc-field>

    <kvc-field
      label="表示名"
      help="公開プロフィールに表示される名前です"
    >
      <kvc-text-input v-model="displayName" />
    </kvc-field>
  </kvc-wrap>
</template>

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

const userId = ref('')
const displayName = ref('')
</script>

様々な入力コンポーネントとの組み合わせ

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

    <kvc-field label="優先度">
      <kvc-radio v-model="priority" :items="priorities" />
    </kvc-field>

    <kvc-field label="タグ">
      <kvc-checkbox v-model="tags" :items="tagItems" />
    </kvc-field>

    <kvc-field label="期限日">
      <kvc-date-picker v-model="dueDate" />
    </kvc-field>

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

    <kvc-field label="添付ファイル">
      <kvc-file-select v-model="attachments" />
    </kvc-field>
  </kvc-wrap>
</template>

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

const category = ref('')
const categories = ref([
  { label: 'バグ', value: 'bug' },
  { label: '機能', value: 'feature' },
  { label: '改善', value: 'improvement' }
])

const priority = ref('medium')
const priorities = ref([
  { label: '高', value: 'high' },
  { label: '中', value: 'medium' },
  { label: '低', value: 'low' }
])

const tags = ref([])
const tagItems = ref([
  { label: '緊急', value: 'urgent' },
  { label: '重要', value: 'important' },
  { label: 'レビュー必要', value: 'needs-review' }
])

const dueDate = ref('')
const description = ref('')
const attachments = ref([])
</script>

カスタムラベル

<template>
  <kvc-field>
    <template #label>
      <span class="custom-label">
        カスタムラベル
        <span class="badge">New</span>
      </span>
    </template>
    <kvc-text-input v-model="value" />
  </kvc-field>
</template>

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

const value = ref('')
</script>

<style scoped>
.custom-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  background-color: #3498db;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>

スタイリング

KvcFieldは、kintone風のフィールドレイアウトを提供します。カスタムスタイルを適用する場合：

<template>
  <kvc-field label="フィールド" class="custom-field">
    <kvc-text-input v-model="value" />
  </kvc-field>
</template>

<style scoped>
.custom-field {
  margin-bottom: 20px;
}
</style>

TypeScript サポート

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

const props: KvcFieldProps = {
  label: 'フィールド名',
  required: true,
  error: 'エラーメッセージ',
  help: 'ヘルプテキスト'
}
最終更新:
Contributors: k.kato