@milaboratories/uikit 2.10.39 → 2.10.41

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 (197) hide show
  1. package/.turbo/turbo-build.log +154 -93
  2. package/.turbo/turbo-formatter$colon$check.log +2 -2
  3. package/.turbo/turbo-linter$colon$check.log +2 -2
  4. package/.turbo/turbo-types$colon$check.log +1 -1
  5. package/CHANGELOG.md +12 -0
  6. package/dist/assets/ui.css +1 -1
  7. package/dist/base/BtnBase.vue2.js +1 -0
  8. package/dist/base/BtnBase.vue2.js.map +1 -1
  9. package/dist/colors/index.js +3 -0
  10. package/dist/components/DataTable/TableComponent.vue2.js +1 -0
  11. package/dist/components/DataTable/TableComponent.vue2.js.map +1 -1
  12. package/dist/components/DataTable/assets/data-table-style.css +1 -1
  13. package/dist/components/PlAccordion/PlAccordionSection.vue.css +1 -1
  14. package/dist/components/PlAccordion/PlAccordionSection.vue2.js +2 -0
  15. package/dist/components/PlAccordion/PlAccordionSection.vue2.js.map +1 -1
  16. package/dist/components/PlAccordion/index.js +2 -0
  17. package/dist/components/PlAlert/PlAlert.js.map +1 -1
  18. package/dist/components/PlAlert/PlAlert.vue.d.ts.map +1 -1
  19. package/dist/components/PlAlert/PlAlert.vue2.js +19 -20
  20. package/dist/components/PlAlert/PlAlert.vue2.js.map +1 -1
  21. package/dist/components/PlAlert/index.js +1 -0
  22. package/dist/components/PlAlert/pl-alert.css +1 -1
  23. package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js +5 -0
  24. package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js.map +1 -1
  25. package/dist/components/PlAutocomplete/index.js +1 -0
  26. package/dist/components/PlAutocomplete/pl-autocomplete.css +1 -1
  27. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js +4 -0
  28. package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js.map +1 -1
  29. package/dist/components/PlAutocompleteMulti/index.js +1 -0
  30. package/dist/components/PlAutocompleteMulti/pl-autocomplete-multi.css +1 -1
  31. package/dist/components/PlBtnAccent/index.js +1 -0
  32. package/dist/components/PlBtnAccent/pl-btn-accent.css +1 -1
  33. package/dist/components/PlBtnDanger/index.js +1 -0
  34. package/dist/components/PlBtnDanger/pl-btn-danger.css +1 -1
  35. package/dist/components/PlBtnGhost/PlBtnGhost.vue2.js +1 -0
  36. package/dist/components/PlBtnGhost/PlBtnGhost.vue2.js.map +1 -1
  37. package/dist/components/PlBtnGhost/index.js +1 -0
  38. package/dist/components/PlBtnGhost/pl-btn-ghost.css +1 -1
  39. package/dist/components/PlBtnGroup/PlBtnGroup.vue2.js +1 -0
  40. package/dist/components/PlBtnGroup/PlBtnGroup.vue2.js.map +1 -1
  41. package/dist/components/PlBtnGroup/index.js +1 -0
  42. package/dist/components/PlBtnGroup/pl-btn-group.css +1 -1
  43. package/dist/components/PlBtnLink/index.js +1 -0
  44. package/dist/components/PlBtnPrimary/index.js +1 -0
  45. package/dist/components/PlBtnPrimary/pl-btn-primary.css +1 -1
  46. package/dist/components/PlBtnSecondary/index.js +1 -0
  47. package/dist/components/PlBtnSecondary/pl-btn-secondary.css +1 -1
  48. package/dist/components/PlBtnSplit/PlBtnSplit.vue2.js +1 -0
  49. package/dist/components/PlBtnSplit/PlBtnSplit.vue2.js.map +1 -1
  50. package/dist/components/PlBtnSplit/index.js +1 -0
  51. package/dist/components/PlChartHistogram/PlChartHistogram.vue.css +1 -1
  52. package/dist/components/PlChartHistogram/index.js +1 -0
  53. package/dist/components/PlChartStackedBar/index.js +2 -0
  54. package/dist/components/PlCheckbox/index.js +1 -0
  55. package/dist/components/PlCheckbox/pl-checkbox.css +1 -1
  56. package/dist/components/PlCheckboxGroup/PlCheckboxGroup.vue2.js +1 -0
  57. package/dist/components/PlCheckboxGroup/PlCheckboxGroup.vue2.js.map +1 -1
  58. package/dist/components/PlCheckboxGroup/index.js +1 -0
  59. package/dist/components/PlChip/PlChip.vue2.js +1 -0
  60. package/dist/components/PlChip/PlChip.vue2.js.map +1 -1
  61. package/dist/components/PlChip/index.js +1 -0
  62. package/dist/components/PlChip/pl-chip.css +1 -1
  63. package/dist/components/PlClipboard/PlClipboard.vue2.js +1 -0
  64. package/dist/components/PlClipboard/PlClipboard.vue2.js.map +1 -1
  65. package/dist/components/PlClipboard/index.js +1 -0
  66. package/dist/components/PlConfirmDialog.vue2.js +3 -0
  67. package/dist/components/PlConfirmDialog.vue2.js.map +1 -1
  68. package/dist/components/PlDialogModal/PlDialogModal.vue2.js +1 -1
  69. package/dist/components/PlDialogModal/index.js +1 -0
  70. package/dist/components/PlDropdown/OptionList.vue2.js +1 -0
  71. package/dist/components/PlDropdown/OptionList.vue2.js.map +1 -1
  72. package/dist/components/PlDropdown/PlDropdown.vue2.js +4 -0
  73. package/dist/components/PlDropdown/PlDropdown.vue2.js.map +1 -1
  74. package/dist/components/PlDropdown/index.js +1 -0
  75. package/dist/components/PlDropdown/pl-dropdown.css +1 -1
  76. package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js +4 -0
  77. package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js.map +1 -1
  78. package/dist/components/PlDropdownLegacy/index.js +1 -0
  79. package/dist/components/PlDropdownLine/index.js +1 -0
  80. package/dist/components/PlDropdownLine/pl-dropdown-line.css +1 -1
  81. package/dist/components/PlDropdownLine/resizable-input.css +1 -1
  82. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js +4 -0
  83. package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js.map +1 -1
  84. package/dist/components/PlDropdownMulti/index.js +1 -0
  85. package/dist/components/PlDropdownMulti/pl-dropdown-multi.css +1 -1
  86. package/dist/components/PlDropdownMultiRef/index.js +1 -0
  87. package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js +1 -0
  88. package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js.map +1 -1
  89. package/dist/components/PlDropdownRef/index.js +1 -0
  90. package/dist/components/PlEditableTitle/index.js +1 -0
  91. package/dist/components/PlEditableTitle/pl-editable-title.css +1 -1
  92. package/dist/components/PlElementList/PlElementListItem.vue.css +1 -1
  93. package/dist/components/PlElementList/PlElementListItem.vue2.js +2 -0
  94. package/dist/components/PlElementList/PlElementListItem.vue2.js.map +1 -1
  95. package/dist/components/PlElementList/index.js +1 -0
  96. package/dist/components/PlErrorAlert/PlErrorAlert.vue.css +1 -1
  97. package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js +2 -0
  98. package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js.map +1 -1
  99. package/dist/components/PlErrorAlert/index.js +1 -0
  100. package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js +1 -0
  101. package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js.map +1 -1
  102. package/dist/components/PlErrorBoundary/index.js +1 -0
  103. package/dist/components/PlFileDialog/Local.vue2.js +1 -0
  104. package/dist/components/PlFileDialog/Local.vue2.js.map +1 -1
  105. package/dist/components/PlFileDialog/PlFileDialog.vue2.js +4 -0
  106. package/dist/components/PlFileDialog/PlFileDialog.vue2.js.map +1 -1
  107. package/dist/components/PlFileDialog/Remote.vue2.js +4 -0
  108. package/dist/components/PlFileDialog/Remote.vue2.js.map +1 -1
  109. package/dist/components/PlFileDialog/Shortcuts.vue2.js +1 -0
  110. package/dist/components/PlFileDialog/Shortcuts.vue2.js.map +1 -1
  111. package/dist/components/PlFileDialog/index.js +1 -0
  112. package/dist/components/PlFileDialog/pl-file-dialog.css +1 -1
  113. package/dist/components/PlFileInput/PlFileInput.vue2.js +4 -0
  114. package/dist/components/PlFileInput/PlFileInput.vue2.js.map +1 -1
  115. package/dist/components/PlFileInput/index.js +1 -0
  116. package/dist/components/PlIcon16/PlIcon16.vue2.js +1 -0
  117. package/dist/components/PlIcon16/PlIcon16.vue2.js.map +1 -1
  118. package/dist/components/PlIcon16/index.js +1 -0
  119. package/dist/components/PlIcon24/PlIcon24.vue2.js +1 -0
  120. package/dist/components/PlIcon24/PlIcon24.vue2.js.map +1 -1
  121. package/dist/components/PlIcon24/index.js +1 -0
  122. package/dist/components/PlLoaderCircular/index.js +1 -0
  123. package/dist/components/PlLoaderLogo.vue.css +1 -1
  124. package/dist/components/PlLogView/PlLogView.vue2.js +3 -0
  125. package/dist/components/PlLogView/PlLogView.vue2.js.map +1 -1
  126. package/dist/components/PlLogView/index.js +1 -0
  127. package/dist/components/PlMaskIcon16/index.js +1 -0
  128. package/dist/components/PlMaskIcon24/index.js +1 -0
  129. package/dist/components/PlNotificationAlert/PlNotificationAlert.vue2.js +1 -0
  130. package/dist/components/PlNotificationAlert/PlNotificationAlert.vue2.js.map +1 -1
  131. package/dist/components/PlNotificationAlert/index.js +1 -0
  132. package/dist/components/PlNumberField/PlNumberField.vue2.js +1 -0
  133. package/dist/components/PlNumberField/PlNumberField.vue2.js.map +1 -1
  134. package/dist/components/PlNumberField/index.js +1 -0
  135. package/dist/components/PlProgressBar/index.js +1 -0
  136. package/dist/components/PlProgressCell/PlProgressCell.vue2.js +1 -0
  137. package/dist/components/PlProgressCell/PlProgressCell.vue2.js.map +1 -1
  138. package/dist/components/PlProgressCell/index.js +1 -0
  139. package/dist/components/PlRadio/PlRadio.vue.css +1 -1
  140. package/dist/components/PlRadio/index.js +2 -0
  141. package/dist/components/PlSearchField/PlSearchField.vue2.js +2 -0
  142. package/dist/components/PlSearchField/PlSearchField.vue2.js.map +1 -1
  143. package/dist/components/PlSearchField/index.js +1 -0
  144. package/dist/components/PlSectionSeparator/PlSectionSeparator.vue.css +1 -1
  145. package/dist/components/PlSectionSeparator/index.js +1 -0
  146. package/dist/components/PlSidebar/PlSidebarGroup.vue.css +1 -1
  147. package/dist/components/PlSidebar/PlSidebarItem.vue.css +1 -1
  148. package/dist/components/PlSidebar/index.js +2 -0
  149. package/dist/components/PlSlideModal/PlPureSlideModal.js.map +1 -1
  150. package/dist/components/PlSlideModal/PlPureSlideModal.vue.d.ts.map +1 -1
  151. package/dist/components/PlSlideModal/PlPureSlideModal.vue2.js +13 -12
  152. package/dist/components/PlSlideModal/PlPureSlideModal.vue2.js.map +1 -1
  153. package/dist/components/PlSlideModal/index.js +2 -0
  154. package/dist/components/PlSlideModal/pl-slide-modal.css +1 -1
  155. package/dist/components/PlSplash/PlSplash.vue2.js +1 -0
  156. package/dist/components/PlSplash/PlSplash.vue2.js.map +1 -1
  157. package/dist/components/PlSplash/index.js +1 -0
  158. package/dist/components/PlSplash/pl-splash.css +1 -1
  159. package/dist/components/PlStatusTag/index.js +1 -0
  160. package/dist/components/PlSvg/index.js +1 -0
  161. package/dist/components/PlTabs/Tab.vue2.js +1 -0
  162. package/dist/components/PlTabs/Tab.vue2.js.map +1 -1
  163. package/dist/components/PlTabs/index.js +1 -0
  164. package/dist/components/PlTextArea/PlTextArea.vue2.js +2 -0
  165. package/dist/components/PlTextArea/PlTextArea.vue2.js.map +1 -1
  166. package/dist/components/PlTextArea/index.js +1 -0
  167. package/dist/components/PlTextField/PlTextField.vue2.js +4 -0
  168. package/dist/components/PlTextField/PlTextField.vue2.js.map +1 -1
  169. package/dist/components/PlTextField/index.js +1 -0
  170. package/dist/components/PlToggleSwitch/index.js +1 -0
  171. package/dist/components/PlTooltip/index.js +1 -0
  172. package/dist/components/Slider.vue2.js +1 -0
  173. package/dist/components/Slider.vue2.js.map +1 -1
  174. package/dist/components/SliderRange.vue2.js +1 -0
  175. package/dist/components/SliderRange.vue2.js.map +1 -1
  176. package/dist/components/SliderRangeTriple.vue2.js +1 -0
  177. package/dist/components/SliderRangeTriple.vue2.js.map +1 -1
  178. package/dist/components/contextMenu/Menu.style.css +1 -1
  179. package/dist/index.js +79 -20
  180. package/dist/index.js.map +1 -1
  181. package/dist/layout/PlBlockPage/PlBlockPage.vue.css +1 -1
  182. package/dist/layout/PlBlockPage/PlBlockPage.vue2.js +1 -0
  183. package/dist/layout/PlBlockPage/PlBlockPage.vue2.js.map +1 -1
  184. package/dist/layout/PlBlockPage/index.js +2 -0
  185. package/dist/layout/PlContainer/index.js +1 -0
  186. package/dist/layout/PlGrid/index.js +1 -0
  187. package/dist/layout/PlPlaceholder/PlPlaceholder.vue.css +1 -1
  188. package/dist/layout/PlRow/index.js +1 -0
  189. package/dist/layout/PlSpacer/index.js +1 -0
  190. package/dist/utils/DoubleContour.style.css +1 -1
  191. package/dist/utils/DropdownOverlay/index.js +1 -0
  192. package/dist/utils/PlCloseModalBtn.vue.css +1 -1
  193. package/package.json +3 -6
  194. package/src/components/PlAlert/PlAlert.vue +3 -3
  195. package/src/components/PlAlert/pl-alert.scss +0 -7
  196. package/src/components/PlSlideModal/PlPureSlideModal.vue +5 -2
  197. package/src/components/PlSlideModal/pl-slide-modal.scss +0 -8
@@ -1 +1 @@
1
- .pl-autocomplete-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);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-autocomplete-multi{--options-bg:#1b1b1f}.pl-autocomplete-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-autocomplete-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-autocomplete-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-autocomplete-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-autocomplete-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-autocomplete-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-autocomplete-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-autocomplete-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-autocomplete-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-autocomplete-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-autocomplete-multi__field input:focus{outline:none}.pl-autocomplete-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete-multi__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete-multi__field:hover .clear{display:block}.pl-autocomplete-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-autocomplete-multi__controls .mask-16,.pl-autocomplete-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-autocomplete-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-autocomplete-multi .arrow-icon{cursor:pointer}.pl-autocomplete-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s;-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-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-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-autocomplete-multi__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete-multi .clear{z-index:1;cursor:pointer;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") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-autocomplete-multi.open,.pl-autocomplete-multi:focus-within{z-index:1}.pl-autocomplete-multi.open .pl-autocomplete-multi__container .label,.pl-autocomplete-multi:focus-within .pl-autocomplete-multi__container .label{color:var(--txt-focus)}.pl-autocomplete-multi.open .pl-autocomplete-multi__container{z-index:1000}.pl-autocomplete-multi.open .pl-autocomplete-multi__field{border-radius:6px 6px 0 0}.pl-autocomplete-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px;-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-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-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-autocomplete-multi:hover{--contour-color:var(--control-hover-color)}.pl-autocomplete-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-autocomplete-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-autocomplete-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-autocomplete-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-autocomplete-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__open-chips-container{padding:12px}.pl-autocomplete-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}
1
+ .pl-autocomplete-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);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-autocomplete-multi{--options-bg:#1b1b1f}.pl-autocomplete-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-autocomplete-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-autocomplete-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-autocomplete-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-autocomplete-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-autocomplete-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-autocomplete-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-autocomplete-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-autocomplete-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-autocomplete-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-autocomplete-multi__field input:focus{outline:none}.pl-autocomplete-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete-multi__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete-multi__field:hover .clear{display:block}.pl-autocomplete-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-autocomplete-multi__controls .mask-16,.pl-autocomplete-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-autocomplete-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-autocomplete-multi .arrow-icon{cursor:pointer}.pl-autocomplete-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s;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-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-autocomplete-multi__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete-multi .clear{z-index:1;cursor:pointer;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") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-autocomplete-multi.open,.pl-autocomplete-multi:focus-within{z-index:1}.pl-autocomplete-multi.open .pl-autocomplete-multi__container .label,.pl-autocomplete-multi:focus-within .pl-autocomplete-multi__container .label{color:var(--txt-focus)}.pl-autocomplete-multi.open .pl-autocomplete-multi__container{z-index:1000}.pl-autocomplete-multi.open .pl-autocomplete-multi__field{border-radius:6px 6px 0 0}.pl-autocomplete-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px;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-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-autocomplete-multi:hover{--contour-color:var(--control-hover-color)}.pl-autocomplete-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-autocomplete-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-autocomplete-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-autocomplete-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-autocomplete-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__open-chips-container{padding:12px}.pl-autocomplete-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}
@@ -0,0 +1 @@
1
+ import "./PlBtnAccent.js";
@@ -1 +1 @@
1
- .pl-btn-accent{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-accent.justifyCenter{justify-content:center}.pl-btn-accent.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-accent.small{--button-height:32px;--main-padding:0 8px}.pl-btn-accent.medium{--main-padding:0 16px}.pl-btn-accent.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-accent.large .mask{--mask-size:24px}.pl-btn-accent:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-accent:disabled *{color:var(--color-text)}.pl-btn-accent:not([disabled]){cursor:pointer}.pl-btn-accent:not([disabled]).hover,.pl-btn-accent:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-accent:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-accent .icon{width:16px;height:16px;display:block}.pl-btn-accent.loading{box-shadow:none!important}.pl-btn-accent.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-accent.reverse{flex-direction:row-reverse}.pl-btn-accent>span{display:inline-flex}.pl-btn-accent{--color-btn-background:var(--color-accent-default);--color-btn-hover:var(--color-accent-hover);background-color:var(--color-btn-background);border:none}.pl-btn-accent.large{--drop-shadow:3px 3px 0px #000}.pl-btn-accent.loading{background:#070529cc}.pl-btn-accent:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-accent:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}
1
+ .pl-btn-accent{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-accent.justifyCenter{justify-content:center}.pl-btn-accent.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-accent.small{--button-height:32px;--main-padding:0 8px}.pl-btn-accent.medium{--main-padding:0 16px}.pl-btn-accent.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-accent.large .mask{--mask-size:24px}.pl-btn-accent:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-accent:disabled *{color:var(--color-text)}.pl-btn-accent:not([disabled]){cursor:pointer}.pl-btn-accent:not([disabled]).hover,.pl-btn-accent:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-accent:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-accent .icon{width:16px;height:16px;display:block}.pl-btn-accent.loading{box-shadow:none!important}.pl-btn-accent.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-accent.reverse{flex-direction:row-reverse}.pl-btn-accent>span{display:inline-flex}.pl-btn-accent{--color-btn-background:var(--color-accent-default);--color-btn-hover:var(--color-accent-hover);background-color:var(--color-btn-background);border:none}.pl-btn-accent.large{--drop-shadow:3px 3px 0px #000}.pl-btn-accent.loading{background:#070529cc}.pl-btn-accent:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-accent:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}
@@ -0,0 +1 @@
1
+ import "./PlBtnDanger.js";
@@ -1 +1 @@
1
- .pl-btn-danger{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-danger.justifyCenter{justify-content:center}.pl-btn-danger.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-danger.small{--button-height:32px;--main-padding:0 8px}.pl-btn-danger.medium{--main-padding:0 16px}.pl-btn-danger.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-danger.large .mask{--mask-size:24px}.pl-btn-danger:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-danger:disabled *{color:var(--color-text)}.pl-btn-danger:not([disabled]){cursor:pointer}.pl-btn-danger:not([disabled]).hover,.pl-btn-danger:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-danger:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-danger .icon{width:16px;height:16px;display:block}.pl-btn-danger.loading{box-shadow:none!important}.pl-btn-danger.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-danger.reverse{flex-direction:row-reverse}.pl-btn-danger>span{display:inline-flex}.pl-btn-danger{--color-btn-background:var(--txt-error);--color-btn-hover:#ff5c5c;background-color:var(--color-btn-background);border:none}.pl-btn-danger.large{--drop-shadow:3px 3px 0px #000}.pl-btn-danger.loading{background:#070529cc}.pl-btn-danger:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-danger:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}
1
+ .pl-btn-danger{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-danger.justifyCenter{justify-content:center}.pl-btn-danger.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-danger.small{--button-height:32px;--main-padding:0 8px}.pl-btn-danger.medium{--main-padding:0 16px}.pl-btn-danger.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-danger.large .mask{--mask-size:24px}.pl-btn-danger:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-danger:disabled *{color:var(--color-text)}.pl-btn-danger:not([disabled]){cursor:pointer}.pl-btn-danger:not([disabled]).hover,.pl-btn-danger:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-danger:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-danger .icon{width:16px;height:16px;display:block}.pl-btn-danger.loading{box-shadow:none!important}.pl-btn-danger.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-danger.reverse{flex-direction:row-reverse}.pl-btn-danger>span{display:inline-flex}.pl-btn-danger{--color-btn-background:var(--txt-error);--color-btn-hover:#ff5c5c;background-color:var(--color-btn-background);border:none}.pl-btn-danger.large{--drop-shadow:3px 3px 0px #000}.pl-btn-danger.loading{background:#070529cc}.pl-btn-danger:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-danger:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}
@@ -1,4 +1,5 @@
1
1
  import e from "../PlIcon24/PlIcon24.js";
2
+ import "../PlMaskIcon24/index.js";
2
3
  import { useRipple as t } from "../../composition/useRipple.js";
3
4
  import './pl-btn-ghost.css';/* empty css */
4
5
  import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, unref as d, useSlots as f } from "vue";
@@ -1 +1 @@
1
- {"version":3,"file":"PlBtnGhost.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n defineProps<{\n /**\n * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n */\n loading?: boolean;\n /**\n * Size of the button, the default value is 'medium'\n */\n size?: Size;\n /**\n * If `true` the shape is round.\n */\n round?: boolean;\n /**\n * Icon to display\n */\n icon?: MaskIconName24;\n /**\n * If `true`, an icon is displayed before the text.\n */\n reverse?: boolean;\n /**\n * Justify text at the center (is `false` by default)\n */\n justifyCenter?: boolean;\n }>(),\n {\n size: undefined,\n icon: undefined,\n justifyCenter: false,\n },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n <button\n ref=\"btnRef\"\n tabindex=\"0\"\n class=\"pl-btn-ghost\"\n :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n >\n <span v-if=\"slots.default && !round\">\n <slot />\n </span>\n <slot name=\"icon\">\n <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n </slot>\n <slot name=\"append\" />\n </button>\n</template>\n"],"mappings":";;;;;CAKE,MAAM;;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAkCR,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAC9C,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAE9C,IAAS,GAAK,EAEd,IAAQ,GAAU;SAExB,EAAU,EAAO,kBAIf,EAeS,UAfT,EAeS;YAdH;GAAJ,KAAI;GACJ,UAAS;GACT,OAAK,CAAC,gBAAc;IAAA,SACV,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA,CAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA;GAEtD,EAAA,EAAK,CAAC,WAAO,CAAK,EAAA,SAAA,GAAA,EAA9B,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;IAA9B,MAAK;IAAW,MAAM,EAAA;4BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;IAA3B,MAAM,EAAA;IAAO,MAAM,EAAA;;GAErD,EAAsB,EAAA,QAAA,SAAA"}
1
+ {"version":3,"file":"PlBtnGhost.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n defineProps<{\n /**\n * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n */\n loading?: boolean;\n /**\n * Size of the button, the default value is 'medium'\n */\n size?: Size;\n /**\n * If `true` the shape is round.\n */\n round?: boolean;\n /**\n * Icon to display\n */\n icon?: MaskIconName24;\n /**\n * If `true`, an icon is displayed before the text.\n */\n reverse?: boolean;\n /**\n * Justify text at the center (is `false` by default)\n */\n justifyCenter?: boolean;\n }>(),\n {\n size: undefined,\n icon: undefined,\n justifyCenter: false,\n },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n <button\n ref=\"btnRef\"\n tabindex=\"0\"\n class=\"pl-btn-ghost\"\n :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n >\n <span v-if=\"slots.default && !round\">\n <slot />\n </span>\n <slot name=\"icon\">\n <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n </slot>\n <slot name=\"append\" />\n </button>\n</template>\n"],"mappings":";;;;;;CAKE,MAAM;;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAkCR,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAC9C,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAE9C,IAAS,GAAK,EAEd,IAAQ,GAAU;SAExB,EAAU,EAAO,kBAIf,EAeS,UAfT,EAeS;YAdH;GAAJ,KAAI;GACJ,UAAS;GACT,OAAK,CAAC,gBAAc;IAAA,SACV,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA,CAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA;GAEtD,EAAA,EAAK,CAAC,WAAO,CAAK,EAAA,SAAA,GAAA,EAA9B,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;IAA9B,MAAK;IAAW,MAAM,EAAA;4BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;IAA3B,MAAM,EAAA;IAAO,MAAM,EAAA;;GAErD,EAAsB,EAAA,QAAA,SAAA"}
@@ -0,0 +1 @@
1
+ import "./PlBtnGhost.js";
@@ -1 +1 @@
1
- .pl-btn-ghost{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-ghost.justifyCenter{justify-content:center}.pl-btn-ghost.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-ghost.small{--button-height:32px;--main-padding:0 8px}.pl-btn-ghost.medium{--main-padding:0 16px}.pl-btn-ghost.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-ghost.large .mask{--mask-size:24px}.pl-btn-ghost:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-ghost:disabled *{color:var(--color-text)}.pl-btn-ghost:not([disabled]){cursor:pointer}.pl-btn-ghost:not([disabled]).hover,.pl-btn-ghost:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-ghost:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-ghost .icon{width:16px;height:16px;display:block}.pl-btn-ghost.loading{box-shadow:none!important}.pl-btn-ghost.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-ghost.reverse{flex-direction:row-reverse}.pl-btn-ghost>span{display:inline-flex}.pl-btn-ghost{--color-text:var(--txt-01);--color-btn-hover:var(--btn-sec-hover-grey);--btn-min-width:auto;width:fit-content;min-width:var(--btn-min-width);background:0 0;border:none;gap:10px}.pl-btn-ghost:disabled{--color-text:var(--btn-disabled-bg);--icon-color:var(--dis-01);cursor:auto;box-shadow:none!important}.pl-btn-ghost.loading{--color-text:var(--btn-disabled-bg)}
1
+ .pl-btn-ghost{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-ghost.justifyCenter{justify-content:center}.pl-btn-ghost.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-ghost.small{--button-height:32px;--main-padding:0 8px}.pl-btn-ghost.medium{--main-padding:0 16px}.pl-btn-ghost.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-ghost.large .mask{--mask-size:24px}.pl-btn-ghost:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-ghost:disabled *{color:var(--color-text)}.pl-btn-ghost:not([disabled]){cursor:pointer}.pl-btn-ghost:not([disabled]).hover,.pl-btn-ghost:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-ghost:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-ghost .icon{width:16px;height:16px;display:block}.pl-btn-ghost.loading{box-shadow:none!important}.pl-btn-ghost.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-ghost.reverse{flex-direction:row-reverse}.pl-btn-ghost>span{display:inline-flex}.pl-btn-ghost{--color-text:var(--txt-01);--color-btn-hover:var(--btn-sec-hover-grey);--btn-min-width:auto;width:fit-content;min-width:var(--btn-min-width);background:0 0;border:none;gap:10px}.pl-btn-ghost:disabled{--color-text:var(--btn-disabled-bg);--icon-color:var(--dis-01);cursor:auto;box-shadow:none!important}.pl-btn-ghost.loading{--color-text:var(--btn-disabled-bg)}
@@ -1,4 +1,5 @@
1
1
  import e from "../PlTooltip/PlTooltip.js";
2
+ import "../PlTooltip/index.js";
2
3
  import { getErrorMessage as t } from "../../helpers/error.js";
3
4
  import './pl-btn-group.css';/* empty css */
4
5
  import n from "../../utils/InnerBorder.js";
@@ -1 +1 @@
1
- {"version":3,"file":"PlBtnGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: \"PlBtnGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-btn-group.scss\";\nimport { computed, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport InnerBorder from \"../../utils/InnerBorder.vue\";\nimport type { SimpleOption } from \"../../types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: \"update:modelValue\", value: M): void;\n}>();\n\nconst emitModel = (v: M) => emit(\"update:modelValue\", v);\n\nconst props = defineProps<{\n /**\n * The current selected value.\n */\n modelValue?: M;\n /**\n * The label text for the component (optional)\n */\n label?: string;\n /**\n * List of available options for the component\n */\n options: Readonly<SimpleOption<M>[]>;\n /**\n * If `true`, the component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * If `true`, the height of the component is 32px\n */\n compact?: boolean;\n /**\n * A helper text displayed below the component when there are no errors (optional).\n */\n helper?: string;\n /**\n * Error message displayed below the component (optional)\n */\n error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n props.options.map((it) => ({\n label: \"label\" in it ? it.label : it.text,\n value: it.value,\n })),\n);\n</script>\n\n<template>\n <div class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n <label v-if=\"label\">\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 <InnerBorder class=\"pl-btn-group__container\">\n <div\n v-for=\"(opt, i) in normalizedOptions\"\n :key=\"i\"\n class=\"pl-btn-group__option text-s\"\n :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n :class=\"{ active: modelValue === opt.value }\"\n @keydown.enter=\"emitModel(opt.value)\"\n @click=\"emitModel(opt.value)\"\n >\n {{ opt.label }}\n </div>\n </InnerBorder>\n <div v-if=\"helper\" class=\"pl-btn-group__helper\">{{ helper }}</div>\n <div v-else-if=\"error\" class=\"pl-btn-group__error\">{{ getErrorMessage(error) }}</div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;EAYR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,KAAa,MAAS,EAAK,qBAAqB,EAAE,EAElD,IAAQ,GA+BR,IAAoB,QACxB,EAAM,QAAQ,KAAK,OAAQ;GACzB,OAAO,WAAW,IAAK,EAAG,QAAQ,EAAG;GACrC,OAAO,EAAG;GACX,EAAE,CACJ;yBAIC,EAwBM,OAAA,EAxBD,OAAK,EAAA,CAAC,gBAAc;GAAA,UAAW,EAAA;GAAQ,SAAE,EAAA;GAAO,CAAA,CAAA,EAAA,EAAA;GACtC,EAAA,SAAA,GAAA,EAAb,EAOQ,SAAA,GAAA,CANN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;IAJoB,OAAM;IAAO,UAAS;;IACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;GAI7B,EAYc,GAAA,EAZD,OAAM,2BAAyB,EAAA;qBAEH,EAAA,EAAA,GAAA,EADvC,EAUM,GAAA,MAAA,EATe,EAAA,QAAX,GAAK,YADf,EAUM,OAAA;KARH,KAAK;KACN,OAAK,EAAA,CAAC,+BAA6B,EAAA,QAEjB,EAAA,eAAe,EAAI,OAAK,CAAA,CAAA;KADzC,UAAU,EAAA,eAAe,EAAI,SAAS,EAAA,WAAW,KAAA,IAAS;KAE1D,WAAO,GAAA,MAAQ,EAAU,EAAI,MAAK,EAAA,CAAA,QAAA,CAAA;KAClC,UAAK,MAAE,EAAU,EAAI,MAAK;SAExB,EAAI,MAAK,EAAA,IAAA,EAAA;;;GAGL,EAAA,UAAA,GAAA,EAAX,EAAkE,OAAlE,GAAkE,EAAf,EAAA,OAAM,EAAA,EAAA,IACzC,EAAA,SAAA,GAAA,EAAhB,EAAqF,OAArF,GAAqF,EAA/B,EAAA,EAAe,CAAC,EAAA,MAAK,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
1
+ {"version":3,"file":"PlBtnGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: \"PlBtnGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-btn-group.scss\";\nimport { computed, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport InnerBorder from \"../../utils/InnerBorder.vue\";\nimport type { SimpleOption } from \"../../types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: \"update:modelValue\", value: M): void;\n}>();\n\nconst emitModel = (v: M) => emit(\"update:modelValue\", v);\n\nconst props = defineProps<{\n /**\n * The current selected value.\n */\n modelValue?: M;\n /**\n * The label text for the component (optional)\n */\n label?: string;\n /**\n * List of available options for the component\n */\n options: Readonly<SimpleOption<M>[]>;\n /**\n * If `true`, the component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * If `true`, the height of the component is 32px\n */\n compact?: boolean;\n /**\n * A helper text displayed below the component when there are no errors (optional).\n */\n helper?: string;\n /**\n * Error message displayed below the component (optional)\n */\n error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n props.options.map((it) => ({\n label: \"label\" in it ? it.label : it.text,\n value: it.value,\n })),\n);\n</script>\n\n<template>\n <div class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n <label v-if=\"label\">\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 <InnerBorder class=\"pl-btn-group__container\">\n <div\n v-for=\"(opt, i) in normalizedOptions\"\n :key=\"i\"\n class=\"pl-btn-group__option text-s\"\n :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n :class=\"{ active: modelValue === opt.value }\"\n @keydown.enter=\"emitModel(opt.value)\"\n @click=\"emitModel(opt.value)\"\n >\n {{ opt.label }}\n </div>\n </InnerBorder>\n <div v-if=\"helper\" class=\"pl-btn-group__helper\">{{ helper }}</div>\n <div v-else-if=\"error\" class=\"pl-btn-group__error\">{{ getErrorMessage(error) }}</div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;EAYR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,KAAa,MAAS,EAAK,qBAAqB,EAAE,EAElD,IAAQ,GA+BR,IAAoB,QACxB,EAAM,QAAQ,KAAK,OAAQ;GACzB,OAAO,WAAW,IAAK,EAAG,QAAQ,EAAG;GACrC,OAAO,EAAG;GACX,EAAE,CACJ;yBAIC,EAwBM,OAAA,EAxBD,OAAK,EAAA,CAAC,gBAAc;GAAA,UAAW,EAAA;GAAQ,SAAE,EAAA;GAAO,CAAA,CAAA,EAAA,EAAA;GACtC,EAAA,SAAA,GAAA,EAAb,EAOQ,SAAA,GAAA,CANN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;IAJoB,OAAM;IAAO,UAAS;;IACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;GAI7B,EAYc,GAAA,EAZD,OAAM,2BAAyB,EAAA;qBAEH,EAAA,EAAA,GAAA,EADvC,EAUM,GAAA,MAAA,EATe,EAAA,QAAX,GAAK,YADf,EAUM,OAAA;KARH,KAAK;KACN,OAAK,EAAA,CAAC,+BAA6B,EAAA,QAEjB,EAAA,eAAe,EAAI,OAAK,CAAA,CAAA;KADzC,UAAU,EAAA,eAAe,EAAI,SAAS,EAAA,WAAW,KAAA,IAAS;KAE1D,WAAO,GAAA,MAAQ,EAAU,EAAI,MAAK,EAAA,CAAA,QAAA,CAAA;KAClC,UAAK,MAAE,EAAU,EAAI,MAAK;SAExB,EAAI,MAAK,EAAA,IAAA,EAAA;;;GAGL,EAAA,UAAA,GAAA,EAAX,EAAkE,OAAlE,GAAkE,EAAf,EAAA,OAAM,EAAA,EAAA,IACzC,EAAA,SAAA,GAAA,EAAhB,EAAqF,OAArF,GAAqF,EAA/B,EAAA,EAAe,CAAC,EAAA,MAAK,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
@@ -0,0 +1 @@
1
+ import "./PlBtnGroup.js";
@@ -1 +1 @@
1
- .pl-btn-group{--pl-btn-group-height:40px;box-sizing:border-box;font-family:var(--control-font-family);position:relative}.pl-btn-group label{font-weight:500;font-size:var(--font-size-base);align-items:center;gap:4px;margin-bottom:6px;line-height:20px;display:flex}.pl-btn-group__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-btn-group__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-btn-group .inner-border{height:var(--pl-btn-group-height);min-height:var(--pl-btn-group-height)}.pl-btn-group .inner-border:after{border:1px solid var(--color-border-default);border-radius:6px}.pl-btn-group__container{box-sizing:content-box;text-align:center;-webkit-user-select:none;user-select:none;border-radius:6px;flex:1;align-items:center;width:100%;font-size:10px;font-weight:500;display:flex}.pl-btn-group__option{cursor:pointer;text-transform:capitalize;color:var(--btn-switcher-option-color);white-space:nowrap;outline:none;flex-direction:row;flex:1;justify-content:center;align-self:stretch;align-items:center;padding:0 12px;display:flex;position:relative}.pl-btn-group__option:hover:not(.active){background-color:var(--btn-sec-hover-grey)}.pl-btn-group__option:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.pl-btn-group__option:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.pl-btn-group__option:focus-visible{position:relative}.pl-btn-group__option:focus-visible:after{content:"";pointer-events:none;border:2px solid var(--border-color-focus);border-radius:inherit;z-index:1;position:absolute;inset:0}.pl-btn-group__option:not(.active)+.pl-btn-group__option:not(.active):before{content:"";background-color:var(--color-border-default);width:1px;height:24px;position:absolute;top:50%;left:-1px;transform:translateY(-50%)}.pl-btn-group__option.active{background:var(--btn-switcher-bg);border:var(--btn-switcher-active-option-border);box-shadow:var(--btn-group-shape-shadow);color:var(--btn-switcher-active-option-color);z-index:1;border-radius:6px;padding:0 11px}.pl-btn-group.compact{--pl-btn-group-height:32px}.pl-btn-group.disabled{--color-border-default:var(--color-dis-01);--btn-switcher-bg:var(--color-dis-01);--btn-switcher-option-color:var(--color-dis-01);--btn-switcher-active-option-color:var(--color-dis-00);--btn-switcher-active-option-border:0px;pointer-events:none;tab-index:unset!important}
1
+ .pl-btn-group{--pl-btn-group-height:40px;box-sizing:border-box;font-family:var(--control-font-family);position:relative}.pl-btn-group label{font-weight:500;font-size:var(--font-size-base);align-items:center;gap:4px;margin-bottom:6px;line-height:20px;display:flex}.pl-btn-group__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-btn-group__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-btn-group .inner-border{height:var(--pl-btn-group-height);min-height:var(--pl-btn-group-height)}.pl-btn-group .inner-border:after{border:1px solid var(--color-border-default);border-radius:6px}.pl-btn-group__container{box-sizing:content-box;text-align:center;user-select:none;border-radius:6px;flex:1;align-items:center;width:100%;font-size:10px;font-weight:500;display:flex}.pl-btn-group__option{cursor:pointer;text-transform:capitalize;color:var(--btn-switcher-option-color);white-space:nowrap;outline:none;flex-direction:row;flex:1;justify-content:center;align-self:stretch;align-items:center;padding:0 12px;display:flex;position:relative}.pl-btn-group__option:hover:not(.active){background-color:var(--btn-sec-hover-grey)}.pl-btn-group__option:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.pl-btn-group__option:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.pl-btn-group__option:focus-visible{position:relative}.pl-btn-group__option:focus-visible:after{content:"";pointer-events:none;border:2px solid var(--border-color-focus);border-radius:inherit;z-index:1;position:absolute;inset:0}.pl-btn-group__option:not(.active)+.pl-btn-group__option:not(.active):before{content:"";background-color:var(--color-border-default);width:1px;height:24px;position:absolute;top:50%;left:-1px;transform:translateY(-50%)}.pl-btn-group__option.active{background:var(--btn-switcher-bg);border:var(--btn-switcher-active-option-border);box-shadow:var(--btn-group-shape-shadow);color:var(--btn-switcher-active-option-color);z-index:1;border-radius:6px;padding:0 11px}.pl-btn-group.compact{--pl-btn-group-height:32px}.pl-btn-group.disabled{--color-border-default:var(--color-dis-01);--btn-switcher-bg:var(--color-dis-01);--btn-switcher-option-color:var(--color-dis-01);--btn-switcher-active-option-color:var(--color-dis-00);--btn-switcher-active-option-border:0px;pointer-events:none;tab-index:unset!important}
@@ -0,0 +1 @@
1
+ import "./PlBtnLink.js";
@@ -0,0 +1 @@
1
+ import "./PlBtnPrimary.js";
@@ -1 +1 @@
1
- .pl-btn-primary{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);--icon-color:var(--ic-00);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-primary.justifyCenter{justify-content:center}.pl-btn-primary.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-primary.small{--button-height:32px;--main-padding:0 8px}.pl-btn-primary.medium{--main-padding:0 16px}.pl-btn-primary.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-primary.large .mask{--mask-size:24px}.pl-btn-primary:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-primary:disabled *{color:var(--color-text)}.pl-btn-primary:not([disabled]){cursor:pointer}.pl-btn-primary:not([disabled]).hover,.pl-btn-primary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-primary:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-primary .icon{width:16px;height:16px;display:block}.pl-btn-primary.loading{box-shadow:none!important}.pl-btn-primary.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-primary.reverse{flex-direction:row-reverse}.pl-btn-primary>span{display:inline-flex}.pl-btn-primary{--color-btn-hover:var(--color-primary-hover);--color-btn-background:var(--color-primary-default);--btn-disabled-bg:var(--color-dis-01);--shape-shadow:var(--btn-shape-shadow);background-color:var(--color-btn-background);--append-shadow:inset 0 0 0 1px #110529;border:none;min-width:160px}.pl-btn-primary.loading{background:#070529cc}.pl-btn-primary:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-primary:active{--shape-shadow:0 0 0 0 transparent}
1
+ .pl-btn-primary{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);--icon-color:var(--ic-00);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-primary.justifyCenter{justify-content:center}.pl-btn-primary.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-primary.small{--button-height:32px;--main-padding:0 8px}.pl-btn-primary.medium{--main-padding:0 16px}.pl-btn-primary.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-primary.large .mask{--mask-size:24px}.pl-btn-primary:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-primary:disabled *{color:var(--color-text)}.pl-btn-primary:not([disabled]){cursor:pointer}.pl-btn-primary:not([disabled]).hover,.pl-btn-primary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-primary:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-primary .icon{width:16px;height:16px;display:block}.pl-btn-primary.loading{box-shadow:none!important}.pl-btn-primary.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-primary.reverse{flex-direction:row-reverse}.pl-btn-primary>span{display:inline-flex}.pl-btn-primary{--color-btn-hover:var(--color-primary-hover);--color-btn-background:var(--color-primary-default);--btn-disabled-bg:var(--color-dis-01);--shape-shadow:var(--btn-shape-shadow);background-color:var(--color-btn-background);--append-shadow:inset 0 0 0 1px #110529;border:none;min-width:160px}.pl-btn-primary.loading{background:#070529cc}.pl-btn-primary:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-primary:active{--shape-shadow:0 0 0 0 transparent}
@@ -0,0 +1 @@
1
+ import "./PlBtnSecondary.js";
@@ -1 +1 @@
1
- .pl-btn-secondary{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-secondary.justifyCenter{justify-content:center}.pl-btn-secondary.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-secondary.small{--button-height:32px;--main-padding:0 8px}.pl-btn-secondary.medium{--main-padding:0 16px}.pl-btn-secondary.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-secondary.large .mask{--mask-size:24px}.pl-btn-secondary:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-secondary:disabled *{color:var(--color-text)}.pl-btn-secondary:not([disabled]){cursor:pointer}.pl-btn-secondary:not([disabled]).hover,.pl-btn-secondary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-secondary:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-secondary .icon{width:16px;height:16px;display:block}.pl-btn-secondary.loading{box-shadow:none!important}.pl-btn-secondary.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-secondary.reverse{flex-direction:row-reverse}.pl-btn-secondary>span{display:inline-flex}.pl-btn-secondary{border:1px solid var(--color-border);--color-border:var(--color-border-default);--color-text:var(--txt-01);--color-btn-hover:var(--btn-sec-hover-grey);background:0 0;min-width:160px}.pl-btn-secondary:disabled{--color-text:var(--color-dis-01);--color-border:var(--color-dis-01);--icon-color:var(--dis-01);box-shadow:none}.pl-btn-secondary:focus-visible{border-width:0}.pl-btn-secondary:active{--drop-shadow:inset 0px 3px 0px #24223d1f}
1
+ .pl-btn-secondary{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-secondary.justifyCenter{justify-content:center}.pl-btn-secondary.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-secondary.small{--button-height:32px;--main-padding:0 8px}.pl-btn-secondary.medium{--main-padding:0 16px}.pl-btn-secondary.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-secondary.large .mask{--mask-size:24px}.pl-btn-secondary:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-secondary:disabled *{color:var(--color-text)}.pl-btn-secondary:not([disabled]){cursor:pointer}.pl-btn-secondary:not([disabled]).hover,.pl-btn-secondary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-secondary:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-secondary .icon{width:16px;height:16px;display:block}.pl-btn-secondary.loading{box-shadow:none!important}.pl-btn-secondary.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-secondary.reverse{flex-direction:row-reverse}.pl-btn-secondary>span{display:inline-flex}.pl-btn-secondary{border:1px solid var(--color-border);--color-border:var(--color-border-default);--color-text:var(--txt-01);--color-btn-hover:var(--btn-sec-hover-grey);background:0 0;min-width:160px}.pl-btn-secondary:disabled{--color-text:var(--color-dis-01);--color-border:var(--color-dis-01);--icon-color:var(--dis-01);box-shadow:none}.pl-btn-secondary:focus-visible{border-width:0}.pl-btn-secondary:active{--drop-shadow:inset 0px 3px 0px #24223d1f}
@@ -1,6 +1,7 @@
1
1
  import e from "../DropdownListItem.js";
2
2
  import { normalizeListOptions as t } from "../../helpers/utils.js";
3
3
  import n from "../PlIcon16/PlIcon16.js";
4
+ import "../PlIcon16/index.js";
4
5
  import { useElementPosition as r } from "../../composition/usePosition.js";
5
6
  import './pl-btn-split.css';/* empty css */
6
7
  import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, watch as S, withKeys as C, withModifiers as w } from "vue";
@@ -1 +1 @@
1
- {"version":3,"file":"PlBtnSplit.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, unref, watch } from \"vue\";\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\n\nimport \"./pl-btn-split.scss\";\n\nconst props = defineProps<{\n /**\n * List of available options for the dropdown menu\n */\n options?: Readonly<ListOption<M>[]>;\n\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n\n /**\n * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n */\n loading?: boolean;\n}>();\n\nconst emits = defineEmits([\"click\"]);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n open: false,\n optionsHeight: 0,\n activeIndex: -1,\n});\n\ndefineExpose({\n data,\n});\n\nconst optionsStyle = reactive({\n top: \"0px\",\n left: \"0px\",\n width: \"0px\",\n});\n\nwatch(\n list,\n (el) => {\n if (el) {\n const rect = el.getBoundingClientRect();\n data.optionsHeight = rect.height;\n window.dispatchEvent(new CustomEvent(\"adjust\"));\n }\n },\n { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? \"chevron-up\" : \"chevron-down\"));\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(\n () =>\n items.value.find((o) => deepEqual(o.value, model.value))?.label ??\n (props.options === undefined ? \"...\" : \"\"),\n);\n\nuseElementPosition(root, (pos) => {\n const focusWidth = 3;\n\n const downTopOffset = pos.top + pos.height + focusWidth;\n\n if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n optionsStyle.top = pos.top - data.optionsHeight - focusWidth + \"px\";\n } else {\n optionsStyle.top = downTopOffset + \"px\";\n }\n\n optionsStyle.left = pos.left + \"px\";\n optionsStyle.width = pos.width + \"px\";\n});\n\nconst selectOption = (v: M | undefined) => {\n model.value = v!;\n data.open = false;\n root?.value?.focus();\n};\n\nfunction emitEnter() {\n emits(\"click\");\n}\n\nconst handleKeydown = (e: {\n code: string;\n preventDefault(): void;\n stopPropagation(): void;\n target: EventTarget | null;\n}) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n if (e.target === buttonAction.value && e.code === \"Enter\") {\n emitEnter();\n return;\n }\n\n const { open, activeIndex } = data;\n\n if (!open && e.target === menuActivator.value) {\n if (e.code === \"Enter\") {\n data.open = true;\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n root.value?.focus();\n }\n\n const filtered = unref(items);\n\n const { length } = filtered;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n</script>\n<template>\n <div\n ref=\"root\"\n :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n class=\"pl-btn-split d-flex\"\n @focusout=\"onFocusOut\"\n @keydown=\"handleKeydown\"\n >\n <div\n ref=\"buttonAction\"\n class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n tabindex=\"0\"\n @click=\"emitEnter\"\n @keyup.stop.enter=\"emitEnter\"\n >\n {{ actionName }}\n </div>\n <div\n ref=\"menuActivator\"\n class=\"pl-btn-split__icon-container d-flex align-center justify-center\"\n tabindex=\"0\"\n @click=\"data.open = !data.open\"\n >\n <PlIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n </div>\n\n <Teleport v-if=\"data.open\" to=\"body\">\n <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\n <DropdownListItem\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"'medium'\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"PlBtnSplit.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, unref, watch } from \"vue\";\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\n\nimport \"./pl-btn-split.scss\";\n\nconst props = defineProps<{\n /**\n * List of available options for the dropdown menu\n */\n options?: Readonly<ListOption<M>[]>;\n\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n\n /**\n * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n */\n loading?: boolean;\n}>();\n\nconst emits = defineEmits([\"click\"]);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n open: false,\n optionsHeight: 0,\n activeIndex: -1,\n});\n\ndefineExpose({\n data,\n});\n\nconst optionsStyle = reactive({\n top: \"0px\",\n left: \"0px\",\n width: \"0px\",\n});\n\nwatch(\n list,\n (el) => {\n if (el) {\n const rect = el.getBoundingClientRect();\n data.optionsHeight = rect.height;\n window.dispatchEvent(new CustomEvent(\"adjust\"));\n }\n },\n { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? \"chevron-up\" : \"chevron-down\"));\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(\n () =>\n items.value.find((o) => deepEqual(o.value, model.value))?.label ??\n (props.options === undefined ? \"...\" : \"\"),\n);\n\nuseElementPosition(root, (pos) => {\n const focusWidth = 3;\n\n const downTopOffset = pos.top + pos.height + focusWidth;\n\n if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n optionsStyle.top = pos.top - data.optionsHeight - focusWidth + \"px\";\n } else {\n optionsStyle.top = downTopOffset + \"px\";\n }\n\n optionsStyle.left = pos.left + \"px\";\n optionsStyle.width = pos.width + \"px\";\n});\n\nconst selectOption = (v: M | undefined) => {\n model.value = v!;\n data.open = false;\n root?.value?.focus();\n};\n\nfunction emitEnter() {\n emits(\"click\");\n}\n\nconst handleKeydown = (e: {\n code: string;\n preventDefault(): void;\n stopPropagation(): void;\n target: EventTarget | null;\n}) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n if (e.target === buttonAction.value && e.code === \"Enter\") {\n emitEnter();\n return;\n }\n\n const { open, activeIndex } = data;\n\n if (!open && e.target === menuActivator.value) {\n if (e.code === \"Enter\") {\n data.open = true;\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n root.value?.focus();\n }\n\n const filtered = unref(items);\n\n const { length } = filtered;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n</script>\n<template>\n <div\n ref=\"root\"\n :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n class=\"pl-btn-split d-flex\"\n @focusout=\"onFocusOut\"\n @keydown=\"handleKeydown\"\n >\n <div\n ref=\"buttonAction\"\n class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n tabindex=\"0\"\n @click=\"emitEnter\"\n @keyup.stop.enter=\"emitEnter\"\n >\n {{ actionName }}\n </div>\n <div\n ref=\"menuActivator\"\n class=\"pl-btn-split__icon-container d-flex align-center justify-center\"\n tabindex=\"0\"\n @click=\"data.open = !data.open\"\n >\n <PlIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n </div>\n\n <Teleport v-if=\"data.open\" to=\"body\">\n <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\n <DropdownListItem\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"'medium'\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ import "./PlBtnSplit.js";
@@ -1 +1 @@
1
- ._component_12ebd_2{flex-direction:column;gap:24px;display:flex}._component_12ebd_2 svg{font-family:var(--font-family-base)}._title_12ebd_11{letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}.svg-tooltip{font-family:var(--font-family-base);color:#fff;text-overflow:ellipsis;white-space:pre;z-index:300;visibility:hidden;background:#454d5de6;border-radius:.1rem;max-width:320px;padding:.2rem .4rem;font-size:14px;display:block;position:absolute}
1
+ ._component_12ebd_2{flex-direction:column;gap:24px;display:flex;& svg{font-family:var(--font-family-base)}}._title_12ebd_11{letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}.svg-tooltip{font-family:var(--font-family-base);color:#fff;text-overflow:ellipsis;white-space:pre;z-index:300;visibility:hidden;background:#454d5de6;border-radius:.1rem;max-width:320px;padding:.2rem .4rem;font-size:14px;display:block;position:absolute}
@@ -0,0 +1 @@
1
+ import "./PlChartHistogram.js";
@@ -0,0 +1,2 @@
1
+ import "./PlChartStackedBar.js";
2
+ import "./PlChartStackedBarCompact.js";
@@ -0,0 +1 @@
1
+ import "./PlCheckbox.js";
@@ -1 +1 @@
1
- .pl-checkbox{--color-label:var(--color-text);--cursor-label:pointer;align-items:center;gap:8px;display:flex}.pl-checkbox.disabled{--color-label:var(--color-dis-01);--cursor-label:default;pointer-events:none}.pl-checkbox>label{-webkit-user-select:none;user-select:none;color:var(--color-label);cursor:var(--cursor-label);align-items:center;font-size:14px;font-weight:500;display:inline-flex}
1
+ .pl-checkbox{--color-label:var(--color-text);--cursor-label:pointer;align-items:center;gap:8px;display:flex}.pl-checkbox.disabled{--color-label:var(--color-dis-01);--cursor-label:default;pointer-events:none}.pl-checkbox>label{user-select:none;color:var(--color-label);cursor:var(--cursor-label);align-items:center;font-size:14px;font-weight:500;display:inline-flex}
@@ -1,4 +1,5 @@
1
1
  import e from "../PlTooltip/PlTooltip.js";
2
+ import "../PlTooltip/index.js";
2
3
  import t from "../PlCheckbox/PlCheckboxBase.js";
3
4
  import './pl-checkbox-group.css';/* empty css */
4
5
  import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, toDisplayString as p, unref as m, useSlots as h, withCtx as g, withModifiers as _ } from "vue";
@@ -1 +1 @@
1
- {"version":3,"file":"PlCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlCheckboxGroup/PlCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for selecting multiple values from a list of options\n */\nexport default {\n name: \"PlCheckboxGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-checkbox-group.scss\";\nimport type { SimpleOption } from \"../../types\";\nimport PlCheckboxBase from \"../PlCheckbox/PlCheckboxBase.vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport { useSlots } from \"vue\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst props = defineProps<{\n /**\n * The current selected values.\n */\n modelValue: M[];\n /**\n * The label text for the component (optional)\n */\n label?: string;\n /**\n * List of available options for the component\n */\n options: Readonly<SimpleOption<M>[]>;\n /**\n * If `true`, the component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n}>();\n\nconst hasValue = (value: M) => {\n return props.modelValue.includes(value);\n};\n\nconst updateModel = (value: M) => {\n const values = props.modelValue ?? [];\n emit(\n \"update:modelValue\",\n hasValue(value) ? values.filter((v) => v !== value) : [...values, value],\n );\n};\n</script>\n\n<template>\n <div class=\"pl-checkbox-group\" :class=\"{ disabled }\">\n <label v-if=\"label\">\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 <div\n v-for=\"(opt, i) in options.map((it) => ({\n label: 'label' in it ? it.label : it.text,\n value: it.value,\n }))\"\n :key=\"i\"\n >\n <PlCheckboxBase\n :disabled=\"disabled\"\n :label=\"opt.label\"\n :model-value=\"hasValue(opt.value)\"\n @update:model-value=\"() => updateModel(opt.value)\"\n />\n <label @click.stop=\"() => updateModel(opt.value)\">{{ opt.label }}</label>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;CAKE,MAAM;;;;;;;;;EAWR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAIP,IAAQ,GAmBR,KAAY,MACT,EAAM,WAAW,SAAS,EAAM,EAGnC,KAAe,MAAa;GAChC,IAAM,IAAS,EAAM,cAAc,EAAE;AACrC,KACE,qBACA,EAAS,EAAM,GAAG,EAAO,QAAQ,MAAM,MAAM,EAAM,GAAG,CAAC,GAAG,GAAQ,EAAM,CACzE;;yBAKD,EAwBM,OAAA,EAxBD,OAAK,EAAA,CAAC,qBAAmB,EAAA,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAClC,EAAA,SAAA,GAAA,EAAb,EAOQ,SAAA,GAAA,CANN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;GAJoB,OAAM;GAAO,UAAS;;GACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;0CAI7B,EAcM,GAAA,MAAA,EAbe,EAAA,QAAQ,KAAK,OAAE;qBAAkC,IAAK,EAAG,QAAQ,EAAG;UAAqB,EAAG;QAAvG,GAAK,YADf,EAcM,OAAA,EATH,KAAK,GAAC,EAAA,CAEP,EAKE,GAAA;GAJC,UAAU,EAAA;GACV,OAAO,EAAI;GACX,eAAa,EAAS,EAAI,MAAK;GAC/B,6BAA0B,EAAY,EAAI,MAAK;;;;;;MAElD,EAAyE,SAAA,EAAjE,SAAK,QAAa,EAAY,EAAI,MAAK,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAM,EAAI,MAAK,EAAA,GAAA,EAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"PlCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlCheckboxGroup/PlCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for selecting multiple values from a list of options\n */\nexport default {\n name: \"PlCheckboxGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-checkbox-group.scss\";\nimport type { SimpleOption } from \"../../types\";\nimport PlCheckboxBase from \"../PlCheckbox/PlCheckboxBase.vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport { useSlots } from \"vue\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst props = defineProps<{\n /**\n * The current selected values.\n */\n modelValue: M[];\n /**\n * The label text for the component (optional)\n */\n label?: string;\n /**\n * List of available options for the component\n */\n options: Readonly<SimpleOption<M>[]>;\n /**\n * If `true`, the component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n}>();\n\nconst hasValue = (value: M) => {\n return props.modelValue.includes(value);\n};\n\nconst updateModel = (value: M) => {\n const values = props.modelValue ?? [];\n emit(\n \"update:modelValue\",\n hasValue(value) ? values.filter((v) => v !== value) : [...values, value],\n );\n};\n</script>\n\n<template>\n <div class=\"pl-checkbox-group\" :class=\"{ disabled }\">\n <label v-if=\"label\">\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 <div\n v-for=\"(opt, i) in options.map((it) => ({\n label: 'label' in it ? it.label : it.text,\n value: it.value,\n }))\"\n :key=\"i\"\n >\n <PlCheckboxBase\n :disabled=\"disabled\"\n :label=\"opt.label\"\n :model-value=\"hasValue(opt.value)\"\n @update:model-value=\"() => updateModel(opt.value)\"\n />\n <label @click.stop=\"() => updateModel(opt.value)\">{{ opt.label }}</label>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;CAKE,MAAM;;;;;;;;;EAWR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAIP,IAAQ,GAmBR,KAAY,MACT,EAAM,WAAW,SAAS,EAAM,EAGnC,KAAe,MAAa;GAChC,IAAM,IAAS,EAAM,cAAc,EAAE;AACrC,KACE,qBACA,EAAS,EAAM,GAAG,EAAO,QAAQ,MAAM,MAAM,EAAM,GAAG,CAAC,GAAG,GAAQ,EAAM,CACzE;;yBAKD,EAwBM,OAAA,EAxBD,OAAK,EAAA,CAAC,qBAAmB,EAAA,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAClC,EAAA,SAAA,GAAA,EAAb,EAOQ,SAAA,GAAA,CANN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;GAJoB,OAAM;GAAO,UAAS;;GACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;0CAI7B,EAcM,GAAA,MAAA,EAbe,EAAA,QAAQ,KAAK,OAAE;qBAAkC,IAAK,EAAG,QAAQ,EAAG;UAAqB,EAAG;QAAvG,GAAK,YADf,EAcM,OAAA,EATH,KAAK,GAAC,EAAA,CAEP,EAKE,GAAA;GAJC,UAAU,EAAA;GACV,OAAO,EAAI;GACX,eAAa,EAAS,EAAI,MAAK;GAC/B,6BAA0B,EAAY,EAAI,MAAK;;;;;;MAElD,EAAyE,SAAA,EAAjE,SAAK,QAAa,EAAY,EAAI,MAAK,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAM,EAAI,MAAK,EAAA,GAAA,EAAA,CAAA,CAAA"}
@@ -0,0 +1 @@
1
+ import "./PlCheckboxGroup.js";
@@ -1,4 +1,5 @@
1
1
  import e from "../PlTooltip/PlTooltip.js";
2
+ import "../PlTooltip/index.js";
2
3
  import './pl-chip.css';/* empty css */
3
4
  import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createSlots as a, defineComponent as o, normalizeClass as s, onMounted as c, openBlock as l, ref as u, renderSlot as d, unref as f, withCtx as p, withKeys as m, withModifiers as h } from "vue";
4
5
  var g = { class: "pl-chip__text" }, _ = /* @__PURE__ */ o({
@@ -1 +1 @@
1
- {"version":3,"file":"PlChip.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlChip/PlChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-chip.scss\";\nimport { onMounted, ref } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\n\ndefineEmits([\"close\"]);\n\ndefineProps<{\n closeable?: boolean;\n small?: boolean;\n}>();\n\nconst chip = ref<HTMLElement>();\nconst canShowTooltip = ref(false);\n\nonMounted(() => {\n if (chip.value) {\n canShowTooltip.value = chip.value?.clientWidth >= 256;\n }\n});\n</script>\n\n<template>\n <PlTooltip position=\"top\" class=\"pl-chip-tooltip\" :delay=\"500\">\n <template v-if=\"canShowTooltip\" #tooltip>\n <slot />\n </template>\n <div ref=\"chip\" class=\"pl-chip\" :class=\"{ small }\">\n <div class=\"pl-chip__text\">\n <slot />\n </div>\n <div\n v-if=\"closeable\"\n tabindex=\"0\"\n class=\"pl-chip__close\"\n @keydown.enter=\"$emit('close')\"\n @click.stop=\"$emit('close')\"\n >\n <div class=\"pl-chip__close--icon\" />\n </div>\n </div>\n </PlTooltip>\n</template>\n"],"mappings":";;;;;;;;;;;EAYA,IAAM,IAAO,GAAkB,EACzB,IAAiB,EAAI,GAAM;SAEjC,QAAgB;AACd,GAAI,EAAK,UACP,EAAe,QAAQ,EAAK,OAAO,eAAe;IAEpD,kBAIA,EAkBY,EAAA,EAAA,EAAA;GAlBD,UAAS;GAAM,OAAM;GAAmB,OAAO;;oBAiBlD,CAbN,EAaM,OAAA;aAbG;IAAJ,KAAI;IAAO,OAAK,EAAA,CAAC,WAAS,EAAA,OAAW,EAAA,OAAK,CAAA,CAAA;OAC7C,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,EAGF,EAAA,aAAA,GAAA,EADR,EAQM,OAAA;;IANJ,UAAS;IACT,OAAM;IACL,WAAO,AAAA,EAAA,OAAA,GAAA,MAAQA,EAAAA,MAAK,QAAA,EAAA,CAAA,QAAA,CAAA;IACpB,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOA,EAAAA,MAAK,QAAA,EAAA,CAAA,OAAA,CAAA;oBAElB,EAAoC,OAAA,EAA/B,OAAM,wBAAsB,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;MAdrB,EAAA,QAAA;SAAiB;eACvB,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"PlChip.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlChip/PlChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-chip.scss\";\nimport { onMounted, ref } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\n\ndefineEmits([\"close\"]);\n\ndefineProps<{\n closeable?: boolean;\n small?: boolean;\n}>();\n\nconst chip = ref<HTMLElement>();\nconst canShowTooltip = ref(false);\n\nonMounted(() => {\n if (chip.value) {\n canShowTooltip.value = chip.value?.clientWidth >= 256;\n }\n});\n</script>\n\n<template>\n <PlTooltip position=\"top\" class=\"pl-chip-tooltip\" :delay=\"500\">\n <template v-if=\"canShowTooltip\" #tooltip>\n <slot />\n </template>\n <div ref=\"chip\" class=\"pl-chip\" :class=\"{ small }\">\n <div class=\"pl-chip__text\">\n <slot />\n </div>\n <div\n v-if=\"closeable\"\n tabindex=\"0\"\n class=\"pl-chip__close\"\n @keydown.enter=\"$emit('close')\"\n @click.stop=\"$emit('close')\"\n >\n <div class=\"pl-chip__close--icon\" />\n </div>\n </div>\n </PlTooltip>\n</template>\n"],"mappings":";;;;;;;;;;;;EAYA,IAAM,IAAO,GAAkB,EACzB,IAAiB,EAAI,GAAM;SAEjC,QAAgB;AACd,GAAI,EAAK,UACP,EAAe,QAAQ,EAAK,OAAO,eAAe;IAEpD,kBAIA,EAkBY,EAAA,EAAA,EAAA;GAlBD,UAAS;GAAM,OAAM;GAAmB,OAAO;;oBAiBlD,CAbN,EAaM,OAAA;aAbG;IAAJ,KAAI;IAAO,OAAK,EAAA,CAAC,WAAS,EAAA,OAAW,EAAA,OAAK,CAAA,CAAA;OAC7C,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,EAGF,EAAA,aAAA,GAAA,EADR,EAQM,OAAA;;IANJ,UAAS;IACT,OAAM;IACL,WAAO,AAAA,EAAA,OAAA,GAAA,MAAQA,EAAAA,MAAK,QAAA,EAAA,CAAA,QAAA,CAAA;IACpB,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOA,EAAAA,MAAK,QAAA,EAAA,CAAA,OAAA,CAAA;oBAElB,EAAoC,OAAA,EAA/B,OAAM,wBAAsB,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;MAdrB,EAAA,QAAA;SAAiB;eACvB,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
@@ -0,0 +1 @@
1
+ import "./PlChip.js";
@@ -1 +1 @@
1
- .pl-chip-tooltip{display:inline-flex}.pl-chip{--chip-color:var(--txt-01);background:var(--chip-bg);border:var(--chip-border);max-width:256px;height:32px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);line-height:calc(var(--line-height-base) + 2px);letter-spacing:-.2px;color:var(--chip-color);border-radius:6px;align-items:center;gap:4px;padding:0 8px;display:inline-flex;position:relative}.pl-chip.small{border-radius:4px;height:24px;padding:0 6px}.pl-chip.large{border-radius:6px;height:40px;padding:0 12px}[data-theme=dark] .pl-chip{color:#fff}.pl-chip__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pl-chip__close{cursor:pointer;--mask-color:var(--chip-close-ic-color)}.pl-chip__close:hover{--mask-color:var(--chip-close-ic-hover-color)}.pl-chip__close:focus-visible{--mask-color:var(--chip-close-ic-hover-color);box-shadow:0 0 0 2px var(--border-color-focus);border-radius:1px;outline:none}.pl-chip__close--icon{background:var(--mask-color);width:16px;height:16px;-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='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");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='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
1
+ .pl-chip-tooltip{display:inline-flex}.pl-chip{--chip-color:var(--txt-01);background:var(--chip-bg);border:var(--chip-border);max-width:256px;height:32px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);line-height:calc(var(--line-height-base) + 2px);letter-spacing:-.2px;color:var(--chip-color);border-radius:6px;align-items:center;gap:4px;padding:0 8px;display:inline-flex;position:relative}.pl-chip.small{border-radius:4px;height:24px;padding:0 6px}.pl-chip.large{border-radius:6px;height:40px;padding:0 12px}[data-theme=dark] .pl-chip{color:#fff}.pl-chip__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pl-chip__close{cursor:pointer;--mask-color:var(--chip-close-ic-color)}.pl-chip__close:hover{--mask-color:var(--chip-close-ic-hover-color)}.pl-chip__close:focus-visible{--mask-color:var(--chip-close-ic-hover-color);box-shadow:0 0 0 2px var(--border-color-focus);border-radius:1px;outline:none}.pl-chip__close--icon{background:var(--mask-color);width:16px;height:16px;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='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}
@@ -1,4 +1,5 @@
1
1
  import e from "../PlIcon16/PlIcon16.js";
2
+ import "../PlMaskIcon16/index.js";
2
3
  import { computed as t, createBlock as n, defineComponent as r, normalizeClass as i, onUnmounted as a, openBlock as o, ref as s, unref as c } from "vue";
3
4
  var l = /* @__PURE__ */ r({
4
5
  name: "PlClipboard",
@@ -1 +1 @@
1
- {"version":3,"file":"PlClipboard.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlClipboard/PlClipboard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlClipboard\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport type { Size } from \"../../types.ts\";\nimport { computed, onUnmounted, ref } from \"vue\";\n\nconst props = defineProps<{\n size?: Size;\n}>();\n\nconst emit = defineEmits([\"copy\"]);\n\nconst copyEffect = ref<boolean>(false);\n\nconst iconName = computed(() => (copyEffect.value ? \"clipboard-copied\" : \"clipboard\"));\n\nlet timeoutId: undefined | number;\n\nfunction onCopy() {\n clearTimeout(timeoutId);\n copyEffect.value = true;\n emit(\"copy\");\n timeoutId = window.setTimeout(() => {\n copyEffect.value = false;\n }, 1000);\n}\n\nonUnmounted(() => {\n clearTimeout(timeoutId);\n});\n</script>\n\n<template>\n <PlMaskIcon16 :name=\"iconName\" :size=\"props.size\" :class=\"$style.copy\" @click=\"onCopy\" />\n</template>\n\n<style module>\n.copy {\n cursor: pointer;\n display: block;\n}\n</style>\n"],"mappings":";;;CAEE,MAAM;;;;EASR,IAAM,IAAQ,GAIR,IAAO,GAEP,IAAa,EAAa,GAAM,EAEhC,IAAW,QAAgB,EAAW,QAAQ,qBAAqB,YAAa,EAElF;EAEJ,SAAS,IAAS;AAIhB,GAHA,aAAa,EAAU,EACvB,EAAW,QAAQ,IACnB,EAAK,OAAO,EACZ,IAAY,OAAO,iBAAiB;AAClC,MAAW,QAAQ;MAClB,IAAK;;SAGV,QAAkB;AAChB,gBAAa,EAAU;IACvB,kBAIA,EAAyF,EAAA,EAAA,EAAA;GAA1E,MAAM,EAAA;GAAW,MAAM,EAAM;GAAO,OAAK,EAAEA,EAAAA,OAAO,KAAI;GAAG,SAAO"}
1
+ {"version":3,"file":"PlClipboard.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlClipboard/PlClipboard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlClipboard\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport type { Size } from \"../../types.ts\";\nimport { computed, onUnmounted, ref } from \"vue\";\n\nconst props = defineProps<{\n size?: Size;\n}>();\n\nconst emit = defineEmits([\"copy\"]);\n\nconst copyEffect = ref<boolean>(false);\n\nconst iconName = computed(() => (copyEffect.value ? \"clipboard-copied\" : \"clipboard\"));\n\nlet timeoutId: undefined | number;\n\nfunction onCopy() {\n clearTimeout(timeoutId);\n copyEffect.value = true;\n emit(\"copy\");\n timeoutId = window.setTimeout(() => {\n copyEffect.value = false;\n }, 1000);\n}\n\nonUnmounted(() => {\n clearTimeout(timeoutId);\n});\n</script>\n\n<template>\n <PlMaskIcon16 :name=\"iconName\" :size=\"props.size\" :class=\"$style.copy\" @click=\"onCopy\" />\n</template>\n\n<style module>\n.copy {\n cursor: pointer;\n display: block;\n}\n</style>\n"],"mappings":";;;;CAEE,MAAM;;;;EASR,IAAM,IAAQ,GAIR,IAAO,GAEP,IAAa,EAAa,GAAM,EAEhC,IAAW,QAAgB,EAAW,QAAQ,qBAAqB,YAAa,EAElF;EAEJ,SAAS,IAAS;AAIhB,GAHA,aAAa,EAAU,EACvB,EAAW,QAAQ,IACnB,EAAK,OAAO,EACZ,IAAY,OAAO,iBAAiB;AAClC,MAAW,QAAQ;MAClB,IAAK;;SAGV,QAAkB;AAChB,gBAAa,EAAU;IACvB,kBAIA,EAAyF,EAAA,EAAA,EAAA;GAA1E,MAAM,EAAA;GAAW,MAAM,EAAM;GAAO,OAAK,EAAEA,EAAAA,OAAO,KAAI;GAAG,SAAO"}
@@ -0,0 +1 @@
1
+ import "./PlClipboard.js";
@@ -1,6 +1,9 @@
1
1
  import e from "./PlBtnSecondary/PlBtnSecondary.js";
2
2
  import t from "./PlBtnPrimary/PlBtnPrimary.js";
3
+ import "./PlBtnPrimary/index.js";
4
+ import "./PlBtnSecondary/index.js";
3
5
  import n from "./PlDialogModal/PlDialogModal.js";
6
+ import "./PlDialogModal/index.js";
4
7
  import { createBlock as r, createTextVNode as i, createVNode as a, defineComponent as o, openBlock as s, toDisplayString as c, unref as l, withCtx as u, withModifiers as d } from "vue";
5
8
  var f = /* @__PURE__ */ o({
6
9
  __name: "PlConfirmDialog",
@@ -1 +1 @@
1
- {"version":3,"file":"PlConfirmDialog.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/PlConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlBtnPrimary } from \"./PlBtnPrimary\";\nimport { PlBtnSecondary } from \"./PlBtnSecondary\";\nimport { PlDialogModal } from \"./PlDialogModal\";\n\nconst props = withDefaults(\n defineProps<{\n opened?: boolean;\n title: string;\n message: string;\n confirmLabel: string;\n cancelLabel: string;\n onConfirm?: () => void;\n onCancel?: () => void;\n }>(),\n {\n opened: true,\n onCancel: undefined,\n onConfirm: undefined,\n },\n);\n\nconst emits = defineEmits<{\n confirm: [];\n cancel: [];\n}>();\n\nconst handleConfirm = () => {\n emits(\"confirm\");\n props.onConfirm?.();\n};\n\nconst handleCancel = () => {\n emits(\"cancel\");\n props.onCancel?.();\n};\n</script>\n\n<template>\n <PlDialogModal v-model=\"props.opened\" :closable=\"false\" @click.stop>\n <template #title>\n {{ title }}\n </template>\n <template #default>\n {{ message }}\n </template>\n <template #actions>\n <PlBtnPrimary @click.stop=\"handleConfirm\">\n {{ props.confirmLabel }}\n </PlBtnPrimary>\n <PlBtnSecondary @click.stop=\"handleCancel\">\n {{ props.cancelLabel }}\n </PlBtnSecondary>\n </template>\n </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAM,IAAQ,GAiBR,IAAQ,GAKR,UAAsB;AAE1B,GADA,EAAM,UAAU,EAChB,EAAM,aAAa;KAGf,UAAqB;AAEzB,GADA,EAAM,SAAS,EACf,EAAM,YAAY;;yBAKlB,EAegB,EAAA,EAAA,EAAA;eAfQ,EAAM;4CAAA,SAAM;GAAG,UAAU;GAAQ,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GACtD,OAAK,QACH,CAAA,EAAA,EAAR,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;GAEC,SAAO,QACH,CAAA,EAAA,EAAV,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA;GAED,SAAO,QAGD,CAFf,EAEe,EAAA,EAAA,EAAA,EAFA,SAAK,EAAO,GAAa,CAAA,OAAA,CAAA,EAAA,EAAA;qBACd,CAAA,EAAA,EAArB,EAAM,aAAY,EAAA,EAAA,CAAA,CAAA;;OAEvB,EAEiB,EAAA,EAAA,EAAA,EAFA,SAAK,EAAO,GAAY,CAAA,OAAA,CAAA,EAAA,EAAA;qBAChB,CAAA,EAAA,EAApB,EAAM,YAAW,EAAA,EAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"PlConfirmDialog.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/PlConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlBtnPrimary } from \"./PlBtnPrimary\";\nimport { PlBtnSecondary } from \"./PlBtnSecondary\";\nimport { PlDialogModal } from \"./PlDialogModal\";\n\nconst props = withDefaults(\n defineProps<{\n opened?: boolean;\n title: string;\n message: string;\n confirmLabel: string;\n cancelLabel: string;\n onConfirm?: () => void;\n onCancel?: () => void;\n }>(),\n {\n opened: true,\n onCancel: undefined,\n onConfirm: undefined,\n },\n);\n\nconst emits = defineEmits<{\n confirm: [];\n cancel: [];\n}>();\n\nconst handleConfirm = () => {\n emits(\"confirm\");\n props.onConfirm?.();\n};\n\nconst handleCancel = () => {\n emits(\"cancel\");\n props.onCancel?.();\n};\n</script>\n\n<template>\n <PlDialogModal v-model=\"props.opened\" :closable=\"false\" @click.stop>\n <template #title>\n {{ title }}\n </template>\n <template #default>\n {{ message }}\n </template>\n <template #actions>\n <PlBtnPrimary @click.stop=\"handleConfirm\">\n {{ props.confirmLabel }}\n </PlBtnPrimary>\n <PlBtnSecondary @click.stop=\"handleCancel\">\n {{ props.cancelLabel }}\n </PlBtnSecondary>\n </template>\n </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAM,IAAQ,GAiBR,IAAQ,GAKR,UAAsB;AAE1B,GADA,EAAM,UAAU,EAChB,EAAM,aAAa;KAGf,UAAqB;AAEzB,GADA,EAAM,SAAS,EACf,EAAM,YAAY;;yBAKlB,EAegB,EAAA,EAAA,EAAA;eAfQ,EAAM;4CAAA,SAAM;GAAG,UAAU;GAAQ,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GACtD,OAAK,QACH,CAAA,EAAA,EAAR,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;GAEC,SAAO,QACH,CAAA,EAAA,EAAV,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA;GAED,SAAO,QAGD,CAFf,EAEe,EAAA,EAAA,EAAA,EAFA,SAAK,EAAO,GAAa,CAAA,OAAA,CAAA,EAAA,EAAA;qBACd,CAAA,EAAA,EAArB,EAAM,aAAY,EAAA,EAAA,CAAA,CAAA;;OAEvB,EAEiB,EAAA,EAAA,EAAA,EAFA,SAAK,EAAO,GAAY,CAAA,OAAA,CAAA,EAAA,EAAA;qBAChB,CAAA,EAAA,EAApB,EAAM,YAAW,EAAA,EAAA,CAAA,CAAA"}
@@ -1,6 +1,6 @@
1
1
  import { useEventListener as e } from "../../composition/useEventListener.js";
2
- import './pl-dialog-modal.css';/* empty css */
3
2
  import t from "../../utils/PlCloseModalBtn.js";
3
+ import './pl-dialog-modal.css';/* empty css */
4
4
  import { Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderSlot as h, useSlots as g, withCtx as _, withModifiers as v } from "vue";
5
5
  var y = {
6
6
  key: 1,
@@ -0,0 +1 @@
1
+ import "./PlDialogModal.js";
@@ -1,5 +1,6 @@
1
1
  import e from "../DropdownListItem.js";
2
2
  import t from "../../utils/DropdownOverlay/DropdownOverlay.js";
3
+ import "../../utils/DropdownOverlay/index.js";
3
4
  import n from "../../utils/TextLabel.js";
4
5
  import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, renderList as m, toDisplayString as h, unref as g, useTemplateRef as _, withCtx as v, withModifiers as y } from "vue";
5
6
  var b = {
@@ -1 +1 @@
1
- {"version":3,"file":"OptionList.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport TextLabel from \"../../utils/TextLabel.vue\";\nimport { computed, useTemplateRef } from \"vue\";\nimport type { LOption } from \"./types\";\n\nconst props = defineProps<{\n rootRef: HTMLElement;\n groups: Map<string, LOption[]>;\n rest: LOption[];\n optionSize: \"small\" | \"medium\";\n selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n let totalGroupItems = 0;\n for (const items of props.groups.values()) {\n totalGroupItems += items.length;\n }\n return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n scrollIntoActive,\n listRef,\n});\n</script>\n\n<template>\n <DropdownOverlay\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-dropdown__options\"\n tabindex=\"-1\"\n :gap=\"3\"\n >\n <div\n v-for=\"[group, items] in groups.entries()\"\n :key=\"group\"\n :class=\"{ 'group-container': hasGroups }\"\n >\n <TextLabel>{{ group }}</TextLabel>\n <div>\n <DropdownListItem\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </div>\n <div v-if=\"rest.length\" :class=\"{ 'group-container': hasGroups }\">\n <TextLabel />\n <div>\n <DropdownListItem\n v-for=\"(item, index) in rest\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </div>\n <div v-if=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAU,EAAe,UAAU,EAEnC,IAAU,QAAe,EAAQ,OAAO,QAAQ,EAEhD,IAAY,QAAe,EAAM,OAAO,OAAO,EAAE,EAEjD,IAAgB,QAAe;GACnC,IAAI,IAAkB;AACtB,QAAK,IAAM,KAAS,EAAM,OAAO,QAAQ,CACvC,MAAmB,EAAM;AAE3B,UAAO,IAAkB,EAAM,KAAK;IACpC;SAMF,EAAa;GACX,wBAL6B;AAC7B,MAAQ,OAAO,kBAAkB;;GAKjC;GACD,CAAC,kBAIA,EAwCkB,EAAA,EAAA,EAAA;YAvCZ;GAAJ,KAAI;GACH,MAAM,EAAA;GACP,OAAM;GACN,UAAS;GACR,KAAK;;oBAGsC;YAD5C,EAiBM,GAAA,MAAA,EAhBqB,EAAA,OAAO,SAAO,GAAA,CAA/B,GAAO,aADjB,EAiBM,OAAA;KAfH,KAAK;KACL,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAEtC,EAAkC,GAAA,MAAA;sBAAZ,CAAA,EAAA,EAAR,EAAK,EAAA,EAAA,CAAA,CAAA;;cACnB,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,IAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI/B,EAAA,KAAK,UAAA,GAAA,EAAhB,EAaM,OAAA;;KAbmB,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAC5D,EAAa,EAAA,EACb,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,EAAA,OAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI9B,EAAA,QAAkD,EAAA,IAAA,GAAA,IAAlD,GAAA,EAAZ,EAAoE,OAApE,GAAiD,gBAAa"}
1
+ {"version":3,"file":"OptionList.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport TextLabel from \"../../utils/TextLabel.vue\";\nimport { computed, useTemplateRef } from \"vue\";\nimport type { LOption } from \"./types\";\n\nconst props = defineProps<{\n rootRef: HTMLElement;\n groups: Map<string, LOption[]>;\n rest: LOption[];\n optionSize: \"small\" | \"medium\";\n selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n let totalGroupItems = 0;\n for (const items of props.groups.values()) {\n totalGroupItems += items.length;\n }\n return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n scrollIntoActive,\n listRef,\n});\n</script>\n\n<template>\n <DropdownOverlay\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-dropdown__options\"\n tabindex=\"-1\"\n :gap=\"3\"\n >\n <div\n v-for=\"[group, items] in groups.entries()\"\n :key=\"group\"\n :class=\"{ 'group-container': hasGroups }\"\n >\n <TextLabel>{{ group }}</TextLabel>\n <div>\n <DropdownListItem\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </div>\n <div v-if=\"rest.length\" :class=\"{ 'group-container': hasGroups }\">\n <TextLabel />\n <div>\n <DropdownListItem\n v-for=\"(item, index) in rest\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </div>\n <div v-if=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAU,EAAe,UAAU,EAEnC,IAAU,QAAe,EAAQ,OAAO,QAAQ,EAEhD,IAAY,QAAe,EAAM,OAAO,OAAO,EAAE,EAEjD,IAAgB,QAAe;GACnC,IAAI,IAAkB;AACtB,QAAK,IAAM,KAAS,EAAM,OAAO,QAAQ,CACvC,MAAmB,EAAM;AAE3B,UAAO,IAAkB,EAAM,KAAK;IACpC;SAMF,EAAa;GACX,wBAL6B;AAC7B,MAAQ,OAAO,kBAAkB;;GAKjC;GACD,CAAC,kBAIA,EAwCkB,EAAA,EAAA,EAAA;YAvCZ;GAAJ,KAAI;GACH,MAAM,EAAA;GACP,OAAM;GACN,UAAS;GACR,KAAK;;oBAGsC;YAD5C,EAiBM,GAAA,MAAA,EAhBqB,EAAA,OAAO,SAAO,GAAA,CAA/B,GAAO,aADjB,EAiBM,OAAA;KAfH,KAAK;KACL,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAEtC,EAAkC,GAAA,MAAA;sBAAZ,CAAA,EAAA,EAAR,EAAK,EAAA,EAAA,CAAA,CAAA;;cACnB,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,IAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI/B,EAAA,KAAK,UAAA,GAAA,EAAhB,EAaM,OAAA;;KAbmB,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAC5D,EAAa,EAAA,EACb,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,EAAA,OAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI9B,EAAA,QAAkD,EAAA,IAAA,GAAA,IAAlD,GAAA,EAAZ,EAAoE,OAApE,GAAiD,gBAAa"}
@@ -1,14 +1,18 @@
1
1
  import { tap as e } from "../../helpers/functions.js";
2
2
  import { normalizeListOptions as t } from "../../helpers/utils.js";
3
3
  import n from "../PlTooltip/PlTooltip.js";
4
+ import "../PlTooltip/index.js";
4
5
  import { getErrorMessage as r } from "../../helpers/error.js";
5
6
  import i from "../LongText.js";
6
7
  import a from "../PlSvg/PlSvg.js";
8
+ import "../PlSvg/index.js";
7
9
  import o from "../PlIcon24/PlIcon24.js";
10
+ import "../PlIcon24/index.js";
8
11
  import s from "../PlIcon16/PlIcon16.js";
9
12
  import ee from "../../utils/DoubleContour.js";
10
13
  import { useLabelNotch as c } from "../../utils/useLabelNotch.js";
11
14
  import { deepEqual as l } from "../../helpers/objects.js";
15
+ import "../PlIcon16/index.js";
12
16
  import te from "../../assets/images/required.js";
13
17
  import u from "./OptionList.js";
14
18
  import './pl-dropdown.css';/* empty css */
@@ -1 +1 @@
1
- {"version":3,"file":"PlDropdown.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected value of the dropdown.\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 * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n */\n loadingOptionsHelper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Shows red border even without an error message\n */\n errorStatus?: boolean;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * Enables a button to clear the selected value (default: false)\n */\n clearable?: boolean;\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 * Custom icon (16px) class for the dropdown arrow (optional)\n */\n arrowIcon?: MaskIconName16;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: MaskIconName24;\n /**\n * Option list item size\n */\n optionSize?: \"small\" | \"medium\";\n /**\n * Makes some of corners not rounded\n * */\n groupPosition?:\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"middle\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: \"...\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: \"small\",\n options: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n search: \"\",\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\n */\nconst showLoadingSpinner = computed(() => {\n return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return \"The selected value is not one of the options\";\n }\n\n return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue !== undefined) {\n return \"\";\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === \"string\") {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, \"group\");\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M | undefined) => {\n emit(\"update:modelValue\", v);\n data.search = \"\";\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M | undefined);\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = \"\";\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (\n !rootRef.value?.contains(relatedTarget) &&\n !optionListRef.value?.listRef?.contains(relatedTarget)\n ) {\n data.search = \"\";\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = 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 ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n <PlIcon16 v-else name=\"chevron-down\" 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 <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"showLoadingSpinner && loadingOptionsHelper\" class=\"pl-dropdown__helper\">\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"PlDropdown.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected value of the dropdown.\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 * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n */\n loadingOptionsHelper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Shows red border even without an error message\n */\n errorStatus?: boolean;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * Enables a button to clear the selected value (default: false)\n */\n clearable?: boolean;\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 * Custom icon (16px) class for the dropdown arrow (optional)\n */\n arrowIcon?: MaskIconName16;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: MaskIconName24;\n /**\n * Option list item size\n */\n optionSize?: \"small\" | \"medium\";\n /**\n * Makes some of corners not rounded\n * */\n groupPosition?:\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"middle\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: \"...\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: \"small\",\n options: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n search: \"\",\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\n */\nconst showLoadingSpinner = computed(() => {\n return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return \"The selected value is not one of the options\";\n }\n\n return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue !== undefined) {\n return \"\";\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === \"string\") {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, \"group\");\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M | undefined) => {\n emit(\"update:modelValue\", v);\n data.search = \"\";\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M | undefined);\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = \"\";\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (\n !rootRef.value?.contains(relatedTarget) &&\n !optionListRef.value?.listRef?.contains(relatedTarget)\n ) {\n data.search = \"\";\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = 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 ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n <PlIcon16 v-else name=\"chevron-down\" 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 <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"showLoadingSpinner && loadingOptionsHelper\" class=\"pl-dropdown__helper\">\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ import "./PlDropdown.js";