roomkit-web-vue3/lib/components/ScheduleConference/PanelContainer.vue3.js

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const environment = require("../../utils/environment.js");
const SvgIcon = require("../common/base/SvgIcon.vue.js");
const index = require("../common/base/Dialog/index.js");
const ArrowStrokeBackIcon = require("../common/icons/ArrowStrokeBackIcon.vue.js");
const _hoisted_1 = {
  key: 0,
  class: "panel-container h5"
};
const _hoisted_2 = { class: "container-header" };
const _hoisted_3 = { class: "container-header-title" };
const _hoisted_4 = { class: "container-content" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "PanelContainer",
  props: {
    visible: { type: Boolean },
    title: {},
    editButtonText: { type: [Boolean, String] },
    width: {}
  },
  emits: ["input", "edit"],
  setup(__props, { emit: __emit }) {
    const emit = __emit;
    const props = __props;
    const panelVisible = Vue.ref(false);
    const closePanel = () => {
      emit("input", false);
    };
    Vue.watch(
      () => props.visible,
      (val) => {
        panelVisible.value = val;
      },
      {
        immediate: true
      }
    );
    Vue.watch(
      panelVisible,
      (val) => {
        emit("input", val);
      },
      { immediate: true }
    );
    const handleEdit = () => emit("edit");
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", null, [
        panelVisible.value && Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
          Vue.createElementVNode("div", _hoisted_2, [
            Vue.createVNode(SvgIcon.default, {
              class: "container-header-back",
              icon: ArrowStrokeBackIcon.default,
              onClick: closePanel
            }),
            Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(props.title), 1),
            !_ctx.$slots.edit ? (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 0 }, [
              Vue.renderSlot(_ctx.$slots, "edit", {}, void 0, true),
              Vue.createElementVNode("span", {
                class: "container-header-edit",
                onClick: handleEdit
              }, Vue.toDisplayString(props.editButtonText || ""), 1)
            ], 64)) : Vue.createCommentVNode("", true)
          ]),
          Vue.createElementVNode("div", _hoisted_4, [
            Vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ]),
          Vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
        ])) : Vue.createCommentVNode("", true),
        !Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index.default), {
          key: 1,
          modelValue: panelVisible.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => panelVisible.value = $event),
          title: _ctx.title,
          modal: true,
          "append-to-body": true,
          width: _ctx.width
        }, Vue.createSlots({
          default: Vue.withCtx(() => [
            Vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ]),
          _: 2
        }, [
          _ctx.$slots.footer ? {
            name: "footer",
            fn: Vue.withCtx(() => [
              Vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
            ]),
            key: "0"
          } : void 0
        ]), 1032, ["modelValue", "title", "width"])) : Vue.createCommentVNode("", true)
      ]);
    };
  }
});
exports.default = _sfc_main;