mirror of https://github.com/halo-dev/halo
feat: add tailwindcss/forms plugin to standardize the style of form elements (#4893)
#### What type of PR is this? /area console /kind improvement #### What this PR does / why we need it: Use [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to standardize the style of form elements, and resolve some style issues. before: <img width="294" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/eeb6792f-a278-4fd0-a99c-7d7e50dd550d"> after: <img width="291" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/652b07d8-7410-4c62-9b4f-1b3228d68883"> #### Which issue(s) this PR fixes: Fixes #4734 #### Does this PR introduce a user-facing change? ```release-note 优化 Console 端表单元素样式 ```pull/4902/head
parent
0bfa1709ce
commit
1f1f3cb724
|
@ -293,7 +293,6 @@ onMounted(() => {
|
|||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
|
|
@ -122,7 +122,6 @@ const { operationItems } = useOperationItemExtensionPoint<Attachment>(
|
|||
>
|
||||
<input
|
||||
:checked="selectedAttachments.has(attachment)"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@click="emit('select', attachment)"
|
||||
/>
|
||||
|
|
|
@ -236,7 +236,6 @@ const handleApproveInBatch = async () => {
|
|||
>
|
||||
<input
|
||||
v-model="checkAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
@ -375,7 +374,6 @@ const handleApproveInBatch = async () => {
|
|||
<input
|
||||
v-model="selectedCommentNames"
|
||||
:value="comment?.comment?.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
name="comment-checkbox"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
|
|
@ -240,7 +240,6 @@ watch(
|
|||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
@ -308,7 +307,6 @@ watch(
|
|||
<input
|
||||
v-model="selectedPageNames"
|
||||
:value="singlePage.page.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -325,7 +325,6 @@ watch(selectedPageNames, (newValue) => {
|
|||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
|
|
@ -130,7 +130,6 @@ const handleDelete = async () => {
|
|||
<input
|
||||
v-model="selectedPageNames"
|
||||
:value="singlePage.page.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -233,7 +233,6 @@ watch(
|
|||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
@ -300,7 +299,6 @@ watch(
|
|||
<input
|
||||
v-model="selectedPostNames"
|
||||
:value="post.post.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
name="post-checkbox"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
|
|
@ -331,7 +331,6 @@ watch(selectedPostNames, (newValue) => {
|
|||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
|
|
@ -178,7 +178,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<ListedPost>(
|
|||
<input
|
||||
v-model="selectedPostNames"
|
||||
:value="post.post.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
name="post-checkbox"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
|
|
@ -167,7 +167,6 @@ onMounted(() => {
|
|||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
|
|
@ -240,7 +240,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<Plugin>(
|
|||
<input
|
||||
v-model="selectedNames"
|
||||
:value="plugin.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
name="post-checkbox"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
|
|
@ -233,18 +233,11 @@ onMounted(() => {
|
|||
v-if="!isSuperRole"
|
||||
v-model="selectedRoleTemplates"
|
||||
:value="role.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
:disabled="isSystemReserved"
|
||||
@change="handleRoleTemplateSelect"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
checked
|
||||
disabled
|
||||
/>
|
||||
<input v-else type="checkbox" checked disabled />
|
||||
<div class="flex flex-1 flex-col gap-y-3">
|
||||
<span class="font-medium text-gray-900">
|
||||
{{
|
||||
|
|
|
@ -219,7 +219,6 @@ const handleResetForm = () => {
|
|||
<input
|
||||
v-model="selectedRoleTemplates"
|
||||
:value="roleTemplate.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleRoleTemplateSelect"
|
||||
/>
|
||||
|
|
|
@ -299,7 +299,6 @@ onMounted(() => {
|
|||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleCheckAllChange"
|
||||
/>
|
||||
|
@ -412,7 +411,6 @@ onMounted(() => {
|
|||
<input
|
||||
v-model="selectedUserNames"
|
||||
:value="user.user.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
name="post-checkbox"
|
||||
type="checkbox"
|
||||
:disabled="
|
||||
|
|
|
@ -113,6 +113,7 @@
|
|||
"@rushstack/eslint-patch": "^1.3.2",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@tailwindcss/container-queries": "^0.1.0",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tsconfig/node18": "^2.0.1",
|
||||
"@types/jsdom": "^20.0.1",
|
||||
"@types/lodash.clonedeep": "4.5.7",
|
||||
|
|
|
@ -225,6 +225,9 @@ importers:
|
|||
'@tailwindcss/container-queries':
|
||||
specifier: ^0.1.0
|
||||
version: 0.1.0(tailwindcss@3.3.0)
|
||||
'@tailwindcss/forms':
|
||||
specifier: ^0.5.7
|
||||
version: 0.5.7(tailwindcss@3.3.0)
|
||||
'@tsconfig/node18':
|
||||
specifier: ^2.0.1
|
||||
version: 2.0.1
|
||||
|
@ -3422,6 +3425,15 @@ packages:
|
|||
tailwindcss: 3.3.0(postcss@8.4.21)
|
||||
dev: true
|
||||
|
||||
/@tailwindcss/forms@0.5.7(tailwindcss@3.3.0):
|
||||
resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
|
||||
peerDependencies:
|
||||
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
|
||||
dependencies:
|
||||
mini-svg-data-uri: 1.4.4
|
||||
tailwindcss: 3.3.0(postcss@8.4.21)
|
||||
dev: true
|
||||
|
||||
/@tanstack/match-sorter-utils@8.7.6:
|
||||
resolution: {integrity: sha512-2AMpRiA6QivHOUiBpQAVxjiHAA68Ei23ZUMNaRJrN6omWiSFLoYrxGcT6BXtuzp0Jw4h6HZCmGGIM/gbwebO2A==}
|
||||
engines: {node: '>=12'}
|
||||
|
@ -8798,6 +8810,11 @@ packages:
|
|||
engines: {node: '>=4'}
|
||||
dev: true
|
||||
|
||||
/mini-svg-data-uri@1.4.4:
|
||||
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/minimatch@3.1.2:
|
||||
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
|
||||
dependencies:
|
||||
|
|
|
@ -382,7 +382,7 @@ const onVisibleChange = (visible: boolean) => {
|
|||
ref="globalSearchInput"
|
||||
v-model="keyword"
|
||||
:placeholder="$t('core.components.global_search.placeholder')"
|
||||
class="w-full py-1 text-base outline-none"
|
||||
class="w-full px-0 py-1 text-base outline-none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
|
|
|
@ -4,7 +4,7 @@ const textClassification = {
|
|||
inner:
|
||||
"inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary focus-within:shadow-sm w-full sm:max-w-lg transition-all",
|
||||
input:
|
||||
"outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-full px-3 text-sm",
|
||||
"bg-white resize-none w-full text-black block transition-all h-full px-3 text-sm",
|
||||
};
|
||||
|
||||
const boxClassification = {
|
||||
|
@ -15,8 +15,7 @@ const boxClassification = {
|
|||
wrapper:
|
||||
"flex items-center mb-1 cursor-pointer group-[.formkit-fieldset]:px-2",
|
||||
help: "mb-2 mt-0 px-2",
|
||||
input:
|
||||
"form-check-input h-4 w-4 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-primary focus:outline-none focus:ring-0 transition duration-200",
|
||||
input: "form-check-input mr-2 bg-white",
|
||||
inner: "flex items-center",
|
||||
};
|
||||
|
||||
|
@ -105,7 +104,7 @@ const theme: Record<string, Record<string, string>> = {
|
|||
tagSelect: {
|
||||
...textClassification,
|
||||
inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
|
||||
input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`,
|
||||
input: `w-0 flex-grow bg-transparent py-1 px-3 block transition-all text-sm`,
|
||||
"post-tags-wrapper": "flex w-full items-center",
|
||||
"post-tags": "flex w-full flex-wrap items-center",
|
||||
"post-tag-wrapper": "inline-flex items-center p-1",
|
||||
|
@ -118,7 +117,7 @@ const theme: Record<string, Record<string, string>> = {
|
|||
categorySelect: {
|
||||
...textClassification,
|
||||
inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
|
||||
input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`,
|
||||
input: `w-0 flex-grow bg-transparent py-1 px-3 block transition-all text-sm`,
|
||||
"post-categories-wrapper": "flex w-full items-center",
|
||||
"post-categories": "flex w-full flex-wrap items-center",
|
||||
"post-categories-button":
|
||||
|
|
|
@ -1,3 +1,26 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* override @tailwindcss/forms styles */
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="url"],
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"],
|
||||
input[type="week"],
|
||||
input[type="time"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input:where(:not([type])),
|
||||
select,
|
||||
textarea {
|
||||
@apply border-none py-0 focus:outline-0 focus:ring-0;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
@apply rounded-sm border-gray-500;
|
||||
}
|
||||
|
|
|
@ -24,6 +24,7 @@ module.exports = {
|
|||
require("@tailwindcss/aspect-ratio"),
|
||||
require("@formkit/themes/tailwindcss"),
|
||||
require("@tailwindcss/container-queries"),
|
||||
require("@tailwindcss/forms"),
|
||||
require("tailwindcss-themer")({
|
||||
defaultTheme: {
|
||||
extend: {
|
||||
|
|
|
@ -179,7 +179,6 @@ const { copy } = useClipboard({
|
|||
<input
|
||||
v-model="selectedRoleTemplates"
|
||||
:value="roleTemplate.metadata.name"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
|
||||
type="checkbox"
|
||||
@change="handleRoleTemplateSelect"
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue