@wfrog/vc/dist/es/components/screenfull/screenfull.mjs

vue3 组件库 vc

import './index.css'
import '../../chunk/E_WRn0OP.mjs';
import { v as vLoading } from '../../chunk/BeMzzYc5.mjs';
import { defineComponent, computed, ref, shallowRef, withDirectives, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createBlock, withCtx, createElementVNode } from 'vue';
import { i as index } from '../../chunk/BdDihk0t.mjs';
import { C as Component$1 } from '../svg-icon/svg-icon.mjs';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "screenfull",
  props: {
    color: {},
    size: {}
  },
  setup(__props) {
    const props = __props;
    const mySize = computed(() => {
      if (props.size && Number.isNaN(+props.size)) {
        return props.size;
      }
      return `${props.size}px`;
    });
    const loading = ref(false);
    const isFullscreen = ref(false);
    const screenfull = shallowRef();
    async function handleClick() {
      if (screenfull.value) {
        screenfull.value.toggle();
        return;
      }
      loading.value = true;
      screenfull.value = await index.loadCdnSingle("screenfull");
      loading.value = false;
      screenfull.value.toggle();
      screenfull.value.on("change", () => {
        isFullscreen.value = screenfull.value.isFullscreen;
      });
    }
    return (_ctx, _cache) => {
      const _directive_loading = vLoading;
      return withDirectives((openBlock(), createElementBlock("span", {
        class: normalizeClass(_ctx.$style.main),
        style: normalizeStyle({ fontSize: unref(mySize), color: __props.color }),
        onClick: handleClick
      }, [
        renderSlot(_ctx.$slots, "default", { isFullscreen: unref(isFullscreen) }, () => [
          unref(isFullscreen) ? (openBlock(), createBlock(Component$1, {
            key: 0,
            name: "screenfull-exit",
            viewBox: "0 0 1024 1024"
          }, {
            default: withCtx(() => [..._cache[0] || (_cache[0] = [
              createElementVNode("path", { d: "M298.666667 298.666667V85.333333h85.333333v298.666667H85.333333V298.666667h213.333334z m426.666666-213.333334v213.333334h213.333334v85.333333h-298.666667V85.333333h85.333333zM298.666667 938.666667v-213.333334H85.333333v-85.333333h298.666667v298.666667H298.666667z m426.666666 0h-85.333333v-298.666667h298.666667v85.333333h-213.333334v213.333334z" }, null, -1)
            ])]),
            _: 1
          })) : (openBlock(), createBlock(Component$1, {
            key: 1,
            name: "screenfull",
            viewBox: "0 0 1024 1024"
          }, {
            default: withCtx(() => [..._cache[1] || (_cache[1] = [
              createElementVNode("path", { d: "M170.666667 170.666667v213.333333H85.333333V85.333333h298.666667v85.333334H170.666667z m682.666666 213.333333V170.666667h-213.333333V85.333333h298.666667v298.666667h-85.333334zM170.666667 640v213.333333h213.333333v85.333334H85.333333v-298.666667h85.333334z m682.666666 0h85.333334v298.666667h-298.666667v-85.333334h213.333333v-213.333333z" }, null, -1)
            ])]),
            _: 1
          }))
        ])
      ], 6)), [
        [_directive_loading, unref(loading)]
      ]);
    };
  }
});

/* unplugin-vue-components disabled */const main = "_main_65031_1";
const icon = "_icon_65031_7";
const style0 = {
	main: main,
	icon: icon
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_24 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_24 as _ };