@kingsy/headlessui-vue 1.7.23-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +36 -0
- package/dist/components/combobox/combobox.d.ts +323 -0
- package/dist/components/combobox/combobox.js +1 -0
- package/dist/components/description/description.d.ts +32 -0
- package/dist/components/description/description.js +1 -0
- package/dist/components/dialog/dialog.d.ts +202 -0
- package/dist/components/dialog/dialog.js +1 -0
- package/dist/components/disclosure/disclosure.d.ts +105 -0
- package/dist/components/disclosure/disclosure.js +1 -0
- package/dist/components/focus-trap/focus-trap.d.ts +151 -0
- package/dist/components/focus-trap/focus-trap.js +1 -0
- package/dist/components/label/label.d.ts +41 -0
- package/dist/components/label/label.js +1 -0
- package/dist/components/listbox/listbox.d.ts +229 -0
- package/dist/components/listbox/listbox.js +1 -0
- package/dist/components/menu/menu.d.ts +131 -0
- package/dist/components/menu/menu.js +1 -0
- package/dist/components/popover/popover.d.ts +151 -0
- package/dist/components/popover/popover.js +1 -0
- package/dist/components/portal/portal.d.ts +45 -0
- package/dist/components/portal/portal.js +1 -0
- package/dist/components/radio-group/radio-group.d.ts +184 -0
- package/dist/components/radio-group/radio-group.js +1 -0
- package/dist/components/switch/switch.d.ts +166 -0
- package/dist/components/switch/switch.js +1 -0
- package/dist/components/tabs/tabs.d.ts +177 -0
- package/dist/components/tabs/tabs.js +1 -0
- package/dist/components/transitions/transition.d.ts +234 -0
- package/dist/components/transitions/transition.js +1 -0
- package/dist/components/transitions/utils/transition.d.ts +5 -0
- package/dist/components/transitions/utils/transition.js +1 -0
- package/dist/headlessui.dev.cjs +8042 -0
- package/dist/headlessui.esm.js +1 -0
- package/dist/headlessui.esm.js.map +7 -0
- package/dist/headlessui.prod.cjs +7 -0
- package/dist/hooks/__mocks__/use-id.d.ts +1 -0
- package/dist/hooks/document-overflow/adjust-scrollbar-padding.d.ts +2 -0
- package/dist/hooks/document-overflow/adjust-scrollbar-padding.js +1 -0
- package/dist/hooks/document-overflow/handle-ios-locking.d.ts +6 -0
- package/dist/hooks/document-overflow/handle-ios-locking.js +1 -0
- package/dist/hooks/document-overflow/overflow-store.d.ts +19 -0
- package/dist/hooks/document-overflow/overflow-store.js +1 -0
- package/dist/hooks/document-overflow/prevent-scroll.d.ts +2 -0
- package/dist/hooks/document-overflow/prevent-scroll.js +1 -0
- package/dist/hooks/document-overflow/use-document-overflow.d.ts +3 -0
- package/dist/hooks/document-overflow/use-document-overflow.js +1 -0
- package/dist/hooks/use-controllable.d.ts +2 -0
- package/dist/hooks/use-controllable.js +1 -0
- package/dist/hooks/use-disposables.d.ts +25 -0
- package/dist/hooks/use-disposables.js +1 -0
- package/dist/hooks/use-document-event.d.ts +2 -0
- package/dist/hooks/use-document-event.js +1 -0
- package/dist/hooks/use-event-listener.d.ts +1 -0
- package/dist/hooks/use-event-listener.js +1 -0
- package/dist/hooks/use-frame-debounce.d.ts +8 -0
- package/dist/hooks/use-frame-debounce.js +1 -0
- package/dist/hooks/use-id.d.ts +1 -0
- package/dist/hooks/use-id.js +1 -0
- package/dist/hooks/use-inert.d.ts +2 -0
- package/dist/hooks/use-inert.js +1 -0
- package/dist/hooks/use-outside-click.d.ts +6 -0
- package/dist/hooks/use-outside-click.js +1 -0
- package/dist/hooks/use-resolve-button-type.d.ts +5 -0
- package/dist/hooks/use-resolve-button-type.js +1 -0
- package/dist/hooks/use-root-containers.d.ts +19 -0
- package/dist/hooks/use-root-containers.js +1 -0
- package/dist/hooks/use-store.d.ts +2 -0
- package/dist/hooks/use-store.js +1 -0
- package/dist/hooks/use-tab-direction.d.ts +5 -0
- package/dist/hooks/use-tab-direction.js +1 -0
- package/dist/hooks/use-text-value.d.ts +2 -0
- package/dist/hooks/use-text-value.js +1 -0
- package/dist/hooks/use-tracked-pointer.d.ts +4 -0
- package/dist/hooks/use-tracked-pointer.js +1 -0
- package/dist/hooks/use-tree-walker.d.ts +9 -0
- package/dist/hooks/use-tree-walker.js +1 -0
- package/dist/hooks/use-window-event.d.ts +2 -0
- package/dist/hooks/use-window-event.js +1 -0
- package/dist/index.cjs +7 -0
- package/dist/index.d.cts +12 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +1 -0
- package/dist/internal/dom-containers.d.ts +1 -0
- package/dist/internal/dom-containers.js +1 -0
- package/dist/internal/focus-sentinel.d.ts +13 -0
- package/dist/internal/focus-sentinel.js +1 -0
- package/dist/internal/hidden.d.ts +32 -0
- package/dist/internal/hidden.js +1 -0
- package/dist/internal/open-closed.d.ts +10 -0
- package/dist/internal/open-closed.js +1 -0
- package/dist/internal/portal-force-root.d.ts +27 -0
- package/dist/internal/portal-force-root.js +1 -0
- package/dist/internal/stack-context.d.ts +14 -0
- package/dist/internal/stack-context.js +1 -0
- package/dist/keyboard.d.ts +16 -0
- package/dist/keyboard.js +1 -0
- package/dist/mouse.d.ts +4 -0
- package/dist/mouse.js +1 -0
- package/dist/utils/active-element-history.d.ts +1 -0
- package/dist/utils/active-element-history.js +1 -0
- package/dist/utils/calculate-active-index.d.ts +25 -0
- package/dist/utils/calculate-active-index.js +1 -0
- package/dist/utils/disposables.d.ts +12 -0
- package/dist/utils/disposables.js +1 -0
- package/dist/utils/document-ready.d.ts +1 -0
- package/dist/utils/document-ready.js +1 -0
- package/dist/utils/dom.d.ts +4 -0
- package/dist/utils/dom.js +1 -0
- package/dist/utils/env.d.ts +13 -0
- package/dist/utils/env.js +1 -0
- package/dist/utils/focus-management.d.ts +38 -0
- package/dist/utils/focus-management.js +1 -0
- package/dist/utils/form.d.ts +4 -0
- package/dist/utils/form.js +1 -0
- package/dist/utils/get-text-value.d.ts +1 -0
- package/dist/utils/get-text-value.js +1 -0
- package/dist/utils/match.d.ts +1 -0
- package/dist/utils/match.js +1 -0
- package/dist/utils/micro-task.d.ts +1 -0
- package/dist/utils/micro-task.js +1 -0
- package/dist/utils/once.d.ts +1 -0
- package/dist/utils/once.js +1 -0
- package/dist/utils/owner.d.ts +2 -0
- package/dist/utils/owner.js +1 -0
- package/dist/utils/pipeline.d.ts +4 -0
- package/dist/utils/pipeline.js +1 -0
- package/dist/utils/platform.d.ts +3 -0
- package/dist/utils/platform.js +1 -0
- package/dist/utils/render.d.ts +39 -0
- package/dist/utils/render.js +4 -0
- package/dist/utils/resolve-prop-value.d.ts +1 -0
- package/dist/utils/resolve-prop-value.js +1 -0
- package/dist/utils/store.d.ts +11 -0
- package/dist/utils/store.js +1 -0
- package/package.json +55 -0
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
export declare let Menu: import("vue").DefineComponent<{
|
|
2
|
+
as: {
|
|
3
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
4
|
+
default: string;
|
|
5
|
+
};
|
|
6
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
11
|
+
as: {
|
|
12
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
13
|
+
default: string;
|
|
14
|
+
};
|
|
15
|
+
}>>, {
|
|
16
|
+
as: string | Record<string, any>;
|
|
17
|
+
}>;
|
|
18
|
+
export declare let MenuButton: import("vue").DefineComponent<{
|
|
19
|
+
disabled: {
|
|
20
|
+
type: BooleanConstructor;
|
|
21
|
+
default: boolean;
|
|
22
|
+
};
|
|
23
|
+
as: {
|
|
24
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
25
|
+
default: string;
|
|
26
|
+
};
|
|
27
|
+
id: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
default: () => string;
|
|
30
|
+
};
|
|
31
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
32
|
+
[key: string]: any;
|
|
33
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
34
|
+
[key: string]: any;
|
|
35
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
36
|
+
disabled: {
|
|
37
|
+
type: BooleanConstructor;
|
|
38
|
+
default: boolean;
|
|
39
|
+
};
|
|
40
|
+
as: {
|
|
41
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
42
|
+
default: string;
|
|
43
|
+
};
|
|
44
|
+
id: {
|
|
45
|
+
type: StringConstructor;
|
|
46
|
+
default: () => string;
|
|
47
|
+
};
|
|
48
|
+
}>>, {
|
|
49
|
+
id: string;
|
|
50
|
+
as: string | Record<string, any>;
|
|
51
|
+
disabled: boolean;
|
|
52
|
+
}>;
|
|
53
|
+
export declare let MenuItems: import("vue").DefineComponent<{
|
|
54
|
+
as: {
|
|
55
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
56
|
+
default: string;
|
|
57
|
+
};
|
|
58
|
+
static: {
|
|
59
|
+
type: BooleanConstructor;
|
|
60
|
+
default: boolean;
|
|
61
|
+
};
|
|
62
|
+
unmount: {
|
|
63
|
+
type: BooleanConstructor;
|
|
64
|
+
default: boolean;
|
|
65
|
+
};
|
|
66
|
+
id: {
|
|
67
|
+
type: StringConstructor;
|
|
68
|
+
default: () => string;
|
|
69
|
+
};
|
|
70
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
71
|
+
[key: string]: any;
|
|
72
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
73
|
+
[key: string]: any;
|
|
74
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
75
|
+
as: {
|
|
76
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
77
|
+
default: string;
|
|
78
|
+
};
|
|
79
|
+
static: {
|
|
80
|
+
type: BooleanConstructor;
|
|
81
|
+
default: boolean;
|
|
82
|
+
};
|
|
83
|
+
unmount: {
|
|
84
|
+
type: BooleanConstructor;
|
|
85
|
+
default: boolean;
|
|
86
|
+
};
|
|
87
|
+
id: {
|
|
88
|
+
type: StringConstructor;
|
|
89
|
+
default: () => string;
|
|
90
|
+
};
|
|
91
|
+
}>>, {
|
|
92
|
+
id: string;
|
|
93
|
+
as: string | Record<string, any>;
|
|
94
|
+
unmount: boolean;
|
|
95
|
+
static: boolean;
|
|
96
|
+
}>;
|
|
97
|
+
export declare let MenuItem: import("vue").DefineComponent<{
|
|
98
|
+
as: {
|
|
99
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
100
|
+
default: string;
|
|
101
|
+
};
|
|
102
|
+
disabled: {
|
|
103
|
+
type: BooleanConstructor;
|
|
104
|
+
default: boolean;
|
|
105
|
+
};
|
|
106
|
+
id: {
|
|
107
|
+
type: StringConstructor;
|
|
108
|
+
default: () => string;
|
|
109
|
+
};
|
|
110
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
111
|
+
[key: string]: any;
|
|
112
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
113
|
+
[key: string]: any;
|
|
114
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
115
|
+
as: {
|
|
116
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
117
|
+
default: string;
|
|
118
|
+
};
|
|
119
|
+
disabled: {
|
|
120
|
+
type: BooleanConstructor;
|
|
121
|
+
default: boolean;
|
|
122
|
+
};
|
|
123
|
+
id: {
|
|
124
|
+
type: StringConstructor;
|
|
125
|
+
default: () => string;
|
|
126
|
+
};
|
|
127
|
+
}>>, {
|
|
128
|
+
id: string;
|
|
129
|
+
as: string | Record<string, any>;
|
|
130
|
+
disabled: boolean;
|
|
131
|
+
}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{computed as y,defineComponent as T,inject as C,nextTick as h,onMounted as K,onUnmounted as N,provide as j,ref as R,watchEffect as L}from"vue";import{useId as w}from'../../hooks/use-id.js';import{useOutsideClick as B}from'../../hooks/use-outside-click.js';import{useResolveButtonType as U}from'../../hooks/use-resolve-button-type.js';import{useTextValue as $}from'../../hooks/use-text-value.js';import{useTrackedPointer as V}from'../../hooks/use-tracked-pointer.js';import{useTreeWalker as H}from'../../hooks/use-tree-walker.js';import{State as D,useOpenClosed as Q,useOpenClosedProvider as _}from'../../internal/open-closed.js';import{Keys as c}from'../../keyboard.js';import{Focus as S,calculateActiveIndex as q}from'../../utils/calculate-active-index.js';import{dom as p}from'../../utils/dom.js';import{Focus as E,FocusableMode as W,focusFrom as J,isFocusableElement as z,restoreFocusIfNecessary as k,sortByDomNode as G}from'../../utils/focus-management.js';import{match as X}from'../../utils/match.js';import{Features as F,render as P}from'../../utils/render.js';var Y=(l=>(l[l.Open=0]="Open",l[l.Closed=1]="Closed",l))(Y||{}),Z=(l=>(l[l.Pointer=0]="Pointer",l[l.Other=1]="Other",l))(Z||{});function ee(i){requestAnimationFrame(()=>requestAnimationFrame(i))}let A=Symbol("MenuContext");function O(i){let M=C(A,null);if(M===null){let l=new Error(`<${i} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,O),l}return M}let Ie=T({name:"Menu",props:{as:{type:[Object,String],default:"template"}},setup(i,{slots:M,attrs:l}){let I=R(1),e=R(null),f=R(null),s=R([]),g=R(""),d=R(null),o=R(1);function t(a=r=>r){let r=d.value!==null?s.value[d.value]:null,u=G(a(s.value.slice()),m=>p(m.dataRef.domRef)),n=r?u.indexOf(r):null;return n===-1&&(n=null),{items:u,activeItemIndex:n}}let v={menuState:I,buttonRef:e,itemsRef:f,items:s,searchQuery:g,activeItemIndex:d,activationTrigger:o,closeMenu:()=>{I.value=1,d.value=null},openMenu:()=>I.value=0,goToItem(a,r,u){let n=t(),m=q(a===S.Specific?{focus:S.Specific,id:r}:{focus:a},{resolveItems:()=>n.items,resolveActiveIndex:()=>n.activeItemIndex,resolveId:b=>b.id,resolveDisabled:b=>b.dataRef.disabled});g.value="",d.value=m,o.value=u!=null?u:1,s.value=n.items},search(a){let u=g.value!==""?0:1;g.value+=a.toLowerCase();let m=(d.value!==null?s.value.slice(d.value+u).concat(s.value.slice(0,d.value+u)):s.value).find(x=>x.dataRef.textValue.startsWith(g.value)&&!x.dataRef.disabled),b=m?s.value.indexOf(m):-1;b===-1||b===d.value||(d.value=b,o.value=1)},clearSearch(){g.value=""},registerItem(a,r){let u=t(n=>[...n,{id:a,dataRef:r}]);s.value=u.items,d.value=u.activeItemIndex,o.value=1},unregisterItem(a){let r=t(u=>{let n=u.findIndex(m=>m.id===a);return n!==-1&&u.splice(n,1),u});s.value=r.items,d.value=r.activeItemIndex,o.value=1}};return B([e,f],(a,r)=>{var u;v.closeMenu(),z(r,W.Loose)||(a.preventDefault(),(u=p(e))==null||u.focus())},y(()=>I.value===0)),j(A,v),_(y(()=>X(I.value,{[0]:D.Open,[1]:D.Closed}))),()=>{let a={open:I.value===0,close:v.closeMenu};return P({ourProps:{},theirProps:i,slot:a,slots:M,attrs:l,name:"Menu"})}}}),ge=T({name:"MenuButton",props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"},id:{type:String,default:()=>`headlessui-menu-button-${w()}`}},setup(i,{attrs:M,slots:l,expose:I}){let e=O("MenuButton");I({el:e.buttonRef,$el:e.buttonRef});function f(o){switch(o.key){case c.Space:case c.Enter:case c.ArrowDown:o.preventDefault(),o.stopPropagation(),e.openMenu(),h(()=>{var t;(t=p(e.itemsRef))==null||t.focus({preventScroll:!0}),e.goToItem(S.First)});break;case c.ArrowUp:o.preventDefault(),o.stopPropagation(),e.openMenu(),h(()=>{var t;(t=p(e.itemsRef))==null||t.focus({preventScroll:!0}),e.goToItem(S.Last)});break}}function s(o){switch(o.key){case c.Space:o.preventDefault();break}}function g(o){i.disabled||(e.menuState.value===0?(e.closeMenu(),h(()=>{var t;return(t=p(e.buttonRef))==null?void 0:t.focus({preventScroll:!0})})):(o.preventDefault(),e.openMenu(),ee(()=>{var t;return(t=p(e.itemsRef))==null?void 0:t.focus({preventScroll:!0})})))}let d=U(y(()=>({as:i.as,type:M.type})),e.buttonRef);return()=>{var r;let o={open:e.menuState.value===0},{id:t,...v}=i,a={ref:e.buttonRef,id:t,type:d.value,"aria-haspopup":"menu","aria-controls":(r=p(e.itemsRef))==null?void 0:r.id,"aria-expanded":e.menuState.value===0,onKeydown:f,onKeyup:s,onClick:g};return P({ourProps:a,theirProps:v,slot:o,attrs:M,slots:l,name:"MenuButton"})}}}),Se=T({name:"MenuItems",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:()=>`headlessui-menu-items-${w()}`}},setup(i,{attrs:M,slots:l,expose:I}){let e=O("MenuItems"),f=R(null);I({el:e.itemsRef,$el:e.itemsRef}),H({container:y(()=>p(e.itemsRef)),enabled:y(()=>e.menuState.value===0),accept(t){return t.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:t.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(t){t.setAttribute("role","none")}});function s(t){var v;switch(f.value&&clearTimeout(f.value),t.key){case c.Space:if(e.searchQuery.value!=="")return t.preventDefault(),t.stopPropagation(),e.search(t.key);case c.Enter:if(t.preventDefault(),t.stopPropagation(),e.activeItemIndex.value!==null){let r=e.items.value[e.activeItemIndex.value];(v=p(r.dataRef.domRef))==null||v.click()}e.closeMenu(),k(p(e.buttonRef));break;case c.ArrowDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.Next);case c.ArrowUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.Previous);case c.Home:case c.PageUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.First);case c.End:case c.PageDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.Last);case c.Escape:t.preventDefault(),t.stopPropagation(),e.closeMenu(),h(()=>{var a;return(a=p(e.buttonRef))==null?void 0:a.focus({preventScroll:!0})});break;case c.Tab:t.preventDefault(),t.stopPropagation(),e.closeMenu(),h(()=>J(p(e.buttonRef),t.shiftKey?E.Previous:E.Next));break;default:t.key.length===1&&(e.search(t.key),f.value=setTimeout(()=>e.clearSearch(),350));break}}function g(t){switch(t.key){case c.Space:t.preventDefault();break}}let d=Q(),o=y(()=>d!==null?(d.value&D.Open)===D.Open:e.menuState.value===0);return()=>{var u,n;let t={open:e.menuState.value===0},{id:v,...a}=i,r={"aria-activedescendant":e.activeItemIndex.value===null||(u=e.items.value[e.activeItemIndex.value])==null?void 0:u.id,"aria-labelledby":(n=p(e.buttonRef))==null?void 0:n.id,id:v,onKeydown:s,onKeyup:g,role:"menu",tabIndex:0,ref:e.itemsRef};return P({ourProps:r,theirProps:a,slot:t,attrs:M,slots:l,features:F.RenderStrategy|F.Static,visible:o.value,name:"MenuItems"})}}}),Me=T({name:"MenuItem",inheritAttrs:!1,props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},id:{type:String,default:()=>`headlessui-menu-item-${w()}`}},setup(i,{slots:M,attrs:l,expose:I}){let e=O("MenuItem"),f=R(null);I({el:f,$el:f});let s=y(()=>e.activeItemIndex.value!==null?e.items.value[e.activeItemIndex.value].id===i.id:!1),g=$(f),d=y(()=>({disabled:i.disabled,get textValue(){return g()},domRef:f}));K(()=>e.registerItem(i.id,d)),N(()=>e.unregisterItem(i.id)),L(()=>{e.menuState.value===0&&s.value&&e.activationTrigger.value!==0&&h(()=>{var n,m;return(m=(n=p(f))==null?void 0:n.scrollIntoView)==null?void 0:m.call(n,{block:"nearest"})})});function o(n){if(i.disabled)return n.preventDefault();e.closeMenu(),k(p(e.buttonRef))}function t(){if(i.disabled)return e.goToItem(S.Nothing);e.goToItem(S.Specific,i.id)}let v=V();function a(n){v.update(n)}function r(n){v.wasMoved(n)&&(i.disabled||s.value||e.goToItem(S.Specific,i.id,0))}function u(n){v.wasMoved(n)&&(i.disabled||s.value&&e.goToItem(S.Nothing))}return()=>{let{id:n,disabled:m,...b}=i,x={active:s.value,disabled:m,close:e.closeMenu};return P({ourProps:{id:n,ref:f,role:"menuitem",tabIndex:m===!0?void 0:-1,"aria-disabled":m===!0?!0:void 0,onClick:o,onFocus:t,onPointerenter:a,onMouseenter:a,onPointermove:r,onMousemove:r,onPointerleave:u,onMouseleave:u},theirProps:{...l,...b},slot:x,attrs:l,slots:M,name:"MenuItem"})}}});export{Ie as Menu,ge as MenuButton,Me as MenuItem,Se as MenuItems};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
export declare let Popover: import("vue").DefineComponent<{
|
|
2
|
+
as: {
|
|
3
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
4
|
+
default: string;
|
|
5
|
+
};
|
|
6
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
9
|
+
as: {
|
|
10
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
11
|
+
default: string;
|
|
12
|
+
};
|
|
13
|
+
}>>, {
|
|
14
|
+
as: string | Record<string, any>;
|
|
15
|
+
}>;
|
|
16
|
+
export declare let PopoverButton: import("vue").DefineComponent<{
|
|
17
|
+
as: {
|
|
18
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
19
|
+
default: string;
|
|
20
|
+
};
|
|
21
|
+
disabled: {
|
|
22
|
+
type: BooleanConstructor[];
|
|
23
|
+
default: boolean;
|
|
24
|
+
};
|
|
25
|
+
id: {
|
|
26
|
+
type: StringConstructor;
|
|
27
|
+
default: () => string;
|
|
28
|
+
};
|
|
29
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
32
|
+
as: {
|
|
33
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
34
|
+
default: string;
|
|
35
|
+
};
|
|
36
|
+
disabled: {
|
|
37
|
+
type: BooleanConstructor[];
|
|
38
|
+
default: boolean;
|
|
39
|
+
};
|
|
40
|
+
id: {
|
|
41
|
+
type: StringConstructor;
|
|
42
|
+
default: () => string;
|
|
43
|
+
};
|
|
44
|
+
}>>, {
|
|
45
|
+
id: string;
|
|
46
|
+
as: string | Record<string, any>;
|
|
47
|
+
disabled: boolean;
|
|
48
|
+
}>;
|
|
49
|
+
export declare let PopoverOverlay: import("vue").DefineComponent<{
|
|
50
|
+
as: {
|
|
51
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
52
|
+
default: string;
|
|
53
|
+
};
|
|
54
|
+
static: {
|
|
55
|
+
type: BooleanConstructor;
|
|
56
|
+
default: boolean;
|
|
57
|
+
};
|
|
58
|
+
unmount: {
|
|
59
|
+
type: BooleanConstructor;
|
|
60
|
+
default: boolean;
|
|
61
|
+
};
|
|
62
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
63
|
+
[key: string]: any;
|
|
64
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
65
|
+
[key: string]: any;
|
|
66
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
67
|
+
as: {
|
|
68
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
69
|
+
default: string;
|
|
70
|
+
};
|
|
71
|
+
static: {
|
|
72
|
+
type: BooleanConstructor;
|
|
73
|
+
default: boolean;
|
|
74
|
+
};
|
|
75
|
+
unmount: {
|
|
76
|
+
type: BooleanConstructor;
|
|
77
|
+
default: boolean;
|
|
78
|
+
};
|
|
79
|
+
}>>, {
|
|
80
|
+
as: string | Record<string, any>;
|
|
81
|
+
unmount: boolean;
|
|
82
|
+
static: boolean;
|
|
83
|
+
}>;
|
|
84
|
+
export declare let PopoverPanel: import("vue").DefineComponent<{
|
|
85
|
+
as: {
|
|
86
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
87
|
+
default: string;
|
|
88
|
+
};
|
|
89
|
+
static: {
|
|
90
|
+
type: BooleanConstructor;
|
|
91
|
+
default: boolean;
|
|
92
|
+
};
|
|
93
|
+
unmount: {
|
|
94
|
+
type: BooleanConstructor;
|
|
95
|
+
default: boolean;
|
|
96
|
+
};
|
|
97
|
+
focus: {
|
|
98
|
+
type: BooleanConstructor;
|
|
99
|
+
default: boolean;
|
|
100
|
+
};
|
|
101
|
+
id: {
|
|
102
|
+
type: StringConstructor;
|
|
103
|
+
default: () => string;
|
|
104
|
+
};
|
|
105
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
106
|
+
[key: string]: any;
|
|
107
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
108
|
+
[key: string]: any;
|
|
109
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
110
|
+
as: {
|
|
111
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
112
|
+
default: string;
|
|
113
|
+
};
|
|
114
|
+
static: {
|
|
115
|
+
type: BooleanConstructor;
|
|
116
|
+
default: boolean;
|
|
117
|
+
};
|
|
118
|
+
unmount: {
|
|
119
|
+
type: BooleanConstructor;
|
|
120
|
+
default: boolean;
|
|
121
|
+
};
|
|
122
|
+
focus: {
|
|
123
|
+
type: BooleanConstructor;
|
|
124
|
+
default: boolean;
|
|
125
|
+
};
|
|
126
|
+
id: {
|
|
127
|
+
type: StringConstructor;
|
|
128
|
+
default: () => string;
|
|
129
|
+
};
|
|
130
|
+
}>>, {
|
|
131
|
+
focus: boolean;
|
|
132
|
+
id: string;
|
|
133
|
+
as: string | Record<string, any>;
|
|
134
|
+
unmount: boolean;
|
|
135
|
+
static: boolean;
|
|
136
|
+
}>;
|
|
137
|
+
export declare let PopoverGroup: import("vue").DefineComponent<{
|
|
138
|
+
as: {
|
|
139
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
140
|
+
default: string;
|
|
141
|
+
};
|
|
142
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
143
|
+
[key: string]: any;
|
|
144
|
+
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
145
|
+
as: {
|
|
146
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
147
|
+
default: string;
|
|
148
|
+
};
|
|
149
|
+
}>>, {
|
|
150
|
+
as: string | Record<string, any>;
|
|
151
|
+
}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Fragment as j,computed as T,defineComponent as K,h as R,inject as _,onMounted as ee,onUnmounted as te,provide as U,ref as F,shallowRef as ie,watchEffect as q}from"vue";import{useNestedPortals as se}from'../../components/portal/portal.js';import{useEventListener as pe}from'../../hooks/use-event-listener.js';import{useId as L}from'../../hooks/use-id.js';import{useOutsideClick as fe}from'../../hooks/use-outside-click.js';import{useResolveButtonType as ve}from'../../hooks/use-resolve-button-type.js';import{useMainTreeNode as ce,useRootContainers as de}from'../../hooks/use-root-containers.js';import{Direction as w,useTabDirection as oe}from'../../hooks/use-tab-direction.js';import{Hidden as z,Features as J}from'../../internal/hidden.js';import{State as x,useOpenClosed as ne,useOpenClosedProvider as Pe}from'../../internal/open-closed.js';import{Keys as D}from'../../keyboard.js';import{dom as r}from'../../utils/dom.js';import{Focus as C,FocusResult as Q,FocusableMode as me,focusIn as B,getFocusableElements as X,isFocusableElement as be}from'../../utils/focus-management.js';import{match as H}from'../../utils/match.js';import'../../utils/micro-task.js';import{getOwnerDocument as A}from'../../utils/owner.js';import{Features as W,render as G}from'../../utils/render.js';var Se=(p=>(p[p.Open=0]="Open",p[p.Closed=1]="Closed",p))(Se||{});let re=Symbol("PopoverContext");function V(P){let b=_(re,null);if(b===null){let p=new Error(`<${P} /> is missing a parent <${ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(p,V),p}return b}let le=Symbol("PopoverGroupContext");function ae(){return _(le,null)}let ue=Symbol("PopoverPanelContext");function ge(){return _(ue,null)}let ye=K({name:"Popover",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"}},setup(P,{slots:b,attrs:p,expose:h}){var v;let t=F(null);h({el:t,$el:t});let e=F(1),c=F(null),d=F(null),O=F(null),f=F(null),y=T(()=>A(t)),M=T(()=>{var Y,Z;if(!r(c)||!r(f))return!1;for(let k of document.querySelectorAll("body > *"))if(Number(k==null?void 0:k.contains(r(c)))^Number(k==null?void 0:k.contains(r(f))))return!0;let o=X(),a=o.indexOf(r(c)),g=(a+o.length-1)%o.length,E=(a+1)%o.length,N=o[g],$=o[E];return!((Y=r(f))!=null&&Y.contains(N))&&!((Z=r(f))!=null&&Z.contains($))}),l={popoverState:e,buttonId:F(null),panelId:F(null),panel:f,button:c,isPortalled:M,beforePanelSentinel:d,afterPanelSentinel:O,togglePopover(){e.value=H(e.value,{[0]:1,[1]:0})},closePopover(){e.value!==1&&(e.value=1)},close(o){l.closePopover();let a=(()=>o?o instanceof HTMLElement?o:o.value instanceof HTMLElement?r(o):r(l.button):r(l.button))();a==null||a.focus()}};U(re,l),Pe(T(()=>H(e.value,{[0]:x.Open,[1]:x.Closed})));let m={buttonId:l.buttonId,panelId:l.panelId,close(){l.closePopover()}},S=ae(),I=S==null?void 0:S.registerPopover,[s,u]=se(),i=de({mainTreeNodeRef:S==null?void 0:S.mainTreeNodeRef,portals:s,defaultContainers:[c,f]});function n(){var o,a,g,E;return(E=S==null?void 0:S.isFocusWithinPopoverGroup())!=null?E:((o=y.value)==null?void 0:o.activeElement)&&(((a=r(c))==null?void 0:a.contains(y.value.activeElement))||((g=r(f))==null?void 0:g.contains(y.value.activeElement)))}return q(()=>I==null?void 0:I(m)),pe((v=y.value)==null?void 0:v.defaultView,"focus",o=>{var a,g;o.target!==window&&o.target instanceof HTMLElement&&e.value===0&&(n()||c&&f&&(i.contains(o.target)||(a=r(l.beforePanelSentinel))!=null&&a.contains(o.target)||(g=r(l.afterPanelSentinel))!=null&&g.contains(o.target)||l.closePopover()))},!0),fe(i.resolveContainers,(o,a)=>{var g;l.closePopover(),be(a,me.Loose)||(o.preventDefault(),(g=r(c))==null||g.focus())},T(()=>e.value===0)),()=>{let o={open:e.value===0,close:l.close};return R(j,[R(u,{},()=>G({theirProps:{...P,...p},ourProps:{ref:t},slot:o,slots:b,attrs:p,name:"Popover"})),R(i.MainTreeNode)])}}}),Ge=K({name:"PopoverButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:()=>`headlessui-popover-button-${L()}`}},inheritAttrs:!1,setup(P,{attrs:b,slots:p,expose:h}){let t=V("PopoverButton"),e=T(()=>A(t.button));h({el:t.button,$el:t.button}),ee(()=>{t.buttonId.value=P.id}),te(()=>{t.buttonId.value=null});let c=ae(),d=c==null?void 0:c.closeOthers,O=ge(),f=T(()=>O===null?!1:O.value===t.panelId.value),y=F(null),M=`headlessui-focus-sentinel-${L()}`;f.value||q(()=>{t.button.value=r(y)});let l=ve(T(()=>({as:P.as,type:b.type})),y);function m(n){var v,o,a,g,E;if(f.value){if(t.popoverState.value===1)return;switch(n.key){case D.Space:case D.Enter:n.preventDefault(),(o=(v=n.target).click)==null||o.call(v),t.closePopover(),(a=r(t.button))==null||a.focus();break}}else switch(n.key){case D.Space:case D.Enter:n.preventDefault(),n.stopPropagation(),t.popoverState.value===1&&(d==null||d(t.buttonId.value)),t.togglePopover();break;case D.Escape:if(t.popoverState.value!==0)return d==null?void 0:d(t.buttonId.value);if(!r(t.button)||(g=e.value)!=null&&g.activeElement&&!((E=r(t.button))!=null&&E.contains(e.value.activeElement)))return;n.preventDefault(),n.stopPropagation(),t.closePopover();break}}function S(n){f.value||n.key===D.Space&&n.preventDefault()}function I(n){var v,o;P.disabled||(f.value?(t.closePopover(),(v=r(t.button))==null||v.focus()):(n.preventDefault(),n.stopPropagation(),t.popoverState.value===1&&(d==null||d(t.buttonId.value)),t.togglePopover(),(o=r(t.button))==null||o.focus()))}function s(n){n.preventDefault(),n.stopPropagation()}let u=oe();function i(){let n=r(t.panel);if(!n)return;function v(){H(u.value,{[w.Forwards]:()=>B(n,C.First),[w.Backwards]:()=>B(n,C.Last)})===Q.Error&&B(X().filter(a=>a.dataset.headlessuiFocusGuard!=="true"),H(u.value,{[w.Forwards]:C.Next,[w.Backwards]:C.Previous}),{relativeTo:r(t.button)})}v()}return()=>{let n=t.popoverState.value===0,v={open:n},{id:o,...a}=P,g=f.value?{ref:y,type:l.value,onKeydown:m,onClick:I}:{ref:y,id:o,type:l.value,"aria-expanded":t.popoverState.value===0,"aria-controls":r(t.panel)?t.panelId.value:void 0,disabled:P.disabled?!0:void 0,onKeydown:m,onKeyup:S,onClick:I,onMousedown:s};return R(j,[G({ourProps:g,theirProps:{...b,...a},slot:v,attrs:b,slots:p,name:"PopoverButton"}),n&&!f.value&&t.isPortalled.value&&R(z,{id:M,features:J.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:i})])}}}),$e=K({name:"PopoverOverlay",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},setup(P,{attrs:b,slots:p}){let h=V("PopoverOverlay"),t=`headlessui-popover-overlay-${L()}`,e=ne(),c=T(()=>e!==null?(e.value&x.Open)===x.Open:h.popoverState.value===0);function d(){h.closePopover()}return()=>{let O={open:h.popoverState.value===0};return G({ourProps:{id:t,"aria-hidden":!0,onClick:d},theirProps:P,slot:O,attrs:b,slots:p,features:W.RenderStrategy|W.Static,visible:c.value,name:"PopoverOverlay"})}}}),je=K({name:"PopoverPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},focus:{type:Boolean,default:!1},id:{type:String,default:()=>`headlessui-popover-panel-${L()}`}},inheritAttrs:!1,setup(P,{attrs:b,slots:p,expose:h}){let{focus:t}=P,e=V("PopoverPanel"),c=T(()=>A(e.panel)),d=`headlessui-focus-sentinel-before-${L()}`,O=`headlessui-focus-sentinel-after-${L()}`;h({el:e.panel,$el:e.panel}),ee(()=>{e.panelId.value=P.id}),te(()=>{e.panelId.value=null}),U(ue,e.panelId),q(()=>{var u,i;if(!t||e.popoverState.value!==0||!e.panel)return;let s=(u=c.value)==null?void 0:u.activeElement;(i=r(e.panel))!=null&&i.contains(s)||B(r(e.panel),C.First)});let f=ne(),y=T(()=>f!==null?(f.value&x.Open)===x.Open:e.popoverState.value===0);function M(s){var u,i;switch(s.key){case D.Escape:if(e.popoverState.value!==0||!r(e.panel)||c.value&&!((u=r(e.panel))!=null&&u.contains(c.value.activeElement)))return;s.preventDefault(),s.stopPropagation(),e.closePopover(),(i=r(e.button))==null||i.focus();break}}function l(s){var i,n,v,o,a;let u=s.relatedTarget;u&&r(e.panel)&&((i=r(e.panel))!=null&&i.contains(u)||(e.closePopover(),((v=(n=r(e.beforePanelSentinel))==null?void 0:n.contains)!=null&&v.call(n,u)||(a=(o=r(e.afterPanelSentinel))==null?void 0:o.contains)!=null&&a.call(o,u))&&u.focus({preventScroll:!0})))}let m=oe();function S(){let s=r(e.panel);if(!s)return;function u(){H(m.value,{[w.Forwards]:()=>{var n;B(s,C.First)===Q.Error&&((n=r(e.afterPanelSentinel))==null||n.focus())},[w.Backwards]:()=>{var i;(i=r(e.button))==null||i.focus({preventScroll:!0})}})}u()}function I(){let s=r(e.panel);if(!s)return;function u(){H(m.value,{[w.Forwards]:()=>{let i=r(e.button),n=r(e.panel);if(!i)return;let v=X(),o=v.indexOf(i),a=v.slice(0,o+1),E=[...v.slice(o+1),...a];for(let N of E.slice())if(N.dataset.headlessuiFocusGuard==="true"||n!=null&&n.contains(N)){let $=E.indexOf(N);$!==-1&&E.splice($,1)}B(E,C.First,{sorted:!1})},[w.Backwards]:()=>{var n;B(s,C.Previous)===Q.Error&&((n=r(e.button))==null||n.focus())}})}u()}return()=>{let s={open:e.popoverState.value===0,close:e.close},{id:u,focus:i,...n}=P,v={ref:e.panel,id:u,onKeydown:M,onFocusout:t&&e.popoverState.value===0?l:void 0,tabIndex:-1};return G({ourProps:v,theirProps:{...b,...n},attrs:b,slot:s,slots:{...p,default:(...o)=>{var a;return[R(j,[y.value&&e.isPortalled.value&&R(z,{id:d,ref:e.beforePanelSentinel,features:J.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:S}),(a=p.default)==null?void 0:a.call(p,...o),y.value&&e.isPortalled.value&&R(z,{id:O,ref:e.afterPanelSentinel,features:J.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:I})])]}},features:W.RenderStrategy|W.Static,visible:y.value,name:"PopoverPanel"})}}}),Ae=K({name:"PopoverGroup",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"}},setup(P,{attrs:b,slots:p,expose:h}){let t=F(null),e=ie([]),c=T(()=>A(t)),d=ce();h({el:t,$el:t});function O(l){let m=e.value.indexOf(l);m!==-1&&e.value.splice(m,1)}function f(l){return e.value.push(l),()=>{O(l)}}function y(){var S;let l=c.value;if(!l)return!1;let m=l.activeElement;return(S=r(t))!=null&&S.contains(m)?!0:e.value.some(I=>{var s,u;return((s=l.getElementById(I.buttonId.value))==null?void 0:s.contains(m))||((u=l.getElementById(I.panelId.value))==null?void 0:u.contains(m))})}function M(l){for(let m of e.value)m.buttonId.value!==l&&m.close()}return U(le,{registerPopover:f,unregisterPopover:O,isFocusWithinPopoverGroup:y,closeOthers:M,mainTreeNodeRef:d.mainTreeNodeRef}),()=>R(j,[G({ourProps:{ref:t},theirProps:{...P,...b},slot:{},attrs:b,slots:p,name:"PopoverGroup"}),R(d.MainTreeNode)])}});export{ye as Popover,Ge as PopoverButton,Ae as PopoverGroup,$e as PopoverOverlay,je as PopoverPanel};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { type PropType, type Ref } from 'vue';
|
|
2
|
+
export declare let Portal: import("vue").DefineComponent<{
|
|
3
|
+
as: {
|
|
4
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
5
|
+
default: string;
|
|
6
|
+
};
|
|
7
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}> | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
10
|
+
as: {
|
|
11
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
12
|
+
default: string;
|
|
13
|
+
};
|
|
14
|
+
}>>, {
|
|
15
|
+
as: string | Record<string, any>;
|
|
16
|
+
}>;
|
|
17
|
+
export declare function useNestedPortals(): readonly [Ref<HTMLElement[]>, import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
18
|
+
[key: string]: any;
|
|
19
|
+
}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>];
|
|
20
|
+
export declare let PortalGroup: import("vue").DefineComponent<{
|
|
21
|
+
as: {
|
|
22
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
23
|
+
default: string;
|
|
24
|
+
};
|
|
25
|
+
target: {
|
|
26
|
+
type: PropType<HTMLElement | null>;
|
|
27
|
+
default: null;
|
|
28
|
+
};
|
|
29
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
32
|
+
[key: string]: any;
|
|
33
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
34
|
+
as: {
|
|
35
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
36
|
+
default: string;
|
|
37
|
+
};
|
|
38
|
+
target: {
|
|
39
|
+
type: PropType<HTMLElement | null>;
|
|
40
|
+
default: null;
|
|
41
|
+
};
|
|
42
|
+
}>>, {
|
|
43
|
+
as: string | Record<string, any>;
|
|
44
|
+
target: HTMLElement | null;
|
|
45
|
+
}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Teleport as x,defineComponent as s,getCurrentInstance as E,h as C,inject as f,onMounted as h,onUnmounted as H,provide as c,reactive as M,ref as p,watch as L,watchEffect as j}from"vue";import{usePortalRoot as b}from'../../internal/portal-force-root.js';import{dom as w}from'../../utils/dom.js';import{getOwnerDocument as I}from'../../utils/owner.js';import{render as g}from'../../utils/render.js';function y(r){let e=I(r);if(!e){if(r===null)return null;throw new Error(`[Headless UI]: Cannot find ownerDocument for contextElement: ${r}`)}let o=e.getElementById("headlessui-portal-root");if(o)return o;let n=e.createElement("div");return n.setAttribute("id","headlessui-portal-root"),e.body.appendChild(n)}let D=s({name:"Portal",props:{as:{type:[Object,String],default:"div"}},setup(r,{slots:e,attrs:o}){let n=p(null),u=b(),t=f(T,null),l=p(u===!0||t==null?y(n.value):t.resolveTarget()),a=p(!1);h(()=>{a.value=!0}),j(()=>{u||t!=null&&(l.value=t.resolveTarget())});let d=f(m,null),P=!1,v=E();return L(n,()=>{if(P||!d)return;let i=w(n);i&&(H(d.register(i),v),P=!0)}),()=>{if(!a.value||l.value===null)return null;let i={ref:n,"data-headlessui-portal":""};return C(x,{to:l.value},g({ourProps:i,theirProps:r,slot:{},attrs:o,slots:e,name:"Portal"}))}}}),m=Symbol("PortalParentContext");function U(){let r=f(m,null),e=p([]);function o(t){return e.value.push(t),r&&r.register(t),()=>n(t)}function n(t){let l=e.value.indexOf(t);l!==-1&&e.value.splice(l,1),r&&r.unregister(t)}let u={register:o,unregister:n,portals:e};return[e,s({name:"PortalWrapper",setup(t,{slots:l}){return c(m,u),()=>{var a;return(a=l.default)==null?void 0:a.call(l)}}})]}let T=Symbol("PortalGroupContext"),V=s({name:"PortalGroup",props:{as:{type:[Object,String],default:"template"},target:{type:Object,default:null}},setup(r,{attrs:e,slots:o}){let n=M({resolveTarget(){return r.target}});return c(T,n),()=>{let{target:u,...t}=r;return g({theirProps:t,ourProps:{},slot:{},attrs:e,slots:o,name:"PortalGroup"})}}});export{D as Portal,V as PortalGroup,U as useNestedPortals};
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
declare function defaultComparator<T>(a: T, z: T): boolean;
|
|
2
|
+
export declare let RadioGroup: import("vue").DefineComponent<{
|
|
3
|
+
as: {
|
|
4
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
5
|
+
default: string;
|
|
6
|
+
};
|
|
7
|
+
disabled: {
|
|
8
|
+
type: BooleanConstructor[];
|
|
9
|
+
default: boolean;
|
|
10
|
+
};
|
|
11
|
+
by: {
|
|
12
|
+
type: (StringConstructor | FunctionConstructor)[];
|
|
13
|
+
default: () => typeof defaultComparator;
|
|
14
|
+
};
|
|
15
|
+
modelValue: {
|
|
16
|
+
type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
|
|
17
|
+
default: undefined;
|
|
18
|
+
};
|
|
19
|
+
defaultValue: {
|
|
20
|
+
type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
|
|
21
|
+
default: undefined;
|
|
22
|
+
};
|
|
23
|
+
form: {
|
|
24
|
+
type: StringConstructor;
|
|
25
|
+
optional: boolean;
|
|
26
|
+
};
|
|
27
|
+
name: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
optional: boolean;
|
|
30
|
+
};
|
|
31
|
+
id: {
|
|
32
|
+
type: StringConstructor;
|
|
33
|
+
default: () => string;
|
|
34
|
+
};
|
|
35
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
38
|
+
'update:modelValue': (_value: any) => true;
|
|
39
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
40
|
+
as: {
|
|
41
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
42
|
+
default: string;
|
|
43
|
+
};
|
|
44
|
+
disabled: {
|
|
45
|
+
type: BooleanConstructor[];
|
|
46
|
+
default: boolean;
|
|
47
|
+
};
|
|
48
|
+
by: {
|
|
49
|
+
type: (StringConstructor | FunctionConstructor)[];
|
|
50
|
+
default: () => typeof defaultComparator;
|
|
51
|
+
};
|
|
52
|
+
modelValue: {
|
|
53
|
+
type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
|
|
54
|
+
default: undefined;
|
|
55
|
+
};
|
|
56
|
+
defaultValue: {
|
|
57
|
+
type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
|
|
58
|
+
default: undefined;
|
|
59
|
+
};
|
|
60
|
+
form: {
|
|
61
|
+
type: StringConstructor;
|
|
62
|
+
optional: boolean;
|
|
63
|
+
};
|
|
64
|
+
name: {
|
|
65
|
+
type: StringConstructor;
|
|
66
|
+
optional: boolean;
|
|
67
|
+
};
|
|
68
|
+
id: {
|
|
69
|
+
type: StringConstructor;
|
|
70
|
+
default: () => string;
|
|
71
|
+
};
|
|
72
|
+
}>> & {
|
|
73
|
+
"onUpdate:modelValue"?: ((_value: any) => any) | undefined;
|
|
74
|
+
}, {
|
|
75
|
+
id: string;
|
|
76
|
+
as: string | Record<string, any>;
|
|
77
|
+
disabled: boolean;
|
|
78
|
+
by: string | Function;
|
|
79
|
+
modelValue: string | number | boolean | Record<string, any>;
|
|
80
|
+
defaultValue: string | number | boolean | Record<string, any>;
|
|
81
|
+
}>;
|
|
82
|
+
export declare let RadioGroupOption: import("vue").DefineComponent<{
|
|
83
|
+
as: {
|
|
84
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
85
|
+
default: string;
|
|
86
|
+
};
|
|
87
|
+
value: {
|
|
88
|
+
type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
|
|
89
|
+
};
|
|
90
|
+
disabled: {
|
|
91
|
+
type: BooleanConstructor;
|
|
92
|
+
default: boolean;
|
|
93
|
+
};
|
|
94
|
+
id: {
|
|
95
|
+
type: StringConstructor;
|
|
96
|
+
default: () => string;
|
|
97
|
+
};
|
|
98
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
99
|
+
[key: string]: any;
|
|
100
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
101
|
+
[key: string]: any;
|
|
102
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
103
|
+
as: {
|
|
104
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
105
|
+
default: string;
|
|
106
|
+
};
|
|
107
|
+
value: {
|
|
108
|
+
type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
|
|
109
|
+
};
|
|
110
|
+
disabled: {
|
|
111
|
+
type: BooleanConstructor;
|
|
112
|
+
default: boolean;
|
|
113
|
+
};
|
|
114
|
+
id: {
|
|
115
|
+
type: StringConstructor;
|
|
116
|
+
default: () => string;
|
|
117
|
+
};
|
|
118
|
+
}>>, {
|
|
119
|
+
id: string;
|
|
120
|
+
as: string | Record<string, any>;
|
|
121
|
+
disabled: boolean;
|
|
122
|
+
}>;
|
|
123
|
+
export declare let RadioGroupLabel: import("vue").DefineComponent<{
|
|
124
|
+
as: {
|
|
125
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
126
|
+
default: string;
|
|
127
|
+
};
|
|
128
|
+
passive: {
|
|
129
|
+
type: BooleanConstructor[];
|
|
130
|
+
default: boolean;
|
|
131
|
+
};
|
|
132
|
+
id: {
|
|
133
|
+
type: StringConstructor;
|
|
134
|
+
default: () => string;
|
|
135
|
+
};
|
|
136
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
137
|
+
[key: string]: any;
|
|
138
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
139
|
+
[key: string]: any;
|
|
140
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
141
|
+
as: {
|
|
142
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
143
|
+
default: string;
|
|
144
|
+
};
|
|
145
|
+
passive: {
|
|
146
|
+
type: BooleanConstructor[];
|
|
147
|
+
default: boolean;
|
|
148
|
+
};
|
|
149
|
+
id: {
|
|
150
|
+
type: StringConstructor;
|
|
151
|
+
default: () => string;
|
|
152
|
+
};
|
|
153
|
+
}>>, {
|
|
154
|
+
passive: boolean;
|
|
155
|
+
id: string;
|
|
156
|
+
as: string | Record<string, any>;
|
|
157
|
+
}>;
|
|
158
|
+
export declare let RadioGroupDescription: import("vue").DefineComponent<{
|
|
159
|
+
as: {
|
|
160
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
161
|
+
default: string;
|
|
162
|
+
};
|
|
163
|
+
id: {
|
|
164
|
+
type: StringConstructor;
|
|
165
|
+
default: () => string;
|
|
166
|
+
};
|
|
167
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
168
|
+
[key: string]: any;
|
|
169
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
170
|
+
[key: string]: any;
|
|
171
|
+
}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
172
|
+
as: {
|
|
173
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
174
|
+
default: string;
|
|
175
|
+
};
|
|
176
|
+
id: {
|
|
177
|
+
type: StringConstructor;
|
|
178
|
+
default: () => string;
|
|
179
|
+
};
|
|
180
|
+
}>>, {
|
|
181
|
+
id: string;
|
|
182
|
+
as: string | Record<string, any>;
|
|
183
|
+
}>;
|
|
184
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Fragment as M,computed as o,defineComponent as A,h as F,inject as _,onMounted as C,onUnmounted as $,provide as U,ref as h,toRaw as y,watch as W}from"vue";import{useControllable as J}from'../../hooks/use-controllable.js';import{useId as D}from'../../hooks/use-id.js';import{useTreeWalker as q}from'../../hooks/use-tree-walker.js';import{Hidden as Q,Features as X}from'../../internal/hidden.js';import{Keys as g}from'../../keyboard.js';import{dom as O}from'../../utils/dom.js';import{Focus as k,FocusResult as x,focusIn as I,sortByDomNode as Y}from'../../utils/focus-management.js';import{attemptSubmit as Z,objectToFormEntries as z}from'../../utils/form.js';import{getOwnerDocument as L}from'../../utils/owner.js';import{compact as ee,omit as te,render as P}from'../../utils/render.js';import{Description as ae,useDescriptions as B}from'../description/description.js';import{Label as ne,useLabels as V}from'../label/label.js';function re(t,c){return t===c}let j=Symbol("RadioGroupContext");function H(t){let c=_(j,null);if(c===null){let u=new Error(`<${t} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(u,H),u}return c}let ge=A({name:"RadioGroup",emits:{"update:modelValue":t=>!0},props:{as:{type:[Object,String],default:"div"},disabled:{type:[Boolean],default:!1},by:{type:[String,Function],default:()=>re},modelValue:{type:[Object,String,Number,Boolean],default:void 0},defaultValue:{type:[Object,String,Number,Boolean],default:void 0},form:{type:String,optional:!0},name:{type:String,optional:!0},id:{type:String,default:()=>`headlessui-radiogroup-${D()}`}},inheritAttrs:!1,setup(t,{emit:c,attrs:u,slots:E,expose:d}){let s=h(null),i=h([]),R=V({name:"RadioGroupLabel"}),w=B({name:"RadioGroupDescription"});d({el:s,$el:s});let[f,S]=J(o(()=>t.modelValue),e=>c("update:modelValue",e),o(()=>t.defaultValue)),p={options:i,value:f,disabled:o(()=>t.disabled),firstOption:o(()=>i.value.find(e=>!e.propsRef.disabled)),containsCheckedOption:o(()=>i.value.some(e=>p.compare(y(e.propsRef.value),y(t.modelValue)))),compare(e,a){if(typeof t.by=="string"){let n=t.by;return(e==null?void 0:e[n])===(a==null?void 0:a[n])}return t.by(e,a)},change(e){var n;if(t.disabled||p.compare(y(f.value),y(e)))return!1;let a=(n=i.value.find(l=>p.compare(y(l.propsRef.value),y(e))))==null?void 0:n.propsRef;return a!=null&&a.disabled?!1:(S(e),!0)},registerOption(e){i.value.push(e),i.value=Y(i.value,a=>a.element)},unregisterOption(e){let a=i.value.findIndex(n=>n.id===e);a!==-1&&i.value.splice(a,1)}};U(j,p),q({container:o(()=>O(s)),accept(e){return e.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(e){e.setAttribute("role","none")}});function m(e){if(!s.value||!s.value.contains(e.target))return;let a=i.value.filter(n=>n.propsRef.disabled===!1).map(n=>n.element);switch(e.key){case g.Enter:Z(e.currentTarget);break;case g.ArrowLeft:case g.ArrowUp:if(e.preventDefault(),e.stopPropagation(),I(a,k.Previous|k.WrapAround)===x.Success){let l=i.value.find(r=>{var b;return r.element===((b=L(s))==null?void 0:b.activeElement)});l&&p.change(l.propsRef.value)}break;case g.ArrowRight:case g.ArrowDown:if(e.preventDefault(),e.stopPropagation(),I(a,k.Next|k.WrapAround)===x.Success){let l=i.value.find(r=>{var b;return r.element===((b=L(r.element))==null?void 0:b.activeElement)});l&&p.change(l.propsRef.value)}break;case g.Space:{e.preventDefault(),e.stopPropagation();let n=i.value.find(l=>{var r;return l.element===((r=L(l.element))==null?void 0:r.activeElement)});n&&p.change(n.propsRef.value)}break}}let v=o(()=>{var e;return(e=O(s))==null?void 0:e.closest("form")});return C(()=>{W([v],()=>{if(!v.value||t.defaultValue===void 0)return;function e(){p.change(t.defaultValue)}return v.value.addEventListener("reset",e),()=>{var a;(a=v.value)==null||a.removeEventListener("reset",e)}},{immediate:!0})}),()=>{let{disabled:e,name:a,id:n,form:l,...r}=t,b={ref:s,id:n,role:"radiogroup","aria-labelledby":R.value,"aria-describedby":w.value,onKeydown:m};return F(M,[...a!=null&&f.value!=null?z({[a]:f.value}).map(([T,G])=>F(Q,ee({features:X.Hidden,key:T,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:l,disabled:e,name:T,value:G}))):[],P({ourProps:b,theirProps:{...u,...te(r,["modelValue","defaultValue","by"])},slot:{},attrs:u,slots:E,name:"RadioGroup"})])}}});var ie=(u=>(u[u.Empty=1]="Empty",u[u.Active=2]="Active",u))(ie||{});let he=A({name:"RadioGroupOption",props:{as:{type:[Object,String],default:"div"},value:{type:[Object,String,Number,Boolean]},disabled:{type:Boolean,default:!1},id:{type:String,default:()=>`headlessui-radiogroup-option-${D()}`}},setup(t,{attrs:c,slots:u,expose:E}){let d=H("RadioGroupOption"),s=V({name:"RadioGroupLabel"}),i=B({name:"RadioGroupDescription"}),R=h(null),w=o(()=>({value:t.value,disabled:t.disabled})),f=h(1);E({el:R,$el:R});let S=o(()=>O(R));C(()=>d.registerOption({id:t.id,element:S,propsRef:w})),$(()=>d.unregisterOption(t.id));let p=o(()=>{var r;return((r=d.firstOption.value)==null?void 0:r.id)===t.id}),m=o(()=>d.disabled.value||t.disabled),v=o(()=>d.compare(y(d.value.value),y(t.value))),e=o(()=>m.value?-1:v.value||!d.containsCheckedOption.value&&p.value?0:-1);function a(){var r;d.change(t.value)&&(f.value|=2,(r=O(R))==null||r.focus())}function n(){f.value|=2}function l(){f.value&=-3}return()=>{let{id:r,value:b,disabled:T,...G}=t,N={checked:v.value,disabled:m.value,active:!!(f.value&2)},K={id:r,ref:R,role:"radio","aria-checked":v.value?"true":"false","aria-labelledby":s.value,"aria-describedby":i.value,"aria-disabled":m.value?!0:void 0,tabIndex:e.value,onClick:m.value?void 0:a,onFocus:m.value?void 0:n,onBlur:m.value?void 0:l};return P({ourProps:K,theirProps:G,slot:N,attrs:c,slots:u,name:"RadioGroupOption"})}}}),Oe=ne,ke=ae;export{ge as RadioGroup,ke as RadioGroupDescription,Oe as RadioGroupLabel,he as RadioGroupOption};
|