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

package/dist/components/ChatSetting/GroupChatSetting/GroupMembers/GroupMembers.js

@@ -0,0 +1,250 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, createElementBlock, createCommentVNode, unref, openBlock, normalizeClass, createElementVNode, createBlock, createTextVNode, toDisplayString, Fragment, renderList, withDirectives, createVNode, vShow } from "vue";
+import { useUIKit, IconArrowStrokeRight, IconAdd, IconMinus } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../../../Avatar/Avatar.js";
+import { useGroupSettingState } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { GroupPermission, GroupMemberRole } from "../../../../states/GroupSettingState/types.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "group-members__header" };
+const _hoisted_2 = { class: "group-members__title" };
+const _hoisted_3 = {
+  key: 0,
+  class: "group-members__count"
+};
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { class: "group-members__name" };
+const _hoisted_6 = { class: "group-members__action-btn__icon" };
+const _hoisted_7 = { class: "group-members__action-btn__label" };
+const _hoisted_8 = { class: "group-members__action-btn__icon" };
+const _hoisted_9 = { class: "group-members__action-btn__label" };
+const _hoisted_10 = {
+  key: 2,
+  class: "group-members__loading"
+};
+const _hoisted_11 = { class: "group-members__loading-text" };
+const _hoisted_12 = {
+  key: 3,
+  class: "group-members__no-more"
+};
+const _hoisted_13 = { class: "group-members__no-more-text" };
+const _hoisted_14 = {
+  key: 0,
+  class: "group-members__collapse"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupMembers",
+  props: {
+    showAddButton: { type: Boolean, default: true },
+    showRemoveButton: { type: Boolean, default: true },
+    title: { default: void 0 },
+    members: {},
+    memberCount: {},
+    maxDisplayCount: { default: 6 },
+    hiddenMemberCount: { type: Boolean, default: false },
+    expandable: { type: Boolean, default: true },
+    onAddButtonClick: {},
+    onRemoveButtonClick: {},
+    onMemberClick: {},
+    onViewAll: {},
+    onReachEnd: {},
+    loading: { type: Boolean, default: false },
+    hasMore: { type: Boolean, default: true },
+    className: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const getRolePriority = (role) => {
+      switch (role) {
+        case GroupMemberRole.OWNER:
+          return 100;
+        case GroupMemberRole.ADMIN:
+          return 80;
+        case GroupMemberRole.COMMON:
+          return 60;
+        default:
+          return 0;
+      }
+    };
+    const isExpanded = ref(false);
+    const scrollContainerRef = ref();
+    const { hasPermission } = useGroupSettingState();
+    const members = computed(() => props.members);
+    const memberCount = computed(() => {
+      var _a;
+      return props.memberCount || ((_a = members.value) == null ? void 0 : _a.length);
+    });
+    const sortedMembers = computed(() => {
+      if (!members.value || members.value.length === 0) {
+        return [];
+      }
+      return [...members.value].sort((a, b) => {
+        const priorityA = getRolePriority(a.role);
+        const priorityB = getRolePriority(b.role);
+        return priorityB - priorityA;
+      });
+    });
+    const displayMiniMembers = computed(
+      () => isExpanded.value ? sortedMembers.value : sortedMembers.value.slice(0, props.maxDisplayCount)
+    );
+    const skeletonItems = computed(() => {
+      if (members.value !== void 0) {
+        return [];
+      }
+      const skeletonCount = Math.min(props.memberCount || props.maxDisplayCount, props.maxDisplayCount);
+      return Array.from({ length: skeletonCount }, (_, index) => index);
+    });
+    const shouldShowExpand = computed(
+      () => props.expandable && sortedMembers.value.length > props.maxDisplayCount
+    );
+    const title = computed(() => props.title || t("ChatSetting.group_members"));
+    const handleScroll = () => {
+      if (!isExpanded.value || !props.onReachEnd || !props.hasMore || props.loading) {
+        return;
+      }
+      const container = scrollContainerRef.value;
+      if (!container) {
+        return;
+      }
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const threshold = 100;
+      if (scrollHeight - scrollTop - clientHeight < threshold) {
+        props.onReachEnd();
+      }
+    };
+    const handleToggleExpand = () => {
+      var _a;
+      if (isExpanded.value) {
+        isExpanded.value = false;
+      } else {
+        isExpanded.value = true;
+        (_a = props.onViewAll) == null ? void 0 : _a.call(props);
+      }
+    };
+    const handleAddMember = () => {
+      var _a;
+      (_a = props.onAddButtonClick) == null ? void 0 : _a.call(props);
+    };
+    const handleMemberClick = (member) => {
+      var _a;
+      (_a = props.onMemberClick) == null ? void 0 : _a.call(props, member);
+    };
+    const handleRemoveMember = () => {
+      if (props.onRemoveButtonClick) {
+        props.onRemoveButtonClick();
+      }
+    };
+    onMounted(() => {
+      if (isExpanded.value && scrollContainerRef.value) {
+        scrollContainerRef.value.addEventListener("scroll", handleScroll);
+      }
+    });
+    onUnmounted(() => {
+      if (scrollContainerRef.value) {
+        scrollContainerRef.value.removeEventListener("scroll", handleScroll);
+      }
+    });
+    return (_ctx, _cache) => {
+      return unref(hasPermission)(unref(GroupPermission).VIEW_MEMBER_LIST) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([
+          "group-members",
+          _ctx.className
+        ])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createTextVNode(toDisplayString(title.value) + " ", 1),
+            !_ctx.hiddenMemberCount ? (openBlock(), createElementBlock("span", _hoisted_3, " (" + toDisplayString(memberCount.value) + ") ", 1)) : createCommentVNode("", true)
+          ]),
+          shouldShowExpand.value ? (openBlock(), createBlock(unref(IconArrowStrokeRight), {
+            key: 0,
+            class: normalizeClass([
+              "group-members__expand-btn",
+              isExpanded.value && "group-members__expand-btn--expanded"
+            ]),
+            size: "24px",
+            onClick: handleToggleExpand
+          }, null, 8, ["class"])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", {
+          ref: isExpanded.value ? (el) => scrollContainerRef.value = el : void 0,
+          class: normalizeClass([
+            "group-members__grid",
+            isExpanded.value && "group-members__grid--expanded"
+          ])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(skeletonItems.value, (index) => {
+            return openBlock(), createElementBlock("div", {
+              key: `skeleton-${index}`,
+              class: normalizeClass([
+                "group-members__item",
+                "group-members__item--skeleton"
+              ])
+            }, [..._cache[0] || (_cache[0] = [
+              createElementVNode("div", { class: "group-members__skeleton-avatar" }, null, -1),
+              createElementVNode("div", { class: "group-members__skeleton-name" }, null, -1)
+            ])]);
+          }), 128)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(displayMiniMembers.value, (member) => {
+            return withDirectives((openBlock(), createElementBlock("div", {
+              key: member.userID,
+              class: "group-members__item",
+              onClick: ($event) => handleMemberClick(member)
+            }, [
+              createVNode(unref(Avatar), {
+                src: member.avatar,
+                alt: member.nick || member.userID,
+                size: "md"
+              }, null, 8, ["src", "alt"]),
+              createElementVNode("div", _hoisted_5, toDisplayString(member.nick || member.userID), 1)
+            ], 8, _hoisted_4)), [
+              [vShow, members.value !== void 0]
+            ]);
+          }), 128)),
+          !isExpanded.value && _ctx.showAddButton ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([
+              "group-members__item",
+              "group-members__action-btn"
+            ]),
+            onClick: handleAddMember
+          }, [
+            createElementVNode("div", _hoisted_6, [
+              createVNode(unref(IconAdd))
+            ]),
+            createElementVNode("div", _hoisted_7, toDisplayString(unref(t)("ChatSetting.add")), 1)
+          ])) : createCommentVNode("", true),
+          !isExpanded.value && _ctx.showRemoveButton ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass([
+              "group-members__item",
+              "group-members__action-btn"
+            ]),
+            onClick: handleRemoveMember
+          }, [
+            createElementVNode("div", _hoisted_8, [
+              createVNode(unref(IconMinus))
+            ]),
+            createElementVNode("div", _hoisted_9, toDisplayString(unref(t)("ChatSetting.remove")), 1)
+          ])) : createCommentVNode("", true),
+          isExpanded.value && _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_10, [
+            createElementVNode("div", _hoisted_11, toDisplayString(unref(t)("ChatSetting.loading")), 1)
+          ])) : createCommentVNode("", true),
+          isExpanded.value && !_ctx.hasMore && !_ctx.loading && sortedMembers.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_12, [
+            createElementVNode("div", _hoisted_13, toDisplayString(unref(t)("ChatSetting.all_members_shown")), 1)
+          ])) : createCommentVNode("", true)
+        ], 2),
+        isExpanded.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
+          createElementVNode("div", {
+            class: "group-members__collapse-btn",
+            onClick: handleToggleExpand
+          }, toDisplayString(unref(t)("ChatSetting.collapse")), 1)
+        ])) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const GroupMembers = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c615369a"]]);
+export {
+  GroupMembers as default
+};

package/dist/components/ChatSetting/GroupChatSetting/GroupMembers/GroupMembers.vue.d.ts

@@ -0,0 +1,66 @@
+import { GroupMember } from '../../../../states/GroupSettingState';
+
+interface GroupMembersProps {
+    showAddButton: boolean;
+    showRemoveButton: boolean;
+    title?: string;
+    members?: GroupMember[] | undefined;
+    memberCount?: number;
+    maxDisplayCount?: number;
+    hiddenMemberCount?: boolean;
+    expandable?: boolean;
+    onAddButtonClick?: () => void;
+    onRemoveButtonClick?: () => void;
+    onMemberClick?: (member: GroupMember) => void;
+    onViewAll?: () => void;
+    onReachEnd?: () => void;
+    loading?: boolean;
+    hasMore?: boolean;
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GroupMembersProps>, {
+    title: undefined;
+    hiddenMemberCount: boolean;
+    maxDisplayCount: number;
+    showAddButton: boolean;
+    showRemoveButton: boolean;
+    expandable: boolean;
+    loading: boolean;
+    hasMore: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GroupMembersProps>, {
+    title: undefined;
+    hiddenMemberCount: boolean;
+    maxDisplayCount: number;
+    showAddButton: boolean;
+    showRemoveButton: boolean;
+    expandable: boolean;
+    loading: boolean;
+    hasMore: boolean;
+}>>> & Readonly<{}>, {
+    title: string;
+    hasMore: boolean;
+    loading: boolean;
+    showAddButton: boolean;
+    showRemoveButton: boolean;
+    maxDisplayCount: number;
+    hiddenMemberCount: boolean;
+    expandable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/ChatSetting/GroupChatSetting/GroupMembers/index.d.ts

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

package/dist/components/ChatSetting/GroupChatSetting/GroupMembers/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./GroupMembers.js";
+export {
+  default2 as GroupMembers
+};

package/dist/components/ChatSetting/GroupChatSetting/PersonalSettings/PersonalSettings.js

@@ -0,0 +1,46 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, unref } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import SettingItem from "../../SettingItem/SettingItem.js";
+import { useGroupSettingState } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  class: /* @__PURE__ */ normalizeClass([
+    "personal-settings"
+  ])
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PersonalSettings",
+  setup(__props) {
+    const { t } = useUIKit();
+    const {
+      isMuted,
+      isPinned,
+      setChatMuted,
+      setChatPinned
+    } = useGroupSettingState();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        unref(isMuted) !== void 0 ? (openBlock(), createBlock(unref(SettingItem), {
+          key: 0,
+          class: "personal-settings__mute-switch",
+          label: unref(t)("ChatSetting.mute_conversation"),
+          type: "switch",
+          value: unref(isMuted),
+          onChange: _cache[0] || (_cache[0] = (value) => unref(setChatMuted)(Boolean(value)))
+        }, null, 8, ["label", "value"])) : createCommentVNode("", true),
+        unref(isPinned) !== void 0 ? (openBlock(), createBlock(unref(SettingItem), {
+          key: 1,
+          class: "personal-settings__pin-switch",
+          label: unref(t)("ChatSetting.pin_conversation"),
+          type: "switch",
+          value: unref(isPinned),
+          onChange: _cache[1] || (_cache[1] = (value) => unref(setChatPinned)(Boolean(value)))
+        }, null, 8, ["label", "value"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const PersonalSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c64aee1b"]]);
+export {
+  PersonalSettings as default
+};

package/dist/components/ChatSetting/GroupChatSetting/PersonalSettings/PersonalSettings.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ChatSetting/GroupChatSetting/PersonalSettings/index.d.ts

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

package/dist/components/ChatSetting/GroupChatSetting/PersonalSettings/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./PersonalSettings.js";
+export {
+  default2 as PersonalSettings
+};

package/dist/components/ChatSetting/GroupChatSetting/index.d.ts

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

package/dist/components/ChatSetting/GroupChatSetting/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./GroupChatSetting.js";
+export {
+  default2 as GroupChatSetting
+};