@stonecrop/beam 0.30.0 → 0.32.0

package/src/components/BeamBtn.vue

@@ -1,32 +0,0 @@
-<template>
-	<button class="beam_btn">
-		<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>
-<style>
-.beam_btn a:link,
-.beam_btn a:visited,
-.beam_btn a:hover,
-.beam_btn a:active {
-	text-decoration: none;
-	color: var(--sc-btn-label-color);
-}
-</style>

package/src/components/BeamDayDivider.vue

@@ -1,60 +0,0 @@
-<template>
-	<div class="beam_day-divider">
-		<h2>{{ date }}</h2>
-	</div>
-
-	<slot></slot>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { ListViewItem } from '../types'
-
-defineSlots<{ default(): any }>()
-const { item } = defineProps<{ item: ListViewItem }>()
-
-const date = computed(() => {
-	if (!item.date || isNaN(Date.parse(item.date))) {
-		return item.date
-	}
-
-	// if needed, the user can specify a Date format flag that will dictate how the output is formatted,
-	// defaults to toDateString(); using switch/case here in case more values wanted to be added
-	const dateObj = new Date(item.date)
-	if (item.dateFormat) {
-		switch (item.dateFormat.toLowerCase()) {
-			case 'iso':
-				return dateObj.toISOString()
-		}
-	}
-	return dateObj.toDateString()
-})
-</script>
-
-<style scoped>
-.beam_day-divider {
-	text-align: left;
-	padding: 1rem;
-	background: var(--sc-cell-changed-color);
-	border-bottom: 1px solid var(--sc-row-border-color);
-	box-sizing: border-box;
-	margin-bottom: 1rem;
-
-	/* reverse margins only for day-divider elements in list */
-	margin-left: calc(-1 * var(--sc-list-margin));
-	margin-right: calc(-1 * var(--sc-list-margin));
-
-	& h2 {
-		text-align: left;
-		font-size: 1rem;
-		color: var(--sc-primary-text-color);
-		margin: 0;
-		padding: 0;
-	}
-}
-
-.beam_day-divider:first-of-type {
-	margin-top: 0;
-}
-</style>

package/src/components/BeamFilter.vue

@@ -1,58 +0,0 @@
-<template>
-	<div class="beam_filters">
-		<div class="beam_filters-heading" @click="isFilterExpanded = !isFilterExpanded">
-			<ToggleArrow :open="isFilterExpanded" />
-			<BeamHeading>Filter</BeamHeading>
-		</div>
-
-		<div v-show="isFilterExpanded" class="beam_filters-options">
-			<slot />
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineSlots<{ default(): any }>()
-
-const isFilterExpanded = ref(false)
-</script>
-
-<style scoped>
-.beam_filters {
-	background-color: var(--sc-primary-color);
-	border-bottom: 1px solid var(--sc-row-border-color);
-	box-sizing: border-box;
-	min-height: 2em;
-	overflow: visible;
-	padding: 0.625rem;
-	transition: all 0.2s ease-in-out;
-}
-
-.beam_filters-heading {
-	align-items: center;
-	background-color: var(--sc-primary-color);
-	box-sizing: border-box;
-	cursor: pointer;
-	display: flex;
-	font-size: 1rem;
-
-	& > h1 {
-		font-size: 1rem;
-	}
-}
-
-.beam_filters-options {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	margin: 1rem 0;
-	padding: 0 1rem;
-	gap: 1rem;
-
-	@media (max-width: 479px) {
-		flex-direction: column;
-	}
-}
-</style>

package/src/components/BeamFilterOption.vue

@@ -1,150 +0,0 @@
-<template>
-	<div v-on-click-outside="() => (isMenuOpen = false)" class="beam_filter-container">
-		<BeamHeading class="beam_filter-option-heading">{{ title }}</BeamHeading>
-		<div class="beam_filter-option" @click="isMenuOpen = !isMenuOpen">
-			<div 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>{{ label }}</label>
-				</div>
-			</div>
-
-			<ul v-if="isMenuOpen" ref="menu" class="beam_filter-select-menu">
-				<li
-					v-for="choice in choices"
-					:key="choice.value"
-					:class="{ selected: label == choice.label }"
-					:data-value="choice.value"
-					class="beam_filter-select-option"
-					@click="selectChoice(choice)">
-					{{ choice.label }}
-				</li>
-			</ul>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components'
-import { ref } from 'vue'
-
-import { BeamFilterChoice } from '../types'
-
-const emit = defineEmits<{ select: [choice: BeamFilterChoice] }>()
-
-const { choices, title = 'title' } = defineProps<{
-	choices: BeamFilterChoice[]
-	title?: string
-}>()
-
-const isMenuOpen = ref(false)
-const label = ref(choices[0].label)
-const value = ref(choices[0].value)
-
-const selectChoice = (data: BeamFilterChoice) => {
-	label.value = data.label
-	value.value = data.value
-	emit('select', data)
-}
-</script>
-
-<style scoped>
-.beam_filter-option {
-	cursor: pointer;
-	position: relative;
-}
-
-.beam_filter-option-heading {
-	font-size: 1rem !important;
-	padding-bottom: 0.25rem;
-}
-
-.beam_filter-option-select {
-	align-items: stretch;
-	appearance: none;
-	background-color: white;
-	border: 1px solid var(--sc-row-border-color);
-	color: var(--sc-primary-text-color);
-	display: flex;
-	font-family: var(--sc-font-family);
-	font-size: 0.8rem;
-	font-weight: bold;
-	position: relative;
-}
-
-label {
-	cursor: pointer;
-	padding: 0.5rem;
-}
-
-.beam_filter-arrow {
-	background: var(--sc-primary-color);
-	color: var(--sc-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(--sc-primary-text-color);
-	width: 5px;
-	transform: rotate(90deg);
-}
-
-.beam_filter-select-menu {
-	background-color: white;
-	border-top: none;
-	border: 1px solid var(--sc-row-border-color);
-	box-sizing: border-box;
-	left: 0;
-	list-style: none;
-	margin: 0;
-	max-height: 200px;
-	overflow-y: scroll;
-	padding: 0rem;
-	position: absolute;
-	width: 100%;
-	z-index: 100;
-}
-
-.beam_filter-select-option {
-	font-size: 0.8rem;
-	font-family: var(--sc-font-family);
-	font-weight: bold;
-	color: var(--sc-primary-text-color);
-	border-bottom: 1px solid var(--sc-row-border-color);
-	padding: 0.5rem;
-	&:hover {
-		background: var(--sc-primary-color);
-	}
-}
-
-.selected {
-	background: var(--sc-row-border-color);
-
-	&:hover {
-		background: var(--sc-row-border-color);
-	}
-}
-.beam_filter-container {
-	flex-grow: 1;
-	max-width: 300px;
-	width: 50%;
-
-	@media (max-width: 479px) {
-		width: 100%;
-		max-width: 100%;
-	}
-}
-</style>

package/src/components/BeamHeading.vue

@@ -1,17 +0,0 @@
-<template>
-	<h1 class="beam_header">
-		<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

@@ -1,118 +0,0 @@
-<template>
-	<div class="beam_metadata">
-		<div class="beam_metadata_content">
-			<slot>
-				<div class="beam_metadata_header beam_metadata--two-column"></div>
-				<div class="beam_metadata_block">
-					<p class="beam_metadata_heading">
-						Status:
-						<span :class="{ alert: !order.complete }" class="beam_metadata--normal">{{
-							order.complete ? 'Complete' : 'In Progress'
-						}}</span>
-					</p>
-				</div>
-				<div class="beam_metadata_shipping beam_metadata_block">
-					<div class="beam_metadata_source">
-						<p class="beam_metadata_heading">Source</p>
-					</div>
-
-					<div class="beam_metadata_source">
-						<p class="beam_metadata_heading">Receiving</p>
-					</div>
-				</div>
-			</slot>
-		</div>
-		<hr />
-	</div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-	order: {
-		orderNumber: string
-		product: string
-		quantity: number
-		total: number
-		complete: boolean
-	}
-}>()
-</script>
-
-<style scoped>
-.beam_metadata {
-	/* margin:3.125rem; */
-	box-sizing: border-box;
-	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;
-}
-hr {
-	display: block;
-	height: 1px;
-	border: 0;
-	border-top: 1px solid var(--sc-row-border-color);
-	margin: 1em 0;
-	padding: 0;
-}
-</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,28 +0,0 @@
-<template>
-	<portal to="beam_modal_outlet">
-		<div v-show="showModal" class="beam_modal">
-			<BeamBtn @click="$emit('closemodal')">Close Modal</BeamBtn>
-			<slot @closemodal="$emit('closemodal')" @confirmmodal="$emit('confirmmodal')"></slot>
-		</div>
-	</portal>
-</template>
-
-<script setup lang="ts">
-defineEmits<{ closemodal: []; confirmmodal: [] }>()
-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: 200;
-	text-align: center;
-	padding: 1.25rem;
-}
-</style>

package/src/components/BeamModalOutlet.vue

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

@@ -1,23 +0,0 @@
-<template>
-	<p class="beam_metadata_heading">
-		{{ label }}: <span :class="{ 'beam--alert': !complete }" class="beam--normal">{{ statusMessage }}</span>
-	</p>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const {
-	label = 'Status',
-	progressMessage = 'In Progress',
-	completeMessage = 'Complete',
-	complete = false,
-} = defineProps<{
-	label?: string
-	progressMessage?: string
-	completeMessage?: string
-	complete?: boolean
-}>()
-
-const statusMessage = computed(() => (complete ? completeMessage : progressMessage))
-</script>

package/src/components/Confirm.vue

@@ -1,29 +0,0 @@
-<template>
-	<div class="beam_modal-confirm">
-		<h2>Would you like to continue?</h2>
-		<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/FixedTop.vue

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

package/src/components/ItemCheck.vue

@@ -1,76 +0,0 @@
-<template>
-	<label class="container">
-		<input v-model="value" type="checkbox" tabindex="-1" />
-		<div class="checkmark" tabindex="0"></div>
-	</label>
-</template>
-
-<script setup lang="ts">
-const value = defineModel<boolean>({ default: false })
-</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(--sc-highlight);
-}
-
-.container:hover input ~ .checkmark {
-	background-color: white;
-}
-
-.container input:checked ~ .checkmark {
-	background-color: var(--sc-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(--sc-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/components/ItemCount.vue

@@ -1,55 +0,0 @@
-<template>
-	<div class="beam_item-count">
-		<span
-			:contenteditable="editable"
-			:class="{ 'beam--alert': !isCountComplete }"
-			@click.stop.prevent="validate"
-			@input.stop.prevent="debouncedValidate"
-			@paste="validate">
-			{{ count }}
-		</span>
-		<span v-if="denominator">/{{ denominator }}</span>
-		<span v-if="uom">&nbsp; {{ uom }}</span>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useDebounceFn } from '@vueuse/core'
-import { computed, type HTMLAttributes } from 'vue'
-
-const count = defineModel<number>({ required: true })
-const {
-	denominator = 0,
-	debounce = 300,
-	editable = true,
-	uom = '',
-} = defineProps<{
-	denominator?: number
-	debounce?: number
-	editable?: HTMLAttributes['contenteditable']
-	uom?: string
-}>()
-
-const isCountComplete = computed(() => denominator !== 0 && count.value === denominator)
-
-const validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {
-	const newValue = Number((payload.target as HTMLElement).innerHTML) || 0
-	count.value = denominator ? Math.min(newValue, denominator) : newValue
-}
-
-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

@@ -1,17 +0,0 @@
-<template>
-	<a :href="to" class="beam_list-anchor">
-		<slot />
-	</a>
-</template>
-
-<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>