tuikit-atomicx-vue3 0.1.0

package/src/components/UserPicker/components/SelectedPanel/SelectedPanel.vue

@@ -0,0 +1,181 @@
+<template>
+  <div
+    v-if="leafItems.length > 0"
+    :class="$style.selected__panel"
+  >
+    <div :class="$style.selected__header">
+      <span :class="$style.selected__title">{{ t('TUIChat.Selected') }}</span>
+      <span :class="$style.selected__count">
+        {{ leafItems.length }}
+        <template v-if="maxCount < InfinityValue"> / {{ maxCount }} </template>
+      </span>
+    </div>
+    <div :class="$style.selected__list">
+      <div
+        v-for="item in leafItems"
+        :key="item.key"
+        :class="$style.selected__item"
+      >
+        <div :class="$style['selected__item-content']">
+          <Avatar
+            :src="item.avatarUrl"
+            :class="$style['selected__item-avatar']"
+            :size="'sm'"
+            :alt="item.label"
+          />
+          <div :class="$style['selected__item-label']">
+            {{ item.label }}
+          </div>
+        </div>
+        <button
+          v-if="!lockedKeys.has(item.key)"
+          type="button"
+          :class="$style['selected__remove-button']"
+          aria-label="remove"
+          @click="onRemove(item.key)"
+        >
+          <IconClose
+            name="close"
+            size="12px"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, withDefaults } from 'vue';
+import { IconClose, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { Avatar } from '../../../Avatar';
+import type { IUserPickerResult } from '../../type';
+
+const { t } = useUIKit();
+
+interface SelectedPanelProps {
+  displayMode: 'list' | 'tree';
+  selectedItems: IUserPickerResult;
+  lockedKeys: Set<string>;
+  onRemove: (key: string) => void;
+  maxCount?: number;
+}
+
+const props = withDefaults(defineProps<SelectedPanelProps>(), {
+  maxCount: Number.POSITIVE_INFINITY,
+});
+
+const leafItems = computed(() => {
+  if (props.displayMode === 'list') {
+    return props.selectedItems;
+  }
+  if (props.displayMode === 'tree') {
+    return props.selectedItems.filter(item => item.isLeafNode);
+  }
+  return [];
+});
+
+// Make Infinity available in template
+const InfinityValue = Number.POSITIVE_INFINITY;
+</script>
+
+<style module lang="scss">
+@use '../../../../styles/mixins' as mixin;
+
+.selected {
+  &__panel {
+    margin-top: 8px;
+    padding: 8px;
+
+    border-top: 1px solid var(--stroke-color-primary);
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 500;
+
+    color: var(--text-color-primary);
+  }
+
+  &__count {
+    font-size: 12px;
+
+    color: var(--text-color-primary);
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding-bottom: 4px;
+    gap: 8px;
+
+    @include mixin.scrollbar-default();
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    border-radius: 18px;
+    padding: 4px 8px 4px 4px;
+    flex-shrink: 0;
+    max-width: none;
+
+    background-color: var(--button-color-secondary-default);
+  }
+
+  &__item-content {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__item-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 6px;
+    flex-shrink: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__item-label {
+    font-size: 12px;
+    max-width: 100px;
+
+    @include mixin.text-ellipsis();
+  }
+
+  &__remove-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
+    margin-left: 4px;
+    transition: color 0.3s;
+
+    color: var(--text-color-primary);
+
+    &:hover {
+      color: var(--text-color-secondary);
+    }
+  }
+}
+</style>

package/src/components/UserPicker/components/SelectedPanel/index.ts

@@ -0,0 +1,3 @@
+import SelectedPanel from './SelectedPanel.vue';
+
+export default SelectedPanel;

package/src/components/UserPicker/components/TreeMode/TreeMode.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="dataSource.length === 0" :class="$style.tree__empty">No data available</div>
+  <div v-else :class="$style.tree__container">
+    <TreeNode
+      v-for="node in dataSource"
+      :key="node.key"
+      :node="node"
+      :level="0"
+      :selected-keys="selectedKeys"
+      :half-selected-keys="halfSelectedKeys"
+      :locked-keys="lockedKeys"
+      :expanded-keys="expandedKeys"
+      :loading-keys="loadingKeys"
+      :render-item="renderItem"
+      @item-click="onItemClick"
+      @expand="onExpand"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import TreeNode from './TreeNode.vue';
+import type { IUserPickerNode } from '../../type';
+
+interface TreeModeProps<T = unknown> {
+  dataSource: IUserPickerNode<T>[];
+  selectedKeys: Set<string>;
+  halfSelectedKeys: Set<string>;
+  lockedKeys: Set<string>;
+  expandedKeys: Set<string>;
+  loadingKeys: Set<string>;
+  onItemClick: (key: string) => void;
+  onExpand: (node: IUserPickerNode<T>) => void;
+  renderItem?: any; // Vue component or render function
+}
+
+const props = defineProps<TreeModeProps>();
+</script>
+
+<style module lang="scss">
+@use '../../../../styles/mixins/scrollbar' as scrollbar;
+
+.tree {
+  &__container {
+    overflow-y: auto;
+    flex: 1;
+    width: 100%;
+
+    @include scrollbar.scrollbar-default;
+  }
+
+  &__empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    color: var(--text-color-secondary);
+  }
+}
+</style>

package/src/components/UserPicker/components/TreeMode/TreeNode.vue

@@ -0,0 +1,272 @@
+<template>
+  <div :class="$style['tree__node-wrapper']">
+    <div
+      :class="[
+        $style.tree__node,
+        {
+          [$style['tree__node--selected']]: isSelected,
+          [$style['tree__node--half-selected']]: isHalfSelected,
+          [$style['tree__node--locked']]: isLocked,
+        },
+      ]"
+    >
+      <div
+        :class="$style['tree__node-content']"
+        :data-level="level"
+        :style="{ paddingLeft: `${level * 20 + (level > 0 && node.isLeafNode ? 24 + 8 : 0)}px` }"
+      >
+        <!-- Expand/collapse icon -->
+        <IconArrowDown
+          v-if="!node.isLeafNode"
+          name="arrow-down"
+          :class="[$style['tree__expand-icon'], { [$style['tree__expand-icon--expanded']]: isExpanded }]"
+          :size="20"
+          @click="handleExpand"
+        />
+
+        <!-- Checkbox -->
+        <div :class="$style['tree__checkbox-wrapper']" @click="handleItemClick">
+          <div
+            :class="[
+              $style.tree__checkbox,
+              {
+                [$style['tree__checkbox--checked']]: isSelected,
+                [$style['tree__checkbox--half-checked']]: isHalfSelected,
+              },
+            ]"
+          >
+            <svg v-if="isHalfSelected" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M19 13H5v-2h14v2z" />
+            </svg>
+            <IconCheckSm v-else-if="isSelected" name="check" />
+          </div>
+        </div>
+
+        <!-- Node content -->
+        <template v-if="renderItem">
+          <component :is="renderItem" :node="node" />
+        </template>
+        <div v-else :class="$style['tree__node-label']">
+          <span>头像</span>
+          <span :class="$style.tree__label">{{ node.label }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Children -->
+    <div v-if="(hasChildren && isExpanded) || isLazyLoading" :class="$style['tree__child-nodes']">
+      <div
+        v-if="isLazyLoading && !hasChildren"
+        :class="$style['tree__loading-container']"
+        :data-level="level + 1"
+        :style="{ paddingLeft: `${(level + 1) * 20 + (24 + 8 + 8)}px` }"
+      >
+        <span :class="$style['tree__loading-indicator']">
+          <IconLoading />
+        </span>
+      </div>
+      <TreeNode
+        v-else
+        v-for="childNode in node.children"
+        :key="childNode.key"
+        :node="childNode"
+        :level="level + 1"
+        :selected-keys="selectedKeys"
+        :half-selected-keys="halfSelectedKeys"
+        :locked-keys="lockedKeys"
+        :expanded-keys="expandedKeys"
+        :loading-keys="loadingKeys"
+        :render-item="renderItem"
+        @item-click="$emit('item-click', $event)"
+        @expand="$emit('expand', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, computed } from 'vue';
+import { IconArrowDown, IconCheckSm, IconLoading } from '@tencentcloud/uikit-base-component-vue3';
+import { Avatar } from '../../../Avatar';
+import type { IUserPickerNode } from '../../type';
+
+interface TreeNodeProps<T = unknown> {
+  node: IUserPickerNode<T>;
+  level: number;
+  selectedKeys: Set<string>;
+  halfSelectedKeys: Set<string>;
+  lockedKeys: Set<string>;
+  expandedKeys: Set<string>;
+  loadingKeys: Set<string>;
+  renderItem?: any;
+}
+
+const props = defineProps<TreeNodeProps>();
+
+const emit = defineEmits<{
+  'item-click': [key: string];
+  expand: [node: IUserPickerNode<any>];
+}>();
+
+const isSelected = computed(() => props.selectedKeys.has(props.node.key));
+const isHalfSelected = computed(() => props.halfSelectedKeys.has(props.node.key));
+const isLocked = computed(() => props.lockedKeys.has(props.node.key));
+const isExpanded = computed(() => props.expandedKeys.has(props.node.key));
+const isLoading = computed(() => props.loadingKeys.has(props.node.key));
+
+const hasChildren = computed(() => props.node.children && props.node.children.length > 0);
+const isLazyLoading = computed(() => isExpanded.value && props.node.lazyLoad && isLoading.value);
+
+const handleItemClick = () => {
+  if (!isLocked.value) {
+    emit('item-click', props.node.key);
+  }
+};
+
+const handleExpand = (e: Event) => {
+  e.stopPropagation();
+  emit('expand', props.node);
+};
+</script>
+
+<style module lang="scss">
+.tree {
+  &__node-wrapper {
+    width: 100%;
+  }
+
+  &__node {
+    padding: 4px 0;
+    cursor: pointer;
+    background-color: var(--list-color-default);
+
+    &:hover {
+      background-color: var(--list-color-hover);
+    }
+
+    &--selected {
+      background-color: var(--list-color-focused);
+
+      &:hover {
+        background-color: var(--list-color-focused);
+      }
+    }
+
+    &--half-selected {
+      background-color: var(--list-color-focused);
+    }
+
+    &--locked {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+  }
+
+  &__node-content {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+  }
+
+  &__expand-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    color: var(--text-color-primary);
+
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.3s;
+
+    &--expanded {
+      transform: rotate(90deg);
+    }
+
+    &:hover {
+      color: var(--text-color-secondary);
+    }
+  }
+
+  &__checkbox-wrapper {
+    margin: 0 8px;
+  }
+
+  &__checkbox {
+    width: 18px;
+    height: 18px;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+    color: #fff;
+
+    &--checked {
+      background-color: var(--checkbox-color-selected);
+      border-color: var(--checkbox-color-selected);
+    }
+
+    &--half-checked {
+      background-color: var(--checkbox-color-selected);
+      border-color: var(--checkbox-color-selected);
+    }
+  }
+
+  &__node-label {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-color-primary);
+  }
+
+  &__avatar {
+    margin-right: 8px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__child-nodes {
+    width: 100%;
+  }
+
+  &__loading-container {
+    display: flex;
+    align-items: center;
+  }
+
+  &__loading-indicator {
+    animation: tree-spin 1s linear infinite;
+    color: var(--checkbox-color-selected);
+  }
+}
+
+@keyframes tree-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/UserPicker/components/TreeMode/index.ts

@@ -0,0 +1,3 @@
+import TreeMode from './TreeMode.vue';
+
+export default TreeMode;

package/src/components/UserPicker/hooks/useSearchFilter.ts

@@ -0,0 +1,140 @@
+import { ref, computed, type Ref } from 'vue';
+import type { IUserPickerDataSource, IUserPickerNode, IUserPickerRow } from '../type';
+
+interface UseSearchFilterOptions<T = unknown> {
+  dataSource: Ref<IUserPickerDataSource<T>>;
+  isTreeMode?: boolean;
+  onSearch?: (value: string) => void;
+  debounceTime?: number;
+}
+
+interface UseSearchFilterReturn<T = unknown> {
+  searchValue: Ref<string>;
+  setSearchValue: (value: string) => void;
+  filteredData: Ref<IUserPickerDataSource<T>>;
+  isSearching: Ref<boolean>;
+  handleSearch: (value: string) => void;
+  clearSearch: () => void;
+  isSearchEmpty: Ref<boolean>;
+}
+
+// Check if it's tree data structure
+function isTreeDataSource<T>(data: IUserPickerDataSource<T>): data is Array<IUserPickerNode<T>> {
+  if (data.length === 0) {
+    return false;
+  }
+  return 'isLeafNode' in data[0];
+}
+
+// Search tree structure
+function searchTreeNodes<T>(nodes: Array<IUserPickerNode<T>>, searchValue: string): Array<IUserPickerNode<T>> {
+  if (!searchValue.trim()) {
+    return nodes;
+  }
+
+  // Helper function: check if node matches
+  const isNodeMatched = (node: IUserPickerNode<T>): boolean =>
+    node.label.toLowerCase().includes(searchValue.toLowerCase());
+
+  // Helper function: recursively search nodes
+  const searchNodes = (nodesList: Array<IUserPickerNode<T>>): Array<IUserPickerNode<T>> => {
+    const matchedNodes: Array<IUserPickerNode<T>> = [];
+
+    nodesList.forEach(node => {
+      const isMatched = isNodeMatched(node);
+      let matchedChildren: Array<IUserPickerNode<T>> = [];
+
+      if (node.children && node.children.length) {
+        matchedChildren = searchNodes(node.children);
+      }
+
+      // If current node matches or has matching child nodes, add to result
+      if (isMatched || matchedChildren.length > 0) {
+        matchedNodes.push({
+          ...node,
+          children: matchedChildren.length > 0 ? matchedChildren : node.children,
+        } as IUserPickerNode<T>);
+      }
+    });
+
+    return matchedNodes;
+  };
+
+  return searchNodes(nodes);
+}
+
+// Search list structure
+function searchListItems<T>(items: Array<IUserPickerRow<T>>, searchValue: string): Array<IUserPickerRow<T>> {
+  if (!searchValue.trim()) {
+    return items;
+  }
+
+  return items.filter(item => item.label.toLowerCase().includes(searchValue.toLowerCase()));
+}
+
+export function useSearchFilter<T = unknown>({
+  dataSource,
+  isTreeMode = false,
+  onSearch,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  debounceTime = 300,
+}: UseSearchFilterOptions<T>): UseSearchFilterReturn<T> {
+  const searchValue = ref<string>('');
+  const isSearching = ref<boolean>(false);
+
+  // Filter data based on search value
+  const filteredData = computed(() => {
+    if (!searchValue.value.trim()) {
+      return dataSource.value;
+    }
+
+    if (isTreeMode && isTreeDataSource(dataSource.value)) {
+      return searchTreeNodes(dataSource.value as Array<IUserPickerNode<T>>, searchValue.value);
+    }
+    return searchListItems(dataSource.value as Array<IUserPickerRow<T>>, searchValue.value);
+  });
+
+  // Handle search input
+  const handleSearch = (value: string) => {
+    isSearching.value = true;
+    searchValue.value = value;
+
+    // Trigger external search callback
+    if (onSearch) {
+      onSearch(value);
+    }
+
+    isSearching.value = false;
+  };
+
+  // Clear search
+  const clearSearch = () => {
+    searchValue.value = '';
+    if (onSearch) {
+      onSearch('');
+    }
+  };
+
+  // Set search value
+  const setSearchValue = (value: string) => {
+    searchValue.value = value;
+  };
+
+  // Determine if search result is empty
+  const isSearchEmpty = computed(() => {
+    if (!searchValue.value.trim()) {
+      return false;
+    }
+    return Array.isArray(filteredData.value) && filteredData.value.length === 0;
+  });
+
+  return {
+    searchValue,
+    setSearchValue,
+    filteredData,
+    isSearching,
+    handleSearch,
+    clearSearch,
+    isSearchEmpty,
+  };
+}