vue-make-destructurable 1.0.2 → 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.
Files changed (6) hide show
  1. package/README.github.md +11 -2
  2. package/README.md +12 -3
  3. package/README.npm.md +11 -2
  4. package/banner.svg +1 -1
  5. package/logo.svg +61 -6
  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"></p>
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>
@@ -20,7 +20,7 @@ npm install vue-make-destructurable
20
20
  ## Usage
21
21
 
22
22
  ```ts
23
- import { makeDestructurable } from '@vueuse/core'
23
+ import { makeDestructurable } from 'vue-make-destructurable'
24
24
 
25
25
  const foo = { name: 'foo' }
26
26
  const bar = 1024
@@ -29,6 +29,15 @@ const obj = makeDestructurable(
29
29
  { foo, bar } as const,
30
30
  [foo, bar] as const,
31
31
  )
32
+
33
+ // Access as object
34
+ console.log(obj.foo) // { name: 'foo' }
35
+ console.log(obj.bar) // 1024
36
+
37
+ // Access as array
38
+ const [a, b] = obj
39
+ console.log(a) // { name: 'foo' }
40
+ console.log(b) // 1024
32
41
  ```
33
42
 
34
43
  ## License
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  <p align="center">
2
- <img src="logo.svg" alt="vue-make-destructurable" width="180" />
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"></p>
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>
@@ -20,7 +20,7 @@ npm install vue-make-destructurable
20
20
  ## Usage
21
21
 
22
22
  ```ts
23
- import { makeDestructurable } from '@vueuse/core'
23
+ import { makeDestructurable } from 'vue-make-destructurable'
24
24
 
25
25
  const foo = { name: 'foo' }
26
26
  const bar = 1024
@@ -29,6 +29,15 @@ const obj = makeDestructurable(
29
29
  { foo, bar } as const,
30
30
  [foo, bar] as const,
31
31
  )
32
+
33
+ // Access as object
34
+ console.log(obj.foo) // { name: 'foo' }
35
+ console.log(obj.bar) // 1024
36
+
37
+ // Access as array
38
+ const [a, b] = obj
39
+ console.log(a) // { name: 'foo' }
40
+ console.log(b) // 1024
32
41
  ```
33
42
 
34
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"></p>
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>
@@ -20,7 +20,7 @@ npm install vue-make-destructurable
20
20
  ## Usage
21
21
 
22
22
  ```ts
23
- import { makeDestructurable } from '@vueuse/core'
23
+ import { makeDestructurable } from 'vue-make-destructurable'
24
24
 
25
25
  const foo = { name: 'foo' }
26
26
  const bar = 1024
@@ -29,6 +29,15 @@ const obj = makeDestructurable(
29
29
  { foo, bar } as const,
30
30
  [foo, bar] as const,
31
31
  )
32
+
33
+ // Access as object
34
+ console.log(obj.foo) // { name: 'foo' }
35
+ console.log(obj.bar) // 1024
36
+
37
+ // Access as array
38
+ const [a, b] = obj
39
+ console.log(a) // { name: 'foo' }
40
+ console.log(b) // 1024
32
41
  ```
33
42
 
34
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 composable utility</text>
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="16" fill="#2c3e50"/>
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
- <!-- Primary shape -->
6
- <circle cx="48" cy="42" r="20" fill="#3498db"/>
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
- <!-- Function name -->
9
- <text x="48" y="72" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="7" fill="#3498db" opacity="0.85">Utilities</text>
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="28" y="82" width="40" height="2" rx="1" fill="#3498db" opacity="0.5"/>
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.2",
4
- "description": "Vue 3 composable utility",
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",