@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.
- package/.turbo/turbo-build.log +154 -93
- package/.turbo/turbo-formatter$colon$check.log +2 -2
- package/.turbo/turbo-linter$colon$check.log +2 -2
- package/.turbo/turbo-types$colon$check.log +1 -1
- package/CHANGELOG.md +12 -0
- package/dist/assets/ui.css +1 -1
- package/dist/base/BtnBase.vue2.js +1 -0
- package/dist/base/BtnBase.vue2.js.map +1 -1
- package/dist/colors/index.js +3 -0
- package/dist/components/DataTable/TableComponent.vue2.js +1 -0
- package/dist/components/DataTable/TableComponent.vue2.js.map +1 -1
- package/dist/components/DataTable/assets/data-table-style.css +1 -1
- package/dist/components/PlAccordion/PlAccordionSection.vue.css +1 -1
- package/dist/components/PlAccordion/PlAccordionSection.vue2.js +2 -0
- package/dist/components/PlAccordion/PlAccordionSection.vue2.js.map +1 -1
- package/dist/components/PlAccordion/index.js +2 -0
- package/dist/components/PlAlert/PlAlert.js.map +1 -1
- package/dist/components/PlAlert/PlAlert.vue.d.ts.map +1 -1
- package/dist/components/PlAlert/PlAlert.vue2.js +19 -20
- package/dist/components/PlAlert/PlAlert.vue2.js.map +1 -1
- package/dist/components/PlAlert/index.js +1 -0
- package/dist/components/PlAlert/pl-alert.css +1 -1
- package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js +5 -0
- package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js.map +1 -1
- package/dist/components/PlAutocomplete/index.js +1 -0
- package/dist/components/PlAutocomplete/pl-autocomplete.css +1 -1
- package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js +4 -0
- package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js.map +1 -1
- package/dist/components/PlAutocompleteMulti/index.js +1 -0
- package/dist/components/PlAutocompleteMulti/pl-autocomplete-multi.css +1 -1
- package/dist/components/PlBtnAccent/index.js +1 -0
- package/dist/components/PlBtnAccent/pl-btn-accent.css +1 -1
- package/dist/components/PlBtnDanger/index.js +1 -0
- package/dist/components/PlBtnDanger/pl-btn-danger.css +1 -1
- package/dist/components/PlBtnGhost/PlBtnGhost.vue2.js +1 -0
- package/dist/components/PlBtnGhost/PlBtnGhost.vue2.js.map +1 -1
- package/dist/components/PlBtnGhost/index.js +1 -0
- package/dist/components/PlBtnGhost/pl-btn-ghost.css +1 -1
- package/dist/components/PlBtnGroup/PlBtnGroup.vue2.js +1 -0
- package/dist/components/PlBtnGroup/PlBtnGroup.vue2.js.map +1 -1
- package/dist/components/PlBtnGroup/index.js +1 -0
- package/dist/components/PlBtnGroup/pl-btn-group.css +1 -1
- package/dist/components/PlBtnLink/index.js +1 -0
- package/dist/components/PlBtnPrimary/index.js +1 -0
- package/dist/components/PlBtnPrimary/pl-btn-primary.css +1 -1
- package/dist/components/PlBtnSecondary/index.js +1 -0
- package/dist/components/PlBtnSecondary/pl-btn-secondary.css +1 -1
- package/dist/components/PlBtnSplit/PlBtnSplit.vue2.js +1 -0
- package/dist/components/PlBtnSplit/PlBtnSplit.vue2.js.map +1 -1
- package/dist/components/PlBtnSplit/index.js +1 -0
- package/dist/components/PlChartHistogram/PlChartHistogram.vue.css +1 -1
- package/dist/components/PlChartHistogram/index.js +1 -0
- package/dist/components/PlChartStackedBar/index.js +2 -0
- package/dist/components/PlCheckbox/index.js +1 -0
- package/dist/components/PlCheckbox/pl-checkbox.css +1 -1
- package/dist/components/PlCheckboxGroup/PlCheckboxGroup.vue2.js +1 -0
- package/dist/components/PlCheckboxGroup/PlCheckboxGroup.vue2.js.map +1 -1
- package/dist/components/PlCheckboxGroup/index.js +1 -0
- package/dist/components/PlChip/PlChip.vue2.js +1 -0
- package/dist/components/PlChip/PlChip.vue2.js.map +1 -1
- package/dist/components/PlChip/index.js +1 -0
- package/dist/components/PlChip/pl-chip.css +1 -1
- package/dist/components/PlClipboard/PlClipboard.vue2.js +1 -0
- package/dist/components/PlClipboard/PlClipboard.vue2.js.map +1 -1
- package/dist/components/PlClipboard/index.js +1 -0
- package/dist/components/PlConfirmDialog.vue2.js +3 -0
- package/dist/components/PlConfirmDialog.vue2.js.map +1 -1
- package/dist/components/PlDialogModal/PlDialogModal.vue2.js +1 -1
- package/dist/components/PlDialogModal/index.js +1 -0
- package/dist/components/PlDropdown/OptionList.vue2.js +1 -0
- package/dist/components/PlDropdown/OptionList.vue2.js.map +1 -1
- package/dist/components/PlDropdown/PlDropdown.vue2.js +4 -0
- package/dist/components/PlDropdown/PlDropdown.vue2.js.map +1 -1
- package/dist/components/PlDropdown/index.js +1 -0
- package/dist/components/PlDropdown/pl-dropdown.css +1 -1
- package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js +4 -0
- package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js.map +1 -1
- package/dist/components/PlDropdownLegacy/index.js +1 -0
- package/dist/components/PlDropdownLine/index.js +1 -0
- package/dist/components/PlDropdownLine/pl-dropdown-line.css +1 -1
- package/dist/components/PlDropdownLine/resizable-input.css +1 -1
- package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js +4 -0
- package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js.map +1 -1
- package/dist/components/PlDropdownMulti/index.js +1 -0
- package/dist/components/PlDropdownMulti/pl-dropdown-multi.css +1 -1
- package/dist/components/PlDropdownMultiRef/index.js +1 -0
- package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js +1 -0
- package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js.map +1 -1
- package/dist/components/PlDropdownRef/index.js +1 -0
- package/dist/components/PlEditableTitle/index.js +1 -0
- package/dist/components/PlEditableTitle/pl-editable-title.css +1 -1
- package/dist/components/PlElementList/PlElementListItem.vue.css +1 -1
- package/dist/components/PlElementList/PlElementListItem.vue2.js +2 -0
- package/dist/components/PlElementList/PlElementListItem.vue2.js.map +1 -1
- package/dist/components/PlElementList/index.js +1 -0
- package/dist/components/PlErrorAlert/PlErrorAlert.vue.css +1 -1
- package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js +2 -0
- package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js.map +1 -1
- package/dist/components/PlErrorAlert/index.js +1 -0
- package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js +1 -0
- package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js.map +1 -1
- package/dist/components/PlErrorBoundary/index.js +1 -0
- package/dist/components/PlFileDialog/Local.vue2.js +1 -0
- package/dist/components/PlFileDialog/Local.vue2.js.map +1 -1
- package/dist/components/PlFileDialog/PlFileDialog.vue2.js +4 -0
- package/dist/components/PlFileDialog/PlFileDialog.vue2.js.map +1 -1
- package/dist/components/PlFileDialog/Remote.vue2.js +4 -0
- package/dist/components/PlFileDialog/Remote.vue2.js.map +1 -1
- package/dist/components/PlFileDialog/Shortcuts.vue2.js +1 -0
- package/dist/components/PlFileDialog/Shortcuts.vue2.js.map +1 -1
- package/dist/components/PlFileDialog/index.js +1 -0
- package/dist/components/PlFileDialog/pl-file-dialog.css +1 -1
- package/dist/components/PlFileInput/PlFileInput.vue2.js +4 -0
- package/dist/components/PlFileInput/PlFileInput.vue2.js.map +1 -1
- package/dist/components/PlFileInput/index.js +1 -0
- package/dist/components/PlIcon16/PlIcon16.vue2.js +1 -0
- package/dist/components/PlIcon16/PlIcon16.vue2.js.map +1 -1
- package/dist/components/PlIcon16/index.js +1 -0
- package/dist/components/PlIcon24/PlIcon24.vue2.js +1 -0
- package/dist/components/PlIcon24/PlIcon24.vue2.js.map +1 -1
- package/dist/components/PlIcon24/index.js +1 -0
- package/dist/components/PlLoaderCircular/index.js +1 -0
- package/dist/components/PlLoaderLogo.vue.css +1 -1
- package/dist/components/PlLogView/PlLogView.vue2.js +3 -0
- package/dist/components/PlLogView/PlLogView.vue2.js.map +1 -1
- package/dist/components/PlLogView/index.js +1 -0
- package/dist/components/PlMaskIcon16/index.js +1 -0
- package/dist/components/PlMaskIcon24/index.js +1 -0
- package/dist/components/PlNotificationAlert/PlNotificationAlert.vue2.js +1 -0
- package/dist/components/PlNotificationAlert/PlNotificationAlert.vue2.js.map +1 -1
- package/dist/components/PlNotificationAlert/index.js +1 -0
- package/dist/components/PlNumberField/PlNumberField.vue2.js +1 -0
- package/dist/components/PlNumberField/PlNumberField.vue2.js.map +1 -1
- package/dist/components/PlNumberField/index.js +1 -0
- package/dist/components/PlProgressBar/index.js +1 -0
- package/dist/components/PlProgressCell/PlProgressCell.vue2.js +1 -0
- package/dist/components/PlProgressCell/PlProgressCell.vue2.js.map +1 -1
- package/dist/components/PlProgressCell/index.js +1 -0
- package/dist/components/PlRadio/PlRadio.vue.css +1 -1
- package/dist/components/PlRadio/index.js +2 -0
- package/dist/components/PlSearchField/PlSearchField.vue2.js +2 -0
- package/dist/components/PlSearchField/PlSearchField.vue2.js.map +1 -1
- package/dist/components/PlSearchField/index.js +1 -0
- package/dist/components/PlSectionSeparator/PlSectionSeparator.vue.css +1 -1
- package/dist/components/PlSectionSeparator/index.js +1 -0
- package/dist/components/PlSidebar/PlSidebarGroup.vue.css +1 -1
- package/dist/components/PlSidebar/PlSidebarItem.vue.css +1 -1
- package/dist/components/PlSidebar/index.js +2 -0
- package/dist/components/PlSlideModal/PlPureSlideModal.js.map +1 -1
- package/dist/components/PlSlideModal/PlPureSlideModal.vue.d.ts.map +1 -1
- package/dist/components/PlSlideModal/PlPureSlideModal.vue2.js +13 -12
- package/dist/components/PlSlideModal/PlPureSlideModal.vue2.js.map +1 -1
- package/dist/components/PlSlideModal/index.js +2 -0
- package/dist/components/PlSlideModal/pl-slide-modal.css +1 -1
- package/dist/components/PlSplash/PlSplash.vue2.js +1 -0
- package/dist/components/PlSplash/PlSplash.vue2.js.map +1 -1
- package/dist/components/PlSplash/index.js +1 -0
- package/dist/components/PlSplash/pl-splash.css +1 -1
- package/dist/components/PlStatusTag/index.js +1 -0
- package/dist/components/PlSvg/index.js +1 -0
- package/dist/components/PlTabs/Tab.vue2.js +1 -0
- package/dist/components/PlTabs/Tab.vue2.js.map +1 -1
- package/dist/components/PlTabs/index.js +1 -0
- package/dist/components/PlTextArea/PlTextArea.vue2.js +2 -0
- package/dist/components/PlTextArea/PlTextArea.vue2.js.map +1 -1
- package/dist/components/PlTextArea/index.js +1 -0
- package/dist/components/PlTextField/PlTextField.vue2.js +4 -0
- package/dist/components/PlTextField/PlTextField.vue2.js.map +1 -1
- package/dist/components/PlTextField/index.js +1 -0
- package/dist/components/PlToggleSwitch/index.js +1 -0
- package/dist/components/PlTooltip/index.js +1 -0
- package/dist/components/Slider.vue2.js +1 -0
- package/dist/components/Slider.vue2.js.map +1 -1
- package/dist/components/SliderRange.vue2.js +1 -0
- package/dist/components/SliderRange.vue2.js.map +1 -1
- package/dist/components/SliderRangeTriple.vue2.js +1 -0
- package/dist/components/SliderRangeTriple.vue2.js.map +1 -1
- package/dist/components/contextMenu/Menu.style.css +1 -1
- package/dist/index.js +79 -20
- package/dist/index.js.map +1 -1
- package/dist/layout/PlBlockPage/PlBlockPage.vue.css +1 -1
- package/dist/layout/PlBlockPage/PlBlockPage.vue2.js +1 -0
- package/dist/layout/PlBlockPage/PlBlockPage.vue2.js.map +1 -1
- package/dist/layout/PlBlockPage/index.js +2 -0
- package/dist/layout/PlContainer/index.js +1 -0
- package/dist/layout/PlGrid/index.js +1 -0
- package/dist/layout/PlPlaceholder/PlPlaceholder.vue.css +1 -1
- package/dist/layout/PlRow/index.js +1 -0
- package/dist/layout/PlSpacer/index.js +1 -0
- package/dist/utils/DoubleContour.style.css +1 -1
- package/dist/utils/DropdownOverlay/index.js +1 -0
- package/dist/utils/PlCloseModalBtn.vue.css +1 -1
- package/package.json +3 -6
- package/src/components/PlAlert/PlAlert.vue +3 -3
- package/src/components/PlAlert/pl-alert.scss +0 -7
- package/src/components/PlSlideModal/PlPureSlideModal.vue +5 -2
- 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
|
|
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)
|
|
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)
|
|
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":"
|
|
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)
|
|
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 +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":"
|
|
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
|
|
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)
|
|
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)
|
|
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":"
|
|
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
|
|
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 @@
|
|
|
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{
|
|
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":"
|
|
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":"
|
|
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
|
|
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":"
|
|
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":"
|
|
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":"
|
|
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";
|