增加键盘演示组件

Author: rtugeek

.editorconfig

@@ -330,7 +330,7 @@ ij_typescript_ternary_operation_signs_on_next_line = false
 ij_typescript_ternary_operation_wrap = off
 ij_typescript_union_types_wrap = on_every_item
 ij_typescript_use_chained_calls_group_indents = false
-ij_typescript_use_double_quotes = true
+ij_typescript_use_double_quotes = false
 ij_typescript_use_explicit_js_extension = auto
 ij_typescript_use_path_mapping = always
 ij_typescript_use_public_modifier = false
@@ -508,7 +508,7 @@ ij_javascript_ternary_operation_signs_on_next_line = false
 ij_javascript_ternary_operation_wrap = off
 ij_javascript_union_types_wrap = on_every_item
 ij_javascript_use_chained_calls_group_indents = false
-ij_javascript_use_double_quotes = true
+ij_javascript_use_double_quotes = false
 ij_javascript_use_explicit_js_extension = auto
 ij_javascript_use_path_mapping = always
 ij_javascript_use_public_modifier = false

.gitmodules

@@ -71,6 +71,13 @@ pnpm widget create
 
 ### 组件列表
 
+#### 键盘演示
+
+![png](./public/images/preview_keystroke.png)
+
+https://github.com/widget-js/hotspot
+
+
 #### 抖音热榜
 
 ![png](https://raw.githubusercontent.com/widget-js/hotspot/master/public/images/preview_douyin.png)

README.md

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']

components.d.ts

@@ -27,8 +27,8 @@
     "@vueuse/integrations": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@vueuse/router": "^9.9.0",
-    "@widget-js/core": "^0.1.25",
-    "@widget-js/vue3": "^0.1.23",
+    "@widget-js/core": "^0.1.31",
+    "@widget-js/vue3": "^0.1.26",
     "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "color": "^4.2.3",
@@ -63,25 +63,27 @@
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-typescript": "^9.1.0",
     "@widget-js/cli": "^1.0.7",
-    "@widget-js/vite-plugin-widget": "^1.0.1",
+    "@widget-js/vite-plugin-widget": "^1.0.3",
     "@widget-js/webpack-plugin": "^1.0.5",
+    "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "css-loader": "^6.7.2",
     "eslint": "^8.26.0",
-    "eslint-plugin-storybook": "^0.6.7",
     "eslint-plugin-vue": "^8.0.3",
     "lint-staged": "^13.0.3",
+    "postcss": "^8.4.21",
     "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.3",
     "raw-loader": "^4.0.2",
     "sass": "^1.56.0",
     "sass-loader": "^12.0.0",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.2.7",
     "ts-loader": "^8.3.0",
     "typescript": "^4.8.4",
     "unplugin-auto-import": "^0.11.4",
     "unplugin-vue-components": "^0.22.9",
     "vite": "^4.0.0",
-    "vue-cli-plugin-storybook": "^3.0.0-rc.1",
     "vue-loader": "^16.8.3",
     "vue-tsc": "^1.0.11",
     "webpack": "^5.74.0",

package.json

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 100,
+  printWidth: 120,
   tabWidth: 2,
   useTabs: false,
   semi: false,
@@ -15,6 +15,7 @@ module.exports = {
   proseWrap: 'never',
   htmlWhitespaceSensitivity: 'strict',
   endOfLine: 'auto',
+  bracketSameLine: true,
   rangeStart: 0,
   plugins: [require('prettier-plugin-tailwindcss')]
 }

prettier.config.js

@@ -3,8 +3,5 @@
 </template>
 
 <style lang="scss">
-@import "common/css/common.css";
 </style>
 
-<style lang="scss">
-</style>

public/images/preview_keystroke.png

@@ -1,15 +1,13 @@
 <template>
   <widget-base-dialog title="事项设置">
-    <template #main>
-      
-    </template>
+    <template #main></template>
   </widget-base-dialog>
 </template>
 
 <script lang="ts" setup>
-import {WidgetApi} from "@widget-js/core";
+import { WidgetApi } from '@widget-js/core'
 
-const store = WidgetApi.getStore("cn.widgetjs.widgets.countdown-list");
+const store = WidgetApi.getStore('cn.widgetjs.widgets.countdown-list')
 </script>
 
 <style scoped lang="scss">