fix :merge dev

Author: chenxi24

packages/devui-vue/.eslintrc.js

@@ -1,33 +1,29 @@
 module.exports = {
- parser: 'vue-eslint-parser',
+ root: true,
+ parser: '@typescript-eslint/parser',
  parserOptions: {
- parser: '@typescript-eslint/parser',
  sourceType: 'module',
  ecmaVersion: 6,
  ecmaFeatures: {
  jsx: true,
- tsx: true,
- },
+ tsx: true
+ }
  },
  env: {
  browser: true,
  node: true,
  jest: true,
- es6: true,
+ es6: true
  },
  plugins: ['@typescript-eslint'],
  extends: [
  'plugin:@typescript-eslint/recommended',
  'plugin:vue/vue3-recommended',
  'plugin:import/recommended',
- 'plugin:import/typescript',
+ 'plugin:import/typescript'
  ],
  rules: {
- quotes: [
- 'error',
- 'single',
- { avoidEscape: true, allowTemplateLiterals: true },
- ],
+ quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
  'no-undef': 2,
  'vue/max-attributes-per-line': 'off',
  'vue/no-multiple-template-root': 'off',
@@ -38,13 +34,15 @@ module.exports = {
  {
  multiline: {
  delimiter: 'none',
- requireLast: false,
+ requireLast: false
  },
  singleline: {
  delimiter: 'semi',
- requireLast: true,
- },
- },
+ requireLast: true
+ }
+ }
  ],
- },
+ 'no-unused-vars': 'off',
+ '@typescript-eslint/no-unused-vars': ['error']
+ }
 }

packages/devui-vue/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd ./packages/devui-vue && npx commitlint --edit $1

packages/devui-vue/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd ./packages/devui-vue && npx @ls-lint/ls-lint && npx lint-staged

packages/devui-vue/devui-cli/commands/generate-dts.js

@@ -0,0 +1,38 @@
+const path = require('path')
+const fs = require('fs')
+const fse = require('fs-extra')
+const logger = require('../shared/logger')
+
+const entryDir = path.resolve(__dirname, '../../devui')
+const outputDir = path.resolve(__dirname, '../../build')
+
+function generateIndexDts(buildDir) {
+ const fileStr = `import { App } from 'vue';
+ declare function install(app: App): void
+ declare const _default: {
+ install: typeof install;
+ version: string;
+ };
+ export default _default;`
+ fse.outputFileSync(path.resolve(buildDir, 'index.d.ts'), fileStr, 'utf8')
+}
+
+exports.generateDts = () => {
+ generateIndexDts(outputDir)
+
+ const components = fs.readdirSync(entryDir).filter(name => {
+ const componentDir = path.resolve(entryDir, name)
+ const isDir = fs.lstatSync(componentDir).isDirectory()
+ return isDir && fs.readdirSync(componentDir).includes('index.ts')
+ })
+ const srcDts = path.resolve(outputDir, 'index.d.ts')
+
+ for(const name of components) {
+ const destDts = path.resolve(outputDir, `${name}/index.d.ts`)
+ fs.copyFile(srcDts, destDts, (err) => {
+ if (err) {
+ logger.error(`拷贝组件${name}的ts类型文件失败！`)
+ }
+ })
+ }
+}

packages/devui-vue/devui-cli/index.js

@@ -3,6 +3,7 @@ const { Command } = require('commander')
 const { create, validateCreateType } = require('./commands/create')
 const { build } = require('./commands/build')
 const { generateTheme } = require('./commands/generate-theme')
+const { generateDts } = require('./commands/generate-dts')
 const { VERSION, CREATE_SUPPORT_TYPES } = require('./shared/constant')
 
 const program = new Command()
@@ -18,11 +19,18 @@ program
 program
  .command('build')
  .description('打包组件库')
+ .hook('postAction', generateTheme)
+ .hook('postAction', generateDts)
  .action(build)
 
 program
  .command('generate:theme')
  .description('生成主题变量文件')
  .action(generateTheme)
 
+program
+ .command('generate:dts')
+ .description('生成ts类型文件')
+ .action(generateDts)
+
 program.parse().version(VERSION)

packages/devui-vue/devui/accordion/src/accordion-list.tsx

@@ -1,59 +1,84 @@
-import { defineComponent } from 'vue'
-import { AccordionMenuItem } from './accordion.type'
+import { defineComponent, toRefs } from 'vue'
+import type { AccordionMenuItem } from './accordion.type'
+import DAccordionMenu from './accordion-menu'
+import { accordionProps } from './accordion-types'
+
 
 export default defineComponent({
  name: 'DAccordionList',
  inheritAttrs: false,
+ components: {
+ DAccordionMenu
+ },
  props: {
- data: { 
+ data: {
  type: Array as () => Array<AccordionMenuItem>,
  default: null
  },
  deepth: {
  type: Number,
  default: 0
  },
- parent: { 
+ parent: {
  type: Object as () => AccordionMenuItem,
  default: null
  },
  innerListTemplate: Boolean,
+ ...accordionProps,
  },
- setup(props, ctx) {
+ setup(props, {attrs, slots}) {
+ const {
+ childrenKey,
+ innerListTemplate,
+ deepth
+ } = toRefs(props)
  return () => {
- return (!props.innerListTemplate || props.deepth === 0) && <ul class="devui-accordion-list" {...ctx.attrs}>
- { props.data.map(item => {
- return <li class="devui-accordion-item" key={item.title}>
- {
- // TODO 菜单类型 d-accordion-menu
- }
- <div class="devui-accordion-menu-item open" title={item.title}>
- <div title={item.title} class={`devui-accordion-item-title devui-over-flow-ellipsis open`}>{ item.title }</div>
- {
- // TODO 子菜单 d-accordion-list
+ return (
+ <>
+ {
+ !innerListTemplate.value &&
+ <ul class="devui-accordion-list" {...attrs}>
+ {props.data.map(item => {
+ return <li class="devui-accordion-item" key={item.title}>
+ {/* // TODO 菜单类型 d-accordion-menu */}
+ {childrenKey !== undefined && <d-accordion-menu item={item} deepth={props.deepth} parent={props.parent} {...accordionProps}></d-accordion-menu>}
+ {/* <div class="devui-accordion-menu-item open" title={item.title}>
+ <div title={item.title} class={`devui-accordion-item-title devui-over-flow-ellipsis open`}>{ item.title }</div>
+ {
+ // TODO 子菜单 d-accordion-list
+ }
+ <div class="devui-accordion-submenu devui-accordion-show-animate" style="opacity: 1; overflow: hidden;">
+ <ul class="devui-accordion-list">
+ { item.children?.map(component => {
+ return <li class="devui-accordion-item" key={component.title}>
+ {
+ // TODO 路由链接 d-accordion-item-routerlink
+ }
+ <div class="devui-accordion-item-title devui-over-flow-ellipsis" style="text-indent: 20px;" title={component.title}>
+ <router-link to={component.link}>
+ <div class="devui-accordion-splitter" style="left: 30px;"></div>
+ { component.title }
+ { component.done && <span class="tag-done">已完成</span> }
+ </router-link>
+ </div>
+ </li>
+ })}
+ </ul>
+ </div>
+ </div> */}
+ </li>
  }
- <div class="devui-accordion-submenu devui-accordion-show-animate" style="opacity: 1; overflow: hidden;">
- <ul class="devui-accordion-list">
- { item.children.map(component => {
- return <li class="devui-accordion-item" key={component.title}>
- {
- // TODO 路由链接 d-accordion-item-routerlink
- }
- <div class="devui-accordion-item-title devui-over-flow-ellipsis" style="text-indent: 20px;" title={component.title}>
- <router-link to={component.link}>
- <div class="devui-accordion-splitter" style="left: 30px;"></div>
- { component.title }
- { component.done && <span class="tag-done">已完成</span> }
- </router-link>
- </div>
- </li>
- })}
- </ul>
- </div>
+ )}
+ </ul>
+ }
+ {
+ innerListTemplate.value && deepth.value !== 0 &&
+ <div>
+ {slots.default ? slots.innerListTemplate() : ''}
  </div>
- </li>
- }) }
- </ul>
+ }
+ </>
+ )
  }
  }
 })

packages/devui-vue/devui/accordion/src/accordion-menu.tsx

@@ -1,13 +1,58 @@
-import { defineComponent } from 'vue'
+import { computed, defineComponent, toRefs } from 'vue'
+import { AccordionMenuItem } from './accordion.type'
+import DAccordionList from './accordion-list'
+import { accordionProps } from './accordion-types'
 
 export default defineComponent({
  name: 'DAccordionMenu',
  props: {
-
+ item: Object as () => AccordionMenuItem,
+ deepth: {
+ type: Number,
+ default: 0
+ },
+ parent: {
+ type: Object as () => AccordionMenuItem,
+ default: null
+ },
+ ...accordionProps
  },
- setup() {
- return () => { 
- return <li>d-accordion-menu</li>
+ setup(props) {
+ const { item, deepth } = toRefs(props)
+
+
+ const menuItemClasses = computed(() => {
+ return (keyOpen === undefined && props.autoOpenActiveMenu)
+ ? childActived
+ : keyOpen
+ })
+ 
+ const keyOpen = computed(() => {
+ return item?.value[props.openKey];
+ })
+ const childActived = computed(() => {
+ // return props.routerLinkActived || props.hasActiveChildren
+ })
+
+ return () => {
+ return (
+ <>
+ <div
+ class={["devui-accordion-item-title", "devui-over-flow-ellipsis", item.value.children ? 'open active': '']}
+ title={item.value.title}
+ >
+ {item.value.title}
+ </div>
+ <DAccordionList
+ class="devui-accordion-submenu devui-accordion-show-animate"
+ style="opacity: 1; overflow: hidden;"
+ deepth={deepth.value + 1}
+ data={item.value.children || []}
+ parent={item.value}
+ >
+ </DAccordionList>
+ </>
+ )
  }
  }
 })

packages/devui-vue/devui/accordion/src/accordion-types.ts

@@ -0,0 +1,63 @@
+import { ExtractPropTypes } from "vue";
+import { AccordionMenuType } from "./accordion.type";
+
+export const accordionProps = {
+data: {
+type: Array as () => Array<any> | AccordionMenuType,
+default: null,
+},
+/* Key值定义, 用于自定义数据结构 */
+titleKey: { type: String, default: "title" }, // 标题的key，item[titleKey]类型为string，为标题显示内容
+loadingKey: { type: String, default: "loading" }, // 子菜单动态加载item[loadingKey]类型为boolean
+childrenKey: { type: String, default: "children" }, // 子菜单Key
+disabledKey: { type: String, default: "disabled" }, // 是否禁用Key
+activeKey: { type: String, default: "active" }, // 菜单是否激活/选中
+openKey: { type: String, default: "open" }, // 菜单是否打开
+
+/* 菜单模板 */
+menuItemTemplate: { type: String, default: "" }, // 可展开菜单内容条模板
+itemTemplate: { type: String, default: "" }, // 可点击菜单内容条模板
+
+menuToggle: {
+type: Function as unknown as () => (event: MouseEvent) => void,
+default: null,
+}, // 可展开菜单展开事件
+itemClick: {
+type: Function as unknown as () => (event: MouseEvent) => void,
+default: null,
+}, // 可点击菜单点击事件
+activeItemChange: {
+type: Function as unknown as () => (event: MouseEvent) => void,
+default: null,
+},
+
+/** 高级选项和模板 */
+restrictOneOpen: { type: Boolean, default: false }, // 限制一级菜单同时只能打开一个
+autoOpenActiveMenu: { type: Boolean, default: false }, // 自动展开活跃菜单
+showNoContent: { type: Boolean, default: true }, // 没有内容的时候是否显示没有数据
+noContentTemplate: { type: String, default: "" }, // 没有内容的时候使用自定义模板
+loadingTemplate: { type: String, default: "" }, // 加载中使用自定义模板
+innerListTemplate: { type: String, default: "" }, // 可折叠菜单内容完全自定义，用做折叠面板
+
+/* 内置路由/链接/动态判断路由或链接类型 */
+linkType: {
+type: String as () =>
+| "routerLink"
+| "hrefLink"
+| "dependOnLinkTypeKey"
+| ""
+| string,
+default: "",
+},
+linkTypeKey: { type: String, default: "linkType" }, // linkType为'dependOnLinkTypeKey'时指定对象linkType定义区
+linkKey: { type: String, default: "link" }, // 链接内容的key
+linkTargetKey: { type: String, default: "target" }, // 链接目标窗口的key
+linkDefaultTarget: { type: String, default: "_self" }, // 不设置target的时候target默认值
+
+accordionType: {
+type: String as () => "normal" | "embed",
+default: "normal",
+},
+} as const;
+
+export type AccordionProps = ExtractPropTypes<typeof accordionProps>;