@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/dist/components/VvDropdown/VvDropdown.umd.js

@@ -1 +1 @@
-(function(t,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue"),require("@floating-ui/vue")):typeof define=="function"&&define.amd?define(["vue","@floating-ui/vue"],l):(t=typeof globalThis<"u"?globalThis:t||self,t.VvDropdown=l(t.vue,t.vue$1))})(this,function(t,l){"use strict";var p=(o=>(o.left="left",o.right="right",o.top="top",o.bottom="bottom",o))(p||{}),v=(o=>(o.topStart="top-start",o.topEnd="top-end",o.bottomStart="bottom-start",o.bottomEnd="bottom-end",o.leftStart="left-start",o.leftEnd="left-end",o.rightStart="right-start",o.rightEnd="right-end",o))(v||{}),m=(o=>(o.before="before",o.after="after",o))(m||{});const V={modifiers:[String,Array]};m.before;const z={id:[String,Number]},N={placement:{type:String,default:p.bottom,validator:o=>Object.values(p).includes(o)||Object.values(v).includes(o)},transitionName:{type:String},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},autoClose:{type:Boolean,default:!0},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}},w=["listbox","menu"],j={...z,...V,...N,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:w[1],validator:o=>w.includes(o)}},A=["id","tabindex","role","aria-labelledby"],R={name:"VvDropdown",inheritAttrs:!1};return t.defineComponent({...R,props:j,emits:["update:modelValue"],setup(o,{emit:C}){const r=o,{id:W}=toRefs(r),h=useUniqueId(W),T=useAttrs(),x=ref("auto"),E=ref("auto"),S=ref(null),s=ref(null),u=ref(null),F=ref(null),i=computed({get:()=>r.reference??S.value,set:e=>{S.value=e}}),I=computed(()=>{const e=[];if(r.autoPlacement?typeof r.autoPlacement=="boolean"?e.push(l.autoPlacement()):e.push(l.autoPlacement(r.autoPlacement)):r.flip&&(typeof r.flip=="boolean"?e.push(l.flip()):e.push(l.flip(r.flip))),r.shift&&(typeof r.shift=="boolean"?e.push(l.shift()):e.push(l.shift(r.shift))),r.size){const n=({availableWidth:d,availableHeight:c})=>{x.value=`${d}px`,E.value=`${c}px`};typeof r.size=="boolean"?e.push(l.size({apply:n})):e.push(l.size({...r.size,apply:n}))}return r.offset&&(e.push(l.offset(Number(r.offset))),["string","number"].includes(typeof r.offset)?e.push(l.offset(Number(r.offset))):e.push(l.offset(r.offset))),r.arrow&&e.push(l.arrow({element:u})),e}),{x:K,y:M,strategy:q,middlewareData:P,placement:U}=l.useFloating(i,s,{whileElementsMounted:l.autoUpdate,placement:r.placement,middleware:I}),H=computed(()=>({position:q.value,top:`${M.value??0}px`,left:`${K.value??0}px`,maxWidth:x.value,maxHeight:E.value,width:r.triggerWidth&&i.value?`${i.value.offsetWidth}px`:void 0})),L=computed(()=>U.value.split("-")[0]),b=computed(()=>({top:"bottom",right:"left",bottom:"top",left:"right"})[L.value]??"bottom"),$=computed(()=>{var e,n,d,c;return["bottom","top"].includes(b.value)?{right:`${((e=P.value.arrow)==null?void 0:e.x)??0}px`,[b.value]:`${-(((n=u.value)==null?void 0:n.offsetWidth)??0)/2}px`}:{top:`${((d=P.value.arrow)==null?void 0:d.y)??0}px`,[b.value]:`${-(((c=u.value)==null?void 0:c.offsetWidth)??0)/2}px`}}),g=useVModel(r,"modelValue",C),k=ref(!1),a=computed({get:()=>g.value??k.value,set:e=>{if(g.value===void 0){k.value=e;return}g.value=e}}),G=()=>{a.value=!0},_=()=>{a.value=!1},D=()=>{a.value=!a.value},J=e=>{i.value=e};watch(a,e=>{e&&r.autofocusFirst&&nextTick(()=>{const n=y(s.value);n.length>0&&n[0].focus()})}),onClickOutside(s,()=>{r.autoClose&&(a.value=!1)},{ignore:[i]});const Q=computed(()=>{var e;return((e=i.value)==null?void 0:e.getAttribute("id"))??void 0}),O=computed(()=>({"aria-controls":h.value,"aria-haspopup":!0,"aria-expanded":a.value})),{component:X,bus:Y}=useProvideDropdownTrigger({reference:i,id:h,expanded:a,aria:O});Y.on("click",D);const{role:B,modifiers:Z}=toRefs(r),{itemRole:ee}=useProvideDropdownItem({role:B,expanded:a}),te=useBemModifiers("vv-dropdown",Z,computed(()=>({arrow:r.arrow}))),{focused:f}=useFocusWithin(s);function y(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')].filter(n=>!n.hasAttribute("disabled")&&!n.getAttribute("aria-hidden")):[]}const oe=()=>{nextTick(()=>{if(f.value){const e=y(s.value);if(e.length===0||!document.activeElement)return;const n=e.indexOf(document.activeElement);n<e.length-1?e[n+1].focus():e[0].focus()}})},re=()=>{nextTick(()=>{if(f.value){const e=y(s.value);if(e.length===0||!document.activeElement)return;const n=e.indexOf(document.activeElement);n>0?e[n-1].focus():e[e.length-1].focus()}})};return onKeyStroke("Escape",e=>{a.value&&(e.preventDefault(),_())}),onKeyStroke("ArrowDown",e=>{a.value&&f.value&&(e.preventDefault(),oe())}),onKeyStroke("ArrowUp",e=>{a.value&&f.value&&(e.preventDefault(),re())}),onKeyStroke([" ","Enter"],e=>{a.value&&f.value&&(e.preventDefault(),document.activeElement.click())}),(e,n)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(X),null,{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps({init:J,show:G,hide:_,toggle:D,expanded:t.unref(a),aria:t.unref(O)})))]),_:3}),t.createVNode(t.Transition,{name:e.transitionName},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",{ref_key:"floatingEl",ref:s,style:t.normalizeStyle(t.unref(H)),class:t.normalizeClass(t.unref(te))},[r.arrow?(t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:u,style:t.normalizeStyle(t.unref($)),class:"vv-dropdown__arrow"},null,4)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"before",t.normalizeProps(t.guardReactiveProps({expanded:t.unref(a)}))),t.createElementVNode("ul",t.mergeProps(t.unref(T),{id:t.unref(h),ref_key:"listEl",ref:F,tabindex:t.unref(a)?void 0:-1,role:t.unref(B),"aria-labelledby":t.unref(Q),class:"vv-dropdown__list"}),[t.renderSlot(e.$slots,"items",t.normalizeProps(t.guardReactiveProps({role:t.unref(ee)})))],16,A),t.renderSlot(e.$slots,"after",t.normalizeProps(t.guardReactiveProps({expanded:t.unref(a)})))],6),[[t.vShow,t.unref(a)]])]),_:3},8,["name"])],64))}})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@floating-ui/vue"),require("nanoid"),require("@vueuse/core"),require("mitt")):"function"==typeof define&&define.amd?define(["vue","@floating-ui/vue","nanoid","@vueuse/core","mitt"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdown=t(e.vue,e.vue$1,e.nanoid,e.core,e.mitt)}(this,(function(e,t,o,l,r){"use strict";var n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),a=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(a||{}),u=(e=>(e.before="before",e.after="after",e))(u||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),d=(e=>(e.listbox="listbox",e.menu="menu",e))(d||{}),s=(e=>(e.option="option",e.presentation="presentation",e))(s||{});const f=Symbol.for("dropdownTrigger"),p=Symbol.for("dropdownItem"),c=(Boolean,Boolean,Boolean,{modifiers:[String,Array]});u.before;const v={id:[String,Number]},m={placement:{type:String,default:n.bottom,validator:e=>Object.values(n).includes(e)||Object.values(a).includes(e)},transitionName:{type:String},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},autoClose:{type:Boolean,default:!0},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}};i.button;const b={...v,...c,...m,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:d.menu,validator:e=>Object.values(d).includes(e)}};const h=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:b,emits:["update:modelValue"],setup(n,{emit:a}){const u=n,{id:i}=e.toRefs(u),c=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(i),v=e.useAttrs(),m=e.ref("auto"),b=e.ref("auto"),g=e.ref(null),y=e.ref(null),x=e.ref(null),w=e.ref(null),S=e.computed({get:()=>u.reference??g.value,set:e=>{g.value=e}}),E=e.computed((()=>{const e=[];if(u.autoPlacement?"boolean"==typeof u.autoPlacement?e.push(t.autoPlacement()):e.push(t.autoPlacement(u.autoPlacement)):u.flip&&("boolean"==typeof u.flip?e.push(t.flip()):e.push(t.flip(u.flip))),u.shift&&("boolean"==typeof u.shift?e.push(t.shift()):e.push(t.shift(u.shift))),u.size){const o=({availableWidth:e,availableHeight:t})=>{m.value=`${e}px`,b.value=`${t}px`};"boolean"==typeof u.size?e.push(t.size({apply:o})):e.push(t.size({...u.size,apply:o}))}return u.offset&&(e.push(t.offset(Number(u.offset))),["string","number"].includes(typeof u.offset)?e.push(t.offset(Number(u.offset))):e.push(t.offset(u.offset))),u.arrow&&e.push(t.arrow({element:x})),e})),{x:k,y:$,strategy:B,middlewareData:P,placement:z}=t.useFloating(S,y,{whileElementsMounted:t.autoUpdate,placement:u.placement,middleware:E}),O=e.computed((()=>({position:B.value,top:`${$.value??0}px`,left:`${k.value??0}px`,maxWidth:m.value,maxHeight:b.value,width:u.triggerWidth&&S.value?`${S.value.offsetWidth}px`:void 0}))),V=e.computed((()=>z.value.split("-")[0])),j=e.computed((()=>({top:"bottom",right:"left",bottom:"top",left:"right"}[V.value]??"bottom"))),A=e.computed((()=>{var e,t,o,l;return["bottom","top"].includes(j.value)?{right:`${(null==(e=P.value.arrow)?void 0:e.x)??0}px`,[j.value]:-((null==(t=x.value)?void 0:t.offsetWidth)??0)/2+"px"}:{top:`${(null==(o=P.value.arrow)?void 0:o.y)??0}px`,[j.value]:-((null==(l=x.value)?void 0:l.offsetWidth)??0)/2+"px"}})),N=l.useVModel(u,"modelValue",a),D=e.ref(!1),C=e.computed({get:()=>N.value??D.value,set:e=>{void 0!==N.value?N.value=e:D.value=e}}),_=()=>{C.value=!0},R=()=>{C.value=!1},T=()=>{C.value=!C.value},W=e=>{S.value=e};e.watch(C,(t=>{t&&u.autofocusFirst&&e.nextTick((()=>{const e=L(y.value);e.length>0&&e[0].focus()}))})),l.onClickOutside(y,(()=>{u.autoClose&&(C.value=!1)}),{ignore:[S]});const q=e.computed((()=>{var e,t;return(null==(t=null==(e=S.value)?void 0:e.getAttribute)?void 0:t.call(e,"id"))??void 0})),F=e.computed((()=>({"aria-controls":c.value,"aria-haspopup":!0,"aria-expanded":C.value}))),{component:K,bus:H}=function({reference:t,id:o,expanded:l,aria:n}){const a=r(),u=e.defineComponent({name:"VvDropdownTriggerProvider",provide:()=>({[f]:{reference:t,id:o,expanded:l,aria:n,bus:a}}),setup:()=>({}),render(){var t,o;return e.h(e.Fragment,{},null==(o=(t=this.$slots).default)?void 0:o.call(t))}});return{bus:a,component:u}}({reference:S,id:c,expanded:C,aria:F});H.on("click",T);const{role:M,modifiers:U}=e.toRefs(u),{itemRole:I}=function({role:t,expanded:o}){const l=e.computed((()=>t.value===d.listbox?s.option:s.presentation));return e.provide(p,{role:l,expanded:o}),{itemRole:l}}({role:M,expanded:C}),G=function(t,o,l){return e.computed((()=>{const r={[t]:!0},n="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(r[`${t}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((o=>{r[`${t}--${o}`]=e.unref(l.value[o])})),r}))}("vv-dropdown",U,e.computed((()=>({arrow:u.arrow})))),{focused:J}=l.useFocusWithin(y);function L(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')].filter((e=>!e.hasAttribute("disabled")&&!e.getAttribute("aria-hidden"))):[]}return l.onKeyStroke("Escape",(e=>{C.value&&(e.preventDefault(),R())})),l.onKeyStroke("ArrowDown",(t=>{C.value&&J.value&&(t.preventDefault(),e.nextTick((()=>{if(J.value){const e=L(y.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus():e[0].focus()}})))})),l.onKeyStroke("ArrowUp",(t=>{C.value&&J.value&&(t.preventDefault(),e.nextTick((()=>{if(J.value){const e=L(y.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus():e[e.length-1].focus()}})))})),l.onKeyStroke([" ","Enter"],(e=>{if(C.value&&J.value){e.preventDefault();document.activeElement.click()}})),(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(K),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:W,show:_,hide:R,toggle:T,expanded:e.unref(C),aria:e.unref(F)})))])),_:3}),e.createVNode(e.Transition,{name:t.transitionName},{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:y,style:e.normalizeStyle(e.unref(O)),class:e.normalizeClass(e.unref(G))},[u.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:x,style:e.normalizeStyle(e.unref(A)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(C)}))),e.createElementVNode("ul",e.mergeProps(e.unref(v),{id:e.unref(c),ref_key:"listEl",ref:w,tabindex:e.unref(C)?void 0:-1,role:e.unref(M),"aria-labelledby":e.unref(q),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(I)})))],16,h),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(C)})))],6),[[e.vShow,e.unref(C)]])])),_:3},8,["name"])],64))}})}));

package/dist/components/VvDropdown/VvDropdown.vue.d.ts

@@ -4,47 +4,67 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     reference: {
-        type: import("vue").PropType<HTMLElement | null>;
+        type: globalThis.PropType<HTMLElement | null>;
         default: null;
     };
     role: {
-        type: import("vue").PropType<"menu" | "listbox">;
-        default: "menu";
-        validator: (value: string) => boolean;
+        type: globalThis.PropType<"menu" | "listbox">;
+        default: import("@/constants").DropdownRole;
+        validator: (value: import("@/constants").DropdownRole) => boolean;
     };
     placement: {
-        type: import("vue").PropType<import("../../constants.js").Side | import("../../constants.js").Placement>;
-        default: import("../../constants.js").Side;
+        type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        default: import("@/constants").Side;
         validator: (value: never) => boolean;
     };
     transitionName: {
         type: StringConstructor;
     };
     offset: {
-        type: import("vue").PropType<string | import("@floating-ui/core").OffsetOptions | undefined>;
+        type: globalThis.PropType<string | import("@floating-ui/vue").OffsetOptions | undefined>;
         default: number;
     };
     shift: {
-        type: import("vue").PropType<boolean | Partial<import("@floating-ui/core").ShiftOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: globalThis.PropType<boolean | Partial<import("@floating-ui/vue").ShiftOptions & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: boolean;
     };
     flip: {
-        type: import("vue").PropType<boolean | Partial<import("@floating-ui/core").FlipOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: globalThis.PropType<boolean | Partial<import("@floating-ui/vue").FlipOptions & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: boolean;
     };
     size: {
-        type: import("vue").PropType<boolean | Partial<Omit<import("@floating-ui/core").SizeOptions, "apply"> & {
-            apply(args: Omit<import("@floating-ui/core").MiddlewareArguments, "elements"> & {
+        type: globalThis.PropType<boolean | Partial<{
+            apply: (args: {
+                x: number;
+                y: number;
+                placement: import("@floating-ui/vue").Placement;
+                initialPlacement: import("@floating-ui/vue").Placement;
+                strategy: import("@floating-ui/vue").Strategy;
+                middlewareData: import("@floating-ui/vue").MiddlewareData;
+                rects: import("@floating-ui/vue").ElementRects;
+                platform: import("@floating-ui/core").Platform;
                 elements: import("@floating-ui/vue").Elements;
             } & {
                 availableWidth: number;
                 availableHeight: number;
-            }): void | Promise<void>;
-        } & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+            }) => void | Promise<void>;
+        } & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: () => {
@@ -52,7 +72,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         };
     };
     autoPlacement: {
-        type: import("vue").PropType<boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: globalThis.PropType<boolean | Partial<import("@floating-ui/vue").AutoPlacementOptions & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: boolean;
@@ -72,7 +96,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     triggerWidth: {
         type: BooleanConstructor;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -80,47 +104,67 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     reference: {
-        type: import("vue").PropType<HTMLElement | null>;
+        type: globalThis.PropType<HTMLElement | null>;
         default: null;
     };
     role: {
-        type: import("vue").PropType<"menu" | "listbox">;
-        default: "menu";
-        validator: (value: string) => boolean;
+        type: globalThis.PropType<"menu" | "listbox">;
+        default: import("@/constants").DropdownRole;
+        validator: (value: import("@/constants").DropdownRole) => boolean;
     };
     placement: {
-        type: import("vue").PropType<import("../../constants.js").Side | import("../../constants.js").Placement>;
-        default: import("../../constants.js").Side;
+        type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        default: import("@/constants").Side;
         validator: (value: never) => boolean;
     };
     transitionName: {
         type: StringConstructor;
     };
     offset: {
-        type: import("vue").PropType<string | import("@floating-ui/core").OffsetOptions | undefined>;
+        type: globalThis.PropType<string | import("@floating-ui/vue").OffsetOptions | undefined>;
         default: number;
     };
     shift: {
-        type: import("vue").PropType<boolean | Partial<import("@floating-ui/core").ShiftOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: globalThis.PropType<boolean | Partial<import("@floating-ui/vue").ShiftOptions & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: boolean;
     };
     flip: {
-        type: import("vue").PropType<boolean | Partial<import("@floating-ui/core").FlipOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: globalThis.PropType<boolean | Partial<import("@floating-ui/vue").FlipOptions & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: boolean;
     };
     size: {
-        type: import("vue").PropType<boolean | Partial<Omit<import("@floating-ui/core").SizeOptions, "apply"> & {
-            apply(args: Omit<import("@floating-ui/core").MiddlewareArguments, "elements"> & {
+        type: globalThis.PropType<boolean | Partial<{
+            apply: (args: {
+                x: number;
+                y: number;
+                placement: import("@floating-ui/vue").Placement;
+                initialPlacement: import("@floating-ui/vue").Placement;
+                strategy: import("@floating-ui/vue").Strategy;
+                middlewareData: import("@floating-ui/vue").MiddlewareData;
+                rects: import("@floating-ui/vue").ElementRects;
+                platform: import("@floating-ui/core").Platform;
                 elements: import("@floating-ui/vue").Elements;
             } & {
                 availableWidth: number;
                 availableHeight: number;
-            }): void | Promise<void>;
-        } & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+            }) => void | Promise<void>;
+        } & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: () => {
@@ -128,7 +172,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         };
     };
     autoPlacement: {
-        type: import("vue").PropType<boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: globalThis.PropType<boolean | Partial<import("@floating-ui/vue").AutoPlacementOptions & {
+            rootBoundary: import("@floating-ui/vue").RootBoundary;
+            elementContext: import("@floating-ui/vue").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/vue").Padding;
             boundary: import("@floating-ui/vue").Boundary;
         }> | undefined>;
         default: boolean;
@@ -148,33 +196,57 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     triggerWidth: {
         type: BooleanConstructor;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;
-    shift: boolean | Partial<import("@floating-ui/core").ShiftOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
-        boundary: import("@floating-ui/vue").Boundary;
-    }> | undefined;
-    flip: boolean | Partial<import("@floating-ui/core").FlipOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+    shift: boolean | Partial<import("@floating-ui/vue").ShiftOptions & {
+        rootBoundary: import("@floating-ui/vue").RootBoundary;
+        elementContext: import("@floating-ui/vue").ElementContext;
+        altBoundary: boolean;
+        padding: import("@floating-ui/vue").Padding;
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
     reference: HTMLElement | null;
     role: "menu" | "listbox";
-    placement: import("../../constants.js").Side | import("../../constants.js").Placement;
-    offset: string | import("@floating-ui/core").OffsetOptions | undefined;
-    size: boolean | Partial<Omit<import("@floating-ui/core").SizeOptions, "apply"> & {
-        apply(args: Omit<import("@floating-ui/core").MiddlewareArguments, "elements"> & {
+    flip: boolean | Partial<import("@floating-ui/vue").FlipOptions & {
+        rootBoundary: import("@floating-ui/vue").RootBoundary;
+        elementContext: import("@floating-ui/vue").ElementContext;
+        altBoundary: boolean;
+        padding: import("@floating-ui/vue").Padding;
+        boundary: import("@floating-ui/vue").Boundary;
+    }> | undefined;
+    placement: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+    offset: string | import("@floating-ui/vue").OffsetOptions | undefined;
+    size: boolean | Partial<{
+        apply: (args: {
+            x: number;
+            y: number;
+            placement: import("@floating-ui/vue").Placement;
+            initialPlacement: import("@floating-ui/vue").Placement;
+            strategy: import("@floating-ui/vue").Strategy;
+            middlewareData: import("@floating-ui/vue").MiddlewareData;
+            rects: import("@floating-ui/vue").ElementRects;
+            platform: import("@floating-ui/core").Platform;
             elements: import("@floating-ui/vue").Elements;
         } & {
             availableWidth: number;
             availableHeight: number;
-        }): void | Promise<void>;
-    } & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        }) => void | Promise<void>;
+    } & {
+        rootBoundary: import("@floating-ui/vue").RootBoundary;
+        elementContext: import("@floating-ui/vue").ElementContext;
+        altBoundary: boolean;
+        padding: import("@floating-ui/vue").Padding;
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
-    autoPlacement: boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+    autoPlacement: boolean | Partial<import("@floating-ui/vue").AutoPlacementOptions & {
+        rootBoundary: import("@floating-ui/vue").RootBoundary;
+        elementContext: import("@floating-ui/vue").ElementContext;
+        altBoundary: boolean;
+        padding: import("@floating-ui/vue").Padding;
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
     arrow: boolean;
@@ -198,7 +270,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         expanded: boolean;
     }) => any;
     items: (_: {
-        role: "option" | "presentation";
+        role: import("@/constants").DropdownItemRole;
     }) => any;
     after: (_: {
         expanded: boolean;

package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts

@@ -0,0 +1,61 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modifiers: globalThis.PropType<string | string[]>;
+    type: {
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    href: StringConstructor;
+    target: {
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
+    };
+    rel: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    label: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modifiers: globalThis.PropType<string | string[]>;
+    type: {
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    href: StringConstructor;
+    target: {
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
+    };
+    rel: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    label: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+}>>, {
+    disabled: boolean;
+    type: "button" | "submit" | "reset";
+    rel: string;
+    active: boolean;
+    pressed: boolean;
+}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts

@@ -0,0 +1,52 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    deselectHintLabel: {
+        type: StringConstructor;
+    };
+    selectHintLabel: {
+        type: StringConstructor;
+    };
+    selectedHintLabel: {
+        type: StringConstructor;
+    };
+    modifiers: globalThis.PropType<string | string[]>;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selected: BooleanConstructor;
+    disabled: BooleanConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    deselectHintLabel: {
+        type: StringConstructor;
+    };
+    selectHintLabel: {
+        type: StringConstructor;
+    };
+    selectedHintLabel: {
+        type: StringConstructor;
+    };
+    modifiers: globalThis.PropType<string | string[]>;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selected: BooleanConstructor;
+    disabled: BooleanConstructor;
+}>>, {
+    disabled: boolean;
+    unselectable: boolean;
+    selected: boolean;
+}>, {
+    default: (_: {}) => any;
+    hint: (_: {
+        disabled: boolean;
+        selected: boolean;
+        unselectable: boolean;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VvDropdown/index.d.ts

@@ -1,8 +1,5 @@
 import type { PropType } from 'vue';
-export declare const DROPDOWN_ROLES: readonly ["listbox", "menu"];
-export declare const DROPDOWN_ITEM_ROLES: readonly ["option", "presentation"];
-export type DropdownRole = (typeof DROPDOWN_ROLES)[number];
-export type DropdownItemRole = (typeof DROPDOWN_ITEM_ROLES)[number];
+import { DropdownRole } from '../../constants';
 export declare const VvDropdownProps: {
     /**
      * Show / hide dropdown programmatically
@@ -23,11 +20,11 @@ export declare const VvDropdownProps: {
      */
     role: {
         type: PropType<"menu" | "listbox">;
-        default: "menu";
-        validator: (value: string) => boolean;
+        default: DropdownRole;
+        validator: (value: DropdownRole) => boolean;
     };
     placement: {
-        type: PropType<import("../../constants").Side | import("../../constants").Placement>;
+        type: PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
         default: import("../../constants").Side;
         validator: (value: never) => boolean;
     };
@@ -39,26 +36,46 @@ export declare const VvDropdownProps: {
         default: number;
     };
     shift: {
-        type: PropType<boolean | Partial<import("@floating-ui/core").ShiftOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: PropType<boolean | Partial<import("@floating-ui/core").ShiftOptions & {
+            rootBoundary: import("@floating-ui/core").RootBoundary;
+            elementContext: import("@floating-ui/core").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/core").Padding;
             boundary: import("@floating-ui/dom").Boundary;
         }> | undefined>;
         default: boolean;
     };
     flip: {
-        type: PropType<boolean | Partial<import("@floating-ui/core").FlipOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: PropType<boolean | Partial<import("@floating-ui/core").FlipOptions & {
+            rootBoundary: import("@floating-ui/core").RootBoundary;
+            elementContext: import("@floating-ui/core").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/core").Padding;
             boundary: import("@floating-ui/dom").Boundary;
         }> | undefined>;
         default: boolean;
     };
     size: {
-        type: PropType<boolean | Partial<Omit<import("@floating-ui/core").SizeOptions, "apply"> & {
-            apply(args: Omit<import("@floating-ui/core").MiddlewareArguments, "elements"> & {
+        type: PropType<boolean | Partial<{
+            apply: (args: {
+                x: number;
+                y: number;
+                placement: import("@floating-ui/core").Placement;
+                initialPlacement: import("@floating-ui/core").Placement;
+                strategy: import("@floating-ui/core").Strategy;
+                middlewareData: import("@floating-ui/core").MiddlewareData;
+                rects: import("@floating-ui/core").ElementRects;
+                platform: import("@floating-ui/core").Platform;
                 elements: import("@floating-ui/dom").Elements;
             } & {
                 availableWidth: number;
                 availableHeight: number;
-            }): void | Promise<void>;
-        } & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+            }) => void | Promise<void>;
+        } & {
+            rootBoundary: import("@floating-ui/core").RootBoundary;
+            elementContext: import("@floating-ui/core").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/core").Padding;
             boundary: import("@floating-ui/dom").Boundary;
         }> | undefined>;
         default: () => {
@@ -66,7 +83,11 @@ export declare const VvDropdownProps: {
         };
     };
     autoPlacement: {
-        type: PropType<boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+        type: PropType<boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & {
+            rootBoundary: import("@floating-ui/core").RootBoundary;
+            elementContext: import("@floating-ui/core").ElementContext;
+            altBoundary: boolean;
+            padding: import("@floating-ui/core").Padding;
             boundary: import("@floating-ui/dom").Boundary;
         }> | undefined>;
         default: boolean;