@wsxjs/wsx-base-components 0.0.16 → 0.0.18

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.
Files changed (42) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +28 -28
  3. package/dist/index.cjs +14 -2
  4. package/dist/index.js +4971 -2032
  5. package/dist/style.css +1 -1
  6. package/package.json +16 -7
  7. package/src/{XyButton.css → Button.css} +1 -1
  8. package/src/{XyButton.wsx → Button.wsx} +18 -9
  9. package/src/ButtonGroup.css +30 -0
  10. package/src/{XyButtonGroup.wsx → ButtonGroup.wsx} +26 -14
  11. package/src/CodeBlock.css +275 -0
  12. package/src/CodeBlock.types.ts +25 -0
  13. package/src/CodeBlock.wsx +296 -0
  14. package/src/ColorPicker.wsx +6 -5
  15. package/src/Combobox.css +254 -0
  16. package/src/Combobox.types.ts +32 -0
  17. package/src/Combobox.wsx +352 -0
  18. package/src/Dropdown.css +178 -0
  19. package/src/Dropdown.types.ts +28 -0
  20. package/src/Dropdown.wsx +221 -0
  21. package/src/LanguageSwitcher.css +148 -0
  22. package/src/LanguageSwitcher.wsx +190 -0
  23. package/src/OverflowDetector.ts +169 -0
  24. package/src/ResponsiveNav.css +555 -0
  25. package/src/ResponsiveNav.types.ts +30 -0
  26. package/src/ResponsiveNav.wsx +450 -0
  27. package/src/SvgIcon.wsx +2 -2
  28. package/src/index.ts +17 -9
  29. package/src/types/wsx.d.ts +4 -3
  30. package/src/ReactiveCounter.css +0 -304
  31. package/src/ReactiveCounter.wsx +0 -231
  32. package/src/SimpleReactiveDemo.wsx +0 -59
  33. package/src/SvgDemo.wsx +0 -241
  34. package/src/TodoList.css +0 -197
  35. package/src/TodoList.wsx +0 -264
  36. package/src/TodoListLight.css +0 -198
  37. package/src/TodoListLight.wsx +0 -263
  38. package/src/UserProfile.css +0 -146
  39. package/src/UserProfile.wsx +0 -247
  40. package/src/UserProfileLight.css +0 -146
  41. package/src/UserProfileLight.wsx +0 -256
  42. package/src/XyButtonGroup.css +0 -30
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2024 WSX Framework Contributors
3
+ Copyright (c) 2026 WSXJS Contributors
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
18
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
19
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
20
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @wsxjs/wsx-base-components
2
2
 
3
- 现代化的 Web Components 基础组件库，基于 WSX Framework 构建。
3
+ 现代化的 Web Components 基础组件库，基于 WSXJS 构建。
4
4
 
5
5
  ## 🚀 快速开始
6
6
 
@@ -17,18 +17,18 @@ npm install @wsxjs/wsx-base-components
17
17
  <html>
18
18
  <head>
19
19
  <script type="module">
20
- import { XyButton } from '@wsxjs/wsx-base-components';
20
+ import { Button } from '@wsxjs/wsx-base-components';
21
21
  </script>
22
22
  </head>
23
23
  <body>
24
- <xy-button variant="primary">Hello World</xy-button>
24
+ <wsx-button variant="primary">Hello World</wsx-button>
25
25
  </body>
26
26
  </html>
27
27
  ```
28
28
 
29
29
  ## 🎨 组件
30
30
 
31
- ### XyButton - 现代按钮组件
31
+ ### Button - 现代按钮组件
32
32
 
33
33
  一个完全重新设计的现代化按钮组件，具有语义化设计、无障碍访问和响应式布局。
34
34
 
@@ -46,21 +46,21 @@ npm install @wsxjs/wsx-base-components
46
46
 
47
47
  ```html
48
48
  <!-- 基础用法 -->
49
- <xy-button variant="primary">Primary Button</xy-button>
50
- <xy-button variant="secondary">Secondary Button</xy-button>
51
- <xy-button variant="danger">Delete</xy-button>
49
+ <wsx-button variant="primary">Primary Button</wsx-button>
50
+ <wsx-button variant="secondary">Secondary Button</wsx-button>
51
+ <wsx-button variant="danger">Delete</wsx-button>
52
52
 
53
53
  <!-- 图标按钮 -->
54
- <xy-button icon="🚀" variant="primary">Launch</xy-button>
55
- <xy-button icon="→" icon-position="right" variant="primary">Next</xy-button>
54
+ <wsx-button icon="🚀" variant="primary">Launch</wsx-button>
55
+ <wsx-button icon="→" icon-position="right" variant="primary">Next</wsx-button>
56
56
 
57
57
  <!-- 状态按钮 -->
58
- <xy-button loading variant="primary">Loading...</xy-button>
59
- <xy-button disabled variant="primary">Disabled</xy-button>
58
+ <wsx-button loading variant="primary">Loading...</wsx-button>
59
+ <wsx-button disabled variant="primary">Disabled</wsx-button>
60
60
 
61
61
  <!-- 布局按钮 -->
62
- <xy-button block variant="primary">Full Width</xy-button>
63
- <xy-button rounded variant="primary">Rounded</xy-button>
62
+ <wsx-button block variant="primary">Full Width</wsx-button>
63
+ <wsx-button rounded variant="primary">Rounded</wsx-button>
64
64
  ```
65
65
 
66
66
  #### API
@@ -83,7 +83,7 @@ npm install @wsxjs/wsx-base-components
83
83
 
84
84
  ```javascript
85
85
  // 监听点击事件
86
- button.addEventListener('xy-button-click', (event) => {
86
+ button.addEventListener('wsx-button-click', (event) => {
87
87
  console.log('Button clicked:', event.detail);
88
88
  // event.detail 包含：variant, size, disabled, loading
89
89
  });
@@ -140,19 +140,19 @@ npm run start
140
140
  ```css
141
141
  :host {
142
142
  /* 颜色系统 */
143
- --xy-button-primary-bg: #3b82f6;
144
- --xy-button-primary-hover-bg: #2563eb;
145
- --xy-button-primary-color: #ffffff;
143
+ --wsx-button-primary-bg: #3b82f6;
144
+ --wsx-button-primary-hover-bg: #2563eb;
145
+ --wsx-button-primary-color: #ffffff;
146
146
 
147
147
  /* 尺寸系统 */
148
- --xy-button-sm-padding: 0.5rem 0.75rem;
149
- --xy-button-md-padding: 0.75rem 1rem;
150
- --xy-button-lg-padding: 1rem 1.5rem;
148
+ --wsx-button-sm-padding: 0.5rem 0.75rem;
149
+ --wsx-button-md-padding: 0.75rem 1rem;
150
+ --wsx-button-lg-padding: 1rem 1.5rem;
151
151
 
152
152
  /* 视觉效果 */
153
- --xy-button-border-radius: 0.5rem;
154
- --xy-button-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
155
- --xy-button-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
153
+ --wsx-button-border-radius: 0.5rem;
154
+ --wsx-button-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
155
+ --wsx-button-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
156
156
  }
157
157
  ```
158
158
 
@@ -160,9 +160,9 @@ npm run start
160
160
 
161
161
  ```css
162
162
  [data-theme="dark"] {
163
- --xy-button-primary-bg: #1e40af;
164
- --xy-button-secondary-bg: #374151;
165
- --xy-button-outline-border: #4b5563;
163
+ --wsx-button-primary-bg: #1e40af;
164
+ --wsx-button-secondary-bg: #374151;
165
+ --wsx-button-outline-border: #4b5563;
166
166
  }
167
167
  ```
168
168
 
@@ -199,6 +199,6 @@ MIT License
199
199
 
200
200
  ## 📚 相关链接
201
201
 
202
- - [WSX Framework](https://github.com/wsxjs/wsxjs)
203
- - [设计文档](./docs/modern-xybutton-design.md)
202
+ - [WSXJS](https://github.com/wsxjs/wsxjs)
203
+ - [设计文档](./docs/modern-button-design.md)
204
204
  - [在线演示](http://localhost:3000)