@vue-interface/btn-dropdown 2.0.0-beta.11 → 2.0.0-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/btn-dropdown.js +338 -552
- package/dist/btn-dropdown.js.map +1 -0
- package/dist/btn-dropdown.umd.cjs +2 -1
- package/dist/btn-dropdown.umd.cjs.map +1 -0
- package/package.json +22 -13
- package/dist/index.d.ts +0 -2
- package/dist/src/BtnDropdown.vue.d.ts +0 -9
- package/dist/src/BtnDropdownAction.vue.d.ts +0 -43
- package/dist/src/BtnDropdownSingle.vue.d.ts +0 -236
- package/dist/src/BtnDropdownSplit.vue.d.ts +0 -238
- package/dist/src/DropdownHandler.d.ts +0 -463
- package/dist/style.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"btn-dropdown.js","sources":["../src/BtnDropdownAction.vue","../src/dropdown.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n props: {\n expanded: {\n type: Boolean,\n default: false\n },\n id: {\n type: String,\n default: undefined\n },\n href: {\n type: String,\n default: undefined\n },\n to: {\n type: [String, Object],\n default: undefined\n }\n },\n computed: {\n is() {\n if(this.to) {\n return 'router-link';\n }\n\n if(this.href) {\n return 'a';\n }\n\n return 'button';\n },\n }\n});\n</script>\n\n<template>\n <Component\n :is=\"is\"\n :id=\"id\"\n v-bind=\"to ? { to } : { href }\"\n aria-haspopup=\"true\"\n :aria-expanded=\"expanded\"\n :type=\"is === 'button' ? 'button': undefined\">\n <slot />\n </Component>\n</template>","import { Instance, Placement, createPopper } from '@popperjs/core';\nimport { ComponentPublicInstance, computed, onBeforeMount, ref } from 'vue';\n\nexport type BtnDropdownProps = {\n active?: boolean,\n align?: 'left' | 'right',\n buttonClass?: string|Record<string|undefined,boolean>,\n dropdown?: boolean,\n dropup?: boolean,\n dropleft?: boolean,\n dropright?: boolean,\n label?: string,\n offset?: number,\n size?: string,\n split?: boolean,\n variant?: string,\n}\n\nexport type BtnDropdownEmits = {\n (name: 'click', e: PointerEvent): void,\n (name: 'click-toggle', e: PointerEvent): void\n}\n\nexport function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits) {\n const expanded = ref(false);\n const triggerAnimation = ref(false);\n const popper = ref<Instance>();\n const target = ref<HTMLElement|ComponentPublicInstance>();\n const menu = ref<HTMLElement|ComponentPublicInstance>();\n\n const targetEl = computed(() => \n target.value instanceof HTMLElement\n ? target.value\n : target.value.$el\n );\n\n const menuEl = computed(() => \n menu.value instanceof HTMLElement\n ? menu.value\n : menu.value.$el\n );\n\n const classes = computed(() => ({\n [props.size]: !!props.size,\n \n 'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n 'dropup': props.dropup,\n 'dropright': props.dropright,\n 'dropleft': props.dropleft,\n // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,\n // 'hide-caret': !this.caret,\n 'expanded': expanded.value,\n // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,\n }));\n\n const actionClasses = computed(() => ({\n // [props.size]: !!props.size,\n [props.variant]: !!props.variant,\n \n ...buttonsClasses.value,\n }));\n\n const buttonsClasses = computed(() => {\n if(typeof props.buttonClass === 'object') {\n return { btn: true, ...props.buttonClass };\n }\n\n return {\n btn: true,\n [props.buttonClass]: true\n }\n });\n\n const toggleClasses = computed(() => ({\n 'active': props.active,\n 'dropdown-toggle': true,\n 'dropdown-toggle-split': props.split,\n // [props.size]: !!props.size,\n [props.variant]: !!props.variant,\n \n ...buttonsClasses.value,\n\n // toggleClasses() {\n // return Object.assign({\n // 'active': this.active,\n // 'btn': !this.nav,\n // 'btn-block': !!this.block,\n // 'nav-link': !!this.nav,\n // 'rotate-90': !this.split && this.rotate && this.expanded,\n // 'dropdown-toggle': true,\n // 'dropdown-toggle-split': !this.nav && this.split,\n // [this.variant]: !this.nav && !!this.variant,\n // [this.size]: !!this.size,\n // }, typeof this.buttonClass === 'object' ? this.buttonClass : {\n // [this.buttonClass]: !!this.buttonClass\n // });\n // }\n }));\n\n const placement = computed(() => {\n if(props.dropup) {\n return 'top';\n }\n\n if(props.dropleft) {\n return 'left';\n }\n\n if(props.dropright) {\n return 'right';\n }\n\n return 'bottom';\n });\n \n const align = computed(() => {\n if(props.align) {\n return props.align === 'right' ? 'end' : 'start';\n }\n\n return 'start'\n });\n \n function show() {\n expanded.value = true;\n\n if(!popper.value) {\n popper.value = createPopper(targetEl.value, menuEl.value.querySelector('.dropdown-menu'), {\n placement: `${placement.value}-${align.value}` as Placement,\n onFirstUpdate: () => {\n triggerAnimation.value = true;\n },\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, props.offset ?? 5]\n },\n },\n ]\n });\n }\n else {\n popper.value.update();\n }\n }\n\n function hide() {\n expanded.value = false;\n }\n\n function toggle() {\n !expanded.value ? show() : hide();\n }\n \n function queryFocusable() {\n return menuEl.value && menuEl.value.querySelectorAll(\n 'label, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n }\n\n function isFocusable(element: HTMLElement) {\n const nodes = queryFocusable();\n\n for(const i in nodes) {\n if(element === nodes[i]) {\n return true;\n }\n }\n\n return false;\n }\n\n function onBlur(e: any) {\n if(menuEl.value && !menuEl.value.contains(e.relatedTarget) || !menuEl.value.contains(e.relatedTarget)) {\n hide();\n }\n }\n\n function onClickItem(e: any) {\n if(!isFocusable(e.target)) {\n hide();\n }\n }\n\n function onClickToggle(e: PointerEvent) {\n e.target.dispatchEvent(new Event('focus', e));\n \n emit('click-toggle', e);\n\n if(!e.defaultPrevented) {\n toggle();\n }\n }\n\n function onKeydown(e: KeyboardEvent) {\n if(targetEl.value.parentElement?.lastElementChild === e.target) {\n hide();\n }\n }\n\n onBeforeMount(() => {\n popper.value && popper.value.destroy();\n });\n\n return {\n actionClasses,\n classes,\n expanded,\n menu,\n target,\n toggleClasses,\n triggerAnimation,\n hide,\n show,\n toggle,\n onBlur,\n onClickItem,\n onClickToggle,\n onKeydown\n }\n}","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n target,\n classes,\n expanded,\n menu,\n toggleClasses,\n triggerAnimation,\n toggle,\n onBlur,\n onClickToggle,\n onClickItem,\n onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n <BtnGroup\n ref=\"target\"\n :class=\"classes\">\n <slot\n name=\"button\"\n v-bind=\"{ expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n\n <!-- :href=\"href\"\n :to=\"to\" -->\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n :expanded=\"expanded\"\n :class=\"toggleClasses\"\n @blur=\"onBlur\"\n @click=\"onClickToggle\">\n <slot name=\"icon\" />\n <slot name=\"label\">\n {{ label }}\n </slot>\n </BtnDropdownAction>\n </slot>\n <DropdownMenu\n :id=\"$attrs.id\"\n ref=\"menu\"\n :align=\"align\"\n :show=\"expanded\"\n :class=\"{animated: triggerAnimation}\"\n @blur=\"onBlur\"\n @click=\"onClickItem\"\n @keydown.tab=\"onKeydown\"\n @mousedown.prevent=\"\">\n <slot />\n </DropdownMenu>\n </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n actionClasses,\n classes,\n expanded,\n menu,\n target,\n toggleClasses,\n triggerAnimation,\n onBlur,\n onClickToggle,\n onClickItem,\n onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n <BtnGroup\n :class=\"classes\"\n class=\"btn-dropdown-split\">\n\n <slot\n v-if=\"!dropleft\"\n v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n name=\"button\">\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n :expanded=\"expanded\"\n :class=\"actionClasses\"\n @click=\"emit('click', $event)\">\n <slot name=\"icon\" />\n <slot name=\"label\">\n {{ label }}\n </slot>\n </BtnDropdownAction>\n </slot>\n \n <BtnGroup ref=\"target\">\n <slot\n name=\"split\">\n <button\n :id=\"($attrs.id as string)\"\n type=\"button\"\n aria-haspopup=\"true\"\n :aria-expanded=\"expanded\"\n :class=\"toggleClasses\"\n @blur=\"onBlur\"\n @click=\"onClickToggle\" />\n </slot>\n \n <DropdownMenu\n ref=\"menu\"\n :align=\"align\"\n :show=\"expanded\"\n :class=\"{animated: triggerAnimation}\"\n @blur=\"onBlur\"\n @click=\"onClickItem\"\n @keydown.tab=\"onKeydown\"\n @mousedown.prevent=\"\">\n <slot />\n </DropdownMenu>\n </BtnGroup>\n\n <slot\n v-if=\"dropleft\"\n v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n name=\"button\">\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n :expanded=\"expanded\"\n :class=\"actionClasses\"\n @click=\"emit('click', $event)\">\n <slot name=\"icon\" />\n <slot name=\"label\">\n {{ label }}\n </slot>\n </BtnDropdownAction>\n </slot>\n </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\n\nexport type BtnDropdownProps = {\n label?: string,\n split?: boolean\n}\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n click: [e: Event]\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n <Component\n :is=\"split ? BtnDropdownSplit : BtnDropdownSingle\"\n v-bind=\"props\"\n class=\"btn-dropdown\"\n @click=\"(e: Event) => emit('click', e)\">\n <!-- @click-toggle=\"(...args: any[]) => $emit('click-toggle', ...args)\"\n @dropdown=\"(...args: any[]) => $emit('dropdown', ...args)\"\n @show=\"(...args: any[]) => $emit('show', ...args)\"\n @hide=\"(...args: any[]) => $emit('hide', ...args)\"\n @toggle=\"(...args: any[]) => $emit('toggle', ...args)\" -->\n <template #icon>\n <slot name=\"icon\" />\n </template>\n <template\n v-if=\"label || slots.label\"\n #label>\n <slot name=\"label\">\n {{ label }}\n </slot>\n </template>\n <template #button=\"slot\">\n <slot\n name=\"button\"\n v-bind=\"slot\" />\n </template>\n <template #split=\"slot\">\n <slot\n name=\"split\"\n v-bind=\"slot\" />\n </template>\n <slot />\n </Component>\n</template>"],"names":["_sfc_main$3","defineComponent","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","_a","onBeforeMount","slots","useSlots"],"mappings":"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"}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@popperjs/core"),require("@vue-interface/btn"),require("@vue-interface/btn-group"),require("@vue-interface/dropdown-menu")):typeof define=="function"&&define.amd?define(["exports","vue","@popperjs/core","@vue-interface/btn","@vue-interface/btn-group","@vue-interface/dropdown-menu"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.BtnDropdown={},s.Vue,s.PopperjsCore,s.VueInterfaceBtn,s.VueInterfaceBtnGroup,s.VueInterfaceDropdownMenu))})(this,function(s,t,m,c,u,C){"use strict";const $=t.defineComponent({props:{expanded:{type:Boolean,default:!1},id:{type:String,default:void 0},href:{type:String,default:void 0},to:{type:[String,Object],default:void 0}},computed:{is(){return this.to?"router-link":this.href?"a":"button"}}}),d=(e,o)=>{const i=e.__vccOpts||e;for(const[l,a]of o)i[l]=a;return i};function w(e,o,i,l,a,h){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.is),t.mergeProps({id:e.id},e.to?{to:e.to}:{href:e.href},{"aria-haspopup":"true","aria-expanded":e.expanded,type:e.is==="button"?"button":void 0}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16,["id","aria-expanded","type"])}const b=d($,[["render",w]]),g=t.defineComponent({components:{BtnDropdownAction:b,BtnGroup:u.BtnGroup,DropdownMenu:C.DropdownMenu},extends:c.Btn,props:{align:{type:String,default:"left",validate(e){return["left","right"].indexOf(e.toLowerCase())!==-1}},animated:{type:Boolean,default:!0},buttonClass:[Object,String],caret:{type:Boolean,default:!0},dropup:{type:Boolean,default:!1},dropright:{type:Boolean,default:!1},dropleft:{type:Boolean,default:!1},height:String,href:String,nav:Boolean,label:String,offset:{type:Number,default:5},rotate:{type:Boolean,default:!1},split:{type:Boolean,default:!1},to:[String,Object],type:{type:String,default:"button"},width:String},emits:["click-toggle","show","hide","toggle"],data(){return{popper:null,triggerAnimation:!1,expanded:!1}},computed:{scope(){return{placement:this.placement,variantClassPrefix:this.variantClassPrefix,sizeableClassPrefix:this.sizeableClassPrefix,classes:this.classes,actionClasses:this.actionClasses,toggleStyle:this.toggleStyle,toggleClasses:this.toggleClasses,focus:this.focus,queryFocusable:this.queryFocusable,isFocusable:this.isFocusable,toggle:this.toggle,show:this.show,hide:this.hide,onBlur:this.onBlur,onClickItem:this.onClickItem,onClickToggle:this.onClickToggle,expanded:this.expanded}},placement(){return this.dropup?"top":this.dropleft?"left":this.dropright?"right":"bottom"},variantClassPrefix(){return"btn"+(this.outline?"-outline":"")},sizeableClassPrefix(){return"btn"},classes(){return{dropdown:this.dropup&&this.dropright&&this.dropleft,dropup:this.dropup,dropright:this.dropright,dropleft:this.dropleft,"icon-only":!this.nav&&!this.split&&!!this.$slots.icon&&!this.$slots.label,"hide-caret":!this.caret,expanded:this.expanded,"rotate-90":!this.nav&&this.split&&this.rotate&&this.expanded}},actionClasses(){return Object.assign({btn:!this.nav,[this.variantClass]:!this.nav&&!!this.variant,[this.sizeableClass]:!!this.size},typeof this.buttonClass=="object"?this.buttonClass:{[this.buttonClass]:!!this.buttonClass})},toggleStyle(){return{width:this.width,height:this.height}},toggleClasses(){return Object.assign({active:this.active,btn:!this.nav,"btn-block":!!this.block,"nav-link":!!this.nav,"rotate-90":!this.split&&this.rotate&&this.expanded,"dropdown-toggle":!0,"dropdown-toggle-split":!this.nav&&this.split,[this.variantClass]:!this.nav&&!!this.variant,[this.sizeableClass]:!!this.size},typeof this.buttonClass=="object"?this.buttonClass:{[this.buttonClass]:!!this.buttonClass})}},watch:{expanded(e){this.$nextTick(()=>{this.$emit(e?"show":"hide"),this.$emit("toggle",e)}),setTimeout(()=>{e?document.addEventListener("click",this.onClickDocument):document.removeEventListener("click",this.onClickDocument)})}},beforeUnmount(){this.popper&&this.popper.destroy()},methods:{focus(){var e;(e=this.$el)==null||e.querySelector(".dropdown-toggle").focus()},queryFocusable(){var e;return(e=this.$el)==null?void 0:e.querySelector(".dropdown-menu").querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')},isFocusable(e){const o=this.queryFocusable();for(const i in o)if(e===o[i])return!0;return!1},toggle(){this.expanded?this.hide():this.show()},show(){var o,i;this.expanded=!0;const e=this.$refs.split&&((o=this.$refs.split)==null?void 0:o.$el)||this.$el;!this.nav&&!this.popper?this.popper=m.createPopper(e,(i=this.$refs.menu)==null?void 0:i.$el,{placement:`${this.placement}-${this.align==="left"?"start":"end"}`,onFirstUpdate:()=>{this.triggerAnimation=this.animated},modifiers:[{name:"offset",options:{offset:[0,this.nav?1:this.offset]}}]}):this.popper&&this.popper.update()},hide(){this.expanded=!1},onBlur(e){var o;(this.$refs.menu&&!((o=this.$refs.menu)!=null&&o.$el.contains(e.relatedTarget))||!(this!=null&&this.$el.contains(e.relatedTarget)))&&this.hide()},onClickDocument(e){this!=null&&this.$el.contains(e.target)||this.hide()},onClickItem(e){this.isFocusable(e.target)||this.hide()},onClickToggle(e){e.target.dispatchEvent(new Event("focus",e)),this.$emit("click-toggle",e),e.defaultPrevented||this.toggle()},onKeydown(e){e.target.parentElement.lastElementChild===e.target&&this.hide()}}}),y=t.defineComponent({mixins:[g]});function k(e,o,i,l,a,h){const n=t.resolveComponent("BtnDropdownAction"),f=t.resolveComponent("DropdownMenu"),p=t.resolveComponent("BtnGroup");return t.openBlock(),t.createBlock(p,{class:t.normalizeClass(e.classes)},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"button",t.normalizeProps(t.guardReactiveProps(e.scope)),()=>[t.createVNode(n,{id:e.$attrs.id,ref:"button",expanded:e.expanded,href:e.href,to:e.to,style:t.normalizeStyle(e.toggleStyle),class:t.normalizeClass(e.toggleClasses),onBlur:e.onBlur,onClick:e.onClickToggle},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"icon"),t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)])]),_:3},8,["id","expanded","href","to","style","class","onBlur","onClick"])]),t.createVNode(f,{id:e.$attrs.id,ref:"menu",align:e.align,show:e.expanded,class:t.normalizeClass({animated:e.triggerAnimation}),onBlur:e.onBlur,onClick:e.onClickItem,onKeydown:t.withKeys(e.onKeydown,["tab"]),onMousedown:o[0]||(o[0]=t.withModifiers(()=>{},["prevent"]))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"])}const B=d(y,[["render",k]]),S=t.defineComponent({mixins:[g],emits:["click"]}),D=["id","aria-expanded"];function P(e,o,i,l,a,h){const n=t.resolveComponent("BtnDropdownAction"),f=t.resolveComponent("DropdownMenu"),p=t.resolveComponent("BtnGroup");return t.openBlock(),t.createBlock(p,{class:t.normalizeClass([e.classes,"btn-dropdown-split"])},{default:t.withCtx(()=>[e.dropleft?t.createCommentVNode("",!0):t.renderSlot(e.$slots,"button",t.normalizeProps(t.mergeProps({key:0},e.scope)),()=>[e.dropleft?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(n,{key:0,id:e.$attrs.id,ref:"button",expanded:e.expanded,href:e.href,to:e.to,class:t.normalizeClass(e.actionClasses),onClick:o[0]||(o[0]=r=>e.$emit("click",r))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"icon"),t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)])]),_:3},8,["id","expanded","href","to","class"]))]),t.createVNode(p,{ref:"split"},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"split",t.normalizeProps(t.guardReactiveProps(e.scope)),()=>[e.split?(t.openBlock(),t.createElementBlock("button",{key:0,id:e.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.expanded,class:t.normalizeClass(e.toggleClasses),onBlur:o[1]||(o[1]=(...r)=>e.onBlur&&e.onBlur(...r)),onClick:o[2]||(o[2]=(...r)=>e.onClickToggle&&e.onClickToggle(...r))},null,42,D)):t.createCommentVNode("",!0)]),t.createVNode(f,{id:e.$attrs.id,ref:"menu",align:e.align,show:e.expanded,class:t.normalizeClass({animated:e.triggerAnimation}),onBlur:e.onBlur,onClick:e.onClickItem,onKeydown:t.withKeys(e.onKeydown,["tab"]),onMousedown:o[3]||(o[3]=t.withModifiers(()=>{},["prevent"]))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),e.dropleft?t.renderSlot(e.$slots,"button",t.normalizeProps(t.mergeProps({key:1},e.scope)),()=>[e.dropleft?(t.openBlock(),t.createBlock(n,{key:0,id:e.$attrs.id,ref:"button",expanded:e.expanded,href:e.href,to:e.to,class:t.normalizeClass(e.actionClasses),onClick:o[4]||(o[4]=r=>e.$emit("click",r))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"icon"),t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)])]),_:3},8,["id","expanded","href","to","class"])):t.createCommentVNode("",!0)]):t.createCommentVNode("",!0)]),_:3},8,["class"])}const z=d(S,[["render",P]]),T=t.defineComponent({name:"BtnDropdown",components:{BtnDropdownSplit:z,BtnDropdownSingle:B},inheritAttrs:!1,emits:["click","click-toggle","dropdown","show","hide","toggle"]}),j="";function V(e,o,i,l,a,h){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$attrs.split===void 0||e.$attrs.nav?"btn-dropdown-single":"btn-dropdown-split"),t.mergeProps({class:"btn-dropdown"},e.$attrs,{onClick:o[0]||(o[0]=(...n)=>e.$emit("click",...n)),onClickToggle:o[1]||(o[1]=(...n)=>e.$emit("click-toggle",...n)),onDropdown:o[2]||(o[2]=(...n)=>e.$emit("dropdown",...n)),onShow:o[3]||(o[3]=(...n)=>e.$emit("show",...n)),onHide:o[4]||(o[4]=(...n)=>e.$emit("hide",...n)),onToggle:o[5]||(o[5]=(...n)=>e.$emit("toggle",...n))}),t.createSlots({icon:t.withCtx(()=>[t.renderSlot(e.$slots,"icon")]),button:t.withCtx(n=>[t.renderSlot(e.$slots,"button",t.normalizeProps(t.guardReactiveProps(n)))]),split:t.withCtx(n=>[t.renderSlot(e.$slots,"split",t.normalizeProps(t.guardReactiveProps(n)))]),default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:2},[e.$attrs.label||e.$slots.label?{name:"label",fn:t.withCtx(()=>[t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.$attrs.label),1)])]),key:"0"}:void 0]),1040)}const N=d(T,[["render",V]]);s.BtnDropdown=N,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/btn-group"),require("@vue-interface/dropdown-menu"),require("@popperjs/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/btn-group","@vue-interface/dropdown-menu","@popperjs/core"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.BtnDropdown={},u.Vue,u.VueInterfaceBtnGroup,u.VueInterfaceDropdownMenu,u.PopperjsCore))})(this,function(u,e,b,$,T){"use strict";const D=e.defineComponent({props:{expanded:{type:Boolean,default:!1},id:{type:String,default:void 0},href:{type:String,default:void 0},to:{type:[String,Object],default:void 0}},computed:{is(){return this.to?"router-link":this.href?"a":"button"}}}),P=(n,p)=>{const a=n.__vccOpts||n;for(const[s,o]of p)a[s]=o;return a};function V(n,p,a,s,o,r){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),e.mergeProps({id:n.id},n.to?{to:n.to}:{href:n.href},{"aria-haspopup":"true","aria-expanded":n.expanded,type:n.is==="button"?"button":void 0}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},16,["id","aria-expanded","type"])}const h=P(D,[["render",V]]);function S(n,p){const a=e.ref(!1),s=e.ref(!1),o=e.ref(),r=e.ref(),i=e.ref(),y=e.computed(()=>r.value instanceof HTMLElement?r.value:r.value.$el),g=e.computed(()=>i.value instanceof HTMLElement?i.value:i.value.$el),k=e.computed(()=>({[n.size]:!!n.size,dropdown:n.dropdown||!(n.dropright||n.dropleft||n.dropup),dropup:n.dropup,dropright:n.dropright,dropleft:n.dropleft,expanded:a.value})),c=e.computed(()=>({[n.variant]:!!n.variant,...m.value})),m=e.computed(()=>typeof n.buttonClass=="object"?{btn:!0,...n.buttonClass}:{btn:!0,[n.buttonClass]:!0}),C=e.computed(()=>({active:n.active,"dropdown-toggle":!0,"dropdown-toggle-split":n.split,[n.variant]:!!n.variant,...m.value})),w=e.computed(()=>n.dropup?"top":n.dropleft?"left":n.dropright?"right":"bottom"),t=e.computed(()=>n.align&&n.align==="right"?"end":"start");function l(){a.value=!0,o.value?o.value.update():o.value=T.createPopper(y.value,g.value.querySelector(".dropdown-menu"),{placement:`${w.value}-${t.value}`,onFirstUpdate:()=>{s.value=!0},modifiers:[{name:"offset",options:{offset:[0,n.offset??5]}}]})}function d(){a.value=!1}function z(){a.value?d():l()}function I(){return g.value&&g.value.querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')}function j(f){const B=I();for(const O in B)if(f===B[O])return!0;return!1}function q(f){(g.value&&!g.value.contains(f.relatedTarget)||!g.value.contains(f.relatedTarget))&&d()}function x(f){j(f.target)||d()}function A(f){f.target.dispatchEvent(new Event("focus",f)),p("click-toggle",f),f.defaultPrevented||z()}function F(f){var B;((B=y.value.parentElement)==null?void 0:B.lastElementChild)===f.target&&d()}return e.onBeforeMount(()=>{o.value&&o.value.destroy()}),{actionClasses:c,classes:k,expanded:a,menu:i,target:r,toggleClasses:C,triggerAnimation:s,hide:d,show:l,toggle:z,onBlur:q,onClickItem:x,onClickToggle:A,onKeydown:F}}const N=e.defineComponent({__name:"BtnDropdownSingle",props:{active:{type:Boolean},align:{},buttonClass:{},dropdown:{type:Boolean},dropup:{type:Boolean},dropleft:{type:Boolean},dropright:{type:Boolean},label:{},offset:{},size:{},split:{type:Boolean},variant:{}},emits:["click","click-toggle"],setup(n,{emit:p}){const a=n,{target:s,classes:o,expanded:r,menu:i,toggleClasses:y,triggerAnimation:g,toggle:k,onBlur:c,onClickToggle:m,onClickItem:C,onKeydown:w}=S(a,p);return(t,l)=>(e.openBlock(),e.createBlock(e.unref(b.BtnGroup),{ref_key:"target",ref:s,class:e.normalizeClass(e.unref(o))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"button",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(r),target:e.unref(s),toggle:e.unref(k),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(w)})),()=>[e.createVNode(h,{id:t.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(y)),onBlur:e.unref(c),onClick:e.unref(m)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon"),e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},8,["id","expanded","class","onBlur","onClick"])]),e.createVNode(e.unref($.DropdownMenu),{id:t.$attrs.id,ref_key:"menu",ref:i,align:t.align,show:e.unref(r),class:e.normalizeClass({animated:e.unref(g)}),onBlur:e.unref(c),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(w),["tab"]),onMousedown:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"]))}}),K=["id","aria-expanded"],M=e.defineComponent({__name:"BtnDropdownSplit",props:{active:{type:Boolean},align:{},buttonClass:{},dropdown:{type:Boolean},dropup:{type:Boolean},dropleft:{type:Boolean},dropright:{type:Boolean},label:{},offset:{},size:{},split:{type:Boolean},variant:{}},emits:["click","click-toggle"],setup(n,{emit:p}){const a=n,{actionClasses:s,classes:o,expanded:r,menu:i,target:y,toggleClasses:g,triggerAnimation:k,onBlur:c,onClickToggle:m,onClickItem:C,onKeydown:w}=S(a,p);return(t,l)=>(e.openBlock(),e.createBlock(e.unref(b.BtnGroup),{class:e.normalizeClass([e.unref(o),"btn-dropdown-split"])},{default:e.withCtx(()=>[t.dropleft?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(r),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(w)})),()=>[e.createVNode(h,{id:t.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(s)),onClick:l[0]||(l[0]=d=>p("click",d))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon"),e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},8,["id","expanded","class"])]),e.createVNode(e.unref(b.BtnGroup),{ref_key:"target",ref:y},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"split",{},()=>[e.createElementVNode("button",{id:t.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.unref(r),class:e.normalizeClass(e.unref(g)),onBlur:l[1]||(l[1]=(...d)=>e.unref(c)&&e.unref(c)(...d)),onClick:l[2]||(l[2]=(...d)=>e.unref(m)&&e.unref(m)(...d))},null,42,K)]),e.createVNode(e.unref($.DropdownMenu),{ref_key:"menu",ref:i,align:t.align,show:e.unref(r),class:e.normalizeClass({animated:e.unref(k)}),onBlur:e.unref(c),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(w),["tab"]),onMousedown:l[3]||(l[3]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),t.dropleft?e.renderSlot(t.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(r),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(w)})),()=>[e.createVNode(h,{id:t.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(s)),onClick:l[4]||(l[4]=d=>p("click",d))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon"),e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},8,["id","expanded","class"])]):e.createCommentVNode("",!0)]),_:3},8,["class"]))}}),E=e.defineComponent({__name:"BtnDropdown",props:{label:{},split:{type:Boolean}},emits:["click"],setup(n,{emit:p}){const a=n,s=e.useSlots();return(o,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.split?M:N),e.mergeProps(a,{class:"btn-dropdown",onClick:r[0]||(r[0]=i=>p("click",i))}),e.createSlots({icon:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),button:e.withCtx(i=>[e.renderSlot(o.$slots,"button",e.normalizeProps(e.guardReactiveProps(i)))]),split:e.withCtx(i=>[e.renderSlot(o.$slots,"split",e.normalizeProps(e.guardReactiveProps(i)))]),default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:2},[o.label||e.unref(s).label?{name:"label",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])]),key:"0"}:void 0]),1040))}});u.BtnDropdown=E,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
|
|
2
|
+
//# sourceMappingURL=btn-dropdown.umd.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"btn-dropdown.umd.cjs","sources":["../src/BtnDropdownAction.vue","../src/dropdown.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n props: {\n expanded: {\n type: Boolean,\n default: false\n },\n id: {\n type: String,\n default: undefined\n },\n href: {\n type: String,\n default: undefined\n },\n to: {\n type: [String, Object],\n default: undefined\n }\n },\n computed: {\n is() {\n if(this.to) {\n return 'router-link';\n }\n\n if(this.href) {\n return 'a';\n }\n\n return 'button';\n },\n }\n});\n</script>\n\n<template>\n <Component\n :is=\"is\"\n :id=\"id\"\n v-bind=\"to ? { to } : { href }\"\n aria-haspopup=\"true\"\n :aria-expanded=\"expanded\"\n :type=\"is === 'button' ? 'button': undefined\">\n <slot />\n </Component>\n</template>","import { Instance, Placement, createPopper } from '@popperjs/core';\nimport { ComponentPublicInstance, computed, onBeforeMount, ref } from 'vue';\n\nexport type BtnDropdownProps = {\n active?: boolean,\n align?: 'left' | 'right',\n buttonClass?: string|Record<string|undefined,boolean>,\n dropdown?: boolean,\n dropup?: boolean,\n dropleft?: boolean,\n dropright?: boolean,\n label?: string,\n offset?: number,\n size?: string,\n split?: boolean,\n variant?: string,\n}\n\nexport type BtnDropdownEmits = {\n (name: 'click', e: PointerEvent): void,\n (name: 'click-toggle', e: PointerEvent): void\n}\n\nexport function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits) {\n const expanded = ref(false);\n const triggerAnimation = ref(false);\n const popper = ref<Instance>();\n const target = ref<HTMLElement|ComponentPublicInstance>();\n const menu = ref<HTMLElement|ComponentPublicInstance>();\n\n const targetEl = computed(() => \n target.value instanceof HTMLElement\n ? target.value\n : target.value.$el\n );\n\n const menuEl = computed(() => \n menu.value instanceof HTMLElement\n ? menu.value\n : menu.value.$el\n );\n\n const classes = computed(() => ({\n [props.size]: !!props.size,\n \n 'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n 'dropup': props.dropup,\n 'dropright': props.dropright,\n 'dropleft': props.dropleft,\n // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,\n // 'hide-caret': !this.caret,\n 'expanded': expanded.value,\n // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,\n }));\n\n const actionClasses = computed(() => ({\n // [props.size]: !!props.size,\n [props.variant]: !!props.variant,\n \n ...buttonsClasses.value,\n }));\n\n const buttonsClasses = computed(() => {\n if(typeof props.buttonClass === 'object') {\n return { btn: true, ...props.buttonClass };\n }\n\n return {\n btn: true,\n [props.buttonClass]: true\n }\n });\n\n const toggleClasses = computed(() => ({\n 'active': props.active,\n 'dropdown-toggle': true,\n 'dropdown-toggle-split': props.split,\n // [props.size]: !!props.size,\n [props.variant]: !!props.variant,\n \n ...buttonsClasses.value,\n\n // toggleClasses() {\n // return Object.assign({\n // 'active': this.active,\n // 'btn': !this.nav,\n // 'btn-block': !!this.block,\n // 'nav-link': !!this.nav,\n // 'rotate-90': !this.split && this.rotate && this.expanded,\n // 'dropdown-toggle': true,\n // 'dropdown-toggle-split': !this.nav && this.split,\n // [this.variant]: !this.nav && !!this.variant,\n // [this.size]: !!this.size,\n // }, typeof this.buttonClass === 'object' ? this.buttonClass : {\n // [this.buttonClass]: !!this.buttonClass\n // });\n // }\n }));\n\n const placement = computed(() => {\n if(props.dropup) {\n return 'top';\n }\n\n if(props.dropleft) {\n return 'left';\n }\n\n if(props.dropright) {\n return 'right';\n }\n\n return 'bottom';\n });\n \n const align = computed(() => {\n if(props.align) {\n return props.align === 'right' ? 'end' : 'start';\n }\n\n return 'start'\n });\n \n function show() {\n expanded.value = true;\n\n if(!popper.value) {\n popper.value = createPopper(targetEl.value, menuEl.value.querySelector('.dropdown-menu'), {\n placement: `${placement.value}-${align.value}` as Placement,\n onFirstUpdate: () => {\n triggerAnimation.value = true;\n },\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, props.offset ?? 5]\n },\n },\n ]\n });\n }\n else {\n popper.value.update();\n }\n }\n\n function hide() {\n expanded.value = false;\n }\n\n function toggle() {\n !expanded.value ? show() : hide();\n }\n \n function queryFocusable() {\n return menuEl.value && menuEl.value.querySelectorAll(\n 'label, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n }\n\n function isFocusable(element: HTMLElement) {\n const nodes = queryFocusable();\n\n for(const i in nodes) {\n if(element === nodes[i]) {\n return true;\n }\n }\n\n return false;\n }\n\n function onBlur(e: any) {\n if(menuEl.value && !menuEl.value.contains(e.relatedTarget) || !menuEl.value.contains(e.relatedTarget)) {\n hide();\n }\n }\n\n function onClickItem(e: any) {\n if(!isFocusable(e.target)) {\n hide();\n }\n }\n\n function onClickToggle(e: PointerEvent) {\n e.target.dispatchEvent(new Event('focus', e));\n \n emit('click-toggle', e);\n\n if(!e.defaultPrevented) {\n toggle();\n }\n }\n\n function onKeydown(e: KeyboardEvent) {\n if(targetEl.value.parentElement?.lastElementChild === e.target) {\n hide();\n }\n }\n\n onBeforeMount(() => {\n popper.value && popper.value.destroy();\n });\n\n return {\n actionClasses,\n classes,\n expanded,\n menu,\n target,\n toggleClasses,\n triggerAnimation,\n hide,\n show,\n toggle,\n onBlur,\n onClickItem,\n onClickToggle,\n onKeydown\n }\n}","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n target,\n classes,\n expanded,\n menu,\n toggleClasses,\n triggerAnimation,\n toggle,\n onBlur,\n onClickToggle,\n onClickItem,\n onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n <BtnGroup\n ref=\"target\"\n :class=\"classes\">\n <slot\n name=\"button\"\n v-bind=\"{ expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n\n <!-- :href=\"href\"\n :to=\"to\" -->\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n :expanded=\"expanded\"\n :class=\"toggleClasses\"\n @blur=\"onBlur\"\n @click=\"onClickToggle\">\n <slot name=\"icon\" />\n <slot name=\"label\">\n {{ label }}\n </slot>\n </BtnDropdownAction>\n </slot>\n <DropdownMenu\n :id=\"$attrs.id\"\n ref=\"menu\"\n :align=\"align\"\n :show=\"expanded\"\n :class=\"{animated: triggerAnimation}\"\n @blur=\"onBlur\"\n @click=\"onClickItem\"\n @keydown.tab=\"onKeydown\"\n @mousedown.prevent=\"\">\n <slot />\n </DropdownMenu>\n </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n actionClasses,\n classes,\n expanded,\n menu,\n target,\n toggleClasses,\n triggerAnimation,\n onBlur,\n onClickToggle,\n onClickItem,\n onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n <BtnGroup\n :class=\"classes\"\n class=\"btn-dropdown-split\">\n\n <slot\n v-if=\"!dropleft\"\n v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n name=\"button\">\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n :expanded=\"expanded\"\n :class=\"actionClasses\"\n @click=\"emit('click', $event)\">\n <slot name=\"icon\" />\n <slot name=\"label\">\n {{ label }}\n </slot>\n </BtnDropdownAction>\n </slot>\n \n <BtnGroup ref=\"target\">\n <slot\n name=\"split\">\n <button\n :id=\"($attrs.id as string)\"\n type=\"button\"\n aria-haspopup=\"true\"\n :aria-expanded=\"expanded\"\n :class=\"toggleClasses\"\n @blur=\"onBlur\"\n @click=\"onClickToggle\" />\n </slot>\n \n <DropdownMenu\n ref=\"menu\"\n :align=\"align\"\n :show=\"expanded\"\n :class=\"{animated: triggerAnimation}\"\n @blur=\"onBlur\"\n @click=\"onClickItem\"\n @keydown.tab=\"onKeydown\"\n @mousedown.prevent=\"\">\n <slot />\n </DropdownMenu>\n </BtnGroup>\n\n <slot\n v-if=\"dropleft\"\n v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n name=\"button\">\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n :expanded=\"expanded\"\n :class=\"actionClasses\"\n @click=\"emit('click', $event)\">\n <slot name=\"icon\" />\n <slot name=\"label\">\n {{ label }}\n </slot>\n </BtnDropdownAction>\n </slot>\n </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\n\nexport type BtnDropdownProps = {\n label?: string,\n split?: boolean\n}\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n click: [e: Event]\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n <Component\n :is=\"split ? BtnDropdownSplit : BtnDropdownSingle\"\n v-bind=\"props\"\n class=\"btn-dropdown\"\n @click=\"(e: Event) => emit('click', e)\">\n <!-- @click-toggle=\"(...args: any[]) => $emit('click-toggle', ...args)\"\n @dropdown=\"(...args: any[]) => $emit('dropdown', ...args)\"\n @show=\"(...args: any[]) => $emit('show', ...args)\"\n @hide=\"(...args: any[]) => $emit('hide', ...args)\"\n @toggle=\"(...args: any[]) => $emit('toggle', ...args)\" -->\n <template #icon>\n <slot name=\"icon\" />\n </template>\n <template\n v-if=\"label || slots.label\"\n #label>\n <slot name=\"label\">\n {{ label }}\n </slot>\n </template>\n <template #button=\"slot\">\n <slot\n name=\"button\"\n v-bind=\"slot\" />\n </template>\n <template #split=\"slot\">\n <slot\n name=\"split\"\n v-bind=\"slot\" />\n </template>\n <slot />\n </Component>\n</template>"],"names":["_sfc_main$3","defineComponent","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","_a","onBeforeMount","slots","useSlots"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/btn-dropdown",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.13",
|
|
4
4
|
"description": "A Vue button dropdown component.",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -44,25 +44,34 @@
|
|
|
44
44
|
"homepage": "https://github.com/vue-interface/btn-dropdown",
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@popperjs/core": "^2.11.2",
|
|
47
|
-
"@vue-interface/btn": "^3.0.0-beta.
|
|
48
|
-
"@vue-interface/btn-group": "^2.0.0-beta.
|
|
49
|
-
"@vue-interface/dropdown-menu": "^2.0.0-beta.
|
|
47
|
+
"@vue-interface/btn": "^3.0.0-beta.19",
|
|
48
|
+
"@vue-interface/btn-group": "^2.0.0-beta.7",
|
|
49
|
+
"@vue-interface/dropdown-menu": "^2.0.0-beta.12"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"vue": "^3.
|
|
52
|
+
"vue": "^3.3.4"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@
|
|
55
|
+
"@commitlint/config-conventional": "^17.7.0",
|
|
56
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
57
|
+
"@semantic-release/git": "^10.0.1",
|
|
58
|
+
"@semantic-release/npm": "^10.0.5",
|
|
59
|
+
"@types/color": "^3.0.3",
|
|
60
|
+
"@vitejs/plugin-vue": "^4.3.2",
|
|
56
61
|
"@vue-interface/eslint-config": "^1.0.0-beta.0",
|
|
57
|
-
"autoprefixer": "^10.4.
|
|
62
|
+
"autoprefixer": "^10.4.15",
|
|
58
63
|
"change-case": "^4.1.2",
|
|
59
|
-
"
|
|
64
|
+
"commitlint": "^17.7.1",
|
|
65
|
+
"dotenv": "^16.3.1",
|
|
66
|
+
"eslint": "^8.47.0",
|
|
67
|
+
"husky": "^8.0.3",
|
|
60
68
|
"pascalcase": "^2.0.0",
|
|
61
69
|
"postcss": "^8.4.6",
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"vite
|
|
66
|
-
"vue": "^3.
|
|
70
|
+
"semantic-release": "^21.0.7",
|
|
71
|
+
"tailwindcss": "^3.3.3",
|
|
72
|
+
"typescript": "^5.2.2",
|
|
73
|
+
"vite": "^4.4.0",
|
|
74
|
+
"vue": "^3.3.4",
|
|
75
|
+
"vue-tsc": "^1.8.8"
|
|
67
76
|
}
|
|
68
77
|
}
|
package/dist/index.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("toggle" | "show" | "click-toggle" | "hide" | "click" | "dropdown")[], "toggle" | "show" | "click-toggle" | "hide" | "click" | "dropdown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
|
|
2
|
-
onToggle?: ((...args: any[]) => any) | undefined;
|
|
3
|
-
onShow?: ((...args: any[]) => any) | undefined;
|
|
4
|
-
"onClick-toggle"?: ((...args: any[]) => any) | undefined;
|
|
5
|
-
onHide?: ((...args: any[]) => any) | undefined;
|
|
6
|
-
onClick?: ((...args: any[]) => any) | undefined;
|
|
7
|
-
onDropdown?: ((...args: any[]) => any) | undefined;
|
|
8
|
-
}, {}>;
|
|
9
|
-
export default _sfc_main;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
declare const _sfc_main: import("vue").DefineComponent<{
|
|
2
|
-
expanded: {
|
|
3
|
-
type: BooleanConstructor;
|
|
4
|
-
default: boolean;
|
|
5
|
-
};
|
|
6
|
-
id: {
|
|
7
|
-
type: StringConstructor;
|
|
8
|
-
default: undefined;
|
|
9
|
-
};
|
|
10
|
-
href: {
|
|
11
|
-
type: StringConstructor;
|
|
12
|
-
default: undefined;
|
|
13
|
-
};
|
|
14
|
-
to: {
|
|
15
|
-
type: (StringConstructor | ObjectConstructor)[];
|
|
16
|
-
default: undefined;
|
|
17
|
-
};
|
|
18
|
-
}, unknown, unknown, {
|
|
19
|
-
is(): "button" | "router-link" | "a";
|
|
20
|
-
}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
21
|
-
expanded: {
|
|
22
|
-
type: BooleanConstructor;
|
|
23
|
-
default: boolean;
|
|
24
|
-
};
|
|
25
|
-
id: {
|
|
26
|
-
type: StringConstructor;
|
|
27
|
-
default: undefined;
|
|
28
|
-
};
|
|
29
|
-
href: {
|
|
30
|
-
type: StringConstructor;
|
|
31
|
-
default: undefined;
|
|
32
|
-
};
|
|
33
|
-
to: {
|
|
34
|
-
type: (StringConstructor | ObjectConstructor)[];
|
|
35
|
-
default: undefined;
|
|
36
|
-
};
|
|
37
|
-
}>>, {
|
|
38
|
-
expanded: boolean;
|
|
39
|
-
id: string;
|
|
40
|
-
href: string;
|
|
41
|
-
to: string | Record<string, any>;
|
|
42
|
-
}>;
|
|
43
|
-
export default _sfc_main;
|
|
@@ -1,236 +0,0 @@
|
|
|
1
|
-
declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").DefineComponent<{
|
|
2
|
-
align: {
|
|
3
|
-
type: StringConstructor;
|
|
4
|
-
default: string;
|
|
5
|
-
validate(value: any): boolean;
|
|
6
|
-
};
|
|
7
|
-
animated: {
|
|
8
|
-
type: BooleanConstructor;
|
|
9
|
-
default: boolean;
|
|
10
|
-
};
|
|
11
|
-
buttonClass: (StringConstructor | ObjectConstructor)[];
|
|
12
|
-
caret: {
|
|
13
|
-
type: BooleanConstructor;
|
|
14
|
-
default: boolean;
|
|
15
|
-
};
|
|
16
|
-
dropup: {
|
|
17
|
-
type: BooleanConstructor;
|
|
18
|
-
default: boolean;
|
|
19
|
-
};
|
|
20
|
-
dropright: {
|
|
21
|
-
type: BooleanConstructor;
|
|
22
|
-
default: boolean;
|
|
23
|
-
};
|
|
24
|
-
dropleft: {
|
|
25
|
-
type: BooleanConstructor;
|
|
26
|
-
default: boolean;
|
|
27
|
-
};
|
|
28
|
-
height: StringConstructor;
|
|
29
|
-
href: StringConstructor;
|
|
30
|
-
nav: BooleanConstructor;
|
|
31
|
-
label: StringConstructor;
|
|
32
|
-
offset: {
|
|
33
|
-
type: NumberConstructor;
|
|
34
|
-
default: number;
|
|
35
|
-
};
|
|
36
|
-
rotate: {
|
|
37
|
-
type: BooleanConstructor;
|
|
38
|
-
default: boolean;
|
|
39
|
-
};
|
|
40
|
-
split: {
|
|
41
|
-
type: BooleanConstructor;
|
|
42
|
-
default: boolean;
|
|
43
|
-
};
|
|
44
|
-
to: (StringConstructor | ObjectConstructor)[];
|
|
45
|
-
type: {
|
|
46
|
-
type: StringConstructor;
|
|
47
|
-
default: string;
|
|
48
|
-
};
|
|
49
|
-
width: StringConstructor;
|
|
50
|
-
}, unknown, {
|
|
51
|
-
popper: null;
|
|
52
|
-
triggerAnimation: boolean;
|
|
53
|
-
expanded: boolean;
|
|
54
|
-
}, {
|
|
55
|
-
scope(): {
|
|
56
|
-
placement: any;
|
|
57
|
-
variantClassPrefix: any;
|
|
58
|
-
sizeableClassPrefix: any;
|
|
59
|
-
classes: any;
|
|
60
|
-
actionClasses: any;
|
|
61
|
-
toggleStyle: any;
|
|
62
|
-
toggleClasses: any;
|
|
63
|
-
focus: any;
|
|
64
|
-
queryFocusable: any;
|
|
65
|
-
isFocusable: any;
|
|
66
|
-
toggle: any;
|
|
67
|
-
show: any;
|
|
68
|
-
hide: any;
|
|
69
|
-
onBlur: any;
|
|
70
|
-
onClickItem: any;
|
|
71
|
-
onClickToggle: any;
|
|
72
|
-
expanded: any;
|
|
73
|
-
};
|
|
74
|
-
placement(): "left" | "right" | "top" | "bottom";
|
|
75
|
-
variantClassPrefix(): string;
|
|
76
|
-
sizeableClassPrefix(): "btn";
|
|
77
|
-
classes(): {
|
|
78
|
-
dropdown: any;
|
|
79
|
-
dropup: any;
|
|
80
|
-
dropright: any;
|
|
81
|
-
dropleft: any;
|
|
82
|
-
'icon-only': boolean;
|
|
83
|
-
'hide-caret': boolean;
|
|
84
|
-
expanded: any;
|
|
85
|
-
'rotate-90': any;
|
|
86
|
-
};
|
|
87
|
-
actionClasses(): any;
|
|
88
|
-
toggleStyle(): {
|
|
89
|
-
width: any;
|
|
90
|
-
height: any;
|
|
91
|
-
};
|
|
92
|
-
toggleClasses(): any;
|
|
93
|
-
}, {
|
|
94
|
-
focus(): void;
|
|
95
|
-
queryFocusable(): any;
|
|
96
|
-
isFocusable(element: any): boolean;
|
|
97
|
-
toggle(): void;
|
|
98
|
-
show(): void;
|
|
99
|
-
hide(): void;
|
|
100
|
-
onBlur(e: any): void;
|
|
101
|
-
onClickDocument(e: Event): void;
|
|
102
|
-
onClickItem(e: any): void;
|
|
103
|
-
onClickToggle(e: any): void;
|
|
104
|
-
onKeydown(e: any): void;
|
|
105
|
-
}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
|
106
|
-
active: BooleanConstructor;
|
|
107
|
-
block: BooleanConstructor;
|
|
108
|
-
componentPrefix: {
|
|
109
|
-
type: StringConstructor;
|
|
110
|
-
default: string;
|
|
111
|
-
};
|
|
112
|
-
disabled: BooleanConstructor;
|
|
113
|
-
label: StringConstructor;
|
|
114
|
-
outline: BooleanConstructor;
|
|
115
|
-
tag: StringConstructor;
|
|
116
|
-
variant: {
|
|
117
|
-
type: StringConstructor;
|
|
118
|
-
default: string;
|
|
119
|
-
};
|
|
120
|
-
}, unknown, unknown, {
|
|
121
|
-
classes(): string | undefined[];
|
|
122
|
-
component(): string;
|
|
123
|
-
variantClassPrefix(): string;
|
|
124
|
-
}, {}, import("vue").DefineComponent<{
|
|
125
|
-
componentPrefix: StringConstructor;
|
|
126
|
-
size: StringConstructor;
|
|
127
|
-
sizePrefix: StringConstructor;
|
|
128
|
-
}, unknown, unknown, {
|
|
129
|
-
sizeableClassPrefix(): string | undefined;
|
|
130
|
-
hasSizeablePrefix(): boolean;
|
|
131
|
-
sizeableClass(): string;
|
|
132
|
-
}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
133
|
-
componentPrefix: StringConstructor;
|
|
134
|
-
size: StringConstructor;
|
|
135
|
-
sizePrefix: StringConstructor;
|
|
136
|
-
}>>, {}> | {
|
|
137
|
-
props: {
|
|
138
|
-
componentPrefix: StringConstructor;
|
|
139
|
-
variant: StringConstructor;
|
|
140
|
-
variantPrefix: StringConstructor;
|
|
141
|
-
};
|
|
142
|
-
computed: {
|
|
143
|
-
variantClassPrefix(): string | undefined;
|
|
144
|
-
hasVariantPrefix(): boolean;
|
|
145
|
-
variantClass(): string;
|
|
146
|
-
};
|
|
147
|
-
}, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
148
|
-
active: BooleanConstructor;
|
|
149
|
-
block: BooleanConstructor;
|
|
150
|
-
componentPrefix: {
|
|
151
|
-
type: StringConstructor;
|
|
152
|
-
default: string;
|
|
153
|
-
};
|
|
154
|
-
disabled: BooleanConstructor;
|
|
155
|
-
label: StringConstructor;
|
|
156
|
-
outline: BooleanConstructor;
|
|
157
|
-
tag: StringConstructor;
|
|
158
|
-
variant: {
|
|
159
|
-
type: StringConstructor;
|
|
160
|
-
default: string;
|
|
161
|
-
};
|
|
162
|
-
}>>, {
|
|
163
|
-
componentPrefix: string;
|
|
164
|
-
active: boolean;
|
|
165
|
-
block: boolean;
|
|
166
|
-
disabled: boolean;
|
|
167
|
-
outline: boolean;
|
|
168
|
-
variant: string;
|
|
169
|
-
}>, ("toggle" | "show" | "click-toggle" | "hide")[], "toggle" | "show" | "click-toggle" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
170
|
-
align: {
|
|
171
|
-
type: StringConstructor;
|
|
172
|
-
default: string;
|
|
173
|
-
validate(value: any): boolean;
|
|
174
|
-
};
|
|
175
|
-
animated: {
|
|
176
|
-
type: BooleanConstructor;
|
|
177
|
-
default: boolean;
|
|
178
|
-
};
|
|
179
|
-
buttonClass: (StringConstructor | ObjectConstructor)[];
|
|
180
|
-
caret: {
|
|
181
|
-
type: BooleanConstructor;
|
|
182
|
-
default: boolean;
|
|
183
|
-
};
|
|
184
|
-
dropup: {
|
|
185
|
-
type: BooleanConstructor;
|
|
186
|
-
default: boolean;
|
|
187
|
-
};
|
|
188
|
-
dropright: {
|
|
189
|
-
type: BooleanConstructor;
|
|
190
|
-
default: boolean;
|
|
191
|
-
};
|
|
192
|
-
dropleft: {
|
|
193
|
-
type: BooleanConstructor;
|
|
194
|
-
default: boolean;
|
|
195
|
-
};
|
|
196
|
-
height: StringConstructor;
|
|
197
|
-
href: StringConstructor;
|
|
198
|
-
nav: BooleanConstructor;
|
|
199
|
-
label: StringConstructor;
|
|
200
|
-
offset: {
|
|
201
|
-
type: NumberConstructor;
|
|
202
|
-
default: number;
|
|
203
|
-
};
|
|
204
|
-
rotate: {
|
|
205
|
-
type: BooleanConstructor;
|
|
206
|
-
default: boolean;
|
|
207
|
-
};
|
|
208
|
-
split: {
|
|
209
|
-
type: BooleanConstructor;
|
|
210
|
-
default: boolean;
|
|
211
|
-
};
|
|
212
|
-
to: (StringConstructor | ObjectConstructor)[];
|
|
213
|
-
type: {
|
|
214
|
-
type: StringConstructor;
|
|
215
|
-
default: string;
|
|
216
|
-
};
|
|
217
|
-
width: StringConstructor;
|
|
218
|
-
}>> & {
|
|
219
|
-
onToggle?: ((...args: any[]) => any) | undefined;
|
|
220
|
-
onShow?: ((...args: any[]) => any) | undefined;
|
|
221
|
-
"onClick-toggle"?: ((...args: any[]) => any) | undefined;
|
|
222
|
-
onHide?: ((...args: any[]) => any) | undefined;
|
|
223
|
-
}, {
|
|
224
|
-
type: string;
|
|
225
|
-
split: boolean;
|
|
226
|
-
align: string;
|
|
227
|
-
animated: boolean;
|
|
228
|
-
caret: boolean;
|
|
229
|
-
dropup: boolean;
|
|
230
|
-
dropright: boolean;
|
|
231
|
-
dropleft: boolean;
|
|
232
|
-
nav: boolean;
|
|
233
|
-
offset: number;
|
|
234
|
-
rotate: boolean;
|
|
235
|
-
}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
|
|
236
|
-
export default _sfc_main;
|