canvas-color-disc 1.4.0 → 1.4.2

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 (3) hide show
  1. package/README.cn.md +15 -11
  2. package/README.md +15 -11
  3. package/package.json +2 -2
package/README.cn.md CHANGED
@@ -4,13 +4,15 @@
4
4
 
5
5
  > 基于 Canvas 的圆形色盘取色组件，支持 PC 与移动端（Pointer Events）；同时提供 Vue 2 / Vue 3 组件与框架无关的 Web Component / 纯 JS 版本
6
6
 
7
+ [![在线演示](https://img.shields.io/badge/Live%20Demo-online-2ea44f?logo=githubpages&logoColor=white)](https://zancheng.github.io/canvas-color-disc/)
8
+
7
9
  ![预览](https://cdn.jsdelivr.net/gh/zancheng/canvas-color-disc@main/preview.png)
8
10
 
9
11
  ## 使用方式速查
10
12
 
11
13
  | 环境 | 引入 | 用法 | 样式 |
12
14
  | --- | --- | --- | --- |
13
- | 纯 HTML | `<script src="https://unpkg.com/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js">` | 写 `<canvas-color-disc>` 标签，监听 `change` 事件 | 自动注入，无需引入 |
15
+ | 纯 HTML | `<script src="https://unpkg.com/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js">` | 写 `<canvas-color-disc>` 标签，监听 `change` 事件 | 自动注入，无需引入 |
14
16
  | React | `import 'canvas-color-disc/vanilla'` | 同上；React 19 直接写 JSX 属性与 `onchange`，React 18 用 `ref` 桥接 | 自动注入，无需引入 |
15
17
  | Vue 2（`^2.5.0`） | `import CanvasColorDisc from 'canvas-color-disc/vue2'` | `v-model`：`value` / `input` | `canvas-color-disc/dist/style.css` |
16
18
  | Vue 3（`^3.0.0`） | `import CanvasColorDisc from 'canvas-color-disc'`（或 `canvas-color-disc/vue3`） | `v-model`：`modelValue` / `update:modelValue` | `canvas-color-disc/vue3/style.css` |
@@ -30,12 +32,14 @@ Vue 2 与 Vue 3 产物来自同一份源码（`src/components/CanvasColorDisc.vu
30
32
 
31
33
  ### 纯 HTML
32
34
 
35
+ 想先试试效果？打开[在线演示](https://zancheng.github.io/canvas-color-disc/)。
36
+
33
37
  ```html
34
- <!-- unpkg，锁定当前版本（去掉 @1.4.0 即始终加载最新版）：
35
- https://unpkg.com/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js
38
+ <!-- unpkg，锁定当前版本（去掉 @1.4.1 即始终加载最新版）：
39
+ https://unpkg.com/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js
36
40
  jsDelivr 镜像（同一文件、同一版本）：
37
- https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js -->
38
- <script src="https://unpkg.com/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js"></script>
41
+ https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js -->
42
+ <script src="https://unpkg.com/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js"></script>
39
43
 
40
44
  <canvas-color-disc width="300" height="300"></canvas-color-disc>
41
45
 
@@ -45,7 +49,7 @@ Vue 2 与 Vue 3 产物来自同一份源码（`src/components/CanvasColorDisc.vu
45
49
  </script>
46
50
  ```
47
51
 
48
- 两个 CDN 也支持无路径的裸包地址——`https://unpkg.com/canvas-color-disc@1.4.0` 与 `https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0` 均直接指向该 UMD 文件（由 package.json 中的 `unpkg` / `jsdelivr` 字段指定）。
52
+ 两个 CDN 也支持无路径的裸包地址——`https://unpkg.com/canvas-color-disc@1.4.1` 与 `https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1` 均直接指向该 UMD 文件（由 package.json 中的 `unpkg` / `jsdelivr` 字段指定）。
49
53
 
50
54
  ### React
51
55
 
@@ -172,12 +176,12 @@ export default {
172
176
  ### 浏览器直接引入（Vue 版 UMD）
173
177
 
174
178
  ```html
175
- <!-- unpkg，锁定当前版本（去掉 @1.4.0 即始终加载最新版）；jsDelivr 镜像只需替换源前缀，版本保持一致：
176
- https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0/dist/style.css
177
- https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0/dist/canvas-color-disc.umd.js -->
178
- <link rel="stylesheet" href="https://unpkg.com/canvas-color-disc@1.4.0/dist/style.css">
179
+ <!-- unpkg，锁定当前版本（去掉 @1.4.1 即始终加载最新版）；jsDelivr 镜像只需替换源前缀，版本保持一致：
180
+ https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1/dist/style.css
181
+ https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1/dist/canvas-color-disc.umd.js -->
182
+ <link rel="stylesheet" href="https://unpkg.com/canvas-color-disc@1.4.1/dist/style.css">
179
183
  <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
180
- <script src="https://unpkg.com/canvas-color-disc@1.4.0/dist/canvas-color-disc.umd.js"></script>
184
+ <script src="https://unpkg.com/canvas-color-disc@1.4.1/dist/canvas-color-disc.umd.js"></script>
181
185
 
182
186
  <script>
183
187
  // 未调用 Vue.use 时，也可直接作为组件选项使用
package/README.md CHANGED
@@ -4,13 +4,15 @@
4
4
 
5
5
  > A circular color picker built on Canvas, works on both desktop and mobile (Pointer Events). Available as a Vue 2 / Vue 3 component and as a framework-agnostic Web Component / vanilla JS class.
6
6
 
7
+ [![Live Demo](https://img.shields.io/badge/Live%20Demo-online-2ea44f?logo=githubpages&logoColor=white)](https://zancheng.github.io/canvas-color-disc/)
8
+
7
9
  ![preview](https://cdn.jsdelivr.net/gh/zancheng/canvas-color-disc@main/preview.png)
8
10
 
9
11
  ## Usage at a glance
10
12
 
11
13
  | Setup | Import | Usage | Styles |
12
14
  | --- | --- | --- | --- |
13
- | Plain HTML | `<script src="https://unpkg.com/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js">` | Render `<canvas-color-disc>` and listen for the `change` event | auto-injected, no CSS import |
15
+ | Plain HTML | `<script src="https://unpkg.com/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js">` | Render `<canvas-color-disc>` and listen for the `change` event | auto-injected, no CSS import |
14
16
  | React | `import 'canvas-color-disc/vanilla'` | Same element; JSX props and `onchange` on React 19, a `ref` bridge on React 18 | auto-injected, no CSS import |
15
17
  | Vue 2 (`^2.5.0`) | `import CanvasColorDisc from 'canvas-color-disc/vue2'` | `v-model`: `value` / `input` | `canvas-color-disc/dist/style.css` |
16
18
  | Vue 3 (`^3.0.0`) | `import CanvasColorDisc from 'canvas-color-disc'` (or `canvas-color-disc/vue3`) | `v-model`: `modelValue` / `update:modelValue` | `canvas-color-disc/vue3/style.css` |
@@ -31,12 +33,14 @@ Works in plain HTML, React, Angular and anything else.
31
33
 
32
34
  ### Plain HTML
33
35
 
36
+ Prefer to try it first? Open the [live demo](https://zancheng.github.io/canvas-color-disc/).
37
+
34
38
  ```html
35
- <!-- unpkg, pinned to the current version (drop @1.4.0 to always get the latest):
36
- https://unpkg.com/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js
39
+ <!-- unpkg, pinned to the current version (drop @1.4.1 to always get the latest):
40
+ https://unpkg.com/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js
37
41
  jsDelivr mirror (identical file, same version):
38
- https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js -->
39
- <script src="https://unpkg.com/canvas-color-disc@1.4.0/dist/vanilla/canvas-color-disc.umd.js"></script>
42
+ https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js -->
43
+ <script src="https://unpkg.com/canvas-color-disc@1.4.1/dist/vanilla/canvas-color-disc.umd.js"></script>
40
44
 
41
45
  <canvas-color-disc width="300" height="300"></canvas-color-disc>
42
46
 
@@ -46,7 +50,7 @@ Works in plain HTML, React, Angular and anything else.
46
50
  </script>
47
51
  ```
48
52
 
49
- Both CDNs also resolve the bare package URL — `https://unpkg.com/canvas-color-disc@1.4.0` and `https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0` — straight to that UMD file, thanks to the `unpkg` / `jsdelivr` fields in package.json.
53
+ Both CDNs also resolve the bare package URL — `https://unpkg.com/canvas-color-disc@1.4.1` and `https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1` — straight to that UMD file, thanks to the `unpkg` / `jsdelivr` fields in package.json.
50
54
 
51
55
  ### React
52
56
 
@@ -173,13 +177,13 @@ The component is registered as `CanvasColorDisc`, use it as `<canvas-color-disc
173
177
  ### Use via CDN (Vue 2 / Vue 3 UMD)
174
178
 
175
179
  ```html
176
- <!-- unpkg, pinned to the current version (drop @1.4.0 to always get the latest);
180
+ <!-- unpkg, pinned to the current version (drop @1.4.1 to always get the latest);
177
181
  for the jsDelivr mirror replace the origin and keep the same version:
178
- https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0/dist/style.css
179
- https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.0/dist/canvas-color-disc.umd.js -->
180
- <link rel="stylesheet" href="https://unpkg.com/canvas-color-disc@1.4.0/dist/style.css">
182
+ https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1/dist/style.css
183
+ https://cdn.jsdelivr.net/npm/canvas-color-disc@1.4.1/dist/canvas-color-disc.umd.js -->
184
+ <link rel="stylesheet" href="https://unpkg.com/canvas-color-disc@1.4.1/dist/style.css">
181
185
  <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
182
- <script src="https://unpkg.com/canvas-color-disc@1.4.0/dist/canvas-color-disc.umd.js"></script>
186
+ <script src="https://unpkg.com/canvas-color-disc@1.4.1/dist/canvas-color-disc.umd.js"></script>
183
187
 
184
188
  <script>
185
189
  // Without Vue.use, it can also be used directly as a component option
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canvas-color-disc",
3
- "version": "1.4.0",
3
+ "version": "1.4.2",
4
4
  "description": "Color disc realized by canvas",
5
5
  "private": false,
6
6
  "main": "dist/vue3/canvas-color-disc.umd.js",
@@ -80,7 +80,7 @@
80
80
  "@vue/compiler-sfc": "^3.5.13",
81
81
  "eslint": "^8.57.1",
82
82
  "eslint-plugin-vue": "^9.33.0",
83
- "jsdom": "^30.1.2",
83
+ "jsdom": "^26.1.0",
84
84
  "react": "^19.3.0",
85
85
  "react-dom": "^19.3.0",
86
86
  "vite": "^5.4.0",