bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BaseTextarea.md

@@ -0,0 +1,398 @@
+# BaseTextarea
+
+## Template & Script
+
+```vue
+<template>
+	<CommonInputOuterContainer :class="classes">
+		<template #prepend-outer><slot name="prepend-outer"></slot></template>
+		<CommonInputInnerContainer
+			:append:icon="props['append:icon']"
+			:clearable="clearable && isNotNil(modelValue)"
+			:prepend:icon="props['prepend:icon']"
+			@click:clear="$emit('update:modelValue', null)"
+		>
+			<template #prepend><slot name="prepend" /></template>
+			<template #prefix><slot name="prefix" /></template>
+			<BbSmoothHeight tag="span">
+				<textarea
+					:id="id"
+					ref="textarea"
+					:aria-describedby="ariaDescribedby"
+					:autocomplete="autocomplete"
+					:autofocus="autofocus"
+					:class="'bb-base-textarea__input scrollbar-border'"
+					:disabled="disabled"
+					:name="name"
+					:placeholder="placeholder"
+					:readonly="readonly"
+					:required="required"
+					:rows="rows"
+					:value="modelValueWithDefault"
+					v-bind="eventListeners"
+					@input="onInput"
+					@keydown="onKeydown"
+				></textarea>
+			</BbSmoothHeight>
+			<template #append><slot name="append" /></template>
+			<template #suffix><slot name="suffix" /></template>
+		</CommonInputInnerContainer>
+		<template #append-outer><slot name="append-outer"></slot></template>
+	</CommonInputOuterContainer>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import CommonInputOuterContainer from '../CommonInputOuterContainer/CommonInputOuterContainer.vue';
+import CommonInputInnerContainer from '../CommonInputInnerContainer/CommonInputInnerContainer.vue';
+import BbSmoothHeight from '../BbSmoothHeight/BbSmoothHeight.vue';
+import { isNotNil } from '@/utilities/functions/isNotNil';
+import type {
+	BaseTextareaProps,
+	BaseTextareaEvents,
+	BaseTextareaSlots,
+} from './types';
+
+const props = defineProps<BaseTextareaProps>();
+
+const emit = defineEmits<BaseTextareaEvents>();
+
+defineSlots<BaseTextareaSlots>();
+
+if (props.rows && props.autoGrow) {
+	throw new Error(
+		'Textarea: You cannot set rows and auto-grow attributes together. You either use rows and let the user resize or define a minimum height in CSS with auto-grow.'
+	);
+}
+
+const textarea: Ref<HTMLTextAreaElement | null> = ref(null);
+
+const classes = computed(() => ({
+	'bb-base-textarea': true,
+	'bb-base-textarea--auto-grow': props.autoGrow,
+	'bb-base-textarea--disabled': props.disabled,
+	'bb-base-textarea--errors': props.hasErrors,
+	'bb-base-textarea--loading': props.loading,
+	'bb-base-textarea--readonly': props.readonly,
+	'bb-base-textarea--compact': props.compact,
+}));
+
+// Allow modelvalue to be reset to null
+const modelValueWithDefault = computed(() =>
+	props.modelValue ? props.modelValue : ''
+);
+onMounted(() => {
+	if (props.autoGrow && props.modelValue) {
+		computeTextareaHeight();
+	}
+});
+watch(
+	() => props.modelValue,
+	() => {
+		if (props.autoGrow) {
+			nextTick(computeTextareaHeight);
+		}
+	}
+);
+
+function onInput(event: Event): void {
+	// Prevent enter from triggering smt else
+	event.stopPropagation();
+	if (event.target instanceof HTMLTextAreaElement) {
+		let value = event.target.value;
+		emit('input', event);
+		emit('update:modelValue', value || null);
+	}
+}
+function onKeydown(event: KeyboardEvent): void {
+	// Prevent enter from triggering smt else
+	event.stopPropagation();
+	if (event.target instanceof HTMLTextAreaElement) {
+		emit('keydown', event);
+	}
+}
+
+/**
+ * These events are just propagated
+ */
+const eventListeners = {
+	onBlur: (event: FocusEvent) => emit('blur', event),
+	onChange: (event: Event) => emit('change', event),
+	onClick: (event: MouseEvent) => emit('click', event),
+	onFocus: (event: FocusEvent) => emit('focus', event),
+	onMousedown: (event: MouseEvent) => emit('mousedown', event),
+	onMouseup: (event: MouseEvent) => emit('mouseup', event),
+};
+
+/* 
+Reset height and the apply scroll height otherwise it would not be able to shrink
+*/
+function computeTextareaHeight() {
+	if (!textarea.value) return;
+	textarea.value.style.height = '0px';
+
+	textarea.value.style.height = `${textarea.value.scrollHeight}px`;
+}
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import type { IconType } from '@/types/Icon';
+
+/**
+ * Props for the textarea input component with optional auto-grow functionality.
+ */
+export type BaseTextareaProps = {
+	/**
+	 * Name of the icon to render at the right hand side of the textarea.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'append:icon'?: IconType;
+	/**
+	 * Id(s) of elements describing this textarea for assistive technologies.
+	 */
+	ariaDescribedby?: InputHTMLAttributes['aria-describedby'];
+	/**
+	 * Browser autocomplete hint for the textarea.
+	 */
+	autocomplete?: InputHTMLAttributes['autocomplete'];
+
+	/**
+	 * Automatically expand the textarea height to fit its content. Cannot be used with `rows`.
+	 */
+	autoGrow?: boolean;
+
+	/**
+	 * Focus the textarea automatically on mount.
+	 */
+	autofocus?: InputHTMLAttributes['autofocus'];
+
+	/**
+	 * Show a clear button whenever text is present and the control is interactive.
+	 */
+	clearable?: boolean;
+
+	/**
+	 * Apply the compact density variant.
+	 */
+	compact?: boolean;
+
+	/**
+	 * Disable all interactions with the textarea.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Apply error styling to the textarea.
+	 */
+	hasErrors?: boolean;
+
+	/**
+	 * Explicit id for the textarea element.
+	 */
+	id?: HTMLAttributes['id'];
+
+	/**
+	 * Display the loading state styles.
+	 */
+	loading?: boolean;
+
+	/**
+	 * v-model value: the text content, or `null` when empty.
+	 */
+	modelValue: string | null;
+
+	/**
+	 * Name attribute forwarded to the textarea element.
+	 */
+	name?: InputHTMLAttributes['name'];
+
+	/**
+	 * Placeholder text when no value is present.
+	 */
+	placeholder?: InputHTMLAttributes['placeholder'];
+
+	/**
+	 * Name of the icon to render at the left hand side of the textarea.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'prepend:icon'?: IconType;
+
+	/**
+	 * Make the textarea read-only while keeping it visible.
+	 */
+	readonly?: boolean;
+
+	/**
+	 * Mark the textarea as required for form validation.
+	 */
+	required?: boolean;
+
+	/**
+	 * Fixed number of visible rows. Cannot be used with `autoGrow`.
+	 */
+	rows?: string | number;
+};
+
+export type BaseTextareaEvents = {
+	/**
+	 * Emitted when the native textarea loses focus.
+	 * Forwards the original DOM `FocusEvent`.
+	 */
+	(e: 'blur', event: FocusEvent): void;
+	/**
+	 * Emitted when the native textarea fires a change event.
+	 * Forwards the original DOM `Event`.
+	 */
+	(e: 'change', event: Event): void;
+	/**
+	 * Emitted when the textarea receives a click interaction.
+	 * Forwards the original DOM `MouseEvent`.
+	 */
+	(e: 'click', event: MouseEvent): void;
+	/**
+	 * Emitted when the native textarea gains focus.
+	 * Forwards the original DOM `FocusEvent`.
+	 */
+	(e: 'focus', event: FocusEvent): void;
+	/**
+	 * Emitted on native input events from the textarea.
+	 * Forwards the original DOM `Event`.
+	 */
+	(e: 'input', event: Event): void;
+	/**
+	 * Emitted for keyboard interaction on the textarea.
+	 * Forwards the original DOM `KeyboardEvent`.
+	 */
+	(e: 'keydown', event: KeyboardEvent): void;
+	/**
+	 * Emitted when a pointing device button is pressed over the textarea.
+	 * Forwards the original DOM `MouseEvent`.
+	 */
+	(e: 'mousedown', event: MouseEvent): void;
+	/**
+	 * Emitted when a pointing device button is released over the textarea.
+	 * Forwards the original DOM `MouseEvent`.
+	 */
+	(e: 'mouseup', event: MouseEvent): void;
+	/**
+	 * Emitted when the value changes. Carries the new text or `null` when cleared.
+	 */
+	(e: 'update:modelValue', value: string | null): void;
+};
+
+export type BaseTextareaSlots = {
+	/**
+	 * Content rendered before the entire textarea control, outside the input chrome.
+	 */
+	'prepend-outer'?: (props: object) => any;
+	/**
+	 * Content rendered before the textarea, at the start of the inner container.
+	 */
+	prepend?: (props: object) => any;
+	/**
+	 * Content rendered after the textarea, at the end of the inner container.
+	 */
+	append?: (props: object) => any;
+	/**
+	 * Content rendered after the entire textarea control, outside the input chrome.
+	 */
+	'append-outer'?: (props: object) => any;
+	/**
+	 * Inline content rendered at the start of the textarea field area, before the text.
+	 */
+	prefix?: (props: object) => any;
+	/**
+	 * Inline content rendered at the end of the textarea field area, after the text.
+	 */
+	suffix?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-base-textarea {
+	--min-height: 150px;
+	--bb-input-inner-h: max(
+		calc(var(--bb-leading) + var(--bb-input-py) * 2),
+		calc(var(--bb-input-h) - 2px),
+		var(--bb-input-icon)
+	);
+	--floating-py: calc((var(--bb-input-inner-h) - var(--bb-input-icon)) / 2);
+
+	&--disabled {
+		/* Styles for disabled state */
+	}
+
+	&--errors {
+		/* Styles for errors state */
+	}
+
+	&--readonly {
+		/* Styles for readonly state */
+	}
+
+	&--compact {
+		--floating-py: var(--bb-input-compact-floating-py);
+	}
+
+	&__input {
+		background-color: transparent;
+		outline: none;
+		padding-right: var(--bb-input-px);
+		padding-top: calc(
+			(var(--bb-input-h) - (var(--bb-input-font-size) * 2.35)) / 2
+		);
+		width: 100%;
+
+		&:not([rows]) {
+			min-height: var(--min-height);
+			resize: none;
+		}
+
+		&[rows] {
+			resize: vertical;
+		}
+	}
+
+	.bb-smooth-height {
+		align-self: center;
+		flex: 1 1 auto;
+		text-align: left;
+	}
+
+	.bb-common-input-inner-container {
+		align-items: flex-start;
+		.bb-clearable-button {
+			margin-top: var(--floating-py);
+		}
+		.bb-spinner {
+			margin-top: var(--floating-py);
+		}
+
+		.bb-error-icon {
+			margin-top: var(--floating-py);
+		}
+
+		.bb-common-input-inner-container__prepend-icon,
+		.bb-common-input-inner-container__append-icon {
+			margin-top: var(--floating-py);
+		}
+
+		.bb-common-input-inner-container__prefix,
+		.bb-common-input-inner-container__suffix {
+			align-items: flex-start;
+			padding-top: var(--floating-py);
+		}
+	}
+}
+```

package/dist/ai/BbAccordion.md

@@ -0,0 +1,135 @@
+# BbAccordion
+
+## Template & Script
+
+```vue
+<template>
+	<div class="bb-accordion">
+		<BaseButton
+			:id="`${id}_header`"
+			:aria-controls="id"
+			:aria-expanded="internalValue"
+			:class="'bb-accordion__header'"
+			@click.self="toggle"
+			><slot name="header" :toggle="toggle" :value="internalValue"></slot
+		></BaseButton>
+		<BbCollapsible
+			:id="id"
+			:aria-labelledby="`${id}_header`"
+			:class="'bb-accordion__content'"
+			:eager="eager"
+			:model-value="internalValue"
+			:role="'region'"
+			:transition-duration="transitionDuration"
+			><slot :toggle="toggle" :value="internalValue"></slot
+		></BbCollapsible>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useId } from '@/composables/useId';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import BbCollapsible from '../BbCollapsible/BbCollapsible.vue';
+import type {
+	BbAccordionProps,
+	BbAccordionEvents,
+	BbAccordionSlots,
+} from './types';
+export type { BbAccordionProps, BbAccordionEvents, BbAccordionSlots };
+
+const emit = defineEmits<BbAccordionEvents>();
+
+const props = withDefaults(defineProps<BbAccordionProps>(), {
+	transitionDuration: 250,
+});
+
+const id = props.id || `bba_${useId().id.value}`;
+
+const internalValue = ref(props.modelValue);
+/**
+ * Watch external changes and align internal value
+ */
+watch(
+	() => props.modelValue,
+	(current, previous) => {
+		if (current !== previous && current !== internalValue.value) {
+			internalValue.value = current;
+		}
+	}
+);
+
+const toggle = () => {
+	internalValue.value = !internalValue.value;
+	emit('update:modelValue', !props.modelValue);
+};
+
+defineSlots<BbAccordionSlots>();
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { BbCollapsibleProps } from '../BbCollapsible/BbCollapsible.vue';
+import type { CommonProps } from '@/types/CommonProps';
+
+export type BbAccordionProps = Pick<
+	BbCollapsibleProps,
+	'eager' | 'transitionDuration'
+> & {
+	/**
+	 * Used by v-model to trigger opening / closing the collapsible.
+	 * @defaultValue `undefined`
+	 */
+	modelValue?: boolean;
+} & Pick<CommonProps, 'id'>;
+
+export type BbAccordionEvents = {
+	/**
+	 * Emitted when the accordion open/closed state changes.
+	 */
+	(e: 'update:modelValue', value: boolean): void;
+};
+
+/** Props exposed by the `header` and `default` slots. */
+export type BbAccordionToggleSlotProps = {
+	/** Whether the accordion panel is currently open. */
+	value: BbAccordionProps['modelValue'];
+	/** Toggles the open/closed state. */
+	toggle: () => void;
+};
+
+export type BbAccordionSlots = {
+	/**
+	 * Content rendered inside the accordion header button.
+	 */
+	header?: (props: BbAccordionToggleSlotProps) => any;
+	/**
+	 * The collapsible body content shown when the accordion is open.
+	 */
+	default?: (props: BbAccordionToggleSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-accordion {
+	color: var(--bb-text);
+	.bb-accordion__header {
+		text-align: left;
+		width: 100%;
+
+		*:not(button):not(a) {
+			pointer-events: none;
+		}
+	}
+	.bb-accordion__content {
+	}
+}
+```