fix: add emit response on beam filter option set

beam/src/components/BeamDayDivider.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
 
 import type { ListViewItem } from '../types'
 

beam/src/components/BeamFilter.vue

@@ -2,19 +2,20 @@
 	<div ref="beam-filters" class="beam_filters" :style="{ height: isOpen ? '100%' : headerHeight }">
 		<div ref="beam-filters-header" @click="toggle" class="beam_filters-heading">
 			<ToggleArrow :open="isOpen" />
-			<BeamHeading> Filter </BeamHeading>
+			<BeamHeading>Filter</BeamHeading>
 		</div>
+
 		<div class="beam_filters-options">
-			<slot>
-				<p>OPTIONS GO HERE</p>
-			</slot>
+			<slot></slot>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, useTemplateRef } from 'vue'
 
+defineSlots<{ default(): any }>()
+
 const header = useTemplateRef('beam-filters-header')
 const beamFilters = useTemplateRef('beam-filters')
 
@@ -27,9 +28,11 @@ const toggle = () => {
 }
 
 onMounted(() => {
-	headerHeight.value = getTotalHeight(header.value)
-	totalHeight.value = getTotalHeight(beamFilters.value)
-	beamFilters.value.style.height = headerHeight.value
+	if (header.value && beamFilters.value) {
+		headerHeight.value = getTotalHeight(header.value)
+		totalHeight.value = getTotalHeight(beamFilters.value)
+		beamFilters.value.style.height = headerHeight.value
+	}
 })
 
 const getTotalHeight = (el: HTMLDivElement) => {

beam/src/components/BeamFilterOption.vue

@@ -1,25 +1,26 @@
 <template>
 	<BeamHeading class="beam_filter-option-heading">{{ title }}</BeamHeading>
-	<div @click="toggle" class="beam_filter-option">
-		<div ref="select" class="beam_filter-option-select">
+	<div @click="open = !open" class="beam_filter-option">
+		<div class="beam_filter-option-select">
 			<div class="beam_filter-arrow">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.36 70.71">
 					<polygon points="0 70.71 0 0 35.36 35.36 0 70.71" />
 				</svg>
 			</div>
 			<div class="beam_filter-label">
-				<label>{{ choice }}</label>
+				<label>{{ label }}</label>
 			</div>
 		</div>
+
 		<ul ref="menu" v-if="open" class="beam_filter-select-menu">
 			<li
-				v-for="(opt, index) in choices"
-				:class="{ selected: choice == opt.choice }"
-				:data-value="opt.value"
-				:key="index"
+				v-for="choice in choices"
+				:class="{ selected: label == choice.label }"
+				:data-value="choice.value"
+				:key="choice.value"
 				class="beam_filter-select-option"
-				@click="updateValue(opt)">
-				{{ opt.choice }}
+				@click="selectChoice(choice)">
+				{{ choice.label }}
 			</li>
 		</ul>
 	</div>
@@ -28,27 +29,25 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-type Choice = {
-	choice: string
-	value: string
-}
+import { BeamFilterChoice } from '../types'
+
+const emit = defineEmits<{
+	select: [choice: BeamFilterChoice]
+}>()
 
 const { title = 'title', choices = [] } = defineProps<{
-	choices: Choice[]
+	choices: BeamFilterChoice[]
 	title?: string
 }>()
 
 const open = ref(false)
+const label = ref(choices[0].label)
 const value = ref(choices[0].value)
-const choice = ref(choices[0].choice)
 
-const updateValue = (data: Choice) => {
-	choice.value = data.choice
+const selectChoice = (data: BeamFilterChoice) => {
+	label.value = data.label
 	value.value = data.value
-}
-
-const toggle = () => {
-	open.value = !open.value
+	emit('select', data)
 }
 </script>
 

beam/src/components/ListView.vue

@@ -1,6 +1,6 @@
 <template>
 	<ul class="beam_list-view">
-		<li v-for="item in items" :key="item.label">
+		<li v-for="item in items" :key="item.barcode || item.label">
 			<template v-if="item.linkComponent == 'BeamDayDivider'">
 				<BeamDayDivider :item="item"></BeamDayDivider>
 			</template>

beam/src/components/SegmentedDisplay.vue

@@ -3,8 +3,11 @@
 		<h1 class="segmented-display-output" :style="{ color: getColor(textColor) }">{{ getOutput }}</h1>
 	</div>
 </template>
+
 <script setup lang="ts">
-import { ref, defineProps, computed } from 'vue'
+import { computed } from 'vue'
+
+import { BeamColor } from '../types'
 
 const {
 	displayInput = 120.2568,
@@ -14,16 +17,16 @@ const {
 } = defineProps<{
 	displayInput?: number
 	decimalPlaces?: number
-	displayColor?: Color
-	textColor?: Color
+	displayColor?: BeamColor
+	textColor?: BeamColor
 }>()
 
 const getOutput = computed(() => {
-	if (displayInput.length == 0) return Number(0).toFixed(decimalPlaces)
+	if (displayInput === 0) return Number(0).toFixed(decimalPlaces)
 	return displayInput.toFixed(decimalPlaces)
 })
 
-const getColor = color => {
+const getColor = (color: BeamColor) => {
 	return color.substr(0, 2) == '--' ? `var(${color})` : color
 }
 </script>

beam/src/composables/mqtt.ts

@@ -9,7 +9,14 @@ import { IMqttStream } from '../types'
  * @returns MQTT stream messages
  * @beta
  */
-export const useMqttStream = (options: IMqttStream) => {
+export const useMqttStream = async (options: IMqttStream) => {
+	if (options.host && options.port) {
+		const portActive = await isPortActive(options.host, options.port)
+		if (!portActive) {
+			return
+		}
+	}
+
 	const client = ref<MqttClient>()
 	const messages = ref<Record<string, string[]>>({})
 
@@ -43,3 +50,52 @@ export const useMqttStream = (options: IMqttStream) => {
 
 	return { messages }
 }
+
+/**
+ * Check if a local port has a service running
+ * @param host the host to check
+ * @param port the port to check
+ * @returns true if the port has a service running, false otherwise
+ *
+ * @beta
+ */
+export const isPortActive = async (host: string, port: number) => {
+	try {
+		const controller = new AbortController()
+		// Set a timeout of 2 seconds
+		const timeoutId = setTimeout(() => controller.abort(), 2000)
+
+		try {
+			await fetch(`${host}:${port}`, {
+				mode: 'no-cors', // This allows checking without CORS issues
+				signal: controller.signal,
+			})
+
+			clearTimeout(timeoutId)
+			// If we get any response, the port is in use
+			return true
+		} catch (error) {
+			clearTimeout(timeoutId)
+			if (error instanceof DOMException && error.name === 'AbortError') {
+				// Timeout - port is probably not in use
+				return false
+			}
+
+			// For connection refused errors, we need to check the error message
+			// as different browsers handle this differently
+			const errorString = String(error)
+			if (
+				errorString.includes('NetworkError') ||
+				errorString.includes('Failed to fetch') ||
+				errorString.includes('net::ERR_CONNECTION_REFUSED')
+			) {
+				return false
+			}
+
+			// If we get here, there might be something running on the port
+			return true
+		}
+	} catch (error) {
+		return false
+	}
+}

beam/src/index.ts

@@ -24,7 +24,7 @@ import SegmentedDisplay from './components/SegmentedDisplay.vue'
 import SplitColumn from './components/SplitColumn.vue'
 import ToggleArrow from './components/ToggleArrow.vue'
 import { useMqttStream } from './composables/mqtt'
-export type { IMqttStream, ListViewItem } from './types'
+export type * from './types'
 import '../themes/beam.css'
 
 /**

beam/src/types/index.ts

@@ -1,32 +1,70 @@
 import type { IClientOptions } from 'mqtt'
 
 /**
- * @beta
+ * @public
  */
 export type ListViewItem = {
-	description: string
-	label: string
-
+	barcode?: string
 	checked?: boolean
 	count?: {
 		count: number
 		of: number
-		uom: string
+		uom?: string
 	}
 	date?: string
 	dateFormat?: string
 	debounce?: number
+	description?: string
+	label?: string
 	linkComponent?: string
 	route?: string
 }
 
-type RGB = `rgb(${number}, ${number}, ${number})`
-type HSL = `hsl(${number}, ${number}%, ${number}%)`
-type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`
-type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
-type HEX = `#${string}`
+// TODO: the `string` at the end should be replaced by `DataType.Color`
+// in the `csstype` lib but import seems to be missing
+/**
+ * @public
+ */
+export type BeamColor = RGB | RGBA | HEX | HSL | HSLA | string
+
+/**
+ * @public
+ */
+export type BeamFilterChoice = {
+	label: string
+	value: string
+}
+
+/**
+ * RGB color string representation
+ * @public
+ */
+export type RGB = `rgb(${number}, ${number}, ${number})`
+
+/**
+ * RGBA color string representation
+ * @public
+ */
+export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
+
+/**
+ * HSL color string representation
+ * @public
+ */
+export type HSL = `hsl(${number}, ${number}%, ${number}%)`
+
+/**
+ * HSLA color string representation
+ * @public
+ */
+export type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`
+
+/**
+ * HEX color string representation
+ * @public
+ */
+export type HEX = `#${string}`
 
-export type Color = RGB | RGBA | HEX | HSL | HSLA | string
 /**
  * MQTT stream options
  * @public