bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbTag.md

@@ -0,0 +1,315 @@
+# BbTag
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-tag"
+		: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 }">
+			<BaseTag
+				:id="id"
+				:append:icon="props['append:icon']"
+				:aria-describedby="ariaDescribedby"
+				:autocomplete="autocomplete"
+				:autofocus="autofocus"
+				:clearable="clearable"
+				:comma="comma"
+				:compact="compact"
+				:disabled="disabled"
+				:divider="divider"
+				:has-errors="hasErrors"
+				:loading="loading"
+				:max="max"
+				:model-value="modelValue"
+				:multiple="multiple"
+				:name="name"
+				:placeholder="placeholder"
+				:prepend:icon="props['prepend:icon']"
+				:readonly="readonly"
+				:required="required"
+				v-bind="eventListeners"
+			>
+				<template #prepend-outer="data"
+					><slot name="prepend-outer" v-bind="data"
+				/></template>
+				<template #prepend="data"
+					><slot name="prepend" v-bind="data"
+				/></template>
+				<template #prefix="data"><slot name="prefix" v-bind="data" /></template>
+				<template #append="data"><slot name="append" v-bind="data" /></template>
+				<template #suffix="data"><slot name="suffix" v-bind="data" /></template>
+				<template #append-outer="data"
+					><slot name="append-outer" v-bind="data"
+				/></template>
+			</BaseTag>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts">
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import BaseTag from '../BaseTag/BaseTag.vue';
+import { ref, computed } from 'vue';
+import type { BbTagProps, BbTagEvents, BbTagSlots } from './types';
+export type { BbTagProps, BbTagEvents, BbTagSlots };
+
+const props = withDefaults(defineProps<BbTagProps>(), {
+	multiple: true,
+});
+
+const emit = defineEmits<BbTagEvents>();
+
+defineSlots<BbTagSlots>();
+
+const active = ref(false);
+const showHint = computed(() => props.persistentHint || active.value);
+
+const eventListeners = {
+	onBlur: (event: FocusEvent) => emit('blur', event),
+	onChange: (event: Event) => emit('change', event),
+	onClick: (event: MouseEvent) => emit('click', event),
+	onDuplicate: (string: string) => emit('duplicate', string),
+	onFocus: (event: FocusEvent) => {
+		active.value = true;
+		emit('focus', event);
+	},
+	onInactive: () => {
+		active.value = false;
+		emit('inactive');
+	},
+	onInput: (event: Event) => emit('input', event),
+	onKeydown: (event: KeyboardEvent) => emit('keydown', event),
+	onKeyup: (event: KeyboardEvent) => emit('keyup', event),
+	'onUpdate:modelValue': (value: any) => 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 { BaseTagEvents } from '../BaseTag/types';
+
+export type BbTagProps = {
+	/**
+	 * 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'];
+
+	/**
+	 * Sets the display model for selected values to a list of comma separated string.
+	 * In this mode the user cannot deselect an option by pressing the close button.
+	 */
+	comma?: boolean;
+
+	/**
+	 * Displays a clear button when the input has a value and is being interacted with.
+	 */
+	clearable?: boolean;
+
+	/**
+	 * Sets the component in a 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;
+
+	/**
+	 * The divider key used to separate values from one another. By default it is "Enter".
+	 */
+	divider?: KeyboardEvent['key'];
+
+	/**
+	 * 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;
+
+	/**
+	 * Maximum number of selected items.
+	 */
+	max?: number;
+
+	/**
+	 * Used by v-model. Can be any serializable type.
+	 */
+	modelValue: any;
+
+	/**
+	 * Allows the selection of multiple items.
+	 *
+	 * @defaultValue `true`
+	 */
+	multiple?: boolean;
+
+	/**
+	 * 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;
+};
+
+/** Re-export for consumers importing events type from BbTag. */
+export type BbTagEvents = BaseTagEvents;
+
+/** Props exposed by the `label` slot. */
+export type BbTagLabelSlotProps = {
+	/** The `label` prop value. */
+	text: string;
+	/** Whether the input is in an error state. */
+	hasErrors: boolean;
+};
+
+export type BbTagSlots = {
+	/**
+	 * Content appended inside the input field wrapper, after the tag chips.
+	 */
+	append?: (props: object) => any;
+	/**
+	 * Content appended outside the input field wrapper.
+	 */
+	'append-outer'?: (props: object) => any;
+	/**
+	 * Replaces the default label text rendered above the input.
+	 */
+	label?: (props: BbTagLabelSlotProps) => any;
+	/**
+	 * Content prepended inside the input field wrapper, before the tag chips.
+	 */
+	prepend?: (props: object) => any;
+	/**
+	 * Content rendered as an inline prefix inside the input field.
+	 */
+	prefix?: (props: object) => any;
+	/**
+	 * Content rendered as an inline suffix inside the input field.
+	 */
+	suffix?: (props: object) => any;
+	/**
+	 * Content prepended outside the input field wrapper.
+	 */
+	'prepend-outer'?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-tag {
+	.bb-base-input-container {
+		.bb-base-input-container__input {
+			.bb-base-tag {
+				display: inline-flex;
+			}
+		}
+	}
+}
+```

package/dist/ai/BbTextInput.md

@@ -0,0 +1,357 @@
+# BbTextInput
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-text-input"
+		:compact="compact"
+		:direction="direction"
+		:errors="errors"
+		:has-errors="hasErrors"
+		:hide-label="hideLabel"
+		:hint="hint"
+		:label="label"
+		:label-mode="labelMode"
+		: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 }">
+			<BaseTextInput
+				:id="id"
+				:append:icon="props['append:icon']"
+				:aria-describedby="ariaDescribedby"
+				:autocomplete="autocomplete"
+				:autofocus="autofocus"
+				:clearable="clearable"
+				:compact="compact"
+				:disabled="disabled"
+				:emit-masked="emitMasked"
+				:has-errors="hasErrors"
+				:input-mode="inputMode"
+				:label-mode="labelMode"
+				:loading="loading"
+				:mask="mask"
+				:model-value="modelValue"
+				:name="name"
+				:placeholder="placeholder"
+				:prepend:icon="props['prepend:icon']"
+				:readonly="readonly"
+				:required="required"
+				:type="type"
+				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>
+			</BaseTextInput>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import BaseTextInput from '../BaseTextInput/BaseTextInput.vue';
+import type {
+	BbTextInputProps,
+	BbTextInputEvents,
+	BbTextInputSlots,
+} from './types';
+export type { BbTextInputProps, BbTextInputEvents, BbTextInputSlots };
+
+const props = defineProps<BbTextInputProps>();
+
+const emit = defineEmits<BbTextInputEvents>();
+
+defineSlots<BbTextInputSlots>();
+
+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 { MaskInputOptions } from 'maska';
+import type { IconType } from '@/types/Icon';
+import type {
+	BaseTextInputEvents,
+	BaseTextInputSlots,
+} from '../BaseTextInput/types';
+
+export type BbTextInputProps = {
+	/**
+	 * 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'];
+
+	/**
+	 * 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;
+
+	/**
+	 * Emits the masked value of the input.
+	 */
+	emitMasked?: 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'];
+
+	/**
+	 * The inputmode of the input.
+	 */
+	inputMode?: InputHTMLAttributes['inputmode'];
+
+	/**
+	 * Text content of the label of the element.
+	 */
+	label: string;
+
+	/**
+	 * Sets the text alignment of the label.
+	 */
+	labelPosition?: 'left' | 'center' | 'right';
+
+	/**
+	 * Label rendering mode.
+	 */
+	labelMode?: 'outside' | 'floating' | 'inside';
+
+	/**
+	 * Sets the component in a loading state, usually triggering some visual styles.
+	 */
+	loading?: boolean;
+
+	/**
+	 * The mask to be applied to the input.
+	 * Please visit https://beholdr.github.io/maska/v3 for syntax examples.
+	 */
+	mask?: MaskInputOptions;
+
+	/**
+	 * 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;
+
+	/**
+	 * Type of the input. Returns the content type of the object.
+	 */
+	type?: HTMLInputElement['type'];
+};
+
+/** Re-export for consumers importing events type from BbTextInput. */
+export type BbTextInputEvents = BaseTextInputEvents;
+
+/** Props exposed by the `label` slot. */
+export type BbTextInputLabelSlotProps = {
+	/** The `label` prop value. */
+	text: string;
+	/** Whether the input is in an error state. */
+	hasErrors: boolean;
+};
+
+export type BbTextInputSlots = BaseTextInputSlots & {
+	/**
+	 * Replaces the default label text rendered above the input.
+	 */
+	label?: (props: BbTextInputLabelSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-text-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-text-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 {
+		}
+	}
+}
+```