Fix/select component

src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.css

@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   font-family: var(--primary-font);
-  font-size: 14px;
   cursor: pointer;
   user-select: none;
   :after,
@@ -14,32 +13,32 @@
   }
   /* custom CHECKMARK */
   .bimdata-checkbox__mark {
-    width: 13px;
-    height: 13px;
+    aspect-ratio: 1 / 1;
+    width: 100%;
+    height: auto;
     position: relative;
     top: 0;
     left: 0;
     border: solid 1px var(--color-primary);
     border-radius: 2px;
     box-sizing: border-box;
     &::after {
-      width: 4px;
-      height: 7px;
+      width: 40%;
+      height: 60%;
       content: '';
       display: block;
       position: absolute;
-      top: 1px;
-      left: 3px;
+      top: 5%;
+      left: 30%;
       border: solid transparent;
       opacity: 0;
       transform: rotate(45deg);
     }
   }
   /* custom TEXT CHECKBOX */
   .bimdata-checkbox__text {
-    width: calc(100% - 13px - 5px);
     margin-left: 6px;
-    font-size: 12px;
+    font-size: inherit;
   }
   /* custom DARK CHECKBOX */
   &.dark {

src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue

@@ -6,7 +6,7 @@
     :style="style"
     v-bind="$attrs"
   >
-    <span class="bimdata-checkbox__mark"></span>
+    <span class="bimdata-checkbox__mark" :style="checkboxStyle"></span>
     <span class="bimdata-checkbox__text" v-if="text">
       <slot>{{ text }}</slot>
     </span>
@@ -42,6 +42,10 @@ export default {
       type: String,
       default: "0px",
     },
+    fontSize: {
+      type: [String, Number],
+      default: "12px",
+    },
   },
   emits: ["update:modelValue"],
   computed: {
@@ -54,6 +58,22 @@ export default {
     style() {
       return {
         margin: `${this.margin}`,
+        fontSize: this.fontSize
+          ? typeof this.fontSize === "number"
+            ? `${this.fontSize}px`
+            : this.fontSize
+          : null,
+      };
+    },
+    checkboxStyle() {
+      const size =
+        typeof this.fontSize === "number"
+          ? `${this.fontSize}px`
+          : this.fontSize;
+
+      return {
+        width: `clamp(14px, calc(${size} * 1.1), 20px)`,
+        height: `clamp(14px, calc(${size} * 1.1), 20px)`,
       };
     },
     isDark() {

src/BIMDataComponents/BIMDataSelect/BIMDataSelect.css

@@ -5,16 +5,18 @@
   user-select: none;
 
   & .bimdata-select__content {
-    height: 32px;
+    height: 100%;
     border-radius: 50px;
 
     & .bimdata-select__content__value {
       padding: 0 12px;
-      height: 32px;
+      height: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
+      z-index: 2;
+      position: relative;
 
       span {
         height: auto;
@@ -26,11 +28,18 @@
 
     & .bimdata-select__content__label {
       position: absolute;
-      top: 8px;
+      top: 50%; 
       left: 12px;
+      transform: translateY(-50%);
       font-size: 12px;
       transition: 0.2s ease all;
-      transition: 0.2s ease all;
+    }
+
+    & .bimdata-select__content__placeholder {
+      position: absolute;
+      top: 50%; 
+      left: 12px;
+      transform: translateY(-50%);
     }
   }
 
@@ -46,6 +55,7 @@
         left: 0;
         font-size: 10px;
         color: var(--color-primary);
+        transform: none;
       }
     }
   }
@@ -61,12 +71,13 @@
     background-color: var(--color-white);
 
     & .bimdata-select__option-list__entry {
-      height: 29px;
+      min-height: 29px;
       padding: 0 var(--spacing-unit);
       display: flex;
       align-items: center;
       font-size: 12px;
       cursor: pointer;
+      line-height: 2;
 
       &:hover {
         background-color: var(--color-silver-light);
@@ -100,6 +111,7 @@
     }
 
     &.rounded-element {
+      border-radius: 18px;
       .bimdata-select__option-list__entry {
         border-radius: 50px;
       }
@@ -240,6 +252,42 @@
       }
     }
   }
+  &.tertiary-darker {
+    .bimdata-select__content {
+      background-color: var(--color-tertiary-darker);
+      .bimdata-select__content__label {
+        color: var(--color-white);
+      }
+      .bimdata-select__content__value {
+        color: var(--color-white);
+      }
+    }
+    &.active {
+      .bimdata-select__content {
+        .bimdata-select__content__value, .bimdata-select__content__label {
+          color: var(--color-white);
+        }
+      }
+      .bimdata-select__option-list {
+        .bimdata-select__option-list__entry {
+          &.selected, &:hover {
+            background-color: #e7f0f5;
+          }
+        }
+      }
+    }
+    &.dark {
+      .bimdata-select__option-list {
+        background-color: var(--color-tertiary-darker);
+        color: var(--color-white);
+        .bimdata-select__option-list__entry {
+          &.selected, &:hover {
+            background-color: #234254;
+          }
+        }
+      }
+    }
+  }
   &.tertiary-light {
     .bimdata-select__content {
       background-color: var(--color-tertiary-lighter);

src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue

@@ -18,6 +18,10 @@ export default {
       type: [String, Number],
       default: "100%",
     },
+    height: {
+      type: [String, Number],
+      default: "32px",
+    },
     label: {
       type: String,
       default: null,
@@ -64,9 +68,7 @@ export default {
           ...props,
           "onUpdate:modelValue": event => emit("update:modelValue", event),
         },
-        {
-          empty: () => slots.empty?.(),
-        },
+        slots,
       );
   },
 };

src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue

@@ -4,26 +4,40 @@
     :class="{
       disabled,
       active: isOpen,
-      dark: isDark,
       'not-empty': modelValue.length > 0,
+      dark: isDark,
       [color]: true,
     }"
-    :style="{ width }"
+    :style="{ width, height, fontSize }"
     v-clickaway="away"
   >
     <div class="bimdata-select__content">
       <div class="bimdata-select__content__value" @click="toggle">
         <span class="m-r-6">{{ displayedValue }}</span>
-        <BIMDataIconChevron size="xxs" :rotate="isOpen ? 90 : 0" />
+        <slot name="contentRight">
+          <BIMDataIconChevron size="xxs" :rotate="isOpen ? 90 : 0" />
+        </slot>
       </div>
-      <label class="bimdata-select__content__label">
+      <label v-if="showLabel" class="bimdata-select__content__label">
+        <slot name="labelLeft"></slot>
         {{ label }}
+        <slot name="labelRight"></slot>
+      </label>
+      <label
+        v-if="shouldDisplayPlaceholder"
+        class="bimdata-select__content__placeholder"
+      >
+        <slot name="placeholder">{{ placeholder }}</slot>
       </label>
       <span class="bimdata-select__content__underline"></span>
     </div>
 
     <transition name="slide-fade-down">
-      <div v-show="!disabled && isOpen" class="bimdata-select__option-list" :class="{ 'rounded-element': isSelectedAndHoveredElementsRounded }">
+      <div
+        v-show="!disabled && isOpen"
+        class="bimdata-select__option-list"
+        :class="{ 'rounded-element': isSelectedAndHoveredElementsRounded }"
+      >
         <BIMDataSearch
           v-if="search"
           width="calc(100% - 12px)"
@@ -47,6 +61,7 @@
               'option-group': isOptionGroup(option),
             }"
             @click="onOptionClick(option)"
+            :style="{ fontSize }"
           >
             <template v-if="isOptionGroup(option)">
               {{ optionLabel(option) }}
@@ -56,6 +71,8 @@
               :modelValue="isSelected(option)"
               :disabled="isDisabled(option)"
               :text="optionLabel(option)"
+              :style="{ fontSize }"
+              :fontSize="fontSize"
             ></BIMDataCheckbox>
           </li>
         </ul>
@@ -93,7 +110,16 @@ export default {
       type: String,
       default: "default",
       validator: value =>
-        ["default", "primary", "secondary", "tertiary", "tertiary-light", "quaternary", "white"].includes(value),
+        [
+          "default",
+          "primary",
+          "secondary",
+          "tertiary",
+          "tertiary-light",
+          "tertiary-darker",
+          "quaternary",
+          "white",
+        ].includes(value),
     },
     disabled: {
       type: Boolean,
@@ -109,6 +135,10 @@ export default {
     nullLabel: {
       type: String,
     },
+    showLabel: {
+      type: Boolean,
+      default: true,
+    },
     options: {
       type: Array,
       default: () => [],
@@ -119,6 +149,10 @@ export default {
     optionLabelKey: {
       type: String,
     },
+    placeholder: {
+      type: String,
+      default: null,
+    },
     resetOnLeave: {
       type: Boolean,
       default: false,
@@ -131,7 +165,13 @@ export default {
       type: String,
       default: "primary",
       validator: value =>
-        ["primary", "secondary", "tertiary", "quaternary", "quaternary-light"].includes(value),
+        [
+          "primary",
+          "secondary",
+          "tertiary",
+          "quaternary",
+          "quaternary-light",
+        ].includes(value),
     },
     searchPlaceholder: {
       type: String,
@@ -140,6 +180,10 @@ export default {
     width: {
       type: [String, Number],
     },
+    height: {
+      type: [String, Number],
+    },
+    fontSize: [String, Number],
     isSelectedAndHoveredElementsRounded: {
       type: Boolean,
       default: false,
@@ -153,6 +197,9 @@ export default {
     };
   },
   computed: {
+    shouldDisplayPlaceholder() {
+      return !this.showLabel && this.modelValue.length === 0 && !this.isOpen;
+    },
     displayedValue() {
       return this.modelValue.map(this.optionLabel).join(", ");
     },