@vue-interface/dropdown-menu 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/dropdown-menu.js

@@ -0,0 +1,52 @@
+import { openBlock as n, createElementBlock as t, renderSlot as r, defineComponent as l, createElementVNode as _, normalizeClass as i } from "vue";
+const d = (o, e) => {
+  const s = o.__vccOpts || o;
+  for (const [c, a] of e)
+    s[c] = a;
+  return s;
+}, p = {}, f = { class: "dropdown-header" };
+function u(o, e) {
+  return n(), t("h3", f, [
+    r(o.$slots, "default")
+  ]);
+}
+const k = /* @__PURE__ */ d(p, [["render", u]]), m = {}, h = { class: "dropdown-item" };
+function w(o, e) {
+  return n(), t("div", h, [
+    r(o.$slots, "default")
+  ]);
+}
+const B = /* @__PURE__ */ d(m, [["render", w]]), $ = {}, g = { class: "dropdown-item-text" };
+function v(o, e) {
+  return n(), t("div", g, [
+    r(o.$slots, "default")
+  ]);
+}
+const C = /* @__PURE__ */ d($, [["render", v]]), D = { class: "dropdown" }, b = ["aria-labelledby"], E = /* @__PURE__ */ l({
+  __name: "DropdownMenu",
+  props: {
+    align: {},
+    show: { type: Boolean }
+  },
+  setup(o) {
+    return (e, s) => (n(), t("div", D, [
+      _("div", {
+        class: i(["dropdown-menu", {
+          "dropdown-menu-left": e.align === "left",
+          "dropdown-menu-right": e.align === "right",
+          show: e.show
+        }]),
+        "aria-labelledby": e.$attrs.id
+      }, [
+        r(e.$slots, "default")
+      ], 10, b)
+    ]));
+  }
+});
+export {
+  k as DropdownHeader,
+  B as DropdownItem,
+  C as DropdownItemText,
+  E as DropdownMenu
+};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sources":["../src/DropdownHeader.vue","../src/DropdownItem.vue","../src/DropdownItemText.vue"],"sourcesContent":["<template>\n    <h3 class=\"dropdown-header\">\n        <slot />\n    </h3>\n</template>","<template>\n    <div class=\"dropdown-item\">\n        <slot />\n    </div>\n</template>","<template>\n    <div class=\"dropdown-item-text\">\n        <slot />\n    </div>\n</template>"],"names":["_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_1"],"mappings":";;;;;;;AACI,SAAAA,EAAAC,GAAAC,GAAA;SACYC,EAAA,GAAAC,EAAA,MAAAC,GAAA;AAAA;;;;ACDZ,SAAAL,EAAAC,GAAAC,GAAA;SACYC,EAAA,GAAAC,EAAA,OAAAC,GAAA;AAAA;;;;ACDZ,SAAAL,EAAAC,GAAAC,GAAA;SACYC,EAAA,GAAAC,EAAA,OAAAC,GAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/dropdown-menu.umd.cjs

@@ -0,0 +1,2 @@
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.DropdownMenu={},o.Vue))})(this,function(o,e){"use strict";const r=(t,n)=>{const d=t.__vccOpts||t;for(const[D,y]of n)d[D]=y;return d},s={},c={class:"dropdown-header"};function l(t,n){return e.openBlock(),e.createElementBlock("h3",c,[e.renderSlot(t.$slots,"default")])}const i=r(s,[["render",l]]),a={},p={class:"dropdown-item"};function _(t,n){return e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(t.$slots,"default")])}const f=r(a,[["render",_]]),m={},h={class:"dropdown-item-text"};function u(t,n){return e.openBlock(),e.createElementBlock("div",h,[e.renderSlot(t.$slots,"default")])}const w=r(m,[["render",u]]),$={class:"dropdown"},k=["aria-labelledby"],B=e.defineComponent({__name:"DropdownMenu",props:{align:{},show:{type:Boolean}},setup(t){return(n,d)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",{class:e.normalizeClass(["dropdown-menu",{"dropdown-menu-left":n.align==="left","dropdown-menu-right":n.align==="right",show:n.show}]),"aria-labelledby":n.$attrs.id},[e.renderSlot(n.$slots,"default")],10,k)]))}});o.DropdownHeader=i,o.DropdownItem=f,o.DropdownItemText=w,o.DropdownMenu=B,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=dropdown-menu.umd.cjs.map

package/dist/dropdown-menu.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.umd.cjs","sources":["../src/DropdownHeader.vue","../src/DropdownItem.vue","../src/DropdownItemText.vue"],"sourcesContent":["<template>\n    <h3 class=\"dropdown-header\">\n        <slot />\n    </h3>\n</template>","<template>\n    <div class=\"dropdown-item\">\n        <slot />\n    </div>\n</template>","<template>\n    <div class=\"dropdown-item-text\">\n        <slot />\n    </div>\n</template>"],"names":["_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_1"],"mappings":"6WACI,SAAAA,EAAAC,EAAAC,EAAA,QACYC,YAAA,EAAAC,qBAAA,KAAAC,EAAA,+FCDZ,SAAAL,EAAAC,EAAAC,EAAA,QACYC,YAAA,EAAAC,qBAAA,MAAAC,EAAA,oGCDZ,SAAAL,EAAAC,EAAAC,EAAA,QACYC,YAAA,EAAAC,qBAAA,MAAAC,EAAA"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+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/dist/src/DropdownDivider.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/src/DropdownHeader.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/DropdownItem.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/DropdownItemText.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/DropdownMenu.vue.d.ts

@@ -0,0 +1,29 @@
+export type DropdownMenuProps = {
+    align: 'left' | 'right';
+    show?: boolean;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+        required: true;
+    };
+    show: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+        required: true;
+    };
+    show: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/DropdownMenuItems.vue.d.ts

@@ -0,0 +1,4 @@
+declare const DropdownMenuItems: (props: any, context: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
+export default DropdownMenuItems;

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "description": "A Vue dropdown menu component.",
   "files": [
-    "index.js",
     "dist",
-    "src",
     "tailwindcss"
   ],
-  "main": "./dist/dropdown-menu.umd.js",
-  "module": "./index.js",
+  "type": "module",
+  "main": "./dist/dropdown-menu.umd.cjs",
+  "module": "./dist/dropdown-menu.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/dropdown-menu.js",
+      "require": "./dist/dropdown-menu.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./tailwindcss": "./tailwindcss/index.cjs",
+    "./tailwindcss/safelist": "./tailwindcss/safelist.cjs"
+  },
   "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;"
+    "build": "vite build && vue-tsc",
+    "preview": "vite preview"
   },
   "repository": {
     "type": "git",
@@ -44,22 +48,29 @@
     "color": "^4.2.0"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^5.3.1",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "autoprefixer": "^10.4.8",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-vue": "^2.0.2",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^10.0.5",
+    "@types/color": "^3.0.3",
+    "@vitejs/plugin-vue": "^4.3.2",
+    "@vue-interface/eslint-config": "^1.0.0-beta.0",
+    "autoprefixer": "^10.4.15",
     "change-case": "^4.1.2",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "commitlint": "^17.7.1",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.47.0",
+    "husky": "^8.0.3",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.16",
-    "tailwindcss": "^3.1.8",
-    "vite": "^3.0.9",
-    "vue": "^3.2.37",
-    "vue-router": "^4.1.4"
+    "postcss": "^8.4.6",
+    "semantic-release": "^21.0.7",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.0",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.8"
   }
 }

package/tailwindcss/index.cjs

@@ -0,0 +1,214 @@
+const Color = require('color');
+const plugin = require('tailwindcss/plugin');
+const colors = require('tailwindcss/colors');
+// const variations = require('@vue-interface/variant/tailwindcss/variations');
+
+module.exports = plugin(function({ addComponents, theme }) {
+    // if(theme('dropdownMenu.paddingY') === 0) {
+    //     component['.dropdown-item']['&:first-child'] = {
+    //         borderTopLeftRadius: theme('dropdownMenu.inner.borderRadius'),
+    //         borderTopRightRadius: theme('dropdownMenu.inner.borderRadius'),
+    //     };
+
+    //     component['.dropdown-item']['&:last-child'] = {
+    //         borderBottomLeftRadius: theme('dropdownMenu.inner.borderRadius'),
+    //         borderBottomRightRadius: theme('dropdownMenu.inner.borderRadius'),
+    //     };
+    // }
+
+    addComponents(theme('dropdownMenu.css'));
+    addComponents({
+        '.btn-dropdown': theme('dropdownMenu.css')
+    })
+}, {
+    theme: {
+        dropdownMenu: theme => ({
+            css: {
+                // The dropdown menu
+                '.dropdown-menu, .DropdownMenu': {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    zIndex: 1000,
+                    display: 'none', // none by default, but block on "open" of the menu
+                    minWidth: '10rem',
+                    padding: '.5rem 0',
+                    // margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
+                    fontSize: '1rem',
+                    color: 'inherit',
+                    textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
+                    listStyle: 'none',
+                    backgroundColor: colors.white,
+                    backgroundClip: 'padding-box',
+                    border: `1px solid ${colors.neutral[400]}`,
+                    borderRadius: '.25rem',
+                    boxShadow: `0 .25rem 1rem rgba(0, 0, 0, .5)`,
+
+                    // The dropdown wrapper (`<div>`)
+                    '.dropup:has(&), .dropright:has(&), .dropdown:has(&), .dropleft:has(&)': {
+                        position: 'relative'
+                    },
+
+                    // When enabled Popper.js, reset basic dropdown position
+                    // stylelint-disable-next-line no-duplicate-selectors
+                    '&[x-placement^="top"], &[x-placement^="right"], &[x-placement^="bottom"], &[x-placement^="left"]': {
+                        right: 'auto',
+                        bottom: 'auto'
+                    },
+
+                    // Links, buttons, and more within the dropdown menu
+                    //
+                    // `<button>`-specific styles are denoted with `// For <button>s`
+                    '.dropdown-item': {
+                        display: 'block',
+                        width: '100%', // For `<button>`s
+                        padding: '.25rem 1rem',
+                        clear: 'both',
+                        fontWeight: 'normal',
+                        color: theme('colors.gray.800', colors.gray[800]),
+                        textAlign: 'inherit', // For `<button>`s
+                        textDecoration: 'none',
+                        whiteSpace: 'nowrap', // prevent links from randomly breaking onto new lines
+                        backgroundColor: 'transparent', // For `<button>`s
+                        border: 0, // For `<button>`s
+
+                        '&:hover, &:focus': {
+                            color: theme('colors.gray.800', colors.gray[900]),
+                            textDecoration: 'none',
+                            backgroundColor: theme('colors.gray.100', colors.gray[100])
+                        },
+        
+                        '&.active, &:active': {
+                            color: theme('colors.white', colors.white),
+                            textDecoration: 'none',
+                            backgroundColor: theme('variations.primary', colors.blue[500])
+                        },
+        
+                        '&.disabled, &:disabled': {
+                            color: theme('colors.gray.500', colors.gray[500]),
+                            pointerEvents: 'none',
+                            backgroundColor: 'transparent',
+                            backgroundImage: 'none'
+                        },
+                    },
+        
+                    // Dropdown section headers
+                    '.dropdown-header': {
+                        display: 'block',
+                        padding: '.5rem',
+                        marginBottom: 0, // for use with heading elements
+                        fontSize: '.875rem',
+                        fontWeight: 'bold',
+                        color: theme('colors.gray.500', colors.gray[500]),
+                        whiteSpace: 'nowrap' // as with > li > a
+                    },
+
+                    // Dividers (basically an `<hr>`) within the dropdown
+                    '.dropdown-divider': {
+                        height: 0,
+                        margin: 'calc(.125rem / 2) 0',
+                        overflow: 'hidden',
+                        borderTop: `1px solid ${theme('colors.gray.200', colors.gray[200])}`,
+                    },
+        
+                    // Dropdown text
+                    '.dropdown-item-text': {
+                        display: 'block',
+                        padding: '.25rem 1rem',
+                        color: theme('colors.gray.800', colors.gray[800]),
+                    },
+
+                    '&.show': {
+                        display: 'inline-block'
+                    },
+
+                    '&.dropdown-menu-left': {
+                        right: 'auto',
+                        left: 0
+                    },
+
+                    '&.dropdown-menu-right': {
+                        right: 0,
+                        left: 'auto'
+                    },
+
+                    // '.dropdown-toggle': {
+                    //     whiteSpace: 'nowrap',
+                    // },
+                
+                    // '.dropdown-toggle::after': {
+                    //     display: 'inline-block',
+                    //     marginLeft: '.3em',
+                    //     verticalAlign: 'calc(.3em * .85)',
+                    //     content: '""',
+                    //     borderTop: '.3em solid',
+                    //     borderRight: '.3em solid transparent',
+                    //     borderBottom: 0,
+                    //     borderLeft: '.3em solid transparent'
+                    // },
+    
+                    // Allow for dropdowns to go bottom up (aka, dropup-menu)
+                    // Just add .dropup after the standard .dropdown class and you're set.
+                    '.dropup &': {
+                        top: 'auto',
+                        bottom: '100%',
+                        marginTop: 0,
+                    },
+    
+                    // '.dropup .dropdown-toggle::after': {
+                    //     display: 'inline-block',
+                    //     marginLeft: '.3em',
+                    //     verticalAlign: 'calc(.3em * .85)',
+                    //     content: '""',
+                    //     borderTop: 0,
+                    //     borderRight: '.3em solid transparent',
+                    //     borderBottom: '.3em solid',
+                    //     borderLeft: '.3em solid transparent'
+                    // },
+        
+                    '.dropright &': {
+                        top: 0,
+                        right: 'auto',
+                        left: '100%',
+                        marginTop: 0,
+                    },
+    
+                    // '.dropright .dropdown-toggle::after': {
+                    //     display: 'inline-block',
+                    //     marginLeft: '.3em',
+                    //     verticalAlign: 'calc(.3em * .85)',
+                    //     content: '""',
+                    //     borderTop: '.3em solid transparent',
+                    //     borderRight: 0,
+                    //     borderBottom: '.3em solid transparent',
+                    //     borderLeft: '.3em solid',
+                    //     verticalAlign: 0
+                    // },
+        
+                    '.dropleft &': {
+                        top: 0,
+                        right: '100%',
+                        left: 'auto',
+                        marginTop: 0,
+                    },
+          
+                    // '.dropleft .dropdown-toggle::after': {
+                    //     display: 'none'
+                    // }, 
+
+                    // '.dropleft .dropdown-toggle::before': {
+                    //     display: 'inline-block',
+                    //     marginRight: '.3em',
+                    //     verticalAlign: 'calc(.3em * .85)',
+                    //     content: '""',
+                    //     borderTop: '.3em solid transparent',
+                    //     borderLeft: 0,
+                    //     borderBottom: '.3em solid transparent',
+                    //     borderRight: '.3em solid',
+                    //     verticalAlign: 0
+                    // },
+                }
+            }
+        })
+    }
+});

package/dist/dropdown-menu.es.js

@@ -1,74 +0,0 @@
-import { h as d, resolveComponent as m, openBlock as u, createElementBlock as f, normalizeClass as w, createVNode as h, withCtx as y, renderSlot as g } from "vue";
-function s(e, t) {
-  e.props.class = `${e.props.class || ""} ${t}`.trim();
-}
-function i(e, t) {
-  return (n) => {
-    typeof t == "function" && t(n), n.cancelBubble || e(n);
-  };
-}
-function p(e, t) {
-  return e.attrs.on[t] || e.type && e.type.listeners && e.componentOptions.listeners[t];
-}
-function _(e) {
-  return e && e.type && (e.type === "fragment" || typeof e.type == "symbol");
-}
-function a(e) {
-  for (const t of e) {
-    if (_(t))
-      return a(t.children);
-    t.props = Object.assign({ class: void 0 }, t.props), t.attrs = Object.assign({}, t.attrs), t.attrs.on || (t.attrs.on = {});
-    const n = t.props.class && t.props.class.match(/dropdown-item/), r = t.props.class && t.props.class.match(/dropdown-divider/);
-    t.attrs.on.click = i((o) => {
-      context.parent.$emit("click-item", o, t);
-    }, p(t, "click")), t.attrs.on.blur = i((o) => {
-      context.parent.$emit("blur-item", o, t);
-    }, p(t, "blur")), typeof t.type == "string" && t.type.match(/^h\d$/) ? s(t, "dropdown-header") : t.type === "hr" && !r ? (t.type = "div", s(t, "dropdown-divider")) : !n && !r && s(t, "dropdown-item");
-  }
-  return e;
-}
-const b = (e, t) => d("div", {}, a(t.slots.default())), $ = b, k = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [r, o] of t)
-    n[r] = o;
-  return n;
-}, C = {
-  name: "DropdownMenu",
-  components: {
-    DropdownMenuItems: $
-  },
-  props: {
-    align: {
-      type: String,
-      default: "left",
-      validate(e) {
-        return ["left", "right"].indexOf(e.toLowerCase()) !== -1;
-      }
-    },
-    show: Boolean
-  }
-}, D = ["aria-labelledby"];
-function I(e, t, n, r, o, M) {
-  const l = m("dropdown-menu-items");
-  return u(), f("div", {
-    class: w(["dropdown-menu", {
-      "dropdown-menu-left": n.align === "left",
-      "dropdown-menu-right": n.align === "right",
-      show: n.show
-    }]),
-    "aria-labelledby": e.$attrs.id
-  }, [
-    h(l, null, {
-      default: y(() => [
-        g(e.$slots, "default", {
-          onClick: t[0] || (t[0] = (...c) => e.onItemClick && e.onItemClick(...c))
-        })
-      ]),
-      _: 3
-    })
-  ], 10, D);
-}
-const v = /* @__PURE__ */ k(C, [["render", I]]);
-export {
-  v as DropdownMenu
-};

package/dist/dropdown-menu.umd.js

@@ -1 +0,0 @@
-(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.DropdownMenu={},r.Vue))})(this,function(r,n){"use strict";function p(t,e){t.props.class=`${t.props.class||""} ${e}`.trim()}function d(t,e){return o=>{typeof e=="function"&&e(o),o.cancelBubble||t(o)}}function l(t,e){return t.attrs.on[e]||t.type&&t.type.listeners&&t.componentOptions.listeners[e]}function c(t){return t&&t.type&&(t.type==="fragment"||typeof t.type=="symbol")}function a(t){for(const e of t){if(c(e))return a(e.children);e.props=Object.assign({class:void 0},e.props),e.attrs=Object.assign({},e.attrs),e.attrs.on||(e.attrs.on={});const o=e.props.class&&e.props.class.match(/dropdown-item/),i=e.props.class&&e.props.class.match(/dropdown-divider/);e.attrs.on.click=d(s=>{context.parent.$emit("click-item",s,e)},l(e,"click")),e.attrs.on.blur=d(s=>{context.parent.$emit("blur-item",s,e)},l(e,"blur")),typeof e.type=="string"&&e.type.match(/^h\d$/)?p(e,"dropdown-header"):e.type==="hr"&&!i?(e.type="div",p(e,"dropdown-divider")):!o&&!i&&p(e,"dropdown-item")}return t}const u=(t,e)=>n.h("div",{},a(e.slots.default())),f=(t,e)=>{const o=t.__vccOpts||t;for(const[i,s]of e)o[i]=s;return o},m={name:"DropdownMenu",components:{DropdownMenuItems:u},props:{align:{type:String,default:"left",validate(t){return["left","right"].indexOf(t.toLowerCase())!==-1}},show:Boolean}},w=["aria-labelledby"];function h(t,e,o,i,s,D){const g=n.resolveComponent("dropdown-menu-items");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["dropdown-menu",{"dropdown-menu-left":o.align==="left","dropdown-menu-right":o.align==="right",show:o.show}]),"aria-labelledby":t.$attrs.id},[n.createVNode(g,null,{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default",{onClick:e[0]||(e[0]=(..._)=>t.onItemClick&&t.onItemClick(..._))})]),_:3})],10,w)}const y=f(m,[["render",h]]);r.DropdownMenu=y,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/index.js

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

package/src/DropdownDivider.vue

@@ -1,3 +0,0 @@
-<template>
-    <hr class="dropdown-divider">
-</template>

package/src/DropdownHeader.vue

@@ -1,5 +0,0 @@
-<template>
-    <h3 class="dropdown-header">
-        <slot />
-    </h3>
-</template>

package/src/DropdownItem.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="dropdown-item">
-        <slot />
-    </div>
-</template>

package/src/DropdownMenu.vue

@@ -1,52 +0,0 @@
-<template>
-    <div
-        class="dropdown-menu"
-        :aria-labelledby="$attrs.id"
-        :class="{
-            'dropdown-menu-left': align === 'left',
-            'dropdown-menu-right': align === 'right',
-            'show': show
-        }">
-        <dropdown-menu-items>
-            <slot @click="onItemClick" />
-        </dropdown-menu-items>
-    </div>
-</template>
-
-<script>
-import DropdownMenuItems from './DropdownMenuItems.vue';
-
-export default {
-
-    name: 'DropdownMenu',
-
-    components: {
-        DropdownMenuItems
-    },
-
-    props: {
-
-        /**
-         * Display the dropdown menu aligned left or right
-         *
-         * @property String
-         */
-        align: {
-            type: String,
-            default: 'left',
-            validate(value) {
-                return ['left', 'right'].indexOf(value.toLowerCase()) !== -1;
-            }
-        },
-
-        /**
-         * The default visibility of the dropdown menu.
-         *
-         * @property Object
-         */
-        show: Boolean
-
-    }
-
-};
-</script>

package/src/DropdownMenuItems.vue

@@ -1,77 +0,0 @@
-<script>
-import { h } from 'vue';
-
-function appendClass(vnode, str) {
-    vnode.props.class = `${vnode.props.class || ''} ${str}`.trim();
-}
-
-function wrap(wrapper, fn) {
-    return (e) => {
-        if(typeof fn === 'function') {
-            fn(e);
-        }
-
-        if(!e.cancelBubble) {
-            wrapper(e);
-        }
-    };
-}
-
-function listener(vnode, key) {
-    return vnode.attrs.on[key] || (
-        vnode.type &&
-        vnode.type.listeners &&
-        vnode.componentOptions.listeners[key]
-    );
-}
-
-function isFragment(vnode) {
-    // We'll go ahead and assume that if the type is a symbol, then the vnode is fragment.
-    // This may be a faulty assumption; if it is, it'll need to be changed.
-    return vnode && vnode.type && (vnode.type === 'fragment' || typeof vnode.type === 'symbol');
-}
-
-function changeMenuItems(items) {
-    for(const vnode of items) {
-        if(isFragment(vnode)) {
-            return 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/);
-
-        vnode.attrs.on.click = wrap(e => {
-            context.parent.$emit('click-item', e, vnode);
-        }, listener(vnode, 'click'));
-
-        vnode.attrs.on.blur = wrap(e => {
-            context.parent.$emit('blur-item', e, vnode);
-        }, listener(vnode, 'blur'));
-
-        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 = (props, context) => h('div', {}, changeMenuItems(context.slots.default()));
-
-export default DropdownMenuItems;
-</script>

package/tailwindcss/index.js

@@ -1,302 +0,0 @@
-const Color = require('color');
-const plugin = require('tailwindcss/plugin');
-const colors = require('tailwindcss/colors');
-const variations = require('@vue-interface/variant/tailwindcss/variations');
-
-module.exports = plugin(function({ addComponents, theme }) {
-    const component = {
-        // ':root': {
-        //     '--dropdown-menu-z-index': theme('dropdownMenu.zIndex'),
-        //     '--dropdown-menu-min-width': theme('dropdownMenu.minWidth'),
-        //     '--dropdown-menu-padding-y': theme('dropdownMenu.paddingY'),
-        //     '--dropdown-menu-spacer': theme('dropdownMenu.spacer'),
-        //     '--dropdown-menu-font-size': theme('dropdownMenu.fontSize'),
-        //     '--dropdown-menu-color': theme('dropdownMenu.color'),
-        //     '--dropdown-menu-background-color': theme('dropdownMenu.backgroundColor'),
-        //     '--dropdown-menu-border-color': theme('dropdownMenu.borderColor'),
-        //     '--dropdown-menu-border-radius': theme('dropdownMenu.borderRadius'),
-        //     '--dropdown-menu-border-width': theme('dropdownMenu.borderWidth'),
-        //     '--dropdown-menu-box-shadow': theme('dropdownMenu.boxShadow'),
-            
-        //     '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
-
-        //     '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
-            
-        //     '--dropdown-menu-link-color': theme('dropdownMenu.link.color'),
-
-        //     '--dropdown-menu-link-hover-color': theme('dropdownMenu.link.hover.color'),
-        //     '--dropdown-menu-link-hover-background-color': theme('dropdownMenu.link.hover.backgroundColor'),
-                
-        //     '--dropdown-menu-link-active-color': theme('dropdownMenu.link.active.color'),
-        //     '--dropdown-menu-link-active-background-color': theme('dropdownMenu.link.active.backgroundColor'),
-
-        //     '--dropdown-menu-link-disabled-color': theme('dropdownMenu.link.disabled.color'),
-            
-        //     '--dropdown-menu-item-padding-x': theme('dropdownMenu.item.paddingX'),
-
-        //     '--dropdown-menu-header-color': theme('dropdownMenu.header.color'),
-        //     '--dropdown-menu-header-padding-y': theme('dropdownMenu.header.paddingY')
-        // },
-
-        // The dropdown wrapper (`<div>`)
-        '.dropup, .dropright, .dropdown, .dropleft': {
-            position: 'relative'
-        },
-
-        '.dropdown-toggle': {
-            whiteSpace: 'nowrap',
-        },
-            
-        '.dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
-            display: 'inline-block',
-            marginLeft: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: '.3em solid',
-            borderRight: '.3em solid transparent',
-            borderBottom: 0,
-            borderLeft: '.3em solid transparent'
-        } : undefined,
-
-        // The dropdown menu
-        '.dropdown-menu': {
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            zIndex: theme('dropdownMenu.zIndex'),
-            display: 'none', // none by default, but block on "open" of the menu
-            minWidth: theme('dropdownMenu.minWidth'),
-            padding: `${theme('dropdownMenu.paddingY')} 0`,
-            // margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
-            fontSize: theme('dropdownMenu.fontSize'),
-            color: theme('dropdownMenu.color'),
-            textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
-            listStyle: 'none',
-            backgroundColor: theme('dropdownMenu.backgroundColor'),
-            backgroundClip: 'padding-box',
-            border: `${theme('dropdownMenu.borderWidth')} solid ${theme('dropdownMenu.borderColor')}`,
-            borderRadius: `${theme('dropdownMenu.borderRadius')}`,
-            boxShadow: theme('dropdownMenu.enableShadows') ? theme('dropdownMenu.boxShadow') : undefined,
-
-            // When enabled Popper.js, reset basic dropdown position
-            // stylelint-disable-next-line no-duplicate-selectors
-            '&[x-placement^="top"], &[x-placement^="right"], &[x-placement^="bottom"], &[x-placement^="left"]': {
-                right: 'auto',
-                bottom: 'auto'
-            }
-        },
-
-        // Allow for dropdowns to go bottom up (aka, dropup-menu)
-        // Just add .dropup after the standard .dropdown class and you're set.
-        '.dropup .dropdown-menu': {
-            top: 'auto',
-            bottom: '100%',
-            marginTop: 0,
-            // marginBottom: theme('dropdownMenu.spacer')
-        },
-    
-        '.dropup .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
-            display: 'inline-block',
-            marginLeft: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: 0,
-            borderRight: '.3em solid transparent',
-            borderBottom: '.3em solid',
-            borderLeft: '.3em solid transparent'
-        } : undefined,
-        
-        '.dropright .dropdown-menu': {
-            top: 0,
-            right: 'auto',
-            left: '100%',
-            marginTop: 0,
-            // marginLeft: theme('dropdownMenu.spacer')
-        },
-    
-        '.dropright .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
-            display: 'inline-block',
-            marginLeft: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: '.3em solid transparent',
-            borderRight: 0,
-            borderBottom: '.3em solid transparent',
-            borderLeft: '.3em solid',
-            verticalAlign: 0
-        } : undefined,
-        
-        '.dropleft .dropdown-menu': {
-            top: 0,
-            right: '100%',
-            left: 'auto',
-            marginTop: 0,
-            // marginRight: theme('dropdownMenu.spacer')
-        },
-          
-        '.dropleft .dropdown-toggle::after': {
-            display: 'none'
-        }, 
-
-        '.dropleft .dropdown-toggle::before': {
-            display: 'inline-block',
-            marginRight: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: '.3em solid transparent',
-            borderLeft: 0,
-            borderBottom: '.3em solid transparent',
-            borderRight: '.3em solid',
-            verticalAlign: 0
-        },
-
-        // Dividers (basically an `<hr>`) within the dropdown
-        '.dropdown-divider': {
-            height: 0,
-            margin: `calc(${theme('dropdownMenu.spacer')} / 2) 0`,
-            overflow: 'hidden',
-            borderTop: `1px solid ${theme('dropdownMenu.divider.backgroundColor')}`,
-        },
-
-        // Links, buttons, and more within the dropdown menu
-        //
-        // `<button>`-specific styles are denoted with `// For <button>s`
-        '.dropdown-item': {
-            display: 'block',
-            width: '100%', // For `<button>`s
-            padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
-            clear: 'both',
-            fontWeight: 'normal',
-            color: theme('dropdownMenu.link.color'),
-            textAlign: 'inherit', // For `<button>`s
-            textDecoration: 'none',
-            whiteSpace: 'nowrap', // prevent links from randomly breaking onto new lines
-            backgroundColor: 'transparent', // For `<button>`s
-            border: 0, // For `<button>`s
-        },
-    
-        '.dropdown-item:hover, .dropdown-item:focus': {
-            color: theme('dropdownMenu.link.hover.color'),
-            textDecoration: 'none',
-            backgroundColor: theme('dropdownMenu.link.hover.backgroundColor')
-        },
-        
-        '.dropdown-item.active, .dropdown-item:active': {
-            color: theme('dropdownMenu.link.active.color'),
-            textDecoration: 'none',
-            backgroundColor: theme('dropdownMenu.link.active.backgroundColor')
-        },
-        
-        '.dropdown-item.disabled, .dropdown-item:disabled': {
-            color: theme('dropdownMenu.link.disabled.color'),
-            pointerEvents: 'none',
-            backgroundColor: 'transparent',
-            backgroundImage: 'none'
-        },
-        
-        '.dropdown-menu.show': {
-            display: 'block'
-        },
-        
-        // Dropdown section headers
-        '.dropdown-header': {
-            display: theme('dropdownMenu.header.display'),
-            padding: `${theme('dropdownMenu.header.paddingY')} ${theme('dropdownMenu.header.paddingX')}`,
-            marginBottom: 0, // for use with heading elements
-            fontSize: theme('dropdownMenu.header.fontSize'),
-            fontWeight: theme('dropdownMenu.header.fontWeight'),
-            color: theme('dropdownMenu.header.color'),
-            whiteSpace: 'nowrap' // as with > li > a
-        },
-        
-        // Dropdown text
-        '.dropdown-item-text': {
-            display: theme('dropdownMenu.item.display'),
-            padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
-            color: theme('dropdownMenu.link.color'),
-        },
-
-        '.dropdown-menu-left': {
-            right: 'auto',
-            left: 0
-        },
-
-        '.dropdown-menu-right': {
-            // right: 0,
-            left: 'auto'
-        }
-    };
-
-    if(theme('dropdownMenu.paddingY') === 0) {
-        component['.dropdown-item']['&:first-child'] = {
-            borderTopLeftRadius: theme('dropdownMenu.inner.borderRadius'),
-            borderTopRightRadius: theme('dropdownMenu.inner.borderRadius'),
-        };
-
-        component['.dropdown-item']['&:last-child'] = {
-            borderBottomLeftRadius: theme('dropdownMenu.inner.borderRadius'),
-            borderBottomRightRadius: theme('dropdownMenu.inner.borderRadius'),
-        };
-    }
-
-    addComponents(component);
-}, {
-    theme: {
-        dropdownMenu: theme => ({
-            enableShadows: true,
-            enableCarets: true,
-            zIndex: 1000,
-            minWidth: '10rem',
-            paddingY: '.5rem',
-            spacer: '.125rem',
-            fontSize: '1rem',
-            color: 'inherit',
-            backgroundColor: theme('colors.white', colors.white),
-            borderColor: Color(theme('colors.black', colors.black)).fade(.85),
-            borderRadius: '.25rem',
-            borderWidth: '1px',
-            boxShadow: `0 .5rem 1rem ${Color(theme('colors.black', colors.black)).fade(.85)}`,
-            
-            inner: {
-                borderRadius: 'calc(.25rem - 1px)'
-            },
-            
-            divider: {
-                backgroundColor: theme('colors.gray.100', colors.gray[100]),
-            },
-
-            link: {
-                color: theme('colors.gray.800', colors.gray[800]),
-                
-                hover: {
-                    color: Color(theme('colors.gray.800', colors.gray[800])).darken(.5).hex(),
-                    backgroundColor: theme('colors.gray.100', colors.gray[100])
-                },
-
-                active: {
-                    color: theme('colors.white', colors.white),
-                    backgroundColor: theme('variations.primary', variations.primary),
-                },
-
-                disabled: {
-                    color: theme('colors.gray.500', colors.gray[500])
-                }
-            },
-
-            item: {
-                display: 'block',
-                paddingY: '.25rem',
-                paddingX: '1rem',
-            },
-
-            header: {
-                color: theme('colors.gray.500', colors.gray[500]),
-                display: 'block',
-                fontSize: '.875rem',
-                fontWeight: 'bold',
-                paddingX: '.5rem',
-                paddingY: '.5rem'
-            }
-        })
-    }
-});