@stonecrop/beam 0.2.6

package/README.md

@@ -0,0 +1,16 @@
+# BEAM UI Components
+
+- Navbar
+- Dropdown or drawer menu depending on client
+- ListView
+- List Item
+- ItemCounter
+  - Needs count logic and styling, should accept an object, not a string
+  - Implement v-model to parent
+- Item Checkbox
+  - Implement v-model to parent
+- ListAnchor
+  - Dynamic component so its swapable with `nuxt-link` or `router-link`
+- Calculator/Number input
+- Modal helper (sized depending on client)
+- SCSS variables throughout

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@stonecrop/beam",
+  "version": "0.2.6",
+  "license": "MIT",
+  "type": "module",
+  "author": {
+    "name": "Tyler Matteson",
+    "email": "tyler@agritheory.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agritheory/stonecrop",
+    "directory": "beam"
+  },
+  "bugs": {
+    "url": "https://github.com/agritheory/stonecrop/issues"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/beam-ui.es.js",
+      "require": "./dist/beam-ui.umd.js"
+    }
+  },
+  "main": "./dist/beam-ui.umd.js",
+  "module": "./dist/beam-ui.es.js",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "dependencies": {
+    "portal-vue": "^3.0.0",
+    "vue": "^3.4.23"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "cypress": "^12.11.0",
+    "vite": "^5.2.9",
+    "vue-router": "^4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.11.0"
+  },
+  "scripts": {
+    "dev": "vite serve dev/ -c dev/vite.config.js -d",
+    "build": "vite build dev/ -c dev/vite.config.js -d",
+    "serve": "vite preview"
+  }
+}

package/src/ActionFooter.vue

@@ -0,0 +1,19 @@
+<template>
+	<footer class="beam__actionfooter">
+		<span class="footer-action-wrapper">
+			<button class="footer-action btn" @click="handleFooterAction">
+				<slot />
+			</button>
+		</span>
+	</footer>
+</template>
+<script>
+export default {
+	name: 'ActionFooter',
+	methods: {
+		handleFooterAction() {
+			this.$emit('click')
+		},
+	},
+}
+</script>

package/src/BeamModal.vue

@@ -0,0 +1,15 @@
+<template>
+	<portal to="beam__modal_outlet">
+		<div class="beam__modal" v-show="showModal">
+			<button class="btn" @click="$emit('closemodal')">Close Modal</button>
+			<slot @closemodal="$emit('closemodal')" @confirmmodal="$emit('confirmmodal')"></slot>
+		</div>
+	</portal>
+</template>
+<script>
+export default {
+	name: 'BeamModal',
+	props: ['showModal'],
+}
+</script>
+<style scoped></style>

package/src/BeamModalOutlet.vue

@@ -0,0 +1,8 @@
+<template>
+	<portal-target name="beam__modal_outlet" />
+</template>
+<script>
+export default {
+	name: 'BeamModalOutlet',
+}
+</script>

package/src/Confirm.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="beam__modal-confirm">
+		<h2>Would you like to continue?</h2>
+		<button class="btn" @click="confirmModal">Yes</button>
+		<button class="btn" @click="closeModal">No</button>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ConfirmDialog',
+	methods: {
+		confirmModal() {
+			this.$emit('confirmmodal')
+		},
+		closeModal() {
+			this.$emit('closemodal')
+		},
+	},
+}
+</script>

package/src/ItemCheck.vue

@@ -0,0 +1,95 @@
+<template>
+	<label class="container">
+		<input type="checkbox" :checked="value" @input="handleInput" tabindex="-1" />
+		<div class="checkmark" tabindex="0"></div>
+	</label>
+</template>
+<script>
+export default {
+	// make this v-model sensitive from parent
+	name: 'ItemCheck',
+	props: {
+		value: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			checked: this.value,
+		}
+	},
+	methods: {
+		handleInput(e) {
+			this.$emit('input', this.checked)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.container {
+	display: block;
+	position: relative;
+	padding-left: 2.5ch;
+	margin: 0;
+	margin-top: 0.5rem;
+	cursor: pointer;
+	font-size: 2rem;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+/* hide default checkbox */
+.container input {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+.checkmark {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 2rem;
+	width: 2rem;
+	background-color: #eee;
+	outline: 2px solid transparent;
+	border: 1px solid var(--highlight);
+}
+
+.container:hover input ~ .checkmark {
+	background-color: white;
+}
+
+.container input:checked ~ .checkmark {
+	background-color: var(--brand-secondary);
+}
+
+.checkmark:after {
+	content: '';
+	position: absolute;
+	display: none;
+}
+
+.container input:checked ~ .checkmark:after {
+	display: block;
+}
+
+.container .checkmark:after {
+	left: 25%;
+	top: 50%;
+	width: 0.5rem;
+	height: 1rem;
+	border: solid var(--text-color);
+	border-width: 0 3px 3px 0;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg) translate(-50%, -50%);
+}
+</style>

package/src/ItemCount.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="beam__itemcount">
+		<span
+			:contenteditable="editable"
+			:class="{ alert: countColor === false }"
+			@input="handleInput($event)"
+			@click="handleInput($event)"
+			>{{ count }}</span
+		>
+		<span>/{{ denominator }}</span
+		><span v-if="uom">&nbsp; {{ uom }}</span>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ItemCount',
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: 0,
+		},
+		denominator: {
+			type: Number,
+			required: true,
+		},
+		uom: {
+			type: String,
+			required: false,
+			default: null,
+		},
+		editable: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			count: this.value,
+		}
+	},
+	methods: {
+		handleInput(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			this.count = Number(event.target.innerHTML.replace(/[^0-9]/g, ''))
+			this.$emit('input', this.count)
+		},
+	},
+	computed: {
+		countColor() {
+			return this.count === this.denominator
+		},
+	},
+	watch: {
+		value() {
+			this.count = this.value
+		},
+	},
+}
+</script>

package/src/ListAnchor.vue

@@ -0,0 +1,17 @@
+<template>
+	<a :href="to" class="beam__listanchor">
+		<slot />
+	</a>
+</template>
+<script>
+export default {
+	name: 'ListAnchor',
+	props: {
+		to: {
+			type: String,
+			required: false,
+			default: '',
+		},
+	},
+}
+</script>

package/src/ListItem.vue

@@ -0,0 +1,34 @@
+<template>
+	<li tabindex="0" class="beam__listitem">
+		<div class="beam__listtext">
+			<label>{{ item.label }}</label>
+			<p>{{ item.description }}</p>
+		</div>
+
+		<ItemCount
+			v-if="item.count"
+			v-model="item.count.count"
+			:denominator="item.count.of"
+			:uom="item.count.uom"
+			:editable="true" />
+		<ItemCheck v-if="item.hasOwnProperty('checked')" v-model="item.checked" />
+	</li>
+</template>
+<script>
+import ItemCount from './ItemCount.vue'
+import ItemCheck from './ItemCheck.vue'
+
+export default {
+	name: 'ListItem',
+	components: {
+		ItemCount,
+		ItemCheck,
+	},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		},
+	},
+}
+</script>

package/src/ListView.vue

@@ -0,0 +1,47 @@
+<template>
+	<ul class="beam__listview">
+		<li v-for="(item, index) in items" :key="index">
+			<template v-if="item.linkComponent">
+				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
+					<ListItem :item="item"></ListItem>
+				</component>
+			</template>
+			<template v-else>
+				<ListItem :item="item"></ListItem>
+			</template>
+		</li>
+	</ul>
+</template>
+<script>
+import ListAnchor from './ListAnchor.vue'
+import ListItem from './ListItem.vue'
+
+export default {
+	name: 'ListView',
+	components: {
+		ListItem,
+		ListAnchor,
+	},
+	props: {
+		items: {
+			type: Array,
+			required: true,
+		},
+	},
+	created() {
+		window.addEventListener('scroll', this.handleScroll)
+	},
+	destroyed() {
+		window.removeEventListener('scroll', this.handleScroll)
+	},
+	methods: {
+		handleScroll() {
+			const scrollHeightDifference = document.documentElement.scrollHeight - window.innerHeight
+			const scrollposition = document.documentElement.scrollTop
+			if (scrollHeightDifference - scrollposition <= 2) {
+				this.$emit('scrollbottom')
+			}
+		},
+	},
+}
+</script>

package/src/Navbar.vue

@@ -0,0 +1,25 @@
+<template>
+	<nav class="beam__navbar">
+		<slot name="icon">
+			<span class="home-icon">&#11043;</span>
+		</slot>
+		<slot name="title">
+			<h1 class="nav-title">TITLE</h1>
+		</slot>
+		<div class="navbar-action-wrapper">
+			<button class="navbar-action btn" @click="handlePrimaryAction">
+				<slot name="navbaraction">Action</slot>
+			</button>
+		</div>
+	</nav>
+</template>
+<script>
+export default {
+	name: 'Navbar',
+	methods: {
+		handlePrimaryAction() {
+			this.$emit('click')
+		},
+	},
+}
+</script>

package/src/ScanInput.vue

@@ -0,0 +1,35 @@
+<template>
+	<div id="scan_input"></div>
+</template>
+<script>
+export default {
+	name: 'ScanInput',
+	data() {
+		return {
+			barcode: '',
+		}
+	},
+	methods: {
+		handleScanInput(event) {
+			if (event.target.tagName !== 'INPUT') {
+				if (event.key !== 'Enter') {
+					this.barcode += `${event.key}`
+				} else {
+					this.$emit('scaninput', this.barcode)
+					this.barcode = ''
+				}
+			}
+		},
+	},
+	mounted() {
+		document.addEventListener('keypress', event => {
+			this.handleScanInput(event)
+		})
+	},
+	destroyed() {
+		window.removeEventListener('keypress', event => {
+			this.handleScanInput(event)
+		})
+	},
+}
+</script>

package/src/index.js

@@ -0,0 +1,53 @@
+import Navbar from './Navbar.vue'
+import ListView from './ListView.vue'
+import ListItem from './ListItem.vue'
+import ListAnchor from './ListAnchor.vue'
+import ItemCount from './ItemCount.vue'
+import ItemCheck from './ItemCheck.vue'
+import ScanInput from './ScanInput.vue'
+import ActionFooter from './ActionFooter.vue'
+import BeamModal from './BeamModal.vue'
+import BeamModalOutlet from './BeamModalOutlet.vue'
+import ConfirmDialog from './Confirm.vue'
+import PortalVue from 'portal-vue'
+
+const components = [
+	Navbar,
+	ListView,
+	ListItem,
+	ListAnchor,
+	ItemCount,
+	ItemCheck,
+	ScanInput,
+	ActionFooter,
+	BeamModal,
+	ConfirmDialog,
+	BeamModalOutlet,
+]
+
+const install = function (Vue, opts = {}) {
+	Vue.use(PortalVue)
+	components.forEach(component => {
+		Vue.component(component.name, component)
+	})
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+	install(window.Vue)
+}
+
+export default {
+	version: '0.1.0',
+	install,
+	Navbar,
+	ListView,
+	ListItem,
+	ListAnchor,
+	ItemCount,
+	ItemCheck,
+	ScanInput,
+	ActionFooter,
+	BeamModal,
+	ConfirmDialog,
+	BeamModalOutlet,
+}