bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbSlider.md

@@ -0,0 +1,274 @@
+# BbSlider
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-slider"
+		:compact="compact"
+		:direction="direction"
+		:errors="errors"
+		:has-errors="hasErrors"
+		:hide-label="hideLabel"
+		:hint="hint"
+		:label="label"
+		:label-position="labelPosition"
+		:model-value="modelValue"
+		:name="name"
+		:reverse="reverse"
+		:show-hint="showHint"
+	>
+		<template #label="data"><slot name="label" v-bind="data"></slot></template>
+		<template #input="{ id, hasErrors, ariaDescribedby }">
+			<BaseSlider
+				:id="id"
+				:aria-describedby="ariaDescribedby"
+				:autofocus="autofocus"
+				:color="color"
+				:disabled="disabled"
+				:has-errors="hasErrors"
+				:max="max"
+				:min="min"
+				:model-value="modelValue"
+				:name="name"
+				:range="range"
+				:readonly="readonly"
+				:required="required"
+				:step="step"
+				:thumb-translate="thumbTranslate"
+				:ticks="ticks"
+				v-bind="eventListeners"
+			>
+				<template #append="data"><slot name="append" v-bind="data" /></template>
+				<template #prepend="data"
+					><slot name="prepend" v-bind="data"
+				/></template>
+				<template #thumb="data"><slot name="thumb" v-bind="data" /></template>
+				<template #thumb:lower="data"
+					><slot name="thumb:lower" v-bind="data"
+				/></template>
+				<template #thumb:higher="data"
+					><slot name="thumb:higher" v-bind="data"
+				/></template>
+				<template #tick="data"><slot name="tick" v-bind="data" /></template>
+			</BaseSlider>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts">
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import BaseSlider from '../BaseSlider/BaseSlider.vue';
+import { ref, computed } from 'vue';
+import type { BbSliderProps, BbSliderEvents, BbSliderSlots } from './types';
+export type { BbSliderProps, BbSliderEvents, BbSliderSlots };
+
+const props = withDefaults(defineProps<BbSliderProps>(), {
+	thumbTranslate: true,
+});
+
+const emit = defineEmits<BbSliderEvents>();
+
+defineSlots<BbSliderSlots>();
+
+const active = ref(false);
+const showHint = computed(() => props.persistentHint || active.value);
+
+/**
+ * These events are just propagated
+ */
+const eventListeners = {
+	onActive: () => {
+		active.value = true;
+		emit('active');
+	},
+	onClick: (event: MouseEvent) => emit('click', event),
+	onFocus: (event: FocusEvent) => emit('focus', event),
+	onInactive: () => {
+		active.value = false;
+		emit('inactive');
+	},
+	onKeydown: (event: KeyboardEvent) => emit('keydown', event),
+	onPointerdown: (event: PointerEvent) => emit('pointerdown', event),
+	onPointermove: (event: PointerEvent) => emit('pointermove', event),
+	onPointerup: (event: PointerEvent) => emit('pointerup', event),
+	'onUpdate:modelValue': (value: number | number[]) =>
+		emit('update:modelValue', value),
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import type { BaseSliderEvents, BaseSliderSlots } from '../BaseSlider/types';
+
+export type BbSliderProps = {
+	/**
+	 * Sets autofocus on page load.
+	 */
+	autofocus?: InputHTMLAttributes['autofocus'];
+
+	/**
+	 * Define a color for the component.
+	 *
+	 * Either a custom color or a coded color in common HEX, RGB, etc... format.
+	 */
+	color?: string;
+
+	/**
+	 * Set the component in compact mode.
+	 */
+	compact?: boolean;
+
+	/**
+	 * Direction of the layout of the component. Can either be a predefined value or a
+	 * pattern separated by a space like `xx xxxxx`.
+	 */
+	direction?: 'horizontal' | 'vertical' | 'auto' | string;
+
+	/**
+	 * Disables the component.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Can be a string or an array of string containing the messages to display.
+	 */
+	errors?: string | string[];
+
+	/**
+	 * Define if the component should be in an error state.
+	 * It usually attaches a CSS class for styling purposes.
+	 */
+	hasErrors?: boolean;
+
+	/**
+	 * Visually hides the label of the input while maintaining accessibility.
+	 */
+	hideLabel?: boolean;
+
+	/**
+	 * Text box to be displayed near the input, usually to indicate instructions.
+	 */
+	hint?: string;
+
+	/**
+	 * The identifier of the component.
+	 */
+	id?: HTMLAttributes['id'];
+
+	/**
+	 * Text content of the label of the element.
+	 */
+	label: string;
+
+	/**
+	 * Sets the text alignment of the label.
+	 */
+	labelPosition?: 'left' | 'center' | 'right';
+
+	/**
+	 * Maximum value cap.
+	 */
+	max?: number;
+
+	/**
+	 * Minimum value cap.
+	 */
+	min?: number;
+
+	/**
+	 * Used by v-model.
+	 */
+	modelValue: number[] | number | string | null;
+
+	/**
+	 * Defines the name of the input.
+	 */
+	name?: InputHTMLAttributes['name'];
+
+	/**
+	 * Keeps the hint displayed.
+	 */
+	persistentHint?: boolean;
+
+	/**
+	 * Set the input as range. modelValue must be an array.
+	 */
+	range?: boolean;
+
+	/**
+	 * Sets the input in a readonly state.
+	 */
+	readonly?: boolean;
+
+	/**
+	 * Sets the input as required.
+	 */
+	required?: boolean;
+
+	/**
+	 * Reverses the layout. Applicable in every direction the order of the label and
+	 * the input is swapped.
+	 */
+	reverse?: boolean;
+
+	/**
+	 * The step attribute specifies the granularity that the value must adhere to.
+	 */
+	step?: number;
+
+	/**
+	 * Proportionally translates the thumb so it remains on track. Set it to `false` when
+	 * displaying ticks so they align with less effort.
+	 *
+	 * @defaultValue `true`
+	 */
+	thumbTranslate?: boolean;
+
+	/**
+	 * Displays ticks on step.
+	 */
+	ticks?: boolean;
+};
+
+/** Re-export for consumers importing events type from BbSlider. */
+export type BbSliderEvents = BaseSliderEvents;
+
+/** Props exposed by the `label` slot. */
+export type BbSliderLabelSlotProps = {
+	/** The `label` prop value. */
+	text: string;
+	/** Whether the slider is in an error state. */
+	hasErrors: boolean;
+};
+
+export type BbSliderSlots = BaseSliderSlots & {
+	/**
+	 * Replaces the default label text rendered above the slider.
+	 */
+	label?: (props: BbSliderLabelSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-slider {
+	.bb-base-input-container {
+		.bb-base-input-container__input {
+			.bb-base-slider {
+				display: inline-flex;
+			}
+		}
+	}
+}
+```

package/dist/ai/BbSmoothHeight.md

@@ -0,0 +1,167 @@
+# BbSmoothHeight
+
+## Template & Script
+
+```vue
+<template>
+	<component
+		:is="tag"
+		ref="container"
+		class="bb-smooth-height"
+		:style="{ 'transition-duration': props.transitionDuration / 1000 + 's' }"
+	>
+		<component :is="tag" ref="content" class="content">
+			<slot />
+		</component>
+	</component>
+</template>
+
+<script setup lang="ts">
+import type { BbSmoothHeightProps, BbSmoothHeightSlots } from './types';
+export type { BbSmoothHeightProps, BbSmoothHeightSlots };
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const props = withDefaults(defineProps<BbSmoothHeightProps>(), {
+	transitionDuration: 200,
+	strategy: 'resize',
+	mutationOptions: () => ({ childList: true }),
+	tag: 'div',
+});
+
+defineSlots<BbSmoothHeightSlots>();
+
+const container = ref<HTMLElement | null>(null);
+const content = ref<HTMLElement | null>(null);
+const observer = ref<ResizeObserver | MutationObserver | null>(null);
+
+let rafId: number | null = null;
+let settleTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let pendingHeight: number | null = null;
+
+function applyHeight(height: number) {
+	if (container.value) {
+		container.value.style.height = `${height}px`;
+	}
+}
+
+function scheduleUpdate(height: number) {
+	pendingHeight = height;
+
+	if (rafId === null) {
+		rafId = requestAnimationFrame(() => {
+			if (pendingHeight !== null) {
+				applyHeight(pendingHeight);
+				pendingHeight = null;
+			}
+			rafId = null;
+		});
+	}
+
+	// Schedule a trailing measurement after things settle
+	if (settleTimeoutId !== null) {
+		clearTimeout(settleTimeoutId);
+	}
+	settleTimeoutId = setTimeout(() => {
+		if (content.value) {
+			applyHeight(content.value.scrollHeight);
+		}
+		settleTimeoutId = null;
+	}, props.transitionDuration);
+}
+
+function onResize(entries: ResizeObserverEntry[]) {
+	if (entries.length > 0) {
+		scheduleUpdate(entries[0].contentRect.height);
+	}
+}
+
+function onMutation() {
+	if (content.value) {
+		scheduleUpdate(content.value.scrollHeight);
+	}
+}
+
+if (globalThis.ResizeObserver) {
+	onMounted(() => {
+		if (props.strategy === 'resize') {
+			if (content.value) {
+				observer.value = new ResizeObserver(onResize);
+				observer.value.observe(content.value, props.resizeOptions);
+			}
+		} else if (props.strategy === 'mutation') {
+			if (content.value) {
+				observer.value = new MutationObserver(onMutation);
+				observer.value.observe(content.value, props.mutationOptions);
+			}
+		}
+		// Initial measurement
+		if (content.value) {
+			applyHeight(content.value.scrollHeight);
+		}
+	});
+	onBeforeUnmount(() => {
+		if (observer.value) {
+			observer.value.disconnect();
+		}
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+		}
+		if (settleTimeoutId !== null) {
+			clearTimeout(settleTimeoutId);
+		}
+	});
+}
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps, NonVoidElementTag } from '@/types/CommonProps';
+
+export type BbSmoothHeightProps = {
+	/**
+	 * Options to pass to the MutationObserver.
+	 */
+	mutationOptions?: MutationObserverInit; // eslint-disable-line no-undef
+	/**
+	 * Options to pass to the ResizeObserver.
+	 */
+	resizeOptions?: ResizeObserverOptions; // eslint-disable-line no-undef
+	/**
+	 * Define which strategy to use. By default `'resize'` is used, which means the
+	 * component will update on resizing. You can also define `'mutation'` to use a MutationObserver.
+	 *
+	 * @defaultValue `'resize'`
+	 */
+	strategy?: 'resize' | 'mutation';
+} & NonVoidElementTag &
+	Pick<CommonProps, 'transitionDuration'>;
+
+export type BbSmoothHeightSlots = {
+	/**
+	 * Content whose height changes are animated with a smooth transition.
+	 */
+	default?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-smooth-height {
+	display: block;
+	overflow: clip;
+	transition-duration: 300ms;
+	transition-property: height;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+	.content {
+		display: block;
+	}
+}
+```

package/dist/ai/BbSpinner.md

@@ -0,0 +1,154 @@
+# BbSpinner
+
+## Template & Script
+
+```vue
+<template>
+	<svg
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		v-bind="iconAttributes"
+	>
+		<circle class="bb-spinner__circle" cx="12" cy="3" r="0" />
+		<circle class="bb-spinner__circle circle--1" cx="16.50" cy="4.21" r="0" />
+		<circle class="bb-spinner__circle circle--2" cx="7.50" cy="4.21" r="0" />
+		<circle class="bb-spinner__circle circle--3" cx="19.79" cy="7.50" r="0" />
+		<circle class="bb-spinner__circle circle--4" cx="4.21" cy="7.50" r="0" />
+		<circle class="bb-spinner__circle circle--5" cx="21.00" cy="12.00" r="0" />
+		<circle class="bb-spinner__circle circle--6" cx="3.00" cy="12.00" r="0" />
+		<circle class="bb-spinner__circle circle--7" cx="19.79" cy="16.50" r="0" />
+		<circle class="bb-spinner__circle circle--8" cx="4.21" cy="16.50" r="0" />
+		<circle class="bb-spinner__circle circle--9" cx="16.50" cy="19.79" r="0" />
+		<circle class="bb-spinner__circle circle--10" cx="7.50" cy="19.79" r="0" />
+		<circle class="bb-spinner__circle circle--11" cx="12" cy="21" r="0" />
+	</svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isCssColor } from '@/utilities/functions/isCssColor';
+import type { Classes } from '@/types/Classes';
+import type { BbSpinnerProps, Size as IconSize } from './types';
+export type { BbSpinnerProps, Size } from './types';
+
+const props = withDefaults(defineProps<BbSpinnerProps>(), {
+	size: 'md',
+});
+
+const sizeMap: IconSize = {
+	xs: 12,
+	sm: 16,
+	md: 24,
+	lg: 28,
+	xl: 36,
+	xxl: 40,
+};
+
+const iconAttributes = computed(() => {
+	const classes: Classes = {
+		'bb-spinner': true,
+	};
+	const width = computed(() => {
+		let dimension: number;
+		if (typeof props.size === 'string') {
+			dimension =
+				sizeMap[props.size as keyof IconSize] ?? parseInt(props.size, 10);
+		} else {
+			dimension = props.size;
+		}
+		return dimension + `px`;
+	});
+	let style: { [key: string]: any } = { '--size': width.value };
+
+	if (props.color) {
+		if (isCssColor(props.color)) {
+			style.color = props.color;
+		} else {
+			classes[`bb-spinner--${props.color}`] = true;
+		}
+	}
+	return {
+		class: classes,
+		style,
+	};
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps, Size as S } from '@/types/CommonProps';
+import type { Size as IconSize } from '../BbIcon/types';
+
+/**
+ * Maps size key strings to pixel dimensions. Re-exported for consumers that
+ * need to reference the size key union type.
+ */
+export type Size = IconSize;
+
+export type BbSpinnerProps = Pick<CommonProps, 'color'> & S<IconSize>;
+```
+
+## Styles
+
+```css
+.bb-spinner {
+	display: inline-block;
+	width: var(--size);
+	fill: currentColor;
+
+	@keyframes bb-spin-animation {
+		0%,
+		50% {
+			animation-timing-function: cubic-bezier(0.27, 0.42, 0.37, 0.99);
+			r: 0;
+		}
+		25% {
+			animation-timing-function: cubic-bezier(0.53, 0, 0.61, 0.73);
+			r: 2px;
+		}
+	}
+
+	.bb-spinner__circle {
+		animation: bb-spin-animation 1.2s infinite;
+	}
+	.circle--1 {
+		animation-delay: 0.1s;
+	}
+	.circle--3 {
+		animation-delay: 0.2s;
+	}
+	.circle--5 {
+		animation-delay: 0.3s;
+	}
+	.circle--7 {
+		animation-delay: 0.4s;
+	}
+	.circle--9 {
+		animation-delay: 0.5s;
+	}
+	.circle--11 {
+		animation-delay: 0.6s;
+	}
+	.circle--10 {
+		animation-delay: 0.7s;
+	}
+	.circle--8 {
+		animation-delay: 0.8s;
+	}
+	.circle--6 {
+		animation-delay: 0.9s;
+	}
+	.circle--4 {
+		animation-delay: 1s;
+	}
+	.circle--2 {
+		animation-delay: 1.1s;
+	}
+}
+```