import{P}from"./PzLink-DjFfrqMo.js";import{P as S}from"./PzTag-m9mEWusc.js";import{P as r}from"./PzText-D5PUnIjq.js";import{P as k,a as i}from"./PzTable-DBoLxbsv.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./lodash-CdDiHlzQ.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./PzInfoHint-DKG3kEnA.js";import"./PzIcon-cRuuou9i.js";import"./PzHint-DsiQRpYG.js";import"./floating-vue-C5xzxu-B.js";import"./floating-vue-ByDoVj13.js";const l=k,w=k,C=[{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}],T=[{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"}],x=[{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}],W=T.map(t=>({...t,price:null})),L=[{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}],D=[{id:"payment-1",event:"Оплата",type:"Пiсляоплата",reason:"поставка товару",period:10,daysType:"робочі",amount:100},{id:"payment-2",event:"Поставка",type:"Одноразова поставка",reason:"подання заявки",period:10,daysType:"робочі",amount:100}],A=[{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}],U=[{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"}],E=`<template>
  <PzTable
    :config="config"
    :data="data"
  />
</template>

<script setup lang="ts">
import type { PzTableColumn, PzTableRow } from "@prozorro/prozorro-ui";

const config: PzTableColumn[] = [
  { 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 },
];

const data: PzTableRow[] = [
  {
    id: "item-1",
    name: "Швидкозшивач пласт. E31509, 31511",
    classification: "ДК 021:2015: 30190000-7 — Офісне устаткування та приладдя різне",
    quantity: "100 штука",
    deliveryLocation: "79025, Україна, Львівська область, Львів, вул.Левандівська, будинок 17-В",
    deliveryDate: "до 30 грудня 2026",
  },
];
<\/script>`,H=`<template>
  <PzTable
    :config="config"
    :data="data"
  >
    <template #supplier="{ data }">
      <PzLink :href="getSupplierHref(data.supplier)" bold>
        {{ getSupplierName(data.supplier) }}
      </PzLink>
    </template>

    <template #amount="{ value }">
      {{ formatCurrency(value) }}
    </template>

    <template #statusLabel="{ data }">
      <PzTag :variant="getStatusVariant(data.status)">
        {{ data.statusLabel }}
      </PzTag>
    </template>
  </PzTable>
</template>`,X={title:"Components/Data/PzTable",component:w,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:C,data:T,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."}}},a={parameters:{docs:{source:{code:E}}},render:t=>({components:{pzTable:l,pzText:r},setup(){return{args:t}},template:`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-header">
            <div class="pz-table-story-copy">
              <span class="pz-table-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Procurement table</pz-text>
            </div>
            <span class="pz-table-story-chip">{{ args.config.length }} columns</span>
          </div>

          <div class="pz-table-story-preview">
            <pz-table v-bind="args" />
          </div>
        </section>

        <section class="pz-table-story-grid">
          <article class="pz-table-story-card">
            <span class="pz-table-story-card-kicker">Technical notes</span>
            <ul class="pz-table-story-list">
              <li><code>config[].key</code> maps each cell to a row field.</li>
              <li><code>config[].colWidth</code> keeps the desktop column proportions stable.</li>
              <li>Named slots use the same name as <code>config[].key</code>, for example <code>#supplier</code> or <code>#statusLabel</code>.</li>
              <li>Below the <code>lg</code> breakpoint the row stacks and uses mobile titles inside each cell.</li>
            </ul>
          </article>

          <article class="pz-table-story-card">
            <span class="pz-table-story-card-kicker">Behavior</span>
            <ul class="pz-table-story-list">
              <li>The first column can be emphasized through <code>isBoldFirstColumn</code>.</li>
              <li><code>defaultValue</code> prevents empty cells from collapsing visually.</li>
              <li>The component keeps semantic table markup on desktop.</li>
              <li>Header hints are supported with the same <code>PzInfoHint</code> content model used elsewhere.</li>
            </ul>
          </article>
        </section>
      </div>
    `})},n={render:()=>({components:{pzTable:l,pzText:r},setup(){return{procurementWithPriceConfig:x,procurementWithPriceData:W}},template:`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-copy">
            <span class="pz-table-story-eyebrow">Usage example</span>
            <pz-text variant="h4-bold">Same layout with an additional price column</pz-text>
          </div>

          <div class="pz-table-story-preview">
            <pz-table
              :config="procurementWithPriceConfig"
              :data="procurementWithPriceData"
            />
          </div>
        </section>
      </div>
    `})},o={render:()=>({components:{pzTable:l,pzText:r},setup(){return{paymentConfig:L,paymentData:D}},template:`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-copy">
            <span class="pz-table-story-eyebrow">Usage example</span>
            <pz-text variant="h4-bold">Compact payment schedule data</pz-text>
          </div>

          <div class="pz-table-story-preview">
            <pz-table
              :config="paymentConfig"
              :data="paymentData"
            />
          </div>
        </section>
      </div>
    `})},s={parameters:{docs:{source:{code:H}}},render:()=>({components:{pzLink:P,pzTable:l,pzTag:S,pzText:r},setup(){const t=e=>typeof e=="object"&&e!==null?e:{};return{contractsConfig:A,contractsData:U,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:`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-copy">
            <span class="pz-table-story-eyebrow">Usage example</span>
            <pz-text variant="h4-bold">Custom cell slots</pz-text>
          </div>

          <div class="pz-table-story-preview">
            <pz-table
              :config="contractsConfig"
              :data="contractsData"
            >
              <template #supplier="{ data }">
                <div class="pz-table-story-cell-stack">
                  <pz-link :href="getSupplierHref(data.supplier)" bold>
                    {{ getSupplierName(data.supplier) }}
                  </pz-link>
                  <span class="pz-table-story-muted">Профіль постачальника</span>
                </div>
              </template>

              <template #amount="{ value }">
                {{ formatCurrency(value) }}
              </template>

              <template #statusLabel="{ data }">
                <pz-tag :variant="getStatusVariant(data.status)">
                  {{ data.statusLabel }}
                </pz-tag>
              </template>
            </pz-table>
          </div>
        </section>
      </div>
    `})};var c,p,d;a.parameters={...a.parameters,docs:{...(c=a.parameters)==null?void 0:c.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: playgroundSource
      }
    }
  },
  render: (args: PzTableStoryArgs) => ({
    components: {
      pzTable: pzTableStoryComponent,
      pzText: PzText
    },
    setup() {
      return {
        args
      };
    },
    template: \`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-header">
            <div class="pz-table-story-copy">
              <span class="pz-table-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Procurement table</pz-text>
            </div>
            <span class="pz-table-story-chip">{{ args.config.length }} columns</span>
          </div>

          <div class="pz-table-story-preview">
            <pz-table v-bind="args" />
          </div>
        </section>

        <section class="pz-table-story-grid">
          <article class="pz-table-story-card">
            <span class="pz-table-story-card-kicker">Technical notes</span>
            <ul class="pz-table-story-list">
              <li><code>config[].key</code> maps each cell to a row field.</li>
              <li><code>config[].colWidth</code> keeps the desktop column proportions stable.</li>
              <li>Named slots use the same name as <code>config[].key</code>, for example <code>#supplier</code> or <code>#statusLabel</code>.</li>
              <li>Below the <code>lg</code> breakpoint the row stacks and uses mobile titles inside each cell.</li>
            </ul>
          </article>

          <article class="pz-table-story-card">
            <span class="pz-table-story-card-kicker">Behavior</span>
            <ul class="pz-table-story-list">
              <li>The first column can be emphasized through <code>isBoldFirstColumn</code>.</li>
              <li><code>defaultValue</code> prevents empty cells from collapsing visually.</li>
              <li>The component keeps semantic table markup on desktop.</li>
              <li>Header hints are supported with the same <code>PzInfoHint</code> content model used elsewhere.</li>
            </ul>
          </article>
        </section>
      </div>
    \`
  })
}`,...(d=(p=a.parameters)==null?void 0:p.docs)==null?void 0:d.source}}};var m,u,y;n.parameters={...n.parameters,docs:{...(m=n.parameters)==null?void 0:m.docs,source:{originalSource:`{
  render: () => ({
    components: {
      pzTable: pzTableStoryComponent,
      pzText: PzText
    },
    setup() {
      return {
        procurementWithPriceConfig,
        procurementWithPriceData
      };
    },
    template: \`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-copy">
            <span class="pz-table-story-eyebrow">Usage example</span>
            <pz-text variant="h4-bold">Same layout with an additional price column</pz-text>
          </div>

          <div class="pz-table-story-preview">
            <pz-table
              :config="procurementWithPriceConfig"
              :data="procurementWithPriceData"
            />
          </div>
        </section>
      </div>
    \`
  })
}`,...(y=(u=n.parameters)==null?void 0:u.docs)==null?void 0:y.source}}};var b,z,v;o.parameters={...o.parameters,docs:{...(b=o.parameters)==null?void 0:b.docs,source:{originalSource:`{
  render: () => ({
    components: {
      pzTable: pzTableStoryComponent,
      pzText: PzText
    },
    setup() {
      return {
        paymentConfig,
        paymentData
      };
    },
    template: \`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-copy">
            <span class="pz-table-story-eyebrow">Usage example</span>
            <pz-text variant="h4-bold">Compact payment schedule data</pz-text>
          </div>

          <div class="pz-table-story-preview">
            <pz-table
              :config="paymentConfig"
              :data="paymentData"
            />
          </div>
        </section>
      </div>
    \`
  })
}`,...(v=(z=o.parameters)==null?void 0:z.docs)==null?void 0:v.source}}};var g,h,f;s.parameters={...s.parameters,docs:{...(g=s.parameters)==null?void 0:g.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: customSlotsSource
      }
    }
  },
  render: () => ({
    components: {
      pzLink: PzLink,
      pzTable: pzTableStoryComponent,
      pzTag: PzTag,
      pzText: PzText
    },
    setup() {
      const getSupplierRecord = (value: unknown): Record<string, unknown> => typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
      const getSupplierName = (value: unknown): string => String(getSupplierRecord(value).name ?? PZ_TABLE_DEFAULT_EMPTY_VALUE);
      const getSupplierHref = (value: unknown): string => String(getSupplierRecord(value).href ?? "#");
      const formatCurrency = (value: unknown): string => {
        if (typeof value !== "number") {
          return PZ_TABLE_DEFAULT_EMPTY_VALUE;
        }
        return \`\${new Intl.NumberFormat("uk-UA").format(value)} грн\`;
      };
      const getStatusVariant = (value: unknown): "green" | "blue" | "grey" => {
        if (value === "active") {
          return "green";
        }
        if (value === "hidden") {
          return "blue";
        }
        return "grey";
      };
      return {
        contractsConfig,
        contractsData,
        formatCurrency,
        getStatusVariant,
        getSupplierHref,
        getSupplierName
      };
    },
    template: \`
      <div class="pz-table-story">
        <section class="pz-table-story-board">
          <div class="pz-table-story-copy">
            <span class="pz-table-story-eyebrow">Usage example</span>
            <pz-text variant="h4-bold">Custom cell slots</pz-text>
          </div>

          <div class="pz-table-story-preview">
            <pz-table
              :config="contractsConfig"
              :data="contractsData"
            >
              <template #supplier="{ data }">
                <div class="pz-table-story-cell-stack">
                  <pz-link :href="getSupplierHref(data.supplier)" bold>
                    {{ getSupplierName(data.supplier) }}
                  </pz-link>
                  <span class="pz-table-story-muted">Профіль постачальника</span>
                </div>
              </template>

              <template #amount="{ value }">
                {{ formatCurrency(value) }}
              </template>

              <template #statusLabel="{ data }">
                <pz-tag :variant="getStatusVariant(data.status)">
                  {{ data.statusLabel }}
                </pz-tag>
              </template>
            </pz-table>
          </div>
        </section>
      </div>
    \`
  })
}`,...(f=(h=s.parameters)==null?void 0:h.docs)==null?void 0:f.source}}};const ee=["Playground","ProcurementWithPrice","PaymentSchedule","CustomSlots"];export{s as CustomSlots,o as PaymentSchedule,a as Playground,n as ProcurementWithPrice,ee as __namedExportsOrder,X as default};
