tuikit-atomicx-vue3 3.3.4 → 3.4.2

package/dist/components/LiveScenePanel/CameraSettingDialog.js

@@ -1,215 +1,153 @@
-import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createBlock, openBlock, unref, withCtx, createElementVNode, createVNode, toDisplayString, createElementBlock, Fragment, renderList } from "vue";
-import { useDeviceState } from "../../states/DeviceState.js";
-import { TRTCCloud, TRTCVideoResolution, TRTCVideoMirrorType, TRTCVideoFillMode, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
-import { useUIKit, TUIDialog, TUISelect, TUIOption } from "@tencentcloud/uikit-base-component-vue3";
-import SvgIcon from "../../baseComp/SvgIcon.js";
-import CameraMirror from "./icons/CameraMirror.js";
-import CameraUnMirror from "./icons/CameraUnmirror.js";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "basic-setting" };
-const _hoisted_2 = { class: "item-setting" };
-const _hoisted_3 = { class: "title" };
-const _hoisted_4 = { class: "item-setting" };
-const _hoisted_5 = { class: "title" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as Q, computed as R, ref as C, watch as U, onMounted as W, onBeforeUnmount as X, createBlock as V, openBlock as v, unref as d, withCtx as I, createElementVNode as u, createVNode as b, toDisplayString as E, createElementBlock as F, Fragment as N, renderList as k } from "vue";
+import { useDeviceState as Y } from "../../states/DeviceState.js";
+import { TRTCCloud as Z, TRTCVideoResolution as T, TRTCVideoMirrorType as n, TRTCVideoFillMode as L, TRTCVideoRotation as B } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit as $, TUIDialog as ee, TUISelect as A, TUIOption as O } from "@tencentcloud/uikit-base-component-vue3";
+import ae from "../../baseComp/SvgIcon.js";
+import oe from "./icons/CameraMirror.js";
+import re from "./icons/CameraUnmirror.js";
+import { _ as ie } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const le = { class: "basic-setting" }, te = { class: "item-setting" }, ne = { class: "title" }, de = { class: "item-setting" }, se = { class: "title" }, ue = /* @__PURE__ */ Q({
   __name: "CameraSettingDialog",
   props: {
     mediaSource: {}
   },
   emits: ["addCameraMaterial", "updateCameraMaterial", "close"],
-  setup(__props, { emit: __emit }) {
-    var _a, _b, _c, _d, _e;
-    const previewTRTCCloud = new TRTCCloud();
-    const { t } = useUIKit();
-    const { cameraList } = useDeviceState();
-    const props = __props;
-    const emits = __emit;
-    const title = computed(() => {
-      return props.mediaSource ? t("Update Camera") : t("Add Camera");
-    });
-    const confirmText = computed(() => {
-      return props.mediaSource ? t("Update Camera") : t("Add Camera");
-    });
-    const currentCameraId = ref(((_a = props.mediaSource) == null ? void 0 : _a.camera.cameraId) || ((_b = cameraList.value[0]) == null ? void 0 : _b.deviceId));
-    const currentResolution = ref(((_c = props.mediaSource) == null ? void 0 : _c.camera.resolution) || TRTCVideoResolution.TRTCVideoResolution_1280_720);
-    const currentFps = ref((_d = props.mediaSource) == null ? void 0 : _d.camera.fps);
-    const isMirror = ref(
-      ((_e = props.mediaSource) == null ? void 0 : _e.camera.mirror) === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable || true
-    );
-    const videoResolutionList = computed(() => [
-      { label: "640x360", value: TRTCVideoResolution.TRTCVideoResolution_640_360 },
-      { label: "960x540", value: TRTCVideoResolution.TRTCVideoResolution_960_540 },
-      { label: "1280x720", value: TRTCVideoResolution.TRTCVideoResolution_1280_720 },
-      { label: "1920x1080", value: TRTCVideoResolution.TRTCVideoResolution_1920_1080 }
+  setup(P, { emit: j }) {
+    var g, D, S, w, x;
+    const t = new Z(), { t: c } = $(), { cameraList: l } = Y(), i = P, p = j, K = R(() => i.mediaSource ? c("Update Camera") : c("Add Camera")), q = R(() => i.mediaSource ? c("Update Camera") : c("Add Camera")), r = C(((g = i.mediaSource) == null ? void 0 : g.camera.cameraId) || ((D = l.value[0]) == null ? void 0 : D.deviceId)), m = C(((S = i.mediaSource) == null ? void 0 : S.camera.resolution) || T.TRTCVideoResolution_1280_720), y = C((w = i.mediaSource) == null ? void 0 : w.camera.fps), s = C(
+      ((x = i.mediaSource) == null ? void 0 : x.camera.mirror) === n.TRTCVideoMirrorType_Enable || !0
+    ), z = R(() => [
+      { label: "640x360", value: T.TRTCVideoResolution_640_360 },
+      { label: "960x540", value: T.TRTCVideoResolution_960_540 },
+      { label: "1280x720", value: T.TRTCVideoResolution_1280_720 },
+      { label: "1920x1080", value: T.TRTCVideoResolution_1920_1080 }
     ]);
-    watch(() => cameraList.value, async () => {
-      var _a2;
-      if (!cameraList.value.find((item) => item.deviceId === currentCameraId.value)) {
-        currentCameraId.value = (_a2 = cameraList.value[0]) == null ? void 0 : _a2.deviceId;
-        await previewTRTCCloud.setCurrentCameraDevice(currentCameraId.value);
-      }
-    });
-    onMounted(async () => {
-      var _a2, _b2, _c2;
-      if ((_a2 = props.mediaSource) == null ? void 0 : _a2.camera.cameraId) {
-        currentCameraId.value = props.mediaSource.camera.cameraId;
-        await previewTRTCCloud.setCurrentCameraDevice(props.mediaSource.camera.cameraId);
-      } else {
-        currentCameraId.value = (_b2 = cameraList.value[0]) == null ? void 0 : _b2.deviceId;
-        await previewTRTCCloud.setCurrentCameraDevice((_c2 = cameraList.value[0]) == null ? void 0 : _c2.deviceId);
-      }
-      await previewTRTCCloud.startCameraDeviceTest("video-preview");
-    });
-    onBeforeUnmount(async () => {
-      await previewTRTCCloud.stopCameraDeviceTest();
-      previewTRTCCloud.destroy();
-    });
-    watch(
-      () => props.mediaSource,
-      async (mediaSource) => {
-        console.log("mediaSource", mediaSource);
-        if (mediaSource) {
-          const cameraConfig = mediaSource.camera;
-          if (currentCameraId.value !== cameraConfig.cameraId) {
-            currentCameraId.value = cameraConfig.cameraId;
-            await previewTRTCCloud.setCurrentCameraDevice(cameraConfig.cameraId);
-          }
-          if (currentResolution.value !== cameraConfig.resolution) {
-            currentResolution.value = cameraConfig.resolution;
-          }
-          if (currentFps.value !== cameraConfig.fps) {
-            currentFps.value = cameraConfig.fps;
-          }
-          isMirror.value = mediaSource.layout.mirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable;
-          await previewTRTCCloud.setLocalRenderParams({
-            rotation: TRTCVideoRotation.TRTCVideoRotation_0,
-            fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
-            mirrorType: isMirror.value ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable
+    U(() => l.value, async () => {
+      var a;
+      l.value.find((e) => e.deviceId === r.value) || (r.value = (a = l.value[0]) == null ? void 0 : a.deviceId, await t.setCurrentCameraDevice(r.value));
+    }), W(async () => {
+      var a, e, o;
+      (a = i.mediaSource) != null && a.camera.cameraId ? (r.value = i.mediaSource.camera.cameraId, await t.setCurrentCameraDevice(i.mediaSource.camera.cameraId)) : (r.value = (e = l.value[0]) == null ? void 0 : e.deviceId, await t.setCurrentCameraDevice((o = l.value[0]) == null ? void 0 : o.deviceId)), await t.startCameraDeviceTest("video-preview");
+    }), X(async () => {
+      await t.stopCameraDeviceTest(), t.destroy();
+    }), U(
+      () => i.mediaSource,
+      async (a) => {
+        if (console.log("mediaSource", a), a) {
+          const e = a.camera;
+          r.value !== e.cameraId && (r.value = e.cameraId, await t.setCurrentCameraDevice(e.cameraId)), m.value !== e.resolution && (m.value = e.resolution), y.value !== e.fps && (y.value = e.fps), s.value = a.layout.mirror === n.TRTCVideoMirrorType_Enable, await t.setLocalRenderParams({
+            rotation: B.TRTCVideoRotation_0,
+            fillMode: L.TRTCVideoFillMode_Fill,
+            mirrorType: s.value ? n.TRTCVideoMirrorType_Enable : n.TRTCVideoMirrorType_Disable
           });
         }
       },
-      { deep: true, immediate: true }
+      { deep: !0, immediate: !0 }
     );
-    const handleCameraChange = async (newVal) => {
-      currentCameraId.value = newVal;
-      await previewTRTCCloud.setCurrentCameraDevice(newVal);
-    };
-    const toggleMirror = () => {
-      isMirror.value = !isMirror.value;
-      previewTRTCCloud.setLocalRenderParams({
-        rotation: TRTCVideoRotation.TRTCVideoRotation_0,
-        fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
-        mirrorType: isMirror.value ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable
+    const G = async (a) => {
+      r.value = a, await t.setCurrentCameraDevice(a);
+    }, H = () => {
+      s.value = !s.value, t.setLocalRenderParams({
+        rotation: B.TRTCVideoRotation_0,
+        fillMode: L.TRTCVideoFillMode_Fill,
+        mirrorType: s.value ? n.TRTCVideoMirrorType_Enable : n.TRTCVideoMirrorType_Disable
       });
-    };
-    const handleConfirm = () => {
-      var _a2, _b2, _c2;
-      if (!props.mediaSource) {
-        emits("addCameraMaterial", {
-          name: (_a2 = cameraList.value.find((item) => item.deviceId === currentCameraId.value)) == null ? void 0 : _a2.deviceName,
+    }, J = () => {
+      var a, e, o;
+      if (!i.mediaSource)
+        p("addCameraMaterial", {
+          name: (a = l.value.find((f) => f.deviceId === r.value)) == null ? void 0 : a.deviceName,
           camera: {
-            cameraId: currentCameraId.value,
-            resolution: currentResolution.value
+            cameraId: r.value,
+            resolution: m.value
           },
           layout: {
-            mirror: isMirror.value ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable
+            mirror: s.value ? n.TRTCVideoMirrorType_Enable : n.TRTCVideoMirrorType_Disable
           }
         });
-      } else {
-        const hasCameraNameChanged = props.mediaSource.name !== ((_b2 = cameraList.value.find((item) => item.deviceId === props.mediaSource.camera.cameraId)) == null ? void 0 : _b2.deviceName);
-        const updateCameraInfo = {
+      else {
+        const f = i.mediaSource.name !== ((e = l.value.find((_) => _.deviceId === i.mediaSource.camera.cameraId)) == null ? void 0 : e.deviceName), h = {
           camera: {
-            cameraId: currentCameraId.value,
-            resolution: currentResolution.value
+            cameraId: r.value,
+            resolution: m.value
           },
           layout: {
-            mirror: isMirror.value ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable
+            mirror: s.value ? n.TRTCVideoMirrorType_Enable : n.TRTCVideoMirrorType_Disable
           }
         };
-        if (!hasCameraNameChanged) {
-          Object.assign(updateCameraInfo, {
-            name: (_c2 = cameraList.value.find((item) => item.deviceId === currentCameraId.value)) == null ? void 0 : _c2.deviceName
-          });
-        }
-        emits("updateCameraMaterial", updateCameraInfo);
+        f || Object.assign(h, {
+          name: (o = l.value.find((_) => _.deviceId === r.value)) == null ? void 0 : o.deviceName
+        }), p("updateCameraMaterial", h);
       }
+    }, M = () => {
+      p("close");
     };
-    const handleClose = () => {
-      emits("close");
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TUIDialog), {
-        visible: true,
-        width: "600px",
-        confirmText: confirmText.value,
-        onClose: handleClose,
-        onCancel: handleClose,
-        onConfirm: handleConfirm,
-        confirmDisabled: unref(cameraList).length === 0,
-        title: title.value,
-        customClasses: ["camera-setting-dialog"]
-      }, {
-        default: withCtx(() => [
-          _cache[2] || (_cache[2] = createElementVNode("div", {
-            id: "video-preview",
-            class: "video-preview"
-          }, null, -1)),
-          createElementVNode("div", _hoisted_1, [
-            createElementVNode("div", _hoisted_2, [
-              createElementVNode("span", _hoisted_3, toDisplayString(unref(t)("Camera")), 1),
-              createVNode(unref(TUISelect), {
-                class: "camera-select",
-                modelValue: currentCameraId.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentCameraId.value = $event),
-                onChange: handleCameraChange
-              }, {
-                default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(cameraList), (item) => {
-                    return openBlock(), createBlock(unref(TUIOption), {
-                      key: item.deviceId,
-                      value: item.deviceId,
-                      label: item.deviceName
-                    }, null, 8, ["value", "label"]);
-                  }), 128))
-                ]),
-                _: 1
-              }, 8, ["modelValue"])
-            ]),
-            createElementVNode("div", _hoisted_4, [
-              createElementVNode("span", _hoisted_5, toDisplayString(unref(t)("Resolution")), 1),
-              createVNode(unref(TUISelect), {
-                class: "resolution-select",
-                modelValue: currentResolution.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentResolution.value = $event)
-              }, {
-                default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(videoResolutionList.value, (item) => {
-                    return openBlock(), createBlock(unref(TUIOption), {
-                      key: item.value,
-                      value: item.value,
-                      label: item.label
-                    }, null, 8, ["value", "label"]);
-                  }), 128))
-                ]),
-                _: 1
-              }, 8, ["modelValue"])
-            ]),
-            createElementVNode("div", {
-              class: "mirror-container",
-              onClick: toggleMirror
-            }, [
-              createVNode(SvgIcon, {
-                icon: isMirror.value ? CameraMirror : CameraUnMirror
-              }, null, 8, ["icon"])
-            ])
+    return (a, e) => (v(), V(d(ee), {
+      visible: !0,
+      width: "600px",
+      confirmText: q.value,
+      onClose: M,
+      onCancel: M,
+      onConfirm: J,
+      confirmDisabled: d(l).length === 0,
+      title: K.value,
+      customClasses: ["camera-setting-dialog"]
+    }, {
+      default: I(() => [
+        e[2] || (e[2] = u("div", {
+          id: "video-preview",
+          class: "video-preview"
+        }, null, -1)),
+        u("div", le, [
+          u("div", te, [
+            u("span", ne, E(d(c)("Camera")), 1),
+            b(d(A), {
+              class: "camera-select",
+              modelValue: r.value,
+              "onUpdate:modelValue": e[0] || (e[0] = (o) => r.value = o),
+              onChange: G
+            }, {
+              default: I(() => [
+                (v(!0), F(N, null, k(d(l), (o) => (v(), V(d(O), {
+                  key: o.deviceId,
+                  value: o.deviceId,
+                  label: o.deviceName
+                }, null, 8, ["value", "label"]))), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          u("div", de, [
+            u("span", se, E(d(c)("Resolution")), 1),
+            b(d(A), {
+              class: "resolution-select",
+              modelValue: m.value,
+              "onUpdate:modelValue": e[1] || (e[1] = (o) => m.value = o)
+            }, {
+              default: I(() => [
+                (v(!0), F(N, null, k(z.value, (o) => (v(), V(d(O), {
+                  key: o.value,
+                  value: o.value,
+                  label: o.label
+                }, null, 8, ["value", "label"]))), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          u("div", {
+            class: "mirror-container",
+            onClick: H
+          }, [
+            b(ae, {
+              icon: s.value ? oe : re
+            }, null, 8, ["icon"])
           ])
-        ]),
-        _: 1
-      }, 8, ["confirmText", "confirmDisabled", "title"]);
-    };
+        ])
+      ]),
+      _: 1
+    }, 8, ["confirmText", "confirmDisabled", "title"]));
   }
-});
-const CameraSettingDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cbd9ccf2"]]);
+}), Re = /* @__PURE__ */ ie(ue, [["__scopeId", "data-v-cbd9ccf2"]]);
 export {
-  CameraSettingDialog as default
+  Re as default
 };

package/dist/components/LiveScenePanel/LiveSceneSelect.js

@@ -1,120 +1,93 @@
-import { defineComponent, ref, createElementBlock, openBlock, Fragment, createCommentVNode, createElementVNode, toDisplayString, unref, renderList, createVNode, Transition, withCtx, withDirectives, vShow } from "vue";
-import { TRTCMediaSourceType } from "@tencentcloud/tuiroom-engine-js";
-import SvgIcon from "../../baseComp/SvgIcon.js";
-import AddIcon from "./icons/AddIcon.js";
-import CameraIcon from "./icons/CameraIcon.js";
-import ScreenIcon from "./icons/ScreenIcon.js";
-import ImageIcon from "./icons/ImageIcon.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = {
+import { defineComponent as b, ref as g, createElementBlock as n, openBlock as i, Fragment as d, createCommentVNode as _, createElementVNode as e, toDisplayString as s, unref as h, renderList as y, createVNode as c, Transition as A, withCtx as w, withDirectives as L, vShow as x } from "vue";
+import { TRTCMediaSourceType as u } from "@tencentcloud/tuiroom-engine-js";
+import m from "../../baseComp/SvgIcon.js";
+import V from "./icons/AddIcon.js";
+import D from "./icons/CameraIcon.js";
+import E from "./icons/ScreenIcon.js";
+import N from "./icons/ImageIcon.js";
+import { useUIKit as B } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as $ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const F = {
   key: 0,
   class: "live-scene-placeholder"
-};
-const _hoisted_2 = { class: "live-scene-placeholder-content" };
-const _hoisted_3 = { class: "add-material-list" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = { class: "add-material-button" };
-const _hoisted_6 = { class: "add-material-list" };
-const _hoisted_7 = ["onClick"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, K = { class: "live-scene-placeholder-content" }, R = { class: "add-material-list" }, U = ["onClick"], W = { class: "add-material-button" }, j = { class: "add-material-list" }, q = ["onClick"], z = /* @__PURE__ */ b({
   __name: "LiveSceneSelect",
   props: {
     displayMode: {}
   },
   emits: ["addMaterial"],
-  setup(__props, { emit: __emit }) {
-    const { t } = useUIKit();
-    const props = __props;
-    const emits = __emit;
-    const isDropdownVisible = ref(false);
-    let hideTimer = null;
-    const defaultMaterialList = [
-      { icon: CameraIcon, title: t("Add Camera"), type: TRTCMediaSourceType.kCamera },
-      { icon: ScreenIcon, title: t("Add Screen Share"), type: TRTCMediaSourceType.kScreen },
-      { icon: ImageIcon, title: t("Add Image"), type: TRTCMediaSourceType.kImage }
-    ];
-    const handleMouseEnter = () => {
-      if (hideTimer) {
-        clearTimeout(hideTimer);
-        hideTimer = null;
-      }
-      isDropdownVisible.value = true;
-    };
-    const handleMouseLeave = () => {
-      hideTimer = setTimeout(() => {
-        isDropdownVisible.value = false;
+  setup(r, { emit: k }) {
+    const { t: o } = B(), M = r, S = k, a = g(!1);
+    let l = null;
+    const p = [
+      { icon: D, title: o("Add Camera"), type: u.kCamera },
+      { icon: E, title: o("Add Screen Share"), type: u.kScreen },
+      { icon: N, title: o("Add Image"), type: u.kImage }
+    ], C = () => {
+      l && (clearTimeout(l), l = null), a.value = !0;
+    }, I = () => {
+      l = setTimeout(() => {
+        a.value = !1;
       }, 200);
+    }, v = (f) => {
+      S("addMaterial", f), M.displayMode === "button" && (a.value = !1);
     };
-    const handleAddMaterial = (type) => {
-      emits("addMaterial", type);
-      if (props.displayMode === "button") {
-        isDropdownVisible.value = false;
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        _ctx.displayMode === "panel" ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
-            createElementVNode("span", null, toDisplayString(unref(t)("We support you to add rich sources")), 1),
-            createElementVNode("div", _hoisted_3, [
-              (openBlock(), createElementBlock(Fragment, null, renderList(defaultMaterialList, (item) => {
-                return createElementVNode("div", {
-                  class: "add-material-item",
-                  onClick: ($event) => handleAddMaterial(item.type),
-                  key: item.title
-                }, [
-                  createVNode(SvgIcon, {
-                    icon: item.icon,
-                    class: "icon-container"
-                  }, null, 8, ["icon"]),
-                  createElementVNode("span", null, toDisplayString(item.title), 1)
-                ], 8, _hoisted_4);
-              }), 64))
-            ])
+    return (f, G) => (i(), n(d, null, [
+      r.displayMode === "panel" ? (i(), n("div", F, [
+        e("div", K, [
+          e("span", null, s(h(o)("We support you to add rich sources")), 1),
+          e("div", R, [
+            (i(), n(d, null, y(p, (t) => e("div", {
+              class: "add-material-item",
+              onClick: (T) => v(t.type),
+              key: t.title
+            }, [
+              c(m, {
+                icon: t.icon,
+                class: "icon-container"
+              }, null, 8, ["icon"]),
+              e("span", null, s(t.title), 1)
+            ], 8, U)), 64))
           ])
-        ])) : createCommentVNode("", true),
-        _ctx.displayMode === "button" ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: "live-scene-button",
-          onMouseenter: handleMouseEnter,
-          onMouseleave: handleMouseLeave
-        }, [
-          createElementVNode("div", _hoisted_5, [
-            createVNode(SvgIcon, {
-              icon: AddIcon,
-              class: "icon-container"
-            }),
-            createElementVNode("span", null, toDisplayString(unref(t)("Add")), 1)
+        ])
+      ])) : _("", !0),
+      r.displayMode === "button" ? (i(), n("div", {
+        key: 1,
+        class: "live-scene-button",
+        onMouseenter: C,
+        onMouseleave: I
+      }, [
+        e("div", W, [
+          c(m, {
+            icon: V,
+            class: "icon-container"
+          }),
+          e("span", null, s(h(o)("Add")), 1)
+        ]),
+        c(A, { name: "dropdown" }, {
+          default: w(() => [
+            L(e("div", j, [
+              (i(), n(d, null, y(p, (t) => e("div", {
+                class: "add-material-item",
+                onClick: (T) => v(t.type),
+                key: t.title
+              }, [
+                c(m, {
+                  icon: t.icon,
+                  class: "icon-container"
+                }, null, 8, ["icon"]),
+                e("span", null, s(t.title), 1)
+              ], 8, q)), 64))
+            ], 512), [
+              [x, a.value]
+            ])
           ]),
-          createVNode(Transition, { name: "dropdown" }, {
-            default: withCtx(() => [
-              withDirectives(createElementVNode("div", _hoisted_6, [
-                (openBlock(), createElementBlock(Fragment, null, renderList(defaultMaterialList, (item) => {
-                  return createElementVNode("div", {
-                    class: "add-material-item",
-                    onClick: ($event) => handleAddMaterial(item.type),
-                    key: item.title
-                  }, [
-                    createVNode(SvgIcon, {
-                      icon: item.icon,
-                      class: "icon-container"
-                    }, null, 8, ["icon"]),
-                    createElementVNode("span", null, toDisplayString(item.title), 1)
-                  ], 8, _hoisted_7);
-                }), 64))
-              ], 512), [
-                [vShow, isDropdownVisible.value]
-              ])
-            ]),
-            _: 1
-          })
-        ], 32)) : createCommentVNode("", true)
-      ], 64);
-    };
+          _: 1
+        })
+      ], 32)) : _("", !0)
+    ], 64));
   }
-});
-const LiveSceneSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-db9d9247"]]);
+}), te = /* @__PURE__ */ $(z, [["__scopeId", "data-v-db9d9247"]]);
 export {
-  LiveSceneSelect as default
+  te as default
 };