@xlink-tools/fx
v1.0.8
Published
## ⭐️ xlink-tools 集成工具集
Downloads
5
Readme
xlink-tools
⭐️ xlink-tools 集成工具集
Fx
<script setup>
import { Fx } from '@xlink-tools/fx'
import { ultraman } from '@xlink-tools/lang-ultraman'
import { oneDark } from '@codemirror/theme-one-dark'
const consoleLog = console.log
const config = reactive({
disabled: false,
indentWithTab: true,
tabSize: 2,
autofocus: true,
placeholder: 'input...',
backgroundColor: 'red',
language: ultraman(),
theme: oneDark,
phrases: 'en-us',
})
function handleReady(payload) {
consoleLog('handleReady payload:', payload)
}
</script>
<template>
<Fx
ref="cm"
v-model="code"
class="codemirror"
:autofocus="config.autofocus"
:placeholder="config.placeholder"
:indent-with-tab="config.indentWithTab"
:tab-size="config.tabSize"
:disabled="config.disabled"
:style="{ backgroundColor: config.backgroundColor }"
:phrases="'en-us'"
:extensions="[config.language]"
@ready="handleReady"
@change="consoleLog('change', $event)"
@focus="consoleLog('focus', $event)"
@blur="consoleLog('blur', $event)"
/>
</template>
Flow
<script setup>
import Flow from '@xlink-tools/flow'
import CustomNode from './CustomNode.vue'
const nodes = ref([
{
id: '1',
label: 'node 1',
type: 'custom'
},
{
id: '2',
label: 'node 2',
},
])
</script>
<template>
<Flow v-model="nodes">
<template #node-custom="props">
<CustomNode v-bind="props"/>
</template>
</Flow>
</template>
Background
<script setup>
import { Flow } from '@xlink-tools/flow'
import { Background } from '@xlink-tools/background'
const nodes = ref([{ id: '1', label: 'node 1'}])
</script>
<template>
<Flow v-model="nodes">
<Background />
</Flow>
</template>
Terminal
<script setup>
import { reactive } from 'vue'
import Terminal, { vDrag, vResize } from '@xlink-tools/terminal'
const options = reactive({
fontSize: 12,
theme: {
background: '#141414',
},
cursorBlink: true,
})
</script>
<template>
<div v-resize class="container">
<div v-drag class="header">Terminal</div>
<div class="content">
<Terminal url="ws://192.168.1.126:30001" :xtermOptions="options"/>
</div>
</div>
</template>