<template>
  <label v-if="label.visible" :class="styles.label.root">
    {{ label.text }}
  </label>
</template>

<script lang="ts">
import {
  type JsonFormsRendererRegistryEntry,
  type LabelElement,
  rankWith,
  uiTypeIs,
} from "@jsonforms/core";
import { defineComponent } from "vue";
import { rendererProps, type RendererProps, useJsonFormsLabel } from "@jsonforms/vue";
import { useVanillaLabel } from "../util";

const labelRenderer = defineComponent({
  name: "LabelRenderer",
  props: {
    ...rendererProps<LabelElement>(),
  },
  setup(props: RendererProps<LabelElement>) {
    return useVanillaLabel(useJsonFormsLabel(props));
  },
});

export default labelRenderer;

export const entry: JsonFormsRendererRegistryEntry = {
  renderer: labelRenderer,
  tester: rankWith(1, uiTypeIs("Label")),
};
</script>
