diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml index 16ebaaec..c614d0b5 100644 --- a/.github/workflows/publish.yaml +++ b/.github/workflows/publish.yaml @@ -11,17 +11,50 @@ on: - dev paths: - 'apps/www/**' + pull_request_target: + types: + # When a created pull request from forked repo, it will be comment 'Should deploy to add label' + - opened + # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages + - labeled + paths: + - 'apps/www/**' + # Allows you to run this workflow manually from the Actions tab + # eslint-disable-next-line yml/no-empty-mapping-value + workflow_dispatch: + +permissions: + # default contents: read & write (in forked repos, only read) + contents: write + # default deployments: read & write (in forked repos, only read) + deployments: write + # default pull-requests: read & write (in forked repos, only read) + pull-requests: write jobs: publish: runs-on: ubuntu-latest - permissions: - contents: read - deployments: write name: Publish to Cloudflare Pages + # push event in main branch + # workflow_dispatch event + # pull_request event from not forked repo + # pull_request_target event with label "🚀request-deploy" from forked repo + if: ${{ + github.event_name == 'push' || + github.event_name == 'workflow_dispatch' || + (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false) || + (github.event_name == 'pull_request_target' && + github.event.action == 'labeled' && + github.event.pull_request.head.repo.fork == true && + contains(github.event.label.name, '🚀request-deploy')) + }} + steps: - name: Checkout uses: actions/checkout@v3 + with: + ref: ${{ github.event.pull_request.head.sha || github.ref }} + fetch-depth: 0 # Run a build step here - name: Setup Node.js environment @@ -56,7 +89,7 @@ jobs: # Run a action to publish docs - name: Publish to Cloudflare Pages - uses: cloudflare/pages-action@v1.5.0 + uses: zernonia/cloudflare-pages-action@v0.0.7 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} @@ -66,7 +99,20 @@ jobs: gitHubToken: ${{ secrets.GITHUB_TOKEN }} # Optional: Switch what branch you are publishing to. # By default this will be the branch which triggered this workflow - # branch: main + branch: ${{ github.ref == 'refs/heads/dev' && 'dev' || format('refs/pull/{0}/merge', github.event.number) }} # Optional: Change the working directory workingDirectory: apps/www wranglerVersion: '3' + + - name: Remove label + if: ${{ github.event_name == 'pull_request_target' && contains(github.event.label.name, '🚀request-deploy') }} + uses: actions/github-script@v6 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: ['🚀request-deploy'] + }) diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts index 42998819..0e2a62c3 100644 --- a/apps/www/.vitepress/config.mts +++ b/apps/www/.vitepress/config.mts @@ -3,9 +3,17 @@ import { defineConfig } from 'vitepress' import Icons from 'unplugin-icons/vite' import tailwind from 'tailwindcss' import autoprefixer from 'autoprefixer' +import { createCssVariablesTheme } from 'shikiji' import { siteConfig } from './theme/config/site' import ComponentPreviewPlugin from './theme/plugins/previewer' +const cssVariables = createCssVariablesTheme({ + name: 'css-variables', + variablePrefix: '--shiki-', + variableDefaults: {}, + fontStyle: true, +}) + // https://vitepress.dev/reference/site-config export default defineConfig({ title: siteConfig.name, @@ -50,7 +58,7 @@ export default defineConfig({ srcDir: path.resolve(__dirname, '../src'), markdown: { - theme: 'css-variables', + theme: cssVariables, config(md) { md.use(ComponentPreviewPlugin) }, diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue index 8653daa9..7620e0da 100644 --- a/apps/www/.vitepress/theme/components/ComponentPreview.vue +++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue @@ -52,7 +52,7 @@ const { style } = useConfigStore()
import('../src/lib/registry/default/example/DatePickerWithRange.vue').then(m => m.default), files: ['../src/lib/registry/default/example/DatePickerWithRange.vue'], }, + DateTimePickerDemo: { + name: 'DateTimePickerDemo', + type: 'components:example', + registryDependencies: ['utils', 'button', 'calendar', 'popover'], + component: () => import('../src/lib/registry/default/example/DateTimePickerDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/DateTimePickerDemo.vue'], + }, DialogCustomCloseButton: { name: 'DialogCustomCloseButton', type: 'components:example', @@ -499,6 +506,13 @@ export const Index = { component: () => import('../src/lib/registry/default/example/RadioGroupForm.vue').then(m => m.default), files: ['../src/lib/registry/default/example/RadioGroupForm.vue'], }, + RangePickerWithSlot: { + name: 'RangePickerWithSlot', + type: 'components:example', + registryDependencies: ['utils', 'button', 'calendar', 'popover'], + component: () => import('../src/lib/registry/default/example/RangePickerWithSlot.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/RangePickerWithSlot.vue'], + }, ScrollAreaDemo: { name: 'ScrollAreaDemo', type: 'components:example', @@ -681,6 +695,48 @@ export const Index = { component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default), files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'], }, + ToggleGroupDemo: { + name: 'ToggleGroupDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/default/example/ToggleGroupDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/ToggleGroupDemo.vue'], + }, + ToggleGroupDisabledDemo: { + name: 'ToggleGroupDisabledDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue'], + }, + ToggleGroupLargeDemo: { + name: 'ToggleGroupLargeDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/default/example/ToggleGroupLargeDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/ToggleGroupLargeDemo.vue'], + }, + ToggleGroupOutlineDemo: { + name: 'ToggleGroupOutlineDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue'], + }, + ToggleGroupSingleDemo: { + name: 'ToggleGroupSingleDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/default/example/ToggleGroupSingleDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/ToggleGroupSingleDemo.vue'], + }, + ToggleGroupSmallDemo: { + name: 'ToggleGroupSmallDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/default/example/ToggleGroupSmallDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/ToggleGroupSmallDemo.vue'], + }, ToggleItalicDemo: { name: 'ToggleItalicDemo', type: 'components:example', @@ -1194,6 +1250,13 @@ export const Index = { component: () => import('../src/lib/registry/new-york/example/DatePickerWithRange.vue').then(m => m.default), files: ['../src/lib/registry/new-york/example/DatePickerWithRange.vue'], }, + DateTimePickerDemo: { + name: 'DateTimePickerDemo', + type: 'components:example', + registryDependencies: ['utils', 'button', 'calendar', 'popover'], + component: () => import('../src/lib/registry/new-york/example/DateTimePickerDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/DateTimePickerDemo.vue'], + }, DialogCustomCloseButton: { name: 'DialogCustomCloseButton', type: 'components:example', @@ -1334,6 +1397,13 @@ export const Index = { component: () => import('../src/lib/registry/new-york/example/RadioGroupForm.vue').then(m => m.default), files: ['../src/lib/registry/new-york/example/RadioGroupForm.vue'], }, + RangePickerWithSlot: { + name: 'RangePickerWithSlot', + type: 'components:example', + registryDependencies: ['utils', 'button', 'calendar', 'popover'], + component: () => import('../src/lib/registry/new-york/example/RangePickerWithSlot.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/RangePickerWithSlot.vue'], + }, ScrollAreaDemo: { name: 'ScrollAreaDemo', type: 'components:example', @@ -1516,6 +1586,48 @@ export const Index = { component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default), files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'], }, + ToggleGroupDemo: { + name: 'ToggleGroupDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/new-york/example/ToggleGroupDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/ToggleGroupDemo.vue'], + }, + ToggleGroupDisabledDemo: { + name: 'ToggleGroupDisabledDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue'], + }, + ToggleGroupLargeDemo: { + name: 'ToggleGroupLargeDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue'], + }, + ToggleGroupOutlineDemo: { + name: 'ToggleGroupOutlineDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue'], + }, + ToggleGroupSingleDemo: { + name: 'ToggleGroupSingleDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue'], + }, + ToggleGroupSmallDemo: { + name: 'ToggleGroupSmallDemo', + type: 'components:example', + registryDependencies: ['toggle-group'], + component: () => import('../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue'], + }, ToggleItalicDemo: { name: 'ToggleItalicDemo', type: 'components:example', diff --git a/apps/www/package.json b/apps/www/package.json index e4462ead..83ca3d93 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -1,7 +1,7 @@ { "name": "www", "type": "module", - "version": "0.8.6", + "version": "0.8.7", "files": [ "dist" ], @@ -15,28 +15,28 @@ "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts" }, "dependencies": { - "@formkit/auto-animate": "^0.8.0", + "@formkit/auto-animate": "^0.8.1", "@morev/vue-transitions": "^2.3.6", "@radix-icons/vue": "^1.0.0", "@stackblitz/sdk": "^1.9.0", - "@tanstack/vue-table": "^8.10.7", - "@unovis/ts": "^1.2.3", - "@unovis/vue": "1.3.0-beta.3", - "@vee-validate/zod": "^4.12.3", - "@vueuse/core": "^10.5.0", + "@tanstack/vue-table": "^8.11.6", + "@unovis/ts": "^1.3.1", + "@unovis/vue": "^1.3.1", + "@vee-validate/zod": "^4.12.4", + "@vueuse/core": "^10.7.2", "class-variance-authority": "^0.7.0", - "clsx": "^2.0.0", + "clsx": "^2.1.0", "codesandbox": "^2.2.3", "date-fns": "^2.30.0", "embla-carousel": "8.0.0-rc19", "embla-carousel-autoplay": "8.0.0-rc19", "embla-carousel-vue": "8.0.0-rc19", "lucide-vue-next": "^0.276.0", - "radix-vue": "^1.2.5", + "radix-vue": "^1.3.2", "tailwindcss-animate": "^1.0.7", "v-calendar": "^3.1.2", - "vee-validate": "4.12.3", - "vue": "^3.3.7", + "vee-validate": "4.12.4", + "vue": "^3.4.14", "vue-wrap-balancer": "^1.1.3", "zod": "^3.22.4" }, @@ -47,22 +47,23 @@ "@iconify/vue": "^4.1.1", "@types/lodash.template": "^4.5.2", "@types/node": "^20.8.10", - "@vitejs/plugin-vue": "^4.4.0", - "@vitejs/plugin-vue-jsx": "^3.0.2", - "@vue/compiler-core": "^3.3.7", - "@vue/compiler-dom": "^3.3.7", + "@vitejs/plugin-vue": "^5.0.3", + "@vitejs/plugin-vue-jsx": "^3.1.0", + "@vue/compiler-core": "^3.4.14", + "@vue/compiler-dom": "^3.4.14", "@vue/tsconfig": "^0.5.1", "autoprefixer": "^10.4.16", "lodash.template": "^4.5.0", - "pathe": "^1.1.1", + "pathe": "^1.1.2", "rimraf": "^5.0.5", - "tailwind-merge": "^2.0.0", - "tailwindcss": "^3.3.5", + "shikiji": "^0.10.0-beta.2", + "tailwind-merge": "^2.2.0", + "tailwindcss": "^3.4.1", "tsx": "^4.7.0", - "typescript": "^5.2.2", + "typescript": "^5.3.3", "unplugin-icons": "^0.17.1", - "vite": "^4.5.0", - "vitepress": "^1.0.0-rc.24", + "vite": "^5.0.11", + "vitepress": "^1.0.0-rc.37", "vue-tsc": "^1.8.27" } } diff --git a/apps/www/src/content/docs/about.md b/apps/www/src/content/docs/about.md index 21e9e6be..9e48890a 100644 --- a/apps/www/src/content/docs/about.md +++ b/apps/www/src/content/docs/about.md @@ -5,7 +5,7 @@ description: Powered by amazing open source projects. ## About -[shadcn-vue](https://shadcn-vuee.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue). +[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue). ## Credits @@ -17,4 +17,4 @@ description: Powered by amazing open source projects. ## License -MIT © [shadcn](https://shadcn.com) & [radix-vue](https://github.com/radix-vue) \ No newline at end of file +MIT © [shadcn](https://shadcn.com) & [radix-vue](https://github.com/radix-vue) diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md index ccdc9971..ab0dff47 100644 --- a/apps/www/src/content/docs/components/calendar.md +++ b/apps/www/src/content/docs/components/calendar.md @@ -56,5 +56,40 @@ import { Calendar } from '@/components/ui/calendar' ``` -See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information. +The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information. +### Slots + +The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely : + +- `day-content` +- `day-popover` +- `dp-footer` +- `footer` +- `header-title-wrapper` +- `header-title` +- `header-prev-button` +- `header-next-button` +- `nav` +- `nav-prev-button` +- `nav-next-button` +- `page` +- `time-header` + +Example using the `day-content` slot: + +```vue + + + +``` \ No newline at end of file diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md index c1a34a73..9ca1b11d 100644 --- a/apps/www/src/content/docs/components/carousel.md +++ b/apps/www/src/content/docs/components/carousel.md @@ -48,18 +48,6 @@ import { ## Examples -### Orientation - -Use the `orientation` prop to set the orientation of the carousel. - - - -```vue - - ... - -``` - ### Sizes To set the size of the items, you can use the `basis` utility class on the ``. @@ -151,6 +139,17 @@ Responsive ``` +### Orientation + +Use the `orientation` prop to set the orientation of the carousel. + + + +```vue + + ... + +``` ## Options @@ -280,4 +279,4 @@ import Autoplay from 'embla-carousel-autoplay' -See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins. \ No newline at end of file +See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins. diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md index 43aef149..3fbdc563 100644 --- a/apps/www/src/content/docs/components/date-picker.md +++ b/apps/www/src/content/docs/components/date-picker.md @@ -64,10 +64,18 @@ const date = ref() +### Date Time Picker + + + ### With Presets +### With Slot + + + ### Form diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md index 3dd47c3e..cf275dcc 100644 --- a/apps/www/src/content/docs/components/form.md +++ b/apps/www/src/content/docs/components/form.md @@ -173,7 +173,7 @@ const formSchema = toTypedSchema(z.object({ ### Define a form -Use the `useForm` composable from `vee-validate` or use `
` component to create a from. +Use the `useForm` composable from `vee-validate` or use `` component to create a form. diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md new file mode 100644 index 00000000..f622f630 --- /dev/null +++ b/apps/www/src/content/docs/components/toggle-group.md @@ -0,0 +1,93 @@ +--- +title: Toggle Group +description: A set of two-state buttons that can be toggled on or off. +source: apps/www/src/lib/registry/default/ui/toggle-group +primitive: https://www.radix-vue.com/components/toggle-group.html +--- + + + +## Installation + + + + + + + +## Usage + +```vue + + + +``` + +## Examples + +### Default + + + + +### Outline + + + + +### Single + + + + +### Small + + + + +### Large + + + + +### Disabled + + + + + diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md index b1a512ef..cbb706a2 100644 --- a/apps/www/src/content/docs/installation/vite.md +++ b/apps/www/src/content/docs/installation/vite.md @@ -19,13 +19,63 @@ npm create vite@latest my-vue-app -- --template vue-ts ### Add Tailwind and its configuration -Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files: +Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and configure `postcss` plugins -```bash -npm install -D tailwindcss postcss autoprefixer -npx tailwindcss init -p -``` + + + + + Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json + + ```bash + npm install -D tailwindcss autoprefixer + ``` + + #### `vite.config` + + ```typescript {5,6,10-14} + import path from "path" + import { defineConfig } from "vite" + import vue from "@vitejs/plugin-vue" + + import tailwind from "tailwindcss" + import autoprefixer from "autoprefixer" + + export default defineConfig({ + plugins: [vue()], + css: { + postcss: { + plugins: [tailwind(), autoprefixer()], + }, + }, + resolve: {...} + }) + ``` + + + + + + + ```bash + npm install -D tailwindcss autoprefixer postcss + ``` + + #### `postcss.config.js` + + ```js + module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, + } + ``` + + + + ### Edit tsconfig.json @@ -42,6 +92,11 @@ Add the code below to the compilerOptions of your tsconfig.json so your app can Add the code below to the vite.config.ts so your app can resolve paths without error +```bash +# (so you can import "path" without error) +npm i -D @types/node +``` + ```typescript import path from "path" import vue from "@vitejs/plugin-vue" diff --git a/apps/www/src/lib/registry/default/example/CarouselApi.vue b/apps/www/src/lib/registry/default/example/CarouselApi.vue index 0b25dc94..521d0e0a 100644 --- a/apps/www/src/lib/registry/default/example/CarouselApi.vue +++ b/apps/www/src/lib/registry/default/example/CarouselApi.vue @@ -27,8 +27,8 @@ watchOnce(api, (api) => {