From 2e1854d92e10881acecaee59e5fb576c1b2921b0 Mon Sep 17 00:00:00 2001
From: Dave Www <david@dampfer.net>
Date: Mon, 12 Feb 2024 15:58:47 +0100
Subject: [PATCH] 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
---
 .../src/controls/ControlWrapper.vue           | 18 ++++++-------
 .../vue-vanilla/src/styles/defaultStyles.ts   |  2 ++
 packages/vue-vanilla/src/styles/styles.ts     |  2 ++
 .../controls/StringControlRenderer.spec.ts    | 27 +++++++++++++++++++
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/vue-vanilla/src/controls/ControlWrapper.vue b/packages/vue-vanilla/src/controls/ControlWrapper.vue
index 666331b5e5..7b28f06514 100644
--- a/packages/vue-vanilla/src/controls/ControlWrapper.vue
+++ b/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;
     },
   },
 });
diff --git a/packages/vue-vanilla/src/styles/defaultStyles.ts b/packages/vue-vanilla/src/styles/defaultStyles.ts
index fac72ccb27..2c623c45a0 100644
--- a/packages/vue-vanilla/src/styles/defaultStyles.ts
+++ b/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',
diff --git a/packages/vue-vanilla/src/styles/styles.ts b/packages/vue-vanilla/src/styles/styles.ts
index eb3ad1d67c..8b8eeed940 100644
--- a/packages/vue-vanilla/src/styles/styles.ts
+++ b/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;
diff --git a/packages/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts b/packages/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts
index ec0a872914..cf5a130217 100644
--- a/packages/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts
+++ b/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;
+  });
 });