@composy/keyboard-vue 0.0.1

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 (107) hide show
  1. package/README.md +46 -0
  2. package/dist/index.css +797 -0
  3. package/dist/index.js +1250 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.min.css +1 -0
  6. package/dist/index.min.js +1 -0
  7. package/es/components/KeyboardKey.js +17 -0
  8. package/es/components/KeyboardKey.js.map +1 -0
  9. package/es/components/KeyboardKey.vue_vue_type_script_setup_true_lang.js +131 -0
  10. package/es/components/KeyboardKey.vue_vue_type_script_setup_true_lang.js.map +1 -0
  11. package/es/components/KeyboardPopup.js +17 -0
  12. package/es/components/KeyboardPopup.js.map +1 -0
  13. package/es/components/KeyboardPopup.vue_vue_type_script_setup_true_lang.js +164 -0
  14. package/es/components/KeyboardPopup.vue_vue_type_script_setup_true_lang.js.map +1 -0
  15. package/es/components/LicensePlateKeyboard.js +17 -0
  16. package/es/components/LicensePlateKeyboard.js.map +1 -0
  17. package/es/components/LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.js +97 -0
  18. package/es/components/LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.js.map +1 -0
  19. package/es/components/VirtualKeyboard.js +17 -0
  20. package/es/components/VirtualKeyboard.js.map +1 -0
  21. package/es/components/VirtualKeyboard.vue_vue_type_script_setup_true_lang.js +127 -0
  22. package/es/components/VirtualKeyboard.vue_vue_type_script_setup_true_lang.js.map +1 -0
  23. package/es/components/index.d.ts +9 -0
  24. package/es/components/index.d.ts.map +1 -0
  25. package/es/components/index.js +15 -0
  26. package/es/composables/index.d.ts +7 -0
  27. package/es/composables/index.d.ts.map +1 -0
  28. package/es/composables/index.js +13 -0
  29. package/es/composables/useKeyboard.d.ts +113 -0
  30. package/es/composables/useKeyboard.d.ts.map +1 -0
  31. package/es/composables/useKeyboard.js +75 -0
  32. package/es/composables/useKeyboard.js.map +1 -0
  33. package/es/composables/useKeyboardPopup.d.ts +73 -0
  34. package/es/composables/useKeyboardPopup.d.ts.map +1 -0
  35. package/es/composables/useKeyboardPopup.js +119 -0
  36. package/es/composables/useKeyboardPopup.js.map +1 -0
  37. package/es/directives/index.d.ts +6 -0
  38. package/es/directives/index.d.ts.map +1 -0
  39. package/es/directives/index.js +12 -0
  40. package/es/directives/v-keyboard.d.ts +36 -0
  41. package/es/directives/v-keyboard.d.ts.map +1 -0
  42. package/es/directives/v-keyboard.js +65 -0
  43. package/es/directives/v-keyboard.js.map +1 -0
  44. package/es/index.d.ts +42 -0
  45. package/es/index.d.ts.map +1 -0
  46. package/es/index.js +34 -0
  47. package/es/index.js.map +1 -0
  48. package/es/plugins/engine-plugin.d.ts +37 -0
  49. package/es/plugins/engine-plugin.d.ts.map +1 -0
  50. package/es/plugins/engine-plugin.js +37 -0
  51. package/es/plugins/engine-plugin.js.map +1 -0
  52. package/es/plugins/index.d.ts +6 -0
  53. package/es/plugins/index.d.ts.map +1 -0
  54. package/es/plugins/index.js +12 -0
  55. package/es/style/css.js +1 -0
  56. package/es/style/index.js +1 -0
  57. package/es/style/index.less +1 -0
  58. package/es/styles/index.less +267 -0
  59. package/es/styles/keyboard.less +399 -0
  60. package/es/styles/themes.less +233 -0
  61. package/lib/components/KeyboardKey.cjs +21 -0
  62. package/lib/components/KeyboardKey.cjs.map +1 -0
  63. package/lib/components/KeyboardKey.vue_vue_type_script_setup_true_lang.cjs +131 -0
  64. package/lib/components/KeyboardKey.vue_vue_type_script_setup_true_lang.cjs.map +1 -0
  65. package/lib/components/KeyboardPopup.cjs +21 -0
  66. package/lib/components/KeyboardPopup.cjs.map +1 -0
  67. package/lib/components/KeyboardPopup.vue_vue_type_script_setup_true_lang.cjs +164 -0
  68. package/lib/components/KeyboardPopup.vue_vue_type_script_setup_true_lang.cjs.map +1 -0
  69. package/lib/components/LicensePlateKeyboard.cjs +21 -0
  70. package/lib/components/LicensePlateKeyboard.cjs.map +1 -0
  71. package/lib/components/LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.cjs +97 -0
  72. package/lib/components/LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.cjs.map +1 -0
  73. package/lib/components/VirtualKeyboard.cjs +21 -0
  74. package/lib/components/VirtualKeyboard.cjs.map +1 -0
  75. package/lib/components/VirtualKeyboard.vue_vue_type_script_setup_true_lang.cjs +127 -0
  76. package/lib/components/VirtualKeyboard.vue_vue_type_script_setup_true_lang.cjs.map +1 -0
  77. package/lib/components/index.cjs +19 -0
  78. package/lib/components/index.d.ts +9 -0
  79. package/lib/composables/index.cjs +15 -0
  80. package/lib/composables/index.d.ts +7 -0
  81. package/lib/composables/useKeyboard.cjs +76 -0
  82. package/lib/composables/useKeyboard.cjs.map +1 -0
  83. package/lib/composables/useKeyboard.d.ts +113 -0
  84. package/lib/composables/useKeyboardPopup.cjs +120 -0
  85. package/lib/composables/useKeyboardPopup.cjs.map +1 -0
  86. package/lib/composables/useKeyboardPopup.d.ts +73 -0
  87. package/lib/directives/index.cjs +13 -0
  88. package/lib/directives/index.d.ts +6 -0
  89. package/lib/directives/v-keyboard.cjs +66 -0
  90. package/lib/directives/v-keyboard.cjs.map +1 -0
  91. package/lib/directives/v-keyboard.d.ts +36 -0
  92. package/lib/index.cjs +537 -0
  93. package/lib/index.cjs.map +1 -0
  94. package/lib/index.d.ts +42 -0
  95. package/lib/package.json +3 -0
  96. package/lib/plugins/engine-plugin.cjs +37 -0
  97. package/lib/plugins/engine-plugin.cjs.map +1 -0
  98. package/lib/plugins/engine-plugin.d.ts +37 -0
  99. package/lib/plugins/index.cjs +13 -0
  100. package/lib/plugins/index.d.ts +6 -0
  101. package/lib/style/css.js +1 -0
  102. package/lib/style/index.css +2 -0
  103. package/lib/style/index.js +1 -0
  104. package/lib/styles/index.css +229 -0
  105. package/lib/styles/keyboard.css +346 -0
  106. package/lib/styles/themes.css +213 -0
  107. package/package.json +141 -0
@@ -0,0 +1,113 @@
1
+ /**
2
+ * 键盘管理 Composable
3
+ * @module composables/useKeyboard
4
+ */
5
+ import type { Ref } from 'vue';
6
+ import { type KeyboardConfig, type KeyboardEventMap, type KeyboardOptions, type KeyboardState, type KeyboardType, type KeyDefinition } from '@composy/keyboard-core';
7
+ /**
8
+ * useKeyboard 选项
9
+ */
10
+ export interface UseKeyboardOptions extends KeyboardOptions {
11
+ /**
12
+ * 是否立即显示
13
+ */
14
+ immediate?: boolean;
15
+ }
16
+ /**
17
+ * useKeyboard 返回值
18
+ */
19
+ export interface UseKeyboardReturn {
20
+ /**
21
+ * 键盘是否可见
22
+ */
23
+ visible: Ref<boolean>;
24
+ /**
25
+ * 当前键盘类型
26
+ */
27
+ type: Ref<KeyboardType>;
28
+ /**
29
+ * 是否大写状态
30
+ */
31
+ isUpperCase: Ref<boolean>;
32
+ /**
33
+ * 当前输入值
34
+ */
35
+ value: Ref<string>;
36
+ /**
37
+ * 光标位置
38
+ */
39
+ cursorPosition: Ref<number>;
40
+ /**
41
+ * 当前布局配置
42
+ */
43
+ layout: Ref<KeyboardConfig | null>;
44
+ /**
45
+ * 完整状态
46
+ */
47
+ state: KeyboardState;
48
+ /**
49
+ * 显示键盘
50
+ */
51
+ show: (input?: HTMLInputElement | HTMLTextAreaElement) => void;
52
+ /**
53
+ * 隐藏键盘
54
+ */
55
+ hide: () => void;
56
+ /**
57
+ * 切换显示/隐藏
58
+ */
59
+ toggle: (input?: HTMLInputElement | HTMLTextAreaElement) => void;
60
+ /**
61
+ * 切换键盘类型
62
+ */
63
+ switchType: (type: KeyboardType | string) => void;
64
+ /**
65
+ * 切换大小写
66
+ */
67
+ toggleShift: () => void;
68
+ /**
69
+ * 处理按键
70
+ */
71
+ handleKey: (key: KeyDefinition) => void;
72
+ /**
73
+ * 获取按键显示文本
74
+ */
75
+ getKeyLabel: (key: KeyDefinition) => string;
76
+ /**
77
+ * 设置值
78
+ */
79
+ setValue: (value: string) => void;
80
+ /**
81
+ * 追加值(在光标位置插入文本)
82
+ */
83
+ appendValue: (text: string) => void;
84
+ /**
85
+ * 设置最大长度
86
+ */
87
+ setMaxLength: (maxLength?: number) => void;
88
+ /**
89
+ * 绑定输入框
90
+ */
91
+ bindInput: (input: HTMLInputElement | HTMLTextAreaElement) => void;
92
+ /**
93
+ * 解绑输入框
94
+ */
95
+ unbindInput: () => void;
96
+ /**
97
+ * 事件监听
98
+ */
99
+ on: <K extends keyof KeyboardEventMap>(event: K, handler: (data: KeyboardEventMap[K]) => void) => () => void;
100
+ /**
101
+ * 单次事件监听
102
+ */
103
+ once: <K extends keyof KeyboardEventMap>(event: K, handler: (data: KeyboardEventMap[K]) => void) => () => void;
104
+ /**
105
+ * 销毁
106
+ */
107
+ destroy: () => void;
108
+ }
109
+ /**
110
+ * 键盘管理 Composable
111
+ */
112
+ export declare function useKeyboard(options?: UseKeyboardOptions): UseKeyboardReturn;
113
+ //# sourceMappingURL=useKeyboard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useKeyboard.d.ts","sourceRoot":"","sources":["../../src/composables/useKeyboard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,aAAa,EACnB,MAAM,wBAAwB,CAAA;AAE/B;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAErB;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC,YAAY,CAAC,CAAA;IAEvB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAEzB;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAElB;;OAEG;IACH,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAElC;;OAEG;IACH,KAAK,EAAE,aAAa,CAAA;IAEpB;;OAEG;IACH,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAE9D;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAA;IAEhB;;OAEG;IACH,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAEhE;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAA;IAEvB;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAA;IAEvC;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,MAAM,CAAA;IAE3C;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEjC;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,YAAY,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAElE;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAA;IAEvB;;OAEG;IACH,EAAE,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACnC,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,KACzC,MAAM,IAAI,CAAA;IAEf;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACrC,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,KACzC,MAAM,IAAI,CAAA;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA8E/E"}
@@ -0,0 +1,75 @@
1
+ /*!
2
+ * ***********************************
3
+ * @composy/keyboard-vue v0.0.1 *
4
+ * Built with rollup *
5
+ * Build time: 2024-08-17 11:42:14 *
6
+ * Build mode: production *
7
+ * Minified: No *
8
+ * ***********************************
9
+ */
10
+ import { onBeforeUnmount, reactive, ref, shallowRef } from "vue";
11
+ import { createKeyboardManager } from "@composy/keyboard-core";
12
+ //#region src/composables/useKeyboard.ts
13
+ function useKeyboard(options = {}) {
14
+ const { immediate = false, ...keyboardOptions } = options;
15
+ const manager = createKeyboardManager(keyboardOptions);
16
+ const visible = ref(false);
17
+ const type = ref(keyboardOptions.type ?? "qwerty");
18
+ const isUpperCase = ref(keyboardOptions.defaultUpperCase ?? false);
19
+ const value = ref(keyboardOptions.value ?? "");
20
+ const cursorPosition = ref(keyboardOptions.value?.length ?? 0);
21
+ const layout = shallowRef(manager.getLayout());
22
+ const state = reactive({
23
+ visible: false,
24
+ type: keyboardOptions.type ?? "qwerty",
25
+ isUpperCase: keyboardOptions.defaultUpperCase ?? false,
26
+ value: keyboardOptions.value ?? "",
27
+ cursorPosition: keyboardOptions.value?.length ?? 0,
28
+ maxLength: keyboardOptions.maxLength,
29
+ inputElement: null
30
+ });
31
+ const syncState = (newState) => {
32
+ visible.value = newState.visible;
33
+ type.value = newState.type;
34
+ isUpperCase.value = newState.isUpperCase;
35
+ value.value = newState.value;
36
+ cursorPosition.value = newState.cursorPosition;
37
+ Object.assign(state, newState);
38
+ };
39
+ manager.on("stateChange", syncState);
40
+ manager.on("switch", () => {
41
+ layout.value = manager.getLayout();
42
+ });
43
+ if (immediate) manager.show();
44
+ onBeforeUnmount(() => {
45
+ manager.destroy();
46
+ });
47
+ return {
48
+ visible,
49
+ type,
50
+ isUpperCase,
51
+ value,
52
+ cursorPosition,
53
+ layout,
54
+ state,
55
+ show: (input) => manager.show(input),
56
+ hide: () => manager.hide(),
57
+ toggle: (input) => manager.toggle(input),
58
+ switchType: (t) => manager.switchType(t),
59
+ toggleShift: () => manager.toggleShift(),
60
+ handleKey: (key) => manager.handleKey(key),
61
+ getKeyLabel: (key) => manager.getKeyLabel(key),
62
+ setValue: (v) => manager.setValue(v),
63
+ appendValue: (text) => manager.appendValue(text),
64
+ setMaxLength: (maxLength) => manager.setMaxLength(maxLength),
65
+ bindInput: (input) => manager.bindInput(input),
66
+ unbindInput: () => manager.unbindInput(),
67
+ on: (event, handler) => manager.on(event, handler),
68
+ once: (event, handler) => manager.once(event, handler),
69
+ destroy: () => manager.destroy()
70
+ };
71
+ }
72
+ //#endregion
73
+ export { useKeyboard };
74
+ /*! End of @composy/keyboard-vue | Powered by @composy/builder */
75
+ //# sourceMappingURL=useKeyboard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useKeyboard.js","names":[],"sources":["../../src/composables/useKeyboard.ts"],"sourcesContent":["/**\n * 键盘管理 Composable\n * @module composables/useKeyboard\n */\n\nimport { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'\nimport type { Ref } from 'vue'\nimport {\n createKeyboardManager,\n type KeyboardConfig,\n type KeyboardEventMap,\n type KeyboardOptions,\n type KeyboardState,\n type KeyboardType,\n type KeyDefinition,\n} from '@composy/keyboard-core'\n\n/**\n * useKeyboard 选项\n */\nexport interface UseKeyboardOptions extends KeyboardOptions {\n /**\n * 是否立即显示\n */\n immediate?: boolean\n}\n\n/**\n * useKeyboard 返回值\n */\nexport interface UseKeyboardReturn {\n /**\n * 键盘是否可见\n */\n visible: Ref<boolean>\n\n /**\n * 当前键盘类型\n */\n type: Ref<KeyboardType>\n\n /**\n * 是否大写状态\n */\n isUpperCase: Ref<boolean>\n\n /**\n * 当前输入值\n */\n value: Ref<string>\n\n /**\n * 光标位置\n */\n cursorPosition: Ref<number>\n\n /**\n * 当前布局配置\n */\n layout: Ref<KeyboardConfig | null>\n\n /**\n * 完整状态\n */\n state: KeyboardState\n\n /**\n * 显示键盘\n */\n show: (input?: HTMLInputElement | HTMLTextAreaElement) => void\n\n /**\n * 隐藏键盘\n */\n hide: () => void\n\n /**\n * 切换显示/隐藏\n */\n toggle: (input?: HTMLInputElement | HTMLTextAreaElement) => void\n\n /**\n * 切换键盘类型\n */\n switchType: (type: KeyboardType | string) => void\n\n /**\n * 切换大小写\n */\n toggleShift: () => void\n\n /**\n * 处理按键\n */\n handleKey: (key: KeyDefinition) => void\n\n /**\n * 获取按键显示文本\n */\n getKeyLabel: (key: KeyDefinition) => string\n\n /**\n * 设置值\n */\n setValue: (value: string) => void\n\n /**\n * 追加值(在光标位置插入文本)\n */\n appendValue: (text: string) => void\n\n /**\n * 设置最大长度\n */\n setMaxLength: (maxLength?: number) => void\n\n /**\n * 绑定输入框\n */\n bindInput: (input: HTMLInputElement | HTMLTextAreaElement) => void\n\n /**\n * 解绑输入框\n */\n unbindInput: () => void\n\n /**\n * 事件监听\n */\n on: <K extends keyof KeyboardEventMap>(\n event: K,\n handler: (data: KeyboardEventMap[K]) => void\n ) => () => void\n\n /**\n * 单次事件监听\n */\n once: <K extends keyof KeyboardEventMap>(\n event: K,\n handler: (data: KeyboardEventMap[K]) => void\n ) => () => void\n\n /**\n * 销毁\n */\n destroy: () => void\n}\n\n/**\n * 键盘管理 Composable\n */\nexport function useKeyboard(options: UseKeyboardOptions = {}): UseKeyboardReturn {\n const { immediate = false, ...keyboardOptions } = options\n\n // 创建键盘管理器\n const manager = createKeyboardManager(keyboardOptions)\n\n // 响应式状态\n const visible = ref(false)\n const type = ref<KeyboardType>(keyboardOptions.type ?? 'qwerty')\n const isUpperCase = ref(keyboardOptions.defaultUpperCase ?? false)\n const value = ref(keyboardOptions.value ?? '')\n const cursorPosition = ref(keyboardOptions.value?.length ?? 0)\n const layout = shallowRef<KeyboardConfig | null>(manager.getLayout())\n\n // 完整状态(响应式对象)\n const state = reactive<KeyboardState>({\n visible: false,\n type: keyboardOptions.type ?? 'qwerty',\n isUpperCase: keyboardOptions.defaultUpperCase ?? false,\n value: keyboardOptions.value ?? '',\n cursorPosition: keyboardOptions.value?.length ?? 0,\n maxLength: keyboardOptions.maxLength,\n inputElement: null,\n })\n\n // 同步管理器状态到 Vue 响应式状态\n const syncState = (newState: KeyboardState) => {\n visible.value = newState.visible\n type.value = newState.type\n isUpperCase.value = newState.isUpperCase\n value.value = newState.value\n cursorPosition.value = newState.cursorPosition\n\n Object.assign(state, newState)\n }\n\n // 监听状态变化\n manager.on('stateChange', syncState)\n\n // 监听键盘类型切换,更新布局\n manager.on('switch', () => {\n layout.value = manager.getLayout()\n })\n\n // 立即显示\n if (immediate) {\n manager.show()\n }\n\n // 组件卸载时销毁\n onBeforeUnmount(() => {\n manager.destroy()\n })\n\n return {\n visible,\n type,\n isUpperCase,\n value,\n cursorPosition,\n layout,\n state,\n show: (input?: HTMLInputElement | HTMLTextAreaElement) => manager.show(input),\n hide: () => manager.hide(),\n toggle: (input?: HTMLInputElement | HTMLTextAreaElement) => manager.toggle(input),\n switchType: (t: KeyboardType | string) => manager.switchType(t),\n toggleShift: () => manager.toggleShift(),\n handleKey: (key: KeyDefinition) => manager.handleKey(key),\n getKeyLabel: (key: KeyDefinition) => manager.getKeyLabel(key),\n setValue: (v: string) => manager.setValue(v),\n appendValue: (text: string) => manager.appendValue(text),\n setMaxLength: (maxLength?: number) => manager.setMaxLength(maxLength),\n bindInput: (input: HTMLInputElement | HTMLTextAreaElement) => manager.bindInput(input),\n unbindInput: () => manager.unbindInput(),\n on: (event, handler) => manager.on(event, handler),\n once: (event, handler) => manager.once(event, handler),\n destroy: () => manager.destroy(),\n }\n}\n"],"mappings":";;;;;;;;;;;;AAuJO,SAAS,YAAY,UAA8B,CAAC,GAAsB;CAC/E,MAAM,EAAE,YAAY,OAAO,GAAG,oBAAoB;CAGlD,MAAM,UAAU,sBAAsB,eAAe;CAGrD,MAAM,UAAU,IAAI,KAAK;CACzB,MAAM,OAAO,IAAkB,gBAAgB,QAAQ,QAAQ;CAC/D,MAAM,cAAc,IAAI,gBAAgB,oBAAoB,KAAK;CACjE,MAAM,QAAQ,IAAI,gBAAgB,SAAS,EAAE;CAC7C,MAAM,iBAAiB,IAAI,gBAAgB,OAAO,UAAU,CAAC;CAC7D,MAAM,SAAS,WAAkC,QAAQ,UAAU,CAAC;CAGpE,MAAM,QAAQ,SAAwB;EACpC,SAAS;EACT,MAAM,gBAAgB,QAAQ;EAC9B,aAAa,gBAAgB,oBAAoB;EACjD,OAAO,gBAAgB,SAAS;EAChC,gBAAgB,gBAAgB,OAAO,UAAU;EACjD,WAAW,gBAAgB;EAC3B,cAAc;CAChB,CAAC;CAGD,MAAM,aAAa,aAA4B;EAC7C,QAAQ,QAAQ,SAAS;EACzB,KAAK,QAAQ,SAAS;EACtB,YAAY,QAAQ,SAAS;EAC7B,MAAM,QAAQ,SAAS;EACvB,eAAe,QAAQ,SAAS;EAEhC,OAAO,OAAO,OAAO,QAAQ;CAC/B;CAGA,QAAQ,GAAG,eAAe,SAAS;CAGnC,QAAQ,GAAG,gBAAgB;EACzB,OAAO,QAAQ,QAAQ,UAAU;CACnC,CAAC;CAGD,IAAI,WACF,QAAQ,KAAK;CAIf,sBAAsB;EACpB,QAAQ,QAAQ;CAClB,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAAO,UAAmD,QAAQ,KAAK,KAAK;EAC5E,YAAY,QAAQ,KAAK;EACzB,SAAS,UAAmD,QAAQ,OAAO,KAAK;EAChF,aAAa,MAA6B,QAAQ,WAAW,CAAC;EAC9D,mBAAmB,QAAQ,YAAY;EACvC,YAAY,QAAuB,QAAQ,UAAU,GAAG;EACxD,cAAc,QAAuB,QAAQ,YAAY,GAAG;EAC5D,WAAW,MAAc,QAAQ,SAAS,CAAC;EAC3C,cAAc,SAAiB,QAAQ,YAAY,IAAI;EACvD,eAAe,cAAuB,QAAQ,aAAa,SAAS;EACpE,YAAY,UAAkD,QAAQ,UAAU,KAAK;EACrF,mBAAmB,QAAQ,YAAY;EACvC,KAAK,OAAO,YAAY,QAAQ,GAAG,OAAO,OAAO;EACjD,OAAO,OAAO,YAAY,QAAQ,KAAK,OAAO,OAAO;EACrD,eAAe,QAAQ,QAAQ;CACjC;AACF"}
@@ -0,0 +1,73 @@
1
+ /**
2
+ * 键盘弹出层 Composable
3
+ * @module composables/useKeyboardPopup
4
+ */
5
+ import type { CSSProperties, Ref } from 'vue';
6
+ import { type PopupPlacement, type PopupPositionConfig } from '@composy/keyboard-core';
7
+ /**
8
+ * useKeyboardPopup 选项
9
+ */
10
+ export interface UseKeyboardPopupOptions extends PopupPositionConfig {
11
+ /**
12
+ * 是否显示
13
+ */
14
+ visible?: Ref<boolean>;
15
+ /**
16
+ * 目标元素
17
+ */
18
+ target?: Ref<HTMLElement | null>;
19
+ /**
20
+ * 弹出层元素
21
+ */
22
+ popup?: Ref<HTMLElement | null>;
23
+ /**
24
+ * 点击外部关闭
25
+ */
26
+ closeOnClickOutside?: boolean;
27
+ /**
28
+ * 关闭回调
29
+ */
30
+ onClose?: () => void;
31
+ }
32
+ /**
33
+ * useKeyboardPopup 返回值
34
+ */
35
+ export interface UseKeyboardPopupReturn {
36
+ /**
37
+ * 弹出层样式
38
+ */
39
+ popupStyles: Ref<CSSProperties>;
40
+ /**
41
+ * 遮罩层样式
42
+ */
43
+ maskStyles: Ref<CSSProperties>;
44
+ /**
45
+ * 当前弹出位置
46
+ */
47
+ placement: Ref<PopupPlacement>;
48
+ /**
49
+ * 是否移动端
50
+ */
51
+ isMobileDevice: Ref<boolean>;
52
+ /**
53
+ * 是否显示遮罩
54
+ */
55
+ showMask: Ref<boolean>;
56
+ /**
57
+ * 是否正在动画中
58
+ */
59
+ isAnimating: Ref<boolean>;
60
+ /**
61
+ * 更新位置
62
+ */
63
+ updatePosition: () => void;
64
+ /**
65
+ * 关闭弹出层
66
+ */
67
+ close: () => void;
68
+ }
69
+ /**
70
+ * 键盘弹出层 Composable
71
+ */
72
+ export declare function useKeyboardPopup(options?: UseKeyboardPopupOptions): UseKeyboardPopupReturn;
73
+ //# sourceMappingURL=useKeyboardPopup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useKeyboardPopup.d.ts","sourceRoot":"","sources":["../../src/composables/useKeyboardPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC7C,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EAEzB,MAAM,wBAAwB,CAAA;AAE/B;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB;IAClE;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAE/B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;IAE/B;;OAEG;IACH,UAAU,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;IAE9B;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAE9B;;OAEG;IACH,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAE5B;;OAEG;IACH,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAEtB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAEzB;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAA;IAE1B;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B,GAAG,sBAAsB,CAkK9F"}
@@ -0,0 +1,119 @@
1
+ /*!
2
+ * ***********************************
3
+ * @composy/keyboard-vue v0.0.1 *
4
+ * Built with rollup *
5
+ * Build time: 2024-08-17 11:42:14 *
6
+ * Build mode: production *
7
+ * Minified: No *
8
+ * ***********************************
9
+ */
10
+ import { onBeforeUnmount, ref, watch } from "vue";
11
+ import { createPositionManager, isMobile, onClickOutside, onViewportChange } from "@composy/keyboard-core";
12
+ //#region src/composables/useKeyboardPopup.ts
13
+ function useKeyboardPopup(options = {}) {
14
+ const { visible = ref(false), target = ref(null), popup = ref(null), closeOnClickOutside = true, onClose, ...positionConfig } = options;
15
+ const positionManager = createPositionManager(positionConfig);
16
+ const popupStyles = ref({});
17
+ const maskStyles = ref({});
18
+ const placement = ref("bottom");
19
+ const isMobileDevice = ref(isMobile());
20
+ const showMask = ref(false);
21
+ const isAnimating = ref(false);
22
+ let cleanupClickOutside = null;
23
+ let cleanupViewportChange = null;
24
+ let cleanupScroll = null;
25
+ const updatePosition = () => {
26
+ if (!popup.value) return;
27
+ const popupRect = popup.value.getBoundingClientRect();
28
+ const result = positionManager.calculate(target.value, {
29
+ width: popupRect.width || 300,
30
+ height: popupRect.height || 260
31
+ });
32
+ placement.value = result.placement;
33
+ showMask.value = positionManager.shouldShowMask();
34
+ if (result.placement === "bottom-sheet") popupStyles.value = {
35
+ position: "fixed",
36
+ left: "0",
37
+ right: "0",
38
+ bottom: "0",
39
+ maxHeight: `${result.maxHeight}px`,
40
+ zIndex: 1e3
41
+ };
42
+ else popupStyles.value = {
43
+ position: "fixed",
44
+ left: `${result.position.x}px`,
45
+ top: `${result.position.y}px`,
46
+ maxHeight: result.maxHeight ? `${result.maxHeight}px` : void 0,
47
+ maxWidth: result.maxWidth ? `${result.maxWidth}px` : void 0,
48
+ zIndex: 1e3
49
+ };
50
+ if (showMask.value) maskStyles.value = {
51
+ position: "fixed",
52
+ top: "0",
53
+ left: "0",
54
+ right: "0",
55
+ bottom: "0",
56
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
57
+ zIndex: 999
58
+ };
59
+ };
60
+ const close = () => {
61
+ onClose?.();
62
+ };
63
+ watch(visible, (newVisible) => {
64
+ if (newVisible) {
65
+ isMobileDevice.value = isMobile();
66
+ requestAnimationFrame(() => {
67
+ updatePosition();
68
+ if (closeOnClickOutside && popup.value) cleanupClickOutside = onClickOutside(popup.value, (event) => {
69
+ if (target.value && target.value.contains(event.target)) return;
70
+ close();
71
+ });
72
+ });
73
+ cleanupViewportChange = onViewportChange(() => {
74
+ isMobileDevice.value = isMobile();
75
+ updatePosition();
76
+ });
77
+ if (!isMobileDevice.value) {
78
+ const handleScroll = () => {
79
+ requestAnimationFrame(() => {
80
+ updatePosition();
81
+ });
82
+ };
83
+ window.addEventListener("scroll", handleScroll, true);
84
+ cleanupScroll = () => {
85
+ window.removeEventListener("scroll", handleScroll, true);
86
+ };
87
+ }
88
+ } else {
89
+ cleanupClickOutside?.();
90
+ cleanupClickOutside = null;
91
+ cleanupViewportChange?.();
92
+ cleanupViewportChange = null;
93
+ cleanupScroll?.();
94
+ cleanupScroll = null;
95
+ }
96
+ }, { immediate: true });
97
+ watch(target, () => {
98
+ if (visible.value) updatePosition();
99
+ });
100
+ onBeforeUnmount(() => {
101
+ cleanupClickOutside?.();
102
+ cleanupViewportChange?.();
103
+ cleanupScroll?.();
104
+ });
105
+ return {
106
+ popupStyles,
107
+ maskStyles,
108
+ placement,
109
+ isMobileDevice,
110
+ showMask,
111
+ isAnimating,
112
+ updatePosition,
113
+ close
114
+ };
115
+ }
116
+ //#endregion
117
+ export { useKeyboardPopup };
118
+ /*! End of @composy/keyboard-vue | Powered by @composy/builder */
119
+ //# sourceMappingURL=useKeyboardPopup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useKeyboardPopup.js","names":[],"sources":["../../src/composables/useKeyboardPopup.ts"],"sourcesContent":["/**\n * 键盘弹出层 Composable\n * @module composables/useKeyboardPopup\n */\n\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport type { CSSProperties, Ref } from 'vue'\nimport {\n createPositionManager,\n isMobile,\n onClickOutside,\n onViewportChange,\n type PopupPlacement,\n type PopupPositionConfig,\n type PopupPositionResult,\n} from '@composy/keyboard-core'\n\n/**\n * useKeyboardPopup 选项\n */\nexport interface UseKeyboardPopupOptions extends PopupPositionConfig {\n /**\n * 是否显示\n */\n visible?: Ref<boolean>\n\n /**\n * 目标元素\n */\n target?: Ref<HTMLElement | null>\n\n /**\n * 弹出层元素\n */\n popup?: Ref<HTMLElement | null>\n\n /**\n * 点击外部关闭\n */\n closeOnClickOutside?: boolean\n\n /**\n * 关闭回调\n */\n onClose?: () => void\n}\n\n/**\n * useKeyboardPopup 返回值\n */\nexport interface UseKeyboardPopupReturn {\n /**\n * 弹出层样式\n */\n popupStyles: Ref<CSSProperties>\n\n /**\n * 遮罩层样式\n */\n maskStyles: Ref<CSSProperties>\n\n /**\n * 当前弹出位置\n */\n placement: Ref<PopupPlacement>\n\n /**\n * 是否移动端\n */\n isMobileDevice: Ref<boolean>\n\n /**\n * 是否显示遮罩\n */\n showMask: Ref<boolean>\n\n /**\n * 是否正在动画中\n */\n isAnimating: Ref<boolean>\n\n /**\n * 更新位置\n */\n updatePosition: () => void\n\n /**\n * 关闭弹出层\n */\n close: () => void\n}\n\n/**\n * 键盘弹出层 Composable\n */\nexport function useKeyboardPopup(options: UseKeyboardPopupOptions = {}): UseKeyboardPopupReturn {\n const {\n visible = ref(false),\n target = ref(null),\n popup = ref(null),\n closeOnClickOutside = true,\n onClose,\n ...positionConfig\n } = options\n\n // 创建位置管理器\n const positionManager = createPositionManager(positionConfig)\n\n // 响应式状态\n const popupStyles = ref<CSSProperties>({})\n const maskStyles = ref<CSSProperties>({})\n const placement = ref<PopupPlacement>('bottom')\n const isMobileDevice = ref(isMobile())\n const showMask = ref(false)\n const isAnimating = ref(false)\n\n // 清理函数\n let cleanupClickOutside: (() => void) | null = null\n let cleanupViewportChange: (() => void) | null = null\n let cleanupScroll: (() => void) | null = null\n\n /**\n * 更新弹出层位置\n */\n const updatePosition = () => {\n if (!popup.value) return\n\n const popupRect = popup.value.getBoundingClientRect()\n const result = positionManager.calculate(target.value, {\n width: popupRect.width || 300,\n height: popupRect.height || 260,\n })\n\n placement.value = result.placement\n showMask.value = positionManager.shouldShowMask()\n\n // 设置弹出层样式\n if (result.placement === 'bottom-sheet') {\n // 移动端底部弹出\n popupStyles.value = {\n position: 'fixed',\n left: '0',\n right: '0',\n bottom: '0',\n maxHeight: `${result.maxHeight}px`,\n zIndex: 1000,\n }\n }\n else {\n // PC 端下拉弹出\n popupStyles.value = {\n position: 'fixed',\n left: `${result.position.x}px`,\n top: `${result.position.y}px`,\n maxHeight: result.maxHeight ? `${result.maxHeight}px` : undefined,\n maxWidth: result.maxWidth ? `${result.maxWidth}px` : undefined,\n zIndex: 1000,\n }\n }\n\n // 设置遮罩层样式\n if (showMask.value) {\n maskStyles.value = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n bottom: '0',\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n zIndex: 999,\n }\n }\n }\n\n /**\n * 关闭弹出层\n */\n const close = () => {\n onClose?.()\n }\n\n // 监听 visible 变化\n watch(visible, (newVisible) => {\n if (newVisible) {\n // 显示时\n isMobileDevice.value = isMobile()\n\n // 延迟计算位置(等待 DOM 渲染)\n requestAnimationFrame(() => {\n updatePosition()\n\n // 添加点击外部关闭监听\n if (closeOnClickOutside && popup.value) {\n cleanupClickOutside = onClickOutside(popup.value, (event) => {\n // 检查是否点击在目标元素上\n if (target.value && target.value.contains(event.target as Node)) {\n return\n }\n close()\n })\n }\n })\n\n // 监听视口变化\n cleanupViewportChange = onViewportChange(() => {\n isMobileDevice.value = isMobile()\n updatePosition()\n })\n\n // PC 端监听滚动事件,跟随滚动\n if (!isMobileDevice.value) {\n const handleScroll = () => {\n requestAnimationFrame(() => {\n updatePosition()\n })\n }\n window.addEventListener('scroll', handleScroll, true)\n cleanupScroll = () => {\n window.removeEventListener('scroll', handleScroll, true)\n }\n }\n }\n else {\n // 隐藏时清理\n cleanupClickOutside?.()\n cleanupClickOutside = null\n cleanupViewportChange?.()\n cleanupViewportChange = null\n cleanupScroll?.()\n cleanupScroll = null\n }\n }, { immediate: true })\n\n // 监听目标元素变化\n watch(target, () => {\n if (visible.value) {\n updatePosition()\n }\n })\n\n // 组件卸载时清理\n onBeforeUnmount(() => {\n cleanupClickOutside?.()\n cleanupViewportChange?.()\n cleanupScroll?.()\n })\n\n return {\n popupStyles,\n maskStyles,\n placement,\n isMobileDevice,\n showMask,\n isAnimating,\n updatePosition,\n close,\n }\n}\n"],"mappings":";;;;;;;;;;;;AA+FO,SAAS,iBAAiB,UAAmC,CAAC,GAA2B;CAC9F,MAAM,EACJ,UAAU,IAAI,KAAK,GACnB,SAAS,IAAI,IAAI,GACjB,QAAQ,IAAI,IAAI,GAChB,sBAAsB,MACtB,SACA,GAAG,mBACD;CAGJ,MAAM,kBAAkB,sBAAsB,cAAc;CAG5D,MAAM,cAAc,IAAmB,CAAC,CAAC;CACzC,MAAM,aAAa,IAAmB,CAAC,CAAC;CACxC,MAAM,YAAY,IAAoB,QAAQ;CAC9C,MAAM,iBAAiB,IAAI,SAAS,CAAC;CACrC,MAAM,WAAW,IAAI,KAAK;CAC1B,MAAM,cAAc,IAAI,KAAK;CAG7B,IAAI,sBAA2C;CAC/C,IAAI,wBAA6C;CACjD,IAAI,gBAAqC;CAKzC,MAAM,uBAAuB;EAC3B,IAAI,CAAC,MAAM,OAAO;EAElB,MAAM,YAAY,MAAM,MAAM,sBAAsB;EACpD,MAAM,SAAS,gBAAgB,UAAU,OAAO,OAAO;GACrD,OAAO,UAAU,SAAS;GAC1B,QAAQ,UAAU,UAAU;EAC9B,CAAC;EAED,UAAU,QAAQ,OAAO;EACzB,SAAS,QAAQ,gBAAgB,eAAe;EAGhD,IAAI,OAAO,cAAc,gBAEvB,YAAY,QAAQ;GAClB,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,WAAW,GAAG,OAAO,UAAS;GAC9B,QAAQ;EACV;OAIA,YAAY,QAAQ;GAClB,UAAU;GACV,MAAM,GAAG,OAAO,SAAS,EAAC;GAC1B,KAAK,GAAG,OAAO,SAAS,EAAC;GACzB,WAAW,OAAO,YAAY,GAAG,OAAO,UAAS,MAAO,KAAA;GACxD,UAAU,OAAO,WAAW,GAAG,OAAO,SAAQ,MAAO,KAAA;GACrD,QAAQ;EACV;EAIF,IAAI,SAAS,OACX,WAAW,QAAQ;GACjB,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,iBAAiB;GACjB,QAAQ;EACV;CAEJ;CAKA,MAAM,cAAc;EAClB,UAAU;CACZ;CAGA,MAAM,UAAU,eAAe;EAC7B,IAAI,YAAY;GAEd,eAAe,QAAQ,SAAS;GAGhC,4BAA4B;IAC1B,eAAe;IAGf,IAAI,uBAAuB,MAAM,OAC/B,sBAAsB,eAAe,MAAM,QAAQ,UAAU;KAE3D,IAAI,OAAO,SAAS,OAAO,MAAM,SAAS,MAAM,MAAc,GAC5D;KAEF,MAAM;IACR,CAAC;GAEL,CAAC;GAGD,wBAAwB,uBAAuB;IAC7C,eAAe,QAAQ,SAAS;IAChC,eAAe;GACjB,CAAC;GAGD,IAAI,CAAC,eAAe,OAAO;IACzB,MAAM,qBAAqB;KACzB,4BAA4B;MAC1B,eAAe;KACjB,CAAC;IACH;IACA,OAAO,iBAAiB,UAAU,cAAc,IAAI;IACpD,sBAAsB;KACpB,OAAO,oBAAoB,UAAU,cAAc,IAAI;IACzD;GACF;EACF,OACK;GAEH,sBAAsB;GACtB,sBAAsB;GACtB,wBAAwB;GACxB,wBAAwB;GACxB,gBAAgB;GAChB,gBAAgB;EAClB;CACF,GAAG,EAAE,WAAW,KAAK,CAAC;CAGtB,MAAM,cAAc;EAClB,IAAI,QAAQ,OACV,eAAe;CAEnB,CAAC;CAGD,sBAAsB;EACpB,sBAAsB;EACtB,wBAAwB;EACxB,gBAAgB;CAClB,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
@@ -0,0 +1,6 @@
1
+ /**
2
+ * 指令导出
3
+ * @module directives
4
+ */
5
+ export * from './v-keyboard';
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,cAAc,CAAA"}
@@ -0,0 +1,12 @@
1
+ /*!
2
+ * ***********************************
3
+ * @composy/keyboard-vue v0.0.1 *
4
+ * Built with rollup *
5
+ * Build time: 2024-08-17 11:42:14 *
6
+ * Build mode: production *
7
+ * Minified: No *
8
+ * ***********************************
9
+ */
10
+ import { vKeyboard } from "./v-keyboard.js";
11
+ export { vKeyboard };
12
+ /*! End of @composy/keyboard-vue | Powered by @composy/builder */
@@ -0,0 +1,36 @@
1
+ /**
2
+ * v-keyboard 指令
3
+ * 自动在输入框聚焦时打开虚拟键盘
4
+ * @module directives/v-keyboard
5
+ */
6
+ import type { Directive } from 'vue';
7
+ /**
8
+ * 指令绑定值
9
+ */
10
+ export interface VKeyboardBinding {
11
+ /** 键盘类型 */
12
+ type?: string;
13
+ /** 是否启用 */
14
+ enabled?: boolean;
15
+ /** 打开键盘回调 */
16
+ onOpen?: (el: HTMLInputElement | HTMLTextAreaElement) => void;
17
+ /** 关闭键盘回调 */
18
+ onClose?: () => void;
19
+ }
20
+ /**
21
+ * v-keyboard 指令
22
+ *
23
+ * @example
24
+ * ```html
25
+ * <!-- 基础用法 -->
26
+ * <input v-keyboard />
27
+ *
28
+ * <!-- 指定键盘类型 -->
29
+ * <input v-keyboard="{ type: 'number' }" />
30
+ *
31
+ * <!-- 配合回调 -->
32
+ * <input v-keyboard="{ type: 'phone', onOpen: handleOpen }" />
33
+ * ```
34
+ */
35
+ export declare const vKeyboard: Directive<HTMLInputElement | HTMLTextAreaElement, VKeyboardBinding | string | boolean>;
36
+ //# sourceMappingURL=v-keyboard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"v-keyboard.d.ts","sourceRoot":"","sources":["../../src/directives/v-keyboard.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAoB,MAAM,KAAK,CAAA;AAEtD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa;IACb,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAC7D,aAAa;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAID;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,EAAE,SAAS,CAAC,gBAAgB,GAAG,mBAAmB,EAAE,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAmD5G,CAAA"}
@@ -0,0 +1,65 @@
1
+ /*!
2
+ * ***********************************
3
+ * @composy/keyboard-vue v0.0.1 *
4
+ * Built with rollup *
5
+ * Build time: 2024-08-17 11:42:14 *
6
+ * Build mode: production *
7
+ * Minified: No *
8
+ * ***********************************
9
+ */
10
+ //#region src/directives/v-keyboard.ts
11
+ const KEYBOARD_ATTR = "__v_keyboard__";
12
+ const vKeyboard = {
13
+ mounted(el, binding) {
14
+ const options = parseBinding(binding);
15
+ if (!options.enabled) return;
16
+ const handleFocus = () => {
17
+ el.blur();
18
+ options.onOpen?.(el);
19
+ };
20
+ el.addEventListener("focus", handleFocus);
21
+ el.setAttribute("inputmode", "none");
22
+ el[KEYBOARD_ATTR] = { cleanup: () => {
23
+ el.removeEventListener("focus", handleFocus);
24
+ el.removeAttribute("inputmode");
25
+ } };
26
+ },
27
+ updated(el, binding) {
28
+ const oldCleanup = el[KEYBOARD_ATTR]?.cleanup;
29
+ if (oldCleanup) oldCleanup();
30
+ const options = parseBinding(binding);
31
+ if (!options.enabled) return;
32
+ const handleFocus = () => {
33
+ el.blur();
34
+ options.onOpen?.(el);
35
+ };
36
+ el.addEventListener("focus", handleFocus);
37
+ el.setAttribute("inputmode", "none");
38
+ el[KEYBOARD_ATTR] = { cleanup: () => {
39
+ el.removeEventListener("focus", handleFocus);
40
+ el.removeAttribute("inputmode");
41
+ } };
42
+ },
43
+ unmounted(el) {
44
+ const data = el[KEYBOARD_ATTR];
45
+ if (data?.cleanup) data.cleanup();
46
+ delete el[KEYBOARD_ATTR];
47
+ }
48
+ };
49
+ function parseBinding(binding) {
50
+ const value = binding.value;
51
+ if (value === false) return { enabled: false };
52
+ if (value === true || value === void 0) return { enabled: true };
53
+ if (typeof value === "string") return {
54
+ enabled: true,
55
+ type: value
56
+ };
57
+ return {
58
+ enabled: value.enabled !== false,
59
+ ...value
60
+ };
61
+ }
62
+ //#endregion
63
+ export { vKeyboard };
64
+ /*! End of @composy/keyboard-vue | Powered by @composy/builder */
65
+ //# sourceMappingURL=v-keyboard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"v-keyboard.js","names":[],"sources":["../../src/directives/v-keyboard.ts"],"sourcesContent":["/**\n * v-keyboard 指令\n * 自动在输入框聚焦时打开虚拟键盘\n * @module directives/v-keyboard\n */\n\nimport type { Directive, DirectiveBinding } from 'vue'\n\n/**\n * 指令绑定值\n */\nexport interface VKeyboardBinding {\n /** 键盘类型 */\n type?: string\n /** 是否启用 */\n enabled?: boolean\n /** 打开键盘回调 */\n onOpen?: (el: HTMLInputElement | HTMLTextAreaElement) => void\n /** 关闭键盘回调 */\n onClose?: () => void\n}\n\nconst KEYBOARD_ATTR = '__v_keyboard__'\n\n/**\n * v-keyboard 指令\n *\n * @example\n * ```html\n * <!-- 基础用法 -->\n * <input v-keyboard />\n *\n * <!-- 指定键盘类型 -->\n * <input v-keyboard=\"{ type: 'number' }\" />\n *\n * <!-- 配合回调 -->\n * <input v-keyboard=\"{ type: 'phone', onOpen: handleOpen }\" />\n * ```\n */\nexport const vKeyboard: Directive<HTMLInputElement | HTMLTextAreaElement, VKeyboardBinding | string | boolean> = {\n mounted(el, binding) {\n const options = parseBinding(binding)\n if (!options.enabled) return\n\n const handleFocus = () => {\n // 阻止原生键盘\n el.blur()\n options.onOpen?.(el)\n }\n\n el.addEventListener('focus', handleFocus)\n el.setAttribute('inputmode', 'none')\n\n // 存储清理函数\n ;(el as any)[KEYBOARD_ATTR] = {\n cleanup: () => {\n el.removeEventListener('focus', handleFocus)\n el.removeAttribute('inputmode')\n },\n }\n },\n\n updated(el, binding) {\n const oldCleanup = (el as any)[KEYBOARD_ATTR]?.cleanup\n if (oldCleanup) oldCleanup()\n\n const options = parseBinding(binding)\n if (!options.enabled) return\n\n const handleFocus = () => {\n el.blur()\n options.onOpen?.(el)\n }\n\n el.addEventListener('focus', handleFocus)\n el.setAttribute('inputmode', 'none')\n\n ;(el as any)[KEYBOARD_ATTR] = {\n cleanup: () => {\n el.removeEventListener('focus', handleFocus)\n el.removeAttribute('inputmode')\n },\n }\n },\n\n unmounted(el) {\n const data = (el as any)[KEYBOARD_ATTR]\n if (data?.cleanup) data.cleanup()\n delete (el as any)[KEYBOARD_ATTR]\n },\n}\n\n/**\n * 解析指令绑定值\n */\nfunction parseBinding(binding: DirectiveBinding<VKeyboardBinding | string | boolean>): VKeyboardBinding & { enabled: boolean } {\n const value = binding.value\n\n if (value === false) {\n return { enabled: false }\n }\n\n if (value === true || value === undefined) {\n return { enabled: true }\n }\n\n if (typeof value === 'string') {\n return { enabled: true, type: value }\n }\n\n return {\n enabled: value.enabled !== false,\n ...value,\n }\n}\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,gBAAgB;AAiBf,MAAM,YAAoG;CAC/G,QAAQ,IAAI,SAAS;EACnB,MAAM,UAAU,aAAa,OAAO;EACpC,IAAI,CAAC,QAAQ,SAAS;EAEtB,MAAM,oBAAoB;GAExB,GAAG,KAAK;GACR,QAAQ,SAAS,EAAE;EACrB;EAEA,GAAG,iBAAiB,SAAS,WAAW;EACxC,GAAG,aAAa,aAAa,MAAM;EAGjC,GAAW,iBAAiB,EAC5B,eAAe;GACb,GAAG,oBAAoB,SAAS,WAAW;GAC3C,GAAG,gBAAgB,WAAW;EAChC,EACF;CACF;CAEA,QAAQ,IAAI,SAAS;EACnB,MAAM,aAAc,GAAW,cAAa,EAAG;EAC/C,IAAI,YAAY,WAAW;EAE3B,MAAM,UAAU,aAAa,OAAO;EACpC,IAAI,CAAC,QAAQ,SAAS;EAEtB,MAAM,oBAAoB;GACxB,GAAG,KAAK;GACR,QAAQ,SAAS,EAAE;EACrB;EAEA,GAAG,iBAAiB,SAAS,WAAW;EACxC,GAAG,aAAa,aAAa,MAAM;EAEjC,GAAW,iBAAiB,EAC5B,eAAe;GACb,GAAG,oBAAoB,SAAS,WAAW;GAC3C,GAAG,gBAAgB,WAAW;EAChC,EACF;CACF;CAEA,UAAU,IAAI;EACZ,MAAM,OAAQ,GAAW;EACzB,IAAI,MAAM,SAAS,KAAK,QAAQ;EAChC,OAAQ,GAAW;CACrB;AACF;AAKA,SAAS,aAAa,SAAyG;CAC7H,MAAM,QAAQ,QAAQ;CAEtB,IAAI,UAAU,OACZ,OAAO,EAAE,SAAS,MAAM;CAG1B,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO,EAAE,SAAS,KAAK;CAGzB,IAAI,OAAO,UAAU,UACnB,OAAO;EAAE,SAAS;EAAM,MAAM;CAAM;CAGtC,OAAO;EACL,SAAS,MAAM,YAAY;EAC3B,GAAG;CACL;AACF"}
package/es/index.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * @composy/keyboard-vue
3
+ * LDesign 虚拟键盘 - Vue 3 适配器
4
+ * @packageDocumentation
5
+ */
6
+ import type { Plugin } from 'vue';
7
+ export * from './components';
8
+ export * from './composables';
9
+ export * from './plugins';
10
+ export * from './directives';
11
+ export { createKeyboardManager, createPositionManager, createKeyboardRenderer, KeyboardManager, PositionManager, KeyboardRenderer, getLayout, registerLayout, registerLayouts, hasLayout, getAvailableLayouts, unregisterLayout, qwertyLayout, numberLayout, integerLayout, symbolLayout, symbolLayout2, licensePlateLayout, licensePlateProvinceLayout, licensePlateLetterLayout, licensePlateAlphanumericLayout, PROVINCES, PLATE_LETTERS, idcardLayout, phoneLayout, phoneSimpleLayout, amountLayout, amountSimpleLayout, bankcardLayout, verifycodeLayout, emailLayout, urlLayout, searchLayout, punctLayout, EMAIL_SUFFIXES, EventEmitter, isMobile, isTouchDevice, getDeviceType, getViewportInfo, vibrate, onViewportChange, getBoundingRect, onClickOutside, insertTextAtCursor, deleteCharBeforeCursor, shuffleArray, getRandomNumbers, getRandomLetters, getRandomAlphanumeric, createRandomNumberLayout, createRandomPinLayout, createRandomLetterLayout, createRandomMixedLayout, refreshRandomLayout, formatPhone, formatBankCard, formatAmount, formatIdCard, formatLicensePlate, formatVerifyCode, registerFormatter, getFormatter, applyFormatter, getTheme, registerTheme, getAvailableThemes, getAllThemes, setCurrentTheme, getCurrentTheme, themeToCSS, applyTheme, generateThemeStyle, mergeTheme, createTheme, miuiTheme, iosTheme, materialTheme, minimalTheme, darkTheme, presetThemes, defaultTheme, } from '@composy/keyboard-core';
12
+ export type { KeyboardType, KeyType, KeyDefinition, KeyboardRow, KeyboardConfig, KeyboardState, KeyboardEventMap, KeyboardOptions, DeviceType, PopupPlacement, Position, Size, BoundingRect, PopupPositionConfig, PopupPositionResult, ViewportInfo, ThemeName, ThemeColors, ThemeSizes, ThemeEffects, ThemeConfig, ThemeCSSVariables, KeyboardRendererOptions, FormatterFunction, } from '@composy/keyboard-core';
13
+ /**
14
+ * 键盘插件配置
15
+ */
16
+ export interface KeyboardPluginOptions {
17
+ /**
18
+ * 组件前缀
19
+ * @default 'L'
20
+ */
21
+ prefix?: string;
22
+ }
23
+ /**
24
+ * 原生 Vue 项目键盘插件
25
+ * 用于全局注册键盘组件和指令
26
+ *
27
+ * @example
28
+ * ```typescript
29
+ * import { createApp } from 'vue'
30
+ * import { KeyboardVuePlugin } from '@composy/keyboard-vue'
31
+ *
32
+ * const app = createApp(App)
33
+ * app.use(KeyboardVuePlugin, { prefix: 'L' })
34
+ * ```
35
+ */
36
+ export declare const KeyboardVuePlugin: Plugin;
37
+ /**
38
+ * @deprecated 使用 KeyboardVuePlugin 代替
39
+ */
40
+ export declare const KeyboardPlugin: import("vue").ObjectPlugin<any[]>;
41
+ export default KeyboardVuePlugin;
42
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAA;AAKtC,cAAc,cAAc,CAAA;AAG5B,cAAc,eAAe,CAAA;AAG7B,cAAc,WAAW,CAAA;AAGzB,cAAc,cAAc,CAAA;AAG5B,OAAO,EAEL,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAGhB,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,0BAA0B,EAC1B,wBAAwB,EACxB,8BAA8B,EAC9B,SAAS,EACT,aAAa,EAEb,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,YAAY,EACZ,WAAW,EACX,cAAc,EAGd,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EAEtB,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EAGnB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,cAAc,EAGd,QAAQ,EACR,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,SAAS,EACT,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,YAAY,GACb,MAAM,wBAAwB,CAAA;AAG/B,YAAY,EACV,YAAY,EACZ,OAAO,EACP,aAAa,EACb,WAAW,EACX,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EAEZ,SAAS,EACT,WAAW,EACX,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EAEjB,uBAAuB,EAEvB,iBAAiB,GAClB,MAAM,wBAAwB,CAAA;AAE/B;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAY/B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,mCAAoB,CAAA;AAG/C,eAAe,iBAAiB,CAAA"}
package/es/index.js ADDED
@@ -0,0 +1,34 @@
1
+ /*!
2
+ * ***********************************
3
+ * @composy/keyboard-vue v0.0.1 *
4
+ * Built with rollup *
5
+ * Build time: 2024-08-17 11:42:14 *
6
+ * Build mode: production *
7
+ * Minified: No *
8
+ * ***********************************
9
+ */
10
+ import KeyboardKey_default from "./components/KeyboardKey.js";
11
+ import VirtualKeyboard_default from "./components/VirtualKeyboard.js";
12
+ import { useKeyboard } from "./composables/useKeyboard.js";
13
+ import { useKeyboardPopup } from "./composables/useKeyboardPopup.js";
14
+ import KeyboardPopup_default from "./components/KeyboardPopup.js";
15
+ import LicensePlateKeyboard_default from "./components/LicensePlateKeyboard.js";
16
+ import "./components/index.js";
17
+ import { vKeyboard } from "./directives/v-keyboard.js";
18
+ import "./composables/index.js";
19
+ import { KeyboardEnginePlugin } from "./plugins/engine-plugin.js";
20
+ import "./plugins/index.js";
21
+ import { EMAIL_SUFFIXES, EventEmitter, KeyboardManager, KeyboardRenderer, PLATE_LETTERS, PROVINCES, PositionManager, amountLayout, amountSimpleLayout, applyFormatter, applyTheme, bankcardLayout, createKeyboardManager, createKeyboardRenderer, createPositionManager, createRandomLetterLayout, createRandomMixedLayout, createRandomNumberLayout, createRandomPinLayout, createTheme, darkTheme, defaultTheme, deleteCharBeforeCursor, emailLayout, formatAmount, formatBankCard, formatIdCard, formatLicensePlate, formatPhone, formatVerifyCode, generateThemeStyle, getAllThemes, getAvailableLayouts, getAvailableThemes, getBoundingRect, getCurrentTheme, getDeviceType, getFormatter, getLayout, getRandomAlphanumeric, getRandomLetters, getRandomNumbers, getTheme, getViewportInfo, hasLayout, idcardLayout, insertTextAtCursor, integerLayout, iosTheme, isMobile, isTouchDevice, licensePlateAlphanumericLayout, licensePlateLayout, licensePlateLetterLayout, licensePlateProvinceLayout, materialTheme, mergeTheme, minimalTheme, miuiTheme, numberLayout, onClickOutside, onViewportChange, phoneLayout, phoneSimpleLayout, presetThemes, punctLayout, qwertyLayout, refreshRandomLayout, registerFormatter, registerLayout, registerLayouts, registerTheme, searchLayout, setCurrentTheme, shuffleArray, symbolLayout, symbolLayout2, themeToCSS, unregisterLayout, urlLayout, verifycodeLayout, vibrate } from "@composy/keyboard-core";
22
+ //#region src/index.ts
23
+ const KeyboardVuePlugin = { install(app, options = {}) {
24
+ const prefix = options.prefix ?? "L";
25
+ app.component(`${prefix}Keyboard`, VirtualKeyboard_default);
26
+ app.component(`${prefix}KeyboardPopup`, KeyboardPopup_default);
27
+ app.component(`${prefix}LicensePlateKeyboard`, LicensePlateKeyboard_default);
28
+ app.directive("keyboard", vKeyboard);
29
+ } };
30
+ const KeyboardPlugin = KeyboardVuePlugin;
31
+ //#endregion
32
+ export { EMAIL_SUFFIXES, EventEmitter, KeyboardEnginePlugin, KeyboardKey_default as KeyboardKey, KeyboardManager, KeyboardPlugin, KeyboardPopup_default as KeyboardPopup, KeyboardRenderer, KeyboardVuePlugin, KeyboardVuePlugin as default, LicensePlateKeyboard_default as LicensePlateKeyboard, PLATE_LETTERS, PROVINCES, PositionManager, VirtualKeyboard_default as VirtualKeyboard, amountLayout, amountSimpleLayout, applyFormatter, applyTheme, bankcardLayout, createKeyboardManager, createKeyboardRenderer, createPositionManager, createRandomLetterLayout, createRandomMixedLayout, createRandomNumberLayout, createRandomPinLayout, createTheme, darkTheme, defaultTheme, deleteCharBeforeCursor, emailLayout, formatAmount, formatBankCard, formatIdCard, formatLicensePlate, formatPhone, formatVerifyCode, generateThemeStyle, getAllThemes, getAvailableLayouts, getAvailableThemes, getBoundingRect, getCurrentTheme, getDeviceType, getFormatter, getLayout, getRandomAlphanumeric, getRandomLetters, getRandomNumbers, getTheme, getViewportInfo, hasLayout, idcardLayout, insertTextAtCursor, integerLayout, iosTheme, isMobile, isTouchDevice, licensePlateAlphanumericLayout, licensePlateLayout, licensePlateLetterLayout, licensePlateProvinceLayout, materialTheme, mergeTheme, minimalTheme, miuiTheme, numberLayout, onClickOutside, onViewportChange, phoneLayout, phoneSimpleLayout, presetThemes, punctLayout, qwertyLayout, refreshRandomLayout, registerFormatter, registerLayout, registerLayouts, registerTheme, searchLayout, setCurrentTheme, shuffleArray, symbolLayout, symbolLayout2, themeToCSS, unregisterLayout, urlLayout, useKeyboard, useKeyboardPopup, vKeyboard, verifycodeLayout, vibrate };
33
+ /*! End of @composy/keyboard-vue | Powered by @composy/builder */
34
+ //# sourceMappingURL=index.js.map