@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system107.js.map

@@ -1 +1 @@
-{"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":"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"}
+{"version":3,"file":"design-system107.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"}

package/dist/design-system109.js

@@ -1,8 +1,8 @@
 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"]]);
+//#region src/components/BForm/BForm.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-cf5d3049"]]);
 //#endregion
 export { n as default };
 

package/dist/design-system109.js.map

@@ -1 +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":""}
+{"version":3,"file":"design-system109.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":""}