@milaboratories/uikit 2.6.0 → 2.6.2

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 (65) hide show
  1. package/.turbo/turbo-build.log +43 -43
  2. package/.turbo/turbo-type-check.log +1 -1
  3. package/CHANGELOG.md +14 -0
  4. package/dist/components/DataTable/TableComponent.vue.js +4 -2
  5. package/dist/components/DataTable/TableComponent.vue.js.map +1 -1
  6. package/dist/components/PlAutocomplete/PlAutocomplete.vue.d.ts +4 -0
  7. package/dist/components/PlAutocomplete/PlAutocomplete.vue.js +74 -68
  8. package/dist/components/PlAutocomplete/PlAutocomplete.vue.js.map +1 -1
  9. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.d.ts +4 -0
  10. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js +52 -46
  11. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.js.map +1 -1
  12. package/dist/components/PlDropdown/PlDropdown.vue.d.ts +8 -0
  13. package/dist/components/PlDropdown/PlDropdown.vue.js +67 -60
  14. package/dist/components/PlDropdown/PlDropdown.vue.js.map +1 -1
  15. package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js +21 -19
  16. package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js.map +1 -1
  17. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.d.ts +4 -0
  18. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js +47 -41
  19. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js.map +1 -1
  20. package/dist/components/PlElementList/PlElementList.vue.d.ts +20 -0
  21. package/dist/components/PlElementList/PlElementList.vue2.js +180 -135
  22. package/dist/components/PlElementList/PlElementList.vue2.js.map +1 -1
  23. package/dist/components/PlElementList/PlElementListItem.vue.d.ts +20 -0
  24. package/dist/components/PlElementList/PlElementListItem.vue2.js +99 -74
  25. package/dist/components/PlElementList/PlElementListItem.vue2.js.map +1 -1
  26. package/dist/components/PlFileInput/PlFileInput.vue.js +24 -22
  27. package/dist/components/PlFileInput/PlFileInput.vue.js.map +1 -1
  28. package/dist/components/PlLogView/PlLogView.vue.js +24 -22
  29. package/dist/components/PlLogView/PlLogView.vue.js.map +1 -1
  30. package/dist/components/PlNumberField/PlNumberField.vue.d.ts +5 -0
  31. package/dist/components/PlNumberField/PlNumberField.vue.js +60 -54
  32. package/dist/components/PlNumberField/PlNumberField.vue.js.map +1 -1
  33. package/dist/components/PlSlideModal/PlPureSlideModal.vue.js +4 -2
  34. package/dist/components/PlSlideModal/PlPureSlideModal.vue.js.map +1 -1
  35. package/dist/components/PlSvg/PlSvg.vue2.js +15 -11
  36. package/dist/components/PlSvg/PlSvg.vue2.js.map +1 -1
  37. package/dist/components/PlTextArea/PlTextArea.vue.js +15 -13
  38. package/dist/components/PlTextArea/PlTextArea.vue.js.map +1 -1
  39. package/dist/components/PlTextField/PlTextField.vue.d.ts +4 -0
  40. package/dist/components/PlTextField/PlTextField.vue.js +45 -39
  41. package/dist/components/PlTextField/PlTextField.vue.js.map +1 -1
  42. package/dist/composition/filters/metadata.d.ts +205 -0
  43. package/dist/composition/filters/metadata.js +129 -19
  44. package/dist/composition/filters/metadata.js.map +1 -1
  45. package/dist/utils/DoubleContour.vue.d.ts +7 -1
  46. package/dist/utils/DoubleContour.vue.js +20 -13
  47. package/dist/utils/DoubleContour.vue.js.map +1 -1
  48. package/dist/utils/DoubleContour.vue2.js +19 -3
  49. package/dist/utils/DoubleContour.vue2.js.map +1 -1
  50. package/dist/utils/DoubleContour.vue3.js +7 -0
  51. package/dist/utils/DoubleContour.vue3.js.map +1 -0
  52. package/package.json +4 -4
  53. package/src/components/PlAutocomplete/PlAutocomplete.vue +6 -1
  54. package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue +6 -1
  55. package/src/components/PlDropdown/PlDropdown.vue +12 -2
  56. package/src/components/PlDropdownMulti/PlDropdownMulti.vue +6 -1
  57. package/src/components/PlElementList/PlElementList.vue +40 -6
  58. package/src/components/PlElementList/PlElementListItem.vue +64 -47
  59. package/src/components/PlNumberField/PlNumberField.vue +4 -1
  60. package/src/components/PlSvg/PlSvg.vue +13 -10
  61. package/src/components/PlTextField/PlTextField.vue +7 -3
  62. package/src/composition/filters/metadata.ts +105 -0
  63. package/src/utils/DoubleContour.vue +68 -2
  64. package/dist/components/PlAccordion/ExpandTransition.vue.js +0 -27
  65. package/dist/components/PlAccordion/ExpandTransition.vue.js.map +0 -1
package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.d.ts CHANGED
@@ -38,6 +38,10 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
38
38
  * If `true`, the dropdown component is disabled and cannot be interacted with.
39
39
  */
40
40
  disabled?: boolean;
41
+ /**
42
+ * Makes some of corners not rounded
43
+ * */
44
+ groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
41
45
  } & Partial<{}>> & import('vue').PublicProps;
42
46
  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
43
47
  attrs: any;
package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js CHANGED
@@ -1,22 +1,24 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown-multi{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-multi{--options-bg: #1B1B1F}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-multi label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-multi__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);padding:1px;color:var(--txt-01)}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{position:absolute;z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:20px;background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-multi__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:20px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.pl-dropdown-multi__field .chips-container{position:absolute;top:0;left:0;bottom:0;right:30px;overflow:hidden;padding:0 60px 0 11px;line-height:20px;color:var(--contour-color);display:flex;gap:8px;align-items:center}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown-multi__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{display:none;position:absolute;top:50%;transform:translateY(-50%);right:36px;z-index:1;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center;width:16px;height:16px;cursor:pointer}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{animation:spin 2.5s linear infinite;--icon-color: var(--ic-accent)}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-right:4px;margin-bottom:4px}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2
- import { defineComponent as X, useSlots as Y, ref as q, useTemplateRef as Z, reactive as ee, computed as p, unref as s, watch as oe, watchPostEffect as te, createElementBlock as u, openBlock as r, createElementVNode as d, createCommentVNode as f, normalizeClass as le, createBlock as m, createVNode as ne, withDirectives as re, vModelText as se, Fragment as b, renderList as g, withModifiers as C, withCtx as w, createTextVNode as B, toDisplayString as v, renderSlot as I } from "vue";
1
+ (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
2
+ .pl-dropdown-multi{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-multi{--options-bg: #1B1B1F}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-multi label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-multi__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);padding:1px;color:var(--txt-01)}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{position:absolute;z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:20px;background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-multi__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:20px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.pl-dropdown-multi__field .chips-container{position:absolute;top:0;left:0;bottom:0;right:30px;overflow:hidden;padding:0 60px 0 11px;line-height:20px;color:var(--contour-color);display:flex;gap:8px;align-items:center}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown-multi__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{display:none;position:absolute;top:50%;transform:translateY(-50%);right:36px;z-index:1;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center;width:16px;height:16px;cursor:pointer}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{animation:spin 2.5s linear infinite;--icon-color: var(--ic-accent)}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-right:4px;margin-bottom:4px}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
3
+ import { defineComponent as X, useSlots as Y, ref as P, useTemplateRef as Z, reactive as ee, computed as p, unref as s, watch as oe, watchPostEffect as te, createElementBlock as u, openBlock as r, createElementVNode as d, createCommentVNode as f, normalizeClass as le, createBlock as m, createVNode as ne, withDirectives as re, vModelText as se, Fragment as g, renderList as b, withModifiers as C, withCtx as w, createTextVNode as q, toDisplayString as v, renderSlot as B } from "vue";
3
4
  import ie from "../../assets/images/required.svg.js";
4
5
  import { getErrorMessage as ae } from "../../helpers/error.js";
5
- import { deepEqual as O, deepIncludes as S } from "../../helpers/objects.js";
6
+ import { deepEqual as O, deepIncludes as I } from "../../helpers/objects.js";
6
7
  import { normalizeListOptions as ue } from "../../helpers/utils.js";
7
8
  import de from "../../utils/DoubleContour.vue.js";
9
+
8
10
  import ce from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
9
11
  import { useLabelNotch as pe } from "../../utils/useLabelNotch.js";
10
12
  import fe from "../DropdownListItem.vue.js";
11
- import T from "../PlChip/PlChip.vue.js";
13
+ import S from "../PlChip/PlChip.vue.js";
12
14
  import me from "../PlIcon24/PlIcon24.vue.js";
13
15
  import ve from "../PlSvg/PlSvg.vue.js";
14
- import he from "../PlTooltip/PlTooltip.vue.js";
16
+ import _e from "../PlTooltip/PlTooltip.vue.js";
15
17
 
16
- const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = { class: "pl-dropdown-multi__field" }, ke = ["disabled", "placeholder"], be = {
18
+ const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = { class: "pl-dropdown-multi__field" }, ke = ["disabled", "placeholder"], ge = {
17
19
  key: 0,
18
20
  class: "chips-container"
19
- }, ge = { class: "pl-dropdown-multi__controls" }, Ce = { key: 0 }, Oe = { class: "pl-dropdown-multi__open-chips-container" }, Ve = {
21
+ }, be = { class: "pl-dropdown-multi__controls" }, Ce = { key: 0 }, Oe = { class: "pl-dropdown-multi__open-chips-container" }, Ve = {
20
22
  key: 0,
21
23
  class: "nothing-found"
22
24
  }, $e = {
@@ -27,7 +29,7 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
27
29
  class: "pl-dropdown-multi__helper"
28
30
  }, Ee = {
29
31
  name: "PlDropdownMulti"
30
- }, Ue = /* @__PURE__ */ X({
32
+ }, Ke = /* @__PURE__ */ X({
31
33
  ...Ee,
32
34
  props: {
33
35
  modelValue: { default: () => [] },
@@ -37,31 +39,32 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
37
39
  error: { default: void 0 },
38
40
  placeholder: { default: "..." },
39
41
  required: { type: Boolean, default: !1 },
40
- disabled: { type: Boolean, default: !1 }
42
+ disabled: { type: Boolean, default: !1 },
43
+ groupPosition: { default: void 0 }
41
44
  },
42
45
  emits: ["update:modelValue"],
43
- setup(z, { emit: P }) {
44
- const x = P, V = (e) => x("update:modelValue", e), U = Y(), i = z, c = q(), $ = q(), h = Z("overlay"), t = ee({
46
+ setup(T, { emit: z }) {
47
+ const U = z, V = (e) => U("update:modelValue", e), x = Y(), i = T, c = P(), $ = P(), _ = Z("overlay"), t = ee({
45
48
  search: "",
46
49
  activeOption: -1,
47
50
  open: !1,
48
51
  optionsHeight: 0
49
- }), _ = p(() => Array.isArray(i.modelValue) ? i.modelValue : []), K = p(() => t.open && i.modelValue.length > 0 ? i.placeholder : i.modelValue.length > 0 ? "" : i.placeholder), A = p(() => ue(i.options ?? [])), E = p(() => _.value.map((e) => A.value.find((l) => O(l.value, e))).filter((e) => e !== void 0)), y = p(() => {
50
- const e = s(_), l = s(A);
52
+ }), h = p(() => Array.isArray(i.modelValue) ? i.modelValue : []), K = p(() => t.open && i.modelValue.length > 0 ? i.placeholder : i.modelValue.length > 0 ? "" : i.placeholder), A = p(() => ue(i.options ?? [])), E = p(() => h.value.map((e) => A.value.find((l) => O(l.value, e))).filter((e) => e !== void 0)), y = p(() => {
53
+ const e = s(h), l = s(A);
51
54
  return (t.search ? l.filter((o) => {
52
55
  const n = t.search.toLowerCase();
53
56
  return o.label.toLowerCase().includes(n) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(n) : o.value === t.search;
54
57
  }) : [...l]).map((o) => ({
55
58
  ...o,
56
- selected: S(e, o.value)
59
+ selected: I(e, o.value)
57
60
  }));
58
- }), D = p(() => i.options === void 0), k = p(() => D.value ? !0 : i.disabled), H = p(() => k.value ? void 0 : "0"), j = () => {
61
+ }), M = p(() => i.options === void 0), k = p(() => M.value ? !0 : i.disabled), H = p(() => k.value ? void 0 : "0"), j = () => {
59
62
  t.activeOption = 0;
60
- }, M = (e) => {
63
+ }, R = (e) => {
61
64
  var o;
62
- const l = s(_);
63
- V(S(l, e) ? l.filter((n) => !O(n, e)) : [...l, e]), t.search = "", (o = c == null ? void 0 : c.value) == null || o.focus();
64
- }, R = (e) => V(s(_).filter((l) => !O(l, e))), G = () => {
65
+ const l = s(h);
66
+ V(I(l, e) ? l.filter((n) => !O(n, e)) : [...l, e]), t.search = "", (o = c == null ? void 0 : c.value) == null || o.focus();
67
+ }, D = (e) => V(s(h).filter((l) => !O(l, e))), G = () => {
65
68
  var e;
66
69
  return (e = $.value) == null ? void 0 : e.focus();
67
70
  }, J = () => {
@@ -69,7 +72,7 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
69
72
  }, F = (e) => {
70
73
  var o, n, a;
71
74
  const l = e.relatedTarget;
72
- !((o = c.value) != null && o.contains(l)) && !((a = (n = h.value) == null ? void 0 : n.listRef) != null && a.contains(l)) && (t.search = "", t.open = !1);
75
+ !((o = c.value) != null && o.contains(l)) && !((a = (n = _.value) == null ? void 0 : n.listRef) != null && a.contains(l)) && (t.search = "", t.open = !1);
73
76
  }, Q = (e) => {
74
77
  var L;
75
78
  const { open: l, activeOption: o } = t;
@@ -81,11 +84,11 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
81
84
  const n = s(y), { length: a } = n;
82
85
  if (!a)
83
86
  return;
84
- ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && M(n[o].value);
87
+ ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && R(n[o].value);
85
88
  const W = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
86
89
  t.activeOption = Math.abs(o + W + a) % a, requestAnimationFrame(() => {
87
90
  var N;
88
- return (N = h.value) == null ? void 0 : N.scrollIntoActive();
91
+ return (N = _.value) == null ? void 0 : N.scrollIntoActive();
89
92
  });
90
93
  };
91
94
  return pe(c), oe(
@@ -94,7 +97,7 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
94
97
  { immediate: !0 }
95
98
  ), te(() => {
96
99
  var e;
97
- t.search, t.open && ((e = h.value) == null || e.scrollIntoActive());
100
+ t.search, t.open && ((e = _.value) == null || e.scrollIntoActive());
98
101
  }), (e, l) => (r(), u("div", {
99
102
  class: "pl-dropdown-multi__envelope",
100
103
  onClick: G
@@ -123,26 +126,26 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
123
126
  }, null, 40, ke), [
124
127
  [se, t.search]
125
128
  ]),
126
- t.open ? f("", !0) : (r(), u("div", be, [
127
- (r(!0), u(b, null, g(E.value, (o, n) => (r(), m(s(T), {
129
+ t.open ? f("", !0) : (r(), u("div", ge, [
130
+ (r(!0), u(g, null, b(E.value, (o, n) => (r(), m(s(S), {
128
131
  key: n,
129
132
  closeable: "",
130
133
  small: "",
131
134
  onClick: l[2] || (l[2] = C((a) => t.open = !0, ["stop"])),
132
- onClose: (a) => R(o.value)
135
+ onClose: (a) => D(o.value)
133
136
  }, {
134
137
  default: w(() => [
135
- B(v(o.label || o.value), 1)
138
+ q(v(o.label || o.value), 1)
136
139
  ]),
137
140
  _: 2
138
141
  }, 1032, ["onClose"]))), 128))
139
142
  ])),
140
- d("div", ge, [
141
- D.value ? (r(), m(s(me), {
143
+ d("div", be, [
144
+ M.value ? (r(), m(s(me), {
142
145
  key: 0,
143
146
  name: "loading"
144
147
  })) : f("", !0),
145
- I(e.$slots, "append"),
148
+ B(e.$slots, "append"),
146
149
  d("div", {
147
150
  class: "pl-dropdown-multi__arrow-wrapper",
148
151
  onClick: C(J, ["stop"])
@@ -157,13 +160,13 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
157
160
  uri: s(ie)
158
161
  }, null, 8, ["uri"])) : f("", !0),
159
162
  d("span", null, v(e.label), 1),
160
- s(U).tooltip ? (r(), m(s(he), {
163
+ s(x).tooltip ? (r(), m(s(_e), {
161
164
  key: 1,
162
165
  class: "info",
163
166
  position: "top"
164
167
  }, {
165
168
  tooltip: w(() => [
166
- I(e.$slots, "tooltip")
169
+ B(e.$slots, "tooltip")
167
170
  ]),
168
171
  _: 3
169
172
  })) : f("", !0)
@@ -171,7 +174,7 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
171
174
  t.open ? (r(), m(ce, {
172
175
  key: 1,
173
176
  ref_key: "overlay",
174
- ref: h,
177
+ ref: _,
175
178
  root: c.value,
176
179
  class: "pl-dropdown-multi__options",
177
180
  gap: 5,
@@ -180,19 +183,19 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
180
183
  }, {
181
184
  default: w(() => [
182
185
  d("div", Oe, [
183
- (r(!0), u(b, null, g(E.value, (o, n) => (r(), m(s(T), {
186
+ (r(!0), u(g, null, b(E.value, (o, n) => (r(), m(s(S), {
184
187
  key: n,
185
188
  closeable: "",
186
189
  small: "",
187
- onClose: (a) => R(o.value)
190
+ onClose: (a) => D(o.value)
188
191
  }, {
189
192
  default: w(() => [
190
- B(v(o.label || o.value), 1)
193
+ q(v(o.label || o.value), 1)
191
194
  ]),
192
195
  _: 2
193
196
  }, 1032, ["onClose"]))), 128))
194
197
  ]),
195
- (r(!0), u(b, null, g(y.value, (o, n) => (r(), m(fe, {
198
+ (r(!0), u(g, null, b(y.value, (o, n) => (r(), m(fe, {
196
199
  key: n,
197
200
  option: o,
198
201
  "text-item": "text",
@@ -200,20 +203,23 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
200
203
  "is-hovered": t.activeOption == n,
201
204
  size: "medium",
202
205
  "use-checkbox": "",
203
- onClick: C((a) => M(o.value), ["stop"])
206
+ onClick: C((a) => R(o.value), ["stop"])
204
207
  }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
205
208
  y.value.length ? f("", !0) : (r(), u("div", Ve, "Nothing found"))
206
209
  ]),
207
210
  _: 1
208
211
  }, 8, ["root"])) : f("", !0),
209
- ne(de, { class: "pl-dropdown-multi__contour" })
212
+ ne(de, {
213
+ class: "pl-dropdown-multi__contour",
214
+ "group-position": e.groupPosition
215
+ }, null, 8, ["group-position"])
210
216
  ])
211
- ], 42, _e),
217
+ ], 42, he),
212
218
  e.error ? (r(), u("div", $e, v(s(ae)(e.error)), 1)) : e.helper ? (r(), u("div", Ae, v(e.helper), 1)) : f("", !0)
213
219
  ]));
214
220
  }
215
221
  });
216
222
  export {
217
- Ue as default
223
+ Ke as default
218
224
  };
219
225
  //# sourceMappingURL=PlDropdownMulti.vue.js.map
package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlDropdownMulti.vue.js","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n name: 'PlDropdownMulti',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlChip } from '../PlChip';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport './pl-dropdown-multi.scss';\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected values.\n */\n modelValue: M[];\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * List of available options for the dropdown\n */\n options?: Readonly<ListOption<M>[]>;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: '...',\n required: false,\n disabled: false,\n options: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n search: '',\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value.map((v) => normalizedOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = unref(normalizedOptionsRef);\n\n return (\n data.search\n ? options.filter((opt) => {\n const search = data.search.toLowerCase();\n\n if (opt.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof opt.value === 'string') {\n return opt.value.toLowerCase().includes(search);\n }\n\n return opt.value === data.search;\n })\n : [...options]\n ).map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n data.search = '';\n rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n rootRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === 'Enter') {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search;\n\n if (data.open) {\n overlay.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown-multi\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown-multi__container\">\n <div class=\"pl-dropdown-multi__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @click.stop=\"data.open = true\" @close=\"unselectOption(opt.value)\">\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-dropdown-multi__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-dropdown-multi__arrow-wrapper\" @click.stop=\"toggleModel\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-dropdown-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown-multi__open-chips-container\">\n <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @close=\"unselectOption(opt.value)\">\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-dropdown-multi__contour\" />\n </div>\n </div>\n <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","input","overlay","useTemplateRef","data","reactive","selectedValuesRef","computed","placeholderRef","normalizedOptionsRef","normalizeListOptions","selectedOptionsRef","opt","deepEqual","filteredOptionsRef","selectedValues","unref","options","search","deepIncludes","isLoadingOptions","isDisabled","tabindex","updateActiveOption","selectOption","values","it","_a","unselectOption","d","setFocusOnInput","toggleModel","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeOption","filteredOptions","length","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
1
+ {"version":3,"file":"PlDropdownMulti.vue.js","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n name: 'PlDropdownMulti',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlChip } from '../PlChip';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport './pl-dropdown-multi.scss';\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected values.\n */\n modelValue: M[];\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * List of available options for the dropdown\n */\n options?: Readonly<ListOption<M>[]>;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * Makes some of corners not rounded\n * */\n groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: '...',\n required: false,\n disabled: false,\n options: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n search: '',\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value.map((v) => normalizedOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = unref(normalizedOptionsRef);\n\n return (\n data.search\n ? options.filter((opt) => {\n const search = data.search.toLowerCase();\n\n if (opt.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof opt.value === 'string') {\n return opt.value.toLowerCase().includes(search);\n }\n\n return opt.value === data.search;\n })\n : [...options]\n ).map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n data.search = '';\n rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n rootRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === 'Enter') {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search;\n\n if (data.open) {\n overlay.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown-multi\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown-multi__container\">\n <div class=\"pl-dropdown-multi__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @click.stop=\"data.open = true\" @close=\"unselectOption(opt.value)\">\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-dropdown-multi__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-dropdown-multi__arrow-wrapper\" @click.stop=\"toggleModel\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-dropdown-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown-multi__open-chips-container\">\n <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @close=\"unselectOption(opt.value)\">\n {{ opt.label || opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-dropdown-multi__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","input","overlay","useTemplateRef","data","reactive","selectedValuesRef","computed","placeholderRef","normalizedOptionsRef","normalizeListOptions","selectedOptionsRef","opt","deepEqual","filteredOptionsRef","selectedValues","unref","options","search","deepIncludes","isLoadingOptions","isDisabled","tabindex","updateActiveOption","selectOption","values","it","_a","unselectOption","d","setFocusOnInput","toggleModel","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeOption","filteredOptions","length","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
package/dist/components/PlElementList/PlElementList.vue.d.ts CHANGED
@@ -7,6 +7,10 @@ declare const _default: <T extends unknown = unknown, K extends number | string
7
7
  } & {
8
8
  getItemKey?: (item: T, index: number) => K;
9
9
  itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
10
+ itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);
11
+ itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);
12
+ itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);
13
+ itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);
10
14
  isActive?: (item: T, index: number) => boolean;
11
15
  disableDragging?: boolean;
12
16
  isDraggable?: (item: T, index: number) => boolean;
@@ -39,6 +43,14 @@ declare const _default: <T extends unknown = unknown, K extends number | string
39
43
  item: T;
40
44
  index: number;
41
45
  }) => unknown;
46
+ "item-before"?: (props: {
47
+ item: T;
48
+ index: number;
49
+ }) => unknown;
50
+ "item-after"?: (props: {
51
+ item: T;
52
+ index: number;
53
+ }) => unknown;
42
54
  }> & {
43
55
  "item-title": (props: {
44
56
  item: T;
@@ -48,6 +60,14 @@ declare const _default: <T extends unknown = unknown, K extends number | string
48
60
  item: T;
49
61
  index: number;
50
62
  }) => unknown;
63
+ "item-before"?: (props: {
64
+ item: T;
65
+ index: number;
66
+ }) => unknown;
67
+ "item-after"?: (props: {
68
+ item: T;
69
+ index: number;
70
+ }) => unknown;
51
71
  };
52
72
  emit: ((e: "itemClick", item: T) => void) & ((evt: "update:items", value: T[]) => void);
53
73
  }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {