import{r as t,w as S}from"./iframe-Bl-fVlm8.js";import{_ as h}from"./PzIcon-cRuuou9i.js";import{P as b}from"./PzText-D5PUnIjq.js";import{P as n}from"./PzSelect-CwWCI-kq.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./index-pk-yyh3_.js";import"./floating-vue-C5xzxu-B.js";import"./lodash-CdDiHlzQ.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./PzLabel-avnfC9tn.js";const O=["field","inline"],i=[{label:"Option 0",value:0},{label:"Option 1",value:1},{label:"Option 2",value:2},{label:"Option 3",value:3},{label:"Option 4",value:4},{label:"Option 5",value:5},{label:"Option 6",value:6},{label:"Option 7",value:7},{label:"Option 8",value:8},{label:"Option 9",value:9}],V=[{label:"Чернетка",value:"draft"},{label:"Активний тендер",value:"active"},{label:"Архів",value:"archive"}],P=[{label:"Пропозиція з коротким формулюванням",value:"short"},{label:"Пропозиція з довшою назвою для перевірки перенесення і ширини меню",value:"long"},{label:"Недоступний варіант",value:"disabled",disabled:!0}],r=3,k=e=>`<template>
  <PzSelect
    v-model="value"
    ${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.variant!=="field"?`variant="${e.variant}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null].filter(a=>!!a).join(" ")}
    :options="options"
  />
</template>

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

const options = [
  { label: "Option 0", value: 0 },
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 },
];

const value = ref(1);
<\/script>`,C={title:"Components/Form/PzSelect",component:n,parameters:{prototype:{caption:"Select component",note:"Refactored from the old app-level select into a public `PzSelect` with two preserved visual variants: boxed field and inline trigger."},docs:{description:{component:"Use `PzSelect` for single-choice dropdowns backed by primitive `value`s. The component replaces the old `config`/`slug` naming with `options`/`value`, keeps the two existing visual treatments as `field` and `inline`, and sizes its menu from the trigger width with `@vueuse/core`. Supports a default scoped slot for custom option rendering and a named `#selected` slot for custom trigger display."},source:{transform:(e,l)=>k(l.args??C.args)}}},args:{name:"pz-select-story",label:"Select",modelValue:3,options:i,placeholder:"enter value",required:!1,disabled:!1,variant:"field",width:void 0},argTypes:{name:{control:"text",description:"Stable field name used to derive trigger and menu ids."},label:{control:"text",description:"Visible label. For `inline`, it is rendered on the left of the trigger."},options:{control:!1,description:"Array of options with `label`, `value`, and optional `disabled` or `id`."},modelValue:{control:!1,description:"Currently selected primitive option value."},placeholder:{control:"text",description:"Text shown when no option is selected."},variant:{control:"inline-radio",options:O,description:"Boxed field or compact inline trigger."},required:{control:"boolean",description:"Adds the required indicator to the label."},disabled:{control:"boolean",description:"Disables the trigger and prevents the menu from opening."},width:{control:"text",description:"Optional explicit width applied to the component root."}},render:e=>({components:{pzSelect:n,pzText:b,pzIcon:h},setup(){const l=t(e.modelValue),a=t(void 0),z=t(r),f=t("active"),y=t(r),g=t(void 0),x=t("active");return S(()=>e.modelValue,w=>{l.value=w}),{args:e,denseOptions:P,fieldValue:z,filterValue:f,inlineValue:a,procurementOptions:i,slotInlineValue:x,slotOptionValue:y,slotSelectedValue:g,statusOptions:V,value:l}},template:`
      <div class="pz-select-story">
        <section class="pz-select-story-board">
          <div class="pz-select-story-header">
            <div>
              <span class="pz-select-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Single select with preserved inline and field presentations</pz-text>
            </div>

            <span class="pz-select-story-chip">value-based API</span>
          </div>

          <div class="pz-select-story-preview">
            <div class="pz-select-story-stack">
              <div class="pz-select-story-inline-row">
                <pz-select
                  v-model="value"
                  :name="args.name + '-inline-demo'"
                  label="Select:"
                  placeholder="enter value"
                  variant="inline"
                  :options="args.options"
                />

                <span class="pz-select-story-value">value: {{ value ?? "" }}</span>
              </div>

              <pz-select
                v-model="value"
                :name="args.name"
                :label="args.label"
                :placeholder="args.placeholder"
                :variant="args.variant"
                :required="args.required"
                :disabled="args.disabled"
                :options="args.options"
                :width="args.width"
              />

              <span class="pz-select-story-value">Current selected value: {{ value ?? "empty" }}</span>
            </div>
          </div>
        </section>

        <section class="pz-select-story-gallery">
          <div class="pz-select-story-header">
            <div>
              <span class="pz-select-story-eyebrow">Patterns</span>
              <pz-text variant="h4-bold">Usage example, density checks, and disabled state</pz-text>
            </div>
          </div>

          <div class="pz-select-story-grid">
            <article class="pz-select-story-card pz-select-story-inline-card">
              <pz-select
                v-model="inlineValue"
                name="pz-select-inline-card"
                label="Select:"
                placeholder="enter value"
                variant="inline"
                :options="procurementOptions"
              />

              <span class="pz-select-story-note">
                Inline mode keeps the label and trigger on one line, matching the compact filter pattern from the reference screenshots.
              </span>
            </article>

            <article class="pz-select-story-card pz-select-story-field-card">
              <pz-select
                v-model="fieldValue"
                name="pz-select-field-card"
                label="Select"
                placeholder="enter value"
                :options="procurementOptions"
              />

              <span class="pz-select-story-note">
                Field mode follows the rest of the form library: full-width trigger, muted placeholder, and dropdown width tied to the control.
              </span>
            </article>

            <article class="pz-select-story-card">
              <pz-text variant="body-semibold">Usage in a real filter row</pz-text>

              <pz-select
                v-model="filterValue"
                name="pz-select-filter-card"
                label="Статус:"
                variant="inline"
                :options="statusOptions"
              />

              <span class="pz-select-story-note">
                A realistic example: compact inline select for page-level filters where the selected status should stay visible without a boxed field.
              </span>
            </article>

            <article class="pz-select-story-card pz-select-story-disabled-card">
              <pz-select
                model-value="disabled"
                name="pz-select-dense-card"
                label="Варіант з довгими назвами"
                placeholder="Оберіть значення"
                :options="denseOptions"
                disabled
              />

              <span class="pz-select-story-note">
                Demonstrates long labels, disabled styling, and an unavailable option in the shared value-first option model.
              </span>
            </article>
          </div>
        </section>

        <section class="pz-select-story-gallery">
          <div class="pz-select-story-header">
            <div>
              <span class="pz-select-story-eyebrow">Slots</span>
              <pz-text variant="h4-bold">Custom option and trigger rendering via scoped slots</pz-text>
            </div>
            <span class="pz-select-story-chip">scoped slots</span>
          </div>

          <div class="pz-select-story-grid">
            <article class="pz-select-story-card">
              <pz-text variant="body-semibold">#default slot — custom option row</pz-text>

              <pz-select
                v-model="slotOptionValue"
                name="pz-select-slot-option"
                label="With check icon"
                placeholder="Choose an option"
                :options="procurementOptions"
              >
                <template #default="{ option, selected }">
                  <pz-icon v-if="selected" name="check" size="16" />
                  <span style="flex:1">{{ option.label }}</span>
                </template>
              </pz-select>

              <span class="pz-select-story-note">
                The default slot receives <code>{ option, selected, disabled }</code> and replaces the option row content. Open the dropdown to see the checkmark next to the active item.
              </span>
            </article>

            <article class="pz-select-story-card">
              <pz-text variant="body-semibold">#selected slot — custom trigger text</pz-text>

              <pz-select
                v-model="slotSelectedValue"
                name="pz-select-slot-selected"
                label="With custom trigger"
                placeholder="Choose a status"
                :options="statusOptions"
              >
                <template #selected="{ option, placeholder }">
                  <span v-if="option" style="font-weight:600">→ {{ option.label }}</span>
                  <span v-else style="font-style:italic">{{ placeholder }}</span>
                </template>
              </pz-select>

              <span class="pz-select-story-note">
                The <code>#selected</code> slot receives <code>{ option, placeholder }</code> and controls the trigger button content. Here it renders an arrow prefix when a value is chosen and italic text when empty.
              </span>
            </article>

            <article class="pz-select-story-card">
              <pz-text variant="body-semibold">Both slots — inline variant</pz-text>

              <div class="pz-select-story-inline-row">
                <pz-select
                  v-model="slotInlineValue"
                  name="pz-select-slot-inline"
                  label="Status:"
                  variant="inline"
                  :options="statusOptions"
                >
                  <template #selected="{ option, placeholder }">
                    <span>{{ option ? '● ' + option.label : placeholder }}</span>
                  </template>
                  
                  <template #default="{ option, selected }">
                    <span style="flex:1">{{ option.label }}</span>
                    <pz-icon v-if="selected" name="check" size="16" />
                  </template>
                </pz-select>
              </div>

              <span class="pz-select-story-note">
                Both slots work in the inline variant. The <code>#selected</code> slot prepends a bullet to the active label; the <code>#default</code> slot adds a trailing checkmark inside the menu.
              </span>
            </article>
          </div>
        </section>
      </div>
    `})},o={parameters:{docs:{description:{story:"Interactive story for the refactored select. The preview shows the same `value` state in both variants, and the gallery documents filter usage, long labels, and disabled behavior."}}}},s={parameters:{docs:{description:{story:"PzSelect exposes a default scoped slot for each option row (`{ option, selected, disabled }`) and a named `#selected` slot for the trigger display (`{ option, placeholder }`). Both slots fall back to default rendering when unused."}}},render:()=>({components:{pzSelect:n,pzText:b,pzIcon:h},setup(){return{value:t(r),procurementOptions:i}},template:`
      <div style="display:flex;flex-direction:column;gap:24px;max-width:320px">
        <pz-text variant="body-semibold">Custom option slot + custom selected slot</pz-text>

        <pz-select
          v-model="value"
          name="slots-demo"
          label="Custom slots"
          placeholder="Choose an option"
          :options="procurementOptions"
        >
          <template #selected="{ option, placeholder }">
            <span style="font-weight:600">{{ option ? option.label : placeholder }}</span>
          </template>

          <template #default="{ option, selected }">
            <span style="flex:1">{{ option.label }}</span>
            <pz-icon v-if="selected" name="check" size="16" />
          </template>
        </pz-select>

        <span>Selected value: {{ value ?? "empty" }}</span>
      </div>
    `})};var p,c,d;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Interactive story for the refactored select. The preview shows the same \`value\` state in both variants, and the gallery documents filter usage, long labels, and disabled behavior."
      }
    }
  }
}`,...(d=(c=o.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var u,m,v;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "PzSelect exposes a default scoped slot for each option row (\`{ option, selected, disabled }\`) and a named \`#selected\` slot for the trigger display (\`{ option, placeholder }\`). Both slots fall back to default rendering when unused."
      }
    }
  },
  render: () => ({
    components: {
      pzSelect: PzSelect,
      pzText: PzText,
      pzIcon: PzIcon
    },
    setup() {
      const value = ref<PzFormSelectValue | undefined>(defaultFieldValue);
      return {
        value,
        procurementOptions
      };
    },
    template: \`
      <div style="display:flex;flex-direction:column;gap:24px;max-width:320px">
        <pz-text variant="body-semibold">Custom option slot + custom selected slot</pz-text>

        <pz-select
          v-model="value"
          name="slots-demo"
          label="Custom slots"
          placeholder="Choose an option"
          :options="procurementOptions"
        >
          <template #selected="{ option, placeholder }">
            <span style="font-weight:600">{{ option ? option.label : placeholder }}</span>
          </template>

          <template #default="{ option, selected }">
            <span style="flex:1">{{ option.label }}</span>
            <pz-icon v-if="selected" name="check" size="16" />
          </template>
        </pz-select>

        <span>Selected value: {{ value ?? "empty" }}</span>
      </div>
    \`
  })
}`,...(v=(m=s.parameters)==null?void 0:m.docs)==null?void 0:v.source}}};const j=["Playground","WithSlots"];export{o as Playground,s as WithSlots,j as __namedExportsOrder,C as default};
