tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/src/components/Search/SearchAdvanced/MessageAdvanced/MessageAdvanced.vue

@@ -0,0 +1,263 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div :class="$style.SearchMessageAdvanced">
+    <div
+      ref="datePickerRef"
+      :class="$style['SearchMessageAdvanced__filter-row']"
+    >
+      <div
+        :class="$style['SearchMessageAdvanced__filter-select']"
+        @click="toggleDatePicker"
+      >
+        <span :class="$style['SearchMessageAdvanced__filter-label']"> {{ t('Search.input.selectTime') }}： </span>
+        <span :class="$style['SearchMessageAdvanced__filter-value']">
+          {{ getDateRangeText() }}
+        </span>
+        <span
+          :class="[
+            $style['SearchMessageAdvanced__arrow'],
+            { [$style['SearchMessageAdvanced__arrow--up']]: isDatePickerOpen },
+          ]"
+        >
+          ▼
+        </span>
+      </div>
+      <div :class="$style['SearchMessageAdvanced__quick-options']">
+        <TUIButton
+          v-for="option in quickOptions"
+          :key="option.value"
+          type="text"
+          :class="[
+            $style['SearchMessageAdvanced__quick-option'],
+            { [$style['SearchMessageAdvanced__quick-option--active']]: activeQuickOption === option.value },
+          ]"
+          @click="handleQuickOptionClick(option.value)"
+        >
+          {{ option.label }}
+        </TUIButton>
+      </div>
+      <div
+        v-if="isDatePickerOpen"
+        :class="$style['SearchMessageAdvanced__date-picker-dropdown']"
+      >
+        <DateRangePicker
+          :value="dateRange"
+          @change="onDateRangeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, onUnmounted, defineProps } from 'vue';
+import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { SearchType } from '../../../../types/engine';
+import { DateRangePicker } from '../DateRangePicker';
+
+interface IMessageAdvancedProps {
+  advancedParams?: Map<SearchType, any>;
+  onAdvancedParamsChange?: (params: Map<SearchType, any>) => void;
+}
+
+const props = defineProps<IMessageAdvancedProps>();
+
+const { t } = useUIKit();
+
+const isDatePickerOpen = ref(false);
+const dateRange = ref<[Date | null, Date | null]>([null, null]);
+const datePickerRef = ref<HTMLDivElement>();
+const activeQuickOption = ref<string>('');
+
+const quickOptions = [
+  { label: t('Search.timeFilter.today'), value: 'today' },
+  { label: t('Search.timeFilter.last3Days'), value: 'last3days' },
+  { label: t('Search.timeFilter.last7Days'), value: 'last7days' },
+];
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (datePickerRef.value && !datePickerRef.value.contains(event.target as Node)) {
+    isDatePickerOpen.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
+});
+
+const setStartOfDay = (date: Date): Date => {
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+};
+
+const setEndOfDay = (date: Date): Date => {
+  const newDate = new Date(date);
+  newDate.setHours(23, 59, 59, 999);
+  return newDate;
+};
+
+watch(
+  () => props.advancedParams,
+  (newParams) => {
+    const messageParams = newParams?.get(SearchType.MESSAGE);
+    let newDateRange: [Date | null, Date | null] = [null, null];
+    if (messageParams?.timePosition && messageParams?.timePeriod) {
+      const endTimes = new Date(messageParams.timePosition * 1000);
+      const startTimes = new Date((messageParams.timePosition - messageParams.timePeriod) * 1000);
+      newDateRange = [startTimes, endTimes];
+    }
+    dateRange.value = newDateRange;
+  },
+  { immediate: true },
+);
+
+const dateRangeMatch = (startTime: number | undefined, endTime: number | undefined, daysAgo: number): boolean => {
+  if (!startTime || !endTime) {
+    return false;
+  }
+  const today = new Date();
+  const endOfToday = setEndOfDay(today).getTime();
+  const date = new Date();
+  date.setDate(date.getDate() - (daysAgo - 1));
+  const startOfDaysAgo = setStartOfDay(date).getTime();
+  return endTime === endOfToday && startTime === startOfDaysAgo;
+};
+
+function matchQuickOptionByDateRange([start, end]: [Date | null, Date | null]): string {
+  const startTimes = start?.getTime();
+  const endTimes = end?.getTime();
+  const quickOptionMatches = [
+    { option: 'today', days: 1 },
+    { option: 'last3days', days: 3 },
+    { option: 'last7days', days: 7 },
+  ];
+  const matchedOption = quickOptionMatches.find(({ days }) => dateRangeMatch(startTimes, endTimes, days));
+  return matchedOption?.option || '';
+}
+
+watch(
+  dateRange,
+  (newDateRange) => {
+    if (!activeQuickOption.value) {
+      const startTimes = newDateRange[0]?.getTime();
+      const endTimes = newDateRange[1]?.getTime();
+
+      const quickOptionMatches = [
+        { option: 'today', days: 1 },
+        { option: 'last3days', days: 3 },
+        { option: 'last7days', days: 7 },
+      ];
+
+      const matchedOption = quickOptionMatches.find(({ days }) => dateRangeMatch(startTimes, endTimes, days));
+
+      activeQuickOption.value = matchedOption?.option || '';
+    }
+  },
+  { immediate: true },
+);
+
+const getDateRangeText = () => {
+  const [start, end] = dateRange.value;
+  if (!start || !end) {
+    return t('Search.timeFilter.allTime');
+  }
+  return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
+};
+
+const toggleDatePicker = () => {
+  isDatePickerOpen.value = !isDatePickerOpen.value;
+};
+
+const handleDateRange = (dates: [Date | null, Date | null], quickOption?: string) => {
+  const [startDate, endDate] = dates;
+  const options = {
+    timePosition: 0,
+    timePeriod: 0,
+  };
+
+  if (startDate && endDate) {
+    const startTimestamp = Math.floor(startDate.getTime() / 1000);
+    options.timePosition = Math.floor(endDate.getTime() / 1000);
+    options.timePeriod = options.timePosition - startTimestamp;
+  }
+
+  if (quickOption !== undefined) {
+    activeQuickOption.value = quickOption;
+  }
+
+  if (props.onAdvancedParamsChange) {
+    const newParams = new Map(props.advancedParams || []);
+    newParams.set(SearchType.MESSAGE, {
+      ...newParams.get(SearchType.MESSAGE),
+      ...options,
+    });
+    props.onAdvancedParamsChange(newParams);
+  }
+};
+
+const onDateRangeChange = (dates: [Date | null, Date | null]) => {
+  const [startDate, endDate] = dates;
+  if (!startDate && !endDate) {
+    isDatePickerOpen.value = false;
+  }
+  if (!startDate || !endDate) {
+    return;
+  }
+  isDatePickerOpen.value = false;
+  const isSameStart = startDate?.getTime() === dateRange.value[0]?.getTime();
+  const isSameEnd = endDate?.getTime() === dateRange.value[1]?.getTime();
+
+  if (isSameStart && isSameEnd) {
+    return;
+  }
+
+  handleDateRange(dates);
+  activeQuickOption.value = matchQuickOptionByDateRange(dates);
+};
+
+const handleQuickOptionClick = (option: string) => {
+  const activeOption = option === activeQuickOption.value ? '' : option;
+  const today = new Date();
+  let start: Date | null = null;
+  let end: Date | null = null;
+
+  if (option !== activeQuickOption.value) {
+    switch (option) {
+      case 'today':
+        start = setStartOfDay(today);
+        end = setEndOfDay(today);
+        break;
+      case 'last3days': {
+        const startDate = new Date(today);
+        startDate.setDate(today.getDate() - 2);
+        start = setStartOfDay(startDate);
+        end = setEndOfDay(today);
+        break;
+      }
+      case 'last7days': {
+        const startDate = new Date(today);
+        startDate.setDate(today.getDate() - 6);
+        start = setStartOfDay(startDate);
+        end = setEndOfDay(today);
+        break;
+      }
+      default:
+        start = null;
+        end = null;
+        break;
+    }
+  }
+
+  const dates: [Date | null, Date | null] = [start, end];
+  handleDateRange(dates, activeOption);
+};
+</script>
+
+<style lang="scss" module>
+@import './MessageAdvanced.scss';
+</style>

package/src/components/Search/SearchAdvanced/MessageAdvanced/index.ts

@@ -0,0 +1,2 @@
+export { default as MessageAdvanced } from './MessageAdvanced.vue';
+export * from './MessageAdvanced.vue';

package/src/components/Search/SearchAdvanced/SearchAdvanced.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchAdvanced {
+  display: flex;
+  flex-direction: column;
+
+  &__mode-toggle {
+    width: calc(100% - 20px);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 10px;
+    padding: 6px 12px;
+    border-radius: 6px;
+    background: var(--list-color-focused);
+    cursor: pointer;
+    transition: all 0.3s;
+
+    .SearchAdvanced__mode-toggle-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 30px;
+      height: 30px;
+      background: var(--text-color-link);
+      color: #ffffff;
+      border-radius: 50%;
+    }
+
+    .SearchAdvanced__mode-toggle-desc {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      color: var(--text-color-primary);
+      gap: 5px;
+      font-size: 12px;
+
+      h5 {
+        font-size: 14px;
+      }
+    }
+
+    &:hover {
+      background: var(--list-color-hover);
+    }
+  }
+
+  &__date-picker-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+    z-index: 1000;
+  }
+} 

package/src/components/Search/SearchAdvanced/SearchAdvanced.vue

@@ -0,0 +1,62 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div :class="$style.SearchAdvanced">
+    <SearchTab
+      v-if="variant === VariantType.STANDARD"
+      :active-tab="searchType"
+      @tab-change="handleTabChange"
+    />
+    <MessageAdvanced
+      v-if="variant === VariantType.STANDARD && searchType === SearchType.MESSAGE"
+      :variant="variant"
+      :advanced-params="advancedParams"
+      @advanced-params-change="handleMessageAdvancedChange"
+    />
+    <UserAdvanced
+      v-if="variant === VariantType.STANDARD && searchType === SearchType.USER"
+      :variant="variant"
+      :advanced-params="advancedParams"
+      @advanced-params-change="handleUserAdvancedChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue';
+import { useSearchState } from '../../../states/SearchState';
+import { SearchType } from '../../../types/engine';
+import { VariantType } from '../../../types/search';
+import { MessageAdvanced } from './MessageAdvanced';
+import { SearchTab } from './SearchTab';
+import { UserAdvanced } from './UserAdvanced';
+import type { SearchAdvancedProps, SearchTabType } from '../../../types/search';
+
+const props = withDefaults(defineProps<SearchAdvancedProps>(), {
+  variant: VariantType.STANDARD,
+  searchType: 'all',
+});
+
+const { setSelectedType } = useSearchState(props.variant);
+
+const handleTabChange = (tab: SearchTabType) => {
+  setSelectedType(tab);
+};
+
+const handleMessageAdvancedChange = (params: Map<SearchType, any>) => {
+  const messageParams = params.get(SearchType.MESSAGE);
+  if (messageParams) {
+    props.onAdvancedParamsChange(SearchType.MESSAGE, messageParams);
+  }
+};
+
+const handleUserAdvancedChange = (params: Map<SearchType, any>) => {
+  const userParams = params.get(SearchType.USER);
+  if (userParams) {
+    props.onAdvancedParamsChange(SearchType.USER, userParams);
+  }
+};
+</script>
+
+<style lang="scss" module>
+@import './SearchAdvanced.scss';
+</style>

package/src/components/Search/SearchAdvanced/SearchTab/SearchTab.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchTab {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  gap: 20px;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--shadow-color);
+  background: var(--bg-color-operate);
+
+  &__item {
+    padding: 20px 0;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    background: none;
+    font-size: 14px;
+    color: var(--text-color-secondary);
+    cursor: pointer;
+    position: relative;
+    transition: color 0.2s;
+
+    &:focus, &:focus-visible {
+      outline: none;
+    }
+
+    &:hover {
+      color: var(--text-color-link);
+    }
+
+    &--active {
+      color: var(--text-color-link);
+      border-bottom: 2px solid var(--text-color-link);
+      font-weight: 500;
+    }
+  }
+} 

package/src/components/Search/SearchAdvanced/SearchTab/SearchTab.vue

@@ -0,0 +1,57 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div :class="$style.SearchTab">
+    <TUIButton
+      v-for="tab in tabs"
+      :key="tab.key"
+      type="text"
+      :class="[
+        $style['SearchTab__item'],
+        {
+          [$style['SearchTab__item--active']]: activeTab === tab.key,
+        },
+      ]"
+      @click="handleTabClick(tab.key)"
+    >
+      {{ tab.label }}
+    </TUIButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps, defineEmits } from 'vue';
+import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { SearchType } from '../../../../types/engine';
+import type { SearchTabType } from '../../../../types/search';
+
+interface SearchTabItem {
+  key: SearchTabType;
+  label: string;
+}
+
+interface Props {
+  activeTab: SearchTabType;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  'tab-change': [tab: SearchTabType];
+}>();
+
+const { t } = useUIKit();
+
+const tabs = computed<SearchTabItem[]>(() => [
+  { key: 'all', label: t('Search.type.all') },
+  { key: SearchType.MESSAGE, label: t('Search.type.messages') },
+  { key: SearchType.USER, label: t('Search.type.users') },
+  { key: SearchType.GROUP, label: t('Search.type.groups') },
+]);
+
+const handleTabClick = (tabKey: SearchTabType) => {
+  emit('tab-change', tabKey);
+};
+</script>
+
+<style lang="scss" module>
+@import './SearchTab.scss';
+</style>

package/src/components/Search/SearchAdvanced/SearchTab/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchTab } from './SearchTab.vue';
+export * from './SearchTab.vue';

package/src/components/Search/SearchAdvanced/Slider/Slider.scss

@@ -0,0 +1,47 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchSlider {
+  width: 100%;
+  padding: 8px 0;
+
+  &__rail {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    background: var(--stroke-color-primary);
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  &__track {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background: var(--button-color-primary-default);
+    border-radius: 2px;
+    pointer-events: none;
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    background: var(--button-color-primary-default);
+    border: 2px solid white;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    &:active {
+      cursor: grabbing;
+      transform: translate(-50%, -50%) scale(1.2);
+    }
+  }
+} 

package/src/components/Search/SearchAdvanced/Slider/Slider.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :class="$style.SearchSlider">
+    <div :class="$style.SearchSlider__rail" ref="trackRef">
+      <div
+        :class="$style.SearchSlider__track"
+        :style="{
+          left: `${getPercent(value[0])}%`,
+          width: `${getPercent(value[1]) - getPercent(value[0])}%`,
+        }"
+      ></div>
+      <div
+        :class="$style.SearchSlider__thumb"
+        :style="{ left: `${getPercent(value[0])}%` }"
+        @mousedown="e => handleStart('min', e)"
+        @touchstart="e => handleStart('min', e)"
+      ></div>
+      <div
+        :class="$style.SearchSlider__thumb"
+        :style="{ left: `${getPercent(value[1])}%` }"
+        @mousedown="e => handleStart('max', e)"
+        @touchstart="e => handleStart('max', e)"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, withDefaults, defineProps } from 'vue';
+
+interface SliderProps {
+  value: [number, number];
+  min?: number;
+  max?: number;
+  onChange?: (value: [number, number]) => void;
+}
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  min: 0,
+  max: 99,
+});
+
+const trackRef = ref<HTMLDivElement>();
+
+const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));
+
+const getPercent = (val: number) => ((val - props.min) / (props.max - props.min)) * 100;
+
+const handleDrag = (e: MouseEvent | TouchEvent, type: 'min' | 'max') => {
+  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+  const track = trackRef.value;
+  if (!track) return;
+  const rect = track.getBoundingClientRect();
+  const percent = clamp((clientX - rect.left) / rect.width, 0, 1);
+  const val = Math.round(percent * (props.max - props.min) + props.min);
+  let newValue: [number, number] = props.value;
+  if (type === 'min') {
+    newValue = [clamp(val, props.min, props.value[1]), props.value[1]];
+  } else {
+    newValue = [props.value[0], clamp(val, props.value[0], props.max)];
+  }
+  props.onChange?.(newValue);
+};
+
+const handleStart = (type: 'min' | 'max', e: MouseEvent | TouchEvent) => {
+  handleDrag(e, type);
+  const moveHandler = (moveEvent: MouseEvent | TouchEvent) => handleDrag(moveEvent, type);
+  const upHandler = () => {
+    window.removeEventListener('mousemove', moveHandler);
+    window.removeEventListener('touchmove', moveHandler);
+    window.removeEventListener('mouseup', upHandler);
+    window.removeEventListener('touchend', upHandler);
+  };
+  window.addEventListener('mousemove', moveHandler);
+  window.addEventListener('touchmove', moveHandler);
+  window.addEventListener('mouseup', upHandler);
+  window.addEventListener('touchend', upHandler);
+};
+</script>
+
+<style lang="scss" module>
+@import './Slider.scss';
+</style>

package/src/components/Search/SearchAdvanced/Slider/index.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from './Slider.vue';
+export * from './Slider.vue';