mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 12:08:01 +00:00
2556de1f38
# Pull Request Template ## Description Fixes https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### **Loom video** https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
39 lines
925 B
Vue
39 lines
925 B
Vue
<script>
|
|
export default {
|
|
props: {
|
|
modelValue: { type: Boolean, default: false },
|
|
},
|
|
emits: ['update:modelValue'],
|
|
methods: {
|
|
onClick() {
|
|
this.$emit('update:modelValue', !this.modelValue);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
class="relative flex-shrink-0 h-4 p-0 border-none shadow-inner w-7 rounded-3xl"
|
|
:class="
|
|
modelValue
|
|
? 'bg-primary-600 shadow-primary-800'
|
|
: 'shadow-ash-400 bg-ash-200'
|
|
"
|
|
role="switch"
|
|
:aria-checked="modelValue.toString()"
|
|
@click="onClick"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
|
|
:class="
|
|
modelValue
|
|
? 'ltr:translate-x-0 rtl:translate-x-[0.75rem]'
|
|
: 'ltr:-translate-x-[0.75rem] rtl:translate-x-0'
|
|
"
|
|
/>
|
|
</button>
|
|
</template>
|