@stonecrop/beam 0.2.55 → 0.2.57

package/package.json

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

package/src/components/ActionFooter.vue

@@ -1,9 +1,9 @@
 <template>
 	<footer class="beam_action-footer">
 		<span class="footer-action-wrapper">
-			<button class="beam_btn" @click="handleFooterAction">
+			<BeamBtn @click="handleFooterAction">
 				<slot />
-			</button>
+			</BeamBtn>
 		</span>
 	</footer>
 </template>
@@ -15,3 +15,17 @@ const handleFooterAction = () => {
 	emit('click')
 }
 </script>
+
+<style scoped>
+.beam_action-footer {
+	margin-left: 0;
+	background: linear-gradient(180deg, transparent 0%, white 100%);
+	color: var(--sc-primary-text-color);
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	padding: 0.625rem;
+	text-align: center;
+}
+</style>

package/src/components/BeamBtn.vue

@@ -3,3 +3,21 @@
 		<slot>Action</slot>
 	</button>
 </template>
+
+<style scoped>
+.beam_btn {
+	font-size: 0.875rem;
+	text-align: center;
+	padding: 0.3125rem 0.75rem;
+	border: 1px solid var(--sc-btn-border);
+	color: var(--sc-btn-label-color);
+	background-color: var(--sc-btn-color);
+	cursor: pointer;
+	font-family: var(--sc-font-family);
+
+	&:hover,
+	&:active {
+		background-color: var(--sc-btn-hover);
+	}
+}
+</style>

package/src/components/BeamHeading.vue

@@ -3,3 +3,15 @@
 		<slot></slot>
 	</h1>
 </template>
+
+<style scoped>
+.beam_header {
+	border: 1px solid transparent;
+	text-align: left;
+	font-size: 1.125rem;
+	color: var(--sc-primary-text-color);
+	margin: 0;
+	padding: 0;
+	font-family: var(--sc-font-family);
+}
+</style>

package/src/components/BeamMetadata.vue

@@ -36,3 +36,75 @@ defineProps<{
 	}
 }>()
 </script>
+
+<style scoped>
+.beam_metadata {
+	/* margin:3.125rem; */
+	box-sizing: border-box;
+	border: 1px solid black;
+	display: flex;
+	flex-direction: column;
+	max-height: 100vh;
+	color: var(--sc-primary-text-color);
+	font-family: var(--sc-font-family);
+}
+.beam_metadata_content {
+	padding-top: 10px;
+}
+.beam_metadata_header {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	padding: 0px 30px 0px 30px;
+	justify-content: space-between;
+}
+.beam_metadata_count {
+	font-size: 1.5rem;
+
+	& p {
+		margin: 0;
+	}
+}
+.beam_metadata_header-order-num {
+	font-weight: bold;
+	font-size: 1.5rem;
+}
+.beam_metadata_block {
+	padding: 0px 30px;
+	margin: 10px 0;
+}
+
+.beam_metadata_shipping {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	justify-content: space-between;
+
+	& p {
+		line-height: 1.5rem;
+	}
+}
+@media screen and (max-width: 600px) {
+	.beam_metadata_shipping {
+		flex-direction: column;
+	}
+}
+
+.beam_metadata_component_header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: baseline;
+}
+.beam_metadata_components {
+	overflow: scroll;
+}
+</style>
+<style>
+.beam_metadata_heading {
+	font-size: 1.125rem;
+	font-weight: bold;
+	margin: 0.625rem 0;
+	color: var(--sc-primary-text-color);
+}
+</style>

package/src/components/BeamModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<portal to="beam_modal_outlet">
 		<div class="beam_modal" v-show="showModal">
-			<button class="beam_btn" @click="$emit('closemodal')">Close Modal</button>
+			<BeamBtn @click="$emit('closemodal')">Close Modal</BeamBtn>
 			<slot @closemodal="$emit('closemodal')" @confirmmodal="$emit('confirmmodal')"></slot>
 		</div>
 	</portal>
@@ -10,3 +10,18 @@
 <script setup lang="ts">
 defineProps<{ showModal: boolean }>()
 </script>
+
+<style scoped>
+.beam_modal {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(2px);
+	z-index: 1000;
+	text-align: center;
+	padding: 1.25rem;
+}
+</style>

package/src/components/Confirm.vue

@@ -1,7 +1,29 @@
 <template>
 	<div class="beam_modal-confirm">
 		<h2>Would you like to continue?</h2>
-		<button class="beam_btn" @click="$emit('confirmmodal')">Yes</button>
-		<button class="beam_btn" @click="$emit('closemodal')">No</button>
+		<BeamBtn @click="$emit('confirmmodal')">Yes</BeamBtn>
+		<BeamBtn @click="$emit('confirmmodal')">No</BeamBtn>
 	</div>
 </template>
+
+<style scoped>
+.beam_modal-confirm {
+	background: #ffffff;
+	padding: 1.25rem;
+	width: 80%;
+	max-width: 400px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	& button {
+		margin: 0.625rem;
+	}
+	& h2 {
+		border-bottom: 1px solid var(--sc-row-border-color);
+		padding-bottom: 0.625rem;
+		color: var(--sc-primary-text-color);
+	}
+}
+</style>

package/src/components/ItemCount.vue

@@ -40,3 +40,16 @@ const validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {
 const debouncedRequest = useDebounceFn((payload: InputEvent) => validate(payload), debounce)
 const debouncedValidate = async (payload: InputEvent) => await debouncedRequest(payload)
 </script>
+
+<style scoped>
+.beam_item-count {
+	font-size: 1.3125rem;
+	color: var(--sc-primary-text-color);
+}
+
+.beam_item-count span {
+	margin: 0;
+	padding: 0;
+	outline: none;
+}
+</style>

package/src/components/ListAnchor.vue

@@ -7,3 +7,11 @@
 <script setup lang="ts">
 const { to = '' } = defineProps<{ to?: string }>()
 </script>
+
+<style scoped>
+.beam_list-anchor {
+	text-decoration: none;
+	outline: none;
+	color: var(--sc-primary-text-color);
+}
+</style>

package/src/components/ListItem.vue

@@ -17,13 +17,69 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 import ItemCount from '@/components/ItemCount.vue'
 import ItemCheck from '@/components/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

@@ -3,11 +3,11 @@
 		<li v-for="item in items" :key="item.label">
 			<template v-if="item.linkComponent">
 				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
-					<ListItem :item="item"></ListItem>
+					<ListItem :item="item" @update="handleUpdate"></ListItem>
 				</component>
 			</template>
 			<template v-else>
-				<ListItem :item="item"></ListItem>
+				<ListItem :item="item" @update="handleUpdate"></ListItem>
 			</template>
 		</li>
 	</ul>
@@ -20,7 +20,7 @@ import ListItem from '@/components/ListItem.vue'
 import type { ListViewItem } from '@/types'
 
 defineProps<{ items: ListViewItem[] }>()
-const emit = defineEmits<{ scrollbottom: [] }>()
+const emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()
 
 onMounted(() => {
 	window.addEventListener('scroll', handleScroll)
@@ -30,6 +30,7 @@ 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
@@ -38,3 +39,14 @@ const handleScroll = () => {
 	}
 }
 </script>
+
+<style scoped>
+.beam_list-view {
+	list-style-type: none;
+	margin: var(--sc-list-margin);
+	padding: 0;
+	padding-bottom: 2.5em;
+	margin-top: 1px;
+	font-family: var(--sc-font-family);
+}
+</style>

package/src/components/Navbar.vue

@@ -3,9 +3,9 @@
 		<slot name="title">
 			<BeamHeading>TITLE</BeamHeading>
 		</slot>
-		<button class="navbar-action beam_btn" @click="handlePrimaryAction">
+		<BeamBtn @click="handlePrimaryAction">
 			<slot name="navbaraction">Action</slot>
-		</button>
+		</BeamBtn>
 	</nav>
 </template>
 
@@ -16,3 +16,27 @@ 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>