vue-make-destructurable 1.0.1 → 1.0.3
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 +8 -10
- package/README.md +9 -11
- package/README.npm.md +8 -10
- package/banner.svg +1 -1
- package/logo.svg +61 -6
- package/package.json +8 -5
package/README.github.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-make-destructurable</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center">A Vue 3 composition API utility that makes an object destructurable as both an object and an array simultaneously, allowing flexible consumption patterns like composables returning multiple values.</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/v/vue-make-destructurable.svg" alt="npm version" /></a>
|
|
@@ -19,10 +19,6 @@ npm install vue-make-destructurable
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
|
|
23
|
-
|
|
24
|
-
TypeScript Example:
|
|
25
|
-
|
|
26
22
|
```ts
|
|
27
23
|
import { makeDestructurable } from 'vue-make-destructurable'
|
|
28
24
|
|
|
@@ -33,13 +29,15 @@ const obj = makeDestructurable(
|
|
|
33
29
|
{ foo, bar } as const,
|
|
34
30
|
[foo, bar] as const,
|
|
35
31
|
)
|
|
36
|
-
```
|
|
37
32
|
|
|
38
|
-
|
|
33
|
+
// Access as object
|
|
34
|
+
console.log(obj.foo) // { name: 'foo' }
|
|
35
|
+
console.log(obj.bar) // 1024
|
|
39
36
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
// Access as array
|
|
38
|
+
const [a, b] = obj
|
|
39
|
+
console.log(a) // { name: 'foo' }
|
|
40
|
+
console.log(b) // 1024
|
|
43
41
|
```
|
|
44
42
|
|
|
45
43
|
## License
|
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="
|
|
2
|
+
<img src="https://raw.githubusercontent.com/vuefrag/vue-make-destructurable/main/banner.svg" alt="vue-make-destructurable" width="100%" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-make-destructurable</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center">A Vue 3 composition API utility that makes an object destructurable as both an object and an array simultaneously, allowing flexible consumption patterns like composables returning multiple values.</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/v/vue-make-destructurable.svg" alt="npm version" /></a>
|
|
@@ -19,10 +19,6 @@ npm install vue-make-destructurable
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
|
|
23
|
-
|
|
24
|
-
TypeScript Example:
|
|
25
|
-
|
|
26
22
|
```ts
|
|
27
23
|
import { makeDestructurable } from 'vue-make-destructurable'
|
|
28
24
|
|
|
@@ -33,13 +29,15 @@ const obj = makeDestructurable(
|
|
|
33
29
|
{ foo, bar } as const,
|
|
34
30
|
[foo, bar] as const,
|
|
35
31
|
)
|
|
36
|
-
```
|
|
37
32
|
|
|
38
|
-
|
|
33
|
+
// Access as object
|
|
34
|
+
console.log(obj.foo) // { name: 'foo' }
|
|
35
|
+
console.log(obj.bar) // 1024
|
|
39
36
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
// Access as array
|
|
38
|
+
const [a, b] = obj
|
|
39
|
+
console.log(a) // { name: 'foo' }
|
|
40
|
+
console.log(b) // 1024
|
|
43
41
|
```
|
|
44
42
|
|
|
45
43
|
## License
|
package/README.npm.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">vue-make-destructurable</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center"
|
|
7
|
+
<p align="center">A Vue 3 composition API utility that makes an object destructurable as both an object and an array simultaneously, allowing flexible consumption patterns like composables returning multiple values.</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://www.npmjs.com/package/vue-make-destructurable"><img src="https://img.shields.io/npm/v/vue-make-destructurable.svg" alt="npm version" /></a>
|
|
@@ -19,10 +19,6 @@ npm install vue-make-destructurable
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
|
|
23
|
-
|
|
24
|
-
TypeScript Example:
|
|
25
|
-
|
|
26
22
|
```ts
|
|
27
23
|
import { makeDestructurable } from 'vue-make-destructurable'
|
|
28
24
|
|
|
@@ -33,13 +29,15 @@ const obj = makeDestructurable(
|
|
|
33
29
|
{ foo, bar } as const,
|
|
34
30
|
[foo, bar] as const,
|
|
35
31
|
)
|
|
36
|
-
```
|
|
37
32
|
|
|
38
|
-
|
|
33
|
+
// Access as object
|
|
34
|
+
console.log(obj.foo) // { name: 'foo' }
|
|
35
|
+
console.log(obj.bar) // 1024
|
|
39
36
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
// Access as array
|
|
38
|
+
const [a, b] = obj
|
|
39
|
+
console.log(a) // { name: 'foo' }
|
|
40
|
+
console.log(b) // 1024
|
|
43
41
|
```
|
|
44
42
|
|
|
45
43
|
## 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-make-destructurable</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 utility enabling both object and array destructuring</text>
|
|
30
30
|
|
|
31
31
|
<!-- Install command -->
|
|
32
32
|
<g transform="translate(80, 420)">
|
package/logo.svg
CHANGED
|
@@ -1,13 +1,68 @@
|
|
|
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-Utilities" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
5
|
+
<stop offset="0%" style="stop-color:#2c3e50;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-Utilities)"/>
|
|
31
|
+
|
|
32
|
+
<!-- Subtle inner border -->
|
|
33
|
+
<rect x="2" y="2" width="92" height="92" rx="18" fill="none" stroke="#3498db" 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="#3498db" 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
|
+
<!-- Code brackets -->
|
|
45
|
+
<path d="M34 24l-10 10 10 10" fill="none" stroke="#3498db" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
46
|
+
<path d="M62 24l10 10-10 10" fill="none" stroke="#3498db" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
47
|
+
<line x1="57" y1="21" x2="39" y2="47" stroke="#3498db" stroke-width="4" stroke-linecap="round"/>
|
|
48
|
+
</g>
|
|
4
49
|
|
|
5
|
-
<!--
|
|
6
|
-
<
|
|
50
|
+
<!-- Package name (bold, readable) -->
|
|
51
|
+
<text x="48" y="70" text-anchor="middle"
|
|
52
|
+
font-family="ui-monospace, 'SF Mono', Menlo, monospace"
|
|
53
|
+
font-size="6.5"
|
|
54
|
+
font-weight="600"
|
|
55
|
+
fill="#3498db"
|
|
56
|
+
letter-spacing="-0.4">vue-make-destructura...</text>
|
|
7
57
|
|
|
8
|
-
<!--
|
|
9
|
-
<text x="48" y="
|
|
58
|
+
<!-- Category name (smaller, subtle) -->
|
|
59
|
+
<text x="48" y="80" text-anchor="middle"
|
|
60
|
+
font-family="system-ui, -apple-system, sans-serif"
|
|
61
|
+
font-size="6.5"
|
|
62
|
+
font-weight="500"
|
|
63
|
+
fill="#3498db"
|
|
64
|
+
opacity="0.5">Utilities</text>
|
|
10
65
|
|
|
11
66
|
<!-- Bottom accent line -->
|
|
12
|
-
<rect x="
|
|
67
|
+
<rect x="24" y="88" width="48" height="1.5" rx="0.75" fill="#3498db" opacity="0.18"/>
|
|
13
68
|
</svg>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-make-destructurable",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Vue 3
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "Vue 3 utility enabling both object and array destructuring",
|
|
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
|
"destructure",
|
|
28
31
|
"array",
|
|
29
32
|
"object",
|