import{r as e,w as m}from"./iframe-Bl-fVlm8.js";import{P as v}from"./PzText-D5PUnIjq.js";import{P as s}from"./PzPagination-Cjg8KFKz.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./PzIcon-cRuuou9i.js";const l=2,z=50,y=100,P=3,b="<\/script>",f=a=>{const t=[':model-value="currentPage"',`:total="${a.total}"`,`:per-page="${a.perPage}"`,a.radius!==l?`:radius="${a.radius}"`:null,'@update:model-value="currentPage = $event"'].filter(r=>!!r).join(`
    `);return`<script setup lang="ts">
import { ref } from "vue";
const currentPage = ref(${a.modelValue});
${b}

<template>
  <PzPagination
    ${t}
  />
</template>`},h={title:"Components/Navigation/PzPagination",component:s,parameters:{docs:{description:{component:"Use `PzPagination` for navigating paginated content. The component shows prev/next arrows, the first and last page, a window of pages around the current, and collapsing dots for large ranges."},source:{transform:(a,t)=>f(t.args??h.args)}}},args:{modelValue:1,total:1e3,perPage:10,radius:l},argTypes:{modelValue:{control:{type:"number",min:1},description:"Current active page (use with `v-model`)."},total:{control:{type:"number",min:0},description:"Total number of items."},perPage:{control:{type:"number",min:1},description:"Number of items per page."},radius:{control:{type:"number",min:1,max:5},description:"Number of page buttons shown on each side of the current page."}},render:a=>({components:{pzPagination:s,pzText:v},setup(){const t=e(a.modelValue),r=e(1),c=e(z),g=e(y),d=e(P);return m(()=>a.modelValue,u=>{t.value=u}),{args:a,page:t,pageFirst:r,pageMiddle:c,pageLast:g,pageFew:d}},template:`
      <div class="pz-pagination-story">
        <section class="pz-pagination-story-board">
          <div class="pz-pagination-story-header">
            <div>
              <span class="pz-pagination-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Page navigation</pz-text>
            </div>
            <span class="pz-pagination-story-chip">page {{ page }} / {{ Math.ceil(args.total / args.perPage) }}</span>
          </div>

          <div class="pz-pagination-story-preview">
            <div class="pz-pagination-story-current">
              <span class="pz-pagination-story-current-label">Current page:</span>
              <strong class="pz-pagination-story-current-value">{{ page }}</strong>
            </div>
            <pz-pagination
              v-model="page"
              :total="args.total"
              :per-page="args.perPage"
              :radius="args.radius"
            />
          </div>
        </section>

        <section class="pz-pagination-story-gallery">
          <div class="pz-pagination-story-header">
            <div>
              <span class="pz-pagination-story-eyebrow">States</span>
              <pz-text variant="h4-bold">Page position variants</pz-text>
            </div>
          </div>

          <div class="pz-pagination-story-grid">
            <article class="pz-pagination-story-card">
              <p class="pz-pagination-story-card-label">First page — right dots visible</p>
              <div class="pz-pagination-story-current">
                <span class="pz-pagination-story-current-label">Current page:</span>
                <strong class="pz-pagination-story-current-value">{{ pageFirst }}</strong>
              </div>
              <pz-pagination v-model="pageFirst" :total="1000" :per-page="10" />
            </article>

            <article class="pz-pagination-story-card">
              <p class="pz-pagination-story-card-label">Middle page — both dots visible</p>
              <div class="pz-pagination-story-current">
                <span class="pz-pagination-story-current-label">Current page:</span>
                <strong class="pz-pagination-story-current-value">{{ pageMiddle }}</strong>
              </div>
              <pz-pagination v-model="pageMiddle" :total="1000" :per-page="10" />
            </article>

            <article class="pz-pagination-story-card">
              <p class="pz-pagination-story-card-label">Last page — left dots visible</p>
              <div class="pz-pagination-story-current">
                <span class="pz-pagination-story-current-label">Current page:</span>
                <strong class="pz-pagination-story-current-value">{{ pageLast }}</strong>
              </div>
              <pz-pagination v-model="pageLast" :total="1000" :per-page="10" />
            </article>

            <article class="pz-pagination-story-card">
              <p class="pz-pagination-story-card-label">Few pages — no dots</p>
              <div class="pz-pagination-story-current">
                <span class="pz-pagination-story-current-label">Current page:</span>
                <strong class="pz-pagination-story-current-value">{{ pageFew }}</strong>
              </div>
              <pz-pagination v-model="pageFew" :total="50" :per-page="10" />
            </article>
          </div>
        </section>
      </div>
    `})},n={};var o,i,p;n.parameters={...n.parameters,docs:{...(o=n.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(p=(i=n.parameters)==null?void 0:i.docs)==null?void 0:p.source}}};const E=["Playground"];export{n as Playground,E as __namedExportsOrder,h as default};
