@vue-interface/btn-dropdown 3.0.0 → 3.0.1

package/src/BtnDropdownSingle.vue

@@ -1,55 +0,0 @@
-<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

@@ -1,84 +0,0 @@
-<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

@@ -1,213 +0,0 @@
-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
-    };
-}

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "customConditions": ["source"],
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "preserve",
-    "jsxImportSource": "vue"
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.vue",
-  ],
-  "exclude": ["node_modules", "dist"]
-}

package/vite.config.js

@@ -1,52 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import vue from '@vitejs/plugin-vue';
-import { pascalCase } from 'change-case';
-import path from 'path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import pkg from './package.json';
-
-const fileName = pkg.name.split('/')[1];
-
-const external = [
-    ...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
-    ...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
-];
-
-export default ({ command }) => defineConfig({
-    build: {
-        sourcemap: command === 'build',
-        lib: {
-            entry: path.resolve(__dirname, 'index.ts'),
-            name: pascalCase(fileName),
-            fileName,
-        },
-        rollupOptions: {
-            external,
-            output: {
-                globals: external.reduce((carry, dep) => {
-                    return Object.assign(carry, {
-                        [dep]: pascalCase(dep)
-                    });
-                }, {}),
-            }
-        },
-        watch: !process.env.NODE_ENV && {
-            include: [
-                './tailwindcss/**/*.js'
-            ]
-        }
-    },
-    resolve: {
-        conditions: process.env.NODE_ENV === 'development' 
-            ? ['source', 'import', 'module', 'browser', 'default']
-            : ['import', 'module', 'browser', 'default'],
-    },
-    plugins: [
-        vue(),
-        dts({
-    entryRoot: path.resolve(__dirname, './'),
-}),
-        tailwindcss(),
-    ],
-});