fix: disable and readonly to work (#238)

src/components/Checkbox/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="inline-block">
     <label class="grid grid-cols-[1fr,auto] items-center">
-      <input :id="cuid" v-model="isChecked" type="checkbox" class="hidden" />
+      <input
+        :id="cuid"
+        v-model="isChecked"
+        type="checkbox"
+        class="hidden"
+        :disabled="props.disabled || props.readonly"
+      />
       <div
         class="relative mr-2 box-content h-4 w-4 flex-shrink-0 flex-grow-0 rounded border text-white transition-all duration-100"
         :class="[
@@ -19,16 +25,15 @@
       </div>
       <div class="w-full select-none">
         {{ title }}
-        <slot name="title"/>
+        <slot name="title" />
       </div>
 
       <div v-if="description || $slots.description"></div>
 
       <p v-if="description || $slots.description" class="opacity-60 text-sm">
         {{ description }}
-        <slot name="description"/>
+        <slot name="description" />
       </p>
-
     </label>
   </div>
 </template>
@@ -62,6 +67,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['update:modelValue', 'change']);
 

src/components/Select/index.vue

@@ -171,6 +171,9 @@ onClickOutside(elementRef, (event) => {
 });
 
 function openDropdown(event) {
+  if (props.readonly || props.disabled) {
+    return;
+  }
   open.value = true;
   sortOptionsBySelected();
   nextTick(() => {
@@ -339,6 +342,7 @@ function deselectAll() {
       :class="[condensed ? 'pl-2' : 'pl-3']"
     >
       <PhCaretDown
+        v-if="!readonly && !disabled"
         :size="14"
         weight="bold"
         class="transition-transform duration-200"

src/components/Switch/index.vue

@@ -1,6 +1,11 @@
 <template>
   <label class="flex items-center gap-x-3">
-    <input v-model="isChecked" class="hidden" type="checkbox" />
+    <input
+      v-model="isChecked"
+      class="hidden"
+      type="checkbox"
+      :disabled="props.readonly"
+    />
     <div
       type="checkbox"
       class="duration-250 relative box-content h-4 w-8 rounded-2xl border-4 transition-colors"
@@ -39,6 +44,10 @@ const props = defineProps({
     type: [Boolean, Number, String, Object],
     required: true,
   },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'change', 'input']);