vue-get 1.0.0

package/README.github.md

@@ -0,0 +1,41 @@
+<p align="center">
+  <img src="banner.svg" alt="vue-get" width="100%" />
+</p>
+
+<h1 align="center">vue-get</h1>
+
+<p align="center">A Vue 3 composition API utility providing shorthand access to ref values. Supports both simple get(ref) for .value access and get(ref, key) for nested property access.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vue-get"><img src="https://img.shields.io/npm/v/vue-get.svg" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/vue-get"><img src="https://img.shields.io/npm/dm/vue-get.svg" alt="npm downloads" /></a>
+  <a href="https://github.com/vuefrag/vue-get/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-get.svg" alt="license" /></a>
+</p>
+
+## Installation
+
+```bash
+npm install vue-get
+```
+
+## Usage
+
+```ts
+import { get } from 'vue-get';
+```
+
+Shorthand for accessing `ref.value`
+
+```ts
+import { get } from 'vue-get'
+
+const a = ref(42)
+
+console.log(get(a)) // 42
+```
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,41 @@
+<p align="center">
+  <img src="logo.svg" alt="vue-get" width="180" />
+</p>
+
+<h1 align="center">vue-get</h1>
+
+<p align="center">A Vue 3 composition API utility providing shorthand access to ref values. Supports both simple get(ref) for .value access and get(ref, key) for nested property access.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vue-get"><img src="https://img.shields.io/npm/v/vue-get.svg" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/vue-get"><img src="https://img.shields.io/npm/dm/vue-get.svg" alt="npm downloads" /></a>
+  <a href="https://github.com/vuefrag/vue-get/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-get.svg" alt="license" /></a>
+</p>
+
+## Installation
+
+```bash
+npm install vue-get
+```
+
+## Usage
+
+```ts
+import { get } from 'vue-get';
+```
+
+Shorthand for accessing `ref.value`
+
+```ts
+import { get } from 'vue-get'
+
+const a = ref(42)
+
+console.log(get(a)) // 42
+```
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+## License
+
+MIT

package/README.npm.md

@@ -0,0 +1,41 @@
+<p align="center">
+  <img src="logo.svg" alt="vue-get" width="180" />
+</p>
+
+<h1 align="center">vue-get</h1>
+
+<p align="center">A Vue 3 composition API utility providing shorthand access to ref values. Supports both simple get(ref) for .value access and get(ref, key) for nested property access.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vue-get"><img src="https://img.shields.io/npm/v/vue-get.svg" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/vue-get"><img src="https://img.shields.io/npm/dm/vue-get.svg" alt="npm downloads" /></a>
+  <a href="https://github.com/vuefrag/vue-get/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-get.svg" alt="license" /></a>
+</p>
+
+## Installation
+
+```bash
+npm install vue-get
+```
+
+## Usage
+
+```ts
+import { get } from 'vue-get';
+```
+
+Shorthand for accessing `ref.value`
+
+```ts
+import { get } from 'vue-get'
+
+const a = ref(42)
+
+console.log(get(a)) // 42
+```
+
+> Extracted from [VueUse](https://vueuse.org/) for standalone use.
+
+## License
+
+MIT

package/banner.svg

@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640" width="1280" height="640">
+  <defs>
+    <linearGradient id="banner-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1280" height="640" fill="url(#banner-bg)"/>
+
+  <!-- Decorative elements -->
+  <circle cx="200" cy="150" r="120" fill="#3498db" opacity="0.06"/>
+  <circle cx="1150" cy="500" r="100" fill="#3498db" opacity="0.06"/>
+
+  <!-- Top accent bar -->
+  <rect x="0" y="0" width="1280" height="8" fill="#3498db"/>
+
+  <!-- Vuefrag badge -->
+  <g transform="translate(80, 80)">
+    <rect width="140" height="50" rx="8" fill="#3498db"/>
+    <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>
+  </g>
+
+  <!-- Package name -->
+  <text x="80" y="280" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">vue-get</text>
+
+  <!-- Description -->
+  <text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#94a3b8">Vue 3 shorthand for ref.value with optional nested key access</text>
+
+  <!-- Install command -->
+  <g transform="translate(80, 420)">
+    <rect width="340.8" height="60" rx="8" fill="#0f172a"/>
+    <text x="20" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#94a3b8">npm install</text>
+    <text x="200" y="40" font-family="ui-monospace, monospace" font-size="24" fill="#3498db">vue-get</text>
+  </g>
+
+  <!-- Category badge -->
+  <g transform="translate(80, 520)">
+    <rect width="158" height="40" rx="20" fill="#3498db" opacity="0.2"/>
+    <text x="79" y="27" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#3498db">Utilities</text>
+  </g>
+
+  <!-- Category icon (top right corner) -->
+  <g>
+    <path d="M1040 120l-40 40 40 40" fill="none" stroke="#3498db" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><path d="M1120 120l40 40-40 40" fill="none" stroke="#3498db" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><line x1="1105" y1="110" x2="1055" y2="190" stroke="#3498db" stroke-width="10" stroke-linecap="round"/>
+  </g>
+</svg>

package/dist/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const vue = require('vue');
+
+function get(obj, key) {
+  if (key == null)
+    return vue.unref(obj);
+  return vue.unref(obj)[key];
+}
+
+exports.get = get;

package/dist/index.d.cts

@@ -0,0 +1,9 @@
+import { MaybeRef } from 'vue';
+
+/**
+ * Shorthand for accessing `ref.value`
+ */
+declare function get<T>(ref: MaybeRef<T>): T;
+declare function get<T, K extends keyof T>(ref: MaybeRef<T>, key: K): T[K];
+
+export { get };

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+import { MaybeRef } from 'vue';
+
+/**
+ * Shorthand for accessing `ref.value`
+ */
+declare function get<T>(ref: MaybeRef<T>): T;
+declare function get<T, K extends keyof T>(ref: MaybeRef<T>, key: K): T[K];
+
+export { get };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { MaybeRef } from 'vue';
+
+/**
+ * Shorthand for accessing `ref.value`
+ */
+declare function get<T>(ref: MaybeRef<T>): T;
+declare function get<T, K extends keyof T>(ref: MaybeRef<T>, key: K): T[K];
+
+export { get };

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import { unref } from 'vue';
+
+function get(obj, key) {
+  if (key == null)
+    return unref(obj);
+  return unref(obj)[key];
+}
+
+export { get };

package/logo.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="256" height="256">
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1a252f;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="96" height="96" rx="16" fill="url(#bg-grad)"/>
+
+  <!-- Vue badge -->
+  <g transform="translate(8, 8)">
+    <rect width="18" height="9" rx="2" fill="#3498db"/>
+    <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>
+  </g>
+
+  <!-- Category icon -->
+  <g>
+    <path d="M42 20l-8 8 8 8" fill="none" stroke="#3498db" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M54 20l8 8-8 8" fill="none" stroke="#3498db" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><line x1="51" y1="18" x2="45" y2="38" stroke="#3498db" stroke-width="2" stroke-linecap="round"/>
+  </g>
+
+  <!-- Function name - textLength ensures it fits within bounds -->
+  <text x="48" y="56" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="white" textLength="25.2" lengthAdjust="spacingAndGlyphs">Get</text>
+
+  <!-- Category label -->
+  <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>
+
+  <!-- Bottom accent line -->
+  <rect x="28" y="82" width="40" height="2" rx="1" fill="#3498db" opacity="0.5"/>
+</svg>

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "vue-get",
+  "version": "1.0.0",
+  "description": "Vue 3 shorthand for ref.value with optional nested key access",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "logo.svg",
+    "banner.svg"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "prepublishOnly": "cp README.npm.md README.md && npm run build",
+    "postpublish": "cp README.github.md README.md"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vue-3",
+    "composable",
+    "composition-api",
+    "vueuse",
+    "utility",
+    "helper",
+    "utils",
+    "get",
+    "ref",
+    "value",
+    "accessor",
+    "shorthand",
+    "unwrap",
+    "nested"
+  ],
+  "author": "VueFrag",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuefrag/vue-get.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vuefrag/vue-get/issues"
+  },
+  "homepage": "https://github.com/vuefrag/vue-get#readme",
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "unbuild": "^2.0.0",
+    "typescript": "^5.0.0",
+    "vue": "^3.4.0"
+  }
+}