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

package/dist/components/BbTextInput/BbTextInput.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 { hash as a } from "../../utilities/functions/hash.js";
-import { removedPropsFor as o } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as ee } from "../../utilities/functions/warnRemovedAttrs.js";
-import { useMobile as s } from "../../composables/useMobile.js";
-import { vAutofocus as te } from "../../utilities/misc/autofocus.js";
-import c from "../CommonField/CommonField.vue.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 { hash as o } from "../../utilities/functions/hash.js";
+import { removedPropsFor as ee } from "../../deprecation/removedProps.js";
+import { warnRemovedAttrs as s } from "../../utilities/functions/warnRemovedAttrs.js";
+import { useMobile as te } from "../../composables/useMobile.js";
+import { vAutofocus as c } from "../../utilities/misc/autofocus.js";
+import l from "../CommonField/CommonField.vue.js";
 import { useFormBinding as ne } from "../../composables/useFormBinding.js";
 import re from "../CommonFieldInput/CommonFieldInput.vue.js";
-import { vSsrValue as ie } from "../../utilities/misc/ssrValue.js";
-import { useCharacterCounter as l } from "../../composables/useCharacterCounter.js";
-import { BB_TEXT_INPUT_PT as u } from "./types.js";
-import { computed as d, createBlock as ae, createElementVNode as oe, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeProps as g, normalizeProps as _, onBeforeUnmount as v, onMounted as se, openBlock as ce, ref as y, renderSlot as b, unref as x, useAttrs as S, watch as C, withCtx as w, withDirectives as T } from "vue";
-import { Mask as E, MaskInput as le } from "maska";
+import { vSsrValue as u } from "../../utilities/misc/ssrValue.js";
+import { useCharacterCounter as d } from "../../composables/useCharacterCounter.js";
+import { BB_TEXT_INPUT_PT as f } from "./types.js";
+import { computed as p, createBlock as ie, createElementVNode as ae, createSlots as m, createVNode as oe, defineComponent as h, guardReactiveProps as g, mergeProps as _, normalizeProps as v, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderSlot as C, unref as w, useAttrs as T, watch as E, withCtx as D, withDirectives as se } from "vue";
+import { Mask as ce, MaskInput as le } from "maska";
 //#region src/components/BbTextInput/BbTextInput.vue?vue&type=script&setup=true&lang.ts
 var ue = [
 	"id",
@@ -32,7 +32,8 @@ var ue = [
 	"required",
 	"aria-required",
 	"type"
-], D = /*@__PURE__*/ m({
+], O = /*@__PURE__*/ h({
+	mixins: [i(f)],
 	inheritAttrs: !1,
 	__name: "BbTextInput",
 	props: {
@@ -153,6 +154,42 @@ var ue = [
 		"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: {},
@@ -210,30 +247,34 @@ var ue = [
 		"paste",
 		"update:modelValue"
 	],
-	setup(m, { emit: D }) {
-		let O = m, { props: k, emit: A, showAsterisk: j, errors: M, required: N, ariaRequired: P, readonly: F } = ne(O, D, {
+	setup(i, { emit: h }) {
+		let O = i, { props: k, emit: A, showAsterisk: j, errors: M, required: N, ariaRequired: P, readonly: F } = ne(O, h, {
 			componentName: "BbTextInput",
 			identifierFallback: () => O.label,
 			leaveOn: "blur"
 		});
-		process.env.NODE_ENV !== "production" && ee("BbTextInput", o("BbTextInput"));
-		let I = i(), L = () => (O.nullValue ?? I.formControls?.textInputNullValue) === "string" ? "" : null, R = (e, t) => (e || null) === (t || null), z = y(!1), B = d(() => k.persistentHint || z.value), { isMobile: V } = s(), H = d(() => e(k.modelValue)), de = d(() => !!k.clearable && H.value), fe = d(() => k.labelMode ?? I.defaultInputLabelMode), U = S(), W = l({
+		process.env.NODE_ENV !== "production" && s("BbTextInput", ee("BbTextInput"));
+		let I = a(), L = () => (O.nullValue ?? I.formControls?.textInputNullValue) === "string" ? "" : null, R = (e, t) => (e || null) === (t || null), z = S(!1), B = p(() => k.persistentHint || z.value), { isMobile: V } = te(), H = p(() => e(k.modelValue)), de = p(() => !!k.clearable && H.value), fe = p(() => k.labelMode ?? I.defaultInputLabelMode), U = T(), W = d({
 			enabled: () => !!k.counter,
 			value: () => k.modelValue,
 			maxlength: () => U.maxlength ?? U.maxLength
 		}), G = r({
 			component: "BbTextInput",
-			attrs: S(),
+			attrs: T(),
 			controlAttrs: t,
 			props: k,
-			parts: u.parts,
-			states: u.states,
+			parts: f.parts,
+			states: f.states,
 			active: {
 				...n(k, () => H.value),
 				nearLimit: () => W.value?.state === "near",
 				atLimit: () => W.value?.state === "limit"
+			},
+			variant: {
+				...f.variant,
+				current: () => k.variant ?? "outline"
 			}
-		}), K = y(null), q = y(null), pe = d(() => a(k.mask ?? null)), J = () => !!k.mask, Y = () => {
+		}), K = S(null), q = S(null), pe = p(() => o(k.mask ?? null)), J = () => !!k.mask, Y = () => {
 			q.value?.destroy(), q.value = null;
 		}, X = (e) => {
 			K.value && (K.value.value = e ?? "", J() && q.value?.updateValue(K.value));
@@ -252,19 +293,19 @@ var ue = [
 		}, he = () => {
 			let e = k.modelValue ?? "";
 			if (!e || !k.mask) return e;
-			let { onMaska: t, preProcess: n, postProcess: r, ...i } = k.mask, a = new E(i).masked(n ? n(e) : e);
+			let { onMaska: t, preProcess: n, postProcess: r, ...i } = k.mask, a = new ce(i).masked(n ? n(e) : e);
 			return r ? r(a) : a;
 		};
-		se(() => {
+		b(() => {
 			Z();
-		}), v(() => {
+		}), y(() => {
 			Y();
-		}), C(() => k.modelValue, (e) => {
+		}), E(() => k.modelValue, (e) => {
 			let t = Q;
 			Q = null, !(t && t.value === e) && X(e);
-		}), C(() => pe.value, () => {
+		}), E(() => pe.value, () => {
 			Z();
-		}), C(() => k.emitMasked, () => {
+		}), E(() => k.emitMasked, () => {
 			!K.value || !J() || X(k.modelValue);
 		});
 		let $ = {
@@ -290,16 +331,16 @@ var ue = [
 			onMousedown: (e) => A("mousedown", e),
 			onMouseup: (e) => A("mouseup", e),
 			onPaste: (e) => A("paste", e)
-		}, ge = d(() => G.input ? g($, G.input) : $);
-		return (e, t) => (ce(), ae(c, g({
+		}, ge = p(() => G.input ? _($, G.input) : $);
+		return (e, t) => (x(), ie(l, _({
 			id: e.id,
 			class: "bb-text-input",
 			clearable: de.value,
 			compact: e.compact,
-			counter: x(W),
+			counter: w(W),
 			description: e.description,
 			disabled: e.disabled,
-			errors: x(M),
+			errors: w(M),
 			"has-errors": e.hasErrors,
 			"has-value": H.value,
 			"has-warnings": e.hasWarnings,
@@ -312,17 +353,17 @@ var ue = [
 			"label-position": e.labelPosition,
 			layout: e.layout,
 			loading: e.loading,
-			mobile: x(V),
+			mobile: w(V),
 			name: e.name,
-			passthrough: x(G),
-			readonly: x(F),
+			passthrough: w(G),
+			readonly: w(F),
 			reverse: e.reverse,
-			"show-asterisk": x(j),
+			"show-asterisk": w(j),
 			"show-hint": B.value,
 			warnings: e.warnings
-		}, x(G).forwardAttrs), f({
-			label: w((t) => [b(e.$slots, "label", _(h(t)))]),
-			input: w(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a, ariaLabelledby: o }) => [p(re, {
+		}, w(G).forwardAttrs), m({
+			label: D((t) => [C(e.$slots, "label", v(g(t)))]),
+			input: D(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a, ariaLabelledby: o }) => [oe(re, {
 				"append:icon": O["append:icon"],
 				clearable: e.clearable,
 				compact: e.compact,
@@ -331,18 +372,18 @@ var ue = [
 				"has-value": H.value,
 				"has-warnings": i,
 				loading: e.loading,
-				passthrough: x(G),
+				passthrough: w(G),
 				"prepend:icon": O["prepend:icon"],
-				readonly: x(F),
+				readonly: w(F),
 				"reserve-append-space": e.clearable,
 				variant: e.variant,
-				"onClick:clear": t[0] ||= (e) => x(A)("update:modelValue", L())
-			}, f({
-				"prepend:outer": w(() => [b(e.$slots, "prepend:outer")]),
-				prepend: w(() => [b(e.$slots, "prepend")]),
-				append: w(() => [b(e.$slots, "append")]),
-				"append:outer": w(() => [b(e.$slots, "append:outer")]),
-				default: w(() => [T(oe("input", g({
+				"onClick:clear": t[0] ||= (e) => w(A)("update:modelValue", L())
+			}, m({
+				"prepend:outer": D(() => [C(e.$slots, "prepend:outer")]),
+				prepend: D(() => [C(e.$slots, "prepend")]),
+				append: D(() => [C(e.$slots, "append")]),
+				"append:outer": D(() => [C(e.$slots, "append:outer")]),
+				default: D(() => [se(ae("input", _({
 					id: n,
 					ref_key: "input",
 					ref: K,
@@ -350,7 +391,7 @@ var ue = [
 					"aria-disabled": e.disabled || void 0,
 					"aria-invalid": r || void 0,
 					"aria-labelledby": o,
-					"aria-readonly": x(F) || void 0,
+					"aria-readonly": w(F) || void 0,
 					autocomplete: e.autocomplete,
 					autofocus: e.autofocus,
 					class: "bb-text-input__input",
@@ -358,21 +399,21 @@ var ue = [
 					inputmode: e.inputMode,
 					name: e.name,
 					placeholder: e.placeholder,
-					readonly: x(F),
-					required: x(N),
-					"aria-required": x(P),
+					readonly: w(F),
+					required: w(N),
+					"aria-required": w(P),
 					size: "1",
 					type: e.type,
 					onMaska: me
-				}, g(x(G).controlAttrs, ge.value)), null, 16, ue), [[x(te)], [x(ie), he]])]),
+				}, _(w(G).controlAttrs, ge.value)), null, 16, ue), [[w(c)], [w(u), he]])]),
 				_: 2
 			}, [e.$slots.prefix ? {
 				name: "prefix",
-				fn: w(() => [b(e.$slots, "prefix")]),
+				fn: D(() => [C(e.$slots, "prefix")]),
 				key: "0"
 			} : void 0, e.$slots.suffix ? {
 				name: "suffix",
-				fn: w(() => [b(e.$slots, "suffix")]),
+				fn: D(() => [C(e.$slots, "suffix")]),
 				key: "1"
 			} : void 0]), 1032, [
 				"append:icon",
@@ -392,10 +433,10 @@ var ue = [
 			_: 2
 		}, [e.$slots.description ? {
 			name: "description",
-			fn: w((t) => [b(e.$slots, "description", _(h(t)))]),
+			fn: D((t) => [C(e.$slots, "description", v(g(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.mobile.name.passthrough.readonly.reverse.show-asterisk.show-hint.warnings".split(".")));
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

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

@@ -1,10 +1,10 @@
 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 { MaskInputOptions } from 'maska';
 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';
@@ -24,17 +24,24 @@ export type BbTextInputPtState = FormControlPtState | CounterPtState;
 export declare const BB_TEXT_INPUT_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<'BbTextInput'>;
 export type BbTextInputProps<E extends NullValuePolicy = AppPolicy> = {
-    [K in `pt:${BbTextInputPtPart}` | `pt:${BbTextInputPtPart}:${BbTextInputPtState}`]?: PtValue;
-} & {
+    [K in `pt:${BbTextInputPtPart}` | `pt:${BbTextInputPtPart}:${BbTextInputPtState}` | `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<BbTextInputPtPart, BbTextInputPtState>;
+    pt?: PtMap<BbTextInputPtPart, BbTextInputPtState> & {
+        [K in `${TextControlPtPart}:${InputVariantBuiltIn | keyof InputVariantRegistry}`]?: PtValue;
+    };
     /**
      * Name of the icon to be added at the end of the input.
      */

package/dist/components/BbTextInput/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/BbTextInput/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_TEXT_INPUT_PT };
+export { i as BB_TEXT_INPUT_PT };