chore: Replace darkmode mixin with useDarkMode composable [CW-3474] (#9949)
# Pull Request Template ## Description Replaces darkModeMixin with the new useDarkMode composable and replaces wll usages of mixin the the composable in components and pages Fixes https://linear.app/chatwoot/issue/CW-3474/rewrite-darkmodemixin-mixin-to-a-composable ## Type of change Please delete options that are not relevant. - [x] New feature (non-breaking change which adds functionality) --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Fayaz Ahmed
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin';
|
||||
import { useDarkMode } from 'widget/composables/useDarkMode';
|
||||
export default {
|
||||
mixins: [darkModeMixin],
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
@@ -28,20 +27,33 @@ export default {
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { getThemeClass } = useDarkMode();
|
||||
return { getThemeClass };
|
||||
},
|
||||
computed: {
|
||||
labelClass() {
|
||||
return this.error
|
||||
? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
|
||||
: `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
|
||||
? `text-red-400 ${this.getThemeClass(
|
||||
'text-black-800',
|
||||
'dark:text-slate-50'
|
||||
)}`
|
||||
: `text-black-800 ${this.getThemeClass(
|
||||
'text-black-800',
|
||||
'dark:text-slate-50'
|
||||
)}`;
|
||||
},
|
||||
isInputDarkOrLightMode() {
|
||||
return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
|
||||
'text-slate-700',
|
||||
'dark:text-slate-50'
|
||||
)}`;
|
||||
return `${this.getThemeClass(
|
||||
'bg-white',
|
||||
'dark:bg-slate-600'
|
||||
)} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
|
||||
},
|
||||
inputBorderColor() {
|
||||
return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
|
||||
return `${this.getThemeClass(
|
||||
'border-black-200',
|
||||
'dark:border-black-500'
|
||||
)}`;
|
||||
},
|
||||
inputHasError() {
|
||||
return this.error
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
import countries from 'shared/constants/countries.js';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
import FormulateInputMixin from '@braid/vue-formulate/src/FormulateInputMixin';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin';
|
||||
import { useDarkMode } from 'widget/composables/useDarkMode';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FluentIcon,
|
||||
},
|
||||
mixins: [FormulateInputMixin, darkModeMixin],
|
||||
mixins: [FormulateInputMixin],
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
@@ -19,6 +19,10 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { getThemeClass } = useDarkMode();
|
||||
return { getThemeClass };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedIndex: -1,
|
||||
@@ -45,28 +49,31 @@ export default {
|
||||
return this.activeCountryCode ? 'Clear selection' : 'Select Country';
|
||||
},
|
||||
dropdownClass() {
|
||||
return `${this.$dm('bg-slate-100', 'dark:bg-slate-700')} ${this.$dm(
|
||||
'text-slate-700',
|
||||
'dark:text-slate-50'
|
||||
)}`;
|
||||
return `${this.getThemeClass(
|
||||
'bg-slate-100',
|
||||
'dark:bg-slate-700'
|
||||
)} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
|
||||
},
|
||||
dropdownBackgroundClass() {
|
||||
return `${this.$dm('bg-white', 'dark:bg-slate-700')} ${this.$dm(
|
||||
'text-slate-700',
|
||||
'dark:text-slate-50'
|
||||
)}`;
|
||||
return `${this.getThemeClass(
|
||||
'bg-white',
|
||||
'dark:bg-slate-700'
|
||||
)} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
|
||||
},
|
||||
dropdownItemClass() {
|
||||
return `${this.$dm('text-slate-700', 'dark:text-slate-50')} ${this.$dm(
|
||||
'hover:bg-slate-50',
|
||||
'dark:hover:bg-slate-600'
|
||||
)}`;
|
||||
return `${this.getThemeClass(
|
||||
'text-slate-700',
|
||||
'dark:text-slate-50'
|
||||
)} ${this.getThemeClass('hover:bg-slate-50', 'dark:hover:bg-slate-600')}`;
|
||||
},
|
||||
activeDropdownItemClass() {
|
||||
return `active ${this.$dm('bg-slate-100', 'dark:bg-slate-800')}`;
|
||||
return `active ${this.getThemeClass(
|
||||
'bg-slate-100',
|
||||
'dark:bg-slate-800'
|
||||
)}`;
|
||||
},
|
||||
focusedDropdownItemClass() {
|
||||
return `focus ${this.$dm('bg-slate-50', 'dark:bg-slate-600')}`;
|
||||
return `focus ${this.getThemeClass('bg-slate-50', 'dark:bg-slate-600')}`;
|
||||
},
|
||||
inputHasError() {
|
||||
return this.hasErrorInPhoneInput
|
||||
@@ -74,13 +81,16 @@ export default {
|
||||
: `hover:border-black-300 focus:border-black-300 ${this.inputLightAndDarkModeColor} ${this.inputBorderColor}`;
|
||||
},
|
||||
inputBorderColor() {
|
||||
return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
|
||||
return `${this.getThemeClass(
|
||||
'border-black-200',
|
||||
'dark:border-black-500'
|
||||
)}`;
|
||||
},
|
||||
inputLightAndDarkModeColor() {
|
||||
return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
|
||||
'text-slate-700',
|
||||
'dark:text-slate-50'
|
||||
)}`;
|
||||
return `${this.getThemeClass(
|
||||
'bg-white',
|
||||
'dark:bg-slate-600'
|
||||
)} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
|
||||
},
|
||||
items() {
|
||||
return this.countries.filter(country => {
|
||||
@@ -241,7 +251,7 @@ export default {
|
||||
<span
|
||||
v-if="activeDialCode"
|
||||
class="py-2 pl-2 pr-0 text-base"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
:class="getThemeClass('text-slate-700', 'dark:text-slate-50')"
|
||||
>
|
||||
{{ activeDialCode }}
|
||||
</span>
|
||||
@@ -273,7 +283,10 @@ export default {
|
||||
type="text"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
|
||||
class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
|
||||
:class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
|
||||
:class="[
|
||||
getThemeClass('bg-slate-50', 'dark:bg-slate-600'),
|
||||
inputBorderColor,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@@ -298,7 +311,7 @@ export default {
|
||||
<div v-if="items.length === 0">
|
||||
<span
|
||||
class="flex justify-center mt-4 text-sm text-center"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
:class="getThemeClass('text-slate-700', 'dark:text-slate-50')"
|
||||
>
|
||||
{{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
|
||||
</span>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin';
|
||||
import { useDarkMode } from 'widget/composables/useDarkMode';
|
||||
export default {
|
||||
mixins: [darkModeMixin],
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
@@ -20,20 +19,33 @@ export default {
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { getThemeClass } = useDarkMode();
|
||||
return { getThemeClass };
|
||||
},
|
||||
computed: {
|
||||
labelClass() {
|
||||
return this.error
|
||||
? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
|
||||
: `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
|
||||
? `text-red-400 ${this.getThemeClass(
|
||||
'text-black-800',
|
||||
'dark:text-slate-50'
|
||||
)}`
|
||||
: `text-black-800 ${this.getThemeClass(
|
||||
'text-black-800',
|
||||
'dark:text-slate-50'
|
||||
)}`;
|
||||
},
|
||||
isTextAreaDarkOrLightMode() {
|
||||
return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
|
||||
'text-slate-700',
|
||||
'dark:text-slate-50'
|
||||
)}`;
|
||||
return `${this.getThemeClass(
|
||||
'bg-white',
|
||||
'dark:bg-slate-600'
|
||||
)} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
|
||||
},
|
||||
textAreaBorderColor() {
|
||||
return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
|
||||
return `${this.getThemeClass(
|
||||
'border-black-200',
|
||||
'dark:border-black-500'
|
||||
)}`;
|
||||
},
|
||||
isTextAreaHasError() {
|
||||
return this.error
|
||||
|
||||
Reference in New Issue
Block a user