使い方

プラグインとして登録

最も簡単な方法は、プラグインとしてグローバルに登録することです。

import { createApp } from 'vue'
import KintoneVueComponent from '@zygapp/kintone-vue3-component'
import '@zygapp/kintone-vue3-component/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(KintoneVueComponent)
app.mount('#app')

この方法で登録すると、すべてのコンポーネントがグローバルに使用可能になります。

個別インポート

必要なコンポーネントだけをインポートすることもできます。

import { KvcButton, KvcTextInput, KvcField } from '@zygapp/kintone-vue3-component'
import '@zygapp/kintone-vue3-component/style.css'

<script setup>
import { ref } from 'vue'
import { KvcButton, KvcTextInput, KvcField } from '@zygapp/kintone-vue3-component'

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

<template>
  <kvc-field label="名前">
    <kvc-text-input v-model="inputValue" />
  </kvc-field>
  <kvc-button @click="handleClick">送信</kvc-button>
</template>

基本的な使用例

シンプルなフォーム

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

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

    <kvc-field label="パスワード">
      <kvc-text-input v-model="form.password" type="password" />
    </kvc-field>

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

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

const form = ref({
  username: '',
  email: '',
  password: ''
})

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

ドロップダウンとラジオボタン

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

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

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

const categories = ref([
  { label: '開発', value: 'dev' },
  { label: 'デザイン', value: 'design' },
  { label: 'マーケティング', value: 'marketing' }
])

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

const selectedCategory = ref('dev')
const priority = ref('medium')
</script>

日付と時刻の選択

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

    <kvc-field label="開始時刻">
      <kvc-time-picker v-model="startTime" />
    </kvc-field>

    <kvc-field label="終了日時">
      <kvc-datetime-picker v-model="endDateTime" />
    </kvc-field>
  </kvc-wrap>
</template>

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

const startDate = ref('2024-01-01')
const startTime = ref('09:00')
const endDateTime = ref('2024-01-01T18:00')
</script>

テーブルの使用

<template>
  <kvc-table
    v-model="tableData"
    :columns="columns"
    :min-rows="1"
    :max-rows="10"
  >
    <template #name="{ row, index }">
      <kvc-text-input v-model="row.name" />
    </template>

    <template #age="{ row, index }">
      <kvc-text-input v-model="row.age" type="number" />
    </template>
  </kvc-table>
</template>

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

const columns = ref([
  { key: 'name', label: '名前', width: '200px' },
  { key: 'age', label: '年齢', width: '100px' }
])

const tableData = ref([
  { name: '田中太郎', age: 30 },
  { name: '佐藤花子', age: 25 }
])
</script>

コンポーザブルの使用

スピナー

import { useSpinner, showSpinner, hideSpinner } from '@zygapp/kintone-vue3-component'

// 方法1: useSpinner コンポーザブルを使用（推奨）
const $spinner = useSpinner()
$spinner.open('データを読み込み中...')
setTimeout(() => $spinner.close(), 3000)

// 方法2: グローバル関数を使用
showSpinner('処理中...')
setTimeout(() => hideSpinner(), 3000)

// スピナーのメッセージを更新
$spinner.open('読み込み中...')
setTimeout(() => {
  $spinner.update('処理中...')
}, 1000)
setTimeout(() => {
  $spinner.close()
}, 3000)

TypeScript サポート

すべてのコンポーネントはTypeScriptで型定義されています。

import type { KvcButtonProps, KvcTableColumn } from '@zygapp/kintone-vue3-component'

const buttonProps: KvcButtonProps = {
  color: 'save',
  disabled: false
}

const columns: KvcTableColumn[] = [
  { key: 'name', label: '名前', width: '200px' },
  { key: 'email', label: 'メール', width: '300px' }
]

次のステップ

各コンポーネントの詳細な使い方については、コンポーネント一覧を参照してください。