tuikit-atomicx-vue3 0.1.0

package/dist/components/BarrageInput/EmojiPicker/EmojiPicker.js

@@ -0,0 +1,110 @@
+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_qv6nf_1",
+  "emoji-picker__list": "_emoji-picker__list_qv6nf_4",
+  "emoji-picker__list-item": "_emoji-picker__list-item_qv6nf_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)
+              }
+            }
+          ],
+          false
+        );
+      }
+    }
+    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,
+                  style: { "box-sizing": "border-box", "z-index": "1000" }
+                }, {
+                  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-5db30dda"]]);
+export {
+  EmojiPicker as default
+};

package/dist/components/BarrageInput/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/BarrageInput/EmojiPicker/index.d.ts

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

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

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

package/dist/components/BarrageInput/TextEditor/EditorCore.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from '@tiptap/vue-3';
+import { IInputContent } from '../../../states/MessageInputState';
+
+interface EditorOptions {
+    element: Element;
+    placeholder?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    onUpdate?: (content: IInputContent[]) => void;
+    onEnter?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+declare function createEditor({ element, placeholder, autoFocus, disabled, onUpdate, onEnter, onFocus, onBlur, }: EditorOptions): Editor;
+export { createEditor };
+export type { Editor };

package/dist/components/BarrageInput/TextEditor/EditorCore.js

@@ -0,0 +1,148 @@
+import { S as StarterKit, P as Placeholder, E as Editor, a as Extension, I as Image } from "../../../index-oR-rgHxX.js";
+import { MessageContentType } from "../../../states/MessageInputState/MessageInputState.js";
+import { isMobile } from "../../../utils/environment.js";
+function createEmojiExtension() {
+  return Image.extend({
+    name: MessageContentType.EMOJI,
+    inline: true,
+    group: "inline",
+    draggable: true,
+    addOptions() {
+      var _a;
+      return {
+        ...(_a = this.parent) == null ? void 0 : _a.call(this),
+        HTMLAttributes: {
+          class: "message-emoji"
+        }
+      };
+    }
+  });
+}
+function createImageExtension() {
+  return Image.extend({
+    addOptions() {
+      var _a;
+      return {
+        ...(_a = this.parent) == null ? void 0 : _a.call(this),
+        HTMLAttributes: {
+          class: "message-image"
+        }
+      };
+    },
+    addAttributes() {
+      var _a;
+      return {
+        ...(_a = this.parent) == null ? void 0 : _a.call(this),
+        fileData: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("file-data"),
+          renderHTML: (attributes) => attributes.fileData ? { "file-data": attributes.fileData } : {}
+        }
+      };
+    }
+  }).configure({
+    inline: true
+  });
+}
+function createEnterKeyExtension(options) {
+  return Extension.create({
+    addKeyboardShortcuts() {
+      return {
+        "Enter": ({ editor }) => {
+          var _a;
+          if (isMobile) {
+            editor.commands.setHardBreak();
+            return true;
+          }
+          (_a = options == null ? void 0 : options.onEnter) == null ? void 0 : _a.call(options);
+          return true;
+        },
+        "Mod-Enter": ({ editor }) => {
+          editor.commands.setHardBreak();
+          return true;
+        }
+      };
+    }
+  });
+}
+function convertEditorContent(node) {
+  if (!(node == null ? void 0 : node.content)) {
+    return [];
+  }
+  return node.content.flatMap((child) => {
+    var _a, _b, _c, _d;
+    switch (child.type) {
+      case "text":
+        return child.text ? [
+          {
+            type: MessageContentType.TEXT,
+            content: child.text
+          }
+        ] : [];
+      case "image":
+        return [
+          {
+            type: MessageContentType.IMAGE,
+            content: (_a = child.attrs) == null ? void 0 : _a.fileData
+          }
+        ];
+      case "emoji":
+        return [
+          {
+            type: MessageContentType.EMOJI,
+            content: {
+              url: (_b = child.attrs) == null ? void 0 : _b.src,
+              key: (_c = child.attrs) == null ? void 0 : _c.alt,
+              text: (_d = child.attrs) == null ? void 0 : _d.title
+            }
+          }
+        ];
+      case "hardBreak":
+        return [
+          {
+            type: MessageContentType.TEXT,
+            content: "\n"
+          }
+        ];
+      default:
+        return convertEditorContent(child);
+    }
+  });
+}
+function createEditor({
+  element,
+  placeholder = "",
+  autoFocus = false,
+  disabled = false,
+  onUpdate,
+  onEnter,
+  onFocus,
+  onBlur
+}) {
+  const createBaseExtensions = (enterHandler) => [
+    StarterKit,
+    createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : void 0),
+    createEmojiExtension(),
+    createImageExtension(),
+    Placeholder.configure({
+      emptyEditorClass: "is-editor-empty",
+      placeholder
+    })
+  ];
+  const editorConfig = {
+    element,
+    autofocus: autoFocus,
+    editable: !disabled,
+    extensions: createBaseExtensions(onEnter),
+    onUpdate: ({ editor }) => {
+      const content = convertEditorContent(editor.getJSON());
+      onUpdate == null ? void 0 : onUpdate(content);
+    },
+    onFocus,
+    onBlur
+  };
+  return new Editor(editorConfig);
+}
+export {
+  createEditor
+};

package/dist/components/BarrageInput/TextEditor/TextEditor.js

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

package/dist/components/BarrageInput/TextEditor/TextEditor.vue.d.ts

@@ -0,0 +1,52 @@
+interface ITextEditorProps {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+}
+declare function __VLS_template(): {
+    prefix?(_: {}): any;
+    suffix?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ITextEditorProps>, {
+    autoFocus: boolean;
+    disabled: boolean;
+    placeholder: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    focus: () => void;
+    blur: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ITextEditorProps>, {
+    autoFocus: boolean;
+    disabled: boolean;
+    placeholder: string;
+}>>> & Readonly<{
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+}>, {
+    placeholder: string;
+    disabled: boolean;
+    autoFocus: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BarrageInput/TextEditor/index.d.ts

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

package/dist/components/BarrageInput/TextEditor/index.js

@@ -0,0 +1,4 @@
+import { _ } from "../../../TextEditor.vue_vue_type_script_setup_true_lang-w_I4bsmJ.js";
+export {
+  _ as TextEditor
+};

package/dist/components/BarrageInput/i18n/en-US/index.d.ts

@@ -0,0 +1,5 @@
+export declare const resource: {
+    'Say something': string;
+    'You have been muted': string;
+    Send: string;
+};

package/dist/components/BarrageInput/i18n/en-US/index.js

@@ -0,0 +1,8 @@
+const resource = {
+  "Say something": "Say something...",
+  "You have been muted": "You have been muted",
+  Send: "Send"
+};
+export {
+  resource
+};

package/dist/components/BarrageInput/i18n/index.d.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/dist/components/BarrageInput/i18n/index.js

@@ -0,0 +1,6 @@
+import { resource } from "./en-US/index.js";
+import { resource as resource2 } from "./zh-CN/index.js";
+export {
+  resource as enResource,
+  resource2 as zhResource
+};

package/dist/components/BarrageInput/i18n/zh-CN/index.d.ts

@@ -0,0 +1,5 @@
+export declare const resource: {
+    'Say something': string;
+    'You have been muted': string;
+    Send: string;
+};

package/dist/components/BarrageInput/i18n/zh-CN/index.js

@@ -0,0 +1,8 @@
+const resource = {
+  "Say something": "说点什么...",
+  "You have been muted": "您已被禁言",
+  Send: "发送"
+};
+export {
+  resource
+};

package/dist/components/BarrageInput/index.d.ts

@@ -0,0 +1,154 @@
+import { default as BarrageInputH5 } from './BarrageInputH5.vue';
+
+declare const BarrageInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    height: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    autoFocus: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    containerClass: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    containerStyle: {
+        type: import('vue').PropType<Record<string, any>>;
+        default: () => {};
+    };
+    minHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    maxHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    focus: () => void;
+    blur: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    height: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    autoFocus: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    containerClass: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    containerStyle: {
+        type: import('vue').PropType<Record<string, any>>;
+        default: () => {};
+    };
+    minHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    maxHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+}>> & Readonly<{
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+}>, {
+    height: string;
+    disabled: boolean;
+    autoFocus: boolean;
+    containerClass: string;
+    containerStyle: Record<string, any>;
+    minHeight: string;
+    maxHeight: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    height: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    autoFocus: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    containerClass: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    containerStyle: {
+        type: import('vue').PropType<Record<string, any>>;
+        default: () => {};
+    };
+    minHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    maxHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    height: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    autoFocus: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    containerClass: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    containerStyle: {
+        type: import('vue').PropType<Record<string, any>>;
+        default: () => {};
+    };
+    minHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    maxHeight: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    height: string;
+    disabled: boolean;
+    autoFocus: boolean;
+    containerClass: string;
+    containerStyle: Record<string, any>;
+    minHeight: string;
+    maxHeight: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { BarrageInput, BarrageInputH5 };

package/dist/components/BarrageInput/index.js

@@ -0,0 +1,13 @@
+import BarrageInputPC from "./BarrageInput.js";
+import BarrageInputH5 from "./BarrageInputH5.js";
+import { addI18n } from "../../i18n/index.js";
+import { resource } from "./i18n/en-US/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
+import { isMobile } from "../../utils/environment.js";
+addI18n("en-US", { translation: resource });
+addI18n("zh-CN", { translation: resource$1 });
+const BarrageInput = isMobile ? BarrageInputH5 : BarrageInputPC;
+export {
+  BarrageInput,
+  BarrageInputH5
+};