mirror of https://github.com/halo-dev/halo
feat: add reveal button for password input (#4434)
#### What type of PR is this? /area console /kind feature /milestone 2.9.x #### What this PR does / why we need it: 为 FormKit 的 password 类型输入框添加统一的显示/隐藏明文按钮。 <img width="541" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/2947cef2-258c-434d-9268-c8b5ad26a9f7"> #### Which issue(s) this PR fixes: Fixes #4382 #### Special notes for your reviewer: 测试密码输入框的显示隐藏明文按钮是否可以正常使用即可。 #### Does this PR introduce a user-facing change? ```release-note 为 FormKit 的 password 类型输入框添加统一的显示/隐藏明文按钮。 ```pull/4410/head^2
parent
8678d614e2
commit
43e1e446b6
|
@ -19,6 +19,7 @@ import { tagCheckbox } from "./inputs/tag-checkbox";
|
|||
import { roleSelect } from "./inputs/role-select";
|
||||
import { attachmentPolicySelect } from "./inputs/attachment-policy-select";
|
||||
import { attachmentGroupSelect } from "./inputs/attachment-group-select";
|
||||
import { password } from "./inputs/password";
|
||||
|
||||
import radioAlt from "./plugins/radio-alt";
|
||||
import stopImplicitSubmission from "./plugins/stop-implicit-submission";
|
||||
|
@ -39,6 +40,7 @@ const config: DefaultConfigOptions = {
|
|||
],
|
||||
inputs: {
|
||||
form,
|
||||
password,
|
||||
group,
|
||||
attachment,
|
||||
code,
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
<script lang="ts" setup>
|
||||
import type { FormKitFrameworkContext } from "@formkit/core";
|
||||
import { IconEye, IconEyeOff } from "@halo-dev/components";
|
||||
import type { PropType } from "vue";
|
||||
import { toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
context: {
|
||||
type: Object as PropType<FormKitFrameworkContext>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { context } = toRefs(props);
|
||||
|
||||
function handleChange() {
|
||||
context.value.node.props.type =
|
||||
context.value.node.props.type === "password" ? "text" : "password";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="group flex h-full cursor-pointer items-center px-3 transition-all"
|
||||
@click="handleChange"
|
||||
>
|
||||
<IconEye
|
||||
v-if="context.node.props.type === 'password'"
|
||||
class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
|
||||
/>
|
||||
<IconEyeOff
|
||||
v-else
|
||||
class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
|
@ -0,0 +1,76 @@
|
|||
import type { FormKitTypeDefinition } from "@formkit/core";
|
||||
import {
|
||||
outer,
|
||||
inner,
|
||||
wrapper,
|
||||
label,
|
||||
help,
|
||||
messages,
|
||||
message,
|
||||
icon,
|
||||
prefix,
|
||||
suffix,
|
||||
textInput,
|
||||
} from "@formkit/inputs";
|
||||
import RevealButton from "./RevealButton.vue";
|
||||
|
||||
import { createSection } from "@formkit/inputs";
|
||||
|
||||
export const RevealButtonSuffix = createSection("RevealButtonSuffix", () => ({
|
||||
$cmp: "RevealButton",
|
||||
props: {
|
||||
context: "$node.context",
|
||||
},
|
||||
}));
|
||||
|
||||
/**
|
||||
* Input definition for a text.
|
||||
* @public
|
||||
*/
|
||||
export const password: FormKitTypeDefinition = {
|
||||
/**
|
||||
* The actual schema of the input, or a function that returns the schema.
|
||||
*/
|
||||
schema: outer(
|
||||
wrapper(
|
||||
label("$label"),
|
||||
inner(
|
||||
icon("prefix", "label"),
|
||||
prefix(),
|
||||
textInput(),
|
||||
suffix(),
|
||||
RevealButtonSuffix()
|
||||
)
|
||||
),
|
||||
help("$help"),
|
||||
messages(message("$message.value"))
|
||||
),
|
||||
/**
|
||||
* The type of node, can be a list, group, or input.
|
||||
*/
|
||||
type: "input",
|
||||
/**
|
||||
* The family of inputs this one belongs too. For example "text" and "email"
|
||||
* are both part of the "text" family. This is primary used for styling.
|
||||
*/
|
||||
family: "text",
|
||||
/**
|
||||
* An array of extra props to accept for this input.
|
||||
*/
|
||||
props: [],
|
||||
/**
|
||||
* Forces node.props.type to be this explicit value.
|
||||
*/
|
||||
forceTypeProp: "password",
|
||||
/**
|
||||
* Additional features that should be added to your input
|
||||
*/
|
||||
features: [],
|
||||
/**
|
||||
* The key used to memoize the schema.
|
||||
*/
|
||||
schemaMemoKey: "92o49lnph2p",
|
||||
library: {
|
||||
RevealButton,
|
||||
},
|
||||
};
|
|
@ -16,3 +16,8 @@
|
|||
.fade-leave-to {
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
/* https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control */
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue