ranui 0.1.10-alpha.1 → 0.1.10-alpha.10

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 (130) hide show
  1. package/README.zh-CN.md +190 -0
  2. package/dist/arrow-down-B_hCY3Wt.js +662 -0
  3. package/dist/button.js +3 -3
  4. package/dist/checkbox.js +3 -3
  5. package/dist/colorpicker.js +7 -9
  6. package/dist/{colz-CRDozfZA.js → colz-DJZvo_8B.js} +3 -8
  7. package/dist/{docx-ajDUtnbM.js → docx-CHkPTdGU.js} +1 -1
  8. package/dist/drop-4j4abxje.js +36 -0
  9. package/dist/icon.js +3 -3
  10. package/dist/iconShadowless.js +3 -3
  11. package/dist/image.js +1 -1
  12. package/dist/{index-CJZp9lE4.js → index-15M0olqa.js} +16 -23
  13. package/dist/index-1v568_nq.js +140 -0
  14. package/dist/index-B897keW5.js +279 -0
  15. package/dist/{index-BpOERe9M.js → index-BZR0HaP2.js} +1 -4
  16. package/dist/{index-BOoNI-Al.js → index-B_GuEcTd.js} +1171 -1845
  17. package/dist/{index-ByJ7zZdQ.js → index-Bc2Bcl8D.js} +2464 -4404
  18. package/dist/{index-F2RO3OU4.js → index-C4Sv0T51.js} +7 -13
  19. package/dist/{index-BPBRPxND.js → index-C6RcMHoH.js} +9 -17
  20. package/dist/index-C9z10IgG.js +103 -0
  21. package/dist/{index-DUMmFdJ7.js → index-CFjEuvBW.js} +17 -25
  22. package/dist/{index-CZlEoE62.js → index-CGEx9VOA.js} +869 -1663
  23. package/dist/index-CGYfjKUV.js +72 -0
  24. package/dist/index-CVtBLEpV.js +712 -0
  25. package/dist/{index-EnzWG8R0.js → index-CiWwvEMM.js} +23 -33
  26. package/dist/index-CtVOgBDk.js +659 -0
  27. package/dist/{index-0fvHQjmN.js → index-D4qUro5V.js} +22 -41
  28. package/dist/index-D4y9c1Dj.js +310 -0
  29. package/dist/{index-C1x9Popy.js → index-DAxs7Dd2.js} +5 -12
  30. package/dist/{index-CSnBqUsQ.js → index-DC5EA657.js} +2 -6
  31. package/dist/{index-GavQwMDL.js → index-DJZmDHz-.js} +12 -23
  32. package/dist/{index-suip9eAw.js → index-D_CA5VDZ.js} +11 -15
  33. package/dist/{index-Du-Biu-I.js → index-KS2nvVcO.js} +1 -4
  34. package/dist/{index-CFnsLnrb.js → index-WfFw4LJT.js} +42 -48
  35. package/dist/{index-CD09p_mF.js → index-mhFL9MJp.js} +11 -21
  36. package/dist/index.d.ts +211 -18
  37. package/dist/index.js +20 -24
  38. package/dist/input.js +2 -2
  39. package/dist/inputShadowless.js +2 -2
  40. package/dist/{jszip.min-Ca6PjkYs.js → jszip.min-Dhs3nUkD.js} +702 -1030
  41. package/dist/katex-es-B5r5vt3m.js +14628 -0
  42. package/dist/loading-scene-BMc2wqKm.js +4 -0
  43. package/dist/loading.js +8 -0
  44. package/dist/math.js +7 -0
  45. package/dist/message.js +3 -2
  46. package/dist/{pdf-B2a6ll8f.js → pdf-Cx0VWKFo.js} +13 -8
  47. package/dist/player.js +4 -4
  48. package/dist/popover.js +4 -2
  49. package/dist/preview.js +4 -4
  50. package/dist/progress.js +3 -3
  51. package/dist/radar.js +3 -3
  52. package/dist/select.js +6 -6
  53. package/dist/selectShadowless.js +562 -8
  54. package/dist/shadowless.js +8 -0
  55. package/dist/skeleton.js +1 -1
  56. package/dist/style.css +1 -1
  57. package/dist/tab.js +3 -3
  58. package/dist/tabpane.js +1 -1
  59. package/dist/tsconfig.json +4 -2
  60. package/dist/typings.d.ts +211 -0
  61. package/dist/umd/index.umd.cjs +9 -9
  62. package/dist/umd/shadowless/shadowless.umd.cjs +1 -1
  63. package/dist/umd/shadowless/style.css +1 -1
  64. package/dist/umd/style.css +1 -1
  65. package/package.json +70 -51
  66. package/readme.md +37 -55
  67. package/typings.d.ts +112 -2
  68. package/dist/arrow-down-C9jBUUt3.js +0 -30
  69. package/dist/assets/image/failImage.d.ts +0 -2
  70. package/dist/build/config.d.ts +0 -3
  71. package/dist/build/config.es.d.ts +0 -2
  72. package/dist/build/config.sha.d.ts +0 -2
  73. package/dist/build/config.umd.d.ts +0 -2
  74. package/dist/components/button/index.d.ts +0 -39
  75. package/dist/components/checkbox/index.d.ts +0 -27
  76. package/dist/components/colorpicker/index.d.ts +0 -122
  77. package/dist/components/content/index.d.ts +0 -15
  78. package/dist/components/form/index.d.ts +0 -2
  79. package/dist/components/icon/index.d.ts +0 -2
  80. package/dist/components/image/index.d.ts +0 -2
  81. package/dist/components/input/index.d.ts +0 -209
  82. package/dist/components/message/index.d.ts +0 -16
  83. package/dist/components/modal/index.d.ts +0 -2
  84. package/dist/components/option/index.d.ts +0 -3
  85. package/dist/components/player/index.d.ts +0 -238
  86. package/dist/components/popover/index.d.ts +0 -39
  87. package/dist/components/preview/colz.d.ts +0 -72
  88. package/dist/components/preview/docx.d.ts +0 -8
  89. package/dist/components/preview/excel/excel.d.ts +0 -2
  90. package/dist/components/preview/excel/index.d.ts +0 -1
  91. package/dist/components/preview/excel/media.d.ts +0 -37
  92. package/dist/components/preview/index.d.ts +0 -8
  93. package/dist/components/preview/pdf.d.ts +0 -1
  94. package/dist/components/preview/pptx/index.d.ts +0 -16
  95. package/dist/components/preview/pptx/process_pptx.d.ts +0 -23
  96. package/dist/components/preview/pptx/t_xml.d.ts +0 -1
  97. package/dist/components/preview/pptx/worker.d.ts +0 -1
  98. package/dist/components/progress/index.d.ts +0 -42
  99. package/dist/components/radar/index.d.ts +0 -2
  100. package/dist/components/scratch/index.d.ts +0 -23
  101. package/dist/components/select/index.d.ts +0 -113
  102. package/dist/components/skeleton/index.d.ts +0 -2
  103. package/dist/components/tab/index.d.ts +0 -408
  104. package/dist/components/tabpane/index.d.ts +0 -352
  105. package/dist/content.js +0 -6
  106. package/dist/global-DOfcrQ2N.js +0 -4
  107. package/dist/index-BLepXisd.js +0 -533
  108. package/dist/index-Bv6Z6rIe.js +0 -498
  109. package/dist/index-CCNK5H8T.js +0 -103
  110. package/dist/index-CWWI8SHO.js +0 -206
  111. package/dist/index-CbyMC6Yz.js +0 -59
  112. package/dist/index-CiBVH-oH.js +0 -258
  113. package/dist/option.js +0 -92
  114. package/dist/playwright.config.d.ts +0 -9
  115. package/dist/plugins/auto-import-file.d.ts +0 -0
  116. package/dist/plugins/load-style.d.ts +0 -6
  117. package/dist/plugins/load-svg.d.ts +0 -9
  118. package/dist/shadowless/icon/index.d.ts +0 -3
  119. package/dist/shadowless/input/index.d.ts +0 -210
  120. package/dist/shadowless/select/index.d.ts +0 -109
  121. package/dist/shadowless/shadowless/index.js +0 -14
  122. package/dist/shadowless.d.ts +0 -3
  123. package/dist/tests/button.spec.d.ts +0 -1
  124. package/dist/utils/color.d.ts +0 -52
  125. package/dist/utils/image.d.ts +0 -32
  126. package/dist/utils/index.d.ts +0 -72
  127. package/dist/utils/math.d.ts +0 -26
  128. package/dist/utils/tween.d.ts +0 -21
  129. package/dist/utils-BMBEcoPj.js +0 -356
  130. package/dist/vite.config.d.ts +0 -7
package/README.zh-CN.md ADDED
@@ -0,0 +1,190 @@
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/types';
54
+ ```
55
+
56
+ 或者
57
+
58
+ ```ts
59
+ import 'ranui/dist/typings';
60
+ ```
61
+
62
+ 也支持全量导入
63
+
64
+ ```ts
65
+ import 'ranui';
66
+ ```
67
+
68
+ - ES module
69
+
70
+ ```js
71
+ import 'ranui';
72
+ ```
73
+
74
+ 或者
75
+
76
+ ```js
77
+ import 'ranui/button';
78
+ ```
79
+
80
+ - UMD, IIFE, CJS
81
+
82
+ ```html
83
+ <script src="./ranui/dist/umd/index.umd.cjs"></script>
84
+ ```
85
+
86
+ ## 使用方式
87
+
88
+ 它是基于`Web Components`的组件，你可以不用关注框架就可以使用它。
89
+
90
+ 在大多数情况下，您可以像使用本地 `div` 标签一样使用它
91
+
92
+ 下面是一些例子：
93
+
94
+ - html
95
+ - js
96
+ - jsx
97
+ - vue
98
+ - tsx
99
+
100
+ ### html
101
+
102
+ ```html
103
+ <script src="./ranui/dist/umd/index.umd.cjs"></script>
104
+
105
+ <body>
106
+ <r-button>Button</r-button>
107
+ </body>
108
+ ```
109
+
110
+ ### js
111
+
112
+ ```js
113
+ import 'ranui';
114
+
115
+ const Button = document.createElement('r-button');
116
+ Button.appendChild('this is button text');
117
+ document.body.appendChild(Button);
118
+ ```
119
+
120
+ ### jsx
121
+
122
+ ```jsx
123
+ import 'ranui';
124
+
125
+ const App = () => {
126
+ return (
127
+ <>
128
+ <r-button>Button</r-button>
129
+ </>
130
+ );
131
+ };
132
+ ```
133
+
134
+ ### vue
135
+
136
+ ```vue
137
+ <template>
138
+ <r-button></r-button>
139
+ </template>
140
+ <script>
141
+ import 'ranui';
142
+ </script>
143
+ ```
144
+
145
+ ### tsx
146
+
147
+ ```tsx
148
+ // react 18
149
+ import type { SyntheticEvent } from 'react';
150
+ import React, { useRef } from 'react';
151
+ import 'ranui';
152
+
153
+ const FilePreview = () => {
154
+ const ref = useRef<HTMLDivElement | null>(null);
155
+ const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
156
+ if (ref.current) {
157
+ const uploadFile = document.createElement('input');
158
+ uploadFile.setAttribute('type', 'file');
159
+ uploadFile.click();
160
+ uploadFile.onchange = (e) => {
161
+ const { files = [] } = uploadFile;
162
+ if (files && files?.length > 0 && ref.current) {
163
+ ref.current.setAttribute('src', '');
164
+ const file = files[0];
165
+ const url = URL.createObjectURL(file);
166
+ ref.current.setAttribute('src', url);
167
+ }
168
+ };
169
+ }
170
+ };
171
+ return (
172
+ <div>
173
+ <r-preview ref={ref}></r-preview>
174
+ <r-button type="primary" onClick={uploadFile}>
175
+ choose file to preview
176
+ </r-button>
177
+ </div>
178
+ );
179
+ };
180
+ ```
181
+
182
+ ## 贡献者
183
+
184
+ <a href="https://github.com/chaxus/ran/graphs/contributors">
185
+ <img src="https://contrib.rocks/image?repo=chaxus/ran" />
186
+ </a>
187
+
188
+ ## Meta
189
+
190
+ [LICENSE (MIT)](/LICENSE)