@j-solution/components 1.7.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +413 -415
- package/assets/jwms-portal-frontend-Ct2Tc7yj.css +1 -0
- package/assets/styles/global-utilities.css +34 -0
- package/assets/styles/j-components.css +1 -1
- package/assets/styles/themes.css +443 -443
- package/components/atoms/JButton.vue.cjs +6 -1
- package/components/atoms/JButton.vue.cjs.map +1 -1
- package/components/atoms/JButton.vue.js +10 -85
- package/components/atoms/JButton.vue.js.map +1 -1
- package/components/atoms/JButton.vue2.cjs +1 -1
- package/components/atoms/JButton.vue2.cjs.map +1 -1
- package/components/atoms/JButton.vue2.js +85 -2
- package/components/atoms/JButton.vue2.js.map +1 -1
- package/components/atoms/JGrid.vue.cjs +1 -1
- package/components/atoms/JGrid.vue.js +1 -1
- package/components/atoms/JGrid.vue2.cjs +1 -1
- package/components/atoms/JGrid.vue2.cjs.map +1 -1
- package/components/atoms/JGrid.vue2.js +39 -35
- package/components/atoms/JGrid.vue2.js.map +1 -1
- package/components/atoms/JLabel.vue.cjs +1 -1
- package/components/atoms/JLabel.vue.cjs.map +1 -1
- package/components/atoms/JLabel.vue.js +26 -22
- package/components/atoms/JLabel.vue.js.map +1 -1
- package/components/atoms/JSectionTitle.vue.cjs +7 -0
- package/components/atoms/JSectionTitle.vue.cjs.map +1 -0
- package/components/atoms/JSectionTitle.vue.js +13 -0
- package/components/atoms/JSectionTitle.vue.js.map +1 -0
- package/components/atoms/JSectionTitle.vue2.cjs +2 -0
- package/components/atoms/JSectionTitle.vue2.cjs.map +1 -0
- package/components/atoms/JSectionTitle.vue2.js +67 -0
- package/components/atoms/JSectionTitle.vue2.js.map +1 -0
- package/components/atoms/JSplitter.vue.cjs +6 -1
- package/components/atoms/JSplitter.vue.cjs.map +1 -1
- package/components/atoms/JSplitter.vue.js +10 -59
- package/components/atoms/JSplitter.vue.js.map +1 -1
- package/components/atoms/JSplitter.vue2.cjs +1 -1
- package/components/atoms/JSplitter.vue2.cjs.map +1 -1
- package/components/atoms/JSplitter.vue2.js +59 -2
- package/components/atoms/JSplitter.vue2.js.map +1 -1
- package/components/examples/ExampleCrudPage.vue.cjs +1 -1
- package/components/examples/ExampleCrudPage.vue.cjs.map +1 -1
- package/components/examples/ExampleCrudPage.vue.js +228 -208
- package/components/examples/ExampleCrudPage.vue.js.map +1 -1
- package/components/examples/ExampleTabMappingPage.vue.cjs +1 -1
- package/components/examples/ExampleTabMappingPage.vue.cjs.map +1 -1
- package/components/examples/ExampleTabMappingPage.vue.js +341 -368
- package/components/examples/ExampleTabMappingPage.vue.js.map +1 -1
- package/components/molecules/JAlert.vue.cjs +1 -1
- package/components/molecules/JAlert.vue.cjs.map +1 -1
- package/components/molecules/JAlert.vue.js +18 -16
- package/components/molecules/JAlert.vue.js.map +1 -1
- package/components/molecules/JCard.vue.cjs +1 -1
- package/components/molecules/JCard.vue.cjs.map +1 -1
- package/components/molecules/JCard.vue.js +55 -39
- package/components/molecules/JCard.vue.js.map +1 -1
- package/components/molecules/JEmptyState.vue.cjs +7 -0
- package/components/molecules/JEmptyState.vue.cjs.map +1 -0
- package/components/molecules/JEmptyState.vue.js +13 -0
- package/components/molecules/JEmptyState.vue.js.map +1 -0
- package/components/molecules/JEmptyState.vue2.cjs +2 -0
- package/components/molecules/JEmptyState.vue2.cjs.map +1 -0
- package/components/molecules/JEmptyState.vue2.js +127 -0
- package/components/molecules/JEmptyState.vue2.js.map +1 -0
- package/components/molecules/JFormField.vue.cjs +6 -1
- package/components/molecules/JFormField.vue.cjs.map +1 -1
- package/components/molecules/JFormField.vue.js +10 -264
- package/components/molecules/JFormField.vue.js.map +1 -1
- package/components/molecules/JFormField.vue2.cjs +2 -0
- package/components/molecules/JFormField.vue2.cjs.map +1 -0
- package/components/molecules/JFormField.vue2.js +271 -0
- package/components/molecules/JFormField.vue2.js.map +1 -0
- package/components/molecules/JTabs.vue.cjs +1 -1
- package/components/molecules/JTabs.vue.js +1 -1
- package/components/molecules/JTabs.vue2.cjs +1 -1
- package/components/molecules/JTabs.vue2.cjs.map +1 -1
- package/components/molecules/JTabs.vue2.js +44 -50
- package/components/molecules/JTabs.vue2.js.map +1 -1
- package/components/molecules/JTitlebar.vue.cjs +1 -1
- package/components/molecules/JTitlebar.vue.cjs.map +1 -1
- package/components/molecules/JTitlebar.vue.js +23 -20
- package/components/molecules/JTitlebar.vue.js.map +1 -1
- package/components/organisms/JDynamicForm.vue2.cjs +1 -1
- package/components/organisms/JDynamicForm.vue2.cjs.map +1 -1
- package/components/organisms/JDynamicForm.vue2.js +35 -32
- package/components/organisms/JDynamicForm.vue2.js.map +1 -1
- package/components/organisms/JDynamicTabs.vue.cjs +1 -1
- package/components/organisms/JDynamicTabs.vue.cjs.map +1 -1
- package/components/organisms/JDynamicTabs.vue.js +47 -52
- package/components/organisms/JDynamicTabs.vue.js.map +1 -1
- package/components/organisms/JFilterBar.vue.cjs +6 -1
- package/components/organisms/JFilterBar.vue.cjs.map +1 -1
- package/components/organisms/JFilterBar.vue.js +10 -137
- package/components/organisms/JFilterBar.vue.js.map +1 -1
- package/components/organisms/JFilterBar.vue2.cjs +1 -1
- package/components/organisms/JFilterBar.vue2.cjs.map +1 -1
- package/components/organisms/JFilterBar.vue2.js +143 -2
- package/components/organisms/JFilterBar.vue2.js.map +1 -1
- package/components/organisms/JFormModal.vue.cjs +1 -1
- package/components/organisms/JFormModal.vue.cjs.map +1 -1
- package/components/organisms/JFormModal.vue.js +54 -49
- package/components/organisms/JFormModal.vue.js.map +1 -1
- package/components/organisms/JHeader.vue.cjs +1 -1
- package/components/organisms/JHeader.vue.cjs.map +1 -1
- package/components/organisms/JHeader.vue.js +191 -190
- package/components/organisms/JHeader.vue.js.map +1 -1
- package/components/organisms/JModal.vue.cjs +1 -1
- package/components/organisms/JModal.vue.cjs.map +1 -1
- package/components/organisms/JModal.vue.js +47 -45
- package/components/organisms/JModal.vue.js.map +1 -1
- package/components/organisms/JPageContainer.vue.cjs +1 -1
- package/components/organisms/JPageContainer.vue.cjs.map +1 -1
- package/components/organisms/JPageContainer.vue.js +22 -22
- package/components/organisms/JPageContainer.vue.js.map +1 -1
- package/components/organisms/JSearchPanel.vue2.cjs +1 -1
- package/components/organisms/JSearchPanel.vue2.cjs.map +1 -1
- package/components/organisms/JSearchPanel.vue2.js +34 -32
- package/components/organisms/JSearchPanel.vue2.js.map +1 -1
- package/components/organisms/JShuttle.vue.cjs +7 -0
- package/components/organisms/JShuttle.vue.cjs.map +1 -0
- package/components/organisms/JShuttle.vue.js +13 -0
- package/components/organisms/JShuttle.vue.js.map +1 -0
- package/components/organisms/JShuttle.vue2.cjs +2 -0
- package/components/organisms/JShuttle.vue2.cjs.map +1 -0
- package/components/organisms/JShuttle.vue2.js +216 -0
- package/components/organisms/JShuttle.vue2.js.map +1 -0
- package/components/organisms/JSidebar/JSidebar.vue.cjs +2 -0
- package/components/organisms/JSidebar/JSidebar.vue.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebar.vue.js +189 -0
- package/components/organisms/JSidebar/JSidebar.vue.js.map +1 -0
- package/components/{molecules/JFormField.vue3.cjs → organisms/JSidebar/JSidebar.vue2.cjs} +2 -2
- package/components/organisms/JSidebar/JSidebar.vue2.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebar.vue2.js +5 -0
- package/components/organisms/JSidebar/JSidebar.vue2.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.js +89 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.js +5 -0
- package/components/organisms/JSidebar/JSidebarGroup.vue2.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.js +79 -0
- package/components/organisms/JSidebar/JSidebarItem.vue.js.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.cjs +2 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.cjs.map +1 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.js +5 -0
- package/components/organisms/JSidebar/JSidebarItem.vue2.js.map +1 -0
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs.map +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js +52 -52
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js.map +1 -1
- package/components/shadcn/Card.vue.cjs +1 -1
- package/components/shadcn/Card.vue.cjs.map +1 -1
- package/components/shadcn/Card.vue.js +1 -1
- package/components/shadcn/Card.vue.js.map +1 -1
- package/components/shadcn/CardContent.vue.cjs +1 -1
- package/components/shadcn/CardContent.vue.cjs.map +1 -1
- package/components/shadcn/CardContent.vue.js +4 -4
- package/components/shadcn/CardContent.vue.js.map +1 -1
- package/components/shadcn/CardHeader.vue.cjs +1 -1
- package/components/shadcn/CardHeader.vue.cjs.map +1 -1
- package/components/shadcn/CardHeader.vue.js +5 -5
- package/components/shadcn/CardHeader.vue.js.map +1 -1
- package/components/shadcn/Input.vue.cjs +1 -1
- package/components/shadcn/Input.vue.cjs.map +1 -1
- package/components/shadcn/Input.vue.js +3 -3
- package/components/shadcn/Input.vue.js.map +1 -1
- package/components/shadcn/SelectTrigger.vue.cjs +1 -1
- package/components/shadcn/SelectTrigger.vue.cjs.map +1 -1
- package/components/shadcn/SelectTrigger.vue.js +1 -1
- package/components/shadcn/SelectTrigger.vue.js.map +1 -1
- package/components/shadcn/TabsContent.vue.cjs +1 -1
- package/components/shadcn/TabsContent.vue.cjs.map +1 -1
- package/components/shadcn/TabsContent.vue.js +1 -1
- package/components/shadcn/TabsContent.vue.js.map +1 -1
- package/components/shadcn/TabsList.vue.cjs +1 -1
- package/components/shadcn/TabsList.vue.cjs.map +1 -1
- package/components/shadcn/TabsList.vue.js +10 -10
- package/components/shadcn/TabsList.vue.js.map +1 -1
- package/components/shadcn/Textarea.vue.cjs +1 -1
- package/components/shadcn/Textarea.vue.cjs.map +1 -1
- package/components/shadcn/Textarea.vue.js +1 -1
- package/components/shadcn/Textarea.vue.js.map +1 -1
- package/components/shadcn/index.cjs +1 -1
- package/components/shadcn/index.cjs.map +1 -1
- package/components/shadcn/index.js +4 -4
- package/components/shadcn/index.js.map +1 -1
- package/components/templates/JLayout.vue.cjs.map +1 -1
- package/components/templates/JLayout.vue.js.map +1 -1
- package/components/templates/JLayoutSimple.vue.cjs +1 -1
- package/components/templates/JLayoutSimple.vue.cjs.map +1 -1
- package/components/templates/JLayoutSimple.vue.js +36 -30
- package/components/templates/JLayoutSimple.vue.js.map +1 -1
- package/index.cjs +1 -1
- package/index.js +75 -67
- package/package.json +1 -1
- package/types/index.d.ts +662 -461
- package/types/sidebar.types.cjs +2 -0
- package/types/sidebar.types.cjs.map +1 -0
- package/types/sidebar.types.js +5 -0
- package/types/sidebar.types.js.map +1 -0
- package/assets/jwms-portal-frontend-CwxPfHfa.css +0 -1
- package/components/molecules/JFormField.vue3.cjs.map +0 -1
- package/components/molecules/JFormField.vue3.js +0 -6
- package/components/molecules/JFormField.vue3.js.map +0 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { defineComponent as L, inject as N, ref as S, computed as v, watch as B, resolveComponent as J, createElementBlock as n, unref as f, openBlock as e, Fragment as s, createElementVNode as c, renderList as x, createBlock as p, createCommentVNode as h, createVNode as A, normalizeClass as y, toDisplayString as g } from "vue";
|
|
2
|
+
import { SIDEBAR_INJECTION_KEY as G } from "../../../types/sidebar.types.js";
|
|
3
|
+
import I from "../../atoms/JIcon.vue.js";
|
|
4
|
+
import _ from "./JSidebarItem.vue.js";
|
|
5
|
+
import { cn as C } from "../../../lib/utils.js";
|
|
6
|
+
const M = { key: 1 }, V = { class: "flex-1 truncate text-left" }, z = {
|
|
7
|
+
key: 0,
|
|
8
|
+
class: "text-[10px] text-muted-foreground/60 flex-shrink-0"
|
|
9
|
+
}, D = { class: "overflow-hidden ml-3 pl-2 border-l border-border/50" }, K = /* @__PURE__ */ L({
|
|
10
|
+
__name: "JSidebarGroup",
|
|
11
|
+
props: {
|
|
12
|
+
item: {}
|
|
13
|
+
},
|
|
14
|
+
emits: ["menu-click"],
|
|
15
|
+
setup(u, { emit: b }) {
|
|
16
|
+
const a = u, E = b, m = N(G), l = S(!1), k = v(() => a.item.children ? a.item.children.filter((t) => t.menuType === "L").length : 0), w = () => {
|
|
17
|
+
l.value = !l.value;
|
|
18
|
+
}, d = (t, o) => {
|
|
19
|
+
E("menu-click", t, o);
|
|
20
|
+
}, T = v(() => {
|
|
21
|
+
if (!m.activePath || !a.item.children) return !1;
|
|
22
|
+
const t = (o) => {
|
|
23
|
+
for (const i of o)
|
|
24
|
+
if (i.menuType === "L" && i.path === m.activePath || i.children && t(i.children)) return !0;
|
|
25
|
+
return !1;
|
|
26
|
+
};
|
|
27
|
+
return t(a.item.children);
|
|
28
|
+
});
|
|
29
|
+
return B(T, (t) => {
|
|
30
|
+
t && (l.value = !0);
|
|
31
|
+
}, { immediate: !0 }), (t, o) => {
|
|
32
|
+
const i = J("JSidebarGroup", !0);
|
|
33
|
+
return f(m).collapsed ? (e(), n(s, { key: 0 }, [
|
|
34
|
+
o[0] || (o[0] = c("div", { class: "h-px bg-border mx-2 my-1" }, null, -1)),
|
|
35
|
+
(e(!0), n(s, null, x(u.item.children, (r) => (e(), n(s, {
|
|
36
|
+
key: r.id
|
|
37
|
+
}, [
|
|
38
|
+
r.menuType === "L" ? (e(), p(_, {
|
|
39
|
+
key: 0,
|
|
40
|
+
item: r,
|
|
41
|
+
onMenuClick: d
|
|
42
|
+
}, null, 8, ["item"])) : h("", !0)
|
|
43
|
+
], 64))), 128))
|
|
44
|
+
], 64)) : (e(), n("div", M, [
|
|
45
|
+
c("button", {
|
|
46
|
+
class: "flex items-center gap-1.5 w-full px-2 py-1.5 mt-1 text-xs font-semibold text-muted-foreground cursor-pointer select-none transition-colors hover:text-foreground",
|
|
47
|
+
onClick: w
|
|
48
|
+
}, [
|
|
49
|
+
A(I, {
|
|
50
|
+
name: "chevronRight",
|
|
51
|
+
size: "sm",
|
|
52
|
+
class: y(f(C)(
|
|
53
|
+
"flex-shrink-0 transition-transform duration-200",
|
|
54
|
+
l.value && "rotate-90"
|
|
55
|
+
))
|
|
56
|
+
}, null, 8, ["class"]),
|
|
57
|
+
c("span", V, g(u.item.label), 1),
|
|
58
|
+
k.value > 0 ? (e(), n("span", z, g(k.value), 1)) : h("", !0)
|
|
59
|
+
]),
|
|
60
|
+
c("div", {
|
|
61
|
+
class: y(f(C)(
|
|
62
|
+
"grid transition-[grid-template-rows] duration-200 ease-out",
|
|
63
|
+
l.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
|
|
64
|
+
))
|
|
65
|
+
}, [
|
|
66
|
+
c("div", D, [
|
|
67
|
+
(e(!0), n(s, null, x(u.item.children, (r) => (e(), n(s, {
|
|
68
|
+
key: r.id
|
|
69
|
+
}, [
|
|
70
|
+
r.menuType === "L" ? (e(), p(_, {
|
|
71
|
+
key: 0,
|
|
72
|
+
item: r,
|
|
73
|
+
onMenuClick: d
|
|
74
|
+
}, null, 8, ["item"])) : r.menuType === "F" ? (e(), p(i, {
|
|
75
|
+
key: 1,
|
|
76
|
+
item: r,
|
|
77
|
+
onMenuClick: d
|
|
78
|
+
}, null, 8, ["item"])) : h("", !0)
|
|
79
|
+
], 64))), 128))
|
|
80
|
+
])
|
|
81
|
+
], 2)
|
|
82
|
+
]));
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
export {
|
|
87
|
+
K as default
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=JSidebarGroup.vue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSidebarGroup.vue.js","sources":["../../../../../src/components/organisms/JSidebar/JSidebarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, inject, watch } from 'vue'\nimport type { SidebarMenuItem } from '@/types/sidebar.types'\nimport { SIDEBAR_INJECTION_KEY } from '@/types/sidebar.types'\nimport JIcon from '@/components/atoms/JIcon.vue'\nimport JSidebarItem from './JSidebarItem.vue'\nimport { cn } from '@/lib/utils'\n\n/**\n * JSidebarGroup - 그룹 헤더 (menuType='F' 전용)\n * 폴더 타입 메뉴를 렌더링. 펼침/접힘 토글 + 하위 메뉴 재귀 렌더링.\n * 링크(L)는 JSidebarItem에서 처리.\n */\n\nconst props = defineProps<{\n item: SidebarMenuItem\n}>()\n\nconst emit = defineEmits<{\n 'menu-click': [item: SidebarMenuItem, event: MouseEvent]\n}>()\n\nconst state = inject(SIDEBAR_INJECTION_KEY)!\n\nconst isExpanded = ref(false)\n\n/** 직계 자식 중 L 타입 개수 (재귀하지 않음) */\nconst childCount = computed(() => {\n if (!props.item.children) return 0\n return props.item.children.filter(c => c.menuType === 'L').length\n})\n\nconst toggleExpand = () => {\n isExpanded.value = !isExpanded.value\n}\n\n/** 자식의 menu-click을 상위로 전파 */\nconst handleChildClick = (item: SidebarMenuItem, event: MouseEvent) => {\n emit('menu-click', item, event)\n}\n\n/** 현재 경로가 이 그룹의 자식에 포함되면 자동 펼침 */\nconst hasActiveChild = computed(() => {\n if (!state.activePath || !props.item.children) return false\n const checkActive = (items: SidebarMenuItem[]): boolean => {\n for (const child of items) {\n if (child.menuType === 'L' && child.path === state.activePath) return true\n if (child.children && checkActive(child.children)) return true\n }\n return false\n }\n return checkActive(props.item.children)\n})\n\nwatch(hasActiveChild, (active) => {\n if (active) isExpanded.value = true\n}, { immediate: true })\n</script>\n\n<template>\n <!-- Collapsed: 구분선만 -->\n <template v-if=\"state.collapsed\">\n <div class=\"h-px bg-border mx-2 my-1\" />\n <!-- collapsed 상태에서 자식 아이템 직접 렌더링 -->\n <template v-for=\"child in item.children\" :key=\"child.id\">\n <JSidebarItem\n v-if=\"child.menuType === 'L'\"\n :item=\"child\"\n @menu-click=\"handleChildClick\"\n />\n <!-- 중첩 폴더는 collapsed에서 무시 (1단계만) -->\n </template>\n </template>\n\n <!-- Expanded: 그룹 헤더 + 하위 메뉴 -->\n <div v-else>\n <!-- 그룹 헤더 -->\n <button\n class=\"flex items-center gap-1.5 w-full px-2 py-1.5 mt-1 text-xs font-semibold text-muted-foreground cursor-pointer select-none transition-colors hover:text-foreground\"\n @click=\"toggleExpand\"\n >\n <JIcon\n name=\"chevronRight\"\n size=\"sm\"\n :class=\"cn(\n 'flex-shrink-0 transition-transform duration-200',\n isExpanded && 'rotate-90'\n )\"\n />\n <span class=\"flex-1 truncate text-left\">{{ item.label }}</span>\n <span\n v-if=\"childCount > 0\"\n class=\"text-[10px] text-muted-foreground/60 flex-shrink-0\"\n >\n {{ childCount }}\n </span>\n </button>\n\n <!-- 하위 메뉴 (grid-template-rows 애니메이션) -->\n <div\n :class=\"cn(\n 'grid transition-[grid-template-rows] duration-200 ease-out',\n isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\n )\"\n >\n <div class=\"overflow-hidden ml-3 pl-2 border-l border-border/50\">\n <template v-for=\"child in item.children\" :key=\"child.id\">\n <JSidebarItem\n v-if=\"child.menuType === 'L'\"\n :item=\"child\"\n @menu-click=\"handleChildClick\"\n />\n <!-- 중첩 폴더: 재귀 -->\n <JSidebarGroup\n v-else-if=\"child.menuType === 'F'\"\n :item=\"child\"\n @menu-click=\"handleChildClick\"\n />\n </template>\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","state","inject","SIDEBAR_INJECTION_KEY","isExpanded","ref","childCount","computed","c","toggleExpand","handleChildClick","item","event","hasActiveChild","checkActive","items","child","watch","active","_unref","_createElementBlock","_Fragment","_createElementVNode","_openBlock","_renderList","_createBlock","JSidebarItem","_hoisted_1","_createVNode","JIcon","cn","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4","_component_JSidebarGroup"],"mappings":";;;;;;;;;;;;;;;AAcA,UAAMA,IAAQC,GAIRC,IAAOC,GAIPC,IAAQC,EAAOC,CAAqB,GAEpCC,IAAaC,EAAI,EAAK,GAGtBC,IAAaC,EAAS,MACrBV,EAAM,KAAK,WACTA,EAAM,KAAK,SAAS,OAAO,OAAKW,EAAE,aAAa,GAAG,EAAE,SAD1B,CAElC,GAEKC,IAAe,MAAM;AACzB,MAAAL,EAAW,QAAQ,CAACA,EAAW;AAAA,IACjC,GAGMM,IAAmB,CAACC,GAAuBC,MAAsB;AACrE,MAAAb,EAAK,cAAcY,GAAMC,CAAK;AAAA,IAChC,GAGMC,IAAiBN,EAAS,MAAM;AACpC,UAAI,CAACN,EAAM,cAAc,CAACJ,EAAM,KAAK,SAAU,QAAO;AACtD,YAAMiB,IAAc,CAACC,MAAsC;AACzD,mBAAWC,KAASD;AAElB,cADIC,EAAM,aAAa,OAAOA,EAAM,SAASf,EAAM,cAC/Ce,EAAM,YAAYF,EAAYE,EAAM,QAAQ,EAAG,QAAO;AAE5D,eAAO;AAAA,MACT;AACA,aAAOF,EAAYjB,EAAM,KAAK,QAAQ;AAAA,IACxC,CAAC;AAED,WAAAoB,EAAMJ,GAAgB,CAACK,MAAW;AAChC,MAAIA,QAAmB,QAAQ;AAAA,IACjC,GAAG,EAAE,WAAW,IAAM;;AAKJ,aAAAC,EAAAlB,CAAA,EAAM,kBAAtBmB,EAWWC,GAAA,EAAA,KAAA,KAAA;AAAA,wBAVTC,EAAwC,OAAA,EAAnC,OAAM,2BAAA,GAA0B,MAAA,EAAA;AAAA,SAErCC,EAAA,EAAA,GAAAH,EAOWC,GAAA,MAAAG,EAPe1B,EAAA,KAAK,WAAdkB;UAA8B,KAAAA,EAAM;AAAA,QAAA;UAE3CA,EAAM,aAAQ,YADtBS,EAIEC,GAAA;AAAA;YAFC,MAAMV;AAAA,YACN,aAAYN;AAAA,UAAA;;sBAOnBU,EA8CM,OAAAO,GAAA;AAAA,QA5CJL,EAmBS,UAAA;AAAA,UAlBP,OAAM;AAAA,UACL,SAAOb;AAAA,QAAA;UAERmB,EAOEC,GAAA;AAAA,YANA,MAAK;AAAA,YACL,MAAK;AAAA,YACJ,SAAOV,EAAAW,CAAA;AAAA;cAA2E1B,EAAA,SAAU;AAAA,YAAA;;UAK/FkB,EAA+D,QAA/DS,GAA+DC,EAApBlC,EAAA,KAAK,KAAK,GAAA,CAAA;AAAA,UAE7CQ,EAAA,QAAU,UADlBc,EAKO,QALPa,GAKOD,EADF1B,EAAA,KAAU,GAAA,CAAA;;QAKjBgB,EAqBM,OAAA;AAAA,UApBH,SAAOH,EAAAW,CAAA;AAAA;YAAkF1B,EAAA,QAAU,oBAAA;AAAA,UAAA;;UAKpGkB,EAcM,OAdNY,GAcM;AAAA,aAbJX,EAAA,EAAA,GAAAH,EAYWC,GAAA,MAAAG,EAZe1B,EAAA,KAAK,WAAdkB;cAA8B,KAAAA,EAAM;AAAA,YAAA;cAE3CA,EAAM,aAAQ,YADtBS,EAIEC,GAAA;AAAA;gBAFC,MAAMV;AAAA,gBACN,aAAYN;AAAA,cAAA,yBAIFM,EAAM,aAAQ,YAD3BS,EAIEU,GAAA;AAAA;gBAFC,MAAMnB;AAAA,gBACN,aAAYN;AAAA,cAAA;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSidebarGroup.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSidebarGroup.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("../../../types/sidebar.types.cjs"),a=require("../../atoms/JIcon.vue.cjs"),f=require("../../atoms/JTooltip.vue.cjs"),l=require("../../../lib/utils.cjs"),v={key:0,class:"absolute left-0 top-1 bottom-1 w-[3px] rounded-r bg-primary"},y={class:"flex-1 truncate text-xs"},g=e.defineComponent({__name:"JSidebarItem",props:{item:{}},emits:["menu-click"],setup(t,{emit:u}){const o=t,m=u,i=e.inject(p.SIDEBAR_INJECTION_KEY),r=e.computed(()=>!o.item.path||!i.activePath?!1:i.activePath===o.item.path),c=e.computed(()=>i.favorites.has(o.item.id)),s=n=>{o.item.disabled||m("menu-click",o.item,n)},d=n=>{n.stopPropagation(),i.toggleFavorite(o.item.id)};return(n,k)=>e.unref(i).collapsed?(e.openBlock(),e.createBlock(f.default,{key:0,content:t.item.label,side:"right",size:"sm"},{trigger:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l.cn)("flex items-center justify-center py-1.5 mx-1 rounded-md cursor-pointer transition-colors",r.value?"bg-primary/10 text-primary":"text-foreground hover:bg-accent/50",t.item.disabled&&"opacity-40 cursor-not-allowed")),onClick:s},[e.createVNode(a.default,{name:t.item.icon||"file",size:"sm"},null,8,["name"])],2)]),_:1},8,["content"])):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(l.cn)("group flex items-center gap-2 py-1 px-2 rounded-md cursor-pointer transition-colors relative",r.value?"bg-primary/10 text-primary font-medium":"text-foreground hover:bg-accent/50",t.item.disabled&&"opacity-40 cursor-not-allowed")),onClick:s},[r.value?(e.openBlock(),e.createElementBlock("div",v)):e.createCommentVNode("",!0),t.item.icon?(e.openBlock(),e.createBlock(a.default,{key:1,name:t.item.icon,size:"sm",class:"flex-shrink-0"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",y,e.toDisplayString(t.item.label),1),e.createElementVNode("button",{class:e.normalizeClass(e.unref(l.cn)("flex-shrink-0 p-0.5 rounded transition-opacity",c.value?"opacity-100 text-yellow-500":"opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-yellow-500")),onClick:d},[e.createVNode(a.default,{name:"star",size:"sm",class:e.normalizeClass(c.value?"fill-yellow-500":void 0)},null,8,["class"])],2)],2))}});exports.default=g;
|
|
2
|
+
//# sourceMappingURL=JSidebarItem.vue.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSidebarItem.vue.cjs","sources":["../../../../../src/components/organisms/JSidebar/JSidebarItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport type { SidebarMenuItem } from '@/types/sidebar.types'\nimport { SIDEBAR_INJECTION_KEY } from '@/types/sidebar.types'\nimport JIcon from '@/components/atoms/JIcon.vue'\nimport JTooltip from '@/components/atoms/JTooltip.vue'\nimport { cn } from '@/lib/utils'\n\n/**\n * JSidebarItem - 메뉴 아이템 (menuType='L' 전용)\n * 링크 타입 메뉴만 렌더링. 폴더(F)는 JSidebarGroup에서 처리.\n */\n\nconst props = defineProps<{\n item: SidebarMenuItem\n}>()\n\nconst emit = defineEmits<{\n 'menu-click': [item: SidebarMenuItem, event: MouseEvent]\n}>()\n\nconst state = inject(SIDEBAR_INJECTION_KEY)!\n\nconst isActive = computed(() => {\n if (!props.item.path || !state.activePath) return false\n return state.activePath === props.item.path\n})\n\nconst isFav = computed(() => state.favorites.has(props.item.id))\n\nconst handleClick = (event: MouseEvent) => {\n if (props.item.disabled) return\n emit('menu-click', props.item, event)\n}\n\nconst handleFavoriteClick = (event: MouseEvent) => {\n event.stopPropagation()\n state.toggleFavorite(props.item.id)\n}\n</script>\n\n<template>\n <!-- Collapsed: 아이콘 + Tooltip -->\n <JTooltip\n v-if=\"state.collapsed\"\n :content=\"item.label\"\n side=\"right\"\n size=\"sm\"\n >\n <template #trigger>\n <div\n :class=\"cn(\n 'flex items-center justify-center py-1.5 mx-1 rounded-md cursor-pointer transition-colors',\n isActive\n ? 'bg-primary/10 text-primary'\n : 'text-foreground hover:bg-accent/50',\n item.disabled && 'opacity-40 cursor-not-allowed'\n )\"\n @click=\"handleClick\"\n >\n <JIcon :name=\"item.icon || 'file'\" size=\"sm\" />\n </div>\n </template>\n </JTooltip>\n\n <!-- Expanded: 아이콘 + 라벨 + 즐겨찾기 -->\n <div\n v-else\n :class=\"cn(\n 'group flex items-center gap-2 py-1 px-2 rounded-md cursor-pointer transition-colors relative',\n isActive\n ? 'bg-primary/10 text-primary font-medium'\n : 'text-foreground hover:bg-accent/50',\n item.disabled && 'opacity-40 cursor-not-allowed'\n )\"\n @click=\"handleClick\"\n >\n <!-- 활성 좌측 바 -->\n <div\n v-if=\"isActive\"\n class=\"absolute left-0 top-1 bottom-1 w-[3px] rounded-r bg-primary\"\n />\n\n <JIcon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n size=\"sm\"\n class=\"flex-shrink-0\"\n />\n <span class=\"flex-1 truncate text-xs\">{{ item.label }}</span>\n\n <!-- 즐겨찾기 별 -->\n <button\n :class=\"cn(\n 'flex-shrink-0 p-0.5 rounded transition-opacity',\n isFav\n ? 'opacity-100 text-yellow-500'\n : 'opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-yellow-500'\n )\"\n @click=\"handleFavoriteClick\"\n >\n <JIcon\n name=\"star\"\n size=\"sm\"\n :class=\"isFav ? 'fill-yellow-500' : undefined\"\n />\n </button>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","state","inject","SIDEBAR_INJECTION_KEY","isActive","computed","isFav","handleClick","event","handleFavoriteClick","_unref","_createBlock","JTooltip","_createElementVNode","cn","_createVNode","JIcon","_createElementBlock","_openBlock","_hoisted_1","_hoisted_2","_toDisplayString","_normalizeClass"],"mappings":"0fAaA,MAAMA,EAAQC,EAIRC,EAAOC,EAIPC,EAAQC,EAAAA,OAAOC,uBAAqB,EAEpCC,EAAWC,EAAAA,SAAS,IACpB,CAACR,EAAM,KAAK,MAAQ,CAACI,EAAM,WAAmB,GAC3CA,EAAM,aAAeJ,EAAM,KAAK,IACxC,EAEKS,EAAQD,WAAS,IAAMJ,EAAM,UAAU,IAAIJ,EAAM,KAAK,EAAE,CAAC,EAEzDU,EAAeC,GAAsB,CACrCX,EAAM,KAAK,UACfE,EAAK,aAAcF,EAAM,KAAMW,CAAK,CACtC,EAEMC,EAAuBD,GAAsB,CACjDA,EAAM,gBAAA,EACNP,EAAM,eAAeJ,EAAM,KAAK,EAAE,CACpC,eAMUa,EAAAA,MAAAT,CAAA,EAAM,yBADdU,EAAAA,YAoBWC,UAAA,OAlBR,QAASd,EAAA,KAAK,MACf,KAAK,QACL,KAAK,IAAA,GAEM,kBACT,IAWM,CAXNe,EAAAA,mBAWM,MAAA,CAVH,uBAAOH,EAAAA,MAAAI,IAAA,6FAAoHV,EAAA,wEAAkHN,EAAA,KAAK,UAAQ,+BAAA,GAO1P,QAAOS,CAAA,GAERQ,EAAAA,YAA+CC,EAAAA,QAAA,CAAvC,KAAMlB,EAAA,KAAK,MAAI,OAAY,KAAK,IAAA,6DAM9CmB,EAAAA,mBAyCM,MAAA,OAvCH,uBAAOP,EAAAA,MAAAI,IAAA,iGAAgHV,EAAA,oFAAkHN,EAAA,KAAK,UAAQ,+BAAA,GAOtP,QAAOS,CAAA,GAIAH,EAAA,OADRc,EAAAA,UAAA,EAAAD,EAAAA,mBAGE,MAHFE,CAGE,+BAGMrB,EAAA,KAAK,oBADba,EAAAA,YAKEK,EAAAA,QAAA,OAHC,KAAMlB,EAAA,KAAK,KACZ,KAAK,KACL,MAAM,eAAA,gDAERe,qBAA6D,OAA7DO,EAA6DC,EAAAA,gBAApBvB,EAAA,KAAK,KAAK,EAAA,CAAA,EAGnDe,EAAAA,mBAcS,SAAA,CAbN,uBAAOH,EAAAA,MAAAI,IAAA,mDAAsER,EAAA,sHAM7E,QAAOG,CAAA,GAERM,EAAAA,YAIEC,EAAAA,QAAA,CAHA,KAAK,OACL,KAAK,KACJ,MAAKM,EAAAA,eAAEhB,EAAA,MAAK,kBAAuB,MAAS,CAAA"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { defineComponent as b, inject as C, computed as p, createBlock as f, createElementBlock as y, unref as r, openBlock as n, withCtx as w, createElementVNode as l, normalizeClass as a, createVNode as v, createCommentVNode as x, toDisplayString as z } from "vue";
|
|
2
|
+
import { SIDEBAR_INJECTION_KEY as E } from "../../../types/sidebar.types.js";
|
|
3
|
+
import s from "../../atoms/JIcon.vue.js";
|
|
4
|
+
import N from "../../atoms/JTooltip.vue.js";
|
|
5
|
+
import { cn as m } from "../../../lib/utils.js";
|
|
6
|
+
const B = {
|
|
7
|
+
key: 0,
|
|
8
|
+
class: "absolute left-0 top-1 bottom-1 w-[3px] rounded-r bg-primary"
|
|
9
|
+
}, I = { class: "flex-1 truncate text-xs" }, A = /* @__PURE__ */ b({
|
|
10
|
+
__name: "JSidebarItem",
|
|
11
|
+
props: {
|
|
12
|
+
item: {}
|
|
13
|
+
},
|
|
14
|
+
emits: ["menu-click"],
|
|
15
|
+
setup(e, { emit: g }) {
|
|
16
|
+
const t = e, h = g, i = C(E), c = p(() => !t.item.path || !i.activePath ? !1 : i.activePath === t.item.path), d = p(() => i.favorites.has(t.item.id)), u = (o) => {
|
|
17
|
+
t.item.disabled || h("menu-click", t.item, o);
|
|
18
|
+
}, k = (o) => {
|
|
19
|
+
o.stopPropagation(), i.toggleFavorite(t.item.id);
|
|
20
|
+
};
|
|
21
|
+
return (o, F) => r(i).collapsed ? (n(), f(N, {
|
|
22
|
+
key: 0,
|
|
23
|
+
content: e.item.label,
|
|
24
|
+
side: "right",
|
|
25
|
+
size: "sm"
|
|
26
|
+
}, {
|
|
27
|
+
trigger: w(() => [
|
|
28
|
+
l("div", {
|
|
29
|
+
class: a(r(m)(
|
|
30
|
+
"flex items-center justify-center py-1.5 mx-1 rounded-md cursor-pointer transition-colors",
|
|
31
|
+
c.value ? "bg-primary/10 text-primary" : "text-foreground hover:bg-accent/50",
|
|
32
|
+
e.item.disabled && "opacity-40 cursor-not-allowed"
|
|
33
|
+
)),
|
|
34
|
+
onClick: u
|
|
35
|
+
}, [
|
|
36
|
+
v(s, {
|
|
37
|
+
name: e.item.icon || "file",
|
|
38
|
+
size: "sm"
|
|
39
|
+
}, null, 8, ["name"])
|
|
40
|
+
], 2)
|
|
41
|
+
]),
|
|
42
|
+
_: 1
|
|
43
|
+
}, 8, ["content"])) : (n(), y("div", {
|
|
44
|
+
key: 1,
|
|
45
|
+
class: a(r(m)(
|
|
46
|
+
"group flex items-center gap-2 py-1 px-2 rounded-md cursor-pointer transition-colors relative",
|
|
47
|
+
c.value ? "bg-primary/10 text-primary font-medium" : "text-foreground hover:bg-accent/50",
|
|
48
|
+
e.item.disabled && "opacity-40 cursor-not-allowed"
|
|
49
|
+
)),
|
|
50
|
+
onClick: u
|
|
51
|
+
}, [
|
|
52
|
+
c.value ? (n(), y("div", B)) : x("", !0),
|
|
53
|
+
e.item.icon ? (n(), f(s, {
|
|
54
|
+
key: 1,
|
|
55
|
+
name: e.item.icon,
|
|
56
|
+
size: "sm",
|
|
57
|
+
class: "flex-shrink-0"
|
|
58
|
+
}, null, 8, ["name"])) : x("", !0),
|
|
59
|
+
l("span", I, z(e.item.label), 1),
|
|
60
|
+
l("button", {
|
|
61
|
+
class: a(r(m)(
|
|
62
|
+
"flex-shrink-0 p-0.5 rounded transition-opacity",
|
|
63
|
+
d.value ? "opacity-100 text-yellow-500" : "opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-yellow-500"
|
|
64
|
+
)),
|
|
65
|
+
onClick: k
|
|
66
|
+
}, [
|
|
67
|
+
v(s, {
|
|
68
|
+
name: "star",
|
|
69
|
+
size: "sm",
|
|
70
|
+
class: a(d.value ? "fill-yellow-500" : void 0)
|
|
71
|
+
}, null, 8, ["class"])
|
|
72
|
+
], 2)
|
|
73
|
+
], 2));
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
export {
|
|
77
|
+
A as default
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=JSidebarItem.vue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSidebarItem.vue.js","sources":["../../../../../src/components/organisms/JSidebar/JSidebarItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport type { SidebarMenuItem } from '@/types/sidebar.types'\nimport { SIDEBAR_INJECTION_KEY } from '@/types/sidebar.types'\nimport JIcon from '@/components/atoms/JIcon.vue'\nimport JTooltip from '@/components/atoms/JTooltip.vue'\nimport { cn } from '@/lib/utils'\n\n/**\n * JSidebarItem - 메뉴 아이템 (menuType='L' 전용)\n * 링크 타입 메뉴만 렌더링. 폴더(F)는 JSidebarGroup에서 처리.\n */\n\nconst props = defineProps<{\n item: SidebarMenuItem\n}>()\n\nconst emit = defineEmits<{\n 'menu-click': [item: SidebarMenuItem, event: MouseEvent]\n}>()\n\nconst state = inject(SIDEBAR_INJECTION_KEY)!\n\nconst isActive = computed(() => {\n if (!props.item.path || !state.activePath) return false\n return state.activePath === props.item.path\n})\n\nconst isFav = computed(() => state.favorites.has(props.item.id))\n\nconst handleClick = (event: MouseEvent) => {\n if (props.item.disabled) return\n emit('menu-click', props.item, event)\n}\n\nconst handleFavoriteClick = (event: MouseEvent) => {\n event.stopPropagation()\n state.toggleFavorite(props.item.id)\n}\n</script>\n\n<template>\n <!-- Collapsed: 아이콘 + Tooltip -->\n <JTooltip\n v-if=\"state.collapsed\"\n :content=\"item.label\"\n side=\"right\"\n size=\"sm\"\n >\n <template #trigger>\n <div\n :class=\"cn(\n 'flex items-center justify-center py-1.5 mx-1 rounded-md cursor-pointer transition-colors',\n isActive\n ? 'bg-primary/10 text-primary'\n : 'text-foreground hover:bg-accent/50',\n item.disabled && 'opacity-40 cursor-not-allowed'\n )\"\n @click=\"handleClick\"\n >\n <JIcon :name=\"item.icon || 'file'\" size=\"sm\" />\n </div>\n </template>\n </JTooltip>\n\n <!-- Expanded: 아이콘 + 라벨 + 즐겨찾기 -->\n <div\n v-else\n :class=\"cn(\n 'group flex items-center gap-2 py-1 px-2 rounded-md cursor-pointer transition-colors relative',\n isActive\n ? 'bg-primary/10 text-primary font-medium'\n : 'text-foreground hover:bg-accent/50',\n item.disabled && 'opacity-40 cursor-not-allowed'\n )\"\n @click=\"handleClick\"\n >\n <!-- 활성 좌측 바 -->\n <div\n v-if=\"isActive\"\n class=\"absolute left-0 top-1 bottom-1 w-[3px] rounded-r bg-primary\"\n />\n\n <JIcon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n size=\"sm\"\n class=\"flex-shrink-0\"\n />\n <span class=\"flex-1 truncate text-xs\">{{ item.label }}</span>\n\n <!-- 즐겨찾기 별 -->\n <button\n :class=\"cn(\n 'flex-shrink-0 p-0.5 rounded transition-opacity',\n isFav\n ? 'opacity-100 text-yellow-500'\n : 'opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-yellow-500'\n )\"\n @click=\"handleFavoriteClick\"\n >\n <JIcon\n name=\"star\"\n size=\"sm\"\n :class=\"isFav ? 'fill-yellow-500' : undefined\"\n />\n </button>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","state","inject","SIDEBAR_INJECTION_KEY","isActive","computed","isFav","handleClick","event","handleFavoriteClick","_unref","_createBlock","JTooltip","_createElementVNode","cn","_createVNode","JIcon","_createElementBlock","_openBlock","_hoisted_1","_hoisted_2","_toDisplayString","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GAIRC,IAAOC,GAIPC,IAAQC,EAAOC,CAAqB,GAEpCC,IAAWC,EAAS,MACpB,CAACR,EAAM,KAAK,QAAQ,CAACI,EAAM,aAAmB,KAC3CA,EAAM,eAAeJ,EAAM,KAAK,IACxC,GAEKS,IAAQD,EAAS,MAAMJ,EAAM,UAAU,IAAIJ,EAAM,KAAK,EAAE,CAAC,GAEzDU,IAAc,CAACC,MAAsB;AACzC,MAAIX,EAAM,KAAK,YACfE,EAAK,cAAcF,EAAM,MAAMW,CAAK;AAAA,IACtC,GAEMC,IAAsB,CAACD,MAAsB;AACjD,MAAAA,EAAM,gBAAA,GACNP,EAAM,eAAeJ,EAAM,KAAK,EAAE;AAAA,IACpC;qBAMUa,EAAAT,CAAA,EAAM,kBADdU,EAoBWC,GAAA;AAAA;MAlBR,SAASd,EAAA,KAAK;AAAA,MACf,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;MAEM,WACT,MAWM;AAAA,QAXNe,EAWM,OAAA;AAAA,UAVH,SAAOH,EAAAI,CAAA;AAAA;YAAoHV,EAAA;YAAkHN,EAAA,KAAK,YAAQ;AAAA,UAAA;UAO1P,SAAOS;AAAA,QAAA;UAERQ,EAA+CC,GAAA;AAAA,YAAvC,MAAMlB,EAAA,KAAK,QAAI;AAAA,YAAY,MAAK;AAAA,UAAA;;;;gCAM9CmB,EAyCM,OAAA;AAAA;MAvCH,SAAOP,EAAAI,CAAA;AAAA;QAAgHV,EAAA;QAAkHN,EAAA,KAAK,YAAQ;AAAA,MAAA;MAOtP,SAAOS;AAAA,IAAA;MAIAH,EAAA,SADRc,EAAA,GAAAD,EAGE,OAHFE,CAGE;MAGMrB,EAAA,KAAK,aADba,EAKEK,GAAA;AAAA;QAHC,MAAMlB,EAAA,KAAK;AAAA,QACZ,MAAK;AAAA,QACL,OAAM;AAAA,MAAA;MAERe,EAA6D,QAA7DO,GAA6DC,EAApBvB,EAAA,KAAK,KAAK,GAAA,CAAA;AAAA,MAGnDe,EAcS,UAAA;AAAA,QAbN,SAAOH,EAAAI,CAAA;AAAA;UAAsER,EAAA;;QAM7E,SAAOG;AAAA,MAAA;QAERM,EAIEC,GAAA;AAAA,UAHA,MAAK;AAAA,UACL,MAAK;AAAA,UACJ,OAAKM,EAAEhB,EAAA,QAAK,oBAAuB,MAAS;AAAA,QAAA;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSidebarItem.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSidebarItem.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),F=require("vue-router"),f=require("../../atoms/JIcon.vue.cjs"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),F=require("vue-router"),f=require("../../atoms/JIcon.vue.cjs"),c=require("../../../lib/utils.cjs"),S={key:1,class:"w-4 flex-shrink-0"},E={key:0,class:"border-l border-border/60 ml-[14px] pl-[6px]"},N=e.defineComponent({__name:"JDynamicMenuItem",props:{item:{},level:{default:0},permissions:{default:()=>[]},activePath:{},expandedKeys:{default:()=>new Set},favorites:{default:()=>[]},onFavoriteToggle:{},isFavorite:{},styletype:{default:"default"},className:{},maxDepth:{default:10},disableNavigation:{type:Boolean,default:!1},activeKey:{default:null}},emits:["menuClick","expandChange"],setup(t,{emit:g}){const n=t,s=g,x=F.useRouter(),p=e.computed(()=>c.hasMenuPermission(n.item.menuKey,n.permissions)),m=e.computed(()=>n.activeKey!==void 0&&n.activeKey!==null?n.item.menuKey===n.activeKey:!n.item.path||!n.activePath?!1:n.activePath===n.item.path),l=e.computed(()=>n.item.menuType==="F"||Array.isArray(n.item.children)&&n.item.children.length>0),d=e.computed(()=>{if(!l.value)return!1;const a=n.item.menuKey||n.item.label;return n.expandedKeys?.has(a)??!1}),v=e.computed(()=>n.item.disabled||!p.value),C=e.computed(()=>({paddingLeft:"8px",paddingRight:"8px"})),b=a=>{if(v.value){a.preventDefault();return}if(l.value){const i=n.item.menuKey||n.item.label,r=!d.value;s("expandChange",i,r),s("menuClick",{menuItem:n.item,path:[n.item],event:a})}else!n.disableNavigation&&n.item.path&&x.push(n.item.path),s("menuClick",{menuItem:n.item,path:[n.item],event:a})},h={default:{itemClass:"flex items-center gap-1.5 py-1 rounded-md cursor-pointer transition-colors group",labelClass:"flex-1 truncate text-xs",iconSize:"sm"},minimal:{itemClass:"flex items-center gap-1 py-1 rounded-md cursor-pointer transition-colors group",labelClass:"flex-1 truncate text-xs",iconSize:"sm"}},u=e.computed(()=>h[n.styletype]??h.default),B=e.computed(()=>d.value?"chevronDown":"chevronRight"),k=e.computed(()=>{if(!l.value||!Array.isArray(n.item.children))return 0;const a=i=>{let r=0;for(const o of i)r++,Array.isArray(o.children)&&o.children.length>0&&(r+=a(o.children));return r};return a(n.item.children)});return(a,i)=>{const r=e.resolveComponent("JDynamicMenuItem",!0);return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(c.cn)("w-full",t.className))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(c.cn)(u.value.itemClass,{"bg-primary/5 text-primary border-l-2 border-primary shadow-sm":m.value,"hover:bg-accent/50":!v.value&&!m.value,"opacity-50 cursor-not-allowed":v.value,"font-medium":m.value,"font-semibold":l.value})),style:e.normalizeStyle(C.value),onClick:b},[l.value?(e.openBlock(),e.createBlock(f.default,{key:0,name:B.value,size:u.value.iconSize,class:"flex-shrink-0 opacity-60",style:{"stroke-width":"1.5"}},null,8,["name","size"])):(e.openBlock(),e.createElementBlock("span",S)),t.item.icon&&!l.value?(e.openBlock(),e.createBlock(f.default,{key:2,name:t.item.icon,size:u.value.iconSize,class:"flex-shrink-0"},null,8,["name","size"])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(u.value.labelClass)},e.toDisplayString(t.item.label),3),l.value&&k.value>0?(e.openBlock(),e.createElementBlock("span",{key:3,class:e.normalizeClass(e.unref(c.cn)("text-muted-foreground ml-1 flex-shrink-0",n.styletype==="minimal"?"text-[10px]":"text-xs"))}," ("+e.toDisplayString(k.value)+") ",3)):e.createCommentVNode("",!0),t.item.menuKey&&t.item.menuType==="L"&&t.onFavoriteToggle?(e.openBlock(),e.createElementBlock("button",{key:4,class:e.normalizeClass(e.unref(c.cn)("opacity-0 group-hover:opacity-100 transition-opacity hover:bg-accent rounded flex-shrink-0",n.styletype==="minimal"?"p-0.5":"p-1",t.isFavorite&&t.isFavorite(t.item.menuKey)&&"opacity-100")),onClick:i[0]||(i[0]=e.withModifiers(o=>t.onFavoriteToggle(t.item.menuKey),["stop"]))},[e.createVNode(f.default,{name:(t.isFavorite&&t.isFavorite(t.item.menuKey),"star"),size:u.value.iconSize,class:e.normalizeClass(t.isFavorite&&t.isFavorite(t.item.menuKey)?"text-yellow-500 fill-yellow-500":"text-muted-foreground")},null,8,["name","size","class"])],2)):e.createCommentVNode("",!0)],6),l.value&&d.value&&t.item.children&&Array.isArray(t.item.children)&&t.item.children.length>0&&t.level+1<t.maxDepth?(e.openBlock(),e.createElementBlock("div",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.item.children,(o,z)=>(e.openBlock(),e.createBlock(r,{key:o.menuKey||o.label||z,item:o,level:t.level+1,"max-depth":t.maxDepth,permissions:t.permissions,"active-path":t.activePath,"expanded-keys":t.expandedKeys,favorites:t.favorites,"on-favorite-toggle":t.onFavoriteToggle,"is-favorite":t.isFavorite,styletype:t.styletype,"disable-navigation":t.disableNavigation,"active-key":t.activeKey,onMenuClick:i[1]||(i[1]=y=>s("menuClick",y)),onExpandChange:i[2]||(i[2]=(y,K)=>s("expandChange",y,K))},null,8,["item","level","max-depth","permissions","active-path","expanded-keys","favorites","on-favorite-toggle","is-favorite","styletype","disable-navigation","active-key"]))),128))])):e.createCommentVNode("",!0)],2)}}});exports.default=N;
|
|
2
2
|
//# sourceMappingURL=JDynamicMenuItem.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JDynamicMenuItem.vue.cjs","sources":["../../../../../src/components/organisms/JSidebarSimple/JDynamicMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useRouter } from 'vue-router'\nimport type { SidebarMenuItem, MenuPermission, MenuClickEvent } from '@/types/sidebar-menu.types'\nimport JIcon from '@/components/atoms/JIcon.vue'\nimport { cn, hasMenuPermission } from '@/lib/utils'\n\n/**\n * JDynamicMenuItem - 재귀적 메뉴 아이템 컴포넌트\n * Recursive Menu Item Component\n * \n * @description\n * 다단계 메뉴 구조를 재귀적으로 렌더링하는 컴포넌트입니다.\n * 폴더 타입 메뉴는 확장/축소가 가능하고, 링크 타입 메뉴는 클릭 시 라우팅합니다.\n */\n\ntype StyleType = 'default' | 'minimal'\n\nconst props = withDefaults(\n defineProps<{\n /** 메뉴 아이템 */\n item: SidebarMenuItem\n /** 메뉴 레벨 (들여쓰기용, 0부터 시작) */\n level?: number\n /** 권한 목록 */\n permissions?: MenuPermission[]\n /** 활성화된 메뉴 경로 */\n activePath?: string\n /** 확장된 메뉴 키 목록 */\n expandedKeys?: Set<number | string>\n /** 즐겨찾기 메뉴 키 목록 */\n favorites?: (number | string)[]\n /** 즐겨찾기 변경 핸들러 */\n onFavoriteToggle?: (menuKey: number | string | undefined) => void\n /** 즐겨찾기 확인 함수 */\n isFavorite?: (menuKey: number | string | undefined) => boolean\n /** 스타일 타입 */\n styletype?: StyleType\n /** 추가 CSS 클래스 */\n className?: string\n /** 최대 깊이 제한 (무한 루프 방지, 기본값: 10) */\n maxDepth?: number\n /** 네비게이션 비활성화 (true일 때 router.push 건너뛰고 emit만 수행) */\n disableNavigation?: boolean\n /** 활성화된 메뉴 키 (menuKey 기반 활성화, activePath보다 우선) */\n activeKey?: number | string | null\n }>(),\n {\n level: 0,\n permissions: () => [],\n expandedKeys: () => new Set(),\n favorites: () => [],\n styletype: 'default',\n maxDepth: 10,\n disableNavigation: false,\n activeKey: null,\n },\n)\n\nconst emit = defineEmits<{\n /** 메뉴 클릭 이벤트 */\n menuClick: [event: MenuClickEvent]\n /** 확장 상태 변경 이벤트 */\n expandChange: [menuKey: number | string | undefined, expanded: boolean]\n}>()\n\nconst router = useRouter()\n\n/**\n * 권한 체크 함수\n * Permission check function\n * hasMenuPermission 유틸리티 함수를 사용하여 일관성 유지\n */\nconst checkPermission = computed(() => {\n return hasMenuPermission(props.item.menuKey, props.permissions)\n})\n\n/**\n * 메뉴가 활성화되어 있는지 여부\n * activeKey가 제공되면 menuKey 매칭, 아니면 경로 매칭\n */\nconst isActive = computed(() => {\n // activeKey가 제공되면 menuKey 기반 매칭 (우선순위 높음)\n if (props.activeKey !== undefined && props.activeKey !== null) {\n return props.item.menuKey === props.activeKey\n }\n // 경로 기반 매칭 (기본 동작)\n if (!props.item.path || !props.activePath) return false\n return props.activePath === props.item.path\n})\n\n/**\n * 메뉴 타입이 폴더인지 여부\n * 순환 참조 방지: children이 유효한 배열인지 확인\n */\nconst isFolder = computed(() => {\n return props.item.menuType === 'F' || (Array.isArray(props.item.children) && props.item.children.length > 0)\n})\n\n/**\n * 메뉴가 확장되어 있는지 여부\n */\nconst isExpanded = computed(() => {\n if (!isFolder.value) return false\n const key = props.item.menuKey || props.item.label\n return props.expandedKeys?.has(key) ?? false\n})\n\n/**\n * 메뉴가 비활성화되어 있는지 여부\n */\nconst isDisabled = computed(() => {\n return props.item.disabled || !checkPermission.value\n})\n\n/**\n * 레벨별 들여쓰기 스타일\n * Tailwind의 표준 클래스는 제한적이므로 인라인 스타일 사용\n */\nconst indentStyle = computed(() => {\n const basePadding = 8 // 기본 패딩 (px) - 12에서 8로 축소\n const level = props.level || 0\n const levelPadding = level * 12 // 레벨당 12px (16에서 12로 축소)\n const totalPadding = basePadding + levelPadding\n return { paddingLeft: `${totalPadding}px` }\n})\n\n/**\n * 메뉴 클릭 핸들러\n */\nconst handleMenuClick = (event: MouseEvent) => {\n if (isDisabled.value) {\n event.preventDefault()\n return\n }\n\n if (isFolder.value) {\n // 폴더 타입: 확장/축소 토글\n const key = props.item.menuKey || props.item.label\n const newExpanded = !isExpanded.value\n emit('expandChange', key, newExpanded)\n // 폴더도 메뉴 클릭 이벤트 발생\n emit('menuClick', {\n menuItem: props.item,\n path: [props.item],\n event,\n })\n } else {\n // 링크 타입: 라우팅 (disableNavigation이 false일 때만)\n if (!props.disableNavigation && props.item.path) {\n router.push(props.item.path)\n }\n \n // 메뉴 클릭 이벤트 발생\n emit('menuClick', {\n menuItem: props.item,\n path: [props.item], // 단순화된 경로 (필요시 부모 경로 포함하도록 확장 가능)\n event,\n })\n }\n}\n\n/**\n * 스타일 프리셋\n */\nconst STYLE_PRESETS: Record<StyleType, {\n itemClass: string\n labelClass: string\n iconSize: 'sm' | 'md'\n}> = {\n default: {\n itemClass: 'flex items-center gap-1.5 py-1 rounded-md cursor-pointer transition-colors group',\n labelClass: 'flex-1 truncate text-xs',\n iconSize: 'sm',\n },\n minimal: {\n itemClass: 'flex items-center gap-1 py-1 rounded-md cursor-pointer transition-colors group',\n labelClass: 'flex-1 truncate text-xs',\n iconSize: 'sm', // JIcon은 'xs'를 지원하지 않으므로 'sm' 사용\n },\n}\n\nconst preset = computed(() => {\n return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\n/**\n * Chevron 아이콘 컴포넌트\n */\nconst ChevronIcon = computed(() => {\n return isExpanded.value ? 'chevronDown' : 'chevronRight'\n})\n\n/**\n * 하위 메뉴 갯수 계산 (재귀적으로 모든 하위 메뉴 포함)\n * 폴더 타입인 경우에만 표시\n */\nconst childrenCount = computed(() => {\n if (!isFolder.value || !Array.isArray(props.item.children)) {\n return 0\n }\n \n const countChildren = (items: SidebarMenuItem[]): number => {\n let count = 0\n for (const item of items) {\n count++ // 현재 아이템 카운트\n if (Array.isArray(item.children) && item.children.length > 0) {\n count += countChildren(item.children) // 재귀적으로 하위 메뉴 카운트\n }\n }\n return count\n }\n \n return countChildren(props.item.children)\n})\n</script>\n\n<template>\n <div :class=\"cn('w-full', className)\">\n <!-- 메뉴 아이템 -->\n <div\n :class=\"cn(\n preset.itemClass,\n {\n 'bg-accent text-accent-foreground': isActive,\n 'hover:bg-accent/50': !isDisabled && !isActive,\n 'opacity-50 cursor-not-allowed': isDisabled,\n 'font-medium': isActive,\n 'font-semibold': isFolder, // 폴더인 경우 볼드체\n }\n )\"\n :style=\"indentStyle\"\n @click=\"handleMenuClick\"\n >\n <!-- Chevron 아이콘 (폴더 타입만, 덜 굵게) -->\n <JIcon\n v-if=\"isFolder\"\n :name=\"ChevronIcon\"\n :size=\"preset.iconSize\"\n class=\"flex-shrink-0 opacity-60\"\n style=\"stroke-width: 1.5;\"\n />\n <span v-else class=\"w-4 flex-shrink-0\" /> <!-- 폴더가 아닐 때 공간 확보 -->\n\n <!-- 메뉴 아이콘 (폴더가 아닌 경우만 표시) -->\n <JIcon\n v-if=\"item.icon && !isFolder\"\n :name=\"item.icon\"\n :size=\"preset.iconSize\"\n class=\"flex-shrink-0\"\n />\n\n <!-- 메뉴 라벨 -->\n <span :class=\"preset.labelClass\">{{ item.label }}</span>\n \n <!-- 하위 메뉴 갯수 (폴더인 경우만) -->\n <span\n v-if=\"isFolder && childrenCount > 0\"\n :class=\"cn(\n 'text-muted-foreground ml-1 flex-shrink-0',\n props.styletype === 'minimal' ? 'text-[10px]' : 'text-xs'\n )\"\n >\n ({{ childrenCount }})\n </span>\n \n <!-- 즐겨찾기 버튼 (menuType이 L인 경우만) -->\n <button\n v-if=\"item.menuKey && item.menuType === 'L' && onFavoriteToggle\"\n :class=\"cn(\n 'opacity-0 group-hover:opacity-100 transition-opacity hover:bg-accent rounded flex-shrink-0',\n props.styletype === 'minimal' ? 'p-0.5' : 'p-1',\n isFavorite && isFavorite(item.menuKey) && 'opacity-100'\n )\"\n @click.stop=\"onFavoriteToggle(item.menuKey)\"\n >\n <JIcon\n :name=\"isFavorite && isFavorite(item.menuKey) ? 'star' : 'star'\"\n :size=\"preset.iconSize\"\n :class=\"isFavorite && isFavorite(item.menuKey) ? 'text-yellow-500 fill-yellow-500' : 'text-muted-foreground'\"\n />\n </button>\n </div>\n\n <!-- 하위 메뉴 (폴더 타입이고 확장된 경우) -->\n <!-- 깊이 제한 체크: maxDepth를 초과하지 않는 경우에만 렌더링 -->\n <div\n v-if=\"isFolder && isExpanded && item.children && Array.isArray(item.children) && item.children.length > 0 && (level + 1) < maxDepth\"\n class=\"w-full\"\n >\n <JDynamicMenuItem\n v-for=\"(child, index) in item.children\"\n :key=\"child.menuKey || child.label || index\"\n :item=\"child\"\n :level=\"level + 1\"\n :max-depth=\"maxDepth\"\n :permissions=\"permissions\"\n :active-path=\"activePath\"\n :expanded-keys=\"expandedKeys\"\n :favorites=\"favorites\"\n :on-favorite-toggle=\"onFavoriteToggle\"\n :is-favorite=\"isFavorite\"\n :styletype=\"styletype\"\n :disable-navigation=\"disableNavigation\"\n :active-key=\"activeKey\"\n @menu-click=\"emit('menuClick', $event)\"\n @expand-change=\"(menuKey, expanded) => emit('expandChange', menuKey, expanded)\"\n />\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","router","useRouter","checkPermission","computed","hasMenuPermission","isActive","isFolder","isExpanded","key","isDisabled","indentStyle","handleMenuClick","event","newExpanded","STYLE_PRESETS","preset","ChevronIcon","childrenCount","countChildren","items","count","item","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_createBlock","JIcon","_openBlock","_hoisted_1","_toDisplayString","_cache","_withModifiers","$event","_createVNode","_hoisted_2","_Fragment","child","index","_component_JDynamicMenuItem","menuKey","expanded"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"JDynamicMenuItem.vue.cjs","sources":["../../../../../src/components/organisms/JSidebarSimple/JDynamicMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useRouter } from 'vue-router'\nimport type { SidebarMenuItem, MenuPermission, MenuClickEvent } from '@/types/sidebar-menu.types'\nimport JIcon from '@/components/atoms/JIcon.vue'\nimport { cn, hasMenuPermission } from '@/lib/utils'\n\n/**\n * JDynamicMenuItem - 재귀적 메뉴 아이템 컴포넌트\n * Recursive Menu Item Component\n * \n * @description\n * 다단계 메뉴 구조를 재귀적으로 렌더링하는 컴포넌트입니다.\n * 폴더 타입 메뉴는 확장/축소가 가능하고, 링크 타입 메뉴는 클릭 시 라우팅합니다.\n */\n\ntype StyleType = 'default' | 'minimal'\n\nconst props = withDefaults(\n defineProps<{\n /** 메뉴 아이템 */\n item: SidebarMenuItem\n /** 메뉴 레벨 (들여쓰기용, 0부터 시작) */\n level?: number\n /** 권한 목록 */\n permissions?: MenuPermission[]\n /** 활성화된 메뉴 경로 */\n activePath?: string\n /** 확장된 메뉴 키 목록 */\n expandedKeys?: Set<number | string>\n /** 즐겨찾기 메뉴 키 목록 */\n favorites?: (number | string)[]\n /** 즐겨찾기 변경 핸들러 */\n onFavoriteToggle?: (menuKey: number | string | undefined) => void\n /** 즐겨찾기 확인 함수 */\n isFavorite?: (menuKey: number | string | undefined) => boolean\n /** 스타일 타입 */\n styletype?: StyleType\n /** 추가 CSS 클래스 */\n className?: string\n /** 최대 깊이 제한 (무한 루프 방지, 기본값: 10) */\n maxDepth?: number\n /** 네비게이션 비활성화 (true일 때 router.push 건너뛰고 emit만 수행) */\n disableNavigation?: boolean\n /** 활성화된 메뉴 키 (menuKey 기반 활성화, activePath보다 우선) */\n activeKey?: number | string | null\n }>(),\n {\n level: 0,\n permissions: () => [],\n expandedKeys: () => new Set(),\n favorites: () => [],\n styletype: 'default',\n maxDepth: 10,\n disableNavigation: false,\n activeKey: null,\n },\n)\n\nconst emit = defineEmits<{\n /** 메뉴 클릭 이벤트 */\n menuClick: [event: MenuClickEvent]\n /** 확장 상태 변경 이벤트 */\n expandChange: [menuKey: number | string | undefined, expanded: boolean]\n}>()\n\nconst router = useRouter()\n\n/**\n * 권한 체크 함수\n * Permission check function\n * hasMenuPermission 유틸리티 함수를 사용하여 일관성 유지\n */\nconst checkPermission = computed(() => {\n return hasMenuPermission(props.item.menuKey, props.permissions)\n})\n\n/**\n * 메뉴가 활성화되어 있는지 여부\n * activeKey가 제공되면 menuKey 매칭, 아니면 경로 매칭\n */\nconst isActive = computed(() => {\n // activeKey가 제공되면 menuKey 기반 매칭 (우선순위 높음)\n if (props.activeKey !== undefined && props.activeKey !== null) {\n return props.item.menuKey === props.activeKey\n }\n // 경로 기반 매칭 (기본 동작)\n if (!props.item.path || !props.activePath) return false\n return props.activePath === props.item.path\n})\n\n/**\n * 메뉴 타입이 폴더인지 여부\n * 순환 참조 방지: children이 유효한 배열인지 확인\n */\nconst isFolder = computed(() => {\n return props.item.menuType === 'F' || (Array.isArray(props.item.children) && props.item.children.length > 0)\n})\n\n/**\n * 메뉴가 확장되어 있는지 여부\n */\nconst isExpanded = computed(() => {\n if (!isFolder.value) return false\n const key = props.item.menuKey || props.item.label\n return props.expandedKeys?.has(key) ?? false\n})\n\n/**\n * 메뉴가 비활성화되어 있는지 여부\n */\nconst isDisabled = computed(() => {\n return props.item.disabled || !checkPermission.value\n})\n\n/**\n * 레벨별 들여쓰기 스타일\n * 모든 레벨에서 동일한 padding 사용 (들여쓰기는 컨테이너의 ml로 조절)\n */\nconst indentStyle = computed(() => {\n return { paddingLeft: '8px', paddingRight: '8px' }\n})\n\n\n\n/**\n * 메뉴 클릭 핸들러\n */\nconst handleMenuClick = (event: MouseEvent) => {\n if (isDisabled.value) {\n event.preventDefault()\n return\n }\n\n if (isFolder.value) {\n // 폴더 타입: 확장/축소 토글\n const key = props.item.menuKey || props.item.label\n const newExpanded = !isExpanded.value\n emit('expandChange', key, newExpanded)\n // 폴더도 메뉴 클릭 이벤트 발생\n emit('menuClick', {\n menuItem: props.item,\n path: [props.item],\n event,\n })\n } else {\n // 링크 타입: 라우팅 (disableNavigation이 false일 때만)\n if (!props.disableNavigation && props.item.path) {\n router.push(props.item.path)\n }\n \n // 메뉴 클릭 이벤트 발생\n emit('menuClick', {\n menuItem: props.item,\n path: [props.item], // 단순화된 경로 (필요시 부모 경로 포함하도록 확장 가능)\n event,\n })\n }\n}\n\n/**\n * 스타일 프리셋\n */\nconst STYLE_PRESETS: Record<StyleType, {\n itemClass: string\n labelClass: string\n iconSize: 'sm' | 'md'\n}> = {\n default: {\n itemClass: 'flex items-center gap-1.5 py-1 rounded-md cursor-pointer transition-colors group',\n labelClass: 'flex-1 truncate text-xs',\n iconSize: 'sm',\n },\n minimal: {\n itemClass: 'flex items-center gap-1 py-1 rounded-md cursor-pointer transition-colors group',\n labelClass: 'flex-1 truncate text-xs',\n iconSize: 'sm', // JIcon은 'xs'를 지원하지 않으므로 'sm' 사용\n },\n}\n\nconst preset = computed(() => {\n return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\n/**\n * Chevron 아이콘 컴포넌트\n */\nconst ChevronIcon = computed(() => {\n return isExpanded.value ? 'chevronDown' : 'chevronRight'\n})\n\n/**\n * 하위 메뉴 갯수 계산 (재귀적으로 모든 하위 메뉴 포함)\n * 폴더 타입인 경우에만 표시\n */\nconst childrenCount = computed(() => {\n if (!isFolder.value || !Array.isArray(props.item.children)) {\n return 0\n }\n \n const countChildren = (items: SidebarMenuItem[]): number => {\n let count = 0\n for (const item of items) {\n count++ // 현재 아이템 카운트\n if (Array.isArray(item.children) && item.children.length > 0) {\n count += countChildren(item.children) // 재귀적으로 하위 메뉴 카운트\n }\n }\n return count\n }\n \n return countChildren(props.item.children)\n})\n</script>\n\n<template>\n <div :class=\"cn('w-full', className)\">\n <!-- 메뉴 아이템 -->\n <div\n :class=\"cn(\n preset.itemClass,\n {\n 'bg-primary/5 text-primary border-l-2 border-primary shadow-sm': isActive,\n 'hover:bg-accent/50': !isDisabled && !isActive,\n 'opacity-50 cursor-not-allowed': isDisabled,\n 'font-medium': isActive,\n 'font-semibold': isFolder, // 폴더인 경우 볼드체\n }\n )\"\n :style=\"indentStyle\"\n @click=\"handleMenuClick\"\n >\n <!-- Chevron 아이콘 (폴더 타입만, 덜 굵게) -->\n <JIcon\n v-if=\"isFolder\"\n :name=\"ChevronIcon\"\n :size=\"preset.iconSize\"\n class=\"flex-shrink-0 opacity-60\"\n style=\"stroke-width: 1.5;\"\n />\n <span v-else class=\"w-4 flex-shrink-0\" /> <!-- 폴더가 아닐 때 공간 확보 -->\n\n <!-- 메뉴 아이콘 (폴더가 아닌 경우만 표시) -->\n <JIcon\n v-if=\"item.icon && !isFolder\"\n :name=\"item.icon\"\n :size=\"preset.iconSize\"\n class=\"flex-shrink-0\"\n />\n\n <!-- 메뉴 라벨 -->\n <span :class=\"preset.labelClass\">{{ item.label }}</span>\n \n <!-- 하위 메뉴 갯수 (폴더인 경우만) -->\n <span\n v-if=\"isFolder && childrenCount > 0\"\n :class=\"cn(\n 'text-muted-foreground ml-1 flex-shrink-0',\n props.styletype === 'minimal' ? 'text-[10px]' : 'text-xs'\n )\"\n >\n ({{ childrenCount }})\n </span>\n \n <!-- 즐겨찾기 버튼 (menuType이 L인 경우만) -->\n <button\n v-if=\"item.menuKey && item.menuType === 'L' && onFavoriteToggle\"\n :class=\"cn(\n 'opacity-0 group-hover:opacity-100 transition-opacity hover:bg-accent rounded flex-shrink-0',\n props.styletype === 'minimal' ? 'p-0.5' : 'p-1',\n isFavorite && isFavorite(item.menuKey) && 'opacity-100'\n )\"\n @click.stop=\"onFavoriteToggle(item.menuKey)\"\n >\n <JIcon\n :name=\"isFavorite && isFavorite(item.menuKey) ? 'star' : 'star'\"\n :size=\"preset.iconSize\"\n :class=\"isFavorite && isFavorite(item.menuKey) ? 'text-yellow-500 fill-yellow-500' : 'text-muted-foreground'\"\n />\n </button>\n </div>\n\n <!-- 하위 메뉴 (폴더 타입이고 확장된 경우) -->\n <!-- 깊이 제한 체크: maxDepth를 초과하지 않는 경우에만 렌더링 -->\n <div\n v-if=\"isFolder && isExpanded && item.children && Array.isArray(item.children) && item.children.length > 0 && (level + 1) < maxDepth\"\n class=\"border-l border-border/60 ml-[14px] pl-[6px]\"\n >\n <JDynamicMenuItem\n v-for=\"(child, index) in item.children\"\n :key=\"child.menuKey || child.label || index\"\n :item=\"child\"\n :level=\"level + 1\"\n :max-depth=\"maxDepth\"\n :permissions=\"permissions\"\n :active-path=\"activePath\"\n :expanded-keys=\"expandedKeys\"\n :favorites=\"favorites\"\n :on-favorite-toggle=\"onFavoriteToggle\"\n :is-favorite=\"isFavorite\"\n :styletype=\"styletype\"\n :disable-navigation=\"disableNavigation\"\n :active-key=\"activeKey\"\n @menu-click=\"emit('menuClick', $event)\"\n @expand-change=\"(menuKey, expanded) => emit('expandChange', menuKey, expanded)\"\n />\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","router","useRouter","checkPermission","computed","hasMenuPermission","isActive","isFolder","isExpanded","key","isDisabled","indentStyle","handleMenuClick","event","newExpanded","STYLE_PRESETS","preset","ChevronIcon","childrenCount","countChildren","items","count","item","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_createBlock","JIcon","_openBlock","_hoisted_1","_toDisplayString","_cache","_withModifiers","$event","_createVNode","_hoisted_2","_Fragment","child","index","_component_JDynamicMenuItem","menuKey","expanded"],"mappings":"guBAkBA,MAAMA,EAAQC,EAyCRC,EAAOC,EAOPC,EAASC,EAAAA,UAAA,EAOTC,EAAkBC,EAAAA,SAAS,IACxBC,EAAAA,kBAAkBR,EAAM,KAAK,QAASA,EAAM,WAAW,CAC/D,EAMKS,EAAWF,EAAAA,SAAS,IAEpBP,EAAM,YAAc,QAAaA,EAAM,YAAc,KAChDA,EAAM,KAAK,UAAYA,EAAM,UAGlC,CAACA,EAAM,KAAK,MAAQ,CAACA,EAAM,WAAmB,GAC3CA,EAAM,aAAeA,EAAM,KAAK,IACxC,EAMKU,EAAWH,EAAAA,SAAS,IACjBP,EAAM,KAAK,WAAa,KAAQ,MAAM,QAAQA,EAAM,KAAK,QAAQ,GAAKA,EAAM,KAAK,SAAS,OAAS,CAC3G,EAKKW,EAAaJ,EAAAA,SAAS,IAAM,CAChC,GAAI,CAACG,EAAS,MAAO,MAAO,GAC5B,MAAME,EAAMZ,EAAM,KAAK,SAAWA,EAAM,KAAK,MAC7C,OAAOA,EAAM,cAAc,IAAIY,CAAG,GAAK,EACzC,CAAC,EAKKC,EAAaN,EAAAA,SAAS,IACnBP,EAAM,KAAK,UAAY,CAACM,EAAgB,KAChD,EAMKQ,EAAcP,EAAAA,SAAS,KACpB,CAAE,YAAa,MAAO,aAAc,KAAA,EAC5C,EAOKQ,EAAmBC,GAAsB,CAC7C,GAAIH,EAAW,MAAO,CACpBG,EAAM,eAAA,EACN,MACF,CAEA,GAAIN,EAAS,MAAO,CAElB,MAAME,EAAMZ,EAAM,KAAK,SAAWA,EAAM,KAAK,MACvCiB,EAAc,CAACN,EAAW,MAChCT,EAAK,eAAgBU,EAAKK,CAAW,EAErCf,EAAK,YAAa,CAChB,SAAUF,EAAM,KAChB,KAAM,CAACA,EAAM,IAAI,EACjB,MAAAgB,CAAA,CACD,CACH,KAEM,CAAChB,EAAM,mBAAqBA,EAAM,KAAK,MACzCI,EAAO,KAAKJ,EAAM,KAAK,IAAI,EAI7BE,EAAK,YAAa,CAChB,SAAUF,EAAM,KAChB,KAAM,CAACA,EAAM,IAAI,EACjB,MAAAgB,CAAA,CACD,CAEL,EAKME,EAID,CACH,QAAS,CACP,UAAW,mFACX,WAAY,0BACZ,SAAU,IAAA,EAEZ,QAAS,CACP,UAAW,iFACX,WAAY,0BACZ,SAAU,IAAA,CACZ,EAGIC,EAASZ,EAAAA,SAAS,IACfW,EAAclB,EAAM,SAAS,GAAKkB,EAAc,OACxD,EAKKE,EAAcb,EAAAA,SAAS,IACpBI,EAAW,MAAQ,cAAgB,cAC3C,EAMKU,EAAgBd,EAAAA,SAAS,IAAM,CACnC,GAAI,CAACG,EAAS,OAAS,CAAC,MAAM,QAAQV,EAAM,KAAK,QAAQ,EACvD,MAAO,GAGT,MAAMsB,EAAiBC,GAAqC,CAC1D,IAAIC,EAAQ,EACZ,UAAWC,KAAQF,EACjBC,IACI,MAAM,QAAQC,EAAK,QAAQ,GAAKA,EAAK,SAAS,OAAS,IACzDD,GAASF,EAAcG,EAAK,QAAQ,GAGxC,OAAOD,CACT,EAEA,OAAOF,EAActB,EAAM,KAAK,QAAQ,CAC1C,CAAC,uFAIC0B,EAAAA,mBA2FM,MAAA,CA3FA,MAAKC,EAAAA,eAAEC,QAAAC,EAAAA,EAAA,EAAE,SAAW5B,EAAA,SAAS,CAAA,CAAA,GAEjC6B,EAAAA,mBA8DM,MAAA,CA7DH,uBAAOF,EAAAA,MAAAC,IAAA,EAAYV,EAAA,MAAO,2EAAgGV,EAAA,MAA2C,qBAAA,CAAAI,EAAA,QAAeJ,EAAA,sCAAqDI,EAAA,oBAAqCJ,EAAA,sBAAqCC,EAAA,KAAA,IAUnT,uBAAOI,EAAA,KAAW,EAClB,QAAOC,CAAA,GAIAL,EAAA,qBADRqB,EAAAA,YAMEC,EAAAA,QAAA,OAJC,KAAMZ,EAAA,MACN,KAAMD,EAAA,MAAO,SACd,MAAM,2BACN,MAAA,CAAA,eAAA,KAAA,CAAA,4BAEFc,EAAAA,YAAAP,EAAAA,mBAAyC,OAAzCQ,CAAyC,GAIjCjC,EAAA,KAAK,MAAI,CAAKS,EAAA,qBADtBqB,EAAAA,YAKEC,UAAA,OAHC,KAAM/B,EAAA,KAAK,KACX,KAAMkB,EAAA,MAAO,SACd,MAAM,eAAA,uDAIRW,EAAAA,mBAAwD,OAAA,CAAjD,MAAKH,EAAAA,eAAER,EAAA,MAAO,UAAU,CAAA,EAAKgB,EAAAA,gBAAAlC,EAAA,KAAK,KAAK,EAAA,CAAA,EAItCS,EAAA,OAAYW,EAAA,MAAa,iBADjCK,EAAAA,mBAQO,OAAA,OANJ,uBAAOE,EAAAA,MAAAC,IAAA,6CAAoE7B,EAAM,YAAS,UAAA,cAAA,SAAA,IAI5F,KACEmC,EAAAA,gBAAGd,EAAA,KAAa,EAAG,KACtB,CAAA,+BAIQpB,EAAA,KAAK,SAAWA,OAAK,gBAAoBA,EAAA,gCADjDyB,EAAAA,mBAcS,SAAA,OAZN,uBAAOE,EAAAA,MAAAC,IAAA,+FAAsH7B,EAAM,YAAS,UAAA,QAAA,MAA4CC,EAAA,YAAcA,EAAA,WAAWA,EAAA,KAAK,OAAO,GAAA,aAAA,GAK7N,QAAKmC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,gBAAAC,GAAOrC,EAAA,iBAAiBA,EAAA,KAAK,OAAO,EAAA,CAAA,MAAA,CAAA,EAAA,GAE1CsC,EAAAA,YAIEP,EAAAA,QAAA,CAHC,MAAM/B,EAAA,YAAcA,aAAWA,EAAA,KAAK,OAAO,EAAA,QAC3C,KAAMkB,EAAA,MAAO,SACb,uBAAOlB,EAAA,YAAcA,aAAWA,EAAA,KAAK,OAAO,EAAA,kCAAA,uBAAA,CAAA,uEAQ3CS,EAAA,OAAYC,SAAcV,EAAA,KAAK,UAAY,MAAM,QAAQA,OAAK,QAAQ,GAAKA,EAAA,KAAK,SAAS,OAAM,GAASA,EAAA,MAAK,EAAQA,EAAA,UAD7HgC,EAAAA,UAAA,EAAAP,EAAAA,mBAsBM,MAtBNc,EAsBM,EAlBJP,EAAAA,UAAA,EAAA,EAAAP,EAAAA,mBAiBEe,EAAAA,2BAhByBxC,EAAA,KAAK,SAAQ,CAA9ByC,EAAOC,mBADjBZ,EAAAA,YAiBEa,EAAA,CAfC,IAAKF,EAAM,SAAWA,EAAM,OAASC,EACrC,KAAMD,EACN,MAAOzC,EAAA,MAAK,EACZ,YAAWA,EAAA,SACX,YAAaA,EAAA,YACb,cAAaA,EAAA,WACb,gBAAeA,EAAA,aACf,UAAWA,EAAA,UACX,qBAAoBA,EAAA,iBACpB,cAAaA,EAAA,WACb,UAAWA,EAAA,UACX,qBAAoBA,EAAA,kBACpB,aAAYA,EAAA,UACZ,YAAUmC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,GAAEpC,EAAI,YAAcoC,CAAM,GACpC,eAAaF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAAGS,EAASC,IAAa5C,EAAI,eAAiB2C,EAASC,CAAQ,EAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as P, computed as n, resolveComponent as I, createElementBlock as m, openBlock as l, normalizeClass as u, unref as v, createElementVNode as F, createCommentVNode as y, normalizeStyle as B, createBlock as C, toDisplayString as z, withModifiers as L, createVNode as R, Fragment as J, renderList as V } from "vue";
|
|
2
2
|
import { useRouter as $ } from "vue-router";
|
|
3
3
|
import b from "../../atoms/JIcon.vue.js";
|
|
4
4
|
import { hasMenuPermission as Y, cn as f } from "../../../lib/utils.js";
|
|
@@ -7,8 +7,8 @@ const j = {
|
|
|
7
7
|
class: "w-4 flex-shrink-0"
|
|
8
8
|
}, q = {
|
|
9
9
|
key: 0,
|
|
10
|
-
class: "
|
|
11
|
-
}, U = /* @__PURE__ */
|
|
10
|
+
class: "border-l border-border/60 ml-[14px] pl-[6px]"
|
|
11
|
+
}, U = /* @__PURE__ */ P({
|
|
12
12
|
__name: "JDynamicMenuItem",
|
|
13
13
|
props: {
|
|
14
14
|
item: {},
|
|
@@ -26,31 +26,31 @@ const j = {
|
|
|
26
26
|
activeKey: { default: null }
|
|
27
27
|
},
|
|
28
28
|
emits: ["menuClick", "expandChange"],
|
|
29
|
-
setup(e, { emit:
|
|
30
|
-
const t = e, c =
|
|
31
|
-
if (!
|
|
32
|
-
const
|
|
33
|
-
return t.expandedKeys?.has(
|
|
34
|
-
}),
|
|
35
|
-
if (
|
|
36
|
-
|
|
29
|
+
setup(e, { emit: S }) {
|
|
30
|
+
const t = e, c = S, w = $(), D = n(() => Y(t.item.menuKey, t.permissions)), h = n(() => t.activeKey !== void 0 && t.activeKey !== null ? t.item.menuKey === t.activeKey : !t.item.path || !t.activePath ? !1 : t.activePath === t.item.path), r = n(() => t.item.menuType === "F" || Array.isArray(t.item.children) && t.item.children.length > 0), x = n(() => {
|
|
31
|
+
if (!r.value) return !1;
|
|
32
|
+
const a = t.item.menuKey || t.item.label;
|
|
33
|
+
return t.expandedKeys?.has(a) ?? !1;
|
|
34
|
+
}), g = n(() => t.item.disabled || !D.value), A = n(() => ({ paddingLeft: "8px", paddingRight: "8px" })), E = (a) => {
|
|
35
|
+
if (g.value) {
|
|
36
|
+
a.preventDefault();
|
|
37
37
|
return;
|
|
38
38
|
}
|
|
39
|
-
if (
|
|
40
|
-
const i = t.item.menuKey || t.item.label,
|
|
41
|
-
c("expandChange", i,
|
|
39
|
+
if (r.value) {
|
|
40
|
+
const i = t.item.menuKey || t.item.label, o = !x.value;
|
|
41
|
+
c("expandChange", i, o), c("menuClick", {
|
|
42
42
|
menuItem: t.item,
|
|
43
43
|
path: [t.item],
|
|
44
|
-
event:
|
|
44
|
+
event: a
|
|
45
45
|
});
|
|
46
46
|
} else
|
|
47
|
-
!t.disableNavigation && t.item.path &&
|
|
47
|
+
!t.disableNavigation && t.item.path && w.push(t.item.path), c("menuClick", {
|
|
48
48
|
menuItem: t.item,
|
|
49
49
|
path: [t.item],
|
|
50
50
|
// 단순화된 경로 (필요시 부모 경로 포함하도록 확장 가능)
|
|
51
|
-
event:
|
|
51
|
+
event: a
|
|
52
52
|
});
|
|
53
|
-
},
|
|
53
|
+
}, p = {
|
|
54
54
|
default: {
|
|
55
55
|
itemClass: "flex items-center gap-1.5 py-1 rounded-md cursor-pointer transition-colors group",
|
|
56
56
|
labelClass: "flex-1 truncate text-xs",
|
|
@@ -62,80 +62,80 @@ const j = {
|
|
|
62
62
|
iconSize: "sm"
|
|
63
63
|
// JIcon은 'xs'를 지원하지 않으므로 'sm' 사용
|
|
64
64
|
}
|
|
65
|
-
}, d =
|
|
66
|
-
if (!
|
|
65
|
+
}, d = n(() => p[t.styletype] ?? p.default), N = n(() => x.value ? "chevronDown" : "chevronRight"), K = n(() => {
|
|
66
|
+
if (!r.value || !Array.isArray(t.item.children))
|
|
67
67
|
return 0;
|
|
68
|
-
const
|
|
69
|
-
let
|
|
70
|
-
for (const
|
|
71
|
-
|
|
72
|
-
return
|
|
68
|
+
const a = (i) => {
|
|
69
|
+
let o = 0;
|
|
70
|
+
for (const s of i)
|
|
71
|
+
o++, Array.isArray(s.children) && s.children.length > 0 && (o += a(s.children));
|
|
72
|
+
return o;
|
|
73
73
|
};
|
|
74
|
-
return
|
|
74
|
+
return a(t.item.children);
|
|
75
75
|
});
|
|
76
|
-
return (
|
|
77
|
-
const
|
|
78
|
-
return
|
|
76
|
+
return (a, i) => {
|
|
77
|
+
const o = I("JDynamicMenuItem", !0);
|
|
78
|
+
return l(), m("div", {
|
|
79
79
|
class: u(v(f)("w-full", e.className))
|
|
80
80
|
}, [
|
|
81
|
-
|
|
81
|
+
F("div", {
|
|
82
82
|
class: u(v(f)(
|
|
83
83
|
d.value.itemClass,
|
|
84
84
|
{
|
|
85
|
-
"bg-
|
|
86
|
-
"hover:bg-accent/50": !
|
|
87
|
-
"opacity-50 cursor-not-allowed":
|
|
85
|
+
"bg-primary/5 text-primary border-l-2 border-primary shadow-sm": h.value,
|
|
86
|
+
"hover:bg-accent/50": !g.value && !h.value,
|
|
87
|
+
"opacity-50 cursor-not-allowed": g.value,
|
|
88
88
|
"font-medium": h.value,
|
|
89
|
-
"font-semibold":
|
|
89
|
+
"font-semibold": r.value
|
|
90
90
|
// 폴더인 경우 볼드체
|
|
91
91
|
}
|
|
92
92
|
)),
|
|
93
|
-
style: B(
|
|
94
|
-
onClick:
|
|
93
|
+
style: B(A.value),
|
|
94
|
+
onClick: E
|
|
95
95
|
}, [
|
|
96
|
-
|
|
96
|
+
r.value ? (l(), C(b, {
|
|
97
97
|
key: 0,
|
|
98
|
-
name:
|
|
98
|
+
name: N.value,
|
|
99
99
|
size: d.value.iconSize,
|
|
100
100
|
class: "flex-shrink-0 opacity-60",
|
|
101
101
|
style: { "stroke-width": "1.5" }
|
|
102
|
-
}, null, 8, ["name", "size"])) : (
|
|
103
|
-
e.item.icon && !
|
|
102
|
+
}, null, 8, ["name", "size"])) : (l(), m("span", j)),
|
|
103
|
+
e.item.icon && !r.value ? (l(), C(b, {
|
|
104
104
|
key: 2,
|
|
105
105
|
name: e.item.icon,
|
|
106
106
|
size: d.value.iconSize,
|
|
107
107
|
class: "flex-shrink-0"
|
|
108
108
|
}, null, 8, ["name", "size"])) : y("", !0),
|
|
109
|
-
|
|
109
|
+
F("span", {
|
|
110
110
|
class: u(d.value.labelClass)
|
|
111
|
-
},
|
|
112
|
-
|
|
111
|
+
}, z(e.item.label), 3),
|
|
112
|
+
r.value && K.value > 0 ? (l(), m("span", {
|
|
113
113
|
key: 3,
|
|
114
114
|
class: u(v(f)(
|
|
115
115
|
"text-muted-foreground ml-1 flex-shrink-0",
|
|
116
116
|
t.styletype === "minimal" ? "text-[10px]" : "text-xs"
|
|
117
117
|
))
|
|
118
|
-
}, " (" +
|
|
119
|
-
e.item.menuKey && e.item.menuType === "L" && e.onFavoriteToggle ? (
|
|
118
|
+
}, " (" + z(K.value) + ") ", 3)) : y("", !0),
|
|
119
|
+
e.item.menuKey && e.item.menuType === "L" && e.onFavoriteToggle ? (l(), m("button", {
|
|
120
120
|
key: 4,
|
|
121
121
|
class: u(v(f)(
|
|
122
122
|
"opacity-0 group-hover:opacity-100 transition-opacity hover:bg-accent rounded flex-shrink-0",
|
|
123
123
|
t.styletype === "minimal" ? "p-0.5" : "p-1",
|
|
124
124
|
e.isFavorite && e.isFavorite(e.item.menuKey) && "opacity-100"
|
|
125
125
|
)),
|
|
126
|
-
onClick: i[0] || (i[0] = L((
|
|
126
|
+
onClick: i[0] || (i[0] = L((s) => e.onFavoriteToggle(e.item.menuKey), ["stop"]))
|
|
127
127
|
}, [
|
|
128
|
-
|
|
128
|
+
R(b, {
|
|
129
129
|
name: (e.isFavorite && e.isFavorite(e.item.menuKey), "star"),
|
|
130
130
|
size: d.value.iconSize,
|
|
131
131
|
class: u(e.isFavorite && e.isFavorite(e.item.menuKey) ? "text-yellow-500 fill-yellow-500" : "text-muted-foreground")
|
|
132
132
|
}, null, 8, ["name", "size", "class"])
|
|
133
133
|
], 2)) : y("", !0)
|
|
134
134
|
], 6),
|
|
135
|
-
|
|
136
|
-
(
|
|
137
|
-
key:
|
|
138
|
-
item:
|
|
135
|
+
r.value && x.value && e.item.children && Array.isArray(e.item.children) && e.item.children.length > 0 && e.level + 1 < e.maxDepth ? (l(), m("div", q, [
|
|
136
|
+
(l(!0), m(J, null, V(e.item.children, (s, T) => (l(), C(o, {
|
|
137
|
+
key: s.menuKey || s.label || T,
|
|
138
|
+
item: s,
|
|
139
139
|
level: e.level + 1,
|
|
140
140
|
"max-depth": e.maxDepth,
|
|
141
141
|
permissions: e.permissions,
|
|
@@ -148,7 +148,7 @@ const j = {
|
|
|
148
148
|
"disable-navigation": e.disableNavigation,
|
|
149
149
|
"active-key": e.activeKey,
|
|
150
150
|
onMenuClick: i[1] || (i[1] = (k) => c("menuClick", k)),
|
|
151
|
-
onExpandChange: i[2] || (i[2] = (k,
|
|
151
|
+
onExpandChange: i[2] || (i[2] = (k, M) => c("expandChange", k, M))
|
|
152
152
|
}, null, 8, ["item", "level", "max-depth", "permissions", "active-path", "expanded-keys", "favorites", "on-favorite-toggle", "is-favorite", "styletype", "disable-navigation", "active-key"]))), 128))
|
|
153
153
|
])) : y("", !0)
|
|
154
154
|
], 2);
|