vue-computed-eager 1.0.10 → 1.0.12

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 (6) hide show
  1. package/README.github.md +5 -4
  2. package/README.md +5 -4
  3. package/README.npm.md +5 -4
  4. package/banner.svg +1 -1
  5. package/logo.svg +64 -6
  6. package/package.json +7 -2
package/README.github.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <h1 align="center">vue-computed-eager</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility that creates computed properties which evaluate immediately when dependencies change, rather than lazily on access. Ideal for simple boolean checks with rarely-changing values. Note: Vue 3.4+ has built-in optimization making this less necessary.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-computed-eager"><img src="https://img.shields.io/npm/v/vue-computed-eager.svg" alt="npm version" /></a>
@@ -20,13 +20,14 @@ npm install vue-computed-eager
20
20
  ## Usage
21
21
 
22
22
  ```ts
23
- import { computedEager } from '@vueuse/core'
23
+ import { computedEager } from 'vue-computed-eager'
24
+ import { ref } from 'vue'
24
25
 
25
26
  const todos = ref([])
26
- const hasOpenTodos = computedEager(() => !!todos.length)
27
+ const hasOpenTodos = computedEager(() => !!todos.value.length)
27
28
 
28
29
  console.log(hasOpenTodos.value) // false
29
- toTodos.value.push({ title: 'Learn Vue' })
30
+ todos.value.push({ title: 'Learn Vue' })
30
31
  console.log(hasOpenTodos.value) // true
31
32
  ```
32
33
 
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <h1 align="center">vue-computed-eager</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility that creates computed properties which evaluate immediately when dependencies change, rather than lazily on access. Ideal for simple boolean checks with rarely-changing values. Note: Vue 3.4+ has built-in optimization making this less necessary.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-computed-eager"><img src="https://img.shields.io/npm/v/vue-computed-eager.svg" alt="npm version" /></a>
@@ -20,13 +20,14 @@ npm install vue-computed-eager
20
20
  ## Usage
21
21
 
22
22
  ```ts
23
- import { computedEager } from '@vueuse/core'
23
+ import { computedEager } from 'vue-computed-eager'
24
+ import { ref } from 'vue'
24
25
 
25
26
  const todos = ref([])
26
- const hasOpenTodos = computedEager(() => !!todos.length)
27
+ const hasOpenTodos = computedEager(() => !!todos.value.length)
27
28
 
28
29
  console.log(hasOpenTodos.value) // false
29
- toTodos.value.push({ title: 'Learn Vue' })
30
+ todos.value.push({ title: 'Learn Vue' })
30
31
  console.log(hasOpenTodos.value) // true
31
32
  ```
32
33
 
package/README.npm.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <h1 align="center">vue-computed-eager</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility that creates computed properties which evaluate immediately when dependencies change, rather than lazily on access. Ideal for simple boolean checks with rarely-changing values. Note: Vue 3.4+ has built-in optimization making this less necessary.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-computed-eager"><img src="https://img.shields.io/npm/v/vue-computed-eager.svg" alt="npm version" /></a>
@@ -20,13 +20,14 @@ npm install vue-computed-eager
20
20
  ## Usage
21
21
 
22
22
  ```ts
23
- import { computedEager } from '@vueuse/core'
23
+ import { computedEager } from 'vue-computed-eager'
24
+ import { ref } from 'vue'
24
25
 
25
26
  const todos = ref([])
26
- const hasOpenTodos = computedEager(() => !!todos.length)
27
+ const hasOpenTodos = computedEager(() => !!todos.value.length)
27
28
 
28
29
  console.log(hasOpenTodos.value) // false
29
- toTodos.value.push({ title: 'Learn Vue' })
30
+ todos.value.push({ title: 'Learn Vue' })
30
31
  console.log(hasOpenTodos.value) // true
31
32
  ```
32
33
 
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-eager</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 composable utility</text>
29
+ <text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 eager computed that evaluates immediately on dependency change</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="16" fill="#35495e"/>
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
- <!-- Primary shape -->
6
- <circle cx="48" cy="42" r="20" fill="#42b883"/>
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="8"
57
+ font-weight="600"
58
+ fill="#42b883"
59
+ letter-spacing="-0.3">vue-computed-eager</text>
7
60
 
8
- <!-- Function name -->
9
- <text x="48" y="72" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="7" fill="#42b883" opacity="0.85">Reactivity</text>
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="28" y="82" width="40" height="2" rx="1" fill="#42b883" opacity="0.5"/>
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-eager",
3
- "version": "1.0.10",
4
- "description": "Vue 3 composable utility",
3
+ "version": "1.0.12",
4
+ "description": "Vue 3 eager computed that evaluates immediately on dependency change",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",
@@ -24,6 +24,11 @@
24
24
  "postpublish": "cp README.github.md README.md"
25
25
  },
26
26
  "keywords": [
27
+ "vue",
28
+ "vue3",
29
+ "composition-api",
30
+ "composable",
31
+ "vueuse",
27
32
  "eager",
28
33
  "computed",
29
34
  "immediate",