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

package/src/components/ContactList/ContactListItem/FriendApplicationItem/FriendApplicationItem.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    :class="friendApplicationItemClasses"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space="handleClick"
+  >
+    <div class="friendApplicationItem__avatar">
+      <Avatar
+        :src="application.avatar"
+        :alt="application.nick || application.userID"
+      />
+    </div>
+    <div class="friendApplicationItem__content">
+      <div class="friendApplicationItem__name">
+        {{ application.nick || application.userID }}
+      </div>
+      <div class="friendApplicationItem__text">
+        {{ t('TUIContact.Request to add you as friend') }}
+      </div>
+    </div>
+    <div class="friendApplicationItem__actions">
+      <TUIButton
+        type="primary"
+        size="small"
+        @click.stop="handleAccept"
+      >
+        {{ t('TUIContact.Agree') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import type { FriendApplicationItemProps } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<FriendApplicationItemProps>(), {});
+
+const emit = defineEmits<{
+  click: [application: any];
+  action: [action: 'accept' | 'refuse', application: any];
+}>();
+
+const { t } = useUIKit();
+const { acceptFriendApplication } = useContactListState();
+
+const friendApplicationItemClasses = computed(() => [
+  'friendApplicationItem',
+  {
+    'friendApplicationItem--active': props.isActive,
+  },
+]);
+
+const handleClick = () => {
+  emit('click', props.application);
+};
+
+const handleAccept = () => {
+  acceptFriendApplication(props.application);
+  emit('action', 'accept', props.application);
+};
+</script>
+
+<style scoped lang="scss">
+@import './FriendApplicationItem.scss';
+</style>

package/src/components/ContactList/ContactListItem/FriendApplicationItem/index.ts

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

package/src/components/ContactList/ContactListItem/FriendItem/FriendItem.scss

@@ -0,0 +1,39 @@
+.friend-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--bg-color-secondary);
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--bg-color-secondary);
+  }
+
+  &--active {
+    background-color: var(--list-color-hover);
+  }
+
+  &__avatar {
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: 14px;
+    color: var(--text-color-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/ContactList/ContactListItem/FriendItem/FriendItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :class="friendItemClasses"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space="handleClick"
+  >
+    <div class="friend-item__avatar">
+      <Avatar
+        :src="friend.avatar"
+        :alt="friend.remark || friend?.nick || friend.userID"
+      />
+    </div>
+    <div class="friend-item__content">
+      <div class="friend-item__name">
+        {{ friend.remark || friend?.nick || friend.userID }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Avatar } from '../../../Avatar';
+import type { FriendItemProps } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<FriendItemProps>(), {});
+
+const emit = defineEmits<{
+  click: [friend: any];
+}>();
+
+const friendItemClasses = computed(() => [
+  'friend-item',
+  {
+    'friend-item--active': props.isActive,
+  },
+]);
+
+const handleClick = () => {
+  emit('click', props.friend);
+};
+</script>
+
+<style scoped lang="scss">
+@import './FriendItem.scss';
+</style>

package/src/components/ContactList/ContactListItem/FriendItem/index.ts

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

package/src/components/ContactList/ContactListItem/GroupApplicationItem/GroupApplicationItem.scss

@@ -0,0 +1,57 @@
+.groupApplicationItem {
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--list-color-focused);
+  }
+
+  &--active {
+    background-color: var(--list-color-hover);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &__avatar {
+    flex-shrink: 0;
+  }
+
+  &__content {
+    display: flex;
+    gap: 4px;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-color-primary);
+  }
+
+  &__text {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-color-tertiary);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+  }
+}

package/src/components/ContactList/ContactListItem/GroupApplicationItem/GroupApplicationItem.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    :class="groupApplicationItemClasses"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space="handleClick"
+  >
+    <div class="groupApplicationItem__avatar">
+      <Avatar
+        :alt="displayName"
+      />
+    </div>
+    <div class="groupApplicationItem__content">
+      <div class="groupApplicationItem__name">
+        {{ displayName }}
+      </div>
+      <div class="groupApplicationItem__text">
+        {{ applicationText }}
+      </div>
+    </div>
+    <div class="groupApplicationItem__actions">
+      <TUIButton
+        type="primary"
+        size="small"
+        @click.stop="handleAction('accept', $event)"
+      >
+        {{ t('TUIContact.Agree') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import type { GroupApplicationItemProps } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<GroupApplicationItemProps>(), {});
+
+const emit = defineEmits<{
+  click: [application: any];
+  action: [action: 'accept' | 'refuse', application: any];
+}>();
+
+const { t } = useUIKit();
+const { acceptGroupApplication } = useContactListState();
+
+const displayName = computed(() => props.application.applicantNick || props.application.applicant);
+const groupName = computed(() => props.application.groupName || props.application.groupID);
+const applicationText = computed(() =>
+  props.application.applicationType === 0
+    ? `${t('TUIContact.Apply to join group')}"${groupName.value}"`
+    : `${t('TUIContact.Invite you to join group')}"${groupName.value}"`,
+);
+
+const groupApplicationItemClasses = computed(() => [
+  'groupApplicationItem',
+  {
+    'groupApplicationItem--active': props.isActive,
+  },
+]);
+
+const handleClick = () => {
+  emit('click', props.application);
+};
+
+const handleAction = (action: 'accept' | 'refuse', event: Event) => {
+  event.stopPropagation();
+  acceptGroupApplication({ application: props.application });
+  emit('action', action, props.application);
+};
+</script>
+
+<style scoped lang="scss">
+@import './GroupApplicationItem.scss';
+</style>

package/src/components/ContactList/ContactListItem/GroupApplicationItem/index.ts

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

package/src/components/ContactList/ContactListItem/GroupItem/GroupItem.scss

@@ -0,0 +1,39 @@
+.group-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--bg-color-secondary);
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--bg-color-secondary);
+  }
+
+  &--active {
+    background-color: var(--list-color-hover);
+  }
+
+  &__avatar {
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: 14px;
+    color: var(--text-color-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/ContactList/ContactListItem/GroupItem/GroupItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :class="groupItemClasses"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space="handleClick"
+  >
+    <div class="group-item__avatar">
+      <Avatar
+        :src="group.avatar"
+        :alt="group.name || group.groupID"
+      />
+    </div>
+    <div class="group-item__content">
+      <div class="group-item__name">
+        {{ group.name || group.groupID }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Avatar } from '../../../Avatar';
+import type { GroupItemProps } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<GroupItemProps>(), {});
+
+const emit = defineEmits<{
+  click: [group: any];
+}>();
+
+const groupItemClasses = computed(() => [
+  'group-item',
+  {
+    'group-item--active': props.isActive,
+  },
+]);
+
+const handleClick = () => {
+  emit('click', props.group);
+};
+</script>
+
+<style scoped lang="scss">
+@import './GroupItem.scss';
+</style>

package/src/components/ContactList/ContactListItem/GroupItem/index.ts

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

package/src/components/ContactList/ContactListItem/index.ts

@@ -0,0 +1,6 @@
+export { default as ContactListItem } from './ContactListItem.vue';
+export * from './FriendItem';
+export * from './GroupItem';
+export * from './BlacklistItem';
+export * from './FriendApplicationItem';
+export * from './GroupApplicationItem';

package/src/components/ContactList/ContactSearch/ContactSearch.scss

@@ -0,0 +1,58 @@
+.contact-search {
+  position: relative;
+  background-color: var(--bg-color-operate);
+
+  &__pre-search {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    gap: 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  &__add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background-color: var(--bg-color-input);
+    color: var(--text-color-primary);
+  }
+
+  &__label {
+    font-size: 14px;
+    color: var(--text-color-primary);
+  }
+
+  &--active {
+    background-color: var(--bg-color-operate);
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+:deep(.contact-search__search-bar-box) {
+  display: flex;
+  align-items: center;
+  padding: 2px 20px 2px 0;
+}
+
+:deep(.contact-search__search-bar) {
+  flex: 1;
+}
+
+:deep(.contact-search__cancel) {
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--text-color-primary);
+  }
+}

package/src/components/ContactList/ContactSearch/ContactSearch.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    :class="['contact-search', { 'contact-search--active': isShowSearch }]"
+  >
+    <div
+      v-if="!isShowSearch"
+      class="contact-search__pre-search"
+      @click="openContactSearch"
+    >
+      <label
+        htmlFor="contactSearch__label"
+        class="contact-search__add"
+      >
+        <IconSearchMore />
+      </label>
+      <span class="contact-search__label">{{ t('TUIContact.Add friend/group') }}</span>
+    </div>
+
+    <Search
+      v-else
+      :variant="VariantType.EXACT"
+      :SearchBar="CustomSearchBar"
+      :SearchResultsPresearch="CustomSearchResultsPresearch"
+      @keyword-change="handleKeywordChange"
+      @result-item-click="handleResultItemClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue';
+import { IconSearchMore, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useSearchState } from '../../../states/SearchState';
+import { VariantType, SearchType, ContactItemType } from '../../../types';
+import { Search, SearchBar } from '../../Search';
+import type {
+  SearchCloudUsersResultItem,
+  SearchCloudGroupsResultItem,
+  SearchResultItemType,
+  SearchBarProps,
+} from '../../../types';
+
+const emit = defineEmits<{
+  'result-click': [item: any];
+  'keyword-change': [keyword: string];
+}>();
+
+const { t } = useUIKit();
+const { setKeyword } = useSearchState();
+
+const isShowSearch = ref(false);
+
+const handleResultItemClick = (item: SearchResultItemType, type: SearchType) => {
+  if (type === SearchType.USER) {
+    emit('result-click', {
+      type: ContactItemType.SEARCH_USER,
+      data: (item as SearchCloudUsersResultItem).profile,
+    });
+  }
+
+  if (type === SearchType.GROUP) {
+    emit('result-click', {
+      type: ContactItemType.SEARCH_GROUP,
+      data: (item as SearchCloudGroupsResultItem).groupInfo,
+    });
+  }
+};
+
+const handleCancel = () => {
+  setKeyword('');
+  isShowSearch.value = false;
+};
+
+const openContactSearch = () => {
+  isShowSearch.value = true;
+};
+
+const handleKeywordChange = (keyword: string) => {
+  emit('keyword-change', keyword);
+};
+
+const CustomSearchResultsPresearch = () => null;
+
+const CustomSearchBar = (searchBarProps: SearchBarProps) => h('div', { class: 'contact-search__search-bar-box' }, [
+  h(SearchBar, {
+    class: 'contact-search__search-bar',
+    ...searchBarProps,
+  }),
+  h('span', {
+    class: 'contact-search__cancel',
+    onClick: handleCancel,
+  }, t('TUIContact.Cancel')),
+]);
+</script>
+
+<style scoped lang="scss">
+@import './ContactSearch.scss';
+</style>

package/src/components/ContactList/ContactSearch/index.ts

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

package/src/components/ContactList/constants/const.ts

@@ -0,0 +1,7 @@
+const TEXTAREA_LENGTH_LIMIT = 200;
+const UNREAD_COUNT_LIMIT = 99;
+
+export {
+  TEXTAREA_LENGTH_LIMIT,
+  UNREAD_COUNT_LIMIT,
+};

package/src/components/ContactList/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useContactList';

package/src/components/ContactList/hooks/useContactList.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import type { ContactItemType, ContactGroupItem } from '../../../types/contact';
+
+const activeContact: Ref<ContactGroupItem | undefined> = ref(undefined);
+const contactGroupTitles: Ref<Partial<Record<ContactItemType, string>>> = ref({});
+
+const setActiveContact = (contactInfo: ContactGroupItem | undefined) => {
+  activeContact.value = contactInfo;
+};
+
+const setContactGroupTitles = (groups: Partial<Record<ContactItemType, string>>) => {
+  contactGroupTitles.value = groups;
+};
+
+export const useContactList = () => ({
+  activeContact,
+  setActiveContact,
+  contactGroupTitles,
+  setContactGroupTitles,
+});

package/src/components/ContactList/i18n/en-US.ts

@@ -0,0 +1,77 @@
+export default {
+  TUIContact: {
+  // ContactList component translations
+    'New contacts': 'New contacts',
+    'Group applications': 'Group applications',
+    'My friends': 'My friends',
+    'My groups': 'My groups',
+    'Blacklist': 'Blacklist',
+    'Search contacts': 'Search contacts',
+    'No contacts': 'No contacts',
+    'No Result': 'No Result',
+    'Add friend/group': 'Add friend/group',
+    'Unknown contact type': 'Unknown contact type',
+    'Request to add you as friend': 'Request to add you as friend',
+    'Apply to join group': 'Apply to join group',
+    'Invite you to join group': 'Invite you to join group',
+    'Application status': 'Application status',
+    'Pending': 'Pending',
+    'Application note': 'Application note',
+    'None': 'None',
+    'Verification info': 'Verification info',
+    'Personal signature': 'Personal signature',
+    'Remark name': 'Remark name',
+    'Save': 'Save',
+    'Add to blacklist': 'Add to blacklist',
+    'Send message': 'Send message',
+    'Apply to add friend': 'Apply to add friend',
+    'Add friend failed': 'Add friend failed',
+    'User is already your friend': 'User is already your friend',
+    'Friend request sent, waiting for confirmation': 'Friend request sent, waiting for confirmation',
+    'Application info': 'Application info',
+    'Please enter application info...': 'Please enter application info...',
+    'Group ID': 'Group ID',
+    'Group type': 'Group type',
+    'Group introduction': 'Group introduction',
+    'No introduction': 'No introduction',
+    'Work group': 'Work group',
+    'Public group': 'Public group',
+    'Meeting group': 'Meeting group',
+    'Live group': 'Live group',
+    'Community': 'Community',
+    'Unknown': 'Unknown',
+    'You are already in this group': 'You are already in this group',
+    'Group application sent, waiting for admin approval': 'Group application sent, waiting for admin approval',
+    'Apply to join group failed': 'Apply to join group failed',
+    'Remove from blacklist': 'Remove from blacklist',
+    'dismiss group': 'dismiss group',
+    'quit group': 'quit group',
+    'Enter group chat': 'Enter group chat',
+    'Confirm dismiss group': 'Confirm dismiss group?',
+    'Confirm quit group': 'Confirm quit group?',
+    'Agree': 'Agree',
+    'Refuse': 'Refuse',
+    'Accept': 'Accept',
+    'Submit': 'Submit',
+    'Cancel': 'Cancel',
+    'Delete friend': 'Delete friend',
+    'Confirm delete friend': 'Confirm delete friend?',
+    'Friends': 'Friends',
+    'User': 'User',
+    'ID': 'ID',
+    'Send Message': 'Send Message',
+    'Signature': 'Signature',
+    'Blocked List': 'Blocked List',
+    'Group List': 'Group List',
+    'Enter a userID': 'Enter a userID',
+    'Enter the verification info': 'Enter the verification info',
+    'Request to join': 'Request to join',
+    'Requested': 'Requested',
+    'Handled': 'Handled',
+    'remark': 'remark',
+    'block': 'block',
+    'waiting for verification': 'waiting for verification',
+    'verification info': 'verification info',
+    'Send application': 'Send application',
+  },
+};

package/src/components/ContactList/i18n/index.ts

@@ -0,0 +1,4 @@
+import enResource from './en-US';
+import zhResource from './zh-CN';
+
+export { enResource, zhResource };