bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbTextarea.md

@@ -0,0 +1,277 @@
+# BbTextarea
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-textarea"
+		: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 }">
+			<BaseTextarea
+				:id="id"
+				:append:icon="props['append:icon']"
+				:aria-describedby="ariaDescribedby"
+				:auto-grow="autoGrow"
+				:autofocus="autofocus"
+				:clearable="clearable"
+				:compact="compact"
+				:disabled="disabled"
+				:has-errors="hasErrors"
+				:loading="loading"
+				:model-value="modelValue"
+				:name="name"
+				:placeholder="placeholder"
+				:prepend:icon="props['prepend:icon']"
+				:readonly="readonly"
+				:required="required"
+				:rows="rows"
+				v-bind="eventListeners"
+			>
+				<template #append-outer><slot name="append-outer" /></template>
+				<template #append><slot name="append" /></template>
+				<template #prepend><slot name="prepend" /></template>
+				<template #prepend-outer><slot name="prepend-outer" /></template>
+				<template #prefix="data"><slot name="prefix" v-bind="data" /></template>
+				<template #suffix="data"><slot name="suffix" v-bind="data" /></template>
+			</BaseTextarea>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import BaseTextarea from '../BaseTextarea/BaseTextarea.vue';
+import type {
+	BbTextareaProps,
+	BbTextareaEvents,
+	BbTextareaSlots,
+} from './types';
+export type { BbTextareaProps, BbTextareaEvents, BbTextareaSlots };
+
+const props = defineProps<BbTextareaProps>();
+
+const emit = defineEmits<BbTextareaEvents>();
+
+defineSlots<BbTextareaSlots>();
+
+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 {
+	BaseTextareaEvents,
+	BaseTextareaSlots,
+} from '../BaseTextarea/types';
+
+export type BbTextareaProps = {
+	/**
+	 * 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 to the browser as to the type of information expected in the field.
+	 */
+	autocomplete?: InputHTMLAttributes['autocomplete'];
+
+	/**
+	 * Sets autofocus on page load.
+	 */
+	autofocus?: InputHTMLAttributes['autofocus'];
+
+	/**
+	 * Expands the textarea to match its content.
+	 */
+	autoGrow?: boolean;
+
+	/**
+	 * Displays a clear button when the input has a value and is being interacted with.
+	 */
+	clearable?: boolean;
+
+	/**
+	 * Sets the component in a compact state.
+	 */
+	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;
+
+	/**
+	 * Sets the number of visible text lines for the control.
+	 */
+	rows?: string | number;
+};
+
+/** Re-export for consumers importing events type from BbTextarea. */
+export type BbTextareaEvents = BaseTextareaEvents;
+
+/** Props exposed by the `label` slot. */
+export type BbTextareaLabelSlotProps = {
+	/** The `label` prop value. */
+	text: string;
+	/** Whether the textarea is in an error state. */
+	hasErrors: boolean;
+};
+
+export type BbTextareaSlots = BaseTextareaSlots & {
+	/**
+	 * Replaces the default label text rendered above the textarea.
+	 */
+	label?: (props: BbTextareaLabelSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-textarea {
+	.bb-base-input-container {
+		.bb-base-input-container__input {
+			.bb-base-textarea {
+				display: inline-flex;
+			}
+		}
+	}
+}
+```

package/dist/ai/BbToast.md

@@ -0,0 +1,219 @@
+# BbToast
+
+## Template & Script
+
+```vue
+<template>
+	<div class="bb-toast" :class="{ [`bb-toast--${placement}`]: true }">
+		<TransitionGroup name="toast">
+			<BbToastMessage
+				v-for="message in state.stack"
+				:key="message.id"
+				v-bind="message"
+				@click:close="dismiss"
+			/>
+		</TransitionGroup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { state, useToast } from '../../composables/useToast';
+
+const { dismiss } = useToast();
+
+import BbToastMessage from './BbToastMessage.vue';
+import type { BbToastProps } from './types';
+export type { BbToastProps };
+
+withDefaults(defineProps<BbToastProps>(), {
+	placement: 'bottom',
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+export type BbToastProps = {
+	/**
+	 * Placement of the messages on the screen.
+	 *
+	 * @defaultValue `'bottom'`
+	 */
+	placement?:
+		| 'bottom'
+		| 'bottom-start'
+		| 'bottom-end'
+		| 'top'
+		| 'top-start'
+		| 'top-end';
+};
+```
+
+## Styles
+
+```css
+.bb-toast {
+	--page-margin: 20px;
+	--spacing: 12px;
+	--min-h: 50px;
+	--w: 300px;
+	--color: var(--bb-primary);
+	--padding-x: 12px;
+	--padding-y: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing);
+	margin: var(--page-margin);
+	min-width: min(calc(100vw - var(--page-margin) * 2), var(--min-w));
+	position: fixed;
+	z-index: 10;
+
+	&[class*='bb-toast--bottom'] {
+		bottom: 0;
+
+		&.bb-toast--bottom {
+			left: 50%;
+			transform: translateX(-50%);
+			align-items: center;
+		}
+		&.bb-toast--bottom-start {
+			left: 0;
+			align-items: start;
+		}
+		&.bb-toast--bottom-end {
+			right: 0;
+			align-items: end;
+		}
+	}
+
+	&[class*='bb-toast--top'] {
+		top: 0;
+
+		&.bb-toast--top {
+			left: 50%;
+			transform: translateX(-50%);
+			align-items: center;
+		}
+		&.bb-toast--top-start {
+			left: 0;
+			align-items: start;
+		}
+		&.bb-toast--top-end {
+			right: 0;
+			align-items: end;
+		}
+	}
+
+	.toast-move,
+	.toast-enter-active,
+	.toast-leave-active {
+		transition: all 0.5s ease;
+	}
+
+	.toast-enter-from,
+	.toast-leave-to {
+		opacity: 0;
+	}
+
+	.toast-leave-active {
+		/* leaving items taken out of layout flow for correct animation calculation */
+	}
+}
+
+.bb-toast-message {
+	-webkit-backdrop-filter: blur(8px);
+	align-items: center;
+	backdrop-filter: blur(8px);
+	background-color: var(--bb-panel);
+	border-radius: 8px;
+	border: 1px solid var(--bb-border);
+	color: var(--bb-text);
+	display: grid;
+	gap: 8px;
+	grid-template-columns: auto 1fr;
+	max-width: min(calc(100vw - var(--page-margin) * 2), var(--w));
+	min-height: var(--min-h);
+	padding: var(--padding-y) var(--padding-x);
+	position: relative;
+	width: var(--w);
+
+	&:has(.bb-toast-message__icon-container:empty) {
+		grid-template-columns: 0px 1fr;
+		gap: 0;
+		.bb-toast-message__icon-container {
+			display: none;
+		}
+	}
+
+	.bb-toast-message__icon {
+		color: var(--color);
+		width: 24px;
+		height: 24px;
+	}
+
+	.bb-toast-message__content {
+		grid-column-start: 2;
+		grid-row-start: 1;
+	}
+
+	.bb-toast-message__title {
+		color: var(--color);
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 1.4;
+		margin-bottom: 4px;
+	}
+
+	.bb-toast-message__text {
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 1.4;
+		opacity: 0.9;
+	}
+
+	.bb-toast-message__close {
+		background: transparent;
+		border: none;
+		border-radius: 4px;
+		color: var(--bb-text);
+		grid-column-start: 2;
+		grid-row-start: 1;
+		float: right;
+		position: relative;
+		z-index: 1;
+		margin: calc(var(--padding-y) * -1) calc(var(--padding-x) * -1)
+			calc(var(--padding-y) * -1) 0px;
+		outline: none;
+		padding: 8px;
+		transition: all 0.2s ease;
+		width: fit-content;
+		opacity: 0.6;
+
+		&:hover {
+			opacity: 1;
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 2px var(--bb-ring);
+			opacity: 1;
+		}
+
+		svg {
+			width: 12px;
+			height: 12px;
+		}
+	}
+
+	&:hover {
+		.bb-toast-message__close {
+			opacity: 0.8;
+		}
+	}
+}
+```