yc-design-vue 2.0.5 → 2.0.6

package/es/index.d.ts

@@ -132,11 +132,12 @@ export * from './Transfer';
 export * from './Trigger';
 export * from './Typography';
 export * from './Tabs';
+export * from './Upload';
 export * from './VerificationCode';
 export * from './Watermark';
 export { Affix, Alert, Anchor, AutoComplete, Avatar, BackTop, Badge, Button, Breadcrumb, Card, Calendar, Carousel, Checkbox, Collapse, ColorPicker, Cascader, Comment, ConfigProvider, Descriptions, Divider, Drawer, Dropdown, Empty, Grid, Image, Input, InputNumber, InputTag, Layout, Link, List, Menu, Mention, Modal, Message, Notification, OverflowList, PageHeader, Pagination, Popconfirm, Popover, Progress, Radio, Rate, ResizeBox, Result, Scrollbar, Select, Skeleton, Slider, Space, Split, Statistic, Steps, Spin, Switch, Tag, Timeline, Textarea, TimePicker, Tooltip, Transfer, Trigger, Typography, Tabs, VerificationCode, Watermark, };
 export declare const components: Record<string, Plugin>;
-declare const _default: {
+declare const YcDesignVue: {
     AnchorLink: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Anchor').AnchorLinkProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
             title: string;
@@ -208,7 +209,7 @@ declare const _default: {
             type: import('./Button').ButtonType;
             disabled: boolean;
             shape: import('./_shared/type').Shape;
-            status: import('./Button').ButtonStatus;
+            status: import('./_shared/type').Status;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -221,7 +222,7 @@ declare const _default: {
             type: import('./Button').ButtonType;
             disabled: boolean;
             shape: import('./_shared/type').Shape;
-            status: import('./Button').ButtonStatus;
+            status: import('./_shared/type').Status;
         }>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -231,7 +232,7 @@ declare const _default: {
         type: import('./Button').ButtonType;
         disabled: boolean;
         shape: import('./_shared/type').Shape;
-        status: import('./Button').ButtonStatus;
+        status: import('./_shared/type').Status;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: Readonly<import('./Button').ButtonGroupSlots> & import('./Button').ButtonGroupSlots;
     });
@@ -502,7 +503,7 @@ declare const _default: {
             popupVisible: boolean;
             defaultPopupVisible: boolean;
             disabled: boolean;
-            position: import('./Dropdown').DropdownPosition;
+            position: Extract<import('./_shared/type').PopupPosition, "top" | "tr" | "tl" | "bottom" | "br" | "bl">;
             hideOnSelect: boolean;
             buttonProps: import('./Button').ButtonProps;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
@@ -524,7 +525,7 @@ declare const _default: {
             popupVisible: boolean;
             defaultPopupVisible: boolean;
             disabled: boolean;
-            position: import('./Dropdown').DropdownPosition;
+            position: Extract<import('./_shared/type').PopupPosition, "top" | "tr" | "tl" | "bottom" | "br" | "bl">;
             hideOnSelect: boolean;
             buttonProps: import('./Button').ButtonProps;
         }>;
@@ -547,7 +548,7 @@ declare const _default: {
         popupVisible: boolean;
         defaultPopupVisible: boolean;
         disabled: boolean;
-        position: import('./Dropdown').DropdownPosition;
+        position: Extract<import('./_shared/type').PopupPosition, "top" | "tr" | "tl" | "bottom" | "br" | "bl">;
         hideOnSelect: boolean;
         buttonProps: import('./Button').ButtonProps;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
@@ -620,7 +621,7 @@ declare const _default: {
             popupVisible: boolean;
             defaultPopupVisible: boolean;
             disabled: boolean;
-            position: import('./Dropdown').DsubmenuPosition;
+            position: Extract<import('./_shared/type').PopupPosition, "rt" | "lt">;
             triggerProps: import('./Trigger').TriggerProps;
             popupMaxHeight: import('./_shared/type').PopupMaxHeight;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
@@ -941,7 +942,7 @@ declare const _default: {
             popupVisible: boolean;
             defaultPopupVisible: boolean;
             disabled: boolean;
-            position: import('./Dropdown').DsubmenuPosition;
+            position: Extract<import('./_shared/type').PopupPosition, "rt" | "lt">;
             triggerProps: import('./Trigger').TriggerProps;
             popupMaxHeight: import('./_shared/type').PopupMaxHeight;
         }>;
@@ -962,7 +963,7 @@ declare const _default: {
         popupVisible: boolean;
         defaultPopupVisible: boolean;
         disabled: boolean;
-        position: import('./Dropdown').DsubmenuPosition;
+        position: Extract<import('./_shared/type').PopupPosition, "rt" | "lt">;
         triggerProps: import('./Trigger').TriggerProps;
         popupMaxHeight: import('./_shared/type').PopupMaxHeight;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
@@ -1302,11 +1303,11 @@ declare const _default: {
     });
     LayoutSider: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Layout').LayoutSiderProps> & Readonly<{
-            onCollapse?: ((collapsed: boolean, type: import('./_shared/type').collapseType) => any) | undefined;
+            onCollapse?: ((collapsed: boolean, type: "clickTrigger" | "responsive") => any) | undefined;
             "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
             onBreakpoint?: ((collapsed: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-            collapse: (collapsed: boolean, type: import('./_shared/type').collapseType) => any;
+            collapse: (collapsed: boolean, type: "clickTrigger" | "responsive") => any;
             "update:collapsed": (collapsed: boolean) => any;
             breakpoint: (collapsed: boolean) => any;
         }, import('vue').PublicProps, {
@@ -1319,7 +1320,7 @@ declare const _default: {
             collapsible: boolean;
             reverseArrow: boolean;
             hideTrigger: boolean;
-            resizeDirections: import('./ResizeBox').ResizeBoxDirection[];
+            resizeDirections: import('./_shared/type').Position[];
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -1328,7 +1329,7 @@ declare const _default: {
             M: {};
             Defaults: {};
         }, Readonly<import('./Layout').LayoutSiderProps> & Readonly<{
-            onCollapse?: ((collapsed: boolean, type: import('./_shared/type').collapseType) => any) | undefined;
+            onCollapse?: ((collapsed: boolean, type: "clickTrigger" | "responsive") => any) | undefined;
             "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
             onBreakpoint?: ((collapsed: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, {
@@ -1341,17 +1342,17 @@ declare const _default: {
             collapsible: boolean;
             reverseArrow: boolean;
             hideTrigger: boolean;
-            resizeDirections: import('./ResizeBox').ResizeBoxDirection[];
+            resizeDirections: import('./_shared/type').Position[];
         }>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('./Layout').LayoutSiderProps> & Readonly<{
-        onCollapse?: ((collapsed: boolean, type: import('./_shared/type').collapseType) => any) | undefined;
+        onCollapse?: ((collapsed: boolean, type: "clickTrigger" | "responsive") => any) | undefined;
         "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
         onBreakpoint?: ((collapsed: boolean) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-        collapse: (collapsed: boolean, type: import('./_shared/type').collapseType) => any;
+        collapse: (collapsed: boolean, type: "clickTrigger" | "responsive") => any;
         "update:collapsed": (collapsed: boolean) => any;
         breakpoint: (collapsed: boolean) => any;
     }, string, {
@@ -1364,7 +1365,7 @@ declare const _default: {
         collapsible: boolean;
         reverseArrow: boolean;
         hideTrigger: boolean;
-        resizeDirections: import('./ResizeBox').ResizeBoxDirection[];
+        resizeDirections: import('./_shared/type').Position[];
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: Readonly<import('./Layout').LayoutSiderSlots> & import('./Layout').LayoutSiderSlots;
     });
@@ -1568,8 +1569,8 @@ declare const _default: {
         lineSpacing: number;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
     SkeletonShape: import('vue').DefineComponent<import('./Skeleton').SkeletonShapeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('./Skeleton').SkeletonShapeProps> & Readonly<{}>, {
-        size: import('./Skeleton').SkeletonShapeSize;
-        shape: import('./Skeleton').SkeletonShapeShape;
+        size: Exclude<import('./_shared/type').Size, "mini">;
+        shape: Exclude<import('./_shared/type').Shape, "round">;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
     Step: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Steps').StepProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
@@ -1670,7 +1671,7 @@ declare const _default: {
     TimelineItem: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Timeline').TimelineItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
             label: string;
-            position: import('./Timeline').TimelinePositon;
+            position: import('./_shared/type').Position;
             dotColor: string;
             dotType: import('./Timeline').TimelineDotType;
             lineType: import('./Timeline').TimelineLineType;
@@ -1685,7 +1686,7 @@ declare const _default: {
             Defaults: {};
         }, Readonly<import('./Timeline').TimelineItemProps> & Readonly<{}>, {}, {}, {}, {}, {
             label: string;
-            position: import('./Timeline').TimelinePositon;
+            position: import('./_shared/type').Position;
             dotColor: string;
             dotType: import('./Timeline').TimelineDotType;
             lineType: import('./Timeline').TimelineLineType;
@@ -1697,7 +1698,7 @@ declare const _default: {
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('./Timeline').TimelineItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
         label: string;
-        position: import('./Timeline').TimelinePositon;
+        position: import('./_shared/type').Position;
         dotColor: string;
         dotType: import('./Timeline').TimelineDotType;
         lineType: import('./Timeline').TimelineLineType;
@@ -1723,7 +1724,7 @@ declare const _default: {
     });
     TypographyTitle: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Typography').TypographyTitleProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
-            heading: import('./Typography').Heading;
+            heading: 1 | 2 | 3 | 4 | 5 | 6;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -1732,20 +1733,20 @@ declare const _default: {
             M: {};
             Defaults: {};
         }, Readonly<import('./Typography').TypographyTitleProps> & Readonly<{}>, {}, {}, {}, {}, {
-            heading: import('./Typography').Heading;
+            heading: 1 | 2 | 3 | 4 | 5 | 6;
         }>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('./Typography').TypographyTitleProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-        heading: import('./Typography').Heading;
+        heading: 1 | 2 | 3 | 4 | 5 | 6;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: any;
     });
     TypographyParagraph: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Typography').TypographyParagraphProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
             blockquote: boolean;
-            spacing: import('./Typography').Spacing;
+            spacing: "close" | "default";
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -1755,17 +1756,17 @@ declare const _default: {
             Defaults: {};
         }, Readonly<import('./Typography').TypographyParagraphProps> & Readonly<{}>, {}, {}, {}, {}, {
             blockquote: boolean;
-            spacing: import('./Typography').Spacing;
+            spacing: "close" | "default";
         }>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('./Typography').TypographyParagraphProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
         blockquote: boolean;
-        spacing: import('./Typography').Spacing;
+        spacing: "close" | "default";
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: any;
     });
     install: (app: App) => void;
 };
-export default _default;
+export default YcDesignVue;

package/es/index.js

@@ -1,4 +1,3 @@
-/* empty css           */
 import Affix from "./Affix/index.js";
 import Alert from "./Alert/index.js";
 import Anchor from "./Anchor/index.js";
@@ -64,8 +63,10 @@ import Transfer from "./Transfer/index.js";
 import Trigger from "./Trigger/index.js";
 import Typography from "./Typography/index.js";
 import Tabs from "./Tabs/index.js";
+import Upload from "./Upload/index.js";
 import VerificationCode from "./VerificationCode/index.js";
 import Watermark from "./Watermark/index.js";
+/* empty css           */
 import _sfc_main from "./Typography/TypographyParagraph.vue.js";
 /* empty css                                    */
 import _sfc_main$1 from "./Typography/TypographyTitle.vue.js";
@@ -207,10 +208,11 @@ const components = {
   Trigger,
   Typography,
   Tabs,
+  Upload,
   VerificationCode,
   Watermark
 };
-const index = {
+const YcDesignVue = {
   ...components,
   AnchorLink: _sfc_main$E,
   AvatarGroup: _sfc_main$D,
@@ -369,5 +371,5 @@ export {
   VerificationCode,
   Watermark,
   components,
-  index as default
+  YcDesignVue as default
 };

package/es/node_modules/@vueuse/core/index.js

@@ -1,6 +1,6 @@
-import { tryOnScopeDispose, toArray, watchImmediate, isClient, isObject, makeDestructurable, camelize, tryOnMounted, toRefs, noop, isIOS, notNullish, useThrottleFn, useDebounceFn, pxValue, injectLocal, useTimeoutFn, createSingletonPromise } from "../shared/index.js";
+import { tryOnScopeDispose, toArray, watchImmediate, isClient, isObject, makeDestructurable, camelize, tryOnMounted, toRefs, noop, isIOS, notNullish, useThrottleFn, useDebounceFn, pxValue, injectLocal, useTimeoutFn, createSingletonPromise, createEventHook, hasOwn } from "../shared/index.js";
 import { createFilterWrapper, debounceFilter, getLifeCycleTarget, throttleFilter } from "../shared/index.js";
-import { computed, toValue, watch, shallowRef, getCurrentInstance, onMounted, unref, defineComponent, ref, reactive, watchEffect, hasInjectionContext, toRaw } from "vue";
+import { computed, toValue, watch, shallowRef, getCurrentInstance, onMounted, unref, defineComponent, ref, reactive, watchEffect, hasInjectionContext, readonly, toRaw } from "vue";
 function createReusableTemplate(options = {}) {
   const {
     inheritAttrs = true
@@ -41,6 +41,7 @@ function keysToCamelKebabCase(obj) {
   return newObj;
 }
 const defaultWindow = isClient ? window : void 0;
+const defaultDocument = isClient ? window.document : void 0;
 const defaultNavigator = isClient ? window.navigator : void 0;
 function unrefElement(elRef) {
   var _a;
@@ -331,9 +332,9 @@ function useMediaQuery(query, options = {}) {
 function usePermission(permissionDesc, options = {}) {
   const {
     controls = false,
-    navigator = defaultNavigator
+    navigator: navigator2 = defaultNavigator
   } = options;
-  const isSupported = useSupported(() => navigator && "permissions" in navigator);
+  const isSupported = useSupported(() => navigator2 && "permissions" in navigator2);
   const permissionStatus = shallowRef();
   const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
   const state = shallowRef();
@@ -347,7 +348,7 @@ function usePermission(permissionDesc, options = {}) {
       return;
     if (!permissionStatus.value) {
       try {
-        permissionStatus.value = await navigator.permissions.query(desc);
+        permissionStatus.value = await navigator2.permissions.query(desc);
       } catch (e) {
         permissionStatus.value = void 0;
       } finally {
@@ -370,13 +371,13 @@ function usePermission(permissionDesc, options = {}) {
 }
 function useClipboard(options = {}) {
   const {
-    navigator = defaultNavigator,
+    navigator: navigator2 = defaultNavigator,
     read = false,
     source,
     copiedDuring = 1500,
     legacy = false
   } = options;
-  const isClipboardApiSupported = useSupported(() => navigator && "clipboard" in navigator);
+  const isClipboardApiSupported = useSupported(() => navigator2 && "clipboard" in navigator2);
   const permissionRead = usePermission("clipboard-read");
   const permissionWrite = usePermission("clipboard-write");
   const isSupported = computed(() => isClipboardApiSupported.value || legacy);
@@ -387,7 +388,7 @@ function useClipboard(options = {}) {
     let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionRead.value));
     if (!useLegacy) {
       try {
-        text.value = await navigator.clipboard.readText();
+        text.value = await navigator2.clipboard.readText();
       } catch (e) {
         useLegacy = true;
       }
@@ -403,7 +404,7 @@ function useClipboard(options = {}) {
       let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionWrite.value));
       if (!useLegacy) {
         try {
-          await navigator.clipboard.writeText(value);
+          await navigator2.clipboard.writeText(value);
         } catch (e) {
           useLegacy = true;
         }
@@ -546,6 +547,93 @@ function useDraggable(target, options = {}) {
     )
   };
 }
+function useDropZone(target, options = {}) {
+  var _a, _b;
+  const isOverDropZone = shallowRef(false);
+  const files = shallowRef(null);
+  let counter = 0;
+  let isValid = true;
+  if (isClient) {
+    const _options = typeof options === "function" ? { onDrop: options } : options;
+    const multiple = (_a = _options.multiple) != null ? _a : true;
+    const preventDefaultForUnhandled = (_b = _options.preventDefaultForUnhandled) != null ? _b : false;
+    const getFiles = (event) => {
+      var _a2, _b2;
+      const list = Array.from((_b2 = (_a2 = event.dataTransfer) == null ? void 0 : _a2.files) != null ? _b2 : []);
+      return list.length === 0 ? null : multiple ? list : [list[0]];
+    };
+    const checkDataTypes = (types) => {
+      const dataTypes = unref(_options.dataTypes);
+      if (typeof dataTypes === "function")
+        return dataTypes(types);
+      if (!(dataTypes == null ? void 0 : dataTypes.length))
+        return true;
+      if (types.length === 0)
+        return false;
+      return types.every(
+        (type) => dataTypes.some((allowedType) => type.includes(allowedType))
+      );
+    };
+    const checkValidity = (items) => {
+      const types = Array.from(items != null ? items : []).map((item) => item.type);
+      const dataTypesValid = checkDataTypes(types);
+      const multipleFilesValid = multiple || items.length <= 1;
+      return dataTypesValid && multipleFilesValid;
+    };
+    const isSafari = () => /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in window);
+    const handleDragEvent = (event, eventType) => {
+      var _a2, _b2, _c, _d, _e, _f;
+      const dataTransferItemList = (_a2 = event.dataTransfer) == null ? void 0 : _a2.items;
+      isValid = (_b2 = dataTransferItemList && checkValidity(dataTransferItemList)) != null ? _b2 : false;
+      if (preventDefaultForUnhandled) {
+        event.preventDefault();
+      }
+      if (!isSafari() && !isValid) {
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = "none";
+        }
+        return;
+      }
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+      const currentFiles = getFiles(event);
+      switch (eventType) {
+        case "enter":
+          counter += 1;
+          isOverDropZone.value = true;
+          (_c = _options.onEnter) == null ? void 0 : _c.call(_options, null, event);
+          break;
+        case "over":
+          (_d = _options.onOver) == null ? void 0 : _d.call(_options, null, event);
+          break;
+        case "leave":
+          counter -= 1;
+          if (counter === 0)
+            isOverDropZone.value = false;
+          (_e = _options.onLeave) == null ? void 0 : _e.call(_options, null, event);
+          break;
+        case "drop":
+          counter = 0;
+          isOverDropZone.value = false;
+          if (isValid) {
+            files.value = currentFiles;
+            (_f = _options.onDrop) == null ? void 0 : _f.call(_options, currentFiles, event);
+          }
+          break;
+      }
+    };
+    useEventListener(target, "dragenter", (event) => handleDragEvent(event, "enter"));
+    useEventListener(target, "dragover", (event) => handleDragEvent(event, "over"));
+    useEventListener(target, "dragleave", (event) => handleDragEvent(event, "leave"));
+    useEventListener(target, "drop", (event) => handleDragEvent(event, "drop"));
+  }
+  return {
+    files,
+    isOverDropZone
+  };
+}
 function useResizeObserver(target, callback, options = {}) {
   const { window: window2 = defaultWindow, ...observerOptions } = options;
   let observer;
@@ -712,6 +800,75 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
     stop
   };
 }
+const DEFAULT_OPTIONS = {
+  multiple: true,
+  accept: "*",
+  reset: false,
+  directory: false
+};
+function prepareInitialFiles(files) {
+  if (!files)
+    return null;
+  if (files instanceof FileList)
+    return files;
+  const dt = new DataTransfer();
+  for (const file of files) {
+    dt.items.add(file);
+  }
+  return dt.files;
+}
+function useFileDialog(options = {}) {
+  const {
+    document: document2 = defaultDocument
+  } = options;
+  const files = ref(prepareInitialFiles(options.initialFiles));
+  const { on: onChange, trigger: changeTrigger } = createEventHook();
+  const { on: onCancel, trigger: cancelTrigger } = createEventHook();
+  let input;
+  if (document2) {
+    input = document2.createElement("input");
+    input.type = "file";
+    input.onchange = (event) => {
+      const result = event.target;
+      files.value = result.files;
+      changeTrigger(files.value);
+    };
+    input.oncancel = () => {
+      cancelTrigger();
+    };
+  }
+  const reset = () => {
+    files.value = null;
+    if (input && input.value) {
+      input.value = "";
+      changeTrigger(null);
+    }
+  };
+  const open = (localOptions) => {
+    if (!input)
+      return;
+    const _options = {
+      ...DEFAULT_OPTIONS,
+      ...options,
+      ...localOptions
+    };
+    input.multiple = _options.multiple;
+    input.accept = _options.accept;
+    input.webkitdirectory = _options.directory;
+    if (hasOwn(_options, "capture"))
+      input.capture = _options.capture;
+    if (_options.reset)
+      reset();
+    input.click();
+  };
+  return {
+    files: readonly(files),
+    open,
+    reset,
+    onCancel,
+    onChange
+  };
+}
 const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
 function useScroll(element, options = {}) {
   const {
@@ -1051,13 +1208,16 @@ function useVerticalVirtualList(options, list) {
 }
 export {
   camelize,
+  createEventHook,
   createFilterWrapper,
   createReusableTemplate,
   createSingletonPromise,
   debounceFilter,
+  defaultDocument,
   defaultNavigator,
   defaultWindow,
   getLifeCycleTarget,
+  hasOwn,
   injectLocal,
   isClient,
   isIOS,
@@ -1077,9 +1237,11 @@ export {
   useClipboard,
   useDebounceFn,
   useDraggable,
+  useDropZone,
   useElementBounding,
   useElementSize,
   useEventListener,
+  useFileDialog,
   useMediaQuery,
   useMounted,
   useMutationObserver,

package/es/node_modules/@vueuse/shared/index.js

@@ -6,6 +6,32 @@ function tryOnScopeDispose(fn) {
   }
   return false;
 }
+function createEventHook() {
+  const fns = /* @__PURE__ */ new Set();
+  const off = (fn) => {
+    fns.delete(fn);
+  };
+  const clear = () => {
+    fns.clear();
+  };
+  const on = (fn) => {
+    fns.add(fn);
+    const offFn = () => off(fn);
+    tryOnScopeDispose(offFn);
+    return {
+      off: offFn
+    };
+  };
+  const trigger = (...args) => {
+    return Promise.all(Array.from(fns).map((fn) => fn(...args)));
+  };
+  return {
+    on,
+    off,
+    trigger,
+    clear
+  };
+}
 const localProvidedStateMap = /* @__PURE__ */ new WeakMap();
 const injectLocal = (...args) => {
   var _a;
@@ -44,6 +70,7 @@ const toString = Object.prototype.toString;
 const isObject = (val) => toString.call(val) === "[object Object]";
 const noop = () => {
 };
+const hasOwn = (val, key) => Object.prototype.hasOwnProperty.call(val, key);
 const isIOS = /* @__PURE__ */ getIsIOS();
 function getIsIOS() {
   var _a, _b;
@@ -292,10 +319,12 @@ function watchImmediate(source, cb, options) {
 }
 export {
   camelize,
+  createEventHook,
   createFilterWrapper,
   createSingletonPromise,
   debounceFilter,
   getLifeCycleTarget,
+  hasOwn,
   injectLocal,
   isClient,
   isIOS,