sykj 0.1.0 → 0.1.2

package/README.md

@@ -41,19 +41,6 @@ app.mount("#app");
         <SyKeyboard />
     </div>
 </template>
-
-<script setup>
-import SyKeyboard from "sykj";
-</script>
-
-<style lang="scss" scoped>
-.app {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-</style>
 ```
 
 ```vue

package/lib/{common.js → common.ts}

@@ -1,9 +1,9 @@
-import "/lib/store";
+import "./store";
 
-import "/lib/focus";
+import "./focus";
 
-import SyKeyboard from "/packages/keyboard/index.js"; // 引入封装好的组件
-import SyLoading from "/packages/loading/index.js";
+import SyKeyboard from "../packages/keyboard/index.ts"; // 引入封装好的组件
+import SyLoading from "../packages/loading/index.ts";
 
 // export { SyKeyboard as default };
 // export { SyLoading };
@@ -19,7 +19,7 @@ const components = [
     // 其他组件...
 ];
 
-const install = function (Vue) {
+const install = function (Vue: { component: (arg0: any, arg1: any) => void }) {
     components.forEach((component) => {
         Vue.component(component.name, component);
     });

package/lib/focus.ts

@@ -0,0 +1,35 @@
+// import { useKeyStore } from "./store";
+// console.log("🚀 ~ file: focus.ts:3 ~ useKeyStore:", useKeyStore)
+const globalKey = window.$sy.key;
+// const keyStore = useKeyStore()
+
+let st = null;
+document.addEventListener("focusin", (event) => {
+    const target = event.target as HTMLElement;
+    if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA") {
+        if (!isEditableFormComponent(event.target)) return;
+        clearTimeout(st);
+        globalKey.open();
+        globalKey.currentElement = event.target;
+    }
+});
+document.addEventListener("focusout", (event) => {
+    st = setTimeout(() => {
+        globalKey.close();
+        // globalKey.currentElement = null;
+    }, 100);
+    const target = event.target as HTMLElement;
+    if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA") {
+        // window.showKeyboard()
+        //
+    }
+});
+
+// 是否展示输入法
+const isEditableFormComponent = (el: EventTarget): Boolean => {
+    if (el instanceof HTMLInputElement && el.readOnly) {
+        return false;
+    } else {
+        return true;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sykj",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "rem adaptation🚀",
   "main": "lib/common.ts",
   "files": [

package/packages/keyboard/{index.js → index.ts}

@@ -1,7 +1,7 @@
 import SyKeyboard from "./src/Keyboardcon.vue";
-
+import { App } from "vue";
 /* istanbul ignore next */
-SyKeyboard.install = function (Vue) {
+SyKeyboard.install = function (Vue: App) {
     Vue.component(SyKeyboard.name, SyKeyboard);
 };