|
|
@ -59,13 +59,18 @@ const setFormState = (path: string, value: any) => { |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="field.type === FormBuilderInputType.Input"> |
|
|
|
<template v-if="field.type === FormBuilderInputType.Input"> |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
|
|
|
|
autocomplete="off" |
|
|
|
class="!w-full" |
|
|
|
class="!w-full" |
|
|
|
:value="deepReference(field.model)" |
|
|
|
:value="deepReference(field.model)" |
|
|
|
@update:value="setFormState(field.model, $event)" |
|
|
|
@update:value="setFormState(field.model, $event)" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else-if="field.type === FormBuilderInputType.Password"> |
|
|
|
<template v-else-if="field.type === FormBuilderInputType.Password"> |
|
|
|
<a-input-password :value="deepReference(field.model)" @update:value="setFormState(field.model, $event)" /> |
|
|
|
<a-input-password |
|
|
|
|
|
|
|
autocomplete="off" |
|
|
|
|
|
|
|
:value="deepReference(field.model)" |
|
|
|
|
|
|
|
@update:value="setFormState(field.model, $event)" |
|
|
|
|
|
|
|
/> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else-if="field.type === FormBuilderInputType.Select"> |
|
|
|
<template v-else-if="field.type === FormBuilderInputType.Select"> |
|
|
|
<NcSelect |
|
|
|
<NcSelect |
|
|
@ -122,6 +127,7 @@ const setFormState = (path: string, value: any) => { |
|
|
|
:deep(.ant-collapse-header) { |
|
|
|
:deep(.ant-collapse-header) { |
|
|
|
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex; |
|
|
|
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) { |
|
|
|
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) { |
|
|
|
@apply !right-0; |
|
|
|
@apply !right-0; |
|
|
|
} |
|
|
|
} |
|
|
@ -162,9 +168,11 @@ const setFormState = (path: string, value: any) => { |
|
|
|
.nc-form-section { |
|
|
|
.nc-form-section { |
|
|
|
@apply flex flex-col gap-3; |
|
|
|
@apply flex flex-col gap-3; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-form-section-title { |
|
|
|
.nc-form-section-title { |
|
|
|
@apply text-sm font-bold text-gray-800; |
|
|
|
@apply text-sm font-bold text-gray-800; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-form-section-body { |
|
|
|
.nc-form-section-body { |
|
|
|
@apply flex flex-col gap-3; |
|
|
|
@apply flex flex-col gap-3; |
|
|
|
} |
|
|
|
} |
|
|
@ -179,9 +187,11 @@ const setFormState = (path: string, value: any) => { |
|
|
|
&:not(:hover):not(:focus):not(:disabled) { |
|
|
|
&:not(:hover):not(:focus):not(:disabled) { |
|
|
|
@apply shadow-default; |
|
|
|
@apply shadow-default; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:hover:not(:focus):not(:disabled) { |
|
|
|
&:hover:not(:focus):not(:disabled) { |
|
|
|
@apply shadow-hover; |
|
|
|
@apply shadow-hover; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:focus { |
|
|
|
&:focus { |
|
|
|
@apply shadow-error ring-0; |
|
|
|
@apply shadow-error ring-0; |
|
|
|
} |
|
|
|
} |
|
|
@ -192,34 +202,42 @@ const setFormState = (path: string, value: any) => { |
|
|
|
&:not(:hover):not(:focus-within):not(:disabled) { |
|
|
|
&:not(:hover):not(:focus-within):not(:disabled) { |
|
|
|
@apply shadow-default; |
|
|
|
@apply shadow-default; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:hover:not(:focus-within):not(:disabled) { |
|
|
|
&:hover:not(:focus-within):not(:disabled) { |
|
|
|
@apply shadow-hover; |
|
|
|
@apply shadow-hover; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:focus-within { |
|
|
|
&:focus-within { |
|
|
|
@apply shadow-error ring-0; |
|
|
|
@apply shadow-error ring-0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:not(.ant-form-item-has-error) { |
|
|
|
&:not(.ant-form-item-has-error) { |
|
|
|
&:not(:has(.ant-input-password)) .ant-input { |
|
|
|
&:not(:has(.ant-input-password)) .ant-input { |
|
|
|
&:not(:hover):not(:focus):not(:disabled) { |
|
|
|
&:not(:hover):not(:focus):not(:disabled) { |
|
|
|
@apply shadow-default border-gray-200; |
|
|
|
@apply shadow-default border-gray-200; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:hover:not(:focus):not(:disabled) { |
|
|
|
&:hover:not(:focus):not(:disabled) { |
|
|
|
@apply border-gray-200 shadow-hover; |
|
|
|
@apply border-gray-200 shadow-hover; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:focus { |
|
|
|
&:focus { |
|
|
|
@apply shadow-selected ring-0; |
|
|
|
@apply shadow-selected ring-0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.ant-input-number, |
|
|
|
.ant-input-number, |
|
|
|
.ant-input-affix-wrapper.ant-input-password { |
|
|
|
.ant-input-affix-wrapper.ant-input-password { |
|
|
|
&:not(:hover):not(:focus-within):not(:disabled) { |
|
|
|
&:not(:hover):not(:focus-within):not(:disabled) { |
|
|
|
@apply shadow-default border-gray-200; |
|
|
|
@apply shadow-default border-gray-200; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:hover:not(:focus-within):not(:disabled) { |
|
|
|
&:hover:not(:focus-within):not(:disabled) { |
|
|
|
@apply border-gray-200 shadow-hover; |
|
|
|
@apply border-gray-200 shadow-hover; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:focus-within { |
|
|
|
&:focus-within { |
|
|
|
@apply shadow-selected ring-0; |
|
|
|
@apply shadow-selected ring-0; |
|
|
|
} |
|
|
|
} |
|
|
|