@onereach/ui-components 17.1.1 → 17.1.2

package/dist/bundled/v2/components/OrDropAreaV3/OrDropArea.js

@@ -40,6 +40,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -56,13 +60,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -86,6 +111,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -114,7 +140,7 @@ var __vue_render__ = function () {
     class: _vm.controlStyles,
     attrs: {
       "type": 'file',
-      "accept": _vm.fileTypes.join(','),
+      "accept": _vm.accept,
       "multiple": _vm.maxFiles > 1,
       "disabled": _vm.disabled
     },

package/dist/bundled/v2/components/OrDropAreaV3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrDropAreaV3/OrDropArea.js

@@ -1 +1 @@
-export { s as default } from '../OrDropAreaV3-cf5ef7d5.js';
+export { s as default } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrDropAreaV3/index.js

@@ -1 +1 @@
-export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from '../OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/props.js

@@ -1 +1 @@
-export { D as DropAreaSize } from '../OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/styles.js

@@ -1 +1 @@
-export { b as DropArea, i as DropAreaConstraints, d as DropAreaControl, e as DropAreaIcon, f as DropAreaIconSizes, c as DropAreaSizes, g as DropAreaText, h as DropAreaTextEmphasis } from '../OrDropAreaV3-cf5ef7d5.js';
+export { b as DropArea, i as DropAreaConstraints, d as DropAreaControl, e as DropAreaIcon, f as DropAreaIconSizes, c as DropAreaSizes, g as DropAreaText, h as DropAreaTextEmphasis } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/utils/approximateFileSize.js

@@ -1 +1 @@
-export { a as approximateFileSize } from '../../OrDropAreaV3-cf5ef7d5.js';
+export { a as approximateFileSize } from '../../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/utils/index.js

@@ -1 +1 @@
-export { a as approximateFileSize } from '../../OrDropAreaV3-cf5ef7d5.js';
+export { a as approximateFileSize } from '../../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/{OrDropAreaV3-cf5ef7d5.js → OrDropAreaV3-a9883f18.js}

@@ -120,6 +120,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -136,13 +140,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -166,6 +191,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -193,7 +219,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("input", {
     class: normalizeClass(_ctx.controlStyles),
     type: 'file',
-    accept: _ctx.fileTypes.join(','),
+    accept: _ctx.accept,
     multiple: _ctx.maxFiles > 1,
     disabled: _ctx.disabled,
     onChange: _cache[0] || (_cache[0] = $event => _ctx.onChange($event))

package/dist/bundled/v3/components/index.js

@@ -32,7 +32,7 @@ export { s as OrDateTimeFormatV3 } from './OrDateTimeFormatV3-295547f5.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, n as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-30ec840a.js';
 export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate } from './OrDateTimePickerV3-a996d0ed.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './OrDrawerV3-28a3fff2.js';
-export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './OrDropAreaV3-a9883f18.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabsV3-dd261195.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyStateV3-af47ab45.js';
 export { default as OrError } from './OrError/OrError.js';

package/dist/bundled/v3/index.js

@@ -22,7 +22,7 @@ export { s as OrDateRangePickerV3 } from './components/OrDateRangePickerV3-90be1
 export { s as OrDateTimeFormatV3 } from './components/OrDateTimeFormatV3-295547f5.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, n as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './components/OrDateTimePicker-30ec840a.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './components/OrDrawerV3-28a3fff2.js';
-export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './components/OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './components/OrDropAreaV3-a9883f18.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './components/OrEditorTabsV3-dd261195.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './components/OrEmptyStateV3-af47ab45.js';
 export { s as OrErrorTagV3 } from './components/OrErrorTagV3-1b00b9d5.js';

package/dist/esm/v2/{OrDropArea-7cf24c23.js → OrDropArea-78f52187.js}

@@ -119,6 +119,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -135,13 +139,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -165,6 +190,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -193,7 +219,7 @@ var __vue_render__ = function () {
     class: _vm.controlStyles,
     attrs: {
       "type": 'file',
-      "accept": _vm.fileTypes.join(','),
+      "accept": _vm.accept,
       "multiple": _vm.maxFiles > 1,
       "disabled": _vm.disabled
     },

package/dist/esm/v2/components/index.js

@@ -47,7 +47,7 @@ export { f as formatDate, a as formatTime } from '../formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from '../getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from '../getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, _ as OrDrawerV3 } from '../OrDrawer-ac6cdc09.js';
-export { D as DropAreaSize, _ as OrDropAreaV3 } from '../OrDropArea-7cf24c23.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from '../OrDropArea-78f52187.js';
 export { a as approximateFileSize } from '../approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, _ as OrEditorTabsV3 } from '../OrEditorTabs-17d79ae1.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-186f7abc.js';

package/dist/esm/v2/components/or-drop-area-v3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/esm/v2/components/or-drop-area-v3/index.js

@@ -1,4 +1,4 @@
-export { D as DropAreaSize, _ as OrDropAreaV3 } from '../../OrDropArea-7cf24c23.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from '../../OrDropArea-78f52187.js';
 export { a as approximateFileSize } from '../../approximateFileSize-a48b356b.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';

package/dist/esm/v2/index.js

@@ -47,7 +47,7 @@ export { f as formatDate, a as formatTime } from './formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from './getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from './getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, _ as OrDrawerV3 } from './OrDrawer-ac6cdc09.js';
-export { D as DropAreaSize, _ as OrDropAreaV3 } from './OrDropArea-7cf24c23.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from './OrDropArea-78f52187.js';
 export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, _ as OrEditorTabsV3 } from './OrEditorTabs-17d79ae1.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-186f7abc.js';

package/dist/esm/v3/{OrDropArea-24fe94e7.js → OrDropArea-8b3fc35c.js}

@@ -119,6 +119,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -135,13 +139,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -165,6 +190,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -192,7 +218,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("input", {
     class: normalizeClass(_ctx.controlStyles),
     type: 'file',
-    accept: _ctx.fileTypes.join(','),
+    accept: _ctx.accept,
     multiple: _ctx.maxFiles > 1,
     disabled: _ctx.disabled,
     onChange: _cache[0] || (_cache[0] = $event => _ctx.onChange($event))

package/dist/esm/v3/components/index.js

@@ -45,7 +45,7 @@ export { f as formatDate, a as formatTime } from '../formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from '../getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from '../getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from '../OrDrawer-f12faf1a.js';
-export { D as DropAreaSize, s as OrDropAreaV3 } from '../OrDropArea-24fe94e7.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from '../OrDropArea-8b3fc35c.js';
 export { a as approximateFileSize } from '../approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from '../OrEditorTabs-d5779ee7.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-47f9d910.js';

package/dist/esm/v3/components/or-drop-area-v3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/esm/v3/components/or-drop-area-v3/index.js

@@ -1,4 +1,4 @@
-export { D as DropAreaSize, s as OrDropAreaV3 } from '../../OrDropArea-24fe94e7.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from '../../OrDropArea-8b3fc35c.js';
 export { a as approximateFileSize } from '../../approximateFileSize-a48b356b.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';

package/dist/esm/v3/index.js

@@ -45,7 +45,7 @@ export { f as formatDate, a as formatTime } from './formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from './getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from './getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './OrDrawer-f12faf1a.js';
-export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-24fe94e7.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-8b3fc35c.js';
 export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabs-d5779ee7.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-47f9d910.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "17.1.1",
+  "version": "17.1.2",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.5.3",
-    "@onereach/styles": "^17.1.1",
+    "@onereach/styles": "^17.1.2",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -180,5 +180,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "7738670759be3878f5dd755d5d9eb5117b685510"
+  "gitHead": "d86a8b3d0993a602dc7223b1d0927258bd023bb6"
 }

package/src/components/or-drop-area-v3/OrDropArea.vue

@@ -8,7 +8,7 @@
     <input
       :class="controlStyles"
       :type="'file'"
-      :accept="fileTypes.join(',')"
+      :accept="accept"
       :multiple="maxFiles > 1"
       :disabled="disabled"
       @change="onChange($event)"
@@ -126,6 +126,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    error: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -173,15 +178,40 @@ export default defineComponent({
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+
+      return props.fileTypes.join(',');
+    });
+
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some((file) => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some((file) => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
 
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
 
+      /* File size */
       if (proxyModelValue.value.some((file) => file.size > props.maxFileSize)) {
         return true;
       }
@@ -208,6 +238,7 @@ export default defineComponent({
       constraintsStyles,
 
       proxyModelValue,
+      accept,
       invalid,
 
       onChange,