tuikit-atomicx-vue3 0.1.0

package/src/components/UserPicker/UserPicker.vue

@@ -0,0 +1,243 @@
+<template>
+  <div
+    :class="$style['user-picker']"
+    :data-display-mode="displayMode"
+  >
+    <SearchBar
+      v-if="enableSearch"
+      :placeholder="searchPlaceholder || t('TUIConversation.Search')"
+      :on-search="searchManager.handleSearch"
+    />
+
+    <div
+      :class="$style['user-picker__panel']"
+      :data-display-mode="displayMode"
+    >
+      <div
+        v-if="searchManager.isSearchEmpty.value"
+        :class="$style['empty-search']"
+      >
+        {{ t('TUIChat.No Result') }}
+      </div>
+      <ListMode
+        v-else-if="!isTreeMode"
+        :data-source="searchManager.filteredData.value as IUserPickerRow<any>[]"
+        :selected-keys="selectionManager.selectedKeys.value"
+        :locked-keys="selectionManager.lockedKeys.value"
+        :on-item-click="selectionManager.toggle"
+        :on-reach-end="onReachEnd || (() => {})"
+        :render-item="renderItem as any"
+      />
+      <TreeMode
+        v-else
+        :data-source="searchManager.filteredData.value as IUserPickerNode<any>[]"
+        :selected-keys="selectionManager.selectedKeys.value"
+        :half-selected-keys="selectionManager.halfSelectedKeys.value"
+        :locked-keys="selectionManager.lockedKeys.value"
+        :expanded-keys="treeStateManager.expandedKeys.value"
+        :loading-keys="treeStateManager.loadingKeys.value"
+        :on-item-click="selectionManager.toggle"
+        :on-expand="treeStateManager.toggleExpand"
+        :render-item="renderItem as any"
+      />
+    </div>
+
+    <SelectedPanel
+      :display-mode="displayMode"
+      :selected-items="selectionManager.getSelectedItems()"
+      :locked-keys="selectionManager.lockedKeys.value"
+      :on-remove="selectionManager.toggle"
+      :max-count="maxCount"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, defineProps, defineExpose, withDefaults } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+import ListMode from './components/ListMode';
+import SearchBar from './components/SearchBar';
+import SelectedPanel from './components/SelectedPanel';
+import TreeMode from './components/TreeMode';
+
+import { useSearchFilter } from './hooks/useSearchFilter';
+import { useSelection } from './hooks/useSelection';
+import { useTreeState } from './hooks/useTreeState';
+import type { IUserPickerProps, IUserPickerRef, IUserPickerNode, IUserPickerRow } from './type';
+
+// Define type for props (without generics for Vue3 compatibility)
+type UserPickerProps = IUserPickerProps<any>;
+
+const props = withDefaults(defineProps<UserPickerProps>(), {
+  dataSource: () => [],
+  defaultSelectedItems: () => [],
+  lockedItems: () => [],
+  maxCount: Number.POSITIVE_INFINITY,
+  minCount: 0,
+  enableSearch: true,
+});
+
+const { t } = useUIKit();
+
+const isTreeMode = computed(() => props.displayMode === 'tree');
+
+// Internal data state management
+const internalDataSource = ref(props.dataSource);
+
+// Extract keys from selected items
+const defaultSelectedKeys = computed(() => props.defaultSelectedItems.map(item => item.key));
+const lockedKeys = computed(() => props.lockedItems.map(item => item.key));
+
+// Use custom hook to manage selection state
+const selectionManager = useSelection<any>({
+  defaultSelectedKeys: defaultSelectedKeys.value,
+  lockedKeys: lockedKeys.value,
+  maxCount: props.maxCount,
+  minCount: props.minCount,
+  isTreeMode: isTreeMode.value,
+  dataSource: internalDataSource,
+  onSelectedChange: props.onSelectedChange || (() => {}),
+  onMaxCountExceed: props.onMaxCountExceed || (() => {}),
+});
+
+// Use custom hook to manage search filtering
+const searchManager = useSearchFilter<any>({
+  dataSource: internalDataSource,
+  isTreeMode: isTreeMode.value,
+  onSearch: props.onSearch || (() => {}),
+});
+
+// Use custom hook to manage tree state (if in tree mode)
+const treeStateManager = useTreeState<any>({
+  onExpand: (node) => {
+    if (props.onExpand) {
+      props.onExpand(node);
+    }
+  },
+});
+
+// Watch for data source changes
+watch(
+  () => props.dataSource,
+  (newDataSource) => {
+    if (!isTreeMode.value) {
+      internalDataSource.value = newDataSource;
+    }
+  },
+  { deep: true },
+);
+
+// Generic node update function - can update any properties of a node
+const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+  if (!isTreeMode.value) {
+    return;
+  }
+
+  // Deep copy current data
+  const newData = JSON.parse(JSON.stringify(internalDataSource.value));
+
+  // Recursive function: find and update node
+  const updateNode = (nodes: Array<IUserPickerNode<any>>): boolean => {
+    for (let i = 0; i < nodes.length; i += 1) {
+      if (nodes[i].key === nodeKey) {
+        // Found target node, apply updates
+        const updatedNode = {
+          ...nodes[i], // Keep original properties
+          ...partialNode, // Apply update properties
+          key: nodes[i].key, // Ensure key is not overwritten
+        };
+
+        // If children are passed and node previously had lazyLoad property
+        if (partialNode.children && nodes[i].lazyLoad) {
+          updatedNode.lazyLoad = false; // Turn off lazy loading state after having children
+        }
+
+        // Create new array instead of directly modifying node
+        const newNodes = [...nodes];
+        newNodes[i] = updatedNode;
+
+        // Replace original array
+        nodes.splice(0, nodes.length, ...newNodes);
+
+        return true;
+      }
+
+      // Recursively search child nodes
+      const { children } = nodes[i];
+      if (children && Array.isArray(children) && children.length > 0) {
+        if (updateNode(children)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
+  // Try to update, return original data if node is not found
+  if (Array.isArray(newData)) {
+    updateNode(newData as Array<IUserPickerNode<any>>);
+  }
+  internalDataSource.value = newData;
+
+  // If updating child nodes, automatically stop loading state
+  if (partialNode.children) {
+    treeStateManager.setNodeLoading(nodeKey, false);
+  }
+};
+
+// Implement methods exposed by ref
+const refMethods: IUserPickerRef<any> = {
+  getSelectedItems: () => selectionManager.getSelectedItems(),
+  updateListData: (newDataSource: Array<IUserPickerRow<any>>) => {
+    // Update list data
+    if (!isTreeMode.value) {
+      internalDataSource.value = newDataSource;
+    }
+  },
+  updateTreeData: (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+    // Use generic update function
+    updateNodeByKey(nodeKey, partialNode);
+  },
+};
+
+defineExpose(refMethods);
+</script>
+
+<style module lang="scss">
+.user-picker {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  &__panel {
+    flex: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  &__empty-search {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    color: #999;
+    font-size: 14px;
+  }
+
+  &__selection-status {
+    padding: 8px 12px;
+    display: flex;
+    justify-content: flex-end;
+    color: #666;
+    font-size: 12px;
+    border-top: 1px solid #f0f0f0;
+  }
+}
+</style>

package/src/components/UserPicker/components/ListMode/ListMode.vue

@@ -0,0 +1,208 @@
+<template>
+  <div
+    v-if="dataSource.length === 0"
+    :class="$style.list__empty"
+  >
+    {{ t('TUIChat.No Data Available') }}
+  </div>
+  <div
+    v-else
+    :class="$style.list__container"
+    @scroll="handleScroll"
+  >
+    <div
+      v-for="item in dataSource"
+      :key="item.key"
+    >
+      <div
+        :class="[
+          $style.list__item,
+          {
+            [$style['list__item--selected']]: isSelected(item.key),
+            [$style['list__item--locked']]: isLocked(item.key),
+          },
+        ]"
+        @click="handleItemClick(item.key)"
+      >
+        <!-- Checkbox -->
+        <div :class="$style['list__checkbox-wrapper']">
+          <div :class="[$style.list__checkbox, { [$style['list__checkbox--checked']]: isSelected(item.key) }]">
+            <IconCheckSm
+              v-if="isSelected(item.key)"
+              name="check"
+            />
+          </div>
+        </div>
+
+        <!-- Custom render or default render -->
+        <template v-if="renderItem">
+          <component
+            :is="renderItem"
+            :item="item"
+          />
+        </template>
+        <div
+          v-else
+          :class="$style.list__content"
+        >
+          <Avatar
+            :src="item.avatarUrl || ''"
+            :class="$style.list__avatar"
+            :alt="item.label"
+          />
+          <span :class="$style.list__label">{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { useUIKit, IconCheckSm } from '@tencentcloud/uikit-base-component-vue3';
+import { Avatar } from '../../../Avatar';
+import type { IUserPickerRow } from '../../type';
+
+interface ListModeProps<T = unknown> {
+  dataSource: Array<IUserPickerRow<T>>;
+  selectedKeys: Set<string>;
+  lockedKeys: Set<string>;
+  onItemClick: (key: string) => void;
+  onReachEnd?: () => void;
+  renderItem?: any; // Vue component or render function
+}
+
+const props = defineProps<ListModeProps>();
+
+const { t } = useUIKit();
+
+const isSelected = (key: string): boolean => props.selectedKeys.has(key);
+const isLocked = (key: string): boolean => props.lockedKeys.has(key);
+
+const handleItemClick = (key: string) => {
+  if (!isLocked(key)) {
+    props.onItemClick(key);
+  }
+};
+
+const handleScroll = (e: Event) => {
+  if (!props.onReachEnd) {
+    return;
+  }
+
+  const target = e.currentTarget as HTMLDivElement;
+  const { scrollTop, scrollHeight, clientHeight } = target;
+  // Trigger load more when scrolled to bottom
+  if (scrollHeight - scrollTop - clientHeight < 50) {
+    props.onReachEnd();
+  }
+};
+</script>
+
+<style module lang="scss">
+@use '../../../../styles/mixins/scrollbar' as scrollbar;
+
+.list {
+  &__container {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+
+    @include scrollbar.scrollbar-default;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    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);
+      }
+    }
+
+    &--locked {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &__checkbox-wrapper {
+    margin-right: 8px;
+  }
+
+  &__checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+    color: #fff;
+    border: 2px solid #d9d9d9;
+
+    &--checked {
+      color: var(--checkbox-color-selected);
+      border-color: var(--checkbox-color-selected);
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__avatar {
+    margin-right: 8px;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    color: var(--text-color-primary);
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    font-size: 14px;
+
+    color: var(--text-color-secondary);
+  }
+
+  &__empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    font-size: 14px;
+
+    color: var(--text-color-secondary);
+  }
+}
+
+.list__end-marker {
+  height: 1px;
+  opacity: 0;
+}
+</style>

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

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

package/src/components/UserPicker/components/SearchBar/SearchBar.vue

@@ -0,0 +1,97 @@
+<template>
+  <div :class="$style['search__bar']">
+    <div :class="$style['search__input-wrapper']">
+      <IconSearch name="search" :class="$style.search__icon" />
+      <input
+        type="text"
+        :class="$style.search__input"
+        :placeholder="placeholder"
+        :value="value"
+        @input="handleChange"
+      />
+      <IconClose v-if="value" name="close" :class="$style['search__clear-icon']" size="12px" @click="handleClear" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps } from 'vue';
+import { TUIInput, IconSearch, IconClose } from '@tencentcloud/uikit-base-component-vue3';
+
+interface SearchBarProps {
+  placeholder?: string;
+  onSearch: (value: string) => void;
+}
+
+const props = defineProps<SearchBarProps>();
+
+const value = ref<string>('');
+
+const handleChange = (e: any) => {
+  console.log('handleChange', e);
+  const target = e.target as HTMLInputElement;
+  const newValue = target.value;
+  value.value = newValue;
+  props.onSearch(newValue);
+};
+
+const handleClear = () => {
+  value.value = '';
+  props.onSearch('');
+};
+</script>
+
+<style module lang="scss">
+.search {
+  &__bar {
+    padding: 8px 0;
+  }
+
+  &__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: 16px;
+    padding: 0 12px;
+    height: 32px;
+    transition: background-color 0.3s;
+
+    background-color: var(--bg-color-input);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: 8px;
+
+    color: var(--text-color-secondary);
+  }
+
+  &__input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-size: 14px;
+    outline: none;
+
+    color: var(--text-color-primary);
+
+    &::placeholder {
+      color: var(--text-color-secondary);
+    }
+  }
+
+  &__clear-icon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 2px;
+
+    color: var(--text-color-primary);
+
+    &:hover {
+      color: var(--text-color-secondary);
+    }
+  }
+}
+</style>

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

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