@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system.js

@@ -12,77 +12,91 @@ import I from "./design-system29.js";
 import L from "./design-system32.js";
 import R from "./design-system35.js";
 import z from "./design-system38.js";
-import { BCascaderExpandTrigger as B, BCascaderPlacement as V, BCascaderSize as H, BCascaderStatus as U } from "./design-system39.js";
-import W from "./design-system42.js";
-import { B_CHECKBOX_GROUP_KEY as G } from "./design-system43.js";
-import K from "./design-system46.js";
-import q from "./design-system48.js";
-import J from "./design-system52.js";
+import B from "./design-system41.js";
+import V from "./design-system44.js";
+import H from "./design-system47.js";
+import { BCascaderExpandTrigger as U, BCascaderPlacement as W, BCascaderSize as G, BCascaderStatus as K } from "./design-system48.js";
+import q from "./design-system51.js";
+import { B_CHECKBOX_GROUP_KEY as J } from "./design-system52.js";
 import Y from "./design-system55.js";
-import { BColorPickerFormat as X, BColorPickerPlacement as Z, BColorPickerSize as Q, BColorPickerTrigger as ne } from "./design-system56.js";
-import re from "./design-system59.js";
-import { BDatePickerPlacement as ie, BDatePickerSize as ae, BDatePickerStatus as oe, BDatePickerType as se, BDatePickerVariant as ce } from "./design-system60.js";
-import le from "./design-system63.js";
-import ue from "./design-system66.js";
-import de from "./design-system68.js";
-import fe from "./design-system71.js";
-import pe from "./design-system74.js";
-import { BDropdownPlacement as me, BDropdownTrigger as he } from "./design-system75.js";
-import ge from "./design-system78.js";
-import _e from "./design-system81.js";
-import { BFloatButtonGroupPlacement as ve, BFloatButtonShape as ye, BFloatButtonTrigger as be, BFloatButtonType as xe } from "./design-system82.js";
-import Se from "./design-system85.js";
-import Ce from "./design-system88.js";
-import we from "./design-system91.js";
-import { PIKey as Te, useValidationField as Ee, useValidationForm as $ } from "./design-system92.js";
-import { BFormLabelAlign as De, BFormLayout as Oe, BFormRequiredMark as ke, BFormValidateStatus as Ae, BFormValidateTrigger as je } from "./design-system94.js";
-import Me from "./design-system97.js";
-import Ne from "./design-system100.js";
-import Pe from "./design-system103.js";
-import { BInputStatus as Fe, BInputVariant as Ie } from "./design-system104.js";
-import Le from "./design-system107.js";
-import Re from "./design-system110.js";
-import ze from "./design-system113.js";
-import { BMentionsPlacement as Be, BMentionsStatus as Ve, BMentionsVariant as He } from "./design-system114.js";
-import Ue from "./design-system117.js";
-import We from "./design-system120.js";
-import Ge from "./design-system124.js";
-import Ke from "./design-system127.js";
-import qe from "./design-system130.js";
+import X from "./design-system57.js";
+import Z from "./design-system61.js";
+import Q from "./design-system64.js";
+import { BColorPickerFormat as ne, BColorPickerPlacement as re, BColorPickerSize as ie, BColorPickerTrigger as ae } from "./design-system65.js";
+import oe from "./design-system68.js";
+import { BDatePickerPlacement as se, BDatePickerSize as ce, BDatePickerStatus as le, BDatePickerType as ue, BDatePickerVariant as de } from "./design-system69.js";
+import fe from "./design-system72.js";
+import pe from "./design-system75.js";
+import me from "./design-system77.js";
+import he from "./design-system80.js";
+import ge from "./design-system83.js";
+import { BDropdownPlacement as _e, BDropdownTrigger as ve } from "./design-system84.js";
+import ye from "./design-system87.js";
+import be from "./design-system90.js";
+import { BFloatButtonGroupPlacement as xe, BFloatButtonShape as Se, BFloatButtonTrigger as Ce, BFloatButtonType as we } from "./design-system91.js";
+import Te from "./design-system94.js";
+import Ee from "./design-system97.js";
+import De from "./design-system100.js";
+import { PIKey as Oe, useValidationField as ke, useValidationForm as Ae } from "./design-system101.js";
+import { BFormLabelAlign as je, BFormLayout as Me, BFormRequiredMark as Ne, BFormValidateStatus as Pe, BFormValidateTrigger as $ } from "./design-system103.js";
+import Fe from "./design-system106.js";
+import Ie from "./design-system109.js";
+import Le from "./design-system112.js";
+import { BInputStatus as Re, BInputVariant as ze } from "./design-system113.js";
+import Be from "./design-system116.js";
+import Ve from "./design-system119.js";
+import He from "./design-system122.js";
+import { BMentionsPlacement as Ue, BMentionsStatus as We, BMentionsVariant as Ge } from "./design-system123.js";
+import Ke from "./design-system126.js";
+import qe from "./design-system129.js";
 import Je from "./design-system133.js";
 import Ye from "./design-system136.js";
 import Xe from "./design-system139.js";
-import Ze from "./design-system140.js";
-import Qe from "./design-system142.js";
-import $e from "./design-system144.js";
-import et from "./design-system147.js";
+import Ze from "./design-system142.js";
+import Qe from "./design-system145.js";
+import $e from "./design-system146.js";
+import et from "./design-system148.js";
 import tt from "./design-system150.js";
 import nt from "./design-system153.js";
 import rt from "./design-system156.js";
-import { B_RADIO_GROUP_KEY as it } from "./design-system157.js";
-import at from "./design-system160.js";
-import ot from "./design-system163.js";
+import it from "./design-system159.js";
+import at from "./design-system162.js";
+import { B_RADIO_GROUP_KEY as ot } from "./design-system163.js";
 import st from "./design-system166.js";
 import ct from "./design-system169.js";
 import lt from "./design-system172.js";
-import { BSelectMode as ut, BSelectPlacement as dt, BSelectStatus as ft, BSelectVariant as pt } from "./design-system173.js";
-import mt from "./design-system176.js";
-import ht from "./design-system179.js";
+import ut from "./design-system175.js";
+import dt from "./design-system178.js";
+import { BSelectMode as ft, BSelectPlacement as pt, BSelectStatus as mt, BSelectVariant as ht } from "./design-system179.js";
 import gt from "./design-system182.js";
 import _t from "./design-system185.js";
 import vt from "./design-system188.js";
 import yt from "./design-system191.js";
-import { BTimePickerPlacement as bt, BTimePickerSize as xt, BTimePickerStatus as St, BTimePickerVariant as Ct } from "./design-system192.js";
-import wt from "./design-system195.js";
-import Tt from "./design-system198.js";
-import Et from "./design-system201.js";
-import Dt from "./design-system204.js";
-import Ot from "./design-system207.js";
-import kt from "./design-system209.js";
-import At from "./design-system212.js";
-import { BTourPlacement as jt, BTourType as Mt } from "./design-system213.js";
-import Nt from "./design-system216.js";
-import Pt from "./design-system219.js";
-import { BUploadFileStatus as Ft, BUploadListType as It } from "./design-system220.js";
-import Lt from "./design-system223.js";
-export { D as BAlert, ee as BAlertType, O as BAnchor, j as BAutoComplete, k as BAutoCompleteStatus, A as BAutoCompleteVariant, M as BAvatar, te as BAvatarShape, e as BAvatarSize, N as BBadge, t as BBadgeSize, n as BBadgeStatus, P as BBreadcrumb, I as BButton, r as BButtonVariant, L as BCard, R as BCardGrid, z as BCardMeta, i as BCardSize, a as BCardType, W as BCascader, B as BCascaderExpandTrigger, V as BCascaderPlacement, H as BCascaderSize, U as BCascaderStatus, K as BCheckbox, q as BCheckboxGroup, J as BCollapse, J as BCollapseGroup, Y as BCollapsePanel, re as BColorPicker, X as BColorPickerFormat, Z as BColorPickerPlacement, Q as BColorPickerSize, ne as BColorPickerTrigger, o as BCommonColor, s as BCommonSize, le as BDatePicker, ie as BDatePickerPlacement, ae as BDatePickerSize, oe as BDatePickerStatus, se as BDatePickerType, ce as BDatePickerVariant, ue as BDescriptions, de as BDescriptionsItem, fe as BDivider, pe as BDrawer, c as BDrawerPlacement, l as BDrawerSize, ge as BDropdown, me as BDropdownPlacement, he as BDropdownTrigger, _e as BEmpty, u as BEmptyImage, Se as BFloatButton, Ce as BFloatButtonBackTop, we as BFloatButtonGroup, ve as BFloatButtonGroupPlacement, ye as BFloatButtonShape, be as BFloatButtonTrigger, xe as BFloatButtonType, Me as BForm, Ne as BFormItem, De as BFormLabelAlign, Oe as BFormLayout, ke as BFormRequiredMark, Ae as BFormValidateStatus, je as BFormValidateTrigger, F as BIcon, d as BIconSize, f as BIconVariant, Pe as BImage, Le as BInput, Re as BInputNumber, Fe as BInputStatus, Ie as BInputVariant, ze as BMasonry, Ue as BMentions, Be as BMentionsPlacement, Ve as BMentionsStatus, He as BMentionsVariant, Je as BMenu, We as BMenuDivider, Ge as BMenuItem, Ke as BMenuItemGroup, qe as BMenuSubMenu, Ye as BMessage, p as BMessageType, Xe as BModal, Ze as BModalBody, Qe as BModalFooter, $e as BModalHeader, et as BNotification, m as BNotificationPlacement, h as BNotificationType, tt as BPagination, nt as BPopconfirm, g as BPopconfirmPlacement, _ as BPopconfirmTrigger, rt as BPopover, v as BPopoverPlacement, y as BPopoverTrigger, at as BRadio, ot as BRadioButton, st as BRadioGroup, ct as BRate, lt as BSegmented, mt as BSelect, ut as BSelectMode, dt as BSelectPlacement, ft as BSelectStatus, pt as BSelectVariant, ht as BSlider, gt as BSpin, b as BSpinSize, _t as BSteps, x as BStepsDirection, S as BStepsLabelPlacement, C as BStepsStatus, w as BStepsType, vt as BSwitch, Tt as BTabPane, yt as BTable, Et as BTabs, Dt as BTag, wt as BTimePicker, bt as BTimePickerPlacement, xt as BTimePickerSize, St as BTimePickerStatus, Ct as BTimePickerVariant, Ot as BTimeline, kt as BTimelineItem, At as BTooltip, T as BTooltipPlacement, E as BTooltipTrigger, Nt as BTour, jt as BTourPlacement, Mt as BTourType, Pt as BTree, Lt as BUpload, Ft as BUploadFileStatus, It as BUploadListType, G as B_CHECKBOX_GROUP_KEY, it as B_RADIO_GROUP_KEY, Te as PIKey, Ee as useValidationField, $ as useValidationForm };
+import bt from "./design-system194.js";
+import xt from "./design-system197.js";
+import St from "./design-system200.js";
+import Ct from "./design-system203.js";
+import wt from "./design-system206.js";
+import Tt from "./design-system208.js";
+import Et from "./design-system212.js";
+import Dt from "./design-system215.js";
+import Ot from "./design-system217.js";
+import kt from "./design-system220.js";
+import At from "./design-system223.js";
+import jt from "./design-system226.js";
+import { BTimePickerPlacement as Mt, BTimePickerSize as Nt, BTimePickerStatus as Pt, BTimePickerVariant as Ft } from "./design-system227.js";
+import It from "./design-system230.js";
+import Lt from "./design-system233.js";
+import Rt from "./design-system236.js";
+import zt from "./design-system239.js";
+import Bt from "./design-system242.js";
+import Vt from "./design-system244.js";
+import Ht from "./design-system247.js";
+import { BTourPlacement as Ut, BTourType as Wt } from "./design-system248.js";
+import Gt from "./design-system251.js";
+import Kt from "./design-system254.js";
+import { BTreeSelectPlacement as qt, BTreeSelectStatus as Jt, BTreeSelectVariant as Yt } from "./design-system255.js";
+import Xt from "./design-system258.js";
+import { BUploadFileStatus as Zt, BUploadListType as Qt } from "./design-system259.js";
+import $t from "./design-system262.js";
+export { D as BAlert, ee as BAlertType, O as BAnchor, j as BAutoComplete, k as BAutoCompleteStatus, A as BAutoCompleteVariant, M as BAvatar, te as BAvatarShape, e as BAvatarSize, N as BBadge, t as BBadgeSize, n as BBadgeStatus, P as BBreadcrumb, I as BButton, r as BButtonVariant, R as BCalendar, z as BCard, B as BCardGrid, V as BCardMeta, i as BCardSize, a as BCardType, H as BCarousel, q as BCascader, U as BCascaderExpandTrigger, W as BCascaderPlacement, G as BCascaderSize, K as BCascaderStatus, Y as BCheckbox, X as BCheckboxGroup, Z as BCollapse, Z as BCollapseGroup, Q as BCollapsePanel, oe as BColorPicker, ne as BColorPickerFormat, re as BColorPickerPlacement, ie as BColorPickerSize, ae as BColorPickerTrigger, o as BCommonColor, s as BCommonSize, fe as BDatePicker, se as BDatePickerPlacement, ce as BDatePickerSize, le as BDatePickerStatus, ue as BDatePickerType, de as BDatePickerVariant, pe as BDescriptions, me as BDescriptionsItem, he as BDivider, ge as BDrawer, c as BDrawerPlacement, l as BDrawerSize, ye as BDropdown, _e as BDropdownPlacement, ve as BDropdownTrigger, be as BEmpty, u as BEmptyImage, Te as BFloatButton, Ee as BFloatButtonBackTop, De as BFloatButtonGroup, xe as BFloatButtonGroupPlacement, Se as BFloatButtonShape, Ce as BFloatButtonTrigger, we as BFloatButtonType, Fe as BForm, Ie as BFormItem, je as BFormLabelAlign, Me as BFormLayout, Ne as BFormRequiredMark, Pe as BFormValidateStatus, $ as BFormValidateTrigger, F as BIcon, d as BIconSize, f as BIconVariant, Le as BImage, Be as BInput, Ve as BInputNumber, Re as BInputStatus, ze as BInputVariant, He as BMasonry, Ke as BMentions, Ue as BMentionsPlacement, We as BMentionsStatus, Ge as BMentionsVariant, Ze as BMenu, qe as BMenuDivider, Je as BMenuItem, Ye as BMenuItemGroup, Xe as BMenuSubMenu, Qe as BMessage, p as BMessageType, L as BModal, $e as BModalBody, et as BModalFooter, tt as BModalHeader, nt as BNotification, m as BNotificationPlacement, h as BNotificationType, rt as BPagination, it as BPopconfirm, g as BPopconfirmPlacement, _ as BPopconfirmTrigger, at as BPopover, v as BPopoverPlacement, y as BPopoverTrigger, st as BRadio, ct as BRadioButton, lt as BRadioGroup, ut as BRate, dt as BSegmented, gt as BSelect, ft as BSelectMode, pt as BSelectPlacement, mt as BSelectStatus, ht as BSelectVariant, vt as BSkeleton, _t as BSkeletonAvatar, yt as BSkeletonButton, bt as BSkeletonImage, xt as BSkeletonInput, St as BSkeletonNode, Ct as BSlider, wt as BSpin, b as BSpinSize, Et as BSplitter, Tt as BSplitterPanel, Dt as BStatistic, Ot as BStatisticTimer, kt as BSteps, x as BStepsDirection, S as BStepsLabelPlacement, C as BStepsStatus, w as BStepsType, At as BSwitch, Lt as BTabPane, jt as BTable, Rt as BTabs, zt as BTag, It as BTimePicker, Mt as BTimePickerPlacement, Nt as BTimePickerSize, Pt as BTimePickerStatus, Ft as BTimePickerVariant, Bt as BTimeline, Vt as BTimelineItem, Ht as BTooltip, T as BTooltipPlacement, E as BTooltipTrigger, Gt as BTour, Ut as BTourPlacement, Wt as BTourType, Kt as BTree, Xt as BTreeSelect, qt as BTreeSelectPlacement, Jt as BTreeSelectStatus, Yt as BTreeSelectVariant, $t as BUpload, Zt as BUploadFileStatus, Qt as BUploadListType, J as B_CHECKBOX_GROUP_KEY, ot as B_RADIO_GROUP_KEY, Oe as PIKey, ke as useValidationField, Ae as useValidationForm };

package/dist/design-system100.js

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

package/dist/design-system100.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system100.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-system100.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /**\n   * Controlled open state. Use with `v-model:open` for two-way binding.\n   * When this prop changes, the internal state syncs to it.\n   */\n  open?: boolean | null;\n  /**\n   * The trigger mode for expanding/collapsing the group menu.\n   * When set, a trigger button is shown that reveals child buttons.\n   */\n  trigger?: `${BFloatButtonTrigger}`;\n  /**\n   * Animation direction when expanding/collapsing.\n   * @default 'top'\n   */\n  placement?: `${BFloatButtonGroupPlacement}`;\n  /**\n   * Shape applied to all child float buttons.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Icon name for the close/collapse trigger button.\n   */\n  closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the group open state changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n  /** Float button children. */\n  default?(): unknown;\n  /** Custom trigger icon (open state). */\n  icon?(): unknown;\n  /** Custom close icon (close state). */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n  () => props.open,\n  (val) => {\n    if (val === true) internalOpen.value = true;\n    else if (val === false) internalOpen.value = false;\n    // null/undefined means \"uncontrolled\" — do not override internal state\n  },\n  { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n  internalOpen.value = val;\n  emit('update:open', val);\n  emit('openChange', val);\n}\n\nfunction toggle() {\n  setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n  setOpen(true);\n}\n\nfunction closeGroup() {\n  setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n  openGroup();\n}\n\nfunction onMouseLeave() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n  if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n  'bFloatButtonGroupShape',\n  computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n  () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n  () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n  <div\n    class=\"b-float-button-group\"\n    :class=\"[\n      placementClass,\n      shapeClass,\n      {\n        'b-float-button-group--menu': isGroup,\n        'b-float-button-group--open': isGroup && internalOpen,\n      },\n    ]\"\n    :role=\"!isGroup ? 'group' : undefined\"\n    :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n    <div\n      class=\"b-float-button-group__list\"\n      :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n      :inert=\"isGroup && !internalOpen ? true : undefined\"\n    >\n      <slot />\n    </div>\n\n    <!-- Trigger button (only rendered when trigger is set) -->\n    <button\n      v-if=\"isGroup\"\n      type=\"button\"\n      class=\"b-float-button-group__trigger\"\n      :class=\"[\n        'b-float-button',\n        `b-float-button--${props.shape ?? 'circle'}`,\n        'b-float-button--primary',\n      ]\"\n      :aria-expanded=\"internalOpen\"\n      :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n      @click=\"toggle\"\n    >\n      <span class=\"b-float-button__body\">\n        <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n          <template v-if=\"internalOpen\">\n            <slot name=\"closeIcon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n            </slot>\n          </template>\n          <template v-else>\n            <slot name=\"icon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n              </svg>\n            </slot>\n          </template>\n        </span>\n      </span>\n    </button>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   Group container\n   ───────────────────────────────────────────── */\n.b-float-button-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  position: relative;\n}\n\n.b-float-button-group--menu {\n  position: relative;\n}\n\n/* ─────────────────────────────────────────────\n   Items list (collapsible)\n   ───────────────────────────────────────────── */\n.b-float-button-group__list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  list-style: none;\n  padding: 0;\n  margin: 0 0 0.75rem 0;\n\n  /* Collapsed: hidden */\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n  max-height: 60vh;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ── Placement variants for list direction ── */\n.b-float-button-group--top .b-float-button-group__list {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n  flex-direction: column;\n}\n\n.b-float-button-group--left .b-float-button-group__list {\n  flex-direction: row-reverse;\n  margin: 0 0.75rem 0 0;\n}\n\n.b-float-button-group--right .b-float-button-group__list {\n  flex-direction: row;\n  margin: 0 0 0 0.75rem;\n}\n\n/* ── Horizontal layout for left/right placements ── */\n.b-float-button-group--left,\n.b-float-button-group--right {\n  flex-direction: row;\n  align-items: center;\n}\n\n/* ── Trigger button ── */\n.b-float-button-group__trigger {\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-group__list {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}