ewdernaandClaude Opus 5.5
fccbc28bee
provisional/decisions.md の仮決定(T-1〜T-28)に従い、mock/ に Vue 3 + Vite + TypeScript のモックを置いた。 T-3 の1〜3(回転したクラスター内のドラッグと保存の往復、IDX・MAPとの連携、ELCと出力の対応表)まで。疑似デバイスとの往復(T-24)は未着手。 - KLE JSONの入出力は、KLE本家の serial.js の deserialize の結果を期待値とする fixture(tests/fixtures/kle-oracle.json)で照合した。本家のコードは取り込んでいない(T-7) - 基本キーコードの表は QMK の data/constants/keycodes/keycodes_0.0.1_basic.hjson(1e340cd)から抽出した - 実装は Codex(Luna)、レビューは Codex(Sol)。検証: Vitest 53件、Playwright 20件、vue-tsc、vite build - TypeScript は vue-tsc が 7 系に未対応のため 6 系に固定した - 操作性の改善(ELCの提供者の表示、一括配線とGeneratorのピン設定の引き継ぎ、キー内の文字のはみ出し)は別途行う Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AATqjRyp6rrnwTNdYw8XBT
55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { Node, Variant } from "../../domain/phy";
|
|
type Item = Node | Variant;
|
|
defineProps<{ nodes: Item[]; selected: string[]; expanded?: boolean }>();
|
|
const emit = defineEmits<{ select: [id: string, additive: boolean] }>();
|
|
function kind(n: Item) {
|
|
switch (n.type) {
|
|
case "variantGroup":
|
|
return "VariantGroup";
|
|
case "cluster":
|
|
return "Cluster";
|
|
case "component":
|
|
return "部品";
|
|
case "key":
|
|
return "キー";
|
|
case "variant":
|
|
return "Variant";
|
|
}
|
|
}
|
|
function title(n: Item) {
|
|
switch (n.type) {
|
|
case "key":
|
|
return n.labels?.filter(Boolean)[0] || "無題キー";
|
|
case "component":
|
|
return n.partGroup || "部品";
|
|
case "variantGroup":
|
|
case "cluster":
|
|
case "variant":
|
|
return n.name || n.type;
|
|
}
|
|
}
|
|
function children(n: Item): Item[] {
|
|
return n.type === "cluster" || n.type === "variantGroup" || n.type === "variant" ? n.children : [];
|
|
}
|
|
</script>
|
|
<template>
|
|
<ul class="tree-list">
|
|
<li v-for="n in nodes" :key="n.id">
|
|
<button
|
|
class="tree-node"
|
|
:class="{ chosen: selected.includes(n.id) }"
|
|
:data-tree-id="n.id"
|
|
@click="emit('select', n.id, $event.shiftKey)"
|
|
>
|
|
{{ kind(n) }} · {{ title(n) }} <small>{{ n.id }}</small></button
|
|
><PhyTree
|
|
v-if="children(n).length"
|
|
:nodes="children(n)"
|
|
:selected="selected"
|
|
@select="(id, additive) => emit('select', id, additive)"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</template>
|