@vue-interface/dropdown-menu 2.0.0-beta.4 → 2.0.0-beta.6

package/dist/dropdown-menu.js

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

package/dist/dropdown-menu.umd.cjs

@@ -0,0 +1 @@
+(function(t,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.DropdownMenu={},t.Vue))})(this,function(t,n){"use strict";function d(o,e){o.props.class=`${o.props.class||""} ${e}`.trim()}function p(o){for(const e of o){e.type===n.Fragment&&p(e.children),e.props=Object.assign({class:void 0},e.props),e.attrs=Object.assign({},e.attrs),e.attrs.on||(e.attrs.on={});const s=e.props.class&&e.props.class.match(/dropdown-item/),r=e.props.class&&e.props.class.match(/dropdown-divider/);typeof e.type=="string"&&e.type.match(/^h\d$/)?d(e,"dropdown-header"):e.type==="hr"&&!r?(e.type="div",d(e,"dropdown-divider")):!s&&!r&&d(e,"dropdown-item")}return o}const a=(o,e)=>n.h("div",{},p(e.slots.default())),l=n.defineComponent({name:"DropdownMenu",components:{DropdownMenuItems:a},props:{align:{type:String,default:"left",validate(o){return["left","right"].indexOf(o.toLowerCase())!==-1}},show:Boolean}}),c=(o,e)=>{const s=o.__vccOpts||o;for(const[r,i]of e)s[r]=i;return s},f=["aria-labelledby"];function u(o,e,s,r,i,h){const w=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":o.$attrs.id},[n.createVNode(w,null,{default:n.withCtx(()=>[n.renderSlot(o.$slots,"default")]),_:3})],10,f)}const m=c(l,[["render",u]]);t.DropdownMenu=m,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/{index.js → dist/index.d.ts}

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

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

@@ -0,0 +1,39 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    /**
+     * Display the dropdown menu aligned left or right
+     *
+     * @property String
+     */
+    align: {
+        type: StringConstructor;
+        default: string;
+        validate(value: any): boolean;
+    };
+    /**
+     * The default visibility of the dropdown menu.
+     *
+     * @property Object
+     */
+    show: BooleanConstructor;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Display the dropdown menu aligned left or right
+     *
+     * @property String
+     */
+    align: {
+        type: StringConstructor;
+        default: string;
+        validate(value: any): boolean;
+    };
+    /**
+     * The default visibility of the dropdown menu.
+     *
+     * @property Object
+     */
+    show: BooleanConstructor;
+}>>, {
+    align: string;
+    show: boolean;
+}>;
+export default _sfc_main;

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

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

package/package.json

@@ -1,15 +1,24 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "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"
+    },
+    "./tailwind": "./tailwindcss/index.js",
+    "./tailwind/safelist": "./tailwindcss/safelist.js"
+  },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
     "dev": "vite",
@@ -48,18 +57,21 @@
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.0",
-    "@vitejs/plugin-vue": "^3.1.2",
-    "autoprefixer": "^10.4.12",
+    "@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.18",
-    "tailwindcss": "^3.1.8",
-    "vite": "^3.1.7",
-    "vue": "^3.2.40",
-    "vue-router": "^4.1.5"
+    "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"
   }
 }

package/dist/dropdown-menu.es.js

@@ -1,69 +0,0 @@
-import { h as d, Fragment as m, resolveComponent as u, openBlock as f, createElementBlock as w, normalizeClass as h, createVNode as g, withCtx as _, renderSlot as y } 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 a(e) {
-  for (const t of e) {
-    t.type === m && 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
-  }
-}, v = ["aria-labelledby"];
-function D(e, t, n, r, o, I) {
-  const l = u("dropdown-menu-items");
-  return f(), w("div", {
-    class: h(["dropdown-menu", {
-      "dropdown-menu-left": n.align === "left",
-      "dropdown-menu-right": n.align === "right",
-      show: n.show
-    }]),
-    "aria-labelledby": e.$attrs.id
-  }, [
-    g(l, null, {
-      default: _(() => [
-        y(e.$slots, "default", {
-          onClick: t[0] || (t[0] = (...c) => e.onItemClick && e.onItemClick(...c))
-        })
-      ]),
-      _: 3
-    })
-  ], 10, v);
-}
-const O = /* @__PURE__ */ k(C, [["render", D]]);
-export {
-  O as DropdownMenu
-};

package/dist/dropdown-menu.umd.js

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

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,71 +0,0 @@
-<script>
-import { Fragment, 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 changeMenuItems(items) {
-    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/);
-
-        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>