diff --git a/README.md b/README.md
index 20bdb2ef..7e7e0307 100644
--- a/README.md
+++ b/README.md
@@ -166,6 +166,7 @@ We have several built-in resolvers for popular UI libraries like **Vuetify**, **
Supported Resolvers:
- [Ant Design Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts)
+- [Arco Design Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/arco.ts)
- [Element Plus](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts)
- [Element UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-ui.ts)
- [Headless UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/headless-ui.ts)
diff --git a/src/core/resolvers/arco.ts b/src/core/resolvers/arco.ts
new file mode 100644
index 00000000..1b2dccc0
--- /dev/null
+++ b/src/core/resolvers/arco.ts
@@ -0,0 +1,179 @@
+import { ComponentResolver } from '../../types'
+import { kebabCase } from '../utils'
+
+const matchComponents = [
+ {
+ pattern: /^AnchorLink$/,
+ componentDir: 'anchor',
+ },
+ {
+ pattern: /^AvatarGroup$/,
+ componentDir: 'avatar',
+ },
+ {
+ pattern: /^BreadcrumbItem$/,
+ componentDir: 'breadcrumb',
+ },
+
+ {
+ pattern: /^ButtonGroup$/,
+ componentDir: 'button',
+ },
+ {
+ pattern: /^(CardMeta|CardGrid)$/,
+ componentDir: 'card',
+ },
+ {
+ pattern: /^CarouselItem$/,
+ componentDir: 'carousel',
+ },
+ {
+ pattern: /^CheckboxGroup$/,
+ componentDir: 'checkbox',
+ },
+ {
+ pattern: /^CollapseItem$/,
+ componentDir: 'collapse',
+ },
+ {
+ pattern: /^(WeekPicker|MonthPicker|YearPicker|QuarterPicker|RangePicker)$/,
+ componentDir: 'date-picker',
+ },
+ {
+ pattern: /^(Doption|Dgroup|Dsubmenu)$/,
+ componentDir: 'dropdown',
+ },
+ {
+ pattern: /^FormItem$/,
+ componentDir: 'form',
+ },
+ {
+ pattern: /^(Col|Row)$/,
+ componentDir: 'grid',
+ },
+
+ {
+ pattern: /^(ImagePreview|ImagePreviewGroup)$/,
+ componentDir: 'image',
+ },
+ {
+ pattern: /^(InputGroup|InputSearch|InputPassword)$/,
+ componentDir: 'input',
+ },
+
+ {
+ pattern: /^(LayoutHeader|LayoutContent|LayoutFooter|LayoutSider)$/,
+ componentDir: 'layout',
+ },
+ {
+ pattern: /^(ListItem|ListItemMeta)$/,
+ componentDir: 'list',
+ },
+ {
+ pattern: /^(MenuItem|MenuItemGroup|SubMenu)$/,
+ componentDir: 'menu',
+ },
+ {
+ pattern: /^RadioGroup$/,
+ componentDir: 'radio',
+ },
+ {
+ pattern: /^(Option|Optgroup)$/,
+ componentDir: 'select',
+ },
+
+ {
+ pattern: /^(SkeletonLine|SkeletonShape)$/,
+ componentDir: 'table',
+ },
+ {
+ pattern: /^Countdown$/,
+ componentDir: 'statistic',
+ },
+
+ {
+ pattern: /^Step$/,
+ componentDir: 'steps',
+ },
+
+ {
+ pattern: /^(Thead|Td|Th|Tr|Tbody|TableColumn)$/,
+ componentDir: 'table',
+ },
+
+ {
+ pattern: /^TabPane$/,
+ componentDir: 'tabs',
+ },
+ {
+ pattern: /^TimelineItem$/,
+ componentDir: 'timeline',
+ },
+
+ {
+ pattern: /^(TypographyParagraph|TypographyTitle|TypographyText)$/,
+ componentDir: 'typography',
+ },
+]
+
+function getComponentStyleDir(importName: string, importStyle: boolean | 'css' | 'less') {
+ let componentDir = kebabCase(importName)
+ for (const item of matchComponents) {
+ if (item.pattern.test(importName)) {
+ componentDir = item.componentDir
+ break
+ }
+ }
+ if (importStyle === 'less') return `@arco-design/web-vue/es/${componentDir}/style/index.js`
+ if (importStyle === 'css' || importStyle) return `@arco-design/web-vue/es/${componentDir}/style/css.js`
+}
+
+export interface ArcoResolverOptions {
+ /**
+ * import style css or less with components
+ *
+ * @default 'css'
+ */
+ importStyle?: boolean | 'css' | 'less'
+ /**
+ * resolve icons
+ *
+ * @default false
+ */
+ resolveIcons?: boolean
+}
+
+/**
+ * Resolver for Arco Design Vue
+ *
+ * Requires arco-design/web-vue@2.11.0 or later
+ *
+ * @author @flsion
+ * @link https://arco.design/ for arco-design
+ *
+ */
+export function ArcoResolver(
+ options: ArcoResolverOptions = {},
+): ComponentResolver {
+ return {
+ type: 'component',
+ resolve: (name: string) => {
+ if (options.resolveIcons && name.match(/^Icon/)) {
+ return {
+ importName: name,
+ path: '@arco-design/web-vue/es/icon',
+ }
+ }
+ if (name.match(/^A/)) {
+ const importStyle = options.importStyle ?? 'css'
+
+ const importName = name.slice(1)
+ return {
+ importName,
+ path: '@arco-design/web-vue',
+ sideEffects: getComponentStyleDir(importName, importStyle),
+ }
+ }
+ },
+ }
+}
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy