feat: support contribution

.github/workflows/publish.yml

@@ -55,9 +55,14 @@ jobs:
           scope: '@devlive-community'
       - run: yarn install
       - run: yarn build
+
+      - name: Update package name
+        run: |
+          sed -i 's/"name": "view-shadcn-ui"/"name": "@devlive-community\/view-shadcn-ui"/' package.json
+
       - run: |
-          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> .npmrc
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GH_PACKAGE_TOKEN }}" >> .npmrc
           echo "@devlive-community:registry=https://npm.pkg.github.com" >> .npmrc
-          npm publish
+          yarn publish --non-interactive --access public
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_TOKEN }}

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 2024.5.4
+
+#### Core
+
+- fix: fix ci scope causing publishing failure
+
+#### Contribution
+
+- feat: support tooltip
+- feat: support showLegend
+- feat: support showWeek
+- feat: support showMonth
+- feat: support cellSize and cellGap
+- feat: support year
+- feat: support custom cell
+
 ### 2024.5.3 (2024-12-23)
 
 #### Core

configure/generate/component_doc.py

@@ -238,7 +238,8 @@ def is_enum_type(type_string):
 
 def generate_random_default(prop):
     if prop["type"] == "number":
-        value = int(prop["default"]) == 0 and 100 or int(prop["default"])
+        str = prop["default"].replace("\n", "").replace("}", "")
+        value = int(str) == 0 and 100 or int(str)
         return random.randint(1, value)
     elif prop["type"] == "string":
         if prop["default"].startswith('#'):  # Color

docs/.vitepress/config.js

@@ -66,10 +66,10 @@ export default {
                 activeMatch: '/components'
             },
             {
-                text: '2024.5.3 <span class="VPBadge danger" style="margin-left: -18px; position: absolute; bottom: 38px;">Latest</span>',
+                text: '2024.5.4 <span class="VPBadge danger" style="margin-left: -18px; position: absolute; bottom: 38px;">Latest</span>',
                 items: [
                     {
-                        text: 'CHANGELOG <span class="VPBadge tip">2024.5.3</span>',
+                        text: 'CHANGELOG <span class="VPBadge tip">2024.5.4</span>',
                         link: '/changelog',
                         activeMatch: '/changelog'
                     },
@@ -197,7 +197,8 @@ export default {
                         {text: 'Back Top', link: 'view/back-top', icon: '/components/view/back-top.svg', version: '2024.5.1'},
                         {text: 'Loading Bar', link: 'view/loading-bar', icon: '/components/view/loading-bar.svg', version: '2024.5.2'},
                         {text: 'Float Button', link: 'view/float-button', icon: '/components/view/float-button.svg', version: '2024.5.2'},
-                        {text: 'QrCode', link: 'view/qr-code', icon: '/components/view/qrcode.svg', version: '2024.5.3'}
+                        {text: 'QrCode', link: 'view/qr-code', icon: '/components/view/qrcode.svg', version: '2024.5.3'},
+                        {text: 'Contributor', link: 'view/contribution', icon: '/components/view/contribution.svg', version: '2024.5.4'},
                     ]
 
                     return {

docs/components/view/contribution.md

@@ -0,0 +1,254 @@
+---
+title: Shadcn Contribution
+---
+
+# Introduction
+
+This document describes the features and usage of the ShadcnContribution component.
+
+## Usage
+
+::: raw
+
+<CodeRunner title="Data">
+    <ShadcnContribution :data="data" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" />
+</template>
+```
+
+:::
+
+## Color scheme
+
+::: raw
+
+<CodeRunner title="Color scheme">
+    <ShadcnContribution :data="data" :colorScheme="colorScheme" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" :colorScheme="colorScheme" />
+</template>
+```
+
+:::
+
+## Year count
+
+::: raw
+
+<CodeRunner title="Year count">
+    <ShadcnContribution :data="data" :yearCount="1" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" :yearCount="1" />
+</template>
+```
+
+:::
+
+## Show legend
+
+::: raw
+
+<CodeRunner title="Show legend">
+    <ShadcnContribution :data="data" showLegend />
+    <ShadcnContribution :data="data" :showLegend="false" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" showLegend />
+    <ShadcnContribution :data="data" :showLegend="false" />
+</template>
+```
+
+:::
+
+## Show week
+
+::: raw
+
+<CodeRunner title="Show week">
+    <ShadcnContribution :data="data" showWeek />
+    <ShadcnContribution :data="data" :showWeek="false" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" showWeek />
+    <ShadcnContribution :data="data" :showWeek="false" />
+</template>
+```
+
+:::
+
+## Show month
+
+::: raw
+
+<CodeRunner title="Show month">
+    <ShadcnContribution :data="data" showMonth />
+    <ShadcnContribution :data="data" :showMonth="false" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" showMonth />
+    <ShadcnContribution :data="data" :showMonth="false" />
+</template>
+```
+
+:::
+
+## Cell size
+
+::: raw
+
+<CodeRunner title="Cell size">
+    <ShadcnContribution :data="data" :cellSize="15" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" :cellSize="15" />
+</template>
+```
+
+:::
+
+## Cell gap
+
+::: raw
+
+<CodeRunner title="Cell gap">
+    <ShadcnContribution :data="data" :cellGap="4" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" :cellGap="4" />
+</template>
+```
+
+:::
+
+## Year
+
+::: raw
+
+<CodeRunner title="Year">
+    <ShadcnContribution :data="data" :year="2023" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnContribution :data="data" :year="2023" />
+</template>
+```
+
+:::
+
+## Contribution Props
+
+<ApiTable title="Props"
+    :headers="['Attribute', 'Description', 'Type', 'Default Value', 'List']"
+    :columns="[
+        ['data', 'data value', 'Array<ContributionOption>', '-', '-'],
+        ['colorScheme', 'colorScheme value', 'Array<string>', '\[#ebedf0, #9be9a8, #40c463, #30a14e, #216e39\]', '-'],
+        ['yearCount', 'yearCount value', 'number', '1', '-'],
+        ['showLegend', 'showLegend value', 'boolean', 'true', '-'],
+        ['showWeek', 'showWeek value', 'boolean', 'true', '-'],
+        ['showMonth', 'showMonth value', 'boolean', 'true', '-'],
+        ['cellSize', 'cellSize value', 'number', '16', '-'],
+        ['cellGap', 'cellGap value', 'number', '4', '-'],
+        ['year', 'year value', 'number', '-', '-']
+    ]">
+</ApiTable>
+
+## Contribution Events
+
+<ApiTable title="Events"
+    :headers="['Event', 'Description', 'Callback Parameters']"
+    :columns="[
+        ['on-select', 'Triggered when on select', 'value: ContributionOption']
+    ]">
+</ApiTable>
+
+## Contribution Slots
+
+<ApiTable title="Slots"
+    :headers="['Slot', 'Description', 'Parameters']"
+    :columns="[
+        ['cell', 'Slot for cell', 'ContributionCellSlotProps']
+    ]">
+</ApiTable>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const data = ref([
+  { date: '2024-01-01', count: 2 },
+  { date: '2024-01-02', count: 5 },
+  { date: '2024-01-03', count: 8 },
+  { date: '2024-01-04', count: 12 },
+  { date: '2024-01-05', count: 3 },
+  { date: '2024-01-06', count: 0 },
+  { date: '2024-01-07', count: 6 }
+])
+
+const colorScheme = [
+  '#ebedf0',
+  '#bfd4f2',
+  '#7fa8ed',
+  '#4775c9',
+  '#254e89'
+]
+
+const handleSelect = (data: any) => {
+  console.log(`Selected date: ${ data.date }, contributions: ${ data.count }`)
+}
+</script>

package.json

@@ -12,7 +12,7 @@
   "author": "devlive-community",
   "homepage": "https://view-shadcn-ui.devlive.org",
   "private": false,
-  "version": "2024.5.3",
+  "version": "2024.5.4",
   "license": "MIT",
   "main": "./dist/view-shadcn.umd.ts",
   "module": "./dist/view-shadcn.es.ts",

packages/index.ts

@@ -97,6 +97,7 @@ import { ShadcnTimePicker } from '@/ui/time-picker'
 import { ShadcnColorPicker } from '@/ui/color-picker'
 import { ShadcnDatePicker } from '@/ui/date-picker'
 import { ShadcnCron } from '@/ui/cron'
+import { ShadcnContribution } from '@/ui/contribution'
 
 let components = [
     ShadcnButton,
@@ -190,7 +191,8 @@ let components = [
     ShadcnTimePicker,
     ShadcnColorPicker,
     ShadcnDatePicker,
-    ShadcnCron
+    ShadcnCron,
+    ShadcnContribution
 ]
 
 interface InstallOptions
@@ -320,6 +322,7 @@ export { ShadcnTimePicker } from '@/ui/time-picker'
 export { ShadcnColorPicker } from '@/ui/color-picker'
 export { ShadcnDatePicker } from '@/ui/date-picker'
 export { ShadcnCron } from '@/ui/cron'
+export { ShadcnContribution } from '@/ui/contribution'
 
 // Export functions
 export { fnToString, fnToFunction } from '@/utils/formatter'