@onereach/ui-components 8.20.3 → 8.20.4-beta.4030.0

package/dist/esm/v2/OrDropArea-8a00339a.js

@@ -0,0 +1,269 @@
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import '@vueuse/core';
+import './dom-aecadd9a.js';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
+import { u as useResponsive } from './useResponsive-1baf3485.js';
+import '@onereach/styles/tailwind.config.json';
+import { _ as __vue_component__$1 } from './OrIcon-3f99ef27.js';
+import { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var DropAreaSize;
+(function (DropAreaSize) {
+  DropAreaSize["M"] = "m";
+  DropAreaSize["S"] = "s";
+})(DropAreaSize || (DropAreaSize = {}));
+
+const DropArea = [
+// Position
+'relative',
+// Layout
+'layout-column',
+// Shape
+'rounded-md',
+// Spacing
+'gap-sm',
+// Theme
+'theme-background-primary-translucent-1', 'dark:theme-background-primary-translucent-1-dark', 'theme-border-1-primary', 'dark:theme-border-1-primary-dark', '!border-dashed',
+// Theme (hover)
+'hover:theme-background-primary-translucent-2', 'dark:hover:theme-background-primary-translucent-2-dark',
+// Theme (invalid)
+'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:!border-dashed',
+// Theme (invalid/hover)
+'hover:invalid:theme-background-error-translucent-2', 'dark:hover:invalid:theme-background-error-translucent-2-dark'];
+const DropAreaSizes = {
+  [DropAreaSize.M]: [
+  // Spacing
+  'pt-xl', 'px-xl', 'pb-3xl'],
+  [DropAreaSize.S]: [
+  // Spacing
+  'pt-md', 'px-xl', 'pb-xl']
+};
+const DropAreaControl = [
+// Position
+'absolute inset-0',
+// Visibility
+'opacity-0',
+// Interactivity
+'interactivity-click'];
+const DropAreaIcon = [
+// Layout
+'layout-column',
+// Typography
+'leading-none',
+// Theme
+'theme-foreground-primary-translucent-2', 'dark:theme-foreground-primary-translucent-2-dark',
+// Theme (invalid)
+'invalid:theme-foreground-error-translucent-2', 'dark:invalid:theme-foreground-error-translucent-2-dark'];
+const DropAreaIconSizes = {
+  [DropAreaSize.M]: [
+  // Typography
+  'text-[94px]'],
+  [DropAreaSize.S]: [
+  // Typography
+  'text-[48px]']
+};
+const DropAreaText = [
+// Layout
+'layout-column',
+// Typography
+'typography-body-2-regular text-center',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const DropAreaTextEmphasis = [
+// Typography
+'typography-body-2-bold',
+// Theme
+'theme-foreground-primary', 'dark:theme-foreground-primary-dark',
+// Theme (invalid)
+'invalid:theme-foreground-error', 'dark:invalid:theme-foreground-error-dark'];
+const DropAreaConstraints = [
+// Layout
+'layout-column',
+// Typography
+'typography-body-2-regular text-center',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script = defineComponent({
+  components: {
+    OrIcon: __vue_component__$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    fileTypes: {
+      type: Array,
+      default: () => []
+    },
+    maxFiles: {
+      type: Number,
+      default: () => 1
+    },
+    maxFileSize: {
+      type: Number,
+      default: () => 10485760
+    },
+    size: {
+      type: String,
+      default: () => DropAreaSize.M
+    },
+    disabled: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root', 'invalid'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-drop-area-v3', ...DropArea, ...DropAreaSizes[props.size]]);
+    const controlStyles = computed(() => [...DropAreaControl]);
+    const iconStyles = computed(() => [...DropAreaIcon, ...DropAreaIconSizes[props.size]]);
+    const textStyles = computed(() => [...DropAreaText]);
+    const textEmphasisStyles = computed(() => [...DropAreaTextEmphasis]);
+    const constraintsStyles = computed(() => [...DropAreaConstraints]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const invalid = computed(() => {
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+        return true;
+      }
+      if (proxyModelValue.value.length > props.maxFiles) {
+        return true;
+      }
+      if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
+        return true;
+      }
+      return false;
+    });
+    // Handlers
+    function onChange(event) {
+      proxyModelValue.value = [...event.target.files];
+    }
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
+    return {
+      root,
+      rootStyles,
+      controlStyles,
+      iconStyles,
+      textStyles,
+      textEmphasisStyles,
+      constraintsStyles,
+      proxyModelValue,
+      invalid,
+      onChange,
+      isDesktop,
+      isMobile,
+      approximateFileSize
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "invalid": _vm.invalid,
+      "disabled": _vm.disabled
+    }
+  }, [_c('input', {
+    class: _vm.controlStyles,
+    attrs: {
+      "type": 'file',
+      "accept": _vm.fileTypes.join(','),
+      "multiple": _vm.maxFiles > 1,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "change": function ($event) {
+        return _vm.onChange($event);
+      }
+    }
+  }), _vm._v(" "), _c('div', {
+    class: _vm.iconStyles,
+    attrs: {
+      "invalid": _vm.invalid,
+      "disabled": _vm.disabled
+    }
+  }, [_c('OrIcon', {
+    attrs: {
+      "icon": 'cloud_upload',
+      "size": 'inherit'
+    }
+  })], 1), _vm._v(" "), _c('div', {
+    class: _vm.textStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("default", function () {
+    return [_vm.isDesktop ? [_c('div', [_vm._v("Drag file here")]), _vm._v(" "), _c('div', [_vm._v("\n          or\n\n          "), _c('span', {
+      class: _vm.textEmphasisStyles,
+      attrs: {
+        "invalid": _vm.invalid,
+        "disabled": _vm.disabled
+      }
+    }, [_vm._v("\n            Upload from your computer\n          ")])])] : _vm._e(), _vm._v(" "), _vm.isMobile ? [_c('span', {
+      class: _vm.textEmphasisStyles,
+      attrs: {
+        "invalid": _vm.invalid,
+        "disabled": _vm.disabled
+      }
+    }, [_vm._v("\n          Upload from your device\n        ")])] : _vm._e()];
+  }, {
+    "invalid": _vm.invalid,
+    "disabled": _vm.disabled
+  })], 2), _vm._v(" "), _c('div', {
+    class: _vm.constraintsStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("constraints", function () {
+    return [_vm._v("\n      Maximum files: " + _vm._s(_vm.maxFiles) + ", maximum file size: " + _vm._s(_vm.approximateFileSize(_vm.maxFileSize)) + "\n    ")];
+  }, {
+    "invalid": _vm.invalid,
+    "disabled": _vm.disabled
+  })], 2)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { DropAreaSize as D, __vue_component__ as _ };

package/dist/esm/v2/approximateFileSize-a48b356b.js

@@ -0,0 +1,7 @@
+function approximateFileSize(value) {
+  const units = ['B', 'kB', 'MB', 'GB'];
+  const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+  return exponent === 0 ? `${value} B` : `${value / 1024 ** exponent} ${units[exponent]}`;
+}
+
+export { approximateFileSize as a };

package/dist/esm/v2/components/index.d.ts

@@ -28,6 +28,7 @@ export * from './or-date-range-picker-v3';
 export * from './or-date-time-format-v3';
 export * from './or-date-time-picker';
 export * from './or-date-time-picker-v3';
+export * from './or-drop-area-v3';
 export * from './or-empty-state-v3';
 export * from './or-error';
 export * from './or-error-tag-v3';

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

@@ -47,6 +47,8 @@ export { _ as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from '../getTimePlaceholder-3b2885bf.js';
 export { g as getCurrentDate } from '../getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from '../getNextMonthDate-00c47169.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from '../OrDropArea-8a00339a.js';
+export { a as approximateFileSize } from '../approximateFileSize-a48b356b.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-57ac6d85.js';
 export { _ as OrError } from '../OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-b54010de.js';

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

@@ -0,0 +1,108 @@
+import { PropType } from 'vue-demi';
+import { DropAreaSize } from './props';
+import { approximateFileSize } from './utils';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    iconStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textEmphasisStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    constraintsStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    invalid: import("@vue/composition-api").ComputedRef<boolean>;
+    onChange: (event: Event) => void;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+    approximateFileSize: typeof approximateFileSize;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+    };
+    fileTypes: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    maxFiles: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: () => 10485760;
+    };
+    size: {
+        type: PropType<"m" | "s">;
+        default: () => DropAreaSize.M;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+    };
+    fileTypes: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    maxFiles: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: () => 10485760;
+    };
+    size: {
+        type: PropType<"m" | "s">;
+        default: () => DropAreaSize.M;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: File[];
+    fileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
+    size: "m" | "s";
+    disabled: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    iconStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    textEmphasisStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    constraintsStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    invalid: import("@vue/composition-api").ComputedRef<boolean>;
+    onChange: (event: Event) => void;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+    approximateFileSize: typeof approximateFileSize;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: File[];
+    fileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
+    size: "m" | "s";
+    disabled: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: File[];
+    fileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
+    size: "m" | "s";
+    disabled: boolean;
+}, true>);
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as OrDropAreaV3 } from './OrDropArea.vue';
+export * from './props';
+export * from './utils';

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

@@ -0,0 +1,13 @@
+export { D as DropAreaSize, _ as OrDropAreaV3 } from '../../OrDropArea-8a00339a.js';
+export { a as approximateFileSize } from '../../approximateFileSize-a48b356b.js';
+import 'vue-demi';
+import '@vueuse/core';
+import '../../dom-aecadd9a.js';
+import 'lodash/isElement';
+import 'lodash/get';
+import '../../useProxyModelValue-940010d2.js';
+import '../../useResponsive-1baf3485.js';
+import '@onereach/styles/tailwind/plugins/core';
+import '@onereach/styles/tailwind.config.json';
+import '../../OrIcon-3f99ef27.js';
+import '../../normalize-component-6e8e3d80.js';

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

@@ -0,0 +1,4 @@
+export declare enum DropAreaSize {
+    M = "m",
+    S = "s"
+}

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

@@ -0,0 +1,9 @@
+import { DropAreaSize } from './props';
+export declare const DropArea: string[];
+export declare const DropAreaSizes: Record<DropAreaSize, string[]>;
+export declare const DropAreaControl: string[];
+export declare const DropAreaIcon: string[];
+export declare const DropAreaIconSizes: Record<DropAreaSize, string[]>;
+export declare const DropAreaText: string[];
+export declare const DropAreaTextEmphasis: string[];
+export declare const DropAreaConstraints: string[];

package/dist/esm/v2/components/or-drop-area-v3/utils/approximateFileSize.d.ts

@@ -0,0 +1 @@
+export declare function approximateFileSize(value: number): string;

package/dist/esm/v2/components/or-drop-area-v3/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './approximateFileSize';

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

@@ -0,0 +1 @@
+export { a as approximateFileSize } from '../../../approximateFileSize-a48b356b.js';

package/dist/esm/v2/index.js

@@ -47,6 +47,8 @@ export { _ as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-3b2885bf.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from './OrDropArea-8a00339a.js';
+export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-57ac6d85.js';
 export { _ as OrError } from './OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-b54010de.js';