ranui 0.1.10-alpha.2 → 0.1.10-alpha.23
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.zh-CN.md +192 -0
- package/dist/{_commonjs-dynamic-modules-DLbDWi6a.js → _commonjs-dynamic-modules-HhqG7SJg.js} +2 -2
- package/dist/assets/image/failImage.d.ts +2 -0
- package/dist/build/config.d.ts +3 -0
- package/dist/build/config.es.d.ts +2 -0
- package/dist/build/config.sha.d.ts +2 -0
- package/dist/build/config.umd.d.ts +2 -0
- package/dist/button.js +3 -3
- package/dist/checkbox.js +3 -3
- package/dist/colorpicker.js +7 -9
- package/dist/{colz-CRDozfZA.js → colz-DJZvo_8B.js} +3 -8
- package/dist/components/button/index.d.ts +38 -0
- package/dist/components/checkbox/index.d.ts +31 -0
- package/dist/components/colorpicker/index.d.ts +120 -0
- package/dist/components/dropdown/index.d.ts +34 -0
- package/dist/components/form/index.d.ts +2 -0
- package/dist/components/icon/index.d.ts +2 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/input/index.d.ts +210 -0
- package/dist/components/loading/index.d.ts +76 -0
- package/dist/components/math/index.d.ts +16 -0
- package/dist/components/message/index.d.ts +17 -0
- package/dist/components/modal/index.d.ts +2 -0
- package/dist/components/player/index.d.ts +250 -0
- package/dist/components/popover/content/index.d.ts +16 -0
- package/dist/components/popover/index.d.ts +91 -0
- package/dist/components/preview/colz.d.ts +72 -0
- package/dist/components/preview/constant.d.ts +5 -0
- package/dist/components/preview/docx.d.ts +8 -0
- package/dist/components/preview/excel/excel.d.ts +2 -0
- package/dist/components/preview/excel/index.d.ts +2 -0
- package/dist/components/preview/excel/media.d.ts +37 -0
- package/dist/components/preview/index.d.ts +3 -0
- package/dist/components/preview/pdf.d.ts +34 -0
- package/dist/components/preview/pptx/index.d.ts +19 -0
- package/dist/components/preview/pptx/process_pptx.d.ts +22 -0
- package/dist/components/preview/pptx/t_xml.d.ts +1 -0
- package/dist/components/preview/pptx/worker.d.ts +1 -0
- package/dist/components/preview/types.d.ts +10 -0
- package/dist/components/progress/index.d.ts +41 -0
- package/dist/components/radar/index.d.ts +2 -0
- package/dist/components/scratch/index.d.ts +21 -0
- package/dist/components/select/dropdown-item/index.d.ts +23 -0
- package/dist/components/select/index.d.ts +114 -0
- package/dist/components/select/option/index.d.ts +2 -0
- package/dist/components/skeleton/index.d.ts +2 -0
- package/dist/components/tab/index.d.ts +424 -0
- package/dist/components/tabpane/index.d.ts +368 -0
- package/dist/{docx-CChZ5Ycr.js → docx-D5t6JtVt.js} +332 -291
- package/dist/icon.js +3 -3
- package/dist/iconShadowless.js +3 -3
- package/dist/image.js +1 -1
- package/dist/{index-B2yRe66F.js → index-7MlTN57l.js} +11 -19
- package/dist/{index-Du-Biu-I.js → index-BEm1a2pr.js} +2 -5
- package/dist/{index-BpOERe9M.js → index-Bb55l8nf.js} +1 -10
- package/dist/index-Bc9aILQK.js +710 -0
- package/dist/index-BmnyRPna.js +550 -0
- package/dist/{index-DRWOSfdF.js → index-BpQdR7OI.js} +25 -35
- package/dist/index-C1GmV3sK.js +66910 -0
- package/dist/{index-DytfjwBV.js → index-CCeFXABq.js} +12 -16
- package/dist/{index-Cbp6LrE5.js → index-CNfwWf6v.js} +9 -16
- package/dist/{index-ByBbFhvo.js → index-CRwHr_Ni.js} +4619 -2661
- package/dist/{index-BHmWrPCW.js → index-CVkJ_Xlh.js} +1149 -2207
- package/dist/index-CaDng6Eh.js +156 -0
- package/dist/{index-DRi1ylHx.js → index-CfBxNU7C.js} +17 -24
- package/dist/{index-DqtzBqPN.js → index-D6jtmsDd.js} +12 -23
- package/dist/index-D7zBysHY.js +70 -0
- package/dist/{index-C1x9Popy.js → index-DAxs7Dd2.js} +5 -12
- package/dist/{index-CSnBqUsQ.js → index-DC5EA657.js} +2 -6
- package/dist/index-DWvhcjaL.js +656 -0
- package/dist/{index-BF8tJ6rR.js → index-DeWbkpnF.js} +12 -23
- package/dist/index-DpC9OSc5.js +140 -0
- package/dist/{index-B4bfIbdI.js → index-choegwoI.js} +17 -25
- package/dist/{index-CFnsLnrb.js → index-n4EhE9Y5.js} +42 -48
- package/dist/index-y4nNx1Bs.js +103 -0
- package/dist/index.d.ts +275 -0
- package/dist/index.js +31 -39
- package/dist/info-circle-fill-DjI8gXS3.js +14 -0
- package/dist/input.js +3 -2
- package/dist/inputShadowless.js +2 -2
- package/dist/jszip.min--o3_SgQz.js +2904 -0
- package/dist/katex-es-B7keY1LJ.js +14629 -0
- package/dist/loading-scene-BMc2wqKm.js +4 -0
- package/dist/loading.js +4 -2
- package/dist/math.js +7 -0
- package/dist/message.js +3 -2
- package/dist/more-DUNz_fmw.js +42 -0
- package/dist/{pdf-DpNqCylD.js → pdf-Cx0VWKFo.js} +2 -5
- package/dist/player.js +4 -4
- package/dist/playwright.config.d.ts +9 -0
- package/dist/plugins/auto-import-file.d.ts +0 -0
- package/dist/plugins/load-style.d.ts +6 -0
- package/dist/plugins/load-svg.d.ts +9 -0
- package/dist/plus-DD2f41KU.js +404 -0
- package/dist/popover.js +7 -4
- package/dist/preview.js +272 -5
- package/dist/progress.js +3 -3
- package/dist/radar.js +3 -3
- package/dist/ranui.css +1 -0
- package/dist/search-BWdfjyP8.js +4 -0
- package/dist/select.js +6 -6
- package/dist/selectShadowless.js +558 -8
- package/dist/shadowless/icon/index.d.ts +3 -0
- package/dist/shadowless/input/index.d.ts +210 -0
- package/dist/shadowless/select/index.d.ts +108 -0
- package/dist/shadowless/select/option/index.d.ts +2 -0
- package/dist/shadowless.d.ts +3 -0
- package/dist/shadowless.js +8 -0
- package/dist/skeleton.js +1 -1
- package/dist/sort-DWqiUONr.js +4 -0
- package/dist/tab.js +3 -3
- package/dist/tabpane.js +1 -1
- package/dist/tests/button.spec.d.ts +1 -0
- package/dist/tsconfig.json +5 -3
- package/dist/typings.d.ts +257 -0
- package/dist/umd/index.css +1 -0
- package/dist/umd/index.umd.cjs +1 -60
- package/dist/umd/shadowless/shadowless.css +1 -0
- package/dist/umd/shadowless/shadowless.umd.cjs +1 -1
- package/dist/utils/color.d.ts +52 -0
- package/dist/utils/image.d.ts +39 -0
- package/dist/utils/index.d.ts +72 -0
- package/dist/utils/math.d.ts +26 -0
- package/dist/utils/tween.d.ts +21 -0
- package/dist/vite.config.d.ts +7 -0
- package/dist/without-content-CdJw7vHM.js +4 -0
- package/package.json +91 -64
- package/readme.md +36 -56
- package/typings.d.ts +168 -12
- package/dist/arrow-down-D4qr4m33.js +0 -30
- package/dist/content.js +0 -6
- package/dist/global-DOOKQmNv.js +0 -4
- package/dist/index-01Qfd9QI.js +0 -207
- package/dist/index-C-p_Wpit.js +0 -103
- package/dist/index-C6wPL-2Y.js +0 -298
- package/dist/index-CWWI8SHO.js +0 -206
- package/dist/index-CbyMC6Yz.js +0 -59
- package/dist/index-Cr9AYoGT.js +0 -498
- package/dist/index-DLB8VOy7.js +0 -281
- package/dist/index-Dapt713u.js +0 -65624
- package/dist/index-DsIUhdNt.js +0 -533
- package/dist/info-circle-fill-CFeVMdci.js +0 -4
- package/dist/jszip.min-DD9Dc6z4.js +0 -2674
- package/dist/option.js +0 -92
- package/dist/shadowless/shadowless/index.js +0 -14
- package/dist/style.css +0 -1
- package/dist/umd/shadowless/style.css +0 -1
- package/dist/umd/style.css +0 -1
- package/dist/utils-74Icp-PI.js +0 -541
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
# ranui
|
|
2
|
+
|
|
3
|
+
基于 `Web Components` 组件方案
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/github/actions/workflow/status/chaxus/ran/ci.yml" alt="Build Status"></a>
|
|
8
|
+
<a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/v/ranui.svg" alt="npm-v"></a>
|
|
9
|
+
<a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/dt/ranui.svg" alt="npm-d"></a>
|
|
10
|
+
<a href="https://github.com/chaxus/ran"><img src="https://img.badgesize.io/https:/unpkg.com/ranui/dist/umd/shadowless/shadowless.umd.cjs?label=brotli&compression=brotli" alt="brotli"></a>
|
|
11
|
+
<a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20esm-green.svg" alt="module formats: umd, esm"></a>
|
|
12
|
+
|
|
13
|
+
**中文** | [English](./readme.md)
|
|
14
|
+
|
|
15
|
+
## 特点
|
|
16
|
+
|
|
17
|
+
1. **跨框架兼容:** 与 React, Vue, Preact, SolidJS, Svelte 等兼容。可以和遵循 W3C 标准的任何 JavaScript 项目集成。
|
|
18
|
+
2. **原生体验:** 易于入门,像使用本地 div 标签,简化项目大小和减少学习成本。
|
|
19
|
+
3. **模块化设计:** 可选导入和全量导入,以增强可维护性和可伸缩性。
|
|
20
|
+
4. **交互式丰富文档:** 提供详细的交互式文档,并附有有效的示例子。
|
|
21
|
+
5. **支持类型校验:** 基于 TypeScript 构建,具有类型支持,确保代码的健壮性和可维护性。
|
|
22
|
+
6. **持久和稳定:** 与框架 (React/vue) 无关,避免破坏性的更新,并确保持续的项目运行。
|
|
23
|
+
|
|
24
|
+
## 安装
|
|
25
|
+
|
|
26
|
+
使用 npm:
|
|
27
|
+
|
|
28
|
+
```console
|
|
29
|
+
npm install ranui --save
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 文档和示例
|
|
33
|
+
|
|
34
|
+
[See components and use examples](https://chaxus.github.io/ran/cn/src/ranui/)
|
|
35
|
+
|
|
36
|
+
## 引入方式
|
|
37
|
+
|
|
38
|
+
支持按需导入,以显著减少包体积大小
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
import 'ranui/button';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
如果遇到样式问题,可以选择手动导入样式文件
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
import 'ranui/style';
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
如果遇到类型问题,可以选择手动导入类型文件
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import 'ranui/typings';
|
|
54
|
+
// 或者
|
|
55
|
+
import 'ranui/dist/index.d.ts';
|
|
56
|
+
// 或者
|
|
57
|
+
import 'ranui/type';
|
|
58
|
+
// 或者
|
|
59
|
+
import 'ranui/dist/typings';
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
并不是都要,选一个能生效的就行
|
|
63
|
+
|
|
64
|
+
也支持全量导入
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import 'ranui';
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
- ES module
|
|
71
|
+
|
|
72
|
+
```js
|
|
73
|
+
import 'ranui';
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
或者
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
import 'ranui/button';
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
- UMD, IIFE, CJS
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<script src="./ranui/dist/umd/index.umd.cjs"></script>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## 使用方式
|
|
89
|
+
|
|
90
|
+
它是基于`Web Components`的组件,你可以不用关注框架就可以使用它。
|
|
91
|
+
|
|
92
|
+
在大多数情况下,您可以像使用本地 `div` 标签一样使用它
|
|
93
|
+
|
|
94
|
+
下面是一些例子:
|
|
95
|
+
|
|
96
|
+
- html
|
|
97
|
+
- js
|
|
98
|
+
- jsx
|
|
99
|
+
- vue
|
|
100
|
+
- tsx
|
|
101
|
+
|
|
102
|
+
### html
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<script src="./ranui/dist/umd/index.umd.cjs"></script>
|
|
106
|
+
|
|
107
|
+
<body>
|
|
108
|
+
<r-button>Button</r-button>
|
|
109
|
+
</body>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### js
|
|
113
|
+
|
|
114
|
+
```js
|
|
115
|
+
import 'ranui';
|
|
116
|
+
|
|
117
|
+
const Button = document.createElement('r-button');
|
|
118
|
+
Button.appendChild('this is button text');
|
|
119
|
+
document.body.appendChild(Button);
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### jsx
|
|
123
|
+
|
|
124
|
+
```jsx
|
|
125
|
+
import 'ranui';
|
|
126
|
+
|
|
127
|
+
const App = () => {
|
|
128
|
+
return (
|
|
129
|
+
<>
|
|
130
|
+
<r-button>Button</r-button>
|
|
131
|
+
</>
|
|
132
|
+
);
|
|
133
|
+
};
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### vue
|
|
137
|
+
|
|
138
|
+
```vue
|
|
139
|
+
<template>
|
|
140
|
+
<r-button></r-button>
|
|
141
|
+
</template>
|
|
142
|
+
<script>
|
|
143
|
+
import 'ranui';
|
|
144
|
+
</script>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### tsx
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
// react 18
|
|
151
|
+
import type { SyntheticEvent } from 'react';
|
|
152
|
+
import React, { useRef } from 'react';
|
|
153
|
+
import 'ranui';
|
|
154
|
+
|
|
155
|
+
const FilePreview = () => {
|
|
156
|
+
const ref = useRef<HTMLDivElement | null>(null);
|
|
157
|
+
const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
|
|
158
|
+
if (ref.current) {
|
|
159
|
+
const uploadFile = document.createElement('input');
|
|
160
|
+
uploadFile.setAttribute('type', 'file');
|
|
161
|
+
uploadFile.click();
|
|
162
|
+
uploadFile.onchange = (e) => {
|
|
163
|
+
const { files = [] } = uploadFile;
|
|
164
|
+
if (files && files?.length > 0 && ref.current) {
|
|
165
|
+
ref.current.setAttribute('src', '');
|
|
166
|
+
const file = files[0];
|
|
167
|
+
const url = URL.createObjectURL(file);
|
|
168
|
+
ref.current.setAttribute('src', url);
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
return (
|
|
174
|
+
<div>
|
|
175
|
+
<r-preview ref={ref}></r-preview>
|
|
176
|
+
<r-button type="primary" onClick={uploadFile}>
|
|
177
|
+
choose file to preview
|
|
178
|
+
</r-button>
|
|
179
|
+
</div>
|
|
180
|
+
);
|
|
181
|
+
};
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
## 贡献者
|
|
185
|
+
|
|
186
|
+
<a href="https://github.com/chaxus/ran/graphs/contributors">
|
|
187
|
+
<img src="https://contrib.rocks/image?repo=chaxus/ran" />
|
|
188
|
+
</a>
|
|
189
|
+
|
|
190
|
+
## Meta
|
|
191
|
+
|
|
192
|
+
[LICENSE (MIT)](/LICENSE)
|
package/dist/{_commonjs-dynamic-modules-DLbDWi6a.js → _commonjs-dynamic-modules-HhqG7SJg.js}
RENAMED
|
@@ -6,7 +6,7 @@ function commonjsRequire(path) {
|
|
|
6
6
|
throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
|
|
7
7
|
}
|
|
8
8
|
export {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
commonjsGlobal as a,
|
|
10
|
+
commonjsRequire as c,
|
|
11
11
|
getDefaultExportFromCjs as g
|
|
12
12
|
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const failImage = "\n data:image/png;base64,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\n";
|
|
2
|
+
export default failImage;
|
package/dist/button.js
CHANGED
package/dist/checkbox.js
CHANGED
package/dist/colorpicker.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import "./
|
|
2
|
-
import "./index-
|
|
3
|
-
import { C, a } from "./index-
|
|
4
|
-
import "./index-
|
|
5
|
-
import "./index-
|
|
6
|
-
import "./
|
|
7
|
-
import "./index-
|
|
8
|
-
import "./option.js";
|
|
9
|
-
import "./index-DRi1ylHx.js";
|
|
1
|
+
import "./plus-DD2f41KU.js";
|
|
2
|
+
import "./index-DC5EA657.js";
|
|
3
|
+
import { C, a } from "./index-BpQdR7OI.js";
|
|
4
|
+
import "./index-BmnyRPna.js";
|
|
5
|
+
import "./index-n4EhE9Y5.js";
|
|
6
|
+
import "./selectShadowless.js";
|
|
7
|
+
import "./index-CfBxNU7C.js";
|
|
10
8
|
export {
|
|
11
9
|
C as ColorPicker,
|
|
12
10
|
a as default
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) =>
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
7
4
|
const round = Math.round;
|
|
8
5
|
class Rgb {
|
|
9
6
|
constructor(col) {
|
|
@@ -133,14 +130,12 @@ const hexToRgb = function(hex) {
|
|
|
133
130
|
};
|
|
134
131
|
const getDarkColor = (color, level) => {
|
|
135
132
|
const rgbc = hexToRgb(color) || [];
|
|
136
|
-
for (let i = 0; i < 3; i++)
|
|
137
|
-
rgbc[i] = Math.floor(Number(rgbc[i]) * (1 - level));
|
|
133
|
+
for (let i = 0; i < 3; i++) rgbc[i] = Math.floor(Number(rgbc[i]) * (1 - level));
|
|
138
134
|
return rgbToHex(rgbc[0], rgbc[1], rgbc[2]);
|
|
139
135
|
};
|
|
140
136
|
function getLightColor(color, level) {
|
|
141
137
|
const rgbc = hexToRgb(color) || [];
|
|
142
|
-
for (let i = 0; i < 3; i++)
|
|
143
|
-
rgbc[i] = Math.floor((255 - Number(rgbc[i])) * level + Number(rgbc[i]));
|
|
138
|
+
for (let i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - Number(rgbc[i])) * level + Number(rgbc[i]));
|
|
144
139
|
return rgbToHex(rgbc[0], rgbc[1], rgbc[2]);
|
|
145
140
|
}
|
|
146
141
|
const componentToHex = function(c) {
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
declare const Button_base: {
|
|
2
|
+
new (): HTMLElement;
|
|
3
|
+
prototype: HTMLElement;
|
|
4
|
+
};
|
|
5
|
+
export declare class Button extends Button_base {
|
|
6
|
+
_btn: HTMLDivElement;
|
|
7
|
+
_btnContent: HTMLDivElement;
|
|
8
|
+
_iconElement?: HTMLElement;
|
|
9
|
+
_slot: HTMLSlotElement;
|
|
10
|
+
_shadowDom: ShadowRoot;
|
|
11
|
+
debounceTimeId?: NodeJS.Timeout;
|
|
12
|
+
static get observedAttributes(): string[];
|
|
13
|
+
constructor();
|
|
14
|
+
get sheet(): string;
|
|
15
|
+
set sheet(value: string);
|
|
16
|
+
get disabled(): boolean | string;
|
|
17
|
+
set disabled(value: boolean | string | undefined | null);
|
|
18
|
+
get iconSize(): string;
|
|
19
|
+
set iconSize(value: string | undefined | null);
|
|
20
|
+
get icon(): string;
|
|
21
|
+
set icon(value: string | null);
|
|
22
|
+
get effect(): string;
|
|
23
|
+
set effect(value: string | null);
|
|
24
|
+
/**
|
|
25
|
+
* @description: 设置 button 的 icon
|
|
26
|
+
* @return {*}
|
|
27
|
+
*/
|
|
28
|
+
setIcon: () => void;
|
|
29
|
+
mousedown: (event: MouseEvent) => void;
|
|
30
|
+
mouseup: () => void;
|
|
31
|
+
debounceMouseEvent: () => void;
|
|
32
|
+
handlerExternalCss: () => void;
|
|
33
|
+
connectedCallback(): void;
|
|
34
|
+
disconnectCallback(): void;
|
|
35
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
36
|
+
}
|
|
37
|
+
declare const _default: import("@/utils/index").CustomErrorType;
|
|
38
|
+
export default _default;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { Chain } from 'ranuts/utils';
|
|
2
|
+
export interface Context {
|
|
3
|
+
checked: boolean;
|
|
4
|
+
}
|
|
5
|
+
declare const Checkbox_base: {
|
|
6
|
+
new (): HTMLElement;
|
|
7
|
+
prototype: HTMLElement;
|
|
8
|
+
};
|
|
9
|
+
export declare class Checkbox extends Checkbox_base {
|
|
10
|
+
checkInput: HTMLInputElement;
|
|
11
|
+
checkInner: HTMLSpanElement;
|
|
12
|
+
context: Context;
|
|
13
|
+
container: Chain;
|
|
14
|
+
_shadowDom: ShadowRoot;
|
|
15
|
+
static get observedAttributes(): string[];
|
|
16
|
+
constructor();
|
|
17
|
+
get disabled(): string;
|
|
18
|
+
set disabled(value: string);
|
|
19
|
+
get value(): string;
|
|
20
|
+
set value(value: string);
|
|
21
|
+
get checked(): string;
|
|
22
|
+
set checked(value: string);
|
|
23
|
+
updateChecked: () => void;
|
|
24
|
+
update: () => void;
|
|
25
|
+
onChange: () => void;
|
|
26
|
+
connectedCallback(): void;
|
|
27
|
+
disconnectCallback(): void;
|
|
28
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
29
|
+
}
|
|
30
|
+
declare const _default: import("@/utils/index").CustomErrorType;
|
|
31
|
+
export default _default;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import '@/components/popover';
|
|
2
|
+
import '@/shadowless/input';
|
|
3
|
+
import '@/shadowless/select';
|
|
4
|
+
import '@/components/progress';
|
|
5
|
+
import './index.less';
|
|
6
|
+
export interface Context {
|
|
7
|
+
disabled: Signal<boolean>;
|
|
8
|
+
value: Signal<string>;
|
|
9
|
+
hue: Signal<number>;
|
|
10
|
+
saturation: Signal<number>;
|
|
11
|
+
lightness: Signal<number>;
|
|
12
|
+
transparency: Signal<number>;
|
|
13
|
+
}
|
|
14
|
+
export interface RGBA {
|
|
15
|
+
r: number;
|
|
16
|
+
g: number;
|
|
17
|
+
b: number;
|
|
18
|
+
a: number;
|
|
19
|
+
}
|
|
20
|
+
export interface Signal<T> {
|
|
21
|
+
getter: () => T;
|
|
22
|
+
setter: (newValue: T) => void;
|
|
23
|
+
}
|
|
24
|
+
declare const ColorPicker_base: {
|
|
25
|
+
new (): HTMLElement;
|
|
26
|
+
prototype: HTMLElement;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* @description: 数据驱动视图,改变数据,即改变视图
|
|
30
|
+
* @return {*}
|
|
31
|
+
*/
|
|
32
|
+
export declare class ColorPicker extends ColorPicker_base {
|
|
33
|
+
colorpicker: HTMLDivElement;
|
|
34
|
+
colorpickerInner: HTMLDivElement;
|
|
35
|
+
context: Context;
|
|
36
|
+
popoverBlock: HTMLElement;
|
|
37
|
+
popoverContent: HTMLElement;
|
|
38
|
+
colorPickerInner?: HTMLDivElement;
|
|
39
|
+
colorPickerInnerContent?: HTMLDivElement;
|
|
40
|
+
colorPickerPanel?: HTMLDivElement;
|
|
41
|
+
colorPickerInputContainer?: HTMLDivElement;
|
|
42
|
+
colorPickerPanelDot?: HTMLDivElement;
|
|
43
|
+
colorPickerPanelSliderContainer?: HTMLDivElement;
|
|
44
|
+
colorPickerPanelSliderGroup?: HTMLDivElement;
|
|
45
|
+
colorPickerPanelSliderHue?: HTMLElement;
|
|
46
|
+
colorPickerPanelSliderAlpha?: HTMLElement;
|
|
47
|
+
colorPickerColorBlockInner?: HTMLDivElement;
|
|
48
|
+
colorPickerColorBlock?: HTMLDivElement;
|
|
49
|
+
colorPickerInnerContentSelect?: HTMLDivElement;
|
|
50
|
+
colorPickerPanelPalette?: HTMLDivElement;
|
|
51
|
+
colorPickerPanelSaturation?: HTMLDivElement;
|
|
52
|
+
colorPickerInputContainerSelect?: HTMLElement;
|
|
53
|
+
colorPickerInputContainerInputColor?: HTMLElement;
|
|
54
|
+
colorPickerInputContainerInputNumber?: HTMLElement;
|
|
55
|
+
colorPickerInputContainerSelectItem?: HTMLElement;
|
|
56
|
+
colorPickerPaletteSelect: boolean;
|
|
57
|
+
colorPickerPanelDotInner?: HTMLDivElement;
|
|
58
|
+
static get observedAttributes(): string[];
|
|
59
|
+
constructor();
|
|
60
|
+
get value(): string;
|
|
61
|
+
set value(value: string);
|
|
62
|
+
createContext: () => void;
|
|
63
|
+
/**
|
|
64
|
+
* @description: 0 - 360 色相 hue
|
|
65
|
+
* @param {*} Signal
|
|
66
|
+
* @return {*}
|
|
67
|
+
*/
|
|
68
|
+
createColorHue: () => Signal<number>;
|
|
69
|
+
/**
|
|
70
|
+
* @description: 0 - 100 饱和度 x
|
|
71
|
+
* @param {*} Signal
|
|
72
|
+
* @return {*}
|
|
73
|
+
*/
|
|
74
|
+
createColorSaturation: () => Signal<number>;
|
|
75
|
+
/**
|
|
76
|
+
* @description: 0 - 100 亮度 y
|
|
77
|
+
* @param {*} Signal
|
|
78
|
+
* @return {*}
|
|
79
|
+
*/
|
|
80
|
+
createColorLightness: () => Signal<number>;
|
|
81
|
+
/**
|
|
82
|
+
* @description: 0 - 100 透明度
|
|
83
|
+
* @param {*} Signal
|
|
84
|
+
* @return {*}
|
|
85
|
+
*/
|
|
86
|
+
createColorTransparency: () => Signal<number>;
|
|
87
|
+
createColorDisabled: () => Signal<boolean>;
|
|
88
|
+
createColorValueSignal: () => Signal<string>;
|
|
89
|
+
generateHue2rgb: () => string;
|
|
90
|
+
generateHsv2Rgb: () => string;
|
|
91
|
+
generateHsv2Rgba: () => RGBA;
|
|
92
|
+
generateHsv2RgbaValue: () => string;
|
|
93
|
+
generateColorPickerProgress: () => string;
|
|
94
|
+
updateColorValue: (value: string) => void;
|
|
95
|
+
updateColorPickerPanelSliderHueProgressPercent: (hue: number) => void;
|
|
96
|
+
updateColorPickerPanelSliderAlphaProgressPercent: (alpha: number) => void;
|
|
97
|
+
updateColorPickerPanelSliderAlphaProgressWrap: () => void;
|
|
98
|
+
updateColorPickerPanelSliderAlphaProgressDot: () => void;
|
|
99
|
+
updateColorPickerPanelSliderHueProgressDot: () => void;
|
|
100
|
+
updateColorPickerColorBlockInnerBackground: () => void;
|
|
101
|
+
updateColorPickerPanelSaturationBackground: () => void;
|
|
102
|
+
clickStop: (e: MouseEvent) => void;
|
|
103
|
+
changeColorPalettePositionByContext: () => void;
|
|
104
|
+
changeColorPalettePosition: (offsetX: number, offsetY: number) => void;
|
|
105
|
+
clickColorPalette: (e: MouseEvent) => void;
|
|
106
|
+
createColorPickerProgress: () => void;
|
|
107
|
+
changeColorPickerHue: (e: Event) => void;
|
|
108
|
+
changeColorPickerAlpha: (e: Event) => void;
|
|
109
|
+
createColorPickerSelect: () => void;
|
|
110
|
+
createColorPickerInput: () => void;
|
|
111
|
+
openColorPicker: () => void;
|
|
112
|
+
mouseMoveColorPickerPalette: (e: MouseEvent) => void;
|
|
113
|
+
mouseDownColorPickerPalette: (e: MouseEvent) => void;
|
|
114
|
+
mouseUpColorPickerPalette: () => void;
|
|
115
|
+
connectedCallback(): void;
|
|
116
|
+
disconnectCallback(): void;
|
|
117
|
+
attributeChangedCallback(n: string, o: string, v: string): void;
|
|
118
|
+
}
|
|
119
|
+
declare const _default: import("@/utils/index").CustomErrorType;
|
|
120
|
+
export default _default;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Chain } from 'ranuts/utils';
|
|
2
|
+
export declare enum ARROW_TYPE {
|
|
3
|
+
TOP = "top",
|
|
4
|
+
BOTTOM = "bottom",
|
|
5
|
+
LEFT = "left",
|
|
6
|
+
RIGHT = "right"
|
|
7
|
+
}
|
|
8
|
+
declare const Dropdown_base: {
|
|
9
|
+
new (): HTMLElement;
|
|
10
|
+
prototype: HTMLElement;
|
|
11
|
+
};
|
|
12
|
+
export declare class Dropdown extends Dropdown_base {
|
|
13
|
+
dropdown: Chain;
|
|
14
|
+
_slot: Chain;
|
|
15
|
+
_shadowDom: ShadowRoot;
|
|
16
|
+
arrowIcon?: Chain;
|
|
17
|
+
container: Chain;
|
|
18
|
+
static get observedAttributes(): string[];
|
|
19
|
+
constructor();
|
|
20
|
+
get transit(): string;
|
|
21
|
+
set transit(value: string);
|
|
22
|
+
get arrow(): string;
|
|
23
|
+
set arrow(value: string);
|
|
24
|
+
get show(): string;
|
|
25
|
+
set show(value: string);
|
|
26
|
+
handlerTransit: () => void;
|
|
27
|
+
handlerArrow: () => void;
|
|
28
|
+
stopPropagation: (e: Event) => void;
|
|
29
|
+
connectedCallback(): void;
|
|
30
|
+
disconnectedCallback(): void;
|
|
31
|
+
attributeChangedCallback(name: string, _: string, newValue: string): void;
|
|
32
|
+
}
|
|
33
|
+
declare const _default: import("@/utils/index").CustomErrorType;
|
|
34
|
+
export default _default;
|