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.
- package/dist/{BFormFile-EXRrATZm.mjs → BFormFile-CZebm0Cp.mjs} +6 -1
- package/dist/BFormFile-CZebm0Cp.mjs.map +1 -0
- package/dist/{BFormFile-X-BQsYko.js → BFormFile-MISLntyJ.js} +6 -1
- package/dist/BFormFile-MISLntyJ.js.map +1 -0
- package/dist/{BOffcanvas-DTRiZzwN.js → BOffcanvas-C7HenFW0.js} +5 -5
- package/dist/BOffcanvas-C7HenFW0.js.map +1 -0
- package/dist/{BOffcanvas-CQb9XNvS.mjs → BOffcanvas-CF-dWeez.mjs} +5 -5
- package/dist/BOffcanvas-CF-dWeez.mjs.map +1 -0
- package/dist/bootstrap-vue-next.mjs +2 -2
- package/dist/bootstrap-vue-next.umd.js +2 -2
- package/dist/components/BFormFile/BFormFile.vue.d.mts +2 -1
- package/dist/components/BFormFile/BFormFile.vue.d.ts +2 -1
- package/dist/src/components/BFormFile/index.mjs +1 -1
- package/dist/src/components/BFormFile/index.umd.js +1 -1
- package/dist/src/components/BOffcanvas/index.mjs +1 -1
- package/dist/src/components/BOffcanvas/index.umd.js +1 -1
- package/dist/src/components/index.mjs +2 -2
- package/dist/src/components/index.umd.js +2 -2
- package/dist/types/ComponentProps.d.mts +7 -0
- package/dist/types/ComponentProps.d.ts +7 -0
- package/package.json +1 -1
- package/dist/BFormFile-EXRrATZm.mjs.map +0 -1
- package/dist/BFormFile-X-BQsYko.js.map +0 -1
- package/dist/BOffcanvas-CQb9XNvS.mjs.map +0 -1
- package/dist/BOffcanvas-DTRiZzwN.js.map +0 -1
|
@@ -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-
|
|
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-
|
|
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
|
|
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 = !
|
|
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)(
|
|
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 = !
|
|
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-
|
|
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":"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"}
|
|
@@ -159,11 +159,11 @@ var BOffcanvas_default = /* @__PURE__ */ defineComponent({
|
|
|
159
159
|
enterFromClass: "",
|
|
160
160
|
leaveFromClass: ""
|
|
161
161
|
} });
|
|
162
|
-
const
|
|
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 = !
|
|
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(
|
|
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 = !
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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 {
|
|
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 {
|
|
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-
|
|
1
|
+
import { t as BFormFile_default } from "../../../BFormFile-CZebm0Cp.mjs";
|
|
2
2
|
export { BFormFile_default as BFormFile };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as BOffcanvas_default } from "../../../BOffcanvas-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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.
|
|
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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"}
|