<template>
  <div v-show="!hiddenComputed">
    <slot />
  </div>
</template>

<script>
import components from './_import-components/sd-transient-field-helper-import'

export default {
  name: 'SdTransientFieldHelper',
  components,
  props: {
    field: {
      type: Object,
      default: undefined,
    },
  },
  data() {
    return {}
  },
  computed: {
    hiddenComputed() {
      return this.SdFormContext.displayExprResults[this.field.name] === false
    },
  },
  watch: {
    hiddenComputed: {
      immediate: true,
      handler(val) {
        this.$emit('hiddenChange', val)
      },
    },
  },
  created() {
    this.SdFormContext.transientFields.push(this.field)
  },
  inject: {
    SdFormContext: { default: () => ({}) },
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
