tuikit-atomicx-vue3 0.1.0

package/src/baseComp/Modal/Modal.vue

@@ -0,0 +1,136 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+import {
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+} from 'reka-ui';
+
+interface Props {
+  /** Whether to show the modal */
+  open: boolean;
+  /** Whether to close on overlay click */
+  closeOnOverlay?: boolean;
+  /** Class name passed to DialogContent */
+  contentClass?: string;
+}
+
+interface Emits {
+  (e: 'onClose', reason?: 'overlay' | 'escape'): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  open: false,
+  closeOnOverlay: true,
+  contentClass: '',
+});
+
+const emit = defineEmits<Emits>();
+
+const handleClose = (reason?: 'overlay' | 'escape') => {
+  emit('onClose', reason);
+};
+
+const handleUpdateOpen = (value: boolean) => {
+  if (!value) {
+    handleClose('escape');
+  }
+};
+
+</script>
+
+<template>
+  <DialogRoot
+    :open="open"
+    @update:open="handleUpdateOpen"
+  >
+    <DialogPortal to="body">
+      <DialogOverlay
+        class="modal-overlay"
+        @click="closeOnOverlay && handleClose('overlay')"
+      />
+      <DialogContent :class="['modal-content', contentClass]">
+        <slot />
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<style lang="scss" scoped>
+$animationDuration: 200ms;
+
+.modal-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+
+  &[data-state="open"] {
+    animation: overlayIn $animationDuration ease-out;
+  }
+
+  &[data-state="closed"] {
+    animation: overlayOut $animationDuration ease-out;
+  }
+}
+
+.modal-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--bg-color-operate);
+  border-radius: 8px;
+  box-shadow:
+    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+
+  &[data-state="open"] {
+    animation: contentIn $animationDuration ease-out;
+  }
+
+  &[data-state="closed"] {
+    animation: contentOut $animationDuration ease-out;
+  }
+}
+
+@keyframes overlayIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes overlayOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes contentIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes contentOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+}
+</style>

package/src/baseComp/Modal/index.ts

@@ -0,0 +1,4 @@
+import Modal from './Modal.vue';
+
+export { Modal };
+export default Modal;

package/src/baseComp/ObserverView/ObserverView.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    :id="id"
+    ref="viewRef"
+    :class="cs('observer-view', props.class)"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import cs from 'classnames';
+
+defineOptions({
+  name: 'ObserverView',
+  inheritAttrs: false,
+});
+
+interface IObserverViewProps {
+  id?: string;
+  class?: string;
+  style?: Record<string, any>;
+
+  // Basic IntersectionObserver configuration
+  threshold?: number | number[];
+  rootMargin?: string;
+  root?: string | null; // Root element selector
+
+  // Advanced configuration
+  observerOptions?: IntersectionObserverInit;
+
+  // Other control options
+  disabled?: boolean;
+  delay?: number;
+}
+
+const props = withDefaults(defineProps<IObserverViewProps>(), {
+  id: undefined,
+  class: undefined,
+  style: undefined,
+  threshold: 0,
+  rootMargin: '0px',
+  root: null,
+  observerOptions: undefined,
+  disabled: false,
+  delay: 0,
+});
+
+const emit = defineEmits<{
+  onShow: [];
+  onShowOnce: [];
+  onHide: [];
+}>();
+
+const viewRef = ref<HTMLElement | null>(null);
+const hasShownOnce = ref(false);
+let observer: IntersectionObserver | null = null;
+let timeoutId: number | null = null;
+
+// Create and start observer
+const setupObserver = () => {
+  if (!viewRef.value || props.disabled) {
+    return;
+  }
+
+  // Clean up existing observer
+  cleanupObserver();
+
+  // Build observer options
+  const options: IntersectionObserverInit = props.observerOptions || {
+    threshold: props.threshold,
+    rootMargin: props.rootMargin,
+    root: props.root ? document.querySelector(props.root) : null,
+  };
+
+  observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        // Element enters viewport
+        const triggerShow = () => {
+          // Trigger show event
+          emit('onShow');
+
+          // If element has not been shown before, trigger showOnce event
+          if (!hasShownOnce.value) {
+            emit('onShowOnce');
+            hasShownOnce.value = true;
+          }
+        };
+
+        // Handle delay
+        if (props.delay && props.delay > 0) {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+          timeoutId = window.setTimeout(triggerShow, props.delay);
+        } else {
+          triggerShow();
+        }
+      } else {
+        // Element leaves viewport, trigger hide event
+        emit('onHide');
+      }
+    });
+  }, options);
+
+  observer.observe(viewRef.value);
+};
+
+// Clean up observer
+function cleanupObserver() {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+}
+
+// Watch for configuration changes, reset observer
+watch(
+  [
+    () => props.disabled,
+    () => props.threshold,
+    () => props.rootMargin,
+    () => props.root,
+    () => props.observerOptions,
+  ],
+  () => {
+    if (viewRef.value) {
+      setupObserver();
+    }
+  },
+);
+
+onMounted(() => {
+  setupObserver();
+});
+
+onUnmounted(() => {
+  cleanupObserver();
+});
+</script>
+
+<style lang="scss" scoped>
+.observer-view {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+  border: 0 solid black;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+</style>

package/src/baseComp/ObserverView/index.ts

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

package/src/baseComp/Option/OptionH5.vue

@@ -0,0 +1,66 @@
+<template>
+  <span
+    :class="['custom-option', isActive && 'active']"
+    :value="props.value"
+    :disabled="disabled"
+    @click="handleOptionClick"
+    ref="optionRef"
+    v-bind="$attrs"
+  >
+    {{ props.label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, inject, onMounted, computed, watch } from 'vue';
+const optionRef = ref();
+const TSelect = inject('TSelect');
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  value: {
+    required: true,
+    type: [String, Number],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const isActive = computed(() => {
+  return TSelect && TSelect.label.value === props.label;
+});
+
+watch(
+  () => props.label,
+  newValue => {
+    TSelect.addOption({
+      label: props.label,
+      value: props.value,
+      ref: optionRef,
+    });
+  }
+);
+
+onMounted(() => {
+  TSelect.addOption({ label: props.label, value: props.value, ref: optionRef });
+});
+const handleOptionClick = () => {
+  if (props.disabled) return;
+  TSelect.handleOptionClick(props.value);
+};
+</script>
+<style scoped lang="scss">
+.custom-option {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+}
+
+.custom-option.active {
+  font-weight: 700;
+  color: var(--text-color-link);
+}
+</style>

package/src/baseComp/Option/OptionPC.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    ref="optionRef"
+    :class="['option-container', { active: isSelected }]"
+    @click="handleChooseOption"
+  >
+    <template v-if="$slots.customOptionContent">
+      <slot name="customOptionContent"></slot>
+    </template>
+    <template v-else>
+      <span :style="props.customOptionContentStyle" class="option-content">{{
+        label || value
+      }}</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  inject,
+  watch,
+  computed,
+  onBeforeUnmount,
+  StyleValue,
+  onMounted,
+  defineProps,
+} from 'vue';
+
+interface OptionData {
+  label: string;
+  value: string | number | boolean | object;
+  customOptionContentStyle?: StyleValue;
+}
+
+interface SelectData {
+  selectedValue: string | number | boolean | object;
+  optionObj: Record<any, any>;
+  optionDataList: OptionData[];
+  onOptionCreated: (optionData: OptionData) => void;
+  onOptionDestroyed: (value: string | number | boolean | object) => void;
+  onOptionSelected: (optionData: OptionData) => void;
+}
+
+const optionRef = ref(null);
+const props = defineProps<OptionData>();
+
+const select: SelectData | undefined = inject('select');
+
+const isSelected = computed(
+  () => select && select.selectedValue === props.value
+);
+
+const optionData = computed(() => ({
+  label: props.label,
+  value: props.value,
+  ref: optionRef,
+}));
+
+onMounted(() => {
+  select?.onOptionCreated(optionData.value);
+});
+
+onBeforeUnmount(() => {
+  select?.onOptionDestroyed(props.value);
+});
+
+watch(
+  () => [props.value, props.label],
+  (val, oldVal) => {
+    if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
+      select?.onOptionDestroyed(oldVal);
+      select?.onOptionCreated(optionData.value);
+    }
+  }
+);
+
+function handleChooseOption() {
+  select?.onOptionSelected(optionData.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.option-container {
+  padding: 6px 15px;
+  overflow: hidden;
+  color: var(--text-color-primary);
+  white-space: nowrap;
+  cursor: pointer;
+
+  &.active {
+    color: var(--text-color-link);
+  }
+
+  &:hover {
+    background-color: var(--dropdown-color-hover);
+  }
+
+  .option-content {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+}
+</style>

package/src/baseComp/Option/OptionWX.vue

@@ -0,0 +1,66 @@
+<template>
+  <span
+    :class="['custom-option', isActive && 'active']"
+    :value="props.value"
+    :disabled="disabled"
+    @click="handleOptionClick"
+    ref="optionRef"
+    :key="props.value"
+  >
+    {{ props.label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { watch, ref, defineProps, inject, onMounted, computed } from 'vue';
+const optionRef = ref();
+const TSelect = inject('TSelect');
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  value: {
+    required: true,
+    type: [String, Number],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const isActive = computed(() => {
+  return TSelect && TSelect.label.value === props.label;
+});
+
+watch(
+  () => props.label,
+  newValue => {
+    TSelect.addOption({
+      label: props.label,
+      value: props.value,
+      ref: optionRef,
+    });
+  }
+);
+
+onMounted(() => {
+  TSelect.addOption({ label: props.label, value: props.value, ref: optionRef });
+});
+const handleOptionClick = () => {
+  if (props.disabled) return;
+  TSelect.handleOptionClick(props.value);
+};
+</script>
+<style scoped lang="scss">
+.custom-option {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+}
+
+.custom-option.active {
+  font-weight: 700;
+  color: var(--text-color-link);
+}
+</style>

package/src/baseComp/Option/index.ts

@@ -0,0 +1,5 @@
+import OptionPC from './OptionPC.vue';
+// import OptionH5 from './OptionH5.vue';
+// import { isMobile } from '../../../../utils/environment';
+// const OPtion = isMobile ? OptionH5 : OptionPC;
+export default OptionPC;

package/src/baseComp/Select/SelectH5.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div
+      class="custom-select"
+      @change="onChange($event.target.value)"
+      @click="toggleDrawer"
+      v-bind="$attrs"
+    >
+      <span class="label"> {{ selectedLabel || props.value }}</span>
+      <IconArrowStrokeSelectDown size="12" />
+      size=12
+    </div>
+
+    <ActionSheep :visible="drawerShow" @input="drawerShow = $event">
+      <div class="custom-option-container">
+        <slot></slot>
+      </div>
+    </ActionSheep>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps, provide, watch, nextTick } from 'vue';
+import { IconArrowStrokeSelectDown } from '@tencentcloud/uikit-base-component-vue3';
+import ActionSheep from '../ActionSheep.vue';
+
+const props = defineProps({
+  value: {
+    type: [String, Number, Date],
+  },
+});
+const emit = defineEmits(['change', 'input']);
+
+const selectedLabel = ref('');
+const selectedRef = ref();
+const options = ref([]);
+const drawerShow = ref(false);
+const toggleDrawer = async () => {
+  drawerShow.value = !drawerShow.value;
+  await nextTick();
+  if (drawerShow.value) {
+    await nextTick();
+    await selectedRef.value.scrollIntoView({ block: 'center' });
+  }
+};
+const onChange = value => {
+  emit('change', value);
+  emit('input', value);
+};
+
+const updateSelectedLabel = newValue => {
+  const index = options.value.findIndex(option => option.value === newValue);
+  const matchedOption = options.value[index];
+  if (matchedOption && matchedOption.label !== selectedLabel.value) {
+    selectedLabel.value = matchedOption.label;
+    selectedRef.value = matchedOption.ref;
+  }
+};
+
+const addOption = option => {
+  const index = options.value.findIndex(item => item.value === option.value);
+  if (index >= 0) {
+    options.value[index] = option;
+    updateSelectedLabel(props.value);
+    return;
+  }
+  options.value.push(option);
+  updateSelectedLabel(props.value);
+};
+
+const handleOptionClick = value => {
+  updateSelectedLabel(value);
+  onChange(value);
+  toggleDrawer();
+};
+
+provide('TSelect', {
+  value: props.value,
+  label: selectedLabel,
+  addOption,
+  handleOptionClick,
+});
+
+watch(
+  () => props.value,
+  (newValue, oldValue) => {
+    if (newValue === oldValue) return;
+    updateSelectedLabel(newValue);
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped lang="scss">
+.custom-select {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+
+  .label {
+    display: inline-block;
+    max-width: 80%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    white-space: nowrap;
+  }
+}
+
+.custom-option-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: 38vh;
+  overflow: auto;
+}
+</style>