add extra slot in AtomCheckbox

arrogant-ant · Sep 26, 2024 · 6606c8c · 6606c8c
1 parent e0b845b
commit 6606c8c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/src/components/atoms/AtomCheckbox.vue b/src/components/atoms/AtomCheckbox.vue
@@ -10,6 +10,7 @@
             type="box-color"
         >
             {{ value }}
+            <slot name="extra"></slot>
         </b-checkbox>
     </div>
 </template>
@@ -42,8 +43,9 @@ export default {
 </script>
 
 <style>
-.block .b-checkbox.checkbox input[type=checkbox]:checked + .check.box-color {
-    background: var(--primary-color) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M.04.627L.146.52.43.804.323.91zm.177.177L.854.167.96.273.323.91z' fill='rgba(0,0,0,.7)'/%3E%3C/svg%3E");
+.block .b-checkbox.checkbox input[type='checkbox']:checked + .check.box-color {
+    background: var(--primary-color)
+        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M.04.627L.146.52.43.804.323.91zm.177.177L.854.167.96.273.323.91z' fill='rgba(0,0,0,.7)'/%3E%3C/svg%3E");
     border-color: var(--primary-color);
 }
 </style>
diff --git a/src/components/molecules/MoleculeCheckbox.vue b/src/components/molecules/MoleculeCheckbox.vue
@@ -11,8 +11,11 @@
             @change.native="handleChange"
             :values="values"
             class="mb-5"
-        ></AtomCheckbox>
-        <slot name="extra"></slot>
+        >
+            <template slot="extra">
+                <slot name="extra"></slot>
+            </template>
+        </AtomCheckbox>
         <span class="has-text-danger is-size-7">{{ errors[0] }}</span>
     </ValidationProvider>
 </template>

diff --git a/src/components/organisms/OrganismPreferenceForm.vue b/src/components/organisms/OrganismPreferenceForm.vue
@@ -30,13 +30,11 @@
             @data="updateTermsData"
         >
             <template v-slot:extra>
-                <p class="custom-terms">
-                    <a
-                        href="https://www.parkspot.in/terms-and-conditions"
-                        target="_blank"
-                        >T&C</a
-                    >
-                </p>
+                <a
+                    href="https://www.parkspot.in/terms-and-conditions"
+                    target="_blank"
+                    >T&C
+                </a>
             </template>
         </MoleculeCheckbox>
     </ValidationObserver>
@@ -122,10 +120,4 @@ export default {
     },
 };
 </script>
-<style lang="scss" scoped>
-.custom-terms {
-    position: absolute;
-    top: -2px;
-    left: 111px;
-}
-</style>
+<style lang="scss" scoped></style>