Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <script setup lang="ts">
import type { NodeProps } from '@vue-flow/core'
import { Globe, Send } from 'lucide-vue-next'
import BaseNode from '@/components/nodes/BaseNode.vue'
interface HttpNodeData {
label?: string
method?: string
url?: string
}
const props = defineProps<NodeProps<HttpNodeData>>()
const emit = defineEmits<{
'open-config': []
'test-node': []
'updateNodeInternals': [nodeId: string]
}>()
</script>
<template>
<BaseNode
:node-props="props"
node-class="http-node"
default-label="HTTP Request"
action-button-tooltip="Test Node"
@open-config="emit('open-config')"
@action-button="emit('test-node')"
@updateNodeInternals="emit('updateNodeInternals', $event)"
>
<template #icon>
<Globe :size="24" />
<Send :size="12" class="icon-decoration" />
</template>
<template #badge>
<div v-if="props.data?.method" class="method-badge">
{{ props.data.method }}
</div>
</template>
</BaseNode>
</template>
<style lang="scss">
@use '@/styles/nodes/base' as *;
$node-color: var(--rf-color-success);
.http-node {
@include node-handle($node-color);
.node-body {
@include node-glass($node-color);
&:hover {
box-shadow:
0 6px 20px rgba($node-color, 0.3),
inset 0 0 0 1px rgba($node-color, 0.2);
}
}
.node-icon {
@include node-icon(var(--rf-size-icon-md), var(--rf-gradient-success));
}
}
</style>
<style lang="scss" scoped>
$node-color: var(--rf-color-success);
.icon-decoration {
position: absolute;
bottom: calc(var(--rf-spacing-3xs) * -1);
right: calc(var(--rf-spacing-3xs) * -1);
color: var(--rf-color-primary);
}
.method-badge {
font-size: var(--rf-font-size-xs);
font-weight: var(--rf-font-weight-semibold);
color: $node-color;
background: rgba($node-color, var(--rf-opacity-overlay));
padding: var(--rf-spacing-3xs) var(--rf-spacing-xs);
border-radius: var(--rf-radius-small);
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
</style>
|