@nxgt/material-vue 0.1.0

package/lib/components/ui/code/code-moonlight.css

@@ -0,0 +1,73 @@
+[data-slot="code-block"] {
+	background: var(--code-bg);
+	color: var(--code-fg);
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+[data-slot="code-block"] .hljs-comment,
+[data-slot="code-block"] .hljs-quote {
+	color: var(--code-comment);
+	font-style: italic;
+}
+
+[data-slot="code-block"] .hljs-keyword,
+[data-slot="code-block"] .hljs-selector-tag,
+[data-slot="code-block"] .hljs-literal {
+	color: var(--code-magenta);
+}
+
+[data-slot="code-block"] .hljs-string,
+[data-slot="code-block"] .hljs-addition {
+	color: var(--code-green);
+}
+
+[data-slot="code-block"] .hljs-number,
+[data-slot="code-block"] .hljs-built_in {
+	color: var(--code-orange);
+}
+
+[data-slot="code-block"] .hljs-title,
+[data-slot="code-block"] .hljs-section,
+[data-slot="code-block"] .hljs-name {
+	color: var(--code-blue);
+}
+
+[data-slot="code-block"] .hljs-attr,
+[data-slot="code-block"] .hljs-attribute,
+[data-slot="code-block"] .hljs-variable,
+[data-slot="code-block"] .hljs-template-variable {
+	color: var(--code-cyan);
+}
+
+[data-slot="code-block"] .hljs-type,
+[data-slot="code-block"] .hljs-class .hljs-title {
+	color: var(--code-yellow);
+}
+
+[data-slot="code-block"] .hljs-params {
+	color: var(--code-fg);
+}
+
+[data-slot="code-block"] .hljs-meta,
+[data-slot="code-block"] .hljs-doctag {
+	color: var(--code-comment);
+}
+
+[data-slot="code-block"] .hljs-tag {
+	color: var(--code-blue);
+}
+
+[data-slot="code-block"] .hljs-bullet,
+[data-slot="code-block"] .hljs-selector-id,
+[data-slot="code-block"] .hljs-selector-class {
+	color: var(--code-pink);
+}
+
+[data-slot="code-block"] .hljs-deletion,
+[data-slot="code-block"] .hljs-regexp {
+	color: var(--code-red);
+}
+
+[data-slot="code-block"] .code-line-highlighted {
+	background: var(--code-selection);
+}

package/lib/nuxt/component-names.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { COMPONENT_NAMES } from './component-names';
+
+describe('COMPONENT_NAMES', () => {
+	it('includes public overlays used by Nuxt auto-import', () => {
+		expect(COMPONENT_NAMES).toEqual(
+			expect.arrayContaining([
+				'Button',
+				'TextField',
+				'Autocomplete',
+				'DateRangeField',
+				'ActionCard',
+				'Field',
+			]),
+		);
+	});
+});

package/lib/nuxt/component-names.ts

@@ -0,0 +1,486 @@
+export const COMPONENT_NAMES = [
+	'Accordion',
+	'AccordionCard',
+	'AccordionComponent',
+	'AccordionContent',
+	'AccordionItem',
+	'AccordionItemEditForm',
+	'AccordionTrigger',
+	'ActionCard',
+	'ActionCardComponent',
+	'ActionCardItemEditForm',
+	'ActionCardSettingsForm',
+	'Activity',
+	'ActivityContent',
+	'ActivityLayout',
+	'AlertDialog',
+	'AlertDialogAction',
+	'AlertDialogCancel',
+	'AlertDialogContent',
+	'AlertDialogDescription',
+	'AlertDialogFooter',
+	'AlertDialogHeader',
+	'AlertDialogTitle',
+	'AlertDialogTrigger',
+	'AppBreadcrumb',
+	'AppHeader',
+	'AppSidebar',
+	'AreaChart',
+	'AttributeDialog',
+	'AttributeForm',
+	'AttributeValueFormField',
+	'AttributeValuesForm',
+	'AttributeValuesFormFieldSet',
+	'AttributesField',
+	'AttributesFormField',
+	'AttributesList',
+	'Autocomplete',
+	'AutocompleteFormField',
+	'Avatar',
+	'AvatarFallback',
+	'AvatarGroup',
+	'AvatarImage',
+	'Background',
+	'Badge',
+	'Banner',
+	'BarChart',
+	'Barecode',
+	'BottomAppBar',
+	'Breadcrumb',
+	'BreadcrumbEllipsis',
+	'BreadcrumbItem',
+	'BreadcrumbLink',
+	'BreadcrumbList',
+	'BreadcrumbPage',
+	'BreadcrumbSeparator',
+	'BubbleMenu',
+	'Button',
+	'ButtonGroup',
+	'Calendar',
+	'CalendarCell',
+	'CalendarCellTrigger',
+	'CalendarGrid',
+	'CalendarGridBody',
+	'CalendarGridHead',
+	'CalendarGridRow',
+	'CalendarHeadCell',
+	'CalendarHeader',
+	'CalendarHeading',
+	'CalendarNextButton',
+	'CalendarPrevButton',
+	'CalloutComponent',
+	'CalloutEditForm',
+	'CalloutInsertMenu',
+	'Card',
+	'CardAction',
+	'CardContent',
+	'CardDescription',
+	'CardFooter',
+	'CardHeader',
+	'CardTitle',
+	'Carousel',
+	'CarouselContent',
+	'CarouselItem',
+	'CarouselNext',
+	'CarouselPrevious',
+	'ChartContainer',
+	'ChatComposer',
+	'ChatComposerAttachmentChip',
+	'ChatComposerAttachmentList',
+	'ChatComposerAttachments',
+	'ChatConversationItem',
+	'ChatMarkdown',
+	'ChatMessage',
+	'ChatMessageList',
+	'ChatMessageSeparator',
+	'ChatReactionGroup',
+	'ChatThread',
+	'ChatTypingIndicator',
+	'CheckCardField',
+	'CheckCardFormField',
+	'Checkbox',
+	'CheckboxGroup',
+	'CheckboxGroupEditForm',
+	'CheckboxGroupFormField',
+	'CheckboxGroupNodeComponent',
+	'Chip',
+	'CircularProgress',
+	'CodeBlock',
+	'CodeDiff',
+	'CodeEditor',
+	'Collapsible',
+	'CollapsibleContent',
+	'CollapsibleTrigger',
+	'ColorField',
+	'ColorFormField',
+	'ColorPickerPopover',
+	'ComboboxField',
+	'ComboboxFormField',
+	'Command',
+	'CommandDialog',
+	'CommandEmpty',
+	'CommandGroup',
+	'CommandInput',
+	'CommandItem',
+	'CommandList',
+	'CommandSeparator',
+	'CommandShortcut',
+	'ContactDialog',
+	'ContactItem',
+	'Contacts',
+	'ContactsFormField',
+	'ContextMenu',
+	'ContextMenuCheckboxItem',
+	'ContextMenuContent',
+	'ContextMenuGroup',
+	'ContextMenuItem',
+	'ContextMenuLabel',
+	'ContextMenuRadioGroup',
+	'ContextMenuRadioItem',
+	'ContextMenuSeparator',
+	'ContextMenuShortcut',
+	'ContextMenuSub',
+	'ContextMenuSubContent',
+	'ContextMenuSubTrigger',
+	'ContextMenuTrigger',
+	'CopyButton',
+	'CountBadge',
+	'CountryField',
+	'CountryFormField',
+	'CurrencyField',
+	'CurrencyFormField',
+	'DataTable',
+	'DataTableColumnHeader',
+	'DataTablePagination',
+	'DataTableViewOptions',
+	'DateField',
+	'DateFormField',
+	'DateRangeField',
+	'DateRangeFormField',
+	'Description',
+	'Dialog',
+	'DialogClose',
+	'DialogContent',
+	'DialogDescription',
+	'DialogFooter',
+	'DialogHeader',
+	'DialogOverlay',
+	'DialogScrollContent',
+	'DialogTitle',
+	'DialogTrigger',
+	'DndOverlay',
+	'DndProvider',
+	'DragHandle',
+	'Draggable',
+	'DraggableDroppable',
+	'Drawer',
+	'DrawerClose',
+	'DrawerContent',
+	'DrawerDescription',
+	'DrawerFooter',
+	'DrawerHeader',
+	'DrawerOverlay',
+	'DrawerTitle',
+	'DrawerTrigger',
+	'DropdownMenu',
+	'DropdownMenuCheckboxItem',
+	'DropdownMenuContent',
+	'DropdownMenuGroup',
+	'DropdownMenuItem',
+	'DropdownMenuLabel',
+	'DropdownMenuRadioGroup',
+	'DropdownMenuRadioItem',
+	'DropdownMenuSeparator',
+	'DropdownMenuShortcut',
+	'DropdownMenuSub',
+	'DropdownMenuSubContent',
+	'DropdownMenuSubTrigger',
+	'DropdownMenuTrigger',
+	'Droppable',
+	'DurationField',
+	'DurationFormField',
+	'EditorAccordionWrapper',
+	'EditorActionCardWrapper',
+	'EditorCheckboxGroupWrapper',
+	'EditorCodeBlock',
+	'EditorColorWrapper',
+	'EditorFontFamilyWrapper',
+	'EditorGalleryWrapper',
+	'EditorHighlightWrapper',
+	'EditorImageWrapper',
+	'EditorLinkWrapper',
+	'EditorMarkButtons',
+	'EditorRadioGroupWrapper',
+	'EditorSelectCardWrapper',
+	'EditorSelectChipWrapper',
+	'EditorTableWrapper',
+	'EditorTextAlignWrapper',
+	'EditorYoutubeWrapper',
+	'EmailField',
+	'EmailFormField',
+	'EmojiList',
+	'EmojiPicker',
+	'EntityHeader',
+	'EventCalendar',
+	'EventChip',
+	'ExtendedLabel',
+	'Field',
+	'FileList',
+	'FileListField',
+	'FileListFormField',
+	'FileListS3Field',
+	'FileListS3FormField',
+	'FilterChips',
+	'FilterFormField',
+	'FilterPresets',
+	'FilterTrigger',
+	'FunnelChart',
+	'Gallery',
+	'GalleryComponent',
+	'GalleryEditForm',
+	'HeadingWrapper',
+	'HeatmapChart',
+	'HelperText',
+	'HoverCard',
+	'HoverCardContent',
+	'HoverCardTrigger',
+	'HydrateLoading',
+	'Icon',
+	'IconButton',
+	'IconLinkButton',
+	'ImageCropper',
+	'ImageCropperDialog',
+	'ImageField',
+	'ImageFormField',
+	'ImageS3Field',
+	'ImageS3FormField',
+	'InlineEdit',
+	'Input',
+	'InputGroup',
+	'InputGroupAddon',
+	'InputGroupButton',
+	'InputGroupField',
+	'InputGroupFormField',
+	'InputGroupInput',
+	'InputGroupText',
+	'InputGroupTextarea',
+	'InputOTP',
+	'InputOTPGroup',
+	'InputOTPSeparator',
+	'InputOTPSlot',
+	'JsonViewer',
+	'Kanban',
+	'Kbd',
+	'KbdShortcut',
+	'Label',
+	'LanguageSwitcher',
+	'LightboxGallery',
+	'LineChart',
+	'LinkButton',
+	'ListTile',
+	'LoadMoreButton',
+	'MentionList',
+	'Menubar',
+	'MenubarCheckboxItem',
+	'MenubarContent',
+	'MenubarGroup',
+	'MenubarItem',
+	'MenubarLabel',
+	'MenubarMenu',
+	'MenubarRadioGroup',
+	'MenubarRadioItem',
+	'MenubarSeparator',
+	'MenubarShortcut',
+	'MenubarSub',
+	'MenubarSubContent',
+	'MenubarSubTrigger',
+	'MenubarTrigger',
+	'MiniGallery',
+	'NativeSelect',
+	'NativeSelectOptGroup',
+	'NativeSelectOption',
+	'NavigationRail',
+	'NetworkUploadField',
+	'NetworkUploadFormField',
+	'Notifications',
+	'NumberField',
+	'NumberFormField',
+	'OpeningHours',
+	'OpeningHoursDialog',
+	'OpeningHoursFormField',
+	'OpeningHoursItem',
+	'OtpField',
+	'OtpFormField',
+	'Pagination',
+	'PaginationContent',
+	'PaginationEllipsis',
+	'PaginationFirst',
+	'PaginationItem',
+	'PaginationLast',
+	'PaginationNext',
+	'PaginationPrevious',
+	'PasswordField',
+	'PasswordFormField',
+	'PercentField',
+	'PercentFormField',
+	'PhoneField',
+	'PhoneFormField',
+	'PieChart',
+	'Popover',
+	'PopoverAnchor',
+	'PopoverContent',
+	'PopoverTrigger',
+	'PostalAddress',
+	'PostalAddressDialog',
+	'PostalAddressFormField',
+	'PrintBadge',
+	'PrintCard',
+	'PrintCardField',
+	'PrintHeader',
+	'PrintInfoRow',
+	'PrintSection',
+	'PrintTable',
+	'PrintTableCell',
+	'PrintTableHeader',
+	'PrintTableRow',
+	'PrintTotalRow',
+	'PrintTotals',
+	'Progress',
+	'QRCode',
+	'QuestionCard',
+	'Quiz',
+	'RadarChart',
+	'RadioGroup',
+	'RadioGroupEditForm',
+	'RadioGroupField',
+	'RadioGroupFormField',
+	'RadioGroupItem',
+	'RadioGroupNodeComponent',
+	'RatingField',
+	'RatingFormField',
+	'RelativeTime',
+	'RepeatingFieldList',
+	'ResizableHandle',
+	'ResizablePanel',
+	'ResizablePanelGroup',
+	'ResponsiveButton',
+	'ResponsiveGrid',
+	'ResponsiveLinkButton',
+	'RichTextEditor',
+	'RichTextEditorFormField',
+	'S3UploadField',
+	'S3UploadFormField',
+	'ScatterChart',
+	'ScrollArea',
+	'ScrollBar',
+	'ScrollToTop',
+	'SearchField',
+	'SearchFormField',
+	'Select',
+	'SelectCardField',
+	'SelectCardFormField',
+	'SelectCardItemEditForm',
+	'SelectCardNodeComponent',
+	'SelectCardSettingsForm',
+	'SelectChipEditForm',
+	'SelectChipField',
+	'SelectChipFormField',
+	'SelectChipNodeComponent',
+	'SelectContent',
+	'SelectField',
+	'SelectFormField',
+	'SelectGroup',
+	'SelectItem',
+	'SelectItemText',
+	'SelectLabel',
+	'SelectScrollDownButton',
+	'SelectScrollUpButton',
+	'SelectSeparator',
+	'SelectTrigger',
+	'SelectValue',
+	'Separator',
+	'Sheet',
+	'SheetClose',
+	'SheetContent',
+	'SheetDescription',
+	'SheetFooter',
+	'SheetHeader',
+	'SheetTitle',
+	'SheetTrigger',
+	'Sidebar',
+	'SidebarContent',
+	'SidebarFooter',
+	'SidebarHeader',
+	'SidebarMenuItem',
+	'SidebarMenuLabel',
+	'Skeleton',
+	'Slider',
+	'SliderField',
+	'SliderFormField',
+	'Sortable',
+	'SortableList',
+	'SortableListFormField',
+	'SortableProvider',
+	'Spinner',
+	'SplitButton',
+	'StatCard',
+	'StatusIndicator',
+	'Stepper',
+	'StxPlayerControls',
+	'StxPlayerExtras',
+	'StxPlayerMini',
+	'StxPlayerProvider',
+	'StxPlayerQueue',
+	'StxPlayerViewport',
+	'SummaryData',
+	'Switch',
+	'SwitchField',
+	'SwitchFormField',
+	'Switcher',
+	'Table',
+	'TableBody',
+	'TableCaption',
+	'TableCell',
+	'TableEmpty',
+	'TableFooter',
+	'TableHead',
+	'TableHeader',
+	'TablePropertiesForm',
+	'TableRow',
+	'Tabs',
+	'TabsContent',
+	'TabsList',
+	'TabsTrigger',
+	'TextField',
+	'TextFormField',
+	'Textarea',
+	'TextareaField',
+	'TextareaFormField',
+	'ThemeToggle',
+	'ThreadLayout',
+	'TimeField',
+	'TimeFormField',
+	'TimePicker',
+	'Timeline',
+	'TimelineItem',
+	'TimezoneField',
+	'TimezoneFormField',
+	'Toaster',
+	'Toggle',
+	'ToggleGroup',
+	'ToggleGroupItem',
+	'Tooltip',
+	'TooltipContent',
+	'TooltipProvider',
+	'TooltipTrigger',
+	'TopAppBar',
+	'TransferList',
+	'TransferListFormField',
+	'Tree',
+	'TreeItem',
+	'Typography',
+	'UploadField',
+	'UploadFormField',
+	'UrlField',
+	'UrlFormField',
+] as const;

package/lib/nuxt/module.ts

@@ -0,0 +1,94 @@
+import {
+	addComponent,
+	addImports,
+	addPlugin,
+	createResolver,
+	defineNuxtModule,
+} from '@nuxt/kit';
+import { COMPONENT_NAMES } from './component-names';
+
+export type ModuleOptions = {
+	/** Prepended to auto-imported component names. Empty by default. */
+	prefix?: string;
+	/** Inject `@nxgt/material-vue/styles.css`. Default true. */
+	css?: boolean;
+	/** Auto-import PascalCase components. Default true. */
+	components?: boolean;
+	/** Auto-import composables and i18n helpers. Default true. */
+	imports?: boolean;
+};
+
+export default defineNuxtModule<ModuleOptions>({
+	meta: {
+		name: '@nxgt/material-vue',
+		configKey: 'nxgtMaterial',
+		compatibility: { nuxt: '>=3.13.0' },
+	},
+	defaults: {
+		prefix: '',
+		css: true,
+		components: true,
+		imports: true,
+	},
+	setup(
+		options: ModuleOptions,
+		nuxt: { options: { build: { transpile: string[] }; css: string[] } },
+	) {
+		const resolver = createResolver(import.meta.url);
+
+		nuxt.options.build.transpile.push('@nxgt/material-vue');
+
+		if (options.css !== false) {
+			nuxt.options.css.push('@nxgt/material-vue/styles.css');
+		}
+
+		if (options.components !== false) {
+			for (const name of COMPONENT_NAMES) {
+				addComponent({
+					name: `${options.prefix ?? ''}${name}`,
+					export: name,
+					filePath: '@nxgt/material-vue/components',
+				});
+			}
+		}
+
+		if (options.imports !== false) {
+			for (const name of COMPOSABLE_IMPORTS) {
+				addImports({
+					name,
+					as: name,
+					from: '@nxgt/material-vue/composables',
+				});
+			}
+			for (const name of I18N_IMPORTS) {
+				addImports({
+					name,
+					as: name,
+					from: '@nxgt/material-vue/i18n',
+				});
+			}
+		}
+
+		addPlugin(resolver.resolve('./runtime/plugin'));
+	},
+});
+
+const COMPOSABLE_IMPORTS = [
+	'useTheme',
+	'useIsMobile',
+	'useIsClient',
+	'useLocalizedDate',
+	'useNavigation',
+	'useNumberFormatter',
+	'useOptions',
+	'useSearchParam',
+	'useAllowedTransitions',
+	'resolveTheme',
+	'applyResolvedTheme',
+] as const;
+
+const I18N_IMPORTS = [
+	'useMaterialTranslation',
+	'useTypedTranslation',
+	'useOptionalI18nContext',
+] as const;

package/lib/nuxt/runtime/plugin.ts

@@ -0,0 +1,9 @@
+import { createPinia, getActivePinia } from 'pinia';
+import { defineNuxtPlugin } from '#imports';
+
+export default defineNuxtPlugin((nuxtApp) => {
+	if (getActivePinia() || (nuxtApp as { $pinia?: unknown }).$pinia) return;
+	const pinia = createPinia();
+	nuxtApp.vueApp.use(pinia);
+	nuxtApp.provide('pinia', pinia);
+});