import{e as q,V as P,f as n,B as _,A as T,v as M,g as x,W as b,o as d,X as S,q as B,$,t as u,p as v,c as k,r,w as N}from"./iframe-Bl-fVlm8.js";import{P as C}from"./PzText-D5PUnIjq.js";import{P as I}from"./PzLabel-avnfC9tn.js";import{_ as F}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const j={key:0,class:"pz-textarea-wrap"},A=["id","placeholder","disabled","maxlength","required","rows"],D={key:0,class:"pz-textarea-counter"},E=["id"],L={key:2,class:"pz-textarea-error"},c=q({name:"PzTextarea",__name:"PzTextarea",props:b({name:{},modelValue:{},label:{default:""},placeholder:{default:""},errorMessage:{default:""},counted:{type:Boolean,default:!1},maxSize:{default:1e3},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},rows:{default:4}},{modelValue:{default:""},modelModifiers:{}}),emits:b(["focus","blur","update:modelValue"],["update:modelValue"]),setup(e,{emit:l}){const a=e,i=l,o=P(e,"modelValue"),m=k(()=>o.value.length);return(f,t)=>(d(),n("div",{class:x(["pz-textarea",{error:!!a.errorMessage,disabled:a.disabled}])},[_(M(I),{label:a.label,for:a.name,required:a.required,disabled:a.disabled},{default:T(()=>[a.editable?(d(),n("span",j,[S(B("textarea",{id:a.name,"onUpdate:modelValue":t[0]||(t[0]=s=>o.value=s),placeholder:a.placeholder,disabled:a.disabled,maxlength:a.counted?a.maxSize:void 0,required:a.required,rows:a.rows,class:x(["pz-textarea-control",{"pz-textarea-control--counted":a.counted}]),onBlur:t[1]||(t[1]=s=>i("blur")),onFocus:t[2]||(t[2]=s=>i("focus"))},null,42,A),[[$,o.value]]),a.counted?(d(),n("span",D,u(m.value)+"/"+u(a.maxSize),1)):v("",!0)])):(d(),n("div",{key:1,id:a.name,class:"pz-textarea-readonly"},u(o.value),9,E)),a.errorMessage?(d(),n("span",L,u(a.errorMessage),1)):v("",!0)]),_:1},8,["label","for","required","disabled"])],2))}}),z=F(c,[["__scopeId","data-v-2c726136"]]);c.__docgenInfo=Object.assign({displayName:c.name??c.__name},{name:"PzTextarea",exportName:"default",displayName:"PzTextarea",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"modelValue",required:!0,type:{name:"string"}},{name:"label",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"placeholder",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"errorMessage",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"counted",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"maxSize",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"1000"}},{name:"required",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"editable",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"rows",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"4"}}],events:[{name:"focus"},{name:"blur"},{name:"update:modelValue",type:{names:["string"]}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzTextarea/PzTextarea.vue"]});const w=2,O=e=>`<template>
  <PzTextarea
    v-model="value"
    ${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null,e.editable===!1?':editable="false"':null,e.counted?':counted="true"':null,e.maxSize?`:max-size="${e.maxSize}"`:null,e.rows&&e.rows!==w?`:rows="${e.rows}"`:null,e.errorMessage?`error-message="${e.errorMessage}"`:null].filter(a=>!!a).join(" ")}
  />
</template>`,U={title:"Components/Form/PzTextarea",component:z,parameters:{docs:{description:{component:"Use `PzTextarea` for multi-line text input. It follows the shared form patterns in the library, wraps the control with `PzLabel`, supports counters, validation feedback, and a display-only presentation mode."},source:{transform:(e,l)=>O(l.args??U.args)}}},args:{name:"pz-textarea-story",label:"Опис",modelValue:"",placeholder:"Введiть детальний опис...",errorMessage:"",counted:!1,maxSize:1e3,required:!1,disabled:!1,editable:!0,rows:w},argTypes:{name:{control:"text",description:"Native textarea `id`/`name`."},label:{control:"text",description:"Текст лейбла над полем."},modelValue:{control:"text",description:"Поточне значення, прив'язане через `v-model`."},placeholder:{control:"text",description:"Пiдказка для порожнього поля."},errorMessage:{control:"text",description:"Повiдомлення про помилку пiд полем; одночасно вмикає error-стан."},counted:{control:"boolean",description:"Показує лiчильник символiв у правому нижньому кутi."},maxSize:{control:"number",description:"Максимальна довжина тексту для лiчильника та `maxlength`, коли `counted=true`."},required:{control:"boolean",description:"Позначає поле як обов'язкове."},disabled:{control:"boolean",description:"Блокує введення та застосовує приглушений стиль."},editable:{control:"boolean",description:"Коли `false`, компонент показує display-only представлення замiсть textarea."},rows:{control:"number",description:"Кiлькiсть рядкiв textarea."}},render:e=>({components:{pzTextarea:z,pzText:C},setup(){const l=r(e.modelValue??""),a=r("Спiльне значення для двох текстових полiв."),i=r(""),o=r(""),m=r("Короткий опис для прикладу лiчильника."),f=r("Текст, який потребує перевiрки."),t=r(`Перший рядок.
Другий рядок.
Третiй рядок.`),s=r("Просимо детально описати контекст звернення.");return N(()=>e.modelValue,g=>{l.value=g??""}),{args:e,value:l,sharedValue:a,defaultValue:i,requiredValue:o,countedValue:m,errorValue:f,previewValue:t,patternValue:s}},template:`
      <div style="display: flex; flex-direction: column; gap: var(--pz-space-24); max-width: 640px;">
        <section>
          <pz-text variant="h4-bold">API компонента</pz-text>
          <div style="margin-top: var(--pz-space-16);">
            <pz-textarea
              v-model="value"
              :name="args.name"
              :label="args.label"
              :placeholder="args.placeholder"
              :error-message="args.errorMessage"
              :counted="args.counted"
              :max-size="args.maxSize"
              :required="args.required"
              :disabled="args.disabled"
              :editable="args.editable"
              :rows="args.rows"
            />
          </div>
        </section>

        <section>
          <pz-text variant="h4-bold">Two-way binding</pz-text>
          <div style="display: flex; flex-direction: column; gap: var(--pz-space-8); margin-top: var(--pz-space-16);">
            <pz-textarea v-model="sharedValue" name="textarea-two-way-a" label="Поле A" placeholder="Введiть коментар..." :rows="5" />
            <pz-textarea v-model="sharedValue" name="textarea-two-way-b" label="Поле B (те саме значення)" placeholder="Введiть коментар..." :rows="5" />
            <pz-text variant="body-regular">Поточне значення: "{{ sharedValue }}"</pz-text>
          </div>
        </section>

        <section style="display: flex; flex-direction: column; gap: var(--pz-space-16);">
          <pz-text variant="h4-bold">Стани</pz-text>
          <pz-textarea v-model="defaultValue" name="textarea-default" label="Звичайне поле" placeholder="Введiть коментар..." :rows="5" />
          <pz-textarea v-model="requiredValue" name="textarea-required" label="Обов'язкове поле" placeholder="Опишiть потребу..." required :rows="5" />
          <pz-textarea v-model="countedValue" name="textarea-counted" label="З лiчильником" placeholder="Додайте короткий опис..." counted :max-size="180" :rows="5" />
          <pz-textarea v-model="errorValue" name="textarea-error" label="Помилка валідації" placeholder="Введiть коментар..." error-message="Поле заповнено некоректно" :rows="5" />
          <pz-textarea model-value="" name="textarea-disabled" label="Недоступне поле" placeholder="Недоступно" disabled :rows="5" />
          <pz-textarea v-model="previewValue" name="textarea-preview" label="Display-only режим" :editable="false" />
        </section>

        <section>
          <pz-text variant="h4-bold">Патерн використання у формi</pz-text>
          <div style="display: flex; flex-direction: column; gap: var(--pz-space-8); margin-top: var(--pz-space-16);">
            <pz-text variant="body-regular">Поле нижче добре пiдходить для пояснення деталей, коментаря або контексту звернення.</pz-text>
            <pz-textarea
              v-model="patternValue"
              name="textarea-pattern"
              label="Коментар до заявки"
              placeholder="Опишiть важливi деталi..."
              counted
              :max-size="500"
              required
              :rows="6"
            />
          </div>
        </section>
      </div>
    `})},p={parameters:{docs:{description:{story:"Iнтерактивний приклад `PzTextarea` з двостороннiм зв'язком, базовими станами та display-only представленням через `editable=false`."}}}};var y,h,V;p.parameters={...p.parameters,docs:{...(y=p.parameters)==null?void 0:y.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Iнтерактивний приклад \`PzTextarea\` з двостороннiм зв'язком, базовими станами та display-only представленням через \`editable=false\`."
      }
    }
  }
}`,...(V=(h=p.parameters)==null?void 0:h.docs)==null?void 0:V.source}}};const J=["Playground"];export{p as Playground,J as __namedExportsOrder,U as default};
