vue-vanilla: Add css classes for required labels and the asterisk in ControlWrapper (#2274)

* feat: create own element for asterisk and add class in vue vanilla controlWrapper #2238
* add label directly without computedLabel, add "required" style class

Fix #2238

Author: davewwww

packages/vue-vanilla/src/controls/ControlWrapper.vue

@@ -1,7 +1,11 @@
 <template>
   <div v-if="visible" :id="id" :class="styles.control.root">
-    <label :for="id + '-input'" :class="styles.control.label">
-      {{ computedLabel }}
+    <label
+      :for="id + '-input'"
+      :class="[styles.control.label, required ? styles.control.required : '']"
+    >
+      {{ label }}
+      <span v-if="showAsterisk" :class="styles.control.asterisk">*</span>
     </label>
     <div :class="styles.control.wrapper">
       <slot></slot>
@@ -13,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { isDescriptionHidden, computeLabel } from '@jsonforms/core';
+import { isDescriptionHidden } from '@jsonforms/core';
 import { defineComponent, PropType } from 'vue';
 import { Styles } from '../styles';
 import { Options } from '../util';
@@ -74,12 +78,8 @@ export default defineComponent({
         !!this.appliedOptions?.showUnfocusedDescription
       );
     },
-    computedLabel(): string {
-      return computeLabel(
-        this.label,
-        this.required,
-        !!this.appliedOptions?.hideRequiredAsterisk
-      );
+    showAsterisk(): boolean {
+      return this.required && !this.appliedOptions?.hideRequiredAsterisk;
     },
   },
 });

packages/vue-vanilla/src/styles/defaultStyles.ts

@@ -11,6 +11,8 @@ export const defaultStyles: Styles = {
     textarea: 'text-area',
     select: 'select',
     option: 'option',
+    asterisk: 'asterisk',
+    required: 'required',
   },
   verticalLayout: {
     root: 'vertical-layout',

packages/vue-vanilla/src/styles/styles.ts

@@ -25,6 +25,8 @@ export interface Styles {
     textarea?: string;
     select?: string;
     option?: string;
+    asterisk?: string;
+    required?: string;
   };
   dialog: {
     root?: string;

packages/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts

@@ -13,6 +13,23 @@ const uischema = {
   },
 };
 
+const schemaRequired = {
+  type: 'object',
+  properties: {
+    a: {
+      type: 'string',
+    },
+  },
+  required: ['a'],
+};
+const uischemaRequired = {
+  type: 'Control',
+  scope: '#/properties/a',
+  options: {
+    hideRequiredAsterisk: true,
+  },
+};
+
 describe('StringControlRenderer.vue', () => {
   it('renders a string input', () => {
     const wrapper = mountJsonForms('a', schema, uischema);
@@ -37,4 +54,14 @@ describe('StringControlRenderer.vue', () => {
     const placeholder = input.attributes('placeholder');
     expect(placeholder).to.equal('string placeholder');
   });
+
+  it('should have a lable with required class and asterisk symbol', () => {
+    const wrapper = mountJsonForms('a', schemaRequired, uischema);
+    expect(wrapper.find('label.required span.asterisk').exists()).to.be.true;
+  });
+
+  it('should have a lable with required class but asterisk symbol is hidden', () => {
+    const wrapper = mountJsonForms('a', schemaRequired, uischemaRequired);
+    expect(wrapper.find('label.required span.asterisk').exists()).to.be.false;
+  });
 });