bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/ChipsBox.md

@@ -0,0 +1,211 @@
+# ChipsBox
+
+## Template & Script
+
+```vue
+<template>
+	<BbChip
+		v-for="(item, index) in options"
+		:key="item.valueHash"
+		:class="{
+			'bb-chipsbox-item': true,
+			'bb-chipsbox-item--focused': index === focusedIndex,
+		}"
+		:clearable="true"
+		:text="item.text"
+		@click:clear.stop="emit('option:unselected', item)"
+		>{{ item.text }}</BbChip
+	>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { hash } from '@/utilities/functions/hash';
+import { isNil } from '@/utilities/functions/isNil';
+import { ref } from 'vue';
+import { watch } from 'vue';
+import BbChip from '../BbChip/BbChip.vue';
+import type { Option } from '@/types/Option';
+import type { ChipsBoxProps, ChipsBoxEvents } from './types';
+export type { ChipsBoxProps, ChipsBoxEvents };
+
+const props = defineProps<ChipsBoxProps>();
+
+const emit = defineEmits<ChipsBoxEvents>();
+
+/**
+ * START FOCUS HANDLING
+ */
+
+const focusedIndex = ref<null | number>(null);
+
+const canFocus = computed(() => props.options.some((o) => !o.disabled));
+
+const findNextAvailableIndex = (offset = 1) => {
+	const initialValue = isNil(focusedIndex.value) ? -1 : focusedIndex.value!;
+	let newIndex = (initialValue + offset) % props.options.length;
+	while (props.options[newIndex].disabled && newIndex !== initialValue) {
+		newIndex = findNextAvailableIndex(offset + 1);
+	}
+	return newIndex;
+};
+
+const focusNext = () => {
+	if (!canFocus.value) return;
+	const newIndex = findNextAvailableIndex();
+	focusedIndex.value = newIndex;
+};
+const findPreviousAvailableIndex = (offset = 1) => {
+	const initialValue = isNil(focusedIndex.value) ? 0 : focusedIndex.value!;
+	let newIndex =
+		(initialValue - offset + props.options.length) % props.options.length;
+	while (props.options[newIndex].disabled && newIndex !== initialValue) {
+		newIndex = findPreviousAvailableIndex(offset + 1);
+	}
+	return newIndex;
+};
+const focusPrevious = async () => {
+	if (!canFocus.value) return;
+	const newIndex = findPreviousAvailableIndex();
+	focusedIndex.value = newIndex;
+};
+
+const focusFirst = () => {
+	if (!canFocus.value) return;
+	let newIndex = 0;
+	while (props.options[newIndex].disabled) {
+		newIndex++;
+	}
+	focusedIndex.value = newIndex;
+};
+
+const focusLast = () => {
+	if (!canFocus.value) return;
+	let newIndex = props.options.length - 1;
+	while (props.options[newIndex].disabled && newIndex !== 0) {
+		newIndex--;
+	}
+	focusedIndex.value = newIndex;
+};
+const focusFirstSelected = () => {
+	if (!canFocus.value) return;
+	let newIndex = 0;
+	while (
+		!props.options[newIndex].selected &&
+		props.options.length !== newIndex
+	) {
+		newIndex++;
+	}
+	focusedIndex.value = newIndex;
+};
+const focusLastSelected = () => {
+	if (!canFocus.value) return;
+	let newIndex = props.options.length - 1;
+	while (props.options[newIndex].selected && newIndex !== 0) {
+		newIndex--;
+	}
+	focusedIndex.value = newIndex;
+};
+
+const focusByHash = (hash: Option['valueHash']) => {
+	if (!canFocus.value) return;
+	const linkedOptionIndex = props.options.findIndex(
+		(o) => o.valueHash === hash
+	);
+	if (linkedOptionIndex >= 0) {
+		focusedIndex.value = linkedOptionIndex;
+	}
+};
+
+const blur = () => {
+	focusedIndex.value = null;
+};
+
+/**
+ * END FOCUS HANDLING
+ */
+
+const confirmOption = () => {
+	if (isNil(focusedIndex.value)) return;
+	const option = props.options[focusedIndex.value!];
+	if (option.selected) {
+		emit('option:unselected', option);
+	}
+};
+
+const getHighlighted = () => {
+	if (isNil(focusedIndex.value)) return;
+	const option = props.options[focusedIndex.value!];
+	return option;
+};
+
+watch(
+	() => props.options,
+	(value, previous) => {
+		if (hash(value) !== hash(previous)) {
+			blur();
+		}
+	},
+	{
+		flush: 'post',
+	}
+);
+
+defineExpose({
+	focusNext,
+	focusPrevious,
+	focusFirst,
+	focusFirstSelected,
+	focusLast,
+	focusLastSelected,
+	blur,
+	confirmOption,
+	focusByHash,
+	getHighlighted,
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { Option } from '@/types/Option';
+
+export type ChipsBoxProps = {
+	/**
+	 * List of options to render as chips.
+	 */
+	options: Option[];
+};
+
+export type ChipsBoxEvents = {
+	/**
+	 * Emitted when the user clears (removes) an option chip.
+	 * @param option - The option that was unselected.
+	 */
+	(e: 'option:unselected', option: Option): void;
+};
+```
+
+## Styles
+
+```css
+.bb-chipsbox-item {
+	&--focused {
+		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);
+		}
+	}
+}
+```

package/dist/ai/ClearableButton.md

@@ -0,0 +1,67 @@
+# ClearableButton
+
+## Template & Script
+
+```vue
+<template>
+	<button
+		:aria-label="t('common.clearLabel').value"
+		class="bb-clearable-button"
+		type="button"
+	>
+		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M12 12l7 7M12 12l-7 -7M12 12l-7 7M12 12l7 -7"
+				fill="none"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+			></path>
+		</svg>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { useLocale } from '@/composables/useLocale';
+import type {
+	ClearableButtonProps,
+	ClearableButtonEvents,
+	ClearableButtonSlots,
+} from './types';
+export type {
+	ClearableButtonProps,
+	ClearableButtonEvents,
+	ClearableButtonSlots,
+};
+
+const { t } = useLocale();
+</script>
+
+<style lang="postcss">
+.bb-clearable-button {
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+	box-shadow: 0px 0px 0px 0px var(--ring-color);
+	transition-property:
+		color, background-color, border-color, text-decoration-color, box-shadow;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 150ms;
+	border-radius: var(--bb-radius);
+
+	&:focus-visible {
+		box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
+	}
+}
+</style>
+```
+
+## Types
+
+```ts
+export type ClearableButtonProps = Record<never, never>;
+
+export type ClearableButtonEvents = Record<never, never>;
+
+export type ClearableButtonSlots = Record<never, never>;
+```

package/dist/ai/CommaBox.md

@@ -0,0 +1,212 @@
+# CommaBox
+
+## Template & Script
+
+```vue
+<template>
+	<span
+		v-for="(item, index) in options"
+		:key="item.valueHash"
+		:class="{
+			'bb-commabox-item': true,
+			'bb-commabox-item--focused': index === focusedIndex,
+			'bb-commabox-item--has-comma': index !== options.length - 1,
+		}"
+		:clearable="true"
+		:text="item.text"
+		@click:clear.stop="emit('option:unselected', item)"
+		>{{ item.text }}</span
+	>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { hash } from '@/utilities/functions/hash';
+import { isNil } from '@/utilities/functions/isNil';
+import { ref } from 'vue';
+import { watch } from 'vue';
+import type { Option } from '@/types/Option';
+import type { CommaBoxProps, CommaBoxEvents } from './types';
+export type { CommaBoxProps, CommaBoxEvents };
+
+const props = defineProps<CommaBoxProps>();
+
+const emit = defineEmits<CommaBoxEvents>();
+
+/**
+ * START FOCUS HANDLING
+ */
+
+const focusedIndex = ref<null | number>(null);
+
+const canFocus = computed(() => props.options.some((o) => !o.disabled));
+
+const findNextAvailableIndex = (offset = 1) => {
+	const initialValue = isNil(focusedIndex.value) ? -1 : focusedIndex.value!;
+	let newIndex = (initialValue + offset) % props.options.length;
+	while (props.options[newIndex].disabled && newIndex !== initialValue) {
+		newIndex = findNextAvailableIndex(offset + 1);
+	}
+	return newIndex;
+};
+
+const focusNext = () => {
+	if (!canFocus.value) return;
+	const newIndex = findNextAvailableIndex();
+	focusedIndex.value = newIndex;
+};
+const findPreviousAvailableIndex = (offset = 1) => {
+	const initialValue = isNil(focusedIndex.value) ? 0 : focusedIndex.value!;
+	let newIndex =
+		(initialValue - offset + props.options.length) % props.options.length;
+	while (props.options[newIndex].disabled && newIndex !== initialValue) {
+		newIndex = findPreviousAvailableIndex(offset + 1);
+	}
+	return newIndex;
+};
+const focusPrevious = async () => {
+	if (!canFocus.value) return;
+	const newIndex = findPreviousAvailableIndex();
+	focusedIndex.value = newIndex;
+};
+
+const focusFirst = () => {
+	if (!canFocus.value) return;
+	let newIndex = 0;
+	while (props.options[newIndex].disabled) {
+		newIndex++;
+	}
+	focusedIndex.value = newIndex;
+};
+
+const focusLast = () => {
+	if (!canFocus.value) return;
+	let newIndex = props.options.length - 1;
+	while (props.options[newIndex].disabled && newIndex !== 0) {
+		newIndex--;
+	}
+	focusedIndex.value = newIndex;
+};
+const focusFirstSelected = () => {
+	if (!canFocus.value) return;
+	let newIndex = 0;
+	while (
+		!props.options[newIndex].selected &&
+		props.options.length !== newIndex
+	) {
+		newIndex++;
+	}
+	focusedIndex.value = newIndex;
+};
+const focusLastSelected = () => {
+	if (!canFocus.value) return;
+	let newIndex = props.options.length - 1;
+	while (props.options[newIndex].selected && newIndex !== 0) {
+		newIndex--;
+	}
+	focusedIndex.value = newIndex;
+};
+
+const focusByHash = (hash: Option['valueHash']) => {
+	if (!canFocus.value) return;
+	const linkedOptionIndex = props.options.findIndex(
+		(o) => o.valueHash === hash
+	);
+	if (linkedOptionIndex >= 0) {
+		focusedIndex.value = linkedOptionIndex;
+	}
+};
+
+const blur = () => {
+	focusedIndex.value = null;
+};
+
+/**
+ * END FOCUS HANDLING
+ */
+
+const confirmOption = () => {
+	if (isNil(focusedIndex.value)) return;
+	const option = props.options[focusedIndex.value!];
+	if (option.selected) {
+		emit('option:unselected', option);
+	}
+};
+
+const getHighlighted = () => {
+	if (isNil(focusedIndex.value)) return;
+	const option = props.options[focusedIndex.value!];
+	return option;
+};
+
+watch(
+	() => props.options,
+	(value, previous) => {
+		if (hash(value) !== hash(previous)) {
+			blur();
+		}
+	},
+	{
+		flush: 'post',
+	}
+);
+
+defineExpose({
+	focusNext,
+	focusPrevious,
+	focusFirst,
+	focusFirstSelected,
+	focusLast,
+	focusLastSelected,
+	blur,
+	confirmOption,
+	focusByHash,
+	getHighlighted,
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { Option } from '@/types/Option';
+
+export type CommaBoxProps = {
+	/**
+	 * List of options to render as comma-separated text items.
+	 */
+	options: Option[];
+};
+
+export type CommaBoxEvents = {
+	/**
+	 * Emitted when the user removes an option.
+	 * @param option - The option that was unselected.
+	 */
+	(e: 'option:unselected', option: Option): void;
+};
+```
+
+## Styles
+
+```css
+.bb-commabox-item {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	&--has-comma {
+		&::after {
+			content: ',';
+		}
+	}
+
+	&--focused {
+		color: var(--bb-primary);
+	}
+}
+```