@greypan/web-ui 1.2.1 → 1.2.3
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/README.CN.md +101 -0
- package/README.md +101 -0
- package/package.json +3 -3
package/README.CN.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @greypan/web-ui
|
|
2
|
+
|
|
3
|
+
基于 Lit 的 Web Components，支持 React、Vue 和原生 HTML
|
|
4
|
+
|
|
5
|
+
[English](./README.md) | 简体中文
|
|
6
|
+
|
|
7
|
+
## 功能
|
|
8
|
+
|
|
9
|
+
- **Button**：带 full/primary/text/icon 变体的样式化按钮
|
|
10
|
+
- **BackTop**：可配置阈值和平滑滚动的回到顶部按钮
|
|
11
|
+
- **Layout**：带 header/sidebar/tabbar 插槽的页面布局
|
|
12
|
+
- **SVG Draw Lines**：带缓动控制的 SVG 线条绘制动画
|
|
13
|
+
- **框架兼容**：支持 React、Vue 和原生 HTML
|
|
14
|
+
|
|
15
|
+
## 安装
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# npm
|
|
19
|
+
npm install @greypan/web-ui
|
|
20
|
+
|
|
21
|
+
# pnpm
|
|
22
|
+
pnpm add @greypan/web-ui
|
|
23
|
+
|
|
24
|
+
# yarn
|
|
25
|
+
yarn add @greypan/web-ui
|
|
26
|
+
|
|
27
|
+
# bun
|
|
28
|
+
bun add @greypan/web-ui
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
> 需要 `lit` 作为依赖。
|
|
32
|
+
|
|
33
|
+
## 快速开始
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<script type="module" src="@greypan/web-ui"></script>
|
|
37
|
+
|
|
38
|
+
<web-ui-button primary>点击我</web-ui-button>
|
|
39
|
+
<web-ui-button text>取消</web-ui-button>
|
|
40
|
+
<web-ui-button icon>
|
|
41
|
+
<iconify-icon icon="lucide:plus"></iconify-icon>
|
|
42
|
+
</web-ui-button>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## API
|
|
46
|
+
|
|
47
|
+
### `<web-ui-button>`
|
|
48
|
+
|
|
49
|
+
样式化按钮组件。
|
|
50
|
+
|
|
51
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
52
|
+
| --------- | --------- | ------- | ---------- |
|
|
53
|
+
| `full` | `boolean` | `false` | 全宽按钮 |
|
|
54
|
+
| `primary` | `boolean` | `false` | 主要样式 |
|
|
55
|
+
| `text` | `boolean` | `false` | 纯文本样式 |
|
|
56
|
+
| `icon` | `boolean` | `false` | 纯图标模式 |
|
|
57
|
+
|
|
58
|
+
### `<web-ui-back-top>`
|
|
59
|
+
|
|
60
|
+
回到顶部按钮。
|
|
61
|
+
|
|
62
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
63
|
+
| -------------- | ----------------------- | -------- | ------------------ |
|
|
64
|
+
| `smooth` | `boolean` | `true` | 平滑滚动动画 |
|
|
65
|
+
| `threshold` | `number` | `200` | 显示按钮的滚动阈值 |
|
|
66
|
+
| `visible` | `boolean` | `false` | 当前可见状态 |
|
|
67
|
+
| `scrollTarget` | `HTMLElement \| Window` | `window` | 滚动容器 |
|
|
68
|
+
|
|
69
|
+
**事件：**
|
|
70
|
+
|
|
71
|
+
| 事件名 | 详情 | 说明 |
|
|
72
|
+
| ---------------- | ---------------------- | ------------ |
|
|
73
|
+
| `visible-change` | `{ visible: boolean }` | 可见状态变更 |
|
|
74
|
+
|
|
75
|
+
### `<web-ui-layout>`
|
|
76
|
+
|
|
77
|
+
带插槽的页面布局。
|
|
78
|
+
|
|
79
|
+
| 插槽 | 说明 |
|
|
80
|
+
| --------- | -------------- |
|
|
81
|
+
| `header` | 顶部区域 |
|
|
82
|
+
| `sidebar` | 侧边栏区域 |
|
|
83
|
+
| `tabbar` | 底部标签栏区域 |
|
|
84
|
+
| （默认） | 主内容区域 |
|
|
85
|
+
|
|
86
|
+
### `<web-ui-svg-draw-lines>`
|
|
87
|
+
|
|
88
|
+
SVG 线条绘制动画组件。包裹 `<svg>` 元素并动画化 stroke-dashoffset。
|
|
89
|
+
|
|
90
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
91
|
+
| ---------- | -------- | ---------- | ---------------- |
|
|
92
|
+
| `duration` | `number` | `1000` | 动画时长（毫秒） |
|
|
93
|
+
| `easing` | `string` | `'linear'` | CSS 缓动函数 |
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<web-ui-svg-draw-lines duration="2000" easing="ease-in-out">
|
|
97
|
+
<svg viewBox="0 0 100 100">
|
|
98
|
+
<path d="M10 10 L90 10 L90 90 L10 90 Z" fill="none" stroke="black" />
|
|
99
|
+
</svg>
|
|
100
|
+
</web-ui-svg-draw-lines>
|
|
101
|
+
```
|
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @greypan/web-ui
|
|
2
|
+
|
|
3
|
+
Lit-based web components for React, Vue, and vanilla JS
|
|
4
|
+
|
|
5
|
+
English | [简体中文](./README.CN.md)
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Button**: Styled button with full/primary/text/icon variants
|
|
10
|
+
- **BackTop**: Scroll-to-top with configurable threshold and smooth scroll
|
|
11
|
+
- **Layout**: Page layout with header/sidebar/tabbar slots
|
|
12
|
+
- **SVG Draw Lines**: SVG line drawing animation with easing control
|
|
13
|
+
- **Framework compatible**: Works with React, Vue, and vanilla HTML
|
|
14
|
+
|
|
15
|
+
## Install
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# npm
|
|
19
|
+
npm install @greypan/web-ui
|
|
20
|
+
|
|
21
|
+
# pnpm
|
|
22
|
+
pnpm add @greypan/web-ui
|
|
23
|
+
|
|
24
|
+
# yarn
|
|
25
|
+
yarn add @greypan/web-ui
|
|
26
|
+
|
|
27
|
+
# bun
|
|
28
|
+
bun add @greypan/web-ui
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
> Requires `lit` as a dependency.
|
|
32
|
+
|
|
33
|
+
## Quick Start
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<script type="module" src="@greypan/web-ui"></script>
|
|
37
|
+
|
|
38
|
+
<web-ui-button primary>Click me</web-ui-button>
|
|
39
|
+
<web-ui-button text>Cancel</web-ui-button>
|
|
40
|
+
<web-ui-button icon>
|
|
41
|
+
<iconify-icon icon="lucide:plus"></iconify-icon>
|
|
42
|
+
</web-ui-button>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## API
|
|
46
|
+
|
|
47
|
+
### `<web-ui-button>`
|
|
48
|
+
|
|
49
|
+
Styled button component.
|
|
50
|
+
|
|
51
|
+
| Attribute | Type | Default | Description |
|
|
52
|
+
| --------- | --------- | ------- | ----------------- |
|
|
53
|
+
| `full` | `boolean` | `false` | Full width button |
|
|
54
|
+
| `primary` | `boolean` | `false` | Primary style |
|
|
55
|
+
| `text` | `boolean` | `false` | Text-only style |
|
|
56
|
+
| `icon` | `boolean` | `false` | Icon-only mode |
|
|
57
|
+
|
|
58
|
+
### `<web-ui-back-top>`
|
|
59
|
+
|
|
60
|
+
Scroll-to-top button.
|
|
61
|
+
|
|
62
|
+
| Attribute | Type | Default | Description |
|
|
63
|
+
| -------------- | ----------------------- | -------- | ------------------------------- |
|
|
64
|
+
| `smooth` | `boolean` | `true` | Smooth scroll animation |
|
|
65
|
+
| `threshold` | `number` | `200` | Scroll threshold to show button |
|
|
66
|
+
| `visible` | `boolean` | `false` | Current visibility state |
|
|
67
|
+
| `scrollTarget` | `HTMLElement \| Window` | `window` | Scroll container |
|
|
68
|
+
|
|
69
|
+
**Events:**
|
|
70
|
+
|
|
71
|
+
| Event | Detail | Description |
|
|
72
|
+
| ---------------- | ---------------------- | ------------------------ |
|
|
73
|
+
| `visible-change` | `{ visible: boolean }` | Visibility state changed |
|
|
74
|
+
|
|
75
|
+
### `<web-ui-layout>`
|
|
76
|
+
|
|
77
|
+
Page layout with slots.
|
|
78
|
+
|
|
79
|
+
| Slot | Description |
|
|
80
|
+
| --------- | ----------------- |
|
|
81
|
+
| `header` | Header area |
|
|
82
|
+
| `sidebar` | Sidebar area |
|
|
83
|
+
| `tabbar` | Tab bar area |
|
|
84
|
+
| (default) | Main content area |
|
|
85
|
+
|
|
86
|
+
### `<web-ui-svg-draw-lines>`
|
|
87
|
+
|
|
88
|
+
SVG line drawing animation component. Wraps an `<svg>` element and animates stroke-dashoffset.
|
|
89
|
+
|
|
90
|
+
| Attribute | Type | Default | Description |
|
|
91
|
+
| ---------- | -------- | ---------- | ------------------------ |
|
|
92
|
+
| `duration` | `number` | `1000` | Animation duration in ms |
|
|
93
|
+
| `easing` | `string` | `'linear'` | CSS easing function |
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<web-ui-svg-draw-lines duration="2000" easing="ease-in-out">
|
|
97
|
+
<svg viewBox="0 0 100 100">
|
|
98
|
+
<path d="M10 10 L90 10 L90 90 L10 90 Z" fill="none" stroke="black" />
|
|
99
|
+
</svg>
|
|
100
|
+
</web-ui-svg-draw-lines>
|
|
101
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@greypan/web-ui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"iconify-icon": "^3.0.2",
|
|
41
41
|
"lit": "^3.3.3",
|
|
42
|
-
"@greypan/browser-kit": "1.
|
|
43
|
-
"@greypan/js-kit": "1.
|
|
42
|
+
"@greypan/browser-kit": "1.6.0",
|
|
43
|
+
"@greypan/js-kit": "1.5.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"react": "^19.2.7",
|