@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

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

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

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

@@ -4,47 +4,72 @@ 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<import("../../constants.js").DropdownRole>;
-        default: import("../../constants.js").DropdownRole;
-        validator: (value: import("../../constants.js").DropdownRole) => 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;
     };
+    strategy: {
+        type: globalThis.PropType<"fixed" | "absolute">;
+        default: string;
+        validator: (value: "fixed" | "absolute") => 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;
+                strategy: import("@floating-ui/vue").Strategy;
+                initialPlacement: import("@floating-ui/vue").Placement;
+                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 +77,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,55 +101,85 @@ 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<{
+}, {
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+    init: (el: HTMLElement) => void;
+}, 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: {
         type: BooleanConstructor;
         default: undefined;
     };
     reference: {
-        type: import("vue").PropType<HTMLElement | null>;
+        type: globalThis.PropType<HTMLElement | null>;
         default: null;
     };
     role: {
-        type: import("vue").PropType<import("../../constants.js").DropdownRole>;
-        default: import("../../constants.js").DropdownRole;
-        validator: (value: import("../../constants.js").DropdownRole) => 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;
     };
+    strategy: {
+        type: globalThis.PropType<"fixed" | "absolute">;
+        default: string;
+        validator: (value: "fixed" | "absolute") => 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;
+                strategy: import("@floating-ui/vue").Strategy;
+                initialPlacement: import("@floating-ui/vue").Placement;
+                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 +187,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 +211,58 @@ 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"> & {
+    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: import("../../constants.js").DropdownRole;
-    flip: boolean | Partial<import("@floating-ui/core").FlipOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+    role: "menu" | "listbox";
+    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: 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"> & {
+    placement: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+    strategy: "fixed" | "absolute";
+    offset: string | import("@floating-ui/vue").OffsetOptions | undefined;
+    size: boolean | Partial<{
+        apply: (args: {
+            x: number;
+            y: number;
+            placement: import("@floating-ui/vue").Placement;
+            strategy: import("@floating-ui/vue").Strategy;
+            initialPlacement: import("@floating-ui/vue").Placement;
+            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 +286,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         expanded: boolean;
     }) => any;
     items: (_: {
-        role: import("../../constants.js").DropdownItemRole;
+        role: import("../../constants").DropdownItemRole;
     }) => any;
     after: (_: {
         expanded: boolean;

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

@@ -1,17 +1,17 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     type: {
-        type: StringConstructor;
-        default: import("../../constants.js").ButtonType;
-        validator: (value: import("../../constants.js").ButtonType) => boolean;
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("../../constants.js").AnchorTarget>;
-        validator: (value: import("../../constants.js").AnchorTarget) => boolean;
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {
         type: StringConstructor;
@@ -22,19 +22,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     type: {
-        type: StringConstructor;
-        default: import("../../constants.js").ButtonType;
-        validator: (value: import("../../constants.js").ButtonType) => boolean;
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("../../constants.js").AnchorTarget>;
-        validator: (value: import("../../constants.js").AnchorTarget) => boolean;
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {
         type: StringConstructor;
@@ -46,7 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: BooleanConstructor;
 }>>, {
     disabled: boolean;
-    type: string;
+    type: "button" | "submit" | "reset";
     rel: string;
     active: boolean;
     pressed: boolean;

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

@@ -8,7 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     selectedHintLabel: {
         type: StringConstructor;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     unselectable: {
         type: BooleanConstructor;
         default: boolean;
@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     selectedHintLabel: {
         type: StringConstructor;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     unselectable: {
         type: BooleanConstructor;
         default: boolean;

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { DropdownRole } from '@/constants';
+import { DropdownRole } from '../../constants';
 export declare const VvDropdownProps: {
     /**
      * Show / hide dropdown programmatically
@@ -19,15 +19,20 @@ export declare const VvDropdownProps: {
      * Dropdown role
      */
     role: {
-        type: PropType<DropdownRole>;
+        type: PropType<"menu" | "listbox">;
         default: DropdownRole;
         validator: (value: DropdownRole) => boolean;
     };
     placement: {
-        type: PropType<import("@/constants").Side | import("@/constants").Placement>;
-        default: import("@/constants").Side;
+        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;
     };
+    strategy: {
+        type: PropType<"fixed" | "absolute">;
+        default: string;
+        validator: (value: "fixed" | "absolute") => boolean;
+    };
     transitionName: {
         type: StringConstructor;
     };
@@ -36,26 +41,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;
+                strategy: import("@floating-ui/core").Strategy;
+                initialPlacement: import("@floating-ui/core").Placement;
+                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: () => {
@@ -63,7 +88,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;