@ndscnj/roomkit-web-vue3 25.12.24165 → 25.12.24166

package/src/TUIRoom/components/RoomVote/indexH5.vue

@@ -1,141 +1,84 @@
 <template>
-  <div class="contact-container-main">
-    <div class="contact-title-main">
-      <div>{{ t('Contact us') }}</div>
-      <span v-tap="handleCloseContact" class="cancel">{{ t('Cancel') }}</span>
-    </div>
-    <div
-      v-for="item in contactContentList"
-      :key="item.id"
-      class="contact-content-main"
-    >
-      <span class="contact-title">{{ t(item.title) }}</span>
-      <span class="contact-content">{{ item.content }}</span>
-      <IconCopy v-tap="() => onCopy(item.copyLink)" class="copy" />
-    </div>
-    <span class="contact-bottom">
-      {{
-        t(
-          'If you have any questions, please feel free to join our QQ group or send an email'
-        )
-      }}
-    </span>
+  <div class="more-container">
+    <slot name="contentH5"></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import useRoomMoreControl from './useRoomMoreHooks';
-import { IconCopy } from '@tencentcloud/uikit-base-component-vue3';
-import vTap from '../../directives/vTap';
-
-const { t, onCopy, contactContentList } = useRoomMoreControl();
-
-const emit = defineEmits(['on-close-contact']);
-
-function handleCloseContact() {
-  emit('on-close-contact');
-}
 </script>
 
 <style lang="scss" scoped>
-span {
-  padding-right: 5px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 17px;
-}
+.more-container {
+  padding: 20px;
 
-.contact-container-main {
-  position: fixed;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-bottom: 4vh;
-  border-radius: 15px 15px 0 0;
-  animation-name: popup;
-  animation-duration: 200ms;
-  background-color: var(--bg-color-operate);
+  .more-title {
+    display: flex;
+    align-items: center;
 
-  @keyframes popup {
-    from {
-      transform: scaleY(0);
-      transform-origin: bottom;
+    .email-icon {
+      color: var(--uikit-color-gray-7);
     }
 
-    to {
-      transform: scaleY(1);
-      transform-origin: bottom;
+    .more-notice {
+      width: 100%;
+      height: 22px;
+      padding-left: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: var(--text-color-primary);
     }
   }
 
-  .contact-title-main {
+  .more-item {
+    position: relative;
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 30px 0 20px 25px;
-    font-family: 'PingFang SC';
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
-    color: var(--text-color-primary);
-  }
+    flex-direction: column;
 
-  .contact-content-main {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 90%;
-    height: 15%;
-    padding: 0 0 0 25px;
-    margin-bottom: 10px;
-  }
+    &:not(:first-child) {
+      margin-top: 20px;
 
-  .contact-title,
-  .contact-content {
-    width: 28%;
-    font-family: 'PingFang SC';
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    white-space: nowrap;
-    color: var(--text-color-primary);
-  }
+      .item-title {
+        width: 100%;
+        padding-bottom: 8px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: var(--text-color-primary);
+      }
 
-  .contact-content {
-    width: 62%;
-    overflow: hidden;
-    font-size: 14px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text-color-secondary);
-  }
+      .more-content {
+        position: relative;
+        box-sizing: border-box;
+        display: inline-block;
+        flex: 1;
+        height: 42px;
+        padding: 10px 30px 10px 16px;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-radius: 8px;
+        outline: none;
+        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        color: var(--text-color-primary);
+        background-color: var(--bg-color-input);
+        border: 1px solid var(--stroke-color-module);
+      }
 
-  .contact-bottom {
-    width: 90%;
-    padding-left: 40px;
-    font-family: 'PingFang SC';
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 17px;
-    text-align: center;
-    color: var(--text-color-secondary);
-  }
-
-  .copy {
-    margin-left: 30px;
-    color: var(--text-color-link);
+      .copy-icon {
+        position: absolute;
+        top: 45px;
+        right: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: var(--text-color-link);
+      }
+    }
   }
 }
-
-.cancel {
-  flex: 1;
-  padding-right: 30px;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: end;
-}
 </style>

package/src/TUIRoom/conference.vue

@@ -18,14 +18,14 @@
       @show-overlay="handleShowOverlay"
       @on-vote="onVote"
     >
-    <template #content>
-      <slot name="content"></slot>
-    </template>
     </room-footer>
     <room-sidebar @on-vote="onVote">
       <template #content>
           <slot name="content"></slot>
         </template>
+      <template #contentH5>
+        <slot name="contentH5"></slot>
+      </template>
     </room-sidebar>
     <room-setting />
     <room-overlay />

package/es/components/RoomVote/indexH5.vue2.mjs

@@ -1,51 +0,0 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, withDirectives, toDisplayString, unref, createTextVNode, Fragment, renderList, createVNode } from "vue";
-import useRoomMoreHooks from "./useRoomMoreHooks.mjs";
-import { IconCopy } from "@tencentcloud/uikit-base-component-vue3";
-import vTap from "../../directives/vTap.mjs";
-const _hoisted_1 = { class: "contact-container-main" };
-const _hoisted_2 = { class: "contact-title-main" };
-const _hoisted_3 = { class: "cancel" };
-const _hoisted_4 = { class: "contact-title" };
-const _hoisted_5 = { class: "contact-content" };
-const _hoisted_6 = { class: "contact-bottom" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "indexH5",
-  emits: ["on-close-contact"],
-  setup(__props, { emit: __emit }) {
-    const { t, onCopy, contactContentList } = useRoomMoreHooks();
-    const emit = __emit;
-    function handleCloseContact() {
-      emit("on-close-contact");
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", null, toDisplayString(unref(t)("Contact us")), 1),
-          withDirectives((openBlock(), createElementBlock("span", _hoisted_3, [
-            createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
-          ])), [
-            [unref(vTap), handleCloseContact]
-          ])
-        ]),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(contactContentList), (item) => {
-          return openBlock(), createElementBlock("div", {
-            key: item.id,
-            class: "contact-content-main"
-          }, [
-            createElementVNode("span", _hoisted_4, toDisplayString(unref(t)(item.title)), 1),
-            createElementVNode("span", _hoisted_5, toDisplayString(item.content), 1),
-            withDirectives(createVNode(unref(IconCopy), { class: "copy" }, null, 512), [
-              [unref(vTap), () => unref(onCopy)(item.copyLink)]
-            ])
-          ]);
-        }), 128)),
-        createElementVNode("span", _hoisted_6, toDisplayString(unref(t)(
-          "If you have any questions, please feel free to join our QQ group or send an email"
-        )), 1)
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/es/components/RoomVote/useRoomMoreHooks.mjs

@@ -1,43 +0,0 @@
-import { computed } from "vue";
-import { TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
-import i18n, { useI18n } from "../../locales/index.mjs";
-import "../../utils/environment.mjs";
-import { clipBoard } from "../../utils/adapter.mjs";
-function useRoomMoreHooks() {
-  const { t } = useI18n();
-  const groupNumber = "770645461";
-  const email = "chaooliang@tencent.com";
-  async function onCopy(value) {
-    try {
-      await clipBoard(value);
-      TUIToast({
-        message: t("Copied successfully"),
-        type: TOAST_TYPE.SUCCESS
-      });
-    } catch (error) {
-      TUIToast({
-        message: t("Copied failure"),
-        type: TOAST_TYPE.ERROR
-      });
-    }
-  }
-  const isZH = computed(() => i18n.global.locale.value === "zh-CN");
-  const contactContentList = [
-    { id: 1, title: "group chat", content: groupNumber, copyLink: groupNumber },
-    { id: 2, title: "Email", content: email, copyLink: email }
-  ];
-  const handleClick = () => {
-    window.open("https://zhiliao.qq.com/s/c5GY7HIM62CK", "_blank");
-  };
-  return {
-    t,
-    onCopy,
-    contactContentList,
-    email,
-    handleClick,
-    isZH
-  };
-}
-export {
-  useRoomMoreHooks as default
-};

package/lib/components/RoomVote/indexH5.vue2.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-const useRoomMoreHooks = require("./useRoomMoreHooks.js");
-const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
-const vTap = require("../../directives/vTap.js");
-const _hoisted_1 = { class: "contact-container-main" };
-const _hoisted_2 = { class: "contact-title-main" };
-const _hoisted_3 = { class: "cancel" };
-const _hoisted_4 = { class: "contact-title" };
-const _hoisted_5 = { class: "contact-content" };
-const _hoisted_6 = { class: "contact-bottom" };
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "indexH5",
-  emits: ["on-close-contact"],
-  setup(__props, { emit: __emit }) {
-    const { t, onCopy, contactContentList } = useRoomMoreHooks.default();
-    const emit = __emit;
-    function handleCloseContact() {
-      emit("on-close-contact");
-    }
-    return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createElementVNode("div", _hoisted_2, [
-          Vue.createElementVNode("div", null, Vue.toDisplayString(Vue.unref(t)("Contact us")), 1),
-          Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", _hoisted_3, [
-            Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
-          ])), [
-            [Vue.unref(vTap.default), handleCloseContact]
-          ])
-        ]),
-        (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(contactContentList), (item) => {
-          return Vue.openBlock(), Vue.createElementBlock("div", {
-            key: item.id,
-            class: "contact-content-main"
-          }, [
-            Vue.createElementVNode("span", _hoisted_4, Vue.toDisplayString(Vue.unref(t)(item.title)), 1),
-            Vue.createElementVNode("span", _hoisted_5, Vue.toDisplayString(item.content), 1),
-            Vue.withDirectives(Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconCopy), { class: "copy" }, null, 512), [
-              [Vue.unref(vTap.default), () => Vue.unref(onCopy)(item.copyLink)]
-            ])
-          ]);
-        }), 128)),
-        Vue.createElementVNode("span", _hoisted_6, Vue.toDisplayString(Vue.unref(t)(
-          "If you have any questions, please feel free to join our QQ group or send an email"
-        )), 1)
-      ]);
-    };
-  }
-});
-exports.default = _sfc_main;

package/lib/components/RoomVote/useRoomMoreHooks.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
-const index = require("../../locales/index.js");
-require("../../utils/environment.js");
-const adapter = require("../../utils/adapter.js");
-function useRoomMoreHooks() {
-  const { t } = index.useI18n();
-  const groupNumber = "770645461";
-  const email = "chaooliang@tencent.com";
-  async function onCopy(value) {
-    try {
-      await adapter.clipBoard(value);
-      uikitBaseComponentVue3.TUIToast({
-        message: t("Copied successfully"),
-        type: uikitBaseComponentVue3.TOAST_TYPE.SUCCESS
-      });
-    } catch (error) {
-      uikitBaseComponentVue3.TUIToast({
-        message: t("Copied failure"),
-        type: uikitBaseComponentVue3.TOAST_TYPE.ERROR
-      });
-    }
-  }
-  const isZH = Vue.computed(() => index.default.global.locale.value === "zh-CN");
-  const contactContentList = [
-    { id: 1, title: "group chat", content: groupNumber, copyLink: groupNumber },
-    { id: 2, title: "Email", content: email, copyLink: email }
-  ];
-  const handleClick = () => {
-    window.open("https://zhiliao.qq.com/s/c5GY7HIM62CK", "_blank");
-  };
-  return {
-    t,
-    onCopy,
-    contactContentList,
-    email,
-    handleClick,
-    isZH
-  };
-}
-exports.default = useRoomMoreHooks;