@vue-interface/btn-dropdown 2.0.0-beta.6 → 3.0.0

package/package.json

@@ -1,36 +1,23 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "2.0.0-beta.6",
+  "version": "3.0.0",
   "description": "A Vue button dropdown component.",
-  "files": [
-    "dist"
-  ],
   "type": "module",
   "main": "./dist/btn-dropdown.umd.js",
   "module": "./dist/btn-dropdown.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/btn-dropdown.js",
-      "require": "./dist/btn-dropdown.umd.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./dist/style.css": "./dist/style.css"
+      "require": "./dist/btn-dropdown.umd.js"
+    }
   },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
-    "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
-    "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
-    "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
-    "release": "git add . -A; git commit; git push --tags origin; npm publish;"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/btn-dropdown.git"
+    "url": "git+https://github.com/vue-interface/btn-dropdown"
   },
   "keywords": [
     "Button",
@@ -44,35 +31,19 @@
   "author": "Justin Kimbrell",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/vue-interface/btn-dropdown/issues"
-  },
-  "homepage": "https://github.com/vue-interface/btn-dropdown/docs#readme",
-  "dependencies": {
-    "@popperjs/core": "^2.11.2",
-    "@vue-interface/btn": "^3.0.0-beta.1",
-    "@vue-interface/btn-group": "^2.0.0-beta.4",
-    "@vue-interface/dropdown-menu": "^2.0.0-beta.8"
+    "url": "https://github.com/vue-interface/btn-dropdown"
   },
+  "homepage": "https://github.com/vue-interface/vue-interface",
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "@floating-ui/dom": "^1.7.1",
+    "@floating-ui/vue": "^1.1.6",
+    "vue": "^3.3.4",
+    "@vue-interface/btn": "4.0.0",
+    "@vue-interface/dropdown-menu": "3.0.0"
   },
-  "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-vue": "^2.0.2",
-    "change-case": "^4.1.2",
-    "eslint": "^8.25.0",
-    "eslint-plugin-vue": "^9.6.0",
-    "pascalcase": "^2.0.0",
-    "postcss": "^8.4.6",
-    "tailwindcss": "^3.1.0",
-    "ts-vue": "^0.1.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.0",
-    "vite-plugin-dts": "^1.7.1",
-    "vue": "^3.2.41"
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   }
-}
+}

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
+    };
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "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

@@ -0,0 +1,52 @@
+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(),
+    ],
+});