@prozorro/prozorro-ui 0.0.8 → 0.0.9-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 +1 -0
- package/dist/app/assets/{Colors.stories-B6EPF0nC.js → Colors.stories-7e9Kvci_.js} +1 -1
- package/dist/app/assets/{DocsRenderer-LL677BLK-6m2x0Slf.js → DocsRenderer-LL677BLK-Bjj1XNYP.js} +24 -24
- package/dist/app/assets/{Grid.stories-DCpTvq1h.js → Grid.stories-CDiFrqKQ.js} +1 -1
- package/dist/app/assets/PzAccordion-ChXTPL78.css +1 -0
- package/dist/app/assets/PzAccordion-DTiV4JOM.js +1 -0
- package/dist/app/assets/PzAccordion-hujlMYpG.css +1 -0
- package/dist/app/assets/PzAccordion.stories-DxsYsHwE.js +322 -0
- package/dist/app/assets/PzAccordionTable-CsabBugL.css +1 -0
- package/dist/app/assets/PzAccordionTable.stories-DNbpjx54.js +275 -0
- package/dist/app/assets/{PzArrayClamp.stories-DYjTyM_w.js → PzArrayClamp.stories-BYdoVxPw.js} +3 -3
- package/dist/app/assets/{PzBreadcrumb.stories-b4V3GARM.js → PzBreadcrumb.stories-DwATLRI2.js} +3 -3
- package/dist/app/assets/{PzBtn-Brjbpw1b.js → PzBtn-B24JwTDl.js} +1 -1
- package/dist/app/assets/{PzBtn.stories-Bu5qPhtp.js → PzBtn.stories-BRV1I_nf.js} +1 -1
- package/dist/app/assets/{PzDomHandler.stories-DqW3Mfem.js → PzDomHandler.stories-C0SwIaVU.js} +1 -1
- package/dist/app/assets/{PzDropdown.stories-CPjzWBvH.js → PzDropdown.stories-gi6eGhLV.js} +2 -2
- package/dist/app/assets/{PzGrid.stories-C1Y3nz5O.js → PzGrid.stories-v8QLnTB3.js} +1 -1
- package/dist/app/assets/{PzHint-BwKGDkUu.js → PzHint-D62JWyEp.js} +1 -1
- package/dist/app/assets/{PzHint.stories-B6l3Ocr8.js → PzHint.stories-YkWa41IH.js} +1 -1
- package/dist/app/assets/{PzIcon-Don8TXO3.js → PzIcon-Drlqf9PC.js} +1 -1
- package/dist/app/assets/{PzIcon.stories-DE4e2be_.js → PzIcon.stories-DAJBWawA.js} +1 -1
- package/dist/app/assets/{PzImage.stories-DoGwhzIO.js → PzImage.stories-CuPnUuRv.js} +1 -1
- package/dist/app/assets/PzInfoBlockLayout-5bxpq9bJ.css +1 -0
- package/dist/app/assets/PzInfoBlockLayout.stories-Bv_9N16u.js +248 -0
- package/dist/app/assets/PzInfoHint-DUCe-kk0.js +1 -0
- package/dist/app/assets/{PzInfoHint-CtK7BZOs.css → PzInfoHint-Da02XLY2.css} +1 -1
- package/dist/app/assets/PzInfoHint-SKNZ9Qnk.css +1 -0
- package/dist/app/assets/PzInfoHint.stories-8e7rIcBj.js +38 -0
- package/dist/app/assets/PzLink-BU7dMeUw.js +1 -0
- package/dist/app/assets/{PzLink.stories-D1DLILnY.js → PzLink.stories-RRRT37UH.js} +3 -3
- package/dist/app/assets/{PzModal.stories-GJIUTcxR.js → PzModal.stories-j0FW0OcM.js} +3 -3
- package/dist/app/assets/{PzNav.stories-vqArvp6y.js → PzNav.stories-BPTRR62X.js} +3 -3
- package/dist/app/assets/{PzPagination.stories-D-kZtPzf.js → PzPagination.stories-CFaLbyxd.js} +2 -2
- package/dist/app/assets/{PzRouterLink.stories-CRcNmODE.js → PzRouterLink.stories-BcMmoayC.js} +2 -2
- package/dist/app/assets/{PzScrollTo.stories-C0m8oG4O.js → PzScrollTo.stories-Gvacxovn.js} +1 -1
- package/dist/app/assets/PzSearchResultItemLayout-DtvZAeWW.css +1 -0
- package/dist/app/assets/PzSearchResultItemLayout.stories-B0EKt_OP.js +112 -0
- package/dist/app/assets/PzSkeleton-0INQyyC6.css +1 -0
- package/dist/app/assets/PzSkeleton-CYVQJkRt.css +1 -0
- package/dist/app/assets/PzSkeleton-DnpztBv3.js +1 -0
- package/dist/app/assets/PzSkeleton.stories-a9NDBt3Z.js +39 -0
- package/dist/app/assets/{PzStatus-DlvKjmG7.css → PzStatus-B_H5z0YP.css} +1 -1
- package/dist/app/assets/PzStatus-KfVGXJ4A.css +1 -0
- package/dist/app/assets/PzStatus-dVlplKB_.js +1 -0
- package/dist/app/assets/{PzStatus.stories-u5QAVco_.js → PzStatus.stories-Dzj8SM95.js} +4 -4
- package/dist/app/assets/PzTable-B73TyHoC.css +1 -0
- package/dist/app/assets/PzTable-BNMYmoRd.css +1 -0
- package/dist/app/assets/PzTable-BipugQuF.js +27 -0
- package/dist/app/assets/PzTable.stories-DcKqkFYa.js +353 -0
- package/dist/app/assets/{PzTabs.stories-CEoVVF4Z.js → PzTabs.stories-BqU667nR.js} +3 -3
- package/dist/app/assets/{PzTag-rwtmuhv6.css → PzTag-C_iRJRZc.css} +1 -1
- package/dist/app/assets/PzTag-Jn6TGUtg.css +1 -0
- package/dist/app/assets/PzTag-jiAX5zAj.js +1 -0
- package/dist/app/assets/{PzTag.stories-B2WKURWu.js → PzTag.stories-bK1-c1pG.js} +6 -6
- package/dist/app/assets/{PzText-LfRr6NF7.js → PzText-Qtpayc5y.js} +1 -1
- package/dist/app/assets/{PzText.stories-CJhqWJtS.js → PzText.stories-9Hrvi7P7.js} +1 -1
- package/dist/app/assets/{PzTextClamp.stories-B-2pPs9u.js → PzTextClamp.stories--mMfXCQg.js} +2 -2
- package/dist/app/assets/{PzValidatorXSS.stories-DqA_mla7.js → PzValidatorXSS.stories-HZEissEy.js} +1 -1
- package/dist/app/assets/{Spacing.stories-55zVSJ08.js → Spacing.stories-Cu5R7R8t.js} +1 -1
- package/dist/app/assets/{Typography.stories-DEgPTqUk.js → Typography.stories-j9AXuH47.js} +1 -1
- package/dist/app/assets/WithTooltip-65CFNBJE-BcToq9Uh.js +9 -0
- package/dist/app/assets/_commonjsHelpers-Cpj98o6Y.js +1 -0
- package/dist/app/assets/configs-DshpCAYO.js +1 -0
- package/dist/app/assets/{floating-vue-ydzBnlRK.js → floating-vue-BD2YJLen.js} +1 -1
- package/dist/app/assets/formatter-EIJCOSYU-X1jNy3Wo.js +1 -0
- package/dist/app/assets/{iframe-XnrfGA2g.js → iframe-B7Bddli1.js} +93 -93
- package/dist/app/assets/syntaxhighlighter-OH4MV7E3-DpHT8arc.js +6 -0
- package/dist/app/iframe.html +1 -1
- package/dist/app/index.json +1 -1
- package/dist/app/project.json +1 -1
- package/dist/components/PzAccordion/PzAccordion.vue.d.ts +33 -0
- package/dist/components/PzAccordion/PzAccordionContent.vue.d.ts +21 -0
- package/dist/components/PzAccordion/configs.d.ts +4 -0
- package/dist/components/PzAccordion/index.d.ts +3 -0
- package/dist/components/PzAccordion/types.d.ts +21 -0
- package/dist/components/PzAccordionTable/PzAccordionTable.vue.d.ts +43 -0
- package/dist/components/PzAccordionTable/constants.d.ts +4 -0
- package/dist/components/PzAccordionTable/index.d.ts +2 -0
- package/dist/components/PzAccordionTable/types.d.ts +28 -0
- package/dist/components/PzGrid/PzGrid.vue.d.ts +1 -1
- package/dist/components/PzGrid/PzGridItem.vue.d.ts +1 -1
- package/dist/components/PzHint/PzHint.vue.d.ts +2 -2
- package/dist/components/PzImage/PzImage.vue.d.ts +1 -1
- package/dist/components/PzInfoBlockLayout/PzInfoBlockLayout.vue.d.ts +24 -0
- package/dist/components/PzInfoBlockLayout/index.d.ts +2 -0
- package/dist/components/PzInfoBlockLayout/types.d.ts +6 -0
- package/dist/components/PzInfoHint/PzInfoHint.vue.d.ts +1 -1
- package/dist/components/PzLink/PzLink.vue.d.ts +1 -1
- package/dist/components/PzModal/PzModal.vue.d.ts +1 -1
- package/dist/components/PzRouterLink/PzRouterLink.vue.d.ts +1 -1
- package/dist/components/PzSearchResultItemLayout/PzSearchResultItemLayout.vue.d.ts +21 -0
- package/dist/components/PzSearchResultItemLayout/index.d.ts +2 -0
- package/dist/components/PzSearchResultItemLayout/types.d.ts +4 -0
- package/dist/components/PzSkeleton/PzSkeleton.vue.d.ts +8 -0
- package/dist/components/PzSkeleton/index.d.ts +2 -0
- package/dist/components/PzSkeleton/types.d.ts +6 -0
- package/dist/components/PzStatus/configs.d.ts +1 -1
- package/dist/components/PzTable/PzTable.vue.d.ts +24 -0
- package/dist/components/PzTable/PzTableData.vue.d.ts +25 -0
- package/dist/components/PzTable/PzTableHead.vue.d.ts +3 -0
- package/dist/components/PzTable/constants.d.ts +1 -0
- package/dist/components/PzTable/index.d.ts +4 -0
- package/dist/components/PzTable/types.d.ts +35 -0
- package/dist/index.d.ts +6 -0
- package/dist/package.json +7 -2
- package/dist/prozorro-ui.cjs +27 -1
- package/dist/prozorro-ui.js +6642 -1883
- package/dist/style.css +1 -1
- package/package.json +7 -2
- package/dist/app/assets/Color-FRDS63T2-C5bQ2Iuy.js +0 -1
- package/dist/app/assets/PzInfoHint.stories-CWDV-k9d.js +0 -38
- package/dist/app/assets/PzLink-BkfNrG4H.js +0 -1
- package/dist/app/assets/WithTooltip-65CFNBJE-D3ytr0gE.js +0 -9
- package/dist/app/assets/formatter-EIJCOSYU-Ca5EM9Pa.js +0 -1
- package/dist/app/assets/syntaxhighlighter-OH4MV7E3-meijqKce.js +0 -6
|
@@ -0,0 +1,353 @@
|
|
|
1
|
+
import{P as T}from"./PzLink-BU7dMeUw.js";import{P}from"./PzTag-jiAX5zAj.js";import{P as l}from"./PzText-Qtpayc5y.js";import{P as a,a as i}from"./PzTable-BipugQuF.js";import"./iframe-B7Bddli1.js";import"./preload-helper-C1FmrZbK.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./PzInfoHint-DUCe-kk0.js";import"./PzIcon-Drlqf9PC.js";import"./PzHint-D62JWyEp.js";import"./floating-vue-BD2YJLen.js";const S=[{id:"name",name:"Назва",key:"name",colWidth:22},{id:"classification",name:"Класифікатор та його відповідний код",key:"classification",colWidth:30},{id:"quantity",name:"Кількість/Одиниці виміру",key:"quantity",colWidth:14},{id:"deliveryLocation",name:"Місце поставки",key:"deliveryLocation",colWidth:18},{id:"deliveryDate",name:"Дата поставки",key:"deliveryDate",colWidth:16}],k=[{id:"item-1",name:"Швидкозшивач пласт. E31509, 31511",classification:"ДК 021:2015: 30190000-7 — Офісне устаткування та приладдя різне",quantity:"100 штука",deliveryLocation:"79025, Україна, Львівська область, Львів, вул.Левандівська, будинок 17-В",deliveryDate:"до 30 грудня 2026"},{id:"item-2",name:"Ручка масляна, 0,7мм, PT-195, Piano",classification:"ДК 021:2015: 30190000-7 — Офісне устаткування та приладдя різне",quantity:"150 штука",deliveryLocation:"79025, Україна, Львівська область, Львів, вул.Левандівська, будинок 17-В",deliveryDate:"до 30 грудня 2026"},{id:"item-3",name:"Папка А4 КОШЕНЯ 34,527,51см, верт. 2 ручки",classification:"ДК 021:2015: 30190000-7 — Офісне устаткування та приладдя різне",quantity:"30 штука",deliveryLocation:"79025, Україна, Львівська область, Львів, вул.Левандівська, будинок 17-В",deliveryDate:"до 30 грудня 2026"}],w=[{id:"name",name:"Назва",key:"name",colWidth:18},{id:"classification",name:"Класифікатор та його відповідний код",key:"classification",colWidth:24},{id:"quantity",name:"Кількість/Одиниці виміру",key:"quantity",colWidth:14},{id:"price",name:"Ціна за одиницю",key:"price",colWidth:14},{id:"deliveryLocation",name:"Місце поставки",key:"deliveryLocation",colWidth:18},{id:"deliveryDate",name:"Дата поставки",key:"deliveryDate",colWidth:12}],x=k.map(t=>({...t,price:null})),W=[{id:"event",name:"Подія",key:"event",colWidth:18},{id:"type",name:"Тип",key:"type",colWidth:18},{id:"reason",name:"Підстава",key:"reason",colWidth:18},{id:"period",name:"Період, (днів)",key:"period",colWidth:16},{id:"daysType",name:"Тип днів",key:"daysType",colWidth:15},{id:"amount",name:"Розмір, (%)",key:"amount",colWidth:15}],C=[{id:"payment-1",event:"Оплата",type:"Пiсляоплата",reason:"поставка товару",period:10,daysType:"робочі",amount:100},{id:"payment-2",event:"Поставка",type:"Одноразова поставка",reason:"подання заявки",period:10,daysType:"робочі",amount:100}],L=[{id:"supplier",name:"Постачальник",key:"supplier",colWidth:28},{id:"contractId",name:"Договір",key:"contractId",colWidth:20},{id:"amount",name:"Сума",key:"amount",colWidth:18},{id:"status",name:"Статус",key:"statusLabel",colWidth:18},{id:"updatedAt",name:"Оновлено",key:"updatedAt",colWidth:16}],D=[{id:"contract-01",supplier:{name:"ТОВ «Офіс-Постач»",href:"https://prozorro.gov.ua"},contractId:"UA-2026-04-17-000001",amount:128340.5,status:"active",statusLabel:"Активний",updatedAt:"17.04.2026"},{id:"contract-02",supplier:{name:"ФОП Іваненко Ірина",href:"https://prozorro.gov.ua"},contractId:"UA-2026-04-17-000002",amount:68400,status:"hidden",statusLabel:"Очікує підтвердження",updatedAt:"16.04.2026"}],A=`<template>
|
|
2
|
+
<PzTable
|
|
3
|
+
:config="config"
|
|
4
|
+
:data="data"
|
|
5
|
+
/>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script setup lang="ts">
|
|
9
|
+
import type { PzTableColumn, PzTableRow } from "@prozorro/prozorro-ui";
|
|
10
|
+
|
|
11
|
+
const config: PzTableColumn[] = [
|
|
12
|
+
{ id: "name", name: "Назва", key: "name", colWidth: 22 },
|
|
13
|
+
{ id: "classification", name: "Класифікатор та його відповідний код", key: "classification", colWidth: 30 },
|
|
14
|
+
{ id: "quantity", name: "Кількість/Одиниці виміру", key: "quantity", colWidth: 14 },
|
|
15
|
+
{ id: "deliveryLocation", name: "Місце поставки", key: "deliveryLocation", colWidth: 18 },
|
|
16
|
+
{ id: "deliveryDate", name: "Дата поставки", key: "deliveryDate", colWidth: 16 },
|
|
17
|
+
];
|
|
18
|
+
|
|
19
|
+
const data: PzTableRow[] = [
|
|
20
|
+
{
|
|
21
|
+
id: "item-1",
|
|
22
|
+
name: "Швидкозшивач пласт. E31509, 31511",
|
|
23
|
+
classification: "ДК 021:2015: 30190000-7 — Офісне устаткування та приладдя різне",
|
|
24
|
+
quantity: "100 штука",
|
|
25
|
+
deliveryLocation: "79025, Україна, Львівська область, Львів, вул.Левандівська, будинок 17-В",
|
|
26
|
+
deliveryDate: "до 30 грудня 2026",
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
<\/script>`,U=`<template>
|
|
30
|
+
<PzTable
|
|
31
|
+
:config="config"
|
|
32
|
+
:data="data"
|
|
33
|
+
>
|
|
34
|
+
<template #supplier="{ data }">
|
|
35
|
+
<PzLink :href="getSupplierHref(data.supplier)" bold>
|
|
36
|
+
{{ getSupplierName(data.supplier) }}
|
|
37
|
+
</PzLink>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<template #amount="{ value }">
|
|
41
|
+
{{ formatCurrency(value) }}
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<template #statusLabel="{ data }">
|
|
45
|
+
<PzTag :variant="getStatusVariant(data.status)">
|
|
46
|
+
{{ data.statusLabel }}
|
|
47
|
+
</PzTag>
|
|
48
|
+
</template>
|
|
49
|
+
</PzTable>
|
|
50
|
+
</template>`,O={title:"Components/Data/PzTable",component:a,parameters:{prototype:{caption:"PzTable",note:"Three-part table structure based on the original prototype, refined only where needed for tokens, docs, and Storybook examples."},docs:{description:{component:"Use `PzTable` for procurement-style tabular data. Configure columns through `config`, provide rows through `data`, and override cell rendering with named slots that match `column.key`."}}},args:{config:S,data:k,defaultValue:i,visibleHeader:!0,isBoldFirstColumn:!0},argTypes:{config:{control:!1,description:"Column configuration array. Use `name`, `key`, and optional `colWidth`, `mobileName`, `infoContent`, `slot`, and `isContentHtml`."},data:{control:!1,description:"Table rows resolved by `column.key`."},defaultValue:{control:"text",description:"Fallback content for empty cells."},visibleHeader:{control:"boolean",description:"Shows or hides the desktop header row."},isBoldFirstColumn:{control:"boolean",description:"Makes the first column semibold."}}},n={parameters:{docs:{source:{code:A}}},render:t=>({components:{pzTable:a,pzText:l},setup(){return{args:t}},template:`
|
|
51
|
+
<div class="pz-table-story">
|
|
52
|
+
<section class="pz-table-story-board">
|
|
53
|
+
<div class="pz-table-story-header">
|
|
54
|
+
<div class="pz-table-story-copy">
|
|
55
|
+
<span class="pz-table-story-eyebrow">Component API</span>
|
|
56
|
+
<pz-text variant="h4-bold">Procurement table</pz-text>
|
|
57
|
+
</div>
|
|
58
|
+
<span class="pz-table-story-chip">{{ args.config.length }} columns</span>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="pz-table-story-preview">
|
|
62
|
+
<pz-table v-bind="args" />
|
|
63
|
+
</div>
|
|
64
|
+
</section>
|
|
65
|
+
|
|
66
|
+
<section class="pz-table-story-grid">
|
|
67
|
+
<article class="pz-table-story-card">
|
|
68
|
+
<span class="pz-table-story-card-kicker">Technical notes</span>
|
|
69
|
+
<ul class="pz-table-story-list">
|
|
70
|
+
<li><code>config[].key</code> maps each cell to a row field.</li>
|
|
71
|
+
<li><code>config[].colWidth</code> keeps the desktop column proportions stable.</li>
|
|
72
|
+
<li>Named slots use the same name as <code>config[].key</code>, for example <code>#supplier</code> or <code>#statusLabel</code>.</li>
|
|
73
|
+
<li>Below the <code>lg</code> breakpoint the row stacks and uses mobile titles inside each cell.</li>
|
|
74
|
+
</ul>
|
|
75
|
+
</article>
|
|
76
|
+
|
|
77
|
+
<article class="pz-table-story-card">
|
|
78
|
+
<span class="pz-table-story-card-kicker">Behavior</span>
|
|
79
|
+
<ul class="pz-table-story-list">
|
|
80
|
+
<li>The first column can be emphasized through <code>isBoldFirstColumn</code>.</li>
|
|
81
|
+
<li><code>defaultValue</code> prevents empty cells from collapsing visually.</li>
|
|
82
|
+
<li>The component keeps semantic table markup on desktop.</li>
|
|
83
|
+
<li>Header hints are supported with the same <code>PzInfoHint</code> content model used elsewhere.</li>
|
|
84
|
+
</ul>
|
|
85
|
+
</article>
|
|
86
|
+
</section>
|
|
87
|
+
</div>
|
|
88
|
+
`})},o={render:()=>({components:{pzTable:a,pzText:l},setup(){return{procurementWithPriceConfig:w,procurementWithPriceData:x}},template:`
|
|
89
|
+
<div class="pz-table-story">
|
|
90
|
+
<section class="pz-table-story-board">
|
|
91
|
+
<div class="pz-table-story-copy">
|
|
92
|
+
<span class="pz-table-story-eyebrow">Usage example</span>
|
|
93
|
+
<pz-text variant="h4-bold">Same layout with an additional price column</pz-text>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="pz-table-story-preview">
|
|
97
|
+
<pz-table
|
|
98
|
+
:config="procurementWithPriceConfig"
|
|
99
|
+
:data="procurementWithPriceData"
|
|
100
|
+
/>
|
|
101
|
+
</div>
|
|
102
|
+
</section>
|
|
103
|
+
</div>
|
|
104
|
+
`})},s={render:()=>({components:{pzTable:a,pzText:l},setup(){return{paymentConfig:W,paymentData:C}},template:`
|
|
105
|
+
<div class="pz-table-story">
|
|
106
|
+
<section class="pz-table-story-board">
|
|
107
|
+
<div class="pz-table-story-copy">
|
|
108
|
+
<span class="pz-table-story-eyebrow">Usage example</span>
|
|
109
|
+
<pz-text variant="h4-bold">Compact payment schedule data</pz-text>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="pz-table-story-preview">
|
|
113
|
+
<pz-table
|
|
114
|
+
:config="paymentConfig"
|
|
115
|
+
:data="paymentData"
|
|
116
|
+
/>
|
|
117
|
+
</div>
|
|
118
|
+
</section>
|
|
119
|
+
</div>
|
|
120
|
+
`})},r={parameters:{docs:{source:{code:U}}},render:()=>({components:{pzLink:T,pzTable:a,pzTag:P,pzText:l},setup(){const t=e=>typeof e=="object"&&e!==null?e:{};return{contractsConfig:L,contractsData:D,formatCurrency:e=>typeof e!="number"?i:`${new Intl.NumberFormat("uk-UA").format(e)} грн`,getStatusVariant:e=>e==="active"?"green":e==="hidden"?"blue":"grey",getSupplierHref:e=>String(t(e).href??"#"),getSupplierName:e=>String(t(e).name??i)}},template:`
|
|
121
|
+
<div class="pz-table-story">
|
|
122
|
+
<section class="pz-table-story-board">
|
|
123
|
+
<div class="pz-table-story-copy">
|
|
124
|
+
<span class="pz-table-story-eyebrow">Usage example</span>
|
|
125
|
+
<pz-text variant="h4-bold">Custom cell slots</pz-text>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="pz-table-story-preview">
|
|
129
|
+
<pz-table
|
|
130
|
+
:config="contractsConfig"
|
|
131
|
+
:data="contractsData"
|
|
132
|
+
>
|
|
133
|
+
<template #supplier="{ data }">
|
|
134
|
+
<div class="pz-table-story-cell-stack">
|
|
135
|
+
<pz-link :href="getSupplierHref(data.supplier)" bold>
|
|
136
|
+
{{ getSupplierName(data.supplier) }}
|
|
137
|
+
</pz-link>
|
|
138
|
+
<span class="pz-table-story-muted">Профіль постачальника</span>
|
|
139
|
+
</div>
|
|
140
|
+
</template>
|
|
141
|
+
|
|
142
|
+
<template #amount="{ value }">
|
|
143
|
+
{{ formatCurrency(value) }}
|
|
144
|
+
</template>
|
|
145
|
+
|
|
146
|
+
<template #statusLabel="{ data }">
|
|
147
|
+
<pz-tag :variant="getStatusVariant(data.status)">
|
|
148
|
+
{{ data.statusLabel }}
|
|
149
|
+
</pz-tag>
|
|
150
|
+
</template>
|
|
151
|
+
</pz-table>
|
|
152
|
+
</div>
|
|
153
|
+
</section>
|
|
154
|
+
</div>
|
|
155
|
+
`})};var c,p,d;n.parameters={...n.parameters,docs:{...(c=n.parameters)==null?void 0:c.docs,source:{originalSource:`{
|
|
156
|
+
parameters: {
|
|
157
|
+
docs: {
|
|
158
|
+
source: {
|
|
159
|
+
code: playgroundSource
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
render: (args: PzTableStoryArgs) => ({
|
|
164
|
+
components: {
|
|
165
|
+
pzTable: PzTable,
|
|
166
|
+
pzText: PzText
|
|
167
|
+
},
|
|
168
|
+
setup() {
|
|
169
|
+
return {
|
|
170
|
+
args
|
|
171
|
+
};
|
|
172
|
+
},
|
|
173
|
+
template: \`
|
|
174
|
+
<div class="pz-table-story">
|
|
175
|
+
<section class="pz-table-story-board">
|
|
176
|
+
<div class="pz-table-story-header">
|
|
177
|
+
<div class="pz-table-story-copy">
|
|
178
|
+
<span class="pz-table-story-eyebrow">Component API</span>
|
|
179
|
+
<pz-text variant="h4-bold">Procurement table</pz-text>
|
|
180
|
+
</div>
|
|
181
|
+
<span class="pz-table-story-chip">{{ args.config.length }} columns</span>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="pz-table-story-preview">
|
|
185
|
+
<pz-table v-bind="args" />
|
|
186
|
+
</div>
|
|
187
|
+
</section>
|
|
188
|
+
|
|
189
|
+
<section class="pz-table-story-grid">
|
|
190
|
+
<article class="pz-table-story-card">
|
|
191
|
+
<span class="pz-table-story-card-kicker">Technical notes</span>
|
|
192
|
+
<ul class="pz-table-story-list">
|
|
193
|
+
<li><code>config[].key</code> maps each cell to a row field.</li>
|
|
194
|
+
<li><code>config[].colWidth</code> keeps the desktop column proportions stable.</li>
|
|
195
|
+
<li>Named slots use the same name as <code>config[].key</code>, for example <code>#supplier</code> or <code>#statusLabel</code>.</li>
|
|
196
|
+
<li>Below the <code>lg</code> breakpoint the row stacks and uses mobile titles inside each cell.</li>
|
|
197
|
+
</ul>
|
|
198
|
+
</article>
|
|
199
|
+
|
|
200
|
+
<article class="pz-table-story-card">
|
|
201
|
+
<span class="pz-table-story-card-kicker">Behavior</span>
|
|
202
|
+
<ul class="pz-table-story-list">
|
|
203
|
+
<li>The first column can be emphasized through <code>isBoldFirstColumn</code>.</li>
|
|
204
|
+
<li><code>defaultValue</code> prevents empty cells from collapsing visually.</li>
|
|
205
|
+
<li>The component keeps semantic table markup on desktop.</li>
|
|
206
|
+
<li>Header hints are supported with the same <code>PzInfoHint</code> content model used elsewhere.</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</article>
|
|
209
|
+
</section>
|
|
210
|
+
</div>
|
|
211
|
+
\`
|
|
212
|
+
})
|
|
213
|
+
}`,...(d=(p=n.parameters)==null?void 0:p.docs)==null?void 0:d.source}}};var u,m,y;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
|
|
214
|
+
render: () => ({
|
|
215
|
+
components: {
|
|
216
|
+
pzTable: PzTable,
|
|
217
|
+
pzText: PzText
|
|
218
|
+
},
|
|
219
|
+
setup() {
|
|
220
|
+
return {
|
|
221
|
+
procurementWithPriceConfig,
|
|
222
|
+
procurementWithPriceData
|
|
223
|
+
};
|
|
224
|
+
},
|
|
225
|
+
template: \`
|
|
226
|
+
<div class="pz-table-story">
|
|
227
|
+
<section class="pz-table-story-board">
|
|
228
|
+
<div class="pz-table-story-copy">
|
|
229
|
+
<span class="pz-table-story-eyebrow">Usage example</span>
|
|
230
|
+
<pz-text variant="h4-bold">Same layout with an additional price column</pz-text>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<div class="pz-table-story-preview">
|
|
234
|
+
<pz-table
|
|
235
|
+
:config="procurementWithPriceConfig"
|
|
236
|
+
:data="procurementWithPriceData"
|
|
237
|
+
/>
|
|
238
|
+
</div>
|
|
239
|
+
</section>
|
|
240
|
+
</div>
|
|
241
|
+
\`
|
|
242
|
+
})
|
|
243
|
+
}`,...(y=(m=o.parameters)==null?void 0:m.docs)==null?void 0:y.source}}};var b,z,v;s.parameters={...s.parameters,docs:{...(b=s.parameters)==null?void 0:b.docs,source:{originalSource:`{
|
|
244
|
+
render: () => ({
|
|
245
|
+
components: {
|
|
246
|
+
pzTable: PzTable,
|
|
247
|
+
pzText: PzText
|
|
248
|
+
},
|
|
249
|
+
setup() {
|
|
250
|
+
return {
|
|
251
|
+
paymentConfig,
|
|
252
|
+
paymentData
|
|
253
|
+
};
|
|
254
|
+
},
|
|
255
|
+
template: \`
|
|
256
|
+
<div class="pz-table-story">
|
|
257
|
+
<section class="pz-table-story-board">
|
|
258
|
+
<div class="pz-table-story-copy">
|
|
259
|
+
<span class="pz-table-story-eyebrow">Usage example</span>
|
|
260
|
+
<pz-text variant="h4-bold">Compact payment schedule data</pz-text>
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
<div class="pz-table-story-preview">
|
|
264
|
+
<pz-table
|
|
265
|
+
:config="paymentConfig"
|
|
266
|
+
:data="paymentData"
|
|
267
|
+
/>
|
|
268
|
+
</div>
|
|
269
|
+
</section>
|
|
270
|
+
</div>
|
|
271
|
+
\`
|
|
272
|
+
})
|
|
273
|
+
}`,...(v=(z=s.parameters)==null?void 0:z.docs)==null?void 0:v.source}}};var g,h,f;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`{
|
|
274
|
+
parameters: {
|
|
275
|
+
docs: {
|
|
276
|
+
source: {
|
|
277
|
+
code: customSlotsSource
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
},
|
|
281
|
+
render: () => ({
|
|
282
|
+
components: {
|
|
283
|
+
pzLink: PzLink,
|
|
284
|
+
pzTable: PzTable,
|
|
285
|
+
pzTag: PzTag,
|
|
286
|
+
pzText: PzText
|
|
287
|
+
},
|
|
288
|
+
setup() {
|
|
289
|
+
const getSupplierRecord = (value: unknown): Record<string, unknown> => typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
|
|
290
|
+
const getSupplierName = (value: unknown): string => String(getSupplierRecord(value).name ?? PZ_TABLE_DEFAULT_EMPTY_VALUE);
|
|
291
|
+
const getSupplierHref = (value: unknown): string => String(getSupplierRecord(value).href ?? "#");
|
|
292
|
+
const formatCurrency = (value: unknown): string => {
|
|
293
|
+
if (typeof value !== "number") {
|
|
294
|
+
return PZ_TABLE_DEFAULT_EMPTY_VALUE;
|
|
295
|
+
}
|
|
296
|
+
return \`\${new Intl.NumberFormat("uk-UA").format(value)} грн\`;
|
|
297
|
+
};
|
|
298
|
+
const getStatusVariant = (value: unknown): "green" | "blue" | "grey" => {
|
|
299
|
+
if (value === "active") {
|
|
300
|
+
return "green";
|
|
301
|
+
}
|
|
302
|
+
if (value === "hidden") {
|
|
303
|
+
return "blue";
|
|
304
|
+
}
|
|
305
|
+
return "grey";
|
|
306
|
+
};
|
|
307
|
+
return {
|
|
308
|
+
contractsConfig,
|
|
309
|
+
contractsData,
|
|
310
|
+
formatCurrency,
|
|
311
|
+
getStatusVariant,
|
|
312
|
+
getSupplierHref,
|
|
313
|
+
getSupplierName
|
|
314
|
+
};
|
|
315
|
+
},
|
|
316
|
+
template: \`
|
|
317
|
+
<div class="pz-table-story">
|
|
318
|
+
<section class="pz-table-story-board">
|
|
319
|
+
<div class="pz-table-story-copy">
|
|
320
|
+
<span class="pz-table-story-eyebrow">Usage example</span>
|
|
321
|
+
<pz-text variant="h4-bold">Custom cell slots</pz-text>
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<div class="pz-table-story-preview">
|
|
325
|
+
<pz-table
|
|
326
|
+
:config="contractsConfig"
|
|
327
|
+
:data="contractsData"
|
|
328
|
+
>
|
|
329
|
+
<template #supplier="{ data }">
|
|
330
|
+
<div class="pz-table-story-cell-stack">
|
|
331
|
+
<pz-link :href="getSupplierHref(data.supplier)" bold>
|
|
332
|
+
{{ getSupplierName(data.supplier) }}
|
|
333
|
+
</pz-link>
|
|
334
|
+
<span class="pz-table-story-muted">Профіль постачальника</span>
|
|
335
|
+
</div>
|
|
336
|
+
</template>
|
|
337
|
+
|
|
338
|
+
<template #amount="{ value }">
|
|
339
|
+
{{ formatCurrency(value) }}
|
|
340
|
+
</template>
|
|
341
|
+
|
|
342
|
+
<template #statusLabel="{ data }">
|
|
343
|
+
<pz-tag :variant="getStatusVariant(data.status)">
|
|
344
|
+
{{ data.statusLabel }}
|
|
345
|
+
</pz-tag>
|
|
346
|
+
</template>
|
|
347
|
+
</pz-table>
|
|
348
|
+
</div>
|
|
349
|
+
</section>
|
|
350
|
+
</div>
|
|
351
|
+
\`
|
|
352
|
+
})
|
|
353
|
+
}`,...(f=(h=r.parameters)==null?void 0:h.docs)==null?void 0:f.source}}};const G=["Playground","ProcurementWithPrice","PaymentSchedule","CustomSlots"];export{r as CustomSlots,s as PaymentSchedule,n as Playground,o as ProcurementWithPrice,G as __namedExportsOrder,O as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as q,P as T}from"./PzText-
|
|
1
|
+
import{_ as q,P as T}from"./PzText-Qtpayc5y.js";import{d as M,S as f,L as J,U as Q,M as X,V as Y,W as G,e as m,j as F,r as Z,o as u,X as K,J as tt,l as _,F as at,p as st,n as et,f as S,P as nt,g as rt,t as pt,Y as P}from"./iframe-B7Bddli1.js";import"./preload-helper-C1FmrZbK.js";const ot=["","light"];var r=(t=>(t.INIT_TAB="init-tab",t.TABS_STATE="tabs-state",t.REMOVE_TAB="remove-tab",t))(r||{});const it={class:"pz-tab"},x=M({name:"PzTab",__name:"PzTab",props:{name:{default:"Tab"},selected:{type:Boolean,default:!1},id:{default:void 0}},setup(t){const a=t,p=K(),i=Z(!1),o=f(r.REMOVE_TAB,void 0),s=f(r.TABS_STATE,void 0),e=f(r.INIT_TAB,void 0),n={get id(){return a.id??`pz-tab-${(p==null?void 0:p.uid)??a.name}`},get name(){return a.name}};return J(()=>s==null?void 0:s.activeTab,z=>{i.value=a.name===z}),Q(()=>{e==null||e(n),i.value=a.selected}),X(()=>o==null?void 0:o(n)),(z,mt)=>Y((u(),m("div",it,[F(z.$slots,"default",{},void 0,!0)],512)),[[G,i.value]])}}),h=q(x,[["__scopeId","data-v-2cffa4a1"]]);x.__docgenInfo=Object.assign({displayName:x.name??x.__name},{name:"PzTab",exportName:"default",displayName:"PzTab",description:"",tags:{},props:[{name:"name",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"Tab"'}},{name:"selected",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"id",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzTabs/PzTab.vue"]});const lt={class:"pz-tabs__nav"},zt=["onClick"],bt={class:"pz-tabs__content"},g=M({name:"PzTabs",__name:"PzTabs",props:{skin:{default:""},maxWidth:{default:""}},setup(t){const a=nt({tabs:[],activeTab:""}),p=t,i=rt(()=>p.skin?`pz-tabs--${p.skin}`:"");P(r.TABS_STATE,a),P(r.INIT_TAB,s=>a.tabs.push(s)),P(r.REMOVE_TAB,s=>{a.tabs=a.tabs.filter(e=>e.id!==s.id),o()}),tt(()=>o());const o=()=>{var e;const[{name:s}={name:""}]=a.tabs.filter(({selected:n})=>n);a.activeTab=s||((e=a.tabs[0])==null?void 0:e.name)||""};return(s,e)=>(u(),m("div",{class:S(["pz-tabs",i.value]),style:et({maxWidth:t.maxWidth})},[_("ul",lt,[(u(!0),m(at,null,st(a.tabs,n=>(u(),m("li",{key:n.id,class:S(["pz-tabs__item",{active:a.activeTab===n.name}]),onClick:z=>a.activeTab=n.name||""},pt(n.name),11,zt))),128))]),_("div",bt,[F(s.$slots,"default",{},void 0,!0)])],6))}}),l=q(g,[["__scopeId","data-v-f64a88aa"]]);g.__docgenInfo=Object.assign({displayName:g.name??g.__name},{name:"PzTabs",exportName:"default",displayName:"PzTabs",description:"",tags:{},props:[{name:"skin",required:!1,type:{name:"PzTabsSkin"},defaultValue:{func:!1,value:'""'}},{name:"maxWidth",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzTabs/PzTabs.vue"]});const dt=t=>[t.skin?`skin="${t.skin}"`:null,t.maxWidth?`max-width="${t.maxWidth}"`:null].filter(a=>!!a).join(" "),ct=t=>`<template>
|
|
2
2
|
<PzTabs ${dt(t)}>
|
|
3
3
|
<PzTab name="${t.currentEditionLabel}" selected>
|
|
4
4
|
Current content
|
|
@@ -518,7 +518,7 @@ ${[R(),U(),H()].join(`
|
|
|
518
518
|
</div>
|
|
519
519
|
\`
|
|
520
520
|
})
|
|
521
|
-
}`,...(D=(N=c.parameters)==null?void 0:N.docs)==null?void 0:D.source}}};var I
|
|
521
|
+
}`,...(D=(N=c.parameters)==null?void 0:N.docs)==null?void 0:D.source}}};var $,I,L;v.parameters={...v.parameters,docs:{...($=v.parameters)==null?void 0:$.docs,source:{originalSource:`{
|
|
522
522
|
parameters: {
|
|
523
523
|
docs: {
|
|
524
524
|
source: {
|
|
@@ -583,7 +583,7 @@ ${[R(),U(),H()].join(`
|
|
|
583
583
|
</div>
|
|
584
584
|
\`
|
|
585
585
|
})
|
|
586
|
-
}`,...(L=(
|
|
586
|
+
}`,...(L=(I=v.parameters)==null?void 0:I.docs)==null?void 0:L.source}}};var V,O,j;y.parameters={...y.parameters,docs:{...(V=y.parameters)==null?void 0:V.docs,source:{originalSource:`{
|
|
587
587
|
parameters: {
|
|
588
588
|
docs: {
|
|
589
589
|
source: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pz-tag-story{display:grid;gap:var(--pz-space-24)}.pz-tag-story-board,.pz-tag-story-gallery{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 34%),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 18px 48px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-tag-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-tag-story-eyebrow,.pz-tag-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);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}.pz-tag-story-preview{display:grid;place-items:center;min-height:180px;padding:var(--pz-space-24);border:1px dashed color-mix(in srgb,var(--pz-color-grey-40) 70%,transparent);border-radius:var(--pz-space-20);background:linear-gradient(color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px);background-size:28px 28px}.pz-tag-story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pz-space-16)}.pz-tag-story-card{display:grid;gap:var(--pz-space-12);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-tag-story-row{display:flex;align-items:center;gap:var(--pz-space-8);flex-wrap:wrap}.pz-tag-story-code{margin:0;font-size:var(--pz-font-size-12);color:var(--pz-color-text-secondary)}@media (width <= 768px){.pz-tag-story-grid{grid-template-columns:1fr}.pz-tag-story-header{flex-direction:column}}
|
|
1
|
+
.pz-tag-story{display:grid;gap:var(--pz-space-24)}.pz-tag-story-board,.pz-tag-story-gallery{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 34%),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 18px 48px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-tag-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-tag-story-eyebrow,.pz-tag-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);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}.pz-tag-story-preview{display:grid;place-items:center;min-height:180px;padding:var(--pz-space-24);border:1px dashed color-mix(in srgb,var(--pz-color-grey-40) 70%,transparent);border-radius:var(--pz-space-20);background:linear-gradient(color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px);background-size:28px 28px}.pz-tag-story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pz-space-16)}.pz-tag-story-card{display:grid;gap:var(--pz-space-12);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-tag-story-row{display:flex;align-items:center;gap:var(--pz-space-8);flex-wrap:wrap}.pz-tag-story-code{margin:0;font-size:var(--pz-font-size-12);color:var(--pz-color-text-secondary)}@media (width <= 768px){.pz-tag-story-grid{grid-template-columns:1fr}.pz-tag-story-header{flex-direction:column}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pz-tag[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-grey);--pz-tag-gap: var(--pz-space-4);display:inline-flex;align-items:center;gap:var(--pz-tag-gap);padding:4px 8px;border-radius:3px 12px 12px 3px;background:var(--pz-tag-background);color:var(--pz-tag-color);vertical-align:middle;font-size:var(--pz-font-size-12);font-weight:600;line-height:1.5}.pz-tag--grey[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-grey)}.pz-tag--grey-light[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-grey-light)}.pz-tag--blue[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-blue)}.pz-tag--green[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-green)}.pz-tag--red[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-red)}.pz-tag-prefix[data-v-7a827d32],.pz-tag-suffix[data-v-7a827d32]{display:inline-flex;align-items:center;justify-content:center}.pz-tag-label[data-v-7a827d32]{min-width:0}.pz-tag-prefix[data-v-7a827d32] .pz-icon,.pz-tag-suffix[data-v-7a827d32] .pz-icon{--pz-icon-size: var(--pz-font-size-12);--pz-icon-color: currentcolor}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as i,h as p,w as f,f as u,i as c,o as s,e as n,j as t,k as r,l as d}from"./iframe-B7Bddli1.js";import{_ as m}from"./PzText-Qtpayc5y.js";const g={key:0,class:"pz-tag-prefix"},_={class:"pz-tag-label"},z={key:1,class:"pz-tag-suffix"},a=i({name:"PzTag",__name:"PzTag",props:{variant:{default:"grey"},as:{default:"span"}},setup(l){const o=l;return(e,v)=>(s(),p(c(o.as),{class:u(["pz-tag",`pz-tag--${o.variant}`])},{default:f(()=>[e.$slots.prefix?(s(),n("span",g,[t(e.$slots,"prefix",{},void 0,!0)])):r("",!0),d("span",_,[t(e.$slots,"default",{},void 0,!0)]),e.$slots.suffix?(s(),n("span",z,[t(e.$slots,"suffix",{},void 0,!0)])):r("",!0)]),_:3},8,["class"]))}}),y=m(a,[["__scopeId","data-v-7a827d32"]]);a.__docgenInfo=Object.assign({displayName:a.name??a.__name},{name:"PzTag",exportName:"default",displayName:"PzTag",description:"",tags:{},props:[{name:"variant",required:!1,type:{name:"PzTagVariant"},defaultValue:{func:!1,value:'"grey"'}},{name:"as",required:!1,type:{name:"PzTagTag"},defaultValue:{func:!1,value:'"span"'}}],slots:[{name:"prefix"},{name:"default"},{name:"suffix"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzTag/PzTag.vue"]});export{y as P};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import{_ as
|
|
1
|
+
import{_ as c}from"./PzIcon-Drlqf9PC.js";import{P as g}from"./PzText-Qtpayc5y.js";import{P as o}from"./PzTag-jiAX5zAj.js";import"./iframe-B7Bddli1.js";import"./preload-helper-C1FmrZbK.js";const d=["grey","blue","green","red","grey-light"],m=["span","div","li"],f=[{variant:"grey",label:"Neutral"},{variant:"grey-light",label:"Neutral light"},{variant:"blue",label:"Information"},{variant:"green",label:"Verified"},{variant:"red",label:"Important"}],v=t=>{const a=[t.variant!=="grey"?`variant="${t.variant}"`:null,t.as!=="span"?`as="${t.as}"`:null].filter(p=>!!p).join(" "),n=t.showPrefix?`
|
|
2
2
|
<template #prefix>
|
|
3
3
|
<PzIcon name="sell" size="12" />
|
|
4
|
-
</template>`:"",
|
|
4
|
+
</template>`:"",l=t.showSuffix?`
|
|
5
5
|
<template #suffix>
|
|
6
6
|
<PzIcon name="close" size="12" />
|
|
7
7
|
</template>`:"";return`<template>
|
|
8
|
-
<PzTag ${
|
|
9
|
-
${
|
|
8
|
+
<PzTag ${a}>${n}
|
|
9
|
+
${t.label}${l}
|
|
10
10
|
</PzTag>
|
|
11
|
-
</template>`},
|
|
11
|
+
</template>`},z={title:"Components/Display/PzTag",component:o,parameters:{prototype:{caption:"Tag component",note:"Figma node access was blocked in this environment, so the tag styling is inferred from the existing tag token set and implemented as a compact slot-based pill."},docs:{description:{component:"Use `PzTag` for compact semantic labels. Variants map directly to the shared tag tokens, and optional prefix or suffix content should be composed through slots."},source:{transform:(t,a)=>v(a.args??z.args)}}},args:{variant:"blue",as:"span",label:"Open data",showPrefix:!0,showSuffix:!1},argTypes:{variant:{control:"inline-radio",options:d,description:"Semantic tag color variant."},as:{control:"select",options:m,description:"HTML tag used for the wrapper."},label:{control:"text",description:"Slot content preview text.",table:{category:"Slots"}},showPrefix:{control:"boolean",description:"Shows a composed prefix icon slot in the preview.",table:{category:"Slots"}},showSuffix:{control:"boolean",description:"Shows a composed suffix icon slot in the preview.",table:{category:"Slots"}}},render:t=>({components:{pzTag:o,pzText:g,pzIcon:c},setup(){return{args:t,tagReferenceItems:f}},template:`
|
|
12
12
|
<div class="pz-tag-story">
|
|
13
13
|
<section class="pz-tag-story-board">
|
|
14
14
|
<div class="pz-tag-story-header">
|
|
@@ -67,4 +67,4 @@ import{_ as u}from"./PzIcon-Don8TXO3.js";import{_ as z,P as v}from"./PzText-LfRr
|
|
|
67
67
|
</div>
|
|
68
68
|
</section>
|
|
69
69
|
</div>
|
|
70
|
-
`})},
|
|
70
|
+
`})},e={};var s,r,i;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(i=(r=e.parameters)==null?void 0:r.docs)==null?void 0:i.source}}};const w=["Playground"];export{e as Playground,w as __namedExportsOrder,z as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as l,
|
|
1
|
+
import{d as l,h as r,f as d,i as p,g as i,w as c,o as u,j as m}from"./iframe-B7Bddli1.js";const t=l({name:"PzText",__name:"PzText",props:{variant:{},as:{default:void 0}},setup(e){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"},a=e,o=i(()=>a.as??s[a.variant]??"span");return(n,b)=>(u(),r(p(o.value),{class:d(["pz-text",`pz-text--${e.variant}`])},{default:c(()=>[m(n.$slots,"default",{},void 0,!0)]),_:3},8,["class"]))}}),h=(e,s)=>{const a=e.__vccOpts||e;for(const[o,n]of s)a[o]=n;return a},x=h(t,[["__scopeId","data-v-bd3b2150"]]);t.__docgenInfo=Object.assign({displayName:t.name??t.__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/PzText/PzText.vue"]});export{x as P,h as _};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{P as R}from"./PzText-
|
|
1
|
+
import{P as R}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./preload-helper-C1FmrZbK.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(" "),we={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/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">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as ne,P as xe,L as _,Q as me,E as _e,o as q,e as se,y as U,r as H,k as w,n as fe,i as C,g as h,C as X,j as ge,w as he,N as ve,f as ze,t as be,h as ye}from"./iframe-XnrfGA2g.js";import{_ as we,P as re}from"./PzText-LfRr6NF7.js";import"./preload-helper-C1FmrZbK.js";var R=null;function Ce(e){return R||(R=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){return setTimeout(a,16)}).bind(window)),R(e)}var N=null;function Le(e){N||(N=(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(a){clearTimeout(a)}).bind(window)),N(e)}function Te(e){var a=document.createElement("style");return a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e)),(document.querySelector("head")||document.body).appendChild(a),a}function v(e,a){a===void 0&&(a={});var t=document.createElement(e);return Object.keys(a).forEach(function(s){t[s]=a[s]}),t}function oe(e,a,t){var s=window.getComputedStyle(e,null)||{display:"none"};return s[a]}function O(e){if(!document.documentElement.contains(e))return{detached:!0,rendered:!1};for(var a=e;a!==document;){if(oe(a,"display")==="none")return{detached:!1,rendered:!1};a=a.parentNode}return{detached:!1,rendered:!0}}var Se='.resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}',A=0,L=null;function Ee(e,a){e.__resize_mutation_handler__||(e.__resize_mutation_handler__=Re.bind(e));var t=e.__resize_listeners__;if(!t){if(e.__resize_listeners__=[],window.ResizeObserver){var s=e.offsetWidth,o=e.offsetHeight,i=new ResizeObserver(function(){!e.__resize_observer_triggered__&&(e.__resize_observer_triggered__=!0,e.offsetWidth===s&&e.offsetHeight===o)||S(e)}),n=O(e),p=n.detached,d=n.rendered;e.__resize_observer_triggered__=p===!1&&d===!1,e.__resize_observer__=i,i.observe(e)}else if(e.attachEvent&&e.addEventListener)e.__resize_legacy_resize_handler__=function(){S(e)},e.attachEvent("onresize",e.__resize_legacy_resize_handler__),document.addEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);else if(A||(L=Te(Se)),Ne(e),e.__resize_rendered__=O(e).rendered,window.MutationObserver){var l=new MutationObserver(e.__resize_mutation_handler__);l.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.__resize_mutation_observer__=l}}e.__resize_listeners__.push(a),A++}function ke(e,a){var t=e.__resize_listeners__;if(t){if(a&&t.splice(t.indexOf(a),1),!t.length||!a){if(e.detachEvent&&e.removeEventListener){e.detachEvent("onresize",e.__resize_legacy_resize_handler__),document.removeEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);return}e.__resize_observer__?(e.__resize_observer__.unobserve(e),e.__resize_observer__.disconnect(),e.__resize_observer__=null):(e.__resize_mutation_observer__&&(e.__resize_mutation_observer__.disconnect(),e.__resize_mutation_observer__=null),e.removeEventListener("scroll",B),e.removeChild(e.__resize_triggers__.triggers),e.__resize_triggers__=null),e.__resize_listeners__=null}!--A&&L&&L.parentNode.removeChild(L)}}function Pe(e){var a=e.__resize_last__,t=a.width,s=a.height,o=e.offsetWidth,i=e.offsetHeight;return o!==t||i!==s?{width:o,height:i}:null}function Re(){var e=O(this),a=e.rendered,t=e.detached;a!==this.__resize_rendered__&&(!t&&this.__resize_triggers__&&(F(this),this.addEventListener("scroll",B,!0)),this.__resize_rendered__=a,S(this))}function B(){var e=this;F(this),this.__resize_raf__&&Le(this.__resize_raf__),this.__resize_raf__=Ce(function(){var a=Pe(e);a&&(e.__resize_last__=a,S(e))})}function S(e){!e||!e.__resize_listeners__||e.__resize_listeners__.forEach(function(a){a.call(e,e)})}function Ne(e){var a=oe(e,"position");(!a||a==="static")&&(e.style.position="relative"),e.__resize_old_position__=a,e.__resize_last__={};var t=v("div",{className:"resize-triggers"}),s=v("div",{className:"resize-expand-trigger"}),o=v("div"),i=v("div",{className:"resize-contract-trigger"});s.appendChild(o),t.appendChild(s),t.appendChild(i),e.appendChild(t),e.__resize_triggers__={triggers:t,expand:s,expandChild:o,contract:i},F(e),e.addEventListener("scroll",B,!0),e.__resize_last__={width:e.offsetWidth,height:e.offsetHeight}}function F(e){var a=e.__resize_triggers__,t=a.expand,s=a.expandChild,o=a.contract,i=o.scrollWidth,n=o.scrollHeight,p=t.offsetWidth,d=t.offsetHeight,l=t.scrollWidth,c=t.scrollHeight;o.scrollLeft=i,o.scrollTop=n,s.style.width=p+1+"px",s.style.height=d+1+"px",t.scrollLeft=l,t.scrollTop=c}const qe=["aria-label"];var ie=ne({__name:"text-clamp",props:{text:{type:String,required:!0},maxHeight:{type:[String,Number],required:!1},maxLines:{type:Number,required:!1},expanded:{type:Boolean,required:!1,default:!1},location:{type:String,required:!1,default:"end"},ellipsis:{type:String,required:!1,default:"…"},autoResize:{type:Boolean,required:!1,default:!1}},emits:["clamp-change","update:expanded"],setup(e,{emit:a}){const t=e,s=C(null),o=C(null),i=C(null),n=xe({offset:0,localExpanded:!!t.expanded,unregisterResizeCallback:null}),p=h(()=>{if(!n.localExpanded&&t.maxHeight)return typeof(t==null?void 0:t.maxHeight)=="number"?`${t==null?void 0:t.maxHeight}px`:t==null?void 0:t.maxHeight}),d=()=>{i.value&&(i.value.textContent=pe.value)},l=()=>{n.localExpanded||(d(),(g()||u.value)&&k())},c=()=>{t.text&&(n.offset=t.text.length,j(),t.autoResize&&s.value&&(Ee(s.value,l),n.unregisterResizeCallback=()=>{s.value&&ke(s.value,l)}),l())},j=()=>{var r;(r=n.unregisterResizeCallback)==null||r.call(n)},g=()=>!(!t.maxLines&&!t.maxHeight)&&!!s.value&&(!!(t.maxLines&&E()>t.maxLines)||!!(t.maxHeight&&s.value.scrollHeight>s.value.offsetHeight)),E=()=>o.value?Object.keys(Array.prototype.slice.call(o.value.getClientRects()).reduce((r,{top:x,bottom:f})=>{const m=`${x}/${f}`;return r[m]||(r[m]=!0),r},{})).length:0,k=(...r)=>{const[x=0,f=n.offset]=r;if(f-x<=3)return void le();const m=Math.floor((f+x)/2);P(m),g()?k(x,m):k(m,f)},P=r=>{n.offset=r,d()},le=()=>{de(),ce()},de=()=>{for(;(!g()||E()<2)&&n.offset<t.text.length;)D(1)},ce=()=>{for(;g()&&E()>1&&n.offset>0;)D(-1)},D=r=>{P(n.offset+r)},u=h(()=>!!t.text&&n.offset!==t.text.length);_(()=>u.value,r=>{setTimeout(()=>{a("clamp-change",r)},0)},{immediate:!0});const pe=h(()=>u.value?ue.value:t.text),ue=h(()=>{if(t.location==="start")return t.ellipsis+(t.text.slice(-n.offset)||"").trim();if(t.location==="middle"){const r=Math.floor(n.offset/2);return(t.text.slice(0,r)||"").trim()+t.ellipsis+(t.text.slice(-r)||"").trim()}return(t.text.slice(0,n.offset)||"").trim()+t.ellipsis}),V=()=>{n.localExpanded=!0},W=()=>{n.localExpanded=!1},I=()=>{n.localExpanded=!n.localExpanded};return _(()=>t.expanded,r=>{n.localExpanded=r}),_(()=>n.localExpanded,r=>{r?P(t.text.length):l(),t.expanded!==r&&a("update:expanded",r)}),_(()=>[t.maxLines,t.maxHeight,t.ellipsis,t.location,u.value].join(),()=>{X(()=>{l()})}),_(()=>[t.text,t.autoResize].join(),()=>{X(()=>{c()})}),me(()=>{j()}),_e(()=>{c()}),(r,x)=>(q(),se("div",{ref_key:"textClampRef",ref:s,class:"text-clamp",style:fe({overflow:"hidden",maxHeight:w(p)})},[U("span",{ref_key:"contentRef",ref:o},[H(r.$slots,"before",{expand:V,collapse:W,toggle:I,clamped:w(u),expanded:n.localExpanded}),U("span",{ref_key:"textRef",ref:i,"aria-label":e.text},null,8,qe),H(r.$slots,"after",{expand:V,collapse:W,toggle:I,clamped:w(u),expanded:n.localExpanded})],512)],4))}});ie.__file="package/text-clamp.vue";const He=e=>(e.install=function(a){a.component(e.__name,e)},e),Oe=He(ie),Ae=3,Me="... ",$e=["aria-expanded","onClick"],T=ne({name:"PzTextClamp",__name:"PzTextClamp",props:{text:{},maxContentLines:{default:Ae},clampPostfix:{default:Me},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,s=a,o=n=>{s("update:expanded",n)},i=n=>{s("clamp-change",n)};return(n,p)=>(q(),ge(w(Oe),{text:t.text,"max-lines":t.maxContentLines,ellipsis:t.clampPostfix,expanded:t.expanded,"auto-resize":t.autoResize,class:"pz-text-clamp","onUpdate:expanded":o,onClampChange:i},{after:he(({toggle:d,expanded:l,clamped:c})=>[H(n.$slots,"toggle",{toggle:d,expanded:l,clamped:c},()=>[c||l?(q(),se("button",{key:0,type:"button",class:ze(["pz-text-clamp__toggle",t.btnClass]),"aria-expanded":l,onClick:ve(d,["stop"])},be(l?t.collapseLabel:t.expandLabel),11,$e)):ye("",!0)],!0)]),_:3},8,["text","max-lines","ellipsis","expanded","auto-resize"]))}}),M=we(T,[["__scopeId","data-v-17225f94"]]);T.__docgenInfo=Object.assign({displayName:T.name??T.__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/PzTextClamp/PzTextClamp.vue"]});const $=[{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}],Be=e=>`<template>
|
|
1
|
+
import{d as ne,P as xe,L as _,Q as me,J as _e,o as H,e as se,l as U,j as q,s as w,n as fe,r as C,g as h,H as X,h as ge,w as he,N as ve,f as ze,t as be,k as ye}from"./iframe-B7Bddli1.js";import{_ as we,P as re}from"./PzText-Qtpayc5y.js";import"./preload-helper-C1FmrZbK.js";var R=null;function Ce(e){return R||(R=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){return setTimeout(a,16)}).bind(window)),R(e)}var N=null;function Le(e){N||(N=(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(a){clearTimeout(a)}).bind(window)),N(e)}function Te(e){var a=document.createElement("style");return a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e)),(document.querySelector("head")||document.body).appendChild(a),a}function v(e,a){a===void 0&&(a={});var t=document.createElement(e);return Object.keys(a).forEach(function(s){t[s]=a[s]}),t}function oe(e,a,t){var s=window.getComputedStyle(e,null)||{display:"none"};return s[a]}function O(e){if(!document.documentElement.contains(e))return{detached:!0,rendered:!1};for(var a=e;a!==document;){if(oe(a,"display")==="none")return{detached:!1,rendered:!1};a=a.parentNode}return{detached:!1,rendered:!0}}var Se='.resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}',A=0,L=null;function ke(e,a){e.__resize_mutation_handler__||(e.__resize_mutation_handler__=Re.bind(e));var t=e.__resize_listeners__;if(!t){if(e.__resize_listeners__=[],window.ResizeObserver){var s=e.offsetWidth,o=e.offsetHeight,i=new ResizeObserver(function(){!e.__resize_observer_triggered__&&(e.__resize_observer_triggered__=!0,e.offsetWidth===s&&e.offsetHeight===o)||S(e)}),n=O(e),p=n.detached,d=n.rendered;e.__resize_observer_triggered__=p===!1&&d===!1,e.__resize_observer__=i,i.observe(e)}else if(e.attachEvent&&e.addEventListener)e.__resize_legacy_resize_handler__=function(){S(e)},e.attachEvent("onresize",e.__resize_legacy_resize_handler__),document.addEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);else if(A||(L=Te(Se)),Ne(e),e.__resize_rendered__=O(e).rendered,window.MutationObserver){var l=new MutationObserver(e.__resize_mutation_handler__);l.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.__resize_mutation_observer__=l}}e.__resize_listeners__.push(a),A++}function Ee(e,a){var t=e.__resize_listeners__;if(t){if(a&&t.splice(t.indexOf(a),1),!t.length||!a){if(e.detachEvent&&e.removeEventListener){e.detachEvent("onresize",e.__resize_legacy_resize_handler__),document.removeEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);return}e.__resize_observer__?(e.__resize_observer__.unobserve(e),e.__resize_observer__.disconnect(),e.__resize_observer__=null):(e.__resize_mutation_observer__&&(e.__resize_mutation_observer__.disconnect(),e.__resize_mutation_observer__=null),e.removeEventListener("scroll",B),e.removeChild(e.__resize_triggers__.triggers),e.__resize_triggers__=null),e.__resize_listeners__=null}!--A&&L&&L.parentNode.removeChild(L)}}function Pe(e){var a=e.__resize_last__,t=a.width,s=a.height,o=e.offsetWidth,i=e.offsetHeight;return o!==t||i!==s?{width:o,height:i}:null}function Re(){var e=O(this),a=e.rendered,t=e.detached;a!==this.__resize_rendered__&&(!t&&this.__resize_triggers__&&(F(this),this.addEventListener("scroll",B,!0)),this.__resize_rendered__=a,S(this))}function B(){var e=this;F(this),this.__resize_raf__&&Le(this.__resize_raf__),this.__resize_raf__=Ce(function(){var a=Pe(e);a&&(e.__resize_last__=a,S(e))})}function S(e){!e||!e.__resize_listeners__||e.__resize_listeners__.forEach(function(a){a.call(e,e)})}function Ne(e){var a=oe(e,"position");(!a||a==="static")&&(e.style.position="relative"),e.__resize_old_position__=a,e.__resize_last__={};var t=v("div",{className:"resize-triggers"}),s=v("div",{className:"resize-expand-trigger"}),o=v("div"),i=v("div",{className:"resize-contract-trigger"});s.appendChild(o),t.appendChild(s),t.appendChild(i),e.appendChild(t),e.__resize_triggers__={triggers:t,expand:s,expandChild:o,contract:i},F(e),e.addEventListener("scroll",B,!0),e.__resize_last__={width:e.offsetWidth,height:e.offsetHeight}}function F(e){var a=e.__resize_triggers__,t=a.expand,s=a.expandChild,o=a.contract,i=o.scrollWidth,n=o.scrollHeight,p=t.offsetWidth,d=t.offsetHeight,l=t.scrollWidth,c=t.scrollHeight;o.scrollLeft=i,o.scrollTop=n,s.style.width=p+1+"px",s.style.height=d+1+"px",t.scrollLeft=l,t.scrollTop=c}const He=["aria-label"];var ie=ne({__name:"text-clamp",props:{text:{type:String,required:!0},maxHeight:{type:[String,Number],required:!1},maxLines:{type:Number,required:!1},expanded:{type:Boolean,required:!1,default:!1},location:{type:String,required:!1,default:"end"},ellipsis:{type:String,required:!1,default:"…"},autoResize:{type:Boolean,required:!1,default:!1}},emits:["clamp-change","update:expanded"],setup(e,{emit:a}){const t=e,s=C(null),o=C(null),i=C(null),n=xe({offset:0,localExpanded:!!t.expanded,unregisterResizeCallback:null}),p=h(()=>{if(!n.localExpanded&&t.maxHeight)return typeof(t==null?void 0:t.maxHeight)=="number"?`${t==null?void 0:t.maxHeight}px`:t==null?void 0:t.maxHeight}),d=()=>{i.value&&(i.value.textContent=pe.value)},l=()=>{n.localExpanded||(d(),(g()||u.value)&&E())},c=()=>{t.text&&(n.offset=t.text.length,j(),t.autoResize&&s.value&&(ke(s.value,l),n.unregisterResizeCallback=()=>{s.value&&Ee(s.value,l)}),l())},j=()=>{var r;(r=n.unregisterResizeCallback)==null||r.call(n)},g=()=>!(!t.maxLines&&!t.maxHeight)&&!!s.value&&(!!(t.maxLines&&k()>t.maxLines)||!!(t.maxHeight&&s.value.scrollHeight>s.value.offsetHeight)),k=()=>o.value?Object.keys(Array.prototype.slice.call(o.value.getClientRects()).reduce((r,{top:x,bottom:f})=>{const m=`${x}/${f}`;return r[m]||(r[m]=!0),r},{})).length:0,E=(...r)=>{const[x=0,f=n.offset]=r;if(f-x<=3)return void le();const m=Math.floor((f+x)/2);P(m),g()?E(x,m):E(m,f)},P=r=>{n.offset=r,d()},le=()=>{de(),ce()},de=()=>{for(;(!g()||k()<2)&&n.offset<t.text.length;)D(1)},ce=()=>{for(;g()&&k()>1&&n.offset>0;)D(-1)},D=r=>{P(n.offset+r)},u=h(()=>!!t.text&&n.offset!==t.text.length);_(()=>u.value,r=>{setTimeout(()=>{a("clamp-change",r)},0)},{immediate:!0});const pe=h(()=>u.value?ue.value:t.text),ue=h(()=>{if(t.location==="start")return t.ellipsis+(t.text.slice(-n.offset)||"").trim();if(t.location==="middle"){const r=Math.floor(n.offset/2);return(t.text.slice(0,r)||"").trim()+t.ellipsis+(t.text.slice(-r)||"").trim()}return(t.text.slice(0,n.offset)||"").trim()+t.ellipsis}),V=()=>{n.localExpanded=!0},W=()=>{n.localExpanded=!1},I=()=>{n.localExpanded=!n.localExpanded};return _(()=>t.expanded,r=>{n.localExpanded=r}),_(()=>n.localExpanded,r=>{r?P(t.text.length):l(),t.expanded!==r&&a("update:expanded",r)}),_(()=>[t.maxLines,t.maxHeight,t.ellipsis,t.location,u.value].join(),()=>{X(()=>{l()})}),_(()=>[t.text,t.autoResize].join(),()=>{X(()=>{c()})}),me(()=>{j()}),_e(()=>{c()}),(r,x)=>(H(),se("div",{ref_key:"textClampRef",ref:s,class:"text-clamp",style:fe({overflow:"hidden",maxHeight:w(p)})},[U("span",{ref_key:"contentRef",ref:o},[q(r.$slots,"before",{expand:V,collapse:W,toggle:I,clamped:w(u),expanded:n.localExpanded}),U("span",{ref_key:"textRef",ref:i,"aria-label":e.text},null,8,He),q(r.$slots,"after",{expand:V,collapse:W,toggle:I,clamped:w(u),expanded:n.localExpanded})],512)],4))}});ie.__file="package/text-clamp.vue";const qe=e=>(e.install=function(a){a.component(e.__name,e)},e),Oe=qe(ie),Ae=3,Me="... ",$e=["aria-expanded","onClick"],T=ne({name:"PzTextClamp",__name:"PzTextClamp",props:{text:{},maxContentLines:{default:Ae},clampPostfix:{default:Me},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,s=a,o=n=>{s("update:expanded",n)},i=n=>{s("clamp-change",n)};return(n,p)=>(H(),ge(w(Oe),{text:t.text,"max-lines":t.maxContentLines,ellipsis:t.clampPostfix,expanded:t.expanded,"auto-resize":t.autoResize,class:"pz-text-clamp","onUpdate:expanded":o,onClampChange:i},{after:he(({toggle:d,expanded:l,clamped:c})=>[q(n.$slots,"toggle",{toggle:d,expanded:l,clamped:c},()=>[c||l?(H(),se("button",{key:0,type:"button",class:ze(["pz-text-clamp__toggle",t.btnClass]),"aria-expanded":l,onClick:ve(d,["stop"])},be(l?t.collapseLabel:t.expandLabel),11,$e)):ye("",!0)],!0)]),_:3},8,["text","max-lines","ellipsis","expanded","auto-resize"]))}}),M=we(T,[["__scopeId","data-v-17225f94"]]);T.__docgenInfo=Object.assign({displayName:T.name??T.__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/PzTextClamp/PzTextClamp.vue"]});const $=[{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}],Be=e=>`<template>
|
|
2
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
3
|
</template>`,Fe=()=>`<template>
|
|
4
4
|
<PzTextClamp
|
|
@@ -92,7 +92,7 @@ import{d as ne,P as xe,L as _,Q as me,E as _e,o as q,e as se,y as U,r as H,k as
|
|
|
92
92
|
</div>
|
|
93
93
|
</section>
|
|
94
94
|
</div>
|
|
95
|
-
`})};var Q,G
|
|
95
|
+
`})};var J,Q,G;z.parameters={...z.parameters,docs:{...(J=z.parameters)==null?void 0:J.docs,source:{originalSource:"{}",...(G=(Q=z.parameters)==null?void 0:Q.docs)==null?void 0:G.source}}};var K,Y,Z;b.parameters={...b.parameters,docs:{...(K=b.parameters)==null?void 0:K.docs,source:{originalSource:`{
|
|
96
96
|
args: {
|
|
97
97
|
text: clampStories[0].text,
|
|
98
98
|
maxContentLines: 2,
|
package/dist/app/assets/{PzValidatorXSS.stories-DqA_mla7.js → PzValidatorXSS.stories-HZEissEy.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{r as c,g as z}from"./iframe-B7Bddli1.js";import{P as u}from"./PzText-Qtpayc5y.js";import"./preload-helper-C1FmrZbK.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}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{P as n}from"./PzText-
|
|
1
|
+
import{P as n}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./preload-helper-C1FmrZbK.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."}]}],d={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}},template:`
|
|
2
2
|
<div class="spacing-foundation">
|
|
3
3
|
<section class="spacing-foundation-board">
|
|
4
4
|
<header class="spacing-foundation-hero">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{P as p}from"./PzText-
|
|
1
|
+
import{P as p}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./preload-helper-C1FmrZbK.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)}],m={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/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
2
|
<div class="pz-text-board">
|
|
3
3
|
<section class="pz-text-board-hero">
|
|
4
4
|
<div class="pz-text-board-hero-copy">
|