PATCH: feat(radio): add slot to customize radio button label

bimdata · Jun 19, 2024 · 5c9a44b · 5c9a44b
1 parent 9bde20e
commit 5c9a44b
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 56 deletions.
diff --git a/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue b/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue
@@ -10,10 +10,14 @@
     :disabled="disabled"
     @click="onClick"
   >
-    <div class="bimdata-radio__background" />
-    <div class="bimdata-radio__circle"></div>
-    <div class="bimdata-radio__dot"></div>
-    <span class="bimdata-radio__text">{{ text }}</span>
+    <div class="bimdata-radio__btn">
+      <div class="bimdata-radio__background" />
+      <div class="bimdata-radio__circle"></div>
+      <div class="bimdata-radio__dot"></div>
+    </div>
+    <div class="bimdata-radio__text">
+      <slot>{{ text }}</slot>
+    </div>
   </button>
 </template>
 

diff --git a/src/BIMDataComponents/BIMDataRadio/_BIMDataRadio.scss b/src/BIMDataComponents/BIMDataRadio/_BIMDataRadio.scss
@@ -14,10 +14,33 @@
   align-items: center;
   cursor: pointer;
 
+  &__btn {
+    position: relative;
+    width: 23px;
+    height: 23px;
+  }
+
   &__text {
     font-size: calculateEm(12px);
   }
 
+  &__background {
+    cursor: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    width: 23px;
+    height: 23px;
+    border: none;
+    border-radius: 50%;
+    outline: none;
+    opacity: 0;
+    transform: scale(1);
+    background-color: var(--color-granite);
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+  }
+
   &__circle,
   &__dot {
     content: '';
@@ -45,7 +68,25 @@
     transform: translate(5px, 5px) scale(0);
   }
 
+  &--checked {
+    .bimdata-radio__background {
+      background-color: var(--color-primary);
+    }
+    .bimdata-radio__circle {
+      border-color: var(--color-primary);
+    }
+    .bimdata-radio__dot {
+      background-color: var(--color-primary);
+      transform: translate(5px, 5px) scale(1);
+    }
+  }
+
   &--big {
+    .bimdata-radio__btn,
+    .bimdata-radio__background {
+      width: 30px;
+      height: 30px;
+    }
     .bimdata-radio__circle {
       width: 24px;
       height: 24px;
@@ -58,38 +99,6 @@
       top: 1px;
       left: 1px;
     }
-    .bimdata-radio__background {
-      width: 30px;
-      height: 30px;
-    }
-  }
-
-  // custom INPUT : radio button background
-  &__background {
-    cursor: inherit;
-    margin: 0;
-    width: 23px;
-    height: 23px;
-    border: none;
-    border-radius: 50%;
-    outline: none;
-    opacity: 0;
-    transform: scale(1);
-    background-color: var(--color-granite);
-    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
-  }
-
-  &--checked {
-    .bimdata-radio__background {
-      background-color: var(--color-primary);
-    }
-    .bimdata-radio__circle {
-      border-color: var(--color-primary);
-    }
-    .bimdata-radio__dot {
-      background-color: var(--color-primary);
-      transform: translate(5px, 5px) scale(1);
-    }
   }
 
   &:hover:not(.disabled) {

diff --git a/src/web/views/Components/Radio/Radio.vue b/src/web/views/Components/Radio/Radio.vue
@@ -15,31 +15,31 @@
             :text="text"
             value="v0"
             v-model="selectedValue"
-            :disabled="checkboxDisabledChecked"
-            :big="checkboxBigChecked"
+            :disabled="isDisabled"
+            :big="isBig"
           />
           <BIMDataRadio
             text="Mode 1"
             value="v1"
             v-model="selectedValue"
-            :disabled="checkboxDisabledChecked"
-            :big="checkboxBigChecked"
+            :disabled="isDisabled"
+            :big="isBig"
           />
           <BIMDataRadio
             text="Mode 2"
             value="v2"
             v-model="selectedValue"
-            :disabled="checkboxDisabledChecked"
-            :big="checkboxBigChecked"
+            :disabled="isDisabled"
+            :big="isBig"
           />
           <div style="width: 100%; padding: 36px; text-align: center">
             {{ `Selected Value: ${selectedValue}` }}
           </div>
         </template>
 
         <template #parameters>
-          <BIMDataCheckbox text="disabled" v-model="checkboxDisabledChecked" />
-          <BIMDataCheckbox text="big" v-model="checkboxBigChecked" />
+          <BIMDataCheckbox text="disabled" v-model="isDisabled" />
+          <BIMDataCheckbox text="big" v-model="isBig" />
           <BIMDataInput
             style="margin-top: 32px"
             v-model="text"
@@ -61,22 +61,22 @@
               text="{{ text }}"
               value="v0"
               v-model="selectedValue"
-              :disabled="{{ checkboxDisabledChecked }}"
-              :big="{{ checkboxBigChecked }}"
+              :disabled="{{ isDisabled }}"
+              :big="{{ isBig }}"
             /&gt;
             &lt;BIMDataRadio
               text="Mode 1"
               value="v1"
               v-model="selectedValue"
-              :disabled="{{ checkboxDisabledChecked }}"
-              :big="{{ checkboxBigChecked }}"
+              :disabled="{{ isDisabled }}"
+              :big="{{ isBig }}"
             /&gt;
             &lt;BIMDataRadio
               text="Mode 2"
               value="v2"
               v-model="selectedValue"
-              :disabled="{{ checkboxDisabledChecked }}"
-              :big="{{ checkboxBigChecked }}"
+              :disabled="{{ isDisabled }}"
+              :big="{{ isBig }}"
             /&gt;
           </pre>
         </template>
@@ -90,18 +90,26 @@
       </div>
 
       <div class="m-t-24">
-        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px"
-          >Events:</BIMDataText
-        >
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Events:
+        </BIMDataText>
         <BIMDataTable :columns="eventsData[0]" :rows="eventsData.slice(1)" />
       </div>
+
+      <div class="m-t-24">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Slots:
+        </BIMDataText>
+        <BIMDataTable :columns="slotsData[0]" :rows="slotsData.slice(1)" />
+      </div>
     </div>
   </main>
 </template>
 
 <script>
 import propsData from "./props-data.js";
 import eventsData from "./events-data.js";
+import slotsData from "./slots-data.js";
 
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 
@@ -113,15 +121,16 @@ export default {
     return {
       text: "Mode 0",
       selectedValue: null,
-      checkboxDisabledChecked: false,
-      checkboxBigChecked: false,
+      isDisabled: false,
+      isBig: false,
       propsData,
       eventsData,
+      slotsData,
     };
   },
   methods: {
     resetRadio() {
-      return (this.selectedValue = null);
+      this.selectedValue = null;
     },
   },
 };

diff --git a/src/web/views/Components/Radio/slots-data.js b/src/web/views/Components/Radio/slots-data.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+export default [
+  [ "Slot name", "Description" ],
+  [ "default", "Allow the customization of the radio button label (text)." ],
+];