@onereach/ui-components 8.20.3 → 8.21.0

package/dist/esm/v3/OrDropArea-da30333e.js

@@ -0,0 +1,233 @@
+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 { s as script$1 } from './OrIcon-b2e2d0aa.js';
+import { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, Fragment, createTextVNode, createCommentVNode, toDisplayString } from 'vue';
+
+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: script$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
+    };
+  }
+});
+
+const _hoisted_1 = ["invalid", "disabled"];
+const _hoisted_2 = ["accept", "multiple", "disabled"];
+const _hoisted_3 = ["invalid", "disabled"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = /*#__PURE__*/createElementVNode("div", null, "Drag file here", -1 /* HOISTED */);
+const _hoisted_6 = ["invalid", "disabled"];
+const _hoisted_7 = ["invalid", "disabled"];
+const _hoisted_8 = ["disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    invalid: _ctx.invalid,
+    disabled: _ctx.disabled
+  }, [createElementVNode("input", {
+    class: normalizeClass(_ctx.controlStyles),
+    type: 'file',
+    accept: _ctx.fileTypes.join(','),
+    multiple: _ctx.maxFiles > 1,
+    disabled: _ctx.disabled,
+    onChange: _cache[0] || (_cache[0] = $event => _ctx.onChange($event))
+  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_2), createElementVNode("div", {
+    class: normalizeClass(_ctx.iconStyles),
+    invalid: _ctx.invalid,
+    disabled: _ctx.disabled
+  }, [createVNode(_component_OrIcon, {
+    icon: 'cloud_upload',
+    size: 'inherit'
+  })], 10 /* CLASS, PROPS */, _hoisted_3), createElementVNode("div", {
+    class: normalizeClass(_ctx.textStyles),
+    disabled: _ctx.disabled
+  }, [renderSlot(_ctx.$slots, "default", {
+    invalid: _ctx.invalid,
+    disabled: _ctx.disabled
+  }, () => [_ctx.isDesktop ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [_hoisted_5, createElementVNode("div", null, [createTextVNode(" or "), createElementVNode("span", {
+    class: normalizeClass(_ctx.textEmphasisStyles),
+    invalid: _ctx.invalid,
+    disabled: _ctx.disabled
+  }, " Upload from your computer ", 10 /* CLASS, PROPS */, _hoisted_6)])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.isMobile ? (openBlock(), createElementBlock("span", {
+    key: 1,
+    class: normalizeClass(_ctx.textEmphasisStyles),
+    invalid: _ctx.invalid,
+    disabled: _ctx.disabled
+  }, " Upload from your device ", 10 /* CLASS, PROPS */, _hoisted_7)) : createCommentVNode("v-if", true)])], 10 /* CLASS, PROPS */, _hoisted_4), createElementVNode("div", {
+    class: normalizeClass(_ctx.constraintsStyles),
+    disabled: _ctx.disabled
+  }, [renderSlot(_ctx.$slots, "constraints", {
+    invalid: _ctx.invalid,
+    disabled: _ctx.disabled
+  }, () => [createTextVNode(" Maximum files: " + toDisplayString(_ctx.maxFiles) + ", maximum file size: " + toDisplayString(_ctx.approximateFileSize(_ctx.maxFileSize)), 1 /* TEXT */)])], 10 /* CLASS, PROPS */, _hoisted_8)], 10 /* CLASS, PROPS */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-drop-area-v3/OrDropArea.vue";
+
+export { DropAreaSize as D, script as s };

package/dist/esm/v3/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/v3/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/v3/components/index.js

@@ -44,6 +44,8 @@ export { s 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-fd41baed.js';
 export { g as getCurrentDate } from '../getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from '../getNextMonthDate-00c47169.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from '../OrDropArea-da30333e.js';
+export { a as approximateFileSize } from '../approximateFileSize-a48b356b.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-3a7eae61.js';
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-638eceef.js';

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

@@ -0,0 +1,78 @@
+import { PropType } from 'vue-demi';
+import { DropAreaSize } from './props';
+import { approximateFileSize } from './utils';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+    };
+    fileTypes: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    maxFiles: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    size: {
+        type: PropType<"m" | "s">;
+        default: () => DropAreaSize;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    controlStyles: import("vue-demi").ComputedRef<string[]>;
+    iconStyles: import("vue-demi").ComputedRef<string[]>;
+    textStyles: import("vue-demi").ComputedRef<string[]>;
+    textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
+    constraintsStyles: import("vue-demi").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    invalid: import("vue-demi").ComputedRef<boolean>;
+    onChange: (event: Event) => void;
+    isDesktop: import("vue-demi").ComputedRef<boolean>;
+    isMobile: import("vue-demi").ComputedRef<boolean>;
+    approximateFileSize: typeof approximateFileSize;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+    };
+    fileTypes: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    maxFiles: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    size: {
+        type: PropType<"m" | "s">;
+        default: () => DropAreaSize;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: File[];
+    fileTypes: string[];
+    maxFiles: number;
+    maxFileSize: number;
+    size: "m" | "s";
+    disabled: boolean;
+}>;
+export default _default;

package/dist/esm/v3/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/v3/components/or-drop-area-v3/index.js

@@ -0,0 +1,13 @@
+export { D as DropAreaSize, s as OrDropAreaV3 } from '../../OrDropArea-da30333e.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-b2e2d0aa.js';
+import 'vue';

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

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

package/dist/esm/v3/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/v3/components/or-drop-area-v3/utils/approximateFileSize.d.ts

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

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

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

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

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

package/dist/esm/v3/index.js

@@ -44,6 +44,8 @@ export { s 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-fd41baed.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-da30333e.js';
+export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-3a7eae61.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-638eceef.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.20.3",
+  "version": "8.21.0",
   "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.4.2",
-    "@onereach/styles": "^6.7.0",
+    "@onereach/styles": "^6.8.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -178,5 +178,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "578dfcb67386b55d59b0098ac594fb9eef15afe4"
+  "gitHead": "a570f0e56682c67f25c7a24af9d1c3ea0fa9378b"
 }

package/src/components/index.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/src/components/or-drop-area-v3/OrDropArea.vue

@@ -0,0 +1,220 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+    :invalid="invalid"
+    :disabled="disabled"
+  >
+    <input
+      :class="controlStyles"
+      :type="'file'"
+      :accept="fileTypes.join(',')"
+      :multiple="maxFiles > 1"
+      :disabled="disabled"
+      @change="onChange($event)"
+    >
+
+    <div
+      :class="iconStyles"
+      :invalid="invalid"
+      :disabled="disabled"
+    >
+      <OrIcon
+        :icon="'cloud_upload'"
+        :size="'inherit'"
+      />
+    </div>
+
+    <div
+      :class="textStyles"
+      :disabled="disabled"
+    >
+      <slot
+        :invalid="invalid"
+        :disabled="disabled"
+      >
+        <template v-if="isDesktop">
+          <div>Drag file here</div>
+
+          <div>
+            or
+
+            <span
+              :class="textEmphasisStyles"
+              :invalid="invalid"
+              :disabled="disabled"
+            >
+              Upload from your computer
+            </span>
+          </div>
+        </template>
+
+        <template v-if="isMobile">
+          <span
+            :class="textEmphasisStyles"
+            :invalid="invalid"
+            :disabled="disabled"
+          >
+            Upload from your device
+          </span>
+        </template>
+      </slot>
+    </div>
+
+    <div
+      :class="constraintsStyles"
+      :disabled="disabled"
+    >
+      <slot
+        name="constraints"
+        :invalid="invalid"
+        :disabled="disabled"
+      >
+        Maximum files: {{ maxFiles }}, maximum file size: {{ approximateFileSize(maxFileSize) }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue, useResponsive } from '../../hooks';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { DropAreaSize } from './props';
+import { DropArea, DropAreaConstraints, DropAreaControl, DropAreaIcon, DropAreaIconSizes, DropAreaSizes, DropAreaText, DropAreaTextEmphasis } from './styles';
+import { approximateFileSize } from './utils';
+
+export default defineComponent({
+  components: {
+    OrIcon,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: Array as PropType<File[]>,
+      default: () => [],
+    },
+
+    fileTypes: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+
+    maxFiles: {
+      type: Number,
+      default: () => 1,
+    },
+
+    maxFileSize: {
+      type: Number,
+      default: () => 10485760,
+    },
+
+    size: {
+      type: String as PropType<`${DropAreaSize}`>,
+      default: () => DropAreaSize.M,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+  ],
+
+  expose: [
+    'root',
+
+    'invalid',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // 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: Event): void {
+      proxyModelValue.value = [...(event.target as HTMLInputElement).files!];
+    }
+
+    // Helpers
+    const { isDesktop, isMobile } = useResponsive();
+
+    return {
+      root,
+
+      rootStyles,
+      controlStyles,
+      iconStyles,
+      textStyles,
+      textEmphasisStyles,
+      constraintsStyles,
+
+      proxyModelValue,
+      invalid,
+
+      onChange,
+
+      isDesktop,
+      isMobile,
+
+      approximateFileSize,
+    };
+  },
+});
+</script>

package/src/components/or-drop-area-v3/index.ts

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

package/src/components/or-drop-area-v3/props.ts

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