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

package/vue2/vue2.css

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