@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
142 lines (141 loc) • 5.65 kB
JavaScript
import { defineComponent as B, resolveComponent as t, openBlock as d, createElementBlock as s, normalizeStyle as E, unref as p, normalizeClass as a, Fragment as i, renderList as w, createBlock as m, withCtx as b, createVNode as r, createCommentVNode as M } from "vue";
import { useCommon as c } from "../../composables/useCommon.js";
import { useColors as N } from "../../composables/useColors.js";
import { useTheme as g } from "../../composables/useTheme.js";
import u from "./MenuItem.vue.js";
import A from "../accordion/AccordionItem.vue.js";
import S from "../divider/Divider.vue.js";
const V = {
...c.props(),
...N.props("secondary"),
items: Array,
collapsible: {
type: Boolean,
default: !0
},
collapseIcon: String,
expanded: Boolean,
disabled: Boolean,
rounded: {
type: Boolean,
default: !0
},
filled: {
type: Boolean,
default: !0
},
minimal: Boolean
}, X = {
name: "XMenu",
validators: {
...c.validators()
}
}, G = /* @__PURE__ */ B({
...X,
props: V,
emits: ["expand", "item-click"],
setup(y) {
const z = y, { styles: k, classes: v, className: $ } = g("Menu", {}, z);
return (e, o) => {
const f = t("x-menu");
return e.items ? (d(), s("div", {
key: 0,
style: E(p(k)),
class: a([
"space-y-1",
p($),
p(v).wrapper
])
}, [
(d(!0), s(i, null, w(e.items, (l, I) => (d(), s(i, { key: I }, [
l.items ? (d(), s(i, { key: 0 }, [
l.collapsible !== !1 ? (d(), m(A, {
key: 0,
icon: l.collapseIcon || e.collapseIcon,
expanded: l.expanded || e.expanded,
disabled: e.disabled || l.disabled,
"show-icon": !!(l.collapseIcon || e.collapseIcon),
class: "x-menu-inner space-y-1",
onExpand: o[1] || (o[1] = (n) => e.$emit("expand"))
}, {
default: b(({}) => [
r(u, {
item: l,
rounded: e.rounded,
color: l.color || e.color,
filled: l.filled || e.filled,
size: l.size || e.size,
disabled: e.disabled || l.disabled,
minimal: e.minimal,
class: "font-medium"
}, null, 8, ["item", "rounded", "color", "filled", "size", "disabled", "minimal"])
]),
content: b(({ expand: n }) => [
r(f, {
class: a(["border-l ml-4 border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
items: l.items,
color: l.color || e.color,
size: l.size || e.size,
collapsible: e.collapsible,
"collapse-icon": l.collapseIcon || e.collapseIcon,
expanded: l.expanded || e.expanded,
disabled: e.disabled || l.disabled,
rounded: e.rounded,
filled: e.filled,
minimal: e.minimal,
onExpand: (C) => n(!1),
onItemClick: o[0] || (o[0] = (C) => e.$emit("item-click"))
}, null, 8, ["class", "items", "color", "size", "collapsible", "collapse-icon", "expanded", "disabled", "rounded", "filled", "minimal", "onExpand"])
]),
_: 2
}, 1032, ["icon", "expanded", "disabled", "show-icon"])) : (d(), s(i, { key: 1 }, [
r(u, {
item: l,
rounded: e.rounded,
color: l.color || e.color,
filled: l.filled || e.filled,
size: l.size || e.size,
disabled: e.disabled || l.disabled,
minimal: e.minimal,
class: "font-medium",
inactive: "",
onClick: o[2] || (o[2] = (n) => e.$emit("item-click"))
}, null, 8, ["item", "rounded", "color", "filled", "size", "disabled", "minimal"]),
r(f, {
class: a(["x-menu-inner space-y-1 ml-4 border-l border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
items: l.items,
color: l.color || e.color,
size: l.size || e.size,
collapsible: e.collapsible,
"collapse-icon": l.collapseIcon || e.collapseIcon,
expanded: l.expanded || e.expanded,
disabled: e.disabled || l.disabled,
minimal: e.minimal,
rounded: e.rounded,
filled: e.filled,
onExpand: o[3] || (o[3] = (n) => e.$emit("expand"))
}, null, 8, ["class", "items", "color", "size", "collapsible", "collapse-icon", "expanded", "disabled", "minimal", "rounded", "filled"])
], 64))
], 64)) : (d(), s(i, { key: 1 }, [
l.divider ? (d(), m(S, { key: 0 })) : (d(), m(u, {
key: 1,
item: l,
rounded: e.rounded,
color: l.color || e.color,
filled: l.filled || e.filled,
size: l.size || e.size,
disabled: e.disabled || l.disabled,
minimal: e.minimal,
class: a({ "my-2": l.divider }),
onClick: o[4] || (o[4] = (n) => e.$emit("item-click")),
onActive: o[5] || (o[5] = (n) => e.$emit("expand"))
}, null, 8, ["item", "rounded", "color", "filled", "size", "disabled", "minimal", "class"]))
], 64))
], 64))), 128))
], 6)) : M("", !0);
};
}
});
export {
G as default
};