@frankhoodbs/dropdown-cmp
Advanced tools
@@ -1,1 +0,1 @@ | ||
| .DropdownCmp[data-v-ca8aef98]{position:relative;width:var(--dropdown-width, 100%)}.button[data-v-ca8aef98]{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-ca8aef98]{outline:none!important}.disabled .button[data-v-ca8aef98]{opacity:var(--dropdown-disabled-opacity, .5);cursor:not-allowed;outline:0!important}.menu[data-v-ca8aef98]{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-ca8aef98] .option{display:block;width:100%}.menuitem[data-v-ca8aef98] .option.active,.menuitem[data-v-ca8aef98] .option:hover{background-color:var(--dropdown-option-active-background, grey)}.menuitem[data-v-ca8aef98] .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-ca8aef98],.expand-leave-active[data-v-ca8aef98]{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-ca8aef98],.expand-leave-to[data-v-ca8aef98]{opacity:0;transform:translateY(-16px)} | ||
| .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)} |
@@ -19,3 +19,3 @@ import { Placement } from '@floating-ui/vue'; | ||
| expanded: boolean; | ||
| }) => any; | ||
| }) => never; | ||
| link: (props: { | ||
@@ -25,7 +25,7 @@ option: LinkItem; | ||
| attr: Record<string, any>; | ||
| }) => any; | ||
| }) => never; | ||
| }> & { | ||
| button?: (props: { | ||
| expanded: boolean; | ||
| }) => any; | ||
| }) => never; | ||
| link: (props: { | ||
@@ -35,3 +35,3 @@ option: LinkItem; | ||
| attr: Record<string, any>; | ||
| }) => any; | ||
| }) => never; | ||
| }; | ||
@@ -38,0 +38,0 @@ refs: { |
@@ -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)},c=()=>{i.value?f():p(0)},v=()=>{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(c,["prevent","stop"]),onKeydown:[T(F(m,["prevent","stop"]),["down"]),T(F(v,["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-ca8aef98"]]);export{o as default}; | ||
| 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}; |
+4
-4
@@ -34,3 +34,3 @@ import { App } from 'vue'; | ||
| expanded: boolean; | ||
| }) => any; | ||
| }) => never; | ||
| link: (props: { | ||
@@ -40,7 +40,7 @@ option: import('./DropdownCmp').LinkItem; | ||
| attr: Record<string, any>; | ||
| }) => any; | ||
| }) => never; | ||
| }> & { | ||
| button?: (props: { | ||
| expanded: boolean; | ||
| }) => any; | ||
| }) => never; | ||
| link: (props: { | ||
@@ -50,3 +50,3 @@ option: import('./DropdownCmp').LinkItem; | ||
| attr: Record<string, any>; | ||
| }) => any; | ||
| }) => never; | ||
| }; | ||
@@ -53,0 +53,0 @@ }); |
+9
-9
@@ -13,3 +13,3 @@ { | ||
| "license": "ISC", | ||
| "version": "3.0.3", | ||
| "version": "3.0.4", | ||
| "exports": { | ||
@@ -50,5 +50,5 @@ ".": { | ||
| "devDependencies": { | ||
| "@frankhoodbs/eslint-config-vue": "^3.0.3", | ||
| "@frankhoodbs/prettier-config": "^2.0.0", | ||
| "@frankhoodbs/uglify-js": "^3.0.3", | ||
| "@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", | ||
@@ -63,10 +63,10 @@ "@vue/tsconfig": "^0.7.0", | ||
| "vite-plugin-lib-inject-css": "^2.2.2", | ||
| "vue-tsc": "^2.2.10" | ||
| "vue-tsc": "^2.2.12" | ||
| }, | ||
| "dependencies": { | ||
| "@floating-ui/vue": "^1.1.5", | ||
| "@frankhoodbs/a11y-support": "^3.0.3", | ||
| "vue": "^3.5.16" | ||
| "@floating-ui/vue": "^1.1.7", | ||
| "@frankhoodbs/a11y-support": "^3.0.4", | ||
| "vue": "^3.5.17" | ||
| }, | ||
| "gitHead": "9a9bc54e815d1de3189212d5a47b4f6250e17633" | ||
| "gitHead": "590237740d5f0e6933e565126459540c3da16a2f" | ||
| } |
17949
0.09%Updated
Updated