@leduchai/vmeta-ui-shell 0.1.6 → 0.1.7
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/dist/index.cjs +7 -1
- package/dist/index.js +7 -1
- package/dist/styles.css +2 -2
- package/package.json +9 -4
package/dist/index.cjs
CHANGED
|
@@ -135,7 +135,13 @@ function VmetaSidebar({
|
|
|
135
135
|
};
|
|
136
136
|
const menuItems = collapsed ? visibleGroups.flatMap((group) => group.children) : [];
|
|
137
137
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: `vmeta-sidebar ${collapsed ? "is-collapsed" : ""}`, "aria-label": `Dieu huong ${app.appName}`, children: [
|
|
138
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
138
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: [
|
|
139
|
+
app.logoSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: app.logoSrc, alt: app.logoAlt ?? "", className: "vmeta-sidebar__logo" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaBrandMark, { className: "vmeta-sidebar__mark" }),
|
|
140
|
+
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "vmeta-sidebar__brand-copy", children: [
|
|
141
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: app.appName }),
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: app.appSubtitle })
|
|
143
|
+
] })
|
|
144
|
+
] }),
|
|
139
145
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "vmeta-sidebar__nav", children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-sidebar__collapsed-items", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), collapsed: true, onNavigate: navigate }, item.key)) }) : visibleGroups.map((group) => {
|
|
140
146
|
const open = openKeys.includes(group.key);
|
|
141
147
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "vmeta-menu-group", children: [
|
package/dist/index.js
CHANGED
|
@@ -108,7 +108,13 @@ function VmetaSidebar({
|
|
|
108
108
|
};
|
|
109
109
|
const menuItems = collapsed ? visibleGroups.flatMap((group) => group.children) : [];
|
|
110
110
|
return /* @__PURE__ */ jsxs("aside", { className: `vmeta-sidebar ${collapsed ? "is-collapsed" : ""}`, "aria-label": `Dieu huong ${app.appName}`, children: [
|
|
111
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ jsxs("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: [
|
|
112
|
+
app.logoSrc ? /* @__PURE__ */ jsx("img", { src: app.logoSrc, alt: app.logoAlt ?? "", className: "vmeta-sidebar__logo" }) : /* @__PURE__ */ jsx(VmetaBrandMark, { className: "vmeta-sidebar__mark" }),
|
|
113
|
+
!collapsed && /* @__PURE__ */ jsxs("span", { className: "vmeta-sidebar__brand-copy", children: [
|
|
114
|
+
/* @__PURE__ */ jsx("strong", { children: app.appName }),
|
|
115
|
+
/* @__PURE__ */ jsx("small", { children: app.appSubtitle })
|
|
116
|
+
] })
|
|
117
|
+
] }),
|
|
112
118
|
/* @__PURE__ */ jsx("nav", { className: "vmeta-sidebar__nav", children: collapsed ? /* @__PURE__ */ jsx("div", { className: "vmeta-sidebar__collapsed-items", children: menuItems.map((item) => /* @__PURE__ */ jsx(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), collapsed: true, onNavigate: navigate }, item.key)) }) : visibleGroups.map((group) => {
|
|
113
119
|
const open = openKeys.includes(group.key);
|
|
114
120
|
return /* @__PURE__ */ jsxs("section", { className: "vmeta-menu-group", children: [
|
package/dist/styles.css
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
.vmeta-app-shell__content { min-width: 0; padding: var(--page-gutter-tablet, 20px) var(--page-gutter-desktop, 28px) 48px; }
|
|
18
18
|
.vmeta-app-shell__overlay { display: none; }
|
|
19
19
|
.vmeta-sidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--color-border); color: var(--color-ink); background: var(--color-surface); box-shadow: var(--shadow-md); }
|
|
20
|
-
.vmeta-sidebar__brand { min-height: 82px; display: flex; align-items: center; justify-content:
|
|
20
|
+
.vmeta-sidebar__brand { min-height: 82px; display: flex; align-items: center; justify-content: flex-start; gap: 11px; margin: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 20px; color: inherit; text-decoration: none; background: var(--color-surface); box-shadow: 0 5px 18px rgb(7 19 13 / 5%); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
|
|
21
21
|
.vmeta-sidebar__brand:hover { border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
|
|
22
22
|
.vmeta-sidebar__logo { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; }
|
|
23
23
|
.vmeta-sidebar__mark { width: 42px; height: 42px; flex: 0 0 42px; display: block; color: var(--color-primary); }
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
.vmeta-sidebar__account-actions { flex: 0 0 auto; }
|
|
57
57
|
.vmeta-sidebar__collapse { min-height: 46px; display: grid; place-items: center; border: 0; border-top: 1px solid var(--color-border); color: var(--color-muted); background: transparent; font-size: 22px; }
|
|
58
58
|
.vmeta-sidebar__collapse:hover { color: var(--color-primary); background: var(--color-primary-soft); }
|
|
59
|
-
.vmeta-sidebar.is-collapsed .vmeta-sidebar__brand { min-height: 60px; margin: 9px; padding: 8px; }
|
|
59
|
+
.vmeta-sidebar.is-collapsed .vmeta-sidebar__brand { justify-content: center; min-height: 60px; margin: 9px; padding: 8px; }
|
|
60
60
|
.vmeta-sidebar.is-collapsed .vmeta-sidebar__logo, .vmeta-sidebar.is-collapsed .vmeta-sidebar__mark { width: 36px; height: 36px; flex-basis: 36px; }
|
|
61
61
|
.vmeta-sidebar.is-collapsed .vmeta-sidebar__nav { padding-inline: 9px; }
|
|
62
62
|
.vmeta-sidebar__collapsed-items { display: grid; gap: 4px; }
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leduchai/vmeta-ui-shell",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "Application shell, sidebar, menu va header dung chung cua VMETA.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"sideEffects": [
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"./dist/styles.css"
|
|
9
|
+
],
|
|
8
10
|
"main": "./dist/index.cjs",
|
|
9
11
|
"module": "./dist/index.js",
|
|
10
12
|
"types": "./dist/index.d.ts",
|
|
@@ -16,12 +18,15 @@
|
|
|
16
18
|
},
|
|
17
19
|
"./styles.css": "./dist/styles.css"
|
|
18
20
|
},
|
|
19
|
-
"files": [
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"README.md"
|
|
24
|
+
],
|
|
20
25
|
"scripts": {
|
|
21
26
|
"build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react --external react-dom && node ../../scripts/copy-file.mjs src/styles.css dist/styles.css"
|
|
22
27
|
},
|
|
23
28
|
"dependencies": {
|
|
24
|
-
"@leduchai/vmeta-ui-tokens": "0.1.
|
|
29
|
+
"@leduchai/vmeta-ui-tokens": "0.1.7"
|
|
25
30
|
},
|
|
26
31
|
"peerDependencies": {
|
|
27
32
|
"react": ">=18 <20",
|