vue-computed-with-control 1.0.8 → 1.0.9
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.github.md +10 -4
- package/README.md +10 -4
- package/README.npm.md +10 -4
- package/banner.svg +1 -1
- package/logo.svg +64 -6
- package/package.json +9 -4
package/README.github.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-computed-with-control</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center">A Vue 3 composition API utility that lets you explicitly control computed property updates with manual trigger functions and dependency tracking. Provides fine-grained control over when computations re-run.</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-computed-with-control"><img src="https://img.shields.io/npm/v/vue-computed-with-control.svg" alt="npm version" /></a>
|
|
@@ -20,15 +20,21 @@ npm install vue-computed-with-control
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
22
|
```ts
|
|
23
|
-
import { computedWithControl } from '
|
|
23
|
+
import { computedWithControl } from 'vue-computed-with-control'
|
|
24
|
+
import { ref } from 'vue'
|
|
24
25
|
|
|
25
26
|
const source = ref('foo')
|
|
26
27
|
const counter = ref(0)
|
|
27
28
|
|
|
28
29
|
const computedRef = computedWithControl(
|
|
29
|
-
() => source.value,
|
|
30
|
-
() =>
|
|
30
|
+
() => source.value,
|
|
31
|
+
() => {
|
|
32
|
+
counter.value++
|
|
33
|
+
}
|
|
31
34
|
)
|
|
35
|
+
|
|
36
|
+
console.log(computedRef.value) // 'foo'
|
|
37
|
+
console.log(counter.value) // 1
|
|
32
38
|
```
|
|
33
39
|
|
|
34
40
|
## License
|
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-computed-with-control</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center">A Vue 3 composition API utility that lets you explicitly control computed property updates with manual trigger functions and dependency tracking. Provides fine-grained control over when computations re-run.</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-computed-with-control"><img src="https://img.shields.io/npm/v/vue-computed-with-control.svg" alt="npm version" /></a>
|
|
@@ -20,15 +20,21 @@ npm install vue-computed-with-control
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
22
|
```ts
|
|
23
|
-
import { computedWithControl } from '
|
|
23
|
+
import { computedWithControl } from 'vue-computed-with-control'
|
|
24
|
+
import { ref } from 'vue'
|
|
24
25
|
|
|
25
26
|
const source = ref('foo')
|
|
26
27
|
const counter = ref(0)
|
|
27
28
|
|
|
28
29
|
const computedRef = computedWithControl(
|
|
29
|
-
() => source.value,
|
|
30
|
-
() =>
|
|
30
|
+
() => source.value,
|
|
31
|
+
() => {
|
|
32
|
+
counter.value++
|
|
33
|
+
}
|
|
31
34
|
)
|
|
35
|
+
|
|
36
|
+
console.log(computedRef.value) // 'foo'
|
|
37
|
+
console.log(counter.value) // 1
|
|
32
38
|
```
|
|
33
39
|
|
|
34
40
|
## License
|
package/README.npm.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-computed-with-control</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center">A Vue 3 composition API utility that lets you explicitly control computed property updates with manual trigger functions and dependency tracking. Provides fine-grained control over when computations re-run.</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-computed-with-control"><img src="https://img.shields.io/npm/v/vue-computed-with-control.svg" alt="npm version" /></a>
|
|
@@ -20,15 +20,21 @@ npm install vue-computed-with-control
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
22
|
```ts
|
|
23
|
-
import { computedWithControl } from '
|
|
23
|
+
import { computedWithControl } from 'vue-computed-with-control'
|
|
24
|
+
import { ref } from 'vue'
|
|
24
25
|
|
|
25
26
|
const source = ref('foo')
|
|
26
27
|
const counter = ref(0)
|
|
27
28
|
|
|
28
29
|
const computedRef = computedWithControl(
|
|
29
|
-
() => source.value,
|
|
30
|
-
() =>
|
|
30
|
+
() => source.value,
|
|
31
|
+
() => {
|
|
32
|
+
counter.value++
|
|
33
|
+
}
|
|
31
34
|
)
|
|
35
|
+
|
|
36
|
+
console.log(computedRef.value) // 'foo'
|
|
37
|
+
console.log(counter.value) // 1
|
|
32
38
|
```
|
|
33
39
|
|
|
34
40
|
## License
|
package/banner.svg
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<text x="80" y="280" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">vue-computed-with-control</text>
|
|
27
27
|
|
|
28
28
|
<!-- Description -->
|
|
29
|
-
<text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3
|
|
29
|
+
<text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 computed with manual trigger and dependency control</text>
|
|
30
30
|
|
|
31
31
|
<!-- Install command -->
|
|
32
32
|
<g transform="translate(80, 420)">
|
package/logo.svg
CHANGED
|
@@ -1,13 +1,71 @@
|
|
|
1
1
|
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
|
|
2
|
+
<!-- Premium background with depth -->
|
|
3
|
+
<defs>
|
|
4
|
+
<linearGradient id="logo-bg-Reactivity" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
5
|
+
<stop offset="0%" style="stop-color:#35495e;stop-opacity:1" />
|
|
6
|
+
<stop offset="50%" style="stop-color:#1e2936;stop-opacity:1" />
|
|
7
|
+
<stop offset="100%" style="stop-color:#0f1419;stop-opacity:1" />
|
|
8
|
+
</linearGradient>
|
|
9
|
+
<filter id="logo-shadow">
|
|
10
|
+
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
|
|
11
|
+
<feOffset dx="0" dy="1" result="offsetblur"/>
|
|
12
|
+
<feComponentTransfer>
|
|
13
|
+
<feFuncA type="linear" slope="0.3"/>
|
|
14
|
+
</feComponentTransfer>
|
|
15
|
+
<feMerge>
|
|
16
|
+
<feMergeNode/>
|
|
17
|
+
<feMergeNode in="SourceGraphic"/>
|
|
18
|
+
</feMerge>
|
|
19
|
+
</filter>
|
|
20
|
+
<filter id="glow">
|
|
21
|
+
<feGaussianBlur stdDeviation="1" result="coloredBlur"/>
|
|
22
|
+
<feMerge>
|
|
23
|
+
<feMergeNode in="coloredBlur"/>
|
|
24
|
+
<feMergeNode in="SourceGraphic"/>
|
|
25
|
+
</feMerge>
|
|
26
|
+
</filter>
|
|
27
|
+
</defs>
|
|
28
|
+
|
|
2
29
|
<!-- Background -->
|
|
3
|
-
<rect width="96" height="96" rx="
|
|
30
|
+
<rect width="96" height="96" rx="20" fill="url(#logo-bg-Reactivity)"/>
|
|
31
|
+
|
|
32
|
+
<!-- Subtle inner border -->
|
|
33
|
+
<rect x="2" y="2" width="92" height="92" rx="18" fill="none" stroke="#42b883" stroke-width="0.5" opacity="0.12"/>
|
|
34
|
+
|
|
35
|
+
<!-- Vuefrag badge (top, smaller and moved right) -->
|
|
36
|
+
<g filter="url(#logo-shadow)">
|
|
37
|
+
<rect x="10" y="7" width="26" height="9" rx="2.5" fill="#42b883" opacity="0.8"/>
|
|
38
|
+
<text x="23" y="13.5" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="6" font-weight="600" fill="white" letter-spacing="-0.2">Vuefrag</text>
|
|
39
|
+
</g>
|
|
40
|
+
|
|
41
|
+
<!-- Category icon (centered, balanced size) -->
|
|
42
|
+
<g filter="url(#glow)">
|
|
43
|
+
|
|
44
|
+
<!-- Atomic structure -->
|
|
45
|
+
<circle cx="48" cy="34" r="16" fill="none" stroke="#42b883" stroke-width="3.5" opacity="0.3"/>
|
|
46
|
+
<circle cx="48" cy="34" r="5" fill="#42b883"/>
|
|
47
|
+
<circle cx="64" cy="34" r="3.5" fill="#42b883"/>
|
|
48
|
+
<circle cx="32" cy="34" r="3.5" fill="#42b883"/>
|
|
49
|
+
<circle cx="48" cy="18" r="3" fill="#42b883" opacity="0.7"/>
|
|
50
|
+
<circle cx="48" cy="50" r="3" fill="#42b883" opacity="0.7"/>
|
|
51
|
+
</g>
|
|
4
52
|
|
|
5
|
-
<!--
|
|
6
|
-
<
|
|
53
|
+
<!-- Package name (bold, readable) -->
|
|
54
|
+
<text x="48" y="70" text-anchor="middle"
|
|
55
|
+
font-family="ui-monospace, 'SF Mono', Menlo, monospace"
|
|
56
|
+
font-size="6.5"
|
|
57
|
+
font-weight="600"
|
|
58
|
+
fill="#42b883"
|
|
59
|
+
letter-spacing="-0.4">vue-computed-with-co...</text>
|
|
7
60
|
|
|
8
|
-
<!--
|
|
9
|
-
<text x="48" y="
|
|
61
|
+
<!-- Category name (smaller, subtle) -->
|
|
62
|
+
<text x="48" y="80" text-anchor="middle"
|
|
63
|
+
font-family="system-ui, -apple-system, sans-serif"
|
|
64
|
+
font-size="6.5"
|
|
65
|
+
font-weight="500"
|
|
66
|
+
fill="#42b883"
|
|
67
|
+
opacity="0.5">Reactivity</text>
|
|
10
68
|
|
|
11
69
|
<!-- Bottom accent line -->
|
|
12
|
-
<rect x="
|
|
70
|
+
<rect x="24" y="88" width="48" height="1.5" rx="0.75" fill="#42b883" opacity="0.18"/>
|
|
13
71
|
</svg>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-computed-with-control",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Vue 3
|
|
3
|
+
"version": "1.0.9",
|
|
4
|
+
"description": "Vue 3 computed with manual trigger and dependency control",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -20,10 +20,15 @@
|
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
22
|
"build": "unbuild",
|
|
23
|
-
"prepublishOnly": "cp
|
|
24
|
-
"postpublish": "cp
|
|
23
|
+
"prepublishOnly": "cp .readme-npm README.md && npm run build",
|
|
24
|
+
"postpublish": "cp .readme-github README.md"
|
|
25
25
|
},
|
|
26
26
|
"keywords": [
|
|
27
|
+
"vue",
|
|
28
|
+
"vue3",
|
|
29
|
+
"composition-api",
|
|
30
|
+
"composable",
|
|
31
|
+
"vueuse",
|
|
27
32
|
"computed",
|
|
28
33
|
"control",
|
|
29
34
|
"manual",
|