@ouestfrance/sipa-bms-ui 7.14.1 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +18 -12
  2. package/dist/components/form/BmsAutocomplete.vue.d.ts +8 -8
  3. package/dist/components/form/BmsInputText.vue.d.ts +13 -13
  4. package/dist/components/form/BmsSearch.vue.d.ts +13 -13
  5. package/dist/components/form/BmsSelect.vue.d.ts +9 -9
  6. package/dist/components/form/RawAutocomplete.vue.d.ts +30 -21
  7. package/dist/components/form/RawInputText.vue.d.ts +6 -6
  8. package/dist/components/navigation/UiTenantSwitcher.vue.d.ts +13 -13
  9. package/dist/components/table/BmsTableFilters.vue.d.ts +13 -13
  10. package/dist/mockServiceWorker.js +1 -1
  11. package/dist/models/form.model.d.ts +6 -0
  12. package/dist/plugins/field/FieldDatalist.spec.d.ts +1 -0
  13. package/dist/plugins/field/FieldDatalist.vue.d.ts +13 -12
  14. package/dist/sipa-bms-ui.css +81 -73
  15. package/dist/sipa-bms-ui.es.js +3405 -3315
  16. package/dist/sipa-bms-ui.es.js.map +1 -1
  17. package/dist/sipa-bms-ui.umd.js +3404 -3314
  18. package/dist/sipa-bms-ui.umd.js.map +1 -1
  19. package/package.json +13 -13
  20. package/src/components/form/BmsAutocomplete.vue +14 -8
  21. package/src/components/form/BmsSelect.spec.ts +5 -14
  22. package/src/components/form/BmsSelect.vue +8 -52
  23. package/src/components/form/RawAutocomplete.spec.ts +20 -17
  24. package/src/components/form/RawAutocomplete.vue +56 -53
  25. package/src/components/layout/BmsForm.stories.js +1 -1
  26. package/src/components/layout/BmsForm.vue +9 -5
  27. package/src/components/layout/BmsForm_retrocompat.stories.js +32 -0
  28. package/src/components/table/BmsTableFilters.vue +2 -2
  29. package/src/components/table/UiBmsTable.vue +4 -1
  30. package/src/models/form.model.ts +7 -0
  31. package/src/pages/Form.stories.js +37 -37
  32. package/src/plugins/field/FieldDatalist.spec.ts +35 -0
  33. package/src/plugins/field/FieldDatalist.stories.js +10 -0
  34. package/src/plugins/field/FieldDatalist.vue +85 -7
  35. package/src/showroom/pages/autocomplete.vue +7 -0
  36. package/src/showroom/pages/forms.vue +1 -1
@@ -485,7 +485,7 @@
485
485
  position: relative;
486
486
  display: inline-block;
487
487
  outline: none;
488
- }ul[data-v-739cbe9f] {
488
+ }ul[data-v-4f63af62] {
489
489
  border-style: none;
490
490
  border-radius: 0 0 4px 4px;
491
491
  text-decoration: none;
@@ -493,18 +493,18 @@
493
493
  padding: 0;
494
494
  margin: 0;
495
495
  }
496
- ul li[data-v-739cbe9f]:first-of-type {
496
+ ul li[data-v-4f63af62]:first-of-type {
497
497
  border-top: 1px solid var(--bms-grey-10);
498
498
  }
499
- ul li[data-v-739cbe9f]:first-child {
499
+ ul li[data-v-4f63af62]:first-child {
500
500
  border-top-left-radius: var(--bms-border-radius);
501
501
  border-top-right-radius: var(--bms-border-radius);
502
502
  }
503
- ul li[data-v-739cbe9f]:last-child {
503
+ ul li[data-v-4f63af62]:last-child {
504
504
  border-bottom-left-radius: var(--bms-border-radius);
505
505
  border-bottom-right-radius: var(--bms-border-radius);
506
506
  }
507
- ul li[data-v-739cbe9f] {
507
+ ul li[data-v-4f63af62] {
508
508
  display: flex;
509
509
  align-items: center;
510
510
  cursor: pointer;
@@ -514,7 +514,7 @@ ul li[data-v-739cbe9f] {
514
514
  background-color: var(--bms-white);
515
515
  min-height: 4rem;
516
516
  }
517
- ul li[data-v-739cbe9f]:hover, ul li.selected[data-v-739cbe9f] {
517
+ ul li[data-v-4f63af62]:hover, ul li.selected[data-v-4f63af62] {
518
518
  background-color: var(--bms-grey-10);
519
519
  }.input-wrapper[data-v-bde31ca8] {
520
520
  display: flex;
@@ -582,7 +582,7 @@ ul li[data-v-739cbe9f]:hover, ul li.selected[data-v-739cbe9f] {
582
582
  line-height: 1;
583
583
  width: 100%;
584
584
  background-color: transparent;
585
- }.field__input .autocomplete-wrapper[data-v-52384854] {
585
+ }.field__input .autocomplete-wrapper[data-v-143805f2] {
586
586
  width: 100%;
587
587
  padding: 0.7em;
588
588
  margin: 0.5em 0;
@@ -591,22 +591,22 @@ ul li[data-v-739cbe9f]:hover, ul li.selected[data-v-739cbe9f] {
591
591
  background-color: var(--input-background-color);
592
592
  height: 48px;
593
593
  }
594
- .field__input .autocomplete-wrapper[data-v-52384854]:hover {
594
+ .field__input .autocomplete-wrapper[data-v-143805f2]:hover {
595
595
  --field-border-color: var(--bms-grey-100);
596
596
  }
597
- .field__input .autocomplete-wrapper[data-v-52384854]:has(input:focus) {
597
+ .field__input .autocomplete-wrapper[data-v-143805f2]:has(input:focus) {
598
598
  --field-border-color: var(--field-border-color-active);
599
599
  }
600
- .field__input .autocomplete-wrapper.is-error[data-v-52384854] {
600
+ .field__input .autocomplete-wrapper.is-error[data-v-143805f2] {
601
601
  --field-border-color: var(--bms-red-100);
602
602
  --input-background-color: var(--bms-red-25);
603
603
  }
604
- .field__input .autocomplete-wrapper.is-disabled[data-v-52384854] {
604
+ .field__input .autocomplete-wrapper.is-disabled[data-v-143805f2] {
605
605
  --field-border-color: var(--bms-grey-25);
606
606
  --input-background-color: var(--bms-grey-25);
607
607
  pointer-events: none;
608
608
  }
609
- .field__input .autocomplete-wrapper input[data-v-52384854] {
609
+ .field__input .autocomplete-wrapper input[data-v-143805f2] {
610
610
  outline: none;
611
611
  appearance: none;
612
612
  border: 0;
@@ -618,18 +618,23 @@ ul li[data-v-739cbe9f]:hover, ul li.selected[data-v-739cbe9f] {
618
618
  line-height: 1;
619
619
  width: 100%;
620
620
  background-color: transparent;
621
- }.icon[data-v-dd6c744e] {
621
+ }
622
+ .icon[data-v-143805f2] {
623
+ height: 1em;
624
+ width: 1em;
625
+ cursor: pointer;
626
+ }.icon[data-v-2adc5f5f] {
622
627
  height: 1em;
623
628
  width: 1em;
624
629
  }
625
- .icon.datalist-icon[data-v-dd6c744e] {
630
+ .icon.datalist-icon[data-v-2adc5f5f] {
626
631
  margin: 0 0.5em;
627
632
  }
628
- .icon[data-v-dd6c744e] svg {
633
+ .icon[data-v-2adc5f5f] svg {
629
634
  height: 100%;
630
635
  width: 100%;
631
636
  }
632
- .icon[data-v-dd6c744e] svg * {
637
+ .icon[data-v-2adc5f5f] svg * {
633
638
  fill: currentColor !important;
634
639
  }.field-between__separator[data-v-66be0ad9] {
635
640
  margin-left: 10px;
@@ -1080,12 +1085,12 @@ input[type=radio][data-v-cb26402d]:checked::before {
1080
1085
  cursor: var(--cursor);
1081
1086
  }.clean-icon[data-v-66c267f2]:hover {
1082
1087
  cursor: pointer;
1083
- }.field__input[data-v-b2231812] {
1088
+ }.field__input[data-v-32aead3c] {
1084
1089
  --field-border-color: var(--bms-grey-50);
1085
1090
  --field-border-color-active: var(--bms-main-100);
1086
1091
  --input-background-color: var(--bms-white);
1087
1092
  }
1088
- .field__input .select-wrapper[data-v-b2231812] {
1093
+ .field__input .select-wrapper[data-v-32aead3c] {
1089
1094
  width: 100%;
1090
1095
  padding: 0;
1091
1096
  margin: 0.5em 0;
@@ -1096,35 +1101,35 @@ input[type=radio][data-v-cb26402d]:checked::before {
1096
1101
  display: flex;
1097
1102
  align-items: center;
1098
1103
  }
1099
- .field__input .select-wrapper .icon-down-container[data-v-b2231812] {
1104
+ .field__input .select-wrapper .icon-down-container[data-v-32aead3c] {
1100
1105
  height: 100%;
1101
1106
  display: flex;
1102
1107
  align-items: center;
1103
1108
  }
1104
- .field__input .select-wrapper .icon-down-container[data-v-b2231812]:hover {
1109
+ .field__input .select-wrapper .icon-down-container[data-v-32aead3c]:hover {
1105
1110
  cursor: pointer;
1106
1111
  }
1107
- .field__input .select-wrapper .icon-down-button[data-v-b2231812] {
1112
+ .field__input .select-wrapper .icon-down-button[data-v-32aead3c] {
1108
1113
  width: 1em;
1109
1114
  margin: 0 1em 0 0.5em;
1110
1115
  display: block;
1111
1116
  }
1112
- .field__input .select-wrapper[data-v-b2231812]:hover {
1117
+ .field__input .select-wrapper[data-v-32aead3c]:hover {
1113
1118
  --field-border-color: var(--bms-grey-100);
1114
1119
  }
1115
- .field__input .select-wrapper[data-v-b2231812]:has(input:focus) {
1120
+ .field__input .select-wrapper[data-v-32aead3c]:has(input:focus) {
1116
1121
  --field-border-color: var(--field-border-color-active);
1117
1122
  }
1118
- .field__input .select-wrapper.is-error[data-v-b2231812] {
1123
+ .field__input .select-wrapper.is-error[data-v-32aead3c] {
1119
1124
  --field-border-color: var(--bms-red-100);
1120
1125
  --input-background-color: var(--bms-red-25);
1121
1126
  }
1122
- .field__input .select-wrapper.is-disabled[data-v-b2231812] {
1127
+ .field__input .select-wrapper.is-disabled[data-v-32aead3c] {
1123
1128
  --field-border-color: var(--bms-grey-25);
1124
1129
  --input-background-color: var(--bms-grey-25);
1125
1130
  pointer-events: none;
1126
1131
  }
1127
- .field__input .select-wrapper input[data-v-b2231812] {
1132
+ .field__input .select-wrapper input[data-v-32aead3c] {
1128
1133
  border: none;
1129
1134
  background-color: transparent;
1130
1135
  caret-color: transparent;
@@ -1348,17 +1353,17 @@ input[type=radio][data-v-cb26402d]:checked::before {
1348
1353
  position: absolute;
1349
1354
  border-radius: 50%;
1350
1355
  filter: blur(10px);
1351
- }.form-section[data-v-bc297639] {
1356
+ }.form-section[data-v-b5bab57e] {
1352
1357
  display: flex;
1353
1358
  flex-direction: column;
1354
1359
  gap: 1em;
1355
1360
  }
1356
- .form-section section[data-v-bc297639] {
1361
+ .form-section section[data-v-b5bab57e] {
1357
1362
  display: flex;
1358
1363
  flex-direction: column;
1359
1364
  gap: 0.5em;
1360
1365
  }
1361
- .form-section .actions[data-v-bc297639] {
1366
+ .form-section .actions[data-v-b5bab57e] {
1362
1367
  display: flex;
1363
1368
  align-items: center;
1364
1369
  justify-content: flex-end;
@@ -2062,13 +2067,13 @@ nav .additional[data-v-f1abaa99] {
2062
2067
  .bms-pagination__select[data-v-e10f3b80] .field__wrapper {
2063
2068
  min-width: 10em;
2064
2069
  width: 10em;
2065
- }.bms-table[data-v-9ea22d5f] {
2070
+ }.bms-table[data-v-54404d98] {
2066
2071
  --table-cell-padding: 1em;
2067
2072
  --table-cell-radius: var(--bms-border-radius-large);
2068
2073
  --dynamic-border-height: 2px;
2069
2074
  --table-border: 1px solid var(--bms-grey-10);
2070
2075
  }
2071
- .bms-table__loader[data-v-9ea22d5f] {
2076
+ .bms-table__loader[data-v-54404d98] {
2072
2077
  position: absolute;
2073
2078
  background: rgba(255, 255, 255, 0.72);
2074
2079
  inset: 0;
@@ -2078,100 +2083,103 @@ nav .additional[data-v-f1abaa99] {
2078
2083
  font-size: 3em;
2079
2084
  z-index: 10;
2080
2085
  }
2081
- .bms-table__actions[data-v-9ea22d5f] {
2086
+ .bms-table__actions[data-v-54404d98] {
2082
2087
  display: flex;
2083
2088
  align-items: center;
2084
2089
  justify-content: space-between;
2085
2090
  margin-bottom: 16px;
2086
2091
  }
2087
- .bms-table__actions__saved-filters[data-v-9ea22d5f] {
2092
+ .bms-table__actions__saved-filters[data-v-54404d98] {
2088
2093
  display: flex;
2089
2094
  align-items: center;
2090
2095
  flex-wrap: wrap;
2091
2096
  gap: 1em;
2092
2097
  }
2093
- .bms-table__actions__search[data-v-9ea22d5f] {
2098
+ .bms-table__actions__search[data-v-54404d98] {
2094
2099
  display: flex;
2095
2100
  align-items: center;
2096
2101
  gap: 1em;
2097
2102
  }
2098
- .bms-table__actions__custom[data-v-9ea22d5f] {
2103
+ .bms-table__actions__custom[data-v-54404d98] {
2099
2104
  display: flex;
2100
2105
  gap: 1em;
2101
2106
  }
2102
- .bms-table__actions__custom[data-v-9ea22d5f]:empty {
2107
+ .bms-table__actions__custom[data-v-54404d98]:empty {
2103
2108
  display: none;
2104
2109
  }
2105
- .bms-table__selected[data-v-9ea22d5f] {
2110
+ .bms-table__selected[data-v-54404d98] {
2106
2111
  margin-bottom: 1em;
2107
2112
  }
2108
- .bms-table__selected .select-mode-all[data-v-9ea22d5f] {
2113
+ .bms-table__selected .select-mode-all[data-v-54404d98] {
2109
2114
  cursor: pointer;
2110
2115
  color: var(--bms-main-100);
2111
2116
  }
2112
- .bms-table__cell--action[data-v-9ea22d5f] {
2117
+ .bms-table__cell__checkbox[data-v-54404d98] {
2118
+ width: 4em;
2119
+ }
2120
+ .bms-table__cell--action[data-v-54404d98] {
2113
2121
  display: flex;
2114
2122
  justify-content: end;
2115
2123
  }
2116
- .bms-table__cell--empty[data-v-9ea22d5f] {
2124
+ .bms-table__cell--empty[data-v-54404d98] {
2117
2125
  height: 360px;
2118
2126
  }
2119
- .bms-table__table[data-v-9ea22d5f] {
2127
+ .bms-table__table[data-v-54404d98] {
2120
2128
  width: 100%;
2121
2129
  border-spacing: 0 var(--dynamic-border-height);
2122
2130
  border-radius: var(--bms-border-radius-large);
2123
2131
  border: var(--table-border);
2124
2132
  position: relative;
2125
2133
  }
2126
- .bms-table__table-wrapper[data-v-9ea22d5f] {
2134
+ .bms-table__table-wrapper[data-v-54404d98] {
2127
2135
  position: relative;
2128
2136
  }
2129
- .bms-table__table thead[data-v-9ea22d5f] {
2137
+ .bms-table__table thead[data-v-54404d98] {
2130
2138
  position: sticky;
2131
2139
  z-index: 2;
2132
2140
  top: var(--header-height, 0);
2133
2141
  }
2134
- .bms-table__table--dense[data-v-9ea22d5f] {
2142
+ .bms-table__table--dense[data-v-54404d98] {
2135
2143
  --table-cell-padding: 0.5em 1em;
2136
2144
  }
2137
- .bms-table__table[data-v-9ea22d5f] tr td {
2145
+ .bms-table__table[data-v-54404d98] tr td {
2138
2146
  padding: var(--table-cell-padding);
2139
2147
  }
2140
- .bms-table__table[data-v-9ea22d5f] tr th {
2148
+ .bms-table__table[data-v-54404d98] tr th {
2141
2149
  --header-content-sort-icon-color: var(--bms-grey-25);
2142
2150
  --header-content-justify: start;
2143
2151
  width: var(--table-cell-width, auto);
2144
2152
  padding: var(--table-cell-padding);
2145
2153
  }
2146
- .bms-table__table[data-v-9ea22d5f] tr th.sortable:hover {
2154
+ .bms-table__table[data-v-54404d98] tr th.sortable:hover {
2147
2155
  --header-content-sort-icon-color: var(--bms-grey-100);
2148
2156
  cursor: pointer;
2149
2157
  }
2150
- .bms-table__table[data-v-9ea22d5f] tr th.u-text-align-start {
2158
+ .bms-table__table[data-v-54404d98] tr th.u-text-align-start {
2151
2159
  --header-content-justify: start;
2152
2160
  }
2153
- .bms-table__table[data-v-9ea22d5f] tr th.u-text-align-center {
2161
+ .bms-table__table[data-v-54404d98] tr th.u-text-align-center {
2154
2162
  --header-content-justify: center;
2155
2163
  }
2156
- .bms-table__table[data-v-9ea22d5f] tr th.u-text-align-end {
2164
+ .bms-table__table[data-v-54404d98] tr th.u-text-align-end {
2157
2165
  --header-content-justify: end;
2158
2166
  }
2159
- .bms-table__table[data-v-9ea22d5f] tr th.sorted {
2167
+ .bms-table__table[data-v-54404d98] tr th.sorted {
2160
2168
  --header-content-sort-icon-color: var(--bms-grey-100);
2161
2169
  }
2162
- .bms-table__table[data-v-9ea22d5f] tr th .header-content {
2170
+ .bms-table__table[data-v-54404d98] tr th .header-content {
2163
2171
  display: flex;
2164
2172
  align-items: center;
2165
2173
  justify-content: var(--header-content-justify);
2166
2174
  gap: 0.5em;
2167
2175
  }
2168
- .bms-table__table[data-v-9ea22d5f] tr th .header-content-sort {
2176
+ .bms-table__table[data-v-54404d98] tr th .header-content-sort {
2169
2177
  color: var(--header-content-sort-icon-color);
2170
2178
  }
2171
- .bms-table__footer[data-v-9ea22d5f] {
2179
+ .bms-table__footer[data-v-54404d98] {
2172
2180
  padding-top: 16px;
2173
2181
  }
2174
- .bms-table .blob[data-v-9ea22d5f] {
2182
+ .bms-table .blob[data-v-54404d98] {
2175
2183
  visibility: hidden;
2176
2184
  --table-blob-height: 80px;
2177
2185
  width: 200px;
@@ -2182,40 +2190,40 @@ nav .additional[data-v-f1abaa99] {
2182
2190
  z-index: -5;
2183
2191
  filter: blur(20px);
2184
2192
  }
2185
- .bms-table .blob.dense[data-v-9ea22d5f] {
2193
+ .bms-table .blob.dense[data-v-54404d98] {
2186
2194
  --table-blob-height: 50px;
2187
2195
  }
2188
- [data-v-9ea22d5f] table {
2196
+ [data-v-54404d98] table {
2189
2197
  padding: 0 var(--dynamic-border-height);
2190
2198
  }
2191
- [data-v-9ea22d5f] table th:first-child {
2199
+ [data-v-54404d98] table th:first-child {
2192
2200
  border-top-left-radius: var(--table-cell-radius);
2193
2201
  }
2194
- [data-v-9ea22d5f] table .stuck th:first-child {
2202
+ [data-v-54404d98] table .stuck th:first-child {
2195
2203
  border-top-left-radius: 0;
2196
2204
  }
2197
- [data-v-9ea22d5f] table .stuck th:last-child {
2205
+ [data-v-54404d98] table .stuck th:last-child {
2198
2206
  border-top-right-radius: 0;
2199
2207
  }
2200
- [data-v-9ea22d5f] table th:last-child {
2208
+ [data-v-54404d98] table th:last-child {
2201
2209
  border-top-right-radius: var(--table-cell-radius);
2202
2210
  }
2203
- [data-v-9ea22d5f] table tr:last-child td:first-child {
2211
+ [data-v-54404d98] table tr:last-child td:first-child {
2204
2212
  border-bottom-left-radius: var(--table-cell-radius);
2205
2213
  }
2206
- [data-v-9ea22d5f] table tr:last-child td:last-child {
2214
+ [data-v-54404d98] table tr:last-child td:last-child {
2207
2215
  border-bottom-right-radius: var(--table-cell-radius);
2208
2216
  }
2209
- [data-v-9ea22d5f] table td,[data-v-9ea22d5f] table th {
2217
+ [data-v-54404d98] table td,[data-v-54404d98] table th {
2210
2218
  background-color: rgb(255, 255, 255);
2211
2219
  }
2212
- [data-v-9ea22d5f] table tbody {
2220
+ [data-v-54404d98] table tbody {
2213
2221
  overflow: hidden;
2214
2222
  }
2215
- [data-v-9ea22d5f] table tbody tr {
2223
+ [data-v-54404d98] table tbody tr {
2216
2224
  position: relative;
2217
2225
  }
2218
- [data-v-9ea22d5f] table tbody tr.selected td {
2226
+ [data-v-54404d98] table tbody tr.selected td {
2219
2227
  background-color: var(--bms-main-10);
2220
2228
  }.filter-button-container[data-v-6047ada7] {
2221
2229
  position: relative;
@@ -2255,36 +2263,36 @@ nav .additional[data-v-f1abaa99] {
2255
2263
  .indicator-scale-leave-from[data-v-6047ada7] {
2256
2264
  opacity: 1;
2257
2265
  transform: scale(1);
2258
- }.filters[data-v-2b0ed89e] {
2266
+ }.filters[data-v-58f3ef61] {
2259
2267
  padding: 16px;
2260
2268
  background: var(--bms-white);
2261
2269
  border: 1px solid var(--bms-grey-10);
2262
2270
  border-radius: var(--bms-border-radius-large);
2263
2271
  margin-bottom: 16px;
2264
2272
  }
2265
- .filters__header[data-v-2b0ed89e] {
2273
+ .filters__header[data-v-58f3ef61] {
2266
2274
  display: flex;
2267
2275
  justify-content: space-between;
2268
2276
  }
2269
- .filters__header-title[data-v-2b0ed89e] {
2277
+ .filters__header-title[data-v-58f3ef61] {
2270
2278
  font-size: 18px;
2271
2279
  font-weight: bold;
2272
2280
  gap: 1rem;
2273
2281
  display: flex;
2274
2282
  align-items: center;
2275
2283
  }
2276
- .filters__inputs[data-v-2b0ed89e] {
2284
+ .filters__inputs[data-v-58f3ef61] {
2277
2285
  display: flex;
2278
2286
  flex-wrap: wrap;
2279
2287
  padding-top: 16px;
2280
2288
  align-items: flex-end;
2281
2289
  row-gap: 8px;
2282
2290
  }
2283
- .filters__inputs .input[data-v-2b0ed89e] {
2291
+ .filters__inputs .input[data-v-58f3ef61] {
2284
2292
  width: 25%;
2285
2293
  padding-right: 32px;
2286
2294
  }
2287
- .filters__inputs .input.large[data-v-2b0ed89e] {
2295
+ .filters__inputs .input.large[data-v-58f3ef61] {
2288
2296
  width: 50%;
2289
2297
  }.table-search[data-v-1a3ad3f2] {
2290
2298
  width: 260px;