1,506th Commit

app/src/routes/(backstage)/(library)/data-entry/checkboxes/+page.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { reactive, watch } from 'vue';
-import { XBreadcrumb, XCard, XCheckbox } from '@x/ui';
+import { XBreadcrumb, XCard, XCodeBlock, XCheckbox } from '@x/ui';
+
+import Basic from './Basic.vue';
+import BasicCode from './Basic.vue?raw';
 
 const flux = reactive({
   checkbox1: false,
@@ -43,9 +46,10 @@ watch(
     <h2 class="text-3xl font-bold my-4">Basic</h2>
 
     <XCard>
-      <XCheckbox v-model:value="flux.checkbox1">Checkbox 1</XCheckbox>
-      <div class="mt-1">{{ flux.checkbox1 }}</div>
+      <Basic />
     </XCard>
+
+    <XCodeBlock :code="BasicCode" language="vue" />
   </section>
 
   <section class="my-8">

app/src/routes/(backstage)/(library)/data-entry/checkboxes/Basic.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { XCheckbox } from '@x/ui';
+
+const value = ref(false);
+</script>
+
+<template>
+  <XCheckbox v-model:value="value" label="Example label" />
+
+  <div class="flex gap-1 mt-1">
+    Output:
+    <pre>{{ value }}</pre>
+  </div>
+</template>

ui/src/components/checkbox/Checkbox.vue

@@ -4,6 +4,7 @@ import { computed } from 'vue';
 import uniqueId from 'lodash/uniqueId';
 
 interface Props extends /* @vue-ignore */ InputHTMLAttributes {
+  label?: string;
   value?: boolean;
   checked?: boolean;
   indeterminate?: boolean;
@@ -58,6 +59,7 @@ const uid = uniqueId('uid-');
       </div>
 
       <div class="Checkbox-Text">
+        {{ label }}
         <slot></slot>
       </div>
     </label>

ui/src/components/form-control/FormControl.vue

@@ -11,7 +11,7 @@ const uid = uniqueId('uid-');
 <template>
   <div class="flex flex-col w-full">
     <div v-if="label" class="flex items-center text-sm mb-1">
-      <label :for="uid" class="inline-flex font-bold empty:hidden">{{ label }} </label>
+      <label :for="uid" class="inline-flex font-bold empty:hidden">{{ label }}</label>
       <span v-if="required" class="text-red-500 ms-0.5">*</span>
       <slot name="label"></slot>
     </div>