vue-ref-default 1.0.1 → 1.0.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 (6) hide show
  1. package/README.github.md +1 -3
  2. package/README.md +2 -4
  3. package/README.npm.md +1 -3
  4. package/banner.svg +1 -1
  5. package/logo.svg +64 -6
  6. package/package.json +8 -5
package/README.github.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <h1 align="center">vue-ref-default</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility that wraps a ref with a computed property returning a default value when the source is null or undefined. Supports both read and write operations.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-ref-default"><img src="https://img.shields.io/npm/v/vue-ref-default.svg" alt="npm version" /></a>
@@ -19,8 +19,6 @@ npm install vue-ref-default
19
19
 
20
20
  ## Usage
21
21
 
22
- > **Note:** This example has been hand-crafted for clarity. Original example requires useStorage which isn't in this standalone package
23
-
24
22
  ```ts
25
23
  import { refDefault } from 'vue-ref-default'
26
24
  import { ref } from 'vue'
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  <p align="center">
2
- <img src="logo.svg" alt="vue-ref-default" width="180" />
2
+ <img src="https://raw.githubusercontent.com/vuefrag/vue-ref-default/main/banner.svg" alt="vue-ref-default" width="100%" />
3
3
  </p>
4
4
 
5
5
  <h1 align="center">vue-ref-default</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility that wraps a ref with a computed property returning a default value when the source is null or undefined. Supports both read and write operations.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-ref-default"><img src="https://img.shields.io/npm/v/vue-ref-default.svg" alt="npm version" /></a>
@@ -19,8 +19,6 @@ npm install vue-ref-default
19
19
 
20
20
  ## Usage
21
21
 
22
- > **Note:** This example has been hand-crafted for clarity. Original example requires useStorage which isn't in this standalone package
23
-
24
22
  ```ts
25
23
  import { refDefault } from 'vue-ref-default'
26
24
  import { ref } from 'vue'
package/README.npm.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <h1 align="center">vue-ref-default</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility that wraps a ref with a computed property returning a default value when the source is null or undefined. Supports both read and write operations.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-ref-default"><img src="https://img.shields.io/npm/v/vue-ref-default.svg" alt="npm version" /></a>
@@ -19,8 +19,6 @@ npm install vue-ref-default
19
19
 
20
20
  ## Usage
21
21
 
22
- > **Note:** This example has been hand-crafted for clarity. Original example requires useStorage which isn't in this standalone package
23
-
24
22
  ```ts
25
23
  import { refDefault } from 'vue-ref-default'
26
24
  import { ref } from 'vue'
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-ref-default</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 computed ref providing fallback for null/undefined values</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-ref-default</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-ref-default",
3
- "version": "1.0.1",
4
- "description": "Vue 3 composable utility",
3
+ "version": "1.0.2",
4
+ "description": "Vue 3 computed ref providing fallback for null/undefined values",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",
@@ -19,11 +19,14 @@
19
19
  "README.md"
20
20
  ],
21
21
  "scripts": {
22
- "build": "unbuild",
23
- "prepublishOnly": "cp README.npm.md README.md && npm run build",
24
- "postpublish": "cp README.github.md README.md"
22
+ "build": "unbuild"
25
23
  },
26
24
  "keywords": [
25
+ "vue",
26
+ "vue3",
27
+ "composition-api",
28
+ "composable",
29
+ "vueuse",
27
30
  "ref",
28
31
  "default",
29
32
  "fallback",