tuikit-atomicx-vue3 0.1.0

package/src/baseComp/Input/InputWX.vue

@@ -0,0 +1,252 @@
+<template>
+  <div ref="tuiInputRef" :class="['tui-input', !border && 'no-border']">
+    <input
+      @click.stop
+      ref="inputRef"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :maxlength="props.maxlength"
+      :type="props.type"
+      :readonly="readonly"
+      :style="inputStyle"
+      @focus="focus"
+      @blur="blur"
+      @keyup.enter="done"
+      @input="handleInput"
+      always-embed="true"
+      adjust-position="true"
+      @confirm="done"
+      :confirm-type="enterkeyhint"
+    />
+    <div
+      v-if="hasSuffixIcon"
+      class="suffix-icon"
+      @mousedown.prevent
+      @click="handleSuffixIconClick"
+    >
+      <slot name="suffixIcon"></slot>
+    </div>
+    <div v-if="showResults" class="results">
+      <div
+        v-for="(item, index) in searchResult"
+        :key="index"
+        class="results-item"
+        @mousedown.prevent
+        @click="handleResultItemClick(item)"
+      >
+        {{ item.label || item.value }}
+        <slot name="searchResultItem" :data="item"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  useSlots,
+  onMounted,
+  onUnmounted,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
+
+const slots = useSlots();
+
+interface Props {
+  modelValue: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: string;
+  readonly?: boolean;
+  enterkeyhint?: string;
+  search?: (data: string) => any;
+  select?: (data: any) => any;
+  maxlength?: string;
+  border?: boolean;
+  align?:
+    | 'center'
+    | 'end'
+    | 'justify'
+    | 'left'
+    | 'match-parent'
+    | 'right'
+    | 'start';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '',
+  disabled: false,
+  type: 'text',
+  enterkeyhint: '',
+  maxlength: '80',
+  border: true,
+  align: 'left',
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'input',
+  'focus',
+  'blur',
+  'done',
+]);
+
+const tuiInputRef = ref<HTMLInputElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const show = ref(false);
+
+const blur = (event: any) => {
+  const { value } = event.target;
+  show.value = false;
+  const trimmedValue = value.trimStart().trimEnd();
+  if (value !== trimmedValue) {
+    event.target.value = trimmedValue;
+  }
+  emit('blur', tuiInputRef.value);
+};
+
+const done = () => {
+  emit('done', tuiInputRef.value);
+};
+
+const focus = () => {
+  show.value = true;
+  emit('focus', tuiInputRef.value);
+};
+const handleSuffixIconClick = () => {
+  inputRef.value?.blur();
+};
+
+const closeOnOutsideClick = (event: any) => {
+  if (!tuiInputRef.value?.contains(event.target)) {
+    show.value = false;
+  }
+};
+
+function handleResultItemClick(item: any) {
+  inputRef.value?.blur();
+  if (props.select) {
+    props.select(item);
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', closeOnOutsideClick);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('click', closeOnOutsideClick);
+});
+
+const searchResult = ref<any>([]);
+function handleInput(event: any) {
+  const { value } = event.target;
+  const trimmedValue = value.trimStart();
+
+  if (value !== trimmedValue) {
+    event.target.value = trimmedValue;
+  }
+
+  emit('update:modelValue', trimmedValue);
+  emit('input', trimmedValue);
+
+  if (props.search) {
+    searchResult.value = props.search(event.target.value);
+  }
+}
+const showResults = computed(
+  () => searchResult.value && searchResult.value?.length !== 0 && show.value
+);
+
+const hasSuffixIcon = computed(() => !!slots.suffixIcon);
+
+const inputStyle = computed(() => {
+  let paddingRight = '16px';
+  if (hasSuffixIcon.value) {
+    paddingRight = '40px';
+  } else if (props.align === 'right') {
+    paddingRight = '0';
+  }
+
+  return {
+    paddingRight,
+    textAlign: props.align,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.tui-input {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px 0 10px 16px;
+  font-size: 14px;
+  border-radius: 8px;
+  background-color: var(--bg-color-input);
+  color: var(--text-color-primary);
+  border: 1px solid var(--stroke-color-module);
+}
+
+input:focus {
+  outline: 0;
+  border-color: var(--text-color-link);
+}
+
+input:disabled {
+  background-color: var(--button-color-primary-disable);
+}
+
+.tui-input.no-border input {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+
+.suffix-icon {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+}
+
+.results {
+  position: fixed;
+  z-index: 2;
+  max-width: 12rem;
+  max-height: 254px;
+  padding: 7px 0;
+  overflow: auto;
+  border-radius: 4px;
+  background-color: var(--bg-color-input);
+  border: 1px solid var(--stroke-color-module);
+
+  &-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 15px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  &-item:hover {
+    background-color: var(--uikit-color-gray-7);
+    color: var(--text-color-link);
+  }
+}
+</style>

package/src/baseComp/Input/index.ts

@@ -0,0 +1,6 @@
+import InputPC from './InputPC.vue';
+import InputH5 from './InputH5.vue';
+
+import { isMobile } from '../../utils/environment';
+const Input = isMobile ? InputH5 : InputPC;
+export default Input;

package/src/baseComp/MessageBox/index.ts

@@ -0,0 +1,47 @@
+import { createVNode, render } from 'vue';
+
+import TUIMessageBox, { Action } from './index.vue';
+
+export type MessageProps = {
+  title: string;
+  message: string;
+  callback?: (action: Action) => void;
+  duration?: number;
+  cancelButtonText?: string;
+  confirmButtonText?: string;
+};
+const MessageBox = ({
+  title,
+  message,
+  callback,
+  duration,
+  cancelButtonText,
+  confirmButtonText,
+}: MessageProps) => {
+  const container = document.createElement('div');
+  const fullscreenElement =
+    document.fullscreenElement ||
+    document.getElementById('roomContainer') ||
+    document.getElementById('pre-conference-container') ||
+    document.querySelector('body');
+  if (!fullscreenElement) return;
+  fullscreenElement.appendChild(container);
+
+  const onRemove = () => {
+    render(null, container);
+    fullscreenElement.removeChild(container);
+  };
+
+  const vnode = createVNode(TUIMessageBox, {
+    title,
+    message,
+    callback,
+    duration,
+    cancelButtonText,
+    confirmButtonText,
+    remove: onRemove,
+  });
+  render(vnode, container);
+};
+
+export default MessageBox;

package/src/baseComp/MessageBox/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <transition name="tui-message-box-fade">
+    <div
+      v-show="visible"
+      :style="overlayContentStyle"
+      :class="['overlay']"
+      class="message-box-overlay"
+      @click="handleOverlayClick"
+    >
+      <div :class="isMobile ? 'tui-message-box-h5' : 'tui-message-box'">
+        <div class="tui-message-box-header">
+          <div class="tui-message-box-title">{{ title }}</div>
+          <div class="close">
+            <IconClose @click="handleClose" />
+          </div>
+        </div>
+        <div class="tui-message-box-body">
+          <div>{{ message }}</div>
+        </div>
+        <div v-if="isMobile" class="tui-message-box-footer">
+          <div
+            v-if="cancelButtonText"
+            class="button-container"
+            @click="handleClose('cancel')"
+          >
+            <TUIButton type="primary" style="min-width: 88px">{{
+              cancelButtonText
+            }}</TUIButton>
+          </div>
+          <div class="button-container" @click="handleClose('confirm')">
+            <TUIButton type="primary" style="min-width: 88px">{{
+              confirmButtonText
+            }}</TUIButton>
+          </div>
+        </div>
+        <div v-else class="tui-message-box-footer">
+          <TUIButton
+            @click="handleClose('confirm')"
+            type="primary"
+            style="min-width: 88px"
+            >{{ confirmButtonText }}
+          </TUIButton>
+          <TUIButton
+            v-if="cancelButtonText"
+            @click="handleClose('cancel')"
+            style="min-width: 88px"
+          >
+            {{ cancelButtonText }}
+          </TUIButton>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  watch,
+  onMounted,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
+import { TUIButton, IconClose } from '@tencentcloud/uikit-base-component-vue3';
+import { isMobile } from '../../utils/environment';
+import useZIndex from '../useZIndex';
+
+const visible = ref(false);
+const overlayContentStyle = ref({});
+const { nextZIndex } = useZIndex();
+let timer: number | null = null;
+
+type BeforeCloseFn = (action?: Action) => void;
+
+interface Props {
+  title: string;
+  message: string;
+  callback?: BeforeCloseFn | null;
+  duration: number;
+  cancelButtonText: string;
+  confirmButtonText: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  remove: Function;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  message: '',
+  callback: null,
+  duration: Infinity,
+  cancelButtonText: '',
+  confirmButtonText: '',
+  remove: () => {},
+});
+
+watch(visible, val => {
+  if (val) {
+    overlayContentStyle.value = { zIndex: nextZIndex() };
+  }
+});
+
+const emit = defineEmits(['close']);
+
+export type Action = 'cancel' | 'confirm' | 'close';
+function handleClose(action: Action) {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  props.callback && props.callback(action);
+  doClose();
+}
+
+function doClose() {
+  visible.value = false;
+  props.remove();
+  emit('close');
+}
+
+function handleOverlayClick(event: any) {
+  if (event.target !== event.currentTarget) {
+    return;
+  }
+  handleClose('close');
+}
+
+function onOpen() {
+  visible.value = true;
+}
+
+function duration() {
+  if (props.duration === Infinity) return;
+  timer = setTimeout(() => {
+    handleClose('close');
+  }, props.duration);
+}
+
+onMounted(async () => {
+  onOpen();
+  duration();
+});
+</script>
+
+<style lang="scss" scoped>
+.message-box-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  &.overlay {
+    background-color: var(--uikit-color-black-3);
+  }
+}
+
+.tui-message-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  width: 480px;
+  background-color: var(--bg-color-dialog);
+  border-radius: 20px;
+  transform: translate(-50%, -50%);
+
+  .tui-message-box-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 64px;
+    padding: 0 24px;
+    color: var(--text-color-primary);
+    border-bottom: 1px solid var(--stroke-color-primary);
+
+    .tui-dialog-header-title {
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      color: var(--text-color-primary);
+    }
+
+    .close {
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      color: var(--text-color-primary);
+      cursor: pointer;
+      transform: translateY(-50%);
+    }
+  }
+
+  .tui-message-box-body {
+    flex: 1;
+    padding: 20px 24px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--text-color-primary);
+  }
+
+  .tui-message-box-footer {
+    display: flex;
+    justify-content: center;
+    padding: 20px 30px;
+
+    & > :not(:first-child) {
+      margin-left: 16px;
+    }
+  }
+}
+
+.tui-message-box-h5 {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  min-width: 80vw;
+  max-width: 80vw;
+  font-style: normal;
+  color: var(--text-color-primary);
+  background-color: var(--bg-color-dialog);
+  border-radius: 8px;
+  transform: translate(-50%, -50%);
+
+  .tui-message-box-header {
+    box-sizing: border-box;
+    display: inline-block;
+    padding: 24px 24px 12px;
+    padding-top: 14px;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+
+    .close {
+      display: none;
+    }
+  }
+
+  .tui-message-box-body {
+    padding: 0 24px 20px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-secondary);
+    text-align: center;
+  }
+
+  .tui-message-box-footer {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    border-top: 1px solid var(--stroke-color-module);
+
+    .button-container {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      padding: 11px 0;
+
+      &:not(:first-child) {
+        border-left: 1px solid var(--stroke-color-module);
+      }
+    }
+
+    .button {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .confirm-button {
+      color: var(--text-color-link);
+      text-align: center;
+      background-color: var(--bg-color-dialog);
+      border: none;
+    }
+  }
+}
+</style>