feat: expose required/disabled/readonly props in form fields config c…

…lass, closes #166
liip · Mar 8, 2022 · 0f353a0 · 0f353a0
1 parent b94bfcf
commit 0f353a0
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 14 deletions.
diff --git a/packages/chusho/lib/components/CCheckbox/CCheckbox.spec.js b/packages/chusho/lib/components/CCheckbox/CCheckbox.spec.js
@@ -11,8 +11,8 @@ describe('CCheckbox', () => {
             options: {
               components: {
                 checkbox: {
-                  class: ({ checked }) => {
-                    return { checked };
+                  class: ({ checked, disabled, required }) => {
+                    return { checked, disabled, required };
                   },
                 },
               },
@@ -22,10 +22,12 @@ describe('CCheckbox', () => {
       },
       props: {
         modelValue: true,
+        disabled: true,
+        required: true,
       },
     });
 
-    expect(wrapper.classes()).toEqual(['checked']);
+    expect(wrapper.classes()).toEqual(['checked', 'disabled', 'required']);
   });
 
   it('renders with correct attributes by default', () => {
@@ -34,6 +36,19 @@ describe('CCheckbox', () => {
     expect(wrapper.html()).toEqual('<input type="checkbox">');
   });
 
+  it('apply flags as attributes to the input', () => {
+    const wrapper = mount(CCheckbox, {
+      props: {
+        required: true,
+        disabled: true,
+      },
+    });
+
+    expect(wrapper.html()).toEqual(
+      '<input type="checkbox" required="" disabled="">'
+    );
+  });
+
   it('renders with extra attributes', () => {
     const wrapper = mount(CCheckbox, {
       attrs: {

diff --git a/packages/chusho/lib/components/CCheckbox/CCheckbox.ts b/packages/chusho/lib/components/CCheckbox/CCheckbox.ts
@@ -1,6 +1,7 @@
 import { defineComponent, h, mergeProps } from 'vue';
 
 import componentMixin from '../mixins/componentMixin';
+import fieldMixin from '../mixins/fieldMixin';
 
 import useComponentConfig from '../../composables/useComponentConfig';
 
@@ -9,7 +10,7 @@ import { ALL_TYPES, generateConfigClass } from '../../utils/components';
 export default defineComponent({
   name: 'CCheckbox',
 
-  mixins: [componentMixin],
+  mixins: [componentMixin, fieldMixin],
 
   inheritAttrs: false,
 

diff --git a/packages/chusho/lib/components/CRadio/CRadio.spec.js b/packages/chusho/lib/components/CRadio/CRadio.spec.js
@@ -11,8 +11,8 @@ describe('CRadio', () => {
             options: {
               components: {
                 radio: {
-                  class: ({ checked }) => {
-                    return { checked };
+                  class: ({ checked, disabled, required }) => {
+                    return { checked, disabled, required };
                   },
                 },
               },
@@ -23,10 +23,12 @@ describe('CRadio', () => {
       props: {
         modelValue: 'foo',
         value: 'foo',
+        disabled: true,
+        required: true,
       },
     });
 
-    expect(wrapper.classes()).toEqual(['checked']);
+    expect(wrapper.classes()).toEqual(['checked', 'disabled', 'required']);
   });
 
   it('renders with correct attributes by default', () => {
@@ -39,6 +41,20 @@ describe('CRadio', () => {
     expect(wrapper.html()).toEqual('<input type="radio" value="true">');
   });
 
+  it('apply flags as attributes to the input', () => {
+    const wrapper = mount(CRadio, {
+      props: {
+        value: 'value',
+        required: true,
+        disabled: true,
+      },
+    });
+
+    expect(wrapper.html()).toEqual(
+      '<input type="radio" required="" disabled="" value="value">'
+    );
+  });
+
   it('renders with extra attributes', () => {
     const wrapper = mount(CRadio, {
       props: {

diff --git a/packages/chusho/lib/components/CRadio/CRadio.ts b/packages/chusho/lib/components/CRadio/CRadio.ts
@@ -1,6 +1,7 @@
 import { defineComponent, h, mergeProps } from 'vue';
 
 import componentMixin from '../mixins/componentMixin';
+import fieldMixin from '../mixins/fieldMixin';
 
 import useComponentConfig from '../../composables/useComponentConfig';
 
@@ -9,7 +10,7 @@ import { ALL_TYPES, generateConfigClass } from '../../utils/components';
 export default defineComponent({
   name: 'CRadio',
 
-  mixins: [componentMixin],
+  mixins: [componentMixin, fieldMixin],
 
   inheritAttrs: false,
 

diff --git a/packages/chusho/lib/components/CTextField/CTextField.spec.js b/packages/chusho/lib/components/CTextField/CTextField.spec.js
@@ -11,16 +11,28 @@ describe('CTextField', () => {
             options: {
               components: {
                 textField: {
-                  class: 'field',
+                  class({ required, disabled, readonly }) {
+                    return ['field', { required, disabled, readonly }];
+                  },
                 },
               },
             },
           },
         },
       },
+      props: {
+        required: true,
+        disabled: true,
+        readonly: true,
+      },
     });
 
-    expect(wrapper.classes()).toEqual(['field']);
+    expect(wrapper.classes()).toEqual([
+      'field',
+      'required',
+      'disabled',
+      'readonly',
+    ]);
   });
 
   it('renders with type “text” by default', () => {
@@ -39,6 +51,20 @@ describe('CTextField', () => {
     expect(wrapper.attributes('type')).toEqual('email');
   });
 
+  it('apply flags as attributes to the input', () => {
+    const wrapper = mount(CTextField, {
+      props: {
+        required: true,
+        disabled: true,
+        readonly: true,
+      },
+    });
+
+    expect(wrapper.html()).toEqual(
+      '<input type="text" required="" disabled="" readonly="">'
+    );
+  });
+
   it('forwards random attributes to the input', () => {
     const wrapper = mount(CTextField, {
       attrs: {

diff --git a/packages/chusho/lib/components/CTextField/CTextField.ts b/packages/chusho/lib/components/CTextField/CTextField.ts
@@ -1,6 +1,7 @@
 import { defineComponent, h, mergeProps } from 'vue';
 
 import componentMixin from '../mixins/componentMixin';
+import textFieldMixin from '../mixins/textFieldMixin';
 
 import useComponentConfig from '../../composables/useComponentConfig';
 
@@ -9,7 +10,7 @@ import { generateConfigClass } from '../../utils/components';
 export default defineComponent({
   name: 'CTextField',
 
-  mixins: [componentMixin],
+  mixins: [componentMixin, textFieldMixin],
 
   inheritAttrs: false,
 

diff --git a/packages/chusho/lib/components/CTextarea/CTextarea.spec.js b/packages/chusho/lib/components/CTextarea/CTextarea.spec.js
@@ -11,16 +11,42 @@ describe('CTextarea', () => {
             options: {
               components: {
                 textarea: {
-                  class: 'field',
+                  class({ required, disabled, readonly }) {
+                    return ['field', { required, disabled, readonly }];
+                  },
                 },
               },
             },
           },
         },
       },
+      props: {
+        required: true,
+        disabled: true,
+        readonly: true,
+      },
     });
 
-    expect(wrapper.classes()).toEqual(['field']);
+    expect(wrapper.classes()).toEqual([
+      'field',
+      'required',
+      'disabled',
+      'readonly',
+    ]);
+  });
+
+  it('apply flags as attributes to the input', () => {
+    const wrapper = mount(CTextarea, {
+      props: {
+        required: true,
+        disabled: true,
+        readonly: true,
+      },
+    });
+
+    expect(wrapper.html()).toEqual(
+      '<textarea required="" disabled="" readonly=""></textarea>'
+    );
   });
 
   it('forwards random attributes to the textarea', () => {

diff --git a/packages/chusho/lib/components/CTextarea/CTextarea.ts b/packages/chusho/lib/components/CTextarea/CTextarea.ts
@@ -1,6 +1,7 @@
 import { defineComponent, h, mergeProps } from 'vue';
 
 import componentMixin from '../mixins/componentMixin';
+import textFieldMixin from '../mixins/textFieldMixin';
 
 import useComponentConfig from '../../composables/useComponentConfig';
 
@@ -9,7 +10,7 @@ import { generateConfigClass } from '../../utils/components';
 export default defineComponent({
   name: 'CTextarea',
 
-  mixins: [componentMixin],
+  mixins: [componentMixin, textFieldMixin],
 
   inheritAttrs: false,
 

diff --git a/packages/chusho/lib/components/mixins/fieldMixin.ts b/packages/chusho/lib/components/mixins/fieldMixin.ts
@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    /**
+     * Set the HTML disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
+
+    /**
+     * Set the HTML required attribute
+     */
+    required: {
+      type: Boolean,
+      default: null,
+    },
+  },
+});
diff --git a/packages/chusho/lib/components/mixins/textFieldMixin.ts b/packages/chusho/lib/components/mixins/textFieldMixin.ts
@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue';
+
+import fieldMixin from './fieldMixin';
+
+export default defineComponent({
+  mixins: [fieldMixin],
+
+  props: {
+    /**
+     * Set the HTML readonly attribute
+     */
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
+  },
+});