import{e as C,x as E,A as h,v as c,D as U,r as m,o as A,y,s as L}from"./iframe-Bl-fVlm8.js";import{P as w}from"./PzBtn-Cx92sJr7.js";import{_ as z}from"./PzIcon-cRuuou9i.js";import{P as u}from"./PzText-D5PUnIjq.js";import{k as $}from"./floating-vue-C5xzxu-B.js";import{_ as M}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const a=C({name:"PzDropdown",__name:"PzDropdown",props:{shown:{type:Boolean,default:void 0}},emits:["update:shown"],setup(n,{expose:t,emit:i}){const o=U(),k=i,l=m(null);function T(e){k("update:shown",e)}function B(){var e;(e=l.value)==null||e.show()}function R(){var e;(e=l.value)==null||e.hide()}return t({show:B,hide:R}),(e,q)=>(A(),E(c($),{id:c(o),ref_key:"dropdownRef",ref:l,class:"pz-dropdown",theme:"dropdown",container:"#"+c(o),shown:n.shown,"onUpdate:shown":T},{popper:h(()=>[y(e.$slots,"content",{},void 0,!0)]),default:h(()=>[y(e.$slots,"default",{},void 0,!0)]),_:3},8,["id","container","shown"]))}}),d=M(a,[["__scopeId","data-v-69acee1b"]]);a.__docgenInfo=Object.assign({displayName:a.name??a.__name},{name:"PzDropdown",exportName:"default",displayName:"PzDropdown",description:"",tags:{},expose:[{name:"show"},{name:"hide"}],props:[{name:"shown",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"undefined"}}],events:[{name:"update:shown",type:{names:["boolean"]}}],slots:[{name:"default"},{name:"content"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Popups/PzDropdown/PzDropdown.vue"]});const v=[{icon:"edit",label:"Редагувати"},{icon:"content_copy",label:"Створити копію"},{icon:"archive",label:"Архівувати"},{icon:"delete",label:"Видалити",danger:!0}],N=n=>`<template>
  <PzDropdown>
    <PzBtn variant="primary-outline">
      ${n.triggerLabel??"Дії"}
      <template #suffix>
        <PzIcon name="expand_more" size="16" />
      </template>
    </PzBtn>

    <template #content>
      <button type="button" class="pz-dropdown-story-item">Редагувати</button>
      <button type="button" class="pz-dropdown-story-item">Створити копію</button>
      <button type="button" class="pz-dropdown-story-item">Архівувати</button>
      <button type="button" class="pz-dropdown-story-item pz-dropdown-story-item--danger">Видалити</button>
    </template>
  </PzDropdown>
</template>`,j={title:"Components/Popups/PzDropdown",component:d,parameters:{prototype:{caption:"Dropdown component",note:"Action menu wrapper powered by floating-vue with a shared popper theme and the same trigger/content slot API as the old app-level dropdown."},docs:{description:{component:"Use `PzDropdown` for compact action menus or contextual choices. It keeps the trigger in the default slot and renders the menu body in the `content` slot."},source:{transform:(n,t)=>N(t.args??j.args)}}},args:{triggerLabel:"Дії"},argTypes:{triggerLabel:{control:"text",description:"Trigger label shown on the dropdown button.",table:{category:"Slots"}}},render:n=>({components:{pzBtn:w,pzDropdown:d,pzIcon:z,pzText:u},setup(){return{args:n,dropdownItems:v}},template:`
      <section class="pz-dropdown-story">
        <div class="pz-dropdown-story-header">
          <div>
            <span class="pz-dropdown-story-eyebrow">Component API</span>
            <pz-text variant="h4-bold">Context menu trigger</pz-text>
          </div>
          <span class="pz-dropdown-story-chip">floating-vue</span>
        </div>

        <div class="pz-dropdown-story-preview">
          <pz-dropdown>
            <pz-btn variant="primary-outline">
              {{ args.triggerLabel }}
              <template #suffix>
                <pz-icon name="expand_more" size="16" />
              </template>
            </pz-btn>

            <template #content>
              <div class="pz-dropdown-story-menu">
                <button
                  v-for="item in dropdownItems"
                  :key="item.label"
                  type="button"
                  class="pz-dropdown-story-item"
                  :class="{ 'pz-dropdown-story-item-danger': item.danger }"
                >
                  <pz-icon :name="item.icon" size="16" />
                  <span>{{ item.label }}</span>
                </button>
              </div>
            </template>
          </pz-dropdown>
        </div>

        <div class="pz-dropdown-story-note">
          <pz-text variant="body-regular">
            The dropdown surface is intentionally compact: it works best for destructive actions, inline row menus, and quick administrative commands.
          </pz-text>
        </div>
      </section>
    `})},s={},r={name:"v-model:shown",parameters:{docs:{description:{story:"Bind dropdown open state with `v-model:shown`. The `update:shown` event fires on every visibility change."}}},render:()=>({components:{pzBtn:w,pzDropdown:d,pzIcon:z,pzText:u},setup(){const n=m(!1),t=m("—");return{isShown:n,lastEvent:t,onUpdateShown:o=>{t.value=`update:shown → ${o}`},dropdownItems:v}},template:`
      <section class="pz-dropdown-story">
        <div class="pz-dropdown-story-header">
          <div>
            <span class="pz-dropdown-story-eyebrow">Reactive state</span>
            <pz-text variant="h4-bold">v-model:shown</pz-text>
          </div>
          <span class="pz-dropdown-story-chip">{{ isShown ? "open" : "closed" }}</span>
        </div>

        <div class="pz-dropdown-story-preview">
          <pz-dropdown
            v-model:shown="isShown"
            @update:shown="onUpdateShown"
          >
            <pz-btn variant="primary-outline">
              Toggle me
              <template #suffix>
                <pz-icon name="expand_more" size="16" />
              </template>
            </pz-btn>

            <template #content>
              <div class="pz-dropdown-story-menu">
                <button
                  v-for="item in dropdownItems"
                  :key="item.label"
                  type="button"
                  class="pz-dropdown-story-item"
                  :class="{ 'pz-dropdown-story-item-danger': item.danger }"
                >
                  <pz-icon :name="item.icon" size="16" />
                  <span>{{ item.label }}</span>
                </button>
              </div>
            </template>
          </pz-dropdown>
        </div>

        <div class="pz-dropdown-story-note">
          <pz-text variant="body-regular">
            Last event: <strong>{{ lastEvent }}</strong>. Reactive state: <strong>{{ isShown }}</strong>.
          </pz-text>
        </div>
      </section>
    `})},p={name:"Manual show / hide",parameters:{docs:{description:{story:"Call `show()` and `hide()` on the dropdown template ref to control visibility from outside the component."}}},render:()=>({components:{pzBtn:w,pzDropdown:d,pzIcon:z,pzText:u},setup(){const n=L(null);return{dropdownRef:n,show:()=>{var o;return(o=n.value)==null?void 0:o.show()},hide:()=>{var o;return(o=n.value)==null?void 0:o.hide()},dropdownItems:v}},template:`
      <section class="pz-dropdown-story">
        <div class="pz-dropdown-story-header">
          <div>
            <span class="pz-dropdown-story-eyebrow">Imperative API</span>
            <pz-text variant="h4-bold">External show / hide</pz-text>
          </div>
          <span class="pz-dropdown-story-chip">defineExpose</span>
        </div>

        <div class="pz-dropdown-story-preview pz-dropdown-story-controls">
          <pz-btn variant="primary" @click="show">Show</pz-btn>
          <pz-btn variant="primary-outline" @click="hide">Hide</pz-btn>

          <pz-dropdown ref="dropdownRef">
            <pz-btn variant="ghost">
              Anchor
              <template #suffix>
                <pz-icon name="expand_more" size="16" />
              </template>
            </pz-btn>

            <template #content>
              <div class="pz-dropdown-story-menu">
                <button
                  v-for="item in dropdownItems"
                  :key="item.label"
                  type="button"
                  class="pz-dropdown-story-item"
                  :class="{ 'pz-dropdown-story-item-danger': item.danger }"
                >
                  <pz-icon :name="item.icon" size="16" />
                  <span>{{ item.label }}</span>
                </button>
              </div>
            </template>
          </pz-dropdown>
        </div>

        <div class="pz-dropdown-story-note">
          <pz-text variant="body-regular">
            Use external triggers to drive the dropdown from anywhere in the page — toolbars, keyboard shortcuts, or programmatic flows.
          </pz-text>
        </div>
      </section>
    `})};var b,f,g;s.parameters={...s.parameters,docs:{...(b=s.parameters)==null?void 0:b.docs,source:{originalSource:"{}",...(g=(f=s.parameters)==null?void 0:f.docs)==null?void 0:g.source}}};var x,P,I;r.parameters={...r.parameters,docs:{...(x=r.parameters)==null?void 0:x.docs,source:{originalSource:`{
  name: "v-model:shown",
  parameters: {
    docs: {
      description: {
        story: "Bind dropdown open state with \`v-model:shown\`. The \`update:shown\` event fires on every visibility change."
      }
    }
  },
  render: () => ({
    components: {
      pzBtn: PzBtn,
      pzDropdown: PzDropdown,
      pzIcon: PzIcon,
      pzText: PzText
    },
    setup() {
      const isShown = ref(false);
      const lastEvent = ref<string>("—");
      const onUpdateShown = (value: boolean): void => {
        lastEvent.value = \`update:shown → \${value}\`;
      };
      return {
        isShown,
        lastEvent,
        onUpdateShown,
        dropdownItems
      };
    },
    template: \`
      <section class="pz-dropdown-story">
        <div class="pz-dropdown-story-header">
          <div>
            <span class="pz-dropdown-story-eyebrow">Reactive state</span>
            <pz-text variant="h4-bold">v-model:shown</pz-text>
          </div>
          <span class="pz-dropdown-story-chip">{{ isShown ? "open" : "closed" }}</span>
        </div>

        <div class="pz-dropdown-story-preview">
          <pz-dropdown
            v-model:shown="isShown"
            @update:shown="onUpdateShown"
          >
            <pz-btn variant="primary-outline">
              Toggle me
              <template #suffix>
                <pz-icon name="expand_more" size="16" />
              </template>
            </pz-btn>

            <template #content>
              <div class="pz-dropdown-story-menu">
                <button
                  v-for="item in dropdownItems"
                  :key="item.label"
                  type="button"
                  class="pz-dropdown-story-item"
                  :class="{ 'pz-dropdown-story-item-danger': item.danger }"
                >
                  <pz-icon :name="item.icon" size="16" />
                  <span>{{ item.label }}</span>
                </button>
              </div>
            </template>
          </pz-dropdown>
        </div>

        <div class="pz-dropdown-story-note">
          <pz-text variant="body-regular">
            Last event: <strong>{{ lastEvent }}</strong>. Reactive state: <strong>{{ isShown }}</strong>.
          </pz-text>
        </div>
      </section>
    \`
  })
}`,...(I=(P=r.parameters)==null?void 0:P.docs)==null?void 0:I.source}}};var _,S,D;p.parameters={...p.parameters,docs:{...(_=p.parameters)==null?void 0:_.docs,source:{originalSource:`{
  name: "Manual show / hide",
  parameters: {
    docs: {
      description: {
        story: "Call \`show()\` and \`hide()\` on the dropdown template ref to control visibility from outside the component."
      }
    }
  },
  render: () => ({
    components: {
      pzBtn: PzBtn,
      pzDropdown: PzDropdown,
      pzIcon: PzIcon,
      pzText: PzText
    },
    setup() {
      const dropdownRef = shallowRef<InstanceType<typeof PzDropdown> | null>(null);
      const show = (): void => dropdownRef.value?.show();
      const hide = (): void => dropdownRef.value?.hide();
      return {
        dropdownRef,
        show,
        hide,
        dropdownItems
      };
    },
    template: \`
      <section class="pz-dropdown-story">
        <div class="pz-dropdown-story-header">
          <div>
            <span class="pz-dropdown-story-eyebrow">Imperative API</span>
            <pz-text variant="h4-bold">External show / hide</pz-text>
          </div>
          <span class="pz-dropdown-story-chip">defineExpose</span>
        </div>

        <div class="pz-dropdown-story-preview pz-dropdown-story-controls">
          <pz-btn variant="primary" @click="show">Show</pz-btn>
          <pz-btn variant="primary-outline" @click="hide">Hide</pz-btn>

          <pz-dropdown ref="dropdownRef">
            <pz-btn variant="ghost">
              Anchor
              <template #suffix>
                <pz-icon name="expand_more" size="16" />
              </template>
            </pz-btn>

            <template #content>
              <div class="pz-dropdown-story-menu">
                <button
                  v-for="item in dropdownItems"
                  :key="item.label"
                  type="button"
                  class="pz-dropdown-story-item"
                  :class="{ 'pz-dropdown-story-item-danger': item.danger }"
                >
                  <pz-icon :name="item.icon" size="16" />
                  <span>{{ item.label }}</span>
                </button>
              </div>
            </template>
          </pz-dropdown>
        </div>

        <div class="pz-dropdown-story-note">
          <pz-text variant="body-regular">
            Use external triggers to drive the dropdown from anywhere in the page — toolbars, keyboard shortcuts, or programmatic flows.
          </pz-text>
        </div>
      </section>
    \`
  })
}`,...(D=(S=p.parameters)==null?void 0:S.docs)==null?void 0:D.source}}};const K=["Playground","Controlled","ManualControl"];export{r as Controlled,p as ManualControl,s as Playground,K as __namedExportsOrder,j as default};
