@veltra/desktop 1.1.21 → 1.1.23

package/src/components/input/style.scss

@@ -28,15 +28,12 @@ $root-name: input;
     height: fn.use-var(form-component-height, $size);
     border-radius: fn.use-var(radius, $size);
     padding: 0 calc(fn.use-var(gap, $size) / 2);
+    font-size: fn.use-var(font-size-main, $size);
 
     @include m.bem($root-name, native) {
       height: fn.use-var(form-component-height, $size);
       line-height: fn.use-var(form-component-height, $size);
     }
-
-    // @include m.bem($root-name, clear) {
-    //   font-size: fn.use-var(font-size-main, $size);
-    // }
   }
 
   @include m.is(focus) {
@@ -51,7 +48,7 @@ $root-name: input;
     width: 100%;
     flex-grow: 1;
     color: fn.use-var(text-color, main);
-    font-size: 1em;
+    font-size: inherit;
     padding: 0;
     font-family: fn.use-var(font-family);
 
@@ -66,7 +63,7 @@ $root-name: input;
   }
 
   @include m.e(prefix, suffix) {
-    font-size: 14px;
+    font-size: inherit;
     color: fn.use-var(text-color, main);
     flex-shrink: 0;
     min-width: 20px;

package/src/components/password-input/__test__/password-input.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UPasswordInput from '../password-input.vue'
+
+function mountPasswordInput(props: Record<string, unknown>) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue as string | undefined)
+  const app = createApp({
+    render() {
+      return h(UPasswordInput, {
+        ...props,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: string | undefined) => {
+          model.value = value
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('PasswordInput', () => {
+  it('keeps visibility toggle while clear control is shown on hover', async () => {
+    const { host, unmount } = mountPasswordInput({ modelValue: 'secret', clearable: true })
+
+    try {
+      expect(host.querySelector('.u-password-input__visibility-toggle')).not.toBeNull()
+
+      host.querySelector('.u-password-input')?.dispatchEvent(new MouseEvent('mouseenter'))
+      await nextTick()
+
+      expect(host.querySelector('.u-password-input__clear')).not.toBeNull()
+      expect(host.querySelector('.u-password-input__visibility-toggle')).not.toBeNull()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('toggles password visibility when clearable', async () => {
+    const { host, unmount } = mountPasswordInput({ modelValue: 'secret', clearable: true })
+
+    try {
+      const native = host.querySelector('.u-input__native') as HTMLInputElement
+      expect(native.value).toBe('●●●●●●')
+
+      host
+        .querySelector('.u-password-input__visibility-toggle')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await nextTick()
+
+      expect(native.value).toBe('secret')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('toggles password visibility when clear control is visible on hover', async () => {
+    const { host, unmount } = mountPasswordInput({ modelValue: 'secret', clearable: true })
+
+    try {
+      const native = host.querySelector('.u-input__native') as HTMLInputElement
+      host.querySelector('.u-password-input')?.dispatchEvent(new MouseEvent('mouseenter'))
+      await nextTick()
+
+      expect(host.querySelector('.u-password-input__clear')).not.toBeNull()
+
+      host
+        .querySelector('.u-password-input__visibility-toggle')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await nextTick()
+
+      expect(native.value).toBe('secret')
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/password-input/password-input.vue

@@ -6,17 +6,22 @@
     :size="size"
     :readonly="readonly"
     :disabled="disabled"
+    :clearable="false"
     @native:input="handleUpdatePwd"
     @update:model-value="!$event && handleClear()"
-    @suffix:click="toggleVisible"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
     <template #suffix>
-      <Transition name="fade">
-        <UIcon :class="cls.e('visibility-toggle')" :size="18">
+      <span :class="cls.e('suffix')">
+        <UIcon v-if="showClear" :class="cls.e('clear')" title="清除" @click.stop="handleClear">
+          <Close />
+        </UIcon>
+        <UIcon :class="cls.e('visibility-toggle')" :size="18" @click.stop="toggleVisible">
           <Hide v-if="pwdVisible" />
           <View v-else />
         </UIcon>
-      </Transition>
+      </span>
     </template>
 
     <template #prefix v-if="slots.prefix">
@@ -28,18 +33,16 @@
 <script lang="ts" setup>
 import { o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
-import { Hide, View } from '@veltra/icons/normal'
+import { Close, Hide, View } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, nextTick, shallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef } from 'vue'
 
 import type { PasswordInputProps } from '../../types'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
 
-defineOptions({
-  name: 'PasswordInput'
-})
+defineOptions({ name: 'PasswordInput' })
 
 const props = withDefaults(defineProps<PasswordInputProps>(), {
   clearable: false,
@@ -47,9 +50,7 @@ const props = withDefaults(defineProps<PasswordInputProps>(), {
   readonly: undefined
 })
 
-const slots = defineSlots<{
-  prefix?: () => any
-}>()
+const slots = defineSlots<{ prefix?: () => any }>()
 
 const { formProps } = injectFormContext()
 
@@ -60,13 +61,27 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
 })
 
 const inputProps = computed(() => {
-  return o(props).pick(['clearable', 'disabled', 'placeholder', 'size'])
+  return o(props).pick(['disabled', 'placeholder', 'size'])
 })
 
 const cls = bem('password-input')
 
 const model = defineModel<string>()
 
+const hovered = ref(false)
+
+const handleMouseEnter = (): void => {
+  hovered.value = true
+}
+
+const handleMouseLeave = (): void => {
+  hovered.value = false
+}
+
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && !!model.value && hovered.value
+})
+
 const passwordChar = '●'
 
 const handleUpdatePwd = (e: Event): void => {

package/src/components/password-input/style.scss

@@ -5,7 +5,28 @@
 $root-name: password-input;
 
 @include m.b($root-name) {
+  @include m.e(suffix) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 2px;
+  }
+
+  @include m.e(clear) {
+    cursor: pointer;
+    flex-shrink: 0;
+    width: 20px;
+    border-radius: fn.use-var(radius, default);
+    transition: color 0.25s;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+  }
+
   @include m.e(visibility-toggle) {
-    // cursor: pointer;
+    cursor: pointer;
+    flex-shrink: 0;
   }
 }

package/src/components/table/node/col.ts

@@ -1,5 +1,5 @@
 import { TreeNode } from '@cat-kit/core'
-import { reactive, shallowReactive } from 'vue'
+import { isReactive, reactive, shallowReactive } from 'vue'
 
 import type { TableColumn, TableColumnAlign } from '../../../types'
 
@@ -97,6 +97,6 @@ export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
   style: Record<string, number> = reactive({})
 
   constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {
-    super(val ? shallowReactive(val) : val, index, depth, parent)
+    super(isReactive(val) ? val : shallowReactive(val), index, depth, parent)
   }
 }

package/src/components/textarea/style.scss

@@ -23,6 +23,7 @@ $root-name: textarea;
 
   @include m.size using ($size) {
     border-radius: fn.use-var(radius, $size);
+    font-size: fn.use-var(font-size-main, $size);
 
     @include m.bem($root-name, native) {
       padding: calc(fn.use-var(gap, $size) / 2);
@@ -31,7 +32,7 @@ $root-name: textarea;
     }
 
     @include m.bem($root-name, clear) {
-      font-size: fn.use-var(font-size-main, $size);
+      font-size: inherit;
     }
   }
 
@@ -41,7 +42,7 @@ $root-name: textarea;
     border: none;
     background-color: transparent;
     font-family: fn.use-var(font-family);
-    font-size: 1em;
+    font-size: inherit;
     width: 100%;
     display: block;
     padding: 0;

package/src/types/collapse.ts

@@ -24,12 +24,6 @@ export interface CollapseProps extends ComponentProps {
    */
   defaultCollapseAll?: boolean
 
-  /**
-   * 是否使用边框模式
-   * @default false
-   */
-  bordered?: boolean
-
   /**
    * 自定义展开图标组件，活动态会自动旋转 90°。
    * 接受任意 Vue 组件（SFC、Functional Component 等）。