81 lines
2.4 KiB
Vue
81 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { useControlPlaneContext } from "../composables/useControlPlane";
|
|
|
|
const plane = useControlPlaneContext();
|
|
</script>
|
|
|
|
<template>
|
|
<section class="panel stack-panel tool-panel">
|
|
<div class="panel-title">
|
|
<div><h2>Templates</h2></div>
|
|
</div>
|
|
|
|
<div class="inline-grid">
|
|
<input
|
|
v-model="plane.customExampleName"
|
|
placeholder="Save current script as template..."
|
|
/>
|
|
<button @click="plane.saveCurrentAsExample">Save</button>
|
|
</div>
|
|
|
|
<div class="example-shell">
|
|
<div class="example-browser">
|
|
<input v-model="plane.exampleSearch" placeholder="Search templates" />
|
|
|
|
<div class="example-index">
|
|
<button
|
|
v-for="example in plane.filteredExamples"
|
|
:key="example.id"
|
|
class="example-entry"
|
|
:class="{ selected: plane.selectedExample?.id === example.id }"
|
|
@click="plane.selectExample(example.id)"
|
|
>
|
|
<strong>{{ example.name }}</strong>
|
|
<small>{{ example.category }}</small>
|
|
<span class="example-snippet">{{ example.description }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<article v-if="plane.selectedExample" class="example-preview">
|
|
<div class="option-doc-head">
|
|
<div>
|
|
<h3>{{ plane.selectedExample.name }}</h3>
|
|
</div>
|
|
<div class="template-meta">
|
|
<span class="type-chip">{{ plane.selectedExample.category }}</span>
|
|
<span class="type-chip">
|
|
{{ plane.selectedExample.built_in ? "built-in" : "custom" }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="doc-copy">{{ plane.selectedExample.description }}</p>
|
|
|
|
<pre class="terminal template-preview-terminal">{{
|
|
plane.selectedExample.code
|
|
}}</pre>
|
|
|
|
<div class="doc-actions">
|
|
<button @click="plane.applyExample(plane.selectedExample)">Use template</button>
|
|
<a
|
|
v-if="plane.selectedExample.source_url"
|
|
:href="plane.selectedExample.source_url"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Source
|
|
</a>
|
|
<button
|
|
v-if="!plane.selectedExample.built_in"
|
|
class="ghost"
|
|
@click="plane.removeExample(plane.selectedExample.id)"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|