@git-stats-components/vue 1.0.1 → 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.
- package/README.md +37 -23
- package/dist/style.css +1 -1
- package/dist/vue.es.js +656 -0
- package/dist/vue.es.js.map +1 -0
- package/dist/vue.umd.js +2 -0
- package/dist/vue.umd.js.map +1 -0
- package/package.json +1 -1
- package/dist/vue-git-stats.es.js +0 -636
- package/dist/vue-git-stats.es.js.map +0 -1
- package/dist/vue-git-stats.umd.js +0 -2
- package/dist/vue-git-stats.umd.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
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)
|
|
4
7
|
|
|
5
8
|
## Installation
|
|
6
9
|
|
|
@@ -46,14 +49,26 @@ GitHub-style contribution heatmap.
|
|
|
46
49
|
**Example:**
|
|
47
50
|
|
|
48
51
|
```vue
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
<template>
|
|
53
|
+
<ContributionGraph
|
|
54
|
+
data-url="/data/git-stats.json"
|
|
55
|
+
:profile-index="0"
|
|
56
|
+
color-scheme="blue"
|
|
57
|
+
:show-settings="true"
|
|
58
|
+
@day-click="handleDayClick"
|
|
59
|
+
@color-scheme-change="handleColorChange"
|
|
60
|
+
/>
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<script setup>
|
|
64
|
+
const handleDayClick = (data) => {
|
|
65
|
+
console.log('Clicked:', data)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const handleColorChange = (scheme) => {
|
|
69
|
+
console.log('Color scheme:', scheme)
|
|
70
|
+
}
|
|
71
|
+
</script>
|
|
57
72
|
```
|
|
58
73
|
|
|
59
74
|
### StatsBreakdown
|
|
@@ -106,7 +121,9 @@ function calculatePizzas({ projects, commits, years }) {
|
|
|
106
121
|
</template>
|
|
107
122
|
```
|
|
108
123
|
|
|
109
|
-
##
|
|
124
|
+
## Composable
|
|
125
|
+
|
|
126
|
+
Access data and state directly with the `useGitStats` composable:
|
|
110
127
|
|
|
111
128
|
```vue
|
|
112
129
|
<script setup>
|
|
@@ -182,10 +199,9 @@ Then use without imports:
|
|
|
182
199
|
</template>
|
|
183
200
|
```
|
|
184
201
|
|
|
185
|
-
## Nuxt 3
|
|
202
|
+
## Nuxt 3
|
|
186
203
|
|
|
187
204
|
```vue
|
|
188
|
-
<!-- pages/index.vue -->
|
|
189
205
|
<script setup lang="ts">
|
|
190
206
|
import { ContributionGraph, StatsBreakdown } from '@git-stats-components/vue'
|
|
191
207
|
import '@git-stats-components/vue/style.css'
|
|
@@ -207,9 +223,9 @@ const experienceData = [
|
|
|
207
223
|
</template>
|
|
208
224
|
```
|
|
209
225
|
|
|
210
|
-
##
|
|
226
|
+
## Styling
|
|
211
227
|
|
|
212
|
-
Override CSS variables:
|
|
228
|
+
Override CSS variables for custom theming:
|
|
213
229
|
|
|
214
230
|
```css
|
|
215
231
|
.git-contribution-graph {
|
|
@@ -224,11 +240,11 @@ Override CSS variables:
|
|
|
224
240
|
}
|
|
225
241
|
```
|
|
226
242
|
|
|
227
|
-
##
|
|
243
|
+
## Setup
|
|
228
244
|
|
|
229
|
-
|
|
245
|
+
### Quick Setup
|
|
230
246
|
|
|
231
|
-
|
|
247
|
+
Initialize in your project:
|
|
232
248
|
|
|
233
249
|
```bash
|
|
234
250
|
npx @git-stats-components/vue init
|
|
@@ -239,7 +255,7 @@ This creates:
|
|
|
239
255
|
- `.github/workflows/update-git-stats.yml` - GitHub Action workflow
|
|
240
256
|
- `public/data/` - Directory for stats data
|
|
241
257
|
|
|
242
|
-
###
|
|
258
|
+
### Configuration
|
|
243
259
|
|
|
244
260
|
Edit `git-stats.config.js`:
|
|
245
261
|
|
|
@@ -257,16 +273,14 @@ export default {
|
|
|
257
273
|
}
|
|
258
274
|
```
|
|
259
275
|
|
|
260
|
-
###
|
|
276
|
+
### Add Secrets
|
|
261
277
|
|
|
262
278
|
Go to **Settings → Secrets and variables → Actions** and add your tokens.
|
|
263
279
|
|
|
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.
|
|
280
|
+
That's it! The GitHub Action will fetch your stats daily.
|
|
267
281
|
|
|
268
282
|
For more details, see the main [git-stats-components](https://github.com/derekjj/git-stats-components) repository.
|
|
269
283
|
|
|
270
284
|
## License
|
|
271
285
|
|
|
272
|
-
MIT © Derek Johnston
|
|
286
|
+
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}
|