PATCH: Fix/select/component (#420)

* add rounded elements options for select component

* add documentation

Author: LrxGaelle

src/BIMDataComponents/BIMDataSelect/BIMDataSelect.css

@@ -98,6 +98,12 @@
         padding-left: calc(var(--spacing-unit) * 2);
       }
     }
+
+    &.rounded-element {
+      .bimdata-select__option-list__entry {
+        border-radius: 50px;
+      }
+    }
   }
 
   &.default {

src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue

@@ -50,6 +50,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isSelectedAndHoveredElementsRounded: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:modelValue"],
   setup(props, { emit, slots }) {

src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue

@@ -23,7 +23,7 @@
     </div>
 
     <transition name="slide-fade-down">
-      <div v-show="!disabled && isOpen" class="bimdata-select__option-list">
+      <div v-show="!disabled && isOpen" class="bimdata-select__option-list" :class="{ 'rounded-element': isSelectedAndHoveredElementsRounded }">
         <BIMDataSearch
           v-if="search"
           width="calc(100% - 12px)"
@@ -137,10 +137,13 @@ export default {
       type: String,
       default: "Search",
     },
-    
     width: {
       type: [String, Number],
     },
+    isSelectedAndHoveredElementsRounded: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:modelValue"],
   data() {

src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue

@@ -22,7 +22,7 @@
     </div>
 
     <transition name="slide-fade-down">
-      <div v-show="!disabled && isOpen" class="bimdata-select__option-list">
+      <div v-show="!disabled && isOpen" class="bimdata-select__option-list" :class="{ 'rounded-element': isSelectedAndHoveredElementsRounded }">
         <BIMDataSearch
           v-if="search"
           width="calc(100% - 12px)"
@@ -144,6 +144,10 @@ export default {
       validator: value =>
         ["primary", "secondary", "tertiary", "quaternary", "quaternary-light"].includes(value),
     },
+    isSelectedAndHoveredElementsRounded: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:modelValue"],
   data() {

src/web/views/Components/Select/Select.vue

@@ -13,6 +13,7 @@
             :disabled="isDisabled"
             :multi="isMulti"
             :search="search"
+            :isSelectedAndHoveredElementsRounded="isSelectedAndHoveredElementsRounded"
             width="200px"
             label="Selector label"
             :options="options"
@@ -80,6 +81,13 @@
               @update:modelValue="toggleClearSearch"
             />
           </div>
+          <div class="m-t-6">
+            <BIMDataCheckbox
+              text="Rounded selected and hovered elements"
+              :modelValue="isSelectedAndHoveredElementsRounded"
+              @update:modelValue="toggleSelectedAndHoveredElementsRounded"
+            />
+          </div>
 
           <div v-for="(setting, key) in colorSettings" :key="key">
             <BIMDataText
@@ -257,6 +265,7 @@ export default {
       eventsData,
       slotsData,
       search: false,
+      isSelectedAndHoveredElementsRounded: false,
       searchText: "",
       colorSettings: {
         color: {
@@ -317,6 +326,9 @@ export default {
     toggleClearSearch(value) {
       this.clearSearch = value;
     },
+    toggleSelectedAndHoveredElementsRounded(value) {
+      this.isSelectedAndHoveredElementsRounded = value;
+    },
     getEmptySlot() {
       if (this.isEmpty) {
         return "<template #empty>No result</template>";

src/web/views/Components/Select/props-data.js

@@ -57,13 +57,13 @@ export default [
   ],
   ["resetOnLeave", "Boolean", "false", "In multi-selection mode: clear search bar on click away."],
   ["search", "Boolean", "false", "Use this boolean to add a search bar."],
-  ["searchColor", "String", "primary", "Set the color of the search input. (e.g. 'primary', 'secondary', 'tertiary', 'quaternary')."],
+  ["searchColor", "String", "primary", "Set the color of the search input. (e.g. 'primary', 'secondary', 'tertiary', 'quaternary', 'quaternary-light')."],
   [
     "searchPlaceholder",
     "String",
     "Search",
     "Use this props to custom search placeholder.",
   ],  
   ["width", "[String, Number]", "100%", "Set the selector width."],
-
+  ["isSelectedAndHoveredElementsRounded", "Boolean", "false", "When true, selected and hovered elements have rounded borders."],
 ];