fix: fix ls-lint/eslint/stylelint

.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/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>
-      )
-    }
+      );
+    };
   }
-})
+});

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

@@ -1,53 +1,47 @@
-import { computed, defineComponent, ref, onMounted, watch } from 'vue'
-import { colorPickerHueSliderProps } from './color-picker-hue-slider-types'
-import { DOMUtils } from '../../utils/domDragger'
-import { fromHSVA } from '../../utils/color-utils'
-import './color-hue-slider.scss'
+import { computed, defineComponent, ref, onMounted } from 'vue';
+import { colorPickerHueSliderProps } from './color-picker-hue-slider-types';
+import { DOMUtils } from '../../utils/dom-dragger';
+import { fromHSVA } from '../../utils/color-utils';
+import './color-hue-slider.scss';
 export default defineComponent({
   name: 'ColorHueSlider',
   props: colorPickerHueSliderProps,
   emits: ['update:modelValue'],
   setup(props, ctx) {
-    const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' }
-    const barElement = ref<HTMLElement | null>(null)
-    const cursorElement = ref<HTMLElement | null>(null)
-    const clickTransfrom = ref(DEFAULT_TRANSITION)
+    const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' };
+    const barElement = ref<HTMLElement | null>(null);
+    const cursorElement = ref<HTMLElement | null>(null);
+    const clickTransfrom = ref(DEFAULT_TRANSITION);
     const getCursorLeft = () => {
       if (barElement.value && cursorElement.value) {
-        const rect = barElement.value.getBoundingClientRect()
-        const offsetWidth = cursorElement.value.offsetWidth
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
         if (props.modelValue.hue === 360) {
-          return rect.width - offsetWidth / 2
+          return rect.width - offsetWidth / 2;
         }
-        return ((props.modelValue.hue % 360) * (rect.width - offsetWidth)) / 360 + offsetWidth / 2
+        return ((props.modelValue.hue % 360) * (rect.width - offsetWidth)) / 360 + offsetWidth / 2;
       }
-      return 0
-    }
+      return 0;
+    };
 
     const getCursorStyle = computed(() => {
-      const left = getCursorLeft()
+      const left = getCursorLeft();
       return {
         left: left + 'px',
         top: 0,
         ...clickTransfrom.value
-      }
-    })
-    const onClickSider = (event: Event) => {
-      const target = event.target
-      if (target !== barElement.value) {
-        onMoveBar(event as MouseEvent)
-      }
-    }
+      };
+    });
 
     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.min(left, rect.width - offsetWidth / 2)
-        left = Math.max(offsetWidth / 2, left)
-        const hue = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 360)
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
+        let left = event.clientX - rect.left;
+        left = Math.min(left, rect.width - offsetWidth / 2);
+        left = Math.max(offsetWidth / 2, left);
+        const hue = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 360);
         ctx.emit(
           'update:modelValue',
           fromHSVA({
@@ -56,26 +50,33 @@ export default defineComponent({
             v: props.modelValue.hsva.v,
             a: props.modelValue.hsva.a
           })
-        )
+        );
       }
-    }
+    };
+
+    const onClickSider = (event: Event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event as MouseEvent);
+      }
+    };
 
     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);
       }
-    })
+    });
     return () => {
       return (
         <div class='devui-color-picker-hue-slider'>
@@ -89,7 +90,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
-      )
-    }
+      );
+    };
   }
-})
+});