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/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', @@ -1544,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 d94a9052..ac4ed258 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -15,18 +15,18 @@ "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", "@vueuse/integrations": "^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", @@ -34,11 +34,11 @@ "embla-carousel-vue": "8.0.0-rc19", "fuse.js": "^7.0.0", "lucide-vue-next": "^0.276.0", - "radix-vue": "^1.3.0", + "radix-vue": "^1.3.2", "tailwindcss-animate": "^1.0.7", "v-calendar": "^3.1.2", - "vee-validate": "4.12.3", - "vue": "^3.4.7", + "vee-validate": "4.12.4", + "vue": "^3.4.14", "vue-wrap-balancer": "^1.1.3", "zod": "^3.22.4" }, @@ -49,22 +49,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/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/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/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) => {