@coffic/cosy-ui 0.9.63 → 0.9.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/src-vue/key-catcher/KeyCatcher.vue +71 -77
  2. package/package.json +1 -1
package/dist/src-vue/key-catcher/KeyCatcher.vue CHANGED
@@ -31,91 +31,85 @@ KeyCatcher 组件用于全局捕获键盘按键事件，并可通过自定义事
31
31
  -->
32
32
 
33
33
  <script setup lang="ts">
34
- import { ref, onMounted, onUnmounted } from "vue";
35
- import "../../style";
36
-
37
- const lastKey = ref<string | null>(null);
38
- let timer: ReturnType<typeof setTimeout> | null = null;
39
-
40
- const props = defineProps<{ showKey?: boolean }>();
41
- const emit = defineEmits<{ (e: "globalKey", key: string): void }>();
42
-
43
- const handleKeydown = (event: KeyboardEvent) => {
44
- const tag = (event.target as HTMLElement)?.tagName?.toLowerCase();
45
- const isEditable =
46
- tag === "input" ||
47
- tag === "textarea" ||
48
- (event.target as HTMLElement)?.isContentEditable;
49
- if (
50
- event.key.length === 1 ||
51
- [
52
- "Enter",
53
- "Escape",
54
- "Backspace",
55
- "Tab",
56
- "Shift",
57
- "Control",
58
- "Alt",
59
- "Meta",
60
- "ArrowUp",
61
- "ArrowDown",
62
- "ArrowLeft",
63
- "ArrowRight",
64
- "CapsLock",
65
- "Delete",
66
- "Home",
67
- "End",
68
- "PageUp",
69
- "PageDown",
70
- ].includes(event.key)
71
- ) {
72
- // 只在不是输入框、textarea、contenteditable 时发事件
73
- if (/^[a-zA-Z]$/.test(event.key) && !isEditable) {
74
- emit("globalKey", event.key);
75
- }
76
- // 展示按键（如果允许）
77
- if (props.showKey) {
78
- let key = event.key;
79
- if (key === " ") key = "Space";
80
- lastKey.value = key;
81
- if (timer) clearTimeout(timer);
82
- timer = setTimeout(() => {
83
- lastKey.value = null;
84
- }, 3000);
85
- }
86
- }
87
- };
88
-
89
- onMounted(() => {
90
- window.addEventListener("keydown", handleKeydown);
91
- });
92
-
93
- onUnmounted(() => {
94
- window.removeEventListener("keydown", handleKeydown);
95
- if (timer) clearTimeout(timer);
96
- });
34
+ import { ref, onMounted, onUnmounted } from 'vue';
35
+ import '../../style';
36
+
37
+ const lastKey = ref<string | null>(null);
38
+ let timer: ReturnType<typeof setTimeout> | null = null;
39
+
40
+ const props = defineProps<{ showKey?: boolean }>();
41
+ const emit = defineEmits<{ (e: 'globalKey', key: string): void }>();
42
+
43
+ const handleKeydown = (event: KeyboardEvent) => {
44
+ if (
45
+ event.key.length === 1 ||
46
+ [
47
+ 'Enter',
48
+ 'Escape',
49
+ 'Backspace',
50
+ 'Tab',
51
+ 'Shift',
52
+ 'Control',
53
+ 'Alt',
54
+ 'Meta',
55
+ 'ArrowUp',
56
+ 'ArrowDown',
57
+ 'ArrowLeft',
58
+ 'ArrowRight',
59
+ 'CapsLock',
60
+ 'Delete',
61
+ 'Home',
62
+ 'End',
63
+ 'PageUp',
64
+ 'PageDown',
65
+ ].includes(event.key)
66
+ ) {
67
+ emit('globalKey', event.key);
68
+
69
+ // 展示按键（如果允许）
70
+ if (props.showKey) {
71
+ let key = event.key;
72
+ if (key === ' ') key = 'Space';
73
+ lastKey.value = key;
74
+ if (timer) clearTimeout(timer);
75
+ timer = setTimeout(() => {
76
+ lastKey.value = null;
77
+ }, 3000);
78
+ }
79
+ }
80
+ };
81
+
82
+ onMounted(() => {
83
+ window.addEventListener('keydown', handleKeydown);
84
+ });
85
+
86
+ onUnmounted(() => {
87
+ window.removeEventListener('keydown', handleKeydown);
88
+ if (timer) clearTimeout(timer);
89
+ });
97
90
  </script>
98
91
 
99
92
  <template>
100
- <Transition name="key-fade">
101
- <div v-if="props.showKey && lastKey"
102
- class="cosy:fixed cosy:bottom-4 cosy:right-4 cosy:bg-accent cosy:shadow-lg cosy:rounded cosy:px-6 cosy:py-3 cosy:z-50 cosy:text-xl cosy:font-bold cosy:text-gray-800 cosy:select-none cosy:pointer-events-none cosy:border cosy:border-gray-200 cosy:backdrop-blur-sm">
103
- <span class="cosy:text-blue-600">{{ lastKey }}</span>
104
- </div>
105
- </Transition>
93
+ <Transition name="key-fade">
94
+ <div
95
+ v-if="props.showKey && lastKey"
96
+ class="cosy:fixed cosy:bottom-4 cosy:right-4 cosy:bg-accent cosy:shadow-lg cosy:rounded cosy:px-6 cosy:py-3 cosy:z-50 cosy:text-xl cosy:font-bold cosy:text-gray-800 cosy:select-none cosy:pointer-events-none cosy:border cosy:border-gray-200 cosy:backdrop-blur-sm">
97
+ <span class="cosy:text-blue-600">{{ lastKey }}</span>
98
+ </div>
99
+ </Transition>
106
100
  </template>
107
101
 
108
102
  <style scoped>
109
- .key-fade-enter-active,
110
- .key-fade-leave-active {
103
+ .key-fade-enter-active,
104
+ .key-fade-leave-active {
111
105
  transition:
112
- opacity 0.2s,
113
- transform 0.2s;
114
- }
106
+ opacity 0.2s,
107
+ transform 0.2s;
108
+ }
115
109
 
116
- .key-fade-enter-from,
117
- .key-fade-leave-to {
110
+ .key-fade-enter-from,
111
+ .key-fade-leave-to {
118
112
  opacity: 0;
119
113
  transform: translateY(20px);
120
- }
114
+ }
121
115
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coffic/cosy-ui",
3
- "version": "0.9.63",
3
+ "version": "0.9.65",
4
4
  "description": "An astro component library",
5
5
  "author": {
6
6
  "name": "nookery",