big-screen-library/dist/big-screen-library.es.js

import { openBlock as a, createElementBlock as r, renderSlot as s, defineComponent as B, Fragment as V, renderList as I, ref as $, computed as w, watch as C, createElementVNode as l, normalizeStyle as m, createVNode as _, withCtx as h, normalizeProps as S, guardReactiveProps as y, createCommentVNode as f, createBlock as k } from "vue";
const v = (e, c) => {
  const n = e.__vccOpts || e;
  for (const [o, i] of c)
    n[o] = i;
  return n;
}, L = {}, R = { class: "left-panel" };
function W(e, c) {
  return a(), r("aside", R, [
    s(e.$slots, "default", {}, void 0, !0)
  ]);
}
const N = /* @__PURE__ */ v(L, [["render", W], ["__scopeId", "data-v-87929ad4"]]), z = {}, E = { class: "right-panel" };
function F(e, c) {
  return a(), r("aside", E, [
    s(e.$slots, "default", {}, void 0, !0)
  ]);
}
const M = /* @__PURE__ */ v(z, [["render", F], ["__scopeId", "data-v-eecf0344"]]), q = { class: "scene-switcher" }, A = /* @__PURE__ */ B({
  __name: "SceneSwitcher",
  props: {
    scenes: {}
  },
  emits: ["scene-change"],
  setup(e, { emit: c }) {
    const n = c;
    function o(i) {
      n("scene-change", {
        sceneId: i.id,
        panels: i.panels || { left: !0, right: !0 }
      });
    }
    return (i, u) => (a(), r("div", q, [
      (a(!0), r(V, null, I(i.scenes, (g) => s(i.$slots, "scene", {
        key: g.id,
        scene: g,
        handleChange: o
      }, void 0, !0)), 128))
    ]));
  }
}), b = /* @__PURE__ */ v(A, [["__scopeId", "data-v-935b7e6b"]]), O = { class: "big-screen-layout" }, j = { class: "center-content" }, D = {
  key: 0,
  class: "header"
}, G = { class: "header-left" }, J = { class: "header-center-group" }, K = { class: "header-title" }, Q = {
  key: 1,
  class: "header-title"
}, T = { class: "header-right" }, U = {
  key: 0,
  class: "scene-bottom"
}, X = /* @__PURE__ */ B({
  __name: "BigScreenLayout",
  props: {
    scenes: {
      type: Array,
      required: !0
    },
    sceneSwitcherPosition: {
      type: String,
      default: "header-distributed",
      validator: (e) => ["header-distributed", "header-bottom"].includes(e)
    },
    headerBackgroundColor: {
      type: String,
      default: "rgba(16, 24, 52, 0.8)"
    },
    headerHeight: {
      type: String,
      default: "64px"
    },
    headerBlur: {
      type: Boolean,
      default: !0
    },
    headerShow: {
      type: Boolean,
      default: !0
    },
    leftWidth: {
      type: String,
      default: "350px"
    },
    rightWidth: {
      type: String,
      default: "350px"
    },
    leftPanelVisible: {
      type: Boolean,
      default: !0
    },
    rightPanelVisible: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["sceneChange", "panelChange"],
  setup(e, { emit: c }) {
    const n = e, o = c, i = $(!0), u = $(!0), g = w(() => {
      if (n.sceneSwitcherPosition === "header-distributed") {
        const t = Math.ceil(n.scenes.length / 2);
        return n.scenes.slice(0, t);
      }
      return [];
    }), H = w(() => {
      if (n.sceneSwitcherPosition === "header-distributed") {
        const t = Math.ceil(n.scenes.length / 2);
        return n.scenes.slice(t);
      }
      return [];
    });
    C(
      () => n.leftPanelVisible,
      (t) => {
        i.value = t;
      }
    ), C(
      () => n.rightPanelVisible,
      (t) => {
        u.value = t;
      }
    );
    function p(t) {
      i.value = t.panels.left, u.value = t.panels.right, o("sceneChange", t), o("panelChange", { panel: "left", visible: t.panels.left }), o("panelChange", { panel: "right", visible: t.panels.right });
    }
    return (t, Z) => (a(), r("div", O, [
      l("div", j, [
        s(t.$slots, "center-content", {}, void 0, !0)
      ]),
      e.headerShow ? (a(), r("div", D, [
        l("div", {
          class: "header-content",
          style: m({
            background: e.headerBackgroundColor,
            backdropFilter: e.headerBlur ? "blur(10px)" : "none"
          })
        }, [
          l("div", G, [
            s(t.$slots, "info-area", {}, void 0, !0)
          ]),
          l("div", J, [
            e.sceneSwitcherPosition === "header-distributed" ? (a(), r(V, { key: 0 }, [
              _(b, {
                scenes: g.value,
                onSceneChange: p
              }, {
                scene: h((d) => [
                  s(t.$slots, "scene", S(y(d)), void 0, !0)
                ]),
                _: 3
              }, 8, ["scenes"]),
              l("div", K, [
                s(t.$slots, "header-title", {}, void 0, !0)
              ]),
              _(b, {
                scenes: H.value,
                onSceneChange: p
              }, {
                scene: h((d) => [
                  s(t.$slots, "scene", S(y(d)), void 0, !0)
                ]),
                _: 3
              }, 8, ["scenes"])
            ], 64)) : (a(), r("div", Q, [
              s(t.$slots, "header-title", {}, void 0, !0)
            ]))
          ]),
          l("div", T, [
            s(t.$slots, "control-panel", {}, void 0, !0)
          ])
        ], 4),
        e.sceneSwitcherPosition === "header-bottom" ? (a(), r("div", U, [
          _(b, {
            scenes: e.scenes,
            onSceneChange: p
          }, {
            scene: h((d) => [
              s(t.$slots, "scene", S(y(d)), void 0, !0)
            ]),
            _: 3
          }, 8, ["scenes"])
        ])) : f("", !0)
      ])) : f("", !0),
      i.value ? (a(), k(N, {
        key: 1,
        class: "side-panel left-panel",
        style: m({
          width: e.leftWidth,
          top: e.headerHeight,
          height: `calc(100vh - ${e.headerHeight})`
        })
      }, {
        default: h(() => [
          s(t.$slots, "left-panel", {}, void 0, !0)
        ]),
        _: 3
      }, 8, ["style"])) : f("", !0),
      u.value ? (a(), k(M, {
        key: 2,
        class: "side-panel right-panel",
        style: m({
          width: e.rightWidth,
          top: e.headerHeight,
          height: `calc(100vh - ${e.headerHeight})`
        })
      }, {
        default: h(() => [
          s(t.$slots, "right-panel", {}, void 0, !0)
        ]),
        _: 3
      }, 8, ["style"])) : f("", !0)
    ]));
  }
}), P = /* @__PURE__ */ v(X, [["__scopeId", "data-v-72bc5e64"]]), Y = (e) => {
  e.component(P.name || "BigScreen", P);
}, ee = { install: Y };
export {
  P as BigScreen,
  ee as default
};