sykj 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,68 @@
+<h1 align="center" >SYKJ</h1>
+
+-   🤓 SY_UI
+-   💪 Vue 3 Composition API
+-   🔥 Written in TypeScript
+
+## 快速开始
+
+### 安装
+
+```typescript
+# NPM
+$ npm install sykj --save
+
+# Yarn
+$ yarn add sykj
+
+# pnpm
+$ pnpm install sykj
+```
+
+### 使用
+
+```typescript
+// main.ts
+import { createApp } from "vue";
+import sykj from "sykj";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(sykj);
+app.mount("#app");
+```
+
+```vue
+// App.vue
+<template>
+    <div class="app">
+        <input type="text" />
+        <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
+// ***.vue
+
+<template>
+    <div class="app">
+        <input type="text" />
+        <!-- 使用input or textarea 聚焦时自动打开键盘-->
+    </div>
+</template>
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sykj",
-  "version": "0.0.2",
-  "description": "",
+  "version": "0.0.4",
+  "description": "rem adaptation🚀",
   "main": "lib/common.ts",
   "files": [
     "lib",
@@ -11,7 +11,11 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
-  "author": "IU",
+  "keywords": [
+    "keyboard",
+    "vue",
+    "ui"
+  ],
+  "author": "IUHua",
   "license": "MIT"
 }

package/packages/keyboard/src/Keyboardcon.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     @click="makeFocus"
+    class="keyboardcon defaultCss"
+    :class="[!keyStore.keyboardcon ? 'show' : '', toUpKeyCase ? 'upKeyCase' : '']"
     @contextmenu.prevent="makeFocus"
-    :class="[keyStore.keyboardcon ? 'show' : '', toUpKeyCase ? 'default' : 'root']"
-    class="keyboardcon"
   >
     <!-- 中文拼音列表 -->
     <div class="chinese">
@@ -735,23 +735,22 @@ const cancelPress = () => {
 // 添加和清理事件监听器
 
 //#endregion ⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️
+
+//
 </script>
 
 <style lang="scss">
 @import "./theme.scss";
 
-.default {
-  --h: 45px;
-  --gap: 8px;
-  --fontSize: 20px;
-  --borra: 6px;
+.defaultCss {
+  --h: 0.7rem;
+  --gap: 0.1rem;
+  --fontSize: 0.4rem;
+  --borra: 0.2em;
 }
 
-.root {
-  --h: 45px;
-  --gap: 8px;
-  --fontSize: 24px;
-  --borra: 6px;
+.upKeyCase {
+  --fontSize: 0.35rem;
 }
 
 .keyboardcon {
@@ -760,25 +759,27 @@ const cancelPress = () => {
   width: 100%;
   bottom: 0;
   font-size: var(--fontSize);
-  padding: 10px 10px 5px;
+  padding: 0.25rem 0.25rem 0.125rem;
   box-sizing: border-box;
-  box-shadow: 0 0 20px 0px rgb(117, 117, 117);
+  box-shadow: 0 0 0.3rem 0 rgb(117, 117, 117);
   z-index: 10000;
   // // @include key_background("keyboard_background");
   background: var(--keyboard_background);
-  border-radius: 10px 10px 0 0;
+  border-radius: 0.25rem 0.25rem 0 0;
   transition: all 0.2s;
+  & * {
+    box-sizing: border-box;
+  }
   .btns {
     color: rgb(0, 123, 255);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 10px 0;
-    font-size: 12px;
+    margin: 0.25rem 0;
+    font-size: 0.25rem;
 
     > div {
-      height: 20px;
-
+      height: 0.25rem;
       span {
         color: gainsboro;
         transition: all 0.3s;
@@ -786,7 +787,7 @@ const cancelPress = () => {
     }
 
     .ch {
-      font-size: 20px;
+      font-size: 0.35rem;
       color: rgb(0, 123, 255);
     }
   }
@@ -797,13 +798,16 @@ const cancelPress = () => {
     .pinyin {
       padding: 4px;
       box-sizing: border-box;
+      // border: 1px solid red;
     }
 
     .wenzi {
       position: relative;
-      height: 40px;
-      background: var(--keyboard_background);
+      height: 0.6rem;
 
+      // border: 1px solid red;
+      background: var(--keyboard_background);
+      margin-bottom: 0.1rem;
       .wenzi_box {
         display: flex;
         // flex-wrap: wrap;
@@ -818,18 +822,18 @@ const cancelPress = () => {
         left: 0;
         top: 0;
         width: 98%;
-        // border: 1px solid red;
-        // @include key_background("keyboard_background");
+        height: 100%;
         background: var(--keyboard_background);
         z-index: 1;
         transition: all 0.5s;
-        height: 40px;
         box-sizing: border-box;
 
         span {
           flex-shrink: 0;
-          padding: 0 4px;
+          padding: 0.04rem 0.08rem;
           border-radius: 6px;
+          // border: 1px solid red;
+          height: fit-content;
 
           &:active {
             // @include key_background("key_active_background");
@@ -842,24 +846,29 @@ const cancelPress = () => {
 
       .wenzi_box_more {
         // flex-wrap: wrap;
-        padding-right: 34px;
+        padding-right: 0.34rem;
         box-sizing: border-box;
         width: 102%;
-        left: -3px;
-        height: 31vh;
+        left: -0.03rem;
+        // height: 31vh;
+        height: 4.5rem;
+
+        // border: 1px solid red;
       }
 
       .moreText {
         position: absolute;
-        height: 38px;
+        height: 0.55rem;
         top: 0;
         right: -5px;
         z-index: 100;
-        padding: 0 5px;
+        padding: 0 0.05rem;
         display: flex;
         justify-content: center;
         align-items: center;
-        border-radius: 6px;
+        border-radius: var(--borra);
+        // border: 1px solid red;
+
         // @include key_background("keyboard_background");
         background: var(--keyboard_background);
 
@@ -984,7 +993,6 @@ const cancelPress = () => {
         justify-content: center;
         align-items: center;
         height: var(--h);
-        width: 34px;
         & span,
         & img {
           pointer-events: none;
@@ -998,9 +1006,12 @@ const cancelPress = () => {
           width: 100%;
           font-size: var(--fontSize);
           box-shadow: inset 0px 0px 2px 0px #8f9eae;
-          background: var(--key_background) span {
+
+          background: var(--key_background);
+          span {
             height: fit-content;
-            line-height: 18px;
+            line-height: 0.2rem;
+            // border: 1px solid red;
           }
 
           &:active {
@@ -1059,7 +1070,7 @@ const cancelPress = () => {
               display: flex;
               justify-content: center;
               align-items: center;
-              font-size: 18px;
+              font-size: 0.3rem;
               img {
                 transform: scale(0.7);
                 // @include filter("key_filter");
@@ -1115,7 +1126,8 @@ const cancelPress = () => {
           .key {
             padding: 0;
             box-sizing: border-box;
-            font-size: 16px;
+            font-size: 0.3rem;
+            font-weight: bold;
 
             img {
               height: 100%;
@@ -1149,7 +1161,6 @@ const cancelPress = () => {
 
             img {
               transform: scale(0.8);
-              // @include filter("key_filter");
               filter: var(--key_filter);
             }
           }