@frankhoodbs/dropdown-cmp - npm Package Compare versions

Comparing version 4.0.3 to 4.0.4

dist/DropdownCmp.css

@@ -1,1 +0,1 @@
-.DropdownCmp[data-v-036c4376]{position:relative;width:var(--dropdown-width, 100%)}.DropdownCmp .dropdown-trigger[data-v-036c4376]{position:var(--dropdown-button-position);width:var(--dropdown-button-width);padding:var(--dropdown-button-padding);background-color:var(--dropdown-button-bg-color);color:var(--dropdown-button-color);border:var(--dropdown-button-border-width) var(--dropdown-button-border-style) var(--dropdown-button-border-color);border-radius:var(--dropdown-button-border-radius);box-shadow:var(--dropdown-button-box-shadow);opacity:var(--dropdown-button-opacity);-webkit-user-select:none;user-select:none;z-index:var(--dropdown-button-z-index)}.DropdownCmp .dropdown-trigger[aria-expanded=true][data-v-036c4376]{background-color:var(--dropdown-button-expanded-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-expanded-color, var(--dropdown-button-color));border:var(--dropdown-button-expanded-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-expanded-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-expanded-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-expanded-box-shadow, var(--dropdown-button-box-shadow));outline:var(--dropdown-button-expanded-outline);outline-offset:var(--dropdown-button-expanded-outline-offset)}.DropdownCmp .dropdown-trigger[data-v-036c4376]:disabled{background-color:var(--dropdown-button-disabled-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-disabled-color, var(--dropdown-button-color));border:var(--dropdown-button-disabled-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-disabled-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-disabled-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-disabled-box-shadow, var(--dropdown-button-box-shadow));opacity:var(--dropdown-disabled-opacity, .333);cursor:var(--dropdown-button-disabled-cursor, not-allowed)}.DropdownCmp .dropdown-trigger[data-v-036c4376]:not(:disabled):hover{background-color:var(--dropdown-button-hover-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-hover-color, var(--dropdown-button-color));border:var(--dropdown-button-hover-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-hover-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-hover-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-hover-box-shadow, var(--dropdown-button-box-shadow));opacity:var(--dropdown-button-hover-opacity)}.DropdownCmp .dropdown-menu[data-v-036c4376]{width:var(--dropdown-menu-width, 100%);max-width:var(--dropdown-menu-max-width);min-width:var(--dropdown-menu-min-width);max-height:var(--dropdown-menu-max-height);padding:var(--dropdown-menu-padding);background-color:var(--dropdown-menu-bg-color, white);color:var(--dropdown-menu-color);border:var(--dropdown-menu-border-width, 1px) var(--dropdown-menu-border-style, solid) var(--dropdown-menu-border-color);border-radius:var(--dropdown-menu-border-radius, .25rem);box-shadow:var(--dropdown-menu-box-shadow);overflow:hidden;overflow-y:auto;z-index:var(--dropdown-menu-z-index, 1);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.DropdownCmp .dropdown-menu li[data-v-036c4376] .dropdown-menuitem{display:var(--dropdown-menuitem-display, block);width:var(--dropdown-menuitem-width, 100%);padding:var(--dropdown-menuitem-padding);background-color:var(--dropdown-menuitem-bg-color);color:var(--dropdown-menuitem-color);text-decoration:var(--dropdown-menuitem-text-decoration);text-underline-offset:var(--dropdown-menuitem-text-underline-offset)}.DropdownCmp .dropdown-menu li[data-v-036c4376] .dropdown-menuitem:hover{background-color:var(--dropdown-menuitem-hover-bg-color);color:var(--dropdown-menuitem-hover-color);text-decoration:var(--dropdown-menuitem-hover-text-decoration)}.DropdownCmp .dropdown-menu li[data-v-036c4376] .dropdown-menuitem:focus{background-color:var(--dropdown-menuitem-focus-bg-color);color:var(--dropdown-menuitem-focus-color);text-decoration:var(--dropdown-menuitem-focus-text-decoration)}.DropdownCmp .dropdown-menu li[data-v-036c4376] .dropdown-menuitem:focus-visible{outline:var(--dropdown-menuitem-focus-visible-outline)!important;outline-offset:var(--dropdown-menuitem-focus-visible-outline-offset)!important}.DropdownCmp .expand-enter-active[data-v-036c4376],.DropdownCmp .expand-leave-active[data-v-036c4376]{transition-property:opacity,transform;transition-duration:var(--dropdown-transition-duration, .3s),var(--dropdown-transition-duration, .3s);transition-timing-function:var(--dropdown-transition-timing-function, ease-in-out),var(--dropdown-transition-timing-function, ease-in-out)}.DropdownCmp .expand-enter-from[data-v-036c4376],.DropdownCmp .expand-leave-to[data-v-036c4376]{opacity:0;transform:translateY(var(--dropdown-translate-y, -.5rem))}
+.DropdownCmp[data-v-8bcc7b48]{position:relative;width:var(--dropdown-width, 100%)}.DropdownCmp .dropdown-trigger[data-v-8bcc7b48]{position:var(--dropdown-button-position);width:var(--dropdown-button-width);padding:var(--dropdown-button-padding);background-color:var(--dropdown-button-bg-color);color:var(--dropdown-button-color);border:var(--dropdown-button-border-width) var(--dropdown-button-border-style) var(--dropdown-button-border-color);border-radius:var(--dropdown-button-border-radius);box-shadow:var(--dropdown-button-box-shadow);opacity:var(--dropdown-button-opacity);-webkit-user-select:none;user-select:none;z-index:var(--dropdown-button-z-index)}.DropdownCmp .dropdown-trigger[aria-expanded=true][data-v-8bcc7b48]{background-color:var(--dropdown-button-expanded-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-expanded-color, var(--dropdown-button-color));border:var(--dropdown-button-expanded-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-expanded-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-expanded-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-expanded-box-shadow, var(--dropdown-button-box-shadow));outline:var(--dropdown-button-expanded-outline);outline-offset:var(--dropdown-button-expanded-outline-offset)}.DropdownCmp .dropdown-trigger[data-v-8bcc7b48]:disabled{background-color:var(--dropdown-button-disabled-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-disabled-color, var(--dropdown-button-color));border:var(--dropdown-button-disabled-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-disabled-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-disabled-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-disabled-box-shadow, var(--dropdown-button-box-shadow));opacity:var(--dropdown-disabled-opacity, .333);cursor:var(--dropdown-button-disabled-cursor, not-allowed)}.DropdownCmp .dropdown-trigger[data-v-8bcc7b48]:not(:disabled):hover{background-color:var(--dropdown-button-hover-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-hover-color, var(--dropdown-button-color));border:var(--dropdown-button-hover-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-hover-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-hover-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-hover-box-shadow, var(--dropdown-button-box-shadow));opacity:var(--dropdown-button-hover-opacity)}.DropdownCmp .dropdown-menu[data-v-8bcc7b48]{width:var(--dropdown-menu-width, 100%);max-width:var(--dropdown-menu-max-width);min-width:var(--dropdown-menu-min-width);max-height:var(--dropdown-menu-max-height);padding:var(--dropdown-menu-padding);background-color:var(--dropdown-menu-bg-color, white);color:var(--dropdown-menu-color);border:var(--dropdown-menu-border-width, 1px) var(--dropdown-menu-border-style, solid) var(--dropdown-menu-border-color);border-radius:var(--dropdown-menu-border-radius, .25rem);box-shadow:var(--dropdown-menu-box-shadow);overflow:hidden;overflow-y:auto;z-index:var(--dropdown-menu-z-index, 1);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.DropdownCmp .dropdown-menu li[data-v-8bcc7b48] .dropdown-menuitem{display:var(--dropdown-menuitem-display, block);width:var(--dropdown-menuitem-width, 100%);padding:var(--dropdown-menuitem-padding);background-color:var(--dropdown-menuitem-bg-color);color:var(--dropdown-menuitem-color);text-decoration:var(--dropdown-menuitem-text-decoration);text-underline-offset:var(--dropdown-menuitem-text-underline-offset)}.DropdownCmp .dropdown-menu li[data-v-8bcc7b48] .dropdown-menuitem:hover{background-color:var(--dropdown-menuitem-hover-bg-color, var(---dropdown-menuitem-bg-color));color:var(--dropdown-menuitem-hover-color, var(--dropdown-menuitem-color));text-decoration:var(--dropdown-menuitem-hover-text-decoration, var(--dropdown-menuitem-text-decoration))}.DropdownCmp .dropdown-menu li[data-v-8bcc7b48] .dropdown-menuitem:focus{background-color:var(--dropdown-menuitem-focus-bg-color, var(---dropdown-menuitem-bg-color));color:var(--dropdown-menuitem-focus-color, var(--dropdown-menuitem-color));text-decoration:var(--dropdown-menuitem-focus-text-decoration, var(--dropdown-menuitem-text-decoration))}.DropdownCmp .dropdown-menu li[data-v-8bcc7b48] .dropdown-menuitem:focus-visible{outline:var(--dropdown-menuitem-focus-visible-outline)!important;outline-offset:var(--dropdown-menuitem-focus-visible-outline-offset)!important}.DropdownCmp .expand-enter-active[data-v-8bcc7b48],.DropdownCmp .expand-leave-active[data-v-8bcc7b48]{transition-property:opacity,transform;transition-duration:var(--dropdown-transition-duration, .3s),var(--dropdown-transition-duration, .3s);transition-timing-function:var(--dropdown-transition-timing-function, ease-in-out),var(--dropdown-transition-timing-function, ease-in-out)}.DropdownCmp .expand-enter-from[data-v-8bcc7b48],.DropdownCmp .expand-leave-to[data-v-8bcc7b48]{opacity:0;transform:translateY(var(--dropdown-translate-y, -.5rem))}

dist/DropdownCmp.js

@@ -1,1 +0,1 @@
-import{defineComponent as e,useTemplateRef as x,ref as I,toRef as C,createElementBlock as A,openBlock as E,normalizeClass as M,unref as T,createElementVNode as P,createBlock as S,createCommentVNode as _,withModifiers as O,renderSlot as F,Transition as $,withCtx as B,withDirectives as L,normalizeStyle as K,Fragment as q,renderList as H,toDisplayString as V,vShow as z,nextTick as N}from"vue";import{useFloating as R,flip as U,offset as j,autoUpdate as G}from"@floating-ui/vue";import{boolToString as J}from"@frankhoodbs/a11y-support";import{onClickOutside as Q}from"@vueuse/core";import"./DropdownCmp.css";let W=["id","disabled","aria-controls","aria-expanded","aria-haspopup"],X=["id","aria-labelledby"],Y=["href"],a=e({__name:"DropdownCmp",props:{dataMenuItems:{},dataId:{default:"DropdownCmp"},dataDisabled:{type:Boolean,default:!1},dataPlacement:{default:"bottom-start"},dataFallbackPlacements:{},dataOffset:{default:0}},setup(l){let s=l,a=x("$button"),o=x("$menu"),r=I(!1),i=I([]),{floatingStyles:n,placement:d}=R(a,o,{whileElementsMounted:G,transform:!1,placement:C(()=>s.dataPlacement),middleware:[U({fallbackAxisSideDirection:"end",fallbackPlacements:s.dataFallbackPlacements}),j(s.dataOffset||0)],open:r}),u=async(e="first")=>{r.value=!0,await N(),("first"===e?g:D)(!0)},m=(e=!0)=>{r.value=!1,i.value[w()]?.setAttribute("tabindex","-1"),e&&a.value?.focus()},p=e=>{if(!s.dataDisabled){var a,{key:t,altKey:l,ctrlKey:o,metaKey:n}=e;if("ArrowDown"===t)a=e,r.value?(a.preventDefault(),a.stopPropagation(),h(w())):u("first");else if("ArrowUp"===t)a=e,r.value?(a.preventDefault(),a.stopPropagation(),k(w())):u("last");else if("Enter"===t||" "===t)(e=>{if(r.value){e.preventDefault(),e.stopPropagation();const a=w();(i.value[a]instanceof HTMLAnchorElement||i.value[a]instanceof HTMLButtonElement)&&i.value[a].click()}else u("first")})(e);else if(r.value&&"Tab"===t)m(!1);else if(r.value)switch(e.preventDefault(),e.stopPropagation(),t){case"Home":g();break;case"End":D();break;case"Escape":m();break;default:"Clear"!==t&&(1!==t.length||" "===t||l||o||n)||(e=>{typeof f=="number"&&window.clearTimeout(f),f=window.setTimeout(()=>{c=""},500),c+=e;const a=v();a>=0?y(a):(typeof f=="number"&&window.clearTimeout(f),c="")})(t)}}},f=null,c="",v=()=>{var a,e=[...s.dataMenuItems.slice(w()+1),...s.dataMenuItems.slice(0,w()+1)],t=b(e,c)[0];return t?s.dataMenuItems.indexOf(t):(a=c.split("")).every(e=>e===a[0])?(t=b(e,c[0]),s.dataMenuItems.indexOf(t[0])):-1},b=(e=[],a)=>e.filter(e=>0==e.label.toLowerCase().indexOf(a.toLowerCase())),t=()=>{i.value=Array.from(o.value?.querySelectorAll('[role="menuitem"]')??[])},w=()=>i.value.findIndex(e=>document.activeElement===e),y=t=>{let e=i.value[t];e&&(i.value.forEach((e,a)=>{e.setAttribute("tabindex",a===t?"0":"-1")}),e.focus({preventScroll:!0}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})})}))},g=(e=!1)=>{e&&t(),y(0)},D=(e=!1)=>{e&&t(),y(i.value.length-1)},h=e=>{e=(e+1)%i.value.length;y(e)},k=e=>{e=(e-1+i.value.length)%i.value.length;y(e)};return Q(o,e=>{e=e,!r.value||a.value&&a.value.contains(e.target)||m()}),(t,e)=>(E(),A("div",{class:M(["DropdownCmp",T(d)]),onKeydown:e[1]||(e[1]=e=>l.dataDisabled?void 0:p(e))},[P("button",{ref_key:"$button",ref:a,type:"button",id:l.dataId+"-trigger",class:"dropdown-trigger",disabled:l.dataDisabled,"aria-controls":l.dataDisabled?void 0:l.dataId+"-menu","aria-expanded":l.dataDisabled?void 0:T(J)(r.value),"aria-haspopup":l.dataDisabled?void 0:"true",onClick:e[0]||(e[0]=O(e=>l.dataDisabled?void 0:void(s.dataDisabled||(r.value?m:u)()),["prevent","stop"]))},[F(t.$slots,"button",{expanded:r.value},void 0,!0)],8,W),l.dataDisabled?_("",!0):(E(),S($,{key:0,name:"expand"},{default:B(()=>[L(P("ul",{ref_key:"$menu",ref:o,id:l.dataId+"-menu",class:"dropdown-menu",role:"menu","aria-labelledby":l.dataId+"-trigger",style:K(T(n))},[(E(!0),A(q,null,H(l.dataMenuItems,(e,a)=>(E(),A("li",{key:l.dataId+"-menu-"+a,role:"presentation"},[F(t.$slots,"menuitem",{option:e,index:a,attr:{role:"menuitem",class:"dropdown-menuitem",tabindex:"-1"}},()=>[P("a",{href:e.href,role:"menuitem",class:"dropdown-menuitem",tabindex:"-1"},V(e.label),9,Y)],!0)]))),128))],12,X),[[z,r.value]])]),_:3}))],34))}}),t=(e,a)=>{var t,l,o=e.__vccOpts||e;for([t,l]of a)o[t]=l;return o},l=t(a,[["__scopeId","data-v-036c4376"]]);export{l as default};
+import{defineComponent as e,useTemplateRef as x,ref as I,toRef as C,createElementBlock as E,openBlock as A,normalizeClass as M,unref as T,createElementVNode as P,createBlock as S,createCommentVNode as _,withModifiers as O,renderSlot as F,Transition as $,withCtx as B,withDirectives as L,normalizeStyle as K,Fragment as q,renderList as H,toDisplayString as V,vShow as z,nextTick as N}from"vue";import{useFloating as R,flip as U,offset as j,autoUpdate as G}from"@floating-ui/vue";import{boolToString as J}from"@frankhoodbs/a11y-support";import{onClickOutside as Q}from"@vueuse/core";import"./DropdownCmp.css";let W=["id","disabled","aria-controls","aria-expanded","aria-haspopup"],X=["id","aria-labelledby"],Y=["href"],a=e({__name:"DropdownCmp",props:{dataMenuItems:{},dataId:{default:"DropdownCmp"},dataDisabled:{type:Boolean,default:!1},dataPlacement:{default:"bottom-start"},dataFallbackPlacements:{},dataOffset:{default:0}},setup(l){let s=l,a=x("$button"),o=x("$menu"),r=I(!1),i=I([]),{floatingStyles:n,placement:d}=R(a,o,{whileElementsMounted:G,transform:!1,placement:C(()=>s.dataPlacement),middleware:[U({fallbackAxisSideDirection:"end",fallbackPlacements:s.dataFallbackPlacements}),j(s.dataOffset||0)],open:r}),u=async(e=void 0)=>{r.value=!0,await N(),t(),e&&("first"===e?g:D)()},m=(e=!0)=>{r.value=!1,i.value[w()]?.setAttribute("tabindex","-1"),e&&document.activeElement!==a.value&&a.value?.focus()},p=e=>{if(!s.dataDisabled){var a,{key:t,altKey:l,ctrlKey:o,metaKey:n}=e;if("ArrowDown"===t)a=e,r.value?(a.preventDefault(),a.stopPropagation(),h(w())):u("first");else if("ArrowUp"===t)a=e,r.value?(a.preventDefault(),a.stopPropagation(),k(w())):u("last");else if("Enter"===t||" "===t)(e=>{if(r.value){e.preventDefault(),e.stopPropagation();const a=w();(i.value[a]instanceof HTMLAnchorElement||i.value[a]instanceof HTMLButtonElement)&&i.value[a].click()}else u("first")})(e);else if(r.value&&"Tab"===t)m(!1);else if(r.value)switch(e.preventDefault(),e.stopPropagation(),t){case"Home":g();break;case"End":D();break;case"Escape":m();break;default:"Clear"!==t&&(1!==t.length||" "===t||l||o||n)||(e=>{typeof c=="number"&&window.clearTimeout(c),c=window.setTimeout(()=>{f=""},500),f+=e;const a=v();a>=0?y(a):(typeof c=="number"&&window.clearTimeout(c),f="")})(t)}}},c=null,f="",v=()=>{var a,e=[...s.dataMenuItems.slice(w()+1),...s.dataMenuItems.slice(0,w()+1)],t=b(e,f)[0];return t?s.dataMenuItems.indexOf(t):(a=f.split("")).every(e=>e===a[0])?(t=b(e,f[0]),s.dataMenuItems.indexOf(t[0])):-1},b=(e=[],a)=>e.filter(e=>0==e.label.toLowerCase().indexOf(a.toLowerCase())),t=()=>{i.value=Array.from(o.value?.querySelectorAll('[role="menuitem"]')??[])},w=()=>i.value.findIndex(e=>document.activeElement===e),y=t=>{let e=i.value[t];e&&(i.value.forEach((e,a)=>{e.setAttribute("tabindex",a===t?"0":"-1")}),e.focus({preventScroll:!0}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})})}))},g=()=>{y(0)},D=()=>{y(i.value.length-1)},h=e=>{e=(e+1)%i.value.length;y(e)},k=e=>{e=(e-1+i.value.length)%i.value.length;y(e)};return Q(o,e=>{e=e,!r.value||a.value&&a.value.contains(e.target)||m()}),(t,e)=>(A(),E("div",{class:M(["DropdownCmp",T(d)]),onKeydown:e[1]||(e[1]=e=>l.dataDisabled?void 0:p(e))},[P("button",{ref_key:"$button",ref:a,type:"button",id:l.dataId+"-trigger",class:"dropdown-trigger",disabled:l.dataDisabled,"aria-controls":l.dataDisabled?void 0:l.dataId+"-menu","aria-expanded":l.dataDisabled?void 0:T(J)(r.value),"aria-haspopup":l.dataDisabled?void 0:"true",onClick:e[0]||(e[0]=O(e=>l.dataDisabled?void 0:void(s.dataDisabled||(r.value?m:u)()),["prevent","stop"]))},[F(t.$slots,"button",{expanded:r.value},void 0,!0)],8,W),l.dataDisabled?_("",!0):(A(),S($,{key:0,name:"expand"},{default:B(()=>[L(P("ul",{ref_key:"$menu",ref:o,id:l.dataId+"-menu",class:"dropdown-menu",role:"menu","aria-labelledby":l.dataId+"-trigger",style:K(T(n)),tabindex:"-1"},[(A(!0),E(q,null,H(l.dataMenuItems,(e,a)=>(A(),E("li",{key:l.dataId+"-menu-"+a,role:"presentation"},[F(t.$slots,"menuitem",{option:e,index:a,attr:{role:"menuitem",class:"dropdown-menuitem",tabindex:"-1"}},()=>[P("a",{href:e.href,role:"menuitem",class:"dropdown-menuitem",tabindex:"-1"},V(e.label),9,Y)],!0)]))),128))],12,X),[[z,r.value]])]),_:3}))],34))}}),t=(e,a)=>{var t,l,o=e.__vccOpts||e;for([t,l]of a)o[t]=l;return o},l=t(a,[["__scopeId","data-v-8bcc7b48"]]);export{l as default};

package.json

@@ -13,3 +13,3 @@ {
   "license": "ISC",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "type": "module",
@@ -71,3 +71,3 @@ "exports": {
   },
-  "gitHead": "8514e82123ac2287cf1b66dfd1b426f93a471684"
+  "gitHead": "31d68992b6f8713abb35ceeaa3b641e01be76214"
 }

No alert changes

Improved metrics

Total package byte prevSize

28214

0.89%

No dependency changes