vue-use-date-format 1.0.3 → 1.0.4

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 +1 -3
  2. package/README.md +2 -4
  3. package/README.npm.md +1 -3
  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-use-date-format</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility for formatting dates reactively using format tokens (YYYY, MM, DD, HH, mm, ss, etc.). Supports localization and custom meridiem.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/v/vue-use-date-format.svg" alt="npm version" /></a>
@@ -19,8 +19,6 @@ npm install vue-use-date-format
19
19
 
20
20
  ## Usage
21
21
 
22
- > **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
23
-
24
22
  ```ts
25
23
  import { useDateFormat } from 'vue-use-date-format'
26
24
  import { ref } from 'vue'
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  <p align="center">
2
- <img src="logo.svg" alt="vue-use-date-format" width="180" />
2
+ <img src="https://raw.githubusercontent.com/vuefrag/vue-use-date-format/main/banner.svg" alt="vue-use-date-format" width="100%" />
3
3
  </p>
4
4
 
5
5
  <h1 align="center">vue-use-date-format</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility for formatting dates reactively using format tokens (YYYY, MM, DD, HH, mm, ss, etc.). Supports localization and custom meridiem.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/v/vue-use-date-format.svg" alt="npm version" /></a>
@@ -19,8 +19,6 @@ npm install vue-use-date-format
19
19
 
20
20
  ## Usage
21
21
 
22
- > **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
23
-
24
22
  ```ts
25
23
  import { useDateFormat } from 'vue-use-date-format'
26
24
  import { ref } from 'vue'
package/README.npm.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <h1 align="center">vue-use-date-format</h1>
6
6
 
7
- <p align="center"></p>
7
+ <p align="center">A Vue 3 composition API utility for formatting dates reactively using format tokens (YYYY, MM, DD, HH, mm, ss, etc.). Supports localization and custom meridiem.</p>
8
8
 
9
9
  <p align="center">
10
10
  <a href="https://www.npmjs.com/package/vue-use-date-format"><img src="https://img.shields.io/npm/v/vue-use-date-format.svg" alt="npm version" /></a>
@@ -19,8 +19,6 @@ npm install vue-use-date-format
19
19
 
20
20
  ## Usage
21
21
 
22
- > **Note:** This example has been hand-crafted for clarity. Original example uses useNow composable - using static date for simplicity
23
-
24
22
  ```ts
25
23
  import { useDateFormat } from 'vue-use-date-format'
26
24
  import { ref } from 'vue'
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-use-date-format</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 reactive date formatting with customizable tokens</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-Time" 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-Time)"/>
31
+
32
+ <!-- Subtle inner border -->
33
+ <rect x="2" y="2" width="92" height="92" rx="18" fill="none" stroke="#e67e22" 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="#e67e22" 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
+ <!-- Clock face -->
45
+ <circle cx="48" cy="34" r="17" fill="none" stroke="#e67e22" stroke-width="4"/>
46
+ <path d="M48 20v14h12" fill="none" stroke="#e67e22" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
47
+ <circle cx="48" cy="34" r="2.5" fill="#e67e22"/>
48
+ </g>
4
49
 
5
- <!-- Primary shape -->
6
- <circle cx="48" cy="42" r="20" fill="#e67e22"/>
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="7"
54
+ font-weight="600"
55
+ fill="#e67e22"
56
+ letter-spacing="-0.35">vue-use-date-format</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="#e67e22" opacity="0.85">Time</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="#e67e22"
64
+ opacity="0.5">Time</text>
10
65
 
11
66
  <!-- Bottom accent line -->
12
- <rect x="28" y="82" width="40" height="2" rx="1" fill="#e67e22" opacity="0.5"/>
67
+ <rect x="24" y="88" width="48" height="1.5" rx="0.75" fill="#e67e22" opacity="0.18"/>
13
68
  </svg>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vue-use-date-format",
3
- "version": "1.0.3",
4
- "description": "Vue 3 composable utility",
3
+ "version": "1.0.4",
4
+ "description": "Vue 3 reactive date formatting with customizable tokens",
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
  "date",
28
31
  "format",
29
32
  "reactive",