feat: 添加Password组件

renzp94 · Sep 28, 2023 · 18d144b · 18d144b
1 parent 8eefb22
commit 18d144b
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 1 deletion.
diff --git a/docs/components/Input.md b/docs/components/Input.md
@@ -37,6 +37,12 @@ lang: zh-CN
 
 <demo src="../../../../example/input/search.svelte"></demo>
 
+## 密码框
+
+密码框。
+
+<demo src="../../../../example/input/password.svelte"></demo>
+
 ## Input Props 属性
 
 | 属性         | 说明                                                                                                                                                                                           | 类型                       | 默认值   | 版本 |
@@ -95,4 +101,24 @@ lang: zh-CN
 
 ## Slots 插槽
 
-除了没有`addonAfter`插槽，其他的和`Input`一致。
+除了没有`addonAfter`插槽，其他的和`Input`一致。
+
+## Input.Password Props 属性
+
+| 属性    | 说明         | 类型      | 默认值  | 版本 |
+| ------- | ------------ | --------- | ------- | ---- |
+| visible | 是否显示密码 | `boolean` | `false` |      |
+
+其余属性和`Input`一致。
+
+## Events 事件
+
+| 事件          | 说明           | 类型                                    |
+| ------------- | -------------- | --------------------------------------- |
+| visibleChange | 显隐密码的回调 | `(value: CustomEvent<boolean>) => void` |
+
+其余事件和`Input`一致。
+
+## Slots 插槽
+
+除了没有`suffix`插槽，其他的和`Input`一致。
diff --git a/docs/example/input/password.svelte b/docs/example/input/password.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Input, Space } from 'adorn-ui'
+</script>
+
+<Space direction="vertical" style="width: 100%;">
+  <Input.Password placeholder="请输入" />
+  <Input.Password placeholder="请输入">
+    <span slot="addonBefore">before</span>
+  </Input.Password>
+  <Input.Password placeholder="请输入">
+    <span slot="addonAfter">after</span>
+  </Input.Password>
+  <Input.Password placeholder="请输入">
+    <span slot="prefix">prefix</span>
+  </Input.Password>
+</Space>
diff --git a/packages/adorn-ui/src/Input/Password.svelte b/packages/adorn-ui/src/Input/Password.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import classes from '@renzp/classes'
+  import Input from './Input.svelte'
+  import { Icon } from '..'
+  import type { Size } from '../utils/types'
+  import { createEventDispatcher } from 'svelte'
+  const dispatch = createEventDispatcher()
+
+  export let allowClear = false
+  export let defaultValue: string | undefined = ''
+  export let disabled: boolean = false
+  export let placeholder: string | undefined = undefined
+  export let value: string | undefined = defaultValue
+  export let id: string | undefined = undefined
+  export let maxLength: number | undefined = undefined
+  export let showCount: boolean = false
+  export let size: Size = 'middle'
+  export let visible = false
+
+  let className = ''
+  export { className as class }
+  $: classList = classes([
+    'adorn-input-password',
+    className,
+    { ['has-addon']: $$slots.addonBefore || $$slots.addonAfter },
+    { ['has-only-addon-before']: $$slots.addonBefore && !$$slots.addonAfter },
+    { ['has-only-addon-after']: $$slots.addonAfter && !$$slots.addonBefore }
+  ])
+
+  const onVisibleChange = () => {
+    visible = !visible
+    dispatch('visibleChange', visible)
+  }
+</script>
+
+<div class={classList} {...$$restProps}>
+  <Input
+    {allowClear}
+    {defaultValue}
+    {disabled}
+    {placeholder}
+    {value}
+    {id}
+    {maxLength}
+    {showCount}
+    {size}
+    type={visible ? 'text' : 'password'}
+    on:input
+    on:compositionstart
+    on:compositionend
+    on:change
+    on:blur
+    on:focus
+    on:keyup
+    on:keydown
+    on:keypress
+    on:mouseenter
+    on:mouseleave
+    on:mousemove
+  >
+    <slot name="prefix" slot="prefix" />
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <span slot="suffix" on:click={onVisibleChange}>
+      <Icon name={visible ? 'eye' : 'eye-close'} />
+    </span>
+    <slot name="addonBefore" slot="addonBefore" />
+    <slot name="addonAfter" slot="addonAfter" />
+  </Input>
+</div>
+
+<style lang="less" global>
+  .adorn-input-password {
+    :global(.adorn-input-wrapper.bordered .adorn-input) {
+      border-radius: var(--adorn-radius-sm);
+    }
+
+    &.has-addon {
+      border-radius: 0;
+    }
+    &.has-only-addon-before {
+      :global(.adorn-input-wrapper.bordered .adorn-input) {
+        border-radius: 0 var(--adorn-radius-sm) var(--adorn-radius-sm) 0;
+      }
+    }
+    &.has-only-addon-after {
+      :global(.adorn-input-wrapper.bordered .adorn-input) {
+        border-radius: var(--adorn-radius-sm) 0 0 var(--adorn-radius-sm);
+      }
+    }
+  }
+</style>