bootstrap-vue-next 0.45.6 → 0.45.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -76,6 +76,10 @@ var BFormFile_default = /* @__PURE__ */ defineComponent({
76
76
  props: /* @__PURE__ */ mergeModels({
77
77
  ariaLabel: { default: void 0 },
78
78
  ariaLabelledby: { default: void 0 },
79
+ ariaLiveFormatter: {
80
+ type: Function,
81
+ default: void 0
82
+ },
79
83
  accept: { default: "" },
80
84
  autofocus: {
81
85
  type: Boolean,
@@ -202,6 +206,7 @@ var BFormFile_default = /* @__PURE__ */ defineComponent({
202
206
  const showExternalDisplay = computed(() => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder));
203
207
  const ariaLiveMessage = computed(() => {
204
208
  if (!hasFiles.value) return "";
209
+ if (props.ariaLiveFormatter) return props.ariaLiveFormatter(selectedFiles.value);
205
210
  const count = selectedFiles.value.length;
206
211
  if (count === 1) return `File selected: ${selectedFiles.value[0]?.name}`;
207
212
  return `${count} files selected`;
@@ -409,4 +414,4 @@ var BFormFile_default = /* @__PURE__ */ defineComponent({
409
414
  //#endregion
410
415
  export { BFormFile_default as t };
411
416
 
412
- //# sourceMappingURL=BFormFile-EXRrATZm.mjs.map
417
+ //# sourceMappingURL=BFormFile-CZebm0Cp.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BFormFile-CZebm0Cp.mjs","names":[],"sources":["../src/components/BFormFile/BFormFile.vue","../src/components/BFormFile/BFormFile.vue"],"sourcesContent":["<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileProps, BFormFileSlots} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n ariaLiveFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n if (props.ariaLiveFormatter) {\n return props.ariaLiveFormatter(selectedFiles.value)\n }\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n","<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileProps, BFormFileSlots} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n ariaLiveFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n if (props.ariaLiveFormatter) {\n return props.ariaLiveFormatter(selectedFiles.value)\n }\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n"],"mappings":"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"}
@@ -77,6 +77,10 @@ var BFormFile_default = /* @__PURE__ */ (0, vue.defineComponent)({
77
77
  props: /* @__PURE__ */ (0, vue.mergeModels)({
78
78
  ariaLabel: { default: void 0 },
79
79
  ariaLabelledby: { default: void 0 },
80
+ ariaLiveFormatter: {
81
+ type: Function,
82
+ default: void 0
83
+ },
80
84
  accept: { default: "" },
81
85
  autofocus: {
82
86
  type: Boolean,
@@ -203,6 +207,7 @@ var BFormFile_default = /* @__PURE__ */ (0, vue.defineComponent)({
203
207
  const showExternalDisplay = (0, vue.computed)(() => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder));
204
208
  const ariaLiveMessage = (0, vue.computed)(() => {
205
209
  if (!hasFiles.value) return "";
210
+ if (props.ariaLiveFormatter) return props.ariaLiveFormatter(selectedFiles.value);
206
211
  const count = selectedFiles.value.length;
207
212
  if (count === 1) return `File selected: ${selectedFiles.value[0]?.name}`;
208
213
  return `${count} files selected`;
@@ -415,4 +420,4 @@ Object.defineProperty(exports, "BFormFile_default", {
415
420
  }
416
421
  });
417
422
 
418
- //# sourceMappingURL=BFormFile-X-BQsYko.js.map
423
+ //# sourceMappingURL=BFormFile-MISLntyJ.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BFormFile-MISLntyJ.js","names":[],"sources":["../src/components/BFormFile/BFormFile.vue","../src/components/BFormFile/BFormFile.vue"],"sourcesContent":["<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileProps, BFormFileSlots} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n ariaLiveFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n if (props.ariaLiveFormatter) {\n return props.ariaLiveFormatter(selectedFiles.value)\n }\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n","<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileProps, BFormFileSlots} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n ariaLiveFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n if (props.ariaLiveFormatter) {\n return props.ariaLiveFormatter(selectedFiles.value)\n }\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n"],"mappings":"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"}
@@ -160,11 +160,11 @@ var BOffcanvas_default = /* @__PURE__ */ (0, vue.defineComponent)({
160
160
  enterFromClass: "",
161
161
  leaveFromClass: ""
162
162
  } });
163
- const smallerOrEqualToBreakpoint = require_dist.useBreakpoints(require_dist.breakpointsBootstrapV5).smallerOrEqual(() => props.responsive ?? "xs");
163
+ const smallerThanBreakpoint = require_dist.useBreakpoints(require_dist.breakpointsBootstrapV5).smaller(() => props.responsive ?? "xs");
164
164
  const isOpenByBreakpoint = (0, vue.ref)(false);
165
165
  (0, vue.onMounted)(() => {
166
166
  if (props.responsive !== void 0) {
167
- isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value;
167
+ isOpenByBreakpoint.value = !smallerThanBreakpoint.value;
168
168
  emit("breakpoint", buildTriggerableEvent("breakpoint"), isOpenByBreakpoint.value);
169
169
  }
170
170
  });
@@ -213,7 +213,7 @@ var BOffcanvas_default = /* @__PURE__ */ (0, vue.defineComponent)({
213
213
  id: computedId.value,
214
214
  active: trapActive.value
215
215
  }));
216
- (0, vue.watch)(smallerOrEqualToBreakpoint, (newValue) => {
216
+ (0, vue.watch)(smallerThanBreakpoint, (newValue) => {
217
217
  if (props.responsive === void 0) return;
218
218
  if (newValue === true) {
219
219
  const opened = false;
@@ -238,7 +238,7 @@ var BOffcanvas_default = /* @__PURE__ */ (0, vue.defineComponent)({
238
238
  isOpenByBreakpoint.value = false;
239
239
  return;
240
240
  }
241
- const opened = !smallerOrEqualToBreakpoint.value;
241
+ const opened = !smallerThanBreakpoint.value;
242
242
  if (opened === isOpenByBreakpoint.value) return;
243
243
  setLocalNoAnimation(true);
244
244
  requestAnimationFrame(() => {
@@ -328,4 +328,4 @@ Object.defineProperty(exports, "BOffcanvas_default", {
328
328
  }
329
329
  });
330
330
 
331
- //# sourceMappingURL=BOffcanvas-DTRiZzwN.js.map
331
+ //# sourceMappingURL=BOffcanvas-C7HenFW0.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BOffcanvas-C7HenFW0.js","names":["$attrs"],"sources":["../src/components/BOffcanvas/BOffcanvas.vue","../src/components/BOffcanvas/BOffcanvas.vue"],"sourcesContent":["<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerThanBreakpoint = breakpoints.smaller(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerThanBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerThanBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerThanBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n","<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerThanBreakpoint = breakpoints.smaller(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerThanBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerThanBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerThanBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;AAiPA,IAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAvF9B,MAAM,QAAQ,oBAAA,YAhCC,SAgCmB,aAAY;EAC9C,MAAM,OAAO;EACb,MAAM,SAAA,GAAA,IAAA,WAAQ;EAEd,MAAM,cAAA,GAAA,IAAA,UAA2E,SAAA,aAEhF;EAED,MAAM,aAAa,cAAA,YAAY,MAAM,IAAI,YAAW;EAEpD,MAAM,WAAA,GAAA,IAAA,gBAA6C,WAAU;EAC7D,MAAM,wBAAA,GAAA,IAAA,gBAA0D,wBAAuB;EACvF,MAAM,eAAA,GAAA,IAAA,gBAAiD,SAAQ;EAE/D,MAAM,sBAAsB;AAC1B,OAAI,MAAM,SAAS,OAAO,MAAM,UAAU,WAAW;AACnD,QAAI,MAAM,UAAU,QAClB,QAAO;AAET,WAAO,mBAAA,WAAW,MAAM,OAAO,QAAQ,SAAS,KAAA,EAAS;;AAE3D,UAAO;;EAGT,MAAM,qBAAqB;AACzB,IAAA,GAAA,IAAA,gBAAe;AACb,QAAI,MAAM,UAAU,SAAS,CAAC,mBAAmB,SAAS,MAAM,OACzC,cAAA,aAAa,eAAe,CAAA,EACnC,OAAM;KAEvB;;EAGH,MAAM,EACJ,SACA,WACA,mBACA,MACA,MACA,QACA,qBACA,gBACA,iBACA,eACA,yBACA,iBACA,WACA,uBACA,WACA,YACA,wBACE,oBAAA,YAAY,YAAY,OAAO,MAAgB,SAAS,YAAY,EACtE,iBAAiB;GACf;GACA,cAAc;GACd,cAAc;GACd,kBAAkB;GAClB,kBAAkB;GAClB,gBAAgB;GAChB,gBAAgB;GACjB,EACF,CAAA;EAGD,MAAM,wBADc,aAAA,eAAe,aAAA,uBAAsB,CACf,cAAc,MAAM,cAAc,KAAI;EAGhF,MAAM,sBAAA,GAAA,IAAA,KAAyB,MAAK;AAEpC,GAAA,GAAA,IAAA,iBAAgB;AACd,OAAI,MAAM,eAAe,KAAA,GAAW;AAElC,uBAAmB,QAAQ,CAAC,sBAAsB;AAClD,SAAK,cAAc,sBAAsB,aAAa,EAAE,mBAAmB,MAAK;;IAEnF;AAED,4BAAA,kBAAkB,eAAe,MAAM,iBAAiB,mBAAmB,MAAK;AAEhF,eAAA,YACE,gBACM;AACJ,QAAK,MAAK;KAEZ;GAAC,QAAQ;GAAS,SAAS;GAAI,CACjC;EAIA,MAAM,EAAC,kBAAiB,0BAAA,sBAAsB;GAC5C;GACA,UAAU;GACV,cAAc,MAAM,UAAU,mBAAmB;GACjD,eAAe;IACb,eAAe;IACf,KAAK;IACN;GACD,aACE,MAAM,UAAU,SAAS,mBAAmB,QACxC,QACC,aAAA,aAAa,eAAe,CAAC,IAAI,KAAA;GACzC,CAAA;EAED,MAAM,gBAAA,GAAA,IAAA,iBAED,MAAM,eAAe,KAAA,KAAa,CAAC,mBAAmB,UACvD,CAAC,MAAM,eACN,QAAQ,UAAU,QAChB,UAAU,SAAS,MAAM,iBAAiB,CAAC,oBAAoB,OACtE;EAEA,MAAM,sBAAA,GAAA,IAAA,gBAAoC,CAAC,YAAA,YAAY,MAAM,gBAAgB,CAAA;EAC7E,MAAM,sBAAA,GAAA,IAAA,gBAAoC,CACxC,EAAC,cAAc,CAAC,mBAAmB,OAAM,EACzC,MAAM,iBACP,CAAA;EACD,MAAM,oBAAA,GAAA,IAAA,iBAAmC;GACvC,SAAS,mBAAmB,QAAQ,MAAM,qBAAqB,KAAA;GAC/D,OAAO,mBAAmB;GAC3B,EAAC;EAEF,MAAM,iBAAA,GAAA,IAAA,gBAA+B,CAAC,YAAA,YAAY,MAAM,OAAO,CAAA;EAC/D,MAAM,mBAAA,GAAA,IAAA,gBAAiC;GACrC,MAAM,eAAe,KAAA,IAAY,cAAc,aAAa,MAAM;GAClE,aAAa,MAAM;GACnB;IACE,QAAQ,UAAU;IAClB,UAAU,UAAU,SAAS,CAAC,UAAU;KACvC,UAAU,MAAM,WAAW,CAAC,CAAC,MAAM;IACpC,iBAAiB,oBAAoB;;GAExC,CAAA;EAED,MAAM,kBAAA,GAAA,IAAA,iBAAiC,EACrC,OAAO,MAAM,OACd,EAAC;EAEF,MAAM,eAAA,GAAA,IAAA,iBAAmD;GACvD,SAAS,UAAU;GACnB,WAAW,MAAM;GACjB;GACA;GACA;GACA,IAAI,WAAW;GACf,QAAQ,WAAW;GACpB,EAAC;AAEF,GAAA,GAAA,IAAA,OAAM,wBAAwB,aAAa;AACzC,OAAI,MAAM,eAAe,KAAA,EAAW;AACpC,OAAI,aAAa,MAAM;IACrB,MAAM,SAAS;AACf,wBAAoB,KAAI;AACxB,gCAA4B;AAC1B,wBAAmB,QAAQ;MAC5B;AACD,SAAK,cAAc,sBAAsB,aAAa,EAAE,OAAM;AAC9D,SAAK,QAAQ,sBAAsB,OAAO,CAAA;UACrC;IACL,MAAM,SAAS;AACf,wBAAoB,KAAI;AACxB,gCAA4B;AAC1B,wBAAmB,QAAQ;MAC5B;AACD,SAAK,cAAc,sBAAsB,aAAa,EAAE,OAAM;AAC9D,SAAK,QAAQ,sBAAsB,OAAO,CAAA;;IAE7C;AAED,GAAA,GAAA,IAAA,aACQ,MAAM,aACX,aAAa;AACZ,OAAI,aAAa,KAAA,GAAW;AAC1B,uBAAmB,QAAQ;AAC3B;;GAEF,MAAM,SAAS,CAAC,sBAAsB;AACtC,OAAI,WAAW,mBAAmB,MAAO;AACzC,uBAAoB,KAAI;AACxB,+BAA4B;AAC1B,uBAAmB,QAAQ;KAC5B;AACD,QAAK,cAAc,sBAAsB,aAAa,EAAE,OAAM;AAC9D,OAAI,OACF,MAAK,QAAQ,sBAAsB,OAAO,CAAA;OAE1C,MAAK,QAAQ,sBAAsB,OAAO,CAAA;IAGhD;AAEA,WAAa;GACX;GACA;GACA;GACA;GACD,CAAA;;qDAtQuB,4BAAA,6BAAA;IArFnB,KAAA,GAAA,IAAA,OAAI,MAAK,CAAC;IACV,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC,oBAAoB,mBAAA;;oCAsExB,EAAA,GAAA,IAAA,OAnEL,UAAS,KAAA,GAAA,IAAA,OAAI,eAAc,IAAI,mBAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,aAmE1B,IAAA,aAAA,GAAA,IAAA,YAAA,EAAA,KAAA,GAAA,GAAA,GAAA,IAAA,OAlEH,gBAAe,EAAA,EACtB,QAAQ,WAAA,UAAA,GAAA,IAAA,OAAc,MAAK,CAAC,SAAA,CAAA,EAAA;qCAgEvB,EAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAAA,QAAA,GAAA,IAAA,YAAA;MAzDH,KAAA,GAAA,IAAA,OAAI,WAAU;MACf,KAAI;MACJ,cAAW;MACX,MAAK;MACJ,OAAO,gBAAA;MACP,OAAO,eAAA;MACR,UAAS;MACR,mBAAe,IAAA,GAAA,IAAA,OAAK,WAAU,CAAA;MAC/B,oBAAiB;QACTA,KAAAA,OAAM,EAAA,EAAA,GAAA,IAAA,OAEE,eAAc,IAAI,mBAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAsCvB,IAAA,UAAA,EAAA,KAAA,GAAA,EAAA;sBApCA,MAAK,CAAC,aAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBA6BT,QAAA,GAAA,IAAA,YAAA;;OA5BJ,OAAK,CAAC,qBAAA,GAAA,IAAA,OACE,MAAK,CAAC,YAAA;wBACN,MAAK,CAAC,YAAW,EAAA,EAAA,GAAA,IAAA,YAyBlB,KAAA,QAAA,WAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAvBqB,YAAA,MAAW,CAAA,QAuBhC,EAAA,GAAA,IAAA,oBAlBA,MAAA;OAJA,IAAE,IAAA,GAAA,IAAA,OAAK,WAAU,CAAA;OAAoB,OAAM;8BAGvC,KAAA,QAAA,UAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAFoB,YAAA,MAAW,CAAA,QAE/B,EAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,OADF,MAAK,CAAC,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,WAAA,EAAA,EAAA,GAAA,IAAA,OAGD,MAAK,CAAC,kBAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAgBZ,IAAA,UAAA,EAAA,KAAA,GAAA,EAAA,CAdD,mBAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,aAME,gBAAA,kBAAA,GAAA,IAAA,YAAA;;OALR,KAAI;SACI,iBAAA,OAAgB,EACvB,SAAK,OAAA,OAAA,OAAA,MAAA,YAAA,GAAA,IAAA,OAAE,KAAI,CAAA,QAAA,GAAA,CAAA,EAAA;uCAEqC,EAAA,GAAA,IAAA,YAAA,KAAA,QAAA,iBAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAAf,YAAA,MAAW,CAAA,CAAA,CAAA,CAAA;;4DAQ7C,qBAAA,uBAAA,GAAA,IAAA,YAAA;;OAJA,KAAI;OACH,eAAA,GAAA,IAAA,OAAY,MAAK,CAAC;SACX,iBAAA,OAAgB,EACvB,SAAK,OAAA,OAAA,OAAA,MAAA,YAAA,GAAA,IAAA,OAAE,KAAI,CAAA,QAAA,GAAA,CAAA,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,EAAA,EAAA,GAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,EAAA,GAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA;kCAOd,QAAA,GAAA,IAAA,YAAA,EAFD,OAAK,CAAC,mBAAA,GAAA,IAAA,OAAyB,MAAK,CAAC,UAAS,EAAA,GAAA,GAAA,IAAA,OAAU,MAAK,CAAC,UAAS,EAAA,EAAA,GAAA,IAAA,YAC7C,KAAA,QAAA,YAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAAf,YAAA,MAAW,CAAA,CAAA,CAAA,EAAA,GAAA;MAEhB,cAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAEL,OAAA;;OAFqB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,MAAK,CAAC,YAAA;8BACK,KAAA,QAAA,WAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAAf,YAAA,MAAW,CAAA,CAAA,CAAA,EAAA,EAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA;qEAInC,cAAa,KAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAKnB,OAAA;;MAJA,KAAI;MACH,QAAA,GAAA,IAAA,gBAAO,sBAAqB;MAC7B,UAAS;MACT,OAAA;OAAA,SAAA;OAAA,UAAA;OAAA,YAAA;;2GA3DkB,QAAO,MAAA,GAAA,IAAA,OAAM,cAAa,KAAA,GAAA,IAAA,OAAI,MAAK,CAAC,iBAAa,EAAA,GAAA,IAAA,OAAM,MAAK,CAAC,kBAA6B,mBAAA,MAAA,CAAA,CAAA,CAAA,CAAA;;iFA+DrG,MAAK,CAAC,cAAA,GAAA,IAAA,YAYZ,KAAA,QAAA,aAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,YAAA,EAAA,KAAA,GAAA,EAZgD,YAAA,MAAW,CAAA,QAY3D,EAAA,GAAA,IAAA,OAXa,kBAAiB,KAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,aAUtB,IAAA,aAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,YAAA,EAAA,KAAA,GAAA,GAAA,GAAA,IAAA,OAVgC,wBAAuB,CAAA,CAAA,EAAA;qCAShE,EAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAAA,OAAA;MANA,QAAA,GAAA,IAAA,gBAAK,CAAC,sBAAoB;6BACG,oBAAmB;4BAAoB,gBAAe,KAAA,GAAA,IAAA,OAAI,oBAAA;;MAItF,SAAK,OAAA,OAAA,OAAA,MAAA,YAAA,GAAA,IAAA,OAAE,KAAI,CAAA,WAAA;+BANJ,aAAA,MAAY,CAAA,CAAA,CAAA,CAAA"}
@@ -159,11 +159,11 @@ var BOffcanvas_default = /* @__PURE__ */ defineComponent({
159
159
  enterFromClass: "",
160
160
  leaveFromClass: ""
161
161
  } });
162
- const smallerOrEqualToBreakpoint = useBreakpoints(breakpointsBootstrapV5).smallerOrEqual(() => props.responsive ?? "xs");
162
+ const smallerThanBreakpoint = useBreakpoints(breakpointsBootstrapV5).smaller(() => props.responsive ?? "xs");
163
163
  const isOpenByBreakpoint = ref(false);
164
164
  onMounted(() => {
165
165
  if (props.responsive !== void 0) {
166
- isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value;
166
+ isOpenByBreakpoint.value = !smallerThanBreakpoint.value;
167
167
  emit("breakpoint", buildTriggerableEvent("breakpoint"), isOpenByBreakpoint.value);
168
168
  }
169
169
  });
@@ -212,7 +212,7 @@ var BOffcanvas_default = /* @__PURE__ */ defineComponent({
212
212
  id: computedId.value,
213
213
  active: trapActive.value
214
214
  }));
215
- watch(smallerOrEqualToBreakpoint, (newValue) => {
215
+ watch(smallerThanBreakpoint, (newValue) => {
216
216
  if (props.responsive === void 0) return;
217
217
  if (newValue === true) {
218
218
  const opened = false;
@@ -237,7 +237,7 @@ var BOffcanvas_default = /* @__PURE__ */ defineComponent({
237
237
  isOpenByBreakpoint.value = false;
238
238
  return;
239
239
  }
240
- const opened = !smallerOrEqualToBreakpoint.value;
240
+ const opened = !smallerThanBreakpoint.value;
241
241
  if (opened === isOpenByBreakpoint.value) return;
242
242
  setLocalNoAnimation(true);
243
243
  requestAnimationFrame(() => {
@@ -322,4 +322,4 @@ var BOffcanvas_default = /* @__PURE__ */ defineComponent({
322
322
  //#endregion
323
323
  export { BOffcanvas_default as t };
324
324
 
325
- //# sourceMappingURL=BOffcanvas-CQb9XNvS.mjs.map
325
+ //# sourceMappingURL=BOffcanvas-CF-dWeez.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BOffcanvas-CF-dWeez.mjs","names":["$attrs"],"sources":["../src/components/BOffcanvas/BOffcanvas.vue","../src/components/BOffcanvas/BOffcanvas.vue"],"sourcesContent":["<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerThanBreakpoint = breakpoints.smaller(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerThanBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerThanBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerThanBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n","<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerThanBreakpoint = breakpoints.smaller(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerThanBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerThanBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerThanBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n"],"mappings":"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"}
@@ -43,7 +43,7 @@ import { t as BFormSelectOption_default } from "./BFormSelectOption-DFN4lPRh.mjs
43
43
  import { n as BFormDatalist_default, t as BFormFloatingLabel_default } from "./BForm-DJu2hDV_.mjs";
44
44
  import { i as BFormInvalidFeedback_default, n as BFormText_default, r as BFormRow_default, t as BFormValidFeedback_default } from "./BFormValidFeedback-CBYxQLDz.mjs";
45
45
  import { n as BFormCheckbox_default, t as BFormCheckboxGroup_default } from "./BFormCheckbox-Baf_9BSc.mjs";
46
- import { t as BFormFile_default } from "./BFormFile-EXRrATZm.mjs";
46
+ import { t as BFormFile_default } from "./BFormFile-CZebm0Cp.mjs";
47
47
  import { t as BFormGroup_default } from "./BFormGroup-vysRPb99.mjs";
48
48
  import { n as BFormRadio_default, t as BFormRadioGroup_default } from "./BFormRadio-COc_IbxC.mjs";
49
49
  import { t as BFormRating_default } from "./BFormRating-CIgPVsH_.mjs";
@@ -56,7 +56,7 @@ import { n as BListGroup_default, t as BListGroupItem_default } from "./BListGro
56
56
  import { useScrollLock } from "./src/composables/useScrollLock/index.mjs";
57
57
  import { a as BNav_default, i as BNavForm_default, n as BNavItemDropdown_default, r as BNavItem_default, t as BNavText_default } from "./BNav-DfYvjfRK.mjs";
58
58
  import { i as BNavbar_default, n as BNavbarNav_default, r as BNavbarBrand_default, t as BNavbarToggle_default } from "./BNavbar-xYaikQVY.mjs";
59
- import { t as BOffcanvas_default } from "./BOffcanvas-CQb9XNvS.mjs";
59
+ import { t as BOffcanvas_default } from "./BOffcanvas-CF-dWeez.mjs";
60
60
  import { t as BOverlay_default } from "./BOverlay-Bh2PIN_q.mjs";
61
61
  import { a as directiveNames, i as composablesWithExternalPath, n as componentsWithExternalPath, o as directivesWithExternalPath, r as composableNames, t as componentNames } from "./BootstrapVueOptions-Dt1TQdih.mjs";
62
62
  import { t as types_exports } from "./src/types/index.mjs";
@@ -44,7 +44,7 @@ const require_BFormSelectOption = require("./BFormSelectOption-DrwJucNf.js");
44
44
  const require_BForm$1 = require("./BForm-6JlWdQMO.js");
45
45
  const require_BFormValidFeedback = require("./BFormValidFeedback-Kwxh798d.js");
46
46
  const require_BFormCheckbox = require("./BFormCheckbox-D5ySHMJ8.js");
47
- const require_BFormFile = require("./BFormFile-X-BQsYko.js");
47
+ const require_BFormFile = require("./BFormFile-MISLntyJ.js");
48
48
  const require_BFormGroup = require("./BFormGroup-Bk1t-D1N.js");
49
49
  const require_BFormRadio = require("./BFormRadio-B2yu-o2v.js");
50
50
  const require_BFormRating = require("./BFormRating-CSdRxN5z.js");
@@ -57,7 +57,7 @@ const require_BListGroup = require("./BListGroup-C8JOzHTz.js");
57
57
  const require_src_composables_useScrollLock_index = require("./src/composables/useScrollLock/index.umd.js");
58
58
  const require_BNav = require("./BNav-DCLambmM.js");
59
59
  const require_BNavbar = require("./BNavbar-BLWaZJRP.js");
60
- const require_BOffcanvas = require("./BOffcanvas-DTRiZzwN.js");
60
+ const require_BOffcanvas = require("./BOffcanvas-C7HenFW0.js");
61
61
  const require_BOverlay = require("./BOverlay-Bh4ldxgt.js");
62
62
  const require_BootstrapVueOptions = require("./BootstrapVueOptions-DeViqxoD.js");
63
63
  const require_src_types_index = require("./src/types/index.umd.js");
@@ -1,4 +1,4 @@
1
- import { BFormFileSlots, BFormFileProps } from '../../types';
1
+ import { BFormFileProps, BFormFileSlots } from '../../types';
2
2
  type __VLS_Props = Omit<BFormFileProps, 'modelValue'>;
3
3
  type __VLS_PublicProps = {
4
4
  modelValue?: Exclude<BFormFileProps['modelValue'], undefined>;
@@ -42,6 +42,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
42
42
  multiple: boolean;
43
43
  plain: boolean;
44
44
  ariaLabelledby: string;
45
+ ariaLiveFormatter: (files: readonly File[]) => string;
45
46
  accept: string | readonly string[];
46
47
  browseText: string;
47
48
  capture: "user" | "environment";
@@ -1,4 +1,4 @@
1
- import { BFormFileSlots, BFormFileProps } from '../../types';
1
+ import { BFormFileProps, BFormFileSlots } from '../../types';
2
2
  type __VLS_Props = Omit<BFormFileProps, 'modelValue'>;
3
3
  type __VLS_PublicProps = {
4
4
  modelValue?: Exclude<BFormFileProps['modelValue'], undefined>;
@@ -42,6 +42,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
42
42
  multiple: boolean;
43
43
  plain: boolean;
44
44
  ariaLabelledby: string;
45
+ ariaLiveFormatter: (files: readonly File[]) => string;
45
46
  accept: string | readonly string[];
46
47
  browseText: string;
47
48
  capture: "user" | "environment";
@@ -1,2 +1,2 @@
1
- import { t as BFormFile_default } from "../../../BFormFile-EXRrATZm.mjs";
1
+ import { t as BFormFile_default } from "../../../BFormFile-CZebm0Cp.mjs";
2
2
  export { BFormFile_default as BFormFile };
@@ -1,3 +1,3 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
- const require_BFormFile = require("../../../BFormFile-X-BQsYko.js");
2
+ const require_BFormFile = require("../../../BFormFile-MISLntyJ.js");
3
3
  exports.BFormFile = require_BFormFile.BFormFile_default;
@@ -1,2 +1,2 @@
1
- import { t as BOffcanvas_default } from "../../../BOffcanvas-CQb9XNvS.mjs";
1
+ import { t as BOffcanvas_default } from "../../../BOffcanvas-CF-dWeez.mjs";
2
2
  export { BOffcanvas_default as BOffcanvas };
@@ -1,3 +1,3 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
- const require_BOffcanvas = require("../../../BOffcanvas-DTRiZzwN.js");
2
+ const require_BOffcanvas = require("../../../BOffcanvas-C7HenFW0.js");
3
3
  exports.BOffcanvas = require_BOffcanvas.BOffcanvas_default;
@@ -39,7 +39,7 @@ import { t as BFormSelectOption_default } from "../../BFormSelectOption-DFN4lPRh
39
39
  import { n as BFormDatalist_default, t as BFormFloatingLabel_default } from "../../BForm-DJu2hDV_.mjs";
40
40
  import { i as BFormInvalidFeedback_default, n as BFormText_default, r as BFormRow_default, t as BFormValidFeedback_default } from "../../BFormValidFeedback-CBYxQLDz.mjs";
41
41
  import { n as BFormCheckbox_default, t as BFormCheckboxGroup_default } from "../../BFormCheckbox-Baf_9BSc.mjs";
42
- import { t as BFormFile_default } from "../../BFormFile-EXRrATZm.mjs";
42
+ import { t as BFormFile_default } from "../../BFormFile-CZebm0Cp.mjs";
43
43
  import { t as BFormGroup_default } from "../../BFormGroup-vysRPb99.mjs";
44
44
  import "./BFormInput/index.mjs";
45
45
  import { n as BFormRadio_default, t as BFormRadioGroup_default } from "../../BFormRadio-COc_IbxC.mjs";
@@ -54,7 +54,7 @@ import "./BLink/index.mjs";
54
54
  import { n as BListGroup_default, t as BListGroupItem_default } from "../../BListGroup-DwTLpNiD.mjs";
55
55
  import { a as BNav_default, i as BNavForm_default, n as BNavItemDropdown_default, r as BNavItem_default, t as BNavText_default } from "../../BNav-DfYvjfRK.mjs";
56
56
  import { i as BNavbar_default, n as BNavbarNav_default, r as BNavbarBrand_default, t as BNavbarToggle_default } from "../../BNavbar-xYaikQVY.mjs";
57
- import { t as BOffcanvas_default } from "../../BOffcanvas-CQb9XNvS.mjs";
57
+ import { t as BOffcanvas_default } from "../../BOffcanvas-CF-dWeez.mjs";
58
58
  import { t as BOverlay_default } from "../../BOverlay-Bh2PIN_q.mjs";
59
59
  import { t as BPagination_default } from "../../BPagination-D75q-ZNg.mjs";
60
60
  import { a as BPlaceholder_default, i as BPlaceholderButton_default, n as BPlaceholderTable_default, r as BPlaceholderCard_default, t as BPlaceholderWrapper_default } from "../../BPlaceholder-DPQ6mCLN.mjs";
@@ -40,7 +40,7 @@ const require_BFormSelectOption = require("../../BFormSelectOption-DrwJucNf.js")
40
40
  const require_BForm$1 = require("../../BForm-6JlWdQMO.js");
41
41
  const require_BFormValidFeedback = require("../../BFormValidFeedback-Kwxh798d.js");
42
42
  const require_BFormCheckbox = require("../../BFormCheckbox-D5ySHMJ8.js");
43
- const require_BFormFile = require("../../BFormFile-X-BQsYko.js");
43
+ const require_BFormFile = require("../../BFormFile-MISLntyJ.js");
44
44
  const require_BFormGroup = require("../../BFormGroup-Bk1t-D1N.js");
45
45
  require("./BFormInput/index.umd.js");
46
46
  const require_BFormRadio = require("../../BFormRadio-B2yu-o2v.js");
@@ -55,7 +55,7 @@ require("./BLink/index.umd.js");
55
55
  const require_BListGroup = require("../../BListGroup-C8JOzHTz.js");
56
56
  const require_BNav = require("../../BNav-DCLambmM.js");
57
57
  const require_BNavbar = require("../../BNavbar-BLWaZJRP.js");
58
- const require_BOffcanvas = require("../../BOffcanvas-DTRiZzwN.js");
58
+ const require_BOffcanvas = require("../../BOffcanvas-C7HenFW0.js");
59
59
  const require_BOverlay = require("../../BOverlay-Bh4ldxgt.js");
60
60
  const require_BPagination = require("../../BPagination-fbjFAtxu.js");
61
61
  const require_BPlaceholder = require("../../BPlaceholder-B3rs_39w.js");
@@ -336,6 +336,10 @@ export interface BFormDatalistProps<Item = Record<string, unknown> | string | nu
336
336
  export interface BFormFileProps {
337
337
  ariaLabel?: string;
338
338
  ariaLabelledby?: string;
339
+ /**
340
+ * Serves the purpose of adding a custom message, as well as i18n support
341
+ */
342
+ ariaLiveFormatter?: (files: readonly File[]) => string;
339
343
  accept?: string | readonly string[];
340
344
  autofocus?: boolean;
341
345
  browseText?: string;
@@ -343,6 +347,9 @@ export interface BFormFileProps {
343
347
  directory?: boolean;
344
348
  disabled?: boolean;
345
349
  dropPlaceholder?: string;
350
+ /**
351
+ * Serves the purpose of adding a custom message, as well as i18n support
352
+ */
346
353
  fileNameFormatter?: (files: readonly File[]) => string;
347
354
  form?: string;
348
355
  id?: string;
@@ -336,6 +336,10 @@ export interface BFormDatalistProps<Item = Record<string, unknown> | string | nu
336
336
  export interface BFormFileProps {
337
337
  ariaLabel?: string;
338
338
  ariaLabelledby?: string;
339
+ /**
340
+ * Serves the purpose of adding a custom message, as well as i18n support
341
+ */
342
+ ariaLiveFormatter?: (files: readonly File[]) => string;
339
343
  accept?: string | readonly string[];
340
344
  autofocus?: boolean;
341
345
  browseText?: string;
@@ -343,6 +347,9 @@ export interface BFormFileProps {
343
347
  directory?: boolean;
344
348
  disabled?: boolean;
345
349
  dropPlaceholder?: string;
350
+ /**
351
+ * Serves the purpose of adding a custom message, as well as i18n support
352
+ */
346
353
  fileNameFormatter?: (files: readonly File[]) => string;
347
354
  form?: string;
348
355
  id?: string;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "bootstrap-vue-next",
3
3
  "displayName": "BootstrapVueNext",
4
4
  "description": "Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development",
5
- "version": "0.45.6",
5
+ "version": "0.45.8",
6
6
  "license": "MIT",
7
7
  "main": "./dist/bootstrap-vue-next.umd.js",
8
8
  "module": "./dist/bootstrap-vue-next.mjs",
@@ -1 +0,0 @@
1
- {"version":3,"file":"BFormFile-EXRrATZm.mjs","names":[],"sources":["../src/components/BFormFile/BFormFile.vue","../src/components/BFormFile/BFormFile.vue"],"sourcesContent":["<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileSlots, BFormFileProps} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n","<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileSlots, BFormFileProps} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"BFormFile-X-BQsYko.js","names":[],"sources":["../src/components/BFormFile/BFormFile.vue","../src/components/BFormFile/BFormFile.vue"],"sourcesContent":["<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileSlots, BFormFileProps} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n","<template>\n <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n <!-- Optional label -->\n <label\n v-if=\"hasLabelSlot || props.label\"\n class=\"form-label\"\n :class=\"props.labelClass\"\n :for=\"computedId\"\n >\n <slot name=\"label\">\n {{ props.label }}\n </slot>\n </label>\n\n <!-- Drop zone wrapper -->\n <div\n v-if=\"!props.plain\"\n ref=\"dropZoneRef\"\n v-bind=\"processedAttrs.dropZoneAttrs\"\n class=\"b-form-file-wrapper\"\n :class=\"{\n 'b-form-file-dragging': isOverDropZone && !props.noDrop,\n 'b-form-file-has-files': hasFiles,\n }\"\n >\n <!-- Custom file control (mimics Bootstrap native input) -->\n <div\n class=\"b-form-file-control\"\n :class=\"computedClasses\"\n :aria-disabled=\"props.disabled\"\n @click=\"handleControlClick\"\n >\n <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n <button\n v-if=\"!props.noButton\"\n :id=\"computedId\"\n ref=\"browseButtonRef\"\n type=\"button\"\n class=\"b-form-file-button\"\n :disabled=\"props.disabled\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n @click.stop=\"openFileDialog\"\n >\n {{ effectiveBrowseText }}\n </button>\n\n <!-- File name display -->\n <div class=\"b-form-file-text\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n </span>\n </slot>\n </div>\n </div>\n\n <!-- Drag overlay (only shown when dragging) -->\n <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n <slot name=\"drop-placeholder\">\n <div class=\"b-form-file-drag-text\">\n {{ effectiveDropPlaceholder }}\n </div>\n </slot>\n </div>\n\n <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n <input\n ref=\"customInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :name=\"props.name\"\n :form=\"props.form\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :required=\"props.required\"\n :accept=\"computedAccept || undefined\"\n :capture=\"props.capture\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n style=\"\n position: absolute;\n z-index: -5;\n width: 0;\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n \"\n />\n </div>\n\n <!-- Plain mode - simple native input -->\n <input\n v-else\n :id=\"computedId\"\n ref=\"plainInputRef\"\n v-bind=\"processedAttrs.inputAttrs\"\n type=\"file\"\n :class=\"computedPlainClasses\"\n :form=\"props.form\"\n :name=\"props.name\"\n :multiple=\"props.multiple || props.directory\"\n :disabled=\"props.disabled\"\n :capture=\"props.capture\"\n :accept=\"computedAccept || undefined\"\n :required=\"props.required || undefined\"\n :aria-label=\"props.ariaLabel\"\n :aria-labelledby=\"props.ariaLabelledby\"\n :aria-required=\"props.required || undefined\"\n :directory=\"props.directory || undefined\"\n :webkitdirectory=\"props.directory || undefined\"\n @change=\"onPlainChange\"\n />\n\n <!-- External file display (when showFileNames is true and not plain) -->\n <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n <div v-if=\"hasFiles\" class=\"small text-muted\">\n {{ formattedFileNames }}\n </div>\n <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n <slot name=\"placeholder\">\n {{ props.placeholder }}\n </slot>\n </div>\n </slot>\n </div>\n\n <!-- ARIA live region for screen reader announcements -->\n <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ ariaLiveMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileSlots, BFormFileProps} from '../../types'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n ariaLabel: undefined,\n ariaLabelledby: undefined,\n accept: '',\n autofocus: false,\n browseText: undefined,\n capture: undefined,\n directory: false,\n disabled: false,\n dropPlaceholder: undefined,\n fileNameFormatter: undefined,\n form: undefined,\n id: undefined,\n label: '',\n labelClass: undefined,\n multiple: false,\n name: undefined,\n noButton: false,\n noDrop: false,\n plain: false,\n placeholder: 'No file chosen',\n required: false,\n showFileNames: false,\n size: undefined,\n state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n // In plain mode, pass all attributes to the input element\n if (props.plain) {\n return {\n rootAttrs: {},\n dropZoneAttrs: {},\n inputAttrs: attrs,\n }\n }\n // In custom mode, split attributes:\n // - class/style go to root (for layout/positioning)\n // - title goes to drop zone (for tooltip on interactive element)\n // - everything else goes to hidden input (for form functionality)\n const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n const rootAttrs: Record<string, unknown> = {}\n const dropZoneAttrs: Record<string, unknown> = {}\n if (rootClass !== undefined) rootAttrs.class = rootClass\n if (rootStyle !== undefined) rootAttrs.style = rootStyle\n if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n return {\n rootAttrs,\n dropZoneAttrs,\n inputAttrs,\n }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n open,\n reset: resetDialog,\n onChange: onDialogChange,\n} = useFileDialog({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n onDrop: (files) => {\n if (files && !props.noDrop) {\n handleFiles(files)\n }\n },\n multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\nconst computedPlainClasses = computed(() => [\n 'form-control',\n stateClass.value,\n {\n [`form-control-${props.size}`]: props.size !== undefined,\n },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n if (!hasFiles.value) return ''\n if (props.fileNameFormatter) {\n return props.fileNameFormatter(selectedFiles.value)\n }\n const names = fileNames.value\n if (names.length === 1) return names[0]\n return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n if (!hasFiles.value) return ''\n const count = selectedFiles.value.length\n if (count === 1) {\n return `File selected: ${selectedFiles.value[0]?.name}`\n }\n return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n if (!computedAccept.value) return true\n\n const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n return acceptTypes.some((acceptType) => {\n // Extension match (e.g., .pdf)\n if (acceptType.startsWith('.')) {\n return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n }\n // Exact MIME type match (e.g., image/png)\n if (!acceptType.includes('*')) {\n return file.type === acceptType\n }\n // Wildcard MIME type match (e.g., image/* or */*)\n const slashIndex = acceptType.indexOf('/')\n if (slashIndex === -1) {\n // Malformed wildcard pattern (no '/'): do not match anything\n return false\n }\n const category = acceptType.slice(0, slashIndex)\n // */* should match any MIME type\n if (category === '*') {\n return true\n }\n return file.type.startsWith(`${category}/`)\n })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n let fileArray: File[] = []\n\n if (nativeEvent) {\n // Plain mode: read from the event target (browser already filtered via accept)\n const input = nativeEvent.target as HTMLInputElement\n fileArray = input.files ? Array.from(input.files) : []\n } else {\n // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n try {\n const dataTransfer = new DataTransfer()\n fileArray.forEach((file) => dataTransfer.items.add(file))\n customInputRef.value.files = dataTransfer.files\n } catch {\n // In environments where DataTransfer is not fully supported, skip syncing files on the input\n }\n }\n }\n\n // Update internal state\n internalFiles.value = fileArray\n\n // Update model value\n if (fileArray.length === 0) {\n modelValue.value = null\n } else if (props.directory || props.multiple) {\n modelValue.value = fileArray\n } else {\n const [firstFile] = fileArray\n if (firstFile) {\n modelValue.value = firstFile\n }\n }\n\n // Emit change event in nextTick to ensure DOM updates\n // In plain mode: forward the native event (has target.files)\n // In custom mode: create CustomEvent with files in detail\n nextTick(() => {\n if (nativeEvent) {\n // Plain mode: forward native event\n emit('change', nativeEvent)\n } else {\n // Custom mode: create CustomEvent with files\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n files: fileArray,\n target: {files: fileArray},\n },\n })\n // Also attach files directly for easier access\n Object.defineProperty(changeEvent, 'files', {\n value: fileArray,\n enumerable: true,\n })\n emit('change', changeEvent)\n }\n })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n if (!props.disabled) {\n open({\n accept: computedAccept.value,\n multiple: props.multiple || props.directory,\n directory: props.directory,\n })\n }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n // Don't trigger if clicking the button itself (button has its own handler with .stop)\n // Don't trigger if disabled\n if (!props.disabled) {\n openFileDialog()\n }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n const input = e.target as HTMLInputElement\n if (input.files) {\n handleFiles(input.files, e) // Pass native event\n }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n if (files) {\n handleFiles(files)\n }\n})\n\n// Reset method\nconst reset = () => {\n internalFiles.value = []\n modelValue.value = null\n resetDialog() // This resets the hidden input in custom mode\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n}\n\n// Focus management\nconst focus = () => {\n if (props.plain) {\n plainInputRef.value?.focus()\n } else {\n browseButtonRef.value?.focus()\n }\n}\n\nconst blur = () => {\n if (props.plain) {\n plainInputRef.value?.blur()\n } else {\n browseButtonRef.value?.blur()\n }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n if (props.autofocus) {\n nextTick(() => {\n focus()\n })\n }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n () => props.autofocus,\n (autofocus) => {\n if (autofocus) {\n focus()\n }\n }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n if (newValue === null) {\n internalFiles.value = []\n if (plainInputRef.value) {\n plainInputRef.value.value = ''\n }\n } else if (Array.isArray(newValue)) {\n internalFiles.value = newValue as readonly File[]\n } else {\n internalFiles.value = [newValue] as readonly File[]\n }\n})\n\ndefineExpose({\n blur,\n element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n focus,\n reset,\n})\n</script>\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"BOffcanvas-CQb9XNvS.mjs","names":["$attrs"],"sources":["../src/components/BOffcanvas/BOffcanvas.vue","../src/components/BOffcanvas/BOffcanvas.vue"],"sourcesContent":["<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerOrEqualToBreakpoint = breakpoints.smallerOrEqual(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerOrEqualToBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerOrEqualToBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n","<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerOrEqualToBreakpoint = breakpoints.smallerOrEqual(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerOrEqualToBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerOrEqualToBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"BOffcanvas-DTRiZzwN.js","names":["$attrs"],"sources":["../src/components/BOffcanvas/BOffcanvas.vue","../src/components/BOffcanvas/BOffcanvas.vue"],"sourcesContent":["<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerOrEqualToBreakpoint = breakpoints.smallerOrEqual(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerOrEqualToBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerOrEqualToBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n","<template>\n <ConditionalTeleport\n :to=\"props.teleportTo\"\n :disabled=\"props.teleportDisabled || isOpenByBreakpoint\"\n >\n <Transition\n v-if=\"renderRef || contentShowing || isOpenByBreakpoint\"\n v-bind=\"transitionProps\"\n :appear=\"modelValue || props.visible\"\n >\n <div\n v-show=\"\n (showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)) ||\n isOpenByBreakpoint\n \"\n :id=\"computedId\"\n ref=\"_element\"\n aria-modal=\"true\"\n role=\"dialog\"\n :class=\"computedClasses\"\n :style=\"computedStyles\"\n tabindex=\"-1\"\n :aria-labelledby=\"`${computedId}-offcanvas-label`\"\n data-bs-backdrop=\"false\"\n v-bind=\"$attrs\"\n >\n <template v-if=\"contentShowing || isOpenByBreakpoint\">\n <div\n v-if=\"!props.noHeader\"\n class=\"offcanvas-header\"\n :class=\"props.headerClass\"\n v-bind=\"props.headerAttrs\"\n >\n <slot name=\"header\" v-bind=\"sharedSlots\">\n <h5 :id=\"`${computedId}-offcanvas-label`\" class=\"offcanvas-title\">\n <slot name=\"title\" v-bind=\"sharedSlots\">\n {{ props.title }}\n </slot>\n </h5>\n <template v-if=\"!props.noHeaderClose\">\n <BButton\n v-if=\"hasHeaderCloseSlot\"\n ref=\"_close\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n >\n <slot name=\"header-close\" v-bind=\"sharedSlots\" />\n </BButton>\n <BCloseButton\n v-else\n ref=\"_close\"\n :aria-label=\"props.headerCloseLabel\"\n v-bind=\"headerCloseAttrs\"\n @click=\"hide('close')\"\n />\n </template>\n </slot>\n </div>\n <div class=\"offcanvas-body\" :class=\"props.bodyClass\" v-bind=\"props.bodyAttrs\">\n <slot v-bind=\"sharedSlots\" />\n </div>\n <div v-if=\"hasFooterSlot\" :class=\"props.footerClass\">\n <slot name=\"footer\" v-bind=\"sharedSlots\" />\n </div>\n </template>\n <div\n v-if=\"needsFallback\"\n ref=\"_fallbackFocusElement\"\n :class=\"fallbackClassSelector\"\n tabindex=\"0\"\n style=\"width: 0; height: 0; overflow: hidden\"\n />\n </div>\n </Transition>\n <slot v-if=\"!props.noBackdrop\" name=\"backdrop\" v-bind=\"sharedSlots\">\n <Transition v-if=\"renderBackdropRef\" v-bind=\"backdropTransitionProps\">\n <div\n v-show=\"showBackdrop\"\n class=\"offcanvas-backdrop\"\n :class=\"{\n fade: !computedNoAnimation,\n show: backdropVisible || computedNoAnimation,\n }\"\n @click=\"hide('backdrop')\"\n />\n </Transition>\n </slot>\n </ConditionalTeleport>\n</template>\n\n<script setup lang=\"ts\">\nimport {breakpointsBootstrapV5, onKeyStroke, unrefElement, useBreakpoints} from '@vueuse/core'\nimport {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'\nimport {computed, type EmitFn, nextTick, onMounted, ref, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport type {\n BOffcanvasEmits,\n BOffcanvasProps,\n BOffcanvasSlots,\n BOffcanvasSlotsData,\n} from '../../types'\nimport BButton from '../BButton/BButton.vue'\nimport BCloseButton from '../BButton/BCloseButton.vue'\nimport ConditionalTeleport from '../ConditionalTeleport.vue'\nimport {useSafeScrollLock} from '../../composables/useSafeScrollLock'\nimport {isEmptySlot} from '../../utils/dom'\nimport {useShowHide} from '../../composables/useShowHide'\nimport {getElement} from '../../utils/getElement'\n\n// TODO once the responsive stuff may be implemented correctly,\n// What needs to occur is a fixing of the \"body scrolling\".\n// If the offcanvas is on the screen on a large screen, body scrolling is not disabled\n// Even though the modelValue is true\n// When it's a small screen and close, it works, as normal,\n// But then when it opens up on a small screen, it must disable again\n// This is implemented on Layout.vue, but is not officially supported.\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BOffcanvasProps, 'modelValue'>>(), {\n backdropFirst: false,\n bodyAttrs: undefined,\n bodyClass: undefined,\n bodyScrolling: false,\n focus: undefined,\n footerClass: undefined,\n headerAttrs: undefined,\n headerClass: undefined,\n headerCloseClass: undefined,\n headerCloseLabel: 'Close',\n headerCloseVariant: 'secondary',\n id: undefined,\n initialAnimation: false,\n lazy: false,\n noAnimation: false,\n noBackdrop: false,\n noCloseOnBackdrop: false,\n noCloseOnEsc: false,\n noTrap: false,\n noHeader: false,\n noHeaderClose: false,\n unmountLazy: false,\n placement: 'start',\n shadow: false,\n teleportDisabled: false,\n teleportTo: 'body',\n title: undefined,\n show: false,\n width: undefined,\n visible: false,\n})\nconst props = useDefaults(_props, 'BOffcanvas')\nconst emit = defineEmits<BOffcanvasEmits>()\nconst slots = defineSlots<BOffcanvasSlots>()\n\nconst modelValue = defineModel<Exclude<BOffcanvasProps['modelValue'], undefined>>({\n default: false,\n})\n\nconst computedId = useId(() => props.id, 'offcanvas')\n\nconst element = useTemplateRef<HTMLElement | null>('_element')\nconst fallbackFocusElement = useTemplateRef<HTMLElement | null>('_fallbackFocusElement')\nconst closeButton = useTemplateRef<HTMLElement | null>('_close')\n\nconst pickFocusItem = () => {\n if (props.focus && typeof props.focus !== 'boolean') {\n if (props.focus === 'close') {\n return closeButton\n }\n return getElement(props.focus, element.value ?? undefined)\n }\n return element\n}\n\nconst onAfterEnter = () => {\n nextTick(() => {\n if (props.focus !== false && !isOpenByBreakpoint.value && props.noTrap) {\n const focusElement = unrefElement(pickFocusItem())\n focusElement?.focus()\n }\n })\n}\n\nconst {\n showRef,\n renderRef,\n renderBackdropRef,\n hide,\n show,\n toggle,\n computedNoAnimation,\n contentShowing,\n transitionProps,\n backdropReady,\n backdropTransitionProps,\n backdropVisible,\n isVisible,\n buildTriggerableEvent,\n isLeaving,\n trapActive,\n setLocalNoAnimation,\n} = useShowHide(modelValue, props, emit as EmitFn, element, computedId, {\n transitionProps: {\n onAfterEnter,\n enterToClass: 'showing',\n leaveToClass: 'hiding',\n enterActiveClass: '',\n leaveActiveClass: '',\n enterFromClass: '',\n leaveFromClass: '',\n },\n})\n\nconst breakpoints = useBreakpoints(breakpointsBootstrapV5)\nconst smallerOrEqualToBreakpoint = breakpoints.smallerOrEqual(() => props.responsive ?? 'xs')\n// Initialize with SSR-safe default value to prevent hydration mismatches\n// The actual breakpoint evaluation is deferred to onMounted (client-side only)\nconst isOpenByBreakpoint = ref(false)\n\nonMounted(() => {\n if (props.responsive !== undefined) {\n // Update the breakpoint state after mounting (client-side only)\n isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value\n emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)\n }\n})\n\nuseSafeScrollLock(showRef, () => props.bodyScrolling || isOpenByBreakpoint.value)\n\nonKeyStroke(\n 'Escape',\n () => {\n hide('esc')\n },\n {target: element, passive: true}\n)\n\nconst fallbackClassSelector = 'offcanvas-fallback-focus'\n\nconst {needsFallback} = useActivatedFocusTrap({\n element,\n isActive: trapActive,\n noTrap: () => props.noTrap || isOpenByBreakpoint.value,\n fallbackFocus: {\n classSelector: fallbackClassSelector,\n ref: fallbackFocusElement,\n },\n focus: () =>\n props.focus === false || isOpenByBreakpoint.value\n ? false\n : (unrefElement(pickFocusItem()) ?? undefined),\n})\n\nconst showBackdrop = computed(\n () =>\n (props.responsive === undefined || !isOpenByBreakpoint.value) &&\n !props.noBackdrop &&\n (showRef.value === true ||\n (isLeaving.value && props.backdropFirst && !computedNoAnimation.value))\n)\n\nconst hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))\nconst headerCloseClasses = computed(() => [\n {'text-reset': !hasHeaderCloseSlot.value},\n props.headerCloseClass,\n])\nconst headerCloseAttrs = computed(() => ({\n variant: hasHeaderCloseSlot.value ? props.headerCloseVariant : undefined,\n class: headerCloseClasses.value,\n}))\n\nconst hasFooterSlot = computed(() => !isEmptySlot(slots.footer))\nconst computedClasses = computed(() => [\n props.responsive === undefined ? 'offcanvas' : `offcanvas-${props.responsive}`,\n `offcanvas-${props.placement}`,\n {\n 'show': isVisible.value,\n 'hiding': isLeaving.value && !isVisible.value,\n [`shadow-${props.shadow}`]: !!props.shadow,\n 'no-transition': computedNoAnimation.value,\n },\n])\n\nconst computedStyles = computed(() => ({\n width: props.width,\n}))\n\nconst sharedSlots = computed<BOffcanvasSlotsData>(() => ({\n visible: isVisible.value,\n placement: props.placement,\n hide,\n show,\n toggle,\n id: computedId.value,\n active: trapActive.value,\n}))\n\nwatch(smallerOrEqualToBreakpoint, (newValue) => {\n if (props.responsive === undefined) return\n if (newValue === true) {\n const opened = false\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('hide', buildTriggerableEvent('hide'))\n } else {\n const opened = true\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n emit('show', buildTriggerableEvent('show'))\n }\n})\n\nwatch(\n () => props.responsive,\n (newValue) => {\n if (newValue === undefined) {\n isOpenByBreakpoint.value = false\n return\n }\n const opened = !smallerOrEqualToBreakpoint.value\n if (opened === isOpenByBreakpoint.value) return\n setLocalNoAnimation(true)\n requestAnimationFrame(() => {\n isOpenByBreakpoint.value = opened\n })\n emit('breakpoint', buildTriggerableEvent('breakpoint'), opened)\n if (opened) {\n emit('show', buildTriggerableEvent('show'))\n } else {\n emit('hide', buildTriggerableEvent('hide'))\n }\n }\n)\n\ndefineExpose({\n hide,\n show,\n toggle,\n isOpenByBreakpoint,\n})\n</script>\n"],"mappings":"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"}