@christianriedl/utils 1.0.92 → 1.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/utils",
-  "version": "1.0.92",
+  "version": "1.0.93",
   "description": "Interfaces, local storage, service worker, configuration, application state",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Microphone.vue

@@ -2,23 +2,28 @@
     import { ref, watch } from 'vue'
     import { useSpeechRecognition } from '@christianriedl/utils';
 
-    const props = defineProps<{ lang?: string, maxAlternatives?: number, size?: string, cls?: string, variant?: string }>();
+    const props = defineProps<{ lang?: string, maxAlternatives?: number, size?: string, cls?: string, variant?: "elevated" | "outlined" | "flat" | "text" | "tonal" | "plain" | undefined }>();
     const emits = defineEmits<{
         (e: 'result', result: string): void,
         (e: 'listening', isListening: boolean): void,
-        (e: 'final', visFinal: boolean): void
+        (e: 'final', isFinal: boolean): void
     }>();
 
     const sz = props.size ? props.size : "large";
-    const cls = props.cls ? props.cls : "bg-office";
+    const cls = props.cls ? [ props.cls] : ["bg-office"];
+;    /*
+    let cls = {};
+    if (props.cls) 
+        cls[props.cls] = true;
+    else
+        cls["bg-office"] = true;
+    */
     const vari = props.variant ? props.variant : "tonal";
     const lang = ref('de-AT');
-    const maxAlternatives = ref(1);
+    const maxAlternatives = props.maxAlternatives ? props.maxAlternatives : 1;
 
     if (props.lang)
         lang.value = props.lang;
-    if (props.maxAlternatives)
-        maxAlternatives.value = props.maxAlternatives;
 
     const speech = useSpeechRecognition({
       lang,
@@ -33,13 +38,15 @@
       speech.start()
     }
 
-    const { isListening, isFinal, stop, result } = speech
-    watch(isListening, isListening => emits("listening", isListening.value));
-    watch(isFinal, isFinal => emits("final", isFinal.value));
-    watch(result, result => emits("result", result.value));
+    const { isListening, isFinal, stop, result } = speech;
+    watch(isListening, isListening => emits("listening", isListening));
+    watch(isFinal, isFinal => emits("final", isFinal));
+    watch(result, result => emits("result", result));
 </script>
 
 <template>
-    <v-btn :size="sz" :class="cls" :variant="vari" icon="$microphone" :color="isListening ? 'red' : 'white'", @click="onStart"></v-btn>
+    <v-btn :variant="vari" :class="cls" @click="onStart">
+        <v-icon :size="sz" icon="$microphone" :color="isListening ? 'error' : 'primary'"></v-icon>
+    </v-btn>
 </template>