@stonecrop/beam 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/beam",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -17,12 +17,13 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/beam-ui.es.js",
-      "require": "./dist/beam-ui.umd.js"
-    }
+      "import": "./dist/beam.js",
+      "require": "./dist/beam.umd.cjs"
+    },
+    "./styles": "./dist/style.css"
   },
-  "main": "./dist/beam-ui.umd.js",
-  "module": "./dist/beam-ui.es.js",
+  "main": "dist/beam.js",
+  "module": "dist/beam.js",
   "files": [
     "dist/*",
     "src/*"
@@ -32,8 +33,17 @@
     "vue": "^3.4.23"
   },
   "devDependencies": {
+    "@histoire/plugin-vue": "^0.17.17",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "cypress": "^12.11.0",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.11.1",
+    "histoire": "^0.17.17",
+    "sass": "^1.75.0",
+    "typescript": "^5.4.5",
     "vite": "^5.2.9",
     "vue-router": "^4"
   },
@@ -44,8 +54,12 @@
     "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"
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "lint": "eslint . --ext .ts,.vue",
+    "preview": "vite preview",
+    "story:build": "histoire build",
+    "story:dev": "histoire dev",
+    "story:preview": "histoire preview"
   }
 }

package/src/{ActionFooter.vue → components/ActionFooter.vue}

@@ -7,13 +7,11 @@
 		</span>
 	</footer>
 </template>
-<script>
-export default {
-	name: 'ActionFooter',
-	methods: {
-		handleFooterAction() {
-			this.$emit('click')
-		},
-	},
+
+<script setup lang="ts">
+const emit = defineEmits(['click'])
+
+const handleFooterAction = () => {
+	emit('click')
 }
 </script>

package/src/{BeamModal.vue → components/BeamModal.vue}

@@ -6,10 +6,9 @@
 		</div>
 	</portal>
 </template>
-<script>
-export default {
-	name: 'BeamModal',
-	props: ['showModal'],
-}
+
+<script setup lang="ts">
+defineProps<{
+	showModal: boolean
+}>()
 </script>
-<style scoped></style>

package/src/components/BeamModalOutlet.vue

@@ -0,0 +1,14 @@
+<template>
+	<portal-target name="beam__modal_outlet" />
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(['confirmmodal', 'closemodal'])
+
+const confirmModal = () => {
+	emit('confirmmodal')
+}
+const closeModal = () => {
+	emit('closemodal')
+}
+</script>

package/src/components/Confirm.vue

@@ -0,0 +1,7 @@
+<template>
+	<div class="beam__modal-confirm">
+		<h2>Would you like to continue?</h2>
+		<button class="btn" @click="$emit('confirmmodal')">Yes</button>
+		<button class="btn" @click="$emit('closemodal')">No</button>
+	</div>
+</template>

package/src/{ItemCheck.vue → components/ItemCheck.vue}

@@ -4,27 +4,21 @@
 		<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 setup lang="ts">
+import { ref } from 'vue'
+
+// make this v-model sensitive from parent
+const props = defineProps<{
+	value?: boolean
+}>()
+
+const emit = defineEmits(['input'])
+
+const checked = ref(props.value)
+
+const handleInput = (e: InputEvent) => {
+	emit('input', checked.value)
 }
 </script>
 

package/src/components/ItemCount.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class="beam__itemcount">
+		<span
+			:contenteditable="editable"
+			:class="{ alert: countColor === false }"
+			@input="handleInput"
+			@click="handleInput">
+			{{ count }}
+		</span>
+		<span>/{{ denominator }}</span>
+		<span v-if="uom">&nbsp; {{ uom }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const emit = defineEmits(['input'])
+const props = withDefaults(
+	defineProps<{
+		value?: number
+		denominator: number
+		uom?: string
+		editable?: boolean
+	}>(),
+	{ value: 0, editable: true, uom: '' }
+)
+
+const count = ref(props.value)
+
+const handleInput = (event: InputEvent | MouseEvent) => {
+	event.preventDefault()
+	event.stopPropagation()
+	count.value = Number(event.target.innerHTML.replace(/[^0-9]/g, ''))
+	emit('input', count.value)
+}
+
+const countColor = computed(() => {
+	return count.value === props.denominator
+})
+</script>

package/src/components/ListAnchor.vue

@@ -0,0 +1,14 @@
+<template>
+	<a :href="to" class="beam__listanchor">
+		<slot />
+	</a>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+	defineProps<{
+		to?: string
+	}>(),
+	{ to: '' }
+)
+</script>

package/src/{ListItem.vue → components/ListItem.vue}

@@ -14,21 +14,21 @@
 		<ItemCheck v-if="item.hasOwnProperty('checked')" v-model="item.checked" />
 	</li>
 </template>
-<script>
+
+<script setup lang="ts">
 import ItemCount from './ItemCount.vue'
 import ItemCheck from './ItemCheck.vue'
 
-export default {
-	name: 'ListItem',
-	components: {
-		ItemCount,
-		ItemCheck,
-	},
-	props: {
-		item: {
-			type: Object,
-			required: true,
-		},
-	},
-}
+defineProps<{
+	item: {
+		label: string
+		description: string
+		count?: {
+			count: number
+			of: number
+			uom: string
+		}
+		checked?: boolean
+	}
+}>()
 </script>

package/src/components/ListView.vue

@@ -0,0 +1,53 @@
+<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 setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+
+import ListItem from './ListItem.vue'
+
+defineProps<{
+	items: {
+		label: string
+		description: string
+		count?: {
+			count: number
+			of: number
+			uom: string
+		}
+		checked?: boolean
+		linkComponent?: string
+		route?: string
+	}[]
+}>()
+
+const emit = defineEmits(['scrollbottom'])
+
+onMounted(() => {
+	window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('scroll', handleScroll)
+})
+
+const handleScroll = () => {
+	const scrollHeightDifference = document.documentElement.scrollHeight - window.innerHeight
+	const scrollposition = document.documentElement.scrollTop
+	if (scrollHeightDifference - scrollposition <= 2) {
+		emit('scrollbottom')
+	}
+}
+</script>

package/src/{Navbar.vue → components/Navbar.vue}

@@ -13,13 +13,11 @@
 		</div>
 	</nav>
 </template>
-<script>
-export default {
-	name: 'Navbar',
-	methods: {
-		handlePrimaryAction() {
-			this.$emit('click')
-		},
-	},
+
+<script setup lang="ts">
+const emit = defineEmits(['click'])
+
+const handlePrimaryAction = () => {
+	emit('click')
 }
 </script>

package/src/components/ScanInput.vue

@@ -0,0 +1,33 @@
+<template>
+	<div id="scan_input"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const emit = defineEmits(['scaninput'])
+const barcode = ref('')
+
+const handleScanInput = (event: InputEvent | KeyboardEvent) => {
+	if (event.target.tagName !== 'INPUT') {
+		if (event.key !== 'Enter') {
+			barcode.value += `${event.key}`
+		} else {
+			emit('scaninput', barcode.value)
+			barcode.value = ''
+		}
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('keypress', event => {
+		handleScanInput(event)
+	})
+})
+
+onUnmounted(() => {
+	window.removeEventListener('keypress', event => {
+		handleScanInput(event)
+	})
+})
+</script>

package/src/histoire.setup.ts

@@ -0,0 +1,30 @@
+import { defineSetupVue3 } from '@histoire/plugin-vue'
+
+import ActionFooter from '@/components/ActionFooter.vue'
+import BeamModal from '@/components/BeamModal.vue'
+import BeamModalOutlet from '@/components/BeamModalOutlet.vue'
+import Confirm from '@/components/Confirm.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 PortalVue from 'portal-vue'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+	app.use(PortalVue)
+
+	app.component('ActionFooter', ActionFooter)
+	app.component('BeamModal', BeamModal)
+	app.component('BeamModalOutlet', BeamModalOutlet)
+	app.component('Confirm', Confirm)
+	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)
+})

package/src/index.ts

@@ -0,0 +1,42 @@
+import { App } from 'vue'
+
+import ActionFooter from '@/components/ActionFooter.vue'
+import BeamModal from '@/components/BeamModal.vue'
+import BeamModalOutlet from '@/components/BeamModalOutlet.vue'
+import Confirm from '@/components/Confirm.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'
+
+function install(app: App /* options */) {
+	app.component('ActionFooter', ActionFooter)
+	app.component('BeamModal', BeamModal)
+	app.component('BeamModalOutlet', BeamModalOutlet)
+	app.component('Confirm', Confirm)
+	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)
+}
+
+export {
+	ActionFooter,
+	BeamModal,
+	BeamModalOutlet,
+	Confirm,
+	ItemCheck,
+	ItemCount,
+	ListAnchor,
+	ListItem,
+	ListView,
+	Navbar,
+	ScanInput,
+	install,
+}

package/src/shims-vue.d.ts

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

package/src/BeamModalOutlet.vue

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

package/src/Confirm.vue

@@ -1,20 +0,0 @@
-<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/ItemCount.vue

@@ -1,62 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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/ListView.vue

@@ -1,47 +0,0 @@
-<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/ScanInput.vue

@@ -1,35 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-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,
-}