@stonecrop/beam 0.30.0 → 0.32.0

package/src/components/ListItem.vue

@@ -1,85 +0,0 @@
-<template>
-	<li tabindex="0" class="beam_list-item">
-		<div class="beam_list-text">
-			<label class="beam--bold">{{ listItem.label }}</label>
-			<p>{{ listItem.description }}</p>
-		</div>
-
-		<ItemCount
-			v-if="listItem.count"
-			v-model="listItem.count.count"
-			:debounce="listItem.debounce"
-			:denominator="listItem.count.of"
-			:editable="true"
-			:uom="listItem.count.uom" />
-		<ItemCheck v-if="listItem.hasOwnProperty('checked')" v-model="listItem.checked" />
-	</li>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-import ItemCount from './ItemCount.vue'
-import ItemCheck from './ItemCheck.vue'
-import type { ListViewItem } from '../types'
-
-const { item } = defineProps<{ item: ListViewItem }>()
-const emit = defineEmits<{ update: [item: ListViewItem] }>()
-
-const listItem = ref(item)
-
-watch(
-	listItem,
-	value => {
-		emit('update', value)
-	},
-	{ deep: true }
-)
-</script>
-
-<style scoped>
-.beam_list-item {
-	padding: 0.625rem;
-	border-bottom: 1px solid var(--sc-row-border-color);
-	max-width: 100%;
-	box-sizing: border-box;
-	display: flex;
-	flex-flow: row nowrap;
-	justify-content: space-between;
-	gap: 1.25rem;
-	cursor: pointer;
-	outline: 2px solid transparent;
-	outline-offset: -1px;
-
-	&:focus {
-		outline: 2px solid var(--sc-focus-cell-outline);
-		background-color: var(--sc-focus-cell-background);
-	}
-}
-
-.beam_list-text {
-	width: 80%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	flex-grow: 1;
-	font-size: 0.875rem;
-	color: var(--sc-primary-text-color);
-
-	& label,
-	& p {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		width: 100%;
-		display: block;
-	}
-}
-
-.beam_list-item label {
-	display: block;
-}
-
-.beam_list-item p {
-	margin: 0;
-}
-</style>

package/src/components/ListView.vue

@@ -1,62 +0,0 @@
-<template>
-	<ul class="beam_list-view">
-		<li v-for="item in items" :key="item.barcode || item.label">
-			<template v-if="item.linkComponent == 'BeamDayDivider'">
-				<BeamDayDivider :item="item"></BeamDayDivider>
-			</template>
-
-			<template v-else-if="item.linkComponent">
-				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
-					<ListItem :item="item" @update="handleUpdate"></ListItem>
-				</component>
-			</template>
-
-			<template v-else>
-				<ListItem :item="item" @update="handleUpdate"></ListItem>
-			</template>
-		</li>
-	</ul>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
-
-import BeamDayDivider from './BeamDayDivider.vue'
-import ListItem from './ListItem.vue'
-import type { ListViewItem } from '../types'
-
-defineProps<{ items: ListViewItem[] }>()
-const emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()
-
-onMounted(() => {
-	window.addEventListener('scroll', handleScroll)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('scroll', handleScroll)
-})
-
-const handleUpdate = (item: ListViewItem) => emit('update', item)
-const handleScroll = () => {
-	const scrollHeightDifference = document.documentElement.scrollHeight - window.innerHeight
-	const scrollposition = document.documentElement.scrollTop
-	if (scrollHeightDifference - scrollposition <= 2) {
-		emit('scrollbottom')
-	}
-}
-</script>
-
-<style scoped>
-.beam_list-view {
-	font-family: var(--sc-font-family);
-	list-style-type: none;
-	margin-top: 1px;
-	margin-left: var(--sc-list-margin);
-	margin-right: var(--sc-list-margin);
-	padding: 0;
-}
-
-ul.beam_list-view:last-of-type {
-	padding-bottom: 2.5em;
-}
-</style>

package/src/components/Navbar.vue

@@ -1,42 +0,0 @@
-<template>
-	<nav class="beam_navbar">
-		<slot name="title">
-			<BeamHeading>TITLE</BeamHeading>
-		</slot>
-		<BeamBtn @click="handlePrimaryAction">
-			<slot name="navbaraction">Action</slot>
-		</BeamBtn>
-	</nav>
-</template>
-
-<script setup lang="ts">
-const emit = defineEmits<{ click: [] }>()
-
-const handlePrimaryAction = () => {
-	emit('click')
-}
-</script>
-
-<style scoped>
-.beam_navbar {
-	padding: 0.625rem;
-	background-color: var(--sc-primary-color);
-	margin-left: 0;
-	min-height: 2em;
-	max-height: 2em;
-	color: var(--sc-primary-text-color);
-	display: flex;
-	flex-flow: row nowrap;
-	align-content: center;
-	justify-content: space-between;
-	align-items: center;
-	position: sticky;
-	top: 0;
-	font-family: var(--sc-font-family);
-	border-bottom: 1px solid var(--sc-row-border-color);
-
-	& h1 {
-		margin-left: 0.625rem;
-	}
-}
-</style>

package/src/components/ScanInput.vue

@@ -1,23 +0,0 @@
-<template>
-	<div id="scan_input"></div>
-</template>
-
-<script setup lang="ts">
-import onScan from 'onscan.js'
-import type { OnScan } from 'onscan.js'
-import { onMounted, onUnmounted } from 'vue'
-
-const emit = defineEmits<{ scanInstance: [instance: OnScan] }>()
-const props = defineProps<{
-	scanHandler: (barcode: string, qty: number) => void
-}>()
-
-onMounted(() => {
-	const instance = onScan.attachTo(window, { onScan: props.scanHandler })
-	emit('scanInstance', instance)
-})
-
-onUnmounted(() => {
-	onScan.detachFrom(window)
-})
-</script>

package/src/components/SegmentedDisplay.vue

@@ -1,55 +0,0 @@
-<template>
-	<div class="segmented-display" :style="{ background: getColor(displayColor) }">
-		<h1 class="segmented-display-output" :style="{ color: getColor(textColor) }">{{ getOutput }}</h1>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { BeamColor } from '../types'
-
-const {
-	displayInput = 120.2568,
-	decimalPlaces = 2,
-	displayColor = 'gray',
-	textColor = 'white',
-} = defineProps<{
-	displayInput?: number
-	decimalPlaces?: number
-	displayColor?: BeamColor
-	textColor?: BeamColor
-}>()
-
-const getOutput = computed(() => {
-	if (displayInput === 0) return Number(0).toFixed(decimalPlaces)
-	return displayInput.toFixed(decimalPlaces)
-})
-
-const getColor = (color: BeamColor) => {
-	return color?.substring(0, 2) == '--' ? `var(${color})` : color
-}
-</script>
-
-<style scoped>
-.segmented-display {
-	width: 100%;
-	padding: 1rem;
-	box-sizing: border-box;
-	display: flex;
-	background: var(--sc-segmented-display-background);
-	align-items: center;
-	justify-content: flex-end;
-}
-.segmented-display-output {
-	text-align: right;
-	font-family: Segment7, Arimo, sans-serif;
-	font-weight: normal;
-	font-size: var(--sc-segemented-display-font-size);
-	padding: 0;
-	margin: 0;
-	letter-spacing: 0.3rem;
-	margin-bottom: -0.7rem;
-	color: var(--sc-segmented-display-color);
-}
-</style>

package/src/components/SplitColumn.vue

@@ -1,49 +0,0 @@
-<template>
-	<div class="two-column" :style="{ justifyContent, alignItems }">
-		<div class="column column-left">
-			<slot name="left"></slot>
-		</div>
-		<div class="column column-right">
-			<slot name="right"></slot>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-
-const { justifyContent = 'space-between', alignItems = 'flex-start' } = defineProps<{
-	justifyContent?: CSSProperties['justifyContent']
-	alignItems?: CSSProperties['alignItems']
-}>()
-</script>
-
-<style scoped>
-.two-column {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: baseline;
-	gap: 1rem;
-
-	@media screen and (max-width: 400px) {
-		flex-direction: column;
-		gap: 0;
-	}
-}
-
-.column {
-	flex-grow: 1;
-	width: 50%;
-	@media screen and (max-width: 400px) {
-		width: 100%;
-	}
-}
-
-.column-right {
-	text-align: right;
-	@media screen and (max-width: 400px) {
-		text-align: left;
-	}
-}
-</style>

package/src/components/ToggleArrow.vue

@@ -1,35 +0,0 @@
-<template>
-	<div class="arrow-icon" :class="{ open }">
-		<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>
-</template>
-
-<script setup lang="ts">
-const { open } = defineProps<{ open: boolean }>()
-</script>
-
-<style scoped>
-svg {
-	width: 100%;
-	overflow: visible;
-	fill: var(--sc-primary-text-color);
-}
-
-.arrow-icon {
-	width: 0.4rem;
-	transform: rotate(0);
-	transform-origin: center;
-	position: relative;
-	transition: all 0.1s ease-in-out;
-	margin: 0.5rem;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-}
-
-.open {
-	transform: rotate(90deg);
-}
-</style>

package/src/composables/mqtt.ts

@@ -1,102 +0,0 @@
-import mqtt, { type MqttClient } from 'mqtt'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-import { IMqttStream } from '../types'
-
-/**
- * Use MQTT stream
- * @param options - MQTT stream options
- * @returns MQTT stream messages
- * @beta
- */
-export const useMqttStream = async (options: IMqttStream) => {
-	const messages = ref<Record<string, string[]>>({})
-
-	if (options.host && options.port) {
-		const portActive = await isPortActive(options.host, options.port)
-		if (!portActive) {
-			return { messages }
-		}
-	}
-
-	const client = ref<MqttClient>()
-
-	onMounted(() => {
-		client.value = mqtt.connect(options)
-
-		if (!options.topics) {
-			options.topics = ['#']
-		}
-
-		for (const topic of options.topics) {
-			client.value.subscribe(topic, err => {
-				if (err) {
-					throw err
-				}
-			})
-		}
-
-		client.value.on('message', (topic, message) => {
-			if (!messages.value[topic]) {
-				messages.value[topic] = []
-			}
-
-			messages.value[topic].push(message.toString())
-		})
-	})
-
-	onUnmounted(() => {
-		client.value?.end()
-	})
-
-	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 {
-		return false
-	}
-}

package/src/index.ts

@@ -1,87 +0,0 @@
-import { App } from 'vue'
-
-import ActionFooter from './components/ActionFooter.vue'
-import BeamArrow from './components/BeamArrow.vue'
-import BeamBtn from './components/BeamBtn.vue'
-import BeamDayDivider from './components/BeamDayDivider.vue'
-import BeamFilter from './components/BeamFilter.vue'
-import BeamFilterOption from './components/BeamFilterOption.vue'
-import BeamHeading from './components/BeamHeading.vue'
-import BeamMetadata from './components/BeamMetadata.vue'
-import BeamModal from './components/BeamModal.vue'
-import BeamModalOutlet from './components/BeamModalOutlet.vue'
-import BeamProgress from './components/BeamProgress.vue'
-import Confirm from './components/Confirm.vue'
-import FixedTop from './components/FixedTop.vue'
-import ItemCheck from './components/ItemCheck.vue'
-import ItemCount from './components/ItemCount.vue'
-import ListAnchor from './components/ListAnchor.vue'
-import ListItem from './components/ListItem.vue'
-import ListView from './components/ListView.vue'
-import Navbar from './components/Navbar.vue'
-import ScanInput from './components/ScanInput.vue'
-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 * from './types'
-import '../themes/beam.css'
-
-/**
- * Install all Beam components
- * @param app - Vue app instance
- * @public
- */
-function install(app: App /* options */) {
-	app.component('ActionFooter', ActionFooter)
-	app.component('BeamArrow', BeamArrow)
-	app.component('BeamBtn', BeamBtn)
-	app.component('BeamDayDivider', BeamDayDivider)
-	app.component('BeamFilter', BeamFilter)
-	app.component('BeamFilterOption', BeamFilterOption)
-	app.component('BeamHeading', BeamHeading)
-	app.component('BeamMetadata', BeamMetadata)
-	app.component('BeamModal', BeamModal)
-	app.component('BeamModalOutlet', BeamModalOutlet)
-	app.component('BeamProgress', BeamProgress)
-	app.component('Confirm', Confirm)
-	app.component('FixedTop', FixedTop)
-	app.component('ItemCheck', ItemCheck)
-	app.component('ItemCount', ItemCount)
-	app.component('ListAnchor', ListAnchor)
-	app.component('ListItem', ListItem)
-	app.component('ListView', ListView)
-	app.component('Navbar', Navbar)
-	app.component('ScanInput', ScanInput)
-	app.component('SegmentedDisplay', SegmentedDisplay)
-	app.component('SplitColumn', SplitColumn)
-	app.component('ToggleArrow', ToggleArrow)
-}
-
-export {
-	ActionFooter,
-	BeamArrow,
-	BeamBtn,
-	BeamDayDivider,
-	BeamFilter,
-	BeamFilterOption,
-	BeamHeading,
-	BeamMetadata,
-	BeamModal,
-	BeamModalOutlet,
-	BeamProgress,
-	Confirm,
-	FixedTop,
-	ItemCheck,
-	ItemCount,
-	ListAnchor,
-	ListItem,
-	ListView,
-	Navbar,
-	ScanInput,
-	SegmentedDisplay,
-	SplitColumn,
-	ToggleArrow,
-	install,
-	useMqttStream,
-}

package/src/onscan.d.ts

@@ -1,45 +0,0 @@
-// onscan.js ships no typings and has no @types package, so its import was implicitly `any` —
-// which also made `onScan` unusable as a type. Declared here against the library's actual public
-// surface (v1.5.2); the chainable methods return the singleton itself, which is why `attachTo`
-// hands back something you can call `simulate` on.
-declare module 'onscan.js' {
-	export interface OnScanOptions {
-		onScan?: (scanned: string, qty: number) => void
-		onScanError?: (debug: { message: string }) => void
-		onKeyProcess?: (char: string, event: KeyboardEvent) => void
-		onKeyDetect?: (keyCode: number, event: KeyboardEvent) => void
-		onPaste?: (pasted: string, event: ClipboardEvent) => void
-		keyCodeMapper?: (event: KeyboardEvent) => string | null
-		onScanButtonLongPress?: () => void
-		scanButtonKeyCode?: number | false
-		scanButtonLongPressTime?: number
-		timeBeforeScanTest?: number
-		avgTimeByChar?: number
-		minLength?: number
-		suffixKeyCodes?: number[]
-		prefixKeyCodes?: number[]
-		ignoreIfFocusOn?: boolean | string | Element | Element[]
-		stopPropagation?: boolean
-		preventDefault?: boolean
-		captureEvents?: boolean
-		reactToKeydown?: boolean
-		reactToPaste?: boolean
-		singleScanQty?: number
-	}
-
-	export interface OnScan {
-		/** Attaches the scanner listeners to `target`. Throws if it is already attached. */
-		attachTo(target: EventTarget, options?: OnScanOptions): OnScan
-		detachFrom(target: EventTarget): void
-		getOptions(target: EventTarget): OnScanOptions
-		setOptions(target: EventTarget, options: OnScanOptions): OnScan
-		/** Feeds a scan through as if a scanner produced it. */
-		simulate(target: EventTarget, code: string | number[]): OnScan
-		isScanInProgressFor(target: EventTarget): boolean
-		isAttachedTo(target: EventTarget): boolean
-		decodeKeyEvent(event: KeyboardEvent): string | null
-	}
-
-	const onScan: OnScan
-	export default onScan
-}

package/src/shims-vue.d.ts

@@ -1,7 +0,0 @@
-declare module '*.vue' {
-	import { ComponentOptions } from 'vue'
-	const Component: ComponentOptions
-	export default Component
-}
-
-declare module '*.css' {}

package/src/types/index.ts

@@ -1,77 +0,0 @@
-import type { IClientOptions } from 'mqtt'
-import { CSSProperties } from 'vue'
-
-/**
- * Configuration object for ListView component items
- * @public
- */
-export type ListViewItem = {
-	barcode?: string
-	checked?: boolean
-	count?: {
-		count: number
-		of: number
-		uom?: string
-	}
-	date?: string
-	dateFormat?: string
-	debounce?: number
-	description?: string
-	label?: string
-	linkComponent?: string
-	route?: string
-}
-
-/**
- * Union type for color values - supports RGB, RGBA, HEX, HSL, HSLA, or CSS color string
- * @public
- */
-export type BeamColor = RGB | RGBA | HEX | HSL | HSLA | CSSProperties['color']
-
-/**
- * Filter choice with label and value for BeamFilter component
- * @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}`
-
-/**
- * MQTT stream options
- * @public
- */
-export interface IMqttStream extends IClientOptions {
-	/** MQTT topics to subscribe to */
-	topics?: string[]
-}