@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system104.js

@@ -1,112 +1,57 @@
-import { useValidationForm as e } from "./design-system101.js";
-import { BFormContextKey as t } from "./design-system102.js";
-import { BFormLabelAlign as n, BFormLayout as r, BFormValidateTrigger as i } from "./design-system103.js";
-import { computed as a, createElementBlock as o, defineComponent as s, normalizeClass as c, openBlock as l, provide as u, ref as d, renderSlot as f } from "vue";
-//#region src/components/BForm/BForm.vue?vue&type=script&setup=true&lang.ts
-var p = [
-	"name",
-	"novalidate",
-	"aria-label"
-], m = /* @__PURE__ */ s({
-	__name: "BForm",
-	props: {
-		layout: { default: () => r.Horizontal },
-		labelAlign: { default: () => n.Left },
-		labelWidth: {},
-		colon: {
-			type: Boolean,
-			default: !0
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		requiredMark: {
-			type: Boolean,
-			default: !0
-		},
-		name: {},
-		model: {},
-		scrollToFirstError: {
-			type: Boolean,
-			default: !1
-		},
-		validateTrigger: { default: () => i.Change },
-		noHtml5Validate: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: ["finish", "finishFailed"],
-	setup(n, { expose: r, emit: i }) {
-		let s = i, m = d(null), { fields: h, validateAll: g, resetAll: _, isValid: v } = e();
-		u(t, a(() => ({
-			layout: n.layout,
-			labelAlign: n.labelAlign,
-			labelWidth: n.labelWidth,
-			colon: n.colon,
-			disabled: n.disabled,
-			requiredMark: n.requiredMark,
-			validateTrigger: n.validateTrigger,
-			model: n.model
-		})).value);
-		let y = () => g(), b = () => {
-			let e = [], t = {};
-			for (let [r, i] of Object.entries(h)) t[r] = n.model?.[r], i.value.isValid || e.push({
-				name: r,
-				errors: i.value.errors
-			});
-			return {
-				values: t,
-				errorFields: e
-			};
-		}, x = (e) => {
-			if (!e) {
-				_();
-				return;
-			}
-			for (let t of e) h[t] && h[t].value.reset();
-		}, S = (e, t) => {
-			let n = m.value?.querySelector(`[data-form-field="${e}"]`);
-			n && n.scrollIntoView(t ?? {
-				behavior: "smooth",
-				block: "center"
-			});
-		}, C = (e) => {
-			e.preventDefault();
-			let t = y(), r = b();
-			if (t) s("finish", r.values);
-			else if (s("finishFailed", r), n.scrollToFirstError && r.errorFields.length > 0) {
-				let e = typeof n.scrollToFirstError == "object" ? n.scrollToFirstError : {
-					behavior: "smooth",
-					block: "center"
-				};
-				S(r.errorFields[0].name, e);
-			}
-		}, w = a(() => [
-			"b-form",
-			`b-form--${n.layout}`,
-			`b-form--label-${n.labelAlign}`,
-			{ "b-form--disabled": n.disabled }
-		]);
-		return r({
-			validate: y,
-			resetFields: x,
-			scrollToField: S,
-			isValid: v
-		}), (e, t) => (l(), o("form", {
-			ref_key: "formEl",
-			ref: m,
-			class: c(w.value),
-			name: n.name,
-			novalidate: n.noHtml5Validate,
-			role: "form",
-			"aria-label": n.name,
-			onSubmit: C
-		}, [f(e.$slots, "default", {}, void 0, !0)], 42, p));
+import { computed as e, inject as t, onBeforeUnmount as n, provide as r, ref as i, watch as a } from "vue";
+//#region src/composables/useValidation.ts
+var o = { FormValidation: Symbol() };
+function s() {
+	let n = t(o.FormValidation, void 0);
+	n || (n = {}, r(o.FormValidation, n));
+	let i = () => n ? Object.values(n).map((e) => e.value.validate()).every((e) => e) : !1, a = () => {
+		n && Object.values(n).forEach((e) => e.value.reset());
+	}, s = e(() => n ? Object.values(n).every((e) => e.value.isValid) : !0);
+	return {
+		fields: n,
+		validateAll: i,
+		resetAll: a,
+		isValid: s
+	};
+}
+function c(r, s, c) {
+	let l = structuredClone(s.value), u = i({
+		fieldValue: s,
+		errors: [],
+		isValid: !0,
+		dirty: !1,
+		touched: !1,
+		validate: d,
+		reset: f,
+		markTouched: p
+	});
+	a(s, (e) => {
+		u.value.dirty = !Object.is(e, l);
+	}, { deep: !0 });
+	function d() {
+		let e = c.safeParse(s.value);
+		return e.success ? (u.value.errors = [], u.value.isValid = !0) : (u.value.errors = e.error.issues.map((e) => e.message), u.value.isValid = !1), u.value.isValid;
 	}
-});
+	function f() {
+		u.value.errors = [], u.value.isValid = !0, u.value.dirty = !1, u.value.touched = !1;
+	}
+	function p() {
+		u.value.touched = !0;
+	}
+	let m = t(o.FormValidation, void 0);
+	return m && (m[r] = u), n(() => {
+		m && delete m[r];
+	}), {
+		errors: e(() => u.value.errors),
+		isValid: e(() => u.value.isValid),
+		dirty: e(() => u.value.dirty),
+		touched: e(() => u.value.touched),
+		validate: d,
+		reset: f,
+		markTouched: p
+	};
+}
 //#endregion
-export { m as default };
+export { o as PIKey, c as useValidationField, s as useValidationForm };
 
 //# sourceMappingURL=design-system104.js.map

package/dist/design-system104.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system104.js","names":[],"sources":["../src/components/BForm/BForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useValidationForm } from '@/composables/useValidation.ts';\nimport { computed, provide, ref } from 'vue';\nimport { BFormContextKey } from './context.ts';\nimport {\n  BFormLayout,\n  BFormLabelAlign,\n  BFormRequiredMark,\n  BFormValidateTrigger,\n  type BFormFieldError,\n  type BFormItemContext,\n  type BFormValidateResult,\n} from './types.ts';\n\nconst {\n  layout = BFormLayout.Horizontal,\n  labelAlign = BFormLabelAlign.Left,\n  labelWidth,\n  colon = true,\n  disabled = false,\n  requiredMark = true,\n  name,\n  model,\n  scrollToFirstError = false,\n  validateTrigger = BFormValidateTrigger.Change,\n  noHtml5Validate = false,\n} = defineProps<{\n  /** Form layout mode. */\n  layout?: `${BFormLayout}`;\n  /** Label text alignment. */\n  labelAlign?: `${BFormLabelAlign}`;\n  /** Fixed width for all labels. */\n  labelWidth?: string;\n  /** Display colon after label (horizontal layout only). */\n  colon?: boolean;\n  /** Whether all form controls are disabled. */\n  disabled?: boolean;\n  /** How required/optional marks are displayed. */\n  requiredMark?: boolean | `${BFormRequiredMark}`;\n  /** Form name, used as field id prefix. */\n  name?: string;\n  /** Form data model object. Fields read their value from model[fieldName]. */\n  model?: Record<string, unknown>;\n  /** Auto-scroll to first validation error on submit failure. */\n  scrollToFirstError?: boolean | ScrollIntoViewOptions;\n  /** Default field validation trigger. */\n  validateTrigger?: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  /** Disable native HTML5 validation. */\n  noHtml5Validate?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Called after successful validation on submit. */\n  finish: [values: Record<string, unknown>];\n  /** Called when validation fails on submit. */\n  finishFailed: [result: BFormValidateResult];\n}>();\n\nconst formEl = ref<HTMLFormElement | null>(null);\n\nconst { fields, validateAll, resetAll, isValid } = useValidationForm();\n\nconst formContext = computed<BFormItemContext>(() => ({\n  layout,\n  labelAlign,\n  labelWidth,\n  colon,\n  disabled,\n  requiredMark,\n  validateTrigger,\n  model,\n}));\n\nprovide(BFormContextKey, formContext.value);\n\nconst validate = (): boolean => {\n  return validateAll();\n};\n\nconst buildResult = (): BFormValidateResult => {\n  const errorFields: BFormFieldError[] = [];\n  const values: Record<string, unknown> = {};\n\n  for (const [key, fieldState] of Object.entries(fields)) {\n    values[key] = model?.[key];\n    if (!fieldState.value.isValid) {\n      errorFields.push({ name: key, errors: fieldState.value.errors });\n    }\n  }\n\n  return { values, errorFields };\n};\n\nconst resetFields = (names?: string[]) => {\n  if (!names) {\n    resetAll();\n    return;\n  }\n  for (const fieldName of names) {\n    if (fields[fieldName]) {\n      fields[fieldName].value.reset();\n    }\n  }\n};\n\nconst scrollToField = (fieldName: string, options?: ScrollIntoViewOptions) => {\n  const el = formEl.value?.querySelector(`[data-form-field=\"${fieldName}\"]`);\n  if (el) {\n    el.scrollIntoView(options ?? { behavior: 'smooth', block: 'center' });\n  }\n};\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  const allValid = validate();\n  const result = buildResult();\n\n  if (allValid) {\n    emit('finish', result.values);\n  } else {\n    emit('finishFailed', result);\n    if (scrollToFirstError && result.errorFields.length > 0) {\n      const opts =\n        typeof scrollToFirstError === 'object' ? scrollToFirstError : { behavior: 'smooth' as const, block: 'center' as const };\n      scrollToField(result.errorFields[0].name, opts);\n    }\n  }\n};\n\nconst formClasses = computed(() => [\n  'b-form',\n  `b-form--${layout}`,\n  `b-form--label-${labelAlign}`,\n  {\n    'b-form--disabled': disabled,\n  },\n]);\n\ndefineExpose({\n  validate,\n  resetFields,\n  scrollToField,\n  isValid,\n});\n</script>\n\n<template>\n  <form\n    ref=\"formEl\"\n    :class=\"formClasses\"\n    :name=\"name\"\n    :novalidate=\"noHtml5Validate\"\n    role=\"form\"\n    :aria-label=\"name\"\n    @submit=\"handleSubmit\"\n  >\n    <slot />\n  </form>\n</template>\n\n<style scoped>\n.b-form {\n  --b-form-item-margin-bottom: 24px;\n  --b-form-inline-item-margin-bottom: 0;\n  --b-form-label-color: rgba(0, 0, 0, 0.88);\n  --b-form-label-font-size: 14px;\n  --b-form-label-height: 32px;\n  --b-form-label-colon-margin-inline-start: 2px;\n  --b-form-label-colon-margin-inline-end: 8px;\n  --b-form-label-required-mark-color: #cf1322;\n  --b-form-vertical-label-margin: 0;\n  --b-form-vertical-label-padding: 0 0 8px;\n  --b-form-help-color: rgba(0, 0, 0, 0.65);\n  --b-form-error-color: #cf1322;\n  --b-form-warning-color: #874d00;\n  --b-form-success-color: #52c41a;\n\n  margin: 0;\n  padding: 0;\n  font-size: var(--b-form-label-font-size);\n  color: var(--b-form-label-color);\n}\n\n.b-form--inline {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  align-items: flex-end;\n}\n\n[data-prefers-color='dark'] .b-form {\n  --b-form-label-color: rgba(255, 255, 255, 0.88);\n  --b-form-label-required-mark-color: #dc3838;\n  --b-form-help-color: rgba(255, 255, 255, 0.65);\n  --b-form-error-color: #dc3838;\n  --b-form-warning-color: #d1a300;\n  --b-form-success-color: #49aa19;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-form {\n    --b-form-label-color: rgba(255, 255, 255, 0.88);\n    --b-form-label-required-mark-color: #dc3838;\n    --b-form-help-color: rgba(255, 255, 255, 0.65);\n    --b-form-error-color: #dc3838;\n    --b-form-warning-color: #d1a300;\n    --b-form-success-color: #49aa19;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-form :deep(.b-form-item__help) {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,IAAM,IAAO,GAOP,IAAS,EAA4B,KAAK,EAE1C,EAAE,WAAQ,gBAAa,aAAU,eAAY,GAAmB;AAatE,IAAQ,GAXY,SAAkC;GACpD,QAAK,EAAA;GACL,YAAS,EAAA;GACT,YAAS,EAAA;GACT,OAAI,EAAA;GACJ,UAAO,EAAA;GACP,cAAW,EAAA;GACX,iBAAc,EAAA;GACd,OAAI,EAAA;GACL,EAAE,CAEkC,MAAM;EAE3C,IAAM,UACG,GAAa,EAGhB,UAAyC;GAC7C,IAAM,IAAiC,EAAE,EACnC,IAAkC,EAAE;AAE1C,QAAK,IAAM,CAAC,GAAK,MAAe,OAAO,QAAQ,EAAO,CAEpD,CADA,EAAO,KAAO,EAAA,QAAQ,IACjB,EAAW,MAAM,WACpB,EAAY,KAAK;IAAE,MAAM;IAAK,QAAQ,EAAW,MAAM;IAAQ,CAAC;AAIpE,UAAO;IAAE;IAAQ;IAAa;KAG1B,KAAe,MAAqB;AACxC,OAAI,CAAC,GAAO;AACV,OAAU;AACV;;AAEF,QAAK,IAAM,KAAa,EACtB,CAAI,EAAO,MACT,EAAO,GAAW,MAAM,OAAO;KAK/B,KAAiB,GAAmB,MAAoC;GAC5E,IAAM,IAAK,EAAO,OAAO,cAAc,qBAAqB,EAAU,IAAI;AAC1E,GAAI,KACF,EAAG,eAAe,KAAW;IAAE,UAAU;IAAU,OAAO;IAAU,CAAC;KAInE,KAAgB,MAAa;AACjC,KAAE,gBAAgB;GAClB,IAAM,IAAW,GAAU,EACrB,IAAS,GAAa;AAE5B,OAAI,EACF,GAAK,UAAU,EAAO,OAAO;YAE7B,EAAK,gBAAgB,EAAO,EACxB,EAAA,sBAAsB,EAAO,YAAY,SAAS,GAAG;IACvD,IAAM,IACJ,OAAO,EAAA,sBAAuB,WAAW,EAAA,qBAAqB;KAAE,UAAU;KAAmB,OAAO;KAAmB;AACzH,MAAc,EAAO,YAAY,GAAG,MAAM,EAAK;;KAK/C,IAAc,QAAe;GACjC;GACA,WAAW,EAAA;GACX,iBAAiB,EAAA;GACjB,EACE,oBAAoB,EAAA,UACrB;GACF,CAAC;SAEF,EAAa;GACX;GACA;GACA;GACA;GACD,CAAC,kBAIA,EAUO,QAAA;YATD;GAAJ,KAAI;GACH,OAAK,EAAE,EAAA,MAAW;GAClB,MAAM,EAAA;GACN,YAAY,EAAA;GACb,MAAK;GACJ,cAAY,EAAA;GACZ,UAAQ;MAET,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"design-system104.js","names":[],"sources":["../src/composables/useValidation.ts"],"sourcesContent":["import {\n  computed,\n  inject,\n  onBeforeUnmount,\n  provide,\n  ref,\n  watch,\n  type ComputedRef,\n  type InjectionKey,\n  type Ref,\n} from 'vue';\nimport type { ZodType } from 'zod';\n\n/**\n * Types\n */\nexport interface ValidationFieldState<T = unknown> {\n  fieldValue: Ref<T>;\n  errors: string[];\n  isValid: boolean;\n  dirty: boolean;\n  touched: boolean;\n  validate: () => boolean;\n  reset: () => void;\n  markTouched: () => void;\n}\n\nexport const PIKey = {\n  FormValidation: Symbol() as InjectionKey<Record<string, Ref<ValidationFieldState>>>,\n};\n\n/**\n * Form-level validation composable.\n * Creates or injects a shared validation registry, providing\n * methods to validate/reset all registered fields.\n */\nexport function useValidationForm() {\n  let fields = inject(PIKey.FormValidation, undefined);\n  if (!fields) {\n    fields = {};\n    provide(PIKey.FormValidation, fields);\n  }\n\n  const validateAll = (): boolean => {\n    if (!fields) return false;\n    return Object.values(fields)\n      .map((field) => field.value.validate())\n      .every((valid) => valid);\n  };\n\n  const resetAll = () => {\n    if (!fields) return;\n    Object.values(fields).forEach((field) => field.value.reset());\n  };\n\n  const isValid = computed(() => {\n    if (!fields) return true;\n    return Object.values(fields).every((field) => field.value.isValid);\n  });\n\n  return {\n    fields,\n    validateAll,\n    resetAll,\n    isValid,\n  };\n}\n\n/**\n * Field-level validation composable.\n * Registers the field into the form's validation registry,\n * validates using the provided Zod schema, and tracks dirty/touched state.\n */\nexport function useValidationField<T>(key: string, fieldValue: Ref<T>, schema: ZodType<T>) {\n  const initialValue = structuredClone(fieldValue.value);\n\n  const fieldState = ref<ValidationFieldState<T>>({\n    fieldValue,\n    errors: [],\n    isValid: true,\n    dirty: false,\n    touched: false,\n    validate,\n    reset,\n    markTouched,\n  });\n\n  watch(\n    fieldValue,\n    (newVal) => {\n      fieldState.value.dirty = !Object.is(newVal, initialValue);\n    },\n    { deep: true },\n  );\n\n  function validate(): boolean {\n    const result = schema.safeParse(fieldValue.value);\n\n    if (result.success) {\n      fieldState.value.errors = [];\n      fieldState.value.isValid = true;\n    } else {\n      fieldState.value.errors = result.error.issues.map((issue) => issue.message);\n      fieldState.value.isValid = false;\n    }\n\n    return fieldState.value.isValid;\n  }\n\n  function reset() {\n    fieldState.value.errors = [];\n    fieldState.value.isValid = true;\n    fieldState.value.dirty = false;\n    fieldState.value.touched = false;\n  }\n\n  function markTouched() {\n    fieldState.value.touched = true;\n  }\n\n  // Register into form\n  const formFields = inject(PIKey.FormValidation, undefined);\n  if (formFields) {\n    formFields[key] = fieldState as Ref<ValidationFieldState>;\n  }\n\n  onBeforeUnmount(() => {\n    if (formFields) {\n      delete formFields[key];\n    }\n  });\n\n  const errors = computed(() => fieldState.value.errors);\n  const isValid = computed(() => fieldState.value.isValid);\n  const dirty = computed(() => fieldState.value.dirty);\n  const touched = computed(() => fieldState.value.touched);\n\n  return {\n    errors,\n    isValid,\n    dirty,\n    touched,\n    validate,\n    reset,\n    markTouched,\n  } as {\n    errors: ComputedRef<string[]>;\n    isValid: ComputedRef<boolean>;\n    dirty: ComputedRef<boolean>;\n    touched: ComputedRef<boolean>;\n    validate: () => boolean;\n    reset: () => void;\n    markTouched: () => void;\n  };\n}\n"],"mappings":";;AA2BA,IAAa,IAAQ,EACnB,gBAAgB,QAAQ,EACzB;AAOD,SAAgB,IAAoB;CAClC,IAAI,IAAS,EAAO,EAAM,gBAAgB,KAAA,EAAU;AACpD,CAAK,MACH,IAAS,EAAE,EACX,EAAQ,EAAM,gBAAgB,EAAO;CAGvC,IAAM,UACC,IACE,OAAO,OAAO,EAAO,CACzB,KAAK,MAAU,EAAM,MAAM,UAAU,CAAC,CACtC,OAAO,MAAU,EAAM,GAHN,IAMhB,UAAiB;AAChB,OACL,OAAO,OAAO,EAAO,CAAC,SAAS,MAAU,EAAM,MAAM,OAAO,CAAC;IAGzD,IAAU,QACT,IACE,OAAO,OAAO,EAAO,CAAC,OAAO,MAAU,EAAM,MAAM,QAAQ,GAD9C,GAEpB;AAEF,QAAO;EACL;EACA;EACA;EACA;EACD;;AAQH,SAAgB,EAAsB,GAAa,GAAoB,GAAoB;CACzF,IAAM,IAAe,gBAAgB,EAAW,MAAM,EAEhD,IAAa,EAA6B;EAC9C;EACA,QAAQ,EAAE;EACV,SAAS;EACT,OAAO;EACP,SAAS;EACT;EACA;EACA;EACD,CAAC;AAEF,GACE,IACC,MAAW;AACV,IAAW,MAAM,QAAQ,CAAC,OAAO,GAAG,GAAQ,EAAa;IAE3D,EAAE,MAAM,IAAM,CACf;CAED,SAAS,IAAoB;EAC3B,IAAM,IAAS,EAAO,UAAU,EAAW,MAAM;AAUjD,SARI,EAAO,WACT,EAAW,MAAM,SAAS,EAAE,EAC5B,EAAW,MAAM,UAAU,OAE3B,EAAW,MAAM,SAAS,EAAO,MAAM,OAAO,KAAK,MAAU,EAAM,QAAQ,EAC3E,EAAW,MAAM,UAAU,KAGtB,EAAW,MAAM;;CAG1B,SAAS,IAAQ;AAIf,EAHA,EAAW,MAAM,SAAS,EAAE,EAC5B,EAAW,MAAM,UAAU,IAC3B,EAAW,MAAM,QAAQ,IACzB,EAAW,MAAM,UAAU;;CAG7B,SAAS,IAAc;AACrB,IAAW,MAAM,UAAU;;CAI7B,IAAM,IAAa,EAAO,EAAM,gBAAgB,KAAA,EAAU;AAgB1D,QAfI,MACF,EAAW,KAAO,IAGpB,QAAsB;AACpB,EAAI,KACF,OAAO,EAAW;GAEpB,EAOK;EACL,QANa,QAAe,EAAW,MAAM,OAAO;EAOpD,SANc,QAAe,EAAW,MAAM,QAAQ;EAOtD,OANY,QAAe,EAAW,MAAM,MAAM;EAOlD,SANc,QAAe,EAAW,MAAM,QAAQ;EAOtD;EACA;EACA;EACD"}

package/dist/{design-system102.js → design-system105.js}

@@ -3,4 +3,4 @@ var e = Symbol("BFormContext");
 //#endregion
 export { e as BFormContextKey };
 
-//# sourceMappingURL=design-system102.js.map
+//# sourceMappingURL=design-system105.js.map

package/dist/{design-system102.js.map → design-system105.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system102.js","names":[],"sources":["../src/components/BForm/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { BFormItemContext } from './types.ts';\n\nexport const BFormContextKey = Symbol('BFormContext') as InjectionKey<BFormItemContext>;\n"],"mappings":";AAGA,IAAa,IAAkB,OAAO,eAAe"}
+{"version":3,"file":"design-system105.js","names":[],"sources":["../src/components/BForm/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { BFormItemContext } from './types.ts';\n\nexport const BFormContextKey = Symbol('BFormContext') as InjectionKey<BFormItemContext>;\n"],"mappings":";AAGA,IAAa,IAAkB,OAAO,eAAe"}

package/dist/design-system106.js

@@ -1,9 +1,16 @@
-import e from "./design-system14.js";
-import t from "./design-system104.js";
-/* empty css                 */
-//#region src/components/BForm/BForm.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-cf5d3049"]]);
+//#region src/components/BForm/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Horizontal = "horizontal", e.Vertical = "vertical", e.Inline = "inline", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Left = "left", e.Right = "right", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Success = "success", e.Warning = "warning", e.Error = "error", e.Validating = "validating", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.Required = "required", e.Optional = "optional", e;
+}({}), i = /* @__PURE__ */ function(e) {
+	return e.Change = "change", e.Blur = "blur", e.Submit = "submit", e;
+}({});
 //#endregion
-export { n as default };
+export { t as BFormLabelAlign, e as BFormLayout, r as BFormRequiredMark, n as BFormValidateStatus, i as BFormValidateTrigger };
 
 //# sourceMappingURL=design-system106.js.map

package/dist/design-system106.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system106.js","names":[],"sources":["../src/components/BForm/BForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useValidationForm } from '@/composables/useValidation.ts';\nimport { computed, provide, ref } from 'vue';\nimport { BFormContextKey } from './context.ts';\nimport {\n  BFormLayout,\n  BFormLabelAlign,\n  BFormRequiredMark,\n  BFormValidateTrigger,\n  type BFormFieldError,\n  type BFormItemContext,\n  type BFormValidateResult,\n} from './types.ts';\n\nconst {\n  layout = BFormLayout.Horizontal,\n  labelAlign = BFormLabelAlign.Left,\n  labelWidth,\n  colon = true,\n  disabled = false,\n  requiredMark = true,\n  name,\n  model,\n  scrollToFirstError = false,\n  validateTrigger = BFormValidateTrigger.Change,\n  noHtml5Validate = false,\n} = defineProps<{\n  /** Form layout mode. */\n  layout?: `${BFormLayout}`;\n  /** Label text alignment. */\n  labelAlign?: `${BFormLabelAlign}`;\n  /** Fixed width for all labels. */\n  labelWidth?: string;\n  /** Display colon after label (horizontal layout only). */\n  colon?: boolean;\n  /** Whether all form controls are disabled. */\n  disabled?: boolean;\n  /** How required/optional marks are displayed. */\n  requiredMark?: boolean | `${BFormRequiredMark}`;\n  /** Form name, used as field id prefix. */\n  name?: string;\n  /** Form data model object. Fields read their value from model[fieldName]. */\n  model?: Record<string, unknown>;\n  /** Auto-scroll to first validation error on submit failure. */\n  scrollToFirstError?: boolean | ScrollIntoViewOptions;\n  /** Default field validation trigger. */\n  validateTrigger?: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  /** Disable native HTML5 validation. */\n  noHtml5Validate?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Called after successful validation on submit. */\n  finish: [values: Record<string, unknown>];\n  /** Called when validation fails on submit. */\n  finishFailed: [result: BFormValidateResult];\n}>();\n\nconst formEl = ref<HTMLFormElement | null>(null);\n\nconst { fields, validateAll, resetAll, isValid } = useValidationForm();\n\nconst formContext = computed<BFormItemContext>(() => ({\n  layout,\n  labelAlign,\n  labelWidth,\n  colon,\n  disabled,\n  requiredMark,\n  validateTrigger,\n  model,\n}));\n\nprovide(BFormContextKey, formContext.value);\n\nconst validate = (): boolean => {\n  return validateAll();\n};\n\nconst buildResult = (): BFormValidateResult => {\n  const errorFields: BFormFieldError[] = [];\n  const values: Record<string, unknown> = {};\n\n  for (const [key, fieldState] of Object.entries(fields)) {\n    values[key] = model?.[key];\n    if (!fieldState.value.isValid) {\n      errorFields.push({ name: key, errors: fieldState.value.errors });\n    }\n  }\n\n  return { values, errorFields };\n};\n\nconst resetFields = (names?: string[]) => {\n  if (!names) {\n    resetAll();\n    return;\n  }\n  for (const fieldName of names) {\n    if (fields[fieldName]) {\n      fields[fieldName].value.reset();\n    }\n  }\n};\n\nconst scrollToField = (fieldName: string, options?: ScrollIntoViewOptions) => {\n  const el = formEl.value?.querySelector(`[data-form-field=\"${fieldName}\"]`);\n  if (el) {\n    el.scrollIntoView(options ?? { behavior: 'smooth', block: 'center' });\n  }\n};\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  const allValid = validate();\n  const result = buildResult();\n\n  if (allValid) {\n    emit('finish', result.values);\n  } else {\n    emit('finishFailed', result);\n    if (scrollToFirstError && result.errorFields.length > 0) {\n      const opts =\n        typeof scrollToFirstError === 'object' ? scrollToFirstError : { behavior: 'smooth' as const, block: 'center' as const };\n      scrollToField(result.errorFields[0].name, opts);\n    }\n  }\n};\n\nconst formClasses = computed(() => [\n  'b-form',\n  `b-form--${layout}`,\n  `b-form--label-${labelAlign}`,\n  {\n    'b-form--disabled': disabled,\n  },\n]);\n\ndefineExpose({\n  validate,\n  resetFields,\n  scrollToField,\n  isValid,\n});\n</script>\n\n<template>\n  <form\n    ref=\"formEl\"\n    :class=\"formClasses\"\n    :name=\"name\"\n    :novalidate=\"noHtml5Validate\"\n    role=\"form\"\n    :aria-label=\"name\"\n    @submit=\"handleSubmit\"\n  >\n    <slot />\n  </form>\n</template>\n\n<style scoped>\n.b-form {\n  --b-form-item-margin-bottom: 24px;\n  --b-form-inline-item-margin-bottom: 0;\n  --b-form-label-color: rgba(0, 0, 0, 0.88);\n  --b-form-label-font-size: 14px;\n  --b-form-label-height: 32px;\n  --b-form-label-colon-margin-inline-start: 2px;\n  --b-form-label-colon-margin-inline-end: 8px;\n  --b-form-label-required-mark-color: #cf1322;\n  --b-form-vertical-label-margin: 0;\n  --b-form-vertical-label-padding: 0 0 8px;\n  --b-form-help-color: rgba(0, 0, 0, 0.65);\n  --b-form-error-color: #cf1322;\n  --b-form-warning-color: #874d00;\n  --b-form-success-color: #52c41a;\n\n  margin: 0;\n  padding: 0;\n  font-size: var(--b-form-label-font-size);\n  color: var(--b-form-label-color);\n}\n\n.b-form--inline {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  align-items: flex-end;\n}\n\n[data-prefers-color='dark'] .b-form {\n  --b-form-label-color: rgba(255, 255, 255, 0.88);\n  --b-form-label-required-mark-color: #dc3838;\n  --b-form-help-color: rgba(255, 255, 255, 0.65);\n  --b-form-error-color: #dc3838;\n  --b-form-warning-color: #d1a300;\n  --b-form-success-color: #49aa19;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-form {\n    --b-form-label-color: rgba(255, 255, 255, 0.88);\n    --b-form-label-required-mark-color: #dc3838;\n    --b-form-help-color: rgba(255, 255, 255, 0.65);\n    --b-form-error-color: #dc3838;\n    --b-form-warning-color: #d1a300;\n    --b-form-success-color: #49aa19;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-form :deep(.b-form-item__help) {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system106.js","names":[],"sources":["../src/components/BForm/types.ts"],"sourcesContent":["export enum BFormLayout {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n  Inline = 'inline',\n}\n\nexport enum BFormLabelAlign {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum BFormValidateStatus {\n  Success = 'success',\n  Warning = 'warning',\n  Error = 'error',\n  Validating = 'validating',\n}\n\nexport enum BFormRequiredMark {\n  Required = 'required',\n  Optional = 'optional',\n}\n\nexport enum BFormValidateTrigger {\n  Change = 'change',\n  Blur = 'blur',\n  Submit = 'submit',\n}\n\nexport interface BFormFieldError {\n  name: string;\n  errors: string[];\n}\n\nexport interface BFormValidateResult {\n  values: Record<string, unknown>;\n  errorFields: BFormFieldError[];\n}\n\nexport interface BFormItemContext {\n  layout: `${BFormLayout}`;\n  labelAlign: `${BFormLabelAlign}`;\n  labelWidth: string | undefined;\n  colon: boolean;\n  disabled: boolean;\n  requiredMark: boolean | `${BFormRequiredMark}`;\n  validateTrigger: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  model: Record<string, unknown> | undefined;\n}\n\nexport interface BFormInstance {\n  validate: () => boolean;\n  resetFields: (names?: string[]) => void;\n  scrollToField: (name: string, options?: ScrollIntoViewOptions) => void;\n  isValid: boolean;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,WAAA,YACA,EAAA,SAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,OAAA,QACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA,WACA,EAAA,QAAA,SACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,WAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,OAAA,QACA,EAAA,SAAA;KACD"}

package/dist/design-system107.js

@@ -1,209 +1,112 @@
-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",
+import { useValidationForm as e } from "./design-system104.js";
+import { BFormContextKey as t } from "./design-system105.js";
+import { BFormLabelAlign as n, BFormLayout as r, BFormValidateTrigger as i } from "./design-system106.js";
+import { computed as a, createElementBlock as o, defineComponent as s, normalizeClass as c, openBlock as l, provide as u, ref as d, renderSlot as f } from "vue";
+//#region src/components/BForm/BForm.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"name",
+	"novalidate",
+	"aria-label"
+], m = /* @__PURE__ */ s({
+	__name: "BForm",
 	props: {
-		label: {},
-		name: {},
-		schema: {},
-		required: {
-			type: Boolean,
-			default: !1
-		},
-		validateStatus: {},
-		help: {},
-		extra: {},
+		layout: { default: () => r.Horizontal },
+		labelAlign: { default: () => n.Left },
+		labelWidth: {},
 		colon: {
-			type: [Boolean, null],
-			default: null
+			type: Boolean,
+			default: !0
 		},
-		labelAlign: {},
-		labelWidth: {},
-		hidden: {
+		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		noStyle: {
+		requiredMark: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hasFeedback: {
+		name: {},
+		model: {},
+		scrollToFirstError: {
 			type: Boolean,
 			default: !1
 		},
-		validateTrigger: {},
-		tooltip: {},
-		layout: {}
+		validateTrigger: { default: () => i.Change },
+		noHtml5Validate: {
+			type: Boolean,
+			default: !1
+		}
 	},
-	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;
+	emits: ["finish", "finishFailed"],
+	setup(n, { expose: r, emit: i }) {
+		let s = i, m = d(null), { fields: h, validateAll: g, resetAll: _, isValid: v } = e();
+		u(t, a(() => ({
+			layout: n.layout,
+			labelAlign: n.labelAlign,
+			labelWidth: n.labelWidth,
+			colon: n.colon,
+			disabled: n.disabled,
+			requiredMark: n.requiredMark,
+			validateTrigger: n.validateTrigger,
+			model: n.model
+		})).value);
+		let y = () => g(), b = () => {
+			let e = [], t = {};
+			for (let [r, i] of Object.entries(h)) t[r] = n.model?.[r], i.value.isValid || e.push({
+				name: r,
+				errors: i.value.errors
+			});
+			return {
+				values: t,
+				errorFields: e
+			};
+		}, x = (e) => {
+			if (!e) {
+				_();
+				return;
 			}
-		}), 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
+			for (let t of e) h[t] && h[t].value.reset();
+		}, S = (e, t) => {
+			let n = m.value?.querySelector(`[data-form-field="${e}"]`);
+			n && n.scrollIntoView(t ?? {
+				behavior: "smooth",
+				block: "center"
+			});
+		}, C = (e) => {
+			e.preventDefault();
+			let t = y(), r = b();
+			if (t) s("finish", r.values);
+			else if (s("finishFailed", r), n.scrollToFirstError && r.errorFields.length > 0) {
+				let e = typeof n.scrollToFirstError == "object" ? n.scrollToFirstError : {
+					behavior: "smooth",
+					block: "center"
+				};
+				S(r.errorFields[0].name, e);
 			}
-		]), 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));
+		}, w = a(() => [
+			"b-form",
+			`b-form--${n.layout}`,
+			`b-form--label-${n.labelAlign}`,
+			{ "b-form--disabled": n.disabled }
+		]);
+		return r({
+			validate: y,
+			resetFields: x,
+			scrollToField: S,
+			isValid: v
+		}), (e, t) => (l(), o("form", {
+			ref_key: "formEl",
+			ref: m,
+			class: c(w.value),
+			name: n.name,
+			novalidate: n.noHtml5Validate,
+			role: "form",
+			"aria-label": n.name,
+			onSubmit: C
+		}, [f(e.$slots, "default", {}, void 0, !0)], 42, p));
 	}
 });
 //#endregion
-export { P as default };
+export { m as default };
 
 //# sourceMappingURL=design-system107.js.map