vue-is-defined 1.0.5 → 1.0.7

package/README.md

@@ -1,10 +1,10 @@
 <p align="center">
-  <img src="logo.svg" alt="vue-is-defined" width="180" />
+  <img src="https://raw.githubusercontent.com/vuefrag/vue-is-defined/main/banner.svg" alt="vue-is-defined" width="100%" />
 </p>
 
 <h1 align="center">vue-is-defined</h1>
 
-<p align="center"></p>
+<p align="center">A Vue 3 composition API type guard utility that checks if a ref's value is defined (not null or undefined), with proper TypeScript type narrowing for safe property access.</p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/vue-is-defined"><img src="https://img.shields.io/npm/v/vue-is-defined.svg" alt="npm version" /></a>
@@ -20,12 +20,16 @@ npm install vue-is-defined
 ## Usage
 
 ```ts
-import { isDefined } from '@vueuse/core'
+import { isDefined } from 'vue-is-defined'
+import { ref, computed } from 'vue'
 
-const example = ref(Math.random() ? 'example' : undefined) // Ref<string | undefined>
+const value = ref<string | undefined>('hello')
+const defined = isDefined(value)
 
-if (isDefined(example))
-  example // Ref<string>
+console.log(defined.value) // true
+
+value.value = undefined
+console.log(defined.value) // false
 ```
 
 ## License

package/banner.svg

@@ -26,7 +26,7 @@
   <text x="80" y="280" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">vue-is-defined</text>
 
   <!-- Description -->
-  <text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 composable utility</text>
+  <text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 type guard checking if ref value is not null/undefined</text>
 
   <!-- Install command -->
   <g transform="translate(80, 420)">

package/logo.svg

@@ -1,13 +1,68 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <!-- Premium background with depth -->
+  <defs>
+    <linearGradient id="logo-bg-Utilities" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#1e2936;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0f1419;stop-opacity:1" />
+    </linearGradient>
+    <filter id="logo-shadow">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
+      <feOffset dx="0" dy="1" result="offsetblur"/>
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.3"/>
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
   <!-- Background -->
-  <rect width="96" height="96" rx="16" fill="#2c3e50"/>
+  <rect width="96" height="96" rx="20" fill="url(#logo-bg-Utilities)"/>
+
+  <!-- Subtle inner border -->
+  <rect x="2" y="2" width="92" height="92" rx="18" fill="none" stroke="#3498db" stroke-width="0.5" opacity="0.12"/>
+
+  <!-- Vuefrag badge (top, smaller and moved right) -->
+  <g filter="url(#logo-shadow)">
+    <rect x="10" y="7" width="26" height="9" rx="2.5" fill="#3498db" opacity="0.8"/>
+    <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>
+  </g>
+
+  <!-- Category icon (centered, balanced size) -->
+  <g filter="url(#glow)">
+    
+      <!-- Code brackets -->
+      <path d="M34 24l-10 10 10 10" fill="none" stroke="#3498db" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M62 24l10 10-10 10" fill="none" stroke="#3498db" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <line x1="57" y1="21" x2="39" y2="47" stroke="#3498db" stroke-width="4" stroke-linecap="round"/>
+  </g>
 
-  <!-- Primary shape -->
-  <circle cx="48" cy="42" r="20" fill="#3498db"/>
+  <!-- Package name (bold, readable) -->
+  <text x="48" y="70" text-anchor="middle"
+        font-family="ui-monospace, 'SF Mono', Menlo, monospace"
+        font-size="8"
+        font-weight="600"
+        fill="#3498db"
+        letter-spacing="-0.3">vue-is-defined</text>
 
-  <!-- Function name -->
-  <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>
+  <!-- Category name (smaller, subtle) -->
+  <text x="48" y="80" text-anchor="middle"
+        font-family="system-ui, -apple-system, sans-serif"
+        font-size="6.5"
+        font-weight="500"
+        fill="#3498db"
+        opacity="0.5">Utilities</text>
 
   <!-- Bottom accent line -->
-  <rect x="28" y="82" width="40" height="2" rx="1" fill="#3498db" opacity="0.5"/>
+  <rect x="24" y="88" width="48" height="1.5" rx="0.75" fill="#3498db" opacity="0.18"/>
 </svg>

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "vue-is-defined",
-  "version": "1.0.5",
-  "description": "Vue 3 composable utility",
+  "version": "1.0.7",
+  "description": "Vue 3 type guard checking if ref value is not null/undefined",
+  "readme": "README.md",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -19,11 +20,14 @@
     "README.md"
   ],
   "scripts": {
-    "build": "unbuild",
-    "prepublishOnly": "cp README.npm.md README.md && npm run build",
-    "postpublish": "cp README.github.md README.md"
+    "build": "unbuild"
   },
   "keywords": [
+    "vue",
+    "vue3",
+    "composition-api",
+    "composable",
+    "vueuse",
     "defined",
     "nullish",
     "type-guard",

package/README.github.md

@@ -1,35 +0,0 @@
-<p align="center">
-  <img src="banner.svg" alt="vue-is-defined" width="100%" />
-</p>
-
-<h1 align="center">vue-is-defined</h1>
-
-<p align="center"></p>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/vue-is-defined"><img src="https://img.shields.io/npm/v/vue-is-defined.svg" alt="npm version" /></a>
-  <a href="https://www.npmjs.com/package/vue-is-defined"><img src="https://img.shields.io/npm/dm/vue-is-defined.svg" alt="npm downloads" /></a>
-</p>
-
-## Installation
-
-```bash
-npm install vue-is-defined
-```
-
-## Usage
-
-```ts
-import { isDefined } from '@vueuse/core'
-
-const example = ref(Math.random() ? 'example' : undefined) // Ref<string | undefined>
-
-if (isDefined(example))
-  example // Ref<string>
-```
-
-## License
-
-MIT
-
-Extracted from [VueUse](https://vueuse.org/) for standalone use.

package/README.npm.md

@@ -1,35 +0,0 @@
-<p align="center">
-  <img src="logo.svg" alt="vue-is-defined" width="180" />
-</p>
-
-<h1 align="center">vue-is-defined</h1>
-
-<p align="center"></p>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/vue-is-defined"><img src="https://img.shields.io/npm/v/vue-is-defined.svg" alt="npm version" /></a>
-  <a href="https://www.npmjs.com/package/vue-is-defined"><img src="https://img.shields.io/npm/dm/vue-is-defined.svg" alt="npm downloads" /></a>
-</p>
-
-## Installation
-
-```bash
-npm install vue-is-defined
-```
-
-## Usage
-
-```ts
-import { isDefined } from '@vueuse/core'
-
-const example = ref(Math.random() ? 'example' : undefined) // Ref<string | undefined>
-
-if (isDefined(example))
-  example // Ref<string>
-```
-
-## License
-
-MIT
-
-Extracted from [VueUse](https://vueuse.org/) for standalone use.