@trtc/calls-uikit-vue 4.1.0

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

@@ -0,0 +1,9 @@
+export const IconProps = {
+  src: {
+    type: String
+  },
+  size: {
+    type: Number,
+    default: 20,
+  },
+};

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

@@ -0,0 +1,21 @@
+<template>
+  <TKImage :src="src" :width="width" :height="height"></TKImage>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import { IconProps } from './Icon';
+import TKImage from '../TKImage/TKImage.vue';
+
+const props = defineProps(IconProps);
+const width = computed(() => `${props.size}px`);
+const height = computed(() => `${props.size}px`);
+</script>

package/src/Components/components/base/Layout/Col/Col.ts

@@ -0,0 +1,23 @@
+const ColJustify = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'] as const;
+const ColAlign = ['top', 'middle', 'bottom'] as const;
+
+export const colProps = {
+  span: {
+    type: Number,
+    default: 24,
+  },
+  justify: {
+    type: String,
+    values: ColJustify,
+    default: 'start',
+  },
+  align: {
+    type: String,
+    values: ColAlign,
+    default: 'middle',
+  },
+  offset: {
+    type: Number,
+    default: 0,
+  },
+};

package/src/Components/components/base/Layout/Col/Col.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    :class="classname"
+    :style="{
+      width,
+      marginLeft,
+      paddingLeft,
+      paddingRight,
+    }">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, inject } from '../../../../../adapter-vue';
+import { classNames } from '../../util';
+import { colProps } from './Col';
+import { RowContextKey } from '../constant';
+import { PREFIX } from '../../constants/index';
+
+const props = defineProps(colProps);
+const { gutter } = inject(RowContextKey, { gutter: computed(() => 0)});
+
+const classname = classNames([
+  `${PREFIX}-col`,
+  `${PREFIX}-justify-${props.justify}`,
+  `${PREFIX}-align-${props.align}`,
+]);
+
+const width = computed(() => `${props.span / 24 * 100}%`);
+const marginLeft = computed(() => `${props.offset / 24 * 100}%`);
+const paddingLeft = computed(() => `${gutter.value / 2}px`);
+const paddingRight = paddingLeft;
+</script>
+
+<style lang="scss">
+@import './style/Col.scss';
+</style>

package/src/Components/components/base/Layout/Col/style/Col.scss

@@ -0,0 +1,9 @@
+@import '../../../styles/common.scss';
+@import '../../../styles/var.scss';
+
+.#{$PREFIX}-col {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  box-sizing: border-box;
+}

package/src/Components/components/base/Layout/Row/Row.ts

@@ -0,0 +1,23 @@
+const RowJustify = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'] as const;
+const RowAlign = ['top', 'middle' , 'bottom'] as const;
+
+export const rowProps = {
+  gutter: {
+    type: Number,
+    default: 0,
+  },
+  justify: {
+    type: String,
+    values: RowJustify,
+    default: 'start',
+  },
+  align: {
+    type: String,
+    values: RowAlign,
+    default: 'top',
+  },
+  customStyle: {
+    type: Object,
+    default: () => {},
+  },
+} as const;

package/src/Components/components/base/Layout/Row/Row.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="classname" :style="[customStyle]" >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed } from '../../../../../adapter-vue';
+import { rowProps } from './Row';
+import { classNames } from '../../util';
+import { RowContextKey } from '../constant';
+import { PREFIX } from '../../constants/index';
+
+const props = defineProps(rowProps);
+const gutter = computed(() => props.gutter);
+
+provide(RowContextKey, {
+  gutter,
+});
+
+const classname = classNames([
+  `${PREFIX}-row`,
+  `${PREFIX}-justify-${props.justify}`,
+  `${PREFIX}-align-${props.align}`,
+]);
+</script>
+
+<style lang="scss">
+@import './style/Row.scss';
+</style>

package/src/Components/components/base/Layout/Row/style/Row.scss

@@ -0,0 +1,10 @@
+@import '../../../styles/var.scss';
+@import '../../../styles/common.scss';
+
+.#{$PREFIX}-row {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}

package/src/Components/components/base/Layout/constant.ts

@@ -0,0 +1 @@
+export const RowContextKey = 'RowContextKey';

package/src/Components/components/base/Loading/Circle/Circle.ts

@@ -0,0 +1,13 @@
+export const LoadingCircleProps = {
+  width: {
+    type: String,
+    default: '40px',
+  },
+  height: {
+    type: String,
+    default: '40px',
+  },
+  color: {
+    type: String,
+  },
+} as const;

package/src/Components/components/base/Loading/Circle/Circle.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="circleContainerClassName" :style="[circleContainerStyle]"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from '../../../../../adapter-vue';
+import { LoadingCircleProps } from './Circle';
+import { PREFIX } from '../../constants';
+
+const props = defineProps(LoadingCircleProps);
+const circleContainerStyle = computed(() => {
+  const style = {
+    width: props.width,
+    height: props.height,
+  };
+
+  if (props.color) {
+    style['--tk-loading-primary-color'] = props.color;
+  }
+
+  return style;
+});
+const circleContainerClassName = `${PREFIX}-loading_circle-container`;
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<style lang="scss">
+@import './style/Circle.scss';
+</style>

package/src/Components/components/base/Loading/Circle/style/Circle.scss

@@ -0,0 +1,26 @@
+@import '../../../styles/var.scss';
+@import '../../../styles/common.scss';
+
+.#{$PREFIX}-loading_circle-container {
+  height: 100%;
+  border: $--tk-loading-border-width $--tk-loading-border-style;
+  border-radius: 50%;
+  border-top-color: $--tk-loading-other-color;
+  border-right-color: $--tk-loading-other-color;
+  border-bottom-color: $--tk-loading-primary-color;
+  border-left-color: $--tk-loading-primary-color;
+  background: 0 0;
+  vertical-align: middle;
+  box-sizing: border-box;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/Components/components/base/Loading/Dot/Dot.ts

@@ -0,0 +1,13 @@
+export const LoadingDotProps = {
+  width: {
+    type: String,
+    default: '40px',
+  },
+  height: {
+    type: String,
+    default: '40px',
+  },
+  color: {
+    type: String,
+  },
+} as const;

package/src/Components/components/base/Loading/Dot/Dot.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="dotContainerClassName" :style="[dotContainerStyle]">
+    <div :class="dotClassName" :style="[dotStyle]" />
+    <div :class="dotClassName" :style="[dotStyle]" />
+    <div :class="dotClassName" :style="[dotStyle]" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from '../../../../../adapter-vue';
+import { LoadingDotProps } from './Dot';
+import { PREFIX } from '../../constants';
+
+const props = defineProps(LoadingDotProps);
+
+const dotContainerClassName = `${PREFIX}-loading_dot-container`;
+const dotClassName = `${PREFIX}-loading_dot`
+
+const dotContainerStyle = computed(() => ({
+  width: props.width,
+  height: props.height,
+}));
+
+const dotStyle = computed(() => {
+  const style = {};
+  if (props.color) {
+    style.backgroundColor = props.color;
+  }
+
+  return style;
+});
+</script>
+
+<style lang="scss">
+@import './style/Dot.scss';
+</style>

package/src/Components/components/base/Loading/Dot/style/Dot.scss

@@ -0,0 +1,61 @@
+@import '../../../styles/var.scss';
+@import '../../../styles/common.scss';
+
+.#{$PREFIX}-loading_dot-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+
+  & .#{$PREFIX}-loading_dot:nth-child(1) {
+    opacity: 0;
+    animation-duration: 0.8s;
+    animation-delay: 0s;
+    animation-play-state: running;
+  }
+
+  & .#{$PREFIX}-loading_dot:nth-child(2) {
+    opacity: 0.083;
+    animation-duration: 0.8s;
+    animation-delay: 0.26666666666666666s;
+    animation-play-state: running;
+  }
+
+  & .#{$PREFIX}-loading_dot:nth-child(3) {
+    opacity: 0.1667;
+    animation-duration: 0.8s;
+    animation-delay: 0.5333333333333333s;
+    animation-play-state: running;
+  }
+
+  .#{$PREFIX}-loading_dot {
+    width: 20%;
+    height: 20%;
+    border-radius: 50%;
+    background-color: $--tk-loading-primary-color;
+    animation-duration: 1.8s;
+    animation-name: dotting;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+  }
+}
+
+@keyframes dotting {
+  0% {
+    opacity: 0.15;
+  }
+
+  1% {
+    opacity: 0.8;
+  }
+  33% {
+    opacity: 0.8;
+  }
+  34% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}

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

@@ -0,0 +1,29 @@
+const LoadingMode = ['circle', 'dot'] as const;
+const LoadingLayout = ['row', 'column'] as const;
+
+export const LoadingProps = {
+  mode: {
+    type: String,
+    values: LoadingMode,
+    default: 'circle',
+  },
+  loadingWidth: {
+    type: String,
+    default: '40px',
+  },
+  loadingHeight: {
+    type: String,
+    default: '40px',
+  },
+  color: {
+    type: String,
+  },
+  text: {
+    type: String,
+  },
+  layout: {
+    type: String,
+    values: LoadingLayout,
+    default: 'column',
+  },
+} as const;

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

@@ -0,0 +1,36 @@
+<template>
+  <div :class="loadingContainerClassName" :style="[loadingContainerStyle]">
+    <LoadingDot v-if="mode === 'dot'" :width="loadingWidth" :height="loadingHeight" :color="color" />
+    <LoadingCircle v-else :width="loadingWidth" :height="loadingHeight" :color="color" />
+    <div v-if="text" :class="loadingTextClassName">{{ text }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import LoadingDot from './Dot/Dot.vue';
+import LoadingCircle from './Circle/Circle.vue';
+import { LoadingProps } from './Loading';
+import { PREFIX } from '../constants/index';
+
+const props = defineProps(LoadingProps);
+
+const loadingContainerClassName = `${PREFIX}-loading ${PREFIX}-loading--${props.mode}`;
+const loadingTextClassName = `${PREFIX}-loading_text`;
+
+const loadingContainerStyle = computed(() => ({
+  flexDirection: props.layout,
+}));
+</script>
+
+<style lang="scss">
+@import './style/Loading.scss';
+</style>

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

@@ -0,0 +1,18 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+$--tk-loading-primary-color: $--tk-color-primary;
+$--tk-loading-other-color: #fff0;
+$--tk-loading-border-width: 2px;
+$--tk-loading-border-style: $--tk-border-style;
+$--tk-loading-layout: column;
+
+.#{$PREFIX}-loading {
+  display: flex;
+  align-items: center;
+  flex-direction: $--tk-loading-layout;
+
+  .#{$PREFIX}-loading_text {
+    margin: 10px;
+  }
+}

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

@@ -0,0 +1,117 @@
+import { ref, watch } from '../../../../adapter-vue';
+import { NAME } from '../constants';
+const MessageType = [NAME.SUCCESS, NAME.INFO, NAME.WARNING, NAME.ERROR] as const;
+
+export const MessageProps = {
+  isShow: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    values: MessageType,
+    default: NAME.INFO,
+  },
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  offset: {
+    type: Number,
+    default: 16,
+  },
+  showClose: {
+    type: Boolean,
+    default: false,
+  },
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  customClass: {
+    type: String,
+  },
+  customStyle: {
+    type: Object
+  },
+} as const;
+export const MessageEmits = {
+  onClose: null,
+};
+
+export function useMessage(props, emits) {
+  const messageContent = ref(props?.message || MessageProps.message.default);
+  const messageDuration = ref(props?.duration || MessageProps.duration.default);
+  const messageType = ref(props?.type || MessageProps.type.default);
+  const messageOffset = ref(props?.offset || MessageProps.offset.default);
+  const isShowCloseIcon = ref(props?.showClose || MessageProps.showClose.default);
+  const visible = ref<boolean>(false);
+  let timerId: any = -1;
+
+  const show = (messageObj?: any) => {
+    if (timerId > -1) {
+      clearTimeout(timerId);
+      timerId = -1;
+    }
+    visible.value = true;
+    updateData(messageObj || {});
+    if (messageDuration.value) {
+      timerId = setTimeout(() => {
+        close();
+      }, messageDuration.value);
+    }
+  };
+  const close = () => {
+    visible.value = false;
+    if (timerId > -1) {
+      clearTimeout(timerId);
+      timerId = -1;
+    }
+  };
+  const updateData = (messageObj?: any) => {
+    const { 
+      message = messageContent.value,
+      type = messageType.value,
+      offset = messageOffset.value,
+      duration = messageDuration.value,
+      showClose = isShowCloseIcon.value,
+    } = messageObj;
+    
+    // duration 值为 0 时，Message 会一直展示
+    messageDuration.value = props?.duration === 0 ? props?.duration : duration;
+    messageContent.value = message;
+    messageType.value = type;
+    messageOffset.value = offset;
+    isShowCloseIcon.value = showClose;
+  };
+
+  watch(
+    () => props?.isShow, 
+    (newValue) => {
+      if (newValue) {
+        show();
+      }
+    },
+    { immediate: true },
+  );
+  watch(visible, (newValue) => {
+    if (!newValue) {
+      emits('onClose');
+    }
+  });
+
+  return { 
+    messageContent, 
+    messageDuration, 
+    messageType, 
+    messageOffset, 
+    isShowCloseIcon,
+    visible,
+    show,
+    close,
+  };
+}

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

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="visible" :class="messageClassName" :style="[messageStyle]">
+    <div :class="typeIconClassName" v-show="showIcon">
+      <Icon :src="IconSrcMap[messageType]"></Icon>
+    </div>
+    <span>{{ messageContent }}</span>
+    <div v-show="isShowCloseIcon" :class="closeIconClassName" @click="close">
+      <Icon :src="CloseSrc"></Icon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import Icon from '../Icon/Icon.vue';
+import { classNames } from '../util';
+import { PREFIX } from '../constants/index';
+import { MessageProps, MessageEmits, useMessage } from './Message';
+import ErrorSrc from '../assets/message/error.svg';
+import SuccessSrc from '../assets/message/success.svg';
+import WaringSrc from '../assets/message/warning.svg';
+import InfoSrc from '../assets/message/info.svg';
+import CloseSrc from '../assets/message/close.svg';
+
+const props = defineProps(MessageProps);
+const emits = defineEmits(MessageEmits);
+const { messageContent, messageType, messageOffset, isShowCloseIcon, visible, show, close } = useMessage(props, emits);
+const messageClassName = computed(() => classNames([
+  `${PREFIX}-message`,
+  `${PREFIX}-message--${messageType.value}`,
+  props.customClass,
+]));
+const typeIconClassName = computed(() => classNames([`${PREFIX}-message_icon`]));
+const closeIconClassName = computed(() => classNames([`${PREFIX}-message_close`]));
+const top = computed(() => `${messageOffset.value}px`);
+const messageStyle = computed(() => ({top: top.value, ...props.customStyle}));
+
+const IconSrcMap = {
+  info: InfoSrc,
+  waring: WaringSrc,
+  success: SuccessSrc,
+  error: ErrorSrc,
+};
+
+defineExpose({
+  show,
+  close,
+});
+</script>
+
+<style lang="scss">
+@import './style/Message.scss';
+</style>