cnhis-design-vue 3.1.29-beta.4 → 3.1.29-beta.6

package/es/components/keyboard/src/Keyboard.js

@@ -0,0 +1,256 @@
+import { defineComponent, ref, computed, unref, openBlock, createBlock, withCtx, createVNode, createElementVNode, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, createTextVNode } from 'vue';
+import { NPopover, NInputNumber, NSpace, NIcon } from 'naive-ui';
+import { ArrowUndoSharp, Close, GitCompareOutline } from '@vicons/ionicons5';
+import InputNumber from './components/InputNumber.js';
+import { useRefHistory } from '@vueuse/core';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _hoisted_1 = { class: "c-keyboard" };
+const _hoisted_2 = { class: "left" };
+const _hoisted_3 = { class: "keys" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "btns" };
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = { class: "inputs" };
+const _hoisted_9 = { class: "inputs-right" };
+const _hoisted_10 = /* @__PURE__ */ createElementVNode("hr", null, null, -1);
+const _hoisted_11 = {
+  key: 1,
+  class: "c-keyboard-english"
+};
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", null, "\u952E\u76D8", -1);
+const _hoisted_13 = { class: "keys" };
+const _hoisted_14 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Keyboard",
+  props: {
+    mode: { type: String, default: "default" }
+  },
+  emits: ["change", "keydown"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const NUMBERKEYS = "1234567890.";
+    const DAYS = [3, 7, 14, 30];
+    const ENGLISHKEY = "QWERTYUIOPASDFGHJKLZXCVBNM.";
+    const ENGLISHOTHERKEY = ["switch", " ", "undo", "Enter"];
+    const ENGLISHKEYS = ENGLISHKEY.split("").concat(ENGLISHOTHERKEY);
+    const ENGLISHKEYS_ = ENGLISHKEY.split(".")[0].split("").sort().concat(["."], ENGLISHOTHERKEY);
+    const popoverRef = ref(null);
+    const numberKeys = ref(NUMBERKEYS.split(""));
+    const days = ref(DAYS);
+    const doses = ref([2, 3, 4, 5, 6, 7, 8]);
+    const englishKeys = ref(ENGLISHKEYS.slice());
+    const value = ref();
+    const inputValue = ref("");
+    const { history, undo, redo } = useRefHistory(inputValue);
+    const integerValue = ref();
+    const numeratorValue = ref();
+    const denominatorValue = ref();
+    const isDefault = computed(() => props.mode === "default");
+    const isDay = computed(() => props.mode === "day");
+    const isDose = computed(() => props.mode === "dose");
+    function keydown(key) {
+      var _a, _b, _c;
+      if (props.mode === "default") {
+        if (key !== "switch") {
+          emit("keydown", key);
+        } else {
+          englishKeys.value = englishKeys.value[0] === "Q" ? ENGLISHKEYS_.slice() : ENGLISHKEYS.slice();
+        }
+        return;
+      }
+      switch (key) {
+        case "undo": {
+          undo();
+          break;
+        }
+        case "enter":
+          value.value = +inputValue.value;
+          (_a = popoverRef.value) == null ? void 0 : _a.setShow(false);
+          emit("change", value.value);
+          break;
+        default:
+          if (typeof key === "number") {
+            inputValue.value = key.toString();
+          } else {
+            inputValue.value = (((_c = (_b = inputValue.value) == null ? void 0 : _b.toString) == null ? void 0 : _c.call(_b)) || "") + key;
+          }
+          break;
+      }
+    }
+    function updateFraction(value2) {
+      numeratorValue.value = "1";
+      denominatorValue.value = value2.toString();
+    }
+    function calculateFraction() {
+      var _a;
+      inputValue.value = (+((_a = integerValue.value) != null ? _a : 0) + +numeratorValue.value / +denominatorValue.value).toString();
+    }
+    return (_ctx, _cache) => {
+      return !unref(isDefault) ? (openBlock(), createBlock(unref(NPopover), {
+        key: 0,
+        ref_key: "popoverRef",
+        ref: popoverRef,
+        trigger: "click",
+        "show-arrow": false,
+        placement: "bottom-start",
+        style: { "padding": "0" },
+        "display-directive": "show"
+      }, {
+        trigger: withCtx(() => [
+          createVNode(unref(NInputNumber), {
+            value: value.value,
+            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+            style: { "width": "200px" },
+            "show-button": false
+          }, null, 8, ["value"])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(InputNumber, {
+                modelValue: inputValue.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inputValue.value = $event)
+              }, null, 8, ["modelValue"]),
+              createElementVNode("div", _hoisted_3, [
+                createVNode(unref(NSpace), null, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(numberKeys.value, (key) => {
+                      return openBlock(), createElementBlock("span", {
+                        key,
+                        class: normalizeClass(key === "0" ? "is-0" : ""),
+                        onClick: ($event) => keydown(key)
+                      }, toDisplayString(key), 11, _hoisted_4);
+                    }), 128))
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(NSpace), null, {
+                  default: withCtx(() => [
+                    createElementVNode("span", {
+                      class: "opt",
+                      onClick: _cache[2] || (_cache[2] = ($event) => keydown("undo"))
+                    }, [
+                      createVNode(unref(NIcon), { component: unref(ArrowUndoSharp) }, null, 8, ["component"])
+                    ]),
+                    createElementVNode("span", {
+                      class: "opt",
+                      onClick: _cache[3] || (_cache[3] = ($event) => keydown("enter"))
+                    }, "\u786E\u5B9A")
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            unref(isDay) ? (openBlock(), createBlock(unref(NSpace), {
+              key: 0,
+              class: "right-days",
+              justify: "center",
+              vertical: ""
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(days.value, (day) => {
+                  return openBlock(), createElementBlock("span", {
+                    class: "btn",
+                    key: day,
+                    onClick: ($event) => keydown(day)
+                  }, toDisplayString(day) + "\u5929", 9, _hoisted_5);
+                }), 128))
+              ]),
+              _: 1
+            })) : createCommentVNode("v-if", true),
+            unref(isDose) ? (openBlock(), createBlock(unref(NSpace), {
+              key: 1,
+              class: "right-dose",
+              "wrap-item": false
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_6, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(doses.value, (dose) => {
+                    return openBlock(), createElementBlock("span", {
+                      class: "btn",
+                      key: dose,
+                      onClick: ($event) => updateFraction(dose)
+                    }, "1/" + toDisplayString(dose), 9, _hoisted_7);
+                  }), 128))
+                ]),
+                createVNode(unref(NSpace), {
+                  justify: "center",
+                  vertical: ""
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_8, [
+                      createVNode(InputNumber, {
+                        integer: "",
+                        modelValue: integerValue.value,
+                        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => integerValue.value = $event)
+                      }, null, 8, ["modelValue"]),
+                      createElementVNode("div", _hoisted_9, [
+                        createVNode(InputNumber, {
+                          integer: "",
+                          modelValue: numeratorValue.value,
+                          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => numeratorValue.value = $event)
+                        }, null, 8, ["modelValue"]),
+                        _hoisted_10,
+                        createVNode(InputNumber, {
+                          integer: "",
+                          modelValue: denominatorValue.value,
+                          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => denominatorValue.value = $event)
+                        }, null, 8, ["modelValue"])
+                      ])
+                    ]),
+                    createElementVNode("span", {
+                      class: "btn",
+                      onClick: calculateFraction
+                    }, "\u5206\u5B50\u5F0F\u5242\u91CF")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 1
+      }, 512)) : (openBlock(), createElementBlock("div", _hoisted_11, [
+        createVNode(unref(NSpace), {
+          "wrap-item": false,
+          align: "center",
+          justify: "space-between"
+        }, {
+          default: withCtx(() => [
+            _hoisted_12,
+            createVNode(unref(NIcon), {
+              onClick: _cache[7] || (_cache[7] = ($event) => keydown("close")),
+              component: unref(Close)
+            }, null, 8, ["component"])
+          ]),
+          _: 1
+        }),
+        createElementVNode("div", _hoisted_13, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(englishKeys.value, (key, index) => {
+            return openBlock(), createElementBlock("span", {
+              key,
+              class: normalizeClass(["key" + index]),
+              onClick: ($event) => keydown(key)
+            }, [
+              key === "switch" ? (openBlock(), createBlock(unref(NIcon), {
+                key: 0,
+                component: unref(GitCompareOutline)
+              }, null, 8, ["component"])) : createCommentVNode("v-if", true),
+              key === "undo" ? (openBlock(), createBlock(unref(NIcon), {
+                key: 1,
+                component: unref(ArrowUndoSharp)
+              }, null, 8, ["component"])) : createCommentVNode("v-if", true),
+              createTextVNode(" " + toDisplayString(!ENGLISHOTHERKEY.includes(key) || key === "Enter" ? key : key === "" ? "\u7A7A\u683C" : ""), 1)
+            ], 10, _hoisted_14);
+          }), 128))
+        ])
+      ]));
+    };
+  }
+});
+var script = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "Keyboard.vue"]]);
+
+export { script as default };

package/es/components/keyboard/src/Keyboard.vue.d.ts

@@ -0,0 +1,103 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    mode: {
+        type: PropType<"default" | "day" | "dose">;
+        default: string;
+    };
+}, {
+    NUMBERKEYS: string;
+    DAYS: number[];
+    ENGLISHKEY: string;
+    ENGLISHOTHERKEY: string[];
+    ENGLISHKEYS: string[];
+    ENGLISHKEYS_: string[];
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        mode: {
+            type: PropType<"default" | "day" | "dose">;
+            default: string;
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        onKeydown?: ((...args: any[]) => any) | undefined;
+    }>>;
+    emit: (event: "change" | "keydown", ...args: any[]) => void;
+    popoverRef: import("vue").Ref<null>;
+    numberKeys: import("vue").Ref<string[]>;
+    days: import("vue").Ref<number[]>;
+    doses: import("vue").Ref<number[]>;
+    englishKeys: import("vue").Ref<string[]>;
+    value: import("vue").Ref<any>;
+    inputValue: import("vue").Ref<string>;
+    history: import("vue").Ref<import("@vueuse/core").UseRefHistoryRecord<string>[]>;
+    undo: () => void;
+    redo: () => void;
+    integerValue: import("vue").Ref<any>;
+    numeratorValue: import("vue").Ref<any>;
+    denominatorValue: import("vue").Ref<any>;
+    isDefault: import("vue").ComputedRef<boolean>;
+    isDay: import("vue").ComputedRef<boolean>;
+    isDose: import("vue").ComputedRef<boolean>;
+    keydown: (key: string | number) => void;
+    updateFraction: (value: number) => void;
+    calculateFraction: () => void;
+    NPopover: any;
+    NInputNumber: any;
+    NIcon: any;
+    NSpace: any;
+    ArrowUndoSharp: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    Close: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    GitCompareOutline: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    InputNumber: import("vue").DefineComponent<{
+        modelValue: {
+            type: StringConstructor;
+        };
+        integer: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: StringConstructor;
+            };
+            integer: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }>>;
+        emit: (event: "update:modelValue", ...args: any[]) => void;
+        update: (value: string | [string, string]) => void;
+        validator: (value: string) => boolean;
+        calculate: (type: string) => void;
+        NInput: any;
+        NIcon: any;
+        NSpace: any;
+        CaretDown: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+        CaretUp: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+        };
+        integer: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }, {
+        integer: boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "keydown")[], "change" | "keydown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    mode: {
+        type: PropType<"default" | "day" | "dose">;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+}, {
+    mode: "default" | "day" | "dose";
+}>;
+export default _default;

package/es/components/keyboard/src/components/InputNumber.js

@@ -0,0 +1,64 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode } from 'vue';
+import { NInput, NSpace, NIcon } from 'naive-ui';
+import { CaretUp, CaretDown } from '@vicons/ionicons5';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InputNumber",
+  props: {
+    modelValue: { type: String },
+    integer: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    function update(value) {
+      const val = typeof value === "string" ? value : value.join("");
+      emit("update:modelValue", val);
+    }
+    function validator(value) {
+      if (props.integer) {
+        return /(^[1-9]\d*$)/.test(value) || !value;
+      }
+      return /^\d+\.?\d*$/.test(value);
+    }
+    function calculate(type) {
+      var _a, _b;
+      const newValue = type === "+" ? +((_a = props.modelValue) != null ? _a : 0) + 1 : +((_b = props.modelValue) != null ? _b : 0) - 1;
+      emit("update:modelValue", newValue.toString());
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NInput), {
+        value: __props.modelValue,
+        "onUpdate:value": update,
+        "allow-input": validator,
+        placeholder: ""
+      }, {
+        suffix: withCtx(() => [
+          createVNode(unref(NSpace), {
+            justify: "center",
+            vertical: ""
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(NIcon), {
+                size: "13",
+                component: unref(CaretUp),
+                onClick: _cache[0] || (_cache[0] = ($event) => calculate("+"))
+              }, null, 8, ["component"]),
+              createVNode(unref(NIcon), {
+                size: "13",
+                component: unref(CaretDown),
+                onClick: _cache[1] || (_cache[1] = ($event) => calculate("-"))
+              }, null, 8, ["component"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["value"]);
+    };
+  }
+});
+var InputNumber = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "InputNumber.vue"]]);
+
+export { InputNumber as default };

package/es/components/keyboard/src/components/InputNumber.vue.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+    };
+    integer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+        };
+        integer: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }>>;
+    emit: (event: "update:modelValue", ...args: any[]) => void;
+    update: (value: string | [string, string]) => void;
+    validator: (value: string) => boolean;
+    calculate: (type: string) => void;
+    NInput: any;
+    NIcon: any;
+    NSpace: any;
+    CaretDown: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    CaretUp: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+    };
+    integer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    integer: boolean;
+}>;
+export default _default;

package/es/components/keyboard/style/index.css

@@ -0,0 +1 @@
+.c-keyboard span,.c-keyboard-english .keys span{cursor:pointer}.c-keyboard{display:flex;height:160px}.c-keyboard .btn{align-items:center;background:linear-gradient(180deg,#fff,#f2f2f2);border-radius:2px;box-shadow:0 2px 2px #00000036;box-sizing:border-box;display:inline-flex;font-size:14px;justify-content:center;text-align:center}.c-keyboard .btn:hover{background:#2474ff33;border:1px solid #2474ff}.c-keyboard .btn:active{background:#2474ff;color:#fff}.c-keyboard .btn:hover{box-shadow:none}.c-keyboard .left{border-right:1px solid #d5d5d5;box-sizing:border-box;padding:6px;width:130px}.c-keyboard .left .n-input{height:28px;width:100%}.c-keyboard .left .n-input .n-input__input-el{height:28px}.c-keyboard .left .keys{display:flex;margin-top:5px}.c-keyboard .left .keys .n-space{gap:4px 4px!important}.c-keyboard .left .keys span{align-items:center;background-color:#e8e8e8;border-radius:2px;box-sizing:border-box;display:inline-flex;font-size:14px;height:26px;justify-content:center;text-align:center;width:26px}.c-keyboard .left .keys span:hover{background:#2474ff33;border:1px solid #2474ff}.c-keyboard .left .keys span:active{background:#2474ff;color:#fff}.c-keyboard .left .keys span.opt{height:56px}.c-keyboard .left .keys span.is-0{width:56px}.c-keyboard .right-days{padding:0 12px}.c-keyboard .right-days .btn{height:26px;width:56px}.c-keyboard .right-dose{gap:8px 8px!important;padding:5px 12px 5px 5px}.c-keyboard .right-dose .btn{height:32px;width:100px}.c-keyboard .right-dose .btns{display:flex;flex-flow:column nowrap;height:100%;overflow-y:scroll;padding-right:6px}.c-keyboard .right-dose .btns .btn{height:20px;margin-top:4px;width:40px}.c-keyboard .right-dose .btns::-webkit-scrollbar{height:1px;width:2px}.c-keyboard .right-dose .btns::-webkit-scrollbar-track{background:#d8d8d8;border-radius:2px;box-shadow:inset 0 0 5px #fff}.c-keyboard .right-dose .btns::-webkit-scrollbar-thumb{background:#535353;border-radius:2px;box-shadow:inset 0 0 5px #fff}.c-keyboard .right-dose .inputs{align-items:center;display:flex;gap:8px}.c-keyboard .right-dose .inputs .n-input{height:32px;width:46px}.c-keyboard .right-dose .inputs .n-input .n-input__input-el{height:32px}.c-keyboard .n-input .n-input-wrapper{padding-right:5px}.c-keyboard .n-input .n-input-wrapper .n-input__suffix{line-height:0}.c-keyboard .n-input .n-input-wrapper .n-input__suffix .n-space{gap:0 0!important}.c-keyboard .n-input .n-input-wrapper .n-input__suffix .n-space .n-icon{cursor:pointer}.c-keyboard-english{box-sizing:border-box;padding:10px 6px;width:308px}.c-keyboard-english .n-space span{font-size:12px}.c-keyboard-english .n-space .n-icon{cursor:pointer}.c-keyboard-english .keys{display:flex;flex-flow:row wrap;gap:4px 4px;margin-top:5px}.c-keyboard-english .keys span{align-items:center;background-color:#e8e8e8;border-radius:2px;box-sizing:border-box;display:inline-flex;font-size:14px;height:26px;justify-content:center;text-align:center;width:26px}.c-keyboard-english .keys span:hover{background:#2474ff33;border:1px solid #2474ff}.c-keyboard-english .keys span:active{background:#2474ff;color:#fff}.c-keyboard-english .keys span.key10,.c-keyboard-english .keys span.key27{margin-left:16px}.c-keyboard-english .keys span.key26{margin-right:25px}.c-keyboard-english .keys span.key19{margin-left:31px}.c-keyboard-english .keys span.key28{width:146px}.c-keyboard-english .keys span.key30{width:56px}

package/es/components/shortcut-provider/src/hooks/useShortcuts.js

@@ -3,7 +3,7 @@ import { useEventListener, useDebounceFn } from '@vueuse/core';
 import { once, pick, omit, isFunction, isString } from 'lodash-es';
 import { reactive, ref, unref, computed, getCurrentInstance, inject, onBeforeUnmount, onDeactivated, onActivated } from 'vue';
 import { ShortcutStatus, InjectionShortcutManager } from '../constants/index.js';
-import { normalizeSignatureInfo, getKeySignature, getDisplaySignature, isInvalidSignature, isKeyboardEvent, isShortcutProvider } from '../utils/index.js';
+import { normalizeSignatureInfo, getKeySignature, getDisplaySignature, isInvalidSignature, isKeyboardEvent, isShortcutProvider, isInvalidKeyboardEvent } from '../utils/index.js';
 
 const GlobalShortcutProvider = Symbol("Glob");
 const ShortcutManagerCacheMap = /* @__PURE__ */ new Map();
@@ -82,7 +82,7 @@ class ShortcutManager {
       if (!isKeyboardEvent(event) || this.disabled)
         return;
       const providerWrapper = findAncestor(event.target, isShortcutProvider);
-      if (providerWrapper && providerWrapper !== unref(this.environmentEle)) {
+      if (providerWrapper && providerWrapper !== unref(this.environmentEle) || isInvalidKeyboardEvent(event)) {
         return;
       }
       const keySignature = getKeySignature(event);
@@ -113,7 +113,9 @@ class ShortcutManager {
 }
 const globManager = new ShortcutManager().start();
 const onceSetupWarn = once(() => ShortcutManager.log("\u975Esetup\u8BED\u5883\u4E0B\u7684shortcut\u5C06\u5F71\u54CD\u5168\u5C40"));
-const onceRegisterWarn = once(() => ShortcutManager.log("\u5728\u975Esetup\u8BED\u5883\u4E0B\u4F7F\u7528register\u51FD\u6570,\u7EC4\u4EF6\u9500\u6BC1\u65F6\u53EF\u80FD\u9700\u8981\u624B\u52A8\u8C03\u7528stop\u51FD\u6570\u4F7F\u5FEB\u6377\u952E\u5931\u6D3B"));
+const onceRegisterWarn = once(
+  () => ShortcutManager.log("\u5728\u975Esetup\u8BED\u5883\u4E0B\u4F7F\u7528register\u51FD\u6570,\u7EC4\u4EF6\u9500\u6BC1\u65F6\u53EF\u80FD\u9700\u8981\u624B\u52A8\u8C03\u7528stop\u51FD\u6570\u4F7F\u5FEB\u6377\u952E\u5931\u6D3B")
+);
 function useShortcuts(scope) {
   function useManager() {
     return computed(() => {

package/es/components/shortcut-provider/src/utils/index.d.ts

@@ -2,8 +2,10 @@ import { ShortcutSignatureInfo } from '../../../../../es/components/shortcut-pro
 export declare function isKeyboardEvent(event: any): event is KeyboardEvent;
 export declare function normalizeSignatureInfo(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): Required<ShortcutSignatureInfo>;
 export declare function getKeySignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): string;
-export declare function inKeyBlackList(key: string): boolean | undefined;
-export declare function isInvalidSignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): boolean | undefined;
+export declare function inKeyBlackList(key: string): boolean;
+export declare function isInvalidKeyboardEvent(event: KeyboardEvent): boolean;
+export declare function isInvalidSignatureAtInput(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): boolean;
+export declare function isInvalidSignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): boolean;
 export declare function getDisplaySignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): string;
 export declare function transformKey2DisplaySignature(keySignature: string): string;
 export declare function isShortcutProvider(ele: HTMLElement): boolean;

package/es/components/shortcut-provider/src/utils/index.js

@@ -1,5 +1,14 @@
 import { isString } from 'lodash-es';
 
+function isAlphanumeric(key) {
+  return /^[\dA-Za-z]$/.test(key);
+}
+function isPunctuation(key) {
+  return /^[，。；‘【】、\-=|+,.\/;’\[\]\\ ]$/.test(key);
+}
+function isFnNumberChar(key) {
+  return /^[!@#$%^&*()_+|~！¥…（）—｜～]$/.test(key);
+}
 function isKeyboardEvent(event) {
   return Reflect.get(event, "view") === window && Reflect.get(event, "shiftKey") != void 0;
 }
@@ -25,24 +34,36 @@ function getKeySignature(info) {
 const keyBlackList = ["CONTROL", "ALT", "SHIFT"];
 function inKeyBlackList(key) {
   if (!isString(key))
-    return;
+    return false;
   return keyBlackList.includes(key.toUpperCase());
 }
-function isInvalidSignature(info) {
+function isInvalidKeyboardEvent(event) {
+  const target = event.target;
+  if (target.tagName !== "INPUT")
+    return false;
+  return isInvalidSignatureAtInput(event);
+}
+function isInvalidSignatureAtInput(info) {
   const { ctrl, shift, alt, key } = normalizeSignatureInfo(info);
-  if (!ctrl && !shift && !alt)
-    return !/F\d/.test(key);
+  if (ctrl || alt)
+    return false;
+  if (shift)
+    return isFnNumberChar(key);
+  return isAlphanumeric(key) || isPunctuation(key);
+}
+function isInvalidSignature(info) {
+  const { key } = normalizeSignatureInfo(info);
   return inKeyBlackList(key);
 }
 function getDisplaySignature(info) {
   const { ctrl, shift, alt, key } = normalizeSignatureInfo(info);
-  return `${ctrl ? "Ctrl+ " : ""}${alt ? "Alt + " : ""}${shift ? "Shift + " : ""}${inKeyBlackList(key) ? "" : key}`;
+  return `${ctrl ? "Ctrl + " : ""}${alt ? "Alt + " : ""}${shift ? "Shift + " : ""}${inKeyBlackList(key) ? "" : key.replace(" ", "SPACE")}`;
 }
 function transformKey2DisplaySignature(keySignature) {
-  return keySignature.replace(/_/g, " + ");
+  return keySignature.replace(" ", "SPACE").replace(/_/g, " + ");
 }
 function isShortcutProvider(ele) {
   return ele && ele.getAttribute("is-shortcut-capture") != void 0;
 }
 
-export { getDisplaySignature, getKeySignature, inKeyBlackList, isInvalidSignature, isKeyboardEvent, isShortcutProvider, normalizeSignatureInfo, transformKey2DisplaySignature };
+export { getDisplaySignature, getKeySignature, inKeyBlackList, isInvalidKeyboardEvent, isInvalidSignature, isInvalidSignatureAtInput, isKeyboardEvent, isShortcutProvider, normalizeSignatureInfo, transformKey2DisplaySignature };