bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/CommonPopover.md

@@ -0,0 +1,446 @@
+# CommonPopover
+
+## Template & Script
+
+```vue
+<template>
+	<component
+		:is="wrapperTag"
+		ref="wrapper"
+		class="bb-common-popover"
+		:class="{
+			'bb-common-popover--open': shown,
+			'bb-common-popover--no-arrow': hideArrow,
+			[`bb-common-popover--${placement}`]: true,
+		}"
+		v-bind="containerAttributes"
+		@click.self.stop="closePopover"
+		@contextmenu.self.stop.prevent="closePopover"
+		@close="closePopover"
+	>
+		<span
+			ref="bubblearrow"
+			class="bb-common-popover__arrow"
+			v-bind="arrowAttributes"
+		></span>
+		<span v-if="renderContent" class="bb-common-popover__bubble">
+			<slot />
+		</span>
+	</component>
+</template>
+
+<script setup lang="ts">
+import {
+	useCancelableFunction,
+	type CancelableExecutionContext,
+} from '@/composables/useCancelableFunction';
+import { useUntil } from '@/composables/useUntil';
+import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
+import { waitFor } from '@/utilities/functions/waitFor';
+import {
+	useFloating,
+	autoUpdate,
+	flip as flipMiddleware,
+	shift,
+	arrow,
+	offset,
+	hide,
+} from '@floating-ui/vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import type { CommonPopoverProps, CommonPopoverSlots } from './types';
+export type { CommonPopoverProps, CommonPopoverSlots };
+export type { CommonPopoverProps as BubbleProps } from './types';
+
+const props = withDefaults(defineProps<CommonPopoverProps>(), {
+	transitionDuration: 250,
+	tag: 'span',
+	padding: 0,
+	renderContent: true,
+	flip: true,
+});
+
+defineSlots<CommonPopoverSlots>();
+
+const model = defineModel<boolean>({ default: false });
+const shown = ref(model.value);
+const wrapperTag = computed(() => (props.dialog ? 'dialog' : 'span'));
+const wrapper = ref<HTMLElement>();
+const bubblearrow = ref<HTMLElement>();
+const anchor = computed(() => {
+	const raw = props.anchor;
+	if (
+		raw &&
+		typeof raw === 'object' &&
+		'getBoundingClientRect' in raw &&
+		!(raw instanceof Element)
+	) {
+		return raw;
+	}
+	return extractDomContainer(raw);
+});
+const renderContent = useUntil(model, { initialValue: props.eager });
+
+const boundaryElement = computed(() => {
+	if (!props.boundary) return undefined;
+	if (typeof props.boundary === 'string') {
+		return document.querySelector(props.boundary) ?? undefined;
+	}
+	return extractDomContainer(props.boundary) ?? undefined;
+});
+
+const middleware = computed(() => {
+	const boundary = boundaryElement.value;
+	return [
+		...(props.flip
+			? [flipMiddleware(boundary ? { boundary } : undefined)]
+			: []),
+		offset(props.offset),
+		shift({ padding: props.padding, ...(boundary ? { boundary } : {}) }),
+		hide(),
+		...(props.hideArrow
+			? []
+			: [
+					arrow({
+						element: bubblearrow as any,
+						padding: props.arrowPadding,
+					}),
+				]),
+	];
+});
+
+const { floatingStyles, placement, middlewareData, update } = useFloating(
+	anchor,
+	wrapper,
+	{
+		placement: props.placement,
+		whileElementsMounted: autoUpdate,
+		middleware,
+		strategy: 'fixed',
+	}
+);
+
+/**
+ * This mess is due to:
+ * - lazy rendering of content
+ * - when the content has been rendered it then needs to be transitioned
+ * - safari wrongly computed the size of the popover unless immediately showPopover() is called
+ * - if the user clicks very fast we need to give an easing to the transition and render only the last state
+ */
+const { execute: toggle } = useCancelableFunction(
+	({ signal }: CancelableExecutionContext, value: boolean) => {
+		return new Promise((resolve) => {
+			let timeout: ReturnType<typeof setTimeout> | undefined;
+			const eventListener = () => {
+				if (timeout) clearTimeout(timeout);
+			};
+			signal.addEventListener('abort', eventListener);
+			if (value) {
+				showPopover();
+				update();
+				waitFor(() => !!wrapper.value).then(() => {
+					shown.value = true;
+					signal.removeEventListener('abort', eventListener);
+					resolve(void 0);
+				});
+			} else {
+				shown.value = false;
+				timeout = setTimeout(() => {
+					nextTick(() => {
+						if (wrapper.value) {
+							if (props.dialog) {
+								(wrapper.value as HTMLDialogElement).close();
+							} else wrapper.value.hidePopover();
+						}
+						signal.removeEventListener('abort', eventListener);
+						update();
+						resolve(void 0);
+					});
+				}, props.transitionDuration);
+			}
+		});
+	}
+);
+
+const showPopover = () => {
+	if (!wrapper.value) return;
+	if (!props.dialog) return wrapper.value.showPopover();
+	const d = wrapper.value as HTMLDialogElement;
+	d.showModal();
+};
+
+/**
+ * When the model is changed, open or close the popover.
+ * Defensively recompute modal position as it might be inside a dialog or any other floating element
+ */
+watch(model, toggle);
+
+onMounted(() => {
+	if (model.value) {
+		toggle(model.value);
+	}
+});
+
+const containerAttributes = computed(() => {
+	const tabIndex = !model.value ? -1 : undefined;
+	const offsetX = middlewareData.value.arrow?.x;
+	const normalizedArrowOffsetX =
+		props.hideArrow || offsetX == null ? '50%' : `${Math.round(offsetX)}px`;
+	const popover = props.dialog ? undefined : 'manual';
+	const styles = {
+		...floatingStyles.value,
+		'--transition-duration': `${props.transitionDuration}ms`,
+		'--page-padding': `${props.padding}px`,
+		'--arrow-offset-x': normalizedArrowOffsetX,
+	};
+	return {
+		style: styles,
+		popover: popover,
+		tabindex: tabIndex,
+	};
+});
+
+const arrowAttributes = computed(() => {
+	if (middlewareData.value.arrow) {
+		const { x, y } = middlewareData.value.arrow;
+		return {
+			style: {
+				left: `${x}px`,
+				top: `${y}px`,
+			},
+		};
+	}
+	return undefined;
+});
+
+const closePopover = () => {
+	model.value = false;
+};
+</script>
+
+<style lang="postcss">
+.bb-common-popover {
+	--arrow-h: 8px;
+	--arrow-w: 20px;
+	--translate-x-coefficient: 0;
+	--translate-y-coefficient: 0;
+	--translate-distance: 0px;
+	display: flex;
+	position: fixed;
+	top: -2000px;
+	margin: 0;
+	display: flex;
+	background-color: transparent;
+	padding: 0;
+	z-index: -1;
+	border-radius: var(--bb-radius);
+	outline: none;
+	opacity: 0;
+	pointer-events: none;
+	width: max-content;
+	max-width: calc(100% - var(--page-padding) * 2);
+	transition:
+		opacity calc(var(--transition-duration) * 0.75),
+		z-index 0s var(--transition-duration);
+	&::backdrop {
+		background-color: transparent;
+	}
+
+	&.bb-common-popover--no-arrow {
+		--bb-arrow: 0;
+	}
+
+	&.bb-common-popover--open {
+		z-index: var(--bb-overlay-z-index);
+		opacity: 1;
+		scale: 1;
+		pointer-events: auto;
+
+		.bb-common-popover__bubble {
+			scale: 1;
+			> * {
+				opacity: 1;
+			}
+		}
+	}
+
+	&[class*='--bottom'],
+	&[class*='--top'] {
+		.bb-common-popover__arrow {
+			position: relative;
+			height: 0;
+			width: 0;
+			border-left: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
+			border-right: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
+			border-bottom: calc(var(--arrow-h) * var(--bb-arrow)) solid
+				var(--bb-border);
+
+			&::after {
+				position: absolute;
+				inset: 1px;
+				height: 0;
+				width: 0;
+				transform: translateX(calc(-50% - 1px));
+				border-left: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
+					transparent;
+				border-right: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
+					transparent;
+				border-bottom: calc(var(--arrow-h) * var(--bb-arrow)) solid
+					var(--bb-panel);
+				content: '';
+			}
+		}
+
+		&[class*='--bottom'] {
+			--translate-y-coefficient: 1;
+			flex-direction: column;
+
+			.bb-common-popover__bubble {
+				transform-origin: var(--arrow-offset-x) top;
+			}
+		}
+
+		&[class*='--top'] {
+			--translate-y-coefficient: -1;
+			flex-direction: column-reverse;
+
+			.bb-common-popover__arrow {
+				transform: rotate(180deg);
+			}
+			.bb-common-popover__bubble {
+				transform-origin: var(--arrow-offset-x) bottom;
+			}
+		}
+	}
+
+	&[class*='--left'],
+	&[class*='--right'] {
+		flex-direction: row;
+
+		.bb-common-popover__arrow {
+			position: relative;
+			height: 0;
+			width: 0;
+			border-top: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
+			border-bottom: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
+				transparent;
+			border-left: calc(var(--arrow-h) * var(--bb-arrow)) solid var(--bb-border);
+
+			&::after {
+				position: absolute;
+				inset: 1px;
+				height: 0;
+				width: 0;
+				transform: translateX(calc(-100% - 2px)) translateY(calc(-50% - 1px));
+				border-top: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
+				border-bottom: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
+					transparent;
+				border-left: calc(var(--arrow-h) * var(--bb-arrow)) solid
+					var(--bb-panel);
+				content: '';
+			}
+		}
+
+		&[class*='--left'] {
+			--translate-x-coefficient: -1;
+			flex-direction: row-reverse;
+
+			.bb-common-popover__bubble {
+				transform-origin: center right;
+			}
+		}
+		&[class*='--right'] {
+			--translate-x-coefficient: 1;
+			.bb-common-popover__arrow {
+				rotate: 180deg;
+			}
+
+			.bb-common-popover__bubble {
+				transform-origin: center left;
+			}
+		}
+	}
+
+	.bb-common-popover__arrow {
+		position: relative;
+		display: inline-block;
+		opacity: calc(var(--bb-arrow) * 100%);
+		z-index: 100;
+	}
+
+	.bb-common-popover__bubble {
+		display: block;
+		scale: 0.6;
+		border-radius: var(--bb-radius);
+		border: 1px solid var(--bb-border);
+		background-color: var(--bb-panel);
+		transition: scale var(--transition-duration);
+		text-wrap: balance;
+
+		> * {
+			transition: opacity var(--transition-duration)
+				calc(var(--transition-duration) * 0.5);
+			opacity: 0;
+		}
+	}
+}
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps } from '@/types/CommonProps';
+
+export type CommonPopoverProps = Pick<
+	CommonProps,
+	| 'arrowPadding'
+	| 'eager'
+	| 'offset'
+	| 'padding'
+	| 'placement'
+	| 'transitionDuration'
+> & {
+	/**
+	 * The element the popover positions itself relative to.
+	 * Accepts an HTMLElement, a Vue component ref, or a virtual element with a `getBoundingClientRect` method.
+	 */
+	anchor?: any;
+	/**
+	 * Constrains the popover within a bounding element.
+	 * When provided, the popover will not overflow this container's bounds.
+	 * Accepts an HTMLElement, a Vue component ref, or a CSS selector string.
+	 */
+	boundary?: HTMLElement | Record<string, any> | string | null;
+	/**
+	 * Renders the popover as a `<dialog>` element (modal overlay) instead of a `<span>` with the Popover API.
+	 */
+	dialog?: boolean;
+	/**
+	 * Hides the arrow indicator.
+	 *
+	 * @defaultValue `false`
+	 */
+	hideArrow?: boolean;
+	/**
+	 * HTML tag to render the popover wrapper as. Overridden to `dialog` when `dialog` is `true`.
+	 *
+	 * @defaultValue `'span'`
+	 */
+	tag?: string;
+	/**
+	 * Enables automatic flipping of the popover placement when it would overflow.
+	 *
+	 * @defaultValue `true`
+	 */
+	flip?: boolean;
+};
+
+export type CommonPopoverEvents = Record<never, never>;
+
+export type CommonPopoverSlots = {
+	/**
+	 * Content rendered inside the popover bubble.
+	 */
+	default?: (props: object) => any;
+};
+```

package/dist/ai/ErrorIcon.md

@@ -0,0 +1,61 @@
+# ErrorIcon
+
+## Template & Script
+
+```vue
+<template>
+	<svg
+		class="bb-error-icon"
+		fill="none"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M9.99422 18.3333C14.5966 18.3333 18.3276 14.6024 18.3276 9.99999C18.3276 5.39762 14.5966 1.66666 9.99422 1.66666C5.39185 1.66666 1.66089 5.39762 1.66089 9.99999C1.66089 14.6024 5.39185 18.3333 9.99422 18.3333Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M9.99414 6.66666V9.99999"
+			stroke="white"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+		/>
+		<path
+			d="M9.99414 13.3333H10.0025"
+			stroke="white"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+		/>
+	</svg>
+</template>
+
+<script setup lang="ts">
+import type { ErrorIconProps, ErrorIconEvents, ErrorIconSlots } from './types';
+export type { ErrorIconProps, ErrorIconEvents, ErrorIconSlots };
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+export type ErrorIconProps = Record<never, never>;
+
+export type ErrorIconEvents = Record<never, never>;
+
+export type ErrorIconSlots = Record<never, never>;
+```
+
+## Styles
+
+```css
+.bb-error-icon {
+	--color: var(--bb-danger);
+	color: var(--color);
+}
+```