vue-ref-default 1.0.0

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 (11) hide show
  1. package/README.github.md +46 -0
  2. package/README.md +46 -0
  3. package/README.npm.md +46 -0
  4. package/banner.svg +48 -0
  5. package/dist/index.cjs +17 -0
  6. package/dist/index.d.cts +10 -0
  7. package/dist/index.d.mts +10 -0
  8. package/dist/index.d.ts +10 -0
  9. package/dist/index.mjs +15 -0
  10. package/logo.svg +31 -0
  11. package/package.json +62 -0
package/README.github.md ADDED
@@ -0,0 +1,46 @@
1
+ <p align="center">
2
+ <img src="banner.svg" alt="vue-ref-default" width="100%" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-ref-default</h1>
6
+
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
+
9
+ <p align="center">
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>
11
+ <a href="https://www.npmjs.com/package/vue-ref-default"><img src="https://img.shields.io/npm/dm/vue-ref-default.svg" alt="npm downloads" /></a>
12
+ <a href="https://github.com/vuefrag/vue-ref-default/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-ref-default.svg" alt="license" /></a>
13
+ </p>
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install vue-ref-default
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```ts
24
+ import { refDefault } from 'vue-ref-default';
25
+ ```
26
+
27
+ Apply default value to a ref.
28
+
29
+ ```ts
30
+ import { refDefault, useStorage } from 'vue-ref-default'
31
+
32
+ const raw = useStorage('key')
33
+ const state = refDefault(raw, 'default')
34
+
35
+ raw.value = 'hello'
36
+ console.log(state.value) // hello
37
+
38
+ raw.value = undefined
39
+ console.log(state.value) // default
40
+ ```
41
+
42
+ > Extracted from [VueUse](https://vueuse.org/) for standalone use.
43
+
44
+ ## License
45
+
46
+ MIT
package/README.md ADDED
@@ -0,0 +1,46 @@
1
+ <p align="center">
2
+ <img src="logo.svg" alt="vue-ref-default" width="180" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-ref-default</h1>
6
+
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
+
9
+ <p align="center">
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>
11
+ <a href="https://www.npmjs.com/package/vue-ref-default"><img src="https://img.shields.io/npm/dm/vue-ref-default.svg" alt="npm downloads" /></a>
12
+ <a href="https://github.com/vuefrag/vue-ref-default/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-ref-default.svg" alt="license" /></a>
13
+ </p>
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install vue-ref-default
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```ts
24
+ import { refDefault } from 'vue-ref-default';
25
+ ```
26
+
27
+ Apply default value to a ref.
28
+
29
+ ```ts
30
+ import { refDefault, useStorage } from 'vue-ref-default'
31
+
32
+ const raw = useStorage('key')
33
+ const state = refDefault(raw, 'default')
34
+
35
+ raw.value = 'hello'
36
+ console.log(state.value) // hello
37
+
38
+ raw.value = undefined
39
+ console.log(state.value) // default
40
+ ```
41
+
42
+ > Extracted from [VueUse](https://vueuse.org/) for standalone use.
43
+
44
+ ## License
45
+
46
+ MIT
package/README.npm.md ADDED
@@ -0,0 +1,46 @@
1
+ <p align="center">
2
+ <img src="logo.svg" alt="vue-ref-default" width="180" />
3
+ </p>
4
+
5
+ <h1 align="center">vue-ref-default</h1>
6
+
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
+
9
+ <p align="center">
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>
11
+ <a href="https://www.npmjs.com/package/vue-ref-default"><img src="https://img.shields.io/npm/dm/vue-ref-default.svg" alt="npm downloads" /></a>
12
+ <a href="https://github.com/vuefrag/vue-ref-default/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-ref-default.svg" alt="license" /></a>
13
+ </p>
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install vue-ref-default
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```ts
24
+ import { refDefault } from 'vue-ref-default';
25
+ ```
26
+
27
+ Apply default value to a ref.
28
+
29
+ ```ts
30
+ import { refDefault, useStorage } from 'vue-ref-default'
31
+
32
+ const raw = useStorage('key')
33
+ const state = refDefault(raw, 'default')
34
+
35
+ raw.value = 'hello'
36
+ console.log(state.value) // hello
37
+
38
+ raw.value = undefined
39
+ console.log(state.value) // default
40
+ ```
41
+
42
+ > Extracted from [VueUse](https://vueuse.org/) for standalone use.
43
+
44
+ ## License
45
+
46
+ MIT
package/banner.svg ADDED
@@ -0,0 +1,48 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640" width="1280" height="640">
2
+ <defs>
3
+ <linearGradient id="banner-bg" x1="0%" y1="0%" x2="100%" y2="100%">
4
+ <stop offset="0%" style="stop-color:#35495e;stop-opacity:1" />
5
+ <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
6
+ </linearGradient>
7
+ </defs>
8
+
9
+ <!-- Background -->
10
+ <rect width="1280" height="640" fill="url(#banner-bg)"/>
11
+
12
+ <!-- Decorative elements -->
13
+ <circle cx="200" cy="150" r="120" fill="#42b883" opacity="0.06"/>
14
+ <circle cx="1150" cy="500" r="100" fill="#42b883" opacity="0.06"/>
15
+
16
+ <!-- Top accent bar -->
17
+ <rect x="0" y="0" width="1280" height="8" fill="#42b883"/>
18
+
19
+ <!-- Vuefrag badge -->
20
+ <g transform="translate(80, 80)">
21
+ <rect width="140" height="50" rx="8" fill="#42b883"/>
22
+ <text x="70" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="white">Vuefrag</text>
23
+ </g>
24
+
25
+ <!-- Package name -->
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
+
28
+ <!-- Description -->
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
+
31
+ <!-- Install command -->
32
+ <g transform="translate(80, 420)">
33
+ <rect width="456" height="60" rx="8" fill="#0f172a"/>
34
+ <text x="20" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#94a3b8">npm install</text>
35
+ <text x="200" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#42b883">vue-ref-default</text>
36
+ </g>
37
+
38
+ <!-- Category badge -->
39
+ <g transform="translate(80, 520)">
40
+ <rect width="172" height="40" rx="20" fill="#42b883" opacity="0.2"/>
41
+ <text x="86" y="27" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#42b883">Reactivity</text>
42
+ </g>
43
+
44
+ <!-- Category icon (top right corner) -->
45
+ <g>
46
+ <circle cx="1080" cy="150" r="60" fill="none" stroke="#42b883" stroke-width="15"/><circle cx="1080" cy="150" r="25" fill="#42b883"/><path d="M1000 150h-20M1160 150h20M1080 70v-20M1080 230v20" stroke="#42b883" stroke-width="10" stroke-linecap="round"/>
47
+ </g>
48
+ </svg>
package/dist/index.cjs ADDED
@@ -0,0 +1,17 @@
1
+ 'use strict';
2
+
3
+ const vue = require('vue');
4
+
5
+ // @__NO_SIDE_EFFECTS__
6
+ function refDefault(source, defaultValue) {
7
+ return vue.computed({
8
+ get() {
9
+ return source.value ?? defaultValue;
10
+ },
11
+ set(value) {
12
+ source.value = value;
13
+ }
14
+ });
15
+ }
16
+
17
+ exports.refDefault = refDefault;
package/dist/index.d.cts ADDED
@@ -0,0 +1,10 @@
1
+ import { Ref } from 'vue';
2
+
3
+ /**
4
+ * Apply default value to a ref.
5
+ *
6
+ * @__NO_SIDE_EFFECTS__
7
+ */
8
+ declare function refDefault<T>(source: Ref<T | undefined | null>, defaultValue: T): Ref<T>;
9
+
10
+ export { refDefault };
package/dist/index.d.mts ADDED
@@ -0,0 +1,10 @@
1
+ import { Ref } from 'vue';
2
+
3
+ /**
4
+ * Apply default value to a ref.
5
+ *
6
+ * @__NO_SIDE_EFFECTS__
7
+ */
8
+ declare function refDefault<T>(source: Ref<T | undefined | null>, defaultValue: T): Ref<T>;
9
+
10
+ export { refDefault };
package/dist/index.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { Ref } from 'vue';
2
+
3
+ /**
4
+ * Apply default value to a ref.
5
+ *
6
+ * @__NO_SIDE_EFFECTS__
7
+ */
8
+ declare function refDefault<T>(source: Ref<T | undefined | null>, defaultValue: T): Ref<T>;
9
+
10
+ export { refDefault };
package/dist/index.mjs ADDED
@@ -0,0 +1,15 @@
1
+ import { computed } from 'vue';
2
+
3
+ // @__NO_SIDE_EFFECTS__
4
+ function refDefault(source, defaultValue) {
5
+ return computed({
6
+ get() {
7
+ return source.value ?? defaultValue;
8
+ },
9
+ set(value) {
10
+ source.value = value;
11
+ }
12
+ });
13
+ }
14
+
15
+ export { refDefault };
package/logo.svg ADDED
@@ -0,0 +1,31 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="256" height="256">
2
+ <defs>
3
+ <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
4
+ <stop offset="0%" style="stop-color:#35495e;stop-opacity:1" />
5
+ <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
6
+ </linearGradient>
7
+ </defs>
8
+
9
+ <!-- Background -->
10
+ <rect width="96" height="96" rx="16" fill="url(#bg-grad)"/>
11
+
12
+ <!-- Vue badge -->
13
+ <g transform="translate(8, 8)">
14
+ <rect width="18" height="9" rx="2" fill="#42b883"/>
15
+ <text x="9" y="6.8" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="4.5" font-weight="700" fill="white">VUE</text>
16
+ </g>
17
+
18
+ <!-- Category icon -->
19
+ <g>
20
+ <circle cx="48" cy="28" r="12" fill="none" stroke="#42b883" stroke-width="3"/><circle cx="48" cy="28" r="5" fill="#42b883"/><path d="M36 28h-4M60 28h4M48 16v-4M48 40v4" stroke="#42b883" stroke-width="2" stroke-linecap="round"/>
21
+ </g>
22
+
23
+ <!-- Function name - textLength ensures it fits within bounds -->
24
+ <text x="48" y="57" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="white" textLength="66" lengthAdjust="spacingAndGlyphs">Ref Default</text>
25
+
26
+ <!-- Category label -->
27
+ <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>
28
+
29
+ <!-- Bottom accent line -->
30
+ <rect x="28" y="82" width="40" height="2" rx="1" fill="#42b883" opacity="0.5"/>
31
+ </svg>
package/package.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "name": "vue-ref-default",
3
+ "version": "1.0.0",
4
+ "description": "Vue 3 computed ref providing fallback for null/undefined values",
5
+ "main": "dist/index.cjs",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/index.mjs",
11
+ "require": "./dist/index.cjs",
12
+ "types": "./dist/index.d.ts"
13
+ }
14
+ },
15
+ "files": [
16
+ "dist",
17
+ "logo.svg",
18
+ "banner.svg"
19
+ ],
20
+ "scripts": {
21
+ "build": "unbuild",
22
+ "prepublishOnly": "cp README.npm.md README.md && npm run build",
23
+ "postpublish": "cp README.github.md README.md"
24
+ },
25
+ "keywords": [
26
+ "vue",
27
+ "vue3",
28
+ "vue-3",
29
+ "composable",
30
+ "composition-api",
31
+ "vueuse",
32
+ "reactive",
33
+ "reactivity",
34
+ "computed",
35
+ "ref",
36
+ "state",
37
+ "default",
38
+ "fallback",
39
+ "nullable",
40
+ "value",
41
+ "nullish-coalescing",
42
+ "refDefault"
43
+ ],
44
+ "author": "VueFrag",
45
+ "license": "MIT",
46
+ "repository": {
47
+ "type": "git",
48
+ "url": "git+https://github.com/vuefrag/vue-ref-default.git"
49
+ },
50
+ "bugs": {
51
+ "url": "https://github.com/vuefrag/vue-ref-default/issues"
52
+ },
53
+ "homepage": "https://github.com/vuefrag/vue-ref-default#readme",
54
+ "peerDependencies": {
55
+ "vue": ">=3.0.0"
56
+ },
57
+ "devDependencies": {
58
+ "unbuild": "^2.0.0",
59
+ "typescript": "^5.0.0",
60
+ "vue": "^3.4.0"
61
+ }
62
+ }