add label directly without computedLabel, add "required" style class,…

… move tests
eclipsesource · Feb 12, 2024 · b613637 · b613637
1 parent a9c5155
commit b613637
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 40 deletions.
diff --git 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 }}<span v-if="showAsterisk" :class="styles.control.asterisk">*</span>
+    <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,16 +78,9 @@ export default defineComponent({
         !!this.appliedOptions?.showUnfocusedDescription
       );
     },
-    computedLabel(): string {
-      return computeLabel(
-        this.label,
-        this.required,
-        true
-      );
-    },
-    showAsterisk():  boolean {
+    showAsterisk(): boolean {
       return this.required && !this.appliedOptions?.hideRequiredAsterisk;
-    }
+    },
   },
 });
 </script>
diff --git a/packages/vue-vanilla/src/styles/defaultStyles.ts b/packages/vue-vanilla/src/styles/defaultStyles.ts
@@ -12,6 +12,7 @@ export const defaultStyles: Styles = {
     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
@@ -26,6 +26,7 @@ export interface Styles {
     select?: string;
     option?: string;
     asterisk?: string;
+    required?: string;
   };
   dialog: {
     root?: string;

diff --git a/packages/vue-vanilla/tests/unit/complex/ObjectRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/ObjectRenderer.spec.ts
@@ -20,24 +20,6 @@ const uischema = {
   type: 'Control',
   scope: '#',
 };
-
-const schemaRequired = {
-  type: "object",
-  properties: {
-    a: {
-      type: 'string',
-    },
-  },
-  required: ["a"]
-};
-const uischemaRequired = {
-  type: 'Control',
-  scope: '#/properties/a',
-  options: {
-    "hideRequiredAsterisk": true
-  }
-};
-
 describe('ObjectRenderer.vue', () => {
   it('renders a fieldset', () => {
     const wrapper = mountJsonForms(
@@ -66,14 +48,4 @@ describe('ObjectRenderer.vue', () => {
     const inputs = wrapper.findAll('input');
     expect(inputs.length).to.equal(2);
   });
-
-  it('renders a string input with an asterisk', () => {
-    const wrapper = mountJsonForms('a', schemaRequired, uischema);
-    expect(wrapper.find('label span.asterisk').exists()).to.be.true;
-  });
-
-  it('renders a string input but hide asterisk', () => {
-    const wrapper = mountJsonForms('a', schemaRequired, uischemaRequired);
-    expect(wrapper.find('label span.asterisk').exists()).to.be.false;
-  });
 });
diff --git 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;
+  });
 });