@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 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.jsx)("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: 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" }) }),
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__ */ jsx("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: app.logoSrc ? /* @__PURE__ */ jsx("img", { src: app.logoSrc, alt: app.logoAlt ?? "", className: "vmeta-sidebar__logo" }) : /* @__PURE__ */ jsx(VmetaBrandMark, { className: "vmeta-sidebar__mark" }) }),
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: center; 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); }
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.6",
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": ["./dist/styles.css"],
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": ["dist", "README.md"],
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.6"
29
+ "@leduchai/vmeta-ui-tokens": "0.1.7"
25
30
  },
26
31
  "peerDependencies": {
27
32
  "react": ">=18 <20",