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

package/lib/components/Whiteboard/ToolBox/Pencil/index.vue.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const index = require("../../../../locales/index.js");
+const type = require("../../type.js");
+const IconButton = require("../../../common/base/IconButton.vue.js");
+const vClickOutside = require("../../../../directives/vClickOutside.js");
+;/* empty css                       */
+const PencilIcon = require("../Icon/PencilIcon.vue.js");
+const SizeSmall = require("../Image/SizeSmall.svg.js");
+const SizeMid = require("../Image/SizeMid.svg.js");
+const SizeBig = require("../Image/SizeBig.svg.js");
+const SizeLarge = require("../Image/SizeLarge.svg.js");
+const BlueIcon = require("../Image/BlueIcon.svg.js");
+const PurpleIcon = require("../Image/PurpleIcon.svg.js");
+const YellowIcon = require("../Image/YellowIcon.svg.js");
+const OrangeIcon = require("../Image/OrangeIcon.svg.js");
+const RedIcon = require("../Image/RedIcon.svg.js");
+const GreenIcon = require("../Image/GreenIcon.svg.js");
+const DeepBlueIcon = require("../Image/DeepBlueIcon.svg.js");
+const BlackIcon = require("../Image/BlackIcon.svg.js");
+const DarkGrayIcon = require("../Image/DarkGrayIcon.svg.js");
+const GrayIcon = require("../Image/GrayIcon.svg.js");
+const LightGrayIcon = require("../Image/LightGrayIcon.svg.js");
+const WhiteIcon = require("../Image/WhiteIcon.svg.js");
+const _hoisted_1 = {
+  key: 0,
+  class: "pen-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__ */ Vue.defineComponent({
+  __name: "index",
+  props: {
+    activeTool: String,
+    changeTool: String
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const { t } = index.useI18n();
+    const lineSizes = [
+      { icon: SizeSmall.default, size: 1 },
+      { icon: SizeMid.default, size: 2 },
+      { icon: SizeBig.default, size: 5 },
+      { icon: SizeLarge.default, size: 10 }
+    ];
+    const lineColors = [
+      { color: "#4791FF", icon: BlueIcon.default },
+      { color: "#5940D7", icon: PurpleIcon.default },
+      { color: "#F5C342", icon: YellowIcon.default },
+      { color: "#E05734", icon: OrangeIcon.default },
+      { color: "#DC3859", icon: RedIcon.default },
+      { color: "#1AD32C", icon: GreenIcon.default },
+      { color: "#104683", icon: DeepBlueIcon.default },
+      { color: "#22262E", icon: BlackIcon.default },
+      { color: "#86909A", icon: DarkGrayIcon.default },
+      { color: "#B5BBC3", icon: GrayIcon.default },
+      { color: "#DBDDE2", icon: LightGrayIcon.default },
+      { color: "#EAEEF3", icon: WhiteIcon.default }
+    ];
+    function handleHideButtonSetting() {
+      if (props.activeTool === type.DrawingTool.Pencil) {
+        showSettings.value = false;
+      }
+    }
+    const showSettings = Vue.ref(false);
+    const props = __props;
+    const toolSetting = Vue.reactive({
+      drawingTool: type.DrawingTool.Pencil,
+      shapeOptions: {
+        strokeWidth: 5,
+        stroke: "#22262E"
+      }
+    });
+    const emit = __emit;
+    Vue.watch(
+      () => props.activeTool,
+      () => {
+        showSettings.value = false;
+      }
+    );
+    Vue.watch(
+      () => props.changeTool,
+      () => {
+        if (props.changeTool === type.DrawingTool.Pencil) {
+          emit("click", toolSetting);
+        }
+      }
+    );
+    const onClick = () => {
+      showSettings.value = !showSettings.value;
+      emit("click", toolSetting);
+    };
+    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 Vue.withDirectives((Vue.openBlock(), Vue.createBlock(IconButton.default, {
+        class: "tool-button",
+        onClickIcon: onClick
+      }, {
+        default: Vue.withCtx(() => [
+          Vue.createVNode(PencilIcon.default, {
+            class: Vue.normalizeClass({ "whiteboard-icon-active": __props.activeTool === Vue.unref(type.DrawingTool).Pencil })
+          }, null, 8, ["class"]),
+          showSettings.value && __props.activeTool === Vue.unref(type.DrawingTool).Pencil ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+            Vue.createElementVNode("div", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("Line Size")), 1),
+            Vue.createElementVNode("div", _hoisted_3, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(lineSizes, (lineSize) => {
+                return Vue.createElementVNode("button", {
+                  key: lineSize.size,
+                  class: Vue.normalizeClass(["size-button setting-option-button", {
+                    "button-active": lineSize.size === toolSetting.shapeOptions.strokeWidth
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleSizeClick(lineSize.size), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: lineSize.icon
+                  }, null, 8, _hoisted_5)
+                ], 10, _hoisted_4);
+              }), 64))
+            ]),
+            Vue.createElementVNode("div", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Line Color")), 1),
+            Vue.createElementVNode("div", _hoisted_7, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(lineColors, (lineColor) => {
+                return Vue.createElementVNode("button", {
+                  key: lineColor.color,
+                  class: Vue.normalizeClass(["color-button setting-option-button", {
+                    "button-active": lineColor.color === toolSetting.shapeOptions.stroke
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleColorClick(lineColor.color), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: lineColor.icon
+                  }, null, 8, _hoisted_9)
+                ], 10, _hoisted_8);
+              }), 64))
+            ])
+          ])) : Vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      })), [
+        [Vue.unref(vClickOutside.default), handleHideButtonSetting]
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/ToolBox/Pencil/index.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;

package/lib/components/Whiteboard/ToolBox/RedoButton.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import('vue').DefineComponent<{
+    step: NumberConstructor;
+    historyListLength: NumberConstructor;
+}, {}, 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<{
+    step: NumberConstructor;
+    historyListLength: NumberConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/lib/components/Whiteboard/ToolBox/RedoButton.vue.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const type = require("../type.js");
+const IconButton = require("../../common/base/IconButton.vue.js");
+const RedoIcon = require("./Icon/RedoIcon.vue.js");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "RedoButton",
+  props: {
+    step: Number,
+    historyListLength: Number
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const isRedoDisabled = Vue.computed(() => {
+      return props.step >= props.historyListLength;
+    });
+    const emit = __emit;
+    const onClick = () => {
+      emit("click", {
+        drawingTool: type.DrawingTool.Redo
+      });
+    };
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createBlock(IconButton.default, {
+        class: "tool-button",
+        onClickIcon: onClick
+      }, {
+        default: Vue.withCtx(() => [
+          Vue.createVNode(RedoIcon.default, {
+            class: Vue.normalizeClass({ "tool-disabled": isRedoDisabled.value })
+          }, null, 8, ["class"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/ToolBox/RedoButton.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const RedoButton_vue_vue_type_script_setup_true_lang = require("./RedoButton.vue.js");
+exports.default = RedoButton_vue_vue_type_script_setup_true_lang.default;

package/lib/components/Whiteboard/ToolBox/RetractButton.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/lib/components/Whiteboard/ToolBox/RetractButton.vue.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const type = require("../type.js");
+const IconButton = require("../../common/base/IconButton.vue.js");
+const RetractIcon = require("./Icon/RetractIcon.vue.js");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "RetractButton",
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const onClick = () => {
+      emit("click", {
+        drawingTool: type.DrawingTool.Retract
+      });
+    };
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createBlock(IconButton.default, {
+        class: "tool-button",
+        onClickIcon: onClick,
+        icon: RetractIcon.default
+      });
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/ToolBox/RetractButton.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const RetractButton_vue_vue_type_script_setup_true_lang = require("./RetractButton.vue.js");
+exports.default = RetractButton_vue_vue_type_script_setup_true_lang.default;

package/lib/components/Whiteboard/ToolBox/SelectButton.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import('vue').DefineComponent<{
+    activeTool: StringConstructor;
+    changeTool: 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;
+    changeTool: StringConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/lib/components/Whiteboard/ToolBox/SelectButton.vue.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const type = require("../type.js");
+const IconButton = require("../../common/base/IconButton.vue.js");
+const SelectIcon = require("./Icon/SelectIcon.vue.js");
+const index = require("../../../utils/common/logger/index.js");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "SelectButton",
+  props: {
+    activeTool: String,
+    changeTool: String
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    Vue.watch(
+      () => props.changeTool,
+      () => {
+        if (props.changeTool === type.DrawingTool.Select) {
+          index.default.error(
+            "changeToochangeToolchangeToolchangeToolchangeToolchangeToolchangeToolchangeToolchangeTooll"
+          );
+          emit("click", {
+            drawingTool: type.DrawingTool.Select
+          });
+        }
+      }
+    );
+    const onClick = () => {
+      if (props.activeTool === type.DrawingTool.Select) {
+        return;
+      }
+      emit("click", {
+        drawingTool: type.DrawingTool.Select
+      });
+    };
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createBlock(IconButton.default, {
+        class: "tool-button",
+        onClickIcon: onClick
+      }, {
+        default: Vue.withCtx(() => [
+          Vue.createVNode(SelectIcon.default, {
+            class: Vue.normalizeClass({ "whiteboard-icon-active": __props.activeTool === Vue.unref(type.DrawingTool).Select })
+          }, null, 8, ["class"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/ToolBox/SelectButton.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const SelectButton_vue_vue_type_script_setup_true_lang = require("./SelectButton.vue.js");
+exports.default = SelectButton_vue_vue_type_script_setup_true_lang.default;

package/lib/components/Whiteboard/ToolBox/Shape/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/lib/components/Whiteboard/ToolBox/Shape/index.vue.js

@@ -0,0 +1,233 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const type = require("../../type.js");
+const index = require("../../../../locales/index.js");
+const vClickOutside = require("../../../../directives/vClickOutside.js");
+const IconButton = require("../../../common/base/IconButton.vue.js");
+;/* empty css                       */
+const ShapeIcon = require("../Icon/ShapeIcon.vue.js");
+const SizeSmall = require("../Image/SizeSmall.svg.js");
+const SizeMid = require("../Image/SizeMid.svg.js");
+const SizeBig = require("../Image/SizeBig.svg.js");
+const SizeLarge = require("../Image/SizeLarge.svg.js");
+const BlueIcon = require("../Image/BlueIcon.svg.js");
+const PurpleIcon = require("../Image/PurpleIcon.svg.js");
+const YellowIcon = require("../Image/YellowIcon.svg.js");
+const OrangeIcon = require("../Image/OrangeIcon.svg.js");
+const RedIcon = require("../Image/RedIcon.svg.js");
+const GreenIcon = require("../Image/GreenIcon.svg.js");
+const DeepBlueIcon = require("../Image/DeepBlueIcon.svg.js");
+const BlackIcon = require("../Image/BlackIcon.svg.js");
+const DarkGrayIcon = require("../Image/DarkGrayIcon.svg.js");
+const GrayIcon = require("../Image/GrayIcon.svg.js");
+const LightGrayIcon = require("../Image/LightGrayIcon.svg.js");
+const WhiteIcon = require("../Image/WhiteIcon.svg.js");
+const ShapeRectangle = require("../Image/ShapeRectangle.svg.js");
+const ShapeCircle = require("../Image/ShapeCircle.svg.js");
+const StyleDashed = require("../Image/StyleDashed.svg.js");
+const ShapeLine = require("../Image/ShapeLine.svg.js");
+const StyleSolid = require("../Image/StyleSolid.svg.js");
+const ShapeTriangle = require("../Image/ShapeTriangle.svg.js");
+const _hoisted_1 = {
+  key: 0,
+  class: "shape-tool-setting whiteboard-tool-setting"
+};
+const _hoisted_2 = { class: "type-setting-title setting-title" };
+const _hoisted_3 = { class: "type-setting-section setting-section" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["src"];
+const _hoisted_6 = { class: "style-setting-title setting-title" };
+const _hoisted_7 = { class: "style-setting-section setting-section" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["src"];
+const _hoisted_10 = { class: "size-setting-title setting-title" };
+const _hoisted_11 = { class: "size-setting-section setting-section" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["src"];
+const _hoisted_14 = { class: "color-setting-title setting-title" };
+const _hoisted_15 = { class: "color-setting-section setting-section" };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = ["src"];
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  props: {
+    activeTool: String
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const { t } = index.useI18n();
+    const shapeTypes = [
+      { icon: ShapeLine.default, shape: type.DrawingTool.Line },
+      { icon: ShapeCircle.default, shape: type.DrawingTool.Circle },
+      { icon: ShapeRectangle.default, shape: type.DrawingTool.Rectangle },
+      { icon: ShapeTriangle.default, shape: type.DrawingTool.Triangle }
+    ];
+    const shapeStyles = [
+      { icon: StyleSolid.default, style: "solid" },
+      { icon: StyleDashed.default, style: "dashed" }
+    ];
+    const shapeSizes = [
+      { icon: SizeSmall.default, size: 1 },
+      { icon: SizeMid.default, size: 2 },
+      { icon: SizeBig.default, size: 5 },
+      { icon: SizeLarge.default, size: 10 }
+    ];
+    const shapeColors = [
+      { color: "#4791FF", icon: BlueIcon.default },
+      { color: "#5940D7", icon: PurpleIcon.default },
+      { color: "#F5C342", icon: YellowIcon.default },
+      { color: "#E05734", icon: OrangeIcon.default },
+      { color: "#DC3859", icon: RedIcon.default },
+      { color: "#1AD32C", icon: GreenIcon.default },
+      { color: "#104683", icon: DeepBlueIcon.default },
+      { color: "#22262E", icon: BlackIcon.default },
+      { color: "#86909A", icon: DarkGrayIcon.default },
+      { color: "#B5BBC3", icon: GrayIcon.default },
+      { color: "#DBDDE2", icon: LightGrayIcon.default },
+      { color: "#EAEEF3", icon: WhiteIcon.default }
+    ];
+    const showSettings = Vue.ref(false);
+    const props = __props;
+    function handleHideButtonSetting() {
+      if (props.activeTool === "Shape") {
+        showSettings.value = false;
+      }
+    }
+    const toolSetting = Vue.reactive({
+      drawingTool: type.DrawingTool.Rectangle,
+      shapeOptions: {
+        strokeWidth: 5,
+        stroke: "#22262E",
+        fill: "transparent",
+        opacity: 1,
+        lineDash: [0, 0]
+      }
+    });
+    const emit = __emit;
+    Vue.watch(
+      () => props.activeTool,
+      () => {
+        showSettings.value = false;
+      }
+    );
+    const onClick = () => {
+      showSettings.value = !showSettings.value;
+      emit("click", toolSetting);
+    };
+    const handleTypeClick = (type2) => {
+      if (toolSetting.drawingTool === type2) {
+        return;
+      }
+      toolSetting.drawingTool = type2;
+      emit("click", toolSetting);
+    };
+    const handleStyleClick = (style) => {
+      if ("solid" === style) {
+        toolSetting.shapeOptions.lineDash = [0, 0];
+        return;
+      }
+      toolSetting.shapeOptions.lineDash = [5, 5];
+      emit("click", toolSetting);
+    };
+    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 Vue.withDirectives((Vue.openBlock(), Vue.createBlock(IconButton.default, {
+        class: "tool-button",
+        onClickIcon: onClick
+      }, {
+        default: Vue.withCtx(() => [
+          Vue.createVNode(ShapeIcon.default, {
+            class: Vue.normalizeClass({ "whiteboard-icon-active": __props.activeTool === "Shape" })
+          }, null, 8, ["class"]),
+          showSettings.value && __props.activeTool === "Shape" ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+            Vue.createElementVNode("div", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("Shape Type")), 1),
+            Vue.createElementVNode("div", _hoisted_3, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeTypes, (shapeType) => {
+                return Vue.createElementVNode("button", {
+                  key: shapeType.shape,
+                  class: Vue.normalizeClass(["type-button setting-option-button", {
+                    "button-active": shapeType.shape === toolSetting.drawingTool
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleTypeClick(shapeType.shape), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: shapeType.icon
+                  }, null, 8, _hoisted_5)
+                ], 10, _hoisted_4);
+              }), 64))
+            ]),
+            Vue.createElementVNode("div", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Shape Style")), 1),
+            Vue.createElementVNode("div", _hoisted_7, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeStyles, (shapeStyle) => {
+                return Vue.createElementVNode("button", {
+                  key: shapeStyle.style,
+                  class: Vue.normalizeClass(["style-button setting-option-button", {
+                    "button-active": toolSetting.shapeOptions.lineDash[1] === 5 ? shapeStyle.style === "dashed" : shapeStyle.style === "solid"
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleStyleClick(shapeStyle.style), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: shapeStyle.icon
+                  }, null, 8, _hoisted_9)
+                ], 10, _hoisted_8);
+              }), 64))
+            ]),
+            Vue.createElementVNode("div", _hoisted_10, Vue.toDisplayString(Vue.unref(t)("Shape Size")), 1),
+            Vue.createElementVNode("div", _hoisted_11, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeSizes, (shapeSize) => {
+                var _a;
+                return Vue.createElementVNode("button", {
+                  key: shapeSize.size,
+                  class: Vue.normalizeClass(["size-button setting-option-button", {
+                    "button-active": shapeSize.size === ((_a = toolSetting.shapeOptions) == null ? void 0 : _a.strokeWidth)
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleSizeClick(shapeSize.size), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: shapeSize.icon
+                  }, null, 8, _hoisted_13)
+                ], 10, _hoisted_12);
+              }), 64))
+            ]),
+            Vue.createElementVNode("div", _hoisted_14, Vue.toDisplayString(Vue.unref(t)("Shape Color")), 1),
+            Vue.createElementVNode("div", _hoisted_15, [
+              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(shapeColors, (shapeColor) => {
+                var _a;
+                return Vue.createElementVNode("button", {
+                  key: shapeColor.color,
+                  class: Vue.normalizeClass(["color-button setting-option-button", {
+                    "button-active": shapeColor.color === ((_a = toolSetting.shapeOptions) == null ? void 0 : _a.stroke)
+                  }]),
+                  onClick: Vue.withModifiers(($event) => handleColorClick(shapeColor.color), ["stop"])
+                }, [
+                  Vue.createElementVNode("img", {
+                    src: shapeColor.icon,
+                    alt: "Color Icon"
+                  }, null, 8, _hoisted_17)
+                ], 10, _hoisted_16);
+              }), 64))
+            ])
+          ])) : Vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      })), [
+        [Vue.unref(vClickOutside.default), handleHideButtonSetting]
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/ToolBox/Shape/index.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;

package/lib/components/Whiteboard/ToolBox/Text/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;