import{P as _}from"./PzText-D5PUnIjq.js";import{e as b,x as G,A as v,g as h,z as I,c as C,o as $,y as L}from"./iframe-Bl-fVlm8.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const c=[1,2,3,4,5,6,8,12,"full"],T=["div","section","article","main","aside","header","footer","nav","ul","ol"],o=b({name:"PzGrid",__name:"PzGrid",props:{as:{default:"div"},container:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},grid:{type:Boolean,default:!0},fit:{type:Boolean,default:!1},dense:{type:Boolean,default:!1}},setup(t){const e=t,a=C(()=>[{"pz-container":e.container&&!e.fluid,"pz-container-fluid":e.container&&e.fluid,"pz-grid":e.grid,"pz-grid-fit":e.grid&&e.fit,"pz-grid-dense":e.grid&&e.dense}]);return(n,i)=>($(),G(I(e.as),{class:h(a.value)},{default:v(()=>[L(n.$slots,"default")]),_:3},8,["class"]))}});o.__docgenInfo=Object.assign({displayName:o.name??o.__name},{name:"PzGrid",exportName:"default",displayName:"PzGrid",description:"",tags:{},props:[{name:"as",required:!1,type:{name:"PzGridTag"},defaultValue:{func:!1,value:'"div"'}},{name:"container",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"fluid",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"grid",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"fit",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"dense",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Layouts/PzGrid/PzGrid.vue"]});const u=b({name:"PzGridItem",__name:"PzGridItem",props:{as:{default:"div"},span:{default:void 0},sm:{default:void 0},md:{default:void 0},lg:{default:void 0},xl:{default:void 0},xxl:{default:void 0},start:{default:void 0},startSm:{default:void 0},startMd:{default:void 0},startLg:{default:void 0},startXl:{default:void 0},startXxl:{default:void 0}},setup(t){const e=t,a=(d,s)=>s?s==="full"?`pz-col-${d}full`:`pz-col-${d}${s}`:null,n=(d,s)=>s?`pz-start-${d}${s}`:null,i=C(()=>["pz-grid-item",a("",e.span),a("sm-",e.sm),a("md-",e.md),a("lg-",e.lg),a("xl-",e.xl),a("xxl-",e.xxl),n("",e.start),n("sm-",e.startSm),n("md-",e.startMd),n("lg-",e.startLg),n("xl-",e.startXl),n("xxl-",e.startXxl)]);return(d,s)=>($(),G(I(e.as),{class:h(i.value)},{default:v(()=>[L(d.$slots,"default")]),_:3},8,["class"]))}});u.__docgenInfo=Object.assign({displayName:u.name??u.__name},{name:"PzGridItem",exportName:"default",displayName:"PzGridItem",description:"",tags:{},props:[{name:"as",required:!1,type:{name:"PzGridTag"},defaultValue:{func:!1,value:'"div"'}},{name:"span",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"sm",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"md",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"lg",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"xl",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"xxl",required:!1,type:{name:"PzGridColumnSpan"},defaultValue:{func:!1,value:"undefined"}},{name:"start",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startSm",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startMd",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startLg",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startXl",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}},{name:"startXxl",required:!1,type:{name:"PzGridColumnStart"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Layouts/PzGrid/PzGridItem.vue"]});const f={as:"section",container:!0,grid:!0,fit:!1,dense:!1,fluid:!1,heroSpan:4,sidebarSpan:4,metricSpan:2},r={hero:{md:8,xl:7},sidebar:{md:4,xl:5},metric:{md:4,xl:3},nested:{span:4,md:8,xl:6},nestedItem:{span:4,md:4,xl:6}},q=(t,e,a)=>typeof e>"u"?null:typeof e=="boolean"?e===a?null:e?t:`:${t}="false"`:typeof e=="number"?e===a?null:`:${t}="${e}"`:e===a?null:`${t}="${e}"`,l=t=>t.map(([e,a,n])=>q(e,a,n)).filter(e=>!!e).map(e=>`    ${e}`).join(`
`),E=t=>{const e=l([["as",t.as,"div"],["container",t.container,!1],["grid",t.grid,!0],["fluid",t.fluid,!1],["fit",t.fit,!1],["dense",t.dense,!1]]),a=l([["span",t.heroSpan],["md",r.hero.md],["xl",r.hero.xl]]),n=l([["span",t.sidebarSpan],["md",r.sidebar.md],["xl",r.sidebar.xl]]),i=l([["span",t.metricSpan],["md",r.metric.md],["xl",r.metric.xl]]);return`<template>
  <PzGrid
${e}
  >
    <PzGridItem
${a}
    >
      <PzText variant="h4-bold">Primary content area</PzText>
      <PzText variant="body-regular">
        PzGrid handles the container and grid contract while PzGridItem controls responsive span mapping.
      </PzText>
    </PzGridItem>

    <PzGridItem
${n}
    >
      <PzText variant="h4-semibold">Secondary rail</PzText>
      <PzText variant="body-regular">
        Sidebar content drops below the hero on mobile and returns to a right rail on desktop.
      </PzText>
    </PzGridItem>

    <PzGridItem
${i}
    >
      <PzText variant="body-semibold">Mobile columns</PzText>
    </PzGridItem>

    <PzGridItem
${i}
    >
      <PzText variant="body-semibold">Desktop columns</PzText>
    </PzGridItem>

    <PzGridItem
      :span="${r.nested.span}"
      :md="${r.nested.md}"
      :xl="${r.nested.xl}"
    >
      <PzText variant="h4-semibold">Nested grids use the same components.</PzText>

      <PzGrid>
        <PzGridItem
          :span="${r.nestedItem.span}"
          :md="${r.nestedItem.md}"
          :xl="${r.nestedItem.xl}"
        >
          Nested 1
        </PzGridItem>
        <PzGridItem
          :span="${r.nestedItem.span}"
          :md="${r.nestedItem.md}"
          :xl="${r.nestedItem.xl}"
        >
          Nested 2
        </PzGridItem>
      </PzGrid>
    </PzGridItem>
  </PzGrid>
</template>`},k={title:"Components/Layouts/PzGrid",component:o,parameters:{prototype:{caption:"Grid component",note:"Vue wrapper over the shared grid utility contract for container, grid, and responsive item spans."},docs:{description:{component:"Use `PzGrid` and `PzGridItem` when you want component-level layout composition instead of writing the emitted CSS utility classes directly."},source:{transform:(t,e)=>E(e.args??f)}}},args:f,argTypes:{as:{control:"select",options:T},container:{control:"boolean"},grid:{control:"boolean"},fluid:{control:"boolean"},fit:{control:"boolean"},dense:{control:"boolean"},heroSpan:{control:"select",options:c},sidebarSpan:{control:"select",options:c},metricSpan:{control:"select",options:c}},render:t=>({components:{pzGrid:o,pzGridItem:u,pzText:_},setup(){return{args:t,gridStoryExampleLayout:r}},template:`
      <div class="pz-grid-story">
        <pz-grid class="pz-grid-story-board">
          <pz-grid-item
            span="full"
            class="pz-grid-story-header"
          >
            <span class="pz-grid-story-kicker">Component API</span>
            <pz-text variant="h3-bold">Grid composition without manual utility strings</pz-text>
            <pz-text variant="body-regular">
              The wrapper components still use the shared CSS grid contract under the hood, but expose layout decisions as typed props.
            </pz-text>
          </pz-grid-item>
        </pz-grid>

        <pz-grid
          :as="args.as"
          :container="args.container"
          :grid="args.grid"
          :fluid="args.fluid"
          :fit="args.fit"
          :dense="args.dense"
          class="pz-grid-story-example"
        >
          <pz-grid-item
            :span="args.heroSpan"
            :md="gridStoryExampleLayout.hero.md"
            :xl="gridStoryExampleLayout.hero.xl"
            class="pz-grid-story-card"
            data-tone="accent"
          >
            <span class="pz-grid-story-chip">Hero</span>
            <pz-text variant="h4-bold">Primary content area</pz-text>
            <pz-text variant="body-regular">
              PzGrid handles the container and grid contract while PzGridItem controls responsive span mapping.
            </pz-text>
          </pz-grid-item>

          <pz-grid-item
            :span="args.sidebarSpan"
            :md="gridStoryExampleLayout.sidebar.md"
            :xl="gridStoryExampleLayout.sidebar.xl"
            class="pz-grid-story-card"
          >
            <span class="pz-grid-story-chip">Sidebar</span>
            <pz-text variant="h4-semibold">Secondary rail</pz-text>
            <pz-text variant="body-regular">
              Sidebar content drops below the hero on mobile and returns to a right rail on desktop.
            </pz-text>
          </pz-grid-item>

          <pz-grid-item
            :span="args.metricSpan"
            :md="gridStoryExampleLayout.metric.md"
            :xl="gridStoryExampleLayout.metric.xl"
            class="pz-grid-story-card"
            data-tone="success"
          >
            <span class="pz-grid-story-metric">4</span>
            <pz-text variant="body-semibold">Mobile columns</pz-text>
          </pz-grid-item>

          <pz-grid-item
            :span="args.metricSpan"
            :md="gridStoryExampleLayout.metric.md"
            :xl="gridStoryExampleLayout.metric.xl"
            class="pz-grid-story-card"
          >
            <span class="pz-grid-story-metric">12</span>
            <pz-text variant="body-semibold">Desktop columns</pz-text>
          </pz-grid-item>

          <pz-grid-item
            :span="gridStoryExampleLayout.nested.span"
            :md="gridStoryExampleLayout.nested.md"
            :xl="gridStoryExampleLayout.nested.xl"
            class="pz-grid-story-card"
          >
            <span class="pz-grid-story-chip">Nested</span>
            <pz-text variant="h4-semibold">Nested grids use the same components.</pz-text>

            <pz-grid class="pz-grid-story-nested">
              <pz-grid-item
                :span="gridStoryExampleLayout.nestedItem.span"
                :md="gridStoryExampleLayout.nestedItem.md"
                :xl="gridStoryExampleLayout.nestedItem.xl"
                class="pz-grid-story-nested-card"
              >
                Nested 1
              </pz-grid-item>
              <pz-grid-item
                :span="gridStoryExampleLayout.nestedItem.span"
                :md="gridStoryExampleLayout.nestedItem.md"
                :xl="gridStoryExampleLayout.nestedItem.xl"
                class="pz-grid-story-nested-card"
              >
                Nested 2
              </pz-grid-item>
            </pz-grid>
          </pz-grid-item>
        </pz-grid>
      </div>
    `})},p={name:"Component API"},m={name:"Auto Fit",args:{container:!0,fit:!0,heroSpan:4,sidebarSpan:4,metricSpan:4}};var z,g,y;p.parameters={...p.parameters,docs:{...(z=p.parameters)==null?void 0:z.docs,source:{originalSource:`{
  name: "Component API"
}`,...(y=(g=p.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};var x,P,S;m.parameters={...m.parameters,docs:{...(x=m.parameters)==null?void 0:x.docs,source:{originalSource:`{
  name: "Auto Fit",
  args: {
    container: true,
    fit: true,
    heroSpan: 4,
    sidebarSpan: 4,
    metricSpan: 4
  }
}`,...(S=(P=m.parameters)==null?void 0:P.docs)==null?void 0:S.source}}};const B=["ComponentApi","FitLayout"];export{p as ComponentApi,m as FitLayout,B as __namedExportsOrder,k as default};
