DevCloudFE · kagol · Apr 11, 2022 · Apr 10, 2022
diff --git a/packages/devui-vue/devui-cli/commands/build.js b/packages/devui-vue/devui-cli/commands/build.js
@@ -5,7 +5,7 @@ const { defineConfig, build } = require('vite');
 const vue = require('@vitejs/plugin-vue');
 const vueJsx = require('@vitejs/plugin-vue-jsx');
 const nuxtBuild = require('./build-nuxt-auto-import');
-const { parseComponentInfo } = require('../shared/utils');
+const { isReadyToRelease } = require('../shared/utils');
 
 const entryDir = path.resolve(__dirname, '../../devui');
 const outputDir = path.resolve(__dirname, '../../build');
@@ -83,7 +83,7 @@ exports.build = async () => {
   });
 
   for (const name of components) {
-    if (parseComponentInfo(name).status !== '100%') {
+    if (!isReadyToRelease(name)) {
       continue;
     }
     await buildSingle(name);

diff --git a/packages/devui-vue/devui-cli/commands/code-check.js b/packages/devui-vue/devui-cli/commands/code-check.js
@@ -2,7 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const shell = require('shelljs');
 const chalk = require('chalk');
-const { parseComponentInfo } = require('../shared/utils');
+const { isReadyToRelease } = require('../shared/utils');
 
 const log = console.log;
 
@@ -15,7 +15,7 @@ const entryDir = path.resolve(__dirname, '../../devui');
 const completeComponents = 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') && parseComponentInfo(name).status === '100%';
+  return isDir && fs.readdirSync(componentDir).includes('index.ts') && isReadyToRelease(name);
 });
 
 const eslintCheckSingle = async (name) => {
@@ -46,7 +46,7 @@ const eslintCheck = async (components) => {
     await eslintCheckAll();
   }
   log(chalkEslint('ESLint check finished!'));
-}
+};
 
 const unitTestSingle = async (name) => {
   log(chalkUnitTest(`Start unit test ${name}...`));

diff --git a/packages/devui-vue/devui-cli/commands/create.js b/packages/devui-vue/devui-cli/commands/create.js
@@ -3,7 +3,8 @@ const {
   bigCamelCase,
   resolveDirFilesInfo,
   parseExportByFileInfo,
-  parseComponentInfo
+  parseComponentInfo,
+  isReadyToRelease
 } = require('../shared/utils');
 const fs = require('fs-extra');
 const { resolve } = require('path');
@@ -134,7 +135,7 @@ async function createComponent(params = {}) {
 
 async function createVueDevui(params, { ignoreParseError, env }) {
   const fileInfo = resolveDirFilesInfo(DEVUI_DIR, VUE_DEVUI_IGNORE_DIRS)
-  .filter(({ name }) => (env === 'prod' && parseComponentInfo(kebabCase(name)).status === '100%') || !env || env === 'dev');
+    .filter(({ name }) => (env === 'prod' && isReadyToRelease(kebabCase(name))) || !env || env === 'dev');
 
   const exportModules = [];
 
@@ -177,7 +178,7 @@ async function createVitepressSidebar() {
   fileInfo.forEach((f) => {
     const info = parseComponentInfo(f.dirname);
 
-    if (isEmpty(info) || (isProd && info.status !== '100%')) {return;}
+    if (isEmpty(info) || (isProd && !isReadyToRelease(f.dirname))) {return;}
 
     componentsInfo.push(info);
   });

diff --git a/packages/devui-vue/devui-cli/shared/constant.js b/packages/devui-vue/devui-cli/shared/constant.js
@@ -68,3 +68,7 @@ exports.CREATE_SUPPORT_TYPE_MAP = Object.freeze({
 });
 exports.CREATE_SUPPORT_TYPES = Object.keys(this.CREATE_SUPPORT_TYPE_MAP);
 exports.CREATE_UNFINISHED_TYPES = [];
+exports.WHITE_LIST_READY_COMPONENTS = [
+  'select', 'tooltip', 'table', 'tabs', 'form',
+  'dropdown', 'drawer', 'date-picker', 'input-number'
+];
diff --git a/packages/devui-vue/devui-cli/shared/utils.js b/packages/devui-vue/devui-cli/shared/utils.js
@@ -1,5 +1,5 @@
 const { camelCase, upperFirst } = require('lodash');
-const { INDEX_FILE_NAME, DEVUI_DIR } = require('./constant');
+const { INDEX_FILE_NAME, DEVUI_DIR, WHITE_LIST_READY_COMPONENTS } = require('./constant');
 const { resolve } = require('path');
 const logger = require('./logger');
 const fs = require('fs-extra');
@@ -89,7 +89,7 @@ exports.parseExportByFileInfo = (fileInfo, ignoreParseError) => {
   return exportModule;
 };
 
-exports.parseComponentInfo = (name) => {
+const parseComponentInfo = (name) => {
   const componentInfo = {
     name: this.bigCamelCase(name)
   };
@@ -122,3 +122,10 @@ exports.parseComponentInfo = (name) => {
 
   return componentInfo;
 };
+
+exports.parseComponentInfo = parseComponentInfo;
+
+exports.isReadyToRelease = (componentName) => {
+  return parseComponentInfo(componentName).status === '100%'
+    || WHITE_LIST_READY_COMPONENTS.includes(componentName);
+};
diff --git a/packages/devui-vue/devui/tree/src/core/use-tree-types.ts b/packages/devui-vue/devui/tree/src/core/use-tree-types.ts
@@ -33,7 +33,7 @@ export interface IUseCore {
   getNode: (node: ITreeNode) => IInnerTreeNode;
   setNodeValue: (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof<IInnerTreeNode>) => void;
   setTree: (newTree: ITreeNode[]) => void;
-};
+}
 
 export interface IUseCheck {
   checkNode: (node: IInnerTreeNode) => void;
@@ -69,7 +69,9 @@ export interface IUseToggle {
 }
 
 export type IUseTree = {
-  treeData: Ref<IInnerTreeNode[]>
+  treeData: Ref<IInnerTreeNode[]>;
 } & IUseCore & IUseToggle & IUseSelect & IUseCheck & IUseDisable & IUseOperate;
 
-export type CheckStrategy = 'upward' | 'downward' | 'both' | 'none';
+export type ICheckStrategy = 'upward' | 'downward' | 'both' | 'none';
+
+export type ICheck = boolean | ICheckStrategy;
diff --git a/packages/devui-vue/devui/tree/src/new-tree-types.ts b/packages/devui-vue/devui/tree/src/new-tree-types.ts
@@ -1,9 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { ITreeNode } from './core/use-tree-types';
-
-export type ICheckStrategy = 'upward' | 'downward' | 'both' | 'none';
-
-export type ICheck = boolean | ICheckStrategy;
+import { ICheck, ITreeNode } from './core/use-tree-types';
 
 export const treeProps = {
   data: {

diff --git a/packages/devui-vue/devui/tree/src/new-tree.tsx b/packages/devui-vue/devui/tree/src/new-tree.tsx
@@ -1,15 +1,14 @@
-import { defineComponent, PropType, provide, renderSlot, toRefs, useSlots, watch } from 'vue';
-import type { ITreeNode, IUseTree } from './core/use-tree-types';
+import { defineComponent, provide, renderSlot, toRefs, useSlots, watch } from 'vue';
 import DTreeNode from './components/tree-node';
 import DTreeNodeContent from './components/tree-node-content';
 import DTreeNodeToggle from './components/tree-node-toggle';
 import useTree from './core/use-tree';
 import useCheck from './core/use-check';
 import useSelect from './core/use-select';
 import { USE_TREE_TOKEN } from './const';
-import './tree.scss';
 import useOperate from './core/use-operate';
 import { TreeProps, treeProps } from './new-tree-types';
+import './tree.scss';
 
 export default defineComponent({
   name: 'DNewTree',
@@ -41,17 +40,17 @@ export default defineComponent({
     watch(data, setTree);
 
     provide(USE_TREE_TOKEN, treeFactory);
-    
+
     return () => {
       return (
         <div class="devui-tree">
           {
-            getExpendedTree().value.map(treeNode => (
+            getExpendedTree?.().value.map(treeNode => (
               slots.default
-              ? renderSlot(useSlots(), 'default', {
+                ? renderSlot(useSlots(), 'default', {
                   treeFactory: treeFactory, nodeData: treeNode
                 })
-              : <DTreeNode data={treeNode} check={check.value}>
+                : <DTreeNode data={treeNode} check={check.value}>
                   {{
                     default: () => slots.content
                       ? renderSlot(useSlots(), 'content', { nodeData: treeNode })
@@ -65,6 +64,6 @@ export default defineComponent({
           }
         </div>
       );
-    }
+    };
   }
 });
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBarLink.js b/packages/devui-vue/docs/.vitepress/devui-theme/components/SideBarLink.js
@@ -3,103 +3,115 @@ import { useRoute, useData } from 'vitepress';
 import { joinUrl, isActive } from '../utils';
 
 // 阶梯访问表
-const stairStepAccessTable = function(source, sourceRangeArray, targetArray) {
-    const maxTarget = targetArray.length - 1;
-    let targetIndex = 0;
-    let target = targetArray[maxTarget];
-    while(target === targetArray[maxTarget] && targetIndex < maxTarget) {
-        if (source <= sourceRangeArray[targetIndex]) { // <= 意味着包含右边界
-            target = targetArray[targetIndex];
-        }
-        targetIndex += 1;
+const stairStepAccessTable = function (source, sourceRangeArray, targetArray) {
+  const maxTarget = targetArray.length - 1;
+  let targetIndex = 0;
+  let target = targetArray[maxTarget];
+  while (target === targetArray[maxTarget] && targetIndex < maxTarget) {
+    if (source <= sourceRangeArray[targetIndex]) {
+      // <= 意味着包含右边界
+      target = targetArray[targetIndex];
     }
-    return target;
-}
+    targetIndex += 1;
+  }
+  return target;
+};
+
+const statusRange = [49, 99];
+const colors = ['var(--devui-danger, #f66f6a)', 'var(--devui-warning, #fac20a)', 'var(--devui-success, #50d4ab)'];
 
-const statusRange = [ 49, 99 ];
-const colors = [ 'var(--devui-danger, #f66f6a)', 'var(--devui-warning, #fac20a)', 'var(--devui-success, #50d4ab)' ];
+const WHITE_LIST_READY_COMPONENTS = ['select', 'tooltip', 'table', 'tabs', 'form', 'dropdown', 'drawer', 'date-picker', 'input-number'];
 
 export const SideBarLink = (props) => {
-    const route = useRoute();
-    const { site, frontmatter } = useData();
-    const depth = props.depth || 1;
-    const maxDepth = frontmatter.value.sidebarDepth || Infinity;
-    const headers = route.data.headers;
-    const text = props.item.text;
-    let status = props.item.status;
-    let dotColor = '';
-    
-    if (status !== undefined) {
-        status = parseInt(props.item.status, 10);
-        dotColor = stairStepAccessTable(status, statusRange, colors);
-    }
+  const route = useRoute();
+  const { site, frontmatter } = useData();
+  const depth = props.depth || 1;
+  const maxDepth = frontmatter.value.sidebarDepth || Infinity;
+  const headers = route.data.headers;
+  const text = props.item.text;
+  let status = props.item.status;
+  let dotColor = '';
+
+  if (status !== undefined) {
+    status = parseInt(props.item.status, 10);
+    dotColor = stairStepAccessTable(status, statusRange, colors);
+  }
 
-    const link = resolveLink(site.value.base, props.item.link);
-    const children = props.item.children;
-    const active = isActive(route, props.item.link);
-    const childItems = depth < maxDepth
-        ? createChildren(active, children, headers, depth + 1)
-        : null;
-    return h('li', { class: 'sidebar-link' }, [
-        h(link ? 'a' : 'p', {
-            class: { 'sidebar-link-item': true, active },
-            href: link
-        }, [
-            (status && import.meta.env.DEV) && h('span', {
-                class: 'sidebar-link-status',
-                style: `background-color: ${dotColor}`
-            }),
-            h('span', {
-                class: 'sidebar-link-text'
-            }, [
-                text
-            ])
-        ]),
-        childItems
-    ]);
+  const link = resolveLink(site.value.base, props.item.link);
+  const children = props.item.children;
+  const active = isActive(route, props.item.link);
+  const childItems = depth < maxDepth ? createChildren(active, children, headers, depth + 1) : null;
+  return h('li', { class: 'sidebar-link' }, [
+    h(
+      link ? 'a' : 'p',
+      {
+        class: { 'sidebar-link-item': true, active },
+        href: link,
+      },
+      [
+        status &&
+          import.meta.env.DEV &&
+          h('span', {
+            class: 'sidebar-link-status',
+            style: `background-color: ${dotColor}`,
+          }),
+        h(
+          'span',
+          {
+            class: 'sidebar-link-text',
+          },
+          [text]
+        ),
+      ]
+    ),
+    childItems,
+  ]);
 };
 function resolveLink(base, path) {
-    if (path === undefined) {
-        return path;
-    }
-    // keep relative hash to the same page
-    if (path.startsWith('#')) {
-        return path;
-    }
-    return joinUrl(base, path);
+  if (path === undefined) {
+    return path;
+  }
+  // keep relative hash to the same page
+  if (path.startsWith('#')) {
+    return path;
+  }
+  return joinUrl(base, path);
 }
 function createChildren(active, children, headers, depth = 1) {
-    if (children && children.length > 0) {
-        return h('ul', { class: 'sidebar-links' }, children.map((c) => {
-            const showSidebarItem = import.meta.env.DEV || (import.meta.env.PROD && c.status === '100%');
-            return showSidebarItem && h(SideBarLink, { item: c, depth });
-        }));
-    }
-    return active && headers
-        ? createChildren(false, resolveHeaders(headers), undefined, depth)
-        : null;
+  if (children && children.length > 0) {
+    return h(
+      'ul',
+      { class: 'sidebar-links' },
+      children.map((c) => {
+        const pathArr = c.link.split('/');
+        const componentName = pathArr[pathArr.length - 2];
+        const showSidebarItem =
+          import.meta.env.DEV || (import.meta.env.PROD && (c.status === '100%' || WHITE_LIST_READY_COMPONENTS.includes(componentName)));
+        return showSidebarItem && h(SideBarLink, { item: c, depth });
+      })
+    );
+  }
+  return active && headers ? createChildren(false, resolveHeaders(headers), undefined, depth) : null;
 }
 function resolveHeaders(headers) {
-    return mapHeaders(groupHeaders(headers));
+  return mapHeaders(groupHeaders(headers));
 }
 function groupHeaders(headers) {
-    headers = headers.map((h) => Object.assign({}, h));
-    let lastH2;
-    headers.forEach((h) => {
-        if (h.level === 2) {
-            lastH2 = h;
-        }
-        else if (lastH2) {
-            ;
-            (lastH2.children || (lastH2.children = [])).push(h);
-        }
-    });
-    return headers.filter((h) => h.level === 2);
+  headers = headers.map((h) => Object.assign({}, h));
+  let lastH2;
+  headers.forEach((h) => {
+    if (h.level === 2) {
+      lastH2 = h;
+    } else if (lastH2) {
+      (lastH2.children || (lastH2.children = [])).push(h);
+    }
+  });
+  return headers.filter((h) => h.level === 2);
 }
 function mapHeaders(headers) {
-    return headers.map((header) => ({
-        text: header.title,
-        link: `#${header.slug}`,
-        children: header.children ? mapHeaders(header.children) : undefined
-    }));
+  return headers.map((header) => ({
+    text: header.title,
+    link: `#${header.slug}`,
+    children: header.children ? mapHeaders(header.children) : undefined,
+  }));
 }