fix: Disable pointer events when readonly

src/components/Controls/Base.vue

@@ -54,7 +54,8 @@ export default {
       let classes = [
         {
           'px-3 py-2': this.size !== 'small',
-          'px-2 py-1': this.size === 'small'
+          'px-2 py-1': this.size === 'small',
+          'pointer-events-none': this.isReadOnly
         },
         'focus:outline-none focus:bg-gray-200 rounded w-full text-gray-900 placeholder-gray-400'
       ];

src/components/Controls/Table.vue

@@ -19,6 +19,7 @@
     </Row>
     <div class="overflow-auto" :style="{ 'max-height': rowContainerHeight }">
       <TableRow
+        :class="{ 'pointer-events-none': isReadOnly }"
         ref="table-row"
         v-for="row in value"
         :key="row.name"