ami/tl-vikunja
1
0
Fork 0
Code

fix(checkbox): use sibling css selector instead of has

Browse Source 
This makes the checkbox work as intended on older browsers which do not support the :has selector.

Resolves https://kolaente.dev/vikunja/vikunja/issues/2713

(cherry picked from commit 15d95f16da86d57edd02dbe09fd3b55e185b75d9)
This commit is contained in:
kolaente 2024-09-25 14:37:47 +02:00
parent 3e3efa85ea
commit 6dbfbc43da
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/base/BaseCheckbox.vue
View File

@ -3,33 +3,22 @@
v-cy="'checkbox'"
class="base-checkbox"
>
<input
:id="checkboxId"
type="checkbox"
class="is-sr-only"
:checked="modelValue"
:disabled="disabled || undefined"
@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
<label
class="base-checkbox__label"
>
<slot
name="label"
:checkbox-id="checkboxId"
>
<label
:for="checkboxId"
class="base-checkbox__label"
<input
type="checkbox"
class="is-sr-only"
:checked="modelValue"
:disabled="disabled || undefined"
@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
>
<slot />
</label>
</slot>
<slot />
</label>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {createRandomID} from '@/helpers/randomId'
withDefaults(defineProps<{
modelValue?: boolean,
disabled: boolean,
@ -38,10 +27,8 @@ withDefaults(defineProps<{
})
const emit = defineEmits<{
(event: 'update:modelValue', value: boolean): void
(event: 'update:modelValue', value: boolean): void
}>()
const checkboxId = ref(`checkbox_${createRandomID()}`)
</script>
<style lang="scss" scoped>
@ -53,7 +40,7 @@ const checkboxId = ref(`checkbox_${createRandomID()}`)
}
.base-checkbox:has(input:disabled) .base-checkbox__label {
cursor:not-allowed;
cursor: not-allowed;
pointer-events: none;
}
</style>

9
frontend/src/components/input/FancyCheckbox.vue
View File

@ -38,7 +38,6 @@ const emit = defineEmits<{
}>()
</script>
<style lang="scss" scoped>
.fancy-checkbox {
display: inline-block;
@ -70,8 +69,8 @@ const emit = defineEmits<{
}
}
.fancy-checkbox:not(:has(input:disabled)):hover .fancy-checkbox__icon,
.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
.fancy-checkbox:hover input:not(:disabled) + .fancy-checkbox__icon,
.fancy-checkbox input:checked + .fancy-checkbox__icon {
--stroke-color: var(--primary);
}
</style>
@ -80,13 +79,13 @@ const emit = defineEmits<{
// Since css-has-pseudo doesn't work with deep classes,
// the following rules can't be scoped
.fancy-checkbox:has(:not(input:checked)) .fancy-checkbox__icon {
.fancy-checkbox :not(input:checked) + .fancy-checkbox__icon {
path {
transition-delay: 0.05s;
}
}
.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
.fancy-checkbox input:checked + .fancy-checkbox__icon {
path {
stroke-dashoffset: 60;
}