v5.0.0 update

resources/scripts/components/base/BaseCheckbox.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="relative flex items-start">
+    <div class="flex items-center h-5">
+      <input
+        :id="id"
+        v-model="checked"
+        v-bind="$attrs"
+        :disabled="disabled"
+        type="checkbox"
+        :class="[checkboxClass, disabledClass]"
+      />
+    </div>
+    <div class="ml-3 text-sm">
+      <label
+        v-if="label"
+        :for="id"
+        :class="`font-medium ${
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
+        } cursor-pointer `"
+      >
+        {{ label }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: [Boolean, Array],
+    default: false,
+  },
+  id: {
+    type: [Number, String],
+    default: () => `check_${Math.random().toString(36).substr(2, 9)}`,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  checkboxClass: {
+    type: String,
+    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer',
+  },
+  setInitialValue: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+if (props.setInitialValue) {
+  emit('update:modelValue', props.modelValue)
+}
+
+const checked = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+    emit('change', value)
+  },
+})
+
+const disabledClass = computed(() => {
+  if (props.disabled) {
+    return 'text-gray-300 cursor-not-allowed'
+  }
+
+  return 'text-primary-600 focus:ring-primary-500'
+})
+</script>