@ouestfrance/sipa-bms-ui 8.10.1 → 8.11.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 (54) hide show
  1. package/dist/components/button/BmsButton.vue.d.ts +2 -1
  2. package/dist/components/button/BmsIconButton.vue.d.ts +3 -1
  3. package/dist/components/button/UiButton.vue.d.ts +4 -2
  4. package/dist/components/button/UiButtonLink.vue.d.ts +1 -0
  5. package/dist/components/feedback/BmsTooltip.vue.d.ts +1 -1
  6. package/dist/components/feedback/UiTooltip.vue.d.ts +1 -1
  7. package/dist/components/form/BmsInputText.vue.d.ts +2 -0
  8. package/dist/components/form/BmsSearch.vue.d.ts +4 -0
  9. package/dist/components/form/RawAutocomplete.vue.d.ts +2 -0
  10. package/dist/components/layout/BmsHeaderTitle.vue.d.ts +1 -1
  11. package/dist/components/layout/UiPopoverMenu.vue.d.ts +1 -1
  12. package/dist/components/navigation/BmsBreadcrumb.vue.d.ts +1 -1
  13. package/dist/components/navigation/BmsShortLinkMenu.vue.d.ts +2 -2
  14. package/dist/components/navigation/UiTenantSwitcher.vue.d.ts +4 -0
  15. package/dist/components/table/BmsTableFilters.vue.d.ts +4 -0
  16. package/dist/components/utils/BmsCocarde.vue.d.ts +1 -1
  17. package/dist/mockServiceWorker.js +2 -1
  18. package/dist/plugins/field/FieldComponent.vue.d.ts +3 -0
  19. package/dist/plugins/field/SkeletonField.vue.d.ts +2 -0
  20. package/dist/plugins/field/field-component.model.d.ts +2 -0
  21. package/dist/plugins/router-history/router-history.composable.d.ts +1 -1
  22. package/dist/sipa-bms-ui.css +93 -53
  23. package/dist/sipa-bms-ui.es.js +4099 -4009
  24. package/dist/sipa-bms-ui.es.js.map +1 -1
  25. package/dist/sipa-bms-ui.umd.js +4106 -4016
  26. package/dist/sipa-bms-ui.umd.js.map +1 -1
  27. package/package.json +19 -18
  28. package/src/components/button/BmsButton.stories.js +26 -0
  29. package/src/components/button/BmsButton.vue +2 -0
  30. package/src/components/button/BmsIconButton.stories.js +4 -0
  31. package/src/components/button/BmsIconButton.vue +10 -1
  32. package/src/components/button/UiButton.vue +2 -0
  33. package/src/components/button/UiButtonLink.vue +13 -6
  34. package/src/components/feedback/UiTooltip.vue +1 -0
  35. package/src/components/form/BmsAutocomplete.stories.js +12 -0
  36. package/src/components/form/BmsAutocomplete.vue +1 -0
  37. package/src/components/form/BmsInputText.stories.js +8 -0
  38. package/src/components/form/BmsInputToggle.stories.js +27 -0
  39. package/src/components/form/BmsInputToggle.vue +16 -2
  40. package/src/components/form/BmsMultiSelect.vue +6 -1
  41. package/src/components/form/BmsSelect.stories.js +9 -0
  42. package/src/components/form/BmsSelect.vue +4 -2
  43. package/src/components/form/BmsServerAutocomplete.stories.js +25 -2
  44. package/src/components/form/BmsServerAutocomplete.vue +1 -0
  45. package/src/components/layout/BmsModal.stories.js +1 -1
  46. package/src/components/table/BmsServerTable.vue +2 -4
  47. package/src/plugins/field/FieldComponent.spec.ts +2 -1
  48. package/src/plugins/field/FieldComponent.stories.js +18 -1
  49. package/src/plugins/field/FieldComponent.vue +24 -4
  50. package/src/plugins/field/SkeletonField.stories.js +21 -0
  51. package/src/plugins/field/SkeletonField.vue +27 -0
  52. package/src/plugins/field/field-component.model.ts +2 -0
  53. package/src/showroom/App.vue +5 -0
  54. package/src/showroom/pages/loading-form.vue +78 -0
@@ -1,11 +1,11 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");.bms-button {
2
- height: 2em;
3
2
  font-size: 1em;
3
+ --button-padding: 0.5em;
4
4
  box-sizing: border-box;
5
5
  display: inline-flex;
6
6
  align-items: center;
7
7
  margin: 0;
8
- padding: 0.5em;
8
+ padding: var(--button-padding);
9
9
  appearance: none;
10
10
  cursor: pointer;
11
11
  border-radius: var(--bms-border-radius);
@@ -33,7 +33,6 @@
33
33
  cursor: initial;
34
34
  }
35
35
  .bms-button.is-icon {
36
- padding: 0.5em 0;
37
36
  --bms-button-background-color: transparent;
38
37
  --bms-button-border-color: transparent;
39
38
  --bms-button-text-color: var(--bms-grey-100);
@@ -78,7 +77,7 @@
78
77
  --bms-button-disabled-text-color: var(--bms-disabled-color);
79
78
  }
80
79
  .bms-button .content {
81
- margin: 0 0.5em;
80
+ margin: 0 var(--button-padding);
82
81
  }
83
82
  .bms-button > span:empty {
84
83
  display: none;
@@ -88,8 +87,13 @@
88
87
  width: 1em;
89
88
  height: 1em;
90
89
  }
90
+ .bms-button--small {
91
+ --button-padding: 0.25em;
92
+ }
93
+ .bms-button.is-icon {
94
+ padding: var(--button-padding) 0;
95
+ }
91
96
  .bms-button.is-default.is-icon {
92
- padding: 0.5em 0;
93
97
  --bms-button-background-color: transparent;
94
98
  --bms-button-border-color: transparent;
95
99
  --bms-button-text-color: var(--bms-grey-100);
@@ -134,7 +138,6 @@
134
138
  --bms-button-disabled-text-color: var(--bms-disabled-color);
135
139
  }
136
140
  .bms-button.is-warning.is-icon {
137
- padding: 0.5em 0;
138
141
  --bms-button-background-color: transparent;
139
142
  --bms-button-border-color: transparent;
140
143
  --bms-button-text-color: var(--bms-grey-100);
@@ -179,7 +182,6 @@
179
182
  --bms-button-disabled-text-color: var(--bms-disabled-color);
180
183
  }
181
184
  .bms-button.is-danger.is-icon {
182
- padding: 0.5em 0;
183
185
  --bms-button-background-color: transparent;
184
186
  --bms-button-border-color: transparent;
185
187
  --bms-button-text-color: var(--bms-grey-100);
@@ -224,7 +226,6 @@
224
226
  --bms-button-disabled-text-color: var(--bms-disabled-color);
225
227
  }
226
228
  .bms-button.is-success.is-icon {
227
- padding: 0.5em 0;
228
229
  --bms-button-background-color: transparent;
229
230
  --bms-button-border-color: transparent;
230
231
  --bms-button-text-color: var(--bms-grey-100);
@@ -394,7 +395,7 @@
394
395
  .circular-progress svg circle[data-v-7869acfb] {
395
396
  transition: stroke-dashoffset 0.2s ease-in-out;
396
397
  }.bms-loader[data-v-7cc96135] {
397
- font-size: var(--71df0f7a);
398
+ font-size: var(--v71df0f7a);
398
399
  color: var(--bms-main-100, currentColor);
399
400
  display: inline-block;
400
401
  }
@@ -402,7 +403,7 @@
402
403
  width: 1em;
403
404
  height: 1em;
404
405
  display: block;
405
- }.bms-tooltip__text[data-v-44def116] {
406
+ }.bms-tooltip__text[data-v-bf923418] {
406
407
  --bms-tooltip-background-color: white;
407
408
  --bms-tooltip-color: inherit;
408
409
  --bms-tooltip-margin: 4px;
@@ -419,8 +420,9 @@
419
420
  filter: drop-shadow(0 0 0.8rem var(--bms-shadow-color));
420
421
  color: var(--bms-font-color);
421
422
  transform: var(--bms-tooltip-transform);
423
+ overflow-wrap: break-word;
422
424
  }
423
- .bms-tooltip__text[data-v-44def116]::before {
425
+ .bms-tooltip__text[data-v-bf923418]::before {
424
426
  content: "";
425
427
  position: absolute;
426
428
  right: var(--bms-tooltip-indicator-position-right);
@@ -432,54 +434,54 @@
432
434
  border-style: solid;
433
435
  border-color: var(--bms-tooltip-indicator-border);
434
436
  }
435
- .bms-tooltip__text--top[data-v-44def116], .bms-tooltip__text--bottom[data-v-44def116] {
437
+ .bms-tooltip__text--top[data-v-bf923418], .bms-tooltip__text--bottom[data-v-bf923418] {
436
438
  --bms-tooltip-indicator-position-left: 50%;
437
439
  --bms-tooltip-indicator-position-right: initial;
438
440
  }
439
- .bms-tooltip__text--bottom[data-v-44def116] {
441
+ .bms-tooltip__text--bottom[data-v-bf923418] {
440
442
  --bms-tooltip-indicator-position-top: initial;
441
443
  --bms-tooltip-indicator-position-bottom: 100%;
442
444
  --bms-tooltip-indicator-border: transparent transparent
443
445
  var(--bms-tooltip-background-color) transparent;
444
446
  }
445
- .bms-tooltip__text--top[data-v-44def116] {
447
+ .bms-tooltip__text--top[data-v-bf923418] {
446
448
  --bms-tooltip-indicator-position-top: 100%;
447
449
  --bms-tooltip-indicator-position-bottom: initial;
448
450
  --bms-tooltip-indicator-border: var(--bms-tooltip-background-color)
449
451
  transparent transparent transparent;
450
452
  }
451
- .bms-tooltip__text--left[data-v-44def116], .bms-tooltip__text--right[data-v-44def116] {
453
+ .bms-tooltip__text--left[data-v-bf923418], .bms-tooltip__text--right[data-v-bf923418] {
452
454
  --bms-tooltip-indicator-position-top: 50%;
453
455
  --bms-tooltip-indicator-position-bottom: initial;
454
456
  }
455
- .bms-tooltip__text--left[data-v-44def116] {
457
+ .bms-tooltip__text--left[data-v-bf923418] {
456
458
  --bms-tooltip-indicator-position-right: initial;
457
459
  --bms-tooltip-indicator-position-left: 100%;
458
460
  --bms-tooltip-indicator-border: transparent transparent transparent
459
461
  var(--bms-tooltip-background-color);
460
462
  }
461
- .bms-tooltip__text--right[data-v-44def116] {
463
+ .bms-tooltip__text--right[data-v-bf923418] {
462
464
  --bms-tooltip-indicator-position-right: 100%;
463
465
  --bms-tooltip-indicator-position-left: initial;
464
466
  --bms-tooltip-indicator-border: transparent
465
467
  var(--bms-tooltip-background-color) transparent transparent;
466
468
  }
467
- .tooltip-fade-enter-active[data-v-44def116] {
469
+ .tooltip-fade-enter-active[data-v-bf923418] {
468
470
  transition: opacity 0.2s ease;
469
471
  }
470
- .tooltip-fade-enter-from[data-v-44def116] {
472
+ .tooltip-fade-enter-from[data-v-bf923418] {
471
473
  opacity: 0;
472
474
  }
473
- .tooltip-fade-enter-to[data-v-44def116] {
475
+ .tooltip-fade-enter-to[data-v-bf923418] {
474
476
  opacity: 1;
475
477
  }
476
- .tooltip-fade-leave-active[data-v-44def116] {
478
+ .tooltip-fade-leave-active[data-v-bf923418] {
477
479
  transition: opacity 0.3s ease;
478
480
  }
479
- .tooltip-fade-leave-from[data-v-44def116] {
481
+ .tooltip-fade-leave-from[data-v-bf923418] {
480
482
  opacity: 1;
481
483
  }
482
- .tooltip-fade-leave-to[data-v-44def116] {
484
+ .tooltip-fade-leave-to[data-v-bf923418] {
483
485
  opacity: 0;
484
486
  }.bms-tooltip-anchor-wrapper[data-v-b033f8af] {
485
487
  position: relative;
@@ -628,31 +630,31 @@ ul li[data-v-ba5302fc]:hover, ul li.selected[data-v-ba5302fc] {
628
630
  height: 1em;
629
631
  width: 1em;
630
632
  cursor: pointer;
631
- }.icon[data-v-b0e1e6f3] {
633
+ }.icon[data-v-43ad5137] {
632
634
  height: 1em;
633
635
  width: 1em;
634
636
  }
635
- .icon.datalist-icon[data-v-b0e1e6f3] {
637
+ .icon.datalist-icon[data-v-43ad5137] {
636
638
  margin: 0 0.5em;
637
639
  }
638
- .icon[data-v-b0e1e6f3] svg {
640
+ .icon[data-v-43ad5137] svg {
639
641
  height: 100%;
640
642
  width: 100%;
641
643
  }
642
- .icon[data-v-b0e1e6f3] svg * {
644
+ .icon[data-v-43ad5137] svg * {
643
645
  fill: currentColor !important;
644
- }.icon[data-v-3115cc27] {
646
+ }.icon[data-v-49acc0c6] {
645
647
  height: 1em;
646
648
  width: 1em;
647
649
  }
648
- .icon.datalist-icon[data-v-3115cc27] {
650
+ .icon.datalist-icon[data-v-49acc0c6] {
649
651
  margin: 0 0.5em;
650
652
  }
651
- .icon[data-v-3115cc27] svg {
653
+ .icon[data-v-49acc0c6] svg {
652
654
  height: 100%;
653
655
  width: 100%;
654
656
  }
655
- .icon[data-v-3115cc27] svg * {
657
+ .icon[data-v-49acc0c6] svg * {
656
658
  fill: currentColor !important;
657
659
  }.field-between__separator[data-v-f25b520b] {
658
660
  margin-left: 10px;
@@ -1073,7 +1075,7 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
1073
1075
  .switch-wrapper.disabled[data-v-6de1a5c6] {
1074
1076
  --switch-background-color: var(--bms-grey-25);
1075
1077
  --switch-color: var(--bms-grey-50);
1076
- }.input-toggle[data-v-9570e0a9] {
1078
+ }.input-toggle[data-v-9b546877] {
1077
1079
  --label-color: var(--bms-grey-100);
1078
1080
  --cursor: pointer;
1079
1081
  font-weight: var(--field-label-font-weight);
@@ -1081,18 +1083,28 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
1081
1083
  align-items: center;
1082
1084
  gap: 0.5em;
1083
1085
  }
1084
- .input-toggle .input-switch-info[data-v-9570e0a9] {
1086
+ .input-toggle.overflow[data-v-9b546877] {
1087
+ width: 100%;
1088
+ }
1089
+ .input-toggle.overflow .input-switch-info[data-v-9b546877] {
1090
+ width: 100%;
1091
+ white-space: nowrap;
1092
+ overflow: hidden;
1093
+ word-break: break-all;
1094
+ text-overflow: ellipsis;
1095
+ }
1096
+ .input-toggle .input-switch-info[data-v-9b546877] {
1085
1097
  color: var(--label-color);
1086
1098
  transition: 0.2s;
1087
1099
  }
1088
- .input-toggle.isOn[data-v-9570e0a9] {
1100
+ .input-toggle.isOn[data-v-9b546877] {
1089
1101
  --label-color: var(--bms-main-100);
1090
1102
  }
1091
- .input-toggle.disabled[data-v-9570e0a9] {
1103
+ .input-toggle.disabled[data-v-9b546877] {
1092
1104
  --label-color: var(--bms-grey-50);
1093
1105
  --cursor: default;
1094
1106
  }
1095
- .input-toggle[data-v-9570e0a9]:hover {
1107
+ .input-toggle[data-v-9b546877]:hover {
1096
1108
  cursor: var(--cursor);
1097
1109
  }.tag[data-v-e2517fee] {
1098
1110
  --tag-border-color: var(--bms-main-100);
@@ -1202,40 +1214,40 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
1202
1214
  --field-border-color: var(--bms-grey-25);
1203
1215
  --input-background-color: var(--bms-grey-25);
1204
1216
  pointer-events: none;
1205
- }.tags[data-v-aece870d] {
1217
+ }.tags[data-v-584dc93e] {
1206
1218
  display: flex;
1207
1219
  gap: 0.5em;
1208
1220
  padding: var(--field-margin);
1209
1221
  flex-wrap: wrap;
1210
1222
  width: 100%;
1211
1223
  }
1212
- .tags .search[data-v-aece870d] {
1224
+ .tags .search[data-v-584dc93e] {
1213
1225
  outline: none;
1214
1226
  border: none;
1215
1227
  background-color: transparent;
1216
1228
  flex-grow: 1;
1217
1229
  }
1218
- .icon-container[data-v-aece870d] {
1230
+ .icon-container[data-v-584dc93e] {
1219
1231
  height: 100%;
1220
1232
  display: flex;
1221
1233
  align-items: center;
1222
1234
  }
1223
- .icon-container[data-v-aece870d]:hover {
1235
+ .icon-container[data-v-584dc93e]:hover {
1224
1236
  cursor: pointer;
1225
1237
  }
1226
- .icon-container .icon[data-v-aece870d] {
1238
+ .icon-container .icon[data-v-584dc93e] {
1227
1239
  display: block;
1228
1240
  width: 1em;
1229
1241
  height: 1em;
1230
1242
  margin: 0 1em 0 0.5em;
1231
1243
  }.clean-icon[data-v-66c267f2]:hover {
1232
1244
  cursor: pointer;
1233
- }.field__input[data-v-21c618e0] {
1245
+ }.field__input[data-v-108de415] {
1234
1246
  --field-border-color: var(--bms-grey-50);
1235
1247
  --field-border-color-active: var(--bms-main-100);
1236
1248
  --input-background-color: var(--bms-white);
1237
1249
  }
1238
- .field__input .select-wrapper[data-v-21c618e0] {
1250
+ .field__input .select-wrapper[data-v-108de415] {
1239
1251
  width: 100%;
1240
1252
  padding: 0 0 0 1em;
1241
1253
  border-radius: var(--bms-border-radius);
@@ -1246,35 +1258,35 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
1246
1258
  align-items: center;
1247
1259
  justify-content: space-between;
1248
1260
  }
1249
- .field__input .select-wrapper .icon-toggle-container[data-v-21c618e0] {
1261
+ .field__input .select-wrapper .icon-toggle-container[data-v-108de415] {
1250
1262
  height: 100%;
1251
1263
  display: flex;
1252
1264
  align-items: center;
1253
1265
  }
1254
- .field__input .select-wrapper .icon-toggle-container[data-v-21c618e0]:hover {
1266
+ .field__input .select-wrapper .icon-toggle-container[data-v-108de415]:hover {
1255
1267
  cursor: pointer;
1256
1268
  }
1257
- .field__input .select-wrapper .icon-toggle-button[data-v-21c618e0] {
1269
+ .field__input .select-wrapper .icon-toggle-button[data-v-108de415] {
1258
1270
  width: 1em;
1259
1271
  margin: 0 var(--field-padding);
1260
1272
  display: block;
1261
1273
  }
1262
- .field__input .select-wrapper[data-v-21c618e0]:hover {
1274
+ .field__input .select-wrapper[data-v-108de415]:hover {
1263
1275
  --field-border-color: var(--bms-grey-100);
1264
1276
  }
1265
- .field__input .select-wrapper[data-v-21c618e0]:has(input:focus) {
1277
+ .field__input .select-wrapper[data-v-108de415]:has(input:focus) {
1266
1278
  --field-border-color: var(--field-border-color-active);
1267
1279
  }
1268
- .field__input .select-wrapper.is-error[data-v-21c618e0] {
1280
+ .field__input .select-wrapper.is-error[data-v-108de415] {
1269
1281
  --field-border-color: var(--bms-red-100);
1270
1282
  --input-background-color: var(--bms-red-25);
1271
1283
  }
1272
- .field__input .select-wrapper.is-disabled[data-v-21c618e0] {
1284
+ .field__input .select-wrapper.is-disabled[data-v-108de415] {
1273
1285
  --field-border-color: var(--bms-grey-25);
1274
1286
  --input-background-color: var(--bms-grey-25);
1275
1287
  pointer-events: none;
1276
1288
  }
1277
- .field__input .select-wrapper input[data-v-21c618e0] {
1289
+ .field__input .select-wrapper input[data-v-108de415] {
1278
1290
  border: none;
1279
1291
  background-color: transparent;
1280
1292
  caret-color: transparent;
@@ -2448,7 +2460,7 @@ nav .additional[data-v-731a6d8c] {
2448
2460
  }
2449
2461
  .filters__inputs .input[data-v-4a441463] {
2450
2462
  padding-right: 32px;
2451
- }.table-search[data-v-df695c8a] {
2463
+ }.table-search[data-v-a0777ff1] {
2452
2464
  width: 260px;
2453
2465
  }.table-search[data-v-2f003e4e] {
2454
2466
  width: 260px;
@@ -3118,7 +3130,29 @@ section {
3118
3130
  justify-content: space-between;
3119
3131
  margin: 8px;
3120
3132
  font-weight: bold;
3121
- }.field {
3133
+ }
3134
+ @keyframes blink-animation-c5826002 {
3135
+ 0% {
3136
+ background-color: var(--bms-main-25);
3137
+ }
3138
+ 50% {
3139
+ background-color: var(--bms-main-10);
3140
+ }
3141
+ 100% {
3142
+ background-color: var(--bms-main-25);
3143
+ }
3144
+ }
3145
+ .skeleton[data-v-c5826002] {
3146
+ /* background-color: var(--bms-main-25); */
3147
+ min-height: var(--field-height);
3148
+ border-radius: var(--bms-border-radius);
3149
+ height: 100%;
3150
+ width: 100%;
3151
+ /* opacity: 0.7; */
3152
+ /* transition: background-color 1000ms linear; */
3153
+ animation: blink-animation-c5826002 2s steps(10, start) infinite alternate;
3154
+ }
3155
+ .field {
3122
3156
  --field-border-color: var(--bms-grey-50);
3123
3157
  --field-border-color-active: var(--bms-main-100);
3124
3158
  --input-background-color: var(--bms-white);
@@ -3149,10 +3183,16 @@ section {
3149
3183
  align-items: center;
3150
3184
  }
3151
3185
  .field__label__title {
3186
+ display: inline-block;
3187
+ white-space: nowrap;
3152
3188
  font-size: 1em;
3153
3189
  font-weight: var(--field-label-font-weight);
3154
3190
  color: var(--field-label-color);
3155
3191
  }
3192
+ .field__label__title.ellipsis {
3193
+ overflow: hidden;
3194
+ text-overflow: ellipsis;
3195
+ }
3156
3196
  .field__label-helper--icon {
3157
3197
  height: 100%;
3158
3198
  display: flex;