cnhis-design-vue 3.1.14-beta.9 → 3.1.14

package/es/packages/shortcut-setter/src/ShortcutSetterItem.js

@@ -1,4 +1,140 @@
-import script from './ShortcutSetterItem.vue_vue_type_script_setup_true_lang.js';
-export { default } from './ShortcutSetterItem.vue_vue_type_script_setup_true_lang.js';
+import { defineComponent, computed, ref, openBlock, createElementBlock, createVNode, unref, withModifiers, createElementVNode, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { debounce, isString } from 'lodash-es';
+import { useMessage, NInput, NButton, NPopconfirm } from 'naive-ui';
+import { useShortcuts } from '../../../packages/shortcut-provider';
+import { transformKey2DisplaySignature, getDisplaySignature } from '../../../packages/shortcut-provider/src/utils';
+import { ShortcutInputState } from '../../../packages/shortcut-setter/constant';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
-script.__file = "packages/shortcut-setter/src/ShortcutSetterItem.vue";
+const _hoisted_1 = { class: "shortcut-setter-item__wrapper" };
+const _hoisted_2 = { class: "shortcut-setter-item__operation" };
+const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u91CD\u7F6E");
+const _hoisted_4 = /* @__PURE__ */ createTextVNode(" \u786E\u8BA4\u91CD\u7F6E\u5FEB\u6377\u952E\u5417 ");
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ShortcutSetterItem",
+  props: {
+    glob: { type: Boolean },
+    value: null,
+    onChange: null,
+    onFocus: null,
+    fieldItem: null,
+    placeholder: { default: "\u70B9\u51FB\u8BBE\u7F6E\u5FEB\u6377\u952E" },
+    editPlaceholder: { default: "\u952E\u76D8\u6309\u4E0B\u8981\u8BBE\u7F6E\u7684\u5FEB\u6377\u952E\u7EC4\u5408" },
+    operation: { default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    const { query, update, updateState } = useShortcuts(props.glob);
+    const shortcutItem = computed(() => {
+      return query(props.fieldItem.val_key);
+    });
+    const disabledState = computed(() => {
+      var _a;
+      return !!((_a = shortcutItem.value) == null ? void 0 : _a.disabled);
+    });
+    const currentSetShortcut = computed(() => {
+      var _a, _b;
+      return transformKey2DisplaySignature((_b = (_a = shortcutItem.value) == null ? void 0 : _a.currentKeySignature) != null ? _b : "");
+    });
+    const state = ref(ShortcutInputState.STATIC);
+    const isEditState = computed(() => state.value === ShortcutInputState.STATIC);
+    function hasOperation(operation) {
+      return props.operation.includes(operation);
+    }
+    const currentEditShortcut = ref("");
+    const showContent = computed(() => {
+      return isEditState.value ? currentSetShortcut.value : currentEditShortcut.value;
+    });
+    const placeholder = computed(() => {
+      return isEditState.value ? props.placeholder : props.editPlaceholder;
+    });
+    function onInputFocus() {
+      state.value = ShortcutInputState.EDIT;
+    }
+    const inputRef = ref();
+    function onInputBlur() {
+      var _a;
+      state.value = ShortcutInputState.STATIC;
+      currentEditShortcut.value = "";
+      (_a = inputRef.value) == null ? void 0 : _a.blur();
+    }
+    const onInputKeyDown = debounce((event) => {
+      currentEditShortcut.value = getDisplaySignature(event);
+    }, 200, { leading: true, trailing: false });
+    const $message = useMessage();
+    function updateDecorator(fn, afterUpdate) {
+      try {
+        fn();
+      } catch (e) {
+        isString(e) && $message.error(e);
+        currentEditShortcut.value = "";
+      } finally {
+        afterUpdate == null ? void 0 : afterUpdate();
+      }
+    }
+    const onInputKeyUp = debounce((event) => updateDecorator(() => update(props.fieldItem.val_key, event), () => event.target.blur()), 200, { leading: true, trailing: false });
+    function onStop() {
+      if (!shortcutItem.value)
+        return;
+      updateDecorator(() => updateState(props.fieldItem.val_key, !disabledState.value), onInputBlur);
+    }
+    function onReset() {
+      if (!shortcutItem.value)
+        return;
+      updateDecorator(() => update(props.fieldItem.val_key, shortcutItem.value.defaultShortcut), onInputBlur);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", _hoisted_1, [
+        createVNode(unref(NInput), {
+          ref_key: "inputRef",
+          ref: inputRef,
+          disabled: unref(disabledState),
+          value: unref(showContent),
+          placeholder: unref(placeholder),
+          onFocus: onInputFocus,
+          onBlur: onInputBlur,
+          onKeydown: withModifiers(unref(onInputKeyDown), ["prevent", "stop"]),
+          onKeyup: withModifiers(unref(onInputKeyUp), ["prevent", "stop"])
+        }, null, 8, ["disabled", "value", "placeholder", "onKeydown", "onKeyup"]),
+        createElementVNode("section", _hoisted_2, [
+          hasOperation("disabled") ? (openBlock(), createBlock(unref(NButton), {
+            key: 0,
+            text: "",
+            onClick: onStop,
+            type: unref(disabledState) ? "info" : "warning"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(disabledState) ? "\u542F\u7528" : "\u7981\u7528"), 1)
+            ]),
+            _: 1
+          }, 8, ["type"])) : createCommentVNode("v-if", true),
+          hasOperation("reset") ? (openBlock(), createBlock(unref(NPopconfirm), {
+            key: 1,
+            onPositiveClick: onReset
+          }, {
+            trigger: withCtx(() => [
+              createVNode(unref(NButton), {
+                disabled: unref(disabledState),
+                text: "",
+                onClick: onInputBlur,
+                type: "info"
+              }, {
+                default: withCtx(() => [
+                  _hoisted_3
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            default: withCtx(() => [
+              _hoisted_4
+            ]),
+            _: 1
+          })) : createCommentVNode("v-if", true)
+        ])
+      ]);
+    };
+  }
+});
+var ShortcutSetterItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "ShortcutSetterItem.vue"]]);
+
+export { ShortcutSetterItem as default };