@prozorro/prozorro-ui 0.0.9-beta → 0.0.11-beta
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/dist/app/assets/{Color-FRDS63T2-DlPAsSuC.js → Color-FRDS63T2-DeJ6boVB.js} +1 -1
- package/dist/app/assets/{Colors.stories-7e9Kvci_.js → Colors.stories-GBcoNXc7.js} +3 -3
- package/dist/app/assets/{DocsRenderer-LL677BLK-Bjj1XNYP.js → DocsRenderer-LL677BLK-P1omigwk.js} +71 -71
- package/dist/app/assets/{Grid.stories-CDiFrqKQ.js → Grid.stories-DoLbqWtw.js} +23 -2
- package/dist/app/assets/PzAccordion-B8uG5LU8.js +1 -0
- package/dist/app/assets/PzAccordion-DoVx3poA.css +1 -0
- package/dist/app/assets/{PzAccordion.stories-DxsYsHwE.js → PzAccordion.stories-CzEbkA1U.js} +2 -2
- package/dist/app/assets/{PzAccordionTable-CsabBugL.css → PzAccordionTable-C4g8Fidf.css} +1 -1
- package/dist/app/assets/PzAccordionTable.stories-CWSrb6Rz.js +275 -0
- package/dist/app/assets/{PzArrayClamp-K4ObvvOV.css → PzArrayClamp-BwD8ES1E.css} +1 -1
- package/dist/app/assets/{PzArrayClamp.stories-BYdoVxPw.js → PzArrayClamp.stories-DXt6cxXy.js} +6 -6
- package/dist/app/assets/{PzBreadcrumb-Dcs3weae.css → PzBreadcrumb-BrcWtMgd.css} +1 -1
- package/dist/app/assets/{PzBreadcrumb.stories-DwATLRI2.js → PzBreadcrumb.stories-BYy2AFV5.js} +6 -6
- package/dist/app/assets/{PzBtn-L_RpjK-U.css → PzBtn-DTsLZ9Cu.css} +1 -1
- package/dist/app/assets/PzBtn-lJz7FmKO.js +1 -0
- package/dist/app/assets/{PzBtn.stories-BRV1I_nf.js → PzBtn.stories-u2aA2xzz.js} +2 -2
- package/dist/app/assets/PzCheckbox-AjI7DN-X.css +1 -0
- package/dist/app/assets/PzCheckbox-BchdSe0N.css +1 -0
- package/dist/app/assets/PzCheckbox-xcF_sDjQ.js +1 -0
- package/dist/app/assets/PzCheckbox.stories-DeiqBONq.js +62 -0
- package/dist/app/assets/PzCheckboxGroup-BbrrL6mA.css +1 -0
- package/dist/app/assets/PzCheckboxGroup.stories-Dc1lNYrg.js +115 -0
- package/dist/app/assets/PzClamp-0zNrPrFL.css +1 -0
- package/dist/app/assets/PzClamp.stories-ChyM4wQP.js +1 -0
- package/dist/app/assets/PzCopyToClipboard-DYvP-lFq.css +1 -0
- package/dist/app/assets/PzCopyToClipboard.stories-BvTs8-Qo.js +45 -0
- package/dist/app/assets/PzDate-DzxkQx_5.css +1 -0
- package/dist/app/assets/PzDate.stories-CbNYXli-.js +116 -0
- package/dist/app/assets/PzDomHandler-BU7iMNnt.js +1 -0
- package/dist/app/assets/{PzDomHandler.stories-C0SwIaVU.js → PzDomHandler.stories-CNFqxouB.js} +5 -5
- package/dist/app/assets/{PzDropdown-BnwR1ooa.css → PzDropdown-Bi4TxZrx.css} +1 -1
- package/dist/app/assets/{PzDropdown.stories-gi6eGhLV.js → PzDropdown.stories-BIwEAqmm.js} +3 -3
- package/dist/app/assets/PzFileInput-BLs8VTxo.css +1 -0
- package/dist/app/assets/PzFileInput.stories-B4xxW_sF.js +124 -0
- package/dist/app/assets/{PzGrid.stories-v8QLnTB3.js → PzGrid.stories-DIiTYcYP.js} +3 -3
- package/dist/app/assets/PzHint-CGRWH9yl.css +1 -0
- package/dist/app/assets/PzHint-Djl4-X3l.js +1 -0
- package/dist/app/assets/{PzHint.stories-YkWa41IH.js → PzHint.stories-DqZpSfmZ.js} +2 -2
- package/dist/app/assets/{PzIcon-Drlqf9PC.js → PzIcon-BNwLASSZ.js} +1 -1
- package/dist/app/assets/{PzIcon.stories-DAJBWawA.js → PzIcon.stories-CPbH32o0.js} +2 -2
- package/dist/app/assets/{PzImage-BNrbMHP9.css → PzImage-ByW3gCC2.css} +1 -1
- package/dist/app/assets/{PzImage.stories-CuPnUuRv.js → PzImage.stories-DaDmEHw0.js} +2 -2
- package/dist/app/assets/PzImageInput-BPKv0nfg.css +1 -0
- package/dist/app/assets/PzImageInput.stories-CqBH8e63.js +109 -0
- package/dist/app/assets/{PzInfoBlockLayout-5bxpq9bJ.css → PzInfoBlockLayout-DbFWjWZn.css} +1 -1
- package/dist/app/assets/{PzInfoBlockLayout.stories-Bv_9N16u.js → PzInfoBlockLayout.stories-9CCtPFO-.js} +3 -3
- package/dist/app/assets/PzInfoHint-CWG8xkDj.css +1 -0
- package/dist/app/assets/PzInfoHint-CbH3ypH1.js +1 -0
- package/dist/app/assets/{PzInfoHint.stories-8e7rIcBj.js → PzInfoHint.stories-jwokRQkS.js} +3 -3
- package/dist/app/assets/PzInput-DWypQ6XY.css +1 -0
- package/dist/app/assets/PzInput.stories-BINq-o4I.js +57 -0
- package/dist/app/assets/PzInputDate-C9KHzAYp.css +1 -0
- package/dist/app/assets/PzInputDate.stories-CCdrBEY7.js +55 -0
- package/dist/app/assets/PzInputNumber-CDixvL0g.css +1 -0
- package/dist/app/assets/PzInputNumber.stories-I4-WO1id.js +54 -0
- package/dist/app/assets/PzKeyValue-RiKE-e9c.css +1 -0
- package/dist/app/assets/PzKeyValue.stories-DtyWU98t.js +270 -0
- package/dist/app/assets/PzLabel-BQF7sPao.css +1 -0
- package/dist/app/assets/PzLabel-CNUgfkly.css +1 -0
- package/dist/app/assets/PzLabel-Coa549nk.js +1 -0
- package/dist/app/assets/PzLabel.stories-DMxqqqgC.js +119 -0
- package/dist/app/assets/PzLink-BlhtooDh.js +1 -0
- package/dist/app/assets/{PzLink-CLsit3uW.css → PzLink-BzhNa3ur.css} +1 -1
- package/dist/app/assets/{PzLink.stories-RRRT37UH.js → PzLink.stories-Cc_7lCaq.js} +2 -2
- package/dist/app/assets/PzListNav-DRMKw6wp.css +1 -0
- package/dist/app/assets/PzListNav.stories-BTZ7YDz-.js +37 -0
- package/dist/app/assets/PzLoader-J7_Govh3.css +1 -0
- package/dist/app/assets/PzLoader.stories-4iPgw47o.js +9 -0
- package/dist/app/assets/{PzModal-X71wpoOT.css → PzModal-Ck4FnyKm.css} +1 -1
- package/dist/app/assets/{PzModal.stories-j0FW0OcM.js → PzModal.stories-COv27-JY.js} +4 -4
- package/dist/app/assets/PzMultiSelect-DeX8aBEQ.css +1 -0
- package/dist/app/assets/PzMultiSelect.stories-DqKbYF9e.js +453 -0
- package/dist/app/assets/{PzNav-DRAXqlz0.css → PzNav-BCqeyJHD.css} +1 -1
- package/dist/app/assets/{PzNav.stories-BPTRR62X.js → PzNav.stories-8SxncW0m.js} +6 -6
- package/dist/app/assets/PzNumberFormat-D5xYsZ3A.js +1 -0
- package/dist/app/assets/PzNumberFormat.stories-CDG6_Sk8.js +57 -0
- package/dist/app/assets/PzPagination-D9MVz0_M.js +1 -0
- package/dist/app/assets/PzPagination-k9D0Hxrx.css +1 -0
- package/dist/app/assets/{PzPagination-DJVeW9lu.css → PzPagination-ohvV8gN-.css} +1 -1
- package/dist/app/assets/PzPagination.stories-DNvwL2lG.js +83 -0
- package/dist/app/assets/PzPriceFormat.stories-C-p8Sb5s.js +89 -0
- package/dist/app/assets/PzRadioGroup-CZC3ssDh.css +1 -0
- package/dist/app/assets/PzRadioGroup.stories-DC2poHLC.js +130 -0
- package/dist/app/assets/{PzRouterLink.stories-BcMmoayC.js → PzRouterLink.stories-DzGN2JP5.js} +3 -3
- package/dist/app/assets/{PzScrollTo.stories-Gvacxovn.js → PzScrollTo.stories-Bx37NsA6.js} +4 -4
- package/dist/app/assets/{PzSearchResultItemLayout-DtvZAeWW.css → PzSearchResultItemLayout-B3s9Usmb.css} +1 -1
- package/dist/app/assets/{PzSearchResultItemLayout.stories-B0EKt_OP.js → PzSearchResultItemLayout.stories-vkVys3LL.js} +3 -3
- package/dist/app/assets/PzSelect-BwhRsTZd.css +1 -0
- package/dist/app/assets/PzSelect-CrTXtlds.js +1 -0
- package/dist/app/assets/PzSelect-Del6HRlD.css +1 -0
- package/dist/app/assets/PzSelect.stories-5MWUfKeM.js +292 -0
- package/dist/app/assets/PzSkeleton-Fcc0OCQj.js +1 -0
- package/dist/app/assets/{PzSkeleton-CYVQJkRt.css → PzSkeleton-i88RYFSk.css} +1 -1
- package/dist/app/assets/{PzSkeleton.stories-a9NDBt3Z.js → PzSkeleton.stories-q1l5sP1S.js} +2 -2
- package/dist/app/assets/PzStatus-B5X_PK3m.css +1 -0
- package/dist/app/assets/PzStatus-cmEVvisl.js +1 -0
- package/dist/app/assets/{PzStatus.stories-Dzj8SM95.js → PzStatus.stories-CkZ6lYqY.js} +2 -2
- package/dist/app/assets/PzTable-DFFqGC19.css +1 -0
- package/dist/app/assets/PzTable-wM00v3b7.js +1 -0
- package/dist/app/assets/{PzTable.stories-DcKqkFYa.js → PzTable.stories-CGODSdZ2.js} +5 -5
- package/dist/app/assets/{PzTabs-Cko9ewqz.css → PzTabs-Dqx9m4Y3.css} +1 -1
- package/dist/app/assets/{PzTabs.stories-BqU667nR.js → PzTabs.stories-C5h0sXNa.js} +11 -11
- package/dist/app/assets/PzTag-9D_K2A9q.js +1 -0
- package/dist/app/assets/PzTag-CKddmHDs.css +1 -0
- package/dist/app/assets/{PzTag.stories-bK1-c1pG.js → PzTag.stories-E9YuXCey.js} +2 -2
- package/dist/app/assets/PzText-LkAZaPCW.js +1 -0
- package/dist/app/assets/PzText-mQOOz4_d.css +1 -0
- package/dist/app/assets/{PzText.stories-9Hrvi7P7.js → PzText.stories-DICYEnSM.js} +8 -8
- package/dist/app/assets/{PzTextClamp-BnSHv0R0.css → PzTextClamp-Cdoumv-M.css} +1 -1
- package/dist/app/assets/PzTextClamp.stories-BveyeWba.js +149 -0
- package/dist/app/assets/PzTextarea-27aRIiRI.css +1 -0
- package/dist/app/assets/PzTextarea.stories-BtHMdHUF.js +73 -0
- package/dist/app/assets/{PzValidatorXSS.stories-HZEissEy.js → PzValidatorXSS.stories-B7ussB1u.js} +3 -3
- package/dist/app/assets/{Spacing-B5TnfKCB.css → Spacing-DDiZ9XB6.css} +1 -1
- package/dist/app/assets/{Spacing.stories-Cu5R7R8t.js → Spacing.stories-IeHBLcii.js} +29 -2
- package/dist/app/assets/Typography.stories-DigE2FGD.js +47 -0
- package/dist/app/assets/{WithTooltip-65CFNBJE-BcToq9Uh.js → WithTooltip-65CFNBJE-CARy1qAy.js} +2 -2
- package/dist/app/assets/_plugin-vue_export-helper-DlAUqK2U.js +1 -0
- package/dist/app/assets/configs-CZIaFchr.js +1 -0
- package/dist/app/assets/floating-vue-B4YMiR3n.js +1 -0
- package/dist/app/assets/floating-vue-BXOYXd0R.js +1 -0
- package/dist/app/assets/{formatter-EIJCOSYU-X1jNy3Wo.js → formatter-EIJCOSYU-AVmvplX0.js} +1 -1
- package/dist/app/assets/iframe-4qk0Ss25.css +1 -0
- package/dist/app/assets/{iframe-B7Bddli1.js → iframe-DbWuH5mz.js} +181 -181
- package/dist/app/assets/index-LkANHSb5.js +1 -0
- package/dist/app/assets/isArray-DPUC7i9_.js +1 -0
- package/dist/app/assets/lodash-CdDiHlzQ.js +27 -0
- package/dist/app/assets/{syntaxhighlighter-OH4MV7E3-DpHT8arc.js → syntaxhighlighter-OH4MV7E3-DKud-BAu.js} +3 -3
- package/dist/app/assets/text-clamp.esm-BLa2P3lJ.js +1 -0
- package/dist/app/iframe.html +81 -76
- package/dist/app/index.json +1 -1
- package/dist/app/project.json +1 -1
- package/dist/app/sb-manager/globals-runtime.js +1 -1
- package/dist/components/Actions/PzCopyToClipboard/PzCopyToClipboard.vue.d.ts +33 -0
- package/dist/components/Actions/PzCopyToClipboard/index.d.ts +2 -0
- package/dist/components/Actions/PzCopyToClipboard/types.d.ts +17 -0
- package/dist/components/Actions/PzLink/configs.d.ts +2 -0
- package/dist/components/{PzTable → Data/PzTable}/types.d.ts +1 -1
- package/dist/components/Display/PzClamp/PzClamp.vue.d.ts +8 -0
- package/dist/components/Display/PzClamp/index.d.ts +2 -0
- package/dist/components/Display/PzClamp/types.d.ts +7 -0
- package/dist/components/Display/PzDate/PzDate.vue.d.ts +5 -0
- package/dist/components/Display/PzDate/index.d.ts +2 -0
- package/dist/components/Display/PzDate/types.d.ts +5 -0
- package/dist/components/{PzIcon → Display/PzIcon}/types.d.ts +1 -1
- package/dist/components/Display/PzKeyValue/PzKeyValue.vue.d.ts +28 -0
- package/dist/components/Display/PzKeyValue/index.d.ts +2 -0
- package/dist/components/Display/PzKeyValue/types.d.ts +45 -0
- package/dist/components/Display/PzLoader/PzLoader.vue.d.ts +7 -0
- package/dist/components/Display/PzLoader/index.d.ts +2 -0
- package/dist/components/Display/PzLoader/types.d.ts +6 -0
- package/dist/components/Display/PzStatus/configs.d.ts +2 -0
- package/dist/components/Display/PzTag/configs.d.ts +2 -0
- package/dist/components/Form/PzCheckbox/PzCheckbox.vue.d.ts +28 -0
- package/dist/components/Form/PzCheckbox/index.d.ts +2 -0
- package/dist/components/Form/PzCheckbox/types.d.ts +12 -0
- package/dist/components/Form/PzCheckboxGroup/PzCheckboxGroup.vue.d.ts +35 -0
- package/dist/components/Form/PzCheckboxGroup/index.d.ts +2 -0
- package/dist/components/Form/PzCheckboxGroup/types.d.ts +16 -0
- package/dist/components/Form/PzFileInput/PzFileInput.vue.d.ts +26 -0
- package/dist/components/Form/PzFileInput/index.d.ts +2 -0
- package/dist/components/Form/PzFileInput/types.d.ts +26 -0
- package/dist/components/Form/PzImageInput/PzImageInput.vue.d.ts +27 -0
- package/dist/components/Form/PzImageInput/index.d.ts +2 -0
- package/dist/components/Form/PzImageInput/types.d.ts +26 -0
- package/dist/components/Form/PzInput/PzInput.vue.d.ts +30 -0
- package/dist/components/Form/PzInput/index.d.ts +2 -0
- package/dist/components/Form/PzInput/types.d.ts +17 -0
- package/dist/components/Form/PzInputDate/PzInputDate.vue.d.ts +30 -0
- package/dist/components/Form/PzInputDate/index.d.ts +2 -0
- package/dist/components/Form/PzInputDate/types.d.ts +13 -0
- package/dist/components/Form/PzInputNumber/PzInputNumber.vue.d.ts +26 -0
- package/dist/components/Form/PzInputNumber/index.d.ts +2 -0
- package/dist/components/Form/PzInputNumber/types.d.ts +14 -0
- package/dist/components/Form/PzLabel/PzLabel.vue.d.ts +24 -0
- package/dist/components/Form/PzLabel/index.d.ts +2 -0
- package/dist/components/Form/PzLabel/types.d.ts +6 -0
- package/dist/components/Form/PzMultiSelect/PzMultiSelect.vue.d.ts +44 -0
- package/dist/components/Form/PzMultiSelect/constants.d.ts +1 -0
- package/dist/components/Form/PzMultiSelect/index.d.ts +2 -0
- package/dist/components/Form/PzMultiSelect/types.d.ts +22 -0
- package/dist/components/Form/PzRadioGroup/PzRadioGroup.vue.d.ts +43 -0
- package/dist/components/Form/PzRadioGroup/index.d.ts +2 -0
- package/dist/components/Form/PzRadioGroup/types.d.ts +19 -0
- package/dist/components/Form/PzSelect/PzSelect.vue.d.ts +42 -0
- package/dist/components/Form/PzSelect/configs.d.ts +1 -0
- package/dist/components/Form/PzSelect/constants.d.ts +1 -0
- package/dist/components/Form/PzSelect/index.d.ts +2 -0
- package/dist/components/Form/PzSelect/types.d.ts +22 -0
- package/dist/components/Form/PzTextarea/PzTextarea.vue.d.ts +27 -0
- package/dist/components/Form/PzTextarea/index.d.ts +2 -0
- package/dist/components/Form/PzTextarea/types.d.ts +22 -0
- package/dist/components/Form/shared/configs.d.ts +28 -0
- package/dist/components/Form/shared/types.d.ts +37 -0
- package/dist/components/{PzGrid → Layouts/PzGrid}/configs.d.ts +1 -1
- package/dist/components/Navigation/PzListNav/PzListNav.vue.d.ts +15 -0
- package/dist/components/Navigation/PzListNav/index.d.ts +4 -0
- package/dist/components/Navigation/PzListNav/types.d.ts +9 -0
- package/dist/components/Navigation/shared/configs.d.ts +2 -0
- package/dist/components/Navigation/shared/constants.d.ts +8 -0
- package/dist/index.d.ts +45 -25
- package/dist/package.json +2 -1
- package/dist/prozorro-ui.cjs +16 -16
- package/dist/prozorro-ui.js +9492 -7741
- package/dist/style.css +1 -1
- package/dist/utils/PzNumberFormat/PzNumberFormat.d.ts +13 -0
- package/dist/utils/PzNumberFormat/index.d.ts +2 -0
- package/dist/utils/PzNumberFormat/types.d.ts +1 -0
- package/dist/utils/PzPriceFormat/PzPriceFormat.d.ts +8 -0
- package/dist/utils/PzPriceFormat/index.d.ts +2 -0
- package/dist/utils/PzPriceFormat/types.d.ts +1 -0
- package/package.json +2 -1
- package/src/styles/_spacing.scss +30 -4
- package/dist/app/assets/PzAccordion-DTiV4JOM.js +0 -1
- package/dist/app/assets/PzAccordion-hujlMYpG.css +0 -1
- package/dist/app/assets/PzAccordionTable.stories-DNbpjx54.js +0 -275
- package/dist/app/assets/PzBtn-B24JwTDl.js +0 -1
- package/dist/app/assets/PzHint-D62JWyEp.js +0 -1
- package/dist/app/assets/PzHint-kEBemRXE.css +0 -1
- package/dist/app/assets/PzInfoHint-DUCe-kk0.js +0 -1
- package/dist/app/assets/PzInfoHint-SKNZ9Qnk.css +0 -1
- package/dist/app/assets/PzLink-BU7dMeUw.js +0 -1
- package/dist/app/assets/PzPagination.stories-CFaLbyxd.js +0 -83
- package/dist/app/assets/PzSkeleton-DnpztBv3.js +0 -1
- package/dist/app/assets/PzStatus-KfVGXJ4A.css +0 -1
- package/dist/app/assets/PzStatus-dVlplKB_.js +0 -1
- package/dist/app/assets/PzTable-B73TyHoC.css +0 -1
- package/dist/app/assets/PzTable-BipugQuF.js +0 -27
- package/dist/app/assets/PzTag-Jn6TGUtg.css +0 -1
- package/dist/app/assets/PzTag-jiAX5zAj.js +0 -1
- package/dist/app/assets/PzText-DsC8c6AJ.css +0 -1
- package/dist/app/assets/PzText-Qtpayc5y.js +0 -1
- package/dist/app/assets/PzTextClamp.stories--mMfXCQg.js +0 -149
- package/dist/app/assets/Typography.stories-j9AXuH47.js +0 -47
- package/dist/app/assets/floating-vue-BD2YJLen.js +0 -1
- package/dist/app/assets/iframe-B97zFSkg.css +0 -1
- package/dist/components/PzLink/configs.d.ts +0 -2
- package/dist/components/PzStatus/configs.d.ts +0 -2
- package/dist/components/PzTag/configs.d.ts +0 -2
- package/dist/components/{PzBtn → Actions/PzBtn}/PzBtn.vue.d.ts +1 -1
- package/dist/components/{PzBtn → Actions/PzBtn}/configs.d.ts +0 -0
- package/dist/components/{PzBtn → Actions/PzBtn}/index.d.ts +0 -0
- package/dist/components/{PzBtn → Actions/PzBtn}/types.d.ts +0 -0
- package/dist/components/{PzLink → Actions/PzLink}/PzLink.vue.d.ts +1 -1
- package/dist/components/{PzLink → Actions/PzLink}/constants.d.ts +0 -0
- package/dist/components/{PzLink → Actions/PzLink}/index.d.ts +0 -0
- package/dist/components/{PzLink → Actions/PzLink}/types.d.ts +0 -0
- package/dist/components/{PzRouterLink → Actions/PzRouterLink}/PzRouterLink.vue.d.ts +2 -2
- package/dist/components/{PzRouterLink → Actions/PzRouterLink}/index.d.ts +0 -0
- package/dist/components/{PzRouterLink → Actions/PzRouterLink}/types.d.ts +0 -0
- package/dist/components/{PzAccordionTable → Data/PzAccordionTable}/PzAccordionTable.vue.d.ts +0 -0
- package/dist/components/{PzAccordionTable → Data/PzAccordionTable}/constants.d.ts +0 -0
- package/dist/components/{PzAccordionTable → Data/PzAccordionTable}/index.d.ts +0 -0
- package/dist/components/{PzAccordionTable → Data/PzAccordionTable}/types.d.ts +0 -0
- package/dist/components/{PzTable → Data/PzTable}/PzTable.vue.d.ts +0 -0
- package/dist/components/{PzTable → Data/PzTable}/PzTableData.vue.d.ts +0 -0
- package/dist/components/{PzTable → Data/PzTable}/PzTableHead.vue.d.ts +0 -0
- package/dist/components/{PzTable → Data/PzTable}/constants.d.ts +0 -0
- package/dist/components/{PzTable → Data/PzTable}/index.d.ts +0 -0
- package/dist/components/{PzIcon → Display/PzIcon}/PzIcon.vue.d.ts +1 -1
- package/dist/components/{PzIcon → Display/PzIcon}/configs.d.ts +0 -0
- package/dist/components/{PzIcon → Display/PzIcon}/index.d.ts +0 -0
- package/dist/components/{PzImage → Display/PzImage}/PzImage.vue.d.ts +0 -0
- package/dist/components/{PzImage → Display/PzImage}/configs.d.ts +0 -0
- package/dist/components/{PzImage → Display/PzImage}/index.d.ts +0 -0
- package/dist/components/{PzImage → Display/PzImage}/types.d.ts +0 -0
- package/dist/components/{PzSkeleton → Display/PzSkeleton}/PzSkeleton.vue.d.ts +0 -0
- package/dist/components/{PzSkeleton → Display/PzSkeleton}/index.d.ts +0 -0
- package/dist/components/{PzSkeleton → Display/PzSkeleton}/types.d.ts +0 -0
- package/dist/components/{PzStatus → Display/PzStatus}/PzStatus.vue.d.ts +0 -0
- package/dist/components/{PzStatus → Display/PzStatus}/constants.d.ts +0 -0
- package/dist/components/{PzStatus → Display/PzStatus}/index.d.ts +0 -0
- package/dist/components/{PzStatus → Display/PzStatus}/types.d.ts +0 -0
- package/dist/components/{PzTag → Display/PzTag}/PzTag.vue.d.ts +0 -0
- package/dist/components/{PzTag → Display/PzTag}/index.d.ts +0 -0
- package/dist/components/{PzTag → Display/PzTag}/types.d.ts +0 -0
- package/dist/components/{PzAccordion → Layouts/PzAccordion}/PzAccordion.vue.d.ts +1 -1
- package/dist/components/{PzAccordion → Layouts/PzAccordion}/PzAccordionContent.vue.d.ts +0 -0
- package/dist/components/{PzAccordion → Layouts/PzAccordion}/configs.d.ts +0 -0
- package/dist/components/{PzAccordion → Layouts/PzAccordion}/index.d.ts +0 -0
- package/dist/components/{PzAccordion → Layouts/PzAccordion}/types.d.ts +0 -0
- package/dist/components/{PzGrid → Layouts/PzGrid}/PzGrid.vue.d.ts +2 -2
- package/dist/components/{PzGrid → Layouts/PzGrid}/PzGridItem.vue.d.ts +0 -0
- package/dist/components/{PzGrid → Layouts/PzGrid}/index.d.ts +0 -0
- package/dist/components/{PzGrid → Layouts/PzGrid}/types.d.ts +0 -0
- package/dist/components/{PzInfoBlockLayout → Layouts/PzInfoBlockLayout}/PzInfoBlockLayout.vue.d.ts +0 -0
- package/dist/components/{PzInfoBlockLayout → Layouts/PzInfoBlockLayout}/index.d.ts +0 -0
- package/dist/components/{PzInfoBlockLayout → Layouts/PzInfoBlockLayout}/types.d.ts +0 -0
- package/dist/components/{PzSearchResultItemLayout → Layouts/PzSearchResultItemLayout}/PzSearchResultItemLayout.vue.d.ts +0 -0
- package/dist/components/{PzSearchResultItemLayout → Layouts/PzSearchResultItemLayout}/index.d.ts +0 -0
- package/dist/components/{PzSearchResultItemLayout → Layouts/PzSearchResultItemLayout}/types.d.ts +0 -0
- package/dist/components/{PzTabs → Layouts/PzTabs}/PzTab.vue.d.ts +0 -0
- package/dist/components/{PzTabs → Layouts/PzTabs}/PzTabs.vue.d.ts +0 -0
- package/dist/components/{PzTabs → Layouts/PzTabs}/configs.d.ts +0 -0
- package/dist/components/{PzTabs → Layouts/PzTabs}/constants.d.ts +0 -0
- package/dist/components/{PzTabs → Layouts/PzTabs}/index.d.ts +0 -0
- package/dist/components/{PzTabs → Layouts/PzTabs}/types.d.ts +0 -0
- package/dist/components/{PzBreadcrumb → Navigation/PzBreadcrumb}/PzBreadcrumb.vue.d.ts +0 -0
- package/dist/components/{PzBreadcrumb → Navigation/PzBreadcrumb}/constants.d.ts +0 -0
- package/dist/components/{PzBreadcrumb → Navigation/PzBreadcrumb}/index.d.ts +0 -0
- package/dist/components/{PzBreadcrumb → Navigation/PzBreadcrumb}/types.d.ts +0 -0
- package/dist/components/{PzNav → Navigation/PzNav}/PzNav.vue.d.ts +0 -0
- package/dist/components/{PzNav → Navigation/PzNav}/index.d.ts +0 -0
- package/dist/components/{PzNav → Navigation/PzNav}/types.d.ts +0 -0
- package/dist/components/{PzPagination → Navigation/PzPagination}/PzPagination.vue.d.ts +0 -0
- package/dist/components/{PzPagination → Navigation/PzPagination}/index.d.ts +0 -0
- package/dist/components/{PzPagination → Navigation/PzPagination}/types.d.ts +0 -0
- package/dist/components/{PzDropdown → Popups/PzDropdown}/PzDropdown.vue.d.ts +0 -0
- package/dist/components/{PzDropdown → Popups/PzDropdown}/index.d.ts +0 -0
- package/dist/components/{PzDropdown → Popups/PzDropdown}/types.d.ts +0 -0
- package/dist/components/{PzHint → Popups/PzHint}/PzHint.vue.d.ts +1 -1
- package/dist/components/{PzHint → Popups/PzHint}/index.d.ts +0 -0
- package/dist/components/{PzHint → Popups/PzHint}/types.d.ts +0 -0
- package/dist/components/{PzInfoHint → Popups/PzInfoHint}/PzInfoHint.vue.d.ts +1 -1
- package/dist/components/{PzInfoHint → Popups/PzInfoHint}/index.d.ts +0 -0
- package/dist/components/{PzInfoHint → Popups/PzInfoHint}/types.d.ts +0 -0
- package/dist/components/{PzModal → Popups/PzModal}/PzModal.vue.d.ts +0 -0
- package/dist/components/{PzModal → Popups/PzModal}/configs.d.ts +0 -0
- package/dist/components/{PzModal → Popups/PzModal}/constants.d.ts +0 -0
- package/dist/components/{PzModal → Popups/PzModal}/index.d.ts +0 -0
- package/dist/components/{PzModal → Popups/PzModal}/types.d.ts +0 -0
- package/dist/components/{PzArrayClamp → Text/PzArrayClamp}/PzArrayClamp.vue.d.ts +1 -1
- package/dist/components/{PzArrayClamp → Text/PzArrayClamp}/index.d.ts +0 -0
- package/dist/components/{PzArrayClamp → Text/PzArrayClamp}/types.d.ts +0 -0
- package/dist/components/{PzText → Text/PzText}/PzText.vue.d.ts +0 -0
- package/dist/components/{PzText → Text/PzText}/configs.d.ts +0 -0
- package/dist/components/{PzText → Text/PzText}/index.d.ts +0 -0
- package/dist/components/{PzText → Text/PzText}/types.d.ts +0 -0
- package/dist/components/{PzTextClamp → Text/PzTextClamp}/PzTextClamp.vue.d.ts +3 -3
- /package/dist/components/{PzTextClamp → Text/PzTextClamp}/constants.d.ts +0 -0
- /package/dist/components/{PzTextClamp → Text/PzTextClamp}/index.d.ts +0 -0
- /package/dist/components/{PzTextClamp → Text/PzTextClamp}/types.d.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as l,A as r,f as d,B as p,g as i,C as u,o as m,l as c}from"./iframe-DbWuH5mz.js";import{_ as h}from"./_plugin-vue_export-helper-DlAUqK2U.js";const e=l({name:"PzText",__name:"PzText",props:{variant:{},as:{default:void 0}},setup(a){const s={"h1-bold":"h1","h1-regular":"h1","h2-bold":"h2","h3-bold":"h3","h3-regular":"h3","h4-regular":"h4","h4-semibold":"h4","h4-bold":"h4",subtitle:"p","body-regular":"p","body-semibold":"p","body-bold":"p",capitalized:"span",hint:"span","line-through":"span","small-regular":"span","small-semibold":"span","small-bold":"span",link:"a",document:"p"},t=a,o=i(()=>t.as??s[t.variant]??"span");return(n,b)=>(m(),r(p(o.value),{class:d(["pz-text",`pz-text--${a.variant}`])},{default:u(()=>[c(n.$slots,"default",{},void 0,!0)]),_:3},8,["class"]))}}),z=h(e,[["__scopeId","data-v-ebeee9bc"]]);e.__docgenInfo=Object.assign({displayName:e.name??e.__name},{name:"PzText",exportName:"default",displayName:"PzText",description:"",tags:{},props:[{name:"variant",required:!0,type:{name:"PzTextVariant"}},{name:"as",required:!1,type:{name:"PzTextTag"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Text/PzText/PzText.vue"]});export{z as P};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pz-text[data-v-ebeee9bc]{margin:0;padding:0}.pz-text--h1-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-44);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h1-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-24);font-weight:700;line-height:1.5}}.pz-text--h1-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-44);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h1-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-24);font-weight:400;line-height:1.5}}.pz-text--h2-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-32);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h2-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-20);font-weight:700;line-height:1.5}}.pz-text--h3-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-24);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h3-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-18);font-weight:700;line-height:1.5}}.pz-text--h3-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-24);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h3-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-18);font-weight:400;line-height:1.5}}.pz-text--h4-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-18);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-16);font-weight:400;line-height:1.5}}.pz-text--h4-semibold[data-v-ebeee9bc]{font-size:var(--pz-font-size-18);font-weight:600;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-semibold[data-v-ebeee9bc]{font-size:var(--pz-font-size-16);font-weight:600;line-height:1.5}}.pz-text--h4-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-18);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-16);font-weight:700;line-height:1.5}}.pz-text--subtitle[data-v-ebeee9bc]{font-size:var(--pz-font-size-16);font-weight:600;line-height:1.5}.pz-text--body-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-text--body-semibold[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:600;line-height:1.5}.pz-text--body-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:700;line-height:1.5}.pz-text--capitalized[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;text-transform:uppercase;letter-spacing:.05em}.pz-text--hint[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;color:var(--pz-color-text-secondary)}.pz-text--line-through[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;text-decoration:line-through}.pz-text--small-regular[data-v-ebeee9bc]{font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-text--small-semibold[data-v-ebeee9bc]{font-size:var(--pz-font-size-12);font-weight:600;line-height:1.5}.pz-text--small-bold[data-v-ebeee9bc]{font-size:var(--pz-font-size-12);font-weight:700;line-height:1.5}.pz-text--link[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5;color:var(--pz-color-text-link);text-decoration:underline;cursor:pointer}.pz-text--link[data-v-ebeee9bc]:hover{color:var(--pz-color-text-link-hover)}.pz-text--document[data-v-ebeee9bc]{font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{P as R}from"./PzText-
|
|
1
|
+
import{P as R}from"./PzText-LkAZaPCW.js";import"./iframe-DbWuH5mz.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const De=["h1-bold","h1-regular","h2-bold","h3-bold","h3-regular","h4-regular","h4-semibold","h4-bold","subtitle","body-regular","body-semibold","body-bold","capitalized","hint","line-through","small-regular","small-semibold","small-bold","link","document"],Pe=["h1","h2","h3","h4","h5","h6","p","span","div","a","label"],$e=r=>r.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" "),Ae={title:"Components/Text/PzText",component:R,parameters:{prototype:{caption:"Text component",note:"Component-level playground for semantic tag overrides and text variant rendering."},docs:{description:{component:"Vue text primitive for rendering the shared typography variants. Use `Foundation/Typography` for the full type-scale reference and `Components/Text/PzText` for the component API."},source:{transform:(r,e)=>{const a=e.args??{};return`<template>
|
|
2
2
|
<PzText ${[a.variant?`variant="${a.variant}"`:null,a.as?`as="${a.as}"`:null,a.content?`content="${a.content}"`:null].filter(Boolean).join(" ")} />
|
|
3
3
|
</template>`}}}},args:{variant:"body-regular",content:"Every procurement notice should stay readable across dense interfaces and long-form content."},argTypes:{variant:{control:"select",options:De,description:"Text style variant from the Design System."},as:{control:"select",options:Pe,description:"HTML tag to render. Defaults to a semantic tag based on variant."},content:{control:"text",description:"Text content.",table:{category:"Slots"}}},render:r=>({components:{pzText:R},setup(){const e=$e(r.variant);return{args:r,currentLabel:e}},template:`
|
|
4
4
|
<section class="pz-text-demo">
|
|
@@ -14,7 +14,7 @@ import{P as R}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./p
|
|
|
14
14
|
<pz-text :variant="args.variant" :as="args.as">{{ args.content }}</pz-text>
|
|
15
15
|
</div>
|
|
16
16
|
</section>
|
|
17
|
-
`})},t={name:"H1 Bold",args:{variant:"h1-bold",content:"Headline Bold 1"}},n={name:"H1 Regular",args:{variant:"h1-regular",content:"Headline Regular 1"}},o={name:"H2 Bold",args:{variant:"h2-bold",content:"Headline Bold 2"}},s={name:"H3 Bold",args:{variant:"h3-bold",content:"Headline Bold 3"}},l={name:"H3 Regular",args:{variant:"h3-regular",content:"Headline Regular 3"}},c={name:"H4 Regular",args:{variant:"h4-regular",content:"Headline Regular 4"}},
|
|
17
|
+
`})},t={name:"H1 Bold",args:{variant:"h1-bold",content:"Headline Bold 1"}},n={name:"H1 Regular",args:{variant:"h1-regular",content:"Headline Regular 1"}},o={name:"H2 Bold",args:{variant:"h2-bold",content:"Headline Bold 2"}},s={name:"H3 Bold",args:{variant:"h3-bold",content:"Headline Bold 3"}},l={name:"H3 Regular",args:{variant:"h3-regular",content:"Headline Regular 3"}},c={name:"H4 Regular",args:{variant:"h4-regular",content:"Headline Regular 4"}},i={name:"H4 Semibold",args:{variant:"h4-semibold",content:"Headline Semibold 4"}},d={name:"H4 Bold",args:{variant:"h4-bold",content:"Headline Bold 4"}},m={args:{variant:"subtitle",content:"Subtitle"}},u={name:"Body Regular",args:{variant:"body-regular",content:"Body text regular"}},p={name:"Body Semibold",args:{variant:"body-semibold",content:"Body text semibold"}},g={name:"Body Bold",args:{variant:"body-bold",content:"Body text bold"}},b={args:{variant:"capitalized",content:"Capitalized text"}},v={args:{variant:"hint",content:"Hint text"}},h={name:"Line Through",args:{variant:"line-through",content:"Line through text"}},S={name:"Small Regular",args:{variant:"small-regular",content:"Small text regular"}},H={name:"Small Semibold",args:{variant:"small-semibold",content:"Small text semibold"}},B={name:"Small Bold",args:{variant:"small-bold",content:"Small text bold"}},x={name:"Link",args:{variant:"link",content:"Link text"}},y={args:{variant:"document",content:"Document text"}};var z,T,L;t.parameters={...t.parameters,docs:{...(z=t.parameters)==null?void 0:z.docs,source:{originalSource:`{
|
|
18
18
|
name: "H1 Bold",
|
|
19
19
|
args: {
|
|
20
20
|
variant: "h1-bold",
|
|
@@ -50,19 +50,19 @@ import{P as R}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./p
|
|
|
50
50
|
variant: "h4-regular",
|
|
51
51
|
content: "Headline Regular 4"
|
|
52
52
|
}
|
|
53
|
-
}`,...(F=(U=c.parameters)==null?void 0:U.docs)==null?void 0:F.source}}};var I,M,q;
|
|
53
|
+
}`,...(F=(U=c.parameters)==null?void 0:U.docs)==null?void 0:F.source}}};var I,M,q;i.parameters={...i.parameters,docs:{...(I=i.parameters)==null?void 0:I.docs,source:{originalSource:`{
|
|
54
54
|
name: "H4 Semibold",
|
|
55
55
|
args: {
|
|
56
56
|
variant: "h4-semibold",
|
|
57
57
|
content: "Headline Semibold 4"
|
|
58
58
|
}
|
|
59
|
-
}`,...(q=(M=
|
|
59
|
+
}`,...(q=(M=i.parameters)==null?void 0:M.docs)==null?void 0:q.source}}};var G,J,K;d.parameters={...d.parameters,docs:{...(G=d.parameters)==null?void 0:G.docs,source:{originalSource:`{
|
|
60
60
|
name: "H4 Bold",
|
|
61
61
|
args: {
|
|
62
62
|
variant: "h4-bold",
|
|
63
63
|
content: "Headline Bold 4"
|
|
64
64
|
}
|
|
65
|
-
}`,...(K=(J=
|
|
65
|
+
}`,...(K=(J=d.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var N,Q,W;m.parameters={...m.parameters,docs:{...(N=m.parameters)==null?void 0:N.docs,source:{originalSource:`{
|
|
66
66
|
args: {
|
|
67
67
|
variant: "subtitle",
|
|
68
68
|
content: "Subtitle"
|
|
@@ -90,12 +90,12 @@ import{P as R}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./p
|
|
|
90
90
|
variant: "capitalized",
|
|
91
91
|
content: "Capitalized text"
|
|
92
92
|
}
|
|
93
|
-
}`,...(ce=(le=b.parameters)==null?void 0:le.docs)==null?void 0:ce.source}}};var de,
|
|
93
|
+
}`,...(ce=(le=b.parameters)==null?void 0:le.docs)==null?void 0:ce.source}}};var ie,de,me;v.parameters={...v.parameters,docs:{...(ie=v.parameters)==null?void 0:ie.docs,source:{originalSource:`{
|
|
94
94
|
args: {
|
|
95
95
|
variant: "hint",
|
|
96
96
|
content: "Hint text"
|
|
97
97
|
}
|
|
98
|
-
}`,...(me=(
|
|
98
|
+
}`,...(me=(de=v.parameters)==null?void 0:de.docs)==null?void 0:me.source}}};var ue,pe,ge;h.parameters={...h.parameters,docs:{...(ue=h.parameters)==null?void 0:ue.docs,source:{originalSource:`{
|
|
99
99
|
name: "Line Through",
|
|
100
100
|
args: {
|
|
101
101
|
variant: "line-through",
|
|
@@ -130,4 +130,4 @@ import{P as R}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./p
|
|
|
130
130
|
variant: "document",
|
|
131
131
|
content: "Document text"
|
|
132
132
|
}
|
|
133
|
-
}`,...(Ce=(ke=y.parameters)==null?void 0:ke.docs)==null?void 0:Ce.source}}};const
|
|
133
|
+
}`,...(Ce=(ke=y.parameters)==null?void 0:ke.docs)==null?void 0:Ce.source}}};const Ee=["H1Bold","H1Regular","H2Bold","H3Bold","H3Regular","H4Regular","H4Semibold","H4Bold","Subtitle","BodyRegular","BodySemibold","BodyBold","Capitalized","Hint","LineThroughStory","SmallRegular","SmallSemibold","SmallBold","LinkStory","Document"];export{g as BodyBold,u as BodyRegular,p as BodySemibold,b as Capitalized,y as Document,t as H1Bold,n as H1Regular,o as H2Bold,s as H3Bold,l as H3Regular,d as H4Bold,c as H4Regular,i as H4Semibold,v as Hint,h as LineThroughStory,x as LinkStory,B as SmallBold,S as SmallRegular,H as SmallSemibold,m as Subtitle,Ee as __namedExportsOrder,Ae as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pz-text-clamp-story{display:grid;gap:24px}.pz-text-clamp-story-hero,.pz-text-clamp-story-card{border:1px solid color-mix(in srgb,var(--pz-color-grey-40) 58%,transparent);border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-40) 10%,var(--pz-color-white))),linear-gradient(135deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent),transparent 42%);box-shadow:0 18px 60px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-text-clamp-story-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);gap:20px;padding:clamp(22px,2vw,30px)}.pz-text-clamp-story-copy,.pz-text-clamp-story-preview,.pz-text-clamp-story-card{display:grid;gap:16px}.pz-text-clamp-story-preview,.pz-text-clamp-story-card{padding:clamp(20px,2vw,24px)}.pz-text-clamp-story-preview{align-content:start;border-radius:22px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 30%),var(--pz-color-white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-40) 52%,transparent),0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent)}.pz-text-clamp-story-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}.pz-text-clamp-story-card{min-height:220px}.pz-text-clamp-story-card-header{display:grid;gap:8px}.pz-text-clamp-story-eyebrow,.pz-text-clamp-story-kicker,.pz-text-clamp-story-chip{display:inline-flex;align-items:center;width:fit-content;font-size:11px;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase}.pz-text-clamp-story-eyebrow,.pz-text-clamp-story-kicker{color:var(--pz-color-text-link-hover)}.pz-text-clamp-story-chip{padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-50) 10%,transparent);color:var(--pz-color-text-link-hover)}.pz-text-clamp-story-custom-toggle{padding:8px 12px;border:1px solid color-mix(in srgb,var(--pz-color-blue-50) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent);color:var(--pz-color-text-link-hover);cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease;font-size:var(--pz-font-size-12);font-weight:600;line-height:1.5}.pz-text-clamp-story-custom-toggle:hover,.pz-text-clamp-story-custom-toggle:focus-visible{border-color:color-mix(in srgb,var(--pz-color-text-link-hover) 24%,transparent);background:color-mix(in srgb,var(--pz-color-blue-50) 14%,transparent);outline:none}@media (width <= 1024px){.pz-text-clamp-story-hero,.pz-text-clamp-story-grid{grid-template-columns:1fr}}@media (width <= 640px){.pz-text-clamp-story-hero,.pz-text-clamp-story-preview,.pz-text-clamp-story-card{padding:20px;border-radius:22px}}.pz-text-clamp[data-v-
|
|
1
|
+
.pz-text-clamp-story{display:grid;gap:24px}.pz-text-clamp-story-hero,.pz-text-clamp-story-card{border:1px solid color-mix(in srgb,var(--pz-color-grey-40) 58%,transparent);border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-40) 10%,var(--pz-color-white))),linear-gradient(135deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent),transparent 42%);box-shadow:0 18px 60px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-text-clamp-story-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);gap:20px;padding:clamp(22px,2vw,30px)}.pz-text-clamp-story-copy,.pz-text-clamp-story-preview,.pz-text-clamp-story-card{display:grid;gap:16px}.pz-text-clamp-story-preview,.pz-text-clamp-story-card{padding:clamp(20px,2vw,24px)}.pz-text-clamp-story-preview{align-content:start;border-radius:22px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 30%),var(--pz-color-white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-40) 52%,transparent),0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent)}.pz-text-clamp-story-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}.pz-text-clamp-story-card{min-height:220px}.pz-text-clamp-story-card-header{display:grid;gap:8px}.pz-text-clamp-story-eyebrow,.pz-text-clamp-story-kicker,.pz-text-clamp-story-chip{display:inline-flex;align-items:center;width:fit-content;font-size:11px;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase}.pz-text-clamp-story-eyebrow,.pz-text-clamp-story-kicker{color:var(--pz-color-text-link-hover)}.pz-text-clamp-story-chip{padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-50) 10%,transparent);color:var(--pz-color-text-link-hover)}.pz-text-clamp-story-custom-toggle{padding:8px 12px;border:1px solid color-mix(in srgb,var(--pz-color-blue-50) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent);color:var(--pz-color-text-link-hover);cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease;font-size:var(--pz-font-size-12);font-weight:600;line-height:1.5}.pz-text-clamp-story-custom-toggle:hover,.pz-text-clamp-story-custom-toggle:focus-visible{border-color:color-mix(in srgb,var(--pz-color-text-link-hover) 24%,transparent);background:color-mix(in srgb,var(--pz-color-blue-50) 14%,transparent);outline:none}@media (width <= 1024px){.pz-text-clamp-story-hero,.pz-text-clamp-story-grid{grid-template-columns:1fr}}@media (width <= 640px){.pz-text-clamp-story-hero,.pz-text-clamp-story-preview,.pz-text-clamp-story-card{padding:20px;border-radius:22px}}.pz-text-clamp[data-v-d9db4ec4]{color:var(--pz-color-text-primary);overflow-wrap:anywhere;font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-text-clamp__toggle[data-v-d9db4ec4]{padding:0;margin-inline-start:var(--pz-space-4);border:0;background:transparent;color:var(--pz-color-text-link);cursor:pointer;outline:none;transition:color .16s ease}.pz-text-clamp__toggle[data-v-d9db4ec4]:hover,.pz-text-clamp__toggle[data-v-d9db4ec4]:focus-visible{color:var(--pz-color-text-link-hover)}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import{d as _,A as k,C as S,u as N,o as u,l as B,e as A,t as E,L as O,f as q,D as R,r as V,w as $}from"./iframe-DbWuH5mz.js";import{P as T}from"./PzText-LkAZaPCW.js";import{y as I}from"./text-clamp.esm-BLa2P3lJ.js";import{_ as D}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const M=3,F="... ",j=["aria-expanded","onClick"],r=_({name:"PzTextClamp",__name:"PzTextClamp",props:{text:{},maxContentLines:{default:M},clampPostfix:{default:F},btnClass:{default:""},autoResize:{type:Boolean,default:!0},expanded:{type:Boolean,default:!1},expandLabel:{default:"Show more"},collapseLabel:{default:"Collapse"}},emits:["update:expanded","clamp-change"],setup(e,{emit:a}){const t=e,d=a,L=n=>{d("update:expanded",n)},P=n=>{d("clamp-change",n)};return(n,W)=>(u(),k(N(I),{text:t.text,"max-lines":t.maxContentLines,ellipsis:t.clampPostfix,expanded:t.expanded,"auto-resize":t.autoResize,class:"pz-text-clamp","onUpdate:expanded":L,onClampChange:P},{after:S(({toggle:m,expanded:l,clamped:x})=>[B(n.$slots,"toggle",{toggle:m,expanded:l,clamped:x},()=>[x||l?(u(),A("button",{key:0,type:"button",class:q(["pz-text-clamp__toggle",t.btnClass]),"aria-expanded":l,onClick:O(m,["stop"])},E(l?t.collapseLabel:t.expandLabel),11,j)):R("",!0)],!0)]),_:3},8,["text","max-lines","ellipsis","expanded","auto-resize"]))}}),i=D(r,[["__scopeId","data-v-d9db4ec4"]]);r.__docgenInfo=Object.assign({displayName:r.name??r.__name},{name:"PzTextClamp",exportName:"default",displayName:"PzTextClamp",description:"",tags:{},props:[{name:"text",required:!0,type:{name:"string"}},{name:"maxContentLines",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"MAX_CONTENT_LINES"}},{name:"clampPostfix",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"DEFAULT_CLAMP_POSTFIX"}},{name:"btnClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"autoResize",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"expanded",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"expandLabel",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"Show more"'}},{name:"collapseLabel",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"Collapse"'}}],events:[{name:"update:expanded",type:{names:["boolean"]}},{name:"clamp-change",type:{names:["boolean"]}}],slots:[{name:"toggle",scoped:!0,bindings:[{name:"toggle",title:"binding"},{name:"expanded",title:"binding"},{name:"clamped",title:"binding"}]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Text/PzTextClamp/PzTextClamp.vue"]});const c=[{kicker:"News teaser",title:"Two lines with default toggle",text:"The procurement framework for recovery projects should remain readable even when editors add dense context, supporting details, and legal clarifications into a single preview paragraph.",maxContentLines:2},{kicker:"Tender summary",title:"Three lines with longer body copy",text:"Prozorro teams often need the first block of text to stay compact inside cards, while still giving visitors a way to reveal the full explanation, deadlines, and rationale without leaving the page context.",maxContentLines:3},{kicker:"Always expanded",title:"Controlled expanded state",text:"This example starts opened to show that the wrapper supports v-model style control through update:expanded and still keeps the same text treatment as the collapsed variant.",maxContentLines:2,expanded:!0}],U=e=>`<template>
|
|
2
|
+
<PzTextClamp ${[`text="${e.text}"`,e.maxContentLines!==3?`:max-content-lines="${e.maxContentLines}"`:null,e.clampPostfix!=="... "?`clamp-postfix="${e.clampPostfix}"`:null,e.expandLabel!=="Show more"?`expand-label="${e.expandLabel}"`:null,e.collapseLabel!=="Collapse"?`collapse-label="${e.collapseLabel}"`:null,e.expanded?':expanded="true"':null].filter(t=>!!t).join(" ")} />
|
|
3
|
+
</template>`,X=()=>`<template>
|
|
4
|
+
<PzTextClamp
|
|
5
|
+
text="Long procurement summary that needs a custom action."
|
|
6
|
+
:max-content-lines="2"
|
|
7
|
+
>
|
|
8
|
+
<template #toggle="{ toggle, expanded, clamped }">
|
|
9
|
+
<button
|
|
10
|
+
v-if="clamped || expanded"
|
|
11
|
+
type="button"
|
|
12
|
+
class="custom-toggle"
|
|
13
|
+
@click="toggle"
|
|
14
|
+
>
|
|
15
|
+
{{ expanded ? "Hide details" : "Open full text" }}
|
|
16
|
+
</button>
|
|
17
|
+
</template>
|
|
18
|
+
</PzTextClamp>
|
|
19
|
+
</template>`,H={title:"Components/Text/PzTextClamp",component:i,parameters:{prototype:{caption:"Text clamp component",note:"Built as a thin wrapper over vue3-text-clamp, reusing the old text/max-lines/postfix/button-class contract and replacing app-specific translations with explicit labels and a toggle slot."},docs:{description:{component:"Use `PzTextClamp` for compact previews of long copy. It defaults to the `body-regular` text style, exposes the old clamp props, and supports toggle customization through `v-model:expanded` and the `toggle` slot."},source:{transform:(e,a)=>U(a.args??H.args)}}},args:{text:c[1].text,maxContentLines:3,clampPostfix:"... ",btnClass:"",autoResize:!0,expanded:!1,expandLabel:"Show more",collapseLabel:"Collapse",title:"Long-form card description"},argTypes:{text:{control:"text",description:"Source text rendered by the clamp component."},maxContentLines:{control:{type:"number",min:1,max:8,step:1},description:"Maximum number of visible lines before the text is clamped."},clampPostfix:{control:"text",description:"String appended to the truncated text."},btnClass:{control:"text",description:"Additional class names applied to the default toggle button."},autoResize:{control:"boolean",description:"Recalculates clamping on layout changes."},expanded:{control:"boolean",description:"Controlled expanded state."},expandLabel:{control:"text",description:"Default label shown while the text is collapsed."},collapseLabel:{control:"text",description:"Default label shown while the text is expanded."},title:{control:"text",description:"Preview heading used in the story only.",table:{category:"Story"}}},render:e=>({components:{pzText:T,pzTextClamp:i},setup(){const a=V(!!e.expanded);return $(()=>e.expanded,t=>{a.value=!!t}),{args:e,expanded:a,clampStories:c}},template:`
|
|
20
|
+
<div class="pz-text-clamp-story">
|
|
21
|
+
<section class="pz-text-clamp-story-hero">
|
|
22
|
+
<div class="pz-text-clamp-story-copy">
|
|
23
|
+
<span class="pz-text-clamp-story-eyebrow">Body Regular by default</span>
|
|
24
|
+
<pz-text variant="h4-bold">{{ args.title }}</pz-text>
|
|
25
|
+
<pz-text variant="body-regular">
|
|
26
|
+
Clamp long editorial or procurement copy without creating new typography rules for each surface.
|
|
27
|
+
</pz-text>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="pz-text-clamp-story-preview">
|
|
31
|
+
<pz-text variant="small-semibold" as="span" class="pz-text-clamp-story-chip">
|
|
32
|
+
{{ expanded ? "expanded" : "collapsed" }}
|
|
33
|
+
</pz-text>
|
|
34
|
+
|
|
35
|
+
<pz-text-clamp
|
|
36
|
+
:text="args.text"
|
|
37
|
+
:max-content-lines="args.maxContentLines"
|
|
38
|
+
:clamp-postfix="args.clampPostfix"
|
|
39
|
+
:btn-class="args.btnClass"
|
|
40
|
+
:auto-resize="args.autoResize"
|
|
41
|
+
:expanded="expanded"
|
|
42
|
+
:expand-label="args.expandLabel"
|
|
43
|
+
:collapse-label="args.collapseLabel"
|
|
44
|
+
@update:expanded="expanded = $event"
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
</section>
|
|
48
|
+
|
|
49
|
+
<section class="pz-text-clamp-story-grid">
|
|
50
|
+
<article
|
|
51
|
+
v-for="item in clampStories"
|
|
52
|
+
:key="item.title"
|
|
53
|
+
class="pz-text-clamp-story-card"
|
|
54
|
+
>
|
|
55
|
+
<div class="pz-text-clamp-story-card-header">
|
|
56
|
+
<span class="pz-text-clamp-story-kicker">{{ item.kicker }}</span>
|
|
57
|
+
<pz-text variant="body-semibold">{{ item.title }}</pz-text>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<pz-text-clamp
|
|
61
|
+
:text="item.text"
|
|
62
|
+
:max-content-lines="item.maxContentLines"
|
|
63
|
+
:expanded="item.expanded"
|
|
64
|
+
/>
|
|
65
|
+
</article>
|
|
66
|
+
</section>
|
|
67
|
+
</div>
|
|
68
|
+
`})},o={},s={args:{text:c[0].text,maxContentLines:2,title:"News teaser"}},p={parameters:{docs:{source:{code:X()}}},render:()=>({components:{pzText:T,pzTextClamp:i},setup(){return{text:"Publishing teams can replace the default inline action with a branded control while keeping the same clamp behavior and the same underlying library implementation."}},template:`
|
|
69
|
+
<div class="pz-text-clamp-story">
|
|
70
|
+
<section class="pz-text-clamp-story-hero">
|
|
71
|
+
<div class="pz-text-clamp-story-copy">
|
|
72
|
+
<span class="pz-text-clamp-story-eyebrow">Toggle slot</span>
|
|
73
|
+
<pz-text variant="h4-bold">Custom action content</pz-text>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="pz-text-clamp-story-preview">
|
|
77
|
+
<pz-text-clamp
|
|
78
|
+
:text="text"
|
|
79
|
+
:max-content-lines="2"
|
|
80
|
+
>
|
|
81
|
+
<template #toggle="{ toggle, expanded, clamped }">
|
|
82
|
+
<button
|
|
83
|
+
v-if="clamped || expanded"
|
|
84
|
+
type="button"
|
|
85
|
+
class="pz-text-clamp-story-custom-toggle"
|
|
86
|
+
@click="toggle"
|
|
87
|
+
>
|
|
88
|
+
{{ expanded ? "Hide details" : "Open full text" }}
|
|
89
|
+
</button>
|
|
90
|
+
</template>
|
|
91
|
+
</pz-text-clamp>
|
|
92
|
+
</div>
|
|
93
|
+
</section>
|
|
94
|
+
</div>
|
|
95
|
+
`})};var g,f,b;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(b=(f=o.parameters)==null?void 0:f.docs)==null?void 0:b.source}}};var y,h,z;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.docs,source:{originalSource:`{
|
|
96
|
+
args: {
|
|
97
|
+
text: clampStories[0].text,
|
|
98
|
+
maxContentLines: 2,
|
|
99
|
+
title: "News teaser"
|
|
100
|
+
}
|
|
101
|
+
}`,...(z=(h=s.parameters)==null?void 0:h.docs)==null?void 0:z.source}}};var v,C,w;p.parameters={...p.parameters,docs:{...(v=p.parameters)==null?void 0:v.docs,source:{originalSource:`{
|
|
102
|
+
parameters: {
|
|
103
|
+
docs: {
|
|
104
|
+
source: {
|
|
105
|
+
code: buildSlotSource()
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
render: () => ({
|
|
110
|
+
components: {
|
|
111
|
+
pzText: PzText,
|
|
112
|
+
pzTextClamp: PzTextClamp
|
|
113
|
+
},
|
|
114
|
+
setup() {
|
|
115
|
+
const text = "Publishing teams can replace the default inline action with a branded control while keeping the same clamp behavior and the same underlying library implementation.";
|
|
116
|
+
return {
|
|
117
|
+
text
|
|
118
|
+
};
|
|
119
|
+
},
|
|
120
|
+
template: \`
|
|
121
|
+
<div class="pz-text-clamp-story">
|
|
122
|
+
<section class="pz-text-clamp-story-hero">
|
|
123
|
+
<div class="pz-text-clamp-story-copy">
|
|
124
|
+
<span class="pz-text-clamp-story-eyebrow">Toggle slot</span>
|
|
125
|
+
<pz-text variant="h4-bold">Custom action content</pz-text>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="pz-text-clamp-story-preview">
|
|
129
|
+
<pz-text-clamp
|
|
130
|
+
:text="text"
|
|
131
|
+
:max-content-lines="2"
|
|
132
|
+
>
|
|
133
|
+
<template #toggle="{ toggle, expanded, clamped }">
|
|
134
|
+
<button
|
|
135
|
+
v-if="clamped || expanded"
|
|
136
|
+
type="button"
|
|
137
|
+
class="pz-text-clamp-story-custom-toggle"
|
|
138
|
+
@click="toggle"
|
|
139
|
+
>
|
|
140
|
+
{{ expanded ? "Hide details" : "Open full text" }}
|
|
141
|
+
</button>
|
|
142
|
+
</template>
|
|
143
|
+
</pz-text-clamp>
|
|
144
|
+
</div>
|
|
145
|
+
</section>
|
|
146
|
+
</div>
|
|
147
|
+
\`
|
|
148
|
+
})
|
|
149
|
+
}`,...(w=(C=p.parameters)==null?void 0:C.docs)==null?void 0:w.source}}};const Z=["Playground","TwoLines","CustomToggle"];export{p as CustomToggle,o as Playground,s as TwoLines,Z as __namedExportsOrder,H as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pz-textarea[data-v-0e35dbdf]{--pz-textarea-background: var(--pz-color-white);--pz-textarea-border: var(--pz-color-grey-30);--pz-textarea-text: var(--pz-color-text-primary);--pz-textarea-placeholder: var(--pz-color-grey-50);--pz-textarea-counter: var(--pz-color-grey-50);position:relative;display:block;color:var(--pz-textarea-text);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-textarea-wrap[data-v-0e35dbdf]{position:relative;display:block}.pz-textarea-control[data-v-0e35dbdf]{display:block;width:100%;padding:var(--pz-space-12);border-radius:var(--pz-space-4);border:1px solid var(--pz-textarea-border);background-color:var(--pz-textarea-background);color:var(--pz-textarea-text);font:inherit;resize:none}.pz-textarea-control[data-v-0e35dbdf]:focus{outline:2px solid var(--pz-color-blue-30);outline-offset:0}.pz-textarea-control[data-v-0e35dbdf]::placeholder{color:var(--pz-textarea-placeholder)}.pz-textarea-control[data-v-0e35dbdf]:disabled{--pz-textarea-background: transparent;--pz-textarea-text: var(--pz-color-grey-40);--pz-textarea-placeholder: var(--pz-color-grey-40);--pz-textarea-counter: var(--pz-color-grey-40);cursor:default;resize:none}.pz-textarea-control--counted[data-v-0e35dbdf]{padding-bottom:var(--pz-space-32)}.pz-textarea-readonly[data-v-0e35dbdf]{display:block;margin:0;padding:0;color:var(--pz-color-text-secondary);white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:none;user-select:none}.pz-textarea-counter[data-v-0e35dbdf]{position:absolute;right:var(--pz-space-12);bottom:var(--pz-space-12);color:var(--pz-textarea-counter);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-textarea-error[data-v-0e35dbdf]{display:block;margin-top:var(--pz-space-8);color:var(--pz-color-red-50);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-textarea.error .pz-textarea-control[data-v-0e35dbdf]{border-color:var(--pz-color-red-50)}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import{d as q,W as P,e as n,y as _,C as T,u as M,f as x,X as b,o as d,Y as S,k as B,$,t as u,D as z,g as k,r,w as C}from"./iframe-DbWuH5mz.js";import{P as N}from"./PzText-LkAZaPCW.js";import{P as I}from"./PzLabel-Coa549nk.js";import{_ as D}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const F={key:0,class:"pz-textarea-wrap"},j=["id","placeholder","disabled","maxlength","required","rows"],A={key:0,class:"pz-textarea-counter"},E=["id"],L={key:2,class:"pz-textarea-error"},c=q({name:"PzTextarea",__name:"PzTextarea",props:b({name:{},modelValue:{},label:{default:""},placeholder:{default:""},errorMessage:{default:""},counted:{type:Boolean,default:!1},maxSize:{default:1e3},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},rows:{default:4}},{modelValue:{default:""},modelModifiers:{}}),emits:b(["focus","blur","update:modelValue"],["update:modelValue"]),setup(e,{emit:l}){const a=e,i=l,o=P(e,"modelValue"),m=k(()=>o.value.length);return(f,t)=>(d(),n("div",{class:x(["pz-textarea",{error:!!a.errorMessage,disabled:a.disabled}])},[_(M(I),{label:a.label,for:a.name,required:a.required,disabled:a.disabled},{default:T(()=>[a.editable?(d(),n("span",F,[S(B("textarea",{id:a.name,"onUpdate:modelValue":t[0]||(t[0]=s=>o.value=s),placeholder:a.placeholder,disabled:a.disabled,maxlength:a.counted?a.maxSize:void 0,required:a.required,rows:a.rows,class:x(["pz-textarea-control",{"pz-textarea-control--counted":a.counted}]),onBlur:t[1]||(t[1]=s=>i("blur")),onFocus:t[2]||(t[2]=s=>i("focus"))},null,42,j),[[$,o.value]]),a.counted?(d(),n("span",A,u(m.value)+"/"+u(a.maxSize),1)):z("",!0)])):(d(),n("div",{key:1,id:a.name,class:"pz-textarea-readonly"},u(o.value),9,E)),a.errorMessage?(d(),n("span",L,u(a.errorMessage),1)):z("",!0)]),_:1},8,["label","for","required","disabled"])],2))}}),v=D(c,[["__scopeId","data-v-0e35dbdf"]]);c.__docgenInfo=Object.assign({displayName:c.name??c.__name},{name:"PzTextarea",exportName:"default",displayName:"PzTextarea",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"modelValue",required:!0,type:{name:"string"}},{name:"label",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"placeholder",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"errorMessage",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"counted",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"maxSize",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"1000"}},{name:"required",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"editable",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"rows",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"4"}}],events:[{name:"focus"},{name:"blur"},{name:"update:modelValue",type:{names:["string"]}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzTextarea/PzTextarea.vue"]});const V=2,O=e=>`<template>
|
|
2
|
+
<PzTextarea
|
|
3
|
+
v-model="value"
|
|
4
|
+
${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null,e.editable===!1?':editable="false"':null,e.counted?':counted="true"':null,e.maxSize?`:max-size="${e.maxSize}"`:null,e.rows&&e.rows!==V?`:rows="${e.rows}"`:null,e.errorMessage?`error-message="${e.errorMessage}"`:null].filter(a=>!!a).join(" ")}
|
|
5
|
+
/>
|
|
6
|
+
</template>`,U={title:"Components/Form/PzTextarea",component:v,parameters:{docs:{description:{component:"Use `PzTextarea` for multi-line text input. It follows the shared form patterns in the library, wraps the control with `PzLabel`, supports counters, validation feedback, and a display-only presentation mode."},source:{transform:(e,l)=>O(l.args??U.args)}}},args:{name:"pz-textarea-story",label:"Опис",modelValue:"",placeholder:"Введiть детальний опис...",errorMessage:"",counted:!1,maxSize:1e3,required:!1,disabled:!1,editable:!0,rows:V},argTypes:{name:{control:"text",description:"Native textarea `id`/`name`."},label:{control:"text",description:"Текст лейбла над полем."},modelValue:{control:"text",description:"Поточне значення, прив'язане через `v-model`."},placeholder:{control:"text",description:"Пiдказка для порожнього поля."},errorMessage:{control:"text",description:"Повiдомлення про помилку пiд полем; одночасно вмикає error-стан."},counted:{control:"boolean",description:"Показує лiчильник символiв у правому нижньому кутi."},maxSize:{control:"number",description:"Максимальна довжина тексту для лiчильника та `maxlength`, коли `counted=true`."},required:{control:"boolean",description:"Позначає поле як обов'язкове."},disabled:{control:"boolean",description:"Блокує введення та застосовує приглушений стиль."},editable:{control:"boolean",description:"Коли `false`, компонент показує display-only представлення замiсть textarea."},rows:{control:"number",description:"Кiлькiсть рядкiв textarea."}},render:e=>({components:{pzTextarea:v,pzText:N},setup(){const l=r(e.modelValue??""),a=r("Спiльне значення для двох текстових полiв."),i=r(""),o=r(""),m=r("Короткий опис для прикладу лiчильника."),f=r("Текст, який потребує перевiрки."),t=r(`Перший рядок.
|
|
7
|
+
Другий рядок.
|
|
8
|
+
Третiй рядок.`),s=r("Просимо детально описати контекст звернення.");return C(()=>e.modelValue,g=>{l.value=g??""}),{args:e,value:l,sharedValue:a,defaultValue:i,requiredValue:o,countedValue:m,errorValue:f,previewValue:t,patternValue:s}},template:`
|
|
9
|
+
<div style="display: flex; flex-direction: column; gap: var(--pz-space-24); max-width: 640px;">
|
|
10
|
+
<section>
|
|
11
|
+
<pz-text variant="h4-bold">API компонента</pz-text>
|
|
12
|
+
<div style="margin-top: var(--pz-space-16);">
|
|
13
|
+
<pz-textarea
|
|
14
|
+
v-model="value"
|
|
15
|
+
:name="args.name"
|
|
16
|
+
:label="args.label"
|
|
17
|
+
:placeholder="args.placeholder"
|
|
18
|
+
:error-message="args.errorMessage"
|
|
19
|
+
:counted="args.counted"
|
|
20
|
+
:max-size="args.maxSize"
|
|
21
|
+
:required="args.required"
|
|
22
|
+
:disabled="args.disabled"
|
|
23
|
+
:editable="args.editable"
|
|
24
|
+
:rows="args.rows"
|
|
25
|
+
/>
|
|
26
|
+
</div>
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
<section>
|
|
30
|
+
<pz-text variant="h4-bold">Two-way binding</pz-text>
|
|
31
|
+
<div style="display: flex; flex-direction: column; gap: var(--pz-space-8); margin-top: var(--pz-space-16);">
|
|
32
|
+
<pz-textarea v-model="sharedValue" name="textarea-two-way-a" label="Поле A" placeholder="Введiть коментар..." :rows="5" />
|
|
33
|
+
<pz-textarea v-model="sharedValue" name="textarea-two-way-b" label="Поле B (те саме значення)" placeholder="Введiть коментар..." :rows="5" />
|
|
34
|
+
<pz-text variant="body-regular">Поточне значення: "{{ sharedValue }}"</pz-text>
|
|
35
|
+
</div>
|
|
36
|
+
</section>
|
|
37
|
+
|
|
38
|
+
<section style="display: flex; flex-direction: column; gap: var(--pz-space-16);">
|
|
39
|
+
<pz-text variant="h4-bold">Стани</pz-text>
|
|
40
|
+
<pz-textarea v-model="defaultValue" name="textarea-default" label="Звичайне поле" placeholder="Введiть коментар..." :rows="5" />
|
|
41
|
+
<pz-textarea v-model="requiredValue" name="textarea-required" label="Обов'язкове поле" placeholder="Опишiть потребу..." required :rows="5" />
|
|
42
|
+
<pz-textarea v-model="countedValue" name="textarea-counted" label="З лiчильником" placeholder="Додайте короткий опис..." counted :max-size="180" :rows="5" />
|
|
43
|
+
<pz-textarea v-model="errorValue" name="textarea-error" label="Помилка валідації" placeholder="Введiть коментар..." error-message="Поле заповнено некоректно" :rows="5" />
|
|
44
|
+
<pz-textarea model-value="" name="textarea-disabled" label="Недоступне поле" placeholder="Недоступно" disabled :rows="5" />
|
|
45
|
+
<pz-textarea v-model="previewValue" name="textarea-preview" label="Display-only режим" :editable="false" />
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
<section>
|
|
49
|
+
<pz-text variant="h4-bold">Патерн використання у формi</pz-text>
|
|
50
|
+
<div style="display: flex; flex-direction: column; gap: var(--pz-space-8); margin-top: var(--pz-space-16);">
|
|
51
|
+
<pz-text variant="body-regular">Поле нижче добре пiдходить для пояснення деталей, коментаря або контексту звернення.</pz-text>
|
|
52
|
+
<pz-textarea
|
|
53
|
+
v-model="patternValue"
|
|
54
|
+
name="textarea-pattern"
|
|
55
|
+
label="Коментар до заявки"
|
|
56
|
+
placeholder="Опишiть важливi деталi..."
|
|
57
|
+
counted
|
|
58
|
+
:max-size="500"
|
|
59
|
+
required
|
|
60
|
+
:rows="6"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
</section>
|
|
64
|
+
</div>
|
|
65
|
+
`})},p={parameters:{docs:{description:{story:"Iнтерактивний приклад `PzTextarea` з двостороннiм зв'язком, базовими станами та display-only представленням через `editable=false`."}}}};var y,h,w;p.parameters={...p.parameters,docs:{...(y=p.parameters)==null?void 0:y.docs,source:{originalSource:`{
|
|
66
|
+
parameters: {
|
|
67
|
+
docs: {
|
|
68
|
+
description: {
|
|
69
|
+
story: "Iнтерактивний приклад \`PzTextarea\` з двостороннiм зв'язком, базовими станами та display-only представленням через \`editable=false\`."
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}`,...(w=(h=p.parameters)==null?void 0:h.docs)==null?void 0:w.source}}};const H=["Playground"];export{p as Playground,H as __namedExportsOrder,U as default};
|
package/dist/app/assets/{PzValidatorXSS.stories-HZEissEy.js → PzValidatorXSS.stories-B7ussB1u.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as c,g as z}from"./iframe-
|
|
1
|
+
import{r as c,g as z}from"./iframe-DbWuH5mz.js";import{P as u}from"./PzText-LkAZaPCW.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";class s{static validQuery(t){const i={};return Object.keys(t).forEach(e=>{const a=t[e];Array.isArray(a)?i[e]=a.map(n=>s.validString(n)):i[e]=s.validString(a)}),i}static validString(t){return t==null?"":String(t).replace(/<[^>]*>/gim,"").trim()}}const m=o=>`<script setup lang="ts">
|
|
2
2
|
import { PzValidatorXSS } from "@prozorro/prozorro-ui";
|
|
3
3
|
|
|
4
4
|
const input = "${o.testInput}";
|
|
@@ -16,7 +16,7 @@ const sanitizedQuery = PzValidatorXSS.validQuery(queryParams);
|
|
|
16
16
|
<p>Sanitized string: {{ sanitizedInput }}</p>
|
|
17
17
|
<pre>Sanitized query: {{ JSON.stringify(sanitizedQuery, null, 2) }}</pre>
|
|
18
18
|
</div>
|
|
19
|
-
</template>`,y=[{name:"validString",signature:"PzValidatorXSS.validString(str: string | number): string",description:"Removes HTML tags from a string and trims whitespace. Handles numbers by converting them to strings.",params:"`str`: Input value to sanitize.",example:'PzValidatorXSS.validString("<p>Hello world</p>") // "Hello world"'},{name:"validQuery",signature:"PzValidatorXSS.validQuery(query: PzValidatorXSSQuery): PzValidatorXSSQuery",description:"Deep sanitization for an object (e.g. router query). Recursively cleans arrays and string values.",params:"`query`: Object with string or string array values.",example:"PzValidatorXSS.validQuery({ q: '<u>search</u>', ids: ['<i>1</i>', '2'] })"}],
|
|
19
|
+
</template>`,y=[{name:"validString",signature:"PzValidatorXSS.validString(str: string | number): string",description:"Removes HTML tags from a string and trims whitespace. Handles numbers by converting them to strings.",params:"`str`: Input value to sanitize.",example:'PzValidatorXSS.validString("<p>Hello world</p>") // "Hello world"'},{name:"validQuery",signature:"PzValidatorXSS.validQuery(query: PzValidatorXSSQuery): PzValidatorXSSQuery",description:"Deep sanitization for an object (e.g. router query). Recursively cleans arrays and string values.",params:"`query`: Object with string or string array values.",example:"PzValidatorXSS.validQuery({ q: '<u>search</u>', ids: ['<i>1</i>', '2'] })"}],_={title:"Utilities/PzValidatorXSS",component:s,parameters:{layout:"fullscreen",docs:{description:{component:"Utility class for sanitizing inputs and preventing XSS by removing HTML tags from strings and query objects."}}},argTypes:{testInput:{control:"text",description:"Live test input with HTML tags."}}},r={args:{testInput:"<b>Hello</b> <script>alert('XSS')<\/script> <i>World!</i>"},render:o=>({components:{pzText:u},setup(){const t=c(o.testInput),i=z(()=>s.validString(t.value)),e={keyword:"<b>Prozorro</b>",tags:["<i>Active</i>","<u>Closed</u>"],page:"1"},a=s.validQuery(e);return{input:t,sanitized:i,queryInput:e,sanitizedQuery:a,methodDocs:y}},template:`
|
|
20
20
|
<div class="pz-validator-xss-story">
|
|
21
21
|
<header class="pz-validator-xss-story__header">
|
|
22
22
|
<pzText weight="bold" size="large" tag="h1" class="pz-validator-xss-story__title">PzValidatorXSS Utility</pzText>
|
|
@@ -160,4 +160,4 @@ const sanitizedQuery = PzValidatorXSS.validQuery(queryParams);
|
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
|
-
}`,...(p=(d=r.parameters)==null?void 0:d.docs)==null?void 0:p.source}}};const
|
|
163
|
+
}`,...(p=(d=r.parameters)==null?void 0:d.docs)==null?void 0:p.source}}};const h=["Documentation"];export{r as Documentation,h as __namedExportsOrder,_ as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.spacing-foundation{display:grid}.spacing-foundation-board{display:grid;gap:30px;padding:clamp(28px,3vw,42px);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 82%,transparent);border-radius:32px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 30%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)));box-shadow:0 24px 80px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.spacing-foundation-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:20px}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section,.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 70%,transparent);border-radius:28px;background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 18px 52px color-mix(in srgb,var(--pz-color-black-90) 6%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section{padding:clamp(22px,2vw,30px)}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section-heading,.spacing-foundation-group-head,.spacing-foundation-token-head{display:grid;gap:8px}.spacing-foundation-kicker,.spacing-foundation-chip{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.spacing-foundation-section{display:grid;gap:18px}.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{display:grid;gap:16px}.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{grid-template-columns:repeat(3,minmax(0,1fr))}.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{display:grid;gap:18px;padding:20px}.spacing-foundation-ruler{display:flex;align-items:center;min-height:38px}.spacing-foundation-ruler-bar{display:inline-flex;height:12px;min-width:2px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 90%,var(--pz-color-white)),color-mix(in srgb,var(--pz-color-blue-60) 90%,var(--pz-color-white)))}.spacing-foundation-token-meta{display:grid;gap:6px}.spacing-foundation-token-meta code,.spacing-foundation-cell-code code{color:var(--pz-color-text-primary);font-size:13px;line-height:1.6}.spacing-foundation-table{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:22px;overflow:hidden;background:var(--pz-color-white)}.spacing-foundation-head,.spacing-foundation-cell{padding:16px 18px}.spacing-foundation-head{background:color-mix(in srgb,var(--pz-color-grey-20) 88%,transparent);color:var(--pz-color-text-primary);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.spacing-foundation-cell{display:flex;align-items:center;border-top:1px solid color-mix(in srgb,var(--pz-color-grey-30) 56%,transparent)}.spacing-foundation-preview-surface,.spacing-foundation-preview-stack,.spacing-foundation-preview-shell{border:1px dashed color-mix(in srgb,var(--pz-color-blue-50) 30%,transparent);border-radius:22px;background:color-mix(in srgb,var(--pz-color-blue-10) 86%,var(--pz-color-white))}.spacing-foundation-preview-fill,.spacing-foundation-preview-float{display:grid;gap:6px;border-radius:18px;background:color-mix(in srgb,var(--pz-color-white) 98%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent)}.spacing-foundation-preview-fill{padding:16px}.spacing-foundation-preview-shell{display:flex}.spacing-foundation-preview-float{max-width:220px}@media (width <= 1200px){.spacing-foundation-hero,.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{grid-template-columns:1fr}}@media (width <= 1024px){.spacing-foundation-table{grid-template-columns:1fr}.spacing-foundation-head{display:none}.spacing-foundation-cell{border-top:none}}@media (width <= 640px){.spacing-foundation-board,.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section,.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{padding:18px;border-radius:22px}}
|
|
1
|
+
.spacing-foundation{display:grid}.spacing-foundation-board{display:grid;gap:30px;padding:clamp(28px,3vw,42px);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 82%,transparent);border-radius:32px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 30%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)));box-shadow:0 24px 80px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.spacing-foundation-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:20px}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section,.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 70%,transparent);border-radius:28px;background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 18px 52px color-mix(in srgb,var(--pz-color-black-90) 6%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent)}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section{padding:clamp(22px,2vw,30px)}.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section-heading,.spacing-foundation-group-head,.spacing-foundation-token-head{display:grid;gap:8px}.spacing-foundation-kicker,.spacing-foundation-chip{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.spacing-foundation-section{display:grid;gap:18px}.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{display:grid;gap:16px}.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{grid-template-columns:repeat(3,minmax(0,1fr))}.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{display:grid;gap:18px;padding:20px}.spacing-foundation-ruler{display:flex;align-items:center;min-height:38px}.spacing-foundation-ruler-bar{display:inline-flex;height:12px;min-width:2px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 90%,var(--pz-color-white)),color-mix(in srgb,var(--pz-color-blue-60) 90%,var(--pz-color-white)))}.spacing-foundation-token-meta{display:grid;gap:6px}.spacing-foundation-token-meta code,.spacing-foundation-cell-code code{color:var(--pz-color-text-primary);font-size:13px;line-height:1.6}.spacing-foundation-code{margin:0;padding:20px;overflow:auto;border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 70%,transparent);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 96%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)))}.spacing-foundation-code code{color:var(--pz-color-text-primary);font-size:13px;line-height:1.6}.spacing-foundation-bp-table{display:grid;grid-template-columns:minmax(220px,300px) minmax(100px,140px) minmax(0,1fr);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:22px;overflow:hidden;background:var(--pz-color-white)}.spacing-foundation-table{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:22px;overflow:hidden;background:var(--pz-color-white)}.spacing-foundation-head,.spacing-foundation-cell{padding:16px 18px}.spacing-foundation-head{background:color-mix(in srgb,var(--pz-color-grey-20) 88%,transparent);color:var(--pz-color-text-primary);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.spacing-foundation-cell{display:flex;align-items:center;border-top:1px solid color-mix(in srgb,var(--pz-color-grey-30) 56%,transparent)}.spacing-foundation-preview-surface,.spacing-foundation-preview-stack,.spacing-foundation-preview-shell{border:1px dashed color-mix(in srgb,var(--pz-color-blue-50) 30%,transparent);border-radius:22px;background:color-mix(in srgb,var(--pz-color-blue-10) 86%,var(--pz-color-white))}.spacing-foundation-preview-fill,.spacing-foundation-preview-float{display:grid;gap:6px;border-radius:18px;background:color-mix(in srgb,var(--pz-color-white) 98%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent)}.spacing-foundation-preview-fill{padding:16px}.spacing-foundation-preview-shell{display:flex}.spacing-foundation-preview-float{max-width:220px}@media (width <= 1200px){.spacing-foundation-hero,.spacing-foundation-token-grid,.spacing-foundation-groups,.spacing-foundation-preview{grid-template-columns:1fr}}@media (width <= 1024px){.spacing-foundation-table,.spacing-foundation-bp-table{grid-template-columns:1fr}.spacing-foundation-head{display:none}.spacing-foundation-cell{border-top:none}}@media (width <= 640px){.spacing-foundation-board,.spacing-foundation-hero-copy,.spacing-foundation-hero-note,.spacing-foundation-section,.spacing-foundation-token-card,.spacing-foundation-group-card,.spacing-foundation-preview-card{padding:18px;border-radius:22px}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{P as n}from"./PzText-
|
|
1
|
+
import{P as n}from"./PzText-LkAZaPCW.js";import"./iframe-DbWuH5mz.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const p=[{token:"4",value:"4px",variable:"--pz-space-4",utility:"pz-m-4 / pz-p-4",note:"Gap between a title and its supporting text."},{token:"8",value:"8px",variable:"--pz-space-8",utility:"pz-m-8 / pz-p-8",note:"Gap between dependent text rows."},{token:"16",value:"16px",variable:"--pz-space-16",utility:"pz-m-16 / pz-p-16",note:"Spacing for title blocks, table content, and link groups."},{token:"20",value:"20px",variable:"--pz-space-20",utility:"pz-m-20 / pz-p-20",note:"Gap between equal elements."},{token:"24",value:"24px",variable:"--pz-space-24",utility:"pz-m-24 / pz-p-24",note:"Spacing for docs, dividers, and tab padding."},{token:"32",value:"32px",variable:"--pz-space-32",utility:"pz-m-32 / pz-p-32",note:"Inset from content to nested background edges."},{token:"40",value:"40px",variable:"--pz-space-40",utility:"pz-m-40 / pz-p-40",note:"Large inset inside nested content areas."},{token:"44",value:"44px",variable:"--pz-space-44",utility:"pz-m-44 / pz-p-44",note:"Gap between a header and content in cabinet layouts."},{token:"60",value:"60px",variable:"--pz-space-60",utility:"pz-m-60 / pz-p-60",note:"Gap between equal large blocks."}],s=[{title:"Margin utilities",note:"Outer spacing",items:[{name:".pz-m-*",description:"Margin on all sides."},{name:".pz-mt-* / .pz-mr-* / .pz-mb-* / .pz-ml-*",description:"Single-side margin utilities."},{name:".pz-mx-* / .pz-my-*",description:"Inline and block axis margin utilities."},{name:".pz-m-auto / .pz-mx-auto / .pz-my-auto",description:"Auto alignment helpers."}]},{title:"Padding utilities",note:"Inner spacing",items:[{name:".pz-p-*",description:"Padding on all sides."},{name:".pz-pt-* / .pz-pr-* / .pz-pb-* / .pz-pl-*",description:"Single-side padding utilities."},{name:".pz-px-* / .pz-py-*",description:"Inline and block axis padding utilities."}]}],o=[{name:"sm",prefix:".pz-{prop}-sm-{value}",minWidth:"≥ 576px",description:"Small viewports and up."},{name:"md",prefix:".pz-{prop}-md-{value}",minWidth:"≥ 768px",description:"Tablet breakpoint and up."},{name:"lg",prefix:".pz-{prop}-lg-{value}",minWidth:"≥ 1024px",description:"Large viewports and up."},{name:"xl",prefix:".pz-{prop}-xl-{value}",minWidth:"≥ 1200px",description:"Desktop breakpoint and up."},{name:"xxl",prefix:".pz-{prop}-xxl-{value}",minWidth:"≥ 1400px",description:"Wide displays and up."}],u={title:"Foundation/Spacing",parameters:{prototype:{caption:"Spacing scale",note:"Spacing token and utility reference for margin and padding helpers."},docs:{description:{component:"Spacing foundation for `@prozorro/prozorro-ui`. The utility module emits `pz-m-*` and `pz-p-*` classes backed by the shared `--pz-space-*` token scale aligned with the visible Figma spacing board."}}},render:()=>({components:{pzText:n},setup(){return{spacingTokens:p,utilityGroups:s,spacingBreakpoints:o}},template:`
|
|
2
2
|
<div class="spacing-foundation">
|
|
3
3
|
<section class="spacing-foundation-board">
|
|
4
4
|
<header class="spacing-foundation-hero">
|
|
@@ -81,6 +81,33 @@ import{P as n}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./p
|
|
|
81
81
|
</div>
|
|
82
82
|
</section>
|
|
83
83
|
|
|
84
|
+
<section class="spacing-foundation-section">
|
|
85
|
+
<div class="spacing-foundation-section-heading">
|
|
86
|
+
<pz-text variant="h4-bold">Responsive utilities</pz-text>
|
|
87
|
+
<pz-text variant="small-regular">
|
|
88
|
+
Breakpoint-prefixed overrides follow the same mobile-first model as the grid. Classes apply at the given minimum width and cascade upward.
|
|
89
|
+
</pz-text>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<pre class="spacing-foundation-code"><code><!-- base spacing, then override at lg and xxl -->
|
|
93
|
+
<div class="pz-p-16 pz-p-lg-24 pz-p-xxl-32">...</div>
|
|
94
|
+
|
|
95
|
+
<!-- tighter margin on mobile, looser on desktop -->
|
|
96
|
+
<div class="pz-mb-8 pz-mb-md-16 pz-mb-xl-24">...</div></code></pre>
|
|
97
|
+
|
|
98
|
+
<div class="spacing-foundation-bp-table">
|
|
99
|
+
<div class="spacing-foundation-head">Prefix pattern</div>
|
|
100
|
+
<div class="spacing-foundation-head">Min-width</div>
|
|
101
|
+
<div class="spacing-foundation-head">Description</div>
|
|
102
|
+
|
|
103
|
+
<template v-for="bp in spacingBreakpoints" :key="bp.name">
|
|
104
|
+
<div class="spacing-foundation-cell spacing-foundation-cell-code"><code>{{ bp.prefix }}</code></div>
|
|
105
|
+
<div class="spacing-foundation-cell"><pz-text variant="small-bold">{{ bp.minWidth }}</pz-text></div>
|
|
106
|
+
<div class="spacing-foundation-cell"><pz-text variant="body-regular">{{ bp.description }}</pz-text></div>
|
|
107
|
+
</template>
|
|
108
|
+
</div>
|
|
109
|
+
</section>
|
|
110
|
+
|
|
84
111
|
<section class="spacing-foundation-section">
|
|
85
112
|
<div class="spacing-foundation-section-heading">
|
|
86
113
|
<pz-text variant="h4-bold">Live preview</pz-text>
|
|
@@ -124,4 +151,4 @@ import{P as n}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./p
|
|
|
124
151
|
</div>
|
|
125
152
|
`})},e={name:"Reference"};var i,a,t;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`{
|
|
126
153
|
name: "Reference"
|
|
127
|
-
}`,...(t=(a=e.parameters)==null?void 0:a.docs)==null?void 0:t.source}}};const
|
|
154
|
+
}`,...(t=(a=e.parameters)==null?void 0:a.docs)==null?void 0:t.source}}};const v=["Reference"];export{e as Reference,v as __namedExportsOrder,u as default};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import{P as p}from"./PzText-LkAZaPCW.js";import"./iframe-DbWuH5mz.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const a=[{variant:"h1-bold",label:"Headline Bold 1",spec:"44px / 700 / 1.5"},{variant:"h1-regular",label:"Headline Regular 1",spec:"44px / 400 / 1.5"},{variant:"h2-bold",label:"Headline Bold 2",spec:"32px / 700 / 1.5"},{variant:"h3-bold",label:"Headline Bold 3",spec:"24px / 700 / 1.5"},{variant:"h3-regular",label:"Headline Regular 3",spec:"24px / 400 / 1.5"},{variant:"h4-regular",label:"Headline Regular 4",spec:"18px / 400 / 1.5"},{variant:"h4-semibold",label:"Headline Semibold 4",spec:"18px / 600 / 1.5"},{variant:"h4-bold",label:"Headline Bold 4",spec:"18px / 700 / 1.5"},{variant:"subtitle",label:"Subtitle",spec:"16px / 600 / 1.5"},{variant:"body-regular",label:"Body text regular",spec:"14px / 400 / 1.5"},{variant:"body-semibold",label:"Body text semibold",spec:"14px / 600 / 1.5"},{variant:"body-bold",label:"Body text bold",spec:"14px / 700 / 1.5"},{variant:"capitalized",label:"Capitalized text",spec:"14px / 400 / uppercase"},{variant:"hint",label:"Hint text",spec:"14px / 400 / muted"},{variant:"line-through",label:"Archived value",spec:"14px / 400 / strike"},{variant:"small-regular",label:"Small text regular",spec:"12px / 400 / 1.5"},{variant:"small-semibold",label:"Small text semibold",spec:"12px / 600 / 1.5"},{variant:"small-bold",label:"Small text bold",spec:"12px / 700 / 1.5"},{variant:"link",label:"Review procurement details",spec:"14px / 400 / underline"},{variant:"document",label:"Document text",spec:"14px / 400 / default"}],t=8,r=15,n=[{title:"Headlines",description:"Primary hierarchy for pages, sections and table headers.",items:a.slice(0,t)},{title:"Reading text",description:"Core editorial styles for descriptions, summaries and UI copy.",items:a.slice(t,r)},{title:"Utility styles",description:"Compact text styles for metadata, helpers and document references.",items:a.slice(r)}],x={title:"Foundation/Typography",parameters:{prototype:{caption:"Typography reference",note:"Foundation board for validating hierarchy, weight, and text semantics against the shared design-system scale."},docs:{description:{component:"Typography foundation reference. Use this page to review the full type scale and variant grouping; use `Components/Text/PzText` for the component API."}}},args:{variant:"body-regular",content:"Every procurement notice should stay readable across dense interfaces and long-form content."},render:o=>({components:{pzText:p},setup(){return{args:o,typographyReferenceGroups:n}},template:`
|
|
2
|
+
<div class="pz-text-board">
|
|
3
|
+
<section class="pz-text-board-hero">
|
|
4
|
+
<div class="pz-text-board-hero-copy">
|
|
5
|
+
<span class="pz-text-board-eyebrow">Design system / Typography</span>
|
|
6
|
+
<h1 class="pz-text-board-title">Readable hierarchy for procurement interfaces</h1>
|
|
7
|
+
<p class="pz-text-board-description">
|
|
8
|
+
The board below mirrors a Figma-style specimen page: one live editable preview, followed by grouped text tokens with their size and weight metadata.
|
|
9
|
+
</p>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<div class="pz-text-board-hero-preview">
|
|
13
|
+
<span class="pz-text-board-chip">Interactive sample</span>
|
|
14
|
+
<pz-text :variant="args.variant" :as="args.as">{{ args.content }}</pz-text>
|
|
15
|
+
</div>
|
|
16
|
+
</section>
|
|
17
|
+
|
|
18
|
+
<section
|
|
19
|
+
v-for="group in typographyReferenceGroups"
|
|
20
|
+
:key="group.title"
|
|
21
|
+
class="pz-text-board-group"
|
|
22
|
+
>
|
|
23
|
+
<header class="pz-text-board-group-header">
|
|
24
|
+
<div>
|
|
25
|
+
<span class="pz-text-board-group-kicker">{{ group.title }}</span>
|
|
26
|
+
<h2 class="pz-text-board-group-title">{{ group.description }}</h2>
|
|
27
|
+
</div>
|
|
28
|
+
</header>
|
|
29
|
+
|
|
30
|
+
<div class="pz-text-board-grid">
|
|
31
|
+
<article
|
|
32
|
+
v-for="sample in group.items"
|
|
33
|
+
:key="sample.variant"
|
|
34
|
+
class="pz-text-board-card"
|
|
35
|
+
>
|
|
36
|
+
<div class="pz-text-board-meta">
|
|
37
|
+
<span class="pz-text-board-variant">{{ sample.variant }}</span>
|
|
38
|
+
<span class="pz-text-board-spec">{{ sample.spec }}</span>
|
|
39
|
+
</div>
|
|
40
|
+
<pz-text :variant="sample.variant">{{ sample.label }}</pz-text>
|
|
41
|
+
</article>
|
|
42
|
+
</div>
|
|
43
|
+
</section>
|
|
44
|
+
</div>
|
|
45
|
+
`})},e={name:"Reference"};var s,l,i;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`{
|
|
46
|
+
name: "Reference"
|
|
47
|
+
}`,...(i=(l=e.parameters)==null?void 0:l.docs)==null?void 0:i.source}}};const u=["Reference"];export{e as Reference,u as __namedExportsOrder,x as default};
|