@blueking/bk-user-selector 0.0.1-beta.2 → 0.0.3

package/vue3/vue3.css

@@ -1,219 +1,228 @@
-
-.user-selector[data-v-5e8a952d] {
-  width: 100%;
+.user-tag[data-v-203c36cb] {
+  margin-right: 4px;
 }
-.form-item[data-v-5e8a952d] {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
+.user-tag.draggable[data-v-203c36cb] {
+  cursor: move;
 }
-.form-label[data-v-5e8a952d] {
-  width: 80px;
-  text-align: right;
-  padding-right: 10px;
-  font-size: 14px;
-  color: #63656e;
+.user-tag.active[data-v-203c36cb] {
+  background-color: #e1ecff;
+  border-color: #3a84ff;
 }
-.form-required[data-v-5e8a952d] {
-  color: #ea3636;
-  margin-right: 4px;
+.user-tag .tag-content .user-name[data-v-203c36cb] {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
 }
-.form-content[data-v-5e8a952d] {
-  flex: 1;
+.user-tag .tag-content .tenant-name[data-v-203c36cb] {
+  color: #f59500;
+  margin-left: 3px;
+  white-space: nowrap;
+  padding: 0 3px;
+  border-radius: 2px;
+}.bk-user-selector-popover.bk-popover.bk-pop2-content {
+  padding: 0;
+}.multiple-selector[data-v-0bc02f6f] {
   position: relative;
+  width: 100%;
 }
-.tag-input-container[data-v-5e8a952d] {
-  display: flex;
-  flex-wrap: wrap;
+.multiple-selector .tags-container[data-v-0bc02f6f] {
+  min-height: 32px;
   border: 1px solid #dcdee5;
   border-radius: 2px;
-  min-height: 32px;
-  align-items: center;
-  padding: 2px 8px;
-  gap: 4px;
-}
-.tag-inline-container[data-v-5e8a952d] {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 4px;
-  flex-grow: 1;
-  min-height: 24px;
+  padding: 1px 4px;
+  transition: all 0.2s ease;
+  background-color: #fff;
 }
-.is-focused[data-v-5e8a952d] {
+.multiple-selector .tags-container.focused[data-v-0bc02f6f] {
   border-color: #3a84ff;
+  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.tag-group[data-v-5e8a952d] {
-  display: contents;
-  /* 让draggable的内容直接成为父容器的子元素 */
-}
-.tag-item[data-v-5e8a952d] {
-  flex-shrink: 0;
-  height: 24px;
-  line-height: 24px;
-  margin: 0;
-  cursor: pointer;
-  display: inline-flex;
+.multiple-selector .tags-container.collapsed[data-v-0bc02f6f] {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
-.tag-content[data-v-5e8a952d] {
+.multiple-selector .tag-list[data-v-0bc02f6f] {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  height: 100%;
 }
-
-/* 输入框样式 */
-.tag-input[data-v-5e8a952d] {
-  flex-grow: 0;
-  width: 10px;
-  min-width: 10px;
+.multiple-selector .tag-wrapper[data-v-0bc02f6f] {
+  display: inline-flex;
+  align-items: center;
   max-width: 100%;
-  border: none;
+}
+.multiple-selector .search-input[data-v-0bc02f6f] {
   outline: none;
-  height: 32px;
-  font-size: 14px;
-  padding: 0 8px;
+  border: none;
+  height: 28px;
+  min-width: 10px;
   background: transparent;
-  cursor: text;
-  transition: width 0.1s ease-in-out;
 }
-.tag-input[data-v-5e8a952d]::placeholder {
+.multiple-selector .search-input[data-v-0bc02f6f]::placeholder {
   color: #c4c6cc;
-  font-size: 12px;
 }
-.full-width[data-v-5e8a952d] {
-  flex-grow: 1;
-  padding: 0 8px;
-  /* 添加统一的内边距 */
+.multiple-selector .search-input.inline[data-v-0bc02f6f] {
+  min-width: 10px;
 }
-.popover-content[data-v-5e8a952d] {
-  min-height: 80px;
-  max-height: 250px;
+.multiple-selector .search-input.last[data-v-0bc02f6f], .multiple-selector .search-input.collapsed[data-v-0bc02f6f] {
+  flex: 1;
+  min-width: 60px;
+}
+.dropdown-content[data-v-0bc02f6f] {
+  min-height: 40px;
+  max-height: 300px;
   overflow-y: auto;
-  background-color: #fff;
+  padding: 5px 0;
 }
-.user-option[data-v-5e8a952d] {
-  display: flex;
-  align-items: center;
+.dropdown-content .no-data[data-v-0bc02f6f] {
+  padding: 10px;
+  text-align: center;
+  color: #979ba5;
+}
+.dropdown-content .user-option[data-v-0bc02f6f] {
   padding: 8px 12px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 32px;
 }
-.user-option[data-v-5e8a952d]:hover {
+.dropdown-content .user-option[data-v-0bc02f6f]:hover {
   background-color: #f5f7fa;
 }
-.user-avatar[data-v-5e8a952d] {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  margin-right: 8px;
+.dropdown-content .user-option .tenant-name[data-v-0bc02f6f] {
+  color: #f59500;
+  margin-left: 4px;
+  padding: 0 4px;
 }
-.user-avatar-text[data-v-5e8a952d] {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
+.me-tag[data-v-0bc02f6f] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e1ecff;
+  color: #4d4f56;
   border-radius: 50%;
-  background-color: #3a84ff;
-  color: white;
+  padding: 0 8px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
   font-size: 12px;
-  margin-right: 8px;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
 }
-.user-name[data-v-5e8a952d] {
-  font-size: 12px;
+.me-tag[data-v-0bc02f6f]:hover {
+  background-color: #cddffe;
+  color: #3a84ff;
 }
-
-/* 拖拽相关样式 */
-.draggable[data-v-5e8a952d] {
-  cursor: move;
-  padding-left: 4px;
-}
-.ghost-tag[data-v-5e8a952d] {
-  opacity: 0.5;
-  background: #c8ebfb;
+.me-tag.disabled[data-v-0bc02f6f] {
+  background-color: #f0f1f5;
+  color: #c4c6cc;
+  cursor: not-allowed;
+}.single-selector[data-v-02788d3d] {
+  position: relative;
+  width: 100%;
 }
-.chosen-tag[data-v-5e8a952d] {
-  box-shadow: 0 0 2px 2px #3a84ff;
+.input-container[data-v-02788d3d] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  padding: 0 8px;
+  background-color: #fff;
 }
-.drag-tag[data-v-5e8a952d] {
-  opacity: 0.8;
+.input-container[data-v-02788d3d]:focus-within {
+  border-color: #3a84ff;
+  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.drag-handle[data-v-5e8a952d] {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 4px;
-  opacity: 0.6;
-  cursor: move;
+.search-input[data-v-02788d3d] {
+  flex: 1;
+  outline: none;
+  border: none;
+  height: 30px;
+  background: transparent;
 }
-.drag-handle svg[data-v-5e8a952d] {
-  fill: currentColor;
+.search-input[data-v-02788d3d]::placeholder {
+  color: #c4c6cc;
 }
-.tag-wrapper[data-v-5e8a952d] {
-  display: flex;
+.selected-user[data-v-02788d3d] {
+  display: inline-flex;
   align-items: center;
-  padding: 0;
+  background-color: #f0f1f5;
+  border-radius: 2px;
+  padding: 0 8px;
+  margin-right: 8px;
   height: 24px;
+  max-width: calc(100% - 32px);
 }
-.inline-input[data-v-5e8a952d] {
+.selected-user .tenant-name[data-v-02788d3d] {
+  color: #f59500;
   margin-left: 4px;
-  min-width: 10px;
-  padding: 0 2px;
 }
-
-/* 测量元素样式 */
-.measure-text[data-v-5e8a952d] {
-  position: absolute;
-  visibility: hidden;
-  height: 0;
-  white-space: pre;
-  font-size: 14px;
-  font-family: inherit;
-  padding: 0 2px;
-}
-
-/* 单选模式样式 */
-.is-single[data-v-5e8a952d] {
+.selected-user .close-icon[data-v-02788d3d] {
+  margin-left: 4px;
   cursor: pointer;
+  font-style: normal;
 }
-.single-select[data-v-5e8a952d] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
+.dropdown-content[data-v-02788d3d] {
+  min-height: 40px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 5px 0;
 }
-.single-value[data-v-5e8a952d] {
+.dropdown-content .no-data[data-v-02788d3d] {
+  padding: 10px;
+  text-align: center;
+  color: #979ba5;
+}
+.dropdown-content .user-option[data-v-02788d3d] {
+  padding: 8px 12px;
+  cursor: pointer;
   display: flex;
   align-items: center;
-  padding: 0 8px;
-  margin-right: 4px;
-  height: 24px;
-}
-.single-input[data-v-5e8a952d] {
-  flex: 1;
-  width: auto;
+  height: 32px;
 }
-.placeholder[data-v-5e8a952d] {
-  color: #c4c6cc;
+.dropdown-content .user-option[data-v-02788d3d]:hover {
+  background-color: #f5f7fa;
 }
-.dropdown-arrow[data-v-5e8a952d] {
-  margin-left: 8px;
-  font-size: 10px;
-  color: #979ba5;
+.dropdown-content .user-option .tenant-name[data-v-02788d3d] {
+  color: #f59500;
+  margin-left: 4px;
+  padding: 0 4px;
 }
-.clear-icon[data-v-5e8a952d] {
-  margin-left: 8px;
-  font-size: 14px;
-  color: #979ba5;
+.me-tag[data-v-02788d3d] {
+  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;
 }
-.clear-icon[data-v-5e8a952d]:hover {
-  color: #63656e;
+.me-tag[data-v-02788d3d]:hover {
+  background-color: #cddffe;
+  color: #3a84ff;
 }
-.no-data[data-v-5e8a952d] {
-  padding: 8px 12px;
+.me-tag.disabled[data-v-02788d3d] {
+  background-color: #f0f1f5;
+  color: #c4c6cc;
+  cursor: not-allowed;
+}.bk-user-selector[data-v-bb73e41f] {
+  width: 100%;
+  position: relative;
   font-size: 12px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+}

package/typings/index.vue.d.ts

@@ -1,22 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "update:modelValue" | "change", ...args: any[]) => void;
-    label: string;
-    required: boolean;
-    placeholder: string;
-    modelValue: string | unknown[];
-    draggable: boolean;
-    multiple: boolean;
-    apiBaseUrl: string;
-    tenantId: string;
-    $props: {
-        readonly label?: string | undefined;
-        readonly required?: boolean | undefined;
-        readonly placeholder?: string | undefined;
-        readonly modelValue?: string | unknown[] | undefined;
-        readonly draggable?: boolean | undefined;
-        readonly multiple?: boolean | undefined;
-        readonly apiBaseUrl?: string | undefined;
-        readonly tenantId?: string | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/typings/single.vue.d.ts

@@ -1,12 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "update:modelValue" | "change", ...args: any[]) => void;
-    modelValue: string;
-    apiBaseUrl: string;
-    tenantId: string;
-    $props: {
-        readonly modelValue?: string | undefined;
-        readonly apiBaseUrl?: string | undefined;
-        readonly tenantId?: string | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/typings/utils/index.d.ts

@@ -1,59 +0,0 @@
-export interface IDept {
-    id: number | string;
-    name: string;
-    full_name: string;
-    has_children?: boolean;
-    parent?: number | string;
-    children?: IDept[];
-    order?: number;
-    extras?: {
-        code: string;
-    };
-    enabled?: boolean;
-    ancestors?: {
-        id: number | string;
-        name: string;
-        full_name: string;
-        has_children?: boolean;
-        children?: IDept[];
-    }[];
-    code?: string;
-    level?: number;
-    async?: boolean;
-}
-export declare const enum LookupFieldEnum {
-    ID = "id",
-    LEVEL = "level",
-    NAME = "name",
-    PARENT = "parent"
-}
-export interface IAPIParams {
-    lookup_field: Lowercase<keyof typeof LookupFieldEnum>;
-    exact_lookups?: number | string;
-    no_page?: boolean;
-    fuzzy_lookups?: string;
-    with_ancestors?: boolean;
-}
-export interface IAPIResponse {
-    code: number;
-    data: IDept[];
-    message: string;
-    result?: boolean;
-    request_id?: string;
-}
-export interface ITreeNode {
-    ids: IDept['id'][];
-    map: IDept;
-    remove?: boolean;
-}
-export interface IOrgSelectorProps {
-    modelValue: number | number[] | string | string[];
-    dataUrl: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    showOnInit?: boolean;
-    dropdownMaxHeight?: number;
-    autoExpandTags?: boolean;
-    placeholder?: string;
-    searchPlaceholder?: string;
-}

package/typings/utils/jsonp.d.ts

@@ -1,4 +0,0 @@
-export declare const jsonp: <T>(url: string, data: object, { cbName, v }: {
-    cbName?: string | undefined;
-    v?: string | undefined;
-}) => Promise<T>;

package/typings/utils/lang.d.ts

@@ -1,3 +0,0 @@
-export declare const LANG: string;
-export declare const langData: {};
-export declare const t: (key: keyof typeof langData, query?: Record<string, string>) => string;

package/typings/utils/service.d.ts

@@ -1,36 +0,0 @@
-import { type IOrgSelectorProps, type IAPIParams, type IDept, LookupFieldEnum } from './index';
-declare const _default: (props: IOrgSelectorProps) => {
-    level0Params: () => {
-        no_page: boolean;
-        lookup_field: LookupFieldEnum;
-        exact_lookups: number;
-    };
-    searchParams: (keyword: string) => {
-        no_page: boolean;
-        lookup_field: LookupFieldEnum;
-        fuzzy_lookups: string;
-        with_ancestors: boolean;
-    };
-    expandParentParams: (id: IDept["id"]) => {
-        no_page: boolean;
-        lookup_field: LookupFieldEnum;
-        exact_lookups: string | number;
-        with_ancestors: boolean;
-    };
-    defaultValueParams: (values: IDept["id"][]) => {
-        no_page: boolean;
-        lookup_field: LookupFieldEnum;
-        exact_lookups: string;
-        with_ancestors: boolean;
-    };
-    getCheckedFullTreeData: (checkedTreeData: IDept[]) => Promise<IDept[]>;
-    getTreeSearchData: (data: IDept[]) => IDept[];
-    fetchData: (params: IAPIParams) => Promise<IDept[]>;
-    loading: {
-        level0: boolean;
-        expandParent: boolean;
-        defaultValue: boolean;
-        search: boolean;
-    };
-};
-export default _default;