@blueking/bk-user-selector 0.0.2-beta.1 → 0.0.4

package/vue3/vue3.css

@@ -1,34 +1,20 @@
-.user-option[data-v-0ae61279] {
-  display: flex;
-  align-items: center;
-}
-.user-option .user-name[data-v-0ae61279] {
-  font-size: 14px;
-}
-.user-option .tenant-name[data-v-0ae61279] {
-  font-size: 12px;
-  color: #f59500;
-  margin-left: 4px;
-  padding: 0 4px;
-  background: rgba(245, 149, 0, 0.1);
-  border-radius: 2px;
-}.user-tag[data-v-cf26d9e2] {
+.user-tag[data-v-203c36cb] {
   margin-right: 4px;
 }
-.user-tag.draggable[data-v-cf26d9e2] {
+.user-tag.draggable[data-v-203c36cb] {
   cursor: move;
 }
-.user-tag.active[data-v-cf26d9e2] {
+.user-tag.active[data-v-203c36cb] {
   background-color: #e1ecff;
   border-color: #3a84ff;
 }
-.user-tag .tag-content .user-name[data-v-cf26d9e2] {
+.user-tag .tag-content .user-name[data-v-203c36cb] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
 }
-.user-tag .tag-content .tenant-name[data-v-cf26d9e2] {
+.user-tag .tag-content .tenant-name[data-v-203c36cb] {
   color: #f59500;
   margin-left: 3px;
   white-space: nowrap;
@@ -36,11 +22,11 @@
   border-radius: 2px;
 }.bk-user-selector-popover.bk-popover.bk-pop2-content {
   padding: 0;
-}.multiple-selector[data-v-6a1779a9] {
+}.multiple-selector[data-v-55945956] {
   position: relative;
   width: 100%;
 }
-.multiple-selector .tags-container[data-v-6a1779a9] {
+.multiple-selector .tags-container[data-v-55945956] {
   min-height: 32px;
   border: 1px solid #dcdee5;
   border-radius: 2px;
@@ -48,81 +34,195 @@
   transition: all 0.2s ease;
   background-color: #fff;
 }
-.multiple-selector .tags-container.focused[data-v-6a1779a9] {
+.multiple-selector .tags-container.focused[data-v-55945956] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-6a1779a9] {
+.multiple-selector .tags-container.collapsed[data-v-55945956] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-6a1779a9] {
+.multiple-selector .tag-list[data-v-55945956] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-6a1779a9] {
+.multiple-selector .tag-wrapper[data-v-55945956] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-6a1779a9] {
+.multiple-selector .search-input[data-v-55945956] {
   outline: none;
   border: none;
-  font-size: 14px;
   height: 28px;
+  min-width: 10px;
   background: transparent;
 }
-.multiple-selector .search-input[data-v-6a1779a9]::placeholder {
-  color: #C4C6CC;
+.multiple-selector .search-input[data-v-55945956]::placeholder {
+  color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-6a1779a9] {
-  width: 4px;
-  min-width: 4px;
+.multiple-selector .search-input.inline[data-v-55945956] {
+  min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-6a1779a9], .multiple-selector .search-input.collapsed[data-v-6a1779a9] {
+.multiple-selector .search-input.last[data-v-55945956], .multiple-selector .search-input.collapsed[data-v-55945956] {
   flex: 1;
   min-width: 60px;
 }
-.multiple-selector .tag-more[data-v-6a1779a9] {
+.dropdown-content[data-v-55945956] {
+  min-height: 40px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 5px 0;
+}
+.dropdown-content .no-data[data-v-55945956] {
+  padding: 10px;
+  text-align: center;
+  color: #979ba5;
+}
+.dropdown-content .user-option[data-v-55945956] {
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+.dropdown-content .user-option[data-v-55945956]:hover {
+  background-color: #f5f7fa;
+}
+.dropdown-content .user-option .tenant-name[data-v-55945956] {
+  color: #f59500;
+  margin-left: 4px;
+  padding: 0 4px;
+}
+.me-tag[data-v-55945956] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e1ecff;
+  color: #4d4f56;
+  border-radius: 50%;
+  padding: 0 8px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  font-size: 12px;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.me-tag[data-v-55945956]:hover {
+  background-color: #cddffe;
+  color: #3a84ff;
+}
+.me-tag.disabled[data-v-55945956] {
   background-color: #f0f1f5;
-  color: #63656e;
-  margin: 0 4px 4px 0;
+  color: #c4c6cc;
+  cursor: not-allowed;
+}.single-selector[data-v-d17d0282] {
+  position: relative;
+  width: 100%;
+}
+.input-container[data-v-d17d0282] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  padding: 0 8px;
+  background-color: #fff;
+}
+.input-container[data-v-d17d0282]:focus-within {
+  border-color: #3a84ff;
+  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
+}
+.search-input[data-v-d17d0282] {
+  flex: 1;
+  outline: none;
+  border: none;
+  height: 30px;
+  background: transparent;
+}
+.search-input[data-v-d17d0282]::placeholder {
+  color: #c4c6cc;
+}
+.selected-user[data-v-d17d0282] {
+  display: inline-flex;
+  align-items: center;
+  background-color: #f0f1f5;
+  border-radius: 2px;
+  padding: 0 8px;
+  margin-right: 8px;
+  height: 24px;
+  max-width: calc(100% - 32px);
+}
+.selected-user .tenant-name[data-v-d17d0282] {
+  color: #f59500;
+  margin-left: 4px;
+}
+.selected-user .close-icon[data-v-d17d0282] {
+  margin-left: 4px;
   cursor: pointer;
+  font-style: normal;
 }
-.dropdown-content[data-v-6a1779a9] {
+.dropdown-content[data-v-d17d0282] {
   min-height: 40px;
   max-height: 300px;
   overflow-y: auto;
   padding: 5px 0;
 }
-.dropdown-content .no-data[data-v-6a1779a9] {
+.dropdown-content .no-data[data-v-d17d0282] {
   padding: 10px;
   text-align: center;
   color: #979ba5;
 }
-.dropdown-content .user-option[data-v-6a1779a9] {
+.dropdown-content .user-option[data-v-d17d0282] {
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   height: 32px;
 }
-.dropdown-content .user-option[data-v-6a1779a9]:hover {
+.dropdown-content .user-option[data-v-d17d0282]:hover {
   background-color: #f5f7fa;
 }
-.dropdown-content .user-option .user-name[data-v-6a1779a9] {
-  font-size: 14px;
-}
-.dropdown-content .user-option .tenant-name[data-v-6a1779a9] {
-  font-size: 12px;
+.dropdown-content .user-option .tenant-name[data-v-d17d0282] {
   color: #f59500;
   margin-left: 4px;
   padding: 0 4px;
-  background: rgba(245, 149, 0, 0.1);
-  border-radius: 2px;
-}.bk-user-selector[data-v-144c2518] {
+}
+.me-tag[data-v-d17d0282] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e1ecff;
+  color: #4d4f56;
+  border-radius: 50%;
+  padding: 0 8px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  font-size: 12px;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.me-tag[data-v-d17d0282]:hover {
+  background-color: #cddffe;
+  color: #3a84ff;
+}
+.me-tag.disabled[data-v-d17d0282] {
+  background-color: #f0f1f5;
+  color: #c4c6cc;
+  cursor: not-allowed;
+}.bk-user-selector[data-v-ee509d86] {
   width: 100%;
   position: relative;
+  font-size: 12px;
 }

package/typings/hooks/useUserSelection.d.ts

@@ -1,23 +0,0 @@
-/**
- * 用户选择 Hook
- * @module hooks/useUserSelection
- */
-import { Ref } from 'vue';
-import { FormattedUser } from '../types';
-/**
- * 使用用户选择的Hook
- * @param apiBaseUrl - API基础URL
- * @param tenantId - 租户ID
- * @param initialSelectedUsers - 初始选中的用户ID
- * @param multiple - 是否多选
- * @returns 用户选择相关状态和方法
- */
-export declare const useUserSelection: (apiBaseUrl: string, tenantId: string, initialSelectedUsers?: string | string[], multiple?: boolean) => {
-    selectedUsers: Ref<FormattedUser[]>;
-    selectedUserIds: import("vue").ComputedRef<string | string[]>;
-    loading: Ref<boolean>;
-    addUser: (user: FormattedUser) => void;
-    removeUser: (user: FormattedUser) => void;
-    removeUserAtIndex: (index: number) => void;
-    clearSelection: () => void;
-};

package/typings/index.d.ts

@@ -1,18 +0,0 @@
-/**
- * 蓝鲸用户选择器
- * @module bk-user-selector
- */
-import { type App } from 'vue';
-import UserSelector from './components/user-selector.vue';
-export { UserSelector };
-/**
- * 默认导出
- */
-declare const _default: {
-    /**
-     * 安装插件
-     * @param app - Vue 应用实例
-     */
-    install(app: App): void;
-};
-export default _default;