@ouestfrance/sipa-bms-ui 8.11.0 → 8.12.0

package/dist/sipa-bms-ui.css

@@ -1171,14 +1171,14 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
 }
 .tag .dismiss-button[data-v-e2517fee] .bms-button:hover {
   background-color: var(--tag-background-color);
-}.field__input[data-v-95176719] {
+}.field__input[data-v-6231389d] {
   --field-border-color: var(--bms-grey-50);
   --field-border-color-active: var(--bms-main-100);
   --input-background-color: var(--bms-white);
 }
-.field__input .select-wrapper[data-v-95176719] {
+.field__input .select-wrapper[data-v-6231389d] {
   width: 100%;
-  padding: 0 0 0 1em;
+  padding: 0 0 0 var(--field-padding);
   border-radius: var(--bms-border-radius);
   border: 1px solid var(--field-border-color);
   background-color: var(--input-background-color);
@@ -1187,30 +1187,17 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   align-items: center;
   justify-content: space-between;
 }
-.field__input .select-wrapper .icon-down-container[data-v-95176719] {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.field__input .select-wrapper .icon-down-container[data-v-95176719]:hover {
-  cursor: pointer;
-}
-.field__input .select-wrapper .icon-down-button[data-v-95176719] {
-  width: 1em;
-  margin: 0 var(--field-padding);
-  display: block;
-}
-.field__input .select-wrapper[data-v-95176719]:hover {
+.field__input .select-wrapper[data-v-6231389d]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.field__input .select-wrapper[data-v-95176719]:has(input:focus) {
+.field__input .select-wrapper[data-v-6231389d]:has(input:focus) {
   --field-border-color: var(--field-border-color-active);
 }
-.field__input .select-wrapper.is-error[data-v-95176719] {
+.field__input .select-wrapper.is-error[data-v-6231389d] {
   --field-border-color: var(--bms-red-100);
   --input-background-color: var(--bms-red-25);
 }
-.field__input .select-wrapper.is-disabled[data-v-95176719] {
+.field__input .select-wrapper.is-disabled[data-v-6231389d] {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
   pointer-events: none;
@@ -1242,51 +1229,20 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   margin: 0 1em 0 0.5em;
 }.clean-icon[data-v-66c267f2]:hover {
   cursor: pointer;
-}.field__input[data-v-108de415] {
-  --field-border-color: var(--bms-grey-50);
-  --field-border-color-active: var(--bms-main-100);
-  --input-background-color: var(--bms-white);
-}
-.field__input .select-wrapper[data-v-108de415] {
-  width: 100%;
-  padding: 0 0 0 1em;
-  border-radius: var(--bms-border-radius);
-  border: 1px solid var(--field-border-color);
-  background-color: var(--input-background-color);
-  min-height: var(--field-height);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.field__input .select-wrapper .icon-toggle-container[data-v-108de415] {
+}.field__input .icon-toggle-container[data-v-a6c01476] {
   height: 100%;
   display: flex;
   align-items: center;
 }
-.field__input .select-wrapper .icon-toggle-container[data-v-108de415]:hover {
+.field__input .icon-toggle-container[data-v-a6c01476]:hover {
   cursor: pointer;
 }
-.field__input .select-wrapper .icon-toggle-button[data-v-108de415] {
+.field__input .icon-toggle-button[data-v-a6c01476] {
   width: 1em;
   margin: 0 var(--field-padding);
   display: block;
 }
-.field__input .select-wrapper[data-v-108de415]:hover {
-  --field-border-color: var(--bms-grey-100);
-}
-.field__input .select-wrapper[data-v-108de415]:has(input:focus) {
-  --field-border-color: var(--field-border-color-active);
-}
-.field__input .select-wrapper.is-error[data-v-108de415] {
-  --field-border-color: var(--bms-red-100);
-  --input-background-color: var(--bms-red-25);
-}
-.field__input .select-wrapper.is-disabled[data-v-108de415] {
-  --field-border-color: var(--bms-grey-25);
-  --input-background-color: var(--bms-grey-25);
-  pointer-events: none;
-}
-.field__input .select-wrapper input[data-v-108de415] {
+.field__input input[data-v-a6c01476] {
   border: none;
   background-color: transparent;
   caret-color: transparent;
@@ -3174,7 +3130,6 @@ section {
 .field__wrapper {
   display: inline-block;
   position: relative;
-  min-width: 24rem;
   width: 100%;
   background-color: transparent;
 }
@@ -3214,7 +3169,7 @@ section {
   display: none;
 }
 .field.is-small {
-  --field-height: 28px;
+  --field-height: 1.5em;
   --field-padding: 0.5em;
   --field-margin: 0;
   --field-label-font-weight: normal;

package/dist/sipa-bms-ui.es.js

@@ -68623,7 +68623,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const RawSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-95176719"]]);
+const RawSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-6231389d"]]);
 
 const _hoisted_1$F = { class: "tags" };
 const _hoisted_2$q = ["disabled"];
@@ -86164,7 +86164,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-108de415"]]);
+const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-a6c01476"]]);
 
 const _hoisted_1$D = ["value", "required", "placeholder", "disabled"];
 const _sfc_main$L = /* @__PURE__ */ defineComponent({

package/dist/sipa-bms-ui.umd.js

@@ -68626,7 +68626,7 @@
     }
   });
 
-  const RawSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-95176719"]]);
+  const RawSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-6231389d"]]);
 
   const _hoisted_1$F = { class: "tags" };
   const _hoisted_2$q = ["disabled"];
@@ -86167,7 +86167,7 @@
     }
   });
 
-  const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-108de415"]]);
+  const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-a6c01476"]]);
 
   const _hoisted_1$D = ["value", "required", "placeholder", "disabled"];
   const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.11.0",
+  "version": "8.12.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/form/BmsSelect.vue

@@ -106,74 +106,38 @@ defineExpose({
 
 <style lang="scss" scoped>
 .field__input {
-  --field-border-color: var(--bms-grey-50);
-  --field-border-color-active: var(--bms-main-100);
-  --input-background-color: var(--bms-white);
+  .icon-toggle {
+    &-container {
+      height: 100%;
+      display: flex;
+      align-items: center;
 
-  .select-wrapper {
-    width: 100%;
-    padding: 0 0 0 1em;
-    border-radius: var(--bms-border-radius);
-    border: 1px solid var(--field-border-color);
-    background-color: var(--input-background-color);
-    min-height: var(--field-height);
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .icon-toggle {
-      &-container {
-        height: 100%;
-        display: flex;
-        align-items: center;
-
-        &:hover {
-          cursor: pointer;
-        }
+      &:hover {
+        cursor: pointer;
       }
-      &-button {
-        width: 1em;
-        margin: 0 var(--field-padding);
-        display: block;
-      }
-    }
-
-    &:hover {
-      --field-border-color: var(--bms-grey-100);
-    }
-
-    &:has(input:focus) {
-      --field-border-color: var(--field-border-color-active);
     }
-
-    &.is-error {
-      --field-border-color: var(--bms-red-100);
-      --input-background-color: var(--bms-red-25);
-    }
-
-    &.is-disabled {
-      --field-border-color: var(--bms-grey-25);
-      --input-background-color: var(--bms-grey-25);
-      pointer-events: none;
+    &-button {
+      width: 1em;
+      margin: 0 var(--field-padding);
+      display: block;
     }
+  }
 
-    input {
-      border: none;
-      background-color: transparent;
-      caret-color: transparent;
-      cursor: pointer;
-      outline: none;
-      appearance: none;
-      margin: 0;
-      padding: 0;
-      font: inherit;
-      color: inherit;
-      height: 24px;
-      line-height: 1;
-      width: 100%;
-      height: 100%;
-    }
+  input {
+    border: none;
+    background-color: transparent;
+    caret-color: transparent;
+    cursor: pointer;
+    outline: none;
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    height: 24px;
+    line-height: 1;
+    width: 100%;
+    height: 100%;
   }
 }
 </style>

package/src/components/form/RawSelect.vue

@@ -61,7 +61,7 @@ const selectItem = (option: any) => {
 
   .select-wrapper {
     width: 100%;
-    padding: 0 0 0 1em;
+    padding: 0 0 0 var(--field-padding);
     border-radius: var(--bms-border-radius);
     border: 1px solid var(--field-border-color);
     background-color: var(--input-background-color);
@@ -71,23 +71,6 @@ const selectItem = (option: any) => {
     align-items: center;
     justify-content: space-between;
 
-    .icon-down {
-      &-container {
-        height: 100%;
-        display: flex;
-        align-items: center;
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-      &-button {
-        width: 1em;
-        margin: 0 var(--field-padding);
-        display: block;
-      }
-    }
-
     &:hover {
       --field-border-color: var(--bms-grey-100);
     }

package/src/plugins/field/FieldComponent.vue

@@ -152,7 +152,6 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
   &__wrapper {
     display: inline-block;
     position: relative;
-    min-width: 24rem;
     width: 100%;
     background-color: transparent;
   }
@@ -202,10 +201,11 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
   }
 
   &.is-small {
-    --field-height: 28px;
+    --field-height: 1.5em;
     --field-padding: 0.5em;
     --field-margin: 0;
     --field-label-font-weight: normal;
+
     .field__captions {
       margin-top: 0.5rem;
     }