All files / web/src/components/nodes/python PythonNode.vue

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import type { NodeProps } from '@vue-flow/core'
import { Code } from 'lucide-vue-next'
import { computed } from 'vue'
import BaseNode from '@/components/nodes/BaseNode.vue'
 
interface PythonNodeData {
  label?: string
  code?: string
  dependencies?: string[]
}
 
const props = defineProps<NodeProps<PythonNodeData>>()
const emit = defineEmits<{
  'open-config': []
  'test-node': []
  'updateNodeInternals': [nodeId: string]
}>()
 
const depCount = computed(() => props.data?.dependencies?.length || 0)
</script>
 
<template>
  <BaseNode
    :node-props="props"
    node-class="python-node"
    default-label="Python"
    action-button-tooltip="Test Script"
    @open-config="emit('open-config')"
    @action-button="emit('test-node')"
    @updateNodeInternals="emit('updateNodeInternals', $event)"
  >
    <template #icon>
      <Code :size="24" />
    </template>
 
    <template #badge>
      <div class="dep-count">
        {{ depCount > 0 ? `${depCount} deps` : 'Python 3.12' }}
      </div>
    </template>
  </BaseNode>
</template>
 
<style lang="scss">
@use '@/styles/nodes/base' as *;
 
$node-color: var(--rf-color-green);
 
.python-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-green));
  }
}
</style>
 
<style lang="scss" scoped>
$node-color: var(--rf-color-green);
 
.dep-count {
  font-size: var(--rf-font-size-xs);
  color: var(--rf-color-text-secondary);
  padding: var(--rf-spacing-3xs) var(--rf-spacing-xs);
  background: rgba($node-color, var(--rf-opacity-overlay));
  border-radius: var(--rf-radius-small);
  display: inline-block;
}
</style>