import{r as c,w as _}from"./iframe-Bl-fVlm8.js";import{I as r,a as L,P as i}from"./PzListNav-DBS8u2z6.js";import"./preload-helper-C1FmrZbK.js";import"./PzSelect-CwWCI-kq.js";import"./index-pk-yyh3_.js";import"./floating-vue-C5xzxu-B.js";import"./lodash-CdDiHlzQ.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./PzIcon-cRuuou9i.js";import"./PzLabel-avnfC9tn.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./PzPagination-Cjg8KFKz.js";const S="<\/script>",h=e=>{const t=[`:total="${e.total}"`,e.selectLabel?`:select-label="'${e.selectLabel}'"`:null,e.perPage!==r.TEN?`:per-page="${e.perPage}"`:null,e.currentPage&&e.currentPage!==1?`:current-page="${e.currentPage}"`:null,'@on-input="range = $event"'].filter(p=>!!p).join(`
    `);return`<script setup lang="ts">
import { ref } from "vue";
const range = ref<[number, number]>([0, 10]);
${S}

<template>
  <PzListNav
    ${t}
  />
</template>`},y={title:"Components/Navigation/PzListNav",component:i,parameters:{docs:{description:{component:"Use `PzListNav` to combine pagination with a per-page selector. Emits `onInput` with a `[firstIndex, lastIndex]` range to slice your data array, and `onChangePerPage` whenever the active page or page size changes."},source:{transform:(e,t)=>h(t.args??y.args)}}},args:{total:100,selectLabel:"Показати рядків:",perPage:r.TEN,currentPage:1,options:L},argTypes:{total:{control:{type:"number",min:0},description:"Total items count."},perPage:{control:{type:"number",min:1},description:"Items per page (initial value)."},currentPage:{control:{type:"number",min:1},description:"Initial active page (1-indexed)."},selectLabel:{control:"text",description:"Label for the per-page select."},options:{control:"object",description:"Array of `PzFormSelectOption` for the per-page dropdown."}},render(e){return{components:{pzListNav:i},setup(){const t=c(e.total),p=c([0,e.perPage??r.TEN]);return _(()=>e.total,f=>{t.value=f}),{args:e,total:t,range:p}},template:`
        <div class="sb-list-nav-story">
          <pz-list-nav
            :total="total"
            :select-label="args.selectLabel"
            :per-page="args.perPage"
            :current-page="args.currentPage"
            :options="args.options"
            @on-input="range = $event"
          />
        </div>
      `}}},a={},o={args:{total:1e3,perPage:r.TWENTY}},s={args:{total:8,perPage:r.TEN}},n={args:{total:250,perPage:r.FIFTY}};var l,m,g;a.parameters={...a.parameters,docs:{...(l=a.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(g=(m=a.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var u,P,d;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
  args: {
    total: 1000,
    perPage: ITEMS_PER_PAGE.TWENTY
  }
}`,...(d=(P=o.parameters)==null?void 0:P.docs)==null?void 0:d.source}}};var E,T,v;s.parameters={...s.parameters,docs:{...(E=s.parameters)==null?void 0:E.docs,source:{originalSource:`{
  args: {
    total: 8,
    perPage: ITEMS_PER_PAGE.TEN
  }
}`,...(v=(T=s.parameters)==null?void 0:T.docs)==null?void 0:v.source}}};var b,I,N;n.parameters={...n.parameters,docs:{...(b=n.parameters)==null?void 0:b.docs,source:{originalSource:`{
  args: {
    total: 250,
    perPage: ITEMS_PER_PAGE.FIFTY
  }
}`,...(N=(I=n.parameters)==null?void 0:I.docs)==null?void 0:N.source}}};const O=["Default","LargeDataset","FewItems","CustomPerPage"];export{n as CustomPerPage,a as Default,s as FewItems,o as LargeDataset,O as __namedExportsOrder,y as default};
