@ouestfrance/sipa-bms-ui 8.20.0 → 8.21.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 (34) hide show
  1. package/dist/components/form/BmsFilePicker.vue.d.ts +4 -0
  2. package/dist/components/form/BmsMultiSelect.vue.d.ts +4 -0
  3. package/dist/components/form/RawAutocomplete.vue.d.ts +8 -0
  4. package/dist/mockServiceWorker.js +1 -1
  5. package/dist/sipa-bms-ui.css +54 -368
  6. package/dist/sipa-bms-ui.es.js +113 -44
  7. package/dist/sipa-bms-ui.es.js.map +1 -1
  8. package/dist/sipa-bms-ui.umd.js +112 -43
  9. package/dist/sipa-bms-ui.umd.js.map +1 -1
  10. package/package.json +12 -12
  11. package/src/assets/scss/_conf.scss +0 -1
  12. package/src/assets/scss/app.scss +0 -1
  13. package/src/components/button/BmsAllButtons.stories.js +50 -23
  14. package/src/components/button/BmsButton.stories.js +153 -59
  15. package/src/components/form/BmsFilePicker.stories.js +6 -1
  16. package/src/components/form/BmsFilePicker.vue +10 -5
  17. package/src/components/form/BmsMultiSelect.vue +32 -25
  18. package/src/components/form/BmsSelect.vue +18 -16
  19. package/src/components/form/RawAutocomplete.vue +16 -4
  20. package/src/components/form/RawInputText.vue +1 -0
  21. package/src/components/layout/BmsModal.stories.js +2 -1
  22. package/src/components/layout/BmsSplitWindow.vue +0 -1
  23. package/src/components/table/BmsTableFilters.vue +1 -1
  24. package/src/documentation/button/primaryButton.mdx +142 -0
  25. package/src/documentation/{secondaryButton.mdx → button/secondaryButton.mdx} +2 -2
  26. package/src/documentation/foundation/contributing.mdx +72 -0
  27. package/src/documentation/foundation/gettingstarted.mdx +7 -0
  28. package/src/documentation/{principles.mdx → foundation/principles.mdx} +9 -9
  29. package/src/documentation/icons.mdx +43 -0
  30. package/src/showroom/pages/forms.vue +10 -1
  31. package/src/assets/scss/_formkit.scss +0 -353
  32. package/src/components/form/Form.stories.js +0 -35
  33. package/src/documentation/primaryButton.mdx +0 -20
  34. /package/src/documentation/{button.mdx → button/button.mdx} +0 -0
@@ -1,4 +1,4 @@
1
- import { defineComponent, computed, resolveComponent, createElementBlock, createBlock, unref, openBlock, mergeProps, renderSlot, withCtx, createElementVNode, useAttrs, normalizeClass, normalizeProps, guardReactiveProps, createVNode, h as h$1, createCommentVNode, resolveDynamicComponent, toDisplayString, useCssVars, createStaticVNode, onMounted, nextTick, watch, getCurrentInstance, getCurrentScope, onScopeDispose, hasInjectionContext, inject, toValue, onUnmounted, shallowRef, watchEffect, ref, Transition, withDirectives, normalizeStyle, vShow, Fragment, Teleport, createTextVNode, renderList, withModifiers, mergeModels, useModel, createSlots, useSlots, vModelCheckbox, toRaw, onBeforeUnmount, vModelRadio, withKeys, vModelText, reactive, useTemplateRef, isVNode, isRef, TransitionGroup, createApp } from 'vue';
1
+ import { defineComponent, computed, resolveComponent, createElementBlock, createBlock, unref, openBlock, mergeProps, renderSlot, withCtx, createElementVNode, useAttrs, normalizeClass, normalizeProps, guardReactiveProps, createVNode, h as h$1, createCommentVNode, resolveDynamicComponent, toDisplayString, useCssVars, createStaticVNode, onMounted, nextTick, watch, getCurrentInstance, getCurrentScope, onScopeDispose, hasInjectionContext, inject, toValue, onUnmounted, shallowRef, watchEffect, ref, Transition, withDirectives, normalizeStyle, vShow, Fragment, Teleport, createTextVNode, renderList, withModifiers, mergeModels, useModel, withKeys, createSlots, useSlots, vModelCheckbox, toRaw, onBeforeUnmount, vModelRadio, vModelText, reactive, useTemplateRef, isVNode, isRef, TransitionGroup, createApp } from 'vue';
2
2
  import { useRouter, useRoute } from 'vue-router';
3
3
 
4
4
  var CocardeBorder = /* @__PURE__ */ ((CocardeBorder2) => {
@@ -38012,6 +38012,58 @@ function useMutationObserver(target, callback, options = {}) {
38012
38012
  };
38013
38013
  }
38014
38014
 
38015
+ function createKeyPredicate(keyFilter) {
38016
+ if (typeof keyFilter === "function")
38017
+ return keyFilter;
38018
+ else if (typeof keyFilter === "string")
38019
+ return (event) => event.key === keyFilter;
38020
+ else if (Array.isArray(keyFilter))
38021
+ return (event) => keyFilter.includes(event.key);
38022
+ return () => true;
38023
+ }
38024
+ function onKeyStroke(...args) {
38025
+ let key;
38026
+ let handler;
38027
+ let options = {};
38028
+ if (args.length === 3) {
38029
+ key = args[0];
38030
+ handler = args[1];
38031
+ options = args[2];
38032
+ } else if (args.length === 2) {
38033
+ if (typeof args[1] === "object") {
38034
+ key = true;
38035
+ handler = args[0];
38036
+ options = args[1];
38037
+ } else {
38038
+ key = args[0];
38039
+ handler = args[1];
38040
+ }
38041
+ } else {
38042
+ key = true;
38043
+ handler = args[0];
38044
+ }
38045
+ const {
38046
+ target = defaultWindow,
38047
+ eventName = "keydown",
38048
+ passive = false,
38049
+ dedupe = false
38050
+ } = options;
38051
+ const predicate = createKeyPredicate(key);
38052
+ const listener = (e) => {
38053
+ if (e.repeat && toValue(dedupe))
38054
+ return;
38055
+ if (predicate(e))
38056
+ handler(e);
38057
+ };
38058
+ return useEventListener(target, eventName, listener, passive);
38059
+ }
38060
+ function onKeyDown(key, handler, options = {}) {
38061
+ return onKeyStroke(key, handler, { ...options, eventName: "keydown" });
38062
+ }
38063
+ function onKeyUp(key, handler, options = {}) {
38064
+ return onKeyStroke(key, handler, { ...options, eventName: "keyup" });
38065
+ }
38066
+
38015
38067
  const ssrWidthSymbol = Symbol("vueuse-ssr-width");
38016
38068
  // @__NO_SIDE_EFFECTS__
38017
38069
  function useSSRWidth() {
@@ -38890,7 +38942,8 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
38890
38942
  maxlength: __props.maxlength,
38891
38943
  onBlur: _cache[0] || (_cache[0] = ($event) => $emits("blur")),
38892
38944
  onInput,
38893
- onFocus: _cache[1] || (_cache[1] = ($event) => $emits("focus"))
38945
+ onFocus: _cache[1] || (_cache[1] = ($event) => $emits("focus")),
38946
+ onClick: _cache[2] || (_cache[2] = ($event) => $emits("click"))
38894
38947
  }, null, 40, _hoisted_3$j),
38895
38948
  createElementVNode("span", _hoisted_4$c, [
38896
38949
  renderSlot(_ctx.$slots, "icon-end", {}, void 0, true)
@@ -38900,7 +38953,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
38900
38953
  }
38901
38954
  });
38902
38955
 
38903
- const RawInputText = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-4c74b915"]]);
38956
+ const RawInputText = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-d5f058e1"]]);
38904
38957
 
38905
38958
  const _sfc_main$1d = /* @__PURE__ */ defineComponent({
38906
38959
  __name: "RawAutocomplete",
@@ -38924,7 +38977,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
38924
38977
  "modelValue": { required: true },
38925
38978
  "modelModifiers": {}
38926
38979
  }),
38927
- emits: /* @__PURE__ */ mergeModels(["addNewOption", "select"], ["update:modelValue"]),
38980
+ emits: /* @__PURE__ */ mergeModels(["addNewOption", "select", "blur", "focus", "click", "input"], ["update:modelValue"]),
38928
38981
  setup(__props, { expose: __expose, emit: __emit }) {
38929
38982
  const props = __props;
38930
38983
  const modelValue = useModel(__props, "modelValue");
@@ -38941,6 +38994,12 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
38941
38994
  onClickOutside(rawInput, closeDatalist, {
38942
38995
  ignore: [".datalist-option", ".icon-toggle-button", ".icon-clear"]
38943
38996
  });
38997
+ const onBlur = () => {
38998
+ emits("blur");
38999
+ closeDatalist();
39000
+ };
39001
+ onKeyUp("Escape", onBlur);
39002
+ onKeyUp("Tab", onBlur);
38944
39003
  const classes = computed(() => {
38945
39004
  return { "is-error": props.errors?.length, "is-disabled": props.disabled };
38946
39005
  });
@@ -38978,8 +39037,8 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
38978
39037
  }
38979
39038
  }
38980
39039
  );
38981
- const onFocus = () => {
38982
- openDatalist();
39040
+ const onClick = () => {
39041
+ isDatalistOpen.value = !isDatalistOpen.value;
38983
39042
  };
38984
39043
  const onInput = () => {
38985
39044
  openDatalist();
@@ -39041,7 +39100,8 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
39041
39100
  required: __props.required,
39042
39101
  small: __props.small,
39043
39102
  onInput,
39044
- onFocus
39103
+ onClick,
39104
+ onKeyup: withKeys(openDatalist, ["down"])
39045
39105
  }, {
39046
39106
  "icon-start": withCtx(() => [
39047
39107
  renderSlot(_ctx.$slots, "icon-start", {}, void 0, true)
@@ -39074,7 +39134,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
39074
39134
  }
39075
39135
  });
39076
39136
 
39077
- const RawAutocomplete = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-15343285"]]);
39137
+ const RawAutocomplete = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-46667c72"]]);
39078
39138
 
39079
39139
  const _hoisted_1$R = ["innerHTML"];
39080
39140
  const _hoisted_2$z = ["innerHTML"];
@@ -39438,6 +39498,8 @@ const _hoisted_4$b = { class: "file-upload__file-name" };
39438
39498
  const _sfc_main$18 = /* @__PURE__ */ defineComponent({
39439
39499
  __name: "BmsFilePicker",
39440
39500
  props: {
39501
+ dragOverMessage: { default: "Déposer votre image ici" },
39502
+ dragOffMessage: { default: "Glissez votre image ici ou cliquez pour parcourir" },
39441
39503
  modelValue: {},
39442
39504
  limit: { default: 10 }
39443
39505
  },
@@ -39517,9 +39579,9 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
39517
39579
  }, [
39518
39580
  createElementVNode("label", _hoisted_2$x, [
39519
39581
  isDragOver.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
39520
- createTextVNode("Déposer votre image ici")
39582
+ createTextVNode(toDisplayString(__props.dragOverMessage), 1)
39521
39583
  ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
39522
- createTextVNode("Glissez votre image ici ou cliquez pour parcourir")
39584
+ createTextVNode(toDisplayString(__props.dragOffMessage), 1)
39523
39585
  ], 64)),
39524
39586
  createElementVNode("input", {
39525
39587
  "data-testid": "file-upload-input-file",
@@ -39550,7 +39612,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
39550
39612
  }
39551
39613
  });
39552
39614
 
39553
- const BmsFilePicker = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-c892a845"]]);
39615
+ const BmsFilePicker = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-4aaf4346"]]);
39554
39616
 
39555
39617
  const _hoisted_1$O = ["disabled", "name", "value"];
39556
39618
  const _hoisted_2$w = {
@@ -69404,26 +69466,37 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
69404
69466
  "modelValue": { default: [] },
69405
69467
  "modelModifiers": {}
69406
69468
  }),
69407
- emits: ["update:modelValue"],
69408
- setup(__props) {
69469
+ emits: /* @__PURE__ */ mergeModels(["select", "input"], ["update:modelValue"]),
69470
+ setup(__props, { emit: __emit }) {
69409
69471
  const props = __props;
69472
+ const emits = __emit;
69473
+ const modelValue = useModel(__props, "modelValue");
69410
69474
  const inputElement = ref(null);
69411
69475
  const isDatalistOpen = ref(false);
69476
+ const searching = ref("");
69412
69477
  const closeDatalist = () => isDatalistOpen.value = false;
69413
69478
  const openDatalist = () => {
69414
69479
  if (!props.disabled) {
69415
69480
  isDatalistOpen.value = true;
69416
69481
  }
69417
69482
  };
69418
- const searching = ref("");
69419
- const modelValue = useModel(__props, "modelValue");
69420
- onClickOutside(inputElement, closeDatalist, {
69421
- ignore: [".datalist-option", ".icon-toggle-button"]
69422
- });
69423
69483
  const onBackspace = () => {
69424
69484
  if (searching.value.length === 0 && modelValue.value && modelValue.value.length > 0)
69425
69485
  modelValue.value.splice(-1);
69426
69486
  };
69487
+ onClickOutside(inputElement, closeDatalist, {
69488
+ ignore: [".datalist-option", ".icon-toggle-button"]
69489
+ });
69490
+ onKeyUp("Escape", closeDatalist);
69491
+ onKeyUp("Tab", closeDatalist);
69492
+ onKeyDown("Backspace", onBackspace);
69493
+ const onSelectClick = () => {
69494
+ isDatalistOpen.value = !isDatalistOpen.value;
69495
+ };
69496
+ const onInput = (e) => {
69497
+ emits("input", e);
69498
+ openDatalist();
69499
+ };
69427
69500
  const setFocus = () => {
69428
69501
  if (inputElement.value) {
69429
69502
  inputElement.value.focus();
@@ -69436,8 +69509,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
69436
69509
  modelValue.value = (modelValue.value ?? []).concat(option.value);
69437
69510
  }
69438
69511
  searching.value = "";
69512
+ emits("select", option);
69439
69513
  setFocus();
69440
- closeDatalist();
69441
69514
  };
69442
69515
  const removeOption = (value) => {
69443
69516
  modelValue.value = (modelValue.value ?? []).filter((o) => o !== value);
@@ -69469,7 +69542,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
69469
69542
  "model-value": modelValue.value,
69470
69543
  open: isDatalistOpen.value,
69471
69544
  onSelect,
69472
- onClick: setFocus
69545
+ onClick: onSelectClick
69473
69546
  }), {
69474
69547
  input: withCtx(() => [
69475
69548
  createElementVNode("div", _hoisted_1$H, [
@@ -69493,13 +69566,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
69493
69566
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searching.value = $event),
69494
69567
  class: "search",
69495
69568
  disabled: __props.disabled,
69496
- onFocus: openDatalist,
69497
- onClick: openDatalist,
69498
- onKeyup: [
69499
- withKeys(openDatalist, ["down"]),
69500
- withKeys(onBackspace, ["backspace"])
69501
- ],
69502
- onInput: openDatalist
69569
+ onInput,
69570
+ onKeyup: withKeys(openDatalist, ["down"])
69503
69571
  }, null, 40, _hoisted_2$s), [
69504
69572
  [vModelText, searching.value]
69505
69573
  ])
@@ -69512,12 +69580,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
69512
69580
  })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
69513
69581
  isDatalistOpen.value ? (openBlock(), createBlock(unref(ChevronUp), {
69514
69582
  key: 0,
69515
- class: "icon icon-toggle-button",
69516
- onClick: closeDatalist
69583
+ class: "icon icon-toggle-button"
69517
69584
  })) : (openBlock(), createBlock(unref(ChevronDown), {
69518
69585
  key: 1,
69519
- class: "icon icon-toggle-button",
69520
- onClick: openDatalist
69586
+ class: "icon icon-toggle-button"
69521
69587
  }))
69522
69588
  ], 64))
69523
69589
  ])
@@ -69540,7 +69606,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
69540
69606
  }
69541
69607
  });
69542
69608
 
69543
- const BmsMultiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-b8b817ba"]]);
69609
+ const BmsMultiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-970d00fe"]]);
69544
69610
 
69545
69611
  const _sfc_main$Q = /* @__PURE__ */ defineComponent({
69546
69612
  __name: "BmsSearch",
@@ -86846,6 +86912,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
86846
86912
  emits: /* @__PURE__ */ mergeModels(["select"], ["update:modelValue"]),
86847
86913
  setup(__props, { expose: __expose, emit: __emit }) {
86848
86914
  const props = __props;
86915
+ const emits = __emit;
86849
86916
  const modelValue = useModel(__props, "modelValue");
86850
86917
  const inputElement = ref(null);
86851
86918
  const isDatalistOpen = ref(props.open);
@@ -86858,10 +86925,11 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
86858
86925
  setFocus();
86859
86926
  }
86860
86927
  };
86861
- const emits = __emit;
86862
86928
  onClickOutside(inputElement, closeDatalist, {
86863
86929
  ignore: [".datalist-option", ".icon-toggle-button"]
86864
86930
  });
86931
+ onKeyUp("Escape", closeDatalist);
86932
+ onKeyUp("Tab", closeDatalist);
86865
86933
  const displayValue = computed(() => {
86866
86934
  const option = props.options.find(
86867
86935
  (o) => _.isEqual(o.value, modelValue.value)
@@ -86880,6 +86948,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
86880
86948
  setFocus();
86881
86949
  closeDatalist();
86882
86950
  };
86951
+ const onSelectClick = () => {
86952
+ isDatalistOpen.value = !isDatalistOpen.value;
86953
+ if (isDatalistOpen) {
86954
+ setFocus();
86955
+ }
86956
+ };
86883
86957
  __expose({
86884
86958
  setFocus
86885
86959
  });
@@ -86887,7 +86961,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
86887
86961
  return openBlock(), createBlock(RawSelect, mergeProps(_ctx.$props, {
86888
86962
  open: isDatalistOpen.value,
86889
86963
  onSelect,
86890
- onClick: setFocus
86964
+ onClick: onSelectClick
86891
86965
  }), {
86892
86966
  input: withCtx(() => [
86893
86967
  createElementVNode("input", {
@@ -86900,19 +86974,15 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
86900
86974
  placeholder: __props.placeholder,
86901
86975
  required: __props.required,
86902
86976
  disabled: __props.disabled,
86903
- onFocus: openDatalist,
86904
- onClick: openDatalist,
86905
86977
  onKeyup: withKeys(openDatalist, ["down"])
86906
86978
  }, null, 40, _hoisted_1$G),
86907
86979
  createElementVNode("span", _hoisted_2$r, [
86908
86980
  isDatalistOpen.value ? (openBlock(), createBlock(unref(ChevronUp), {
86909
86981
  key: 0,
86910
- class: "icon-toggle-button",
86911
- onClick: closeDatalist
86982
+ class: "icon-toggle-button"
86912
86983
  })) : (openBlock(), createBlock(unref(ChevronDown), {
86913
86984
  key: 1,
86914
- class: "icon-toggle-button",
86915
- onClick: openDatalist
86985
+ class: "icon-toggle-button"
86916
86986
  }))
86917
86987
  ])
86918
86988
  ]),
@@ -86922,7 +86992,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
86922
86992
  }
86923
86993
  });
86924
86994
 
86925
- const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-7aef9c6c"]]);
86995
+ const BmsSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-fa4e9db0"]]);
86926
86996
 
86927
86997
  const _hoisted_1$F = ["value", "required", "placeholder", "disabled"];
86928
86998
  const _sfc_main$O = /* @__PURE__ */ defineComponent({
@@ -90514,7 +90584,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
90514
90584
  watch(
90515
90585
  () => props.collapsed,
90516
90586
  (val) => {
90517
- console.log("watch:collapsed", val);
90518
90587
  collapsedLocal.value = val ?? false;
90519
90588
  }
90520
90589
  );
@@ -90667,7 +90736,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
90667
90736
  }
90668
90737
  });
90669
90738
 
90670
- const BmsSplitWindow = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-0aa0f55f"]]);
90739
+ const BmsSplitWindow = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-4d48c930"]]);
90671
90740
 
90672
90741
  const _hoisted_1$u = { class: "step" };
90673
90742
  const _hoisted_2$j = { class: "step-buttons" };
@@ -98613,7 +98682,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
98613
98682
  }
98614
98683
  });
98615
98684
 
98616
- const BmsTableFilters = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-4a441463"]]);
98685
+ const BmsTableFilters = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-94b8e913"]]);
98617
98686
 
98618
98687
  /**
98619
98688
  * Create a bound version of a function with a specified `this` context