@wsxjs/wsx-router 0.0.30 → 0.1.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@wsxjs/wsx-router",
-  "version": "0.0.30",
+  "version": "0.1.1",
   "description": "WSX Router - Native History API-based routing for WSXJS",
   "type": "module",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
   },
@@ -18,8 +18,8 @@
     "!**/test"
   ],
   "dependencies": {
-    "@wsxjs/wsx-core": "0.0.30",
-    "@wsxjs/wsx-logger": "0.0.30"
+    "@wsxjs/wsx-core": "0.1.1",
+    "@wsxjs/wsx-logger": "0.1.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.37.0",
@@ -29,10 +29,10 @@
     "eslint": "^9.31.0",
     "jsdom": "^26.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.4.19",
+    "vite": "^7.3.1",
     "vitest": "^2.1.8",
-    "@wsxjs/wsx-vite-plugin": "0.0.30",
-    "@wsxjs/eslint-plugin-wsx": "0.0.30"
+    "@wsxjs/eslint-plugin-wsx": "0.1.1",
+    "@wsxjs/wsx-vite-plugin": "0.1.1"
   },
   "keywords": [
     "wsx",

package/src/WsxLink.css

@@ -1,46 +1,56 @@
 /* WSX Link 基础样式 - 使用 CSS Parts 允许宿主自定义 */
 :host {
-    display: inline-block;
+    display: var(--wsx-theme-link-host-display, inline-flex);
+    align-items: var(--wsx-theme-link-host-align-items, center);
     min-width: fit-content;
     min-height: fit-content;
     width: auto;
     height: auto;
+    margin: var(--wsx-theme-btn-margin, 0);
+    vertical-align: var(--wsx-theme-btn-vertical-align, middle);
 }
 
 .wsx-link {
-    color: var(--link-color, #007bff);
-    text-decoration: var(--link-decoration, underline);
+    color: var(--wsx-theme-link-color, #007bff);
+    text-decoration: var(--wsx-theme-link-decoration, underline);
     cursor: pointer;
     transition: color 0.2s ease;
-    display: block;
-    width: 100%;
-    height: 100%;
-    min-height: 1.2em;
-    line-height: 1.2;
+    display: var(--wsx-theme-link-display, inline-flex);
+    align-items: var(--wsx-theme-link-align-items, center);
+    justify-content: var(--wsx-theme-link-justify-content, flex-start);
+    gap: var(--wsx-theme-link-gap, 0);
+    line-height: var(--wsx-theme-link-line-height, var(--wsx-theme-btn-line-height, 1.5));
+    font-size: var(--wsx-theme-link-font-size, inherit);
+    font-weight: var(--wsx-theme-link-font-weight, inherit);
     /* 确保整个链接区域可点击 */
-    padding: inherit;
-    margin: inherit;
+    padding: var(--wsx-theme-link-padding, 0);
+    margin: var(--wsx-theme-link-margin, 0);
+    box-sizing: var(--wsx-theme-btn-box-sizing, border-box);
+    vertical-align: var(--wsx-theme-btn-vertical-align, middle);
+    width: auto;
+    height: auto;
+    min-width: fit-content;
 }
 
 .wsx-link:hover {
-    color: var(--link-hover-color, #0056b3);
-    text-decoration: var(--link-hover-decoration, underline);
+    color: var(--wsx-theme-link-hover-color, #0056b3);
+    text-decoration: var(--wsx-theme-link-hover-decoration, underline);
 }
 
 .wsx-link:focus {
-    outline: 2px solid var(--link-focus-color, var(--focus-color, #dc2626));
+    outline: 2px solid var(--wsx-theme-link-focus-color, var(--wsx-theme-focus-color, #dc2626));
     outline-offset: 2px;
 }
 
 /* 激活状态 */
 .wsx-link.active {
-    color: var(--link-active-color, #6c757d);
-    font-weight: var(--link-active-weight, bold);
+    color: var(--wsx-theme-link-active-color, #6c757d);
+    font-weight: var(--wsx-theme-link-active-weight, bold);
 }
 
 /* 禁用状态 */
 :host([disabled]) .wsx-link {
-    color: var(--link-disabled-color, #6c757d);
+    color: var(--wsx-theme-link-disabled-color, #6c757d);
     cursor: not-allowed;
     pointer-events: none;
 }
@@ -55,25 +65,25 @@
 
 /* 变体样式 */
 :host([variant="button"]) .wsx-link {
-    background-color: var(--button-bg, #007bff);
-    color: var(--button-color, white);
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
+    background-color: var(--wsx-theme-button-bg, #007bff);
+    color: var(--wsx-theme-button-color, white);
+    padding: var(--wsx-theme-btn-padding, 0.5rem 1rem);
+    border-radius: var(--wsx-theme-btn-border-radius, 0.25rem);
     text-decoration: none;
-    display: inline-block;
+    display: var(--wsx-theme-btn-display, inline-block);
 }
 
 :host([variant="button"]) .wsx-link:hover {
-    background-color: var(--button-hover-bg, #0056b3);
-    color: var(--button-hover-color, white);
+    background-color: var(--wsx-theme-button-hover-bg, #0056b3);
+    color: var(--wsx-theme-button-hover-color, white);
 }
 
 :host([variant="tab"]) .wsx-link {
-    padding: 0.5rem 1rem;
+    padding: var(--wsx-theme-btn-padding, 0.5rem 1rem);
     border-bottom: 2px solid transparent;
     text-decoration: none;
 }
 
 :host([variant="tab"]) .wsx-link.active {
-    border-bottom-color: var(--tab-active-border, #007bff);
+    border-bottom-color: var(--wsx-theme-tab-active-border, #007bff);
 }