mirror of https://github.com/halo-dev/halo
feat: improve layout and styles of group formkit input (#3786)
#### What type of PR is this? /kind feature /area console /milestone 2.5.x Fixes #3734 #### What this PR does / why we need it: 为 FormKit 的 group 输入组件重构布局和样式。 before: <img width="591" alt="image" src="https://user-images.githubusercontent.com/21301288/232968801-c15bfdcc-5bbe-493e-8a96-a7ff3442e52d.png"> after: <img width="580" alt="image" src="https://user-images.githubusercontent.com/21301288/232968757-8892f386-3ff2-4147-b1f7-cbfbcfd5bc6e.png"> 可以测试的 FormKit Schema: ```yaml - $formkit: group name: author label: 作者 children: - $formkit: text name: name label: 名称 - $formkit: text name: email label: Email ``` #### Does this PR introduce a user-facing change? ```release-note 为 Console 端 FormKit 的 group 输入组件重构布局和样式。 ```pull/3824/head
parent
61f4729d87
commit
9e0fc8283f
|
@ -3,6 +3,7 @@ import theme from "./theme";
|
||||||
import { zh, en } from "@formkit/i18n";
|
import { zh, en } from "@formkit/i18n";
|
||||||
import type { DefaultConfigOptions } from "@formkit/vue";
|
import type { DefaultConfigOptions } from "@formkit/vue";
|
||||||
import { form } from "./inputs/form";
|
import { form } from "./inputs/form";
|
||||||
|
import { group } from "./inputs/group";
|
||||||
import { attachment } from "./inputs/attachment";
|
import { attachment } from "./inputs/attachment";
|
||||||
import { code } from "./inputs/code";
|
import { code } from "./inputs/code";
|
||||||
import { repeater } from "./inputs/repeater";
|
import { repeater } from "./inputs/repeater";
|
||||||
|
@ -28,6 +29,7 @@ const config: DefaultConfigOptions = {
|
||||||
plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
|
plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
|
||||||
inputs: {
|
inputs: {
|
||||||
form,
|
form,
|
||||||
|
group,
|
||||||
attachment,
|
attachment,
|
||||||
code,
|
code,
|
||||||
repeater,
|
repeater,
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
import type { FormKitTypeDefinition } from "@formkit/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
disablesChildren,
|
||||||
|
outer,
|
||||||
|
fieldset,
|
||||||
|
legend,
|
||||||
|
help,
|
||||||
|
inner,
|
||||||
|
message,
|
||||||
|
messages,
|
||||||
|
} from "@formkit/inputs";
|
||||||
|
|
||||||
|
export const group: FormKitTypeDefinition = {
|
||||||
|
schema: outer(
|
||||||
|
fieldset(
|
||||||
|
legend("$label"),
|
||||||
|
help("$help"),
|
||||||
|
inner("$slots.default"),
|
||||||
|
messages(message("$message.value"))
|
||||||
|
)
|
||||||
|
),
|
||||||
|
|
||||||
|
type: "group",
|
||||||
|
|
||||||
|
props: [],
|
||||||
|
|
||||||
|
features: [disablesChildren],
|
||||||
|
};
|
|
@ -7,6 +7,7 @@ import {
|
||||||
IconArrowDownCircleLine,
|
IconArrowDownCircleLine,
|
||||||
} from "@halo-dev/components";
|
} from "@halo-dev/components";
|
||||||
import type { FormKitFrameworkContext } from "@formkit/core";
|
import type { FormKitFrameworkContext } from "@formkit/core";
|
||||||
|
import { group } from "@formkit/inputs";
|
||||||
import type { PropType } from "vue";
|
import type { PropType } from "vue";
|
||||||
import cloneDeep from "lodash.clonedeep";
|
import cloneDeep from "lodash.clonedeep";
|
||||||
|
|
||||||
|
@ -62,7 +63,7 @@ const handleMoveDown = (index: number) => {
|
||||||
:id="`${context.node.name}-group-${index}`"
|
:id="`${context.node.name}-group-${index}`"
|
||||||
:key="`${context.node.name}-group-${index}`"
|
:key="`${context.node.name}-group-${index}`"
|
||||||
:model-value="item"
|
:model-value="item"
|
||||||
type="group"
|
:type="group"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</FormKit>
|
</FormKit>
|
||||||
|
|
|
@ -88,9 +88,17 @@ const theme: Record<string, Record<string, string>> = {
|
||||||
inner: "flex flex-col gap-4",
|
inner: "flex flex-col gap-4",
|
||||||
items: "flex flex-col w-full gap-2",
|
items: "flex flex-col w-full gap-2",
|
||||||
item: "border rounded-base grid grid-cols-12 focus-within:border-primary transition-all overflow-hidden focus-within:shadow-sm",
|
item: "border rounded-base grid grid-cols-12 focus-within:border-primary transition-all overflow-hidden focus-within:shadow-sm",
|
||||||
content: "flex-1 p-2 col-span-11",
|
content: "flex-1 p-2 col-span-11 divide-y divide-gray-100",
|
||||||
controls: "bg-gray-200 col-span-1 flex items-center justify-center",
|
controls: "bg-gray-200 col-span-1 flex items-center justify-center",
|
||||||
},
|
},
|
||||||
|
group: {
|
||||||
|
label: textClassification.label,
|
||||||
|
legend: `${textClassification.label} px-2`,
|
||||||
|
fieldset: boxClassification.fieldset,
|
||||||
|
wrapper: boxClassification.wrapper,
|
||||||
|
help: boxClassification.wrapper,
|
||||||
|
inner: "flex flex-col px-2 divide-y divide-gray-100",
|
||||||
|
},
|
||||||
tagSelect: {
|
tagSelect: {
|
||||||
...textClassification,
|
...textClassification,
|
||||||
inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
|
inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
|
||||||
|
|
Loading…
Reference in New Issue