/**
* @description dark mode component
* @author 阿怪
* @date 2023/4/25 20:06
* @version v1.0.0
*
* 江湖的业务千篇一律，复杂的代码好几百行。
*
* todo fix feDropShadow warning
*/
import { defineComponent, h, onMounted, watch } from 'vue';
import { props } from './api';
import { useDarkMode } from './useDarkMode';
import { DarkModeProps } from './index';
import './darkMode.css';
export default defineComponent((props: DarkModeProps, { emit }) => {
const { onMountedHook, toggleDarkMode, isDarkRef } = useDarkMode(props);
const clickHandler = () => {
isDarkRef.value = toggleDarkMode({ modelValue: !isDarkRef.value });
emitChange(isDarkRef.value);
};
const emitChange = (val: boolean) => {
emit('update:modelValue', val);
emit('change', val);
};
onMounted(() => {
let autoInit = props.autoMode;
if (props.initHandler && typeof props.initHandler === 'function') {
autoInit = props.initHandler();
if (props.modelValue !== isDarkRef.value) {
isDarkRef.value = Boolean(props.modelValue);
}
}
if (autoInit) {
onMountedHook();
emitChange(isDarkRef.value);
}
});
watch(() => props.modelValue, val => {
if (val !== isDarkRef.value) {
toggleDarkMode({ modelValue: val });
}
});
return () => {
const svg = ;
return clickHandler()}>
{svg}
;
};
}, {
name: 'MDarkMode',
props,
emits: ['update:modelValue', 'change'],
});