@jari-ace/element-plus-component 0.2.1 → 0.2.2

package/packages/components/userPicker/src/JaUserList.vue

@@ -1,283 +1,317 @@
-<script setup lang="ts">
-
-import {ElEmpty, ElIcon, ElScrollbar, vLoading} from "element-plus";
-import {Check} from "@element-plus/icons-vue";
-import {JaUserInfoTag} from "../../userTag";
-import {computed, nextTick, onUnmounted, ref, watch} from "vue";
-import type {UserReference} from "@jari-ace/app-bolts";
-import throttle from "lodash-es/throttle";
-
-const props = defineProps<{
-    emptyText: string,
-    multiple?: boolean,
-    total: number,
-    pageSize: number,
-    height?: number | string,
-    loading: boolean,
-    users: UserReference[]
-}>();
-const activeIndex = ref(0);
-const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
-const tolerance = 1;
-const isDragSelecting = ref(false);
-const selectedUsers = defineModel<UserReference[] | UserReference | null>({
-    required: true
-});
-const page = defineModel<number>("page", {
-    required: true
-})
-const emits = defineEmits(["arrowKeyDown", "itemClicked"]);
-const handleScroll = () => {
-    const scrollElement = scrollbar.value?.wrapRef;
-    if (scrollElement) {
-        const isBottom = scrollElement.scrollHeight - scrollElement.scrollTop
-                         <= scrollElement.clientHeight + tolerance;
-
-        if (isBottom) {
-            if (page.value < props.total / props.pageSize) {
-                page.value++;
-            }
-            // 在这里执行事件方法
-        }
-    }
-};
-const throttleScroll = throttle(handleScroll, 200);
-
-function switchUserSelect(u: UserReference) {
-    if (props.multiple) {
-        if (!Array.isArray(selectedUsers.value)) {
-            throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
-        }
-        const index = selectedUsers.value.findIndex(su => su.id == u.id);
-        if (index < 0) {
-            selectedUsers.value.push(u);
-        } else {
-            selectedUsers.value.splice(index, 1);
-        }
-    } else {
-        selectedUsers.value = u;
-    }
-}
-
-let clickedUser: UserReference;
-
-function onMouseDown(u: UserReference) {
-    switchUserSelect(u)
-    isDragSelecting.value = true;
-    clickedUser = u;
-}
-
-function onMouseUp() {
-    isDragSelecting.value = false;
-    emits("itemClicked", clickedUser);
-    clickedUser = undefined;
-}
-
-function onMouseEnter(u: UserReference) {
-    if (isDragSelecting.value) {
-        switchUserSelect(u);
-    }
-}
-
-function onInputArrowDown() {
-    if (activeIndex.value < props.users.length - 1) {
-        activeIndex.value++;
-    }
-    scrollToActive();
-}
-
-function onInputArrowUp() {
-    if (activeIndex.value > 0) {
-        activeIndex.value--;
-    }
-    scrollToActive();
-}
-
-const scrollToActive = () => {
-    nextTick(() => {
-        const scrollWrapper = scrollbar.value?.$refs.wrapRef as HTMLElement;
-        const activeItem = scrollWrapper?.querySelectorAll('li')[activeIndex.value] as HTMLElement;
-        if (activeItem && scrollWrapper) {
-            const itemTop = (
-                activeItem as HTMLElement
-            ).offsetTop;
-            const itemBottom = activeItem.offsetTop + activeItem.offsetHeight;
-            const visibleTop = scrollWrapper.scrollTop;
-            const visibleBottom = scrollWrapper.scrollTop + scrollWrapper.clientHeight;
-            if (itemBottom > visibleBottom) {
-                scrollbar.value?.scrollTo(0,
-                    itemBottom - scrollWrapper.clientHeight + activeItem.offsetHeight - 38);
-            } else if (itemTop < visibleTop) {
-                scrollbar.value?.scrollTo(0, itemTop);
-            }
-        }
-    });
-};
-
-const throttleDown = throttle(onInputArrowDown, 100);
-const throttleUp = throttle(onInputArrowUp, 100);
-
-function onMouseOver(event: MouseEvent, index: number) {
-    activeIndex.value = index
-    isDragSelecting.value = event.buttons > 0;
-    if (isDragSelecting.value) {
-        const scrollWrapper = scrollbar.value?.$refs.wrapRef as HTMLElement;
-        const activeItem = event.target as HTMLElement;
-        if (activeItem && scrollWrapper) {
-            const itemTop = (
-                activeItem as HTMLElement
-            ).offsetTop;
-            const itemBottom = activeItem.offsetTop + activeItem.offsetHeight;
-            const visibleTop = scrollWrapper.scrollTop;
-            const visibleBottom = scrollWrapper.scrollTop + scrollWrapper.clientHeight;
-            if (itemBottom + 20 > visibleBottom) {
-                throttleDown();
-            } else if (itemTop < visibleTop + 20) {
-                throttleUp();
-            }
-        }
-    }
-}
-
-function userSelected(u: UserReference) {
-    return selectedForBinding.value.some(su => su.id === u.id);
-}
-
-const userTagTheme = (u: UserReference) => {
-    if (selectedForBinding.value.some(su => su.id === u.id)) {
-        return "autumnOrange"
-    } else {
-        return "skyGray"
-    }
-}
-
-const selectedForBinding = computed(() => {
-    if (props.multiple && Array.isArray(selectedUsers.value)) {
-        return selectedUsers.value;
-    } else if (!props.multiple && !Array.isArray(selectedUsers.value)) {
-        if (selectedUsers.value) {
-            return [selectedUsers.value as UserReference];
-        } else {
-            return [] as UserReference[];
-        }
-    } else {
-        throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
-    }
-})
-
-function getUserItemClass(index: number) {
-    return index === activeIndex.value ? "active" : "";
-}
-
-const listLoading = computed(() => props.loading && props.users.length == 0);
-
-defineExpose({
-    scrollUp() {
-        onInputArrowUp();
-    },
-    scrollDown() {
-        onInputArrowDown();
-    },
-    activeIndex
-})
-
-watch(() => props.users, () => {
-    activeIndex.value = 0;
-}, {
-    deep: false
-})
-
-onUnmounted(() => {
-    throttleDown.cancel()
-    throttleUp.cancel()
-    throttleScroll.cancel()
-})
-</script>
-
-<template>
-    <div class="ja-user-list">
-        <el-scrollbar :height="height" ref="scrollbar" always
-                      @scroll="throttleScroll" v-loading="listLoading">
-            <ul v-if="users.length > 0"
-                @mouseup="onMouseUp">
-                <li v-for="(u, index) in users" :key="u.id"
-                    :class="getUserItemClass(index)"
-                    @mouseenter="isDragSelecting && onMouseEnter(u)"
-                    @mousedown="onMouseDown(u)"
-                    @mouseover="onMouseOver($event, index)">
-                    <el-icon color="#0D6A9F">
-                        <Check v-if="userSelected(u)"/>
-                    </el-icon>
-                    <ja-user-info-tag :user-id="u.id" :full-name="u.fullName"
-                                      :has-avatar="u.hasAvatar"
-                                      placement="left-start"
-                                      :theme="userTagTheme(u)"></ja-user-info-tag>
-                </li>
-            </ul>
-            <el-empty v-else
-                      :description="emptyText"></el-empty>
-        </el-scrollbar>
-        <div class="page-indicator"
-             v-if="users.length > 0">
-            <div class="nb-spinner" v-show="loading"></div>
-            已加载
-            {{ page }}
-            /{{ Math.ceil(total / pageSize) }}页
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.ja-user-list {
-    user-select: none;
-    position: relative;
-    overflow: hidden;
-
-    ul {
-        padding: 0;
-        margin: 0;
-
-        li {
-            height: 38px;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-
-            &.active {
-                background-color: var(--el-color-primary-light-9);
-            }
-        }
-    }
-
-    .page-indicator {
-        position: absolute;
-        right: 20px;
-        bottom: 12px;
-        color: var(--el-color-info-light-5);
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        .nb-spinner {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background-color: transparent;
-            display: inline-block;
-            border: 2px solid #ccc;
-            border-top-color: #009688;
-            animation: 1s spin linear infinite;
-        }
-
-        @keyframes spin {
-            from {
-                transform: rotate(0deg);
-            }
-            to {
-                transform: rotate(360deg);
-            }
-        }
-    }
-}
-
-</style>
+<script setup lang="ts">
+
+import {ElEmpty, ElIcon, ElScrollbar, vLoading} from "element-plus";
+import {Check} from "@element-plus/icons-vue";
+import {JaUserInfoTag} from "../../userTag";
+import {computed, nextTick, onUnmounted, ref, watch} from "vue";
+import type {UserReference} from "@jari-ace/app-bolts";
+import throttle from "lodash-es/throttle";
+
+const props = defineProps<{
+    emptyText: string,
+    multiple?: boolean,
+    total: number,
+    pageSize: number,
+    height?: number | string,
+    loading: boolean,
+    users: UserReference[]
+}>();
+const activeIndex = ref(0);
+const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
+const tolerance = 1;
+const isDragSelecting = ref(false);
+const selectedUsers = defineModel<UserReference[] | UserReference | null>({
+    required: true
+});
+const page = defineModel<number>("page", {
+    required: true
+})
+const emits = defineEmits(["arrowKeyDown", "itemClicked"]);
+const handleScroll = () => {
+    const scrollElement = scrollbar.value?.wrapRef;
+    if (scrollElement) {
+        const isBottom = scrollElement.scrollHeight - scrollElement.scrollTop
+            <= scrollElement.clientHeight + tolerance;
+
+        if (isBottom) {
+            if (page.value < props.total / props.pageSize) {
+                page.value++;
+            }
+            // 在这里执行事件方法
+        }
+    }
+};
+const throttleScroll = throttle(handleScroll, 200);
+
+function switchUserSelect(u: UserReference) {
+    if (props.multiple) {
+        if (!Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+        }
+        const index = selectedUsers.value.findIndex(su => su.id == u.id);
+        if (index < 0) {
+            selectedUsers.value.push(u);
+        } else {
+            selectedUsers.value.splice(index, 1);
+        }
+    } else {
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象或null")
+        }
+        if(selectedUsers.value!==null&&u.id===selectedUsers.value.id){
+            selectedUsers.value = null;
+        }else{
+            selectedUsers.value = u;
+        }
+
+    }
+}
+
+let clickedUser: UserReference;
+
+function onMouseDown(u: UserReference) {
+    switchUserSelect(u)
+    isDragSelecting.value = true;
+    clickedUser = u;
+}
+
+function onMouseUp() {
+    isDragSelecting.value = false;
+    emits("itemClicked", clickedUser);
+    clickedUser = undefined;
+}
+
+function onMouseEnter(u: UserReference) {
+    console.log("点击")
+    if (isDragSelecting.value) {
+        switchUserSelect(u);
+    }
+}
+
+function onInputArrowDown() {
+    if (activeIndex.value < props.users.length - 1) {
+        activeIndex.value++;
+    }
+    scrollToActive();
+}
+
+function onInputArrowUp() {
+    if (activeIndex.value > 0) {
+        activeIndex.value--;
+    }
+    scrollToActive();
+}
+
+const scrollToActive = () => {
+    nextTick(() => {
+        const scrollWrapper = scrollbar.value?.$refs.wrapRef as HTMLElement;
+        const activeItem = scrollWrapper?.querySelectorAll('li')[activeIndex.value] as HTMLElement;
+        if (activeItem && scrollWrapper) {
+            const itemTop = (
+                activeItem as HTMLElement
+            ).offsetTop;
+            const itemBottom = activeItem.offsetTop + activeItem.offsetHeight;
+            const visibleTop = scrollWrapper.scrollTop;
+            const visibleBottom = scrollWrapper.scrollTop + scrollWrapper.clientHeight;
+            if (itemBottom > visibleBottom) {
+                scrollbar.value?.scrollTo(0,
+                    itemBottom - scrollWrapper.clientHeight + activeItem.offsetHeight - 38);
+            } else if (itemTop < visibleTop) {
+                scrollbar.value?.scrollTo(0, itemTop);
+            }
+        }
+    });
+};
+
+const throttleDown = throttle(onInputArrowDown, 100);
+const throttleUp = throttle(onInputArrowUp, 100);
+
+function onMouseOver(event: MouseEvent, index: number) {
+    activeIndex.value = index
+    isDragSelecting.value = event.buttons > 0;
+    if (isDragSelecting.value) {
+        const scrollWrapper = scrollbar.value?.$refs.wrapRef as HTMLElement;
+        const activeItem = event.target as HTMLElement;
+        if (activeItem && scrollWrapper) {
+            const itemTop = (
+                activeItem as HTMLElement
+            ).offsetTop;
+            const itemBottom = activeItem.offsetTop + activeItem.offsetHeight;
+            const visibleTop = scrollWrapper.scrollTop;
+            const visibleBottom = scrollWrapper.scrollTop + scrollWrapper.clientHeight;
+            if (itemBottom + 20 > visibleBottom) {
+                throttleDown();
+            } else if (itemTop < visibleTop + 20) {
+                throttleUp();
+            }
+        }
+    }
+}
+
+function userSelected(u: UserReference) {
+    if (props.multiple) {
+        if (!Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+        }
+        return selectedUsers.value.some(su => su.id === u.id);
+    }else{
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象")
+        }
+        return selectedUsers.value?.id === u.id;
+    }
+
+}
+
+const userTagTheme = (u: UserReference) => {
+    if (Array.isArray(selectedForBinding.value)) {
+        if (selectedForBinding.value.some(su => su.id === u.id)) {
+            return "autumnOrange"
+        } else {
+            return "skyGray"
+        }
+    }else {
+        if (selectedForBinding.value?.id === u.id) {
+            return "autumnOrange"
+        } else {
+            return "skyGray"
+        }
+    }
+}
+
+const selectedForBinding = computed(() => {
+
+    const isArray:boolean = Array.isArray(selectedUsers.value);
+    if (props.multiple && isArray) {
+        return selectedUsers.value;
+
+    } else if (!props.multiple && !isArray) {
+        if (selectedUsers.value) {
+            return [selectedUsers.value as UserReference];
+        } else {
+            return [] ;
+        }
+    } else if(!props.multiple && isArray) {
+        return selectedUsers.value;
+    } else{
+        throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+    }
+})
+
+
+function getUserItemClass(index: number) {
+    return index === activeIndex.value ? "active" : "";
+}
+
+const listLoading = computed(() => props.loading && props.users.length == 0);
+
+defineExpose({
+    scrollUp() {
+        onInputArrowUp();
+    },
+    scrollDown() {
+        onInputArrowDown();
+    },
+    activeIndex
+})
+
+watch(() => props.users, () => {
+    activeIndex.value = 0;
+}, {
+    deep: false
+})
+
+onUnmounted(() => {
+    throttleDown.cancel()
+    throttleUp.cancel()
+    throttleScroll.cancel()
+})
+</script>
+
+<template>
+    <div class="ja-user-list">
+        <el-scrollbar :height="height" ref="scrollbar" always
+                      @scroll="throttleScroll" v-loading="listLoading">
+            <ul v-if="users.length > 0"
+                @mouseup="onMouseUp">
+                <li v-for="(u, index) in users" :key="u.id"
+                    :class="getUserItemClass(index)"
+                    @mouseenter="isDragSelecting && onMouseEnter(u)"
+                    @mousedown="onMouseDown(u)"
+                    @mouseover="onMouseOver($event, index)">
+                    <el-icon color="#0D6A9F">
+                        <Check v-if="userSelected(u)"/>
+                    </el-icon>
+                    <ja-user-info-tag :user-id="u.id" :full-name="u.fullName"
+                                      :has-avatar="u.hasAvatar"
+                                      placement="left-start"
+                                      :theme="userTagTheme(u)"></ja-user-info-tag>
+                </li>
+            </ul>
+            <el-empty v-else
+                      :description="emptyText"></el-empty>
+        </el-scrollbar>
+        <div class="page-indicator"
+             v-if="users.length > 0">
+            <div class="nb-spinner" v-show="loading"></div>
+            已加载
+            {{ page }}
+            /{{ Math.ceil(total / pageSize) }}页
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.ja-user-list {
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+
+    ul {
+        padding: 0;
+        margin: 0;
+
+        li {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            &.active {
+                background-color: var(--el-color-primary-light-9);
+            }
+        }
+    }
+
+    .page-indicator {
+        position: absolute;
+        right: 20px;
+        bottom: 12px;
+        color: var(--el-color-info-light-5);
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .nb-spinner {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background-color: transparent;
+            display: inline-block;
+            border: 2px solid #ccc;
+            border-top-color: #009688;
+            animation: 1s spin linear infinite;
+        }
+
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+}
+
+</style>