bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/CommonInputInnerContainer.md

@@ -0,0 +1,419 @@
+# CommonInputInnerContainer
+
+## Template & Script
+
+```vue
+<template>
+	<span
+		ref="container"
+		class="bb-common-input-inner-container"
+		:class="{
+			'bb-common-input-inner-container--clearable': props.clearable,
+		}"
+		@click="focusOnInput"
+	>
+		<slot name="prepend">
+			<span class="bb-common-input-inner-container__prefix">
+				<slot name="prefix"></slot>
+			</span>
+		</slot>
+		<BbIcon
+			v-if="$props['prepend:icon']"
+			class="bb-common-input-inner-container__prepend-icon"
+			:type="$props['prepend:icon']"
+		/>
+		<slot />
+		<ClearableButton
+			:aria-hidden="!clearable"
+			:tabindex="clearable ? 0 : -1"
+			@click="onClickClear"
+		/>
+		<BbIcon
+			v-if="$props['append:icon']"
+			class="bb-common-input-inner-container__append-icon"
+			:type="$props['append:icon']"
+		/>
+		<ErrorIcon />
+		<BbSpinner />
+		<slot name="append">
+			<span class="bb-common-input-inner-container__suffix">
+				<slot name="suffix"></slot>
+			</span>
+		</slot>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { BbIcon, BbSpinner } from '@/index';
+import { ref } from 'vue';
+import ErrorIcon from '../ErrorIcon/ErrorIcon.vue';
+import ClearableButton from '../ClearableButton/ClearableButton.vue';
+
+import type {
+	CommonInputInnerContainerProps,
+	CommonInputInnerContainerEvents,
+	CommonInputInnerContainerSlots,
+} from './types';
+export type {
+	CommonInputInnerContainerProps,
+	CommonInputInnerContainerEvents,
+	CommonInputInnerContainerSlots,
+};
+
+const props = defineProps<CommonInputInnerContainerProps>();
+
+const emit = defineEmits<CommonInputInnerContainerEvents>();
+
+defineSlots<CommonInputInnerContainerSlots>();
+
+const container = ref<HTMLElement>();
+
+const getInputElement = (): HTMLInputElement | HTMLTextAreaElement | null => {
+	return (
+		container.value?.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+			'input,textarea'
+		) ?? null
+	);
+};
+
+const focusOnInput = (e: MouseEvent) => {
+	if (!container.value || props.preventFocus) return;
+	const target = e.target as HTMLElement;
+	if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+		return;
+	}
+	getInputElement()?.focus();
+};
+
+const onClickClear = () => {
+	emit('click:clear');
+	getInputElement()?.focus();
+};
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { IconType } from '@/types/Icon';
+
+export type CommonInputInnerContainerProps = {
+	/**
+	 * Name of the icon to be added at the end of the input.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'append:icon'?: IconType;
+
+	/**
+	 * Whether the input is clearable.
+	 */
+	clearable?: boolean;
+
+	/**
+	 * Name of the icon to be added at the start of the input.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'prepend:icon'?: IconType;
+
+	/**
+	 * Prevents the container from focusing the inner input on click.
+	 */
+	preventFocus?: boolean;
+};
+
+export type CommonInputInnerContainerEvents = {
+	/**
+	 * Emitted when the clear button is clicked.
+	 */
+	(e: 'click:clear'): void;
+};
+
+export type CommonInputInnerContainerSlots = {
+	/**
+	 * Wraps the leading prefix area. Renders a `<span>` containing the `prefix` sub-slot by default.
+	 */
+	prepend?: (props: object) => any;
+	/**
+	 * Content rendered as an inline text prefix inside the prepend span.
+	 */
+	prefix?: (props: object) => any;
+	/**
+	 * The main input element (e.g. `<input>` or `<textarea>`).
+	 */
+	default?: (props: object) => any;
+	/**
+	 * Wraps the trailing suffix area. Renders a `<span>` containing the `suffix` sub-slot by default.
+	 */
+	append?: (props: object) => any;
+	/**
+	 * Content rendered as an inline text suffix inside the append span.
+	 */
+	suffix?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-common-input-inner-container {
+	--ring-color: color-mix(
+		in srgb,
+		var(--bb-primary),
+		transparent calc(100% - var(--bb-ring-opacity) * 100%)
+	);
+	align-items: center;
+	background-color: var(--bb-panel);
+	border: 1px solid var(--bb-border);
+	border-radius: var(--bb-radius);
+	box-shadow: 0px 0px 0px 0px var(--bb-ring);
+
+	display: inline-flex;
+	flex: 1 1 auto;
+	gap: 0 var(--bb-input-spacing);
+	min-height: var(--bb-input-h);
+	overflow: clip;
+	padding-left: var(--bb-input-px);
+	padding-right: var(--bb-input-px);
+	transition: all 0.3s ease;
+
+	&.bb-common-input-inner-container--clearable {
+		&:focus-within,
+		&:hover {
+			.bb-clearable-button {
+				opacity: 1;
+				scale: 1;
+				margin-left: 0px;
+			}
+		}
+	}
+
+	&:focus-within,
+	&:has(*:active:not(:disabled)) {
+		border-color: var(--bb-primary);
+		box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
+	}
+
+	input,
+	textarea {
+		background-color: transparent;
+		color: var(--bb-input-color);
+		flex: 1 1 auto;
+		font-size: var(--bb-input-font-size);
+		isolation: isolate;
+		margin-bottom: var(--bb-input-py);
+		margin-top: var(--bb-input-py);
+		min-width: 50px;
+		outline: none;
+
+		&::placeholder {
+			color: color-mix(in srgb, var(--bb-input-color), transparent 45%);
+		}
+
+		&:-webkit-autofill,
+		&:-webkit-autofill:hover,
+		&:-webkit-autofill:focus,
+		&:-webkit-autofill:active {
+			transition:
+				background-color 0s 600000s,
+				color 0s 600000s !important;
+		}
+
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+
+	.bb-clearable-button {
+		color: var(--bb-icon-color);
+		flex-shrink: 0;
+		isolation: isolate;
+		opacity: 0;
+		scale: 0;
+		position: relative;
+		transition:
+			color 0.3s,
+			scale 0.3s,
+			margin-left 0.3s,
+			opacity 0.3s;
+		width: var(--bb-input-icon) !important;
+		z-index: 1;
+		margin-left: calc((var(--bb-input-spacing) + var(--bb-input-icon)) * -1);
+	}
+
+	.bb-common-input-inner-container__prepend-icon,
+	.bb-common-input-inner-container__append-icon {
+		color: var(--bb-icon-color);
+		flex-shrink: 0;
+		width: var(--bb-input-icon) !important;
+	}
+
+	.bb-common-input-inner-container__append-icon {
+		margin-right: calc((var(--bb-input-spacing) + var(--bb-input-icon)) * -1);
+		transition:
+			color 0.3s,
+			margin-left 0.3s,
+			opacity 0.3s;
+
+		& ~ .bb-spinner {
+			margin-right: 0px;
+		}
+	}
+
+	> .bb-spinner {
+		color: var(--bb-icon-color);
+		flex-shrink: 0;
+		transition:
+			color 0.3s,
+			margin-left 0.3s,
+			opacity 0.3s;
+		opacity: 0;
+		width: var(--bb-input-icon) !important;
+		margin-right: calc((var(--bb-input-spacing) + var(--bb-input-icon)) * -1);
+
+		& ~ * {
+			isolation: isolate;
+		}
+	}
+
+	.bb-error-icon {
+		flex-shrink: 0;
+		transition:
+			color 0.3s,
+			opacity 0.3s,
+			margin-right 0s 0.3s;
+		width: var(--bb-input-icon) !important;
+		opacity: 0;
+		margin-right: calc((var(--bb-input-spacing) + var(--bb-input-icon)) * -1);
+	}
+
+	.bb-common-input-inner-container__prefix,
+	.bb-common-input-inner-container__suffix {
+		--prefix-color: color-mix(in srgb, var(--bb-panel) 50%, var(--bb-text));
+		background-color: color-mix(in srgb, var(--prefix-color), transparent 70%);
+		color: var(--prefix-color);
+		display: inline-grid;
+		font-size: var(--bb-input-prefix);
+		height: 100%;
+		min-width: var(--bb-input-prefix-w);
+		padding-left: var(--bb-input-prefix-px);
+		padding-right: var(--bb-input-prefix-px);
+		place-items: center;
+		transition: color 0.3s;
+		&:empty {
+			display: none;
+		}
+	}
+
+	.bb-common-input-inner-container__prefix {
+		margin-left: calc(var(--bb-input-px) * -1);
+	}
+
+	.bb-common-input-inner-container__suffix {
+		margin-right: calc(var(--bb-input-px) * -1);
+	}
+}
+
+[class*='--compact'] > .bb-common-input-inner-container,
+[class*='--compact']
+	> [class*='inner-wrapper']
+	> .bb-common-input-inner-container {
+	--bb-input-h: var(--bb-input-compact-h);
+	--bb-input-py: var(--bb-input-compact-py);
+
+	input,
+	textarea {
+		line-height: initial;
+	}
+}
+
+[class*='--active'] > .bb-common-input-inner-container,
+[class*='--active']
+	> [class*='inner-wrapper']
+	> .bb-common-input-inner-container {
+	border-color: var(--bb-primary);
+	box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
+
+	&.bb-common-input-inner-container--clearable {
+		.bb-common-input-inner-container__append-icon,
+		.bb-error-icon {
+		}
+		.bb-clearable-button {
+		}
+	}
+}
+[class*='--disabled'] > .bb-common-input-inner-container,
+[class*='--disabled']
+	> [class*='inner-wrapper']
+	> .bb-common-input-inner-container {
+	background-color: var(--bb-panel-disabled);
+
+	input,
+	textarea {
+		color: color-mix(in srgb, transparent 40%, var(--bb-text));
+	}
+}
+
+[class*='--errors'] > .bb-common-input-inner-container,
+[class*='--errors']
+	> [class*='inner-wrapper']
+	> .bb-common-input-inner-container {
+	--ring-color: color-mix(
+		in srgb,
+		var(--bb-danger),
+		transparent calc(100% - var(--bb-ring-opacity) * 100%)
+	);
+	border-color: var(--bb-danger);
+
+	&:focus-within,
+	&:has(*:active:not(:disabled)) {
+		border-color: var(--bb-danger);
+	}
+
+	> .bb-error-icon {
+		opacity: 1;
+		transition:
+			color 0.3s,
+			opacity 0.3s;
+	}
+	> .bb-spinner {
+		margin-right: 0px;
+	}
+
+	> .bb-common-input-inner-container__append-icon {
+		opacity: 0;
+	}
+}
+
+[class*='--loading'] > .bb-common-input-inner-container,
+[class*='--loading']
+	> [class*='inner-wrapper']
+	> .bb-common-input-inner-container {
+	&.bb-common-input-inner-container--clearable {
+		&:focus-within {
+			.bb-clearable-button {
+			}
+		}
+	}
+
+	> .bb-common-input-inner-container__append-icon {
+		opacity: 0;
+	}
+	> .bb-error-icon {
+		opacity: 0;
+		transition:
+			color 0.3s,
+			opacity 0.3s,
+			margin-left 0s 0s;
+	}
+	> .bb-spinner {
+		opacity: 1;
+		margin-right: 0px;
+	}
+}
+```

package/dist/ai/CommonInputOuterContainer.md

@@ -0,0 +1,56 @@
+# CommonInputOuterContainer
+
+## Template & Script
+
+```vue
+<template>
+	<span class="bb-common-input-outer-container">
+		<slot name="prepend-outer" />
+		<slot />
+		<slot name="append-outer" />
+	</span>
+</template>
+
+<script setup lang="ts">
+import type { CommonInputOuterContainerSlots } from './types';
+export type { CommonInputOuterContainerSlots };
+
+defineSlots<CommonInputOuterContainerSlots>();
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+export type CommonInputOuterContainerProps = Record<never, never>;
+
+export type CommonInputOuterContainerEvents = Record<never, never>;
+
+export type CommonInputOuterContainerSlots = {
+	/**
+	 * Content prepended outside the inner input container.
+	 */
+	'prepend-outer'?: (props: object) => any;
+	/**
+	 * The inner input container (default slot content).
+	 */
+	default?: (props: object) => any;
+	/**
+	 * Content appended outside the inner input container.
+	 */
+	'append-outer'?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-common-input-outer-container {
+	align-items: center;
+	display: inline-flex;
+}
+```