@vue-interface/btn-dropdown 2.0.0-beta.22 → 2.0.0-beta.24

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.
Files changed (10) hide show
  1. package/dist/btn-dropdown.js +104 -97
  2. package/dist/btn-dropdown.js.map +1 -1
  3. package/dist/btn-dropdown.umd.cjs +1 -1
  4. package/dist/btn-dropdown.umd.cjs.map +1 -1
  5. package/dist/src/BtnDropdown.vue.d.ts +28 -29
  6. package/dist/src/BtnDropdownAction.vue.d.ts +4 -4
  7. package/dist/src/BtnDropdownSingle.vue.d.ts +216 -31
  8. package/dist/src/BtnDropdownSplit.vue.d.ts +166 -28
  9. package/dist/src/dropdown.d.ts +5 -5
  10. package/package.json +21 -21
package/dist/btn-dropdown.umd.cjs.map CHANGED
@@ -1 +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, ComputedRef, 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: MouseEvent): void,\n (name: 'blur', e: FocusEvent): 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 button = ref<Element|ComponentPublicInstance>();\n const target = ref<Element|ComponentPublicInstance>();\n const menu = ref<Element|ComponentPublicInstance>();\n\n const $button: any = (ref) => {\n button.value = ref;\n }\n\n const buttonEl = computed(() => \n button.value instanceof Element\n ? button.value\n : button.value?.$el\n );\n\n const targetEl = computed(() => \n target.value instanceof Element\n ? target.value\n : target.value.$el\n );\n\n const menuEl = computed(() => \n menu.value instanceof Element\n ? menu.value\n : menu.value.$el\n );\n\n const classes = computed(() => ({\n [props.size]: !!props.size, \n 'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n 'dropup': props.dropup,\n 'dropright': props.dropright,\n 'dropleft': props.dropleft,\n 'expanded': expanded.value,\n }));\n\n const actionClasses = computed(() => ({\n [props.variant]: !!props.variant,\n ...buttonsClasses.value,\n }));\n\n const buttonsClasses: ComputedRef<{\n btn: true,\n [x: string]: boolean\n }> = computed(() => {\n const buttonClass = typeof props.buttonClass === 'object'\n ? props.buttonClass\n : {[props.buttonClass]: !!props.buttonClass};\n \n return {\n btn: true,\n ...buttonClass\n };\n });\n\n const toggleClasses = computed(() => ({\n 'active': props.active,\n 'dropdown-toggle': true,\n 'dropdown-toggle-split': props.split,\n [props.variant]: !!props.variant,\n ...buttonsClasses.value,\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 buttonEl.value?.focus();\n \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: FocusEvent) {\n emit('blur', e);\n\n if(e.defaultPrevented) {\n return;\n }\n\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: MouseEvent) {\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 button,\n $button,\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 button,\n $button,\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=\"{ button, $button, expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n ref=\"button\"\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 <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';\nimport { BtnDropdownProps } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n click: [e: Event]\n}>();\n\nfunction onClick(e: Event) {\n return emit('click', e);\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=\"onClick\">\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","_renderSlot","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","button","target","menu","$button","buttonEl","computed","_a","targetEl","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"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"}
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, ComputedRef, 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: MouseEvent): void,\n (name: 'blur', e: FocusEvent): 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 button = ref<Element|ComponentPublicInstance>();\n const target = ref<Element|ComponentPublicInstance>();\n const menu = ref<Element|ComponentPublicInstance>();\n\n const $button: any = (ref) => {\n button.value = ref;\n }\n\n const buttonEl = computed<HTMLButtonElement|undefined>(() => \n button.value instanceof Element\n ? button.value\n : button.value?.$el\n );\n\n const targetEl = computed<Element|undefined>(() => \n target.value instanceof Element\n ? target.value\n : target.value?.$el\n );\n\n const menuEl = computed<Element|undefined>(() => \n menu.value instanceof Element\n ? menu.value\n : menu.value?.$el\n );\n\n const classes = computed(() => ({\n [props.size]: !!props.size, \n 'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n 'dropup': props.dropup,\n 'dropright': props.dropright,\n 'dropleft': props.dropleft,\n 'expanded': expanded.value,\n }));\n\n const actionClasses = computed(() => ({\n [props.variant]: !!props.variant,\n ...buttonsClasses.value,\n }));\n\n const buttonsClasses: ComputedRef<{\n btn: true,\n [x: string]: boolean\n }> = computed(() => {\n const buttonClass = typeof props.buttonClass === 'object'\n ? props.buttonClass\n : {[props.buttonClass]: !!props.buttonClass};\n \n return {\n btn: true,\n ...buttonClass\n };\n });\n\n const toggleClasses = computed(() => ({\n 'active': props.active,\n 'dropdown-toggle': true,\n 'dropdown-toggle-split': props.split,\n [props.variant]: !!props.variant,\n ...buttonsClasses.value,\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 buttonEl.value?.focus();\n \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: FocusEvent) {\n emit('blur', e);\n\n if(e.defaultPrevented) {\n return;\n }\n\n if(menuEl.value && !menuEl.value?.contains((e as any).relatedTarget) || !menuEl.value?.contains((e as any).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: MouseEvent) {\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 button,\n $button,\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 button,\n $button,\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=\"{ button, $button, expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n <BtnDropdownAction\n :id=\"($attrs.id as string)\"\n ref=\"button\"\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 <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';\nimport { BtnDropdownProps } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n click: [e: Event]\n}>();\n\nfunction onClick(e: Event) {\n return emit('click', e);\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=\"onClick\">\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","_renderSlot","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","button","target","menu","$button","buttonEl","computed","_a","targetEl","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","_b","onClickItem","onClickToggle","onKeydown","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"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"}
package/dist/src/BtnDropdown.vue.d.ts CHANGED
@@ -1,35 +1,34 @@
1
1
  import { BtnDropdownProps } from './dropdown.js';
2
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
- click: (e: Event) => void;
4
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>>> & {
5
- onClick?: (e: Event) => any;
6
- }, {}, {}>, {
7
- icon?(_: {}): any;
8
- label?(_: {}): any;
9
- button?(_: {
10
- button: Element | import("vue").ComponentPublicInstance;
11
- $button: any;
12
- expanded: boolean;
13
- target: Element | import("vue").ComponentPublicInstance;
14
- toggle: () => void;
15
- onBlur: (e: FocusEvent) => void;
16
- onClickToggle: (e: MouseEvent) => void;
17
- onClickItem: (e: any) => void;
18
- onKeydown: (e: KeyboardEvent) => void;
19
- }): any;
20
- split?(_: any): any;
21
- default?(_: {}): any;
22
- }>;
23
- export default _default;
24
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
25
- type __VLS_TypePropsToRuntimeProps<T> = {
26
- [K in keyof T]-?: {} extends Pick<T, K> ? {
27
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
28
- } : {
29
- type: import('vue').PropType<T[K]>;
30
- required: true;
2
+ declare function __VLS_template(): {
3
+ attrs: Partial<{}>;
4
+ slots: {
5
+ icon?(_: {}): any;
6
+ label?(_: {}): any;
7
+ button?(_: {
8
+ button: Element | import("vue").ComponentPublicInstance;
9
+ $button: any;
10
+ expanded: boolean;
11
+ target: Element | import("vue").ComponentPublicInstance;
12
+ toggle: () => void;
13
+ onBlur: (e: FocusEvent) => void;
14
+ onClickToggle: (e: MouseEvent) => void;
15
+ onClickItem: (e: any) => void;
16
+ onKeydown: (e: KeyboardEvent) => void;
17
+ }): any;
18
+ split?(_: any): any;
19
+ default?(_: {}): any;
31
20
  };
21
+ refs: {};
22
+ rootEl: any;
32
23
  };
24
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
25
+ declare const __VLS_component: import("vue").DefineComponent<BtnDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
26
+ click: (e: Event) => any;
27
+ }, string, import("vue").PublicProps, Readonly<BtnDropdownProps> & Readonly<{
28
+ onClick?: (e: Event) => any;
29
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
30
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
31
+ export default _default;
33
32
  type __VLS_WithTemplateSlots<T, S> = T & {
34
33
  new (): {
35
34
  $slots: S;
package/dist/src/BtnDropdownAction.vue.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const _default: import("vue").DefineComponent<{
1
+ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
2
2
  expanded: {
3
3
  type: BooleanConstructor;
4
4
  default: boolean;
@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
15
15
  type: (StringConstructor | ObjectConstructor)[];
16
16
  default: any;
17
17
  };
18
- }, unknown, unknown, {
18
+ }>, {}, {}, {
19
19
  is(): "router-link" | "a" | "button";
20
20
  }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
21
21
  expanded: {
@@ -34,10 +34,10 @@ declare const _default: import("vue").DefineComponent<{
34
34
  type: (StringConstructor | ObjectConstructor)[];
35
35
  default: any;
36
36
  };
37
- }>>, {
37
+ }>> & Readonly<{}>, {
38
38
  expanded: boolean;
39
39
  id: string;
40
40
  href: string;
41
41
  to: string | Record<string, any>;
42
- }, {}>;
42
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
43
43
  export default _default;
package/dist/src/BtnDropdownSingle.vue.d.ts CHANGED
@@ -1,38 +1,223 @@
1
1
  import { BtnDropdownProps } from './dropdown.js';
2
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
- click: (e: PointerEvent) => void;
4
- "click-toggle": (e: MouseEvent) => void;
5
- blur: (e: FocusEvent) => void;
6
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>>> & {
7
- onBlur?: (e: FocusEvent) => any;
2
+ declare function __VLS_template(): {
3
+ attrs: Partial<{}>;
4
+ slots: {
5
+ button?(_: {
6
+ button: Element | import("vue").ComponentPublicInstance;
7
+ $button: any;
8
+ expanded: boolean;
9
+ target: Element | import("vue").ComponentPublicInstance;
10
+ toggle: () => void;
11
+ onBlur: (e: FocusEvent) => void;
12
+ onClickToggle: (e: MouseEvent) => void;
13
+ onClickItem: (e: any) => void;
14
+ onKeydown: (e: KeyboardEvent) => void;
15
+ }): any;
16
+ icon?(_: {}): any;
17
+ label?(_: {}): any;
18
+ default?(_: {}): any;
19
+ };
20
+ refs: {
21
+ target: {
22
+ $: import("vue").ComponentInternalInstance;
23
+ $data: {};
24
+ $props: Partial<{}> & Omit<{
25
+ readonly size?: string;
26
+ readonly toggle?: boolean;
27
+ readonly vertical?: boolean;
28
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
29
+ $attrs: {
30
+ [x: string]: unknown;
31
+ };
32
+ $refs: {
33
+ [x: string]: unknown;
34
+ };
35
+ $slots: Readonly<{
36
+ [name: string]: import("vue").Slot<any>;
37
+ }>;
38
+ $root: import("vue").ComponentPublicInstance | null;
39
+ $parent: import("vue").ComponentPublicInstance | null;
40
+ $host: Element | null;
41
+ $emit: (event: string, ...args: any[]) => void;
42
+ $el: any;
43
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
44
+ size: {
45
+ type: import("vue").PropType<string>;
46
+ };
47
+ toggle: {
48
+ type: import("vue").PropType<boolean>;
49
+ };
50
+ vertical: {
51
+ type: import("vue").PropType<boolean>;
52
+ };
53
+ }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
54
+ beforeCreate?: (() => void) | (() => void)[];
55
+ created?: (() => void) | (() => void)[];
56
+ beforeMount?: (() => void) | (() => void)[];
57
+ mounted?: (() => void) | (() => void)[];
58
+ beforeUpdate?: (() => void) | (() => void)[];
59
+ updated?: (() => void) | (() => void)[];
60
+ activated?: (() => void) | (() => void)[];
61
+ deactivated?: (() => void) | (() => void)[];
62
+ beforeDestroy?: (() => void) | (() => void)[];
63
+ beforeUnmount?: (() => void) | (() => void)[];
64
+ destroyed?: (() => void) | (() => void)[];
65
+ unmounted?: (() => void) | (() => void)[];
66
+ renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
67
+ renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
68
+ errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
69
+ };
70
+ $forceUpdate: () => void;
71
+ $nextTick: typeof import("vue").nextTick;
72
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
73
+ } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
74
+ size: {
75
+ type: import("vue").PropType<string>;
76
+ };
77
+ toggle: {
78
+ type: import("vue").PropType<boolean>;
79
+ };
80
+ vertical: {
81
+ type: import("vue").PropType<boolean>;
82
+ };
83
+ }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
84
+ $slots: {
85
+ default?(_: {}): any;
86
+ };
87
+ };
88
+ button: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
89
+ expanded: {
90
+ type: BooleanConstructor;
91
+ default: boolean;
92
+ };
93
+ id: {
94
+ type: StringConstructor;
95
+ default: any;
96
+ };
97
+ href: {
98
+ type: StringConstructor;
99
+ default: any;
100
+ };
101
+ to: {
102
+ type: (StringConstructor | ObjectConstructor)[];
103
+ default: any;
104
+ };
105
+ }>> & Readonly<{}>, {}, {}, {
106
+ is(): "router-link" | "a" | "button";
107
+ }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
108
+ expanded: boolean;
109
+ id: string;
110
+ href: string;
111
+ to: string | Record<string, any>;
112
+ }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
113
+ P: {};
114
+ B: {};
115
+ D: {};
116
+ C: {};
117
+ M: {};
118
+ Defaults: {};
119
+ }, Readonly<import("vue").ExtractPropTypes<{
120
+ expanded: {
121
+ type: BooleanConstructor;
122
+ default: boolean;
123
+ };
124
+ id: {
125
+ type: StringConstructor;
126
+ default: any;
127
+ };
128
+ href: {
129
+ type: StringConstructor;
130
+ default: any;
131
+ };
132
+ to: {
133
+ type: (StringConstructor | ObjectConstructor)[];
134
+ default: any;
135
+ };
136
+ }>> & Readonly<{}>, {}, {}, {
137
+ is(): "router-link" | "a" | "button";
138
+ }, {}, {
139
+ expanded: boolean;
140
+ id: string;
141
+ href: string;
142
+ to: string | Record<string, any>;
143
+ }>;
144
+ menu: {
145
+ $: import("vue").ComponentInternalInstance;
146
+ $data: {};
147
+ $props: Partial<{}> & Omit<{
148
+ readonly align: "left" | "right";
149
+ readonly show?: boolean;
150
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
151
+ $attrs: {
152
+ [x: string]: unknown;
153
+ };
154
+ $refs: {
155
+ [x: string]: unknown;
156
+ };
157
+ $slots: Readonly<{
158
+ [name: string]: import("vue").Slot<any>;
159
+ }>;
160
+ $root: import("vue").ComponentPublicInstance | null;
161
+ $parent: import("vue").ComponentPublicInstance | null;
162
+ $host: Element | null;
163
+ $emit: (event: string, ...args: any[]) => void;
164
+ $el: any;
165
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
166
+ align: {
167
+ type: import("vue").PropType<"left" | "right">;
168
+ required: true;
169
+ };
170
+ show: {
171
+ type: import("vue").PropType<boolean>;
172
+ };
173
+ }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
174
+ beforeCreate?: (() => void) | (() => void)[];
175
+ created?: (() => void) | (() => void)[];
176
+ beforeMount?: (() => void) | (() => void)[];
177
+ mounted?: (() => void) | (() => void)[];
178
+ beforeUpdate?: (() => void) | (() => void)[];
179
+ updated?: (() => void) | (() => void)[];
180
+ activated?: (() => void) | (() => void)[];
181
+ deactivated?: (() => void) | (() => void)[];
182
+ beforeDestroy?: (() => void) | (() => void)[];
183
+ beforeUnmount?: (() => void) | (() => void)[];
184
+ destroyed?: (() => void) | (() => void)[];
185
+ unmounted?: (() => void) | (() => void)[];
186
+ renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
187
+ renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
188
+ errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
189
+ };
190
+ $forceUpdate: () => void;
191
+ $nextTick: typeof import("vue").nextTick;
192
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
193
+ } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
194
+ align: {
195
+ type: import("vue").PropType<"left" | "right">;
196
+ required: true;
197
+ };
198
+ show: {
199
+ type: import("vue").PropType<boolean>;
200
+ };
201
+ }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
202
+ $slots: {
203
+ default?(_: {}): any;
204
+ };
205
+ };
206
+ };
207
+ rootEl: any;
208
+ };
209
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
210
+ declare const __VLS_component: import("vue").DefineComponent<BtnDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
211
+ click: (e: PointerEvent) => any;
212
+ "click-toggle": (e: MouseEvent) => any;
213
+ blur: (e: FocusEvent) => any;
214
+ }, string, import("vue").PublicProps, Readonly<BtnDropdownProps> & Readonly<{
8
215
  onClick?: (e: PointerEvent) => any;
9
216
  "onClick-toggle"?: (e: MouseEvent) => any;
10
- }, {}, {}>, {
11
- button?(_: {
12
- button: Element | import("vue").ComponentPublicInstance;
13
- $button: any;
14
- expanded: boolean;
15
- target: Element | import("vue").ComponentPublicInstance;
16
- toggle: () => void;
17
- onBlur: (e: FocusEvent) => void;
18
- onClickToggle: (e: MouseEvent) => void;
19
- onClickItem: (e: any) => void;
20
- onKeydown: (e: KeyboardEvent) => void;
21
- }): any;
22
- icon?(_: {}): any;
23
- label?(_: {}): any;
24
- default?(_: {}): any;
25
- }>;
217
+ onBlur?: (e: FocusEvent) => any;
218
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
219
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
26
220
  export default _default;
27
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
28
- type __VLS_TypePropsToRuntimeProps<T> = {
29
- [K in keyof T]-?: {} extends Pick<T, K> ? {
30
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
31
- } : {
32
- type: import('vue').PropType<T[K]>;
33
- required: true;
34
- };
35
- };
36
221
  type __VLS_WithTemplateSlots<T, S> = T & {
37
222
  new (): {
38
223
  $slots: S;
package/dist/src/BtnDropdownSplit.vue.d.ts CHANGED
@@ -1,35 +1,173 @@
1
1
  import { BtnDropdownProps } from './dropdown.js';
2
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
- click: (e: PointerEvent) => void;
4
- "click-toggle": (e: MouseEvent) => void;
5
- blur: (e: FocusEvent) => void;
6
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>>> & {
7
- onBlur?: (e: FocusEvent) => any;
2
+ declare function __VLS_template(): {
3
+ attrs: Partial<{}>;
4
+ slots: {
5
+ button?(_: {
6
+ expanded: boolean;
7
+ onBlur: (e: FocusEvent) => void;
8
+ onClickToggle: (e: MouseEvent) => void;
9
+ onClickItem: (e: any) => void;
10
+ onKeydown: (e: KeyboardEvent) => void;
11
+ }): any;
12
+ button?(_: {
13
+ expanded: boolean;
14
+ onBlur: (e: FocusEvent) => void;
15
+ onClickToggle: (e: MouseEvent) => void;
16
+ onClickItem: (e: any) => void;
17
+ onKeydown: (e: KeyboardEvent) => void;
18
+ }): any;
19
+ icon?(_: {}): any;
20
+ icon?(_: {}): any;
21
+ label?(_: {}): any;
22
+ label?(_: {}): any;
23
+ split?(_: {}): any;
24
+ default?(_: {}): any;
25
+ };
26
+ refs: {
27
+ target: {
28
+ $: import("vue").ComponentInternalInstance;
29
+ $data: {};
30
+ $props: Partial<{}> & Omit<{
31
+ readonly size?: string;
32
+ readonly toggle?: boolean;
33
+ readonly vertical?: boolean;
34
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
35
+ $attrs: {
36
+ [x: string]: unknown;
37
+ };
38
+ $refs: {
39
+ [x: string]: unknown;
40
+ };
41
+ $slots: Readonly<{
42
+ [name: string]: import("vue").Slot<any>;
43
+ }>;
44
+ $root: import("vue").ComponentPublicInstance | null;
45
+ $parent: import("vue").ComponentPublicInstance | null;
46
+ $host: Element | null;
47
+ $emit: (event: string, ...args: any[]) => void;
48
+ $el: any;
49
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
50
+ size: {
51
+ type: import("vue").PropType<string>;
52
+ };
53
+ toggle: {
54
+ type: import("vue").PropType<boolean>;
55
+ };
56
+ vertical: {
57
+ type: import("vue").PropType<boolean>;
58
+ };
59
+ }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
60
+ beforeCreate?: (() => void) | (() => void)[];
61
+ created?: (() => void) | (() => void)[];
62
+ beforeMount?: (() => void) | (() => void)[];
63
+ mounted?: (() => void) | (() => void)[];
64
+ beforeUpdate?: (() => void) | (() => void)[];
65
+ updated?: (() => void) | (() => void)[];
66
+ activated?: (() => void) | (() => void)[];
67
+ deactivated?: (() => void) | (() => void)[];
68
+ beforeDestroy?: (() => void) | (() => void)[];
69
+ beforeUnmount?: (() => void) | (() => void)[];
70
+ destroyed?: (() => void) | (() => void)[];
71
+ unmounted?: (() => void) | (() => void)[];
72
+ renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
73
+ renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
74
+ errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
75
+ };
76
+ $forceUpdate: () => void;
77
+ $nextTick: typeof import("vue").nextTick;
78
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
79
+ } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
80
+ size: {
81
+ type: import("vue").PropType<string>;
82
+ };
83
+ toggle: {
84
+ type: import("vue").PropType<boolean>;
85
+ };
86
+ vertical: {
87
+ type: import("vue").PropType<boolean>;
88
+ };
89
+ }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
90
+ $slots: {
91
+ default?(_: {}): any;
92
+ };
93
+ };
94
+ menu: {
95
+ $: import("vue").ComponentInternalInstance;
96
+ $data: {};
97
+ $props: Partial<{}> & Omit<{
98
+ readonly align: "left" | "right";
99
+ readonly show?: boolean;
100
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
101
+ $attrs: {
102
+ [x: string]: unknown;
103
+ };
104
+ $refs: {
105
+ [x: string]: unknown;
106
+ };
107
+ $slots: Readonly<{
108
+ [name: string]: import("vue").Slot<any>;
109
+ }>;
110
+ $root: import("vue").ComponentPublicInstance | null;
111
+ $parent: import("vue").ComponentPublicInstance | null;
112
+ $host: Element | null;
113
+ $emit: (event: string, ...args: any[]) => void;
114
+ $el: any;
115
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
116
+ align: {
117
+ type: import("vue").PropType<"left" | "right">;
118
+ required: true;
119
+ };
120
+ show: {
121
+ type: import("vue").PropType<boolean>;
122
+ };
123
+ }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
124
+ beforeCreate?: (() => void) | (() => void)[];
125
+ created?: (() => void) | (() => void)[];
126
+ beforeMount?: (() => void) | (() => void)[];
127
+ mounted?: (() => void) | (() => void)[];
128
+ beforeUpdate?: (() => void) | (() => void)[];
129
+ updated?: (() => void) | (() => void)[];
130
+ activated?: (() => void) | (() => void)[];
131
+ deactivated?: (() => void) | (() => void)[];
132
+ beforeDestroy?: (() => void) | (() => void)[];
133
+ beforeUnmount?: (() => void) | (() => void)[];
134
+ destroyed?: (() => void) | (() => void)[];
135
+ unmounted?: (() => void) | (() => void)[];
136
+ renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
137
+ renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
138
+ errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
139
+ };
140
+ $forceUpdate: () => void;
141
+ $nextTick: typeof import("vue").nextTick;
142
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
143
+ } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
144
+ align: {
145
+ type: import("vue").PropType<"left" | "right">;
146
+ required: true;
147
+ };
148
+ show: {
149
+ type: import("vue").PropType<boolean>;
150
+ };
151
+ }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
152
+ $slots: {
153
+ default?(_: {}): any;
154
+ };
155
+ };
156
+ };
157
+ rootEl: any;
158
+ };
159
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
160
+ declare const __VLS_component: import("vue").DefineComponent<BtnDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
161
+ click: (e: PointerEvent) => any;
162
+ "click-toggle": (e: MouseEvent) => any;
163
+ blur: (e: FocusEvent) => any;
164
+ }, string, import("vue").PublicProps, Readonly<BtnDropdownProps> & Readonly<{
8
165
  onClick?: (e: PointerEvent) => any;
9
166
  "onClick-toggle"?: (e: MouseEvent) => any;
10
- }, {}, {}>, {
11
- button?(_: {
12
- expanded: boolean;
13
- onBlur: (e: FocusEvent) => void;
14
- onClickToggle: (e: MouseEvent) => void;
15
- onClickItem: (e: any) => void;
16
- onKeydown: (e: KeyboardEvent) => void;
17
- }): any;
18
- icon?(_: {}): any;
19
- label?(_: {}): any;
20
- split?(_: {}): any;
21
- default?(_: {}): any;
22
- }>;
167
+ onBlur?: (e: FocusEvent) => any;
168
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
169
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
23
170
  export default _default;
24
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
25
- type __VLS_TypePropsToRuntimeProps<T> = {
26
- [K in keyof T]-?: {} extends Pick<T, K> ? {
27
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
28
- } : {
29
- type: import('vue').PropType<T[K]>;
30
- required: true;
31
- };
32
- };
33
171
  type __VLS_WithTemplateSlots<T, S> = T & {
34
172
  new (): {
35
173
  $slots: S;