wok-ui-ext 0.1.0 → 0.1.1

package/dist/menu/index.d.ts

@@ -8,6 +8,9 @@ export type { MenuItemData, MenuOptions } from './types';
  * 垂直菜单，支持多级嵌套、图标、折叠模式。
  * 适用于侧边栏导航。
  *
+ * 菜单宽度默认 240px，可通过构造参数 `width` 指定（数字，单位 px），
+ * 或直接覆写 CSS 变量 `--wok-ui-ext-menu-width` 调整。
+ *
  * @example
  * ```ts
  * const menu = new Menu({

package/dist/menu/index.js

@@ -7,6 +7,9 @@ import './style.css';
  * 垂直菜单，支持多级嵌套、图标、折叠模式。
  * 适用于侧边栏导航。
  *
+ * 菜单宽度默认 240px，可通过构造参数 `width` 指定（数字，单位 px），
+ * 或直接覆写 CSS 变量 `--wok-ui-ext-menu-width` 调整。
+ *
  * @example
  * ```ts
  * const menu = new Menu({
@@ -31,6 +34,10 @@ export class Menu extends DivModule {
         this.nodes = [];
         if (opts.collapsed)
             this.el.classList.add('wok-ui-ext-menu-collapsed');
+        // 指定宽度时写入 CSS 变量，供样式使用（默认 240px）
+        if (opts.width) {
+            this.el.style.setProperty('--wok-ui-ext-menu-width', `${opts.width}px`);
+        }
         const ctx = {
             selectedKey: opts.selectedKey,
             collapsed: opts.collapsed ?? false,

package/dist/menu/style.css

@@ -1,6 +1,6 @@
 .wok-ui-ext-menu {
   background: var(--bg-card);
-  width: 240px;
+  width: var(--wok-ui-ext-menu-width, 240px);
   display: flex;
   flex-direction: column;
   transition: width 0.25s ease;
@@ -86,7 +86,7 @@
   padding-left: 48px;
 }
 .wok-ui-ext-menu.wok-ui-ext-menu-collapsed {
-  width: 56px;
+  width: var(--wok-ui-ext-menu-collapsed-width, 56px);
 }
 .wok-ui-ext-menu.wok-ui-ext-menu-collapsed .wok-ui-ext-menu-item {
   justify-content: center;

package/dist/menu/types.d.ts

@@ -24,6 +24,8 @@ export interface MenuOptions {
     selectedKey?: string;
     /** 是否折叠（仅显示图标） */
     collapsed?: boolean;
+    /** 菜单宽度（px，数字）。默认 240 */
+    width?: number;
     /** 点击菜单项回调 */
     onClick?: (key: string) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wok-ui-ext",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "wok-ui 的扩展库，提供一套科技蓝风格 + 多主题的组件库，覆盖常用的组件",
   "main": "dist/index.js",
   "module": "dist/index.js",