Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: lint

Browse Source
This commit is contained in:
Sadegh Barati 2024-03-20 22:23:28 +03:30
parent 91c9579a76
commit 8b10e7c4da
210 changed files with 341 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/.vitepress/theme/components/Logo.vue
View File

@ -2,7 +2,7 @@
</script>
<template>
<a href="/" class="mr-4 md:mr-2 xl:mr-6 flex items-center lg:space-x1 xl:space-x-2">
<a href="/" class="mr-4 md:mr-2 lg:mr-6 flex items-center lg:space-x1 xl:space-x-2">
<svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_102_1338)">
<path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />

2
apps/www/.vitepress/theme/components/StyleSwitcher.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { type SelectTriggerProps } from 'radix-vue'
import type { SelectTriggerProps } from 'radix-vue'
import { useConfigStore } from '@/stores/config'
import { cn } from '@/lib/utils'

3
apps/www/.vitepress/theme/components/TabMarkdown.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import { useSlots } from 'vue'
import { TabsContent, TabsTrigger } from '@/lib/registry/default/ui/tabs'
import { TabsContent } from '@/lib/registry/default/ui/tabs'
withDefaults(defineProps<{
title?: string

2
apps/www/.vitepress/theme/components/TabsMarkdown.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, useSlots } from 'vue'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
const slots = useSlots()

1
apps/www/.vitepress/theme/layout/DocsLayout.vue
View File

@ -4,7 +4,6 @@ import { docsConfig } from '../config/docs'
import TableOfContentVue from '../components/TableOfContent.vue'
import EditLink from '../components/EditLink.vue'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import { Badge } from '@/lib/registry/default/ui/badge'
import RadixIconsCode from '~icons/radix-icons/code'
import RadixIconsExternalLink from '~icons/radix-icons/external-link'
import ChevronRightIcon from '~icons/lucide/chevron-right'

2
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -93,7 +93,7 @@ watch(() => $route.path, (n) => {
<Logo />
<nav
class="flex items-center space-x-6 text-sm font-medium"
class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
>
<a
v-for="route in docsConfig.mainNav"

4
apps/www/src/content/docs/components-json.md
View File

@ -89,7 +89,6 @@ This is used to generate the default color palette for your components. **This c
}
```
### tailwind.cssVariables
You can choose between using CSS variables or Tailwind CSS utility classes for theming.
@ -109,7 +108,6 @@ For more information, see the [theming docs](/docs/theming).
**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
## aliases
The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
@ -118,7 +116,6 @@ Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
> A fallback to `tsconfig.app.json` if no `paths` were found in `tsconfig.json`
<Callout class="mt-6">
**Important:** If you're using the `src` directory, make sure it is included
@ -126,7 +123,6 @@ Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
</Callout>
### aliases.utils
Import alias for your utility functions.

4
apps/www/src/content/docs/components/accordion.md
View File

@ -5,12 +5,10 @@ source: apps/www/src/lib/registry/default/ui/accordion
primitive: https://www.radix-vue.com/components/accordion.html
---
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
## Installation
<Steps>
### Run the following command
@ -49,7 +47,6 @@ module.exports = {
</Steps>
## Usage
```vue
@ -68,4 +65,3 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
</Accordion>
</template>
```

3
apps/www/src/content/docs/components/alert-dialog.md
View File

@ -5,13 +5,10 @@ source: apps/www/src/lib/registry/default/ui/alert-dialog
primitive: https://www.radix-vue.com/components/alert-dialog.html
---
<ComponentPreview name="AlertDialogDemo" />
## Installation
```bash
npx shadcn-vue@latest add alert-dialog
```

5
apps/www/src/content/docs/components/alert.md
View File

@ -3,12 +3,10 @@ title: Alert
description: Displays a callout for user attention.
---
<ComponentPreview name="AlertDemo" />
## Installation
```bash
npx shadcn-vue@latest add alert
```
@ -36,9 +34,6 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
<ComponentPreview name="AlertDemo" />
### Destructive
<ComponentPreview name="AlertDestructiveDemo" />

1
apps/www/src/content/docs/components/aspect-ratio.md
View File

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html
---
<ComponentPreview name="AspectRatioDemo" />
## Installation

3
apps/www/src/content/docs/components/avatar.md
View File

@ -5,13 +5,10 @@ source: apps/www/src/lib/registry/default/ui/avatar
primitive: https://www.radix-vue.com/components/avatar.html
---
<ComponentPreview name="AvatarDemo" />
## Installation
```bash
npx shadcn-vue@latest add avatar
```

3
apps/www/src/content/docs/components/badge.md
View File

@ -3,7 +3,6 @@ title: Badge
description: Displays a badge or a component that looks like a badge.
---
<ComponentPreview name="BadgeDemo" />
## Installation
@ -80,14 +79,12 @@ import { Badge } from '@/components/ui/badge'
</template>
```
## Examples
### Default
<ComponentPreview name="BadgeDemo" />
### Secondary
<ComponentPreview name="BadgeSecondaryDemo" />

5
apps/www/src/content/docs/components/button.md
View File

@ -3,7 +3,6 @@ title: Button
description: Displays a button or a component that looks like a button.
---
<ComponentPreview name="ButtonDemo" />
## Installation
@ -94,24 +93,20 @@ import { Button } from '@/components/ui/button'
</template>
```
## Examples
### Primary
<ComponentPreview name="ButtonDemo" />
### Secondary
<ComponentPreview name="ButtonSecondaryDemo" />
### Destructive
<ComponentPreview name="ButtonDestructiveDemo" />
### Outline
<ComponentPreview name="ButtonOutlineDemo" />

4
apps/www/src/content/docs/components/calendar.md
View File

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/calendar
primitive: https://vcalendar.io/
---
<ComponentPreview name="CalendarDemo" />
## About
@ -34,13 +33,10 @@ npm install v-calendar
### Copy and paste the following code into your project
<<< @/lib/registry/default/ui/calendar/Calendar.vue
</Steps>
</template>
</TabPreview>

3
apps/www/src/content/docs/components/card.md
View File

@ -3,13 +3,10 @@ title: Card
description: Displays a card with header, content, and footer.
---
<ComponentPreview name="CardFormDemo" />
## Installation
```bash
npx shadcn-vue@latest add card
```

3
apps/www/src/content/docs/components/checkbox.md
View File

@ -5,13 +5,10 @@ source: apps/www/src/lib/registry/default/ui/checkbox
primitive: https://www.radix-vue.com/components/checkbox.html
---
<ComponentPreview name="CheckboxDemo" />
## Installation
```bash
npx shadcn-vue@latest add checkbox
```

3
apps/www/src/content/docs/components/collapsible.md
View File

@ -5,12 +5,10 @@ source: apps/www/src/lib/registry/default/ui/collapsible
primitive: https://www.radix-vue.com/components/collapsible.html
---
<ComponentPreview name="CollapsibleDemo" />
## Installation
<Steps>
### Run the following command
@ -49,7 +47,6 @@ module.exports = {
</Steps>
## Usage
```vue

4
apps/www/src/content/docs/components/command.md
View File

@ -5,14 +5,10 @@ source: apps/www/src/lib/registry/default/ui/command
primitive: https://www.radix-vue.com/components/combobox.html
---
<ComponentPreview name="CommandDemo" />
## Installation
```bash
npx shadcn-vue@latest add command
```

1
apps/www/src/content/docs/components/context-menu.md
View File

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/context-menu
primitive: https://www.radix-vue.com/components/context-menu.html
---
<ComponentPreview name="ContextMenuDemo" />
## Installation

2
apps/www/src/content/docs/components/date-picker.md
View File

@ -3,7 +3,6 @@ title: Date Picker
description: A date picker component with range and presets.
---
<ComponentPreview name="DatePickerDemo" />
## Installation
@ -53,7 +52,6 @@ const date = ref<Date>()
</template>
```
## Examples
### Date Picker

2
apps/www/src/content/docs/components/dialog.md
View File

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/dialog
primitive: https://www.radix-vue.com/components/dialog.html
---
<ComponentPreview name="DialogDemo" />
## Installation
@ -67,7 +66,6 @@ import {
To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
```js:line-numbers showLineNumber{14-25}
<Dialog>
<ContextMenu>

6
apps/www/src/content/docs/components/form.md
View File

@ -16,12 +16,10 @@ Well-designed HTML forms are:
In this guide, we will take a look at building forms with [`vee-validate`](https://vee-validate.logaretm.com/v4/) and [`zod`](https://zod.dev). We're going to use a `<FormField>` component to compose accessible forms using Radix Vue components.
## Features
The `<Form />` component is a wrapper around the `vee-validate` library. It provides a few things:
- Composable components for building forms.
- A `<FormField />` component for building controlled form fields.
- Form validation using `zod`.
@ -53,7 +51,6 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
## Example
<TabPreview name="Component" :names="['Component', 'Native']">
<template #Component>
@ -170,12 +167,10 @@ const formSchema = toTypedSchema(z.object({
</script>
```
### Define a form
Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a form.
<TabPreview name="Composition" :names="['Composition', 'Component']">
<template #Composition>
@ -332,7 +327,6 @@ See the following links for more examples on how to use the `vee-validate` featu
- [Textarea](/docs/components/textarea#form)
- [Combobox](/docs/components/combobox#form)
## Extras
This example shows how to add motion to your forms with [Formkit AutoAnimate](https://auto-animate.formkit.com/)

1
apps/www/src/content/docs/components/hover-card.md
View File

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/hover-card
primitive: https://www.radix-vue.com/components/hover-card.html
---
<ComponentPreview name="HoverCardDemo" />
## Installation

1
apps/www/src/content/docs/components/label.md
View File

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/label.html
<ComponentPreview name="LabelDemo" />
## Installation
<TabPreview name="CLI">

1
apps/www/src/content/docs/components/menubar.md
View File

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/menubar.html
## Installation
```bash
npx shadcn-vue@latest add menubar
```

1
apps/www/src/content/docs/components/navigation-menu.md
View File

@ -64,4 +64,3 @@ import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
</NavigationMenuItem>
</template>
```

1
apps/www/src/content/docs/components/pagination.md
View File

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/pagination.html
## Installation
```bash
npx shadcn-vue@latest add pagination
```

2
apps/www/src/content/docs/components/popover.md
View File

@ -5,12 +5,10 @@ source: apps/www/src/lib/registry/default/ui/popover
primitive: https://www.radix-vue.com/components/popover.html
---
<ComponentPreview name="PopoverDemo" />
## Installation
```bash
npx shadcn-vue@latest add popover
```

2
apps/www/src/content/docs/components/progress.md
View File

@ -7,8 +7,6 @@ primitive: https://www.radix-vue.com/components/progress.html
<ComponentPreview name="ProgressDemo" />
## Installation
<TabPreview name="CLI">

1
apps/www/src/content/docs/components/radio-group.md
View File

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/radio-group.html
## Installation
```bash
npx shadcn-vue@latest add radio-group
```

2
apps/www/src/content/docs/components/scroll-area.md
View File

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/scroll-area.html
## Installation
```bash
npx shadcn-vue@latest add scroll-area
```
@ -37,4 +36,3 @@ import { ScrollArea } from '@/components/ui/scroll-area'
### Horizontal Scrolling
<ComponentPreview name="ScrollAreaHorizontalDemo" />

2
apps/www/src/content/docs/components/separator.md
View File

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/separator.html
<ComponentPreview name="SeparatorDemo" />
## Installation
<TabPreview name="CLI">
@ -32,7 +31,6 @@ npm install radix-vue
<<< @/lib/registry/default/ui/separator/Separator.vue
</Steps>
</template>

2
apps/www/src/content/docs/components/sheet.md
View File

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/dialog.html
<ComponentPreview name="SheetDemo" />
## Installation
```bash
@ -52,7 +51,6 @@ Use the `side` property to `<SheetContent />` to indicate the edge of the screen
<ComponentPreview name="SheetSideDemo" />
### Size
You can adjust the size of the sheet using CSS classes:

1
apps/www/src/content/docs/components/switch.md
View File

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/switch.html
<ComponentPreview name="SwitchDemo" />
## Installation
<TabPreview name="CLI">

1
apps/www/src/content/docs/components/table.md
View File

@ -5,7 +5,6 @@ description: A responsive table component.
<ComponentPreview name="TableDemo" />
## Installation
```bash

3
apps/www/src/content/docs/components/tabs.md
View File

@ -7,11 +7,8 @@ primitive: https://www.radix-vue.com/components/tabs.html
<ComponentPreview name="TabsDemo" />
## Installation
```bash
npx shadcn-vue@latest add tabs
```

1
apps/www/src/content/docs/components/tags-input.md
View File

@ -13,7 +13,6 @@ primitive: https://www.radix-vue.com/components/tags-input.html
npx shadcn-vue@latest add tags-input
```
## Usage
### Tags with Combobox

1
apps/www/src/content/docs/components/textarea.md
View File

@ -5,7 +5,6 @@ description: Displays a form textarea or a component that looks like a textarea.
<ComponentPreview name="TextareaDemo" />
## Installation
<TabPreview name="CLI">

3
apps/www/src/content/docs/components/toast.md
View File

@ -5,12 +5,10 @@ source: apps/www/src/lib/registry/default/ui/toast
primitive: https://www.radix-vue.com/components/toast.html
---
<ComponentPreview name="ToastDemo" />
## Installation
<Steps>
### Run the following command
@ -35,7 +33,6 @@ import Toaster from '@/components/ui/toast/Toaster.vue'
</Steps>
## Usage
The `useToast` hook returns a `toast` function that you can use to display a toast.

8
apps/www/src/content/docs/components/toggle-group.md
View File

@ -64,30 +64,22 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
<ComponentPreview name="ToggleGroupDemo" />
### Outline
<ComponentPreview name="ToggleGroupOutlineDemo" />
### Single
<ComponentPreview name="ToggleGroupSingleDemo" />
### Small
<ComponentPreview name="ToggleGroupSmallDemo" />
### Large
<ComponentPreview name="ToggleGroupLargeDemo" />
### Disabled
<ComponentPreview name="ToggleGroupDisabledDemo" />

10
apps/www/src/content/docs/components/toggle.md
View File

@ -7,8 +7,6 @@ primitive: https://www.radix-vue.com/components/toggle.html
<ComponentPreview name="ToggleDemo" />
## Installation
<TabPreview name="CLI">
@ -56,30 +54,22 @@ import { Toggle } from '@/components/ui/toggle'
<ComponentPreview name="ToggleDemo" />
### Outline
<ComponentPreview name="ToggleItalicDemo" />
### With Text
<ComponentPreview name="ToggleItalicWithTextDemo" />
### Small
<ComponentPreview name="ToggleSmallDemo" />
### Large
<ComponentPreview name="ToggleLargeDemo" />
### Disabled
<ComponentPreview name="ToggleDisabledDemo" />

1
apps/www/src/content/docs/components/tooltip.md
View File

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/tooltip.html
<ComponentPreview name="TooltipDemo" />
## Installation
```bash

2
apps/www/src/content/docs/installation.md
View File

@ -56,8 +56,6 @@ description: How to install dependencies and structure your app.
</LinkedCard>
</div>
## TypeScript
This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.

2
apps/www/src/content/docs/installation/nuxt.md
View File

@ -41,7 +41,6 @@ npm install -D @nuxtjs/tailwindcss
</TabMarkdown>
<TabMarkdown title="manual">
Add the following code to `modules/shadcn.ts`.
@ -148,7 +147,6 @@ declare module '@nuxt/schema' {
</TabMarkdown>
</TabsMarkdown>
### Configure `nuxt.config.ts`
```ts

1
apps/www/src/content/docs/introduction.md
View File

@ -21,7 +21,6 @@ _Use this as a reference to build your own component libraries._
## FAQ
<Accordion type="multiple">
<AccordionItem value="faq-1">

5
apps/www/src/content/docs/theming.md
View File

@ -3,7 +3,6 @@ title: Theming
description: Use CSS Variables to customize the look and feel of your application.
---
You can choose between using CSS variables or Tailwind CSS utility classes for theming.
## Utility classes
@ -38,7 +37,6 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
```json {7} title="components.json"
{
"style": "default",
@ -201,9 +199,6 @@ I recommend using [HSL colors](https://www.smashingmagazine.com/2021/07/hsl-colo
See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information on using `rgb`, `rgba` or `hsl` colors.
## Hex -> Color Channel
You can use this tool to convert your HEX color to HSL without the color space function. Simply add your color in hex format, copy one of the generated values, then add them to the CSS variable.

1
apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import type {
ColumnDef,
ColumnFiltersState,
SortingState,
VisibilityState,

2
apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
View File

@ -10,7 +10,7 @@ import {
navigationMenuTriggerStyle,
} from '@/lib/registry/default/ui/navigation-menu'
const components: { title: string; href: string; description: string }[] = [
const components: { title: string, href: string, description: string }[] = [
{
title: 'Alert Dialog',
href: '/docs/primitives/alert-dialog',

2
apps/www/src/lib/registry/default/example/NavigationMenuDemoItem.vue
View File

@ -4,7 +4,7 @@ import {
NavigationMenuLink,
} from '@/lib/registry/default/ui/navigation-menu'
defineProps<{ title?: string; href?: string }>()
defineProps<{ title?: string, href?: string }>()
</script>
<template>

3
apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
View File

@ -42,12 +42,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
<template>
<form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="pin">
<FormField v-slot="{ componentField, value }" name="pin">
<FormItem>
<FormLabel>OTP</FormLabel>
<FormControl>
<PinInput
id="pin-input"
v-model="value!"
placeholder="○"
class="flex gap-2 items-center mt-1"
otp

4
apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
View File

@ -8,7 +8,9 @@ import type { CarouselEmits, CarouselProps } from './interface'
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
({
opts, orientation, plugins,
opts,
orientation,
plugins,
}: CarouselProps, emits: CarouselEmits) => {
const [emblaNode, emblaApi] = emblaCarouselVue({
...opts,

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<ContextMenuItemEmits>()
const delegatedProps = computed(() => {

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -8,7 +8,7 @@ import {
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<MenubarItemEmits>()

2
apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
View File

@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
</script>
<template>

2
apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
View File

@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

3
apps/www/src/lib/registry/default/ui/select/SelectContent.vue
View File

@ -16,7 +16,8 @@ defineOptions({
})
const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
{
position: 'popper',
},
)

2
apps/www/src/lib/registry/default/ui/toast/index.ts
View File

@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants>
export interface ToastProps extends ToastRootProps {
class?: HTMLAttributes['class']
variant?: ToastVariants['variant']
'onOpenChange'?: ((value: boolean) => void) | undefined
onOpenChange?: ((value: boolean) => void) | undefined
}

1
apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import type {
ColumnDef,
ColumnFiltersState,
SortingState,
VisibilityState,

2
apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
View File

@ -10,7 +10,7 @@ import {
navigationMenuTriggerStyle,
} from '@/lib/registry/new-york/ui/navigation-menu'
const components: { title: string; href: string; description: string }[] = [
const components: { title: string, href: string, description: string }[] = [
{
title: 'Alert Dialog',
href: '/docs/primitives/alert-dialog',

2
apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue
View File

@ -4,7 +4,7 @@ import {
NavigationMenuLink,
} from '@/lib/registry/new-york/ui/navigation-menu'
defineProps<{ title?: string; href?: string }>()
defineProps<{ title?: string, href?: string }>()
</script>
<template>

3
apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
View File

@ -42,12 +42,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
<template>
<form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="pin">
<FormField v-slot="{ componentField, value }" name="pin">
<FormItem>
<FormLabel>OTP</FormLabel>
<FormControl>
<PinInput
id="pin-input"
v-model="value!"
placeholder="○"
class="flex gap-2 items-center mt-1"
otp

4
apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
View File

@ -8,7 +8,9 @@ import type { CarouselEmits, CarouselProps } from './interface'
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
({
opts, orientation, plugins,
opts,
orientation,
plugins,
}: CarouselProps, emits: CarouselEmits) => {
const [emblaNode, emblaApi] = emblaCarouselVue({
...opts,

2
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<ContextMenuItemEmits>()
const delegatedProps = computed(() => {

2
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -8,7 +8,7 @@ import {
import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

1
apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
View File

@ -9,7 +9,6 @@ import {
DialogPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<MenubarItemEmits>()

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
View File

@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
</script>
<template>

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
View File

@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from
import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

3
apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
View File

@ -16,7 +16,8 @@ defineOptions({
})
const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
{
position: 'popper',
},
)

2
apps/www/src/lib/registry/new-york/ui/toast/index.ts
View File

@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants>
export interface ToastProps extends ToastRootProps {
class?: HTMLAttributes['class']
variant?: ToastVariants['variant']
'onOpenChange'?: ((value: boolean) => void) | undefined
onOpenChange?: ((value: boolean) => void) | undefined
}

2
apps/www/src/lib/utils.ts
View File

@ -1,7 +1,7 @@
import type { Updater } from '@tanstack/vue-table'
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { type Ref } from 'vue'
import type { Ref } from 'vue'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))

2
apps/www/tsconfig.registry.json
View File

@ -1,8 +1,8 @@
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"moduleResolution": "Node",
"baseUrl": ".",
"moduleResolution": "Node",
"paths": {
"@/*": ["./src/*"]
},

4
package.json
View File

@ -14,8 +14,8 @@
"build": "pnpm --filter www build",
"preview": "pnpm --filter www preview",
"prepare": "pnpm simple-git-hooks",
"lint": "eslint . --ignore-path .gitignore",
"lint:fix": "eslint . --fix --ignore-path .gitignore",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"dev:cli": "pnpm --filter shadcn-vue dev",
"build:cli": "pnpm --filter shadcn-vue build",
"build:registry": "pnpm --filter=www build:registry",

1
packages/cli/src/utils/transformers/index.ts
View File

@ -7,7 +7,6 @@ import type { Config } from '@/src/utils/get-config'
import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
import { transformCssVars } from '@/src/utils/transformers/transform-css-vars'
import { transformImport } from '@/src/utils/transformers/transform-import'
import { transformTwPrefixes } from '@/src/utils/transformers/transform-tw-prefix'
import { transformSFC } from '@/src/utils/transformers/transform-sfc'
export interface TransformOpts {

14
packages/cli/test/commands/init.test.ts
View File

@ -1,7 +1,7 @@
import fs from 'node:fs'
import path from 'pathe'
import { addDependency, addDevDependency } from 'nypm'
import { afterEach, expect, test, vi } from 'vitest'
import { addDependency } from 'nypm'
import { afterEach, expect, it, vi } from 'vitest'
import { runInit } from '../../src/commands/init'
import { getConfig } from '../../src/utils/get-config'
@ -14,7 +14,7 @@ vi.mock('fs/promises', () => ({
}))
vi.mock('ora')
test('init config-full', async () => {
it('init config-full', async () => {
vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
inlineColors: {},
cssVars: {},
@ -61,8 +61,7 @@ test('init config-full', async () => {
expect(mockWriteFile).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/src\/lib\/utils.ts$/),
// eslint-disable-next-line @typescript-eslint/quotes
expect.stringContaining("import { type ClassValue, clsx } from 'clsx'"),
expect.stringContaining('import { type ClassValue, clsx } from \'clsx\''),
'utf8',
)
expect(addDependency).toHaveBeenCalledWith(
@ -84,7 +83,7 @@ test('init config-full', async () => {
mockWriteFile.mockRestore()
})
test('init config-partial', async () => {
it('init config-partial', async () => {
vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
inlineColors: {},
cssVars: {},
@ -131,8 +130,7 @@ test('init config-partial', async () => {
expect(mockWriteFile).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/utils.ts$/),
// eslint-disable-next-line @typescript-eslint/quotes
expect.stringContaining("import { type ClassValue, clsx } from 'clsx'"),
expect.stringContaining('import { type ClassValue, clsx } from \'clsx\''),
'utf8',
)
expect(addDependency).toHaveBeenCalledWith(

12
packages/cli/test/fixtures/config-full/tsconfig.json vendored
View File

@ -2,23 +2,23 @@
"compilerOptions": {
"incremental": true,
"target": "es2017",
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "preserve",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": ".",
"module": "esnext",
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
},
"resolveJsonModule": true,
"allowJs": true,
"checkJs": true,
"noEmit": true,
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noUncheckedIndexedAccess": true,
"noEmit": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"skipLibCheck": true
},
"include": [

26
packages/cli/test/utils/registry.test.ts
View File

@ -1,8 +1,8 @@
import { expect, test } from 'vitest'
import { expect, it } from 'vitest'
import { resolveTree } from '../../src/utils/registry'
test('resolve tree', async () => {
it('resolve tree', async () => {
const index = [
{
name: 'button',
@ -18,15 +18,7 @@ test('resolve tree', async () => {
dependencies: ['radix-vue'],
registryDependencies: ['button'],
type: 'components:ui',
files: ['dialog/Dialog.vue',
'dialog/DialogContent.vue',
'dialog/DialogDescription.vue',
'dialog/DialogFooter.vue',
'dialog/DialogHeader.vue',
'dialog/DialogTitle.vue',
'dialog/DialogTrigger.vue',
'dialog/index.ts',
],
files: ['dialog/Dialog.vue', 'dialog/DialogContent.vue', 'dialog/DialogDescription.vue', 'dialog/DialogFooter.vue', 'dialog/DialogHeader.vue', 'dialog/DialogTitle.vue', 'dialog/DialogTrigger.vue', 'dialog/index.ts'],
},
{
name: 'input',
@ -42,17 +34,7 @@ test('resolve tree', async () => {
dependencies: ['radix-vue'],
registryDependencies: ['button', 'dialog'],
type: 'components:ui',
files: ['alert-dialog/AlertDialog.vue',
'alert-dialog/AlertDialogAction.vue',
'alert-dialog/AlertDialogCancel.vue',
'alert-dialog/AlertDialogContent.vue',
'alert-dialog/AlertDialogDescription.vue',
'alert-dialog/AlertDialogFooter.vue',
'alert-dialog/AlertDialogHeader.vue',
'alert-dialog/AlertDialogTitle.vue',
'alert-dialog/AlertDialogTrigger.vue',
'alert-dialog/index.ts',
],
files: ['alert-dialog/AlertDialog.vue', 'alert-dialog/AlertDialogAction.vue', 'alert-dialog/AlertDialogCancel.vue', 'alert-dialog/AlertDialogContent.vue', 'alert-dialog/AlertDialogDescription.vue', 'alert-dialog/AlertDialogFooter.vue', 'alert-dialog/AlertDialogHeader.vue', 'alert-dialog/AlertDialogTitle.vue', 'alert-dialog/AlertDialogTrigger.vue', 'alert-dialog/index.ts'],
},
// {
// name: 'example-card',

8
packages/cli/test/utils/resolve-import.test.ts
View File

@ -1,10 +1,10 @@
import path from 'pathe'
import { type ConfigLoaderSuccessResult, loadConfig } from 'tsconfig-paths'
import { expect, test } from 'vitest'
import { expect, it } from 'vitest'
import { resolveImport } from '../../src/utils/resolve-import'
test('resolve import', async () => {
it('resolve import', async () => {
expect(
resolveImport('@/foo/bar', {
absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
@ -50,7 +50,7 @@ test('resolve import', async () => {
).toEqual('/Users/shadcn/Projects/foobar/lib/utils')
})
test('resolve import with base url', async () => {
it('resolve import with base url', async () => {
const cwd = path.resolve(__dirname, '../fixtures/with-base-url')
const config = (loadConfig(cwd)) as ConfigLoaderSuccessResult
@ -65,7 +65,7 @@ test('resolve import with base url', async () => {
)
})
test('resolve import without base url', async () => {
it('resolve import without base url', async () => {
const cwd = path.resolve(__dirname, '../fixtures/without-base-url')
const config = (loadConfig(cwd)) as ConfigLoaderSuccessResult

4
packages/cli/test/utils/transform-cjs-to-esm.test.ts
View File

@ -1,8 +1,8 @@
import { expect, test } from 'vitest'
import { expect, it } from 'vitest'
import { TAILWIND_CONFIG, TAILWIND_CONFIG_WITH_VARIABLES } from '../../src/utils/templates'
import { transformCJSToESM } from '../../src/utils/transformers/transform-cjs-to-esm'
test('handle tailwind config template correctly', () => {
it('handle tailwind config template correctly', () => {
expect(transformCJSToESM('.mjs', TAILWIND_CONFIG)).toMatchSnapshot()
expect(transformCJSToESM('.mjs', TAILWIND_CONFIG_WITH_VARIABLES)).toMatchSnapshot()
})

4
packages/cli/test/utils/transform-import.test.ts
View File

@ -1,7 +1,7 @@
import { expect, test } from 'vitest'
import { expect, it } from 'vitest'
import { transform } from '../../src/utils/transformers'
test('transform import', async () => {
it('transform import', async () => {
expect(
await transform({
filename: 'app.vue',

14
packages/cli/test/utils/transform-sfc.test.ts
View File

@ -1,9 +1,9 @@
import { resolve } from 'pathe'
import { describe, expect, test } from 'vitest'
import { describe, expect, it } from 'vitest'
import { transform } from '../../src/utils/transformers'
describe('transformSFC', () => {
test('basic', async () => {
it('basic', async () => {
const result = await transform({
filename: 'app.vue',
raw: `<script lang="ts" setup>
@ -24,7 +24,7 @@ describe('transformSFC', () => {
expect(result).toMatchSnapshot()
})
test('defineProps', async () => {
it('defineProps', async () => {
const result = await transform({
filename: 'app.vue',
raw: `<script lang="ts" setup>
@ -36,7 +36,7 @@ describe('transformSFC', () => {
expect(result).toMatchSnapshot()
})
test('defineProps with withDefaults', async () => {
it('defineProps with withDefaults', async () => {
const result = await transform({
filename: 'app.vue',
raw: `<script lang="ts" setup>
@ -50,7 +50,7 @@ describe('transformSFC', () => {
expect(result).toMatchSnapshot()
})
test('defineProps with external props', async () => {
it('defineProps with external props', async () => {
const result = await transform({
filename: resolve(__dirname, './test.vue'),
raw: `<script lang="ts" setup>
@ -65,7 +65,7 @@ describe('transformSFC', () => {
expect(result).toMatchSnapshot()
})
test('defineProps with package props', async () => {
it('defineProps with package props', async () => {
const result = await transform({
filename: resolve(__dirname, './test.vue'),
raw: `<script lang="ts" setup>
@ -81,7 +81,7 @@ describe('transformSFC', () => {
expect(result).toMatchSnapshot()
})
test('defineEmits', async () => {
it('defineEmits', async () => {
const result = await transform({
filename: 'app.vue',
raw: `<script lang="ts" setup>

6
packages/cli/test/utils/transform-tw-prefix.test.ts
View File

@ -1,8 +1,4 @@
import { expect, it } from 'vitest'
import { transform } from '../../src/utils/transformers'
import { applyPrefixesCss } from '../../src/utils/transformers/transform-tw-prefix'
import stone from '../fixtures/colors/stone.json'
import { it } from 'vitest'
it('transform tailwind prefix', async () => {
// expect(

2
packages/cli/tsconfig.json
View File

@ -2,8 +2,8 @@
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "../../tsconfig.json",
"compilerOptions": {
"module": "ES2020",
"baseUrl": ".",
"module": "ES2020",
"paths": {
"@/*": ["./*"]
},

4
packages/module/playground/components/ui/carousel/useCarousel.ts
View File

@ -8,7 +8,9 @@ import type { CarouselEmits, CarouselProps } from './interface'
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
({
opts, orientation, plugins,
opts,
orientation,
plugins,
}: CarouselProps, emits: CarouselEmits) => {
const [emblaNode, emblaApi] = emblaCarouselVue({
...opts,

12
tsconfig.json
View File

@ -5,15 +5,15 @@
"composite": false,
"module": "ESNext",
"moduleResolution": "node",
"declaration": true,
"declarationMap": true,
"inlineSources": false,
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"declaration": true,
"declarationMap": true,
"inlineSources": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"preserveWatchOutput": true,
"skipLibCheck": true
},