import{e as P,f as b,F as V,u as C,o as u,x as w,A as G,y as T,C as _,t as S,J as O,v as F,r as m,w as L}from"./iframe-Bl-fVlm8.js";import{P as A}from"./PzLabel-avnfC9tn.js";import{P as $}from"./PzText-D5PUnIjq.js";import{p as q}from"./configs-CZIaFchr.js";import{P as B}from"./PzCheckbox-cVcWZlwS.js";import{_ as I}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const N=["aria-disabled"],p=P({name:"PzCheckboxGroup",__name:"PzCheckboxGroup",props:{name:{},options:{default:()=>[]},modelValue:{default:()=>[]},disabled:{type:Boolean,default:!1},variant:{default:"checkbox"}},emits:["update:modelValue"],setup(a,{emit:l}){const o=a,i=l,d=e=>o.modelValue.includes(e),z=(e,s)=>{const t=s?[...o.modelValue,e]:o.modelValue.filter(r=>r!==e);i("update:modelValue",t)},f=(e,s)=>e.id??`${o.name??"pz-checkbox-group"}-${String(s+1)}`,c=(e,s)=>({option:e,value:e.value,checked:d(e.value),disabled:!!(o.disabled||e.disabled),id:f(e,s),name:o.name});return(e,s)=>(u(),b("div",{class:"pz-checkbox-group","aria-disabled":a.disabled,role:"group"},[(u(!0),b(V,null,C(a.options,(t,r)=>(u(),w(F(B),{id:c(t,r).id,key:c(t,r).id,name:o.name,value:t.value,variant:o.variant,label:t.label,disabled:c(t,r).disabled,"model-value":d(t.value),"onUpdate:modelValue":y=>z(t.value,y)},{default:G(()=>[T(e.$slots,"default",O({ref_for:!0},c(t,r)),()=>[_(S(t.label),1)],!0)]),_:2},1032,["id","name","value","variant","label","disabled","model-value","onUpdate:modelValue"]))),128))],8,N))}}),h=I(p,[["__scopeId","data-v-7ed24052"]]);p.__docgenInfo=Object.assign({displayName:p.name??p.__name},{name:"PzCheckboxGroup",exportName:"default",displayName:"PzCheckboxGroup",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"options",required:!0,type:{name:"Array",elements:[{name:"PzFormCheckboxOption"}]},defaultValue:{func:!1,value:"() => []"}},{name:"modelValue",required:!0,type:{name:"Array",elements:[{name:"PzFormCheckboxValue"}]},defaultValue:{func:!1,value:"() => []"}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"variant",required:!1,type:{name:"PzFormCheckboxVariant"},defaultValue:{func:!1,value:'"checkbox"'}}],slots:[{name:"default",scoped:!0,bindings:[]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzCheckboxGroup/PzCheckboxGroup.vue"]});const x=[{label:"Text checkbox",value:"one"},{label:"Text checkbox",value:"two"},{label:"Text checkbox",value:"three"},{label:"Text checkbox",value:"four"}],U=[{label:"Text checkbox",value:"alpha"},{label:"Text checkbox Text checkbox Text checkbox Text checkbox",value:"beta"},{label:"Text checkbox",value:"gamma"},{label:"Text checkbox",value:"delta"}],j=a=>{const l=a.variant!=="checkbox"?` variant="${a.variant}"`:"",o=a.disabled?' :disabled="true"':"";return`<template>
  <PzLabel label="${a.heading}">
    <PzCheckboxGroup
      v-model="selectedValues"
      :options="options"${l}${o}
    >
      <template #default="{ option, checked }">
        {{ option.label }}{{ checked ? " (selected)" : "" }}
      </template>
    </PzCheckboxGroup>
  </PzLabel>
</template>

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

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

const selectedValues = ref(["two"]);
<\/script>`},D={title:"Components/Form/PzCheckboxGroup",component:h,parameters:{docs:{description:{component:"Use `PzCheckboxGroup` for multi-select lists backed by an array of primitive `value`s. The group composes `PzCheckbox`, keeps the preserved `switch` variant, and expects semantic `options` instead of the older `config` or `slug` prototype naming."},source:{transform:(a,l)=>j(l.args??D.args)}}},args:{heading:"Назва поля",modelValue:["two"],options:x,name:"checkbox-group-story",variant:"checkbox",disabled:!1},argTypes:{variant:{control:"inline-radio",options:q,description:"Applies the same checkbox or switch presentation to every item in the group."},disabled:{control:"boolean",description:"Disables every option in the group."},name:{control:"text",description:"Optional shared native input name."},heading:{control:"text",description:"Story-only label shown through `PzLabel` in the usage example.",table:{category:"Story"}},options:{control:!1,description:"Array of checkbox options with `label`, `value`, and optional `disabled`/`id`."},modelValue:{control:!1,description:"Selected option values."}},render:a=>({components:{pzCheckboxGroup:h,pzLabel:A,pzText:$},setup(){const l=m([...a.modelValue??[]]),o=m(["two"]);return L(()=>a.modelValue,i=>{l.value=[...i??[]]}),{args:a,checkboxOptions:x,longLabelOptions:U,selectedValues:l,slotSelectedValues:o}},template:`
      <div class="pz-checkbox-group-story">
        <section class="pz-checkbox-group-story-board">
          <div class="pz-checkbox-group-story-header">
            <div>
              <span class="pz-checkbox-group-story-eyebrow">Usage</span>
              <pz-text variant="h4-bold">Labeled multi-select group</pz-text>
            </div>
          </div>

          <div class="pz-checkbox-group-story-preview">
            <div class="pz-checkbox-group-story-field">
              <pz-label :label="args.heading">
                <pz-checkbox-group
                  v-model="selectedValues"
                  :options="args.options"
                  :name="args.name"
                  :variant="args.variant"
                  :disabled="args.disabled"
                />
              </pz-label>
            </div>
          </div>
        </section>

        <section class="pz-checkbox-group-story-gallery">
          <div class="pz-checkbox-group-story-header">
            <div>
              <span class="pz-checkbox-group-story-eyebrow">Patterns</span>
              <pz-text variant="h4-bold">Spacing and long labels stay consistent</pz-text>
            </div>
          </div>

          <div class="pz-checkbox-group-story-grid">
            <article class="pz-checkbox-group-story-card">
              <pz-checkbox-group
                name="checkboxGroup-1"
                :model-value="['two']"
                :options="checkboxOptions"
              />
              <span class="pz-checkbox-group-story-note">Базовий multi-select список із чотирьох опцій і одним активним значенням.</span>
            </article>

            <article class="pz-checkbox-group-story-card">
              <pz-checkbox-group
                name="checkboxGroup-2"
                :model-value="['beta']"
                :options="longLabelOptions"
              />
              <span class="pz-checkbox-group-story-note">Перевіряє перенесення довгого label без зламу сітки та відступів.</span>
            </article>

            <article class="pz-checkbox-group-story-card">
              <pz-checkbox-group
                name="checkboxGroup-3"
                v-model="slotSelectedValues"
                :options="checkboxOptions"
              >
                <template #default="{ option, checked, value }">
                  <span>
                    {{ option.label }}
                    <span class="pz-checkbox-group-story-meta">({{ value }}, {{ checked ? "checked" : "idle" }})</span>
                  </span>
                </template>
              </pz-checkbox-group>
              <span class="pz-checkbox-group-story-note">Демонструє slot API: у прикладі видно поточне value і реактивний checked стан кожної опції.</span>
            </article>

            <article class="pz-checkbox-group-story-card">
              <pz-checkbox-group
                name="checkboxGroup-4"
                variant="switch"
                :model-value="[true]"
                :options="[
                  { label: 'Обрати всі значення характеристики', value: false },
                  { label: 'Обрати всі значення характеристики', value: true },
                ]"
              />
              <span class="pz-checkbox-group-story-note">Показує, що група підтримує switch-варіант і може працювати з boolean values.</span>
            </article>
          </div>
        </section>
      </div>
    `})},n={parameters:{docs:{description:{story:"Інтерактивний приклад групи чекбоксів із label wrapper. Gallery нижче пояснює базовий список, довгі тексти, slot customization і switch-режим."}}}};var k,v,g;n.parameters={...n.parameters,docs:{...(k=n.parameters)==null?void 0:k.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Інтерактивний приклад групи чекбоксів із label wrapper. Gallery нижче пояснює базовий список, довгі тексти, slot customization і switch-режим."
      }
    }
  }
}`,...(g=(v=n.parameters)==null?void 0:v.docs)==null?void 0:g.source}}};const R=["Playground"];export{n as Playground,R as __namedExportsOrder,D as default};
