@vue-interface/dropdown-menu 3.0.2 → 3.0.4

package/index.ts

@@ -0,0 +1,11 @@
+import DropdownHeader from './src/DropdownHeader.vue';
+import DropdownItem from './src/DropdownItem.vue';
+import DropdownItemText from './src/DropdownItemText.vue';
+import DropdownMenu from './src/DropdownMenu.vue';
+
+export {
+    DropdownHeader,
+    DropdownItem,
+    DropdownItemText,
+    DropdownMenu
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "A Vue dropdown menu component.",
   "type": "module",
   "main": "./dist/dropdown-menu.umd.cjs",
@@ -10,6 +10,7 @@
     ".": {
       "source": "./index.ts",
       "types": "./dist/index.d.ts",
+      "style": "./index.css",
       "import": "./dist/dropdown-menu.js",
       "require": "./dist/dropdown-menu.umd.js"
     },
@@ -35,7 +36,9 @@
   "homepage": "https://vue-interface.github.io/packages/dropdown-menu",
   "readme": "README.md",
   "files": [
+    "src",
     "dist",
+    "index.ts",
     "index.css",
     "README.md",
     "LICENSE"

package/src/DropdownDivider.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <hr class="dropdown-divider">
+</template>

package/src/DropdownHeader.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <h3 class="dropdown-header">
+        <slot />
+    </h3>
+</template>

package/src/DropdownItem.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="dropdown-item">
+        <slot />
+    </div>
+</template>

package/src/DropdownItemText.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="dropdown-item-text">
+        <slot />
+    </div>
+</template>

package/src/DropdownMenu.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+export type DropdownMenuProps = {
+    align?: 'left' | 'right',
+    show?: boolean
+};
+
+withDefaults(defineProps<DropdownMenuProps>(), {
+    align: 'left'
+});
+</script>
+
+<template>
+    <div
+        class="dropdown-menu"
+        :aria-labelledby="($attrs.id as string|undefined)"
+        :class="{
+            'dropdown-menu-left': align === 'left',
+            'dropdown-menu-right': align === 'right',
+            'show': show
+        }">
+        <slot />
+    </div>
+</template>

package/src/DropdownMenuItems.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { Fragment, h } from 'vue';
+
+function appendClass(vnode: any, str: any) {
+    vnode.props.class = `${vnode.props.class || ''} ${str}`.trim();
+}
+
+function changeMenuItems(items: any) {
+    for(const vnode of items) {
+        if(vnode.type === Fragment) {
+            changeMenuItems(vnode.children);
+        }
+
+        vnode.props = Object.assign({ class: undefined }, vnode.props);
+        vnode.attrs = Object.assign({}, vnode.attrs);
+
+        if(!vnode.attrs.on) {
+            vnode.attrs.on = {};
+        }
+
+        const isDropdownItem = vnode.props.class && vnode.props.class.match(/dropdown-item/);
+        const isDropdownDivider = vnode.props.class && vnode.props.class.match(/dropdown-divider/);
+
+        if(typeof vnode.type === 'string' && vnode.type.match(/^h\d$/)) {
+            appendClass(vnode, 'dropdown-header');
+        }
+        else if(vnode.type === 'hr' && !isDropdownDivider) {
+            vnode.type = 'div';
+
+            appendClass(vnode, 'dropdown-divider');
+        }
+        else if(!isDropdownItem && !isDropdownDivider) {
+            appendClass(vnode, 'dropdown-item');
+        }
+    }
+
+    return items;
+}
+
+const DropdownMenuItems = (_: any, context: any) => h('div', {}, changeMenuItems(context.slots.default()));
+
+export default DropdownMenuItems;
+</script>