@git-stats-components/vue 1.0.2 → 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.
- package/README.md +40 -23
- package/dist/style.css +1 -1
- package/dist/vue.es.js +317 -297
- package/dist/vue.es.js.map +1 -1
- package/dist/vue.umd.js +1 -1
- package/dist/vue.umd.js.map +1 -1
- package/package.json +71 -71
package/README.md
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
# @git-stats-components/vue
|
|
2
2
|
|
|
3
|
-
Beautiful
|
|
3
|
+
> Beautiful contribution graphs for Vue 3
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@git-stats-components/vue)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
@@ -46,14 +52,26 @@ GitHub-style contribution heatmap.
|
|
|
46
52
|
**Example:**
|
|
47
53
|
|
|
48
54
|
```vue
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
<template>
|
|
56
|
+
<ContributionGraph
|
|
57
|
+
data-url="/data/git-stats.json"
|
|
58
|
+
:profile-index="0"
|
|
59
|
+
color-scheme="blue"
|
|
60
|
+
:show-settings="true"
|
|
61
|
+
@day-click="handleDayClick"
|
|
62
|
+
@color-scheme-change="handleColorChange"
|
|
63
|
+
/>
|
|
64
|
+
</template>
|
|
65
|
+
|
|
66
|
+
<script setup>
|
|
67
|
+
const handleDayClick = (data) => {
|
|
68
|
+
console.log('Clicked:', data)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
const handleColorChange = (scheme) => {
|
|
72
|
+
console.log('Color scheme:', scheme)
|
|
73
|
+
}
|
|
74
|
+
</script>
|
|
57
75
|
```
|
|
58
76
|
|
|
59
77
|
### StatsBreakdown
|
|
@@ -106,7 +124,9 @@ function calculatePizzas({ projects, commits, years }) {
|
|
|
106
124
|
</template>
|
|
107
125
|
```
|
|
108
126
|
|
|
109
|
-
##
|
|
127
|
+
## Composable
|
|
128
|
+
|
|
129
|
+
Access data and state directly with the `useGitStats` composable:
|
|
110
130
|
|
|
111
131
|
```vue
|
|
112
132
|
<script setup>
|
|
@@ -182,10 +202,9 @@ Then use without imports:
|
|
|
182
202
|
</template>
|
|
183
203
|
```
|
|
184
204
|
|
|
185
|
-
## Nuxt 3
|
|
205
|
+
## Nuxt 3
|
|
186
206
|
|
|
187
207
|
```vue
|
|
188
|
-
<!-- pages/index.vue -->
|
|
189
208
|
<script setup lang="ts">
|
|
190
209
|
import { ContributionGraph, StatsBreakdown } from '@git-stats-components/vue'
|
|
191
210
|
import '@git-stats-components/vue/style.css'
|
|
@@ -207,9 +226,9 @@ const experienceData = [
|
|
|
207
226
|
</template>
|
|
208
227
|
```
|
|
209
228
|
|
|
210
|
-
##
|
|
229
|
+
## Styling
|
|
211
230
|
|
|
212
|
-
Override CSS variables:
|
|
231
|
+
Override CSS variables for custom theming:
|
|
213
232
|
|
|
214
233
|
```css
|
|
215
234
|
.git-contribution-graph {
|
|
@@ -224,11 +243,11 @@ Override CSS variables:
|
|
|
224
243
|
}
|
|
225
244
|
```
|
|
226
245
|
|
|
227
|
-
##
|
|
246
|
+
## Setup
|
|
228
247
|
|
|
229
|
-
|
|
248
|
+
### Quick Setup
|
|
230
249
|
|
|
231
|
-
|
|
250
|
+
Initialize in your project:
|
|
232
251
|
|
|
233
252
|
```bash
|
|
234
253
|
npx @git-stats-components/vue init
|
|
@@ -239,7 +258,7 @@ This creates:
|
|
|
239
258
|
- `.github/workflows/update-git-stats.yml` - GitHub Action workflow
|
|
240
259
|
- `public/data/` - Directory for stats data
|
|
241
260
|
|
|
242
|
-
###
|
|
261
|
+
### Configuration
|
|
243
262
|
|
|
244
263
|
Edit `git-stats.config.js`:
|
|
245
264
|
|
|
@@ -257,16 +276,14 @@ export default {
|
|
|
257
276
|
}
|
|
258
277
|
```
|
|
259
278
|
|
|
260
|
-
###
|
|
279
|
+
### Add Secrets
|
|
261
280
|
|
|
262
281
|
Go to **Settings → Secrets and variables → Actions** and add your tokens.
|
|
263
282
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
The GitHub Action will fetch your stats daily and save them to the JSON file. Your components will load this data automatically.
|
|
283
|
+
That's it! The GitHub Action will fetch your stats daily.
|
|
267
284
|
|
|
268
285
|
For more details, see the main [git-stats-components](https://github.com/derekjj/git-stats-components) repository.
|
|
269
286
|
|
|
270
287
|
## License
|
|
271
288
|
|
|
272
|
-
MIT © Derek Johnston
|
|
289
|
+
MIT © [Derek Johnston](https://github.com/derekjj)
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.graph-content-wrapper[data-v-
|
|
1
|
+
.graph-content-wrapper[data-v-3d412399]{justify-items:anchor-center}.git-contribution-graph[data-v-3d412399]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif;font-size:12px;background:transparent;color:#e6edf3;padding:16px;max-width:1200px;margin:0 auto;width:100%}.graph-header[data-v-3d412399]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.contribution-count[data-v-3d412399]{margin:0 0 4px;font-size:16px;font-weight:600}.data-source-text[data-v-3d412399]{color:#7d8590}.data-source-text.is-dummy[data-v-3d412399]{color:#f85149;font-weight:600;background:#f851491a;padding:2px 8px;border-radius:4px}.settings-btn[data-v-3d412399]{background:transparent;border:1px solid #30363d;color:#7d8590;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px}.settings-btn[data-v-3d412399]:hover{background:#21262d;color:#e6edf3}.header-actions[data-v-3d412399]{position:relative}.settings-dropdown[data-v-3d412399]{position:absolute;right:0;top:100%;margin-top:4px;background:#21262d;border:1px solid #30363d;border-radius:6px;padding:4px;z-index:10;min-width:150px}.settings-item[data-v-3d412399]{display:block;width:100%;background:transparent;border:none;color:#e6edf3;padding:8px 12px;text-align:left;cursor:pointer;border-radius:4px}.settings-item[data-v-3d412399]:hover{background:#30363d}.loading-state[data-v-3d412399]{display:flex;align-items:center;justify-content:center;gap:12px;padding:40px;color:#7d8590}.spinner[data-v-3d412399]{width:20px;height:20px;border:2px solid #30363d;border-top-color:#58a6ff;border-radius:50%;animation:spin-3d412399 1s linear infinite}@keyframes spin-3d412399{to{transform:rotate(360deg)}}.months-row[data-v-3d412399]{display:flex;margin-bottom:4px}.month-spacer[data-v-3d412399]{width:27px;flex-shrink:0}.months-container[data-v-3d412399]{display:grid;grid-template-columns:repeat(53,11px);gap:2px;flex:1;margin-left:3px;min-width:0}.month-label[data-v-3d412399]{font-size:11px;color:#7d8590;text-align:left}.grid-container[data-v-3d412399]{display:flex;gap:3px;min-width:fit-content}.day-labels[data-v-3d412399]{display:flex;flex-direction:column;width:24px;gap:2px;flex-shrink:0}.day-label[data-v-3d412399]{height:11px;font-size:9px;color:#7d8590;display:flex;align-items:center}.contribution-grid[data-v-3d412399]{display:flex;gap:2px;flex:1;min-width:0}.contribution-week[data-v-3d412399]{display:flex;flex-direction:column;gap:2px;flex-shrink:0}.contribution-day[data-v-3d412399]{width:11px;height:11px;border-radius:2px;cursor:pointer;outline:1px solid rgba(27,31,36,.06);outline-offset:-1px;flex-shrink:0}.contribution-day.level-0.green[data-v-3d412399]{background-color:#161b22}.contribution-day.level-1.green[data-v-3d412399]{background-color:#0e4429}.contribution-day.level-2.green[data-v-3d412399]{background-color:#006d32}.contribution-day.level-3.green[data-v-3d412399]{background-color:#26a641}.contribution-day.level-4.green[data-v-3d412399]{background-color:#39d353}.contribution-day.level-0.blue[data-v-3d412399]{background-color:#161b22}.contribution-day.level-1.blue[data-v-3d412399]{background-color:#0a3069}.contribution-day.level-2.blue[data-v-3d412399]{background-color:#1f6feb}.contribution-day.level-3.blue[data-v-3d412399]{background-color:#58a6ff}.contribution-day.level-4.blue[data-v-3d412399]{background-color:#79c0ff}.contribution-day.level-0.purple[data-v-3d412399]{background-color:#161b22}.contribution-day.level-1.purple[data-v-3d412399]{background-color:#3b1e6d}.contribution-day.level-2.purple[data-v-3d412399]{background-color:#8250df}.contribution-day.level-3.purple[data-v-3d412399]{background-color:#a475f9}.contribution-day.level-4.purple[data-v-3d412399]{background-color:#d2a8ff}.contribution-day.level-0.orange[data-v-3d412399]{background-color:#161b22}.contribution-day.level-1.orange[data-v-3d412399]{background-color:#7d2d00}.contribution-day.level-2.orange[data-v-3d412399]{background-color:#da7b00}.contribution-day.level-3.orange[data-v-3d412399]{background-color:#ffa348}.contribution-day.level-4.orange[data-v-3d412399]{background-color:#ffb366}.contribution-day[data-v-3d412399]:hover{outline:1px solid #c9d1d9;outline-offset:-1px}.graph-footer[data-v-3d412399]{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.last-updated[data-v-3d412399]{color:#7d8590}.legend[data-v-3d412399]{display:flex;align-items:center;gap:4px}.legend-label[data-v-3d412399]{color:#7d8590}.legend-squares[data-v-3d412399]{display:flex;gap:2px}.legend-squares .contribution-day[data-v-3d412399]{cursor:default}.legend-squares .contribution-day[data-v-3d412399]:hover{outline:none}@media (max-width: 768px){.git-contribution-graph[data-v-3d412399]{padding:12px;font-size:11px;overflow-x:auto}.months-container[data-v-3d412399]{grid-template-columns:repeat(53,10px);gap:1px}.grid-container[data-v-3d412399]{gap:2px}.day-labels[data-v-3d412399]{width:20px}.day-label[data-v-3d412399]{height:10px;font-size:8px}.contribution-grid[data-v-3d412399],.contribution-week[data-v-3d412399]{gap:1px}.contribution-day[data-v-3d412399]{width:10px;height:10px}.settings-btn[data-v-3d412399]{font-size:10px;padding:4px 8px}.contribution-count[data-v-3d412399]{font-size:14px}}@media (max-width: 480px){.graph-header[data-v-3d412399]{flex-direction:column;align-items:flex-start;gap:8px}}.git-stats-breakdown[data-v-31f1bb7a]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif;padding:40px 20px;max-width:1200px;margin:0 auto}.stats-grid[data-v-31f1bb7a]{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:24px}.stat-card[data-v-31f1bb7a]{display:flex;align-items:center;gap:16px;padding:24px;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.stat-card[data-v-31f1bb7a]:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px)}.stat-icon[data-v-31f1bb7a]{font-size:48px;line-height:1;opacity:.9;flex-shrink:0}.stat-content[data-v-31f1bb7a]{flex:1;min-width:0}.stat-value[data-v-31f1bb7a]{font-size:32px;font-weight:700;line-height:1.2;color:#e6edf3;margin-bottom:4px}.stat-label[data-v-31f1bb7a]{font-size:14px;color:#7d8590;text-transform:uppercase;letter-spacing:.5px}.stat-loading[data-v-31f1bb7a]{display:flex;align-items:center;justify-content:center;height:38px}.spinner[data-v-31f1bb7a]{width:24px;height:24px;border:3px solid rgba(255,255,255,.1);border-top-color:#58a6ff;border-radius:50%;animation:spin-31f1bb7a 1s linear infinite}@keyframes spin-31f1bb7a{to{transform:rotate(360deg)}}.stats-footer[data-v-31f1bb7a]{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.data-source[data-v-31f1bb7a]{font-size:12px;color:#7d8590;text-align:center}@media (max-width: 1400px){.git-stats-breakdown[data-v-31f1bb7a]{padding:20px 12px}.stats-grid[data-v-31f1bb7a]{grid-template-columns:repeat(2,1fr);gap:16px}.stat-card[data-v-31f1bb7a]{padding:16px}.stat-icon[data-v-31f1bb7a]{font-size:36px}.stat-value[data-v-31f1bb7a]{font-size:24px}.stat-label[data-v-31f1bb7a]{font-size:12px}}@media (max-width: 480px){.stats-grid[data-v-31f1bb7a]{grid-template-columns:1fr}.stat-card[data-v-31f1bb7a]{flex-direction:column;text-align:center}.stat-content[data-v-31f1bb7a]{width:100%}}:root{--vgs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;--vgs-border-radius: 6px;--vgs-spacing: 16px}.git-contribution-graph *,.git-stats-breakdown *{box-sizing:border-box}.vgs-loading{display:flex;align-items:center;justify-content:center;padding:40px}.vgs-error{color:#f85149;padding:16px;border:1px solid #f85149;border-radius:var(--vgs-border-radius);background:#f851491a}
|