@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system107.js

@@ -1,9 +1,209 @@
-import e from "./design-system14.js";
-import t from "./design-system105.js";
-/* empty css                 */
-//#region src/components/BInput/BInput.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-4221495b"]]);
+import { useComponentId as e } from "./design-system10.js";
+import { useValidationField as t } from "./design-system101.js";
+import { BFormContextKey as n } from "./design-system102.js";
+import { BFormLayout as r, BFormRequiredMark as i, BFormValidateStatus as a, BFormValidateTrigger as o } from "./design-system103.js";
+import { computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, inject as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, watch as b } from "vue";
+//#region src/components/BForm/BFormItem.vue?vue&type=script&setup=true&lang.ts
+var x = ["data-form-field", "aria-labelledby"], S = ["id", "for"], C = {
+	key: 0,
+	class: "b-form-item__required-mark",
+	"aria-hidden": "true"
+}, w = {
+	key: 1,
+	class: "b-form-item__optional-mark"
+}, T = {
+	key: 2,
+	class: "b-form-item__colon",
+	"aria-hidden": "true"
+}, E = ["title"], D = { class: "b-form-item__control" }, O = { class: "b-form-item__control-input" }, k = {
+	key: 0,
+	class: "b-form-item__feedback-icon"
+}, ee = {
+	key: 0,
+	viewBox: "64 64 896 896",
+	width: "14",
+	height: "14",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, te = {
+	key: 1,
+	viewBox: "64 64 896 896",
+	width: "14",
+	height: "14",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, A = {
+	key: 2,
+	viewBox: "64 64 896 896",
+	width: "14",
+	height: "14",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, j = {
+	key: 3,
+	class: "b-form-item__loading-icon"
+}, M = ["id"], N = {
+	key: 1,
+	class: "b-form-item__extra"
+}, P = /* @__PURE__ */ f({
+	__name: "BFormItem",
+	props: {
+		label: {},
+		name: {},
+		schema: {},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		validateStatus: {},
+		help: {},
+		extra: {},
+		colon: {
+			type: [Boolean, null],
+			default: null
+		},
+		labelAlign: {},
+		labelWidth: {},
+		hidden: {
+			type: Boolean,
+			default: !1
+		},
+		noStyle: {
+			type: Boolean,
+			default: !1
+		},
+		hasFeedback: {
+			type: Boolean,
+			default: !1
+		},
+		validateTrigger: {},
+		tooltip: {},
+		layout: {}
+	},
+	setup(f, { expose: P }) {
+		let F = p(n, void 0), { componentUID: I } = e(), L = s(() => `b-form-item-${f.name ? f.name + "-" : ""}${I.value}`), R = s(() => {
+			if (f.name && F?.model) return F.model[f.name];
+		}), z = _(R.value);
+		b(R, (e) => {
+			z.value = e;
+		});
+		let B = f.name && f.schema ? t(f.name, z, f.schema) : void 0, V = s(() => {
+			if (f.validateTrigger) return Array.isArray(f.validateTrigger) ? f.validateTrigger : [f.validateTrigger];
+			let e = F?.validateTrigger ?? o.Change;
+			return Array.isArray(e) ? e : [e];
+		}), H = () => {
+			B && V.value.includes(o.Blur) && (B.markTouched(), B.validate());
+		}, U = () => {
+			B && V.value.includes(o.Change) && B.validate();
+		};
+		b(R, () => {
+			U();
+		});
+		let W = s(() => {
+			if (f.validateStatus) return f.validateStatus;
+			if (B) {
+				if (B.errors.value.length > 0) return a.Error;
+				if (B.touched.value && B.isValid.value) return a.Success;
+			}
+		}), G = s(() => f.layout === void 0 ? F?.layout === void 0 ? r.Horizontal : F.layout : f.layout), K = s(() => f.labelAlign === void 0 ? F?.labelAlign === void 0 ? "right" : F.labelAlign : f.labelAlign), q = s(() => f.colon === null ? F?.colon === void 0 ? !0 : F.colon : f.colon), J = s(() => f.labelWidth ?? F?.labelWidth), Y = s(() => F?.disabled ?? !1), X = s(() => !!(f.required || f.schema && (!f.schema.safeParse(void 0).success || !f.schema.safeParse("").success))), Z = s(() => q.value && G.value === "horizontal"), Q = s(() => {
+			let e = F?.requiredMark ?? !0;
+			return e === !1 || e === i.Optional ? !1 : X.value;
+		}), ne = s(() => (F?.requiredMark ?? !0) === i.Optional && !X.value), $ = s(() => {
+			if (f.help !== void 0) return f.help;
+			if (B && B.errors.value.length > 0) return B.errors.value[0];
+		}), re = s(() => [
+			"b-form-item",
+			`b-form-item--${G.value}`,
+			{
+				"b-form-item--has-error": W.value === a.Error,
+				"b-form-item--has-warning": W.value === a.Warning,
+				"b-form-item--has-success": W.value === a.Success,
+				"b-form-item--validating": W.value === a.Validating,
+				"b-form-item--has-feedback": f.hasFeedback,
+				"b-form-item--hidden": f.hidden,
+				"b-form-item--no-style": f.noStyle,
+				"b-form-item--required": Q.value
+			}
+		]), ie = s(() => {
+			let e = {};
+			return J.value && (e.width = J.value, e.flexShrink = "0"), e;
+		});
+		return P({
+			validate: B?.validate ?? (() => !0),
+			reset: B?.reset ?? (() => {}),
+			errors: B?.errors ?? s(() => []),
+			isValid: B?.isValid ?? s(() => !0),
+			dirty: B?.dirty ?? s(() => !1),
+			touched: B?.touched ?? s(() => !1),
+			handleBlur: H
+		}), (e, t) => f.noStyle ? v(e.$slots, "default", {
+			key: 1,
+			id: L.value,
+			status: W.value,
+			disabled: Y.value,
+			onBlur: H
+		}, void 0, !0) : (g(), l("div", {
+			key: 0,
+			class: m(re.value),
+			"data-form-field": f.name,
+			role: "group",
+			"aria-labelledby": f.label ? `${L.value}-label` : void 0
+		}, [f.label || e.$slots.label ? (g(), l("div", {
+			key: 0,
+			class: m(["b-form-item__label", [`b-form-item__label--${K.value}`]]),
+			style: h(ie.value)
+		}, [u("label", {
+			id: `${L.value}-label`,
+			for: L.value
+		}, [
+			Q.value ? (g(), l("span", C, "*")) : c("", !0),
+			v(e.$slots, "label", {}, () => [d(y(f.label), 1)], !0),
+			ne.value ? (g(), l("span", w, "(optional)")) : c("", !0),
+			Z.value ? (g(), l("span", T, ":")) : c("", !0)
+		], 8, S), f.tooltip ? (g(), l("span", {
+			key: 0,
+			class: "b-form-item__tooltip",
+			title: f.tooltip,
+			role: "img",
+			"aria-label": "Help"
+		}, [...t[0] ||= [u("svg", {
+			viewBox: "64 64 896 896",
+			width: "14",
+			height: "14",
+			fill: "currentColor",
+			"aria-hidden": "true"
+		}, [
+			u("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }),
+			u("path", { d: "M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.4-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3z" }),
+			u("path", { d: "M512 732a40 40 0 100-80 40 40 0 000 80z" })
+		], -1)]], 8, E)) : c("", !0)], 6)) : c("", !0), u("div", D, [
+			u("div", O, [v(e.$slots, "default", {
+				id: L.value,
+				status: W.value,
+				disabled: Y.value,
+				onBlur: H
+			}, void 0, !0), f.hasFeedback && W.value ? (g(), l("span", k, [W.value === "success" ? (g(), l("svg", ee, [...t[1] ||= [u("path", { d: "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" }, null, -1)]])) : W.value === "error" ? (g(), l("svg", te, [...t[2] ||= [u("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L512 449.8 295.9 191.7c-3-3.6-7.5-5.7-12.3-5.7H204c-6.8 0-10.5 7.9-6.1 13.1L460.2 512 197.8 824.9A7.95 7.95 0 00204 838h79.8c4.7 0 9.2-2.1 12.3-5.7L512 574.1l216.2 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }, null, -1)]])) : W.value === "warning" ? (g(), l("svg", A, [...t[3] ||= [u("path", { d: "M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8z" }, null, -1), u("path", { d: "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48z" }, null, -1)]])) : W.value === "validating" ? (g(), l("span", j, [...t[4] ||= [u("svg", {
+				viewBox: "0 0 1024 1024",
+				width: "14",
+				height: "14",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [u("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.3 199.3 0 19.9-16.1 36-36 36z" })], -1)]])) : c("", !0)])) : c("", !0)]),
+			$.value || e.$slots.help ? (g(), l("div", {
+				key: 0,
+				class: m(["b-form-item__help", {
+					"b-form-item__help--error": W.value === "error",
+					"b-form-item__help--warning": W.value === "warning"
+				}]),
+				id: `${L.value}-help`,
+				role: "alert",
+				"aria-live": "polite"
+			}, [v(e.$slots, "help", {}, () => [d(y($.value), 1)], !0)], 10, M)) : c("", !0),
+			f.extra || e.$slots.extra ? (g(), l("div", N, [v(e.$slots, "extra", {}, () => [d(y(f.extra), 1)], !0)])) : c("", !0)
+		])], 10, x));
+	}
+});
 //#endregion
-export { n as default };
+export { P as default };
 
 //# sourceMappingURL=design-system107.js.map

package/dist/design-system107.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system107.js","names":[],"sources":["../src/components/BInput/BInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport {\n  BInputStatus,\n  BInputVariant,\n  type BInputCountConfig,\n  type BInputFocusOptions,\n} from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  type = 'text',\n  allowClear = false,\n  showCount = false,\n  disabled = false,\n  readOnly = false,\n  placeholder,\n  maxLength,\n  id,\n  count,\n  status,\n} = defineProps<{\n  /** The size of the input. */\n  size?: `${BCommonSize}`;\n  /** Visual variant of the input. */\n  variant?: `${BInputVariant}`;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Whether the input is read-only. */\n  readOnly?: boolean;\n  /** Validation status. */\n  status?: `${BInputStatus}`;\n  /** HTML input type (text, password, email, etc.). */\n  type?: string;\n  /** Maximum number of characters. */\n  maxLength?: number;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** HTML id attribute. */\n  id?: string;\n  /** Show clear button when input has value. */\n  allowClear?: boolean;\n  /** Display character count. Can be boolean or a formatter function. */\n  showCount?: boolean | ((args: { value: string; count: number; maxLength?: number }) => string);\n  /** Advanced character counting configuration. */\n  count?: BInputCountConfig;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when input value changes. */\n  change: [value: string, event: Event];\n  /** Fired when Enter key is pressed. */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired when clear button is clicked. */\n  clear: [];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isFocused = ref(false);\nconst passwordVisible = ref(false);\n\nconst hasAddonBefore = computed(() => !!slots.addonBefore);\nconst hasAddonAfter = computed(() => !!slots.addonAfter);\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\nconst isPasswordType = computed(() => type === 'password');\nconst showPasswordToggle = computed(() => isPasswordType.value);\nconst computedType = computed(() => {\n  if (isPasswordType.value) {\n    return passwordVisible.value ? 'text' : 'password';\n  }\n  return type;\n});\n\nconst charCount = computed(() => {\n  const val = model.value ?? '';\n  if (count?.strategy) return count.strategy(val);\n  return val.length;\n});\n\nconst countMax = computed(() => count?.max ?? maxLength);\n\nconst showCountIndicator = computed(() => {\n  if (count?.show === false) return false;\n  if (count?.show !== undefined) return true;\n  return !!showCount;\n});\n\nconst countText = computed(() => {\n  const val = model.value ?? '';\n  const currentCount = charCount.value;\n\n  if (typeof count?.show === 'function') {\n    return count.show({ value: val, count: currentCount, maxLength: countMax.value });\n  }\n  if (typeof showCount === 'function') {\n    return showCount({ value: val, count: currentCount, maxLength: countMax.value });\n  }\n  if (countMax.value !== undefined) {\n    return `${currentCount} / ${countMax.value}`;\n  }\n  return `${currentCount}`;\n});\n\nconst isOverCount = computed(() => {\n  if (countMax.value === undefined) return false;\n  return charCount.value > countMax.value;\n});\n\nconst showClearButton = computed(() => {\n  return allowClear && !!model.value && !disabled && !readOnly;\n});\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  let value = target.value;\n\n  if (count?.exceedFormatter && countMax.value !== undefined) {\n    const strategy = count.strategy ?? ((v: string) => v.length);\n    if (strategy(value) > countMax.value) {\n      value = count.exceedFormatter(value, { max: countMax.value });\n      target.value = value;\n    }\n  }\n\n  model.value = value;\n  emit('change', value, e);\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    emit('pressEnter', e);\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  emit('blur', e);\n};\n\nconst handleClear = () => {\n  model.value = '';\n  emit('clear');\n  emit('change', '', new Event('change'));\n  inputRef.value?.focus();\n};\n\nconst togglePasswordVisibility = () => {\n  passwordVisible.value = !passwordVisible.value;\n  inputRef.value?.focus();\n};\n\nconst focus = (options?: BInputFocusOptions) => {\n  inputRef.value?.focus({ preventScroll: options?.preventScroll });\n  if (options?.cursor && inputRef.value) {\n    const len = inputRef.value.value.length;\n    switch (options.cursor) {\n      case 'start':\n        inputRef.value.setSelectionRange(0, 0);\n        break;\n      case 'end':\n        inputRef.value.setSelectionRange(len, len);\n        break;\n      case 'all':\n        inputRef.value.setSelectionRange(0, len);\n        break;\n    }\n  }\n};\n\nconst blur = () => {\n  inputRef.value?.blur();\n};\n\nwatch(model, (val) => {\n  if (count?.exceedFormatter && countMax.value !== undefined) {\n    const strategy = count.strategy ?? ((v: string) => v.length);\n    if (strategy(val) > countMax.value) {\n      model.value = count.exceedFormatter(val, { max: countMax.value });\n    }\n  }\n});\n\ndefineExpose({ focus, blur });\n</script>\n\n<template>\n  <span\n    class=\"b-input\"\n    :class=\"[\n      `b-input--${size}`,\n      `b-input--${variant}`,\n      {\n        'b-input--focused': isFocused,\n        'b-input--disabled': disabled,\n        'b-input--readonly': readOnly,\n        'b-input--error': status === BInputStatus.Error,\n        'b-input--warning': status === BInputStatus.Warning,\n        'b-input--has-addon-before': hasAddonBefore,\n        'b-input--has-addon-after': hasAddonAfter,\n        'b-input--over-count': isOverCount,\n      },\n    ]\"\n  >\n    <span v-if=\"hasAddonBefore\" class=\"b-input__addon b-input__addon--before\">\n      <slot name=\"addonBefore\" />\n    </span>\n\n    <span class=\"b-input__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-input__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        :value=\"model\"\n        :type=\"computedType\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        :maxlength=\"maxLength && !count?.exceedFormatter ? maxLength : undefined\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :aria-describedby=\"showCountIndicator ? `${inputId}-count` : undefined\"\n        class=\"b-input__input\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      />\n\n      <span v-if=\"showClearButton\" class=\"b-input__clear-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-input__clear\"\n          aria-label=\"Clear input\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"handleClear\"\n        >\n          <svg\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"showPasswordToggle\" class=\"b-input__password-toggle-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-input__password-toggle\"\n          :aria-label=\"passwordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"passwordVisible\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"!passwordVisible\"\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 730c-114.9 0-208-93.1-208-208s93.1-208 208-208 208 93.1 208 208-93.1 208-208 208zm0-319.8c-61.7 0-111.8 50.1-111.8 111.8S450.3 633.8 512 633.8 623.8 583.7 623.8 522 573.7 410.2 512 410.2z\"\n            />\n          </svg>\n          <svg\n            v-else\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M942.2 486.2C847.4 286.5 704.1 186 512 186c-53.8 0-104.5 9.6-151.7 28.4L212.7 67.2a8.03 8.03 0 00-11.3 0L160 108.5a8.03 8.03 0 000 11.3l740.3 740.3a8.03 8.03 0 0011.3 0l41.3-41.3a8.03 8.03 0 000-11.3l-106.8-106.8c53.1-57.6 94.3-127.4 106.2-153a60.3 60.3 0 000-51.5zM512 730c-114.9 0-208-93.1-208-208 0-40.1 11.4-77.6 31-109.4L297 374.6C270.6 414.1 256 466 256 522c0 141.4 114.6 256 256 256 56 0 107.9-18 150.2-48.5l-38-38C597.6 714.6 556.1 730 512 730zm0-520c114.9 0 208 93.1 208 208 0 40.1-11.4 77.6-31 109.4L727 565.4C753.4 525.9 768 474 768 418c0-141.4-114.6-256-256-256-56 0-107.9 18-150.2 48.5l38 38C426.4 225.4 467.9 210 512 210z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"hasSuffix\" class=\"b-input__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span\n        v-if=\"showCountIndicator\"\n        :id=\"`${inputId}-count`\"\n        class=\"b-input__count\"\n        :class=\"{ 'b-input__count--over': isOverCount }\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {{ countText }}\n      </span>\n    </span>\n\n    <span v-if=\"hasAddonAfter\" class=\"b-input__addon b-input__addon--after\">\n      <slot name=\"addonAfter\" />\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.b-input {\n  --b-input-active-bg: #ffffff;\n  --b-input-active-border-color: #1677ff;\n  --b-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-addon-bg: rgba(0, 0, 0, 0.02);\n  --b-input-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-input-hover-bg: #ffffff;\n  --b-input-hover-border-color: #4096ff;\n  --b-input-font-size: 14px;\n  --b-input-font-size-lg: 16px;\n  --b-input-font-size-sm: 14px;\n  --b-input-padding-block: 4px;\n  --b-input-padding-block-lg: 7px;\n  --b-input-padding-block-sm: 0px;\n  --b-input-padding-inline: 11px;\n  --b-input-padding-inline-lg: 11px;\n  --b-input-padding-inline-sm: 7px;\n  --b-input-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-input-border-color: #d9d9d9;\n  --b-input-bg: #ffffff;\n  --b-input-color: rgba(0, 0, 0, 0.88);\n  --b-input-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-border-radius: 6px;\n  --b-input-clear-color: rgba(0, 0, 0, 0.25);\n  --b-input-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-input-count-color: rgba(0, 0, 0, 0.65);\n  --b-input-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-input-error-border-color: #ff4d4f;\n  --b-input-error-hover-border-color: #ff7875;\n  --b-input-warning-border-color: #faad14;\n  --b-input-warning-hover-border-color: #ffc53d;\n  --b-input-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  font-size: var(--b-input-font-size);\n  color: var(--b-input-color);\n  line-height: 1.5714;\n}\n\n.b-input--lg {\n  font-size: var(--b-input-font-size-lg);\n}\n\n.b-input--sm {\n  font-size: var(--b-input-font-size-sm);\n}\n\n.b-input__wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: all 0.2s;\n}\n\n/* Outlined */\n.b-input--outlined .b-input__wrapper {\n  background: var(--b-input-bg);\n  border: 1px solid var(--b-input-border-color);\n  border-radius: var(--b-input-border-radius);\n}\n\n.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-hover-border-color);\n  background: var(--b-input-hover-bg);\n}\n\n.b-input--outlined.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-active-border-color);\n  background: var(--b-input-active-bg);\n  box-shadow: var(--b-input-active-shadow);\n}\n\n/* Filled */\n.b-input--filled .b-input__wrapper {\n  background: var(--b-input-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-input-border-radius);\n}\n\n.b-input--filled:not(.b-input--disabled):hover .b-input__wrapper {\n  background: var(--b-input-filled-hover-bg);\n}\n\n.b-input--filled.b-input--focused .b-input__wrapper {\n  background: var(--b-input-active-bg);\n  border-color: var(--b-input-active-border-color);\n  box-shadow: var(--b-input-active-shadow);\n}\n\n/* Borderless */\n.b-input--borderless .b-input__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-input-border-radius);\n}\n\n/* Underlined */\n.b-input--underlined .b-input__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-input-border-color);\n  border-radius: 0;\n}\n\n.b-input--underlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-bottom-color: var(--b-input-hover-border-color);\n}\n\n.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-active-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-active-border-color);\n}\n\n/* Error */\n.b-input--error.b-input--outlined .b-input__wrapper {\n  border-color: var(--b-input-error-border-color);\n}\n\n.b-input--error.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-error-hover-border-color);\n}\n\n.b-input--error.b-input--outlined.b-input--focused .b-input__wrapper,\n.b-input--error.b-input--filled.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-error-border-color);\n  box-shadow: var(--b-input-error-active-shadow);\n}\n\n.b-input--error.b-input--underlined .b-input__wrapper {\n  border-bottom-color: var(--b-input-error-border-color);\n}\n\n.b-input--error.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-error-border-color);\n}\n\n/* Warning */\n.b-input--warning.b-input--outlined .b-input__wrapper {\n  border-color: var(--b-input-warning-border-color);\n}\n\n.b-input--warning.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-warning-hover-border-color);\n}\n\n.b-input--warning.b-input--outlined.b-input--focused .b-input__wrapper,\n.b-input--warning.b-input--filled.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-warning-border-color);\n  box-shadow: var(--b-input-warning-active-shadow);\n}\n\n.b-input--warning.b-input--underlined .b-input__wrapper {\n  border-bottom-color: var(--b-input-warning-border-color);\n}\n\n.b-input--warning.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-warning-border-color);\n}\n\n/* Disabled */\n.b-input--disabled .b-input__wrapper {\n  background: var(--b-input-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-input--disabled .b-input__input {\n  color: var(--b-input-disabled-color);\n  cursor: not-allowed;\n}\n\n/* Addon border radius */\n.b-input--has-addon-before .b-input__wrapper {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.b-input--has-addon-after .b-input__wrapper {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Input element */\n.b-input__input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n.b-input--md .b-input__input {\n  padding: var(--b-input-padding-block) var(--b-input-padding-inline);\n}\n\n.b-input--lg .b-input__input {\n  padding: var(--b-input-padding-block-lg) var(--b-input-padding-inline-lg);\n}\n\n.b-input--sm .b-input__input {\n  padding: var(--b-input-padding-block-sm) var(--b-input-padding-inline-sm);\n}\n\n.b-input__input::placeholder {\n  color: var(--b-input-placeholder-color);\n}\n\n/* Prefix & Suffix */\n.b-input__prefix,\n.b-input__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-input-color);\n  flex-shrink: 0;\n}\n\n.b-input__prefix {\n  margin-left: var(--b-input-padding-inline);\n}\n\n.b-input__suffix {\n  margin-right: var(--b-input-padding-inline);\n}\n\n.b-input__prefix ~ .b-input__input {\n  padding-left: 4px;\n}\n\n/* Clear & password toggle */\n.b-input__clear-wrapper,\n.b-input__password-toggle-wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--b-input-padding-inline);\n}\n\n.b-input__clear,\n.b-input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-input-clear-color);\n  font-size: 14px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n\n.b-input__clear:hover,\n.b-input__password-toggle:hover {\n  color: var(--b-input-clear-hover-color);\n}\n\n/* Count */\n.b-input__count {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--b-input-padding-inline);\n  color: var(--b-input-count-color);\n  font-size: 0.857em;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.b-input__count--over {\n  color: var(--b-input-error-border-color);\n}\n\n/* Addons */\n.b-input__addon {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 11px;\n  background: var(--b-input-addon-bg);\n  border: 1px solid var(--b-input-border-color);\n  color: var(--b-input-color);\n  font-size: inherit;\n  white-space: nowrap;\n}\n\n.b-input__addon--before {\n  border-right: none;\n  border-radius: var(--b-input-border-radius) 0 0 var(--b-input-border-radius);\n}\n\n.b-input__addon--after {\n  border-left: none;\n  border-radius: 0 var(--b-input-border-radius) var(--b-input-border-radius) 0;\n}\n\n/* Dark mode — activated via data attribute on ancestor */\n[data-prefers-color='dark'] .b-input {\n  --b-input-active-bg: #141414;\n  --b-input-active-border-color: #1668dc;\n  --b-input-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-addon-bg: rgba(255, 255, 255, 0.04);\n  --b-input-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-input-hover-bg: #141414;\n  --b-input-hover-border-color: #3c89e8;\n  --b-input-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-input-border-color: #424242;\n  --b-input-bg: #141414;\n  --b-input-color: rgba(255, 255, 255, 0.88);\n  --b-input-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-clear-color: rgba(255, 255, 255, 0.25);\n  --b-input-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-input-count-color: rgba(255, 255, 255, 0.65);\n  --b-input-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-error-border-color: #dc3838;\n  --b-input-error-hover-border-color: #e86e6e;\n  --b-input-warning-border-color: #d1a300;\n  --b-input-warning-hover-border-color: #e8c631;\n  --b-input-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input {\n    --b-input-active-bg: #141414;\n    --b-input-active-border-color: #1668dc;\n    --b-input-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-addon-bg: rgba(255, 255, 255, 0.04);\n    --b-input-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-input-hover-bg: #141414;\n    --b-input-hover-border-color: #3c89e8;\n    --b-input-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-input-border-color: #424242;\n    --b-input-bg: #141414;\n    --b-input-color: rgba(255, 255, 255, 0.88);\n    --b-input-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-clear-color: rgba(255, 255, 255, 0.25);\n    --b-input-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-input-count-color: rgba(255, 255, 255, 0.65);\n    --b-input-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-error-border-color: #dc3838;\n    --b-input-error-hover-border-color: #e86e6e;\n    --b-input-warning-border-color: #d1a300;\n    --b-input-warning-hover-border-color: #e8c631;\n    --b-input-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input__wrapper,\n  .b-input__clear,\n  .b-input__password-toggle {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system107.js","names":["$slots"],"sources":["../src/components/BForm/BFormItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { useValidationField } from '@/composables/useValidation.ts';\nimport { computed, inject, ref, watch } from 'vue';\nimport type { ZodType } from 'zod';\nimport { BFormContextKey } from './context.ts';\nimport {\n  BFormLayout,\n  BFormRequiredMark,\n  BFormValidateStatus,\n  BFormValidateTrigger,\n} from './types.ts';\n\nconst {\n  label,\n  name,\n  schema,\n  required = false,\n  validateStatus,\n  help,\n  extra,\n  colon = null,\n  labelAlign,\n  labelWidth,\n  hidden = false,\n  noStyle = false,\n  hasFeedback = false,\n  tooltip,\n  layout,\n  validateTrigger,\n} = defineProps<{\n  /** Label text for the form item. */\n  label?: string;\n  /** Field name (used for validation and form data collection). */\n  name?: string;\n  /** Zod schema for field validation. */\n  schema?: ZodType;\n  /** Whether to display a required mark (visual only, does not add validation). */\n  required?: boolean;\n  /** Manual validation status override. */\n  validateStatus?: `${BFormValidateStatus}`;\n  /** Custom help/error message (overrides auto-generated). */\n  help?: string;\n  /** Extra hint text below the control. */\n  extra?: string;\n  /** Override parent form colon setting. Pass true/false to override, omit to inherit. */\n  colon?: boolean | null;\n  /** Override parent form label alignment. */\n  labelAlign?: 'left' | 'right';\n  /** Override parent form label width. */\n  labelWidth?: string;\n  /** Hide the form item visually but still validate. */\n  hidden?: boolean;\n  /** Render control only, no wrapper/label/margin. */\n  noStyle?: boolean;\n  /** Show validation feedback icon. */\n  hasFeedback?: boolean;\n  /** Override validation trigger. */\n  validateTrigger?: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  /** Tooltip text for the label. */\n  tooltip?: string;\n  /** Per-item layout override. */\n  layout?: 'horizontal' | 'vertical';\n}>();\n\nconst formContext = inject(BFormContextKey, undefined);\n\nconst { componentUID } = useComponentId();\nconst fieldId = computed(() => `b-form-item-${name ? name + '-' : ''}${componentUID.value}`);\n\nconst fieldValueRef = computed(() => {\n  if (name && formContext?.model) {\n    return formContext.model[name];\n  }\n  return undefined;\n});\n\nconst fieldValueAsRef = ref(fieldValueRef.value);\nwatch(fieldValueRef, (val) => {\n  fieldValueAsRef.value = val;\n});\n\nconst hasValidation = !!(name && schema);\n\nconst validation = hasValidation\n  ? useValidationField(name!, fieldValueAsRef, schema!)\n  : undefined;\n\nconst resolvedTrigger = computed(() => {\n  if (validateTrigger) return Array.isArray(validateTrigger) ? validateTrigger : [validateTrigger];\n  const parentTrigger = formContext?.validateTrigger ?? BFormValidateTrigger.Change;\n  return Array.isArray(parentTrigger) ? parentTrigger : [parentTrigger];\n});\n\nconst handleBlur = () => {\n  if (validation && resolvedTrigger.value.includes(BFormValidateTrigger.Blur)) {\n    validation.markTouched();\n    validation.validate();\n  }\n};\n\nconst handleChange = () => {\n  if (validation && resolvedTrigger.value.includes(BFormValidateTrigger.Change)) {\n    validation.validate();\n  }\n};\n\nwatch(fieldValueRef, () => {\n  handleChange();\n});\n\nconst computedStatus = computed<`${BFormValidateStatus}` | undefined>(() => {\n  if (validateStatus) return validateStatus;\n  if (!validation) return undefined;\n  if (validation.errors.value.length > 0) return BFormValidateStatus.Error;\n  if (validation.touched.value && validation.isValid.value) return BFormValidateStatus.Success;\n  return undefined;\n});\n\nconst resolvedLayout = computed(() => {\n  if (layout !== undefined) return layout;\n  if (formContext?.layout !== undefined) return formContext.layout;\n  return BFormLayout.Horizontal;\n});\nconst resolvedLabelAlign = computed(() => {\n  if (labelAlign !== undefined) return labelAlign;\n  if (formContext?.labelAlign !== undefined) return formContext.labelAlign;\n  return 'right';\n});\nconst resolvedColon = computed(() => {\n  if (colon !== null) return colon;\n  if (formContext?.colon !== undefined) return formContext.colon;\n  return true;\n});\nconst resolvedLabelWidth = computed(() => labelWidth ?? formContext?.labelWidth);\nconst isDisabled = computed(() => formContext?.disabled ?? false);\n\nconst isRequired = computed(() => {\n  if (required) return true;\n  if (schema) {\n    const result = schema.safeParse(undefined);\n    if (!result.success) return true;\n    const emptyResult = schema.safeParse('');\n    if (!emptyResult.success) return true;\n  }\n  return false;\n});\n\nconst showColon = computed(() => resolvedColon.value && resolvedLayout.value === 'horizontal');\n\nconst showRequiredMark = computed(() => {\n  const mark = formContext?.requiredMark ?? true;\n  if (mark === false) return false;\n  if (mark === BFormRequiredMark.Optional) return false;\n  return isRequired.value;\n});\n\nconst showOptionalMark = computed(() => {\n  const mark = formContext?.requiredMark ?? true;\n  return mark === BFormRequiredMark.Optional && !isRequired.value;\n});\n\nconst helpMessage = computed(() => {\n  if (help !== undefined) return help;\n  if (validation && validation.errors.value.length > 0) return validation.errors.value[0];\n  return undefined;\n});\n\nconst itemClasses = computed(() => [\n  'b-form-item',\n  `b-form-item--${resolvedLayout.value}`,\n  {\n    'b-form-item--has-error': computedStatus.value === BFormValidateStatus.Error,\n    'b-form-item--has-warning': computedStatus.value === BFormValidateStatus.Warning,\n    'b-form-item--has-success': computedStatus.value === BFormValidateStatus.Success,\n    'b-form-item--validating': computedStatus.value === BFormValidateStatus.Validating,\n    'b-form-item--has-feedback': hasFeedback,\n    'b-form-item--hidden': hidden,\n    'b-form-item--no-style': noStyle,\n    'b-form-item--required': showRequiredMark.value,\n  },\n]);\n\nconst labelStyle = computed(() => {\n  const styles: Record<string, string> = {};\n  if (resolvedLabelWidth.value) {\n    styles.width = resolvedLabelWidth.value;\n    styles.flexShrink = '0';\n  }\n  return styles;\n});\n\ndefineExpose({\n  validate: validation?.validate ?? (() => true),\n  reset: validation?.reset ?? (() => {}),\n  errors: validation?.errors ?? computed(() => []),\n  isValid: validation?.isValid ?? computed(() => true),\n  dirty: validation?.dirty ?? computed(() => false),\n  touched: validation?.touched ?? computed(() => false),\n  handleBlur,\n});\n</script>\n\n<template>\n  <div\n    v-if=\"!noStyle\"\n    :class=\"itemClasses\"\n    :data-form-field=\"name\"\n    role=\"group\"\n    :aria-labelledby=\"label ? `${fieldId}-label` : undefined\"\n  >\n    <div\n      v-if=\"label || $slots.label\"\n      class=\"b-form-item__label\"\n      :class=\"[`b-form-item__label--${resolvedLabelAlign}`]\"\n      :style=\"labelStyle\"\n    >\n      <label :id=\"`${fieldId}-label`\" :for=\"fieldId\">\n        <span v-if=\"showRequiredMark\" class=\"b-form-item__required-mark\" aria-hidden=\"true\">*</span>\n        <slot name=\"label\">{{ label }}</slot>\n        <span v-if=\"showOptionalMark\" class=\"b-form-item__optional-mark\">(optional)</span>\n        <span\n          v-if=\"showColon\"\n          class=\"b-form-item__colon\"\n          aria-hidden=\"true\"\n        >:</span>\n      </label>\n      <span v-if=\"tooltip\" class=\"b-form-item__tooltip\" :title=\"tooltip\" role=\"img\" aria-label=\"Help\">\n        <svg viewBox=\"64 64 896 896\" width=\"14\" height=\"14\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path\n            d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z\"\n          />\n          <path\n            d=\"M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.4-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3z\"\n          />\n          <path d=\"M512 732a40 40 0 100-80 40 40 0 000 80z\" />\n        </svg>\n      </span>\n    </div>\n\n    <div class=\"b-form-item__control\">\n      <div class=\"b-form-item__control-input\">\n        <slot :id=\"fieldId\" :status=\"computedStatus\" :disabled=\"isDisabled\" :on-blur=\"handleBlur\" />\n        <span v-if=\"hasFeedback && computedStatus\" class=\"b-form-item__feedback-icon\">\n          <svg\n            v-if=\"computedStatus === 'success'\"\n            viewBox=\"64 64 896 896\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z\"\n            />\n          </svg>\n          <svg\n            v-else-if=\"computedStatus === 'error'\"\n            viewBox=\"64 64 896 896\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L512 449.8 295.9 191.7c-3-3.6-7.5-5.7-12.3-5.7H204c-6.8 0-10.5 7.9-6.1 13.1L460.2 512 197.8 824.9A7.95 7.95 0 00204 838h79.8c4.7 0 9.2-2.1 12.3-5.7L512 574.1l216.2 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z\"\n            />\n          </svg>\n          <svg\n            v-else-if=\"computedStatus === 'warning'\"\n            viewBox=\"64 64 896 896\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8z\"\n            />\n            <path\n              d=\"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48z\"\n            />\n          </svg>\n          <span v-else-if=\"computedStatus === 'validating'\" class=\"b-form-item__loading-icon\">\n            <svg viewBox=\"0 0 1024 1024\" width=\"14\" height=\"14\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path\n                d=\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.3 199.3 0 19.9-16.1 36-36 36z\"\n              />\n            </svg>\n          </span>\n        </span>\n      </div>\n\n      <div\n        v-if=\"helpMessage || $slots.help\"\n        class=\"b-form-item__help\"\n        :class=\"{\n          'b-form-item__help--error': computedStatus === 'error',\n          'b-form-item__help--warning': computedStatus === 'warning',\n        }\"\n        :id=\"`${fieldId}-help`\"\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        <slot name=\"help\">{{ helpMessage }}</slot>\n      </div>\n\n      <div v-if=\"extra || $slots.extra\" class=\"b-form-item__extra\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </div>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot :id=\"fieldId\" :status=\"computedStatus\" :disabled=\"isDisabled\" :on-blur=\"handleBlur\" />\n  </template>\n</template>\n\n<style scoped>\n.b-form-item {\n  margin-bottom: var(--b-form-item-margin-bottom, 24px);\n}\n\n.b-form-item--horizontal {\n  display: flex;\n  align-items: flex-start;\n}\n\n.b-form-item--vertical {\n  display: flex;\n  flex-direction: column;\n}\n\n.b-form-item--hidden {\n  display: none;\n}\n\n:deep(.b-form--inline) .b-form-item {\n  margin-bottom: var(--b-form-inline-item-margin-bottom, 0);\n}\n\n/* Label */\n.b-form-item__label {\n  display: inline-flex;\n  align-items: center;\n  height: var(--b-form-label-height, 32px);\n  color: var(--b-form-label-color, rgba(0, 0, 0, 0.88));\n  font-size: var(--b-form-label-font-size, 14px);\n  line-height: 1.5714;\n  white-space: nowrap;\n}\n\n.b-form-item--horizontal .b-form-item__label {\n  margin-right: 8px;\n  flex-shrink: 0;\n}\n\n.b-form-item--vertical .b-form-item__label {\n  margin: var(--b-form-vertical-label-margin, 0);\n  padding: var(--b-form-vertical-label-padding, 0 0 8px);\n  height: auto;\n}\n\n.b-form-item__label--left {\n  text-align: left;\n  justify-content: flex-start;\n}\n\n.b-form-item__label--right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n.b-form-item__label label {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  cursor: default;\n}\n\n.b-form-item__required-mark {\n  color: var(--b-form-label-required-mark-color, #ff4d4f);\n  margin-right: 4px;\n  font-family: SimSun, sans-serif;\n  line-height: 1;\n}\n\n.b-form-item__optional-mark {\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n  margin-left: 4px;\n  font-size: 12px;\n  font-style: italic;\n}\n\n.b-form-item__colon {\n  margin-inline-start: var(--b-form-label-colon-margin-inline-start, 2px);\n  margin-inline-end: var(--b-form-label-colon-margin-inline-end, 8px);\n}\n\n.b-form-item__tooltip {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n  cursor: help;\n}\n\n/* Control */\n.b-form-item__control {\n  flex: 1;\n  min-width: 0;\n}\n\n.b-form-item__control-input {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n/* Feedback icon */\n.b-form-item__feedback-icon {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 8px;\n  flex-shrink: 0;\n}\n\n.b-form-item--has-success .b-form-item__feedback-icon {\n  color: var(--b-form-success-color, #52c41a);\n}\n\n.b-form-item--has-error .b-form-item__feedback-icon {\n  color: var(--b-form-error-color, #ff4d4f);\n}\n\n.b-form-item--has-warning .b-form-item__feedback-icon {\n  color: var(--b-form-warning-color, #faad14);\n}\n\n.b-form-item__loading-icon {\n  display: inline-flex;\n  animation: b-form-spin 1s linear infinite;\n}\n\n@keyframes b-form-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Help & Extra */\n.b-form-item__help {\n  min-height: 22px;\n  padding-top: 2px;\n  font-size: 14px;\n  line-height: 1.5714;\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.b-form-item__help--error {\n  color: var(--b-form-error-color, #ff4d4f);\n}\n\n.b-form-item__help--warning {\n  color: var(--b-form-warning-color, #faad14);\n}\n\n.b-form-item__extra {\n  padding-top: 2px;\n  font-size: 14px;\n  line-height: 1.5714;\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-form-item__help {\n    transition: none;\n  }\n\n  .b-form-item__loading-icon {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEA,IAAM,IAAc,EAAO,GAAiB,KAAA,EAAU,EAEhD,EAAE,oBAAiB,GAAgB,EACnC,IAAU,QAAe,eAAe,EAAA,OAAO,EAAA,OAAO,MAAM,KAAK,EAAa,QAAQ,EAEtF,IAAgB,QAAe;AACnC,OAAI,EAAA,QAAQ,GAAa,MACvB,QAAO,EAAY,MAAM,EAAA;IAG3B,EAEI,IAAkB,EAAI,EAAc,MAAM;AAChD,IAAM,IAAgB,MAAQ;AAC5B,KAAgB,QAAQ;IACxB;EAIF,IAAM,IAFmB,EAAA,QAAQ,EAAA,SAG7B,EAAmB,EAAA,MAAO,GAAiB,EAAA,OAAO,GAClD,KAAA,GAEE,IAAkB,QAAe;AACrC,OAAI,EAAA,gBAAiB,QAAO,MAAM,QAAQ,EAAA,gBAAgB,GAAG,EAAA,kBAAkB,CAAC,EAAA,gBAAgB;GAChG,IAAM,IAAgB,GAAa,mBAAmB,EAAqB;AAC3E,UAAO,MAAM,QAAQ,EAAc,GAAG,IAAgB,CAAC,EAAc;IACrE,EAEI,UAAmB;AACvB,GAAI,KAAc,EAAgB,MAAM,SAAS,EAAqB,KAAK,KACzE,EAAW,aAAa,EACxB,EAAW,UAAU;KAInB,UAAqB;AACzB,GAAI,KAAc,EAAgB,MAAM,SAAS,EAAqB,OAAO,IAC3E,EAAW,UAAU;;AAIzB,IAAM,SAAqB;AACzB,MAAc;IACd;EAEF,IAAM,IAAiB,QAAqD;AAC1E,OAAI,EAAA,eAAgB,QAAO,EAAA;AACtB,UACL;QAAI,EAAW,OAAO,MAAM,SAAS,EAAG,QAAO,EAAoB;AACnE,QAAI,EAAW,QAAQ,SAAS,EAAW,QAAQ,MAAO,QAAO,EAAoB;;IAErF,EAEI,IAAiB,QACjB,EAAA,WAAW,KAAA,IACX,GAAa,WAAW,KAAA,IACrB,EAAY,aAD2B,EAAY,SADzB,EAAA,OAGjC,EACI,IAAqB,QACrB,EAAA,eAAe,KAAA,IACf,GAAa,eAAe,KAAA,IACzB,UAD2C,EAAY,aADzB,EAAA,WAGrC,EACI,IAAgB,QAChB,EAAA,UAAU,OACV,GAAa,UAAU,KAAA,IACpB,KADsC,EAAY,QAD9B,EAAA,MAG3B,EACI,IAAqB,QAAe,EAAA,cAAc,GAAa,WAAW,EAC1E,IAAa,QAAe,GAAa,YAAY,GAAM,EAE3D,IAAa,QAEjB,GADI,EAAA,YACA,EAAA,WAEE,CADW,EAAA,OAAO,UAAU,KAAA,EAAU,CAC9B,WAER,CADgB,EAAA,OAAO,UAAU,GAAG,CACvB,UAGnB,EAEI,IAAY,QAAe,EAAc,SAAS,EAAe,UAAU,aAAa,EAExF,IAAmB,QAAe;GACtC,IAAM,IAAO,GAAa,gBAAgB;AAG1C,UAFI,MAAS,MACT,MAAS,EAAkB,WAAiB,KACzC,EAAW;IAClB,EAEI,KAAmB,SACV,GAAa,gBAAgB,QAC1B,EAAkB,YAAY,CAAC,EAAW,MAC1D,EAEI,IAAc,QAAe;AACjC,OAAI,EAAA,SAAS,KAAA,EAAW,QAAO,EAAA;AAC/B,OAAI,KAAc,EAAW,OAAO,MAAM,SAAS,EAAG,QAAO,EAAW,OAAO,MAAM;IAErF,EAEI,KAAc,QAAe;GACjC;GACA,gBAAgB,EAAe;GAC/B;IACE,0BAA0B,EAAe,UAAU,EAAoB;IACvE,4BAA4B,EAAe,UAAU,EAAoB;IACzE,4BAA4B,EAAe,UAAU,EAAoB;IACzE,2BAA2B,EAAe,UAAU,EAAoB;IACxE,6BAA6B,EAAA;IAC7B,uBAAuB,EAAA;IACvB,yBAAyB,EAAA;IACzB,yBAAyB,EAAiB;IAC3C;GACF,CAAC,EAEI,KAAa,QAAe;GAChC,IAAM,IAAiC,EAAE;AAKzC,UAJI,EAAmB,UACrB,EAAO,QAAQ,EAAmB,OAClC,EAAO,aAAa,MAEf;IACP;SAEF,EAAa;GACX,UAAU,GAAY,mBAAmB;GACzC,OAAO,GAAY,gBAAgB;GACnC,QAAQ,GAAY,UAAU,QAAe,EAAE,CAAC;GAChD,SAAS,GAAY,WAAW,QAAe,GAAK;GACpD,OAAO,GAAY,SAAS,QAAe,GAAM;GACjD,SAAS,GAAY,WAAW,QAAe,GAAM;GACrD;GACD,CAAC,YAKS,EAAA,UA6GP,EAA4F,EAAA,QAAA,WAAA;;GAArF,IAAI,EAAA;GAAU,QAAQ,EAAA;GAAiB,UAAU,EAAA;GAAa,QAAS;oBA7GvE,GAAA,EADT,EA2GM,OAAA;;GAzGH,OAAK,EAAE,GAAA,MAAW;GAClB,mBAAiB,EAAA;GAClB,MAAK;GACJ,mBAAiB,EAAA,QAAK,GAAM,EAAA,MAAO,UAAW,KAAA;MAGvC,EAAA,SAASA,EAAAA,OAAO,SAAA,GAAA,EADxB,EA2BM,OAAA;;GAzBJ,OAAK,EAAA,CAAC,sBAAoB,CAAA,uBACM,EAAA,QAAkB,CAAA,CAAA;GACjD,OAAK,EAAE,GAAA,MAAU;MAElB,EASQ,SAAA;GATA,IAAE,GAAK,EAAA,MAAO;GAAW,KAAK,EAAA;;GACxB,EAAA,SAAA,GAAA,EAAZ,EAA4F,QAA5F,GAAoF,IAAC,IAAA,EAAA,IAAA,GAAA;GACrF,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,EAAA,GAAA;GACf,GAAA,SAAA,GAAA,EAAZ,EAAkF,QAAlF,GAAiE,aAAU,IAAA,EAAA,IAAA,GAAA;GAEnE,EAAA,SAAA,GAAA,EADR,EAIS,QAJT,GAIC,IAAC,IAAA,EAAA,IAAA,GAAA;YAEQ,EAAA,WAAA,GAAA,EAAZ,EAUO,QAAA;;GAVc,OAAM;GAAwB,OAAO,EAAA;GAAS,MAAK;GAAM,cAAW;mBACvF,EAQM,OAAA;GARD,SAAQ;GAAgB,OAAM;GAAK,QAAO;GAAK,MAAK;GAAe,eAAY;;GAClF,EAEE,QAAA,EADA,GAAE,iLAA+K,CAAA;GAEnL,EAEE,QAAA,EADA,GAAE,8XAA4X,CAAA;GAEhY,EAAoD,QAAA,EAA9C,GAAE,2CAAyC,CAAA;kDAKvD,EAsEM,OAtEN,GAsEM;GArEJ,EAkDM,OAlDN,GAkDM,CAjDJ,EAA4F,EAAA,QAAA,WAAA;IAArF,IAAI,EAAA;IAAU,QAAQ,EAAA;IAAiB,UAAU,EAAA;IAAa,QAAS;mBAClE,EAAA,eAAe,EAAA,SAAA,GAAA,EAA3B,EA+CO,QA/CP,GA+CO,CA7CG,EAAA,UAAc,aAAA,GAAA,EADtB,EAWM,OAXN,IAWM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEE,QAAA,EADA,GAAE,4LAA0L,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,IAInL,EAAA,UAAc,WAAA,GAAA,EAD3B,EAWM,OAXN,IAWM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEE,QAAA,EADA,GAAE,wTAAsT,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,IAI/S,EAAA,UAAc,aAAA,GAAA,EAD3B,EAcM,OAdN,GAcM,CAAA,GAAA,AAAA,EAAA,OAAA,CANJ,EAEE,QAAA,EADA,GAAE,oIAAkI,EAAA,MAAA,GAAA,EAEtI,EAEE,QAAA,EADA,GAAE,iIAA+H,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,IAGpH,EAAA,UAAc,gBAAA,GAAA,EAA/B,EAMO,QANP,GAMO,CAAA,GAAA,AAAA,EAAA,OAAA,CALL,EAIM,OAAA;IAJD,SAAQ;IAAgB,OAAM;IAAK,QAAO;IAAK,MAAK;IAAe,eAAY;OAClF,EAEE,QAAA,EADA,GAAE,+TAA6T,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;GAQjU,EAAA,SAAeA,EAAAA,OAAO,QAAA,GAAA,EAD9B,EAYM,OAAA;;IAVJ,OAAK,EAAA,CAAC,qBAAmB;iCACuB,EAAA,UAAc;mCAAsD,EAAA,UAAc;;IAIjI,IAAE,GAAK,EAAA,MAAO;IACf,MAAK;IACL,aAAU;OAEV,EAA0C,EAAA,QAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAArB,EAAA,MAAW,EAAA,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAGvB,EAAA,SAASA,EAAAA,OAAO,SAAA,GAAA,EAA3B,EAEM,OAFN,GAEM,CADJ,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,EAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system109.js

@@ -0,0 +1,9 @@
+import e from "./design-system14.js";
+import t from "./design-system107.js";
+/* empty css                 */
+//#region src/components/BForm/BFormItem.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-6fe6001b"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=design-system109.js.map

package/dist/design-system109.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system109.js","names":[],"sources":["../src/components/BForm/BFormItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { useValidationField } from '@/composables/useValidation.ts';\nimport { computed, inject, ref, watch } from 'vue';\nimport type { ZodType } from 'zod';\nimport { BFormContextKey } from './context.ts';\nimport {\n  BFormLayout,\n  BFormRequiredMark,\n  BFormValidateStatus,\n  BFormValidateTrigger,\n} from './types.ts';\n\nconst {\n  label,\n  name,\n  schema,\n  required = false,\n  validateStatus,\n  help,\n  extra,\n  colon = null,\n  labelAlign,\n  labelWidth,\n  hidden = false,\n  noStyle = false,\n  hasFeedback = false,\n  tooltip,\n  layout,\n  validateTrigger,\n} = defineProps<{\n  /** Label text for the form item. */\n  label?: string;\n  /** Field name (used for validation and form data collection). */\n  name?: string;\n  /** Zod schema for field validation. */\n  schema?: ZodType;\n  /** Whether to display a required mark (visual only, does not add validation). */\n  required?: boolean;\n  /** Manual validation status override. */\n  validateStatus?: `${BFormValidateStatus}`;\n  /** Custom help/error message (overrides auto-generated). */\n  help?: string;\n  /** Extra hint text below the control. */\n  extra?: string;\n  /** Override parent form colon setting. Pass true/false to override, omit to inherit. */\n  colon?: boolean | null;\n  /** Override parent form label alignment. */\n  labelAlign?: 'left' | 'right';\n  /** Override parent form label width. */\n  labelWidth?: string;\n  /** Hide the form item visually but still validate. */\n  hidden?: boolean;\n  /** Render control only, no wrapper/label/margin. */\n  noStyle?: boolean;\n  /** Show validation feedback icon. */\n  hasFeedback?: boolean;\n  /** Override validation trigger. */\n  validateTrigger?: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  /** Tooltip text for the label. */\n  tooltip?: string;\n  /** Per-item layout override. */\n  layout?: 'horizontal' | 'vertical';\n}>();\n\nconst formContext = inject(BFormContextKey, undefined);\n\nconst { componentUID } = useComponentId();\nconst fieldId = computed(() => `b-form-item-${name ? name + '-' : ''}${componentUID.value}`);\n\nconst fieldValueRef = computed(() => {\n  if (name && formContext?.model) {\n    return formContext.model[name];\n  }\n  return undefined;\n});\n\nconst fieldValueAsRef = ref(fieldValueRef.value);\nwatch(fieldValueRef, (val) => {\n  fieldValueAsRef.value = val;\n});\n\nconst hasValidation = !!(name && schema);\n\nconst validation = hasValidation\n  ? useValidationField(name!, fieldValueAsRef, schema!)\n  : undefined;\n\nconst resolvedTrigger = computed(() => {\n  if (validateTrigger) return Array.isArray(validateTrigger) ? validateTrigger : [validateTrigger];\n  const parentTrigger = formContext?.validateTrigger ?? BFormValidateTrigger.Change;\n  return Array.isArray(parentTrigger) ? parentTrigger : [parentTrigger];\n});\n\nconst handleBlur = () => {\n  if (validation && resolvedTrigger.value.includes(BFormValidateTrigger.Blur)) {\n    validation.markTouched();\n    validation.validate();\n  }\n};\n\nconst handleChange = () => {\n  if (validation && resolvedTrigger.value.includes(BFormValidateTrigger.Change)) {\n    validation.validate();\n  }\n};\n\nwatch(fieldValueRef, () => {\n  handleChange();\n});\n\nconst computedStatus = computed<`${BFormValidateStatus}` | undefined>(() => {\n  if (validateStatus) return validateStatus;\n  if (!validation) return undefined;\n  if (validation.errors.value.length > 0) return BFormValidateStatus.Error;\n  if (validation.touched.value && validation.isValid.value) return BFormValidateStatus.Success;\n  return undefined;\n});\n\nconst resolvedLayout = computed(() => {\n  if (layout !== undefined) return layout;\n  if (formContext?.layout !== undefined) return formContext.layout;\n  return BFormLayout.Horizontal;\n});\nconst resolvedLabelAlign = computed(() => {\n  if (labelAlign !== undefined) return labelAlign;\n  if (formContext?.labelAlign !== undefined) return formContext.labelAlign;\n  return 'right';\n});\nconst resolvedColon = computed(() => {\n  if (colon !== null) return colon;\n  if (formContext?.colon !== undefined) return formContext.colon;\n  return true;\n});\nconst resolvedLabelWidth = computed(() => labelWidth ?? formContext?.labelWidth);\nconst isDisabled = computed(() => formContext?.disabled ?? false);\n\nconst isRequired = computed(() => {\n  if (required) return true;\n  if (schema) {\n    const result = schema.safeParse(undefined);\n    if (!result.success) return true;\n    const emptyResult = schema.safeParse('');\n    if (!emptyResult.success) return true;\n  }\n  return false;\n});\n\nconst showColon = computed(() => resolvedColon.value && resolvedLayout.value === 'horizontal');\n\nconst showRequiredMark = computed(() => {\n  const mark = formContext?.requiredMark ?? true;\n  if (mark === false) return false;\n  if (mark === BFormRequiredMark.Optional) return false;\n  return isRequired.value;\n});\n\nconst showOptionalMark = computed(() => {\n  const mark = formContext?.requiredMark ?? true;\n  return mark === BFormRequiredMark.Optional && !isRequired.value;\n});\n\nconst helpMessage = computed(() => {\n  if (help !== undefined) return help;\n  if (validation && validation.errors.value.length > 0) return validation.errors.value[0];\n  return undefined;\n});\n\nconst itemClasses = computed(() => [\n  'b-form-item',\n  `b-form-item--${resolvedLayout.value}`,\n  {\n    'b-form-item--has-error': computedStatus.value === BFormValidateStatus.Error,\n    'b-form-item--has-warning': computedStatus.value === BFormValidateStatus.Warning,\n    'b-form-item--has-success': computedStatus.value === BFormValidateStatus.Success,\n    'b-form-item--validating': computedStatus.value === BFormValidateStatus.Validating,\n    'b-form-item--has-feedback': hasFeedback,\n    'b-form-item--hidden': hidden,\n    'b-form-item--no-style': noStyle,\n    'b-form-item--required': showRequiredMark.value,\n  },\n]);\n\nconst labelStyle = computed(() => {\n  const styles: Record<string, string> = {};\n  if (resolvedLabelWidth.value) {\n    styles.width = resolvedLabelWidth.value;\n    styles.flexShrink = '0';\n  }\n  return styles;\n});\n\ndefineExpose({\n  validate: validation?.validate ?? (() => true),\n  reset: validation?.reset ?? (() => {}),\n  errors: validation?.errors ?? computed(() => []),\n  isValid: validation?.isValid ?? computed(() => true),\n  dirty: validation?.dirty ?? computed(() => false),\n  touched: validation?.touched ?? computed(() => false),\n  handleBlur,\n});\n</script>\n\n<template>\n  <div\n    v-if=\"!noStyle\"\n    :class=\"itemClasses\"\n    :data-form-field=\"name\"\n    role=\"group\"\n    :aria-labelledby=\"label ? `${fieldId}-label` : undefined\"\n  >\n    <div\n      v-if=\"label || $slots.label\"\n      class=\"b-form-item__label\"\n      :class=\"[`b-form-item__label--${resolvedLabelAlign}`]\"\n      :style=\"labelStyle\"\n    >\n      <label :id=\"`${fieldId}-label`\" :for=\"fieldId\">\n        <span v-if=\"showRequiredMark\" class=\"b-form-item__required-mark\" aria-hidden=\"true\">*</span>\n        <slot name=\"label\">{{ label }}</slot>\n        <span v-if=\"showOptionalMark\" class=\"b-form-item__optional-mark\">(optional)</span>\n        <span\n          v-if=\"showColon\"\n          class=\"b-form-item__colon\"\n          aria-hidden=\"true\"\n        >:</span>\n      </label>\n      <span v-if=\"tooltip\" class=\"b-form-item__tooltip\" :title=\"tooltip\" role=\"img\" aria-label=\"Help\">\n        <svg viewBox=\"64 64 896 896\" width=\"14\" height=\"14\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path\n            d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z\"\n          />\n          <path\n            d=\"M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.4-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3z\"\n          />\n          <path d=\"M512 732a40 40 0 100-80 40 40 0 000 80z\" />\n        </svg>\n      </span>\n    </div>\n\n    <div class=\"b-form-item__control\">\n      <div class=\"b-form-item__control-input\">\n        <slot :id=\"fieldId\" :status=\"computedStatus\" :disabled=\"isDisabled\" :on-blur=\"handleBlur\" />\n        <span v-if=\"hasFeedback && computedStatus\" class=\"b-form-item__feedback-icon\">\n          <svg\n            v-if=\"computedStatus === 'success'\"\n            viewBox=\"64 64 896 896\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z\"\n            />\n          </svg>\n          <svg\n            v-else-if=\"computedStatus === 'error'\"\n            viewBox=\"64 64 896 896\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L512 449.8 295.9 191.7c-3-3.6-7.5-5.7-12.3-5.7H204c-6.8 0-10.5 7.9-6.1 13.1L460.2 512 197.8 824.9A7.95 7.95 0 00204 838h79.8c4.7 0 9.2-2.1 12.3-5.7L512 574.1l216.2 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z\"\n            />\n          </svg>\n          <svg\n            v-else-if=\"computedStatus === 'warning'\"\n            viewBox=\"64 64 896 896\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8z\"\n            />\n            <path\n              d=\"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48z\"\n            />\n          </svg>\n          <span v-else-if=\"computedStatus === 'validating'\" class=\"b-form-item__loading-icon\">\n            <svg viewBox=\"0 0 1024 1024\" width=\"14\" height=\"14\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path\n                d=\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.3 199.3 0 19.9-16.1 36-36 36z\"\n              />\n            </svg>\n          </span>\n        </span>\n      </div>\n\n      <div\n        v-if=\"helpMessage || $slots.help\"\n        class=\"b-form-item__help\"\n        :class=\"{\n          'b-form-item__help--error': computedStatus === 'error',\n          'b-form-item__help--warning': computedStatus === 'warning',\n        }\"\n        :id=\"`${fieldId}-help`\"\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        <slot name=\"help\">{{ helpMessage }}</slot>\n      </div>\n\n      <div v-if=\"extra || $slots.extra\" class=\"b-form-item__extra\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </div>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot :id=\"fieldId\" :status=\"computedStatus\" :disabled=\"isDisabled\" :on-blur=\"handleBlur\" />\n  </template>\n</template>\n\n<style scoped>\n.b-form-item {\n  margin-bottom: var(--b-form-item-margin-bottom, 24px);\n}\n\n.b-form-item--horizontal {\n  display: flex;\n  align-items: flex-start;\n}\n\n.b-form-item--vertical {\n  display: flex;\n  flex-direction: column;\n}\n\n.b-form-item--hidden {\n  display: none;\n}\n\n:deep(.b-form--inline) .b-form-item {\n  margin-bottom: var(--b-form-inline-item-margin-bottom, 0);\n}\n\n/* Label */\n.b-form-item__label {\n  display: inline-flex;\n  align-items: center;\n  height: var(--b-form-label-height, 32px);\n  color: var(--b-form-label-color, rgba(0, 0, 0, 0.88));\n  font-size: var(--b-form-label-font-size, 14px);\n  line-height: 1.5714;\n  white-space: nowrap;\n}\n\n.b-form-item--horizontal .b-form-item__label {\n  margin-right: 8px;\n  flex-shrink: 0;\n}\n\n.b-form-item--vertical .b-form-item__label {\n  margin: var(--b-form-vertical-label-margin, 0);\n  padding: var(--b-form-vertical-label-padding, 0 0 8px);\n  height: auto;\n}\n\n.b-form-item__label--left {\n  text-align: left;\n  justify-content: flex-start;\n}\n\n.b-form-item__label--right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n.b-form-item__label label {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  cursor: default;\n}\n\n.b-form-item__required-mark {\n  color: var(--b-form-label-required-mark-color, #ff4d4f);\n  margin-right: 4px;\n  font-family: SimSun, sans-serif;\n  line-height: 1;\n}\n\n.b-form-item__optional-mark {\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n  margin-left: 4px;\n  font-size: 12px;\n  font-style: italic;\n}\n\n.b-form-item__colon {\n  margin-inline-start: var(--b-form-label-colon-margin-inline-start, 2px);\n  margin-inline-end: var(--b-form-label-colon-margin-inline-end, 8px);\n}\n\n.b-form-item__tooltip {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n  cursor: help;\n}\n\n/* Control */\n.b-form-item__control {\n  flex: 1;\n  min-width: 0;\n}\n\n.b-form-item__control-input {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n/* Feedback icon */\n.b-form-item__feedback-icon {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 8px;\n  flex-shrink: 0;\n}\n\n.b-form-item--has-success .b-form-item__feedback-icon {\n  color: var(--b-form-success-color, #52c41a);\n}\n\n.b-form-item--has-error .b-form-item__feedback-icon {\n  color: var(--b-form-error-color, #ff4d4f);\n}\n\n.b-form-item--has-warning .b-form-item__feedback-icon {\n  color: var(--b-form-warning-color, #faad14);\n}\n\n.b-form-item__loading-icon {\n  display: inline-flex;\n  animation: b-form-spin 1s linear infinite;\n}\n\n@keyframes b-form-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Help & Extra */\n.b-form-item__help {\n  min-height: 22px;\n  padding-top: 2px;\n  font-size: 14px;\n  line-height: 1.5714;\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.b-form-item__help--error {\n  color: var(--b-form-error-color, #ff4d4f);\n}\n\n.b-form-item__help--warning {\n  color: var(--b-form-warning-color, #faad14);\n}\n\n.b-form-item__extra {\n  padding-top: 2px;\n  font-size: 14px;\n  line-height: 1.5714;\n  color: var(--b-form-help-color, rgba(0, 0, 0, 0.65));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-form-item__help {\n    transition: none;\n  }\n\n  .b-form-item__loading-icon {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}