Sfoglia il codice sorgente

fix: 修复 Input 组件 focus 边框被裁剪问题 (#7894)

* fix(other): 修复 oxlint ignorePatterns 导致 pre-commit hook 失败

* fix(@vben-core/shadcn-ui): 修复 Input 组件 focus 时边框被父容器 overflow hidden 裁剪

* fix(@vben-core/shadcn-ui): 修复 SelectTrigger 组件 focus 时边框被父容器 overflow hidden 裁剪
Yanghai.Lin 1 mese fa
parent
commit
0868deb82b

+ 2 - 2
lefthook.yml

@@ -50,10 +50,10 @@ pre-commit:
       run: pnpm oxfmt {staged_files}
       glob: '*.md'
     lint-vue:
-      run: pnpm oxfmt {staged_files} && pnpm oxlint --fix {staged_files} && pnpm eslint --cache --fix {staged_files} && pnpm stylelint --fix --allow-empty-input {staged_files}
+      run: pnpm oxfmt {staged_files} && pnpm oxlint --fix --no-error-on-unmatched-pattern {staged_files} && pnpm eslint --cache --fix {staged_files} && pnpm stylelint --fix --allow-empty-input {staged_files}
       glob: '*.vue'
     lint-js:
-      run: pnpm oxfmt {staged_files} && pnpm oxlint --fix {staged_files} && pnpm eslint --cache --fix {staged_files}
+      run: pnpm oxfmt {staged_files} && pnpm oxlint --fix --no-error-on-unmatched-pattern {staged_files} && pnpm eslint --cache --fix {staged_files}
       glob: '*.{js,jsx,ts,tsx}'
     lint-style:
       run: pnpm oxfmt {staged_files} && pnpm stylelint --fix --allow-empty-input {staged_files}

+ 5 - 1
packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input bg-background ring-offset-background placeholder:text-muted-foreground/50 focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground/50 focus-visible:outline-none flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
@@ -34,6 +34,10 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 input {
   --ring: var(--primary);
 
+  &:focus-visible {
+    box-shadow: inset 0 0 0 1px hsl(var(--ring));
+  }
+
   &::-ms-reveal,
   &::-ms-clear {
     display: none;

+ 1 - 1
packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+        'border-input ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:shadow-[inset_0_0_0_1px_hsl(var(--primary))] flex h-10 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
         props.class,
       )
     "