import{e as w,f as i,F as k,u as C,g as b,o as n,q as p,y as g,C as S,t as _,J as v,p as R,r as f,w as O}from"./iframe-Bl-fVlm8.js";import{P as $}from"./PzLabel-avnfC9tn.js";import{P as L}from"./PzText-D5PUnIjq.js";import{_ as q}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const B=["aria-disabled"],N=["for"],A=["id","name","value","checked","disabled","onChange"],F={class:"pz-radio-group-label"},I={key:0,class:"pz-radio-group-content"},c=w({name:"PzRadioGroup",__name:"PzRadioGroup",props:{modelValue:{type:[String,Number,Boolean],default:void 0},name:{},disabled:{type:Boolean,default:!1},mode:{default:"default"},options:{default:()=>[]},optionClass:{default:""}},emits:["update:modelValue"],setup(e,{emit:s}){const l=e,m=s,V=o=>Object.is(l.modelValue,o),G=o=>m("update:modelValue",o),T=(o,d)=>o.id??`${l.name}-${String(d+1)}`,t=(o,d)=>({option:o,value:o.value,checked:V(o.value),disabled:!!(l.disabled||o.disabled),id:T(o,d),name:l.name});return(o,d)=>(n(),i("div",{class:b(["pz-radio-group",e.mode]),"aria-disabled":e.disabled,role:"radiogroup"},[(n(!0),i(k,null,C(e.options,(a,r)=>(n(),i("label",{key:t(a,r).id,class:b(["pz-radio-group-option",[e.optionClass,{disabled:t(a,r).disabled}]]),for:t(a,r).id},[p("input",{id:t(a,r).id,name:e.name,value:String(a.value),checked:t(a,r).checked,disabled:t(a,r).disabled,type:"radio",class:"pz-radio-group-input",onChange:J=>G(a.value)},null,40,A),d[0]||(d[0]=p("span",{class:"pz-radio-group-control","aria-hidden":"true"},[p("span",{class:"pz-radio-group-dot"})],-1)),p("span",F,[g(o.$slots,"default",v({ref_for:!0},t(a,r)),()=>[S(_(a.label),1)],!0)]),o.$slots.content&&t(a,r).checked?(n(),i("div",I,[g(o.$slots,"content",v({ref_for:!0},t(a,r)),void 0,!0)])):R("",!0)],10,N))),128))],10,B))}}),z=q(c,[["__scopeId","data-v-21d7c0d8"]]);c.__docgenInfo=Object.assign({displayName:c.name??c.__name},{name:"PzRadioGroup",exportName:"default",displayName:"PzRadioGroup",description:"",tags:{},props:[{name:"modelValue",required:!1,type:{name:"PzRadioGroupValue"},defaultValue:{func:!1,value:"undefined"}},{name:"name",required:!0,type:{name:"string"}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"mode",required:!1,type:{name:"union",elements:[{name:'"default"'},{name:'"accordion"'}]},defaultValue:{func:!1,value:'"default"'}},{name:"options",required:!0,type:{name:"Array",elements:[{name:"PzRadioGroupOption"}]},defaultValue:{func:!1,value:"() => []"}},{name:"optionClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}}],slots:[{name:"default",scoped:!0,bindings:[]},{name:"content",scoped:!0,bindings:[]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzRadioGroup/PzRadioGroup.vue"]});const y=[{label:"Text radiobutton",value:"one"},{label:"Text radiobutton",value:"two"},{label:"Text radiobutton",value:"three"},{label:"Text radiobutton",value:"four"}],j=[{label:"Text radiobutton",value:"one"},{label:"Text checkboxText checkboxText checkbox",value:"two"},{label:"Text radiobutton",value:"three"},{label:"Text radiobutton",value:"four"},{label:"Text radiobutton",value:"five"}],D=e=>{const s=[`name="${e.name}"`,e.mode!=="default"?`mode="${e.mode}"`:null,e.disabled?':disabled="true"':null].filter(l=>!!l).join(" ");return`<template>
  <PzLabel label="${e.heading}">
    <PzRadioGroup
      v-model="selectedValue"
      ${s}
      :options="options"
    />
  </PzLabel>
</template>

<script setup lang="ts">
import { ref } from "vue";

const options = [
  { label: "Text radiobutton", value: "one" },
  { label: "Text radiobutton", value: "two" },
  { label: "Text radiobutton", value: "three" },
];

const selectedValue = ref("two");
<\/script>`},E={title:"Components/Form/PzRadioGroup",component:z,parameters:{docs:{description:{component:"Use `PzRadioGroup` for single-choice lists backed by one primitive `value`. The component keeps the legacy accordion content pattern, but aligns the API and styling with the current `Pz*` form controls."},source:{transform:(e,s)=>D(s.args??E.args)}}},args:{heading:"Назва поля",modelValue:"two",options:y,name:"radio-group-story",mode:"default",disabled:!1,optionClass:""},argTypes:{modelValue:{control:!1,description:"Selected option value."},options:{control:!1,description:"Array of radio options with `label`, `value`, and optional `disabled`/`id`."},name:{control:"text",description:"Shared native input name."},mode:{control:"inline-radio",options:["default","accordion"],description:"Default stacked list or separated accordion-style list."},disabled:{control:"boolean",description:"Disables every option in the group."},optionClass:{control:"text",description:"Optional additional class applied to each option wrapper."},heading:{control:"text",description:"Story-only field label shown through `PzLabel`.",table:{category:"Story"}}},render:e=>({components:{pzLabel:$,pzRadioGroup:z,pzText:L},setup(){const s=f(e.modelValue),l=f("two");return O(()=>e.modelValue,m=>{s.value=m}),{args:e,accordionValue:l,longLabelOptions:j,radioOptions:y,selectedValue:s}},template:`
      <div class="pz-radio-group-story">
        <section class="pz-radio-group-story-board">
          <div class="pz-radio-group-story-header">
            <div>
              <span class="pz-radio-group-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Single-choice group with checkbox-aligned styling</pz-text>
            </div>
          </div>

          <div class="pz-radio-group-story-preview">
            <div class="pz-radio-group-story-field">
              <pz-label :label="args.heading">
                <pz-radio-group
                  v-model="selectedValue"
                  :name="args.name"
                  :mode="args.mode"
                  :disabled="args.disabled"
                  :options="args.options"
                  :option-class="args.optionClass"
                />
              </pz-label>
            </div>
          </div>
        </section>

        <section class="pz-radio-group-story-gallery">
          <div class="pz-radio-group-story-header">
            <div>
              <span class="pz-radio-group-story-eyebrow">Patterns</span>
              <pz-text variant="h4-bold">Spacing, long labels, and expandable content</pz-text>
            </div>
          </div>

          <div class="pz-radio-group-story-grid">
            <article class="pz-radio-group-story-card">
              <pz-radio-group
                name="radioGroup-1"
                model-value="one"
                :options="[{ label: 'Text radiobutton', value: 'one' }]"
              />
              <span class="pz-radio-group-story-note">Найпростіший випадок: одна опція для single-choice сценарію.</span>
            </article>

            <article class="pz-radio-group-story-card">
              <pz-radio-group
                name="radioGroup-2"
                model-value="two"
                :options="radioOptions.slice(0, 2)"
              />
              <span class="pz-radio-group-story-note">Дві опції показують базовий вертикальний ритм групи та відступ 8px між елементами.</span>
            </article>

            <article class="pz-radio-group-story-card">
              <pz-radio-group
                name="radioGroup-3"
                model-value="two"
                :options="radioOptions.slice(0, 3)"
              />
              <span class="pz-radio-group-story-note">Три опції відтворюють типовий список вибору для коротких переліків.</span>
            </article>

            <article class="pz-radio-group-story-card">
              <pz-radio-group
                name="radioGroup-4"
                model-value="three"
                :options="radioOptions"
              />
              <span class="pz-radio-group-story-note">Чотири опції показують, як компонент масштабується до повнішої групи без зміни стилю.</span>
            </article>

            <article class="pz-radio-group-story-card">
              <pz-radio-group
                name="radioGroup-5"
                model-value="two"
                :options="longLabelOptions"
              />
              <span class="pz-radio-group-story-note">Довгий label перевіряє перенесення тексту та стабільне вирівнювання radio-control.</span>
            </article>

            <article class="pz-radio-group-story-card">
              <pz-radio-group
                v-model="accordionValue"
                name="radioGroup-6"
                mode="accordion"
                :options="[
                  { label: 'Оплата після поставки', value: 'postpaid' },
                  { label: 'Попередня оплата', value: 'prepaid' },
                ]"
              >
                <template #content="{ value }">
                  <span class="pz-radio-group-story-note">
                    {{ value === 'prepaid' ? 'Покажіть додаткові поля для передоплати.' : 'Покажіть умови післяплати.' }}
                  </span>
                </template>
              </pz-radio-group>
              <span class="pz-radio-group-story-note">Accordion-режим відкриває додатковий контент тільки для обраної опції.</span>
            </article>
          </div>
        </section>
      </div>
    `})},u={parameters:{docs:{description:{story:"Інтерактивний приклад групи radio buttons. Gallery нижче пояснює різну кількість опцій, довгі назви та accordion-режим для пов’язаного контенту."}}}};var h,P,x;u.parameters={...u.parameters,docs:{...(h=u.parameters)==null?void 0:h.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Інтерактивний приклад групи radio buttons. Gallery нижче пояснює різну кількість опцій, довгі назви та accordion-режим для пов’язаного контенту."
      }
    }
  }
}`,...(x=(P=u.parameters)==null?void 0:P.docs)==null?void 0:x.source}}};const Q=["Playground"];export{u as Playground,Q as __namedExportsOrder,E as default};
