@frankhoodbs/dropdown-cmp - npm Package Compare versions

Comparing version 3.0.4 to 4.0.0

dist/DropdownCmp.css

@@ -1,1 +0,1 @@
-.DropdownCmp[data-v-6749638f]{position:relative;width:var(--dropdown-width, 100%)}.button[data-v-6749638f]{position:relative;width:100%;background:var(--dropdown-button-background, transparent);color:var(--dropdown-button-color, black);border:var(--dropdown-button-border-width, 0px) solid var(--dropdown-button-border-color, transparent);border-radius:var(--dropdown-button-border-radius, 0px);-webkit-user-select:none;user-select:none;z-index:var(--dropdown-button-z-index, 1)}.expanded .button[data-v-6749638f]{outline:none!important}.disabled .button[data-v-6749638f]{opacity:var(--dropdown-disabled-opacity, .5);cursor:not-allowed;outline:0!important}.menu[data-v-6749638f]{width:var(--dropdown-menu-width, 100%);max-width:var(--dropdown-menu-max-width, none);min-width:var(--dropdown-menu-min-width, 0);max-height:var(--dropdown-menu-max-height, 200px);background:var(--dropdown-menu-background, white);color:var(--dropdown-menu-color, black);border:var(--dropdown-menu-border-width, 1px) solid var(--dropdown-menu-border-color, black);border-radius:var(--dropdown-menu-border-radius, 4px);overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:var(--dropdown-menu-z-index, 2)}.menuitem[data-v-6749638f] .option{display:block;width:100%}.menuitem[data-v-6749638f] .option.active,.menuitem[data-v-6749638f] .option:hover{background-color:var(--dropdown-option-active-background, grey)}.menuitem[data-v-6749638f] .option.active{outline:var(--dropdown-option-color-outline, red) solid var(--dropdown-option-size-outline, 3px);outline-offset:var(--dropdown-option-size-outline-offset, 1px)}.expand-enter-active[data-v-6749638f],.expand-leave-active[data-v-6749638f]{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)}.expand-enter-from[data-v-6749638f],.expand-leave-to[data-v-6749638f]{opacity:0;transform:translateY(-16px)}
+.DropdownCmp[data-v-821c3509]{position:relative;width:var(--dropdown-width, 100%)}.button[data-v-821c3509]{position:relative;width:100%;background:var(--dropdown-button-background, transparent);color:var(--dropdown-button-color, black);border:var(--dropdown-button-border-width, 0px) solid var(--dropdown-button-border-color, transparent);border-radius:var(--dropdown-button-border-radius, 0px);-webkit-user-select:none;user-select:none;z-index:var(--dropdown-button-z-index, 1)}.expanded .button[data-v-821c3509]{outline:none!important}.disabled .button[data-v-821c3509]{opacity:var(--dropdown-disabled-opacity, .5);cursor:not-allowed;outline:0!important}.menu[data-v-821c3509]{width:var(--dropdown-menu-width, 100%);max-width:var(--dropdown-menu-max-width, none);min-width:var(--dropdown-menu-min-width, 0);max-height:var(--dropdown-menu-max-height, 200px);background:var(--dropdown-menu-background, white);color:var(--dropdown-menu-color, black);border:var(--dropdown-menu-border-width, 1px) solid var(--dropdown-menu-border-color, black);border-radius:var(--dropdown-menu-border-radius, 4px);overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:var(--dropdown-menu-z-index, 2)}.menuitem[data-v-821c3509] .option{display:block;width:100%}.menuitem[data-v-821c3509] .option.active,.menuitem[data-v-821c3509] .option:hover{background-color:var(--dropdown-option-active-background, grey)}.menuitem[data-v-821c3509] .option.active{outline:var(--dropdown-option-color-outline, red) solid var(--dropdown-option-size-outline, 3px);outline-offset:var(--dropdown-option-size-outline-offset, 1px)}.expand-enter-active[data-v-821c3509],.expand-leave-active[data-v-821c3509]{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)}.expand-enter-from[data-v-821c3509],.expand-leave-to[data-v-821c3509]{opacity:0;transform:translateY(-16px)}

dist/DropdownCmp.d.ts

@@ -0,1 +1,2 @@
+import { VNode } from 'vue';
 import { Placement } from '@floating-ui/vue';
@@ -19,3 +20,3 @@ export interface LinkItem {
             expanded: boolean;
-        }) => never;
+        }) => VNode[];
         link: (props: {
@@ -25,7 +26,7 @@ option: LinkItem;
             attr: Record<string, any>;
-        }) => never;
+        }) => VNode[];
     }> & {
         button?: (props: {
             expanded: boolean;
-        }) => never;
+        }) => VNode[];
         link: (props: {
@@ -35,3 +36,3 @@ option: LinkItem;
             attr: Record<string, any>;
-        }) => never;
+        }) => VNode[];
     };
@@ -38,0 +39,0 @@ refs: {

dist/DropdownCmp.js

@@ -1,1 +0,1 @@
-import{defineComponent as e,ref as t,toRef as k,createElementBlock as O,openBlock as P,normalizeClass as _,unref as C,createElementVNode as I,createVNode as S,withKeys as T,withModifiers as F,renderSlot as B,createTextVNode as K,Transition as E,withCtx as V,withDirectives as L,normalizeStyle as N,Fragment as U,renderList as z,toDisplayString as M,vShow as $,nextTick as q}from"vue";import{boolToString as A}from"@frankhoodbs/a11y-support";import{useFloating as H,flip as R,offset as j,autoUpdate as G}from"@floating-ui/vue";import"./DropdownCmp.css";let J=["id","aria-controls","aria-expanded","tabindex","aria-disabled","onKeydown"],Q=["id","aria-labelledby"],W=["onFocusin"],X=["href","tabindex"],a=e({__name:"DropdownCmp",props:{dataOptions:{},dataIdPrefix:{},dataDisabled:{type:Boolean,default:!1},dataPlacement:{default:"bottom-start"},dataFallbackPlacements:{},dataOffset:{default:0}},setup(e){let s=e,i=t(!1),r=t(0),l=t(null),a=t(null),o=t(null),{floatingStyles:n,placement:d}=H(a,o,{whileElementsMounted:G,transform:!1,placement:k(()=>s.dataPlacement),middleware:[R({fallbackAxisSideDirection:"end",fallbackPlacements:s.dataFallbackPlacements}),j(s.dataOffset||0)],open:i}),u=e=>{s.dataDisabled||(r.value=e,setTimeout(()=>{l.value&&l.value[e]&&l.value[e].scrollIntoView({block:"nearest"})},50))},p=e=>{s.dataDisabled||(i.value=!0,q(()=>{u(e)}))},f=()=>{s.dataDisabled||(i.value=!1)},v=()=>{i.value?f():p(0)},c=()=>{if(i.value){let e=r.value-1;e<0&&(e=s.dataOptions.length-1),u(e)}else p(s.dataOptions.length-1)},m=()=>{if(i.value){let e=r.value+1;e>s.dataOptions.length-1&&(e=0),u(e)}else p(0)},b=()=>{i.value?l.value[r.value]&&l.value[r.value].querySelector("a, button").click():p(0)},x=e=>{i.value&&(e.preventDefault(),e.stopPropagation(),f())},y=a=>{if(!s.dataDisabled){var{key:t,altKey:e,ctrlKey:l,metaKey:o}=a;if("Home"===t)n=a,i.value&&(n.preventDefault(),n.stopPropagation(),u(0));else if("End"===t)n=a,i.value&&(n.preventDefault(),n.stopPropagation(),u(s.dataOptions.length-1));else if(!i.value||"PageUp"!==t&&"PageDown"!==t)"Backspace"!==t&&"Clear"!==t&&(1!==t.length||" "===t||e||l||o)||(e=>{typeof w=="number"&&window.clearTimeout(w),w=window.setTimeout(()=>{g=""},500),g+=e;const a=D();a>=0?p(a):(typeof w=="number"&&window.clearTimeout(w),g="")})(t);else{a.preventDefault(),a.stopPropagation();let e;"PageUp"===t?(e=r.value-10)<0&&(e=0):(e=r.value+10)>s.dataOptions.length-1&&(e=s.dataOptions.length-1),u(e)}}var n},w=null,g="",D=()=>{var a,e=[...s.dataOptions.slice(r.value+1),...s.dataOptions.slice(0,r.value+1)],t=h(e,g)[0];return t?s.dataOptions.indexOf(t):(a=g.split("")).every(e=>e===a[0])?(t=h(e,g[0]),s.dataOptions.indexOf(t[0])):-1},h=(e=[],a)=>e.filter(e=>0==e.label.toLowerCase().indexOf(a.toLowerCase()));return(t,e)=>(P(),O("div",{class:_(["DropdownCmp",C(d),{expanded:i.value,disabled:t.dataDisabled}])},[I("button",{type:"button",ref_key:"reference",ref:a,class:"button",id:t.dataIdPrefix+"-button","aria-controls":t.dataIdPrefix+"-menu","aria-haspopup":"true","aria-expanded":C(A)(i.value),tabindex:t.dataDisabled?"-1":"0","aria-disabled":C(A)(t.dataDisabled),onClick:F(v,["prevent","stop"]),onKeydown:[T(F(m,["prevent","stop"]),["down"]),T(F(c,["prevent","stop"]),["up"]),T(F(b,["prevent","stop"]),["enter"]),T(F(b,["prevent","stop"]),["space"]),T(x,["esc"]),y],onBlur:f},[B(t.$slots,"button",{expanded:i.value},()=>[e[0]||(e[0]=K("Button"))],!0)],40,J),S(E,{name:"expand"},{default:V(()=>[L(I("ul",{ref_key:"floating",ref:o,id:t.dataIdPrefix+"-menu",class:"menu",role:"menu","aria-labelledby":t.dataIdPrefix+"-button",style:N(C(n)),onFocusout:f},[(P(!0),O(U,null,z(t.dataOptions,(e,a)=>(P(),O("li",{key:t.dataIdPrefix+"-menu-"+a,class:"menuitem",role:"none",ref_for:!0,ref_key:"items",ref:l,onFocusin:e=>p(a)},[B(t.$slots,"link",{option:e,index:a,attr:{role:"menuitem",class:["option",{active:r.value===a}],tabindex:r.value===a?"0":"-1"}},()=>[I("a",{href:e.href||"#",role:"menuitem",class:_(["option",{active:r.value===a}]),tabindex:r.value===a?"0":"-1"},M(e.label),11,X)],!0)],40,W))),128))],44,Q),[[$,i.value]])]),_:3})],2))}}),l=(e,a)=>{var t,l,o=e.__vccOpts||e;for([t,l]of a)o[t]=l;return o},o=l(a,[["__scopeId","data-v-6749638f"]]);export{o as default};
+import{defineComponent as e,ref as t,toRef as O,createElementBlock as P,openBlock as _,normalizeClass as C,unref as I,createElementVNode as S,createVNode as T,withKeys as F,withModifiers as B,renderSlot as K,createTextVNode as E,Transition as V,withCtx as L,withDirectives as N,normalizeStyle as U,Fragment as z,renderList as M,toDisplayString as $,vShow as q,nextTick as A}from"vue";import{boolToString as H}from"@frankhoodbs/a11y-support";import{useFloating as R,flip as j,offset as G,autoUpdate as J}from"@floating-ui/vue";import"./DropdownCmp.css";let Q=["id","aria-controls","aria-expanded","tabindex","aria-disabled","onKeydown"],W=["id","aria-labelledby"],X=["onFocusin"],Y=["href","tabindex"],a=e({__name:"DropdownCmp",props:{dataOptions:{},dataIdPrefix:{},dataDisabled:{type:Boolean,default:!1},dataPlacement:{default:"bottom-start"},dataFallbackPlacements:{},dataOffset:{default:0}},setup(l){let s=l,i=t(!1),r=t(0),o=t(null),a=t(null),n=t(null),{floatingStyles:d,placement:u}=R(a,n,{whileElementsMounted:J,transform:!1,placement:O(()=>s.dataPlacement),middleware:[j({fallbackAxisSideDirection:"end",fallbackPlacements:s.dataFallbackPlacements}),G(s.dataOffset||0)],open:i}),p=e=>{s.dataDisabled||(r.value=e,setTimeout(()=>{o.value&&o.value[e]&&o.value[e].scrollIntoView({block:"nearest"})},50))},f=e=>{s.dataDisabled||(i.value=!0,A(()=>{p(e)}))},c=()=>{s.dataDisabled||(i.value=!1)},v=()=>{i.value?c():f(0)},m=()=>{if(i.value){let e=r.value-1;e<0&&(e=s.dataOptions.length-1),p(e)}else f(s.dataOptions.length-1)},b=()=>{if(i.value){let e=r.value+1;e>s.dataOptions.length-1&&(e=0),p(e)}else f(0)},x=()=>{i.value?o.value[r.value]&&o.value[r.value].querySelector("a, button").click():f(0)},y=e=>{i.value&&(e.preventDefault(),e.stopPropagation(),c())},w=a=>{if(!s.dataDisabled){var{key:t,altKey:e,ctrlKey:l,metaKey:o}=a;if("Home"===t)n=a,i.value&&(n.preventDefault(),n.stopPropagation(),p(0));else if("End"===t)n=a,i.value&&(n.preventDefault(),n.stopPropagation(),p(s.dataOptions.length-1));else if(!i.value||"PageUp"!==t&&"PageDown"!==t)"Backspace"!==t&&"Clear"!==t&&(1!==t.length||" "===t||e||l||o)||(e=>{typeof g=="number"&&window.clearTimeout(g),g=window.setTimeout(()=>{D=""},500),D+=e;const a=h();a>=0?f(a):(typeof g=="number"&&window.clearTimeout(g),D="")})(t);else{a.preventDefault(),a.stopPropagation();let e;"PageUp"===t?(e=r.value-10)<0&&(e=0):(e=r.value+10)>s.dataOptions.length-1&&(e=s.dataOptions.length-1),p(e)}}var n},g=null,D="",h=()=>{var a,e=[...s.dataOptions.slice(r.value+1),...s.dataOptions.slice(0,r.value+1)],t=k(e,D)[0];return t?s.dataOptions.indexOf(t):(a=D.split("")).every(e=>e===a[0])?(t=k(e,D[0]),s.dataOptions.indexOf(t[0])):-1},k=(e=[],a)=>e.filter(e=>0==e.label.toLowerCase().indexOf(a.toLowerCase()));return(t,e)=>(_(),P("div",{class:C(["DropdownCmp",I(u),{expanded:i.value,disabled:l.dataDisabled}])},[S("button",{type:"button",ref_key:"reference",ref:a,class:"button",id:l.dataIdPrefix+"-button","aria-controls":l.dataIdPrefix+"-menu","aria-haspopup":"true","aria-expanded":I(H)(i.value),tabindex:l.dataDisabled?"-1":"0","aria-disabled":I(H)(l.dataDisabled),onClick:B(v,["prevent","stop"]),onKeydown:[F(B(b,["prevent","stop"]),["down"]),F(B(m,["prevent","stop"]),["up"]),F(B(x,["prevent","stop"]),["enter"]),F(B(x,["prevent","stop"]),["space"]),F(y,["esc"]),w],onBlur:c},[K(t.$slots,"button",{expanded:i.value},()=>[e[0]||(e[0]=E("Button",-1))],!0)],40,Q),T(V,{name:"expand"},{default:L(()=>[N(S("ul",{ref_key:"floating",ref:n,id:l.dataIdPrefix+"-menu",class:"menu",role:"menu","aria-labelledby":l.dataIdPrefix+"-button",style:U(I(d)),onFocusout:c},[(_(!0),P(z,null,M(l.dataOptions,(e,a)=>(_(),P("li",{key:l.dataIdPrefix+"-menu-"+a,class:"menuitem",role:"none",ref_for:!0,ref_key:"items",ref:o,onFocusin:e=>f(a)},[K(t.$slots,"link",{option:e,index:a,attr:{role:"menuitem",class:["option",{active:r.value===a}],tabindex:r.value===a?"0":"-1"}},()=>[S("a",{href:e.href||"#",role:"menuitem",class:C(["option",{active:r.value===a}]),tabindex:r.value===a?"0":"-1"},$(e.label),11,Y)],!0)],40,X))),128))],44,W),[[q,i.value]])]),_:3})],2))}}),l=(e,a)=>{var t,l,o=e.__vccOpts||e;for([t,l]of a)o[t]=l;return o},o=l(a,[["__scopeId","data-v-821c3509"]]);export{o as default};

dist/lib.d.ts

@@ -34,3 +34,3 @@ import { App } from 'vue';
             expanded: boolean;
-        }) => never;
+        }) => import('vue').VNode[];
         link: (props: {
@@ -40,7 +40,7 @@ option: import('./DropdownCmp').LinkItem;
             attr: Record<string, any>;
-        }) => never;
+        }) => import('vue').VNode[];
     }> & {
         button?: (props: {
             expanded: boolean;
-        }) => never;
+        }) => import('vue').VNode[];
         link: (props: {
@@ -50,3 +50,3 @@ option: import('./DropdownCmp').LinkItem;
             attr: Record<string, any>;
-        }) => never;
+        }) => import('vue').VNode[];
     };
@@ -53,0 +53,0 @@ });

package.json

@@ -13,3 +13,4 @@ {
   "license": "ISC",
-  "version": "3.0.4",
+  "version": "4.0.0",
+  "type": "module",
   "exports": {
@@ -50,22 +51,22 @@ ".": {
   "devDependencies": {
-    "@frankhoodbs/eslint-config-vue": "^3.0.4",
-    "@frankhoodbs/prettier-config": "^2.0.1",
-    "@frankhoodbs/uglify-js": "^3.0.4",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vue/tsconfig": "^0.7.0",
+    "@frankhoodbs/eslint-config-vue": "^4.0.0",
+    "@frankhoodbs/prettier-config": "^3.0.0",
+    "@frankhoodbs/uglify-js": "^4.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
     "add": "^2.0.6",
     "path": "^0.12.7",
     "sass": "~1.79.6",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.12",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vue-tsc": "^2.2.12"
+    "vue-tsc": "^3.1.1"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.7",
-    "@frankhoodbs/a11y-support": "^3.0.4",
-    "vue": "^3.5.17"
+    "@floating-ui/vue": "^1.1.9",
+    "@frankhoodbs/a11y-support": "^4.0.0",
+    "vue": "^3.5.22"
   },
-  "gitHead": "590237740d5f0e6933e565126459540c3da16a2f"
+  "gitHead": "34fcf1fe1db0b3082b0ab19242908d11ff87d683"
 }

No alert changes

Improved metrics

Total package byte prevSize

18073

0.69%

Lines of code

128

0.79%

Is type module

Yes

NaN

Dependency changes

• + Added

  @frankhoodbs/a11y-support@4.0.2
  (transitive)

• - Removed

  @frankhoodbs/a11y-support@3.0.4
  (transitive)

• Updated

  @floating-ui/vue@^1.1.9

• Updated

  @frankhoodbs/a11y-support@^4.0.0

• Updated

  vue@^3.5.22