pixel-flow-vue 1.0.6 → 1.0.8
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/dist/pixel-flow-vue3.css +2 -0
- package/dist/pixel-flow.es.js +22 -0
- package/dist/pixel-flow.umd.js +1 -0
- package/package.json +27 -25
- package/README.md +0 -110
- package/dist/pixel-flow-vue.css +0 -2
- package/dist/pixel-flow-vue.js +0 -101
- package/dist/pixel-flow-vue.umd.cjs +0 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createElementBlock as e, createTextVNode as t, defineComponent as n, normalizeStyle as r, openBlock as i, renderSlot as a } from "vue";
|
|
2
|
+
//#endregion
|
|
3
|
+
//#region src/components/PixelFlow.vue
|
|
4
|
+
var o = /*#__PURE__*/ ((e, t) => {
|
|
5
|
+
let n = e.__vccOpts || e;
|
|
6
|
+
for (let [e, r] of t) n[e] = r;
|
|
7
|
+
return n;
|
|
8
|
+
})(/* @__PURE__ */ n({
|
|
9
|
+
__name: "PixelFlow",
|
|
10
|
+
props: { color: {} },
|
|
11
|
+
setup(n) {
|
|
12
|
+
return (o, s) => (i(), e("div", {
|
|
13
|
+
class: "pixel-flow",
|
|
14
|
+
style: r({ color: n.color })
|
|
15
|
+
}, [a(o.$slots, "default", {}, () => [s[0] ||= t("默认内容", -1)], !0)], 4));
|
|
16
|
+
}
|
|
17
|
+
}), [["__scopeId", "data-v-61417c41"]]), s = { install(e, t = {}) {
|
|
18
|
+
e.component("PixelFlow", o), t.defaultColor && console.log("全局默认颜色：", t.defaultColor);
|
|
19
|
+
} };
|
|
20
|
+
typeof window < "u" && window.Vue && window.Vue.use(s, {});
|
|
21
|
+
//#endregion
|
|
22
|
+
export { o as PixelFlow, s as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.PixelFlowVue3={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`PixelFlow`,props:{color:{}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`pixel-flow`,style:(0,t.normalizeStyle)({color:e.color})},[(0,t.renderSlot)(n.$slots,`default`,{},()=>[r[0]||=(0,t.createTextVNode)(`默认内容`,-1)],!0)],4))}}),[[`__scopeId`,`data-v-61417c41`]]),r={install(e,t={}){e.component(`PixelFlow`,n),t.defaultColor&&console.log(`全局默认颜色：`,t.defaultColor)}};typeof window<`u`&&window.Vue&&window.Vue.use(r,{}),e.PixelFlow=n,e.default=r});
|
package/package.json
CHANGED
|
@@ -1,43 +1,45 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixel-flow-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "A Vue-based pixel flow library",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "./dist/pixel-flow
|
|
7
|
-
"module": "./dist/pixel-flow
|
|
8
|
-
"types": "index.d.ts",
|
|
6
|
+
"main": "./dist/pixel-flow.umd.js",
|
|
7
|
+
"module": "./dist/pixel-flow.es.js",
|
|
8
|
+
"types": "./dist/types/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
|
-
"import": "./dist/pixel-flow
|
|
12
|
-
"require": "./dist/pixel-flow
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
"./style.css": "./dist/style.css"
|
|
11
|
+
"import": "./dist/pixel-flow.es.js",
|
|
12
|
+
"require": "./dist/pixel-flow.umd.js"
|
|
13
|
+
}
|
|
16
14
|
},
|
|
17
15
|
"files": [
|
|
18
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
19
18
|
],
|
|
20
19
|
"scripts": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"preview": "vite preview",
|
|
24
|
-
"prepublishOnly": "npm run build"
|
|
20
|
+
"build": "vue-tsc --noEmit && vite build",
|
|
21
|
+
"dev": "vite"
|
|
25
22
|
},
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"vue": "^3.5.35"
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"vue": "^3.2.0 || ^3.3.0 || ^3.4.0"
|
|
29
25
|
},
|
|
30
26
|
"devDependencies": {
|
|
31
|
-
"@vitejs/plugin-vue": "^
|
|
32
|
-
"
|
|
27
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
28
|
+
"typescript": "^5.3.0",
|
|
29
|
+
"vite": "^5.0.0",
|
|
30
|
+
"vue": "^3.4.0",
|
|
31
|
+
"vue-tsc": "^1.8.0"
|
|
33
32
|
},
|
|
34
33
|
"keywords": [
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"pixel-art"
|
|
34
|
+
"vue3",
|
|
35
|
+
"vue-plugin",
|
|
36
|
+
"typescript",
|
|
37
|
+
"pixel-flow"
|
|
40
38
|
],
|
|
41
39
|
"author": "",
|
|
42
|
-
"license": "
|
|
40
|
+
"license": "MIT",
|
|
41
|
+
"repository": {
|
|
42
|
+
"type": "git",
|
|
43
|
+
"url": ""
|
|
44
|
+
}
|
|
43
45
|
}
|
package/README.md
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
# Pixel Flow
|
|
2
|
-
|
|
3
|
-
一个基于 Vue 3 的轻量级像素风渲染组件库。通过简单的颜色数组和配置，即可在 Web 页面上渲染出精美的像素艺术。
|
|
4
|
-
|
|
5
|
-
## 特性
|
|
6
|
-
|
|
7
|
-
- 🚀 **基于 Vue 3**: 充分利用组合式 API 和响应式系统。
|
|
8
|
-
- 🎨 **Canvas 渲染**: 使用 Canvas API 确保高性能渲染，支持大规模像素点。
|
|
9
|
-
- 🛠️ **高度可定制**: 轻松控制像素大小、间隙和颜色。
|
|
10
|
-
- 📦 **轻量级**: 零外部依赖（除 Vue 外）。
|
|
11
|
-
|
|
12
|
-
## 安装
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
npm install pixel-flow-vue
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## 快速开始
|
|
19
|
-
|
|
20
|
-
### 1. 全局注册
|
|
21
|
-
|
|
22
|
-
在 `main.js` 中引入并安装：
|
|
23
|
-
|
|
24
|
-
```javascript
|
|
25
|
-
import { createApp } from 'vue'
|
|
26
|
-
import PixelFlow from 'pixel-flow-vue'
|
|
27
|
-
import App from './App.vue'
|
|
28
|
-
```,old_str:
|
|
29
|
-
const app = createApp(App)
|
|
30
|
-
app.use(PixelFlow)
|
|
31
|
-
app.mount('#app')
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
### 2. 基础使用
|
|
35
|
-
|
|
36
|
-
在组件中使用 `PixelProvider` 和 `PixelRenderer`：
|
|
37
|
-
|
|
38
|
-
```vue
|
|
39
|
-
<script setup>
|
|
40
|
-
const heartData = [
|
|
41
|
-
'transparent', 'red', 'red', 'transparent', 'red', 'red', 'transparent',
|
|
42
|
-
'red', 'red', 'red', 'red', 'red', 'red', 'red',
|
|
43
|
-
'red', 'red', 'red', 'red', 'red', 'red', 'red',
|
|
44
|
-
'transparent', 'red', 'red', 'red', 'red', 'red', 'transparent',
|
|
45
|
-
'transparent', 'transparent', 'red', 'red', 'red', 'transparent', 'transparent',
|
|
46
|
-
'transparent', 'transparent', 'transparent', 'red', 'transparent', 'transparent', 'transparent',
|
|
47
|
-
];
|
|
48
|
-
</script>
|
|
49
|
-
|
|
50
|
-
<template>
|
|
51
|
-
<PixelProvider :pixel-size="20" :gap="2">
|
|
52
|
-
<PixelRenderer
|
|
53
|
-
:data="heartData"
|
|
54
|
-
:width="7"
|
|
55
|
-
:height="6"
|
|
56
|
-
/>
|
|
57
|
-
</PixelProvider>
|
|
58
|
-
</template>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## 组件 API
|
|
62
|
-
|
|
63
|
-
### PixelProvider
|
|
64
|
-
|
|
65
|
-
提供渲染上下文的容器组件。
|
|
66
|
-
|
|
67
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
68
|
-
| :--- | :--- | :--- | :--- |
|
|
69
|
-
| `pixel-size` | `Number` | `10` | 单个像素点的大小（单位：px） |
|
|
70
|
-
| `gap` | `Number` | `1` | 像素点之间的间隙（单位：px） |
|
|
71
|
-
|
|
72
|
-
### PixelRenderer
|
|
73
|
-
|
|
74
|
-
核心渲染组件。
|
|
75
|
-
|
|
76
|
-
| 属性 | 类型 | 必填 | 说明 |
|
|
77
|
-
| :--- | :--- | :--- | :--- |
|
|
78
|
-
| `data` | `Array \| Object` | 是 | 像素颜色数组或包含 `pixels` 的对象 |
|
|
79
|
-
| `width` | `Number` | 是 | 像素矩阵的宽度 |
|
|
80
|
-
| `height` | `Number` | 是 | 像素矩阵的高度 |
|
|
81
|
-
|
|
82
|
-
## 组合式 API
|
|
83
|
-
|
|
84
|
-
### usePixelFlow
|
|
85
|
-
|
|
86
|
-
在子组件中获取当前的渲染配置。
|
|
87
|
-
|
|
88
|
-
```javascript
|
|
89
|
-
import { usePixelFlow } from 'pixel-flow-vue'
|
|
90
|
-
|
|
91
|
-
const { config, updateConfig } = usePixelFlow()
|
|
92
|
-
console.log(config.value.pixelSize)
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
## 开发
|
|
96
|
-
|
|
97
|
-
```bash
|
|
98
|
-
# 安装依赖
|
|
99
|
-
npm install
|
|
100
|
-
|
|
101
|
-
# 启动开发服务器（查看示例）
|
|
102
|
-
npm run dev
|
|
103
|
-
|
|
104
|
-
# 打包构建
|
|
105
|
-
npm run build
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
## 许可证
|
|
109
|
-
|
|
110
|
-
ISC License
|
package/dist/pixel-flow-vue.css
DELETED
package/dist/pixel-flow-vue.js
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { createElementBlock as e, createElementVNode as t, inject as n, onMounted as r, openBlock as i, provide as a, ref as o, renderSlot as s, watch as c } from "vue";
|
|
2
|
-
//#region src/composables/usePixelFlow.js
|
|
3
|
-
var l = Symbol("PixelFlow");
|
|
4
|
-
function u(e = {}) {
|
|
5
|
-
let t = o({
|
|
6
|
-
pixelSize: 10,
|
|
7
|
-
gap: 1,
|
|
8
|
-
...e
|
|
9
|
-
}), n = (e) => {
|
|
10
|
-
t.value = {
|
|
11
|
-
...t.value,
|
|
12
|
-
...e
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
return a(l, {
|
|
16
|
-
config: t,
|
|
17
|
-
updateConfig: n
|
|
18
|
-
}), {
|
|
19
|
-
config: t,
|
|
20
|
-
updateConfig: n
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
function d() {
|
|
24
|
-
let e = n(l);
|
|
25
|
-
if (!e) throw Error("usePixelFlow must be used within a PixelProvider");
|
|
26
|
-
return e;
|
|
27
|
-
}
|
|
28
|
-
//#endregion
|
|
29
|
-
//#region \0plugin-vue:export-helper
|
|
30
|
-
var f = (e, t) => {
|
|
31
|
-
let n = e.__vccOpts || e;
|
|
32
|
-
for (let [e, r] of t) n[e] = r;
|
|
33
|
-
return n;
|
|
34
|
-
}, p = { class: "pixel-provider" }, m = /*#__PURE__*/ f({
|
|
35
|
-
__name: "PixelProvider",
|
|
36
|
-
props: {
|
|
37
|
-
pixelSize: {
|
|
38
|
-
type: Number,
|
|
39
|
-
default: 10
|
|
40
|
-
},
|
|
41
|
-
gap: {
|
|
42
|
-
type: Number,
|
|
43
|
-
default: 1
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
setup(t) {
|
|
47
|
-
let n = t;
|
|
48
|
-
return u({
|
|
49
|
-
pixelSize: n.pixelSize,
|
|
50
|
-
gap: n.gap
|
|
51
|
-
}), (t, n) => (i(), e("div", p, [s(t.$slots, "default", {}, void 0, !0)]));
|
|
52
|
-
}
|
|
53
|
-
}, [["__scopeId", "data-v-5cb8bb32"]]);
|
|
54
|
-
//#endregion
|
|
55
|
-
//#region src/utils/resolver.js
|
|
56
|
-
function h(e) {
|
|
57
|
-
return Array.isArray(e) ? e : e && typeof e == "object" && e.pixels ? e.pixels : [];
|
|
58
|
-
}
|
|
59
|
-
//#endregion
|
|
60
|
-
//#region src/components/PixelRenderer.vue
|
|
61
|
-
var g = { class: "pixel-renderer" }, _ = /*#__PURE__*/ f({
|
|
62
|
-
__name: "PixelRenderer",
|
|
63
|
-
props: {
|
|
64
|
-
data: {
|
|
65
|
-
type: [Array, Object],
|
|
66
|
-
required: !0
|
|
67
|
-
},
|
|
68
|
-
width: {
|
|
69
|
-
type: Number,
|
|
70
|
-
required: !0
|
|
71
|
-
},
|
|
72
|
-
height: {
|
|
73
|
-
type: Number,
|
|
74
|
-
required: !0
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
setup(n) {
|
|
78
|
-
let a = n, s = o(null), { config: l } = d(), u = () => {
|
|
79
|
-
let e = s.value;
|
|
80
|
-
if (!e) return;
|
|
81
|
-
let t = e.getContext("2d"), n = h(a.data), { pixelSize: r, gap: i } = l.value;
|
|
82
|
-
e.width = a.width * (r + i), e.height = a.height * (r + i), t.clearRect(0, 0, e.width, e.height);
|
|
83
|
-
for (let e = 0; e < a.height; e++) for (let o = 0; o < a.width; o++) {
|
|
84
|
-
let s = n[e * a.width + o] || "transparent";
|
|
85
|
-
s !== "transparent" && (t.fillStyle = s, t.fillRect(o * (r + i), e * (r + i), r, r));
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
return r(() => {
|
|
89
|
-
u();
|
|
90
|
-
}), c([() => a.data, l], () => {
|
|
91
|
-
u();
|
|
92
|
-
}, { deep: !0 }), (n, r) => (i(), e("div", g, [t("canvas", {
|
|
93
|
-
ref_key: "canvasRef",
|
|
94
|
-
ref: s
|
|
95
|
-
}, null, 512)]));
|
|
96
|
-
}
|
|
97
|
-
}, [["__scopeId", "data-v-4cb25cf9"]]), v = { install(e) {
|
|
98
|
-
e.component("PixelProvider", m), e.component("PixelRenderer", _);
|
|
99
|
-
} };
|
|
100
|
-
//#endregion
|
|
101
|
-
export { m as PixelProvider, _ as PixelRenderer, v as default, h as resolvePixelData, d as usePixelFlow };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.PixelFlowVue={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Symbol(`PixelFlow`);function r(e={}){let r=(0,t.ref)({pixelSize:10,gap:1,...e}),i=e=>{r.value={...r.value,...e}};return(0,t.provide)(n,{config:r,updateConfig:i}),{config:r,updateConfig:i}}function i(){let e=(0,t.inject)(n);if(!e)throw Error(`usePixelFlow must be used within a PixelProvider`);return e}var a=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},o={class:`pixel-provider`},s=a({__name:`PixelProvider`,props:{pixelSize:{type:Number,default:10},gap:{type:Number,default:1}},setup(e){let n=e;return r({pixelSize:n.pixelSize,gap:n.gap}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,o,[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)]))}},[[`__scopeId`,`data-v-5cb8bb32`]]);function c(e){return Array.isArray(e)?e:e&&typeof e==`object`&&e.pixels?e.pixels:[]}var l={class:`pixel-renderer`},u=a({__name:`PixelRenderer`,props:{data:{type:[Array,Object],required:!0},width:{type:Number,required:!0},height:{type:Number,required:!0}},setup(e){let n=e,r=(0,t.ref)(null),{config:a}=i(),o=()=>{let e=r.value;if(!e)return;let t=e.getContext(`2d`),i=c(n.data),{pixelSize:o,gap:s}=a.value;e.width=n.width*(o+s),e.height=n.height*(o+s),t.clearRect(0,0,e.width,e.height);for(let e=0;e<n.height;e++)for(let r=0;r<n.width;r++){let a=i[e*n.width+r]||`transparent`;a!==`transparent`&&(t.fillStyle=a,t.fillRect(r*(o+s),e*(o+s),o,o))}};return(0,t.onMounted)(()=>{o()}),(0,t.watch)([()=>n.data,a],()=>{o()},{deep:!0}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,l,[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:r},null,512)]))}},[[`__scopeId`,`data-v-4cb25cf9`]]);e.PixelProvider=s,e.PixelRenderer=u,e.default={install(e){e.component(`PixelProvider`,s),e.component(`PixelRenderer`,u)}},e.resolvePixelData=c,e.usePixelFlow=i});
|