WIP - permissions

frontend/components/ui/checkbox/Checkbox.vue

@@ -1,30 +1,59 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Check } from "lucide-vue-next"
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<CheckboxRootEmits>()
+interface Props {
+  checked?: boolean
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+  id?: string
+  class?: HTMLAttributes['class']
+}
 
-const delegatedProps = reactiveOmit(props, "class")
+const props = withDefaults(defineProps<Props>(), {
+  checked: false,
+  disabled: false,
+  required: false,
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const emit = defineEmits<{
+  'update:checked': [value: boolean]
+}>()
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:checked', target.checked)
+}
 </script>
 
 <template>
-  <CheckboxRoot
-    v-bind="forwarded"
-    :class="
-      cn('grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-         props.class)"
-  >
-    <CheckboxIndicator class="grid place-content-center text-current">
-      <slot>
-        <Check class="h-4 w-4" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
+  <div class="relative inline-flex items-center">
+    <input
+      type="checkbox"
+      :id="props.id"
+      :checked="props.checked"
+      :disabled="props.disabled"
+      :required="props.required"
+      :name="props.name"
+      :value="props.value"
+      @change="handleChange"
+      :class="
+        cn(
+          'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
+          'appearance-none bg-background',
+          'checked:bg-primary checked:border-primary',
+          props.class
+        )
+      "
+    />
+    <Check 
+      v-if="props.checked" 
+      class="absolute h-4 w-4 text-primary-foreground pointer-events-none" 
+      :class="{ 'opacity-50': props.disabled }"
+    />
+  </div>
 </template>