@stonecrop/beam 0.4.1 → 0.4.3

package/dist/index.js

@@ -18,6 +18,7 @@ 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';
@@ -48,7 +49,8 @@ function install(app /* options */) {
     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, SplitColumn, ToggleArrow, install, useMqttStream, };
+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/dist/src/index.d.ts

@@ -19,6 +19,7 @@ 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';
@@ -30,5 +31,5 @@ import '../themes/beam.css';
  * @public
  */
 declare function install(app: App): void;
-export { ActionFooter, BeamArrow, BeamBtn, BeamDayDivider, BeamFilter, BeamFilterOption, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, FixedTop, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, ToggleArrow, install, useMqttStream, };
+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, };
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,oBAAoB,CAAA;AAE3B;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAuBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACb,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,oBAAoB,CAAA;AAE3B;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAwBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACb,CAAA"}

package/dist/src/types/index.d.ts

@@ -17,6 +17,12 @@ export type ListViewItem = {
     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}`;
+export type Color = RGB | RGBA | HEX | HSL | HSLA | string;
 /**
  * MQTT stream options
  * @public
@@ -24,4 +30,5 @@ export type ListViewItem = {
 export interface IMqttStream extends IClientOptions {
     topics?: string[];
 }
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAA;AAE1C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,EAAE,MAAM,CAAA;KACX,CAAA;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CACjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAA;AAE1C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,EAAE,MAAM,CAAA;KACX,CAAA;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,GAAG,GAAG,OAAO,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAA;AACjD,KAAK,GAAG,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI,CAAA;AACnD,KAAK,IAAI,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,OAAO,MAAM,EAAE,CAAA;AAC/D,KAAK,IAAI,GAAG,QAAQ,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAA;AAC9D,KAAK,GAAG,GAAG,IAAI,MAAM,EAAE,CAAA;AAEvB,MAAM,MAAM,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAA;AAC1D;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/beam",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "license": "MIT",
   "type": "module",
   "author": {

package/src/components/SegmentedDisplay.vue

@@ -0,0 +1,52 @@
+<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 { ref, defineProps, computed } from 'vue'
+
+const {
+	displayInput = 120.2568,
+	decimalPlaces = 2,
+	displayColor = 'gray',
+	textColor = 'white',
+} = defineProps<{
+	displayInput?: number
+	decimalPlaces?: number
+	displayColor?: Color
+	textColor?: Color
+}>()
+
+const getOutput = computed(() => {
+	if (displayInput.length == 0) return Number(0).toFixed(decimalPlaces)
+	return displayInput.toFixed(decimalPlaces)
+})
+
+const getColor = color => {
+	return color.substr(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/index.ts

@@ -20,6 +20,7 @@ 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'
@@ -52,6 +53,7 @@ function install(app: App /* options */) {
 	app.component('ListView', ListView)
 	app.component('Navbar', Navbar)
 	app.component('ScanInput', ScanInput)
+	app.component('SegmentedDisplay', SegmentedDisplay)
 	app.component('SplitColumn', SplitColumn)
 	app.component('ToggleArrow', ToggleArrow)
 }
@@ -77,6 +79,7 @@ export {
 	ListView,
 	Navbar,
 	ScanInput,
+	SegmentedDisplay,
 	SplitColumn,
 	ToggleArrow,
 	install,

package/src/types/index.ts

@@ -20,6 +20,13 @@ export type ListViewItem = {
 	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}`
+
+export type Color = RGB | RGBA | HEX | HSL | HSLA | string
 /**
  * MQTT stream options
  * @public