@vue-interface/btn-dropdown 4.0.2 → 4.0.4

package/index.ts

@@ -0,0 +1,5 @@
+import BtnDropdown from './src/BtnDropdown.vue';
+
+export {
+    BtnDropdown
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "A Vue button dropdown component.",
   "type": "module",
   "main": "./dist/btn-dropdown.umd.js",
@@ -10,6 +10,7 @@
     ".": {
       "source": "./index.ts",
       "types": "./dist/index.d.ts",
+      "style": "./index.css",
       "import": "./dist/btn-dropdown.js",
       "require": "./dist/btn-dropdown.umd.js"
     }
@@ -36,7 +37,9 @@
   "homepage": "https://vue-interface.github.io/packages/btn-dropdown",
   "readme": "README.md",
   "files": [
+    "src",
     "dist",
+    "index.ts",
     "index.css",
     "README.md",
     "LICENSE"
@@ -45,8 +48,8 @@
     "@floating-ui/dom": "^1.7.1",
     "@floating-ui/vue": "^1.1.6",
     "vue": "^3.3.4",
-    "@vue-interface/btn": "5.0.2",
-    "@vue-interface/dropdown-menu": "3.0.2"
+    "@vue-interface/btn": "5.0.3",
+    "@vue-interface/dropdown-menu": "3.0.4"
   },
   "scripts": {
     "dev": "vite",

package/src/BtnDropdown.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import BtnDropdownSingle from './BtnDropdownSingle.vue';
+import BtnDropdownSplit from './BtnDropdownSplit.vue';
+import { BtnDropdownEvents, BtnDropdownProps } from './useDropdownHandler';
+
+const props = withDefaults(defineProps<{
+    split?: boolean
+} & BtnDropdownProps>(), {
+    split: false,
+    caret: true
+});
+
+const emit = defineEmits<BtnDropdownEvents>();
+</script>
+
+<template>
+    <Component
+        :is="!split ? BtnDropdownSingle : BtnDropdownSplit"
+        v-bind="props"
+        @click="(...args) => emit('click', ...args)"
+        @click-toggle="(...args) => emit('clickToggle', ...args)"
+        @show="(...args) => emit('show', ...args)"
+        @hide="(...args) => emit('hide', ...args)">
+        <template #button="slot">
+            <slot
+                name="button"
+                v-bind="slot" />
+        </template>
+        <template #toggle="slot">
+            <slot
+                name="toggle"
+                v-bind="slot" />
+        </template>
+        <template #split="slot">
+            <slot
+                name="split"
+                v-bind="slot" />
+        </template>
+        <slot />
+    </Component>
+</template>

package/src/BtnDropdownSingle.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { DropdownMenu } from '@vue-interface/dropdown-menu';
+import { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';
+
+const props = withDefaults(defineProps<BtnDropdownProps>(), {
+    caret: true,
+    variant: 'btn-primary'
+});
+
+const emit = defineEmits<BtnDropdownEvents>();
+
+const {
+    target,
+    menu,
+    buttonClasses,
+    classes,
+    expanded,
+    floatingStyles,
+    onBlur,
+    onClickToggle,
+    onClickItem
+} = useDropdownHandler(props, emit);
+</script>
+
+<template>
+    <div
+        class="btn-group"
+        :class="classes">
+        <slot
+            name="button"
+            v-bind="{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }">
+            <button
+                ref="target"
+                type="button"
+                :class="{...buttonClasses, ['dropdown-toggle']: true}"
+                aria-haspopup="true"
+                :aria-expanded="expanded"
+                @blur="onBlur"
+                @click="onClickToggle">
+                {{ label }}
+            </button>
+        </slot>
+        <DropdownMenu
+            ref="menu"
+            :class="{
+                'show': expanded
+            }"
+            :style="floatingStyles"
+            @blur="onBlur"
+            @click="onClickItem"
+            @mousedown.prevent>
+            <slot />
+        </DropdownMenu>
+    </div>
+</template>

package/src/BtnDropdownSplit.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { DropdownMenu } from '@vue-interface/dropdown-menu';
+import { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';
+
+const props = withDefaults(defineProps<BtnDropdownProps>(), {
+    caret: true,
+    variant: 'btn-primary'
+});
+
+const emit = defineEmits<BtnDropdownEvents>();
+
+const {
+    target,
+    menu,
+    buttonClasses,
+    classes,
+    expanded,
+    floatingStyles,
+    onBlur,
+    onClick,
+    onClickToggle,
+    onClickItem
+} = useDropdownHandler(props, emit);
+</script>
+
+<template>
+    <div
+        class="btn-group btn-dropdown-split"
+        :class="classes">
+        <slot
+            v-if="!dropleft"
+            name="button"
+            v-bind="{ expanded, onBlur, onClickToggle }">
+            <button
+                type="button"
+                :class="buttonClasses"
+                aria-haspopup="true"
+                :aria-expanded="expanded"
+                @blur="onBlur"
+                @click="onClick">
+                {{ label }}
+            </button>
+        </slot>
+        <div class="btn-group">
+            <slot
+                name="toggle"
+                v-bind="{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }">
+                <button
+                    ref="target"
+                    type="button"
+                    aria-haspopup="true"
+                    :aria-expanded="expanded"
+                    :class="{...buttonClasses, 'dropdown-toggle': true, 'dropdown-toggle-split': split}"
+                    @blur="onBlur"
+                    @click="onClickToggle" />
+            </slot>
+            <DropdownMenu
+                ref="menu"
+                :class="{
+                    'show': expanded
+                }"
+                :style="floatingStyles"
+                @blur="onBlur"
+                @click="onClickItem"
+                @mousedown.prevent>
+                <slot />
+            </DropdownMenu>
+        </div>
+        <slot
+            v-if="dropleft"
+            name="button"
+            v-bind="{ expanded, onBlur, onClickToggle }">
+            <button
+                type="button"
+                :class="buttonClasses"
+                aria-haspopup="true"
+                :aria-expanded="expanded"
+                @blur="onBlur"
+                @click="onClick">
+                {{ label }}
+            </button>
+        </slot>
+    </div>
+</template>

package/src/useDropdownHandler.ts

@@ -0,0 +1,213 @@
+import { flip, offset, Placement, type Alignment, type Middleware, type OffsetOptions, type Side } from '@floating-ui/dom';
+import { useFloating } from '@floating-ui/vue';
+import { DropdownMenu } from '@vue-interface/dropdown-menu';
+import { computed, ref, watchEffect, type EmitFn, type HTMLAttributes } from 'vue';
+
+type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+
+export type BtnGroupSizes = 'btn-group-xs'
+    | 'btn-group-sm' 
+    | 'btn-group-md'
+    | 'btn-group-lg'
+    | 'btn-group-xl'
+    | 'btn-group-2xl'
+    | 'btn-group-3xl'
+    | 'btn-group-4xl';
+
+export type BtnDropdownProps = {
+    align?: Alignment;
+    block?: boolean;
+    buttonClass?: HTMLAttributes['class'],
+    caret?: boolean;
+    dropup?: boolean;
+    dropright?: boolean;
+    dropleft?: boolean;
+    label?: string;
+    offset?: OffsetOptions,
+    middleware?: Middleware[],
+    side?: Side;
+    size?: LiteralUnion<BtnGroupSizes>;
+    split?: boolean;
+    variant?: string;
+}
+
+export type BtnDropdownEvents = {
+    click: [event: MouseEvent];
+    clickToggle: [event: MouseEvent];
+    show: [],
+    hide: []
+}
+
+export function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>) {
+    const target = ref<HTMLElement>();
+    const menu = ref<InstanceType<typeof DropdownMenu>>();
+    const expanded = ref(false);
+
+
+    const alignment = computed<Alignment>(() => props.align ?? 'start');
+
+    const side = computed<Side>(() => {
+        if(props.dropup) {
+            return 'top';
+        }
+
+        if(props.dropleft) {
+            return 'left';
+        }
+
+        if(props.dropright) {
+            return 'right';
+        }
+
+        return 'bottom';
+    });
+
+    const placement = computed<Placement>(() => `${side.value}-${alignment.value}`);
+
+    const classes = computed(() => ({
+        'dropdown': props.dropup && props.dropright && props.dropleft,
+        'dropup': props.dropup,
+        'dropright': props.dropright,
+        'dropleft': props.dropleft,
+        'expanded': expanded.value,
+        [props.size ?? '']: !!props.size,
+    }));
+    
+    const buttonClasses = computed(() => {
+        const classes = {
+            btn: true,
+            [props.variant ?? '']: !!props.variant,
+            'btn-block': !!props.block,
+            'no-caret': !props.caret
+        };
+        
+        if(typeof props.buttonClass === 'string') {
+            classes[props.buttonClass] = true;
+        }
+        else if(Array.isArray(props.buttonClass)) {
+            for(const value of props.buttonClass) {
+                classes[value] = true;
+            }
+        }
+        else if(props.buttonClass) {
+            Object.assign(classes, props.buttonClass);
+        }
+
+        return classes;
+    });
+
+    const { floatingStyles, update } = useFloating(target, menu, {
+        placement: placement,
+        middleware: props.middleware ?? [
+            offset(props.offset ?? 5),
+            flip()
+        ]
+    });
+
+    function show() {
+        expanded.value = true;
+
+        if(!target.value || !menu.value) {
+            return;
+        }
+
+        update();
+
+        emit('show');
+    }
+
+    function hide() {
+        expanded.value = false;
+
+        target.value?.blur();
+
+        emit('hide');
+    }
+
+    function toggle() {
+        if(!expanded.value) {
+            show();
+        }
+        else {
+            hide();
+        }
+    }
+
+    function isFocusable(element: HTMLElement) {
+        const nodes = Array.from(menu.value?.$el.querySelectorAll('label, input, select, textarea') ?? []);
+
+        for(const i in nodes) {
+            if(element === nodes[i]) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+        
+    function onBlur(e: FocusEvent) {
+        if(!(e.relatedTarget instanceof HTMLElement)) {
+            hide();
+            
+            return;
+        }
+        
+        if(menu.value && !menu.value?.$el.contains(e.relatedTarget) || !target.value?.contains(e.relatedTarget)) {
+            hide();
+        }
+    }
+
+    function onClick(e: MouseEvent) {
+        emit('click', e);
+    }
+
+    function onClickToggle(e: MouseEvent) {
+        e.target?.dispatchEvent(new Event('focus', e));
+            
+        emit('clickToggle', e);
+
+        if(!e.defaultPrevented) {
+            toggle();
+        }
+    }
+
+    function onClickItem(e: PointerEvent) {
+        if(!(e.target instanceof HTMLElement)) {
+            hide();
+
+            return;
+        }
+
+        if(!isFocusable(e.target) && !e.defaultPrevented) {
+            hide();
+        }
+    }
+
+    watchEffect(() => {
+        if(expanded.value) {
+            window.addEventListener('resize', update);
+        }
+        else {
+            window.removeEventListener('resize', update);
+        }
+    });
+
+    return {
+        target,
+        menu,
+        alignment,
+        expanded,
+        floatingStyles,
+        placement,
+        side,
+        classes,
+        buttonClasses,
+        show,
+        hide,
+        toggle,
+        onBlur,
+        onClick,
+        onClickToggle,
+        onClickItem
+    };
+}