vue-computed-with-control 1.0.7 → 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 +7 -45
- package/README.md +7 -45
- package/README.npm.md +7 -45
- 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>
|
|
@@ -19,60 +19,22 @@ npm install vue-computed-with-control
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
Explicitly define the dependencies of computed.
|
|
23
|
-
|
|
24
22
|
```ts
|
|
25
23
|
import { computedWithControl } from 'vue-computed-with-control'
|
|
24
|
+
import { ref } from 'vue'
|
|
26
25
|
|
|
27
26
|
const source = ref('foo')
|
|
28
27
|
const counter = ref(0)
|
|
29
28
|
|
|
30
|
-
const computedRef = computedWithControl(
|
|
31
|
-
() => source.value, // watch source, same as `watch`
|
|
32
|
-
() => counter.value, // computed getter, same as `computed`
|
|
33
|
-
)
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
With this, the changes of `counter` won't trigger `computedRef` to update but the `source` ref does.
|
|
37
|
-
|
|
38
|
-
```ts
|
|
39
|
-
console.log(computedRef.value) // 0
|
|
40
|
-
|
|
41
|
-
counter.value += 1
|
|
42
|
-
|
|
43
|
-
console.log(computedRef.value) // 0
|
|
44
|
-
|
|
45
|
-
source.value = 'bar'
|
|
46
|
-
|
|
47
|
-
console.log(computedRef.value) // 1
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Manual Triggering
|
|
51
|
-
|
|
52
|
-
You can also manually trigger the update of the computed by:
|
|
53
|
-
|
|
54
|
-
```ts
|
|
55
29
|
const computedRef = computedWithControl(
|
|
56
30
|
() => source.value,
|
|
57
|
-
() =>
|
|
31
|
+
() => {
|
|
32
|
+
counter.value++
|
|
33
|
+
}
|
|
58
34
|
)
|
|
59
35
|
|
|
60
|
-
computedRef.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
### Deep Watch
|
|
64
|
-
|
|
65
|
-
Unlike `computed`, `computedWithControl` is shallow by default.
|
|
66
|
-
You can specify the same options as `watch` to control the behavior:
|
|
67
|
-
|
|
68
|
-
```ts
|
|
69
|
-
const source = ref({ name: 'foo' })
|
|
70
|
-
|
|
71
|
-
const computedRef = computedWithControl(
|
|
72
|
-
source,
|
|
73
|
-
() => counter.value,
|
|
74
|
-
{ deep: true },
|
|
75
|
-
)
|
|
36
|
+
console.log(computedRef.value) // 'foo'
|
|
37
|
+
console.log(counter.value) // 1
|
|
76
38
|
```
|
|
77
39
|
|
|
78
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>
|
|
@@ -19,60 +19,22 @@ npm install vue-computed-with-control
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
Explicitly define the dependencies of computed.
|
|
23
|
-
|
|
24
22
|
```ts
|
|
25
23
|
import { computedWithControl } from 'vue-computed-with-control'
|
|
24
|
+
import { ref } from 'vue'
|
|
26
25
|
|
|
27
26
|
const source = ref('foo')
|
|
28
27
|
const counter = ref(0)
|
|
29
28
|
|
|
30
|
-
const computedRef = computedWithControl(
|
|
31
|
-
() => source.value, // watch source, same as `watch`
|
|
32
|
-
() => counter.value, // computed getter, same as `computed`
|
|
33
|
-
)
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
With this, the changes of `counter` won't trigger `computedRef` to update but the `source` ref does.
|
|
37
|
-
|
|
38
|
-
```ts
|
|
39
|
-
console.log(computedRef.value) // 0
|
|
40
|
-
|
|
41
|
-
counter.value += 1
|
|
42
|
-
|
|
43
|
-
console.log(computedRef.value) // 0
|
|
44
|
-
|
|
45
|
-
source.value = 'bar'
|
|
46
|
-
|
|
47
|
-
console.log(computedRef.value) // 1
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Manual Triggering
|
|
51
|
-
|
|
52
|
-
You can also manually trigger the update of the computed by:
|
|
53
|
-
|
|
54
|
-
```ts
|
|
55
29
|
const computedRef = computedWithControl(
|
|
56
30
|
() => source.value,
|
|
57
|
-
() =>
|
|
31
|
+
() => {
|
|
32
|
+
counter.value++
|
|
33
|
+
}
|
|
58
34
|
)
|
|
59
35
|
|
|
60
|
-
computedRef.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
### Deep Watch
|
|
64
|
-
|
|
65
|
-
Unlike `computed`, `computedWithControl` is shallow by default.
|
|
66
|
-
You can specify the same options as `watch` to control the behavior:
|
|
67
|
-
|
|
68
|
-
```ts
|
|
69
|
-
const source = ref({ name: 'foo' })
|
|
70
|
-
|
|
71
|
-
const computedRef = computedWithControl(
|
|
72
|
-
source,
|
|
73
|
-
() => counter.value,
|
|
74
|
-
{ deep: true },
|
|
75
|
-
)
|
|
36
|
+
console.log(computedRef.value) // 'foo'
|
|
37
|
+
console.log(counter.value) // 1
|
|
76
38
|
```
|
|
77
39
|
|
|
78
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>
|
|
@@ -19,60 +19,22 @@ npm install vue-computed-with-control
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
Explicitly define the dependencies of computed.
|
|
23
|
-
|
|
24
22
|
```ts
|
|
25
23
|
import { computedWithControl } from 'vue-computed-with-control'
|
|
24
|
+
import { ref } from 'vue'
|
|
26
25
|
|
|
27
26
|
const source = ref('foo')
|
|
28
27
|
const counter = ref(0)
|
|
29
28
|
|
|
30
|
-
const computedRef = computedWithControl(
|
|
31
|
-
() => source.value, // watch source, same as `watch`
|
|
32
|
-
() => counter.value, // computed getter, same as `computed`
|
|
33
|
-
)
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
With this, the changes of `counter` won't trigger `computedRef` to update but the `source` ref does.
|
|
37
|
-
|
|
38
|
-
```ts
|
|
39
|
-
console.log(computedRef.value) // 0
|
|
40
|
-
|
|
41
|
-
counter.value += 1
|
|
42
|
-
|
|
43
|
-
console.log(computedRef.value) // 0
|
|
44
|
-
|
|
45
|
-
source.value = 'bar'
|
|
46
|
-
|
|
47
|
-
console.log(computedRef.value) // 1
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Manual Triggering
|
|
51
|
-
|
|
52
|
-
You can also manually trigger the update of the computed by:
|
|
53
|
-
|
|
54
|
-
```ts
|
|
55
29
|
const computedRef = computedWithControl(
|
|
56
30
|
() => source.value,
|
|
57
|
-
() =>
|
|
31
|
+
() => {
|
|
32
|
+
counter.value++
|
|
33
|
+
}
|
|
58
34
|
)
|
|
59
35
|
|
|
60
|
-
computedRef.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
### Deep Watch
|
|
64
|
-
|
|
65
|
-
Unlike `computed`, `computedWithControl` is shallow by default.
|
|
66
|
-
You can specify the same options as `watch` to control the behavior:
|
|
67
|
-
|
|
68
|
-
```ts
|
|
69
|
-
const source = ref({ name: 'foo' })
|
|
70
|
-
|
|
71
|
-
const computedRef = computedWithControl(
|
|
72
|
-
source,
|
|
73
|
-
() => counter.value,
|
|
74
|
-
{ deep: true },
|
|
75
|
-
)
|
|
36
|
+
console.log(computedRef.value) // 'foo'
|
|
37
|
+
console.log(counter.value) // 1
|
|
76
38
|
```
|
|
77
39
|
|
|
78
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",
|