Gerhard Scheikl
157 lines
3.4 KiB
TypeScript
157 lines
3.4 KiB
TypeScript
import MonacoCodeEditor from "@/tina/customFields/monaco-code-editor";
|
|
|
|
export const CodeTabsTemplate = {
|
|
name: "codeTabs",
|
|
label: "Code Tabs",
|
|
ui: {
|
|
defaultItem: {
|
|
tabs: [
|
|
{
|
|
name: "Query",
|
|
content: "const CONTENT_MANAGEMENT = 'Optimized';",
|
|
},
|
|
{
|
|
name: "Response",
|
|
content: "const LLAMAS = '100';",
|
|
},
|
|
],
|
|
initialSelectedIndex: 0,
|
|
},
|
|
},
|
|
fields: [
|
|
{
|
|
type: "object",
|
|
name: "tabs",
|
|
label: "Tabs",
|
|
list: true,
|
|
ui: {
|
|
itemProps: (item) => ({
|
|
label: `🗂️ ${item?.name ?? "Tab"}`,
|
|
}),
|
|
defaultItem: {
|
|
name: "Tab",
|
|
content: "const CONTENT_MANAGEMENT = 'Optimized';",
|
|
language: "text",
|
|
},
|
|
},
|
|
fields: [
|
|
{
|
|
type: "string",
|
|
name: "name",
|
|
label: "Name",
|
|
},
|
|
{
|
|
type: "string",
|
|
name: "language",
|
|
label: "Code Highlighting Language",
|
|
options: [
|
|
{
|
|
value: "text",
|
|
label: "Plain Text",
|
|
},
|
|
{
|
|
value: "javascript",
|
|
label: "JavaScript",
|
|
},
|
|
{
|
|
value: "typescript",
|
|
label: "TypeScript",
|
|
},
|
|
{
|
|
value: "python",
|
|
label: "Python",
|
|
},
|
|
{
|
|
value: "json",
|
|
label: "JSON",
|
|
},
|
|
{
|
|
value: "html",
|
|
label: "HTML",
|
|
},
|
|
{
|
|
value: "css",
|
|
label: "CSS",
|
|
},
|
|
{
|
|
value: "jsx",
|
|
label: "JSX",
|
|
},
|
|
{
|
|
value: "tsx",
|
|
label: "TSX",
|
|
},
|
|
{
|
|
value: "markdown",
|
|
label: "Markdown",
|
|
},
|
|
{
|
|
value: "shell",
|
|
label: "Shell",
|
|
},
|
|
{
|
|
value: "sql",
|
|
label: "SQL",
|
|
},
|
|
{
|
|
value: "graphql",
|
|
label: "GraphQL",
|
|
},
|
|
{
|
|
value: "java",
|
|
label: "Java",
|
|
},
|
|
{
|
|
value: "php",
|
|
label: "PHP",
|
|
},
|
|
{
|
|
value: "cpp",
|
|
label: "C++",
|
|
},
|
|
{
|
|
value: "yaml",
|
|
label: "YAML",
|
|
},
|
|
{
|
|
value: "xml",
|
|
label: "XML",
|
|
},
|
|
{
|
|
value: "scss",
|
|
label: "SCSS",
|
|
},
|
|
{
|
|
value: "vue",
|
|
label: "Vue",
|
|
},
|
|
{
|
|
value: "svelte",
|
|
label: "Svelte",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: "string",
|
|
name: "content",
|
|
label: "Content",
|
|
ui: {
|
|
component: MonacoCodeEditor,
|
|
format: (val?: string) => val?.replaceAll("�", " "),
|
|
parse: (val?: string) => val?.replaceAll(" ", "�"),
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: "number",
|
|
name: "initialSelectedIndex",
|
|
label: "Initial Selected Index",
|
|
description:
|
|
"The index of the tab to select by default, starting from 0.",
|
|
},
|
|
],
|
|
};
|
|
|
|
export default CodeTabsTemplate;
|