Merge pull request #183 from asigloo/feature/readonly-attr

feat(input): added readonly attr

Author: alvarosabu

dev/typescript/App.vue

@@ -97,6 +97,7 @@ export default defineComponent({
         'color',
         'customField1',
         'customStyles',
+        'readonly',
       ],
       fields: {
         name: {
@@ -109,16 +110,10 @@ export default defineComponent({
           label: 'Email',
           type: 'email',
           validations: [emailValidator],
-          /*      customClass: 'active text-red', */
           customClass: {
             active: true,
             'text-blue': true,
           },
-          /* customClass: {
-            active: true,
-            'text-blue': true,
-          }, */
-          /*  customClass: ['active', 'text-red'], */
         } as EmailInput,
         password: {
           label: 'Password',
@@ -208,6 +203,12 @@ export default defineComponent({
             border: '1px solid teal',
           },
         } as TextInput,
+        readonly: {
+          label: 'Readonly',
+          type: 'text',
+          value: 'Alvaro',
+          readonly: true,
+        } as TextInput,
       },
     });
 

src/components/number-input/NumberInput.vue

@@ -26,6 +26,7 @@ export default defineComponent({
         disabled: props?.control?.disabled,
         placeholder: props?.control?.placeholder,
         required: props.control.required,
+        readonly: props?.control.readonly,
         autocomplete: props.control.autocomplete,
         ariaLabel: props.control.ariaLabel,
         ariaLabelledBy: props.control.ariaLabelledBy,

src/components/select-input/SelectInput.vue

@@ -22,12 +22,15 @@ export default defineComponent({
         {
           id: props.control.name,
           name: props?.control?.name || '',
+          class: ['form-control'],
+          value: props?.control?.value,
           disabled: props?.control?.disabled,
           placeholder: props?.control?.placeholder,
           required: props.control.required,
+          readonly: props?.control.readonly,
+          ariaLabel: props.control.ariaLabel,
+          ariaLabelledBy: props.control.ariaLabelledBy,
           ariaRequired: props.control.required,
-          class: ['form-control'],
-          value: props?.control?.value,
           onFocus,
           onBlur,
           onChange,

src/components/text-area-input/TextAreaInput.vue

@@ -24,6 +24,7 @@ export default defineComponent({
         placeholder: props?.control?.placeholder,
         required: props.control.required,
         autocomplete: props.control.autocomplete,
+        readonly: props?.control.readonly,
         ariaLabel: props.control.ariaLabel,
         ariaLabelledBy: props.control.ariaLabelledBy,
         ariaRequired: props.control.required,

src/components/text-input/TextInput.vue

@@ -32,6 +32,7 @@ export default defineComponent({
         disabled: props.control.disabled,
         placeholder: props.control.placeholder,
         required: props.control.required,
+        readonly: props?.control.readonly,
         autocomplete: props.control.autocomplete,
         ariaRequired: props.control.required,
         ariaLabel: props.control.ariaLabel,

src/core/models.ts

@@ -54,6 +54,7 @@ export interface InputBase {
   customStyles?: string | string[] | BindingObject | BindingObject[] | unknown;
   placeholder?: string;
   autocomplete?: string;
+  readonly?: boolean;
   validations?: FormValidation[];
 }