feat(projects): add Nuxt module and resolver components with updated paths and types

Author: honghuangdc

headless/src/nuxt/index.ts

@@ -7,8 +7,8 @@ export interface ModuleOptions {
 
 export default defineNuxtModule({
   meta: {
-    name: 'soybean-headless/nuxt',
-    configKey: 'soybean-headless',
+    name: '@soybeanjs/headless/nuxt',
+    configKey: '@soybeanjs/headless',
     compatibility: {
       nuxt: '>=3.14'
     }
@@ -35,7 +35,7 @@ export default defineNuxtModule({
       addComponent({
         name: `${component}`,
         export: component,
-        filePath: 'soybean-headless'
+        filePath: '@soybeanjs/headless'
       });
     }
   }

headless/src/resolver/index.ts

@@ -1,14 +1,14 @@
 import type { ComponentResolver } from 'unplugin-vue-components';
 import { components } from '../constants';
-import { toKebabCase } from '../shared';
+import { toKebabCase, toPascalCase } from '../shared';
 
 export interface ResolverOptions {
   /**
    * Whether to use standalone components
    *
-   * "true" means use `import { AccordionRoot } from 'soybean-headless/accordion'`
+   * "true" means use `import { AccordionRoot } from '@soybeanjs/headless/accordion'`
    *
-   * "false" means use `import { AccordionRoot } from 'soybean-headless'`
+   * "false" means use `import { AccordionRoot } from '@soybeanjs/headless'`
    *
    * @defaultValue false
    */
@@ -20,14 +20,15 @@ function createResolver(options: ResolverOptions = {}) {
     type: 'component',
     resolve: (name: string) => {
       const values = Object.values(components).flat();
+      const $name = toPascalCase(name);
 
-      if (values.includes(name)) {
-        const moduleName = toKebabCase(name).split('-')[0];
+      if (values.includes($name)) {
+        const moduleName = toKebabCase($name).split('-')[0];
 
-        const $from = options.standalone ? `soybean-headless/${moduleName}` : `soybean-headless`;
+        const $from = options.standalone ? `@soybeanjs/headless/${moduleName}` : `@soybeanjs/headless`;
 
         return {
-          name,
+          name: $name,
           from: $from
         };
       }

package.json

@@ -27,6 +27,16 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./nuxt": {
+      "types": "./dist/nuxt/index.d.ts",
+      "import": "./dist/nuxt/index.js",
+      "require": "./dist/nuxt/index.js"
+    },
+    "./resolver": {
+      "types": "./dist/resolver/index.d.ts",
+      "import": "./dist/resolver/index.js",
+      "require": "./dist/resolver/index.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "main": "./dist/index.js",

src/constants/components.ts

@@ -0,0 +1,46 @@
+export const components = {
+  accordion: ['SAccordion'],
+  alertDialog: ['SAlertDialog', 'SAlertDialogCancel', 'SAlertDialogAction'],
+  alert: ['SAlert'],
+  arrow: ['SArrow'],
+  avatar: ['SAvatar'],
+  card: ['SCard'],
+  breadcrumb: ['SBreadcrumb', 'SBreadcrumbPage', 'SBreadcrumbEllipsis'],
+  checkbox: ['SCheckboxGroup', 'SCheckbox', 'SCheckboxCardGroup', 'SCheckboxCard'],
+  badge: ['SBadge'],
+  collapsible: ['SCollapsible', 'SCollapsibleContent', 'SCollapsibleTrigger'],
+  configProvider: ['SConfigProvider'],
+  button: ['SButton', 'SButtonLoading', 'SButtonIcon', 'SButtonLink', 'SButtonGroup'],
+  command: ['SCommand'],
+  dialog: ['SDialog', 'SDialogClose', 'SDialogPure'],
+  aspectRatio: ['SAspectRatio'],
+  contextMenu: ['SContextMenu', 'SContextMenuCheckbox', 'SContextMenuRadio', 'SContextMenuWrapper'],
+  drawer: ['SDrawer', 'SDrawerClose'],
+  form: ['SForm', 'SFormField', 'SFormFieldArray'],
+  dropdownMenu: ['SDropdownMenu', 'SDropdownMenuCheckbox', 'SDropdownMenuRadio', 'SDropdownMenuWrapper'],
+  input: ['SInput'],
+  kbd: ['SKbd'],
+  label: ['SLabel'],
+  icon: ['SIcon'],
+  layout: ['SLayout', 'SLayoutTrigger'],
+  link: ['SLink'],
+  list: ['SList', 'SListItem'],
+  menu: ['SMenuOption', 'SMenuOptions', 'SMenuCheckboxOptions', 'SMenuRadioOptions'],
+  navigationMenu: ['SNavigationMenu'],
+  pagination: ['SPagination'],
+  numberInput: ['SNumberInput'],
+  password: ['SPassword'],
+  popover: ['SPopover'],
+  radioGroup: ['SRadioGroup', 'SRadio', 'SRadioCard', 'SRadioCardGroup'],
+  segment: ['SSegment'],
+  separator: ['SSeparator'],
+  switch: ['SSwitch'],
+  tabs: ['STabs'],
+  select: ['SSelect'],
+  textarea: ['STextarea'],
+  tag: ['STag'],
+  tooltip: ['STooltip'],
+  treeMenu: ['STreeMenu', 'STreeMenuItemWrapper'],
+  tree: ['STree', 'STreeVirtualizer'],
+  virtualizer: ['SVirtualizer']
+};

src/nuxt/index.ts

@@ -0,0 +1,42 @@
+import { addComponent, defineNuxtModule } from '@nuxt/kit';
+import { components } from '../constants/components';
+
+export interface ModuleOptions {
+  components: Partial<Record<keyof typeof components, boolean>> | boolean;
+}
+
+export default defineNuxtModule({
+  meta: {
+    name: '@soybeanjs/ui/nuxt',
+    configKey: '@soybeanjs/ui',
+    compatibility: {
+      nuxt: '>=3.14'
+    }
+  },
+  defaults: {
+    components: true
+  },
+  setup(options: ModuleOptions) {
+    function getComponents() {
+      if (typeof options.components === 'object') {
+        return Object.entries(components)
+          .filter(([name]) => (options.components as Record<string, boolean>)[name])
+          .flatMap(([_, _components]) => _components);
+      }
+
+      if (options.components) {
+        return Object.values(components).flat();
+      }
+
+      return [];
+    }
+
+    for (const component of getComponents()) {
+      addComponent({
+        name: `${component}`,
+        export: component,
+        filePath: '@soybeanjs/ui'
+      });
+    }
+  }
+});

src/resolver/index.ts

@@ -0,0 +1,26 @@
+import type { ComponentResolver } from 'unplugin-vue-components';
+import { components } from '../constants/components';
+
+function createResolver() {
+  const resolver: ComponentResolver = {
+    type: 'component',
+    resolve: (name: string) => {
+      const values = Object.values(components).flat();
+
+      const $name = name.replace(/(^\w|-\w)/g, char => char.replace('-', '').toUpperCase());
+
+      if (values.includes($name)) {
+        return {
+          name: $name,
+          from: '@soybeanjs/ui'
+        };
+      }
+
+      return null;
+    }
+  };
+
+  return resolver;
+}
+
+export default createResolver;

tsdown.config.ts

@@ -5,7 +5,7 @@ import pkg from './package.json' with { type: 'json' };
 import headlessPkg from './headless/package.json' with { type: 'json' };
 
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: ['src/index.ts', 'src/nuxt/index.ts', 'src/resolver/index.ts'],
   platform: 'neutral',
   external: [
     ...Object.keys(headlessPkg.dependencies),