feat: create own element for asterisk and add class in vue vanilla co…

…ntrolWrapper eclipsesource#2238
davewwww · Feb 9, 2024 · 7c9a8b7 · 7c9a8b7
1 parent 5c6806f
commit 7c9a8b7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/packages/vue-vanilla/src/controls/ControlWrapper.vue b/packages/vue-vanilla/src/controls/ControlWrapper.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="visible" :id="id" :class="styles.control.root">
     <label :for="id + '-input'" :class="styles.control.label">
-      {{ computedLabel }}
+      {{ computedLabel }}<span v-if="showAsterisk" :class="styles.control.asterisk">*</span>
     </label>
     <div :class="styles.control.wrapper">
       <slot></slot>
@@ -78,9 +78,12 @@ export default defineComponent({
       return computeLabel(
         this.label,
         this.required,
-        !!this.appliedOptions?.hideRequiredAsterisk
+        true
       );
     },
+    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
@@ -11,6 +11,7 @@ export const defaultStyles: Styles = {
     textarea: 'text-area',
     select: 'select',
     option: 'option',
+    asterisk: 'asterisk',
   },
   verticalLayout: {
     root: 'vertical-layout',

diff --git a/packages/vue-vanilla/src/styles/styles.ts b/packages/vue-vanilla/src/styles/styles.ts
@@ -25,6 +25,7 @@ export interface Styles {
     textarea?: string;
     select?: string;
     option?: string;
+    asterisk?: 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
@@ -21,6 +21,23 @@ const uischema = {
   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(
@@ -49,4 +66,14 @@ 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;
+  });
 });