diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index 3aa7b323..54005550 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -6,62 +6,27 @@ body: - type: markdown attributes: value: | - **Before You Start...** - + Thanks for taking the time to fill out this bug report! This form is only for submitting bug reports. If you have a usage question or are unsure if this is really a bug, make sure to: - Read the [docs](https://radix-vue.com/) - Ask on [Discord Chat](https://chat.radix-vue.com/) - Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions) - - Also try to search for your issue - it may have already been answered or even fixed. - However, if you find that an old, closed issue still persists in the latest version, - you should open a new issue using the form below instead of commenting on the old issue. - - type: textarea - id: bug-env - attributes: - label: Environment - description: Please provide the following information about your environment. - value: | - Developement/Production OS: Windows 10 19043.1110 - Node version: 16.0.0 - Package manager: pnpm@8.6.0 - Radix Vue version: 1.0.0 - Shadcn Vue version: 1.0.0 - Vue version: 3.0.0 - Nuxt version: 3.0.0 - Nuxt mode: universal - Nuxt target: server - CSS framework: tailwindcss@3.3.3 - Client OS: Windows 10 19043.1110 - Browser: Chrome 90.0.4430.212 - render: bash - validations: - required: true - type: input - id: reproduction-link + id: reproduction attributes: - label: Link to minimal reproduction + label: Reproduction description: | - Please provide a link to a minimal reproduction of the bug. - A minimal reproduction is a CodeSandbox, CodePen, or a StackBlitz that contains the bare minimum amount of code needed to show the bug. - A minimal reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem + A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is **required**, otherwise the issue might be closed without further notice. [**Why?**](https://antfu.me/posts/why-reproductions-are-required) - This is **required** for us to be able to triage your issue in a timely manner. + To get started, you can use the StackBlitz and CodeSandbox playgrounds in shadcn-vue demos: + https://www.shadcn-vue.com/docs/components/accordion.html - Please do not just fill in a random link. The issue will be closed if no valid reproduction is provided. - placeholder: Reproduction Link - validations: - required: true - - type: textarea - id: steps-to-reproduce - attributes: - label: Steps to reproduce - description: | - How do you trigger this bug? Please walk us through it step by step. - Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code. - placeholder: Steps to reproduce + or use template presets + https://vite.new + https://nuxt.new + placeholder: Reproduction validations: required: true - type: textarea @@ -73,14 +38,18 @@ body: validations: required: true - type: textarea - id: expected-behavior + id: system-info attributes: - label: Expected behavior - description: A clear and concise description of what you expected to happen. - - type: textarea - id: screenshots + label: System Info + description: Output of `npx envinfo --system --npmPackages vue,@vueuse/core,radix-vue,nuxt,shadcn-vue,shadcn-nuxt,unplugin-auto-import --binaries --browsers` + render: bash + placeholder: System, Binaries, Browsers + validations: + required: true + - type: checkboxes + id: contributes attributes: - label: Conext & Screenshots (if applicable) - description: | - If applicable, provide any additional context or screenshots of the bug. - You can drag and drop images here to add them to the issue. + label: Contributes + options: + - label: I am willing to submit a PR to fix this issue + - label: I am willing to submit a PR with failing tests diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml index c614d0b5..9d347542 100644 --- a/.github/workflows/publish.yaml +++ b/.github/workflows/publish.yaml @@ -17,8 +17,6 @@ on: - 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: @@ -52,9 +50,6 @@ jobs: 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 diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts index 48579d2b..b6cf67bd 100644 --- a/apps/www/.vitepress/config.mts +++ b/apps/www/.vitepress/config.mts @@ -3,9 +3,9 @@ import { defineConfig } from 'vitepress' import Icons from 'unplugin-icons/vite' import tailwind from 'tailwindcss' import autoprefixer from 'autoprefixer' -import { createCssVariablesTheme } from 'shikiji' +import { createCssVariablesTheme } from 'shiki' -// import { transformerMetaWordHighlight } from 'shikiji-transformers' +// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers' import { siteConfig } from './theme/config/site' import ComponentPreviewPlugin from './theme/plugins/previewer' @@ -61,6 +61,7 @@ export default defineConfig({ theme: cssVariables, codeTransformers: [ // transformerMetaWordHighlight(), + // transformerNotationWordHighlight(), ], config(md) { md.use(ComponentPreviewPlugin) @@ -86,8 +87,5 @@ export default defineConfig({ '@': path.resolve(__dirname, '../src'), }, }, - ssr: { - noExternal: ['vue-sonner'], - }, }, }) diff --git a/apps/www/.vitepress/theme/components/Kbd.vue b/apps/www/.vitepress/theme/components/Kbd.vue index 7e3bd02c..55428107 100644 --- a/apps/www/.vitepress/theme/components/Kbd.vue +++ b/apps/www/.vitepress/theme/components/Kbd.vue @@ -18,9 +18,9 @@ const kbdClass = computed(() => { { variants: { size: { - xs: 'min-h-[16px] text-[10px] h-4 px-1', - sm: 'min-h-[20px] text-[11px] h-5 px-1', - md: 'min-h-[24px] text-[12px] h-6 px-1.5', + xs: 'min-h-4 text-[10px] h-4 px-1', + sm: 'min-h-5 text-[11px] h-5 px-1', + md: 'min-h-6 text-[12px] h-6 px-1.5', }, }, }, diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 646cc85a..4f69dc39 100644 --- a/apps/www/.vitepress/theme/config/docs.ts +++ b/apps/www/.vitepress/theme/config/docs.ts @@ -328,7 +328,6 @@ export const docsConfig: DocsConfig = { { title: 'Toast', href: '/docs/components/toast', - label: 'New', items: [], }, { diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue index 388301e0..1ab12142 100644 --- a/apps/www/.vitepress/theme/layout/DocsLayout.vue +++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue @@ -46,9 +46,9 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/' > {{ doc.title }} - + {{ doc.label }} - + diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue index 3caf425d..8ff32f0d 100644 --- a/apps/www/.vitepress/theme/layout/MainLayout.vue +++ b/apps/www/.vitepress/theme/layout/MainLayout.vue @@ -135,7 +135,7 @@ watch(() => $route.path, (n) => { :href="link.href" target="_blank" :variant="'ghost'" :size="'icon'" > - + @@ -288,7 +288,9 @@ watch(() => $route.path, (n) => { - + + + diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css index c1b2d159..fddd8cfb 100644 --- a/apps/www/.vitepress/theme/style.css +++ b/apps/www/.vitepress/theme/style.css @@ -5,49 +5,49 @@ @layer base { :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 5% 64.9%; - --radius: 0.5rem; - } + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5% 64.9%; + --radius: 0.5rem; + } - .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 240 4.9% 83.9%; - } + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + } * { @@ -116,7 +116,7 @@ .step:before { @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background; - @apply ml-[-50px] mt-[-4px]; + @apply -ml-[50px] -mt-1; content: counter(step); } } @@ -139,7 +139,7 @@ pre code { } pre code .line { - @apply px-4 min-h-[1.5rem] !py-0.5 w-full inline-block; + @apply px-4 min-h-6 !py-0.5 w-full inline-block; } .line-number { @@ -149,4 +149,4 @@ pre code .line { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; -} \ No newline at end of file +} diff --git a/apps/www/.vitepress/theme/styles/shiki.css b/apps/www/.vitepress/theme/styles/shiki.css index 9c0d7eda..db002829 100644 --- a/apps/www/.vitepress/theme/styles/shiki.css +++ b/apps/www/.vitepress/theme/styles/shiki.css @@ -10,4 +10,11 @@ --shiki-token-string-expression: #ebebeb; --shiki-token-punctuation: #ffffff; --shiki-token-link: #EE0000; +} + +.shiki .highlighted-word { + border-radius: calc(var(--radius) - 2px); + border-color: rgba(63,63,70,.7); + background-color: rgba(63,63,70,.5); + padding: 0.25rem; } \ No newline at end of file diff --git a/apps/www/package.json b/apps/www/package.json index 186171f7..6719993a 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -1,7 +1,7 @@ { "name": "www", "type": "module", - "version": "0.8.7", + "version": "0.9.0", "files": [ "dist" ], @@ -19,25 +19,25 @@ "@morev/vue-transitions": "^2.3.6", "@radix-icons/vue": "^1.0.0", "@stackblitz/sdk": "^1.9.0", - "@tanstack/vue-table": "^8.11.7", - "@unovis/ts": "^1.3.1", - "@unovis/vue": "^1.3.1", - "@vee-validate/zod": "^4.12.4", + "@tanstack/vue-table": "^8.11.8", + "@unovis/ts": "^1.3.3", + "@unovis/vue": "^1.3.3", + "@vee-validate/zod": "^4.12.5", "@vueuse/core": "^10.7.2", "class-variance-authority": "^0.7.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", + "embla-carousel": "^8.0.0-rc22", + "embla-carousel-autoplay": "^8.0.0-rc22", + "embla-carousel-vue": "^8.0.0-rc22", "lucide-vue-next": "^0.276.0", - "radix-vue": "^1.3.2", + "radix-vue": "^1.4.0", "tailwindcss-animate": "^1.0.7", "v-calendar": "^3.1.2", - "vee-validate": "4.12.4", + "vee-validate": "4.12.5", "vue": "^3.4.15", - "vue-sonner": "^1.0.2", + "vue-sonner": "^1.0.3", "vue-wrap-balancer": "^1.1.3", "zod": "^3.22.4" }, @@ -46,26 +46,27 @@ "@iconify-json/tabler": "^1.1.89", "@iconify/json": "^2.2.108", "@iconify/vue": "^4.1.1", + "@shikijs/transformers": "^1.0.0-beta.3", "@types/lodash.template": "^4.5.2", "@types/node": "^20.8.10", "@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/compiler-core": "^3.4.15", + "@vue/compiler-dom": "^3.4.15", "@vue/tsconfig": "^0.5.1", - "autoprefixer": "^10.4.16", + "autoprefixer": "^10.4.17", "lodash.template": "^4.5.0", + "oxc-parser": "^0.2.0", "pathe": "^1.1.2", "rimraf": "^5.0.5", - "shikiji": "^0.10.0-beta.9", - "shikiji-transformers": "^0.10.0-beta.9", - "tailwind-merge": "^2.2.0", + "shiki": "^1.0.0-beta.3", + "tailwind-merge": "^2.2.1", "tailwindcss": "^3.4.1", "tsx": "^4.7.0", "typescript": "^5.3.3", - "unplugin-icons": "^0.17.1", + "unplugin-icons": "^0.18.3", "vite": "^5.0.12", - "vitepress": "^1.0.0-rc.39", + "vitepress": "^1.0.0-rc.41", "vue-tsc": "^1.8.27" } } diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md index e479e4de..1e8c7b3c 100644 --- a/apps/www/src/content/docs/components/data-table.md +++ b/apps/www/src/content/docs/components/data-table.md @@ -25,7 +25,7 @@ We'll start with the basic `` component and build a complex data table ## Table of Contents -This guide will show you how to use [TanStack Table](https://tanstack.com/table/v8) and the
component to build your own custom data table. We'll cover the following topics: +This guide will show you how to use [TanStack Table](https://tanstack.com/table/v8) and the `
` component to build your own custom data table. We'll cover the following topics: - [Basic Table](#basic-table) - [Row Actions](#row-actions) @@ -109,31 +109,23 @@ Let's start by building a basic table. First, we'll define our columns in the `columns.ts` file. -```ts:line-numbers title="components/payments/columns.ts" {1,12-27} -import type { ColumnDef } from '@tanstack/vue-table' - -// This type is used to define the shape of our data. -// You can use a Zod schema here if you want. -export interface Payment { - id: string - amount: number - status: 'pending' | 'processing' | 'success' | 'failed' - email: string -} +```ts:line-numbers {1,12-27} +import { h } from 'vue' export const columns: ColumnDef[] = [ - { - accessorKey: 'status', - header: 'Status', - }, - { - accessorKey: 'email', - header: 'Email', - }, { accessorKey: 'amount', - header: 'Amount', - }, + header: () => h('div', { class: 'text-right' }, 'Amount'), + cell: ({ row }) => { + const amount = Number.parseFloat(row.getValue('amount')) + const formatted = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }).format(amount) + + return h('div', { class: 'text-right font-medium' }, formatted) + }, + } ] ``` @@ -149,7 +141,7 @@ formatted, sorted and filtered. Next, we'll create a `` component to render our table. -```ts:line-numbers +```vue:line-numbers -``` \ No newline at end of file +``` diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue index 62c7b3a4..30450833 100644 --- a/apps/www/src/examples/cards/components/GitHubCard.vue +++ b/apps/www/src/examples/cards/components/GitHubCard.vue @@ -26,7 +26,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator' diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue index 1bfac8de..8ce8571b 100644 --- a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue +++ b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue @@ -3,15 +3,17 @@ import { AccordionRoot, type AccordionRootEmits, type AccordionRootProps, - useEmitAsProps, + useForwardPropsEmits, } from 'radix-vue' const props = defineProps() const emits = defineEmits() + +const forwarded = useForwardPropsEmits(props, emits) diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue index 740f4e66..d8ec9889 100644 --- a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue +++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue @@ -1,21 +1,23 @@