@vrx-arco/pro-components
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
68 lines (67 loc) • 2.18 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const core = require("@vueuse/core");
const IconDesktop = require("@vrx-arco/icons-vue/IconDesktop");
const IconMoonFill = require("@vrx-arco/icons-vue/IconMoonFill");
const IconSunFill = require("@vrx-arco/icons-vue/IconSunFill");
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const ThemeDarkLight = /* @__PURE__ */ vue.defineComponent({
name: "vrx-arco-theme-dark-light",
emits: {
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
change: (dark) => true
},
setup: (_, {
emit
}) => {
const mode = core.useColorMode({
selector: "body",
attribute: "arco-theme",
storageKey: "arco-theme",
onChanged: (mode2, defaultHandler) => {
defaultHandler(mode2);
emit("change", mode2 === "dark");
},
modes: {
dark: "dark",
light: "light"
}
});
const cycleList = (index, length) => (index % length + length) % length;
const toggleDark = () => {
const list = ["auto", "light", "dark"];
const index = list.findIndex((item) => item === mode.store.value);
mode.value = list[cycleList(index + 1, list.length)];
};
return () => {
let _slot;
const renderIcon = () => {
const colorMode = mode.store.value;
const config = {
auto: () => vue.createVNode(IconDesktop, {
"class": "arco-icon"
}, null),
light: () => vue.createVNode(IconSunFill, {
"class": "arco-icon"
}, null),
dark: () => vue.createVNode(IconMoonFill, {
"class": "arco-icon"
}, null)
};
return config[colorMode]();
};
return vue.createVNode(webVue.Button, {
"onClick": () => toggleDark(),
"shape": "circle"
}, _isSlot(_slot = renderIcon()) ? _slot : {
default: () => [_slot]
});
};
}
});
exports.ThemeDarkLight = ThemeDarkLight;