mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2024-11-21 01:21:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve radio and checkbox input (#667)

Browse Source 
* improve checkbox and radio inputs

* remove leftover icon import
This commit is contained in:
FabianAdrian 2022-06-01 11:28:51 -07:00 committed by GitHub
parent 8a5e4edd50
commit 41e31970ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend-new/src/components/ui/InputCheckbox.vue
View File

@ -22,26 +22,24 @@ const { v, errors, hasError } = useValidation(props.label, props.rules, internal
</script>
<template>
<label class="group relative pl-30px customCheckboxContainer w-max inline-flex" :cursor="disabled ? 'auto' : 'pointer'">
<template v-if="props.label">{{ props.label }}</template>
<input v-model="internalVal" type="checkbox" class="hidden" v-bind="$attrs" :disabled="disabled" @blur="v.$touch()" />
<span
class="absolute top-5px left-0 h-15px w-15px rounded bg-gray-300"
after="absolute hidden content-DEFAULT top-1px left-5px border-solid w-6px h-12px border-r-3px border-b-3px border-white"
group-hover="bg-gray-400"
<label class="customCheckbox group relative flex items-center select-none" :cursor="disabled ? 'auto' : 'pointer'">
<input
v-model="internalVal"
type="checkbox"
class="appearance-none h-4 w-4 bg-gray-300 mr-2 rounded-sm group-hover:bg-gray-400 !checked:bg-primary-400"
dark="bg-gray-600 group-hover:bg-gray-500"
:cursor="disabled ? 'auto' : 'pointer'"
v-bind="$attrs"
:disabled="disabled"
@blur="v.$touch()"
/>
<icon-mdi-check-bold class="absolute h-4 w-4 opacity-0 text-white" />
<template v-if="props.label">{{ props.label }}</template>
</label>
</template>
<style>
/*This is needed, because you cannot have more than one parent group in tailwind/windi*/
.customCheckboxContainer input:checked ~ span {
background-color: #004ee9 !important;
}
/*The tailwind/windi utility class rotate-45 is BROKEN*/
.customCheckboxContainer input:checked ~ span:after {
display: block;
transform: rotate(45deg);
.customCheckbox input:checked ~ svg {
@apply opacity-100;
}
</style>

28
frontend-new/src/components/ui/InputRadio.vue
View File

@ -21,26 +21,22 @@ const { v, errors, hasError } = useValidation(props.label, props.rules, internal
</script>
<template>
<label class="group relative cursor-pointer pl-30px customCheckboxContainer w-max">
<template v-if="props.label">{{ props.label }}</template>
<input v-model="internalVal" type="radio" class="hidden" v-bind="$attrs" @blur="v.$touch()" />
<span
class="absolute top-5px left-0 h-15px w-15px rounded-full bg-gray-300"
after="absolute hidden content-DEFAULT top-1px left-5px border-solid w-6px h-12px border-r-3px border-b-3px border-white rounded-full"
group-hover="bg-gray-400"
<label class="customRadioButton group relative cursor-pointer flex items-center select-none">
<input
v-model="internalVal"
type="radio"
class="appearance-none h-4 w-4 bg-gray-300 mr-2 rounded-full group-hover:bg-gray-400 !checked:bg-primary-400"
dark="bg-gray-600 group-hover:bg-gray-500"
v-bind="$attrs"
@blur="v.$touch()"
/>
<icon-mdi-circle class="absolute h-4 w-4 p-1 opacity-0 text-white" />
<template v-if="props.label">{{ props.label }}</template>
</label>
</template>
<style>
/*This is needed, because you cannot have more than one parent group in tailwind/windi*/
.customCheckboxContainer input:checked ~ span {
background-color: #004ee9 !important;
}
/*The tailwind/windi utility class rotate-45 is BROKEN*/
.customCheckboxContainer input:checked ~ span:after {
display: block;
transform: rotate(45deg);
.customRadioButton input:checked ~ svg {
@apply opacity-100;
}
</style>