bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbAlert.md

@@ -0,0 +1,226 @@
+# BbAlert
+
+## Template & Script
+
+```vue
+<template>
+	<BbCollapsible
+		class="bb-alert"
+		:class="{ [`bb-alert--${theme}`]: theme }"
+		:model-value="innerValue"
+	>
+		<div class="bb-alert__inner-container" role="alert">
+			<div class="bb-alert__icon-container">
+				<BbIcon
+					v-if="icon"
+					class="bb-alert__icon"
+					:size="iconSize"
+					:type="icon"
+				/>
+			</div>
+			<div class="bb-alert__content">
+				<button
+					v-if="showClose"
+					:aria-label="closeLabel || t('common.closeLabel').value"
+					block
+					class="bb-alert__close"
+					type="button"
+					@click="onClickClose"
+				>
+					<svg
+						fill="none"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M23 23L1 1M23 1L1 23"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-width="2"
+						/>
+					</svg>
+				</button>
+				<div class="bb-alert__title">
+					<slot name="title" v-bind="{ text: title }">{{ title }}</slot>
+				</div>
+				<div class="bb-alert__text">
+					<slot name="text" v-bind="{ text: text }">{{ text }}</slot>
+				</div>
+			</div>
+		</div>
+	</BbCollapsible>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import BbCollapsible from '../BbCollapsible/BbCollapsible.vue';
+import BbIcon from '../BbIcon/BbIcon.vue';
+import { useLocale } from '@/composables/useLocale';
+import type { BbAlertProps, BbAlertEvents, BbAlertSlots } from './types';
+export type { BbAlertProps, BbAlertEvents, BbAlertSlots };
+
+const props = withDefaults(defineProps<BbAlertProps>(), {
+	theme: 'default',
+});
+
+const emit = defineEmits<BbAlertEvents>();
+
+defineSlots<BbAlertSlots>();
+
+const { t } = useLocale();
+
+const innerValue = ref(
+	props.modelValue === undefined ? true : !!props.modelValue
+);
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (innerValue.value !== !!value) {
+			innerValue.value = !!value;
+		}
+	}
+);
+
+const onClickClose = () => {
+	innerValue.value = false;
+	emit('update:modelValue', false);
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps } from '@/types/CommonProps';
+import type { BbIconProps } from '../BbIcon/BbIcon.vue';
+
+export type BbAlertProps = Pick<
+	CommonProps,
+	'closeLabel' | 'showClose' | 'text' | 'theme' | 'title'
+> & {
+	/**
+	 * Name of the icon to use.
+	 */
+	icon?: BbIconProps['type'];
+	/**
+	 * Size of the icon to use.
+	 */
+	iconSize?: BbIconProps['size'];
+	/**
+	 * Used by v-model, set type to any to avoid Vue casting it as false.
+	 */
+	modelValue?: any;
+};
+
+export type BbAlertEvents = {
+	/**
+	 * Emitted when the alert is dismissed via the close button.
+	 */
+	(e: 'update:modelValue', value: boolean): void;
+};
+
+/** Props exposed by the `title` slot. */
+export type BbAlertTitleSlotProps = {
+	/** The `title` prop value. */
+	text: BbAlertProps['title'];
+};
+
+/** Props exposed by the `text` slot. */
+export type BbAlertTextSlotProps = {
+	/** The `title` prop value passed to the text slot. */
+	text: BbAlertProps['title'];
+};
+
+export type BbAlertSlots = {
+	/**
+	 * Replaces the default alert title text.
+	 */
+	title?: (props: BbAlertTitleSlotProps) => any;
+	/**
+	 * Replaces the default alert body text.
+	 */
+	text?: (props: BbAlertTextSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-alert {
+	--color: var(--bb-primary);
+	--gap: 8px;
+	--padding-x: 16px;
+	--padding-y: 12px;
+	background-color: color-mix(in srgb, var(--color) 20%, transparent);
+	border-radius: var(--bb-radius);
+
+	.bb-alert__inner-container {
+		align-items: start;
+		display: grid;
+		gap: 0 var(--gap);
+		grid-template-columns: auto 1fr;
+		padding: var(--padding-y) var(--padding-x);
+
+		&:has(.bb-alert__icon-container:empty) {
+			grid-template-columns: 1fr;
+		}
+
+		.bb-alert__icon {
+			color: var(--color);
+		}
+
+		.bb-alert__content {
+			.bb-alert__title {
+				align-items: center;
+				color: color-mix(in srgb, var(--color) 75%, var(--bb-text));
+				column-gap: var(--gap);
+				display: flex;
+				font-size: 16px;
+				font-weight: 600;
+			}
+
+			.bb-alert__text {
+				color: color-mix(in srgb, var(--bb-text) 70%, transparent);
+				font-size: 14px;
+			}
+		}
+
+		.bb-alert__close {
+			border-radius: var(--bb-radius);
+			box-shadow: 0px 0px 0px 0px var(--bb-ring);
+			color: color-mix(in srgb, var(--bb-text) 80%, transparent);
+			float: right;
+			isolation: isolate;
+			/* This margin is done to allow the ring to be visible when user navigates through keyboard to the button */
+			margin: calc(var(--padding-y) * -1 + var(--bb-ring-size))
+				calc(var(--padding-x) * -1 + var(--bb-ring-size))
+				calc(var(--padding-y) * -1) 0px;
+			outline: none;
+			padding: 12px;
+			transition-duration: 150ms;
+			transition-property:
+				color, background-color, border-color, text-decoration-color, box-shadow;
+			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+			width: fit-content;
+
+			&:hover {
+				color: var(--bb-primary);
+			}
+
+			&:focus-visible {
+				box-shadow: 0px 0px 0px var(--bb-ring-size) var(--bb-ring);
+				color: var(--bb-primary);
+			}
+
+			svg {
+				width: 12px;
+			}
+		}
+	}
+}
+```

package/dist/ai/BbAvatar.md

@@ -0,0 +1,200 @@
+# BbAvatar
+
+## Template & Script
+
+```vue
+<template>
+	<span v-bind="attributes">
+		<img
+			v-if="(src || srcset) && !imageErrored"
+			ref="image"
+			:alt="alt"
+			class="bb-avatar__img"
+			:sizes="sizes"
+			:src="src"
+			:srcset="srcset"
+			@error="onError"
+			@load="onLoad"
+		/>
+		<span v-else class="bb-avatar__fallback">
+			<slot></slot>
+		</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
+import { isCssColor } from '@/utilities/functions/isCssColor';
+import type { Classes } from '@/types/Classes';
+import { wait } from '@/utilities/functions/wait';
+import type { BbAvatarProps, BbAvatarSlots, Size } from './types';
+export type { BbAvatarProps, BbAvatarSlots };
+
+const props = withDefaults(defineProps<BbAvatarProps>(), {
+	timeout: 400,
+});
+
+defineSlots<BbAvatarSlots>();
+
+const sizeMap: Size = {
+	xs: 24,
+	sm: 32,
+	md: 40,
+	lg: 56,
+	xl: 80,
+	xxl: 104,
+};
+
+const attributes = computed(() => {
+	const classes: Classes = {
+		'bb-avatar': true,
+	};
+	let dimension: any;
+	if (props.size) {
+		if (typeof props.size === 'string') {
+			dimension = sizeMap[props.size as keyof Size] ?? parseInt(props.size, 10);
+		} else {
+			dimension = props.size;
+		}
+		dimension += `px`;
+	}
+
+	let style: { [key: string]: any } = {
+		width: dimension,
+		height: dimension,
+	};
+	if (props.color) {
+		if (isCssColor(props.color)) {
+			style.backgroundColor = props.color;
+		} else {
+			classes[`bb-avatar--${props.color}`] = true;
+		}
+	}
+	return {
+		class: classes,
+		style,
+	};
+});
+
+const imageHasLoadedCorrectly = (img: HTMLImageElement) => {
+	if (!img) return false;
+	// During the onload event, IE correctly identifies any images that
+	// weren’t downloaded as not complete. Others should too. Gecko-based
+	// browsers act like NS4 in that they report this incorrectly.
+	if (!img.complete) {
+		return false;
+	}
+
+	// However, they do have two very useful properties: naturalWidth and
+	// naturalHeight. These give the true size of the image. If it failed
+	// to load, either of these should be zero.
+	if (img.naturalWidth === 0) {
+		return false;
+	}
+
+	// No other way of checking: assume it’s ok.
+	return true;
+};
+
+const image = ref<HTMLImageElement | null>();
+const imageLoaded = ref(false);
+const imageErrored = ref(false);
+
+onMounted(async () => {
+	// Only run when events don't fire (when the page is SSR)
+	if (!imageErrored.value && !imageLoaded.value) {
+		if (image.value) {
+			await wait(props.timeout);
+			imageErrored.value = !imageHasLoadedCorrectly(image.value);
+		}
+	}
+});
+const onLoad = () => {
+	imageLoaded.value = true;
+};
+const onError = () => {
+	imageErrored.value = true;
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { ImgHTMLAttributes } from 'vue';
+import type { CommonProps } from '@/types/CommonProps';
+import type { BbIconProps, Size } from '../BbIcon/types';
+
+export type BbAvatarProps = Pick<CommonProps, 'color'> &
+	Pick<BbIconProps, 'size'> & {
+		/**
+		 * Alternative text for the image, used for accessibility.
+		 */
+		alt?: ImgHTMLAttributes['alt'];
+		/**
+		 * Source URL of the avatar image.
+		 */
+		src?: ImgHTMLAttributes['src'];
+		/**
+		 * Responsive image source set.
+		 */
+		srcset?: ImgHTMLAttributes['srcset'];
+		/**
+		 * Sizes attribute for the image, used with `srcset`.
+		 */
+		sizes?: ImgHTMLAttributes['sizes'];
+		/**
+		 * Milliseconds to wait after mount before checking whether the image loaded correctly (SSR fallback).
+		 * @defaultValue `400`
+		 */
+		timeout?: number;
+	};
+
+export type BbAvatarSlots = {
+	/**
+	 * Fallback content shown when no image source is provided or when the image fails to load.
+	 * Typically used to render initials or a placeholder icon.
+	 */
+	default?: (props: object) => any;
+};
+
+export type { Size };
+```
+
+## Styles
+
+```css
+.bb-avatar {
+	aspect-ratio: 1 / 1;
+	border-radius: 50%;
+	display: grid;
+	grid-template-columns: 1fr;
+	overflow: hidden;
+
+	.bb-avatar__img {
+		aspect-ratio: 1 / 1;
+		grid-column: 1 / span 1;
+		grid-row: 1 / span 1;
+		height: 100%;
+		object-fit: cover;
+		object-position: center;
+		width: 100%;
+	}
+
+	.bb-avatar__fallback {
+		align-items: stretch;
+		display: grid;
+		grid-column: 1 / span 1;
+		grid-row: 1 / span 1;
+
+		> * {
+			display: grid;
+			place-items: center;
+		}
+	}
+}
+```

package/dist/ai/BbBadge.md

@@ -0,0 +1,185 @@
+# BbBadge
+
+## Template & Script
+
+```vue
+<template>
+	<span :class="classes">
+		<span class="bb-badge__wrapper">
+			<slot></slot>
+			<span class="bb-badge__content-container" v-bind="contentAttributes">
+				<span class="bb-badge__content-inner"
+					><slot name="content">{{ content }}</slot></span
+				>
+			</span>
+		</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { isCssColor } from '@/utilities/functions/isCssColor';
+import { isNil } from '@/utilities/functions/isNil';
+import type { BbBadgeProps, BbBadgeSlots } from './types';
+export type { BbBadgeProps, BbBadgeSlots };
+
+const slots = useSlots();
+
+const props = withDefaults(defineProps<BbBadgeProps>(), {});
+
+defineSlots<BbBadgeSlots>();
+
+const classes = computed(() => {
+	return {
+		'bb-badge': true,
+		'bb-badge--bottom': props.bottom,
+		'bb-badge--left': props.left,
+		'bb-badge--positioned': slots.default,
+		'bb-badge--floating': props.floating,
+		'bb-badge--empty': isNil(props.content),
+		[`bb-badge--${props.color}`]: props.color && !isCssColor(props.color),
+	};
+});
+
+const contentAttributes = computed(() => {
+	let style: Record<string, string> = {};
+	if (props.color && isCssColor(props.color)) {
+		style.backgroundColor = props.color;
+	}
+
+	let accessibilityAttributes: Record<string, string | boolean> = {};
+	if ('wrap' in slots && slots.wrap) {
+		accessibilityAttributes['aria-atomic'] = true;
+		accessibilityAttributes['aria-live'] = 'polite';
+		accessibilityAttributes['role'] = 'status';
+	}
+	return {
+		style,
+		...accessibilityAttributes,
+	};
+});
+</script>
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps } from '@/types/CommonProps';
+
+export type BbBadgeProps = Pick<CommonProps, 'color'> & {
+	/**
+	 * Displays the badge on the bottom of the wrapped component.
+	 */
+	bottom?: boolean;
+	/**
+	 * Text content of the badge.
+	 */
+	content?: string | number | null;
+	/**
+	 * Renders the badge a little further from the wrapped component,
+	 * making it look like it's floating and not stacked.
+	 */
+	floating?: boolean;
+	/**
+	 * Displays the badge on the left of the wrapped component.
+	 */
+	left?: boolean;
+};
+
+export type BbBadgeSlots = {
+	/**
+	 * The element the badge is anchored to. When provided, the badge is positioned relative to it.
+	 */
+	default?: (props: object) => any;
+	/**
+	 * Replaces the default badge indicator content. Falls back to the `content` prop value.
+	 */
+	content?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-badge {
+	--color: var(--bb-primary);
+	--radius: 999px;
+	display: inline-flex;
+
+	&--positioned {
+		position: relative;
+
+		&.bb-badge--left {
+			.bb-badge__content-container {
+				left: calc(0% - 10px);
+			}
+		}
+
+		&.bb-badge--bottom {
+			.bb-badge__content-container {
+				bottom: calc(0% - 10px);
+			}
+		}
+
+		&.bb-badge--empty {
+			.bb-badge__content-container {
+				transform: scale(0);
+			}
+		}
+
+		&.bb-badge--floating {
+			.bb-badge__content-container {
+				bottom: calc(100% - 4px);
+				left: calc(100% - 4px);
+
+				&.bb-badge--left {
+					left: calc(0% + 4px);
+					transform: translateX(-100%);
+				}
+
+				&.bb-badge--bottom {
+					bottom: calc(0% + 4px);
+					transform: translateY(100%);
+				}
+			}
+		}
+
+		.bb-badge__content-container {
+			bottom: calc(100% - 10px);
+			left: calc(100% - 10px);
+			min-height: 18px;
+			min-width: 18px;
+			position: absolute;
+		}
+	}
+
+	&__content-container {
+		align-items: center;
+		background-color: var(--color);
+		border-radius: var(--radius);
+		color: var(--bb-contrasting);
+		display: inline-flex;
+		font-size: 12px;
+		justify-content: center;
+		line-height: 0;
+		min-height: 22px;
+		padding-bottom: 3px;
+		padding-left: 6px;
+		padding-right: 6px;
+		padding-top: 3px;
+		transition:
+			color 0.2s,
+			background-color 0.2s;
+	}
+
+	&__content-inner {
+	}
+
+	&__wrapper {
+		display: inline-flex;
+	}
+}
+```