frappe-ui

frappe-ui

frappe-ui のコンポーネントを組み合わせ、ライブラリのセマンティックな Tailwind トークンでスタイルを設定して、Frappe 製品のような見た目と使い心地の UI を構築します。

クイックスタート

<script setup>
import { Button, Dialog, FormControl } from 'frappe-ui'
import { ref } from 'vue'

const open = ref(false)
const name = ref('')
</script>

<template>
  <div class="p-4 bg-surface-base text-ink-gray-8">
    <Button variant="solid" theme="gray" @click="open = true">New Task</Button>
    <Dialog v-model:open="open" title="Create Task">
      <FormControl v-model="name" label="Title" required />
    </Dialog>
  </div>
</template>

参照先

プロパティ名、プロパティ値の型、スロット名、トークン名はここではなく、以下のファイルに記載されています。マークアップを書く前に、必要なファイルを開いてください。

これを書く場合	まず開くファイル
あらゆるコンポーネント、ページ、Tailwind クラス	CORE.md
データの取得や書き込みを行うもの	DATA.md
新しい Vite + Vue 3 プロジェクト	SETUP.md

規約

以下はすべてのコンポーネントに共通する規約です。それ以外はコンポーネントごとに異なり、 CORE.md に記載されています。

1. コンポーネントを選びます。 すべてのインタラクティブな要素には CORE.md に記載されたものを使用します。生の HTML はレイアウト用に使います。たとえば、グリッド、フレックス、間隔を設定するラッパーなどです。
2. 色は variant と theme の 2 つのプロパティで指定します。 値はコンポーネントごとに異なり、それぞれの値は CORE.md に記載されています。独自のマークアップでは、色にセマンティックなスケールを使用します。bg-surface-*、text-ink-*、border-outline-* などです。
3. 双方向の状態管理には v-model を使います。 入力には v-model を指定します。オーバーレイには v-model:open を指定します。Combobox と MultiSelect では、オプションの v-model:query も使用できます。 List では v-model:selection と v-model:active を使用できます。
4. アイコンは CSS クラスで指定します。 <span class="lucide-edit size-4" aria-hidden="true" />。 icon という名前のプロパティには、文字列 "lucide-edit" を指定します。
5. スロット名はコンポーネントごとに異なり、共通ではありません。 <template #…> を書く前に、CORE.md にある該当コンポーネントの項目を確認してください。
6. Frappe API の呼び出しには use* コンポーザブルを使います。 useCall、 useList、useDoc、useDoctype、useNewDoc はすべて frappe-ui からエクスポートされています。それぞれ受け取るオプションと返すデータの形式が異なります。 DATA.md では、それぞれについて個別に説明しています。