@stonecrop/beam 0.2.51 → 0.2.52

package/dist/index.js

@@ -1,12 +1,15 @@
 import ActionFooter from '@/components/ActionFooter.vue';
 import BeamArrow from '@/components/BeamArrow.vue';
 import BeamBtn from '@/components/BeamBtn.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';
@@ -15,6 +18,7 @@ import ListView from '@/components/ListView.vue';
 import Navbar from '@/components/Navbar.vue';
 import ScanInput from '@/components/ScanInput.vue';
 import SplitColumn from '@/components/SplitColumn.vue';
+import ToggleArrow from '@/components/ToggleArrow.vue';
 import { useMqttStream } from '@/composables/mqtt';
 import 'themes/beam.css';
 /**
@@ -26,12 +30,15 @@ function install(app /* options */) {
     app.component('ActionFooter', ActionFooter);
     app.component('BeamArrow', BeamArrow);
     app.component('BeamBtn', BeamBtn);
+    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);
@@ -40,5 +47,6 @@ function install(app /* options */) {
     app.component('Navbar', Navbar);
     app.component('ScanInput', ScanInput);
     app.component('SplitColumn', SplitColumn);
+    app.component('ToggleArrow', ToggleArrow);
 }
-export { ActionFooter, BeamArrow, BeamBtn, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, install, useMqttStream, };
+export { ActionFooter, BeamArrow, BeamBtn, BeamFilter, BeamFilterOption, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, FixedTop, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, ToggleArrow, install, useMqttStream, };

package/dist/src/index.d.ts

@@ -2,12 +2,15 @@ import { App } from 'vue';
 import ActionFooter from '@/components/ActionFooter.vue';
 import BeamArrow from '@/components/BeamArrow.vue';
 import BeamBtn from '@/components/BeamBtn.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';
@@ -16,6 +19,7 @@ import ListView from '@/components/ListView.vue';
 import Navbar from '@/components/Navbar.vue';
 import ScanInput from '@/components/ScanInput.vue';
 import SplitColumn from '@/components/SplitColumn.vue';
+import ToggleArrow from '@/components/ToggleArrow.vue';
 import { useMqttStream } from '@/composables/mqtt';
 import 'themes/beam.css';
 /**
@@ -24,5 +28,5 @@ import 'themes/beam.css';
  * @public
  */
 declare function install(app: App): void;
-export { ActionFooter, BeamArrow, BeamBtn, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, install, useMqttStream, };
+export { ActionFooter, BeamArrow, BeamBtn, BeamFilter, BeamFilterOption, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, FixedTop, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, 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,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,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,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,iBAAiB,CAAA;AAExB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAkBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,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,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,OAAO,iBAAiB,CAAA;AAExB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAsBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,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"}

package/package.json

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

package/src/components/BeamArrow.vue

@@ -10,10 +10,9 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-	color: String,
-})
+const { color } = defineProps<{ color?: string }>()
 </script>
+
 <style scoped>
 .beam_metadata_arrow {
 	align-self: center;
@@ -22,11 +21,13 @@ defineProps({
 	display: flex;
 	align-items: center;
 }
+
 .beam_metadata_arrow-body {
 	width: 100%;
 	height: 10px;
 	background: #c4c4c4;
 }
+
 .beam_metadata_arrow-head {
 	& svg {
 		width: 20px;

package/src/components/BeamBtn.vue

@@ -3,4 +3,3 @@
 		<slot>Action</slot>
 	</button>
 </template>
-<script setup lang="ts"></script>

package/src/components/BeamFilter.vue

@@ -0,0 +1,74 @@
+<template>
+	<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>
+		</div>
+		<div class="beam_filters-options">
+			<slot>
+				<p>OPTIONS GO HERE</p>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, useTemplateRef } from 'vue'
+
+const header = useTemplateRef('beam-filters-header')
+const beamFilters = useTemplateRef('beam-filters')
+
+const isOpen = ref(false)
+const headerHeight = ref<string>()
+const totalHeight = ref<string>()
+
+const toggle = () => {
+	isOpen.value = !isOpen.value
+}
+
+onMounted(() => {
+	headerHeight.value = getTotalHeight(header.value)
+	totalHeight.value = getTotalHeight(beamFilters.value)
+	beamFilters.value.style.height = headerHeight.value
+})
+
+const getTotalHeight = (el: HTMLDivElement) => {
+	const height = el.getBoundingClientRect().height
+	const marginTop = parseInt(getComputedStyle(el).marginTop)
+	const marginBottom = parseInt(getComputedStyle(el).marginBottom)
+	return height + marginTop + marginBottom + 'px'
+}
+</script>
+
+<style scoped>
+.beam_filters {
+	overflow: hidden;
+	box-sizing: border-box;
+	transition: all 0.2s ease-in-out;
+	border-bottom: 1px solid var(--row-border-color);
+	background: white;
+}
+
+.beam_filters-heading {
+	background: var(--primary-color);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	padding-left: 1rem;
+	box-sizing: border-box;
+	font-size: 1rem;
+	padding: 0 2rem;
+
+	& > h1 {
+		font-size: 1rem;
+	}
+}
+
+.beam_filters-options {
+	background: white;
+	margin: 1rem;
+	box-sizing: border-box;
+	padding: 0 2rem;
+	margin-bottom: 2rem;
+}
+</style>

package/src/components/BeamFilterOption.vue

@@ -0,0 +1,139 @@
+<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 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>
+			</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"
+				class="beam_filter-select-option"
+				@click="updateValue(opt)">
+				{{ opt.choice }}
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type Choice = {
+	choice: string
+	value: string
+}
+
+const { title = 'title', choices = [] } = defineProps<{
+	choices: Choice[]
+	title?: string
+}>()
+
+const open = ref(false)
+const value = ref(choices[0].value)
+const choice = ref(choices[0].choice)
+
+const updateValue = (data: Choice) => {
+	choice.value = data.choice
+	value.value = data.value
+}
+
+const toggle = () => {
+	open.value = !open.value
+}
+</script>
+
+<style scoped>
+.beam_filter-option {
+	cursor: pointer;
+	position: relative;
+	margin-bottom: 1rem;
+}
+
+.beam_filter-option-heading {
+	font-size: 1rem;
+	padding-bottom: 0.25rem;
+}
+
+.beam_filter-option-select {
+	position: relative;
+	appearance: none;
+	border: 1px solid var(--row-border-color);
+	font-weight: bold;
+	color: var(--primary-text-color);
+	font-size: 0.8rem;
+	font-family: var(--font-family);
+	display: flex;
+	align-items: stretch;
+}
+
+label {
+	cursor: pointer;
+	padding: 0.5rem;
+}
+
+.beam_filter-arrow {
+	background: var(--primary-color);
+	color: var(--primary-text-color);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	width: 5px;
+	padding: 0.5rem 0.7rem;
+}
+
+.beam_filter-label {
+	display: flex;
+	align-items: center;
+}
+
+svg {
+	fill: var(--primary-text-color);
+	width: 5px;
+	transform: rotate(90deg);
+}
+
+.beam_filter-select-menu {
+	/* position: absolute; */
+	z-index: 100;
+	border-top: none;
+	left: 0;
+	border: 1px solid var(--row-border-color);
+	padding: 0rem;
+	list-style: none;
+	width: 100%;
+	box-sizing: border-box;
+	max-height: 200px;
+	overflow-y: scroll;
+	margin: 0;
+}
+
+.beam_filter-select-option {
+	font-size: 0.8rem;
+	font-family: var(--font-family);
+	font-weight: bold;
+	color: var(--primary-text-color);
+	border-bottom: 1px solid var(--row-border-color);
+	padding: 0.5rem;
+	&:hover {
+		background: var(--primary-color);
+	}
+}
+
+.selected {
+	background: var(--row-border-color);
+
+	&:hover {
+		background: var(--row-border-color);
+	}
+}
+</style>

package/src/components/BeamProgress.vue

@@ -7,23 +7,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps({
-	label: {
-		type: String,
-		default: 'Status',
-	},
-	progressMessage: {
-		type: String,
-		default: 'In Progress',
-	},
-	completeMessage: {
-		type: String,
-		default: 'Complete',
-	},
-	complete: Boolean,
-})
+const {
+	label = 'Status',
+	progressMessage = 'In Progress',
+	completeMessage = 'Complete',
+	complete = false,
+} = defineProps<{
+	label?: string
+	progressMessage?: string
+	completeMessage?: string
+	complete?: boolean
+}>()
 
-const statusMessage = computed(() => {
-	return props.complete ? props.completeMessage : props.progressMessage
-})
+const statusMessage = computed(() => (complete ? completeMessage : progressMessage))
 </script>

package/src/components/FixedTop.vue

@@ -0,0 +1,13 @@
+<template>
+	<div class="fixed-top">
+		<slot></slot>
+	</div>
+</template>
+
+<style scoped>
+.fixed-top {
+	position: sticky;
+	top: 0;
+	left: 0;
+}
+</style>

package/src/components/SplitColumn.vue

@@ -10,12 +10,14 @@
 		</div>
 	</div>
 </template>
+
 <script setup lang="ts">
-const props = defineProps<{
-	justifyContent?: String
-	alignItems?: String
+const { justifyContent, alignItems } = defineProps<{
+	justifyContent?: string
+	alignItems?: string
 }>()
 </script>
+
 <style scoped>
 .two-column {
 	display: flex;
@@ -29,6 +31,7 @@ const props = defineProps<{
 		gap: 0;
 	}
 }
+
 .column {
 	flex-grow: 1;
 	width: 50%;
@@ -36,6 +39,7 @@ const props = defineProps<{
 		width: 100%;
 	}
 }
+
 .column-right {
 	text-align: right;
 	@media screen and (max-width: 400px) {

package/src/components/ToggleArrow.vue

@@ -0,0 +1,35 @@
+<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(--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/index.ts

@@ -3,12 +3,15 @@ import { App } from 'vue'
 import ActionFooter from '@/components/ActionFooter.vue'
 import BeamArrow from '@/components/BeamArrow.vue'
 import BeamBtn from '@/components/BeamBtn.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'
@@ -17,6 +20,7 @@ import ListView from '@/components/ListView.vue'
 import Navbar from '@/components/Navbar.vue'
 import ScanInput from '@/components/ScanInput.vue'
 import SplitColumn from '@/components/SplitColumn.vue'
+import ToggleArrow from '@/components/ToggleArrow.vue'
 import { useMqttStream } from '@/composables/mqtt'
 import 'themes/beam.css'
 
@@ -29,12 +33,15 @@ function install(app: App /* options */) {
 	app.component('ActionFooter', ActionFooter)
 	app.component('BeamArrow', BeamArrow)
 	app.component('BeamBtn', BeamBtn)
+	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)
@@ -43,18 +50,22 @@ function install(app: App /* options */) {
 	app.component('Navbar', Navbar)
 	app.component('ScanInput', ScanInput)
 	app.component('SplitColumn', SplitColumn)
+	app.component('ToggleArrow', ToggleArrow)
 }
 
 export {
 	ActionFooter,
 	BeamArrow,
 	BeamBtn,
+	BeamFilter,
+	BeamFilterOption,
 	BeamHeading,
 	BeamMetadata,
 	BeamModal,
 	BeamModalOutlet,
 	BeamProgress,
 	Confirm,
+	FixedTop,
 	ItemCheck,
 	ItemCount,
 	ListAnchor,
@@ -63,6 +74,7 @@ export {
 	Navbar,
 	ScanInput,
 	SplitColumn,
+	ToggleArrow,
 	install,
 	useMqttStream,
 }