@vue-interface/btn-dropdown 2.0.0-beta.17 → 2.0.0-beta.18
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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as M, openBlock as I, createBlock as
|
|
1
|
+
import { defineComponent as M, openBlock as I, createBlock as P, resolveDynamicComponent as F, mergeProps as E, withCtx as u, renderSlot as a, ref as S, computed as B, onBeforeMount as Y, unref as e, normalizeClass as C, normalizeProps as T, guardReactiveProps as A, createVNode as $, createTextVNode as D, toDisplayString as z, withKeys as j, withModifiers as H, createCommentVNode as q, createElementVNode as Z, useSlots as _, createSlots as x } from "vue";
|
|
2
2
|
import { BtnGroup as N } from "@vue-interface/btn-group";
|
|
3
3
|
import { DropdownMenu as L } from "@vue-interface/dropdown-menu";
|
|
4
4
|
import { createPopper as ee } from "@popperjs/core";
|
|
@@ -33,7 +33,7 @@ const te = M({
|
|
|
33
33
|
return r;
|
|
34
34
|
};
|
|
35
35
|
function ne(t, c, r, p, s, g) {
|
|
36
|
-
return I(),
|
|
36
|
+
return I(), P(F(t.is), E({ id: t.id }, t.to ? { to: t.to } : { href: t.href }, {
|
|
37
37
|
"aria-haspopup": "true",
|
|
38
38
|
"aria-expanded": t.expanded,
|
|
39
39
|
type: t.is === "button" ? "button" : void 0
|
|
@@ -48,7 +48,7 @@ const V = /* @__PURE__ */ oe(te, [["render", ne]]);
|
|
|
48
48
|
function O(t, c) {
|
|
49
49
|
const r = S(!1), p = S(!1), s = S(), g = S(), n = S(), w = B(
|
|
50
50
|
() => g.value instanceof HTMLElement ? g.value : g.value.$el
|
|
51
|
-
),
|
|
51
|
+
), d = B(
|
|
52
52
|
() => n.value instanceof HTMLElement ? n.value : n.value.$el
|
|
53
53
|
), h = B(() => ({
|
|
54
54
|
[t.size]: !!t.size,
|
|
@@ -91,7 +91,7 @@ function O(t, c) {
|
|
|
91
91
|
// }
|
|
92
92
|
})), y = B(() => t.dropup ? "top" : t.dropleft ? "left" : t.dropright ? "right" : "bottom"), b = B(() => t.align && t.align === "right" ? "end" : "start");
|
|
93
93
|
function o() {
|
|
94
|
-
r.value = !0, s.value ? s.value.update() : s.value = ee(w.value,
|
|
94
|
+
r.value = !0, s.value ? s.value.update() : s.value = ee(w.value, d.value.querySelector(".dropdown-menu"), {
|
|
95
95
|
placement: `${y.value}-${b.value}`,
|
|
96
96
|
onFirstUpdate: () => {
|
|
97
97
|
p.value = !0;
|
|
@@ -113,30 +113,30 @@ function O(t, c) {
|
|
|
113
113
|
r.value ? l() : o();
|
|
114
114
|
}
|
|
115
115
|
function G() {
|
|
116
|
-
return
|
|
116
|
+
return d.value && d.value.querySelectorAll(
|
|
117
117
|
'label, input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
118
118
|
);
|
|
119
119
|
}
|
|
120
|
-
function R(
|
|
120
|
+
function R(i) {
|
|
121
121
|
const k = G();
|
|
122
122
|
for (const X in k)
|
|
123
|
-
if (
|
|
123
|
+
if (i === k[X])
|
|
124
124
|
return !0;
|
|
125
125
|
return !1;
|
|
126
126
|
}
|
|
127
|
-
function U(
|
|
128
|
-
c("blur",
|
|
127
|
+
function U(i) {
|
|
128
|
+
c("blur", i), !i.defaultPrevented && (d.value && !d.value.contains(i.relatedTarget) || !d.value.contains(i.relatedTarget)) && l();
|
|
129
129
|
}
|
|
130
|
-
function J(
|
|
131
|
-
R(
|
|
130
|
+
function J(i) {
|
|
131
|
+
R(i.target) || l();
|
|
132
132
|
}
|
|
133
|
-
function Q(
|
|
134
|
-
const k =
|
|
135
|
-
k.dispatchEvent(new Event("focus",
|
|
133
|
+
function Q(i) {
|
|
134
|
+
const k = i.target;
|
|
135
|
+
k.dispatchEvent(new Event("focus", i)), k.focus(), c("click-toggle", i), i.defaultPrevented || m();
|
|
136
136
|
}
|
|
137
|
-
function W(
|
|
137
|
+
function W(i) {
|
|
138
138
|
var k;
|
|
139
|
-
((k = w.value.parentElement) == null ? void 0 : k.lastElementChild) ===
|
|
139
|
+
((k = w.value.parentElement) == null ? void 0 : k.lastElementChild) === i.target && l();
|
|
140
140
|
}
|
|
141
141
|
return Y(() => {
|
|
142
142
|
s.value && s.value.destroy();
|
|
@@ -180,7 +180,7 @@ const le = /* @__PURE__ */ M({
|
|
|
180
180
|
classes: g,
|
|
181
181
|
expanded: n,
|
|
182
182
|
menu: w,
|
|
183
|
-
toggleClasses:
|
|
183
|
+
toggleClasses: d,
|
|
184
184
|
triggerAnimation: h,
|
|
185
185
|
toggle: K,
|
|
186
186
|
onBlur: f,
|
|
@@ -188,17 +188,17 @@ const le = /* @__PURE__ */ M({
|
|
|
188
188
|
onClickItem: y,
|
|
189
189
|
onKeydown: b
|
|
190
190
|
} = O(r, p);
|
|
191
|
-
return (o, l) => (I(),
|
|
191
|
+
return (o, l) => (I(), P(e(N), {
|
|
192
192
|
ref_key: "target",
|
|
193
193
|
ref: s,
|
|
194
194
|
class: C(e(g))
|
|
195
195
|
}, {
|
|
196
196
|
default: u(() => [
|
|
197
|
-
a(o.$slots, "button", T(
|
|
197
|
+
a(o.$slots, "button", T(A({ expanded: e(n), target: e(s), toggle: e(K), onBlur: e(f), onClickToggle: e(v), onClickItem: e(y), onKeydown: e(b) })), () => [
|
|
198
198
|
$(V, {
|
|
199
199
|
id: o.$attrs.id,
|
|
200
200
|
expanded: e(n),
|
|
201
|
-
class: C(e(
|
|
201
|
+
class: C(e(d)),
|
|
202
202
|
onBlur: e(f),
|
|
203
203
|
onClick: e(v)
|
|
204
204
|
}, {
|
|
@@ -256,7 +256,7 @@ const le = /* @__PURE__ */ M({
|
|
|
256
256
|
classes: g,
|
|
257
257
|
expanded: n,
|
|
258
258
|
menu: w,
|
|
259
|
-
target:
|
|
259
|
+
target: d,
|
|
260
260
|
toggleClasses: h,
|
|
261
261
|
triggerAnimation: K,
|
|
262
262
|
onBlur: f,
|
|
@@ -264,7 +264,7 @@ const le = /* @__PURE__ */ M({
|
|
|
264
264
|
onClickItem: y,
|
|
265
265
|
onKeydown: b
|
|
266
266
|
} = O(r, p);
|
|
267
|
-
return (o, l) => (I(),
|
|
267
|
+
return (o, l) => (I(), P(e(N), {
|
|
268
268
|
class: C([e(g), "btn-dropdown-split"])
|
|
269
269
|
}, {
|
|
270
270
|
default: u(() => [
|
|
@@ -286,7 +286,7 @@ const le = /* @__PURE__ */ M({
|
|
|
286
286
|
]),
|
|
287
287
|
$(e(N), {
|
|
288
288
|
ref_key: "target",
|
|
289
|
-
ref:
|
|
289
|
+
ref: d
|
|
290
290
|
}, {
|
|
291
291
|
default: u(() => [
|
|
292
292
|
a(o.$slots, "split", {}, () => [
|
|
@@ -365,18 +365,18 @@ const le = /* @__PURE__ */ M({
|
|
|
365
365
|
return p("click", n);
|
|
366
366
|
}
|
|
367
367
|
const g = _();
|
|
368
|
-
return (n, w) => (I(),
|
|
368
|
+
return (n, w) => (I(), P(F(n.split ? se : le), E(r, {
|
|
369
369
|
class: "btn-dropdown",
|
|
370
370
|
onClick: s
|
|
371
371
|
}), x({
|
|
372
372
|
icon: u(() => [
|
|
373
373
|
a(n.$slots, "icon")
|
|
374
374
|
]),
|
|
375
|
-
button: u((
|
|
376
|
-
a(n.$slots, "button", T(
|
|
375
|
+
button: u((d) => [
|
|
376
|
+
a(n.$slots, "button", T(A(d)))
|
|
377
377
|
]),
|
|
378
|
-
split: u((
|
|
379
|
-
a(n.$slots, "split", T(
|
|
378
|
+
split: u((d) => [
|
|
379
|
+
a(n.$slots, "split", T(A(d)))
|
|
380
380
|
]),
|
|
381
381
|
default: u(() => [
|
|
382
382
|
a(n.$slots, "default")
|
package/dist/btn-dropdown.js.map
CHANGED
|
@@ -1 +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: 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 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]: !!props.buttonClass\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: FocusEvent) {\n emit('blur', e);\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 const targetElement = e.target as HTMLElement;\n targetElement.dispatchEvent(new Event('focus', e));\n targetElement.focus();\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 <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 <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","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","targetElement","onKeydown","_a","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"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"}
|
|
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: 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 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]: !!props.buttonClass\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: 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 const targetElement = e.target as HTMLElement;\n targetElement.dispatchEvent(new Event('focus', e));\n targetElement.focus();\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 <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 <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","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","targetElement","onKeydown","_a","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
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,h,S,
|
|
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,h,S,P){"use strict";const T=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"}}}),D=(t,p)=>{const a=t.__vccOpts||t;for(const[d,l]of p)a[d]=l;return a};function V(t,p,a,d,l,c){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.is),e.mergeProps({id:t.id},t.to?{to:t.to}:{href:t.href},{"aria-haspopup":"true","aria-expanded":t.expanded,type:t.is==="button"?"button":void 0}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["id","aria-expanded","type"])}const $=D(T,[["render",V]]);function z(t,p){const a=e.ref(!1),d=e.ref(!1),l=e.ref(),c=e.ref(),o=e.ref(),B=e.computed(()=>c.value instanceof HTMLElement?c.value:c.value.$el),s=e.computed(()=>o.value instanceof HTMLElement?o.value:o.value.$el),b=e.computed(()=>({[t.size]:!!t.size,dropdown:t.dropdown||!(t.dropright||t.dropleft||t.dropup),dropup:t.dropup,dropright:t.dropright,dropleft:t.dropleft,expanded:a.value})),k=e.computed(()=>({[t.variant]:!!t.variant,...f.value})),f=e.computed(()=>typeof t.buttonClass=="object"?{btn:!0,...t.buttonClass}:{btn:!0,[t.buttonClass]:!!t.buttonClass}),m=e.computed(()=>({active:t.active,"dropdown-toggle":!0,"dropdown-toggle-split":t.split,[t.variant]:!!t.variant,...f.value})),C=e.computed(()=>t.dropup?"top":t.dropleft?"left":t.dropright?"right":"bottom"),y=e.computed(()=>t.align&&t.align==="right"?"end":"start");function n(){a.value=!0,l.value?l.value.update():l.value=P.createPopper(B.value,s.value.querySelector(".dropdown-menu"),{placement:`${C.value}-${y.value}`,onFirstUpdate:()=>{d.value=!0},modifiers:[{name:"offset",options:{offset:[0,t.offset??5]}}]})}function r(){a.value=!1}function g(){a.value?r():n()}function I(){return s.value&&s.value.querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')}function j(i){const w=I();for(const O in w)if(i===w[O])return!0;return!1}function q(i){p("blur",i),!i.defaultPrevented&&(s.value&&!s.value.contains(i.relatedTarget)||!s.value.contains(i.relatedTarget))&&r()}function x(i){j(i.target)||r()}function A(i){const w=i.target;w.dispatchEvent(new Event("focus",i)),w.focus(),p("click-toggle",i),i.defaultPrevented||g()}function F(i){var w;((w=B.value.parentElement)==null?void 0:w.lastElementChild)===i.target&&r()}return e.onBeforeMount(()=>{l.value&&l.value.destroy()}),{actionClasses:k,classes:b,expanded:a,menu:o,target:c,toggleClasses:m,triggerAnimation:d,hide:r,show:n,toggle:g,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","blur"],setup(t,{emit:p}){const a=t,d=p,{target:l,classes:c,expanded:o,menu:B,toggleClasses:s,triggerAnimation:b,toggle:k,onBlur:f,onClickToggle:m,onClickItem:C,onKeydown:y}=z(a,d);return(n,r)=>(e.openBlock(),e.createBlock(e.unref(h.BtnGroup),{ref_key:"target",ref:l,class:e.normalizeClass(e.unref(c))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"button",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(o),target:e.unref(l),toggle:e.unref(k),onBlur:e.unref(f),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode($,{id:n.$attrs.id,expanded:e.unref(o),class:e.normalizeClass(e.unref(s)),onBlur:e.unref(f),onClick:e.unref(m)},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"icon"),e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},8,["id","expanded","class","onBlur","onClick"])]),e.createVNode(e.unref(S.DropdownMenu),{id:n.$attrs.id,ref_key:"menu",ref:B,align:n.align,show:e.unref(o),class:e.normalizeClass({animated:e.unref(b)}),onBlur:e.unref(f),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(y),["tab"]),onMousedown:r[0]||(r[0]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"]))}}),K=["id","aria-expanded"],E=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","blur"],setup(t,{emit:p}){const a=t,d=p,{actionClasses:l,classes:c,expanded:o,menu:B,target:s,toggleClasses:b,triggerAnimation:k,onBlur:f,onClickToggle:m,onClickItem:C,onKeydown:y}=z(a,d);return(n,r)=>(e.openBlock(),e.createBlock(e.unref(h.BtnGroup),{class:e.normalizeClass([e.unref(c),"btn-dropdown-split"])},{default:e.withCtx(()=>[n.dropleft?e.createCommentVNode("",!0):e.renderSlot(n.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(o),onBlur:e.unref(f),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode($,{id:n.$attrs.id,expanded:e.unref(o),class:e.normalizeClass(e.unref(l)),onClick:r[0]||(r[0]=g=>d("click",g))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"icon"),e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},8,["id","expanded","class"])]),e.createVNode(e.unref(h.BtnGroup),{ref_key:"target",ref:s},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"split",{},()=>[e.createElementVNode("button",{id:n.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.unref(o),class:e.normalizeClass(e.unref(b)),onBlur:r[1]||(r[1]=(...g)=>e.unref(f)&&e.unref(f)(...g)),onClick:r[2]||(r[2]=(...g)=>e.unref(m)&&e.unref(m)(...g))},null,42,K)]),e.createVNode(e.unref(S.DropdownMenu),{ref_key:"menu",ref:B,align:n.align,show:e.unref(o),class:e.normalizeClass({animated:e.unref(k)}),onBlur:e.unref(f),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(y),["tab"]),onMousedown:r[3]||(r[3]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),n.dropleft?e.renderSlot(n.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(o),onBlur:e.unref(f),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode($,{id:n.$attrs.id,expanded:e.unref(o),class:e.normalizeClass(e.unref(l)),onClick:r[4]||(r[4]=g=>d("click",g))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"icon"),e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},8,["id","expanded","class"])]):e.createCommentVNode("",!0)]),_:3},8,["class"]))}}),M=e.defineComponent({__name:"BtnDropdown",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"],setup(t,{emit:p}){const a=t,d=p;function l(o){return d("click",o)}const c=e.useSlots();return(o,B)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.split?E:N),e.mergeProps(a,{class:"btn-dropdown",onClick:l}),e.createSlots({icon:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),button:e.withCtx(s=>[e.renderSlot(o.$slots,"button",e.normalizeProps(e.guardReactiveProps(s)))]),split:e.withCtx(s=>[e.renderSlot(o.$slots,"split",e.normalizeProps(e.guardReactiveProps(s)))]),default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:2},[o.label||e.unref(c).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=M,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=btn-dropdown.umd.cjs.map
|
|
@@ -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, 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 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]: !!props.buttonClass\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: FocusEvent) {\n emit('blur', e);\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 const targetElement = e.target as HTMLElement;\n targetElement.dispatchEvent(new Event('focus', e));\n targetElement.focus();\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 <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 <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","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","targetElement","onKeydown","_a","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"wfAGA,MAAAA,EAAeC,kBAAgB,CAC3B,MAAO,CACH,SAAU,CACN,KAAM,QACN,QAAS,EACb,EACA,GAAI,CACA,KAAM,OACN,QAAS,MACb,EACA,KAAM,CACF,KAAM,OACN,QAAS,MACb,EACA,GAAI,CACA,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,MACb,CACJ,EACA,SAAU,CACN,IAAK,CACD,OAAG,KAAK,GACG,cAGR,KAAK,KACG,IAGJ,QACX,CACJ,CACJ,CAAC,uEAQO,SAAAC,EAAcC,EAAMC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CACnB,OAAAC,EAAA,UAAA,EAAuBC,EAAA,YAAAC,0BAAAR,EAAA,EAAA,EAAAS,EAAA,WAAA,CAAA,GAAAT,EAAA,EAAA,EAAAA,EAAA,GAAA,CAAA,GAAAA,EAAA,EAAA,EAAA,CAAA,KAAAA,EAAA,MAAA,CACvB,gBAAQ,OAAA,gBAAAA,EAAA,SA7CjB,KAAAA,EAAA,KA8CQ,SAAQ,SAAA,MAAA,CAAR,EAAA,CAAA,QAAAU,EAAA,QAAA,IAAA,CA9CRC,aAAAX,EAAA,OAAA,SAAA,CAAA,CAAA,qECwBgB,SAAAY,EAA+EC,EAAcC,EAAa,CAChH,MAAAC,EAAWC,MAAI,EAAK,EACpBC,EAAmBD,MAAI,EAAK,EAC5BE,EAASF,EAAAA,MACTG,EAASH,EAAAA,MACTI,EAAOJ,EAAAA,MAEPK,EAAWC,EAAA,SAAS,IACtBH,EAAO,iBAAiB,YAClBA,EAAO,MACPA,EAAO,MAAM,GAAA,EAGjBI,EAASD,EAAA,SAAS,IACpBF,EAAK,iBAAiB,YAChBA,EAAK,MACLA,EAAK,MAAM,GAAA,EAGfI,EAAUF,EAAAA,SAAS,KAAO,CAC5B,CAACT,EAAM,IAAI,EAAG,CAAC,CAACA,EAAM,KAEtB,SAAYA,EAAM,UAAY,EAAEA,EAAM,WAAaA,EAAM,UAAYA,EAAM,QAC3E,OAAUA,EAAM,OAChB,UAAaA,EAAM,UACnB,SAAYA,EAAM,SAGlB,SAAYE,EAAS,KAEvB,EAAA,EAEIU,EAAgBH,EAAAA,SAAS,KAAO,CAElC,CAACT,EAAM,OAAO,EAAG,CAAC,CAACA,EAAM,QAEzB,GAAGa,EAAe,KACpB,EAAA,EAEIA,EAAiBJ,EAAAA,SAAS,IACzB,OAAOT,EAAM,aAAgB,SACrB,CAAE,IAAK,GAAM,GAAGA,EAAM,WAAY,EAGtC,CACH,IAAK,GACL,CAACA,EAAM,WAAW,EAAG,CAAC,CAACA,EAAM,WAAA,CAEpC,EAEKc,EAAgBL,EAAAA,SAAS,KAAO,CAClC,OAAUT,EAAM,OAChB,kBAAmB,GACnB,wBAAyBA,EAAM,MAE/B,CAACA,EAAM,OAAO,EAAG,CAAC,CAACA,EAAM,QAEzB,GAAGa,EAAe,KAiBpB,EAAA,EAEIE,EAAYN,EAAAA,SAAS,IACpBT,EAAM,OACE,MAGRA,EAAM,SACE,OAGRA,EAAM,UACE,QAGJ,QACV,EAEKgB,EAAQP,EAAAA,SAAS,IAChBT,EAAM,OACEA,EAAM,QAAU,QAAU,MAG9B,OACV,EAED,SAASiB,GAAO,CACZf,EAAS,MAAQ,GAEbG,EAAO,MAiBPA,EAAO,MAAM,SAhBNA,EAAA,MAAQa,eAAaV,EAAS,MAAOE,EAAO,MAAM,cAAc,gBAAgB,EAAG,CACtF,UAAW,GAAGK,EAAU,KAAK,IAAIC,EAAM,KAAK,GAC5C,cAAe,IAAM,CACjBZ,EAAiB,MAAQ,EAC7B,EACA,UAAW,CACP,CACI,KAAM,SACN,QAAS,CACL,OAAQ,CAAC,EAAGJ,EAAM,QAAU,CAAC,CACjC,CACJ,CACJ,CAAA,CACH,CAKT,CAEA,SAASmB,GAAO,CACZjB,EAAS,MAAQ,EACrB,CAEA,SAASkB,GAAS,CACblB,EAAS,MAAiBiB,EAAK,EAAdF,EAAK,CAC3B,CAEA,SAASI,GAAiB,CACf,OAAAX,EAAO,OAASA,EAAO,MAAM,iBAChC,iEAAA,CAER,CAEA,SAASY,EAAYC,EAAsB,CACvC,MAAMC,EAAQH,IAEd,UAAUI,KAAKD,EACR,GAAAD,IAAYC,EAAMC,CAAC,EACX,MAAA,GAIR,MAAA,EACX,CAEA,SAASC,EAAOC,EAAe,CAC3B1B,EAAK,OAAQ0B,CAAC,GACXjB,EAAO,OAAS,CAACA,EAAO,MAAM,SAASiB,EAAE,aAAa,GAAK,CAACjB,EAAO,MAAM,SAASiB,EAAE,aAAa,IAC3FR,GAEb,CAEA,SAASS,EAAYD,EAAQ,CACrBL,EAAYK,EAAE,MAAM,GACfR,GAEb,CAEA,SAASU,EAAcF,EAAe,CAClC,MAAMG,EAAgBH,EAAE,OACxBG,EAAc,cAAc,IAAI,MAAM,QAASH,CAAC,CAAC,EACjDG,EAAc,MAAM,EAEpB7B,EAAK,eAAgB0B,CAAC,EAElBA,EAAE,kBACKP,GAEf,CAEA,SAASW,EAAUJ,EAAkB,SAC9BK,EAAAxB,EAAS,MAAM,gBAAf,YAAAwB,EAA8B,oBAAqBL,EAAE,QAC/CR,GAEb,CAEAc,OAAAA,EAAAA,cAAc,IAAM,CACT5B,EAAA,OAASA,EAAO,MAAM,QAAQ,CAAA,CACxC,EAEM,CACH,cAAAO,EACA,QAAAD,EACA,SAAAT,EACA,KAAAK,EACA,OAAAD,EACA,cAAAQ,EACA,iBAAAV,EACA,KAAAe,EACA,KAAAF,EACA,OAAAG,EACA,OAAAM,EACA,YAAAE,EACA,cAAAC,EACA,UAAAE,CAAA,CAER,+TC3NA,MAAM/B,EAAQkC,EACRjC,EAAOkC,EAEP,CACF,OAAA7B,EACA,QAAAK,EACA,SAAAT,EACA,KAAAK,EACA,cAAAO,EACA,iBAAAV,EACA,OAAAgB,EACA,OAAAM,EACA,cAAAG,EACA,YAAAD,EACA,UAAAG,CAAA,EACAhC,EAAeC,EAAOC,CAAI,g8CCf9B,MAAMD,EAAQkC,EACRjC,EAAOkC,EAEP,CACF,cAAAvB,EACA,QAAAD,EACA,SAAAT,EACA,KAAAK,EACA,OAAAD,EACA,cAAAQ,EACA,iBAAAV,EACA,OAAAsB,EACA,cAAAG,EACA,YAAAD,EACA,UAAAG,CAAA,EACAhC,EAAeC,EAAOC,CAAI,gxECf9B,MAAMD,EAAQkC,EAERjC,EAAOkC,EAIb,SAASC,EAAQT,EAAU,CAChB,OAAA1B,EAAK,QAAS0B,CAAC,CAC1B,CAEA,MAAMU,EAAQC,EAAAA"}
|
|
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: 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 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]: !!props.buttonClass\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: 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 const targetElement = e.target as HTMLElement;\n targetElement.dispatchEvent(new Event('focus', e));\n targetElement.focus();\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 <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 <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","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","targetElement","onKeydown","_a","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"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"}
|