@onereach/ui-components 8.18.2-beta.3933.0 → 8.18.2

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

@@ -1,78 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-export { D as DropAreaSize, s as OrDropAreaV3 } from '../../OrDropArea-3ea735ec.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

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

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

@@ -1,9 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,209 +0,0 @@
-<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"
-    >
-      <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>
-    </div>
-
-    <div
-      :class="constraintsStyles"
-      :disabled="disabled"
-    >
-      Maximum files: {{ maxFiles }}, maximum file size: {{ approximateFileSize(maxFileSize) }}
-    </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

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

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

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

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

@@ -1,133 +0,0 @@
-import { DropAreaSize } from './props';
-
-export const DropArea: string[] = [
-  // 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',
-];
-
-export const DropAreaSizes: Record<DropAreaSize, string[]> = {
-  [DropAreaSize.M]: [
-    // Spacing
-    'pt-xl',
-    'px-xl',
-    'pb-3xl',
-  ],
-
-  [DropAreaSize.S]: [
-    // Spacing
-    'pt-md',
-    'px-xl',
-    'pb-xl',
-  ],
-};
-
-export const DropAreaControl: string[] = [
-  // Position
-  'absolute inset-0',
-
-  // Visibility
-  'opacity-0',
-
-  // Interactivity
-  'interactivity-click',
-];
-
-export const DropAreaIcon: string[] = [
-  // 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',
-];
-
-export const DropAreaIconSizes: Record<DropAreaSize, string[]> = {
-  [DropAreaSize.M]: [
-    // Typography
-    'text-[94px]',
-  ],
-
-  [DropAreaSize.S]: [
-    // Typography
-    'text-[48px]',
-  ],
-};
-
-export const DropAreaText: string[] = [
-  // Layout
-  'layout-column',
-
-  // Typography
-  'typography-body-2-regular text-center',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
-];
-
-export const DropAreaTextEmphasis: string[] = [
-  // 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',
-];
-
-export const DropAreaConstraints: string[] = [
-  // Layout
-  'layout-column',
-
-  // Typography
-  'typography-body-2-regular text-center',
-
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-];

package/src/components/or-drop-area-v3/utils/approximateFileSize.ts

@@ -1,15 +0,0 @@
-export function approximateFileSize(value: number): string {
-  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]}`;
-}

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

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