tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/src/components/RoomView/useStreamItemDimensions.ts

@@ -0,0 +1,162 @@
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import type { Ref } from 'vue';
+
+export interface StreamItemDimensionsOptions {
+  // Container element ref
+  containerRef: Ref<HTMLElement | null>;
+  // Number of columns in the grid
+  columns: Ref<number> | number;
+  // Number of rows in the grid
+  rows: Ref<number> | number;
+  // Number of items to display
+  itemCount: Ref<number> | number;
+  // Gap between items (in pixels)
+  gap?: number;
+  // Aspect ratio (width / height)
+  aspectRatio?: number;
+  // Watch dependencies that trigger recalculation
+  watchDependencies?: Array<Ref<unknown> | (() => unknown)>;
+}
+
+export interface StreamItemStyle {
+  width?: string;
+  height?: string;
+}
+
+/**
+ * Calculate stream item dimensions maintaining a specific aspect ratio
+ * @param options Configuration options
+ * @returns Reactive style object with width and height
+ */
+export function useStreamItemDimensions(options: StreamItemDimensionsOptions) {
+  const {
+    containerRef,
+    columns,
+    rows,
+    itemCount,
+    gap = 0,
+    aspectRatio = 16 / 9,
+    watchDependencies = [],
+  } = options;
+
+  const itemStyle = ref<StreamItemStyle>({});
+
+  // Calculate item dimensions based on container size and grid layout
+  function calculateDimensions() {
+    if (!containerRef.value) {
+      return;
+    }
+
+    const container = containerRef.value;
+    const containerRect = container.getBoundingClientRect();
+
+    // Get current values (handle both Ref and number)
+    const colNumber = typeof columns === 'number' ? columns : columns.value;
+    const rowNumber = typeof rows === 'number' ? rows : rows.value;
+    const count = typeof itemCount === 'number' ? itemCount : itemCount.value;
+
+    // Early return if no items or invalid columns
+    if (count <= 0 || colNumber <= 0 || rowNumber <= 0) {
+      itemStyle.value = {};
+      return;
+    }
+
+    // Get container's total width and height from getBoundingClientRect()
+    const totalWidth = containerRect.width;
+    const totalHeight = containerRect.height;
+
+    // Get padding from computed style
+    const computedStyle = window.getComputedStyle(container);
+    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+
+    // Calculate available space (subtract padding from total dimensions)
+    const availableWidth = totalWidth - paddingLeft - paddingRight;
+    const availableHeight = totalHeight - paddingTop - paddingBottom;
+
+    // Calculate item dimensions maintaining aspect ratio
+    // Available space per item (considering gaps)
+    const gapWidth = (colNumber - 1) * gap;
+    const gapHeight = (rowNumber - 1) * gap;
+
+    const itemWidthByWidth = (availableWidth - gapWidth) / colNumber;
+    const itemHeightByWidth = itemWidthByWidth / aspectRatio;
+
+    const itemHeightByHeight = (availableHeight - gapHeight) / rowNumber;
+    const itemWidthByHeight = itemHeightByHeight * aspectRatio;
+
+    // Choose the dimension that fits within available space
+    let finalWidth: number;
+    let finalHeight: number;
+
+    if (itemHeightByWidth <= availableHeight / rowNumber) {
+      // Width-based calculation fits
+      finalWidth = itemWidthByWidth;
+      finalHeight = itemHeightByWidth;
+    } else {
+      // Height-based calculation fits
+      finalWidth = itemWidthByHeight;
+      finalHeight = itemHeightByHeight;
+    }
+
+    itemStyle.value = {
+      width: `${Math.floor(finalWidth)}px`,
+      height: `${Math.floor(finalHeight)}px`,
+    };
+  }
+
+  // Resize observer and window resize handler
+  let resizeObserver: ResizeObserver | null = null;
+
+  function setupResizeObserver() {
+    if (!containerRef.value) {
+      return;
+    }
+
+    resizeObserver = new ResizeObserver(() => {
+      calculateDimensions();
+    });
+
+    resizeObserver.observe(containerRef.value);
+  }
+
+  function handleWindowResize() {
+    calculateDimensions();
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      calculateDimensions();
+      setupResizeObserver();
+      window.addEventListener('resize', handleWindowResize);
+    });
+  });
+
+  onUnmounted(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    window.removeEventListener('resize', handleWindowResize);
+  });
+
+  // Watch dependencies for recalculation
+  if (watchDependencies.length > 0) {
+    watch(
+      watchDependencies,
+      () => {
+        nextTick(() => {
+          calculateDimensions();
+        });
+      },
+      { deep: true },
+    );
+  }
+
+  return {
+    itemStyle,
+    calculateDimensions,
+  };
+}

package/src/components/ScheduleRoomPanel/Datepicker.vue

@@ -0,0 +1,332 @@
+<template>
+  <div ref="pickerRef" class="container">
+    <TUIInput
+      v-model:model-value="formattedDate"
+      readonly
+      class="datepicker-input"
+      @focus="togglePicker"
+    />
+    <div v-if="showPicker" class="picker">
+      <div class="picker-header">
+        <span class="current-time">
+          {{ currentYear }}/{{
+            currentMonth < 10 ? `0${currentMonth}` : currentMonth
+          }}
+        </span>
+        <button class="arrow" @click="changeMonth(-1)">
+          &lt;
+        </button>
+        <button class="arrow" @click="changeMonth(1)">
+          &gt;
+        </button>
+      </div>
+      <div class="picker-weekdays">
+        <div
+          v-for="weekday in weekdays"
+          :key="weekday"
+          class="weekday"
+        >
+          {{ weekday }}
+        </div>
+      </div>
+      <div class="picker-body">
+        <div
+          v-for="day in days"
+          :key="day.id"
+          class="day"
+          :class="{
+            'other-month': day.otherMonth,
+            selected: isSelected(day.date),
+            today: isToday(day.date),
+            past: isPast(day.date),
+          }"
+          @click="selectDate(day.date)"
+        >
+          {{ day.label }}
+          <span v-if="isToday(day.date)" class="today-dot" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+} from 'vue';
+import { TUIInput, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { t } = useUIKit();
+
+const isPast = (date: any) => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return date < today;
+};
+
+interface Props {
+  modelValue: number;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:modelValue']);
+const showPicker = ref(false);
+
+const selectedDate = ref(props.modelValue ? new Date(props.modelValue * 1000) : new Date());
+const currentYear = ref(selectedDate.value.getFullYear());
+const currentMonth = ref(selectedDate.value.getMonth() + 1);
+
+const pickerRef = ref<any>(null);
+const closeOnOutsideClick = (event: any) => {
+  if (!pickerRef.value.contains(event.target)) {
+    showPicker.value = false;
+  }
+};
+const togglePicker = () => {
+  showPicker.value = !showPicker.value;
+};
+onMounted(() => {
+  window.addEventListener('click', closeOnOutsideClick);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('click', closeOnOutsideClick);
+});
+
+watch(
+  selectedDate,
+  (newValue) => {
+    const dateOnly = new Date(newValue);
+    dateOnly.setHours(0, 0, 0, 0);
+    const timestamp = Math.floor(dateOnly.getTime() / 1000);
+    emit('update:modelValue', timestamp);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!newValue) {
+      return;
+    }
+    selectedDate.value = new Date(newValue * 1000);
+    currentMonth.value = selectedDate.value.getMonth() + 1;
+    currentYear.value = selectedDate.value.getFullYear();
+  },
+  { immediate: true },
+);
+
+const changeMonth = (value: any) => {
+  currentMonth.value += value;
+  if (currentMonth.value === 0) {
+    currentMonth.value = 12;
+    currentYear.value -= 1;
+  } else if (currentMonth.value === 13) {
+    currentMonth.value = 1;
+    currentYear.value += 1;
+  }
+};
+
+const selectDate = (date: any) => {
+  if (isPast(date)) {
+    return;
+  }
+  selectedDate.value = date;
+  showPicker.value = false;
+};
+
+const days = ref<any[]>([]);
+
+const updateDays = () => {
+  const daysArray = [];
+  const firstDay = new Date(
+    currentYear.value,
+    currentMonth.value - 1,
+    1,
+  ).getDay();
+  const daysInMonth = new Date(
+    currentYear.value,
+    currentMonth.value,
+    0,
+  ).getDate();
+  const daysInPrevMonth = new Date(
+    currentYear.value,
+    currentMonth.value - 1,
+    0,
+  ).getDate();
+
+  for (let i = daysInPrevMonth - firstDay + 1; i <= daysInPrevMonth; i += 1) {
+    const date = new Date(currentYear.value, currentMonth.value - 2, i);
+    daysArray.push({
+      id: date.toISOString(),
+      label: i,
+      date,
+      otherMonth: true,
+    });
+  }
+
+  for (let i = 1; i <= daysInMonth; i += 1) {
+    const date = new Date(currentYear.value, currentMonth.value - 1, i);
+    daysArray.push({
+      id: date.toISOString(),
+      label: i,
+      date,
+      otherMonth: false,
+    });
+  }
+
+  const remainingDays = 35 - daysArray.length;
+  if (remainingDays > 0) {
+    for (let i = 1; i <= remainingDays; i += 1) {
+      const date = new Date(currentYear.value, currentMonth.value, i);
+      daysArray.push({
+        id: date.toISOString(),
+        label: i,
+        date,
+        otherMonth: true,
+      });
+    }
+  }
+
+  days.value = daysArray.slice(0, 35);
+};
+
+watchEffect(() => {
+  updateDays();
+});
+
+const formattedDate = computed(
+  () =>
+    `${selectedDate.value.getFullYear()}-${selectedDate.value.getMonth() + 1}-${selectedDate.value.getDate()}`,
+);
+
+const isSelected = (date: any) =>
+  date.toISOString() === selectedDate.value.toISOString();
+
+const isToday = (date: any) => {
+  const today = new Date();
+  return (
+    date.getFullYear() === today.getFullYear()
+    && date.getMonth() === today.getMonth()
+    && date.getDate() === today.getDate()
+  );
+};
+
+const weekdays = computed(() => [
+  t('Sunday'),
+  t('Monday'),
+  t('Tuesday'),
+  t('Wednesday'),
+  t('Thursday'),
+  t('Friday'),
+  t('Saturday'),
+]);
+</script>
+
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.datepicker-input {
+  width: 100%;
+  cursor: pointer;
+}
+
+.picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: inline-block;
+  width: 100%;
+  min-width: 222px;
+  padding: 5px;
+  font-size: 12px;
+  border-radius: 4px;
+  background-color: var(--bg-color-dialog);
+  color: var(--text-color-primary);
+  border: 1px solid var(--stroke-color-module);
+}
+
+.picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  font-size: 14px;
+  line-height: normal;
+
+  .current-time {
+    width: 80%;
+    font-weight: bold;
+    color: var(--text-color-primary);
+  }
+}
+
+.arrow {
+  display: inline-block;
+  padding: 0 5px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  color: var(--text-color-primary);
+}
+
+.arrow:hover {
+  color: var(--text-color-link);
+}
+
+.picker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekday {
+  padding: 5px;
+  line-height: initial;
+  text-align: center;
+}
+
+.picker-body {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.day {
+  position: relative;
+  padding: 5px;
+  line-height: initial;
+  text-align: center;
+  cursor: pointer;
+}
+
+.day.selected {
+  color: var(--text-color-button);
+  background-color: var(--button-color-primary-hover);
+}
+
+.day.today .today-dot {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  background-color: var(--button-color-primary-hover);
+}
+
+.day.past {
+  color: var(--text-color-disabled);
+  pointer-events: none;
+}
+</style>

package/src/components/ScheduleRoomPanel/DurationSelector.vue

@@ -0,0 +1,92 @@
+<template>
+  <TUISelect :model-value="modelValue" @update:model-value="handleUpdate">
+    <TUIOption
+      v-for="option in durationOptions"
+      :key="option.value"
+      :value="option.value"
+      :label="option.label"
+    />
+  </TUISelect>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TUISelect, TUIOption, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+interface Props {
+  modelValue: number;
+  options?: Array<{ label: string; value: number }>;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: number): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const { t } = useUIKit();
+
+// 时长限制：最少15分钟，最长24小时
+const MIN_DURATION = 15 * 60; // 15分钟 = 900秒
+const MAX_DURATION = 24 * 3600; // 24小时 = 86400秒
+const ONE_HOUR = 3600; // 1小时 = 3600秒
+const DURATION_INTERVAL_15MIN = 15 * 60; // 15分钟间隔 = 900秒
+
+// Format duration text using i18n
+const formatDuration = (seconds: number): string => {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+
+  if (hours === 0) {
+    return `${minutes} ${t('minutes')}`;
+  }
+  return hours === 1 ? `1 ${t('hour')}` : `${hours} ${t('hours')}`;
+};
+
+// Generate duration values: 15-minute intervals for < 1 hour, 1-hour intervals for >= 1 hour
+const durationValues = computed(() => {
+  const values: number[] = [];
+
+  // Generate 15-minute intervals for durations less than 1 hour
+  for (let seconds = MIN_DURATION; seconds < ONE_HOUR; seconds += DURATION_INTERVAL_15MIN) {
+    values.push(seconds);
+  }
+
+  // Generate 1-hour intervals for durations >= 1 hour
+  for (let hours = 1; hours <= 24; hours += 1) {
+    values.push(hours * ONE_HOUR);
+  }
+
+  return values;
+});
+
+// Default duration options (computed to support i18n updates)
+const defaultDurationOptions = computed(() =>
+  durationValues.value.map(value => ({
+    label: formatDuration(value),
+    value,
+  })),
+);
+
+// 使用传入的选项或默认选项，并过滤超出范围的选项
+const durationOptions = computed(() => {
+  const options = props.options || defaultDurationOptions.value;
+  return options.filter(option => option.value >= MIN_DURATION && option.value <= MAX_DURATION);
+});
+
+const handleUpdate = (value: number) => {
+  if (value < MIN_DURATION) {
+    TUIToast.error({ message: t('Meeting duration must be at least 15 minutes') });
+    return;
+  }
+  if (value > MAX_DURATION) {
+    TUIToast.error({ message: t('Meeting duration cannot exceed 24 hours') });
+    return;
+  }
+  emit('update:modelValue', value);
+};
+</script>