@blueking/bk-user-selector 0.0.35-beta.1 → 0.0.36

package/README.md

@@ -151,6 +151,8 @@ export default {
 | ----------------- | ---------------- | ---------------- |
 | update:modelValue | 绑定值变化时触发 | 变化后的值       |
 | change            | 选中值变化时触发 | 变化后的用户信息 |
+| focus            | 输入框获得焦点时触发 | -                |
+| blur             | 输入框失去焦点时触发 | -                |
 
 ## 功能说明
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/bk-user-selector",
-  "version": "0.0.35-beta.1",
+  "version": "0.0.36",
   "description": "蓝鲸用户选择器",
   "license": "MIT",
   "author": "Tencent BlueKing",

package/typings/components/multiple-selector.vue.d.ts

@@ -1,16 +1,16 @@
 import { FormattedUser, MultipleSelectorProps } from '../types';
 declare const _default: import("vue").DefineComponent<MultipleSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:selectedUsers": (...args: any[]) => void;
     "add-user": (...args: any[]) => void;
     "remove-user": (...args: any[]) => void;
-    dragStart: (...args: any[]) => void;
-    dragEnd: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<MultipleSelectorProps> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:selectedUsers"?: ((...args: any[]) => any) | undefined;
     "onAdd-user"?: ((...args: any[]) => any) | undefined;
     "onRemove-user"?: ((...args: any[]) => any) | undefined;
-    onDragStart?: ((...args: any[]) => any) | undefined;
-    onDragEnd?: ((...args: any[]) => any) | undefined;
 }>, {
     tenantId: string;
     apiBaseUrl: string;

package/typings/components/single-selector.vue.d.ts

@@ -1,9 +1,13 @@
 import { SingleSelectorProps } from '../types';
 declare const _default: import("vue").DefineComponent<SingleSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
     change: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<SingleSelectorProps> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     tenantId: string;

package/typings/components/user-selector.vue.d.ts

@@ -1,13 +1,13 @@
 import { UserSelectorProps } from '../types';
 declare const _default: import("vue").DefineComponent<UserSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
     change: (...args: any[]) => void;
-    dragStart: (...args: any[]) => void;
-    dragEnd: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<UserSelectorProps> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
-    onDragStart?: ((...args: any[]) => any) | undefined;
-    onDragEnd?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     tenantId: string;

package/vue2/index.es.min.js

@@ -4546,6 +4546,10 @@ __webpack_require__$7.d(__webpack_exports__$7, {
     /* reexport */
     lang_en
   ),
+  jp: () => (
+    /* reexport */
+    ja_jp
+  ),
   zhCn: () => (
     /* reexport */
     zh_cn
@@ -4733,6 +4737,145 @@ var en = {
   }
 };
 const lang_en = en;
+var jp = {
+  lang: "ja",
+  steps: {
+    step1: "ステップ1",
+    step2: "ステップ2",
+    step3: "ステップ3"
+  },
+  datePicker: {
+    selectDate: "日付を選択",
+    selectTime: "時間を選択",
+    clear: "クリア",
+    ok: "OK",
+    weekdays: {
+      sun: "日",
+      mon: "月",
+      tue: "火",
+      wed: "水",
+      thu: "木",
+      fri: "金",
+      sat: "土"
+    },
+    hour: "時間",
+    min: "分",
+    sec: "秒",
+    toNow: "現在まで"
+  },
+  dialog: {
+    ok: "OK",
+    cancel: "キャンセル",
+    prev: "前へ",
+    next: "次へ"
+  },
+  popConfirm: {
+    ok: "OK",
+    cancel: "キャンセル"
+  },
+  form: {
+    notBeEmpty: "空にできません",
+    incorrectFormat: "形式が正しくありません",
+    max: "最大値",
+    min: "最小値",
+    maxLen: "最大長",
+    verifyError: "検証エラー"
+  },
+  pagination: {
+    eachPage: "各ページ",
+    strip: "",
+    total: "合計"
+  },
+  process: {
+    step1: "ステップ1",
+    step2: "ステップ2",
+    step3: "ステップ3",
+    step4: "ステップ4"
+  },
+  searchSelect: {
+    pleaseSelect: "選択してください",
+    loading: "ロード中...",
+    filterQueryMustHasValue: "フィルタークエリに値を含める必要があります",
+    ok: "OK",
+    cancel: "キャンセル",
+    or: "または",
+    and: "そして",
+    logical: "論理:"
+  },
+  select: {
+    noData: "データなし",
+    noMatchedData: "一致するデータがありません",
+    loading: "読み込み中...",
+    pleaseSelect: "選んでください",
+    enterKeywords: "キーワードを入力してください",
+    all: "すべて",
+    selectAll: "すべて選択"
+  },
+  table: {
+    emptyText: "データがありません",
+    confirm: "確認",
+    reset: "リセット",
+    sort: "ソート",
+    setting: {
+      title: "テーブル設定",
+      fields: {
+        title: "表示フィールド設定",
+        subtitle: function subtitle2(max2) {
+          return "（".concat(max2, "フィールド最大）");
+        },
+        selectAll: "すべて選択"
+      },
+      lineHeight: {
+        title: "テーブル行の高さ",
+        small: "小",
+        medium: "中",
+        large: "大"
+      },
+      options: {
+        ok: "OK",
+        cancel: "キャンセル"
+      }
+    }
+  },
+  transfer: {
+    sourceList: "ソースリスト",
+    targetList: "ターゲットリスト",
+    removeAll: "すべて削除",
+    selectAll: "すべて選択",
+    noData: "データがありません",
+    noSelected: "選択されていません",
+    search: "検索"
+  },
+  upload: {
+    uploadSuccess: "アップロード成功",
+    uploadFailed: "アップロード失敗",
+    drapFileOr: "ここにファイルをドラッグまたは",
+    clickUpload: "クリックしてアップロード",
+    uploadLabel: "ファイルをアップロード"
+  },
+  input: {
+    placeholder: "入力してください",
+    maxlengthLimitTips: "文字数制限に達しました"
+  },
+  tagInput: {
+    placeholder: "入力してEnterキーで終了"
+  },
+  message: {
+    assistant: "アシスタント",
+    details: "詳細",
+    copySuccess: "コピー成功",
+    copyFailed: "コピー失敗"
+  },
+  cascader: {
+    pleaseSelect: "選択してください",
+    noData: "データがありません",
+    emptyText: "データがありません"
+  },
+  versionLog: {
+    current: "現在のバージョン"
+  }
+};
+const ja_jp = jp;
 var zhCn = {
   lang: "zh-cn",
   steps: {
@@ -4817,7 +4960,7 @@ var zhCn = {
       title: "表格设置",
       fields: {
         title: "字段显示设置",
-        subtitle: function subtitle2(max2) {
+        subtitle: function subtitle3(max2) {
           return "（最多".concat(max2, "项）");
         },
         selectAll: "全选"
@@ -4916,6 +5059,7 @@ var zhCn = {
 };
 const zh_cn = zhCn;
 __webpack_exports__$7.en;
+__webpack_exports__$7.jp;
 var __webpack_exports__zhCn = __webpack_exports__$7.zhCn;
 var __webpack_require__$6 = {};
 (() => {
@@ -10473,9 +10617,6 @@ var __webpack_exports__ = {};
             hide2(el);
           }, 100);
         });
-        el.addEventListener("click", function() {
-          hide2(el);
-        });
         popper2.addEventListener("mouseleave", function() {
           clearTimeout(delayTimeout);
           hideTimeout = setTimeout(function() {
@@ -10489,7 +10630,7 @@ var __webpack_exports__ = {};
               show(el);
               clearTimeout(delayTimeout);
             }, opts.delay);
-          } else if (popper2.hasAttribute("data-show")) {
+          } else if (!el.contains(event.target) && popper2.hasAttribute("data-show")) {
             hide2(el);
           }
         });
@@ -14273,7 +14414,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     enableMultiTenantMode: { type: Boolean },
     allowCreate: { type: Boolean, default: false }
   },
-  emits: ["update:selectedUsers", "add-user", "remove-user", "dragStart", "dragEnd"],
+  emits: ["update:selectedUsers", "add-user", "remove-user", "focus", "blur"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit = __emit;
@@ -14318,9 +14459,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       sortableInstance.value = new Sortable(sortableContainerRef.value, {
         animation: 150,
         draggable: ".tag-wrapper",
-        onStart: (event) => {
-          emit("dragStart", event);
-        },
         onEnd: (evt) => {
           const { oldIndex, newIndex } = evt;
           if (oldIndex === newIndex || oldIndex === void 0 || newIndex === void 0) return;
@@ -14328,7 +14466,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           const [movedUser] = updatedUsers.splice(oldIndex, 1);
           updatedUsers.splice(newIndex, 0, movedUser);
           emit("update:selectedUsers", updatedUsers);
-          emit("dragEnd", evt);
         }
       });
     };
@@ -14370,6 +14507,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if ((container == null ? void 0 : container.contains(target)) || container === target) {
         return;
       }
+      if (isFocused.value) {
+        emit("blur");
+      }
       isFocused.value = false;
       showDropdown.value = false;
       activeTagIndex.value = -1;
@@ -14400,6 +14540,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       });
     };
     const handleInputFocus = () => {
+      emit("focus");
       if (!isFocused.value) {
         isFocused.value = true;
       }
@@ -14783,7 +14924,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7515c7a3"]]);
+const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-94252de2"]]);
 const _hoisted_1 = { class: "input-container" };
 const _hoisted_2 = ["placeholder"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -14809,7 +14950,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     enableMultiTenantMode: { type: Boolean },
     allowCreate: { type: Boolean }
   },
-  emits: ["update:modelValue", "change"],
+  emits: ["update:modelValue", "change", "focus", "blur"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit = __emit;
@@ -14950,6 +15091,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (searchQuery.value.length >= 1 || Array.isArray(props2.userGroup) && props2.userGroup.length > 0) {
         showDropdown.value = true;
       }
+      emit("focus");
     };
     const handleInput = () => {
       fetchUsers(searchQuery.value);
@@ -15015,6 +15157,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   class: "search-input",
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
                   placeholder: selectedUserInfo.value ? "" : _ctx.placeholder,
+                  onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur")),
                   onFocus: handleInputFocus,
                   onInput: handleInput,
                   onKeydown: handleKeyDown
@@ -15041,7 +15184,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6b8c23c5"]]);
+const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-726a967e"]]);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "BkUserSelector"
@@ -15066,7 +15209,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     enableMultiTenantMode: { type: Boolean, default: true },
     allowCreate: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue", "change", "dragStart", "dragEnd"],
+  emits: ["update:modelValue", "change", "focus", "blur"],
   setup(__props, { emit: __emit }) {
     const { t: t2 } = useI18n();
     __webpack_exports__provideGlobalConfig({
@@ -15132,6 +15275,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
       emit("change", users);
     };
+    const handleFocus = () => {
+      emit("focus");
+    };
+    const handleBlur = () => {
+      emit("blur");
+    };
     watch(selectedUser, (newVal) => {
       if (!props2.multiple) {
         emit("update:modelValue", newVal);
@@ -15147,7 +15296,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props2.modelValue,
       () => {
         initSelectedUsers();
-      }
+      },
+      { deep: true }
     );
     onBeforeMount(() => {
       initSelectedUsers();
@@ -15180,7 +15330,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             tenants: unref(tenants),
             "user-group": _ctx.userGroup,
             "user-group-name": userGroupName.value,
-            onChange: handleUpdateUser
+            onBlur: handleBlur,
+            onChange: handleUpdateUser,
+            onFocus: handleFocus
           }, null, 8, ["modelValue", "allow-create", "api-base-url", "current-user-id", "disabled", "empty-text", "enable-multi-tenant-mode", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "tenant-id", "tenants", "user-group", "user-group-name"])) : (openBlock(), createElementBlock(
             Fragment,
             { key: 1 },
@@ -15206,8 +15358,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 tenants: unref(tenants),
                 "user-group": _ctx.userGroup,
                 "user-group-name": userGroupName.value,
-                onDragEnd: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("dragEnd", $event)),
-                onDragStart: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("dragStart", $event)),
+                onBlur: handleBlur,
+                onFocus: handleFocus,
                 "onUpdate:selectedUsers": handleUpdateSelectedUsers
               }, null, 8, ["modelValue", "allow-create", "api-base-url", "current-user-id", "disabled", "draggable", "empty-text", "enable-multi-tenant-mode", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
             ],
@@ -15221,7 +15373,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-20d45a5c"]]);
+const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3a531e42"]]);
 const vue2 = {
   model: {
     prop: "modelValue",
@@ -15245,11 +15397,11 @@ const vue2 = {
             emit("update:modelValue", ...arguments);
             emit("change", ...arguments);
           },
-          onDragStart: (event) => {
-            emit("dragStart", event);
+          onBlur() {
+            emit("blur", ...arguments);
           },
-          onDragEnd: (event) => {
-            emit("dragEnd", event);
+          onFocus() {
+            emit("focus", ...arguments);
           },
           ref: "userSelectorRef"
         });