diff --git a/apps/www/.vitepress/theme/components/CodeSandbox.vue b/apps/www/.vitepress/theme/components/CodeSandbox.vue new file mode 100644 index 00000000..8b55d399 --- /dev/null +++ b/apps/www/.vitepress/theme/components/CodeSandbox.vue @@ -0,0 +1,35 @@ + + + diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue index 403cb932..ed37d250 100644 --- a/apps/www/.vitepress/theme/components/ComponentPreview.vue +++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue @@ -1,6 +1,8 @@ + + diff --git a/apps/www/.vitepress/theme/components/Tooltip.vue b/apps/www/.vitepress/theme/components/Tooltip.vue new file mode 100644 index 00000000..a910e4a3 --- /dev/null +++ b/apps/www/.vitepress/theme/components/Tooltip.vue @@ -0,0 +1,26 @@ + + + diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 5aba6230..ba060901 100644 --- a/apps/www/.vitepress/theme/config/docs.ts +++ b/apps/www/.vitepress/theme/config/docs.ts @@ -108,11 +108,11 @@ export const docsConfig: DocsConfig = { href: '/docs/installation/nuxt', items: [], }, - // { - // title: 'Astro', - // href: '/docs/installation/astro', - // items: [], - // }, + { + title: 'Astro', + href: '/docs/installation/astro', + items: [], + }, { title: 'Laravel', href: '/docs/installation/laravel', @@ -244,6 +244,12 @@ export const docsConfig: DocsConfig = { href: '/docs/components/navigation-menu', items: [], }, + { + title: 'Pagination', + href: '/docs/components/pagination', + label: 'New', + items: [], + }, { title: 'Popover', href: '/docs/components/popover', diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue index a1a0015c..533e367b 100644 --- a/apps/www/.vitepress/theme/layout/MainLayout.vue +++ b/apps/www/.vitepress/theme/layout/MainLayout.vue @@ -119,26 +119,29 @@ watch(() => $route.path, (n) => { -
- - - -
+
+ - + +
diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts new file mode 100644 index 00000000..fd3ffe11 --- /dev/null +++ b/apps/www/.vitepress/theme/utils/codeeditor.ts @@ -0,0 +1,212 @@ +import { getParameters } from 'codesandbox/lib/api/define' +import sdk from '@stackblitz/sdk' +import { dependencies as deps } from '../../../package.json' +import { Index as demoIndex } from '../../../../www/__registry__' +import tailwindConfigRaw from '../../../tailwind.config?raw' +import cssRaw from '../../../../../packages/cli/test/fixtures/nuxt/assets/css/tailwind.css?raw' +import { type Style } from '@/lib/registry/styles' + +export function makeCodeSandboxParams(componentName: string, style: Style, sources: Record) { + let files = {} + files = constructFiles(componentName, style, sources) + return getParameters({ files, template: 'node' }) +} + +export function makeStackblitzParams(componentName: string, style: Style, sources: Record) { + const files: Record = {} + Object.entries(constructFiles(componentName, style, sources)).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content)) + return sdk.openProject({ + title: `${componentName} - Radix Vue`, + files, + template: 'node', + }, { + newWindow: true, + openFile: ['src/App.vue'], + }) +} + +const viteConfig = { + 'vite.config.js': { + content: `import path from "path" +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +})`, + isBinary: false, + }, + 'index.html': { + content: ` + + + + + + Vite + Vue + TS + + +
+ + + + `, + isBinary: false, + }, +} + +function constructFiles(componentName: string, style: Style, sources: Record) { + const componentsJson = { + style, + tailwind: { + config: 'tailwind.config.js', + css: 'src/assets/index.css', + baseColor: 'zinc', + cssVariables: true, + }, + aliases: { + utils: '@/utils', + components: '@/components', + }, + } + + const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue' + const dependencies = { + 'vue': 'latest', + 'radix-vue': deps['radix-vue'], + '@radix-ui/colors': 'latest', + 'clsx': 'latest', + 'class-variance-authority': 'latest', + 'tailwind-merge': 'latest', + 'tailwindcss-animate': 'latest', + [iconPackage]: 'latest', + 'shadcn-vue': 'latest', + 'typescript': 'latest', + } + + const devDependencies = { + 'vite': 'latest', + '@vitejs/plugin-vue': 'latest', + 'vue-tsc': 'latest', + 'tailwindcss': 'latest', + 'postcss': 'latest', + 'autoprefixer': 'latest', + } + + const transformImportPath = (code: string) => { + let parsed = code + parsed = parsed.replaceAll(`@/lib/registry/${style}`, '@/components') + parsed = parsed.replaceAll('@/lib/utils', '@/utils') + return parsed + } + + const componentFiles = Object.keys(sources).filter(key => key.endsWith('.vue') && key !== 'index.vue') + const components: Record = {} + componentFiles.forEach((i) => { + components[`src/${i}`] = { + isBinary: false, + content: transformImportPath(sources[i]), + } + }) + + // @ts-expect-error componentName migth not exist in Index + const registryDependencies = demoIndex[style][componentName as any]?.registryDependencies?.filter(i => i !== 'utils') + + const files = { + 'package.json': { + content: { + name: `shadcn-vue-${componentName.toLowerCase().replace(/ /g, '-')}`, + scripts: { start: `shadcn-vue add ${registryDependencies.join(' ')} -y && vite` }, + dependencies, + devDependencies, + }, + isBinary: false, + }, + 'components.json': { + content: componentsJson, + isBinary: false, + }, + ...viteConfig, + 'tailwind.config.js': { + content: tailwindConfigRaw, + isBinary: false, + }, + 'postcss.config.js': { + content: `module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + } +}`, + isBinary: false, + }, + 'tsconfig.json': { + content: `{ +"$schema": "https://json.schemastore.org/tsconfig", +"compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } +} +}`, + isBinary: false, + }, + 'src/utils.ts': { + isBinary: false, + content: `import { type ClassValue, clsx } from 'clsx' +import { twMerge } from 'tailwind-merge' +import { camelize, getCurrentInstance, toHandlerKey } from 'vue' + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +}`, + }, + 'src/assets/index.css': { + content: cssRaw, + isBinary: false, + }, + 'src/main.ts': { + content: `import { createApp } from 'vue'; +import App from './App.vue'; +import './assets/global.css'; +import './assets/index.css'; + +createApp(App).mount('#app')`, + isBinary: false, + }, + 'src/App.vue': { + isBinary: false, + content: sources['index.vue'], + }, + ...components, + 'src/assets/global.css': { + content: `body { + display: flex; + align-items: flex-start; + justify-content: center; + padding-top: 120px; + width: 100vw; + height: 100vh; + background-color: hsl(var(--background)); + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + color: hsl(var(--foreground)); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-feature-settings: "rlig" 1, "calt" 1; +} + +#app { + @apply w-full flex items-center justify-center px-12; +}`, + isBinary: false, + }, + } + + return files +} diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts index 306df795..298a8ebb 100644 --- a/apps/www/__registry__/index.ts +++ b/apps/www/__registry__/index.ts @@ -261,6 +261,13 @@ export const Index = { component: () => import('../src/lib/registry/default/example/InputForm.vue').then(m => m.default), files: ['../src/lib/registry/default/example/InputForm.vue'], }, + InputFormAutoAnimate: { + name: 'InputFormAutoAnimate', + type: 'components:example', + registryDependencies: ['button', 'form', 'input'], + component: () => import('../src/lib/registry/default/example/InputFormAutoAnimate.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/InputFormAutoAnimate.vue'], + }, InputWithButton: { name: 'InputWithButton', type: 'components:example', @@ -303,6 +310,13 @@ export const Index = { component: () => import('../src/lib/registry/default/example/NavigationMenuDemoItem.vue').then(m => m.default), files: ['../src/lib/registry/default/example/NavigationMenuDemoItem.vue'], }, + PaginationDemo: { + name: 'PaginationDemo', + type: 'components:example', + registryDependencies: ['pagination', 'button'], + component: () => import('../src/lib/registry/default/example/PaginationDemo.vue').then(m => m.default), + files: ['../src/lib/registry/default/example/PaginationDemo.vue'], + }, PopoverDemo: { name: 'PopoverDemo', type: 'components:example', @@ -562,27 +576,7 @@ export const Index = { component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default), files: ['../src/lib/registry/default/example/TypographyTable.vue'], }, - ActivityGoal: { - name: 'ActivityGoal', - type: 'components:example', - registryDependencies: ['button', 'card', 'themes', 'config'], - component: () => import('../src/lib/registry/default/example/ActivityGoal.vue').then(m => m.default), - files: ['../src/lib/registry/default/example/ActivityGoal.vue'], - }, - DataTable: { - name: 'DataTable', - type: 'components:example', - registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'], - component: () => import('../src/lib/registry/default/example/DataTable.vue').then(m => m.default), - files: ['../src/lib/registry/default/example/DataTable.vue'], - }, - Metric: { - name: 'Metric', - type: 'components:example', - registryDependencies: ['card', 'config'], - component: () => import('../src/lib/registry/default/example/Metric.vue').then(m => m.default), - files: ['../src/lib/registry/default/example/Metric.vue'], - }, + }, 'new-york': { AccordionDemo: { @@ -844,6 +838,13 @@ export const Index = { component: () => import('../src/lib/registry/new-york/example/InputForm.vue').then(m => m.default), files: ['../src/lib/registry/new-york/example/InputForm.vue'], }, + InputFormAutoAnimate: { + name: 'InputFormAutoAnimate', + type: 'components:example', + registryDependencies: ['button', 'form', 'input'], + component: () => import('../src/lib/registry/new-york/example/InputFormAutoAnimate.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/InputFormAutoAnimate.vue'], + }, InputWithButton: { name: 'InputWithButton', type: 'components:example', @@ -886,6 +887,13 @@ export const Index = { component: () => import('../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue').then(m => m.default), files: ['../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue'], }, + PaginationDemo: { + name: 'PaginationDemo', + type: 'components:example', + registryDependencies: ['pagination', 'button'], + component: () => import('../src/lib/registry/new-york/example/PaginationDemo.vue').then(m => m.default), + files: ['../src/lib/registry/new-york/example/PaginationDemo.vue'], + }, PopoverDemo: { name: 'PopoverDemo', type: 'components:example', @@ -1145,26 +1153,5 @@ export const Index = { component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default), files: ['../src/lib/registry/new-york/example/TypographyTable.vue'], }, - ActivityGoal: { - name: 'ActivityGoal', - type: 'components:example', - registryDependencies: ['button', 'card', 'themes', 'config'], - component: () => import('../src/lib/registry/new-york/example/ActivityGoal.vue').then(m => m.default), - files: ['../src/lib/registry/new-york/example/ActivityGoal.vue'], - }, - DataTable: { - name: 'DataTable', - type: 'components:example', - registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'], - component: () => import('../src/lib/registry/new-york/example/DataTable.vue').then(m => m.default), - files: ['../src/lib/registry/new-york/example/DataTable.vue'], - }, - Metric: { - name: 'Metric', - type: 'components:example', - registryDependencies: ['card', 'config'], - component: () => import('../src/lib/registry/new-york/example/Metric.vue').then(m => m.default), - files: ['../src/lib/registry/new-york/example/Metric.vue'], - }, }, } diff --git a/apps/www/package.json b/apps/www/package.json index dc6bb0d0..561a03d3 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -12,8 +12,10 @@ "build:registry": "tsx ./scripts/build-registry.ts" }, "dependencies": { + "@formkit/auto-animate": "^0.8.0", "@morev/vue-transitions": "^2.3.6", "@radix-icons/vue": "^1.0.0", + "@stackblitz/sdk": "^1.9.0", "@tanstack/vue-table": "^8.10.3", "@unovis/ts": "^1.2.1", "@unovis/vue": "1.3.0-alpha.3", @@ -21,8 +23,10 @@ "@vueuse/core": "^10.4.1", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", + "codesandbox": "^2.2.3", "date-fns": "^2.30.0", "lucide-vue-next": "^0.276.0", + "radix-vue": "^0.4.1", "tailwindcss-animate": "^1.0.7", "v-calendar": "^3.1.0", "vee-validate": "4.11.7", @@ -43,7 +47,6 @@ "@vue/compiler-dom": "^3.3.4", "autoprefixer": "^10.4.16", "lodash.template": "^4.5.0", - "radix-vue": "^0.4.1", "rimraf": "^5.0.1", "tailwind-merge": "^1.14.0", "tailwindcss": "^3.3.3", diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md index 4721788b..a5712001 100644 --- a/apps/www/src/content/docs/components/form.md +++ b/apps/www/src/content/docs/components/form.md @@ -329,3 +329,10 @@ See the following links for more examples on how to use the `vee-validate` featu - [Switch](/docs/components/switch#form) - [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/) + + diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md new file mode 100644 index 00000000..16d1429f --- /dev/null +++ b/apps/www/src/content/docs/components/pagination.md @@ -0,0 +1,57 @@ +--- +title: Pagination +description: Displays data in paged format and provides navigation between pages. +source: apps/www/src/lib/registry/default/ui/pagination +primitive: https://www.radix-vue.com/components/pagination.html +--- + + + +## Installation + + +```bash +npx shadcn-vue@latest add pagination +``` + +## Usage + +```vue + + + +``` diff --git a/apps/www/src/content/docs/installation.md b/apps/www/src/content/docs/installation.md index 59d92b2c..899f8244 100644 --- a/apps/www/src/content/docs/installation.md +++ b/apps/www/src/content/docs/installation.md @@ -5,7 +5,7 @@ description: How to install dependencies and structure your app. ## Frameworks -
+
Vite -

Vite

+

Vite

 Nuxt -

Nuxt

+

Nuxt

 - +

Astro

+ -

Laravel

+

Laravel
diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md index 3d78e848..fd3b2de9 100644 --- a/apps/www/src/content/docs/installation/astro.md +++ b/apps/www/src/content/docs/installation/astro.md @@ -32,20 +32,30 @@ Strict Yes/No ``` -### Add React to your project +### Add Vue to your project -Install React using the Astro CLI: +Install Vue using the Astro CLI: ```bash -npx astro add react +npx astro add vue ``` -Answer `Yes` to all the question prompted by the CLI when installing React. +Answer `Yes` to all the question prompted by the CLI when installing Vue. +This will install `vue` and `@astrojs/vue` as dependencies and automatically set them up in the `astro.config.mjs` file. + +### Install TypeScript + +If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/radix-vue/shadcn-vue/pull/118) + +```bash +npm install -D typescript +``` + ### Add Tailwind CSS to your project Install Tailwind CSS using the Astro CLI: @@ -60,6 +70,8 @@ Answer `Yes` to all the question prompted by the CLI when installing Tailwind CS +This will install `tailwindcss` and `@astrojs/tailwind` as dependencies and set them up in your `astro.config.mjs` file. It will also create a `tailwind.config.mjs` file with the needed configurations. + ### Edit tsconfig.json file Add the code below to the tsconfig.json file to resolve paths: @@ -77,10 +89,10 @@ Add the code below to the tsconfig.json file to resolve paths: ### Run the CLI -Run the `shadcn-ui` init command to setup your project: +Run the `shadcn-vue` init command to setup your project: ```bash -npx shadcn-ui@latest init +npx shadcn-vue@latest init ``` ### Configure components.json @@ -89,14 +101,15 @@ You will be asked a few questions to configure `components.json`: ```txt showLineNumbers Would you like to use TypeScript (recommended)? no / yes +Which framework are you using? Astro Which style would you like to use? › Default Which color would you like to use as base color? › Slate -Where is your global CSS file? › › ./src/styles/globals.css +Where is your global CSS file? › src/styles/globals.css Do you want to use CSS variables for colors? › no / yes -Where is your tailwind.config.js located? › tailwind.config.cjs +Where is your tailwind.config located? › tailwind.config.mjs Configure the import alias for components: › @/components Configure the import alias for utils: › @/lib/utils -Are you using React Server Components? › no +Write configuration to components.json. Proceed? > Y/n ``` ### Import the globals.css file @@ -126,7 +139,7 @@ export default defineConfig({ You can now start adding components to your project. ```bash -npx shadcn-ui@latest add button +npx shadcn-vue@latest add button ``` The command above will add the `Button` component to your project. You can then import it like this: diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md index 68aa1088..b1a512ef 100644 --- a/apps/www/src/content/docs/installation/vite.md +++ b/apps/www/src/content/docs/installation/vite.md @@ -11,10 +11,10 @@ Start by creating a new Vue project using `vite`: ```bash # npm 6.x -npm create vite@latest my-vue-app --template vue +npm create vite@latest my-vue-app --template vue-ts # npm 7+, extra double-dash is needed: -npm create vite@latest my-vue-app -- --template vue +npm create vite@latest my-vue-app -- --template vue-ts ``` ### Add Tailwind and its configuration @@ -103,4 +103,4 @@ import { Button } from '@/components/ui/button' ``` - \ No newline at end of file + diff --git a/apps/www/src/examples/forms/components/ProfileForm.vue b/apps/www/src/examples/forms/components/ProfileForm.vue index a956903b..e53df428 100644 --- a/apps/www/src/examples/forms/components/ProfileForm.vue +++ b/apps/www/src/examples/forms/components/ProfileForm.vue @@ -139,7 +139,7 @@ const onSubmit = handleSubmit((values) => { -
diff --git a/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue b/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue new file mode 100644 index 00000000..d75b37d6 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue @@ -0,0 +1,49 @@ + + + diff --git a/apps/www/src/lib/registry/default/example/PaginationDemo.vue b/apps/www/src/lib/registry/default/example/PaginationDemo.vue new file mode 100644 index 00000000..be12cb91 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/PaginationDemo.vue @@ -0,0 +1,37 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue index 78f15c80..e90acfb6 100644 --- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue @@ -7,7 +7,11 @@ import { computed, nextTick, onMounted, ref } from 'vue' import { buttonVariants } from '../button' import { cn } from '@/lib/utils' -const props = withDefaults(defineProps< { +defineOptions({ + inheritAttrs: false, +}) + +const props = withDefaults(defineProps<{ modelValue?: string | number | Date | Partial<{ start: Date end: Date @@ -41,7 +45,6 @@ function handleNav(direction: 'prev' | 'next') { } onMounted(async () => { - await nextTick() await nextTick() if (modelValue.value instanceof Date && calendarRef.value) calendarRef.value.focusDate(modelValue.value) @@ -59,7 +62,16 @@ onMounted(async () => { - + diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue index 5618d73c..6bccf027 100644 --- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue +++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue @@ -1,7 +1,7 @@ @@ -15,7 +15,7 @@ defineOptions({ }) const id = useId() -provide(FORMI_TEM_INJECTION_KEY, id) +provide(FORM_ITEM_INJECTION_KEY, id) const { class: className, ...rest } = useAttrs() diff --git a/apps/www/src/lib/registry/default/ui/form/useFormField.ts b/apps/www/src/lib/registry/default/ui/form/useFormField.ts index 06b87fa9..73eeee3e 100644 --- a/apps/www/src/lib/registry/default/ui/form/useFormField.ts +++ b/apps/www/src/lib/registry/default/ui/form/useFormField.ts @@ -1,10 +1,10 @@ import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate' import { inject } from 'vue' -import { FORMI_TEM_INJECTION_KEY } from './FormItem.vue' +import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue' export function useFormField() { const fieldContext = inject(FieldContextKey) - const fieldItemContext = inject(FORMI_TEM_INJECTION_KEY) + const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY) const fieldState = { valid: useIsFieldValid(), diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue new file mode 100644 index 00000000..6d0174a7 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue @@ -0,0 +1,22 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue new file mode 100644 index 00000000..8820a747 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue @@ -0,0 +1,22 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue new file mode 100644 index 00000000..c92ad34b --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue @@ -0,0 +1,22 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue new file mode 100644 index 00000000..c58986d9 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue @@ -0,0 +1,22 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue new file mode 100644 index 00000000..018a17f8 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue @@ -0,0 +1,22 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/pagination/index.ts b/apps/www/src/lib/registry/default/ui/pagination/index.ts new file mode 100644 index 00000000..183ecbe9 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/pagination/index.ts @@ -0,0 +1,10 @@ +export { + PaginationRoot as Pagination, + PaginationList, + PaginationListItem, +} from 'radix-vue' +export { default as PaginationEllipsis } from './PaginationEllipsis.vue' +export { default as PaginationFirst } from './PaginationFirst.vue' +export { default as PaginationLast } from './PaginationLast.vue' +export { default as PaginationNext } from './PaginationNext.vue' +export { default as PaginationPrev } from './PaginationPrev.vue' diff --git a/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue b/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue new file mode 100644 index 00000000..564bb989 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue @@ -0,0 +1,49 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue new file mode 100644 index 00000000..a87c1a0e --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue @@ -0,0 +1,37 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue index 7ca169ad..899ebccd 100644 --- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue @@ -7,6 +7,10 @@ import { computed, nextTick, onMounted, ref } from 'vue' import { buttonVariants } from '../button' import { cn } from '@/lib/utils' +defineOptions({ + inheritAttrs: false, +}) + const props = withDefaults(defineProps< { modelValue?: string | number | Date | Partial<{ start: Date @@ -41,7 +45,6 @@ function handleNav(direction: 'prev' | 'next') { } onMounted(async () => { - await nextTick() await nextTick() if (modelValue.value instanceof Date && calendarRef.value) calendarRef.value.focusDate(modelValue.value) @@ -59,7 +62,16 @@ onMounted(async () => { - + diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue index 8b5f94ed..2e5feaf1 100644 --- a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue +++ b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue @@ -1,7 +1,7 @@ @@ -11,7 +11,7 @@ import { useId } from 'radix-vue' import { cn } from '@/lib/utils' const id = useId() -provide(FORMI_TEM_INJECTION_KEY, id) +provide(FORM_ITEM_INJECTION_KEY, id)