screen-recorder-vue 0.0.8 → 0.0.9

package/package.json

@@ -1,34 +1,34 @@
 {
   "name": "screen-recorder-vue",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "exports": {
     ".": {
+      "types": "./src/index.ts",
       "import": "./src/index.ts",
-      "require": "./src/index.ts",
-      "types": "./src/index.ts"
+      "require": "./src/index.ts"
     }
   },
   "scripts": {
-    "predev": "lerna run build --scope screen-recorder-base",
-    "prebuild": "lerna run build --scope screen-recorder-base",
-    "dev": "vite",
+    "predev": "pnpm --filter screen-recorder-base build",
+    "prebuild": "pnpm --filter screen-recorder-base build",
+    "dev": "vite --host",
     "build": "vite build",
     "serve": "vite preview"
   },
   "dependencies": {
-    "@vueuse/core": "^6.8.0",
-    "@w-xuefeng/bindkey": "^1.0.1",
-    "screen-recorder-base": "^0.0.7",
+    "@vueuse/core": "^14.1.0",
+    "@w-xuefeng/bindkey": "^1.0.3",
+    "screen-recorder-base": "^0.0.8",
     "vue": "^3.2.16"
   },
   "devDependencies": {
-    "@types/node": "^16.11.6",
-    "@vitejs/plugin-vue": "^1.9.3",
-    "typescript": "^4.4.3",
-    "vite": "^2.6.4",
-    "vue-tsc": "^0.3.0"
+    "@types/node": "^25.0.10",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vue-tsc": "^3.2.3"
   }
-}
+}

package/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import ScreenRecorderVue from "screen-recorder-vue";
+import ScreenRecorderVue from "./components/ScreenRecorder.vue";
 
 const recording = ref(false);
 

package/src/components/ScreenRecorder.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ScreenRecorder, IScreenRecorderOptions } from 'screen-recorder-base';
-import bindkey from '@w-xuefeng/bindkey';
-import { useDraggable } from '@vueuse/core';
-import { ref, reactive, useSlots } from 'vue';
+import { ScreenRecorder, IScreenRecorderOptions } from "screen-recorder-base";
+import { bindkey } from "@w-xuefeng/bindkey";
+import { useDraggable } from "@vueuse/core";
+import { ref, reactive, useSlots } from "vue";
 
 const props = defineProps<{
   shortKey?: string;
@@ -15,10 +15,10 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits([
-  'recording-start',
-  'recording-end',
-  'recording-unsupport',
-  'recording-error',
+  "recording-start",
+  "recording-end",
+  "recording-unsupport",
+  "recording-error",
 ]);
 
 const notSlotStart = ref(!!!useSlots().start);
@@ -51,23 +51,23 @@ const options: IScreenRecorderOptions = {
     state.unsupported = true;
     state.recording = false;
     state.error = false;
-    emit('recording-unsupport');
+    emit("recording-unsupport");
   },
   onRecordStart: (mediaStream: MediaStream) => {
     state.recording = true;
     state.error = false;
     initPreview(mediaStream);
-    emit('recording-start', mediaStream);
+    emit("recording-start", mediaStream);
   },
   onError: (err) => {
     state.error = true;
     state.recording = false;
-    emit('recording-error', err);
+    emit("recording-error", err);
   },
   onRecordEnd: (blobUrl: string, fixedBlob: Blob) => {
     state.recording = false;
     state.error = false;
-    emit('recording-end', blobUrl, fixedBlob);
+    emit("recording-end", blobUrl, fixedBlob);
   },
   timeSlice: 1000,
   videoOptions: props.videoOptions,
@@ -83,9 +83,9 @@ const end = () => {
   state.screenRecorder?.stopRecording();
 };
 
-if (props.shortKey && props.shortKey.toUpperCase() !== 'ESC') {
+if (props.shortKey && props.shortKey.toUpperCase() !== "ESC") {
   bindkey.add(props.shortKey, start);
-  bindkey.add('ESC', end);
+  bindkey.add("ESC", end);
 }
 
 const defaultBtnStyle = `
@@ -116,14 +116,23 @@ const defaultBtnStyle = `
     v-if="notSlotStart && !state.recording"
     @click="start"
     :style="`${defaultBtnStyle}${startBtnStyle}`"
-  >{{ startBtnText || "开始录屏" }}</button>
-  <slot name="start" v-else-if="!state.recording" :startEvent="start" :endEvent="end"></slot>
+  >
+    {{ startBtnText || "开始录屏" }}
+  </button>
+  <slot
+    name="start"
+    v-else-if="!state.recording"
+    :startEvent="start"
+    :endEvent="end"
+  ></slot>
 
   <button
     v-if="notSlotEnd && state.recording"
     @click="end"
     :style="`${defaultBtnStyle}${endBtnStyle}`"
-  >{{ endBtnText || "停止录屏" }}</button>
+  >
+    {{ endBtnText || "停止录屏" }}
+  </button>
   <slot name="end" v-else-if="state.recording" :endEvent="end"></slot>
 
   <video