@tencentcloud/roomkit-electron-vue3 2.6.7-beta.1 → 2.7.0

package/es/components/RoomInvite/index.vue2.mjs

@@ -23,10 +23,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       contactsConfirm,
       contacts,
       remoteEnteredUserList,
-      showRoomInvite,
+      isShowRoomShareForm,
       userId,
       userName,
-      conferenceInviteList,
+      inviteInfoList,
       onCopy,
       copyRoomIdAndRoomLink
     } = useRoomInvite();
@@ -53,8 +53,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onConfirm: unref(contactsConfirm)
         }, null, 8, ["visible", "contacts", "disabled-list", "onConfirm"]),
         createVNode(Dialog, {
-          modelValue: unref(showRoomInvite),
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(showRoomInvite) ? showRoomInvite.value = $event : null),
+          modelValue: unref(isShowRoomShareForm),
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(isShowRoomShareForm) ? isShowRoomShareForm.value = $event : null),
           title: unref(t)("sb invites you to join the conference", { name: unref(userName) || unref(userId) }),
           modal: true,
           "show-close": true,
@@ -79,7 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             createElementVNode("div", _hoisted_4, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(conferenceInviteList), (item) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(inviteInfoList), (item) => {
                 return withDirectives((openBlock(), createElementBlock("div", {
                   key: item.title
                 }, [

package/es/components/RoomInvite/useRoomInviteHooks.d.ts

@@ -11,20 +11,16 @@ export default function useRoomInvite(): {
     schemeLink: import('vue').ComputedRef<string>;
     inviteBarTitle: import('vue').ComputedRef<any>;
     onCopy: (value: string | number) => Promise<void>;
-    visibleInviteContentList: import('vue').ComputedRef<({
-        id: number;
-        mobileTitle: string;
-        pcTitle: string;
+    displayedInviteInfoList: import('vue').ComputedRef<({
+        title: string;
         content: any;
-        copyLink: any;
-        visible: boolean;
+        isShowCopyIcon: boolean;
+        isVisible: boolean;
     } | {
-        id: number;
-        mobileTitle: string;
-        pcTitle: string;
+        title: string;
         content: string;
-        copyLink: string;
-        visible: any;
+        isShowCopyIcon: boolean;
+        isVisible: any;
     })[]>;
     invitationFeatureDetails: import('vue').Ref<{
         icon: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
@@ -35,10 +31,10 @@ export default function useRoomInvite(): {
     contactsConfirm: (contacts: TUIUserInfo[]) => Promise<void>;
     contacts: import('vue').Ref<never[]>;
     remoteEnteredUserList: any;
-    showRoomInvite: import('vue').Ref<boolean>;
+    isShowRoomShareForm: import('vue').Ref<boolean>;
     userId: any;
     userName: any;
-    conferenceInviteList: import('vue').ComputedRef<({
+    inviteInfoList: import('vue').ComputedRef<({
         title: string;
         content: any;
         isShowCopyIcon: boolean;
@@ -50,4 +46,5 @@ export default function useRoomInvite(): {
         isVisible: any;
     })[]>;
     copyRoomIdAndRoomLink: () => void;
+    sidebarName: any;
 };

package/es/components/RoomInvite/useRoomInviteHooks.mjs

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref, computed, shallowRef } from "vue";
 import { useBasicStore } from "../../stores/basic.mjs";
 import { useRoomStore } from "../../stores/room.mjs";
 import renderMsg from "../common/base/Message/Message.mjs";
@@ -28,12 +28,12 @@ function useRoomInvite() {
     isRoomLinkVisible,
     isSchemeLinkVisible,
     userId,
-    userName
+    userName,
+    sidebarName
   } = storeToRefs(basicStore);
   const { origin, pathname } = location || {};
-  const isShowLink = ref(true);
   const showContacts = ref(false);
-  const showRoomInvite = ref(false);
+  const isShowRoomShareForm = ref(false);
   const inviteLink = computed(() => {
     if (shareLink.value) {
       const urlConcatenation = shareLink.value.indexOf("?") !== -1 ? "&" : "?";
@@ -54,7 +54,7 @@ function useRoomInvite() {
   const isShowPassword = computed(() => !!(password == null ? void 0 : password.value));
   const invitationFeatureDetails = ref([
     {
-      icon: InviteIcon,
+      icon: shallowRef(InviteIcon),
       text: "addMember",
       function: async () => {
         contacts.value = await roomService.scheduleConferenceManager.fetchFriendList();
@@ -62,10 +62,10 @@ function useRoomInvite() {
       }
     },
     {
-      icon: ShareIcon,
+      icon: shallowRef(ShareIcon),
       text: "shareRoom",
       function: () => {
-        showRoomInvite.value = true;
+        isShowRoomShareForm.value = true;
       }
     }
   ]);
@@ -84,36 +84,7 @@ function useRoomInvite() {
       });
     }
   }
-  const inviteContentList = computed(() => [
-    {
-      id: 1,
-      mobileTitle: "Room ID",
-      pcTitle: "Invite by room number",
-      content: roomId.value,
-      copyLink: roomId.value,
-      visible: isShowLink.value
-    },
-    {
-      id: 2,
-      mobileTitle: "Room Link",
-      pcTitle: "Invite via room link",
-      content: inviteLink.value,
-      copyLink: inviteLink.value,
-      visible: isRoomLinkVisible.value
-    },
-    {
-      id: 3,
-      mobileTitle: "scheme",
-      pcTitle: "Invite via client scheme",
-      content: schemeLink.value,
-      copyLink: schemeLink.value,
-      visible: isSchemeLinkVisible.value
-    }
-  ]);
-  const visibleInviteContentList = computed(
-    () => inviteContentList.value.filter((item) => item.visible)
-  );
-  const conferenceInviteList = computed(() => [
+  const inviteInfoList = computed(() => [
     {
       title: "Room Name",
       content: roomName.value,
@@ -143,8 +114,17 @@ function useRoomInvite() {
       content: getUrlWithRoomId(roomId.value),
       isShowCopyIcon: true,
       isVisible: isRoomLinkVisible.value && roomLinkConfig.visible
+    },
+    {
+      title: "Scheme",
+      content: schemeLink.value,
+      isShowCopyIcon: true,
+      isVisible: isSchemeLinkVisible.value
     }
   ]);
+  const displayedInviteInfoList = computed(
+    () => inviteInfoList.value.filter((item) => item.isVisible)
+  );
   function getSeatModeDisplay(isSeatEnabled2) {
     return isSeatEnabled2 ? "On-stage Speaking Room" : "Free Speech Room";
   }
@@ -162,9 +142,12 @@ function useRoomInvite() {
         `${t("Room Link")}: ${getUrlWithRoomId(roomId.value)}`
       );
     }
+    if (isSchemeLinkVisible.value) {
+      invitationList.push(`${t("Scheme")}: ${schemeLink.value}`);
+    }
     const invitation = invitationList.join("\n");
     onCopy(invitation);
-    showRoomInvite.value = false;
+    isShowRoomShareForm.value = false;
   }
   const contactsConfirm = async (contacts2) => {
     const userIdList = contacts2.map((contacts3) => contacts3.userId);
@@ -186,17 +169,18 @@ function useRoomInvite() {
     schemeLink,
     inviteBarTitle,
     onCopy,
-    visibleInviteContentList,
+    displayedInviteInfoList,
     invitationFeatureDetails,
     showContacts,
     contactsConfirm,
     contacts,
     remoteEnteredUserList,
-    showRoomInvite,
+    isShowRoomShareForm,
     userId,
     userName,
-    conferenceInviteList,
-    copyRoomIdAndRoomLink
+    inviteInfoList,
+    copyRoomIdAndRoomLink,
+    sidebarName
   };
 }
 export {

package/es/components/ScheduleConference/InvitePanel.vue.d.ts

@@ -7,6 +7,7 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     }[];
     shareLinkData?: {
         roomId: string;
+        password?: string;
         [key: string]: unknown;
     };
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -18,6 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     }[];
     shareLinkData?: {
         roomId: string;
+        password?: string;
         [key: string]: unknown;
     };
 }>>>, {}, {}>;

package/es/components/ScheduleConference/InvitePanel.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./InvitePanel.vue2.mjs";
 /* empty css                  */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const InvitePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cb371109"]]);
+const InvitePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3b38c13e"]]);
 export {
   InvitePanel as default
 };

package/es/components/ScheduleConference/InvitePanel.vue2.mjs

@@ -18,8 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { onCopy } = useRoomInfo();
     const scheduleInviteList = computed(() => {
-      var _a;
-      const roomId = (_a = props == null ? void 0 : props.shareLinkData) == null ? void 0 : _a.roomId;
+      const { roomId, password } = (props == null ? void 0 : props.shareLinkData) || {};
       if (!roomId) return props.scheduleInviteList;
       return [
         {
@@ -28,6 +27,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           isShowCopyIcon: true,
           isVisible: true
         },
+        {
+          title: `${t("Room Password")}`,
+          content: password,
+          isShowCopyIcon: true,
+          isVisible: !!password
+        },
         {
           title: `${t("Room Link")}`,
           content: getUrlWithRoomId(roomId),

package/es/components/ScheduleConference/PanelContainer.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./PanelContainer.vue2.mjs";
 /* empty css                     */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const PanelContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-99f20433"]]);
+const PanelContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-37f9b07e"]]);
 export {
   PanelContainer as default
 };

package/es/components/ScheduleConference/ScheduleConferencePanel/index.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const ScheduleConferencePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-828410b5"]]);
+const ScheduleConferencePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4728cd03"]]);
 export {
   ScheduleConferencePanel as default
 };

package/es/components/ScheduleConference/ScheduleConferencePanel/index.vue2.mjs

@@ -26,7 +26,8 @@ import "../../../services/manager/roomActionManager.mjs";
 import "@tencentcloud/tui-core";
 import "../../../utils/environment.mjs";
 import { PASSWORD_MAX_LENGTH_LIMIT } from "../../../constants/room.mjs";
-import { deepClone, isDigitsOnly, calculateByteLength } from "../../../utils/utils.mjs";
+import { deepClone, calculateByteLength } from "../../../utils/utils.mjs";
+import { invalidDigitalPasswordRegex } from "../../../utils/common.mjs";
 import { getDateAndTime, convertToTimestamp, calculateEndTime } from "../scheduleUtils.mjs";
 import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
 const _hoisted_1 = { class: "schedule-conference-form" };
@@ -110,7 +111,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isMicrophoneDisableForAllUser: false,
       isScreenShareDisableForAllUser: false,
       isCameraDisableForAllUser: false,
-      password: `${Math.floor(Math.random() * 9e5) + 1e5}`
+      password: ""
     });
     const form = ref(deepClone(defaultFormData.value));
     const inputType = computed(() => isShowPassword.value ? "text" : "password");
@@ -212,7 +213,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return true;
       }
       const { password } = form.value;
-      if (!props.visible || password === "" || !isDigitsOnly(password) || calculateByteLength(password) < PASSWORD_MAX_LENGTH_LIMIT) {
+      if (calculateByteLength(password) !== PASSWORD_MAX_LENGTH_LIMIT) {
         roomService.emit(EventType.ROOM_NOTICE_MESSAGE, {
           type: "warning",
           message: t("Your room password format is incorrect, please check it")
@@ -282,6 +283,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     );
+    watch(
+      () => form.value.password,
+      async (val) => {
+        if (val && invalidDigitalPasswordRegex.test(val)) {
+          await nextTick();
+          form.value.password = val.replace(invalidDigitalPasswordRegex, "");
+        }
+      }
+    );
+    watch(
+      () => passwordChecked.value,
+      (val) => {
+        if (val) {
+          form.value.password = `${Math.floor(Math.random() * 9e5) + 1e5}`;
+        }
+      }
+    );
     watch(
       () => form.value.timezone,
       async (newValue, oldValue) => {

package/es/components/ScheduleConference/ScheduleRoomControl.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./ScheduleRoomControl.vue2.mjs";
 /* empty css                          */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const ScheduleRoomControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e29cbb1f"]]);
+const ScheduleRoomControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2b6e52c3"]]);
 export {
   ScheduleRoomControl as default
 };

package/es/components/ScheduleConference/ScheduleRoomControl.vue2.mjs

@@ -26,7 +26,7 @@ import { storeToRefs } from "pinia";
 import ConferenceDetail from "./ConferenceDetail.vue.mjs";
 import InvitePanel from "./InvitePanel.vue.mjs";
 import PanelContainer from "./PanelContainer.vue.mjs";
-const _withScopeId = (n) => (pushScopeId("data-v-e29cbb1f"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-2b6e52c3"), n = n(), popScopeId(), n);
 const _hoisted_1 = { class: "schedule-room-control" };
 const _hoisted_2 = ["title"];
 const _hoisted_3 = { class: "schedule-title-text" };

package/es/components/ScheduleConference/TimezonePicker.vue.mjs

@@ -1,7 +1,6 @@
 import { defineComponent, ref, computed, onMounted, onUnmounted, watch, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createBlock } from "vue";
 import TuiSelect from "../common/base/Select/index.vue.mjs";
 import TuiOption from "../common/base/Option/index.vue.mjs";
-import { getLanguage } from "../../utils/common.mjs";
 import "../../services/main.mjs";
 import { roomService } from "../../services/roomService.mjs";
 import { EventType } from "../../services/types.mjs";
@@ -22,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const selectedTime = ref(props.modelValue);
-    const currentLanguage = ref(getLanguage());
+    const currentLanguage = ref(roomService.basicStore.lang);
     const timeOptions = computed(() => {
       switch (currentLanguage.value) {
         case "zh-CN":

package/es/components/Whiteboard/ToolBox/Arrow/index.vue.d.ts

@@ -0,0 +1,12 @@
+import { ToolSettings } from '../../type';
+
+declare const _default: import('vue').DefineComponent<{
+    activeTool: StringConstructor;
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (toolSetting: ToolSettings) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    activeTool: StringConstructor;
+}>> & {
+    onClick?: ((toolSetting: ToolSettings) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/es/components/Whiteboard/ToolBox/Arrow/index.vue.mjs

@@ -0,0 +1,163 @@
+import { defineComponent, ref, reactive, watch, withDirectives, openBlock, createBlock, withCtx, createVNode, normalizeClass, unref, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, withModifiers, createCommentVNode } from "vue";
+import { useI18n } from "../../../../locales/index.mjs";
+import { DrawingTool } from "../../type.mjs";
+import IconButton from "../../../common/base/IconButton.vue.mjs";
+import vClickOutside from "../../../../directives/vClickOutside.mjs";
+/* empty css                       */
+import ArrowIcon from "../Icon/ArrowIcon.vue.mjs";
+import SizeSmall from "../Image/SizeSmall.svg.mjs";
+import SizeMid from "../Image/SizeMid.svg.mjs";
+import SizeBig from "../Image/SizeBig.svg.mjs";
+import SizeLarge from "../Image/SizeLarge.svg.mjs";
+import BlueIcon from "../Image/BlueIcon.svg.mjs";
+import PurpleIcon from "../Image/PurpleIcon.svg.mjs";
+import YellowIcon from "../Image/YellowIcon.svg.mjs";
+import OrangeIcon from "../Image/OrangeIcon.svg.mjs";
+import RedIcon from "../Image/RedIcon.svg.mjs";
+import GreenIcon from "../Image/GreenIcon.svg.mjs";
+import DeepBlueIcon from "../Image/DeepBlueIcon.svg.mjs";
+import BlackIcon from "../Image/BlackIcon.svg.mjs";
+import DarkGrayIcon from "../Image/DarkGrayIcon.svg.mjs";
+import GrayIcon from "../Image/GrayIcon.svg.mjs";
+import LightGrayIcon from "../Image/LightGrayIcon.svg.mjs";
+import WhiteIcon from "../Image/WhiteIcon.svg.mjs";
+import logger from "../../../../utils/common/logger/index.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "arrow-tool-setting whiteboard-tool-setting"
+};
+const _hoisted_2 = { class: "size-setting-title setting-title" };
+const _hoisted_3 = { class: "size-setting-section setting-section" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["src"];
+const _hoisted_6 = { class: "color-setting-title setting-title" };
+const _hoisted_7 = { class: "color-setting-section setting-section" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    activeTool: String
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const { t } = useI18n();
+    const lineSizes = [
+      { icon: SizeSmall, size: 2 },
+      { icon: SizeMid, size: 4 },
+      { icon: SizeBig, size: 6 },
+      { icon: SizeLarge, size: 8 }
+    ];
+    const lineColors = [
+      { color: "#4791FF", icon: BlueIcon },
+      { color: "#5940D7", icon: PurpleIcon },
+      { color: "#F5C342", icon: YellowIcon },
+      { color: "#E05734", icon: OrangeIcon },
+      { color: "#DC3859", icon: RedIcon },
+      { color: "#1AD32C", icon: GreenIcon },
+      { color: "#104683", icon: DeepBlueIcon },
+      { color: "#22262E", icon: BlackIcon },
+      { color: "#86909A", icon: DarkGrayIcon },
+      { color: "#B5BBC3", icon: GrayIcon },
+      { color: "#DBDDE2", icon: LightGrayIcon },
+      { color: "#EAEEF3", icon: WhiteIcon }
+    ];
+    const showSettings = ref(false);
+    const props = __props;
+    function handleHideButtonSetting() {
+      if (props.activeTool === DrawingTool.Arrow) {
+        showSettings.value = false;
+      }
+    }
+    const toolSetting = reactive({
+      drawingTool: DrawingTool.Arrow,
+      shapeOptions: {
+        strokeWidth: 4,
+        stroke: "#22262E"
+      }
+    });
+    const emit = __emit;
+    watch(
+      () => props.activeTool,
+      () => {
+        showSettings.value = false;
+      }
+    );
+    const onClick = () => {
+      showSettings.value = !showSettings.value;
+      emit("click", toolSetting);
+      logger.debug("toolSetting", toolSetting);
+      logger.debug("emit", showSettings.value);
+      logger.debug("emit", showSettings.value);
+      logger.debug("emit", showSettings.value);
+      logger.debug("emit", showSettings.value);
+      logger.debug("emit", showSettings.value);
+    };
+    const handleSizeClick = (size) => {
+      var _a;
+      if (size === ((_a = toolSetting.shapeOptions) == null ? void 0 : _a.strokeWidth)) {
+        return;
+      }
+      toolSetting.shapeOptions.strokeWidth = size;
+      emit("click", toolSetting);
+    };
+    const handleColorClick = (color) => {
+      if (toolSetting.shapeOptions.stroke !== color) {
+        toolSetting.shapeOptions.stroke = color;
+        emit("click", toolSetting);
+      }
+    };
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createBlock(IconButton, {
+        class: "tool-button",
+        onClickIcon: onClick
+      }, {
+        default: withCtx(() => [
+          createVNode(ArrowIcon, {
+            class: normalizeClass({ "whiteboard-icon-active": __props.activeTool === unref(DrawingTool).Arrow })
+          }, null, 8, ["class"]),
+          showSettings.value && __props.activeTool === "Arrow" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, toDisplayString(unref(t)("Arrow Size")), 1),
+            createElementVNode("div", _hoisted_3, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(lineSizes, (lineSize) => {
+                return createElementVNode("button", {
+                  key: lineSize.size,
+                  class: normalizeClass(["size-button setting-option-button", {
+                    "button-active": lineSize.size === toolSetting.shapeOptions.strokeWidth
+                  }]),
+                  onClick: withModifiers(($event) => handleSizeClick(lineSize.size), ["stop"])
+                }, [
+                  createElementVNode("img", {
+                    src: lineSize.icon
+                  }, null, 8, _hoisted_5)
+                ], 10, _hoisted_4);
+              }), 64))
+            ]),
+            createElementVNode("div", _hoisted_6, toDisplayString(unref(t)("Arrow Color")), 1),
+            createElementVNode("div", _hoisted_7, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(lineColors, (lineColor) => {
+                return createElementVNode("button", {
+                  key: lineColor.color,
+                  class: normalizeClass(["color-button setting-option-button", {
+                    "button-active": lineColor.color === toolSetting.shapeOptions.stroke
+                  }]),
+                  onClick: withModifiers(($event) => handleColorClick(lineColor.color), ["stop"])
+                }, [
+                  createElementVNode("img", {
+                    src: lineColor.icon
+                  }, null, 8, _hoisted_9)
+                ], 10, _hoisted_8);
+              }), 64))
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      })), [
+        [unref(vClickOutside), handleHideButtonSetting]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/Whiteboard/ToolBox/Arrow/index.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./index.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/components/Whiteboard/ToolBox/ClearButton.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/es/components/Whiteboard/ToolBox/ClearButton.vue.mjs

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createBlock } from "vue";
+import { DrawingTool } from "../type.mjs";
+import IconButton from "../../common/base/IconButton.vue.mjs";
+import ClearIcon from "./Icon/ClearIcon.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ClearButton",
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const onClick = () => {
+      emit("click", {
+        drawingTool: DrawingTool.Clear
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(IconButton, {
+        class: "tool-button",
+        onClickIcon: onClick,
+        icon: ClearIcon
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/Whiteboard/ToolBox/ClearButton.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./ClearButton.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/components/Whiteboard/ToolBox/DownloadButton.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/es/components/Whiteboard/ToolBox/DownloadButton.vue.mjs

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createBlock } from "vue";
+import { DrawingTool } from "../type.mjs";
+import IconButton from "../../common/base/IconButton.vue.mjs";
+import DownloadIcon from "./Icon/DownloadIcon.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DownloadButton",
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const onClick = () => {
+      emit("click", {
+        drawingTool: DrawingTool.Download
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(IconButton, {
+        class: "tool-button",
+        onClickIcon: onClick,
+        icon: DownloadIcon
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/Whiteboard/ToolBox/DownloadButton.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./DownloadButton.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/components/Whiteboard/ToolBox/EraserButton.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import('vue').DefineComponent<{
+    activeTool: StringConstructor;
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    activeTool: StringConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;