bitboss-ui 3.0.0-beta.5 → 3.0.0-beta.50

package/dist/components/BbTag/BbTag.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,157 @@
-import { removedPropsFor as e } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as t } from "../../utilities/functions/warnRemovedAttrs.js";
-import n from "../BbBaseInputContainer/BbBaseInputContainer.vue.js";
-import r from "../BbBaseTag/BbBaseTag.vue.js";
-import { config as i } from "virtual:bitboss-ui/config";
-import { computed as a, createBlock as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeProps as d, openBlock as f, ref as p, renderSlot as m, withCtx as h } from "vue";
+import { useLogger as e } from "../../composables/useLogger.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 { isImeComposing as ee } from "../../utilities/functions/isImeComposing.js";
+import te from "../BbSmoothHeight/BbSmoothHeight.vue.js";
+import ne from "../CommonField/CommonField.vue.js";
+import { useFormBinding as re } from "../../composables/useFormBinding.js";
+import { useIndexById as ie } from "../../composables/useIndexById.js";
+import { useBaseOptions as ae } from "../../composables/useBaseOptions.js";
+import oe from "../CommonFieldInput/CommonFieldInput.vue.js";
+import se from "../ChipsBox/ChipsBox.vue.js";
+import ce from "../CommaBox/CommaBox.vue.js";
+import { BB_TAG_PT as s } from "./types.js";
+import { computed as c, createBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, nextTick as le, normalizeClass as ue, normalizeProps as g, onBeforeUnmount as de, onDeactivated as fe, openBlock as _, ref as v, renderSlot as y, toRaw as pe, toRef as b, unref as x, useAttrs as me, vModelText as he, watch as S, withCtx as C, withDirectives as ge, withModifiers as w } from "vue";
 //#region src/components/BbTag/BbTag.vue?vue&type=script&setup=true&lang.ts
-var g = /*@__PURE__*/ c({
+var _e = { class: "bb-tag__input-container" }, ve = [
+	"id",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-invalid",
+	"aria-labelledby",
+	"aria-readonly",
+	"autocomplete",
+	"autofocus",
+	"disabled",
+	"placeholder",
+	"readonly",
+	"required",
+	"aria-required"
+], T = /*@__PURE__*/ p({
+	inheritAttrs: !1,
 	__name: "BbTag",
 	props: {
+		"pt:root": {},
+		"pt:label": {},
+		"pt:description": {},
+		"pt:message": {},
+		"pt:hint": {},
+		"pt:box": {},
+		"pt:input": {},
+		"pt:icon": {},
+		"pt:spinner": {},
+		"pt:prefix": {},
+		"pt:suffix": {},
+		"pt:clear": {},
+		"pt:root:errors": {},
+		"pt:root:warnings": {},
+		"pt:root:loading": {},
+		"pt:root:disabled": {},
+		"pt:root:readonly": {},
+		"pt:root:hasValue": {},
+		"pt:label:errors": {},
+		"pt:label:warnings": {},
+		"pt:label:loading": {},
+		"pt:label:disabled": {},
+		"pt:label:readonly": {},
+		"pt:label:hasValue": {},
+		"pt:description:errors": {},
+		"pt:description:warnings": {},
+		"pt:description:loading": {},
+		"pt:description:disabled": {},
+		"pt:description:readonly": {},
+		"pt:description:hasValue": {},
+		"pt:message:errors": {},
+		"pt:message:warnings": {},
+		"pt:message:loading": {},
+		"pt:message:disabled": {},
+		"pt:message:readonly": {},
+		"pt:message:hasValue": {},
+		"pt:hint:errors": {},
+		"pt:hint:warnings": {},
+		"pt:hint:loading": {},
+		"pt:hint:disabled": {},
+		"pt:hint:readonly": {},
+		"pt:hint:hasValue": {},
+		"pt:box:errors": {},
+		"pt:box:warnings": {},
+		"pt:box:loading": {},
+		"pt:box:disabled": {},
+		"pt:box:readonly": {},
+		"pt:box:hasValue": {},
+		"pt:input:errors": {},
+		"pt:input:warnings": {},
+		"pt:input:loading": {},
+		"pt:input:disabled": {},
+		"pt:input:readonly": {},
+		"pt:input:hasValue": {},
+		"pt:icon:errors": {},
+		"pt:icon:warnings": {},
+		"pt:icon:loading": {},
+		"pt:icon:disabled": {},
+		"pt:icon:readonly": {},
+		"pt:icon:hasValue": {},
+		"pt:spinner:errors": {},
+		"pt:spinner:warnings": {},
+		"pt:spinner:loading": {},
+		"pt:spinner:disabled": {},
+		"pt:spinner:readonly": {},
+		"pt:spinner:hasValue": {},
+		"pt:prefix:errors": {},
+		"pt:prefix:warnings": {},
+		"pt:prefix:loading": {},
+		"pt:prefix:disabled": {},
+		"pt:prefix:readonly": {},
+		"pt:prefix:hasValue": {},
+		"pt:suffix:errors": {},
+		"pt:suffix:warnings": {},
+		"pt:suffix:loading": {},
+		"pt:suffix:disabled": {},
+		"pt:suffix:readonly": {},
+		"pt:suffix:hasValue": {},
+		"pt:clear:errors": {},
+		"pt:clear:warnings": {},
+		"pt:clear:loading": {},
+		"pt:clear:disabled": {},
+		"pt:clear:readonly": {},
+		"pt:clear:hasValue": {},
+		"pt:badge:errors": {},
+		"pt:badge:warnings": {},
+		"pt:badge:loading": {},
+		"pt:badge:disabled": {},
+		"pt:badge:readonly": {},
+		"pt:badge:hasValue": {},
+		"pt:comma:errors": {},
+		"pt:comma:warnings": {},
+		"pt:comma:loading": {},
+		"pt:comma:disabled": {},
+		"pt:comma:readonly": {},
+		"pt:comma:hasValue": {},
+		"pt:badge:highlighted": {},
+		"pt:comma:highlighted": {},
+		"pt:badge": {},
+		"pt:comma": {},
+		pt: {},
 		"append:icon": {},
-		autocomplete: {},
+		autocomplete: { default: "off" },
 		autofocus: {},
 		caseSensitive: { type: Boolean },
 		comma: { type: Boolean },
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		description: {},
-		direction: {},
+		layout: {},
+		labelAlign: {},
+		inputAlign: {},
 		disabled: { type: Boolean },
-		divider: {},
+		divider: { default: "Enter" },
 		errors: {},
 		hasErrors: { type: Boolean },
 		warnings: {},
-		hasWarning: { type: Boolean },
+		hasWarnings: { type: Boolean },
 		hideLabel: { type: Boolean },
 		hint: {},
 		id: {},
@@ -38,7 +167,11 @@ var g = /*@__PURE__*/ c({
 		"prepend:icon": {},
 		readonly: { type: Boolean },
 		required: { type: Boolean },
-		reverse: { type: Boolean }
+		reverse: { type: Boolean },
+		validationLabel: {},
+		rules: {},
+		validationMode: {},
+		formless: { type: Boolean }
 	},
 	emits: [
 		"blur",
@@ -59,131 +192,309 @@ var g = /*@__PURE__*/ c({
 		"max",
 		"update:modelValue"
 	],
-	setup(c, { emit: g }) {
-		let _ = c, v = g;
-		process.env.NODE_ENV !== "production" && t("BbTag", e("BbTag"));
-		let y = p(!1), b = a(() => _.persistentHint || y.value), x = a(() => (_.modelValue?.length ?? 0) > 0), S = a(() => _.labelMode ?? i.defaultInputLabelMode), C = {
-			onBlur: (e) => v("blur", e),
-			onChange: (e) => v("change", e),
-			onClick: (e) => v("click", e),
-			onDuplicate: (e) => v("duplicate", e),
-			onFocus: (e) => {
-				y.value = !0, v("focus", e);
+	setup(p, { emit: T }) {
+		let E = p, { props: D, emit: O, showAsterisk: ye, errors: be, required: k, ariaRequired: xe, model: A, readonly: j } = re(E, T, {
+			componentName: "BbTag",
+			identifierFallback: () => E.label,
+			emptyValue: () => [],
+			leaveOn: "inactive"
+		}), Se = c(() => xe.value ?? (k.value && A.value.length ? !0 : void 0)), Ce = i();
+		process.env.NODE_ENV !== "production" && o("BbTag", a("BbTag"));
+		let M = v("idle"), N = c(() => M.value === "active"), we = c(() => D.persistentHint || M.value !== "idle"), P = c(() => (D.modelValue?.length ?? 0) > 0), Te = c(() => D.labelMode ?? Ce.defaultInputLabelMode), F = r({
+			component: "BbTag",
+			attrs: me(),
+			controlAttrs: t,
+			props: D,
+			parts: s.parts,
+			states: s.states,
+			active: n(D, () => P.value)
+		}), Ee = e();
+		Array.isArray(D.modelValue) || Ee.throw("BbTag: modelValue must be an array.");
+		let I = v(null), L = v(null), R = v(null), z = c(() => D.comma ? L.value : R.value), B = v(null), De = () => {
+			B.value instanceof HTMLInputElement && B.value.focus();
+		}, V = v(""), H = c(() => ke.value.filter((e) => e.selected)), { data: U } = ie({ items: b(D, "modelValue") }), W = (e) => D.caseSensitive ? e : e.toLowerCase(), Oe = c(() => new Set(D.modelValue.map((e) => W(String(e))))), { options: ke } = ae({
+			disabled: b(D, "disabled"),
+			items: c(() => D.modelValue),
+			itemText: void 0,
+			itemValue: void 0,
+			max: b(D, "max"),
+			selectable: !0,
+			selectedIndexedByHash: U
+		}), G = () => {
+			V.value = "";
+		}, K = async (e) => {
+			if (D.disabled || D.readonly) return;
+			let t = { ...U.value };
+			delete t[e.valueHash], O("update:modelValue", Object.values(t)), De();
+		}, q;
+		S(() => D.modelValue, async (e) => {
+			if (pe(e) === q) {
+				q = void 0;
+				return;
+			}
+			G();
+		}), S(() => D.disabled, (e) => {
+			e && z.value?.blur();
+		}), S(() => D.readonly, (e) => {
+			e && z.value?.blur();
+		});
+		let Ae = () => {
+			M.value = "active", O("active");
+		}, J = () => {
+			M.value = "idle", O("inactive");
+		}, je = () => {
+			N.value || (Ae(), document.addEventListener("click", Q), document.addEventListener("focusin", Q));
+		}, Y = c(() => !(D.readonly || D.disabled || !z.value)), Me = (e) => {
+			Y.value && (V.value || (e.preventDefault(), H.value.length && z.value?.focusPrevious()));
+		}, Ne = (e) => {
+			Y.value && (V.value || (e.preventDefault(), H.value.length && z.value?.focusNext()));
+		}, X = async () => {
+			!Y.value || V.value || !H.value.length || (z.value?.getHighlighted() && z.value.confirmOption(), await le(), z.value?.focusPrevious());
+		}, Pe = () => {
+			z.value?.blur();
+		}, Fe = (e) => {
+			!Y.value || V.value || (e.preventDefault(), H.value.length && z.value?.focusFirst());
+		}, Ie = (e) => {
+			!Y.value || V.value || (e.preventDefault(), H.value.length && z.value?.focusLast());
+		}, Z = c(() => Array.isArray(D.divider) ? D.divider : [D.divider]), Le = async (e) => {
+			if (O("keydown", e), e.key === "Tab") {
+				z.value?.blur();
+				return;
+			}
+			if (D.readonly || D.disabled) {
+				e.preventDefault();
+				return;
+			}
+			/^[A-Za-z0-9]$/.test(e.key) && z.value?.blur(), (Z.value.find((t) => t === e.key) ?? (e.key === "Unidentified" ? Z.value.find((e) => V.value.includes(e)) : void 0)) !== void 0 && ze(e);
+		}, Re = () => {
+			let e = [V.value];
+			for (let t of Z.value) t.length === 1 && (e = e.flatMap((e) => e.split(t)));
+			return e.map((e) => e.trim()).filter(Boolean);
+		}, ze = (e) => {
+			let t = Re();
+			if (!t.length) {
+				V.value = "";
+				return;
+			}
+			e.preventDefault();
+			let n = new Set(Oe.value), r = [], i = [];
+			for (let [e, a] of t.entries()) {
+				if (n.has(W(a))) {
+					O("duplicate", a);
+					continue;
+				}
+				if (D.max !== void 0 && H.value.length + r.length >= D.max) {
+					O("max", a), i = t.slice(e);
+					break;
+				}
+				n.add(W(a)), r.push(a);
+			}
+			if (V.value = i.join(`${Z.value.find((e) => e.length === 1) ?? ","} `), !r.length) return;
+			let a = D.modelValue.concat(r);
+			q = i.length ? a : void 0, O("update:modelValue", a);
+		}, Be = {
+			ArrowLeft: Me,
+			ArrowRight: Ne,
+			Backspace: X,
+			Delete: X,
+			End: Ie,
+			Escape: (e) => {
+				e.preventDefault(), Pe();
 			},
-			onActive: () => {
-				y.value = !0, v("active");
-			},
-			onInactive: () => {
-				y.value = !1, v("inactive");
-			},
-			onInput: (e) => v("input", e),
-			onKeydown: (e) => v("keydown", e),
-			onKeyup: (e) => v("keyup", e),
-			onMousedown: (e) => v("mousedown", e),
-			onMouseup: (e) => v("mouseup", e),
-			onPaste: (e) => v("paste", e),
-			onCompositionstart: (e) => v("compositionstart", e),
-			onCompositionend: (e) => v("compositionend", e),
-			onMax: (e) => v("max", e),
-			"onUpdate:modelValue": (e) => v("update:modelValue", e)
+			Home: Fe
+		}, Ve = (e) => {
+			if (ee(e)) {
+				O("keydown", e);
+				return;
+			}
+			Le(e), Be[e.key]?.(e);
+		}, He = (e) => {
+			M.value === "idle" && (M.value = "focused"), O("focus", e);
+		}, Ue = (e) => {
+			O("click", e);
+		}, Q = async (e) => {
+			if (e.target instanceof Node && I.value && !I.value.$el.contains(e.target)) {
+				J(), document.removeEventListener("click", Q), document.removeEventListener("focusin", Q), G();
+				return;
+			}
+		}, We = {
+			onBlur: (e) => O("blur", e),
+			onChange: (e) => O("change", e),
+			onKeyup: (e) => O("keyup", e),
+			onInput: (e) => O("input", e),
+			onMousedown: (e) => O("mousedown", e),
+			onMouseup: (e) => O("mouseup", e),
+			onPaste: (e) => O("paste", e),
+			onCompositionstart: (e) => O("compositionstart", e),
+			onCompositionend: (e) => O("compositionend", e)
+		}, Ge = c(() => F.input ? h(We, F.input) : We), Ke = () => {
+			O("update:modelValue", []);
+		}, $ = () => {
+			N.value ? (J(), G()) : M.value = "idle", document.removeEventListener("click", Q), document.removeEventListener("focusin", Q);
 		};
-		return (e, t) => (f(), o(n, {
+		return fe($), de($), (e, t) => (_(), l(ne, h({
 			id: e.id,
 			class: "bb-tag",
+			clearable: e.clearable && P.value,
 			compact: e.compact,
 			description: e.description,
-			direction: e.direction,
-			errors: e.errors,
+			disabled: e.disabled,
+			errors: x(be),
 			"has-errors": e.hasErrors,
-			"has-value": x.value,
-			"has-warning": e.hasWarning,
+			"has-value": P.value,
+			"has-warnings": e.hasWarnings,
 			"hide-label": e.hideLabel,
 			hint: e.hint,
+			"input-align": e.inputAlign,
 			label: e.label,
-			"label-mode": S.value,
+			"label-align": e.labelAlign,
+			"label-mode": Te.value,
 			"label-position": e.labelPosition,
-			"model-value": e.modelValue,
+			layout: e.layout,
+			loading: e.loading,
 			name: e.name,
+			passthrough: x(F),
+			readonly: x(j),
 			reverse: e.reverse,
-			"show-hint": b.value,
+			"show-asterisk": x(ye),
+			"show-hint": we.value,
 			warnings: e.warnings
-		}, {
-			label: h((t) => [m(e.$slots, "label", d(l(t)))]),
-			input: h(({ id: t, hasErrors: n, hasWarning: i, ariaDescribedby: a }) => [s(r, u({
-				id: t,
-				"append:icon": _["append:icon"],
-				"aria-describedby": a,
-				autocomplete: e.autocomplete,
-				autofocus: e.autofocus,
-				"case-sensitive": e.caseSensitive,
+		}, x(F).forwardAttrs), d({
+			label: C((t) => [y(e.$slots, "label", g(m(t)))]),
+			input: C(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a, ariaLabelledby: o }) => [f(oe, {
+				ref_key: "wrapper",
+				ref: I,
+				active: N.value,
+				"append:icon": x(D)["append:icon"],
+				class: ue(["bb-tag__field", {
+					"bb-tag__field--active": N.value,
+					"bb-tag__field--compact": e.compact
+				}]),
 				clearable: e.clearable,
-				comma: e.comma,
 				compact: e.compact,
 				disabled: e.disabled,
-				divider: e.divider,
-				"has-errors": n,
-				"has-warning": i,
+				"has-errors": r,
+				"has-value": P.value,
+				"has-warnings": i,
 				loading: e.loading,
-				max: e.max,
-				"model-value": e.modelValue,
-				name: e.name,
-				placeholder: e.placeholder,
-				"prepend:icon": _["prepend:icon"],
-				readonly: e.readonly,
-				required: e.required
-			}, C), {
-				"prepend-outer": h((t) => [m(e.$slots, "prepend-outer", d(l(t)))]),
-				prepend: h((t) => [m(e.$slots, "prepend", d(l(t)))]),
-				prefix: h((t) => [m(e.$slots, "prefix", d(l(t)))]),
-				append: h((t) => [m(e.$slots, "append", d(l(t)))]),
-				suffix: h((t) => [m(e.$slots, "suffix", d(l(t)))]),
-				"append-outer": h((t) => [m(e.$slots, "append-outer", d(l(t)))]),
+				passthrough: x(F),
+				"prepend:icon": x(D)["prepend:icon"],
+				readonly: x(j),
+				variant: e.variant,
+				onClick: Ue,
+				"onClick:clear": Ke,
+				onFocusin: je
+			}, d({
+				"prepend:outer": C(() => [y(e.$slots, "prepend:outer")]),
+				prepend: C(() => [y(e.$slots, "prepend")]),
+				append: C(() => [y(e.$slots, "append")]),
+				"append:outer": C(() => [y(e.$slots, "append:outer")]),
+				default: C(() => [f(te, { tag: "span" }, {
+					default: C(() => [u("span", _e, [e.comma ? (_(), l(ce, {
+						key: 0,
+						ref_key: "commaBox",
+						ref: L,
+						options: H.value,
+						passthrough: x(F),
+						"onOption:unselected": K
+					}, null, 8, ["options", "passthrough"])) : (_(), l(se, {
+						key: 1,
+						ref_key: "chipsBox",
+						ref: R,
+						disabled: e.disabled || x(j),
+						options: H.value,
+						passthrough: x(F),
+						size: "lg",
+						"onOption:unselected": K
+					}, null, 8, [
+						"disabled",
+						"options",
+						"passthrough"
+					])), ge(u("input", h({
+						id: n,
+						ref_key: "input",
+						ref: B,
+						"onUpdate:modelValue": t[0] ||= (e) => V.value = e,
+						"aria-describedby": a,
+						"aria-disabled": e.disabled || void 0,
+						"aria-invalid": r || void 0,
+						"aria-labelledby": o,
+						"aria-readonly": x(j) || void 0,
+						autocomplete: e.autocomplete,
+						autofocus: e.autofocus,
+						class: "bb-tag__input",
+						disabled: e.disabled,
+						enterkeyhint: "done",
+						placeholder: e.placeholder,
+						readonly: x(j),
+						required: x(k) && !x(A).length,
+						"aria-required": Se.value,
+						size: "1",
+						style: { "--characters": V.value.length },
+						type: "text",
+						onFocus: w(He, ["stop"]),
+						onKeydown: w(Ve, ["stop"])
+					}, h(x(F).controlAttrs, Ge.value)), null, 16, ve), [[he, V.value]])])]),
+					_: 2
+				}, 1024)]),
 				_: 2
-			}, 1040, [
-				"id",
+			}, [e.$slots.prefix ? {
+				name: "prefix",
+				fn: C(() => [y(e.$slots, "prefix")]),
+				key: "0"
+			} : void 0, e.$slots.suffix ? {
+				name: "suffix",
+				fn: C(() => [y(e.$slots, "suffix")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"active",
 				"append:icon",
-				"aria-describedby",
-				"autocomplete",
-				"autofocus",
-				"case-sensitive",
+				"class",
 				"clearable",
-				"comma",
 				"compact",
 				"disabled",
-				"divider",
 				"has-errors",
-				"has-warning",
+				"has-value",
+				"has-warnings",
 				"loading",
-				"max",
-				"model-value",
-				"name",
-				"placeholder",
+				"passthrough",
 				"prepend:icon",
 				"readonly",
-				"required"
+				"variant"
 			])]),
-			_: 3
-		}, 8, [
+			_: 2
+		}, [e.$slots.description ? {
+			name: "description",
+			fn: C((t) => [y(e.$slots, "description", g(m(t)))]),
+			key: "0"
+		} : void 0]), 1040, [
 			"id",
+			"clearable",
 			"compact",
 			"description",
-			"direction",
+			"disabled",
 			"errors",
 			"has-errors",
 			"has-value",
-			"has-warning",
+			"has-warnings",
 			"hide-label",
 			"hint",
+			"input-align",
 			"label",
+			"label-align",
 			"label-mode",
 			"label-position",
-			"model-value",
+			"layout",
+			"loading",
 			"name",
+			"passthrough",
+			"readonly",
 			"reverse",
+			"show-asterisk",
 			"show-hint",
 			"warnings"
 		]));
 	}
 });
 //#endregion
-export { g as default };
+export { T as default };