hexagone-frontend

Hexagone フロントエンドドキュメント -- ナビゲーションスキル

このスキルを使うと、GitLab Pages で公開されている Hexagone フロントエンドコンポーネントのドキュメント（@his/hexa-components）を参照できます。Hexagone のフロントエンドコンポーネント、パターン、規約について質問されたときは、関連するドキュメントファイルを取得して読み込むのが役割です。

Hexagone フロントエンドドキュメントについて

Hexagone フロントエンドは、Vue.js 2 と、beta-scss ユーティリティクラスおよび状態管理用の vuex-pathify を使用した Vuex を備えるカスタムコンポーネントライブラリ（@his/hexa-components）で構築されています。ドキュメントサイトは次の場所で公開されています。

https://erp-pas.gitlab-pages-erp-pas.dedalus.lan/hexagone/frontend/hexagone-documentation

このサイトはシングルページアプリケーション（SPA）のため、直接取得できません。代わりに、LLM での利用に特化して最適化された、GitLab リポジトリ内の生の Markdown ファイルを使用してください。

このスキルを使用する場面：

• ユーザーが Hexagone の UI コンポーネント（<btn>、<multiselect>、<data-table> など）について質問した場合
• Hexagone コンポーネントの props、イベント、使用例が必要な場合
• beta-scss の CSS ユーティリティクラス（flex:6/12、p:1、m:1 など）について質問した場合
• Vuex のストアモジュール（user、session、environment、navigation など）について質問した場合
• API ユーティリティ（Api()、StandardApi()）について質問した場合
• カスタムディレクティブ（v-focus、v-uppercase）について質問した場合
• Hexagone のフォーム検証ルールやフォームパターンについて質問した場合
• ユーザーが Hexagone Web のビュー／スペースを作成または変更している場合
• 「Hexagone」と「component」、「composant」、「frontend」、「Vue」、「template」、「formulaire」、「interface」のいずれかを組み合わせた質問全般

重要な規約

IMPORTANT: Hexagone ではカスタムタグ名を使用します。これらのコンポーネントに標準 HTML タグを絶対に使用しないでください。

標準 HTML	Hexagone の対応要素	ドキュメントファイル
<button>	<btn>	components/button.md
<select>	<multiselect>	components/select.md
<table>	<data-table>	components/datatable.md
<input type="checkbox">	<checkbox>	components/checkbox.md

主なルール：

• すべてのコンポーネントはグローバル登録済みのため、テンプレートでインポートする必要はありません
• フォームフィールドは<div class="input-field"><label for="id">ラベル</label></div>で囲む必要があります
• beta-scss ユーティリティクラスを使用します：flex、flex:wrap、flex:6/12、p:1、m:1など
• ストアには vuex-pathify でアクセスします：this.$store.get('module/path')およびthis.$store.set('module/path', value)
• ライブラリ：@his/hexa-components、フレームワーク：Vue.js 2

ドキュメントカタログ

生のファイルは次の場所から利用できます。

BASE_RAW_URL = https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/

コンポーネント（36個）

フォームと入力

コンポーネント	タグ	ファイルパス
入力	<input> + ラッパー	components/input.md
テキストエリア	<textarea> + ラッパー	components/textarea.md
数値	<number>	components/number.md
通貨	<currency>	components/currency.md
選択	<multiselect>	components/select.md
オートコンプリート	<autocomplete>	components/autocomplete.md
チェックボックス	<checkbox>	components/checkbox.md
ラジオボタン	<radio>	components/radio.md
ButtonSwitch	<btn-switch>	components/button-switch.md
日付選択	<datepicker>	components/datepicker.md
時刻選択	<timepicker>	components/timepicker.md
カラーピッカー	<colorpicker>	components/colorpicker.md
ファイル	<file>	components/file.md
IBAN	<iban>	components/iban.md
BIC	<bic>	components/bic.md
Radical	<radical>	components/radical.md

ナビゲーションとアクション

コンポーネント	タグ	ファイルパス
ボタン	<btn>	components/button.md
ボタングループ	<btn-group>	components/button-group.md
フローティングボタン	<floating-btn>	components/floating-button.md
アクション	<action>	components/action.md
リンク	<link>	components/link.md
ブックマーク	<bookmark>	components/bookmark.md
タブ	<tabs>	components/tabs.md
ステップ	<steps>	components/steps.md

データ表示

コンポーネント	タグ	ファイルパス
データテーブル	<data-table>	components/datatable.md
シンプルテーブル	<simple-table>	components/simple-table.md
カード	<card>	components/card.md
プログレスバー	<progress-bar>	components/progress-bar.md

ユーザーフィードバック

コンポーネント	タグ	ファイルパス
アラート	<alert>	components/alert.md
モーダル	<modal>	components/modal.md
通知	$notification()	components/notification.md
質問	<question>	components/question.md
ツールチップ	<tooltips>	components/tooltips.md
付箋	<post-it>	components/post-it.md
スピナー	<spinner>	components/spinner.md

レイアウト

コンポーネント	タグ	ファイルパス
折りたたみ	<collapsible>	components/collapsible.md

パターン

トピック	ファイルパス	説明
API ユーティリティ	patterns/api.md	ウェブサービス呼び出し用の Api(url, options) と StandardApi(USP)
ストア（Vuex）	patterns/store.md	vuex-pathify を使用する Vuex ストアと、共有モジュール（user、session など）

リファレンス

トピック	ファイルパス	説明
ディレクティブ	reference/directives.md	v-uppercase、v-focus カスタムディレクティブ
イベント	reference/events.md	マウスおよびキーボードイベントの処理
フォームルール	reference/form-rules.md	検証ルール、必須フィールド、@is-valid パターン

タグからファイルをすばやく検索

ユーザーがコンポーネントのタグを指定したときに、取得するファイルをすばやく見つけるには、次の表を使用してください。

タグのパターン	ファイル
<btn>、button	components/button.md
<btn-group>	components/button-group.md
<btn-switch>	components/button-switch.md
<floating-btn>	components/floating-button.md
<multiselect>、select	components/select.md
<data-table>、datatable、table	components/datatable.md
<simple-table>	components/simple-table.md
<datepicker>、date	components/datepicker.md
<timepicker>、time、heure	components/timepicker.md
<checkbox>	components/checkbox.md
<radio>	components/radio.md
<autocomplete>	components/autocomplete.md
<modal>、modale	components/modal.md
<alert>、alerte	components/alert.md
<notification>、$notification	components/notification.md
<question>	components/question.md
<card>、carte	components/card.md
<collapsible>	components/collapsible.md
<tabs>、onglets	components/tabs.md
<steps>、etapes	components/steps.md
<spinner>、loading	components/spinner.md
<currency>、montant	components/currency.md
<iban>	components/iban.md
<bic>	components/bic.md
<number>、nombre	components/number.md
<input>、champ texte	components/input.md
<textarea>	components/textarea.md
<file>、upload	components/file.md
<radical>	components/radical.md
<colorpicker>、couleur	components/colorpicker.md
<action>	components/action.md
<link>、lien	components/link.md
<bookmark>、signet	components/bookmark.md
<post-it>	components/post-it.md
<progress-bar>	components/progress-bar.md
<tooltips>、infobulle	components/tooltips.md

CSS ユーティリティクラス（beta-scss）

これらのクラスは取得せずに使用できます。直接使用してください。

クラス	説明
flex	フレックス表示
flex:wrap	フレックスの折り返し
flex:col	フレックスの方向を縦に設定
flex:X/12	幅の割合（例：flex:6/12 = 50%）
p:1	パディング 1rem
m:1	マージン 1rem
pt:1、pr:1、pb:1、pl:1	方向別のパディング
mt:1、mr:1、mb:1、ml:1	方向別のマージン
text:bold	太字
text:center	テキストを中央揃え
bg:grey-light	薄いグレーの背景
border	標準の枠線
rounded:1/2	角丸
w:full	幅 100%

アイコン

アイコン名を指定して、<icon> コンポーネントを使用してください。

<icon>checked</icon>
<icon>close</icon>
<icon>search</icon>
<icon>edit</icon>

アイコンは @his/fonts-icons から提供されます。

質問への回答方法

ステップ 1：該当するファイルを特定する

上の表を使って、ユーザーの質問に対応するドキュメントファイルを 1 つ以上特定してください。

• 特定のコンポーネントタグ（例：<btn>、<multiselect>）--> タグからファイルを検索
• コンポーネント名（例：「datatable」、「datepicker」）--> コンポーネントカタログで照合
• ストア／状態管理 --> patterns/store.md を取得
• API／Web サービスの呼び出し --> patterns/api.md を取得
• ディレクティブ（v-focus、v-uppercase）--> reference/directives.md を取得
• フォームの検証／必須フィールド --> reference/form-rules.md を取得
• イベント（クリック、キーボード）--> reference/events.md を取得
• CSS クラス --> 上の CSS ユーティリティ表を使用（取得不要）
• アイコン --> 上のアイコンのセクションを使用（取得不要）
• 「すべてのコンポーネントを一覧表示」などの一般的な質問 --> 上のカタログを使用（取得不要）

ステップ 2：ファイルを取得する

WebFetch を使って、GitLab から Markdown ファイルの raw データを取得します。

WebFetch: url="${BASE_RAW_URL}<file-path>" prompt="Return the full content of this markdown file"

例：

• Button コンポーネント：WebFetch: url="https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/components/button.md" prompt="Return the full content"
• Store パターン：WebFetch: url="https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/patterns/store.md" prompt="Return the full content"

必要なファイルだけを取得してください。 すべてのファイルを一度に取得しないでください。

WebFetch が失敗した場合（ネットワークエラー、タイムアウト）は、GitLab インスタンスに接続できないことをユーザーに伝え、次の方法を提案してください。

1. ドキュメントサイトに直接アクセスする：https://erp-pas.gitlab-pages-erp-pas.dedalus.lan/hexagone/frontend/hexagone-documentation
2. ソースリポジトリを参照する：https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/tree/master/docs/llm

ステップ 3：回答を抽出して提示する

取得後、該当する情報を抽出します。

1. 特定のコンポーネントの場合： props の表、イベントの表、使用例を提示します
2. パターンの場合： API／関数のシグネチャ、オプション、例を提示します
3. リファレンストピックの場合： 関連するルール、表、ディレクティブを提示します

元の構成（props の表、イベントの表、コード例）を維持し、情報をわかりやすく提示してください。

ステップ 4：必要に応じて相互参照する

ユーザーの質問が複数のトピックにまたがる場合（例：「datepicker とバリデーションを使ってフォームを作るには？」）、複数のファイルを取得し、コンポーネントの組み合わせ方を示す一貫した回答を作成します。

回答ガイドライン

コンポーネントのドキュメントを提示する際は、次の構成を使用してください。

## <ComponentName> (`<tag-name>`)

**Library:** @his/hexa-components
**Source:** [file URL]

### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|

### Events
| Event | Description |
|-------|-------------|

### Example
[Code example from the documentation]

重要なルール

1. 必ず GitLab リポジトリから取得してください — Vue.js コンポーネントに関する記憶や一般知識に基づいて回答しないでください。Hexagone には、標準的な Vue.js のパターンとは異なる固有の規約（カスタムタグ、beta-scss、vuex-pathify）があります。

2. 情報を提示する際は、出典ファイルを明記してください：必ず、情報の出典となるドキュメントファイルを記載してください。

3. props、イベント、コンポーネントの動作を創作しないでください — 取得したファイルに情報が見つからない場合は、その旨を明示してください。推測や外挿はしないでください。

4. Hexagone の規約に従ってください：

   • <button> ではなく <btn>、<select> ではなく <multiselect>、<table> ではなく <data-table> を使用する
   • フォームフィールドは <div class="input-field"> で囲む
   • カスタム CSS ではなく beta-scss のユーティリティクラスを使用する
   • ストアへのアクセスには this.$store.get() / this.$store.set() を使用する

5. ドキュメントが見つからない場合は、適切に対応してください — コンポーネントがドキュメント化されていない場合は、その旨をユーザーに伝え、hexagone-documentation サイトを確認するか、リポジトリ（https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation）で issue を作成するよう提案してください。

6. hexagone-swdoc と相互参照してください — フロントエンドビューから Hexagone バックエンドの Web サービスを呼び出す質問の場合は、API コントラクトの詳細について hexagone-swdoc スキルを、フロントエンドからの呼び出しパターンについてこのスキルの Api() / StandardApi() ユーティリティを使うよう提案してください。

7. 常に従うべきフォームフィールドのパターン：

   <div class="input-field">
     <label for="myField">My Label</label>
     
   </div>
   

8. 選択肢が 6 個未満の場合は、<multiselect> ではなく <btn-group> を使用してください — 余分なクリックを避け、すべての選択肢を直接表示できます。