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

package/src/components/ChatSetting/SettingItem/SettingItem.vue

@@ -0,0 +1,528 @@
+<script lang="ts" setup>
+import { ref, nextTick, useCssModule } from 'vue';
+import cs from 'classnames';
+import { IconEditNameCard, TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+// Base props shared by all types
+interface BaseSettingItemProps {
+  label: string;
+  disabled?: boolean;
+}
+
+// Switch type props
+interface SwitchSettingItemProps extends BaseSettingItemProps {
+  type: 'switch';
+  value: boolean;
+}
+
+// Input type props
+interface InputSettingItemProps extends BaseSettingItemProps {
+  type: 'input';
+  value?: string;
+  placeholder?: string;
+  editable?: boolean;
+  validator?: (value: string, originalValue?: string) => string | null;
+}
+
+// Textarea type props
+interface TextareaSettingItemProps extends BaseSettingItemProps {
+  type: 'textarea';
+  value?: string;
+  placeholder?: string;
+  editable?: boolean;
+  rows?: number;
+  validator?: (value: string, originalValue?: string) => string | null;
+}
+
+// Display type props (read-only)
+interface DisplaySettingItemProps extends BaseSettingItemProps {
+  type: 'display';
+  value?: string;
+  placeholder?: string;
+}
+
+// Union type for all setting item props
+type SettingItemProps =
+  | SwitchSettingItemProps
+  | InputSettingItemProps
+  | TextareaSettingItemProps
+  | DisplaySettingItemProps;
+
+const props = defineProps(['label', 'type', 'value', 'disabled', 'placeholder', 'editable', 'validator', 'rows']);
+
+const emit = defineEmits(['change', 'confirm']);
+
+const SettingItemType = {
+  SWITCH: 'switch',
+  INPUT: 'input',
+  TEXTAREA: 'textarea',
+  DISPLAY: 'display',
+} as const;
+
+
+const { t } = useUIKit();
+const classes = useCssModule();
+
+// Edit state management
+const isEditing = ref(false);
+const editValue = ref('');
+const errorMessage = ref<string | null>(null);
+const inputRef = ref<HTMLInputElement>();
+const textareaRef = ref<HTMLTextAreaElement>();
+
+// Validate input value
+function validateValue(value: string) {
+  if (props.type === SettingItemType.INPUT || props.type === SettingItemType.TEXTAREA) {
+    const { validator } = props as InputSettingItemProps | TextareaSettingItemProps;
+    if (validator) {
+      return validator(value, props.value);
+    }
+  }
+  return null;
+}
+
+// Handle value change with validation
+function handleValueChange(event: Event) {
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+  const newValue = target.value;
+  editValue.value = newValue;
+  const error = validateValue(newValue);
+  errorMessage.value = error;
+}
+
+// Start editing
+async function startEdit() {
+  if (props.disabled || (props.type !== SettingItemType.INPUT && props.type !== SettingItemType.TEXTAREA)) {
+    return;
+  }
+
+  const currentValue = (props as InputSettingItemProps | TextareaSettingItemProps).value || '';
+  editValue.value = currentValue;
+  isEditing.value = true;
+
+  await nextTick();
+
+  if (props.type === SettingItemType.INPUT && inputRef.value) {
+    inputRef.value.focus();
+    inputRef.value.select();
+  } else if (props.type === SettingItemType.TEXTAREA && textareaRef.value) {
+    textareaRef.value.focus();
+    textareaRef.value.select();
+  }
+}
+
+// Cancel editing
+function cancelEdit() {
+  isEditing.value = false;
+  editValue.value = '';
+  errorMessage.value = null;
+}
+
+// Confirm editing
+function confirmEdit() {
+  if (props.type === SettingItemType.INPUT || props.type === SettingItemType.TEXTAREA) {
+    if (!errorMessage.value) {
+      emit('confirm', editValue.value);
+    }
+  }
+  isEditing.value = false;
+  editValue.value = '';
+  errorMessage.value = null;
+}
+
+// Handle key press
+function handleKeyPress(event: KeyboardEvent) {
+  if (event.key === 'Enter' && !event.shiftKey && props.type === SettingItemType.INPUT) {
+    event.preventDefault();
+    if (!errorMessage.value) {
+      confirmEdit();
+    }
+  } else if (event.key === 'Escape') {
+    event.preventDefault();
+    cancelEdit();
+  }
+}
+
+// Handle switch change
+function handleSwitchChange(event: Event) {
+  if (props.type === SettingItemType.SWITCH) {
+    const target = event.target as HTMLInputElement;
+    emit('change', target.checked);
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      classes['setting-item'],
+      {
+        [classes[`setting-item--${type}`]]: !!type,
+        [classes['setting-item--disabled']]: disabled,
+        [classes['setting-item--editing']]: isEditing,
+        [classes['setting-item--error']]: !!errorMessage,
+      }
+    ]"
+  >
+    <div :class="classes['setting-item__label']">
+      {{ label }}
+    </div>
+    <div :class="classes['setting-item__content-wrapper']">
+      <!-- Switch type content -->
+      <label
+        v-if="type === SettingItemType.SWITCH"
+        :class="classes['setting-item__switch']"
+      >
+        <input
+          :class="classes['setting-item__switch-input']"
+          type="checkbox"
+          :checked="value"
+          :disabled="disabled"
+          @change="handleSwitchChange"
+        >
+        <span :class="classes['setting-item__switch-slider']" />
+      </label>
+
+      <!-- Input type content -->
+      <template v-else-if="type === SettingItemType.INPUT">
+        <div
+          v-if="isEditing && editable"
+          :class="classes['setting-item__edit-container']"
+        >
+          <div>
+            <input
+              ref="inputRef"
+              :class="[
+                classes['setting-item__input'],
+                { [classes['setting-item__input--error']]: !!errorMessage }
+              ]"
+              type="text"
+              :value="editValue"
+              :placeholder="placeholder"
+              :disabled="disabled"
+              @input="handleValueChange"
+              @keydown="handleKeyPress"
+            >
+            <div
+              v-if="errorMessage"
+              :class="classes['setting-item__error']"
+            >
+              {{ errorMessage }}
+            </div>
+          </div>
+          <div :class="classes['setting-item__actions']">
+            <TUIButton
+              :class="classes['setting-item__btn--cancel']"
+              color="gray"
+              radius="rect"
+              :disabled="disabled"
+              @click="cancelEdit"
+            >
+              {{ t('ChatSetting.cancel') }}
+            </TUIButton>
+            <TUIButton
+              :class="classes['setting-item__btn--confirm']"
+              color="blue"
+              radius="rect"
+              :disabled="disabled || !!errorMessage || props.value === editValue"
+              @click="confirmEdit"
+            >
+              {{ t('ChatSetting.confirm') }}
+            </TUIButton>
+          </div>
+        </div>
+        <div
+          v-else
+          :class="classes['setting-item__content']"
+        >
+          <span :class="[classes['setting-item__value'], { [classes['setting-item__value--placeholder']]: !value }]">
+            {{ value || placeholder || t('ChatSetting.not_set') }}
+          </span>
+          <IconEditNameCard
+            v-if="editable"
+            :class="cs(classes['setting-item__edit-btn'], 'unique-icon-btn')"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="startEdit"
+          />
+        </div>
+      </template>
+
+      <!-- Textarea type content -->
+      <template v-else-if="type === SettingItemType.TEXTAREA">
+        <div
+          v-if="isEditing && editable"
+          :class="classes['setting-item__edit-container']"
+        >
+          <div>
+            <textarea
+              ref="textareaRef"
+              :class="[
+                classes['setting-item__textarea'],
+                { [classes['setting-item__textarea--error']]: !!errorMessage }
+              ]"
+              :value="editValue"
+              :rows="rows || 3"
+              :placeholder="placeholder"
+              :disabled="disabled"
+              @input="handleValueChange"
+              @keydown="handleKeyPress"
+            />
+            <div
+              v-if="errorMessage"
+              :class="classes['setting-item__error']"
+            >
+              {{ errorMessage }}
+            </div>
+          </div>
+          <div :class="classes['setting-item__actions']">
+            <TUIButton
+              :class="classes['setting-item__btn--cancel']"
+              color="gray"
+              radius="rect"
+              :disabled="disabled"
+              @click="cancelEdit"
+            >
+              {{ t('ChatSetting.cancel') }}
+            </TUIButton>
+            <TUIButton
+              :class="classes['setting-item__btn--confirm']"
+              color="blue"
+              radius="rect"
+              :disabled="disabled || !!errorMessage || props.value === editValue"
+              @click="confirmEdit"
+            >
+              {{ t('ChatSetting.confirm') }}
+            </TUIButton>
+          </div>
+        </div>
+        <div
+          v-else
+          :class="classes['setting-item__content']"
+        >
+          <span :class="[classes['setting-item__value'], { [classes['setting-item__value--placeholder']]: !value }]">
+            {{ value || placeholder || t('ChatSetting.not_set') }}
+          </span>
+          <IconEditNameCard
+            v-if="editable"
+            :class="cs(classes['setting-item__edit-btn'], 'unique-icon-btn')"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="startEdit"
+          />
+        </div>
+      </template>
+
+      <!-- Display type content -->
+      <span
+        v-else-if="type === SettingItemType.DISPLAY"
+        :class="classes['setting-item__value']"
+      >
+        {{ value || placeholder || t('ChatSetting.not_set') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.setting-item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 10px 0;
+  color: var(--text-color-primary);
+  border-bottom: 0.5px solid var(--stroke-color-module);
+  gap: 8px;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--disabled {
+    color: var(--text-color-disabled);
+
+    pointer-events: none;
+
+    .setting-item__switch-slider {
+      background-color: var(--fill-color-disabled);
+    }
+  }
+
+  &--switch {
+    gap: 16px;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+  }
+
+  &__content-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 24px;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    gap: 8px;
+  }
+
+  &__value {
+    flex: 1;
+    font-size: 14px;
+    word-break: break-word;
+
+    color: var(--text-color-secondary);
+
+    &--placeholder {
+      font-style: italic;
+      color: var(--text-color-tertiary);
+    }
+  }
+
+  // Switch styles
+  &__switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    cursor: pointer;
+  }
+
+  &__switch-input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .setting-item__switch-slider {
+      background-color: var(--switch-color-on);
+
+      &:before {
+        transform: translateX(20px);
+      }
+    }
+
+    &:disabled + .setting-item__switch-slider {
+      cursor: not-allowed;
+
+      background-color: var(--fill-color-disabled);
+    }
+  }
+
+  &__switch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 20px;
+    transition: 0.2s;
+
+    background-color: var(--switch-color-off);
+
+    &:before {
+      position: absolute;
+      content: "";
+      height: 16px;
+      width: 16px;
+      left: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      transition: 0.2s;
+
+      background-color: white;
+    }
+  }
+
+  // Edit container styles
+  &__edit-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+  }
+
+  &__input,
+  &__textarea {
+    width: 100%;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.2s;
+
+    background-color: var(--fill-color-primary);
+    border: 1px solid var(--stroke-color-module);
+    color: var(--text-color-primary);
+
+    &:focus {
+      outline: none;
+
+      border-color: var(--primary-color);
+    }
+
+    &::placeholder {
+      color: var(--text-color-placeholder);
+    }
+
+    &--error {
+      border-color: var(--error-color);
+    }
+  }
+
+  &__textarea {
+    resize: vertical;
+    min-height: 60px;
+  }
+
+  &__error {
+    font-size: 12px;
+    margin-top: 4px;
+
+    color: var(--error-color);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  &__btn--cancel,
+  &__btn--confirm {
+    min-width: 60px;
+    height: 32px;
+    font-size: 12px;
+  }
+}
+</style>
+
+<style lang="scss">
+.unique-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  color: var(--text-color-secondary);
+  &:hover {
+    color: var(--text-color-button);
+    background-color: var(--button-color-primary-hover);
+  }
+  &:active {
+    background-color: var(--button-color-primary-active);
+  }
+}
+</style>

package/src/components/ChatSetting/SettingItem/index.ts

@@ -0,0 +1,3 @@
+import SettingItem from './SettingItem.vue';
+
+export { SettingItem };

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

@@ -0,0 +1,115 @@
+const ChatSetting = {
+  // SettingItem
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  not_set: 'Not Set',
+
+  // C2CChatSetting
+  user_id: 'User ID',
+  nickname: 'Nickname',
+  nickname_placeholder: 'No nickname set',
+  signature: 'Signature',
+  remark: 'Remark',
+  remark_placeholder: 'No remark set',
+  remark_update_success: 'Remark updated successfully',
+  pin_conversation: 'Pin Conversation',
+  mute_conversation: 'Mute Conversation',
+  copied: 'Copied',
+
+  // GroupChatSetting
+  remove_member_dialog_title: 'Remove Group Member',
+  add_member_dialog_title: 'Add Group Member',
+  failed_to_load_more_members: 'Failed to load more members',
+  failed_to_remove_member: 'Failed to remove member',
+  me: 'Me',
+
+  // GroupInfo
+  group_id: 'Group ID',
+  group_name: 'Group Name',
+  group_name_placeholder: 'No group name set',
+  group_introduction: 'Group Introduction',
+  group_introduction_placeholder: 'No group introduction',
+  group_notification: 'Group Notification',
+  group_notification_placeholder: 'No group notification',
+  my_name_card: 'My Name Card',
+  my_name_card_placeholder: 'No name card set',
+  group_type: 'Group Type',
+  group_type_work: 'Work Group',
+  group_type_public: 'Public Group',
+  group_type_meeting: 'Meeting Group',
+  group_type_community: 'Community',
+  group_type_avchatroom: 'Live Group',
+  group_type_unknown: 'Unknown Type',
+
+  // Validation messages
+  group_name_required_string: 'Group name must be a string',
+  group_name_required: 'Group name cannot be empty',
+  group_name_max_length: 'Group name cannot exceed 25 characters',
+  group_name_unchanged: 'Please modify the group name before submitting',
+  group_introduction_required_string: 'Group introduction must be a string',
+  group_introduction_max_length: 'Group introduction cannot exceed 100 characters',
+  group_introduction_unchanged: 'Please modify the group introduction before submitting',
+  group_notification_required_string: 'Group notification must be a string',
+  group_notification_max_length: 'Group notification cannot exceed 100 characters',
+  group_notification_unchanged: 'Please modify the group notification before submitting',
+  group_name_card_required_string: 'Name card must be a string',
+  group_name_card_unchanged: 'Please modify the name card before submitting',
+
+  // Success/Error messages
+  group_name_update_success: 'Group name updated successfully',
+  group_name_update_failed: 'Failed to update group name',
+  group_introduction_update_success: 'Group introduction updated successfully',
+  group_introduction_update_failed: 'Failed to update group introduction',
+  group_notification_update_success: 'Group notification updated successfully',
+  group_notification_update_failed: 'Failed to update group notification',
+  group_name_card_update_success: 'Name card updated successfully',
+  group_name_card_update_failed: 'Failed to update name card',
+  group_member_add_success: 'Member added successfully',
+  group_member_add_failed: 'Failed to add member',
+  group_member_add_partially_failed: 'Partially member added failed',
+  group_member_remove_success: 'Member removed successfully',
+  group_member_remove_failed: 'Failed to remove member',
+
+  // GroupMembers
+  group_members: 'Group Members',
+  add: 'Add',
+  remove: 'Remove',
+  loading: 'Loading...',
+  all_members_shown: 'All members shown',
+  collapse: 'Collapse',
+
+  // GroupActions
+  transfer_group_owner: 'Transfer Group Owner',
+  quit_group: 'Quit Group',
+  dismiss_group: 'Dismiss Group',
+  confirm_quit_group: 'Are you sure you want to quit the group?',
+  select_new_owner_error: 'Please select a new owner',
+  only_one_owner_error: 'Only one member can be selected as the new owner',
+  transfer_owner_success: 'Ownership transferred successfully',
+  transfer_owner_failed: 'Failed to transfer ownership',
+  quit_group_success: 'Successfully left the group',
+  quit_group_failed: 'Failed to leave the group',
+
+  // GroupManagement
+  group_management: 'Group Management',
+  set_admin: 'Set Admin',
+  unset_admin: 'Remove Admin',
+  mute_members: 'Mute Members',
+  unmute_members: 'Unmute Members',
+  operation_success: 'Operation completed successfully',
+  operation_failed: 'Operation failed',
+  all_members_muted: 'All members muted',
+  all_members_unmuted: 'All members unmuted',
+  mute_all_failed: 'Failed to update mute all setting',
+  group_admin: 'Group Admin',
+  mute_management: 'Mute Management',
+  mute_all_members: 'Mute All Members',
+  mute_all_members_description: 'When enabled, only the group owner and admins can speak',
+
+  // GroupMemberRole
+  group_member_role_owner: 'Group Owner',
+  group_member_role_admin: 'Admin',
+  group_member_role_member: 'Member',
+};
+
+export default ChatSetting;

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

@@ -0,0 +1,11 @@
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+export {
+  resources,
+}