bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbChip.md

@@ -0,0 +1,148 @@
+# BbChip
+
+## Template & Script
+
+```vue
+<template>
+	<span class="bb-chip"
+		><span class="bb-chip__content"
+			><slot>{{ text }}</slot></span
+		><button
+			v-if="clearable"
+			:aria-label="clearableLabel || t('chip.clearLabel').value"
+			class="bb-chip__clear-button"
+			type="button"
+			@click.stop.prevent="onClear"
+		>
+			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"
+					fill="currentColor"
+				/>
+			</svg></button
+	></span>
+</template>
+
+<script setup lang="ts">
+import { useLocale } from '@/composables/useLocale';
+import type { BbChipProps, BbChipEvents, BbChipSlots } from './types';
+export type { BbChipProps, BbChipEvents, BbChipSlots };
+
+withDefaults(defineProps<BbChipProps>(), {
+	clearable: true,
+});
+
+defineSlots<BbChipSlots>();
+
+const emit = defineEmits<BbChipEvents>();
+
+const { t } = useLocale();
+
+const onClear = (event: MouseEvent) => {
+	emit('click:clear', event);
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps } from '@/types/CommonProps';
+
+export type BbChipProps = Pick<CommonProps, 'text'> & {
+	/**
+	 * Renders a button with a close icon. Used to indicate the possibility of deleting the item.
+	 *
+	 * @defaultValue `true`
+	 */
+	clearable?: boolean;
+	/**
+	 * The label the clearing button must have.
+	 */
+	clearableLabel?: string;
+};
+
+export type BbChipEvents = {
+	/** Emitted when the clear button is clicked. Forwards the original DOM `MouseEvent`. */
+	(e: 'click:clear', event: MouseEvent): void;
+};
+
+export type BbChipSlots = {
+	/**
+	 * The chip's label content. Rendered inside the chip alongside the optional clear button.
+	 */
+	default?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-chip {
+	align-items: center;
+	background-color: var(--bb-panel);
+	border: 1px solid var(--bb-border);
+	border-radius: var(--bb-radius);
+	color: var(--bb-text);
+	column-gap: 4px;
+	display: inline-flex;
+	min-height: 24px;
+	padding-left: 4px;
+	padding-right: 4px;
+	transition-duration: 150ms;
+	transition-property: color, background-color, border-color;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+	&:has(:focus-visible) {
+		background-color: color-mix(
+			in srgb,
+			var(--bb-primary) 20%,
+			var(--bb-panel)
+		);
+		color: var(--bb-primary);
+		svg {
+			background-color: var(--bb-panel);
+			outline: 0px solid var(--bb-panel);
+		}
+	}
+	&__content {
+		font-size: 14px;
+		line-height: 17px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	&__clear-button {
+		background-color: transparent;
+		border-radius: 0px;
+		outline: none;
+		position: relative;
+
+		svg {
+			backface-visibility: hidden;
+			background-color: color-mix(in srgb, var(--bb-panel), var(--bb-text) 20%);
+			border-radius: 999px;
+			padding: 2px;
+			stroke-width: 5px;
+			transition:
+				background-color 0.2s,
+				color 0.2s; /* Transition for color changes */
+			width: 15px;
+		}
+
+		&::after {
+			--overflow: 4px;
+			content: '';
+			position: absolute;
+			top: calc(var(--overflow) * -1);
+			left: calc(var(--overflow) * -1);
+			width: calc(100% + var(--overflow) * 2);
+			height: calc(100% + var(--overflow) * 2);
+		}
+	}
+}
+```

package/dist/ai/BbCollapsible.md

@@ -0,0 +1,119 @@
+# BbCollapsible
+
+## Template & Script
+
+```vue
+<template>
+	<component v-bind="collapsibleAttributes" :is="tag">
+		<component
+			:is="tag"
+			class="bb-collapsible__content"
+			:style="collapsibleAttributes.style"
+		>
+			<slot v-if="eager || hasRenderedOnce"></slot>
+		</component>
+	</component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { BbCollapsibleProps, BbCollapsibleSlots } from './types';
+export type { BbCollapsibleProps, BbCollapsibleSlots };
+
+const props = withDefaults(defineProps<BbCollapsibleProps>(), {
+	transitionDuration: 250,
+	tag: 'div',
+});
+
+defineSlots<BbCollapsibleSlots>();
+
+const visible = ref(props.modelValue);
+const hasRenderedOnce = ref(visible.value);
+
+/**
+ * If the component is lazy render content on first time modelValue is true
+ */
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (value && !hasRenderedOnce.value) {
+			hasRenderedOnce.value = true;
+		}
+	}
+);
+
+const collapsibleAttributes = computed(() => {
+	return {
+		class: {
+			'bb-collapsible': true,
+			'bb-collapsible--open': props.modelValue,
+			'bb-collapsible--closed': !props.modelValue,
+		},
+		style: {
+			transitionDuration: props.transitionDuration + 'ms',
+		},
+	};
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps } from '@/types/CommonProps';
+
+export type BbCollapsibleProps = Pick<
+	CommonProps,
+	'eager' | 'transitionDuration'
+> & {
+	/**
+	 * Used by v-model to trigger opening / closing the collapsible.
+	 */
+	modelValue: boolean;
+	/**
+	 * Any HTML tag corresponding to a non-void HTML element.
+	 *
+	 * @defaultValue `'div'`
+	 */
+	tag?: string;
+};
+
+export type BbCollapsibleSlots = {
+	/**
+	 * The collapsible body content that is shown or hidden based on `modelValue`.
+	 * When `eager` is false, the content is not rendered until the first open.
+	 */
+	default?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-collapsible {
+	display: grid;
+	overflow: hidden;
+	transition-property: grid-template-rows;
+
+	&--open {
+		grid-template-rows: 1fr;
+		.bb-collapsible__content {
+			visibility: visible;
+		}
+	}
+
+	&--closed {
+		grid-template-rows: 0fr;
+	}
+
+	&__content {
+		min-height: 0;
+		transition-property: visibility;
+		visibility: hidden;
+	}
+}
+```

package/dist/ai/BbColorInput.md

@@ -0,0 +1,345 @@
+# BbColorInput
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-color-input"
+		: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 }">
+			<BaseColorInput
+				:id="id"
+				:alpha="alpha"
+				:append:icon="props['append:icon']"
+				:aria-describedby="ariaDescribedby"
+				:autocomplete="autocomplete"
+				:autofocus="autofocus"
+				:clearable="clearable"
+				:compact="compact"
+				:disabled="disabled"
+				:has-errors="hasErrors"
+				:loading="loading"
+				:model-value="modelValue"
+				:name="name"
+				:picker="picker"
+				:placeholder="placeholder"
+				:prepend:icon="props['prepend:icon']"
+				:readonly="readonly"
+				:required="required"
+				:swatches="swatches"
+				v-bind="eventListeners"
+			>
+				<template #append-outer><slot name="append-outer" /></template>
+				<template #append><slot name="append" /></template>
+				<template #prefix><slot name="prefix" /></template>
+				<template #suffix><slot name="suffix" /></template>
+				<template #prepend><slot name="prepend" /></template>
+				<template #prepend-outer><slot name="prepend-outer" /></template>
+			</BaseColorInput>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import BaseColorInput from '../BaseColorInput/BaseColorInput.vue';
+import type { BaseColorInputEvents } from '../BaseColorInput/types';
+import type {
+	BbColorInputProps,
+	BbColorInputEvents,
+	BbColorInputSlots,
+} from './types';
+export type { BbColorInputProps, BbColorInputEvents, BbColorInputSlots };
+
+const props = defineProps<BbColorInputProps>();
+
+const emit = defineEmits<BaseColorInputEvents>();
+
+defineSlots<BbColorInputSlots>();
+
+const active = ref(false);
+const showHint = computed(() => props.persistentHint || active.value);
+
+/**
+ * These events are just propagated
+ */
+const eventListeners = {
+	onBlur: (event: FocusEvent) => {
+		active.value = false;
+		emit('blur', event);
+	},
+	onChange: (event: Event) => emit('change', event),
+	onClick: (event: MouseEvent) => emit('click', event),
+	onFocus: (event: FocusEvent) => {
+		active.value = true;
+		emit('focus', event);
+	},
+	onInput: (event: Event) => emit('input', event),
+	onKeydown: (event: KeyboardEvent) => emit('keydown', event),
+	onMousedown: (event: MouseEvent) => emit('mousedown', event),
+	onMouseup: (event: MouseEvent) => emit('mouseup', event),
+	'onUpdate:modelValue': (value: string | null) =>
+		emit('update:modelValue', value),
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import type { IconType } from '@/types/Icon';
+import type {
+	BaseColorInputEvents,
+	BaseColorInputSlots,
+} from '../BaseColorInput/types';
+
+export type BbColorInputProps = {
+	/**
+	 * Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format.
+	 */
+	alpha?: boolean;
+	/**
+	 * Name of the icon to be added at the end of the input.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'append:icon'?: IconType;
+	/**
+	 * Guides the browser as to the type of information expected in the field.
+	 */
+	autocomplete?: InputHTMLAttributes['autocomplete'];
+
+	/**
+	 * Sets autofocus on page load.
+	 */
+	autofocus?: InputHTMLAttributes['autofocus'];
+
+	/**
+	 * Displays a clear button when the input has a value and is being interacted with.
+	 */
+	clearable?: boolean;
+
+	/**
+	 * Displays the component in a compact version.
+	 */
+	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';
+
+	/**
+	 * Sets the component in a loading state, usually triggering some visual styles.
+	 */
+	loading?: boolean;
+
+	/**
+	 * Used by v-model.
+	 */
+	modelValue: string | null;
+
+	/**
+	 * Defines the name of the input.
+	 */
+	name?: InputHTMLAttributes['name'];
+
+	/**
+	 * Keeps the hint displayed.
+	 */
+	persistentHint?: boolean;
+
+	/**
+	 * String displayed when there's no data.
+	 */
+	placeholder?: InputHTMLAttributes['placeholder'];
+
+	/**
+	 * Name of the icon to be added at the start of the input.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'prepend:icon'?: IconType;
+
+	/**
+	 * 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;
+
+	/**
+	 * Show an eyedropper button to sample any color on screen.
+	 * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+	 *
+	 * @defaultValue `false`
+	 */
+	picker?: boolean;
+	/**
+	 * Controls swatches display in the picker:
+	 * - `true`       — show the built-in Material-palette swatches
+	 * - `string[][]` — show custom swatches (each inner array = a column of shades)
+	 * - `false` / omitted — no swatches section
+	 */
+	swatches?: boolean | string[][];
+};
+
+/** Re-export for consumers importing events type from BbColorInput. */
+export type { BaseColorInputEvents as BbColorInputEvents };
+
+/** Props exposed by the `label` slot. */
+export type BbColorInputLabelSlotProps = {
+	/** The `label` prop value. */
+	text: string;
+	/** Whether the input is in an error state. */
+	hasErrors: boolean;
+};
+
+export type BbColorInputSlots = BaseColorInputSlots & {
+	/**
+	 * Replaces the default label text rendered above the color input.
+	 */
+	label?: (props: BbColorInputLabelSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-color-input {
+	&.bb-base-input-outer-container--errors {
+	}
+	&.bb-base-input-outer-container--hint {
+	}
+	.bb-base-input-container {
+		&--vertical {
+		}
+		&--horizontal {
+		}
+
+		&__label {
+			&--left {
+			}
+			&--center {
+			}
+			&--right {
+			}
+			&--hidden {
+			}
+		}
+		&__input {
+			&--left {
+			}
+			&--center {
+			}
+			&--right {
+			}
+
+			.bb-base-color-input {
+				display: inline-flex;
+				&--disabled {
+				}
+				&--errors {
+				}
+				&--loading {
+				}
+				&--readonly {
+				}
+
+				.bb-common-input-inner-container {
+					.bb-base-text-input__input {
+					}
+
+					&__prepend-icon,
+					&__append-icon {
+					}
+					.bb-spinner {
+					}
+					.bb-error-icon {
+					}
+					&__prefix,
+					&__suffix {
+					}
+				}
+			}
+		}
+
+		&__hint-container {
+			.bb-base-input-container__hint {
+			}
+		}
+		&__errors {
+		}
+		&__error {
+		}
+	}
+}
+```