vuepress-theme-hope/lib/client/components/appearance/ToggleFullScreenButton.js

A light vuepress theme with tons of features

import { useFullscreen } from "@vueuse/core";
import { defineComponent, h } from "vue";
import { IconBase } from "vuepress-shared/client";
import "../../styles/appearance/toggle-full-screen-button.scss";
const CancelFullScreenIcon = () => h(IconBase, { name: "cancel-fullscreen" }, () => h("path", {
    d: "M778.468 78.62H247.922c-102.514 0-186.027 83.513-186.027 186.027V795.08c0 102.514 83.513 186.027 186.027 186.027h530.432c102.514 0 186.71-83.513 186.026-186.027V264.647C964.494 162.02 880.981 78.62 778.468 78.62zM250.88 574.35h171.122c23.324 0 43.122 19.115 43.804 43.805v171.121c0 24.008-19.114 43.122-43.122 43.122-12.06 0-22.641-5.006-30.378-12.743s-12.743-19.115-12.743-30.379V722.83L224.597 877.91c-16.953 16.952-44.6 16.952-61.553 0-16.953-16.954-16.953-44.602 0-61.554L318.009 661.39h-66.446c-24.007 0-43.122-19.114-43.122-43.122 0-24.12 18.432-43.918 42.439-43.918zm521.899-98.873H601.657c-23.325 0-43.122-19.114-43.805-43.804V260.55c0-24.007 19.115-43.122 43.122-43.122 12.06 0 22.642 5.007 30.379 12.743s12.743 19.115 12.743 30.38v66.445l154.965-154.965c16.953-16.953 44.601-16.953 61.554 0 16.953 16.953 16.953 44.6 0 61.554L705.536 388.55h66.446c24.007 0 43.122 19.115 43.122 43.122.114 24.007-18.318 43.804-42.325 43.804z",
}));
CancelFullScreenIcon.displayName = "CancelFullScreenIcon";
const EnterFullScreenIcon = () => h(IconBase, { name: "enter-fullscreen" }, () => h("path", {
    d: "M762.773 90.24h-497.28c-96.106 0-174.4 78.293-174.4 174.4v497.28c0 96.107 78.294 174.4 174.4 174.4h497.28c96.107 0 175.04-78.293 174.4-174.4V264.64c0-96.213-78.186-174.4-174.4-174.4zm-387.2 761.173H215.04c-21.867 0-40.427-17.92-41.067-41.066V649.92c0-22.507 17.92-40.427 40.427-40.427 11.307 0 21.227 4.694 28.48 11.947 7.253 7.253 11.947 17.92 11.947 28.48v62.293l145.28-145.28c15.893-15.893 41.813-15.893 57.706 0 15.894 15.894 15.894 41.814 0 57.707l-145.28 145.28h62.294c22.506 0 40.426 17.92 40.426 40.427s-17.173 41.066-39.68 41.066zM650.24 165.76h160.427c21.866 0 40.426 17.92 41.066 41.067v160.426c0 22.507-17.92 40.427-40.426 40.427-11.307 0-21.227-4.693-28.48-11.947-7.254-7.253-11.947-17.92-11.947-28.48v-62.186L625.6 450.347c-15.893 15.893-41.813 15.893-57.707 0-15.893-15.894-15.893-41.814 0-57.707l145.28-145.28H650.88c-22.507 0-40.427-17.92-40.427-40.427s17.174-41.173 39.787-41.173z",
}));
EnterFullScreenIcon.displayName = "EnterFullScreenIcon";
export default defineComponent({
    name: "ToggleFullScreenButton",
    setup() {
        const { isSupported, isFullscreen, toggle } = useFullscreen();
        return () => isSupported.value
            ? h("button", {
                type: "button",
                id: "full-screen-switch",
                class: "full-screen",
                ariaPressed: isFullscreen.value,
                onClick: () => toggle(),
            }, isFullscreen.value
                ? h(CancelFullScreenIcon)
                : h(EnterFullScreenIcon))
            : null;
    },
});
//# sourceMappingURL=ToggleFullScreenButton.js.map