bitboss-ui 3.0.0-beta.63 → 3.0.0-beta.65

package/dist/components/BbTextarea/BbTextarea.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,19 @@
 import { isNotEmpty as e } from "../../utilities/functions/isNotEmpty.js";
-import { TEXT_CONTROL_NATIVE_ATTRS as t, formControlPtActive as n, usePassthrough as r } from "../../composables/usePassthrough.js";
-import { useConfig as i } from "../../composables/useConfig.js";
-import { removedPropsFor as a } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as o } from "../../utilities/functions/warnRemovedAttrs.js";
+import { TEXT_CONTROL_NATIVE_ATTRS as t, formControlPtActive as n, usePassthrough as r, variantPt as i } from "../../composables/usePassthrough.js";
+import { useConfig as a } from "../../composables/useConfig.js";
+import { removedPropsFor as o } from "../../deprecation/removedProps.js";
+import { warnRemovedAttrs as ee } from "../../utilities/functions/warnRemovedAttrs.js";
 import s from "../BbSmoothHeight/BbSmoothHeight.vue.js";
 import { vAutofocus as c } from "../../utilities/misc/autofocus.js";
-import ee from "../CommonField/CommonField.vue.js";
+import l from "../CommonField/CommonField.vue.js";
 import { useFormBinding as te } from "../../composables/useFormBinding.js";
-import l from "../CommonFieldInput/CommonFieldInput.vue.js";
-import { useCharacterCounter as u } from "../../composables/useCharacterCounter.js";
-import { BB_TEXTAREA_PT as d } from "./types.js";
-import { computed as f, createBlock as p, createElementVNode as ne, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeProps as x, onMounted as re, openBlock as S, ref as C, renderSlot as w, unref as T, useAttrs as E, watch as D, withCtx as O, withDirectives as k } from "vue";
-import { useResizeObserver as ie } from "@vueuse/core";
+import ne from "../CommonFieldInput/CommonFieldInput.vue.js";
+import { useCharacterCounter as re } from "../../composables/useCharacterCounter.js";
+import { BB_TEXTAREA_PT as u } from "./types.js";
+import { computed as d, createBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeProps as x, onMounted as S, openBlock as C, ref as w, renderSlot as T, unref as E, useAttrs as D, watch as O, withCtx as k, withDirectives as ie } from "vue";
+import { useResizeObserver as ae } from "@vueuse/core";
 //#region src/components/BbTextarea/BbTextarea.vue?vue&type=script&setup=true&lang.ts
-var ae = [
+var oe = [
 	"id",
 	"aria-describedby",
 	"aria-disabled",
@@ -31,6 +31,7 @@ var ae = [
 	"rows",
 	"value"
 ], A = /*@__PURE__*/ g({
+	mixins: [i(u)],
 	inheritAttrs: !1,
 	__name: "BbTextarea",
 	props: {
@@ -151,6 +152,42 @@ var ae = [
 		"pt:counter:hasValue": {},
 		"pt:counter:nearLimit": {},
 		"pt:counter:atLimit": {},
+		"pt:root:outline": {},
+		"pt:root:secondary": {},
+		"pt:root:ghost": {},
+		"pt:label:outline": {},
+		"pt:label:secondary": {},
+		"pt:label:ghost": {},
+		"pt:description:outline": {},
+		"pt:description:secondary": {},
+		"pt:description:ghost": {},
+		"pt:message:outline": {},
+		"pt:message:secondary": {},
+		"pt:message:ghost": {},
+		"pt:hint:outline": {},
+		"pt:hint:secondary": {},
+		"pt:hint:ghost": {},
+		"pt:box:outline": {},
+		"pt:box:secondary": {},
+		"pt:box:ghost": {},
+		"pt:input:outline": {},
+		"pt:input:secondary": {},
+		"pt:input:ghost": {},
+		"pt:icon:outline": {},
+		"pt:icon:secondary": {},
+		"pt:icon:ghost": {},
+		"pt:spinner:outline": {},
+		"pt:spinner:secondary": {},
+		"pt:spinner:ghost": {},
+		"pt:prefix:outline": {},
+		"pt:prefix:secondary": {},
+		"pt:prefix:ghost": {},
+		"pt:suffix:outline": {},
+		"pt:suffix:secondary": {},
+		"pt:suffix:ghost": {},
+		"pt:clear:outline": {},
+		"pt:clear:secondary": {},
+		"pt:clear:ghost": {},
 		pt: {},
 		"append:icon": {},
 		autocomplete: {},
@@ -206,178 +243,182 @@ var ae = [
 		"compositionend",
 		"update:modelValue"
 	],
-	setup(g, { emit: A }) {
-		let j = g, { props: M, emit: N, showAsterisk: P, errors: F, required: I, ariaRequired: L, readonly: R } = te(j, A, {
+	setup(i, { emit: g }) {
+		let A = i, { props: j, emit: M, showAsterisk: N, errors: P, required: F, ariaRequired: I, readonly: L } = te(A, g, {
 			componentName: "BbTextarea",
-			identifierFallback: () => j.label,
+			identifierFallback: () => A.label,
 			leaveOn: "blur"
 		});
-		process.env.NODE_ENV !== "production" && o("BbTextarea", a("BbTextarea"));
-		let z = i(), B = () => (j.nullValue ?? z.formControls?.textareaNullValue) === "string" ? "" : null, V = C(!1), H = f(() => M.persistentHint || V.value), U = f(() => e(M.modelValue)), W = f(() => !!M.clearable && U.value), G = f(() => M.labelMode ?? z.defaultInputLabelMode), K = E(), q = u({
-			enabled: () => !!M.counter,
-			value: () => M.modelValue,
-			maxlength: () => K.maxlength ?? K.maxLength
-		}), J = r({
+		process.env.NODE_ENV !== "production" && ee("BbTextarea", o("BbTextarea"));
+		let R = a(), z = () => (A.nullValue ?? R.formControls?.textareaNullValue) === "string" ? "" : null, B = w(!1), V = d(() => j.persistentHint || B.value), H = d(() => e(j.modelValue)), U = d(() => !!j.clearable && H.value), W = d(() => j.labelMode ?? R.defaultInputLabelMode), G = D(), K = re({
+			enabled: () => !!j.counter,
+			value: () => j.modelValue,
+			maxlength: () => G.maxlength ?? G.maxLength
+		}), q = r({
 			component: "BbTextarea",
-			attrs: E(),
+			attrs: D(),
 			controlAttrs: t,
-			props: M,
-			parts: d.parts,
-			states: d.states,
+			props: j,
+			parts: u.parts,
+			states: u.states,
 			active: {
-				...n(M, () => U.value),
-				nearLimit: () => q.value?.state === "near",
-				atLimit: () => q.value?.state === "limit"
+				...n(j, () => H.value),
+				nearLimit: () => K.value?.state === "near",
+				atLimit: () => K.value?.state === "limit"
+			},
+			variant: {
+				...u.variant,
+				current: () => j.variant ?? "outline"
 			}
-		}), Y = C(null), X = f(() => M.modelValue ?? ""), oe = f(() => {
-			if (!M.autoGrow) return M.rows;
-			let e = String(X.value).split("\n").length;
-			return Math.max(Number(M.rows ?? 1), e);
+		}), J = w(null), Y = d(() => j.modelValue ?? ""), se = d(() => {
+			if (!j.autoGrow) return j.rows;
+			let e = String(Y.value).split("\n").length;
+			return Math.max(Number(j.rows ?? 1), e);
 		});
-		re(() => {
-			M.autoGrow && $();
-		}), D(() => M.modelValue, () => {
-			M.autoGrow && y($);
-		}), D(() => M.autoGrow, (e) => {
+		S(() => {
+			j.autoGrow && $();
+		}), O(() => j.modelValue, () => {
+			j.autoGrow && y($);
+		}), O(() => j.autoGrow, (e) => {
 			if (e) {
 				y($);
 				return;
 			}
 			ue();
-		}), ie(Y, () => {
-			if (M.autoGrow) {
-				if (Q && Y.value) {
-					let e = Y.value.getBoundingClientRect();
+		}), ae(J, () => {
+			if (j.autoGrow) {
+				if (Q && J.value) {
+					let e = J.value.getBoundingClientRect();
 					if (Math.abs(e.width - Q.width) < .5 && Math.abs(e.height - Q.height) < .5) return;
 				}
 				$();
 			}
 		});
-		function se(e) {
+		function X(e) {
 			if (e.target instanceof HTMLTextAreaElement) {
-				let t = e.target.value, n = t === "" ? B() : t;
-				N("input", e), N("update:modelValue", n), M.autoGrow && $();
+				let t = e.target.value, n = t === "" ? z() : t;
+				M("input", e), M("update:modelValue", n), j.autoGrow && $();
 			}
 		}
 		function ce(e) {
-			e.key === "Enter" && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && e.stopPropagation(), e.target instanceof HTMLTextAreaElement && N("keydown", e);
+			e.key === "Enter" && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && e.stopPropagation(), e.target instanceof HTMLTextAreaElement && M("keydown", e);
 		}
 		let Z = {
 			onBlur: (e) => {
-				V.value = !1, N("blur", e);
+				B.value = !1, M("blur", e);
 			},
-			onChange: (e) => N("change", e),
-			onClick: (e) => N("click", e),
+			onChange: (e) => M("change", e),
+			onClick: (e) => M("click", e),
 			onFocus: (e) => {
-				V.value = !0, N("focus", e);
+				B.value = !0, M("focus", e);
 			},
-			onKeyup: (e) => N("keyup", e),
-			onMousedown: (e) => N("mousedown", e),
-			onMouseup: (e) => N("mouseup", e),
-			onPaste: (e) => N("paste", e),
-			onCompositionstart: (e) => N("compositionstart", e),
-			onCompositionend: (e) => N("compositionend", e)
-		}, le = f(() => J.input ? v(Z, J.input) : Z), Q = null;
+			onKeyup: (e) => M("keyup", e),
+			onMousedown: (e) => M("mousedown", e),
+			onMouseup: (e) => M("mouseup", e),
+			onPaste: (e) => M("paste", e),
+			onCompositionstart: (e) => M("compositionstart", e),
+			onCompositionend: (e) => M("compositionend", e)
+		}, le = d(() => q.input ? v(Z, q.input) : Z), Q = null;
 		function $() {
-			if (!Y.value) return;
-			Y.value.style.height = M.rows ? "auto" : "0px", Y.value.style.height = `${Y.value.scrollHeight}px`;
-			let e = Y.value.getBoundingClientRect();
+			if (!J.value) return;
+			J.value.style.height = j.rows ? "auto" : "0px", J.value.style.height = `${J.value.scrollHeight}px`;
+			let e = J.value.getBoundingClientRect();
 			Q = {
 				width: e.width,
 				height: e.height
 			};
 		}
 		function ue() {
-			Y.value && (Y.value.style.removeProperty("height"), Q = null);
+			J.value && (J.value.style.removeProperty("height"), Q = null);
 		}
-		return (e, t) => (S(), p(ee, v({
+		return (e, t) => (C(), f(l, v({
 			id: e.id,
 			class: "bb-textarea",
-			clearable: W.value,
+			clearable: U.value,
 			compact: e.compact,
-			counter: T(q),
+			counter: E(K),
 			description: e.description,
 			disabled: e.disabled,
-			errors: T(F),
+			errors: E(P),
 			"has-errors": e.hasErrors,
-			"has-value": U.value,
+			"has-value": H.value,
 			"has-warnings": e.hasWarnings,
 			"hide-label": e.hideLabel,
 			hint: e.hint,
 			"input-align": e.inputAlign,
 			label: e.label,
 			"label-align": e.labelAlign,
-			"label-mode": G.value,
+			"label-mode": W.value,
 			"label-position": e.labelPosition,
 			layout: e.layout,
 			loading: e.loading,
 			name: e.name,
-			passthrough: T(J),
-			readonly: T(R),
+			passthrough: E(q),
+			readonly: E(L),
 			reverse: e.reverse,
-			"show-asterisk": T(P),
-			"show-hint": H.value,
+			"show-asterisk": E(N),
+			"show-hint": V.value,
 			warnings: e.warnings
-		}, T(J).forwardAttrs), m({
-			label: O((t) => [w(e.$slots, "label", x(_(t)))]),
-			input: O(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a, ariaLabelledby: o }) => [h(l, {
-				"append:icon": j["append:icon"],
+		}, E(q).forwardAttrs), m({
+			label: k((t) => [T(e.$slots, "label", x(_(t)))]),
+			input: k(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a, ariaLabelledby: o }) => [h(ne, {
+				"append:icon": A["append:icon"],
 				class: b(["bb-textarea__field", { "bb-textarea__field--auto-grow": e.autoGrow }]),
 				clearable: e.clearable,
 				compact: e.compact,
 				disabled: e.disabled,
 				"has-errors": r,
-				"has-value": U.value,
+				"has-value": H.value,
 				"has-warnings": i,
 				loading: e.loading,
-				passthrough: T(J),
-				"prepend:icon": j["prepend:icon"],
-				readonly: T(R),
+				passthrough: E(q),
+				"prepend:icon": A["prepend:icon"],
+				readonly: E(L),
 				"reserve-append-space": e.clearable,
 				variant: e.variant,
-				"onClick:clear": t[0] ||= (e) => T(N)("update:modelValue", B())
+				"onClick:clear": t[0] ||= (e) => E(M)("update:modelValue", z())
 			}, m({
-				"prepend:outer": O(() => [w(e.$slots, "prepend:outer")]),
-				prepend: O(() => [w(e.$slots, "prepend")]),
-				append: O(() => [w(e.$slots, "append")]),
-				"append:outer": O(() => [w(e.$slots, "append:outer")]),
-				default: O(() => [h(s, {
+				"prepend:outer": k(() => [T(e.$slots, "prepend:outer")]),
+				prepend: k(() => [T(e.$slots, "prepend")]),
+				append: k(() => [T(e.$slots, "append")]),
+				"append:outer": k(() => [T(e.$slots, "append:outer")]),
+				default: k(() => [h(s, {
 					disabled: !e.autoGrow,
 					tag: "span"
 				}, {
-					default: O(() => [k(ne("textarea", v({
+					default: k(() => [ie(p("textarea", v({
 						id: n,
 						ref_key: "textarea",
-						ref: Y,
+						ref: J,
 						"aria-describedby": a,
 						"aria-disabled": e.disabled || void 0,
 						"aria-invalid": r || void 0,
 						"aria-labelledby": o,
-						"aria-readonly": T(R) || void 0,
+						"aria-readonly": E(L) || void 0,
 						autocomplete: e.autocomplete,
 						autofocus: e.autofocus,
 						class: "bb-textarea__input scrollbar-border",
 						disabled: e.disabled,
 						name: e.name,
 						placeholder: e.placeholder,
-						readonly: T(R),
-						required: T(I),
-						"aria-required": T(L),
-						rows: oe.value,
-						value: X.value,
-						onInput: se,
+						readonly: E(L),
+						required: E(F),
+						"aria-required": E(I),
+						rows: se.value,
+						value: Y.value,
+						onInput: X,
 						onKeydown: ce
-					}, v(T(J).controlAttrs, le.value)), null, 16, ae), [[T(c)]])]),
+					}, v(E(q).controlAttrs, le.value)), null, 16, oe), [[E(c)]])]),
 					_: 2
 				}, 1032, ["disabled"])]),
 				_: 2
 			}, [e.$slots.prefix ? {
 				name: "prefix",
-				fn: O(() => [w(e.$slots, "prefix")]),
+				fn: k(() => [T(e.$slots, "prefix")]),
 				key: "0"
 			} : void 0, e.$slots.suffix ? {
 				name: "suffix",
-				fn: O(() => [w(e.$slots, "suffix")]),
+				fn: k(() => [T(e.$slots, "suffix")]),
 				key: "1"
 			} : void 0]), 1032, [
 				"append:icon",
@@ -398,7 +439,7 @@ var ae = [
 			_: 2
 		}, [e.$slots.description ? {
 			name: "description",
-			fn: O((t) => [w(e.$slots, "description", x(_(t)))]),
+			fn: k((t) => [T(e.$slots, "description", x(_(t)))]),
 			key: "0"
 		} : void 0]), 1040, /* @__PURE__ */ "id.clearable.compact.counter.description.disabled.errors.has-errors.has-value.has-warnings.hide-label.hint.input-align.label.label-align.label-mode.label-position.layout.loading.name.passthrough.readonly.reverse.show-asterisk.show-hint.warnings".split(".")));
 	}

package/dist/components/BbTextarea/types.d.ts

@@ -1,9 +1,9 @@
 import { Responsive } from '../../types/ResponsiveSize';
-import { InputVariantType } from '../../types/InputVariant';
+import { InputVariantBuiltIn, InputVariantRegistry, InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { FieldCrossAlign, FieldLayout } from '../../types/FieldLayout';
 import { IconType } from '../../types/Icon';
-import { CounterPtPart, CounterPtState, FormControlPtState, PtMap, PtValue, TextControlPtPart } from '../../types/passthrough';
+import { CounterPtPart, CounterPtState, FormControlPtState, PtMap, PtValue, TextControlPtPart, PtVariantAttrs } from '../../types/passthrough';
 import { FormFieldProps } from '../../composables/useFormBinding';
 import { NullValueOf, NullValuePolicy, RegisteredNullValue } from '../../types/Config';
 import { CommonFieldAsteriskSlotProps } from '../CommonField/types';
@@ -23,17 +23,24 @@ export type BbTextareaPtState = FormControlPtState | CounterPtState;
 export declare const BB_TEXTAREA_PT: {
     readonly parts: readonly ["root", "label", "description", "message", "hint", "box", "input", "icon", "spinner", "prefix", "suffix", "clear", "counter"];
     readonly states: readonly ["hasValue", "nearLimit", "atLimit", ...("hasValue" | "readonly" | "disabled" | "warnings" | "errors" | "loading")[]];
+    readonly variant: {
+        readonly names: readonly ["outline", "secondary", "ghost"];
+        readonly option: "inputVariants";
+        readonly parts: readonly ["root", "label", "description", "message", "hint", "box", "input", "icon", "spinner", "prefix", "suffix", "clear"];
+    };
 };
 /** The app-wide policy: `'string'` once the project file registers it. */
 type AppPolicy = RegisteredNullValue<'BbTextarea'>;
 export type BbTextareaProps<E extends NullValuePolicy = AppPolicy> = {
-    [K in `pt:${BbTextareaPtPart}` | `pt:${BbTextareaPtPart}:${BbTextareaPtState}`]?: PtValue;
-} & {
+    [K in `pt:${BbTextareaPtPart}` | `pt:${BbTextareaPtPart}:${BbTextareaPtState}` | `pt:${TextControlPtPart}:${InputVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<TextControlPtPart, keyof InputVariantRegistry> & {
     /**
      * Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same
      * keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
      */
-    pt?: PtMap<BbTextareaPtPart, BbTextareaPtState>;
+    pt?: PtMap<BbTextareaPtPart, BbTextareaPtState> & {
+        [K in `${TextControlPtPart}:${InputVariantBuiltIn | keyof InputVariantRegistry}`]?: PtValue;
+    };
     /**
      * Name of the icon to be added at the end of the input.
      */

package/dist/components/BbTextarea/types.js

@@ -1,12 +1,18 @@
 import { COUNTER_PT_STATES as e, FORM_CONTROL_PT_STATES as t, TEXT_CONTROL_PT_PARTS as n } from "../../types/passthrough.js";
+import { INPUT_VARIANTS as r } from "../../types/InputVariant.js";
 //#region src/components/BbTextarea/types.ts
-var r = {
+var i = {
 	parts: [...n, "counter"],
 	states: [
 		t[0],
 		...e,
 		...t.slice(1)
-	]
+	],
+	variant: {
+		names: r,
+		option: "inputVariants",
+		parts: n
+	}
 };
 //#endregion
-export { r as BB_TEXTAREA_PT };
+export { i as BB_TEXTAREA_PT };