fix checkbox component structure

add to pattern library
xmmedia · Oct 17, 2024 · 0b483a0 · 0b483a0
1 parent 0de226f
commit 0b483a0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/public/js/src/admin/pattern_library/index.vue b/public/js/src/admin/pattern_library/index.vue
@@ -161,6 +161,10 @@
                     </div>
                     <div class="field-help">Some help…</div>
                 </div>
+                <FieldCheckbox v-model="checkboxValue">
+                    Checkbox label
+                    <template #help>Some help…</template>
+                </FieldCheckbox>
                 <div class="field-wrap">
                     <div class="field-wrap-checkbox">
                         <input id="pattern-library-checkbox-2"
@@ -816,6 +820,7 @@
 import { ref } from 'vue';
 import { useHead } from '@unhead/vue';
 import FieldRadios from '@/common/field_radios.vue';
+import FieldCheckbox from '@/common/field_checkbox.vue';
 import FieldCheckboxes from '@/common/field_checkboxes.vue';
 import RecordList from '@/common/record_list.vue';
 

diff --git a/public/js/src/common/field_checkbox.vue b/public/js/src/common/field_checkbox.vue
@@ -1,11 +1,13 @@
 <template>
-    <div class="field-wrap field-wrap-checkbox">
-        <FieldError v-if="v" :v="v">
-            <template #required><slot name="required"></slot></template>
-        </FieldError>
+    <div class="field-wrap">
+        <div class="field-wrap-checkbox">
+            <FieldError v-if="v" :v="v">
+                <template #required><slot name="required"></slot></template>
+            </FieldError>
 
-        <input :id="id" v-model="checked" type="checkbox" :value="true">
-        <label :for="id"><slot></slot></label>
+            <input :id="id" v-model="checked" type="checkbox" :value="true">
+            <label :for="id"><slot></slot></label>
+        </div>
 
         <div v-if="!!$slots.help" class="field-help"><slot name="help"></slot></div>
     </div>