initial

layers/ui/components/checkbox/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    :class="[
+      cn.b(),
+      cn.is('checked', checked),
+      cn.is('invalid', invalid),
+      cn.is('disabled', disabled),
+      cn.is('focused', focused),
+      cn.has('label', hasLabel),
+    ]"
+  >
+    <label :class="[cn.e('wrapper')]">
+      <input
+        :name="id"
+        :class="[cn.e('input')]"
+        type="checkbox"
+        :disabled="disabled"
+        :checked="checked"
+        @focus="focused = true"
+        @blur="focused = false"
+        @change="handleChange"
+      >
+
+      <UiIconSCheck :class="[cn.e('checkmark')]" />
+
+      <p :class="[cn.e('label')]">
+        <slot>{{ label }}</slot>
+      </p>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue'
+import useClassname from '../../composables/use-classname'
+
+export interface Props {
+  id: string
+  label?: string
+  disabled?: boolean
+  modelValue?: boolean | string | number
+  trueValue?: boolean | string | number
+  falseValue?: boolean | string | number
+  required?: boolean
+}
+
+defineOptions({
+  name: 'UiCheckbox',
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  trueValue: true,
+  falseValue: false,
+  required: false,
+  modelValue: undefined,
+})
+
+defineEmits<{
+  'update:modelValue': [state: boolean | string | number]
+  focus: []
+  blur: []
+}>()
+
+const slots = useSlots()
+
+const cn = useClassname('ui-checkbox')
+
+const { checked, invalid, focused, hasLabel, handleChange } = useCheckbox(props, slots)
+</script>
+
+<style lang="scss">
+@use 'styles';
+</style>