# Prime UI デザインシステム

## Prime UI デザインシステムのインターフェースプレビュー

階層化された課題を絞り込み、文書を選択し、フォルダーを展開・折りたたみして、ローカルのリファレンスをピン留めします。

## Prime UI デザインシステムのデザインリファレンス

この Prime UI リソースは、PrimeVue 4.5.5 と @primeuix/themes 1.2.5 Aura を実装しています。PrimeVue、PrimeReact、PrimeNG で共通して使える単一の API をうたうものではありません。値は、インストール済みのプリセットを調査して確認しました。このページではルートサイズを 16px に固定し、rem の寸法はこの明示的な設定に基づいて解釈しています。

### Aura のエメラルド系プリミティブ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| primitive.emerald.50 | #ecfdf5 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.100 | #d1fae5 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.200 | #a7f3d0 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.300 | #6ee7b7 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.400 | #34d399 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.500 | #10b981 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.600 | #059669 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.700 | #047857 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.800 | #065f46 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.900 | #064e3b | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
| primitive.emerald.950 | #022c22 | デフォルトのプライマリーカラー階調で使われる実際のプリミティブカラー。 |
### Aura のライトモードにおけるセマンティックロール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| semantic.colorScheme.light.primary.color | {primary.500} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.primary.contrastColor | #ffffff | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.primary.hoverColor | {primary.600} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.primary.activeColor | {primary.700} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.highlight.background | {primary.50} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.highlight.focusBackground | {primary.100} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.highlight.color | {primary.700} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.highlight.focusColor | {primary.800} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.text.color | {surface.700} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.text.hoverColor | {surface.800} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.text.mutedColor | {surface.500} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.colorScheme.light.text.hoverMutedColor | {surface.600} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
### Aura の角丸とフィールド間隔

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| primitive.borderRadius.none | 0 | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| primitive.borderRadius.xs | 2px | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| primitive.borderRadius.sm | 4px | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| primitive.borderRadius.md | 6px | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| primitive.borderRadius.lg | 8px | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| primitive.borderRadius.xl | 12px | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.formField.paddingX | 0.75rem | 実際に使われる共通のフィールド余白または角丸の参照値。 |
| semantic.formField.paddingY | 0.5rem | 実際に使われる共通のフィールド余白または角丸の参照値。 |
| semantic.formField.borderRadius | {border.radius.md} | 実際に使われる共通のフィールド余白または角丸の参照値。 |
| semantic.focusRing.width | 1px | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.focusRing.style | solid | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.focusRing.color | {primary.color} | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.focusRing.offset | 2px | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
| semantic.focusRing.shadow | none | Aura プリセットの実際の値。波括弧はトークン参照を示します。 |
### 標準 Tree の寸法

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| components.tree.root.padding | 1rem | 実際の Tree ルートのレイアウト値。 |
| components.tree.root.gap | 2px | 実際の Tree ルートのレイアウト値。 |
| components.tree.root.indent | 1rem | 実際の Tree ルートのレイアウト値。 |
| components.tree.node.padding | 0.25rem 0.5rem | 実際のノード間隔または選択状態のロール。 |
| components.tree.node.gap | 0.25rem | 実際のノード間隔または選択状態のロール。 |
| components.tree.node.selectedBackground | {highlight.background} | 実際のノード間隔または選択状態のロール。 |
| components.tree.node.selectedColor | {highlight.color} | 実際のノード間隔または選択状態のロール。 |
| components.tree.nodeToggleButton.size | 1.75rem | 標準の開閉ボタンの寸法。 |
### アプリケーションで明示するタイポグラフィと間隔

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Root font size | 16px | このサンプルで元から明示されている基準値。 |
| Font family | system-ui, sans-serif | 元のページフォント。Aura からダウンロードしたフォントではありません。 |
| Page heading | 34px / 1.15; 29px mobile | 元のエディトリアル階層。 |
| Detail body | 15px / 1.7 | 元の文書の読みやすさを重視したスタイル。 |
| Sidebar / gap | 340px / 24px | 元のデスクトップレイアウト。 |
| Mobile breakpoint | 760px | 元の縦積みレイアウトへの切り替え境界。 |
## Prime UI デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Prime UI デザインシステムは単なるインポートではなく、エコシステムです

### Prime UIは単なるインポートではなく、エコシステムです

> PrimeTek の UI エコシステムには、さまざまなフレームワーク向けの実装が含まれています。このページでは、その中から具体的な構成を選びます。Vue 3 と Aura プリセットを使用する PrimeVue 4.5.5（@primeuix/themes 1.2.5）です。エントリーファイル、インポート、コンポーネントの使用例は、すべてこの Vue の構成に対応しています。React または Angular のプロジェクトでは、Vue のタグをそのままコピーするのではなく、対応するパッケージと API が必要です。

ここではバージョンの固定が重要です。インストールした 4.5.5 パッケージには MIT ライセンスが付属しており、ライセンスキーなしでローカルのサンプルを実行できることを確認しています。新しい 5.0.2 のランタイムをテストしたところ PrimeUI のライセンスエラーが表示されたため、この例では最新バージョンを無条件に使うインストールコマンドを示さず、リリース間で認証条件が同じであるとも示唆しません。

関連する仕様を確認する

## Prime UI デザインシステムではプリミティブ、セマンティック、コンポーネントのトークンが連鎖を形成

### プリミティブ、セマンティック、コンポーネントのトークンが連鎖を形成

Aura では、色のプリミティブ、セマンティックロール、コンポーネントの値が分かれています。デフォルトのプライマリーカラー階調は、エメラルド系のプリミティブを参照します。ライトモードでは、primary.color が primary.500、hoverColor が primary.600、activeColor が primary.700 を参照します。ハイライトロールでは、選択状態に明るいプライマリーカラーの背景と暗い前景色を使います。

Tree は選択時の背景色とテキスト色をハイライトロールに対応付けます。無関係な別の緑色をハードコードするわけではありません。仕様では波括弧による参照をそのまま残しています。参照を示すことで、テーマの変更がどのように反映されるかがわかるためです。すべてのエイリアスを個別の 16 進数値に置き換えると、この有用な依存関係が見えなくなります。

関連する仕様を確認する

## Prime UI デザインシステムでは対応するプリセットから値を読み取る

### 対応するプリセットから値を読み取る

固定した Aura プリセットでは、Tree のルートのパディングとインデントはいずれも 1rem、ノードのパディングは 0.25rem 0.5rem、切り替えボタンは 1.75rem です。このサンプルでは html のサイズを 16px に固定し、寸法を明確にしています。コンポーネントのマークアップが似ていても、プリセットのリリースやルートサイズが異なれば、密度も変わることがあります。

角丸のプリミティブは、0、2、4、6、8、12ピクセルです。共通のフィールド内余白は、横方向が0.75rem、縦方向が0.5remです。ページの見出しサイズ34ピクセル、システムフォント、カラム間隔24ピクセルは、標準コンポーネントのテーマには含まれない、独自のレイアウト設定です。

関連する仕様を確認する

## Prime UI デザインシステム：ノードキーで展開と選択を安定させる

### ノードキーで展開と選択を安定させる

ツリーは、1つの号、3つのフォルダー、6つの文書ノードで構成されています。すべてのノードに、安定したキーとラベルを設定しています。フォルダーノードには selectable:false を指定しているため、読める文書であるかのように見せることなく、階層を整理できます。展開中のフォルダーは expandedKeys モデルで管理し、「展開」と「折りたたむ」の操作では、そのマップを意図的に置き換えます。

単一選択には selectionKeys と node-select ハンドラーを使用します。文書レコードのマップに存在するキーが選択された場合に限り、詳細ペインを更新します。表示ラベルを変更しても識別子を変える必要はありません。また、フォルダーを折りたたんでも、現在選択中の文書やピン留め状態は失われません。

関連する仕様を確認する

## Prime UI デザインシステム：標準の絞り込みで一致項目の文脈を保持する

### 標準のフィルタリングで、該当項目の文脈を保持

Tree の組み込みフィルターを filterMode lenient で有効にし、「文書を検索」のプレースホルダーを表示します。「maps」と検索すると、一致した文書とその祖先に絞り込まれた階層が表示されます。結果が関係のないフラットな候補リストになるのではなく、読者はその文書がどこに属するのかを把握できます。

フィルターを解除すると、階層が元に戻ります。絞り込みによって元のノードが書き換えられたり、ピン留めした文書が削除されたりすることはありません。詳細ペインには最後に明示的に選択した末端ノードが表示されるため、キー入力のたびに内容が予期せず変わることもありません。より大規模なコレクションでは遅延データ読み込みが必要になる可能性がありますが、この完成したサンプルでは6件のローカルレコードを使用しており、サーバー検索機能をうたうものではありません。

1. 「maps」と検索し、号とフォルダーの階層が保持されることを確認します。

2. 「Three regional maps」を選択して、文書パネルを更新します。

3. フィルターを解除し、選択した文書が階層内に引き続き表示されることを確認します。

関連する仕様を確認する

## Prime UI デザインシステム：選択した文書には、内容のある独自の情報を表示する

### 選択した文書には、明確で役立つ内容が必要

各文書には、種類、担当者、ステータス、概要、確認項目、固有のメモが含まれます。エッセイでは構成の順序やキャプションの確認を求め、地図資料では方位の統一と独立した縮尺を求め、校正用チェックリストでは判読性や断裁について確認を促します。6つのタイトルに同じ段落を使い回すのではなく、選択に応じて内容が変わります。

ステータスタグは、サンプルの説明用メタデータとして表示されます。外部の公開ワークフローを実行するものではありません。等高線の図は独自に作成した装飾用の図形であり、関連する箇所ではその旨を示しています。地理的な地図ではないため、そのように解釈しないでください。

関連する仕様を確認する

## Prime UI デザインシステム：ピン留め状態をツリーモデルから分離する

### ピン留め状態はツリーモデルとは独立

「この文書をピン留め」を選ぶと、現在の文書キーがローカル配列に追加されます。追加後はボタンが「ピン留め済み」に変わって無効になり、同じ項目が重複して追加されるのを防ぎます。ピン留めした行を削除しても、そのキーだけが削除され、ツリーの選択状態は変わりません。ピン留め件数は配列から算出します。

選択、展開、保存した参照は、それぞれ異なる目的を持つため、この分離が重要です。すべてのフォルダーを折りたたんだまま選択中のエッセイを開いておくことも、ピン留めした参照を保持したまま号の別の箇所に絞り込むこともできます。これらの操作によって、リモートの文書が編集されることはありません。

関連する仕様を確認する

## Prime UI デザインシステム：標準のツリー操作を維持する

### 標準のツリー操作を維持する

標準の Tree は、tree および treeitem ロール、選択状態と展開状態を示す属性、ネストされた階層間の関係を通じて、階層構造を伝えます。キーボード操作では、矢印キーで表示中のノード間を移動し、ブランチの展開や折りたたみを行います。フォーカス中のノードは Enter または Space で選択できます。このページでは、コレクションに明確な aria-label を設定しています。

詳細ペインとピン留めリストには、標準的な見出し、リスト、名前付きボタンを使用します。モバイルでは、読み上げ順でナビゲーターが文書より先に配置されます。元のブレークポイントである760pxでレイアウトが縦に積み重なり、ツリーが切り取られたり、文書の説明が省かれたりすることはありません。また、現在の選択内容をステータス行で伝えます。

- ツリーの表示順が変わる場合も、安定したキーを使用します。

- 関連する詳細コンテンツがないフォルダーは、選択不可にします。

- 「削除」ボタンには、同じ曖昧なラベルを繰り返すのではなく、対象となる文書名を含めます。

関連する仕様を確認する

## Prime UI デザインシステム：Vue のルートでテーマを一度だけ登録する

### Vue のルートでテーマを一度だけ登録

エントリーファイルでは primevue/config から PrimeVue、@primeuix/themes/aura から Aura、そして App.vue 全体をインポートします。theme.preset を Aura に設定してプラグインを登録します。この固定されたライトテーマのサンプルでは darkModeSelector を false にしています。本番環境でテーマを切り替える場合は、異なるメジャーバージョンのドキュメントを混在させず、使用中のリリースでサポートされているオプションを設定してください。

PrimeVue のスタイル付きコンポーネントは、プリセットから必要なコンポーネントのスタイルを生成します。付属の style.css では、独自のページレイアウトとイラストのみを定義しています。従来の primevue/resources/theme.css はインポートしていません。検証済みのセットアップでは、ツリーの末端ノードを選択し、ピン留めし、階層を絞り込み、ライセンスに関する警告を表示することなく390px幅で描画できることを確認しています。

関連する仕様を確認する

## Prime UI デザインシステムのコンポーネント例

### 標準の Tree と詳細ビュー

安定したノードキー、制御された expanded/selection マップ、フィルター、node-select の処理。

```
<script setup>
import {ref,computed} from 'vue';import Tree from 'primevue/tree';import Button from 'primevue/button';import Tag from 'primevue/tag';
const nodes=[{key:'issue',label:'Issue 04 · Fieldwork',selectable:false,children:[{key:'essays',label:'Essays',selectable:false,children:[{key:'ridge',label:'The ridge path'},{key:'river',label:'A river after rain'}]},{key:'visuals',label:'Visual material',selectable:false,children:[{key:'maps',label:'Three regional maps'},{key:'captions',label:'Caption reference sheet'}]},{key:'production',label:'Production',selectable:false,children:[{key:'proof',label:'Print proof checklist'},{key:'credits',label:'Credits and permissions'}]}]}];
const documents={ridge:{type:'Essay',owner:'Alex Morgan',status:'Editing',title:'The ridge path',intro:'A field essay about following the contour rather than the shortest route.',items:['Opening: the first view above the tree line','Middle: how a contour changes the pace of walking','Close: the landmarks remembered on the return'],note:'Review the transition between the weather observation and the first-person account.'},river:{type:'Essay',owner:'Jules Chen',status:'Review',title:'A river after rain',intro:'An observational essay that follows sediment, sound and changing water levels.',items:['Keep the time sequence explicit','Pair each field image with an observation','Check the final geographic names'],note:'Compare the image captions with the text before locking the layout.'},maps:{type:'Visual reference',owner:'Sam Rivera',status:'Review',title:'Three regional maps',intro:'A consistent reference treatment for ridge, river and open plain.',items:['Same north orientation','Shared legend and label size','Scale shown independently on each map'],note:'The miniature map below is original decorative geometry, not a geographic claim.'},captions:{type:'Reference',owner:'Maya Patel',status:'Editing',title:'Caption reference sheet',intro:'One place to keep subject, location, credit and contextual description.',items:['Subject and date','Location at an appropriate level of precision','Author or source credit'],note:'Do not use the visible caption as a substitute for a useful image alt description.'},proof:{type:'Checklist',owner:'Alex Morgan',status:'Ready',title:'Print proof checklist',intro:'Review the physical proof at actual scale before choosing the final stock.',items:['Body text and small labels remain legible','Images preserve the intended tonal range','Trim and page sequence match the layout'],note:'This is a sample editorial workflow, not a print vendor specification.'},credits:{type:'Reference',owner:'Maya Patel',status:'Review',title:'Credits and permissions',intro:'Keep attribution close to each asset record so it survives layout changes.',items:['Creator name and source','Allowed uses recorded separately','Credit wording copied accurately'],note:'This sample does not provide legal permission for any external image.'}};
const expanded=ref({issue:true,essays:true,visuals:true,production:true}),selection=ref({'ridge':true}),current=ref('ridge'),saved=ref([]);const doc=computed(()=>documents[current.value]);function select(node){if(documents[node.key])current.value=node.key;}function pin(){if(!saved.value.includes(current.value))saved.value.push(current.value);}function expandAll(){expanded.value={issue:true,essays:true,visuals:true,production:true};}
</script>
<template><main class="editorial-library"><header><div><p class="eyebrow">PRIME UI · PRIMEVUE IMPLEMENTATION</p><h1>Find the thread of an issue.</h1><p class="intro">A native tree navigator for an editorial collection, using the Aura theme.</p></div><Tag value="Local specimen" severity="secondary" /></header><div class="library-layout"><aside class="library-nav"><div class="nav-heading"><h2>Issue contents</h2><div><Button label="Expand" text size="small" @click="expandAll"/><Button label="Collapse" text size="small" @click="expanded={}"/></div></div><Tree :value="nodes" v-model:expandedKeys="expanded" v-model:selectionKeys="selection" selectionMode="single" :filter="true" filterMode="lenient" filterPlaceholder="Find a document" aria-label="Editorial document tree" @node-select="select" /><section class="pinned"><h2>Pinned documents <span>{{saved.length}}</span></h2><ul v-if="saved.length"><li v-for="key in saved" :key="key"><span>{{documents[key].title}}</span><Button label="Remove" text size="small" :aria-label="`Remove ${documents[key].title}`" @click="saved=saved.filter(x=>x!==key)"/></li></ul><p v-else>No documents pinned yet.</p></section></aside><article class="document"><div class="document-top"><span>{{doc.type}}</span><Tag :value="doc.status" :severity="doc.status==='Ready'?'success':doc.status==='Review'?'info':'warn'"/></div><h2>{{doc.title}}</h2><p class="owner">{{doc.owner}} · ISSUE 04</p><div class="map-art" aria-hidden="true"><i></i><i></i><i></i><span>FIELD NOTES / 04</span></div><p class="intro">{{doc.intro}}</p><h3>What to inspect</h3><ol><li v-for="item in doc.items" :key="item">{{item}}</li></ol><aside class="document-note">{{doc.note}}</aside><Button :label="saved.includes(current)?'Pinned':'Pin this document'" :disabled="saved.includes(current)" @click="pin"/><p class="local-note">Sample records only. Pinning changes this page’s local state.</p></article></div><p class="selection-status" role="status">Selected document: {{doc.title}}</p></main></template>
```

コードリファレンス

- フォルダーノードには selectable:false を指定し、文書の末端ノードだけが詳細ビューを変更します。

- 標準フィルターは lenient モードで、一致項目の階層を保持します。

- ピン留めした文書は、独立したアプリケーション状態として管理します。

### 独自の編集向けレイアウト

Aura スタイルの標準コンポーネントを、レスポンシブな文書ナビゲーターに配置。

```
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:#f4f6f4;color:#26342d;font-family:system-ui,sans-serif}.editorial-library{max-width:1120px;padding:32px;margin:auto}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#5f7566}h1{font-size:34px;line-height:1.15;margin:14px 0}.intro{font-size:15px;line-height:1.7;color:#5f6b63}.library-layout{display:grid;grid-template-columns:340px 1fr;gap:24px}.library-nav,.document{background:white;border:1px solid #dfe5df;border-radius:12px;min-width:0}.nav-heading{padding:18px 18px 0}.nav-heading h2,.pinned h2{font-size:15px;margin:0 0 8px}.nav-heading>div{display:flex;gap:4px}.pinned{border-top:1px solid #dfe5df;padding:20px}.pinned h2{display:flex;justify-content:space-between}.pinned p{font-size:13px;color:#6a766e}.pinned ul{list-style:none;padding:0;margin:0}.pinned li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:8px 0}.document{padding:28px}.document-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#617265}.document h2{font-size:28px;line-height:1.2;margin:16px 0 8px}.owner{font-size:11px;letter-spacing:.08em;color:#6a766e}.map-art{height:130px;background:#dae4d4;border-radius:6px;position:relative;overflow:hidden;margin:24px 0}.map-art i{position:absolute;width:300px;height:130px;border:1px solid #63845a;opacity:.55;border-radius:50%;left:10%;top:30%;transform:rotate(-20deg)}.map-art i:nth-child(2){width:240px;height:100px;top:42%;left:16%}.map-art i:nth-child(3){width:180px;height:70px;top:54%;left:22%}.map-art span{position:absolute;top:16px;left:18px;font-size:9px;font-weight:700;letter-spacing:.16em;color:#496342}.document h3{font-size:15px;margin-top:24px}.document ol{padding-left:21px;font-size:14px;line-height:1.7}.document li{margin:10px 0}.document-note{border-left:3px solid #8aad88;background:#f1f5ee;padding:12px 16px;font-size:13px;line-height:1.7;margin:24px 0}.local-note,.selection-status{font-size:12px;color:#6a766e;line-height:1.6}.selection-status{margin-top:20px}@media(max-width:760px){.editorial-library{padding:24px 14px}header{flex-direction:column;gap:6px}h1{font-size:29px}.library-layout{grid-template-columns:1fr}.document{padding:22px}}
```

コードリファレンス

- 等高線のイラストは独自の装飾用図形であり、実際の地図ではありません。

- rem の寸法を再現可能にするため、ルートのフォントサイズを16pxに明示的に設定しています。

## Prime UI デザインシステムのセットアップ

### 実装の出発点

@primeuix/themes 1.2.5 とともに PrimeVue 4.5.5 で動作確認済みです。インストールした PrimeVue 4 パッケージは MIT ライセンスです。異なるメジャーバージョンでも同じセットアップやライセンス要件が適用されるとは限りません。

```
// Create the project first:
// npm create vite@latest prime-ui-specimen -- --template vue
// cd prime-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install primevue@4.5.5 @primeuix/themes@1.2.5
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import App from './App.vue';
import './style.css';
createApp(App).use(PrimeVue, {
  theme: {preset: Aura, options: {darkModeSelector: false}}
}).mount('#app');
// index.html contains <div id="app"></div>.
// This example is pinned to 4.5.5, not the newer 5.x runtime.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### あなたのプロジェクト向けプロンプト

```
提供されたPrimeVue 4.5.5のエディトリアル文書ライブラリと、@primeuix/themes 1.2.5の対応するAuraプリセットを使用してください。Tree本来の展開、フィルタリング、選択機能を安定したノードキーで維持し、選択中の文書詳細とピン留め文書の一覧を分けて表示してください。実際の文書をピン留め・解除し、カテゴリノードを文書として扱ったり、ピン留めを重複させたりしないでください。プロバイダーの設定全体と、元のレスポンシブ対応CSSを維持してください。これは検証済みのバージョン4の実装例です。新しいメジャーランタイムに黙って置き換えたり、調達ワークフローに変えたりしないでください。
```

## Prime UIデザインシステムの情報源と適用範囲

Prime UIエコシステムを、PrimeVue 4.5.5とAura 1.2.5で具体的に実装しています。このページは、フレームワークの各パッケージや新しいメジャーバージョン間でAPIやライセンス要件が同一であるとは主張しません。すべてのレコードとピン留めはローカルに保存されます。

- 固定されたPrimeVueのリリース このページで使用している正確な実装バージョン。

- 固定されたライセンス サンプルパッケージのMITライセンス。

- Treeのprops 状態管理とフィルタリングに関するprops。

- Treeの実装 選択と階層の動作。

- Auraプリセットのソース プリミティブ、セマンティック、コンポーネントのプリセット構造。この値はインストール済みの1.2.5に固定されています。

- 現在のテーマガイド アーキテクチャの参考資料。値をコピーする前に、メジャーバージョンの違いを確認してください。

- Treeガイド 階層構造とキーボード操作に関する参考資料。

## Prime UIデザインシステム関連リソース

### Pure CSS

Pure CSS は、ウィジェットの実行環境を必要としない、グリッド、フォーム、ボタン、メニュー、テーブル向けのモジュール式スタイルシートです。このガイドでは、任意のレスポンシブグリッドモジュールとネイティブのセマンティック要素を、絞り込み可能な備品カタログで組み合わせる方法を紹介します。並べ替えと選択の動作は明示的に実装しています。

### Quasar

ブランドカラーとスペーシングの値、QFormのバリデーション、3ステップのブリーフ作成、ラジオ形式の選択肢、45分間のアジェンダを備えた、ネイティブのQuasarによるガイド付きワークフロー。

### React Native Elements

React Native Elements 5.0.0を使って、テーマの実際のロール、状態管理された入力と選択、バリデーション、ローカルでの確認、テスト済みのWebビルドを備えた、完全なフォーカスプラン作成画面を構築してください。


- [実装リファレンス](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [ソース](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [ソース](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [ソース](https://primevue.org/theming/styled/)
- [関連する仕様を確認する](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [関連する仕様を確認する](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [関連する仕様を確認する](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [関連する仕様を確認する](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [関連する仕様を確認する](https://primevue.org/tree/)
- [関連する仕様を確認する](https://primevue.org/button/)
- [関連する仕様を確認する](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/config/PrimeVue.js)
- [コードリファレンス](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [コードリファレンス](https://primevue.org/theming/styled/)
- [固定されたPrimeVueのリリース このページで使用している正確な実装バージョン。](https://github.com/primefaces/primevue/tree/4.5.5)
- [固定されたライセンス サンプルパッケージのMITライセンス。](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [Treeのprops 状態管理とフィルタリングに関するprops。](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [Treeの実装 選択と階層の動作。](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Auraプリセットのソース プリミティブ、セマンティック、コンポーネントのプリセット構造。この値はインストール済みの1.2.5に固定されています。](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [現在のテーマガイド アーキテクチャの参考資料。値をコピーする前に、メジャーバージョンの違いを確認してください。](https://primevue.org/theming/styled/)
- [Treeガイド 階層構造とキーボード操作に関する参考資料。](https://primevue.org/tree/)