refactor: 优化组件命名并修复lint问题

.husky/pre-commit

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

.ls-lint.yml

@@ -1,16 +1,25 @@
 ls:
-  /{devui,src}/*:
+  /{packages}/*:
     .dir: kebab-case | regex:__[a-z0-9]+__
     .scss: kebab-case
     .vue: kebab-case
-    .js: kebab-case
-    .ts: kebab-case
-    .tsx: kebab-case
+    .js: kebab-case | pointcase
+    .ts: kebab-case | pointcase
+    .tsx: kebab-case | pointcase
     .spec.ts: kebab-case
     .spec.tsx: kebab-case
     .route.ts: kebab-case
     .type.ts: kebab-case
 
 ignore:
-  - devui/style
-  - node_modules
+  # devui-cli
+  - packages/devui-cli/node_modules
+  # devui-theme
+  - packages/devui-theme/dist
+  - packages/devui-theme/node_modules
+  - packages/devui-theme/src/styles-var
+  # devui-vue
+  - packages/devui-vue/node_modules
+  - packages/devui-vue/build
+  - packages/devui-vue/docs
+  - packages/devui-vue/devui/style

package.json

@@ -8,8 +8,10 @@
     "build:cli": "pnpm build --filter devui-cli",
     "prepare": "husky install",
     "precommit": "lint-staged",
-    "lint:fix": "eslint --fix \"packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}\"",
-    "stylelint": "stylelint --fix \"packages/**/{*.scss,*.css}\"",
+    "eslint": "eslint \"packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}\"",
+    "eslint:fix": "eslint --fix \"packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}\"",
+    "stylelint": "stylelint \"packages/**/{*.scss,*.css}\"",
+    "stylelint:fix": "stylelint --fix \"packages/**/{*.scss,*.css}\"",
     "test": "pnpm test --filter vue-devui"
   },
   "devDependencies": {
@@ -29,7 +31,7 @@
     "stylelint-scss": "^3.20.1"
   },
   "lint-staged": {
-    ".{js,ts,jsx,tsx,vue}": "eslint --fix",
-    ".{scss,css}": "stylelint --fix"
+    "packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}": "eslint --fix",
+    "packages/**/{*.scss,*.css}": "stylelint --fix"
   }
 }

packages/devui-vue/devui-cli/templates/vitepress-sidebar.js

@@ -1,80 +1,94 @@
-const { kebabCase } = require('lodash')
+const { kebabCase } = require('lodash');
 const {
   SITES_COMPONENTS_DIR_NAME,
   VITEPRESS_SIDEBAR_CATEGORY,
   VITEPRESS_SIDEBAR_CATEGORY_EN,
   VITEPRESS_SIDEBAR_CATEGORY_ZH_TO_EN,
-  SITES_COMPONENTS_DIR_NAME_EN
-} = require('../shared/constant')
-const logger = require('../shared/logger')
+  SITES_COMPONENTS_DIR_NAME_EN,
+} = require('../shared/constant');
+const logger = require('../shared/logger');
 
 // function buildComponentOptions(text, name, status) {
 //   return { text, link: `/${SITES_COMPONENTS_DIR_NAME}/${kebabCase(name)}/`, status }
 // }
 
 function buildCategoryOptions(text, children = []) {
-  return { text, children }
+  return { text, children };
 }
 
 function generateZhMenus(componentsInfo) {
-  const categoryMap = VITEPRESS_SIDEBAR_CATEGORY.reduce((map, cate) => map.set(cate, []), new Map())
+  const categoryMap = VITEPRESS_SIDEBAR_CATEGORY.reduce((map, cate) => map.set(cate, []), new Map());
   componentsInfo.forEach((info) => {
     if (categoryMap.has(info.category)) {
       categoryMap.get(info.category).push({
         text: info.title,
         link: `/${SITES_COMPONENTS_DIR_NAME}/${kebabCase(info.name)}/`,
-        status: info.status
-      })
+        status: info.status,
+      });
     } else {
-      logger.warning(`组件 ${info.name} 的分类 ${info.category} 不存在！`)
+      logger.warning(`组件 ${info.name} 的分类 ${info.category} 不存在！`);
     }
-  })
-  return Array.from(categoryMap).map(([k, v]) => buildCategoryOptions(k, v))
+  });
+  return Array.from(categoryMap).map(([k, v]) => buildCategoryOptions(k, v));
 }
 
 function generateEnMenus(componentsInfo) {
-  const categoryMapEn = VITEPRESS_SIDEBAR_CATEGORY_EN.reduce(
-    (map, cate) => map.set(cate, []),
-    new Map()
-  )
+  const categoryMapEn = VITEPRESS_SIDEBAR_CATEGORY_EN.reduce((map, cate) => map.set(cate, []), new Map());
   componentsInfo.forEach((info) => {
     if (categoryMapEn.has(VITEPRESS_SIDEBAR_CATEGORY_ZH_TO_EN[info.category])) {
       categoryMapEn.get(VITEPRESS_SIDEBAR_CATEGORY_ZH_TO_EN[info.category]).push({
         text: info.name,
         link: `/${SITES_COMPONENTS_DIR_NAME_EN}/${kebabCase(info.name)}/`,
-        status: info.status
-      })
+        status: info.status,
+      });
     }
-  })
-  return Array.from(categoryMapEn).map(([k, v]) => buildCategoryOptions(k, v))
+  });
+  return Array.from(categoryMapEn).map(([k, v]) => buildCategoryOptions(k, v));
 }
 
 exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
   const rootNavs = [
     {
-      text: '快速开始',
-      link: '/',
+      rootItems: [
+        {
+          text: '快速开始',
+          link: '/',
+        },
+        {
+          text: '主题定制',
+          link: '/theme-guide/',
+        },
+      ],
       handler: generateZhMenus,
-      lang: 'zh'
+      lang: 'zh',
     },
-    { text: 'Quick Start', link: '/en-US/', handler: generateEnMenus, lang: 'en' }
-  ]
+    {
+      rootItems: [
+        {
+          text: 'Quick Start',
+          link: '/en-US/',
+        },
+        {
+          text: 'Theme Guide',
+          link: '/theme-guide/',
+        },
+      ],
+      handler: generateEnMenus,
+      lang: 'en',
+    },
+  ];
 
   const templates = rootNavs.map((nav) => {
-    const rootItem = {
-      text: nav.text,
-      link: nav.link
-    }
-    const sidebar = [].concat(rootItem, nav.handler(componentsInfo))
+    const sidebar = [].concat(...nav.rootItems, nav.handler(componentsInfo));
     return {
       lang: nav.lang,
       content: `\
       export default {
         '/': ${JSON.stringify(sidebar, null, 2).replace(/\n/g, '\n\t')}
       }
-      `
-    }
-  })
+      `,
+    };
+  });
 
-  return templates
-}
+  return templates;
+};

packages/devui-vue/devui/cascader/components/cascader-tag/index.scss

@@ -6,7 +6,6 @@
   margin: 2px 4px 2px 0;
   display: inline-block;
   position: relative;
-  display: flex;
   align-items: center;
   padding: 0 8px 0 8px;
   background-color: $devui-label-bg;

packages/devui-vue/devui/color-picker/src/components/color-alpha-slider/color-alpha-slider.tsx

@@ -1,79 +1,80 @@
-import { computed, defineComponent, ref, onMounted } from 'vue'
-import { colorPickerAlphaSliderProps } from './color-picker-alpha-slider-types'
-import { DOMUtils } from '../../utils/domDragger'
-import { RGBtoCSS, fromHSVA } from '../../utils/color-utils'
-import './color-alpha-slider.scss'
+import { computed, defineComponent, ref, onMounted } from 'vue';
+import { colorPickerAlphaSliderProps } from './color-picker-alpha-slider-types';
+import { DOMUtils } from '../../utils/dom-dragger';
+import { RGBtoCSS, fromHSVA } from '../../utils/color-utils';
+import './color-alpha-slider.scss';
 export default defineComponent({
   name: 'ColorAlphaSlider',
   props: colorPickerAlphaSliderProps,
   emits: ['update:modelValue'],
   setup(props: colorPickerAlphaSliderProps, ctx) {
-    const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' }
-    const clickTransfrom = ref(DEFAULT_TRANSITION)
-    const barElement = ref<HTMLElement | null>(null)
-    const cursorElement = ref<HTMLElement | null>(null)
-    const onClickSider = (event: Event) => {
-      const target = event.target
-      if (target !== barElement.value) {
-        onMoveBar(event as MouseEvent)
-      }
-    }
+    const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' };
+    const clickTransfrom = ref(DEFAULT_TRANSITION);
+    const barElement = ref<HTMLElement | null>(null);
+    const cursorElement = ref<HTMLElement | null>(null);
 
     const onMoveBar = (event: MouseEvent) => {
-      event.stopPropagation()
+      event.stopPropagation();
       if (barElement.value && cursorElement.value) {
-        const rect = barElement.value.getBoundingClientRect()
-        const offsetWidth = cursorElement.value.offsetWidth
-        let left = event.clientX - rect.left
-        left = Math.max(offsetWidth / 2, left)
-        left = Math.min(left, rect.width - offsetWidth / 2)
-        const alpha = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 100)
-        ctx.emit('update:modelValue', fromHSVA({ ...props.modelValue.hsva, a: alpha / 100 }))
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
+        let left = event.clientX - rect.left;
+        left = Math.max(offsetWidth / 2, left);
+        left = Math.min(left, rect.width - offsetWidth / 2);
+        const alpha = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 100);
+        ctx.emit('update:modelValue', fromHSVA({ ...props.modelValue.hsva, a: alpha / 100 }));
+      }
+    };
+
+    const onClickSider = (event: Event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event as MouseEvent);
       }
-    }
+    };
 
     const getBackgroundStyle = computed(() => {
       return {
         background: `linear-gradient(to right, transparent , ${RGBtoCSS(props.modelValue.rgba)})`
-      }
-    })
+      };
+    });
 
     const getCursorLeft = computed(() => {
       if (barElement.value && cursorElement.value) {
-        const alpha = props.modelValue.rgba.a
-        const rect = barElement.value.getBoundingClientRect()
-        const offsetWidth = cursorElement.value.offsetWidth
-        return Math.round(alpha * (rect.width - offsetWidth) + offsetWidth / 2)
+        const alpha = props.modelValue.rgba.a;
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
+        return Math.round(alpha * (rect.width - offsetWidth) + offsetWidth / 2);
       }
-      return 0
-    })
+      return 0;
+    });
 
     const getCursorStyle = computed(() => {
-      const left = getCursorLeft.value
+      const left = getCursorLeft.value;
       return {
         left: left + 'px',
         top: 0,
         ...clickTransfrom.value
-      }
-    })
+      };
+    });
     onMounted(() => {
       const dragConfig = {
         drag: (event: Event) => {
-          clickTransfrom.value = null
-          onMoveBar(event as MouseEvent)
+          clickTransfrom.value = null;
+          onMoveBar(event as MouseEvent);
         },
         end: (event: Event) => {
-          clickTransfrom.value = DEFAULT_TRANSITION
-          onMoveBar(event as MouseEvent)
+          clickTransfrom.value = DEFAULT_TRANSITION;
+          onMoveBar(event as MouseEvent);
         }
-      }
+      };
       if (barElement.value && cursorElement.value) {
-        DOMUtils.triggerDragEvent(barElement.value, dragConfig)
+        DOMUtils.triggerDragEvent(barElement.value, dragConfig);
       }
-    })
+    });
     const alphaClass = computed(() => {
-      return ['devui-color-picker-alpha-slider', 'transparent']
-    })
+      return ['devui-color-picker-alpha-slider', 'transparent'];
+    });
     return () => {
       return (
         <div class={alphaClass.value}>
@@ -92,7 +93,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
-      )
-    }
+      );
+    };
   }
-})
+});