import { AntdMatchComponents, kebabCase } from './antdv' export interface IMatcher { pattern: RegExp styleDir: string } const matchComponents: IMatcher[] = [ { pattern: /^Avatar/, styleDir: 'Avatar' }, { pattern: /^AutoComplete/, styleDir: 'AutoComplete' }, { pattern: /^Anchor/, styleDir: 'Anchor' }, { pattern: /^Badge/, styleDir: 'Badge' }, { pattern: /^Breadcrumb/, styleDir: 'Breadcrumb' }, { pattern: /^Button/, styleDir: 'Button' }, { pattern: /^Checkbox/, styleDir: 'Checkbox' }, { pattern: /^CardSelect/, styleDir: 'CardSelect' }, { pattern: /^Card/, styleDir: 'Card' }, { pattern: /^Collapse/, styleDir: 'Collapse' }, { pattern: /^Descriptions/, styleDir: 'Descriptions' }, { pattern: /^RangePicker|^WeekPicker|^MonthPicker/, styleDir: 'DatePicker' }, { pattern: /^Dropdown/, styleDir: 'Dropdown' }, { pattern: /^Form/, styleDir: 'Form' }, { pattern: /^InputNumber/, styleDir: 'InputNumber' }, { pattern: /^Input|^Textarea/, styleDir: 'Input' }, { pattern: /^Statistic/, styleDir: 'Statistic' }, { pattern: /^CheckableTag/, styleDir: 'Tag' }, { pattern: /^TimeRangePicker/, styleDir: 'TimePicker' }, { pattern: /^Layout/, styleDir: 'Layout' }, { pattern: /^Menu|^SubMenu/, styleDir: 'Menu' }, { pattern: /^Table/, styleDir: 'Table' }, { pattern: /^TimePicker|^TimeRangePicker/, styleDir: 'TimePicker' }, { pattern: /^Radio/, styleDir: 'Radio' }, { pattern: /^Image/, styleDir: 'Image' }, { pattern: /^List/, styleDir: 'List' }, { pattern: /^Tab/, styleDir: 'Tabs' }, { pattern: /^Mentions/, styleDir: 'Mentions' }, { pattern: /^Step/, styleDir: 'Steps' }, { pattern: /^Skeleton/, styleDir: 'Skeleton' }, { pattern: /^Select|^SelectBoolean/, styleDir: 'Select' }, { pattern: /^TreeSelect/, styleDir: 'TreeSelect' }, { pattern: /^Tree|^DirectoryTree/, styleDir: 'Tree' }, { pattern: /^Typography/, styleDir: 'Typography' }, { pattern: /^Timeline/, styleDir: 'Timeline' }, { pattern: /^Upload/, styleDir: 'Upload' }, { pattern: /^ProTable/, styleDir: 'ProTable' }, { pattern: /^Search|^AdvancedSearch/, styleDir: 'Search' }, { pattern: /^Ellipsis/, styleDir: 'Ellipsis' }, { pattern: /^MonacoEditor/, styleDir: 'MonacoEditor' }, { pattern: /^ProLayout/, styleDir: 'ProLayout' }, { pattern: /^ScrollTable/, styleDir: 'ScrollTable' }, { pattern: /^TableCard/, styleDir: 'TableCard' }, { pattern: /^Scrollbar/, styleDir: 'Scrollbar' }, { pattern: /^AIcon/, styleDir: 'AIcon' }, { pattern: /^Tooltip/, styleDir: 'Tooltip' }, { pattern: /^Empty/, styleDir: 'Empty' }, { pattern: /^PopconfirmModal/, styleDir: 'PopconfirmModal' }, { pattern: /^Popconfirm/, styleDir: 'Popconfirm' }, { pattern: /^message/, styleDir: 'Message' }, { pattern: /^Notification/, styleDir: 'Notification' }, { pattern: /^DataTable/, styleDir: 'DataTable' }, { pattern: /^CheckButton/, styleDir: 'CheckButton' }, ] export interface JetlinksVueResolverOptions { /** * exclude components that do not require automatic import * * @default [] */ exclude?: string[] /** * import style along with components * * @default 'css' */ importStyle?: boolean | 'css' | 'less' /** * resolve `ant-design-vue' icons * * requires package `@ant-design/icons-vue` * * @default false */ resolveIcons?: boolean /** * @deprecated use `importStyle: 'css'` instead */ importCss?: boolean /** * @deprecated use `importStyle: 'less'` instead */ importLess?: boolean /** * use commonjs build default false */ cjs?: boolean packageName?: string } function getStyleDir(compName: string, _isAntd = false): string { let styleDir const components = _isAntd ? AntdMatchComponents : matchComponents const total = components.length for (let i = 0; i < total; i++) { const matcher = components[i] if (compName.match(matcher.pattern)) { styleDir = matcher.styleDir break } } if (!styleDir) styleDir = _isAntd ? kebabCase(compName) : compName return styleDir } function getSideEffects(compName: string, options: JetlinksVueResolverOptions, _isAntd = false): any { const { importStyle = true, importLess = false } = options if (!importStyle) return const lib = options.cjs ? 'lib' : 'es' const packageName = options?.packageName || 'jetlinks-ui-components' if (importStyle === 'less' || importLess) { const styleDir = getStyleDir(compName, _isAntd) return `${packageName}/${lib}/${styleDir}/style` } else { const styleDir = getStyleDir(compName, _isAntd) return `${packageName}/${lib}/${styleDir}/style/css` } } const filterName = ['message', 'Notification'] const primitiveNames = ['AIcon','Affix', 'Anchor', 'AnchorLink', 'message', 'Notification', 'AutoComplete', 'AutoCompleteOptGroup', 'AutoCompleteOption', 'Alert', 'Avatar', 'AvatarGroup', 'BackTop', 'Badge', 'BadgeRibbon', 'Breadcrumb', 'BreadcrumbItem', 'BreadcrumbSeparator', 'Button', 'ButtonGroup', 'Calendar', 'Card', 'CardGrid', 'CardMeta', 'Collapse', 'CollapsePanel', 'Carousel', 'Cascader', 'Checkbox', 'CheckboxGroup', 'Col', 'Comment', 'ConfigProvider', 'DatePicker', 'MonthPicker', 'WeekPicker', 'RangePicker', 'QuarterPicker', 'Descriptions', 'DescriptionsItem', 'Divider', 'Dropdown', 'DropdownButton', 'Drawer', 'Empty', 'Form', 'FormItem', 'FormItemRest', 'Grid', 'Input', 'InputGroup', 'InputPassword', 'InputSearch', 'Textarea', 'Image', 'ImagePreviewGroup', 'InputNumber', 'Layout', 'LayoutHeader', 'LayoutSider', 'LayoutFooter', 'LayoutContent', 'List', 'ListItem', 'ListItemMeta', 'Menu', 'MenuDivider', 'MenuItem', 'MenuItemGroup', 'SubMenu', 'Mentions', 'MentionsOption', 'Modal', 'Statistic', 'StatisticCountdown', 'PageHeader', 'Pagination', 'Popconfirm', 'Popover', 'Progress', 'Radio', 'RadioButton', 'RadioGroup', 'Rate', 'Result', 'Row', 'Select', 'SelectOptGroup', 'SelectOption', 'SelectBoolean', 'Skeleton', 'SkeletonButton', 'SkeletonAvatar', 'SkeletonInput', 'SkeletonImage', 'Slider', 'Space', 'Spin', 'Steps', 'Step', 'Switch', 'Table', 'TableColumn', 'TableColumnGroup', 'TableSummary', 'TableSummaryRow', 'TableSummaryCell', 'Transfer', 'Tree', 'TreeNode', 'DirectoryTree', 'TreeSelect', 'TreeSelectNode', 'Tabs', 'TabPane', 'Tag', 'CheckableTag', 'TimePicker', 'TimeRangePicker', 'Timeline', 'TimelineItem', 'Tooltip', 'Typography', 'TypographyLink', 'TypographyParagraph', 'TypographyText', 'TypographyTitle', 'Upload', 'UploadDragger', 'LocaleProvider', 'ProTable', 'Search', 'AdvancedSearch', 'Ellipsis', 'MonacoEditor', 'ProLayout', 'ScrollTable', 'TableCard', 'Scrollbar', 'CardSelect', 'PopconfirmModal', 'DataTable', 'DataTableArray', 'DataTableString', 'DataTableInteger', 'DataTableDouble', 'DataTableBoolean', 'DataTableEnum', 'DataTableFile', 'DataTableDate', 'DataTableTypeSelect', 'DataTableObject', 'CheckButton', ] const prefix = 'J' const proComponents = [ 'ProTable', 'Search', 'AdvancedSearch', 'Ellipsis', 'MonacoEditor', 'ProLayout', 'ScrollTable', 'TableCard', 'Scrollbar', 'CardSelect', 'PopconfirmModal', 'DataTable', 'DataTableArray', 'DataTableString', 'DataTableInteger', 'DataTableDouble', 'DataTableBoolean', 'DataTableEnum', 'DataTableFile', 'DataTableDate', 'DataTableTypeSelect', 'DataTableObject', 'CheckButton', 'ValueItem' ] let jetlinksNames: Set function genJetlinksNames(primitiveNames: string[]): void { jetlinksNames = new Set(primitiveNames.map(name => filterName.includes(name) ? name : `${prefix}${name}`)) } let antdvNames: Set function genAntdNames(primitiveNames: string[]): void { antdvNames = new Set(primitiveNames.map(name => `A${name}`)) } genAntdNames(primitiveNames.filter(key => !filterName.includes(key))) genJetlinksNames(primitiveNames) function isJetlinks(compName: string): boolean { return jetlinksNames.has(compName) } function isAntdv(compName: string): boolean { return antdvNames.has(compName) } export function JetlinksVueResolver(options: JetlinksVueResolverOptions = {}): any { return { type: 'component', resolve: (name: string) => { if (options.resolveIcons && name.match(/(Outlined|Filled|TwoTone)$/)) { return { name, from: '@ant-design/icons-vue' } } const _isJetlinks = isJetlinks(name) const _isAntd = isAntdv(name) if ((_isJetlinks || _isAntd) && !options?.exclude?.includes(name)) { // const importName = filterName.includes(name) ? name : name.slice(1) // // options.packageName = proComponents.includes(importName) ? 'jetlinks-ui-components' : 'ant-design-vue' // // const path = `${options.packageName}/${options.cjs ? 'lib' : 'es'}` // const stylePath = getSideEffects(importName, options, !proComponents.includes(importName)) const importName = filterName.includes(name) ? name : name.slice(1) options.packageName = _isJetlinks ? 'jetlinks-ui-components' : 'ant-design-vue' const path = `${options.packageName}/${options.cjs ? 'lib' : 'es'}` const stylePath = getSideEffects(importName, options, _isAntd) return { name: importName, from: path, sideEffects: stylePath } } } } }