jsonforms/packages/vue-vanilla/src/controls/ControlWrapper.vue at acce4cd78a7acc7d59b2ca6e701a77d0251323ea · eclipsesource/jsonforms · GitHub

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
  <component
    :is="customControlWrapper.component"
    v-bind="customControlWrapper.props"
    v-if="visible && customControlWrapper && customControlWrapper.component"
  >
    <slot></slot>
  </component>

  <div v-else-if="visible" :id="id" :class="styles.control.root">
    <label :for="id + '-input'" :class="styles.control.label">
      {{ computedLabel }}
    </label>
    <div :class="styles.control.wrapper">
      <slot></slot>
    </div>
    <div :class="errors ? styles.control.error : styles.control.description">
      {{ errors ? errors : showDescription ? description : null }}
    </div>
  </div>
</template>

<script lang="ts">
import { isDescriptionHidden, computeLabel } from '@jsonforms/core';
import { defineComponent, inject, PropType } from 'vue';
import { Styles } from '../styles';
import { type CustomControllWrapper, Options } from '../util';

export default defineComponent({
  name: 'ControlWrapper',
  props: {
    id: {
      required: true,
      type: String,
    },
    description: {
      required: false as const,
      type: String,
      default: undefined,
    },
    errors: {
      required: false as const,
      type: String,
      default: undefined,
    },
    label: {
      required: false as const,
      type: String,
      default: undefined,
    },
    appliedOptions: {
      required: false as const,
      type: Object as PropType<Options>,
      default: undefined,
    },
    visible: {
      required: false as const,
      type: Boolean,
      default: true,
    },
    required: {
      required: false as const,
      type: Boolean,
      default: false,
    },
    isFocused: {
      required: false as const,
      type: Boolean,
      default: false,
    },
    styles: {
      required: true,
      type: Object as PropType<Styles>,
    },
  },
  setup(props: any) {
    const customControlWrapper = inject<CustomControllWrapper | undefined>(
      'custom-control-wrapper',
      undefined
    );
    if (customControlWrapper?.component) {
      customControlWrapper.props = { ...props, ...customControlWrapper?.props };
    }

    return { customControlWrapper };
  },
  computed: {
    showDescription(): boolean {
      return !isDescriptionHidden(
        this.visible,
        this.description,
        this.isFocused,
        !!this.appliedOptions?.showUnfocusedDescription
      );
    },
    computedLabel(): string {
      return computeLabel(
        this.label,
        this.required,
        !!this.appliedOptions?.hideRequiredAsterisk
      );
    },
  },
});
</script>