bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbSwitch.md

@@ -0,0 +1,151 @@
+# BbSwitch
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-switch"
+		:direction="direction"
+		:errors="errors"
+		:has-errors="hasErrors"
+		:hide-label="hideLabel"
+		:hint="hint"
+		:input-position="inputPosition"
+		:label="label"
+		:label-position="labelPosition"
+		:label-tag="'span'"
+		:name="name"
+		:reverse="reverse"
+		:show-hint="showHint"
+		:tag="'label'"
+	>
+		<template #label="data"><slot name="label" v-bind="data"></slot></template>
+		<template #input="{ id, hasErrors, ariaDescribedby }">
+			<BaseSwitch
+				:id="id"
+				:aria-describedby="ariaDescribedby"
+				:autofocus="autofocus"
+				:checked="checked"
+				:color="color"
+				:disabled="disabled"
+				:false-value="falseValue"
+				:has-errors="hasErrors"
+				:indeterminate="indeterminate"
+				:model-value="modelValue"
+				:name="name"
+				:readonly="readonly"
+				:required="required"
+				:submit-when-false="submitWhenFalse"
+				:true-value="trueValue"
+				v-bind="eventListeners"
+			>
+				<template #icon="data"
+					><slot name="icon" v-bind="data" :text="label"
+				/></template>
+			</BaseSwitch>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts">
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import BaseSwitch from '../BaseSwitch/BaseSwitch.vue';
+import { computed, ref } from 'vue';
+import type { BbSwitchProps, BbSwitchEvents, BbSwitchSlots } from './types';
+export type { BbSwitchProps, BbSwitchEvents, BbSwitchSlots };
+
+const props = withDefaults(defineProps<BbSwitchProps>(), {
+	direction: 'auto',
+	reverse: true,
+});
+
+const emit = defineEmits<BbSwitchEvents>();
+
+defineSlots<BbSwitchSlots>();
+
+const active = ref(false);
+const showHint = computed(() => props.persistentHint || active.value);
+
+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: any) => emit('update:modelValue', value),
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { BaseCheckboxIconSlotProps } from '../BaseCheckbox/types';
+import type { BbCheckboxEvents, BbCheckboxProps } from '../BbCheckbox/types';
+
+/** Re-export of BbCheckboxProps for the switch variant. */
+export type BbSwitchProps = BbCheckboxProps;
+
+/** Re-export for consumers importing events type from BbSwitch. */
+export type BbSwitchEvents = BbCheckboxEvents;
+
+/** Props exposed by the `label` slot. */
+export type BbSwitchLabelSlotProps = {
+	/** The `label` prop value. */
+	text: string;
+	/** Whether the switch is in an error state. */
+	hasErrors: boolean;
+};
+
+/** Props exposed by the `icon` slot. Extends BaseSwitch icon slot with the label text. */
+export type BbSwitchIconSlotProps = BaseCheckboxIconSlotProps & {
+	/** The `label` prop value. */
+	text: string;
+};
+
+export type BbSwitchSlots = {
+	/**
+	 * Replaces the default label text rendered next to the switch.
+	 */
+	label?: (props: BbSwitchLabelSlotProps) => any;
+	/**
+	 * Replaces the default toggle track visual inside the switch. Receives `BaseSwitch` slot
+	 * attributes plus the label text.
+	 */
+	icon?: (props: BbSwitchIconSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-switch {
+	.bb-base-input-container {
+		cursor: pointer;
+
+		&--horizontal {
+			align-items: center;
+			display: flex;
+		}
+
+		.bb-base-input-container__input {
+			margin-bottom: -7px;
+		}
+	}
+}
+```

package/dist/ai/BbSwitchGroup.md

@@ -0,0 +1,237 @@
+# BbSwitchGroup
+
+## Template & Script
+
+```vue
+<template>
+	<BaseInputContainer
+		:id="id"
+		class="bb-switch-group"
+		:compact="compact"
+		:direction="direction"
+		:errors="errors"
+		:has-errors="hasErrors"
+		:hide-label="hideLegend"
+		:hint="hint"
+		:input-position="inputPosition"
+		:label="legend"
+		:label-position="labelPosition"
+		:label-tag="'legend'"
+		:name="name"
+		:reverse="reverse"
+		:show-hint="showHint"
+		:tag="'fieldset'"
+	>
+		<template #label="data"><slot name="legend" v-bind="data"></slot></template>
+		<template #input="{ id, hasErrors, ariaDescribedby }">
+			<BaseSwitchGroup
+				:id="id"
+				:aria-describedby="ariaDescribedby"
+				:autofocus="autofocus"
+				:color="color"
+				:dependencies="dependencies"
+				:deps-debounce-time="depsDebounceTime"
+				:direction="inputDirection"
+				:disabled="disabled"
+				:enforce-coherence="enforceCoherence"
+				:has-errors="hasErrors"
+				:hide-label="hideLabel"
+				:item-text="<any>itemText"
+				:item-value="<any>itemValue"
+				:items="items"
+				:loading-text="loadingText"
+				:max="max"
+				:model-value="modelValue"
+				:model-value-debounce-time="modelValueDebounceTime"
+				:name="name"
+				:no-data-text="noDataText"
+				:readonly="readonly"
+				v-bind="eventListeners"
+			>
+				<template #prepend="data"
+					><slot name="prepend" v-bind="data"></slot></template
+				><template #loading="data"
+					><slot name="loading" v-bind="data"></slot></template
+				><template #no-data="data"
+					><slot name="no-data" v-bind="data"></slot></template
+				><template #option:prepend="data"
+					><slot name="option:prepend" v-bind="data"></slot></template
+				><template #icon="data"
+					><slot name="icon" v-bind="data"></slot></template
+				><template #label="data"
+					><slot name="label" v-bind="data"></slot></template
+				><template #option:append="data"
+					><slot name="option:append" v-bind="data"></slot></template
+				><template #append="data"
+					><slot name="append" v-bind="data"></slot
+				></template>
+			</BaseSwitchGroup>
+		</template>
+	</BaseInputContainer>
+</template>
+
+<script setup lang="ts" generic="T = any">
+import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
+import BaseSwitchGroup from '../BaseSwitchGroup/BaseSwitchGroup.vue';
+import { computed, ref } from 'vue';
+import type {
+	BbSwitchGroupProps,
+	BbSwitchGroupEvents,
+	BbSwitchGroupSlots,
+} from './types';
+export type { BbSwitchGroupProps, BbSwitchGroupEvents, BbSwitchGroupSlots };
+
+const props = withDefaults(defineProps<BbSwitchGroupProps<T>>(), {
+	inputPosition: 'left',
+});
+
+const emit = defineEmits<BbSwitchGroupEvents>();
+
+defineSlots<BbSwitchGroupSlots<T>>();
+
+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),
+	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),
+	onMousedown: (event: MouseEvent) => emit('mousedown', event),
+	onMouseup: (event: MouseEvent) => emit('mouseup', event),
+	'onUpdate:modelValue': (event: any) => emit('update:modelValue', event),
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { BaseCheckboxIconSlotProps } from '../BaseCheckbox/types';
+import type {
+	BbCheckboxGroupEvents,
+	BbCheckboxGroupProps,
+} from '../BbCheckboxGroup/types';
+
+/** Re-export of BbCheckboxGroupProps for the switch-group variant. */
+export type BbSwitchGroupProps<T = any> = BbCheckboxGroupProps<T>;
+
+/** Re-export for consumers importing events type from BbSwitchGroup. */
+export type BbSwitchGroupEvents = BbCheckboxGroupEvents;
+
+/** Props exposed by the `legend` slot. */
+export type BbSwitchGroupLegendSlotProps = {
+	/** The `legend` prop value. */
+	text: string;
+	/** Whether the group is in an error state. */
+	hasErrors: boolean;
+};
+
+/** Props exposed by the `option:prepend` and `option:append` slots. */
+export type BbSwitchGroupOptionAffixSlotProps<T> = {
+	/** Whether this option is currently selected. */
+	checked: boolean;
+	/** Whether this option is currently disabled. */
+	disabled: boolean;
+	/** Generated id for the underlying switch input, when available. */
+	id?: string;
+	/** Original source item for this option. */
+	item: T;
+	/** Resolved display text for this option. */
+	text: string;
+};
+
+/** Props exposed by the `icon` slot. Extends BaseCheckbox icon slot with item and label text. */
+export type BbSwitchGroupIconSlotProps<T> = BaseCheckboxIconSlotProps & {
+	/** Original source item for this option. */
+	item: T;
+	/** Resolved display text for this option. */
+	text: string;
+};
+
+/** Props exposed by the `label` slot for each option. */
+export type BbSwitchGroupLabelSlotProps<T> = {
+	/** Original source item for this option. */
+	item: T;
+	/** Resolved display text for this option. */
+	text: string;
+	/** Whether this option is currently selected. */
+	checked: boolean;
+};
+
+export type BbSwitchGroupSlots<T> = {
+	/**
+	 * Content rendered before the first option, inside the options container.
+	 */
+	prepend?: (props: object) => any;
+	/**
+	 * Content shown while options are loading (replaces the default loading text).
+	 */
+	loading?: (props: object) => any;
+	/**
+	 * Content shown when no options are available (replaces the default "no data" text).
+	 */
+	'no-data'?: (props: object) => any;
+	/**
+	 * Content rendered before each option's switch.
+	 */
+	'option:prepend'?: (props: BbSwitchGroupOptionAffixSlotProps<T>) => any;
+	/**
+	 * Replaces the default switch track visual for each option. Receives all `BaseSwitch` slot
+	 * attributes plus the source item and its display text.
+	 */
+	icon?: (props: BbSwitchGroupIconSlotProps<T>) => any;
+	/**
+	 * Replaces the default label text for each option.
+	 */
+	label?: (props: BbSwitchGroupLabelSlotProps<T>) => any;
+	/**
+	 * Content rendered after each option's switch and label.
+	 */
+	'option:append'?: (props: BbSwitchGroupOptionAffixSlotProps<T>) => any;
+	/**
+	 * Content rendered after the last option, inside the options container.
+	 */
+	append?: (props: object) => any;
+	/**
+	 * Replaces the default fieldset legend text for the group.
+	 */
+	legend?: (props: BbSwitchGroupLegendSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-switch-group {
+	.bb-base-input-container--horizontal {
+		.bb-base-input-container__label {
+			float: left;
+		}
+	}
+
+	.bb-base-input-container__input--right {
+		.bb-cr-container__container {
+			justify-content: flex-end;
+		}
+	}
+	.bb-base-input-container__input--center {
+		.bb-cr-container__container {
+			justify-content: center;
+		}
+	}
+}
+```