tuikit-atomicx-vue3 0.1.0

package/dist/components/LiveStreamView/index.js

@@ -0,0 +1,291 @@
+import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, renderSlot, unref, toDisplayString, Fragment, renderList, createBlock, mergeProps, normalizeProps } from "vue";
+import DefaultStreamViewUI from "./DefaultStreamViewUI.js";
+import { getContentSize } from "../../utils/domOperation.js";
+import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
+import { useLoginState } from "../../states/LoginState.js";
+import { useLiveState } from "../../states/LiveState/index.js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+import { addI18n } from "../../i18n/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
+import { resource } from "./i18n/en-US/index.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "live-stream-placeholder"
+};
+const _hoisted_2 = { class: "placeholder-text" };
+const _hoisted_3 = {
+  key: 1,
+  class: "live-stream-ui"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const { t } = useUIKit();
+    const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
+    const { currentLive } = useLiveState();
+    const slots = useSlots();
+    const ignoreLocalVideoPlay = computed(() => slots.localVideo);
+    const { loginUserInfo } = useLoginState();
+    const isMounted = ref(false);
+    onMounted(() => {
+      isMounted.value = true;
+      startPlayStream({ view: "stream-content" });
+    });
+    onBeforeUnmount(() => {
+      isMounted.value = false;
+      stopPlayStream();
+    });
+    const ratioLayoutList = computed(() => {
+      var _a;
+      const layoutCanvas = canvas.value;
+      const layoutList = (_a = seatList.value) == null ? void 0 : _a.map((seat) => {
+        var _a2;
+        return { userId: (_a2 = seat.userInfo) == null ? void 0 : _a2.userId, ...seat.region };
+      });
+      if (!layoutList) {
+        return [];
+      }
+      return layoutList.map((item) => ({
+        userId: item.userId,
+        x: item.x / layoutCanvas.width,
+        y: item.y / layoutCanvas.width,
+        width: item.w / layoutCanvas.width,
+        height: item.h === layoutCanvas.height ? -1 : item.h / layoutCanvas.width,
+        zOrder: item.zOrder
+      }));
+    });
+    const seatListWithRealSize = computed(() => {
+      return seatList.value.map((item, index) => {
+        const ratioLayout = ratioLayoutList.value[index];
+        return {
+          userInfo: item.userInfo,
+          region: {
+            position: "absolute",
+            left: `${streamViewSize.value.width * ratioLayout.x}px`,
+            top: `${streamViewSize.value.width * ratioLayout.y}px`,
+            width: `${streamViewSize.value.width * ratioLayout.width}px`,
+            height: ratioLayout.height === -1 ? `${streamViewSize.value.height}px` : `${streamViewSize.value.width * ratioLayout.height}px`,
+            zIndex: Number(ratioLayout.zOrder) || 0
+          }
+        };
+      });
+    });
+    const localStreamViewInfo = computed(() => {
+      return seatListWithRealSize.value.find((item) => {
+        var _a, _b;
+        return ((_a = item == null ? void 0 : item.userInfo) == null ? void 0 : _a.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
+      });
+    });
+    const needPlayStreamViewInfo = computed(() => {
+      if (ignoreLocalVideoPlay.value) {
+        return seatListWithRealSize.value.filter((item) => {
+          var _a, _b;
+          return ((_a = item.userInfo) == null ? void 0 : _a.userId) !== ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
+        });
+      }
+      return seatListWithRealSize.value;
+    });
+    const liveStreamViewContainerRef = ref();
+    const originStreamViewStyle = ref({
+      width: 0,
+      height: 0,
+      transformX: 0,
+      transformY: 0,
+      scale: 1
+    });
+    const visualStreamSize = computed(() => {
+      if (ratioLayoutList.value.length === 0) {
+        return {
+          width: 0,
+          height: 0,
+          centerX: 0,
+          centerY: 0
+        };
+      }
+      const absoluteLayoutList = ratioLayoutList.value.map((item) => {
+        return {
+          userId: item.userId,
+          left: originStreamViewStyle.value.width * item.x,
+          top: originStreamViewStyle.value.width * item.y,
+          width: originStreamViewStyle.value.width * item.width,
+          height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
+          zIndex: item.zOrder
+        };
+      });
+      const minX = Math.min(...absoluteLayoutList.map((item) => item.left));
+      const minY = Math.min(...absoluteLayoutList.map((item) => item.top));
+      const maxX = Math.max(...absoluteLayoutList.map((item) => item.left + item.width));
+      const maxY = Math.max(...absoluteLayoutList.map((item) => item.top + item.height));
+      return {
+        width: maxX - minX,
+        height: maxY - minY,
+        centerX: (minX + maxX) / 2,
+        centerY: (minY + maxY) / 2
+      };
+    });
+    watch(visualStreamSize, () => {
+      handleStreamListTransform();
+    });
+    function handleStreamListTransform() {
+      if (!liveStreamViewContainerRef.value) {
+        return;
+      }
+      const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+      const containerWidth = Math.floor(containerRect.width);
+      const containerHeight = Math.floor(containerRect.height);
+      if (visualStreamSize.value.width && visualStreamSize.value.height) {
+        const scaleWidth = containerWidth / visualStreamSize.value.width;
+        const scaleHeight = containerHeight / visualStreamSize.value.height;
+        originStreamViewStyle.value.scale = Math.min(scaleWidth, scaleHeight);
+        originStreamViewStyle.value.transformX = originStreamViewStyle.value.width / 2 - visualStreamSize.value.centerX;
+        originStreamViewStyle.value.transformY = originStreamViewStyle.value.height / 2 - visualStreamSize.value.centerY;
+      } else {
+        handleStreamRegionSize();
+        originStreamViewStyle.value.scale = 1;
+        originStreamViewStyle.value.transformX = 0;
+        originStreamViewStyle.value.transformY = 0;
+      }
+    }
+    const streamViewSize = computed(() => {
+      if (isPortraitContainer.value) {
+        return {
+          width: originStreamViewStyle.value.width,
+          height: originStreamViewStyle.value.height
+        };
+      }
+      return {
+        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
+        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
+      };
+    });
+    const streamViewStyle = computed(() => {
+      if (isPortraitContainer.value) {
+        return {
+          width: `${Math.floor(originStreamViewStyle.value.width)}px`,
+          height: `${Math.floor(originStreamViewStyle.value.height)}px`
+        };
+      }
+      return {
+        width: `${Math.floor(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
+        height: `${Math.floor(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
+        transform: `translate(${originStreamViewStyle.value.transformX * originStreamViewStyle.value.scale}px, ${originStreamViewStyle.value.transformY * originStreamViewStyle.value.scale}px)`
+      };
+    });
+    const aspectRatio = computed(() => {
+      var _a, _b;
+      if (canvas.value.width && canvas.value.height) {
+        return `${canvas.value.width}:${canvas.value.height}`;
+      }
+      if (currentLive.value && ((_a = currentLive.value) == null ? void 0 : _a.layoutTemplate) >= 200 && ((_b = currentLive.value) == null ? void 0 : _b.layoutTemplate) <= 599) {
+        return "16:9";
+      }
+      return "9:16";
+    });
+    const widthRatio = computed(() => {
+      if (!aspectRatio.value || aspectRatio.value.indexOf(":") < 0) {
+        return 0;
+      }
+      return Number(aspectRatio.value.split(":")[0]);
+    });
+    const heightRatio = computed(() => {
+      if (!aspectRatio.value || aspectRatio.value.indexOf(":") < 0) {
+        return 0;
+      }
+      return Number(aspectRatio.value.split(":")[1]);
+    });
+    function handleStreamRegionSize() {
+      if (!liveStreamViewContainerRef.value) {
+        return;
+      }
+      const containerWidth = getContentSize(liveStreamViewContainerRef.value).width;
+      const containerHeight = getContentSize(liveStreamViewContainerRef.value).height;
+      let width = containerWidth;
+      let height = containerHeight;
+      if (widthRatio.value && heightRatio.value) {
+        const scaleWidth = containerWidth / widthRatio.value;
+        const scaleHeight = containerHeight / heightRatio.value;
+        if (scaleWidth > scaleHeight) {
+          width = containerHeight / heightRatio.value * widthRatio.value;
+          height = containerHeight;
+        }
+        if (scaleWidth <= scaleHeight) {
+          width = containerWidth;
+          height = containerWidth / widthRatio.value * heightRatio.value;
+        }
+      }
+      originStreamViewStyle.value.width = width;
+      originStreamViewStyle.value.height = height;
+    }
+    watch(
+      () => aspectRatio.value,
+      () => {
+        handleStreamRegionSize();
+      }
+    );
+    const isPortraitContainer = ref(true);
+    const getContainerOrientation = () => {
+      if (!liveStreamViewContainerRef.value) {
+        return;
+      }
+      const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+      isPortraitContainer.value = containerRect.width < containerRect.height;
+    };
+    const ro = new ResizeObserver(() => {
+      getContainerOrientation();
+      handleStreamRegionSize();
+      handleStreamListTransform();
+    });
+    onMounted(() => {
+      ro.observe(liveStreamViewContainerRef.value);
+      getContainerOrientation();
+    });
+    onBeforeUnmount(() => {
+      ro.unobserve(liveStreamViewContainerRef.value);
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: "live-stream-view-container",
+        ref_key: "liveStreamViewContainerRef",
+        ref: liveStreamViewContainerRef
+      }, [
+        createElementVNode("div", {
+          class: "live-stream-view",
+          style: normalizeStyle(streamViewStyle.value)
+        }, [
+          !_ctx.$slots.localVideo && unref(seatList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
+          ])) : createCommentVNode("", true),
+          _cache[0] || (_cache[0] = createElementVNode("div", {
+            id: "stream-content",
+            class: "stream-content"
+          }, null, -1)),
+          needPlayStreamViewInfo.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(needPlayStreamViewInfo.value, (item, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: `seat-${index}`,
+                style: normalizeStyle(item.region)
+              }, [
+                renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, { userInfo: item.userInfo }), void 0, true),
+                !_ctx.$slots.streamViewUI ? (openBlock(), createBlock(DefaultStreamViewUI, {
+                  key: 0,
+                  containerStyle: item.region,
+                  userInfo: item.userInfo
+                }, null, 8, ["containerStyle", "userInfo"])) : createCommentVNode("", true)
+              ], 4);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          _ctx.$slots.localVideo && isMounted.value ? renderSlot(_ctx.$slots, "localVideo", normalizeProps(mergeProps({ key: 2 }, { style: (_a = localStreamViewInfo.value) == null ? void 0 : _a.region })), void 0, true) : createCommentVNode("", true)
+        ], 4)
+      ], 512);
+    };
+  }
+});
+const LiveStreamView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-80a8bddb"]]);
+addI18n("en-US", { translation: resource });
+addI18n("zh-CN", { translation: resource$1 });
+export {
+  DefaultStreamViewUI,
+  LiveStreamView
+};

package/dist/components/LiveStreamView/index.vue.d.ts

@@ -0,0 +1,23 @@
+declare function __VLS_template(): {
+    streamViewUI?(_: {
+        userInfo: import('../..').SeatUserInfo | undefined;
+    }): any;
+    localVideo?(_: {
+        style: {
+            position: "absolute";
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        } | undefined;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/MessageInput/AttachmentPicker/AttachmentPicker.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../../../AttachmentPicker.vue_vue_type_script_setup_true_lang-B9tVChd9.js";
+export {
+  _sfc_main as default
+};

package/dist/components/MessageInput/AttachmentPicker/AttachmentPicker.vue.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    className?: string;
+    attachmentPickerMode?: 'collapsed' | 'expanded';
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    className: string;
+    attachmentPickerMode: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    className: string;
+    attachmentPickerMode: string;
+}>>> & Readonly<{}>, {
+    className: string;
+    attachmentPickerMode: "collapsed" | "expanded";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageInput/AttachmentPicker/FilePicker.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-D0cP-aFi.js";
+export {
+  _sfc_main as default
+};

package/dist/components/MessageInput/AttachmentPicker/FilePicker.vue.d.ts

@@ -0,0 +1,44 @@
+interface Props {
+    label?: string;
+    iconSize?: number;
+    onClose?: () => void;
+    className?: string;
+    style?: Record<string, string>;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    label: string;
+    className: string;
+    style: undefined;
+    onClose: () => void;
+    iconSize: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    label: string;
+    className: string;
+    style: undefined;
+    onClose: () => void;
+    iconSize: number;
+}>>> & Readonly<{}>, {
+    onClose: () => void;
+    label: string;
+    style: Record<string, string>;
+    className: string;
+    iconSize: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageInput/AttachmentPicker/ImagePicker.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-DzBHwcSi.js";
+export {
+  _sfc_main as default
+};

package/dist/components/MessageInput/AttachmentPicker/ImagePicker.vue.d.ts

@@ -0,0 +1,44 @@
+interface Props {
+    label?: string;
+    iconSize?: number;
+    onClose?: () => void;
+    className?: string;
+    style?: Record<string, string>;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    label: string;
+    className: string;
+    style: undefined;
+    onClose: () => void;
+    iconSize: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    label: string;
+    className: string;
+    style: undefined;
+    onClose: () => void;
+    iconSize: number;
+}>>> & Readonly<{}>, {
+    onClose: () => void;
+    label: string;
+    style: Record<string, string>;
+    className: string;
+    iconSize: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageInput/AttachmentPicker/VideoPicker.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DAv8_NWh.js";
+export {
+  _sfc_main as default
+};

package/dist/components/MessageInput/AttachmentPicker/VideoPicker.vue.d.ts

@@ -0,0 +1,44 @@
+interface Props {
+    label?: string;
+    iconSize?: number;
+    onClose?: () => void;
+    className?: string;
+    style?: Record<string, string>;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    label: string;
+    className: string;
+    style: undefined;
+    onClose: () => void;
+    iconSize: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    label: string;
+    className: string;
+    style: undefined;
+    onClose: () => void;
+    iconSize: number;
+}>>> & Readonly<{}>, {
+    onClose: () => void;
+    label: string;
+    style: Record<string, string>;
+    className: string;
+    iconSize: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageInput/AttachmentPicker/index.d.ts

@@ -0,0 +1,6 @@
+import { default as AttachmentPicker } from './AttachmentPicker.vue';
+import { default as FilePicker } from './FilePicker.vue';
+import { default as ImagePicker } from './ImagePicker.vue';
+import { default as VideoPicker } from './VideoPicker.vue';
+
+export { AttachmentPicker, FilePicker, ImagePicker, VideoPicker, };

package/dist/components/MessageInput/AttachmentPicker/index.js

@@ -0,0 +1,10 @@
+import { _ } from "../../../AttachmentPicker.vue_vue_type_script_setup_true_lang-B9tVChd9.js";
+import { _ as _2 } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-D0cP-aFi.js";
+import { _ as _3 } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-DzBHwcSi.js";
+import { _ as _4 } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DAv8_NWh.js";
+export {
+  _ as AttachmentPicker,
+  _2 as FilePicker,
+  _3 as ImagePicker,
+  _4 as VideoPicker
+};

package/dist/components/MessageInput/EmojiPicker/EmojiPicker.js

@@ -0,0 +1,106 @@
+import { defineComponent, onMounted, createElementBlock, openBlock, createVNode, unref, withCtx, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList } from "vue";
+import { useUIKit, IconEmoji } from "@tencentcloud/uikit-base-component-vue3";
+import { P as PopoverRoot_default, a as PopoverTrigger_default, b as PopoverPortal_default, c as PopoverContent_default } from "../../../PopoverTrigger-BhQt39dx.js";
+import { emojiUrlMap, emojiBaseUrl } from "../../../constants/emoji.js";
+import { transformTextWithEmojiKeyToName } from "../../../utils/emoji.js";
+import { useMessageInputState, MessageContentType } from "../../../states/MessageInputState/MessageInputState.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const styles = {
+  "emoji-picker__icon": "_emoji-picker__icon_kyu4g_1",
+  "emoji-picker__list": "_emoji-picker__list_kyu4g_4",
+  "emoji-picker__list-item": "_emoji-picker__list-item_kyu4g_15"
+};
+const _hoisted_1 = { class: "flex flex-col gap-2.5" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["src", "alt"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EmojiPicker",
+  props: {
+    triggerStyle: {},
+    disabled: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const { insertContent } = useMessageInputState();
+    onMounted(() => {
+      Object.values(emojiUrlMap).forEach((url) => {
+        const img = new Image();
+        img.src = emojiBaseUrl + url;
+      });
+    });
+    function insertEmojiToInput(emojiKey) {
+      if (emojiKey) {
+        insertContent([
+          {
+            type: MessageContentType.EMOJI,
+            content: {
+              url: emojiBaseUrl + emojiUrlMap[emojiKey],
+              key: emojiKey,
+              text: transformTextWithEmojiKeyToName(emojiKey)
+            }
+          }
+        ]);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createVNode(unref(PopoverRoot_default), null, {
+          default: withCtx(() => [
+            createVNode(unref(PopoverTrigger_default), {
+              as: "span",
+              style: normalizeStyle(_ctx.triggerStyle),
+              class: normalizeClass([props.disabled && "disabled"])
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(IconEmoji), {
+                  class: normalizeClass(unref(styles)["emoji-picker__icon"]),
+                  size: "24"
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            }, 8, ["style", "class"]),
+            createVNode(unref(PopoverPortal_default), null, {
+              default: withCtx(() => [
+                createVNode(unref(PopoverContent_default), {
+                  side: "top",
+                  align: "start",
+                  "side-offset": 5
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_1, [
+                      createElementVNode("div", {
+                        class: normalizeClass(unref(styles)["emoji-picker__list"])
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(unref(emojiUrlMap)), (emojiKey) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: emojiKey,
+                            class: normalizeClass(unref(styles)["emoji-picker__list-item"]),
+                            onClick: ($event) => insertEmojiToInput(emojiKey)
+                          }, [
+                            createElementVNode("img", {
+                              class: normalizeClass(unref(styles)["emoji-picker__list-item"]),
+                              src: unref(emojiBaseUrl) + unref(emojiUrlMap)[emojiKey],
+                              alt: unref(t)(`Emoji.${emojiKey}`)
+                            }, null, 10, _hoisted_3)
+                          ], 10, _hoisted_2);
+                        }), 128))
+                      ], 2)
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+const EmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-01fb363c"]]);
+export {
+  EmojiPicker as default
+};

package/dist/components/MessageInput/EmojiPicker/EmojiPicker.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    triggerStyle?: Record<string, any>;
+    disabled?: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    triggerStyle?: Record<string, any>;
+    disabled?: boolean;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/MessageInput/EmojiPicker/index.d.ts

@@ -0,0 +1,3 @@
+import { default as EmojiPicker } from './EmojiPicker.vue';
+
+export { EmojiPicker, };

package/dist/components/MessageInput/EmojiPicker/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./EmojiPicker.js";
+export {
+  default2 as EmojiPicker
+};

package/dist/components/MessageInput/MessageInput.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../../MessageInput.vue_vue_type_script_setup_true_lang-Ca6-JH93.js";
+export {
+  _sfc_main as default
+};