big-model-web/src/views/workflow/instance/component/vars/vars-select.vue

<template>
  <div class="vars-select">
    <varsPopover
      :node="node"
      @setVars="(val) => ((state.vars = val), $emit('setVars', val))"
    >
      <div
        class="vars-display __hover"
        @mouseenter="state.hovering = true"
        @mouseleave="state.hovering = false"
      >
        <varsValue :vars="state.vars" />
        <div class="del" v-if="state.hovering && state.vars && clearable">
          <SvgIcon
            name="czr_close_1"
            size="10"
            color="rgba(0, 0, 0, 0.5)"
            class="__hover"
            @click.stop="((state.vars = null), $emit('setVars', null))"
          />
        </div>
      </div>
    </varsPopover>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, reactive, ref, watch } from 'vue'
import varsValue from './vars-value.vue'
import varsPopover from './vars-popover.vue'

const emit = defineEmits(['setVars'])
const props = defineProps({
  node: {},
  vars: { default: null },
  clearable: { default: true },
})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  vars: props.vars,
  hovering: false,
})
</script>

<style lang="scss" scoped>
@use '@/views/workflow/instance/component/style';

.vars-display {
  border: style.$borderStyle;
  width: 100%;
  padding: 4px 4px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: style.$inputBg;
  .del {
    position: absolute;
    right: 0;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>