@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/base/Message/style/Message.scss

@@ -0,0 +1,49 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+$--tk-message-font-size: $--tk-font-size-base;
+$--tk-message-border-radius: $--tk-border-radius-base;
+
+.#{$PREFIX}-message {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  border-radius: #{$--tk-message-border-radius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: #{$--tk-message-font-size};
+  z-index: 9999;
+  color: $--tk-color-black;
+  border-color: $--tk-color-info-light-8;
+  background-color: $--tk-color-info-light-9;
+
+  .#{$PREFIX}-message_icon {
+    margin-right: 5px;
+  }
+  .#{$PREFIX}-message_close {
+    cursor: pointer;
+    margin-left: 5px;
+  }
+}
+.#{$PREFIX}-message--info {
+  color: $--tk-color-info;
+  border-color: $--tk-color-info-light-8;
+  background-color: $--tk-color-info-light-9;
+}
+.#{$PREFIX}-message--success {
+  color: $--tk-color-success;
+  border-color: $--tk-color-success-light-8;
+  background-color: $--tk-color-success-light-9;
+}
+.#{$PREFIX}-message--warning {
+  color: $--tk-color-warning;
+  border-color: $--tk-color-warning-light-8;
+  background-color: $--tk-color-warning-light-9;
+}
+.#{$PREFIX}-message--error {
+  color: $--tk-color-error;
+  border-color: $--tk-color-error-light-8;
+  background-color: $--tk-color-error-light-9;
+}

package/src/Components/components/base/MessageGroup/MessageGroup.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <Message 
+      v-for="(item, index) in messageList"
+      :isShow="item.isShow"
+      :message="item.message"
+      :type="item.type"
+      :offset="handleOffset(index)"
+      :duration="item.duration"
+      :showClose="item.showClose"
+      :key="index"
+      ></Message>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { watch } from '../../../../adapter-vue';
+import Message from '../Message/Message.vue';
+const props = defineProps(['messageList']);
+const handleOffset = (index: number) => {
+  return 16 + 50 * index; // 16 represents the default offset, and 50 is the distance between the two messages
+}
+watch(
+  () => props.messageList,
+  () => {},
+  { immediate: true },
+)
+</script>
+

package/src/Components/components/base/Overlay/Overlay.ts

@@ -0,0 +1,46 @@
+export const OverlayProps = {
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  showMask: {
+    type: Boolean,
+    default: true,
+  },
+  showBackgroundImage: {
+    type: Boolean,
+    default: true,
+  },
+  blur: {
+    type: Boolean,
+    default: true,
+  },
+  bgColor: {
+    type: String,
+  },
+  bgImage: {
+    type: String,
+  },
+  zIndex: {
+    type: Number,
+    default: 11000,
+  },
+  customClass: {
+    type: String,
+  },
+  customStyle: {
+    type: Object,
+  },
+  customMaskStyle: {
+    type: Object,
+  },
+  fit: {
+    type: String,
+    default: 'cover',
+  },
+  defaultSrc: {
+    type: String,
+  },
+} as const;
+
+export const OverlayEmits = ['click', 'error'];

package/src/Components/components/base/Overlay/Overlay.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    v-if="show"
+    :class="overlayContainerClassName"
+    :style="[overlayStyle]"
+    @click="handleClick"
+  >
+    <div :class="maskContainerClassName">
+      <div
+        v-if="showMask"
+        :class="maskClassName"
+        :style="[maskStyle]"
+      />
+      <TKImage 
+        v-if="showBackgroundImage" 
+        :fit="fit" 
+        :src="bgImage" 
+        width="100%" 
+        height="100%" 
+        :defaultSrc="defaultSrc" 
+        @error="handleError" 
+      />
+    </div>
+    <div :class="slotClassName">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import TKImage from '../TKImage/TKImage.vue';
+import { OverlayProps, OverlayEmits } from './Overlay';
+import { classNames } from '../util';
+import { PREFIX } from '../constants/index';
+
+const props = defineProps(OverlayProps);
+const emit = defineEmits(OverlayEmits);
+
+const overlayContainerClassName = classNames([
+  `${PREFIX}-overlay`,
+  props.customClass,
+]);
+const maskContainerClassName = `${PREFIX}-overlay_mask-container`;
+const maskClassName = computed(() => classNames([
+  `${PREFIX}-overlay_mask`,
+  { [`${PREFIX}-blur`]: props.blur },
+]));
+const slotClassName = `${PREFIX}-overlay_slot`;
+const overlayStyle = computed(() => ({ zIndex: props.zIndex, ...props.customStyle }));
+const maskStyle = computed(() => (
+  {
+    backgroundColor: props.bgColor,
+    ...props.customMaskStyle,
+  }
+));
+function handleClick() {
+  emit('click');
+}
+const handleError = (event) => {
+  emit('error', event);
+}
+</script>
+
+<style lang="scss">
+@import './style/Overlay.scss';
+</style>

package/src/Components/components/base/Overlay/style/Overlay.scss

@@ -0,0 +1,40 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+$--tk-overlay-bg-color: $--tk-overlay-color-lighter;
+
+.#{$PREFIX}-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+
+  .#{$PREFIX}-overlay_mask-container {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    position: absolute;
+  }
+
+  .#{$PREFIX}-overlay_mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $--tk-overlay-bg-color;
+    z-index: 1;
+  }
+
+  .#{$PREFIX}-overlay_slot {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+  }
+}

package/src/Components/components/base/Popover/Popover.ts

@@ -0,0 +1,36 @@
+const Trigger = ['click','hover'] as const;
+const Placement = ['top', 'bottom', 'left', 'right'] as const;
+export const PopoverProps = {
+  trigger: {
+    type: String,
+    values: Trigger,
+    default: 'click',
+  },
+  placement: {
+    type: String,
+    values: Placement,
+    default: 'top',
+  },
+  color: {
+    type: String,
+  },
+  isShowArrow: {
+    type: Boolean,
+    default: true,
+  },
+  arrowSize: {
+    type: Number,
+    default: 5,
+  },
+  arrowDistance: {
+    type: Number,
+    default: 5,
+  },
+  show: {
+    type: Boolean,
+  },
+  autoClose: {
+    type: Number,
+    default: 300,
+  },
+};

package/src/Components/components/base/Popover/Popover.vue

@@ -0,0 +1,40 @@
+<template>
+  <PopoverWeb @hover='handleHover' v-bind="$props" v-if="!IN_WX_MINI_APP">
+    <template #trigger>
+      <slot name="trigger"></slot>
+    </template>
+    <template #content>
+      <slot name="content"></slot>
+    </template>
+  </PopoverWeb>
+  <PopoverWx v-bind="$props" v-if="IN_WX_MINI_APP">
+    <template #trigger>
+      <slot name="trigger"></slot>
+    </template>
+    <template #content>
+      <slot name="content"></slot>
+    </template>
+  </PopoverWx>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import PopoverWeb from './PopoverWeb/PopoverWeb.vue';
+import PopoverWx from './PopoverWx/PopoverWx.vue';
+import { IN_WX_MINI_APP } from '../util';
+import { PopoverProps } from './Popover';
+
+defineProps(PopoverProps);
+const emit = defineEmits(['hover']);
+const handleHover = () => {
+  emit('hover');
+};
+</script>
+

package/src/Components/components/base/Popover/PopoverWeb/PopoverWeb.vue

@@ -0,0 +1,110 @@
+<template>
+  <div :class="popoverClassName" ref="popoverRef">
+    <div
+      ref="contentRef" 
+      v-if="visible && show" 
+      @mouseenter="clearTimer" 
+      @mouseleave="handleMouseLeave" 
+      :class="popoverContentClassName" 
+      :style="[contentStyle]"
+    >
+      <slot name="content"></slot>
+    </div>
+    <div
+      v-if="showArrow"
+      :style="[arrowStyle]"
+      :class="popoverArrowClassName"
+    >
+    </div>
+    <div
+      ref="triggerRef"
+      :class="popoverTriggerClassName"
+      @click="handleClick"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    >
+      <slot name="trigger"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { ref, nextTick, computed } from '../../../../../adapter-vue';
+import { useOnClickOutSide } from '../../hooks/useOnClickOutSide';
+import { calculatePosition } from '../utils/calculatePosition';
+import { PopoverProps } from '../Popover';
+import { PREFIX } from '../../constants/index';
+import { filterObject } from '../../util';
+
+const props = defineProps(PopoverProps);
+const popoverClassName = `${PREFIX}-popover`;
+const popoverContentClassName = `${PREFIX}-popover_content`;
+const popoverArrowClassName = `${PREFIX}-popover_arrow`;
+const popoverTriggerClassName = `${PREFIX}-popover_trigger`;
+const popoverRef = ref();
+const triggerRef = ref();
+const contentRef = ref();
+const visible = ref(false);
+const hidePopoverTimeout = ref(null);
+const showArrow = computed(() => visible.value && props.isShowArrow && props.show);
+const initContentStyle = filterObject({ left: '0px', top: '0px', backgroundColor: props.color });
+const contentStyle = ref(initContentStyle);
+const commonBorder = `${props.arrowSize}px solid transparent`;
+const initArrowStyle = {
+  borderLeft: commonBorder,
+  borderRight: commonBorder,
+  borderTop: commonBorder,
+  borderBottom: commonBorder,
+  top: '0px',
+  left: '0px',
+};
+const arrowStyle = ref(initArrowStyle);
+const emit = defineEmits(['hover']);
+const togglePopover = () => {
+  nextTick(() => {
+    if (!visible.value || !props.show) return;
+    const triggerPosition = triggerRef.value.getBoundingClientRect?.();
+    const contentPosition = contentRef.value.getBoundingClientRect?.();
+    const { finalContentStyle, finalArrowStyle } = calculatePosition(triggerPosition, contentPosition, props, initContentStyle, initArrowStyle);
+    contentStyle.value = { ...initContentStyle, ...finalContentStyle };
+    arrowStyle.value = { ...initArrowStyle, ...finalArrowStyle };
+  });
+};
+const clearTimer = () => {
+  clearTimeout(hidePopoverTimeout.value);
+};
+const handleClick = () => {
+  if (props.trigger !== 'click') return;
+  visible.value = !visible.value;
+  togglePopover();
+};
+const handleMouseEnter = () => {
+  if (props.trigger !== 'hover') return;
+  emit('hover');
+  clearTimer();
+  visible.value = true;
+  togglePopover();
+};
+const handleMouseLeave = () => {
+  if (props.trigger !== 'hover') return;
+  hidePopoverTimeout.value = setTimeout(() => {
+    visible.value = false;
+    togglePopover();
+  }, 1000);
+};
+useOnClickOutSide([popoverRef], () => {
+  visible.value = false;
+});
+</script>
+
+<style lang="scss">
+@import '../style/Popover.scss';
+</style>

package/src/Components/components/base/Popover/PopoverWx/PopoverWx.vue

@@ -0,0 +1,15 @@
+<template></template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+@import '../style/Popover.scss';
+</style>

package/src/Components/components/base/Popover/style/Popover.scss

@@ -0,0 +1,30 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+.#{$PREFIX}-popover {
+  position: relative;
+  .#{$PREFIX}-popover_content {
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 120px;
+    position: absolute;
+    background: #FFFFFF;
+    border-radius: $--tk-border-radius-base;
+    font-size: $--tk-font-size-base;
+    box-shadow: $--tk-box-shadow-light;
+    overflow-wrap: break-word;
+    box-sizing: border-box;
+    text-align: center;
+  }
+  .#{$PREFIX}-popover_arrow {
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+  }
+  .#{$PREFIX}-popover_trigger {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+  }
+}

package/src/Components/components/base/Popover/utils/calculatePosition.ts

@@ -0,0 +1,50 @@
+export const calculatePosition = (triggerPosition, contentPosition, props, initContentStyle, initArrowStyle) => {
+  const arrowSize = props.isShowArrow ? props.arrowSize : 0;
+  // 弹出层与对照物在 Y 轴居中对齐： 参照物宽度的一半 - 弹出层宽度的一半 = 弹出层在 Y 轴上的偏移量
+  const verticallyCenter = `${triggerPosition.width / 2 - contentPosition.width / 2}px`;
+  // 弹出层与对照物在 X 轴居中对齐： 参照物高度的一半 - 弹出层高度的一半 = 弹出层在 Y 轴上的偏移量
+  const horizontallyCenter = `${triggerPosition.height / 2 - contentPosition.height / 2}px`;
+  const arrowBorderStyle = `${arrowSize}px solid ${props.color}`;
+  const finalContentStyle = { ...initContentStyle };
+  const finalArrowStyle = { ...initArrowStyle };
+  switch (props.placement) {
+    case 'top':
+      finalContentStyle.left = verticallyCenter;
+      finalContentStyle.top = `-${contentPosition.height + arrowSize + props.arrowDistance}px`;
+      finalArrowStyle.borderTop = arrowBorderStyle;
+      finalArrowStyle.left = `${triggerPosition.width / 2 - arrowSize / 2}px`;
+      finalArrowStyle.top = `-${arrowSize + props.arrowDistance}px`;
+      break;
+
+    case 'bottom':
+      finalContentStyle.left = verticallyCenter;
+      finalContentStyle.top = `${triggerPosition.height + arrowSize + props.arrowDistance}px`;
+      finalArrowStyle.borderBottom = arrowBorderStyle;
+      finalArrowStyle.left = `${triggerPosition.width / 2 - arrowSize / 2}px`;
+      finalArrowStyle.top = `${triggerPosition.height + props.arrowDistance - arrowSize}px`;
+      break;
+
+    case 'left':
+      finalContentStyle.left = `-${contentPosition.width + arrowSize + props.arrowDistance}px`;
+      finalContentStyle.top = horizontallyCenter;
+      finalArrowStyle.borderLeft = arrowBorderStyle;
+      finalArrowStyle.left = `-${arrowSize * 2 - props.arrowDistance}px`;
+      finalArrowStyle.top = `${triggerPosition.height / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'right':
+      finalContentStyle.left = `${triggerPosition.width + arrowSize + props.arrowDistance}px`;
+      finalContentStyle.top = horizontallyCenter;
+      finalArrowStyle.borderRight = arrowBorderStyle;
+      finalArrowStyle.left = `${triggerPosition.width + arrowSize * 2 - props.arrowDistance}px`;
+      finalArrowStyle.top = `${triggerPosition.height / 2 - arrowSize / 2}px`;
+      break;
+
+    default:
+      break;
+  }
+  return {
+    finalContentStyle,
+    finalArrowStyle,
+  };
+};

package/src/Components/components/base/Portal/Portal.ts

@@ -0,0 +1,14 @@
+export const PortalProps = {
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  to: {
+    type: String,
+    default: 'body',
+  },
+  source: {
+    type: String,
+    default: 'body',
+  },
+} as const;

package/src/Components/components/base/Portal/Portal.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <PortalMini :disabled="disabled" v-if="IN_MINI_APP" ><slot /></PortalMini>
+    <PortalVue2 :disabled="disabled" :to="to" v-else-if="isVue2" :source="source" ><slot /></PortalVue2>
+    <PortalVue3 :disabled="disabled" :to="to" v-else="isVue3" ><slot /></PortalVue3>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import PortalMini from './miniprogram/Portal.vue';
+import PortalVue2 from './vue2/Portal.vue';
+import PortalVue3 from './vue3/Portal.vue';
+import { PortalProps } from './Portal';
+import { checkVueVersion, IN_MINI_APP } from '../util';
+
+defineProps(PortalProps);
+
+const { majorVersion } = checkVueVersion();
+const isVue3 = computed(() => majorVersion === '3');
+const isVue2 = computed(() => majorVersion === '2');
+</script>

package/src/Components/components/base/Portal/miniprogram/Portal.vue

@@ -0,0 +1,20 @@
+<template>
+  <root-portal :enable="!disabled">
+    <slot />
+  </root-portal>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps(['disabled']);
+</script>
+
+<style scoped>
+</style>

package/src/Components/components/base/Portal/vue2/Portal.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'teleport',
+  props: {
+    to: {
+      type: String,
+      required: true
+    },
+    source: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  mounted() {
+    if(this.disabled) return;
+    const toEl = document.querySelector(this.to);
+    if (toEl) {
+      toEl.appendChild(this.$el);
+    }
+  },
+  watch: {
+    disabled: {
+      immediate: true,
+      handler() {
+        if (!this.disabled) {
+          document.querySelector(this.to)?.appendChild(this.$el)
+        } else {
+          document.querySelector(this.source)?.appendChild(this.$el)
+        }
+      },
+    },
+  },
+  destroyed() {
+    const toEl = document.querySelector(this.to);
+    if (toEl) {
+      try {
+        toEl.removeChild(this.$el);
+      } catch (err) {
+        console.debug(err);
+      }
+    }
+  },
+}
+</script>

package/src/Components/components/base/Portal/vue3/Portal.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- #ifndef MP-WEIXIN -->
+  <Teleport :disabled="disabled" :to="to">
+    <slot />
+  </Teleport>
+  <!-- #endif -->
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+defineProps(['disabled', 'to']);
+</script>