tuikit-atomicx-vue3 0.1.0

package/src/components/BarrageInput/BarrageInput.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="live-message-input">
+    <div
+      :class="['message-input-container', containerClass, disabledAndPlaceholder.disabled && 'disabled']"
+      :style="containerStyle"
+    >
+      <TextEditor
+        style="width: 100%; height: 100%"
+        :placeholder="disabledAndPlaceholder.placeholder"
+        :disabled="disabledAndPlaceholder.disabled"
+        :autoFocus="autoFocus"
+        @focus="emit('focus')"
+        @blur="emit('blur')"
+      >
+        <template #prefix>
+          <div class="input-actions">
+            <EmojiPicker :disabled="disabledAndPlaceholder.disabled" :trigger-style="{ display: 'flex' }" />
+          </div>
+        </template>
+      </TextEditor>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, withDefaults, defineEmits } from 'vue';
+import { EmojiPicker } from './EmojiPicker';
+import TextEditor from './TextEditor/TextEditor.vue';
+import { useLoginState } from '../../states/LoginState';
+import { useLiveAudienceState } from '../../states/LiveAudienceState';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const emit = defineEmits<{
+  (e: 'focus'): void;
+  (e: 'blur'): void;
+}>();
+const { t } = useUIKit();
+const { loginUserInfo } = useLoginState();
+const { audienceList } = useLiveAudienceState();
+
+interface Props {
+  containerClass?: string;
+  containerStyle?: Record<string, any>;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  containerClass: '',
+  containerStyle: () => ({}),
+  height: '',
+  minHeight: '40px',
+  maxHeight: '140px',
+  disabled: false,
+  autoFocus: true,
+});
+
+const containerStyle = computed(() => {
+  const defaultStyle: Record<string, any> = {
+    minHeight: props.minHeight,
+    maxHeight: props.maxHeight,
+  };
+
+  if (props.height) {
+    defaultStyle.height = props.height;
+  }
+
+  return { ...defaultStyle, ...props.containerStyle };
+});
+
+const disabledAndPlaceholder = computed(() => {
+  const localUser = audienceList.value.find(item => item.userId === loginUserInfo.value?.userId);
+  return {
+    disabled: props.disabled || localUser?.isMessageDisabled,
+    placeholder: localUser?.isMessageDisabled ? t('You have been muted') : props.placeholder,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.live-message-input {
+  width: 100%;
+
+  .message-input-container {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    background-color: var(--bg-color-operate);
+    border: 2px solid var(--stroke-color-primary);
+    border-radius: 8px;
+    padding: 6px 16px;
+    overflow: auto;
+    box-sizing: border-box;
+
+    &:focus-within {
+      border-color: var(--text-color-link);
+    }
+
+    .input-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-right: 12px;
+      flex-shrink: 0;
+
+      .send-button {
+        padding: 8px 20px;
+        background: var(--text-color-link);
+        color: var(--text-color-primary);
+        border: none;
+        border-radius: 20px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        min-width: 60px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          background: var(--text-color-link-hover);
+        }
+
+        &:active {
+          background: var(--text-color-link-active);
+        }
+
+        &:disabled {
+          background: var(--text-color-disabled);
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    user-select: none;
+  }
+}
+</style>

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="live-message-input-h5">
+    <BarrageInput
+      :autoFocus="props.autoFocus"
+      :containerClass="props.containerClass"
+      :containerStyle="props.containerStyle"
+      :height="props.height"
+      :minHeight="props.minHeight"
+      :maxHeight="props.maxHeight"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+    <TUIButton
+      v-if="isFocus"
+      type="primary"
+      @touchstart="handleTouchStart"
+      @touchend="handleTouchEnd"
+    >
+      {{ t('Send') }}
+    </TUIButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, withDefaults, defineProps } from 'vue';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useMessageInputState } from '../../states/MessageInputState';
+import BarrageInput from './BarrageInput.vue';
+
+interface Props {
+  containerClass?: string;
+  containerStyle?: Record<string, any>;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  containerClass: '',
+  containerStyle: () => ({}),
+  height: '',
+  minHeight: '40px',
+  maxHeight: '140px',
+  disabled: false,
+  autoFocus: false,
+});
+
+const { t } = useUIKit();
+const { inputRawValue, setContent, sendMessage, blurEditor } = useMessageInputState();
+const isFocus = ref(false);
+const isTouching = ref(false);
+
+const handleTouchStart = () => {
+  isTouching.value = true;
+};
+
+const handleSend = () => {
+  if (inputRawValue.value) {
+    sendMessage();
+    setContent('');
+    blurEditor();
+  }
+};
+const handleTouchEnd = () => {
+  if (!isTouching.value) {
+    return;
+  }
+  isTouching.value = false;
+
+  handleSend();
+};
+
+const handleFocus = async () => {
+  isFocus.value = true;
+};
+
+const handleBlur = () => {
+  isFocus.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.live-message-input-h5 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+</style>

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.module.scss

@@ -0,0 +1,41 @@
+.emoji-picker {
+  &__icon {
+    cursor: pointer;
+  }
+
+  &__list {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 8px;
+    width: 310px;
+    border-radius: 16px;
+    padding: 16px;
+    margin-bottom: 10px;
+    background-color: var(--dropdown-color-default);
+    box-shadow: 0 0 10px 0 var(--shadow-color);
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    &__list {
+      width: 100vw;
+      height: 28vh;
+      overflow-y: auto;
+      box-sizing: border-box;
+      flex-flow: wrap;
+
+      &-item {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <PopoverRoot>
+      <PopoverTrigger as="span" :style="triggerStyle" :class="[props.disabled && 'disabled']">
+        <IconEmoji :class="styles['emoji-picker__icon']" size="24" />
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent side="top" align="start" :side-offset="5" style="box-sizing: border-box; z-index: 1000">
+          <div class="flex flex-col gap-2.5">
+            <div :class="styles['emoji-picker__list']">
+              <div
+                v-for="emojiKey in Object.keys(emojiUrlMap)"
+                :key="emojiKey"
+                :class="styles['emoji-picker__list-item']"
+                @click="insertEmojiToInput(emojiKey)"
+              >
+                <img
+                  :class="styles['emoji-picker__list-item']"
+                  :src="emojiBaseUrl + emojiUrlMap[emojiKey]"
+                  :alt="t(`Emoji.${emojiKey}`)"
+                />
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, defineProps } from 'vue';
+import { useUIKit, IconEmoji } from '@tencentcloud/uikit-base-component-vue3';
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import { emojiUrlMap, emojiBaseUrl } from '../../../constants/emoji';
+import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';
+import { useMessageInputState, MessageContentType } from '../../../states/MessageInputState';
+import styles from './EmojiPicker.module.scss';
+
+const props = defineProps<{
+  triggerStyle?: Record<string, any>;
+  disabled?: boolean;
+}>();
+const { t } = useUIKit();
+const { insertContent } = useMessageInputState();
+
+// Image preload
+onMounted(() => {
+  Object.values(emojiUrlMap).forEach(url => {
+    const img = new Image();
+    img.src = emojiBaseUrl + url;
+  });
+});
+
+function insertEmojiToInput(emojiKey: string) {
+  if (emojiKey) {
+    insertContent(
+      [
+        {
+          type: MessageContentType.EMOJI,
+          content: {
+            url: emojiBaseUrl + emojiUrlMap[emojiKey],
+            key: emojiKey,
+            text: transformTextWithEmojiKeyToName(emojiKey),
+          },
+        },
+      ],
+      false
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.disabled {
+  cursor: not-allowed;
+  user-select: none;
+  pointer-events: none;
+}
+</style>

package/src/components/BarrageInput/EmojiPicker/index.ts

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

package/src/components/BarrageInput/TextEditor/Editor.scss

@@ -0,0 +1,83 @@
+.tiptap.ProseMirror {
+  height: 100%;
+  flex: 1 0 auto;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  -webkit-user-select: text;
+  user-select: text;
+  overflow-y: auto;
+  border: none !important;
+  outline: none !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--uikit-color-white-6);
+    border-radius: 3px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+
+    &:hover {
+      background: var(--uikit-color-white-5);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  p {
+      margin: 0;
+      padding: 0;
+      font-style: normal;
+      outline: none !important;
+      line-height: 1.5;
+  }
+
+  img {
+      &.ProseMirror-selectednode {
+          outline: 2px solid var(--uikit-color-theme-6);
+      }
+  }
+
+  .is-editor-empty {
+    display: block;
+  }
+
+  .message-emoji {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    user-select: text;
+    pointer-events: none;
+    vertical-align: middle;
+  }
+  .message-image {
+    display: inline-block;
+    width: 100px;
+    user-select: text;
+    vertical-align: middle;
+  }
+}
+
+
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: var(--text-color-secondary);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+

package/src/components/BarrageInput/TextEditor/EditorCore.ts

@@ -0,0 +1,171 @@
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import StarterKit from '@tiptap/starter-kit';
+import { Extension, Editor } from '@tiptap/vue-3';
+import { MessageContentType } from '../../../states/MessageInputState';
+import { isMobile } from '../../../utils/environment';
+import type { IInputContent } from '../../../states/MessageInputState';
+import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
+import './Editor.scss';
+
+function createEmojiExtension() {
+  return Image.extend({
+    name: MessageContentType.EMOJI,
+    inline: true,
+    group: 'inline',
+    draggable: true,
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        HTMLAttributes: {
+          class: 'message-emoji',
+        },
+      };
+    },
+  });
+}
+
+function createImageExtension() {
+  return Image.extend({
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        HTMLAttributes: {
+          class: 'message-image',
+        },
+      };
+    },
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        fileData: {
+          default: null,
+          parseHTML: element => element.getAttribute('file-data'),
+          renderHTML: attributes => (attributes.fileData ? { 'file-data': attributes.fileData } : {}),
+        },
+      };
+    },
+  }).configure({
+    inline: true,
+  });
+}
+
+function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined }) {
+  return Extension.create({
+    addKeyboardShortcuts() {
+      return {
+        'Enter': ({ editor }) => {
+          if (isMobile) {
+            editor.commands.setHardBreak();
+            return true;
+          }
+          options?.onEnter?.();
+          return true;
+        },
+        'Mod-Enter': ({ editor }) => {
+          editor.commands.setHardBreak();
+          return true;
+        },
+      };
+    },
+  });
+}
+
+function convertEditorContent(node: JSONContent): IInputContent[] {
+  if (!node?.content) {
+    return [];
+  }
+
+  return node.content.flatMap((child: JSONContent) => {
+    switch (child.type) {
+      case 'text':
+        return child.text
+          ? [
+            {
+              type: MessageContentType.TEXT,
+              content: child.text,
+            },
+          ]
+          : [];
+      case 'image':
+        return [
+          {
+            type: MessageContentType.IMAGE,
+            content: child.attrs?.fileData,
+          },
+        ];
+      case 'emoji':
+        return [
+          {
+            type: MessageContentType.EMOJI,
+            content: {
+              url: child.attrs?.src,
+              key: child.attrs?.alt,
+              text: child.attrs?.title,
+            },
+          },
+        ];
+      case 'hardBreak':
+        return [
+          {
+            type: MessageContentType.TEXT,
+            content: '\n',
+          },
+        ];
+      default:
+        return convertEditorContent(child);
+    }
+  });
+}
+
+interface EditorOptions {
+  element: Element;
+  placeholder?: string;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  onUpdate?: (content: IInputContent[]) => void;
+  onEnter?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+function createEditor({
+  element,
+  placeholder = '',
+  autoFocus = false,
+  disabled = false,
+  onUpdate,
+  onEnter,
+  onFocus,
+  onBlur,
+}: EditorOptions) {
+  const createBaseExtensions = (enterHandler?: () => void) => [
+    StarterKit,
+    createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : undefined),
+    createEmojiExtension(),
+    createImageExtension(),
+    Placeholder.configure({
+      emptyEditorClass: 'is-editor-empty',
+      placeholder,
+    }),
+  ];
+
+  const editorConfig: Partial<TiptapEditorOptions> = {
+    element,
+    autofocus: autoFocus,
+    editable: !disabled,
+    extensions: createBaseExtensions(onEnter),
+    onUpdate: ({ editor }) => {
+      const content = convertEditorContent(editor.getJSON());
+      onUpdate?.(content);
+    },
+    onFocus,
+    onBlur,
+  };
+
+  return new Editor(editorConfig);
+}
+
+export { createEditor };
+
+export type { Editor };

package/src/components/BarrageInput/TextEditor/TextEditor.module.scss

@@ -0,0 +1,45 @@
+.input-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  height: 100%;
+  user-select: none;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-color-primary);
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.input-prefix {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.input-suffix {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.editor {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  height: 100%;
+}
+
+.disabled-editor {
+  color: var(--text-color-secondary);
+  text-align: center;
+  line-height: 1.5;
+  font-size: 14px;
+  user-select: none;
+  pointer-events: none;
+}