@bagelink/vue 1.19.1 → 1.20.3

package/src/components/form/inputs/SelectBtn.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import type { Option } from '../../../index'
-import { Btn, Icon, resolveI18n } from '../../../index'
+import type { IconType, Option } from '../../../types'
+import Btn from '../../Btn.vue'
+import Icon from '../../Icon/Icon.vue'
+import { resolveI18n } from '../../../i18n'
 import { computed } from 'vue'
 import { getOptionIcon, getOptionLabel, getOptionValue } from '../../../utils/options'
 import type { BagelInputShellProps } from './bagelInputShell'
@@ -15,12 +17,38 @@ const props = withDefaults(
 		thin?: boolean
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 		multiselect?: boolean
+		disabled?: boolean
+		/** Show a check icon on selected options. */
+		check?: boolean
+		/** Inactive-state icon in the reserved check slot. Defaults to a minus. */
+		inactiveCheckIcon?: IconType
+		/** Legacy compact preset. Prefer explicit height/fontSize in new usage. */
+		compact?: boolean
+		/** Exact option height; numbers are pixels. Overrides thin/size height. */
+		height?: number | string
+		mobileHeight?: number | string
+		/** Option font size; numbers are pixels. */
+		fontSize?: number | string
+		mobileFontSize?: number | string
+		/** Check icon size, matching Icon's size API (numbers are rem). */
+		checkSize?: number | string
+		mobileCheckSize?: number | string
+		/** Remove the border from each option button. */
+		flat?: boolean
+		/** Selected option text tone or CSS color. Defaults to white. */
+		activeColor?: string
+		/** Selected option background tone or CSS color. Defaults to the input active color. */
+		activeBgColor?: string
+		/** Unselected option text tone or CSS color. */
+		inactiveColor?: string
+		/** Unselected option background tone or CSS color. */
+		inactiveBgColor?: string
 		/** Render only each option's icon (label becomes a tooltip). */
 		iconOnly?: boolean
 		/** Background applied to the options area only; the field label stays outside it. */
 		bgColor?: string
 	} & BagelInputShellProps>(),
-	{ multiselect: false, iconOnly: false },
+	{ multiselect: false, iconOnly: false, inactiveCheckIcon: 'remove' },
 )
 
 const { shellClass, shellStyle } = useBagelInputShell(() => ({
@@ -37,11 +65,29 @@ const hasValue = computed(() => {
 })
 
 /** Theme token names resolve to Bagel CSS variables; raw CSS values pass through. */
-const resolvedBgColor = computed(() => {
-	const color = props.bgColor
+const resolvedBgColor = computed(() => resolveColor(props.bgColor))
+
+function resolveColor(color?: string) {
 	if (!color) { return undefined }
-	return /^[a-z][a-z0-9-]*$/i.test(color) ? `var(--bgl-${color})` : color
-})
+	if (['transparent', 'inherit', 'currentColor'].includes(color)) { return color }
+	const tone = color.replace(/^--bgl-|^bgl-/, '')
+	return /^[a-z][a-z0-9-]*$/i.test(tone) ? `var(--bgl-${tone})` : color
+}
+
+function cssLength(value?: number | string) {
+	return typeof value === 'number' ? `${value}px` : value
+}
+
+const optionStyle = computed(() => ({
+	'--bgl-select-btn-active-color': resolveColor(props.activeColor),
+	'--bgl-select-btn-active-bg': resolveColor(props.activeBgColor),
+	'--bgl-select-btn-inactive-color': resolveColor(props.inactiveColor),
+	'--bgl-select-btn-inactive-bg': resolveColor(props.inactiveBgColor),
+	'--bgl-select-btn-height': cssLength(props.height),
+	'--bgl-select-btn-mobile-height': cssLength(props.mobileHeight),
+	'--bgl-select-btn-font-size': cssLength(props.fontSize),
+	'--bgl-select-btn-mobile-font-size': cssLength(props.mobileFontSize),
+}))
 
 type OptionValue = string | number | boolean
 
@@ -64,7 +110,17 @@ function isSelected(val: OptionValue) {
 
 <template>
 	<div
-		class="bagel-input SelectBtn" :class="[shellClass, { 'has-value': hasValue }]" :style="shellStyle"
+		class="bagel-input SelectBtn"
+		:class="[shellClass, {
+			'has-value': hasValue,
+			'is-compact': compact,
+			'is-flat': flat,
+			'has-custom-height': height != null,
+			'has-custom-font-size': fontSize != null,
+			'has-mobile-height': mobileHeight != null,
+			'has-mobile-font-size': mobileFontSize != null,
+		}]"
+		:style="[shellStyle, optionStyle]"
 	>
 		<label v-if="label || required" >
 			{{ resolveI18n(label) }}<span v-if="required"> *</span>
@@ -77,24 +133,46 @@ function isSelected(val: OptionValue) {
 			<Btn
 				v-for="option in options" :key="String(getOptionValue(option))" :thin="thin"
 				:size="size"
+				:disabled="disabled"
 				type="button"
-				:class="isSelected(getOptionValue(option)!) ? 'color-white' : 'bg-transparent'"
+				:class="[
+					isSelected(getOptionValue(option)!) ? 'is-selected' : 'is-unselected',
+					{ 'bg-transparent': !isSelected(getOptionValue(option)!) && !inactiveBgColor },
+				]"
+				:aria-pressed="isSelected(getOptionValue(option)!)"
 				:style="isSelected(getOptionValue(option)!)
 					? {
-						backgroundColor: 'var(--bgl-input-label-active-color, var(--bgl-primary))',
-						borderColor: 'var(--bgl-input-label-active-color, var(--bgl-primary))',
-						color: 'white',
+						backgroundColor: 'var(--bgl-select-btn-active-bg, var(--bgl-input-label-active-color, var(--bgl-primary)))',
+						borderColor: 'var(--bgl-select-btn-active-bg, var(--bgl-input-label-active-color, var(--bgl-primary)))',
+						color: 'var(--bgl-select-btn-active-color, white)',
 					}
 					: {
-						color: 'var(--bgl-input-label-active-color, var(--bgl-border-color))',
+						color: 'var(--bgl-select-btn-inactive-color, var(--bgl-input-label-active-color, var(--bgl-border-color)))',
 						borderColor: 'var(--bgl-input-label-active-color, var(--bgl-border-color))',
+						backgroundColor: 'var(--bgl-select-btn-inactive-bg, transparent)',
 					}"
 				class="border radius-2 SelectBtn-padding"
 				v-tooltip="iconOnly && getOptionIcon(option) ? getOptionLabel(option) : undefined"
 				@click="toggleOption(getOptionValue(option)!)"
 			>
-				<Icon v-if="getOptionIcon(option)" :icon="getOptionIcon(option)!" weight="300" />
-				<p v-if="!(iconOnly && getOptionIcon(option))">{{ getOptionLabel(option) }}</p>
+				<span :class="check ? 'flex gap-025' : 'contents'">
+					<span
+						v-if="check"
+						class="flex-center"
+						aria-hidden="true"
+						:style="{ opacity: isSelected(getOptionValue(option)!) ? 1 : inactiveCheckIcon ? 0.5 : 0 }"
+					>
+						<Icon
+							:icon="isSelected(getOptionValue(option)!) ? 'check' : inactiveCheckIcon ?? 'check'"
+							:transition="false"
+							weight="500"
+							:size="checkSize ?? 0.8"
+							:mobile-size="mobileCheckSize"
+						/>
+					</span>
+					<Icon v-if="getOptionIcon(option)" :icon="getOptionIcon(option)!" weight="300" />
+					<span v-if="!(iconOnly && getOptionIcon(option))">{{ getOptionLabel(option) }}</span>
+				</span>
 			</Btn>
 		</div>
 		<p v-if="error" class="txt-12 color-error mt-025">
@@ -114,6 +192,20 @@ function isSelected(val: OptionValue) {
 	padding: 0 var(--bgl-select-btn-padding, 0.7rem);
 }
 
+.SelectBtn.is-compact {
+	--bgl-input-font-size: 12px;
+	--bgl-input-height: 30px;
+	--bgl-btn-height: 30px;
+}
+
+.SelectBtn.is-compact .SelectBtn-padding {
+	line-height: 1;
+}
+
+.SelectBtn.is-flat .SelectBtn-padding {
+	border: none !important;
+}
+
 .select-btn-items {
 	width: fit-content;
 	max-width: 100%;
@@ -149,4 +241,23 @@ function isSelected(val: OptionValue) {
 	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
 }
 
+.SelectBtn.has-custom-height .SelectBtn-padding {
+	height: var(--bgl-select-btn-height);
+	line-height: var(--bgl-select-btn-height);
+}
+
+.SelectBtn.has-custom-font-size .SelectBtn-padding {
+	font-size: var(--bgl-select-btn-font-size);
+}
+
+@media screen and (max-width: 910px) {
+	.SelectBtn.has-mobile-height .SelectBtn-padding {
+		height: var(--bgl-select-btn-mobile-height);
+		line-height: var(--bgl-select-btn-mobile-height);
+	}
+
+	.SelectBtn.has-mobile-font-size .SelectBtn-padding {
+		font-size: var(--bgl-select-btn-mobile-font-size);
+	}
+}
 </style>

package/src/components/form/inputs/TelInput.vue

@@ -386,7 +386,7 @@ background: transparent;
 }
 
 .tel-input input {
-background: transparent;
+background: transparent !important;
 text-align: left;
 flex: 1;
 }

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<UploadInputProps>(), {
 	disabled: false,
 })
 
-const emit = defineEmits(['update:modelValue', 'addFileStart'])
+const emit = defineEmits(['update:modelValue', 'addFileStart', 'uploadError'])
 
 const { $t } = useI18n()
 const slots = useSlots()
@@ -43,7 +43,8 @@ const {
 		await flushQueue()
 		updateModelValue()
 	},
-	onChange: updateModelValue
+	onChange: updateModelValue,
+	onUploadError: (error, file) => emit('uploadError', error, file),
 })
 
 // Normalize each entry to a path-key/URL string. Legacy/migrated data may store

package/src/components/form/inputs/Upload/useFileUpload.ts

@@ -13,6 +13,7 @@ interface UseFileUploadProps {
 	upload?: (file: File) => Promise<string>
 	onFileQueued?: (files: QueueFile[]) => void
 	onChange?: () => void
+	onUploadError?: (error: unknown, file: File) => void
 }
 
 export function useFileUpload(props: UseFileUploadProps = {}) {
@@ -126,6 +127,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 				uploadedPathKeys.push(data.path_key)
 			} catch (error) {
 				console.error('Error uploading file:', error)
+				props.onUploadError?.(error, file.file)
 			}
 		}
 

package/src/styles/colors.css

@@ -10,7 +10,8 @@
 
 .bg-input-white input,
 .bg-input-white textarea,
-.bg-input-white .selectinput-btn {
+.bg-input-white .selectinput-btn,
+.bg-input-white .tel-input {
     background: var(--bgl-white) !important;
 }
 
@@ -666,7 +667,9 @@
     border-color: var(--bgl-gray) !important;
 }
 
-.color-input-gray input {
+.color-input-gray input,
+.color-input-gray .tel-input,
+.color-input-gray .dial-code {
     color: var(--bgl-gray) !important;
 }
 

package/src/styles/core.css

@@ -25,6 +25,7 @@
 @import "appearance.css";
 @import "gradients.css";
 @import "color-variants.css";
+@import "rich-content.css";
 
 .bgl_icon-font { font-family: 'Material Symbols Outlined', serif !important; }
 .bgl_icon-font.fa-brands { font-family: 'Font Awesome 6 Brands', serif !important; }

package/src/styles/rich-content.css

@@ -0,0 +1,109 @@
+/* Public rendering contract for HTML produced by RichText.
+   `.bgl-rich-content` is the preferred wrapper. The attribute selectors also
+   keep media responsive when saved HTML is rendered without a wrapper. */
+
+:where(.bgl-rich-content, .rich-content, .richtxt) {
+	display: flow-root;
+}
+
+:where(.bgl-rich-content, .rich-content, .richtxt) table {
+	display: block;
+	max-width: 100%;
+	overflow-x: auto;
+	border-collapse: collapse;
+}
+
+figure[data-media-type='image'],
+figure[data-media-type='video'],
+figure:has(> iframe[data-media-type='embed']) {
+	box-sizing: border-box;
+	max-width: 100%;
+	margin-block: 1.5rem;
+	margin-inline: 0;
+	text-align: center;
+}
+
+figure[data-media-type='image'] > a {
+	display: block;
+}
+
+figure[data-media-type='image'] img,
+figure[data-media-type='video'] video {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	height: auto;
+}
+
+figure.align-full {
+	float: none;
+	width: 100% !important;
+	max-width: 100%;
+	margin-inline: 0;
+}
+
+figure.align-start,
+figure.align-end {
+	width: 50% !important;
+	max-width: 50%;
+	margin-block: 0.25em 0.75em;
+}
+
+figure.align-start {
+	float: inline-start;
+	margin-inline: 0 1.25em;
+}
+
+figure.align-end {
+	float: inline-end;
+	margin-inline: 1.25em 0;
+}
+
+.video-responsive {
+	position: relative;
+	width: 100%;
+	height: 0;
+	overflow: hidden;
+}
+
+.video-responsive > iframe {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	border: 0;
+}
+
+figure:has(> iframe[data-media-type='embed']) > iframe {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+}
+
+figure[data-media-type] figcaption,
+figure:has(> iframe[data-media-type='embed']) figcaption {
+	padding-block-start: 0.5rem;
+	color: var(--bgl-gray);
+	font-size: 0.875rem;
+	line-height: 1.4;
+	text-align: center;
+}
+
+figure[data-media-type] figcaption .alt-text {
+	color: var(--bgl-text-color);
+	font-weight: 600;
+}
+
+figure[data-media-type] figcaption .photo-credit {
+	color: inherit;
+}
+
+@media screen and (max-width: 600px) {
+	figure.align-start,
+	figure.align-end {
+		float: none;
+		width: 100% !important;
+		max-width: 100%;
+		margin-inline: 0;
+	}
+}