@volverjs/ui-vue 0.0.8-beta.9 → 0.0.9-beta.1

package/dist/components/VvDropdown/VvDropdown.es.js

@@ -350,7 +350,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "beforeExpand",
     "beforeCollapse",
     "afterExpand",
-    "afterCollapse"
+    "afterCollapse",
+    "before-enter",
+    "after-leave",
+    "enter",
+    "after-enter",
+    "enter-cancelled",
+    "before-leave",
+    "leave",
+    "leave-cancelled"
   ],
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
@@ -369,16 +377,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         localReferenceEl.value = newValue;
       }
     });
-    const dropdownCustomPosition = ref();
-    const onChangeDropdownCustomPosition = () => {
-      var _a;
-      dropdownCustomPosition.value = (_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim();
-    };
+    const hasCustomPosition = ref(false);
     onMounted(() => {
-      useMutationObserver(floatingEl.value, onChangeDropdownCustomPosition, {
-        attributeFilter: ["style"],
-        window
-      });
+      useMutationObserver(
+        floatingEl.value,
+        () => {
+          var _a;
+          hasCustomPosition.value = ((_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim()) === "true";
+        },
+        {
+          attributeFilter: ["style"],
+          window
+        }
+      );
     });
     const middleware = computed(() => {
       const toReturn = [];
@@ -455,8 +466,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     const dropdownPlacement = computed(() => {
-      if ((dropdownCustomPosition == null ? void 0 : dropdownCustomPosition.value) === "true") {
-        return {};
+      if (hasCustomPosition.value) {
+        return void 0;
       }
       return {
         position: strategy.value,
@@ -467,29 +478,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
       };
     });
-    const side = computed(() => placement.value.split("-")[0]);
-    const staticSide = computed(
-      () => ({
+    const side = computed(
+      () => placement.value.split("-")[0]
+    );
+    const arrowPlacement = computed(() => {
+      var _a, _b, _c, _d, _e;
+      if (hasCustomPosition.value) {
+        return void 0;
+      }
+      const staticSide = {
         top: "bottom",
         right: "left",
         bottom: "top",
         left: "right"
-      })[side.value] ?? "bottom"
-    );
-    const arrowPlacement = computed(() => {
-      var _a, _b, _c, _d;
-      if ((dropdownCustomPosition == null ? void 0 : dropdownCustomPosition.value) === "true") {
-        return {};
-      }
-      if (["bottom", "top"].includes(staticSide.value)) {
-        return {
-          right: `${((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) ?? 0}px`,
-          [staticSide.value]: `${-(((_b = arrowEl.value) == null ? void 0 : _b.offsetWidth) ?? 0) / 2}px`
-        };
-      }
+      }[side.value];
       return {
-        top: `${((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) ?? 0}px`,
-        [staticSide.value]: `${-(((_d = arrowEl.value) == null ? void 0 : _d.offsetWidth) ?? 0) / 2}px`
+        left: ((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) !== void 0 ? `${(_b = middlewareData.value.arrow) == null ? void 0 : _b.x}px` : void 0,
+        top: ((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) !== void 0 ? `${(_d = middlewareData.value.arrow) == null ? void 0 : _d.y}px` : void 0,
+        [staticSide]: `${-(((_e = arrowEl.value) == null ? void 0 : _e.offsetWidth) ?? 0) / 2}px`
       };
     });
     const modelValue = useVModel(props, "modelValue", emit);
@@ -516,7 +522,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const init = (el) => {
       referenceEl.value = el;
     };
-    __expose({ toggle, show, hide, init, dropdownCustomPosition });
+    __expose({
+      toggle,
+      show,
+      hide,
+      init,
+      customPosition: hasCustomPosition
+    });
     watch(expanded, (newValue) => {
       if (newValue && props.autofocusFirst) {
         nextTick(() => {
@@ -650,11 +662,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         htmlEl == null ? void 0 : htmlEl.click();
       }
     });
-    const onTransitionBeforeEnter = () => {
-      emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-    };
-    const onTransitionAfterLeave = () => {
-      emit(expanded.value ? "afterExpand" : "afterCollapse");
+    const dropdownTransitionHandlers = {
+      "before-enter": () => {
+        emit(expanded.value ? "beforeExpand" : "beforeCollapse");
+        emit("before-enter");
+      },
+      "after-leave": () => {
+        emit(expanded.value ? "afterExpand" : "afterCollapse");
+        emit("after-leave");
+      },
+      enter: () => {
+        emit("enter");
+      },
+      "after-enter": () => {
+        emit("after-enter");
+      },
+      "enter-cancelled": () => {
+        emit("enter-cancelled");
+      },
+      "before-leave": () => {
+        emit("before-leave");
+      },
+      leave: () => {
+        emit("leave");
+      },
+      "leave-cancelled": () => {
+        emit("leave-cancelled");
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
@@ -664,10 +698,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers({
-          beforeEnter: onTransitionBeforeEnter,
-          onAfterLeave: onTransitionAfterLeave
-        })), {
+        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers)), {
           default: withCtx(() => [
             withDirectives(createElementVNode("div", {
               ref_key: "floatingEl",

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

@@ -1 +1 @@
-!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,r,l){"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 p=Symbol.for("dropdownTrigger"),f=Symbol.for("dropdownItem");Boolean,Boolean,Boolean;u.before;const c={id:[String,Number]},v={placement:{type:String,default:n.bottom,validator:e=>Object.values(n).includes(e)||Object.values(a).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},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}};i.button;const m={...c,...v,modifiers:{type:[String,Array],default:"mobile"},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 b=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:m,emits:["update:modelValue","beforeExpand","beforeCollapse","afterExpand","afterCollapse"],setup(n,{expose:a,emit:u}){const i=n,{id:c}=e.toRefs(i),v=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(c),m=e.useAttrs(),g=e.ref("auto"),h=e.ref("auto"),y=e.ref(null),x=e.ref(),w=e.ref(null),S=e.ref(null),E=e.computed({get:()=>i.reference??y.value,set:e=>{y.value=e}}),k=e.ref(),P=()=>{var e;k.value=null==(e=window.getComputedStyle(x.value).getPropertyValue("--dropdown-custom-position"))?void 0:e.trim()};e.onMounted((()=>{r.useMutationObserver(x.value,P,{attributeFilter:["style"],window:window})}));const $=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})=>{g.value=`${e}px`,h.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:B,y:O,strategy:z,middlewareData:C,placement:V}=t.useFloating(E,x,{whileElementsMounted:t.autoUpdate,placement:e.computed((()=>i.placement)),strategy:e.computed((()=>i.strategy)),middleware:$}),A=e.computed((()=>"true"===(null==k?void 0:k.value)?{}:{position:z.value,top:`${O.value??0}px`,left:`${B.value??0}px`,maxWidth:g.value,maxHeight:h.value,width:i.triggerWidth&&E.value?`${E.value.offsetWidth}px`:void 0})),j=e.computed((()=>V.value.split("-")[0])),N=e.computed((()=>({top:"bottom",right:"left",bottom:"top",left:"right"}[j.value]??"bottom"))),D=e.computed((()=>{var e,t,o,r;return"true"===(null==k?void 0:k.value)?{}:["bottom","top"].includes(N.value)?{right:`${(null==(e=C.value.arrow)?void 0:e.x)??0}px`,[N.value]:-((null==(t=w.value)?void 0:t.offsetWidth)??0)/2+"px"}:{top:`${(null==(o=C.value.arrow)?void 0:o.y)??0}px`,[N.value]:-((null==(r=w.value)?void 0:r.offsetWidth)??0)/2+"px"}})),_=r.useVModel(i,"modelValue",u),R=e.ref(!1),T=e.computed({get:()=>_.value??R.value,set:e=>{void 0!==_.value?_.value=e:R.value=e}}),W=()=>{T.value=!0},F=()=>{T.value=!1},q=()=>{T.value=!T.value},K=e=>{E.value=e};a({toggle:q,show:W,hide:F,init:K,dropdownCustomPosition:k}),e.watch(T,(t=>{t&&i.autofocusFirst&&e.nextTick((()=>{const e=Y(x.value);e.length>0&&e[0].focus({preventScroll:!0})}))})),r.onClickOutside(x,(()=>{i.keepOpen||(T.value=!1)}),{ignore:[E]});const M=e.computed((()=>{var e,t;return(null==(t=null==(e=E.value)?void 0:e.getAttribute)?void 0:t.call(e,"id"))??void 0})),H=e.computed((()=>({"aria-controls":v.value,"aria-haspopup":!0,"aria-expanded":T.value}))),{component:U,bus:I}=function({reference:t,id:o,expanded:r,aria:n}){const a=l(),u=e.defineComponent({name:"VvDropdownTriggerProvider",setup(){e.provide(p,{reference:t,id:o,expanded:r,aria:n,bus:a})},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:E,id:v,expanded:T,aria:H});I.on("click",q);const{role:L,modifiers:G}=e.toRefs(i),{itemRole:J}=function({role:t,expanded:o}){const r=e.computed((()=>t.value===d.listbox?s.option:s.presentation));return e.provide(f,{role:r,expanded:o}),{itemRole:r}}({role:L,expanded:T}),Q=function(t,o,r){return e.computed((()=>{const l={[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&&(l[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{l[`${t}--${o}`]=e.unref(r.value[o])})),l}))}("vv-dropdown",G,e.computed((()=>({arrow:i.arrow})))),{focused:X}=r.useFocusWithin(x);function Y(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"))):[]}r.onKeyStroke("Escape",(e=>{T.value&&(e.preventDefault(),F())})),r.onKeyStroke("ArrowDown",(t=>{T.value&&X.value&&(t.preventDefault(),e.nextTick((()=>{if(X.value){const e=Y(x.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus({preventScroll:!0}):e[0].focus({preventScroll:!0})}})))})),r.onKeyStroke("ArrowUp",(t=>{T.value&&X.value&&(t.preventDefault(),e.nextTick((()=>{if(X.value){const e=Y(x.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})))})),r.onKeyStroke([" ","Enter"],(e=>{const t=e.target;T.value&&X.value&&t&&(null==t||t.click())}));const Z=()=>{u(T.value?"beforeExpand":"beforeCollapse")},ee=()=>{u(T.value?"afterExpand":"afterCollapse")};return(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(U),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:K,show:W,hide:F,toggle:q,expanded:e.unref(T),aria:e.unref(H)})))])),_:3}),e.createVNode(e.Transition,e.mergeProps({name:t.transitionName},e.toHandlers({beforeEnter:Z,onAfterLeave:ee})),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:x,style:e.normalizeStyle(e.unref(A)),class:e.normalizeClass(e.unref(Q))},[i.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:w,style:e.normalizeStyle(e.unref(D)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(T)}))),e.createElementVNode("div",e.mergeProps(e.unref(m),{id:e.unref(v),ref_key:"listEl",ref:S,tabindex:e.unref(T)?void 0:-1,role:e.unref(L),"aria-labelledby":e.unref(M),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(J)})))],16,b),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(T)})))],6),[[e.vShow,e.unref(T)]])])),_:3},16,["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,r,l){"use strict";var a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),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");Boolean,Boolean,Boolean;u.before;const c={id:[String,Number]},v={placement:{type:String,default:a.bottom,validator:e=>Object.values(a).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},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}};i.button;const m={...c,...v,modifiers:{type:[String,Array],default:"mobile"},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 b=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:m,emits:["update:modelValue","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","after-enter","enter-cancelled","before-leave","leave","leave-cancelled"],setup(a,{expose:n,emit:u}){const i=a,{id:c}=e.toRefs(i),v=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(c),m=e.useAttrs(),g=e.ref("auto"),h=e.ref("auto"),y=e.ref(null),x=e.ref(),w=e.ref(null),S=e.ref(null),E=e.computed({get:()=>i.reference??y.value,set:e=>{y.value=e}}),k=e.ref(!1);e.onMounted((()=>{r.useMutationObserver(x.value,(()=>{var e;k.value="true"===(null==(e=window.getComputedStyle(x.value).getPropertyValue("--dropdown-custom-position"))?void 0:e.trim())}),{attributeFilter:["style"],window:window})}));const P=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})=>{g.value=`${e}px`,h.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:O,middlewareData:z,placement:V}=t.useFloating(E,x,{whileElementsMounted:t.autoUpdate,placement:e.computed((()=>i.placement)),strategy:e.computed((()=>i.strategy)),middleware:P}),C=e.computed((()=>{if(!k.value)return{position:O.value,top:`${B.value??0}px`,left:`${$.value??0}px`,maxWidth:g.value,maxHeight:h.value,width:i.triggerWidth&&E.value?`${E.value.offsetWidth}px`:void 0}})),j=e.computed((()=>V.value.split("-")[0])),A=e.computed((()=>{var e,t,o,r,l;if(k.value)return;const a={top:"bottom",right:"left",bottom:"top",left:"right"}[j.value];return{left:void 0!==(null==(e=z.value.arrow)?void 0:e.x)?`${null==(t=z.value.arrow)?void 0:t.x}px`:void 0,top:void 0!==(null==(o=z.value.arrow)?void 0:o.y)?`${null==(r=z.value.arrow)?void 0:r.y}px`:void 0,[a]:-((null==(l=w.value)?void 0:l.offsetWidth)??0)/2+"px"}})),N=r.useVModel(i,"modelValue",u),D=e.ref(!1),_=e.computed({get:()=>N.value??D.value,set:e=>{void 0!==N.value?N.value=e:D.value=e}}),R=()=>{_.value=!0},T=()=>{_.value=!1},F=()=>{_.value=!_.value},W=e=>{E.value=e};n({toggle:F,show:R,hide:T,init:W,customPosition:k}),e.watch(_,(t=>{t&&i.autofocusFirst&&e.nextTick((()=>{const e=Q(x.value);e.length>0&&e[0].focus({preventScroll:!0})}))})),r.onClickOutside(x,(()=>{i.keepOpen||(_.value=!1)}),{ignore:[E]});const q=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:M,bus:H}=function({reference:t,id:o,expanded:r,aria:a}){const n=l(),u=e.defineComponent({name:"VvDropdownTriggerProvider",setup(){e.provide(f,{reference:t,id:o,expanded:r,aria:a,bus:n})},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});H.on("click",F);const{role:U,modifiers:I}=e.toRefs(i),{itemRole:G}=function({role:t,expanded:o}){const r=e.computed((()=>t.value===d.listbox?s.option:s.presentation));return e.provide(p,{role:r,expanded:o}),{itemRole:r}}({role:U,expanded:_}),J=function(t,o,r){return e.computed((()=>{const l={[t]:!0},a="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{l[`${t}--${o}`]=e.unref(r.value[o])})),l}))}("vv-dropdown",I,e.computed((()=>({arrow:i.arrow})))),{focused:L}=r.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"))):[]}r.onKeyStroke("Escape",(e=>{_.value&&(e.preventDefault(),T())})),r.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({preventScroll:!0}):e[0].focus({preventScroll:!0})}})))})),r.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({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})))})),r.onKeyStroke([" ","Enter"],(e=>{const t=e.target;_.value&&L.value&&t&&(null==t||t.click())}));const X={"before-enter":()=>{u(_.value?"beforeExpand":"beforeCollapse"),u("before-enter")},"after-leave":()=>{u(_.value?"afterExpand":"afterCollapse"),u("after-leave")},enter:()=>{u("enter")},"after-enter":()=>{u("after-enter")},"enter-cancelled":()=>{u("enter-cancelled")},"before-leave":()=>{u("before-leave")},leave:()=>{u("leave")},"leave-cancelled":()=>{u("leave-cancelled")}};return(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(M),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:W,show:R,hide:T,toggle:F,expanded:e.unref(_),aria:e.unref(K)})))])),_:3}),e.createVNode(e.Transition,e.mergeProps({name:t.transitionName},e.toHandlers(X)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:x,style:e.normalizeStyle(e.unref(C)),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(A)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(_)}))),e.createElementVNode("div",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(q),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(G)})))],16,b),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(_)})))],6),[[e.vShow,e.unref(_)]])])),_:3},16,["name"])],64))}})}));

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

@@ -112,8 +112,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     show: () => void;
     hide: () => void;
     init: (el: HTMLElement) => void;
-    dropdownCustomPosition: Ref<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse")[], "update:modelValue" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    customPosition: Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "before-enter" | "after-leave" | "enter" | "after-enter" | "enter-cancelled" | "before-leave" | "leave" | "leave-cancelled" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse")[], "update:modelValue" | "before-enter" | "after-leave" | "enter" | "after-enter" | "enter-cancelled" | "before-leave" | "leave" | "leave-cancelled" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modifiers: {
         type: globalThis.PropType<string | string[]>;
         default: string;
@@ -222,7 +222,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     id: (StringConstructor | NumberConstructor)[];
 }>> & {
+    onEnter?: ((...args: any[]) => any) | undefined;
+    onLeave?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onBefore-enter"?: ((...args: any[]) => any) | undefined;
+    "onAfter-leave"?: ((...args: any[]) => any) | undefined;
+    "onAfter-enter"?: ((...args: any[]) => any) | undefined;
+    "onEnter-cancelled"?: ((...args: any[]) => any) | undefined;
+    "onBefore-leave"?: ((...args: any[]) => any) | undefined;
+    "onLeave-cancelled"?: ((...args: any[]) => any) | undefined;
     onBeforeExpand?: ((...args: any[]) => any) | undefined;
     onBeforeCollapse?: ((...args: any[]) => any) | undefined;
     onAfterExpand?: ((...args: any[]) => any) | undefined;

package/dist/components/index.es.js

@@ -2425,7 +2425,15 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     "beforeExpand",
     "beforeCollapse",
     "afterExpand",
-    "afterCollapse"
+    "afterCollapse",
+    "before-enter",
+    "after-leave",
+    "enter",
+    "after-enter",
+    "enter-cancelled",
+    "before-leave",
+    "leave",
+    "leave-cancelled"
   ],
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
@@ -2444,16 +2452,19 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         localReferenceEl.value = newValue;
       }
     });
-    const dropdownCustomPosition = ref();
-    const onChangeDropdownCustomPosition = () => {
-      var _a;
-      dropdownCustomPosition.value = (_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim();
-    };
+    const hasCustomPosition = ref(false);
     onMounted(() => {
-      useMutationObserver(floatingEl.value, onChangeDropdownCustomPosition, {
-        attributeFilter: ["style"],
-        window
-      });
+      useMutationObserver(
+        floatingEl.value,
+        () => {
+          var _a;
+          hasCustomPosition.value = ((_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim()) === "true";
+        },
+        {
+          attributeFilter: ["style"],
+          window
+        }
+      );
     });
     const middleware = computed(() => {
       const toReturn = [];
@@ -2530,8 +2541,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }
     );
     const dropdownPlacement = computed(() => {
-      if ((dropdownCustomPosition == null ? void 0 : dropdownCustomPosition.value) === "true") {
-        return {};
+      if (hasCustomPosition.value) {
+        return void 0;
       }
       return {
         position: strategy.value,
@@ -2542,29 +2553,24 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
       };
     });
-    const side = computed(() => placement.value.split("-")[0]);
-    const staticSide = computed(
-      () => ({
+    const side = computed(
+      () => placement.value.split("-")[0]
+    );
+    const arrowPlacement = computed(() => {
+      var _a, _b, _c, _d, _e;
+      if (hasCustomPosition.value) {
+        return void 0;
+      }
+      const staticSide = {
         top: "bottom",
         right: "left",
         bottom: "top",
         left: "right"
-      })[side.value] ?? "bottom"
-    );
-    const arrowPlacement = computed(() => {
-      var _a, _b, _c, _d;
-      if ((dropdownCustomPosition == null ? void 0 : dropdownCustomPosition.value) === "true") {
-        return {};
-      }
-      if (["bottom", "top"].includes(staticSide.value)) {
-        return {
-          right: `${((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) ?? 0}px`,
-          [staticSide.value]: `${-(((_b = arrowEl.value) == null ? void 0 : _b.offsetWidth) ?? 0) / 2}px`
-        };
-      }
+      }[side.value];
       return {
-        top: `${((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) ?? 0}px`,
-        [staticSide.value]: `${-(((_d = arrowEl.value) == null ? void 0 : _d.offsetWidth) ?? 0) / 2}px`
+        left: ((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) !== void 0 ? `${(_b = middlewareData.value.arrow) == null ? void 0 : _b.x}px` : void 0,
+        top: ((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) !== void 0 ? `${(_d = middlewareData.value.arrow) == null ? void 0 : _d.y}px` : void 0,
+        [staticSide]: `${-(((_e = arrowEl.value) == null ? void 0 : _e.offsetWidth) ?? 0) / 2}px`
       };
     });
     const modelValue = useVModel(props, "modelValue", emit);
@@ -2591,7 +2597,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const init = (el) => {
       referenceEl.value = el;
     };
-    __expose({ toggle, show, hide, init, dropdownCustomPosition });
+    __expose({
+      toggle,
+      show,
+      hide,
+      init,
+      customPosition: hasCustomPosition
+    });
     watch(expanded, (newValue) => {
       if (newValue && props.autofocusFirst) {
         nextTick(() => {
@@ -2725,11 +2737,33 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         htmlEl == null ? void 0 : htmlEl.click();
       }
     });
-    const onTransitionBeforeEnter = () => {
-      emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-    };
-    const onTransitionAfterLeave = () => {
-      emit(expanded.value ? "afterExpand" : "afterCollapse");
+    const dropdownTransitionHandlers = {
+      "before-enter": () => {
+        emit(expanded.value ? "beforeExpand" : "beforeCollapse");
+        emit("before-enter");
+      },
+      "after-leave": () => {
+        emit(expanded.value ? "afterExpand" : "afterCollapse");
+        emit("after-leave");
+      },
+      enter: () => {
+        emit("enter");
+      },
+      "after-enter": () => {
+        emit("after-enter");
+      },
+      "enter-cancelled": () => {
+        emit("enter-cancelled");
+      },
+      "before-leave": () => {
+        emit("before-leave");
+      },
+      leave: () => {
+        emit("leave");
+      },
+      "leave-cancelled": () => {
+        emit("leave-cancelled");
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
@@ -2739,10 +2773,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers({
-          beforeEnter: onTransitionBeforeEnter,
-          onAfterLeave: onTransitionAfterLeave
-        })), {
+        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers)), {
           default: withCtx(() => [
             withDirectives(createElementVNode("div", {
               ref_key: "floatingEl",
@@ -3729,7 +3760,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                 var _a;
                 return [
-                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.dropdownCustomPosition) === "true" ? (openBlock(), createBlock(_sfc_main$g, {
+                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$g, {
                     key: 0,
                     label: "Close",
                     modifiers: "secondary",
@@ -3805,7 +3836,19 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvDialogEvents = ["open", "close", "update:modelValue"];
+const VvDialogEvents = [
+  "open",
+  "close",
+  "update:modelValue",
+  "before-enter",
+  "after-leave",
+  "enter",
+  "after-enter",
+  "enter-cancelled",
+  "before-leave",
+  "leave",
+  "leave-cancelled"
+];
 const VvDialogProps = {
   ...IdProps,
   /**
@@ -3882,11 +3925,31 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         var _a;
         (_a = dialogEl.value) == null ? void 0 : _a.showModal();
         emit("open");
+        emit("before-enter");
       },
       "after-leave": () => {
         var _a;
         (_a = dialogEl.value) == null ? void 0 : _a.close();
         emit("close");
+        emit("after-leave");
+      },
+      enter: () => {
+        emit("enter");
+      },
+      "after-enter": () => {
+        emit("after-enter");
+      },
+      "enter-cancelled": () => {
+        emit("enter-cancelled");
+      },
+      "before-leave": () => {
+        emit("before-leave");
+      },
+      leave: () => {
+        emit("leave");
+      },
+      "leave-cancelled": () => {
+        emit("leave-cancelled");
       }
     };
     onClickOutside(modalWrapper, () => {