bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbDatePickerInput.md

@@ -0,0 +1,414 @@
+# BbDatePickerInput
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-date-picker-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 }">
+			<BaseDatePickerInput
+				:id="id"
+				:allow-writing="allowWriting"
+				:append:icon="$props['append:icon']"
+				:aria-describedby="ariaDescribedby"
+				:autocomplete="autocomplete"
+				:autofocus="autofocus"
+				:clearable="clearable"
+				:compact="compact"
+				:disabled="disabled"
+				:first-day-of-week="firstDayOfWeek"
+				:floating="floating"
+				:has-errors="hasErrors"
+				:hide-popover="hidePopover"
+				:loading="loading"
+				:max="max"
+				:min="min"
+				:model-value="modelValue"
+				:name="name"
+				:placeholder="placeholder"
+				:prepend:icon="$props['prepend:icon']"
+				:range="range"
+				:readonly="readonly"
+				:required="required"
+				:selectable="selectable"
+				:width="width"
+				v-bind="eventListeners"
+			>
+				<template #prepend-outer><slot name="prepend-outer"></slot></template>
+				<template #prepend><slot name="prepend"></slot></template>
+				<template #prefix><slot name="prefix"></slot></template>
+				<template #suffix><slot name="suffix"></slot></template>
+				<template #append><slot name="append"></slot></template>
+				<template #append-outer><slot name="append-outer"></slot></template>
+			</BaseDatePickerInput>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts">
+import BaseDatePickerInput from '../BaseDatePickerInput/BaseDatePickerInput.vue';
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import type { BaseDatePickerInputEvents } from '../BaseDatePickerInput/types';
+import { ref, computed } from 'vue';
+import type {
+	BbDatePickerInputProps,
+	BbDatePickerInputEvents,
+	BbDatePickerInputSlots,
+	DatePickerInputError,
+} from './types';
+export type {
+	BbDatePickerInputProps,
+	BbDatePickerInputEvents,
+	BbDatePickerInputSlots,
+};
+export type { DatePickerInputError } from './types';
+
+const props = withDefaults(defineProps<BbDatePickerInputProps>(), {
+	allowWriting: true,
+});
+
+const emit = defineEmits<BaseDatePickerInputEvents>();
+
+defineSlots<BbDatePickerInputSlots>();
+
+const active = ref(false);
+const showHint = computed(() => props.persistentHint || active.value);
+
+/**
+ * These events are just propagated
+ */
+const eventListeners = {
+	onError: (error: DatePickerInputError) => emit('error', error),
+	onFocus: (event: FocusEvent) => emit('focus', event),
+	onActive: () => {
+		active.value = true;
+		emit('active');
+	},
+	onInactive: () => {
+		active.value = false;
+		emit('inactive');
+	},
+	'onUpdate:modelValue': (value: BbDatePickerInputProps['modelValue']) =>
+		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 {
+	BaseDatePickerInputEvents,
+	DatePickerInputError,
+} from '../BaseDatePickerInput/types';
+
+export type { DatePickerInputError };
+
+export type BbDatePickerInputProps = {
+	/**
+	 * Allows typing into the input.
+	 *
+	 * @defaultValue `true`
+	 */
+	allowWriting?: boolean | 'not-mobile';
+
+	/**
+	 * 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;
+
+	/**
+	 * 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[];
+
+	/**
+	 * Defines the first day of the week with `0` meaning Sunday and `6` meaning Saturday.
+	 */
+	firstDayOfWeek?: 0 | 1 | 6 | 3 | 2 | 4 | 5;
+
+	/**
+	 * If true the date will have a format YYYY-MM-DD instead of the default ISO string.
+	 */
+	floating?: boolean;
+
+	/**
+	 * Define if the component should be in an error state.
+	 * It usually attaches a CSS class for styling purposes.
+	 */
+	hasErrors?: boolean;
+
+	/**
+	 * Hides the calendar trigger button and prevents the popover from opening.
+	 * Use `'not-mobile'` to hide on desktop and keep visible on mobile,
+	 * complementing `allowWriting: 'not-mobile'` for platform-specific interaction modes.
+	 */
+	hidePopover?: boolean | 'not-mobile';
+
+	/**
+	 * 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 selectable date in `YYYY-MM-DD` format.
+	 * Values outside the pattern throw during setup to surface configuration mistakes.
+	 */
+	max?: string;
+
+	/**
+	 * Minimum selectable date in `YYYY-MM-DD` format.
+	 * Values outside the pattern throw during setup to surface configuration mistakes.
+	 */
+	min?: string;
+
+	/**
+	 * Used by v-model. Can be null, a single string, or an array of strings based on whether a range or single date is needed.
+	 */
+	modelValue: string | 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;
+
+	/**
+	 * Selects a range of dates between two dates. It selects all of the days between start and end.
+	 */
+	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;
+
+	/**
+	 * Function that accepts a `string` object and returns a boolean. `false` meaning the date cannot be selected.
+	 */
+	selectable?: (date: string) => boolean;
+
+	/**
+	 * Width of the calendar.
+	 */
+	width?: number | string;
+};
+
+/** Re-export for consumers importing events type from BbDatePickerInput. */
+export type { BaseDatePickerInputEvents as BbDatePickerInputEvents };
+
+/** Props exposed by the `label` slot. */
+export type BbDatePickerInputLabelSlotProps = {
+	/** The `label` prop value. */
+	text: string;
+	/** Whether the input is in an error state. */
+	hasErrors: boolean;
+};
+
+export type BbDatePickerInputSlots = {
+	/**
+	 * Content rendered before the entire date picker control, outside the input chrome.
+	 */
+	'prepend-outer'?: (props: object) => any;
+	/**
+	 * Content rendered before the date fields, at the start of the inner container.
+	 */
+	prepend?: (props: object) => any;
+	/**
+	 * Inline content rendered at the start of the input field area, before the date fields.
+	 */
+	prefix?: (props: object) => any;
+	/**
+	 * Content rendered after the date fields, at the end of the inner container (before the calendar toggle button).
+	 */
+	append?: (props: object) => any;
+	/**
+	 * Content rendered after the entire date picker control, outside the input chrome.
+	 */
+	'append-outer'?: (props: object) => any;
+	/**
+	 * Inline content rendered at the end of the input field area, after the date fields.
+	 */
+	suffix?: (props: object) => any;
+	/**
+	 * Replaces the default label text rendered above the date picker.
+	 */
+	label?: (props: BbDatePickerInputLabelSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-date-picker-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-date-picker-input {
+				display: inline-flex;
+				&--disabled {
+				}
+				&--errors {
+				}
+				&--loading {
+				}
+				&--readonly {
+				}
+
+				.bb-common-input-inner-container {
+					> input {
+					}
+
+					&__prepend-icon,
+					&__append-icon {
+					}
+					.bb-spinner {
+					}
+					.bb-error-icon {
+					}
+					&__prefix,
+					&__suffix {
+					}
+				}
+			}
+		}
+
+		&__hint-container {
+			.bb-base-input-container__hint {
+			}
+		}
+		&__errors {
+		}
+		&__error {
+		}
+	}
+}
+```

package/dist/ai/BbDialog.md

@@ -0,0 +1,135 @@
+# BbDialog
+
+## Template & Script
+
+```vue
+<template>
+	<BaseDialog v-bind="props" v-model="model" v-on="dialogEventHandlers">
+		<template #close="data">
+			<slot name="close" v-bind="data" />
+		</template>
+		<template #default="data">
+			<slot name="default" v-bind="data" />
+		</template>
+		<template #description="data">
+			<slot name="description" v-bind="data" />
+		</template>
+		<template #footer="data">
+			<slot name="footer" v-bind="data" />
+		</template>
+		<template #header="data">
+			<slot name="header" v-bind="data" />
+		</template>
+		<template #title="data">
+			<slot name="title" v-bind="data" />
+		</template>
+	</BaseDialog>
+</template>
+
+<script setup lang="ts">
+import BaseDialog from '../BaseDialog/BaseDialog.vue';
+import type {
+	BaseDialogProps,
+	BaseDialogEvents,
+	BaseDialogSlots,
+} from '../BaseDialog/types';
+export type {
+	BbDialogProps,
+	BbDialogEvents,
+	BbDialogSlots,
+	Sizes,
+} from './types';
+
+const props = withDefaults(defineProps<BaseDialogProps>(), {
+	showClose: true,
+});
+
+const emit = defineEmits<BaseDialogEvents>();
+
+const dialogEventHandlers = {
+	hide: () => emit('hide'),
+	hidden: () => emit('hidden'),
+	show: () => emit('show'),
+	shown: () => emit('shown'),
+} as const;
+
+defineSlots<BaseDialogSlots>();
+
+const model = defineModel<boolean>({ default: false });
+</script>
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+export type {
+	BaseDialogProps as BbDialogProps,
+	BaseDialogEvents as BbDialogEvents,
+	BaseDialogSlots as BbDialogSlots,
+	Sizes,
+} from '../BaseDialog/types';
+```
+
+## Styles
+
+```css
+.bb-base-dialog {
+	&--transition-fade {
+		&.bb-base-dialog__overlay {
+		}
+		&.bb-base-dialog--opening {
+			&.bb-base-dialog__overlay {
+			}
+		}
+		&.bb-base-dialog--open {
+			&.bb-base-dialog__overlay {
+			}
+		}
+		&.bb-base-dialog--closing {
+			&.bb-base-dialog__overlay {
+			}
+		}
+		&.bb-base-dialog--closed {
+			&.bb-base-dialog__overlay {
+			}
+		}
+	}
+
+	&--closed {
+		&.bb-base-dialog__overlay {
+		}
+	}
+
+	&--fullscreen {
+		&.bb-base-dialog__overlay {
+		}
+
+		.bb-base-dialog__panel.bb-dialog {
+		}
+
+		.bb-base-dialog__content {
+		}
+	}
+
+	&--compact {
+		.bb-base-dialog__content {
+		}
+	}
+
+	&__overlay {
+	}
+	&__panel.bb-dialog {
+		.bb-base-dialog__content {
+			.bb-base-dialog__header {
+			}
+			.bb-base-dialog__body {
+			}
+			.bb-base-dialog__footer {
+			}
+		}
+	}
+}
+```