@byyuurin/ui 0.2.0 → 0.4.0

package/dist/runtime/components/Tree.vue

@@ -0,0 +1,241 @@
+<script>
+import theme from "#build/ui/tree";
+</script>
+
+<script setup>
+import { createReusableTemplate, reactivePick } from "@vueuse/core";
+import { defu } from "defu";
+import { TreeItem, TreeRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, shallowRef } from "vue";
+import { useAppConfig } from "#imports";
+import { get, pick } from "../utils";
+import { cv, merge } from "../utils/style";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  getKey: { type: Function, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  trailingIcon: { type: [String, Object], required: false },
+  expandedIcon: { type: [String, Object], required: false },
+  collapsedIcon: { type: [String, Object], required: false },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false, default: true },
+  onSelect: { type: Function, required: false },
+  onToggle: { type: Function, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  expanded: { type: Array, required: false },
+  defaultExpanded: { type: Array, required: false },
+  selectionBehavior: { type: String, required: false },
+  propagateSelect: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  bubbleSelect: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:expanded"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "items", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emit);
+const as = computed(() => {
+  if (typeof props.as === "string" || props.as && "render" in props.as && typeof props.as?.render === "function")
+    return { root: props.as, link: "button" };
+  return defu(props.as, { root: "ul", link: "button" });
+});
+const flattenedPaddingFormula = computed(() => {
+  const sizeConfig = {
+    xs: { base: 2, perLevel: 5.5 },
+    // px-2, ms-4 + ps-1.5
+    sm: { base: 2.5, perLevel: 6 },
+    // px-2.5, ms-4.5 + ps-1.5
+    md: { base: 2.5, perLevel: 6.5 },
+    // px-2.5, ms-5 + ps-1.5
+    lg: { base: 3, perLevel: 7 },
+    // px-3, ms-5.5 + ps-1.5
+    xl: { base: 3, perLevel: 7.5 }
+    // px-3, ms-6 + ps-1.5
+  };
+  const config = sizeConfig[props.size || "md"];
+  return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
+});
+const { define: DefineTreeTemplate, reuse: ReuseTreeTemplate } = createReusableTemplate();
+const { define: DefineItemTemplate, reuse: ReuseItemTemplate } = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    level: {
+      type: Number,
+      required: true
+    }
+  }
+});
+const rootRef = shallowRef();
+function getItemLabel(item) {
+  return get(item, props.labelKey);
+}
+function getItemKey(item) {
+  return props.getKey ? props.getKey(item) || getItemLabel(item) : getItemLabel(item);
+}
+function getDefaultOpenedItems(item) {
+  const currentItem = item.defaultExpanded ? getItemKey(item) : null;
+  const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
+  return [currentItem, ...childItems].filter(Boolean);
+}
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.tree));
+  return styler(pick(props, ["color", "size"]));
+});
+const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item)));
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  }
+});
+function onUpdate(value) {
+  emit("update:modelValue", props.multiple && !Array.isArray(value) ? [value] : value);
+}
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, index, level }">
+    <li
+      role="presentation"
+      :class="props.nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+      :data-part="props.nested && level > 1 ? 'itemWithChildren' : 'item'"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
+        :level="level"
+        :value="item"
+        as-child
+        @toggle="(item.onToggle ?? props.onToggle)?.($event, item)"
+        @select="(item.onSelect ?? props.onSelect)?.($event, item)"
+      >
+        <slot
+          :name="`${item.slot ?? 'item'}-wrapper`"
+          v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+          :item="item"
+        >
+          <component
+            :is="as.link"
+            :type="as.link === 'button' ? 'button' : void 0"
+            :disabled="item.disabled || props.disabled"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || props.disabled })"
+            data-part="link"
+            :style="!props.nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
+          >
+            <slot
+              :name="item.slot || 'item'"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+              :item="item"
+            >
+              <slot
+                :name="`${item.slot || 'item'}-leading`"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                :item="item"
+              >
+                <Icon
+                  v-if="item.icon"
+                  :name="item.icon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  data-part="linkLeadingIcon"
+                />
+                <Icon
+                  v-else-if="item.children?.length"
+                  :name="isExpanded ? props.expandedIcon ?? appConfig.ui.icons.folderOpen : props.collapsedIcon ?? appConfig.ui.icons.folder"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  data-part="linkLeadingIcon"
+                />
+              </slot>
+
+              <span v-if="getItemLabel(item) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
+                <slot
+                  :name="`${item.slot || 'item'}-label`"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  {{ getItemLabel(item) }}
+                </slot>
+              </span>
+
+              <span
+                v-if="item.trailingIcon || item.children?.length || slots[`${item.slot || 'item'}-trailing`]"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+                data-part="linkTrailing"
+              >
+                <slot
+                  :name="`${item.slot || 'item'}-trailing`"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  <Icon
+                    v-if="item.trailingIcon"
+                    :name="item.trailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.trailingIcon, item.ui?.linkTrailingIcon] })"
+                    data-part="linkTrailingIcon"
+                  />
+                  <Icon
+                    v-else-if="item.children?.length"
+                    :name="props.trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    data-part="linkTrailingIcon"
+                  />
+                </slot>
+              </span>
+            </slot>
+          </component>
+        </slot>
+
+        <ul
+          v-if="props.nested && item.children?.length && isExpanded"
+          role="group"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
+          data-part="listWithChildren"
+        >
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineItemTemplate>
+
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <ReuseItemTemplate v-for="(item, index) in items" :key="`${level}-${index}`" :item="item" :index="index" :level="level" />
+  </DefineTreeTemplate>
+
+  <TreeRoot
+    ref="rootRef"
+    v-slot="{ flattenItems }"
+    v-bind="{ ...rootProps, ...$attrs }"
+    :as="as.root"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :get-key="getItemKey"
+    :default-expanded="defaultExpanded"
+    :selection-behavior="props.selectionBehavior"
+    :multiple="props.multiple"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <template v-if="!props.nested">
+      <ReuseItemTemplate
+        v-for="(item, index) in flattenItems"
+        :key="item._id"
+        :item="item.value"
+        :index="index"
+        :level="item.level"
+      />
+    </template>
+    <ReuseTreeTemplate v-else :items="props.items" :level="1" />
+  </TreeRoot>
+</template>

package/dist/runtime/components/Tree.vue.d.ts

@@ -0,0 +1,121 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { TreeItemProps, TreeItemSelectEvent, TreeItemToggleEvent, TreeRootEmits, TreeRootProps } from 'reka-ui';
+import theme from '#build/ui/tree';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys, StaticSlot } from '../types/utils';
+export interface TreeItem extends ComponentBaseProps {
+    icon?: IconProps['name'];
+    label?: string;
+    trailingIcon?: IconProps['name'];
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    slot?: string;
+    children?: TreeItem[];
+    onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
+    onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    [key: string]: any;
+}
+type ThemeVariants = VariantProps<typeof theme>;
+export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends ComponentBaseProps, Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+    /**
+     * The element or component this component should render as.
+     * @default "ul"
+     */
+    as?: TreeRootProps<T>['as'] | {
+        root?: TreeRootProps<T>['as'];
+        link: TreeItemProps<T>['as'];
+    };
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** This function is passed the index of each item and should return a unique key for that item */
+    getKey?: (val: T[number]) => string;
+    /**
+     * The key used to get the label from the item.
+     * @default "label"
+     */
+    labelKey?: GetItemKeys<T>;
+    /**
+     * The icon displayed on the right side of a parent node.
+     * @default app.icons.chevronDown
+     */
+    trailingIcon?: IconProps['name'];
+    /**
+     * The icon displayed when a parent node is expanded.
+     * @default app.icons.folderOpen
+     */
+    expandedIcon?: IconProps['name'];
+    /**
+     * The icon displayed when a parent node is collapsed.
+     * @default app.icons.folder
+     */
+    collapsedIcon?: IconProps['name'];
+    items?: T;
+    /** The controlled value of the Tree. Can be bind as `v-model`. */
+    modelValue?: M extends true ? T[number][] : T[number];
+    /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
+    defaultValue?: M extends true ? T[number][] : T[number];
+    /** Whether multiple options can be selected or not. */
+    multiple?: M & boolean;
+    /**
+     * Use nested DOM structure (children inside parents) vs flattened structure (all items at same level).
+     * @default true
+     */
+    nested?: boolean;
+    onSelect?: (e: TreeItemSelectEvent<T[number]>, item: T[number]) => void;
+    onToggle?: (e: TreeItemToggleEvent<T[number]>, item: T[number]) => void;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export type TreeEmits<T extends TreeItem[] = TreeItem[], M extends boolean = false> = TreeRootEmits<T[number], M>;
+type SlotProps<T extends TreeItem> = StaticSlot<{
+    item: T;
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
+    ui: ComponentStyler<typeof theme>;
+}>;
+export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
+    'item-wrapper': SlotProps<T[number]>;
+    'item': SlotProps<T[number]>;
+    'item-leading': SlotProps<T[number]>;
+    'item-label': SlotProps<T[number]>;
+    'item-trailing': SlotProps<T[number]>;
+} & DynamicSlots<T[number], undefined, {
+    index: number;
+    level: number;
+    expanded: boolean;
+    ui: ComponentStyler<typeof theme>;
+    selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TreeItem[], M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TreeProps<T, M> & {
+        "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
+        "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+    }>) => void;
+    attrs: any;
+    slots: TreeSlots<T>;
+    emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/composables/defineShortcuts.d.ts

@@ -10,6 +10,7 @@ export interface ShortcutsConfig {
 }
 export interface ShortcutsOptions {
     chainDelay?: number;
+    layoutIndependent?: boolean;
 }
 export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
 export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/core").Fn;

package/dist/runtime/composables/defineShortcuts.js

@@ -3,7 +3,28 @@ import { computed, ref, toValue } from "vue";
 import { useKbd } from "./useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
-const shiftableKeys = /* @__PURE__ */ new Set(["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"]);
+const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"];
+function convertKeyToCode(key) {
+  if (/^[a-z]$/i.test(key))
+    return `Key${key.toUpperCase()}`;
+  if (/^\d$/.test(key))
+    return `Digit${key}`;
+  if (/^f\d+$/i.test(key))
+    return key.toUpperCase();
+  const specialKeys = {
+    space: "Space",
+    enter: "Enter",
+    escape: "Escape",
+    tab: "Tab",
+    backspace: "Backspace",
+    delete: "Delete",
+    arrowup: "ArrowUp",
+    arrowdown: "ArrowDown",
+    arrowleft: "ArrowLeft",
+    arrowright: "ArrowRight"
+  };
+  return specialKeys[key.toLowerCase()] || key;
+}
 export function extractShortcuts(items) {
   const shortcuts = {};
   function traverse(items2) {
@@ -29,6 +50,8 @@ export function defineShortcuts(config, options = {}) {
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
   const { macOS } = useKbd();
   const activeElement = useActiveElement();
+  const layoutIndependent = options.layoutIndependent ?? false;
+  const shiftableCodes = new Set(shiftableKeys.map((k) => convertKeyToCode(k)));
   const usingInput = computed(() => {
     const tagName = activeElement.value?.tagName;
     const contentEditable = activeElement.value?.contentEditable;
@@ -48,8 +71,13 @@ export function defineShortcuts(config, options = {}) {
         console.trace(`[Shortcut] Invalid key: "${key}"`);
       const chained = key.includes("-") && key !== "-" && !key.includes("_");
       if (chained) {
+        let shortcutKey = key.toLowerCase();
+        if (layoutIndependent) {
+          const parts = key.split("-").map((p) => convertKeyToCode(p));
+          shortcutKey = parts.join("-");
+        }
         shortcut = {
-          key: key.toLowerCase(),
+          key: shortcutKey,
           metaKey: false,
           ctrlKey: false,
           shiftKey: false,
@@ -57,8 +85,11 @@ export function defineShortcuts(config, options = {}) {
         };
       } else {
         const keySplit = key.toLowerCase().split("_").map((k) => k);
+        let baseKey = keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_");
+        if (layoutIndependent)
+          baseKey = convertKeyToCode(baseKey);
         shortcut = {
-          key: keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_"),
+          key: baseKey,
           metaKey: keySplit.includes("meta") || keySplit.includes("command"),
           ctrlKey: keySplit.includes("ctrl"),
           shiftKey: keySplit.includes("shift"),
@@ -90,10 +121,10 @@ export function defineShortcuts(config, options = {}) {
   const onKeyDown = (e) => {
     if (!e.key)
       return;
-    const alphabetKey = /^[a-z]{1}$/i.test(e.key);
-    const shiftableKey = shiftableKeys.has(e.key.toLowerCase());
+    const alphabetKey = layoutIndependent ? /^Key[A-Z]$/i.test(e.code) : /^[a-z]{1}$/i.test(e.key);
+    const shiftableKey = layoutIndependent ? shiftableCodes.has(e.code) : shiftableKeys.includes(e.key.toLowerCase());
     let chainedKey;
-    chainedInputs.value.push(e.key);
+    chainedInputs.value.push(layoutIndependent ? e.code : e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
       for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
@@ -108,8 +139,13 @@ export function defineShortcuts(config, options = {}) {
       }
     }
     for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
-      if (e.key.toLowerCase() !== shortcut.key)
-        continue;
+      if (layoutIndependent) {
+        if (e.code !== shortcut.key)
+          continue;
+      } else {
+        if (e.key.toLowerCase() !== shortcut.key)
+          continue;
+      }
       if (e.metaKey !== shortcut.metaKey)
         continue;
       if (e.ctrlKey !== shortcut.ctrlKey)

package/dist/runtime/composables/useFileUpload.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPublicInstance, MaybeRef } from 'vue';
+export interface UseFileUploadOptions {
+    /**
+     * Specifies the allowed file types. Provide a comma-separated list of MIME types or file extensions.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+     * @default "*"
+     */
+    accept?: MaybeRef<string>;
+    reset?: boolean;
+    multiple?: MaybeRef<boolean>;
+    dropzone?: MaybeRef<boolean>;
+    onUpdate: (files: File[]) => void;
+}
+export declare function useFileUpload(options: UseFileUploadOptions): {
+    isDragging: import("vue").ShallowRef<boolean, boolean>;
+    open: () => void;
+    inputRef: import("vue").ShallowRef<ComponentPublicInstance | undefined, ComponentPublicInstance | undefined>;
+    dropzoneRef: import("vue").ShallowRef<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+};

package/dist/runtime/composables/useFileUpload.js

@@ -0,0 +1,79 @@
+import { useDropZone, useFileDialog } from "@vueuse/core";
+import { computed, onMounted, reactive, shallowRef, unref, watch } from "vue";
+function parseAcceptToDataTypes(accept) {
+  if (!accept || accept === "*")
+    return void 0;
+  const types = accept.split(",").map((type) => {
+    const trimmedType = type.trim();
+    if (trimmedType.includes("/") && trimmedType.endsWith("/*"))
+      return trimmedType.split("/")[0] || trimmedType;
+    return trimmedType;
+  }).filter((type) => {
+    return !type.startsWith(".");
+  });
+  return types.length > 0 ? types : void 0;
+}
+export function useFileUpload(options) {
+  const {
+    accept = "*",
+    reset = false,
+    multiple = false,
+    dropzone = true,
+    onUpdate
+  } = options;
+  const inputRef = shallowRef();
+  const dropzoneRef = shallowRef();
+  const dataTypes = computed(() => parseAcceptToDataTypes(unref(accept)));
+  const onDrop = (files, fromDropzone = false) => {
+    if (!files || files.length === 0)
+      return;
+    if (files instanceof FileList)
+      files = Array.from(files);
+    if (files.length > 1 && !unref(multiple))
+      files = [files[0]];
+    if (fromDropzone && inputRef.value?.$el) {
+      try {
+        const dt = new DataTransfer();
+        files.forEach((file) => dt.items.add(file));
+        inputRef.value.$el.files = dt.files;
+      } catch (e) {
+        console.warn("Could not sync files to input element:", e);
+      }
+    }
+    onUpdate(files);
+  };
+  const isDragging = shallowRef(false);
+  const fileDialog = reactive({
+    open: () => {
+    }
+  });
+  function open() {
+    fileDialog.open();
+  }
+  onMounted(() => {
+    const { isOverDropZone } = useDropZone(
+      () => unref(dropzone) ? dropzoneRef.value : void 0,
+      {
+        dataTypes: dataTypes.value,
+        onDrop: (files) => onDrop(files, true)
+      }
+    );
+    watch(isOverDropZone, (value) => {
+      isDragging.value = unref(dropzone) ? value : false;
+    });
+    const { onChange, open: open2 } = useFileDialog({
+      accept,
+      multiple,
+      input: unref(inputRef)?.$el,
+      reset
+    });
+    fileDialog.open = open2;
+    onChange((fileList) => onDrop(fileList, false));
+  });
+  return {
+    isDragging,
+    open,
+    inputRef,
+    dropzoneRef
+  };
+}

package/dist/runtime/composables/useLocale.d.ts

@@ -19,6 +19,9 @@ declare function _useLocale(): {
             next: string;
             goto: string;
         };
+        fileUpload: {
+            removeFile: string;
+        };
         inputNumber: {
             increment: string;
             decrement: string;
@@ -26,6 +29,12 @@ declare function _useLocale(): {
         modal: {
             close: string;
         };
+        select: {
+            create: string;
+            noData: string;
+            noMatch: string;
+            search: string;
+        };
         table: {
             noData: string;
         };
@@ -52,6 +61,9 @@ declare function _useLocale(): {
             next: string;
             goto: string;
         };
+        fileUpload: {
+            removeFile: string;
+        };
         inputNumber: {
             increment: string;
             decrement: string;
@@ -59,6 +71,12 @@ declare function _useLocale(): {
         modal: {
             close: string;
         };
+        select: {
+            create: string;
+            noData: string;
+            noMatch: string;
+            search: string;
+        };
         table: {
             noData: string;
         };

package/dist/runtime/locale/en.d.ts

@@ -14,6 +14,9 @@ declare const _default: Required<import("@byyuurin/ui-kit").Locale<{
         next: string;
         goto: string;
     };
+    fileUpload: {
+        removeFile: string;
+    };
     inputNumber: {
         increment: string;
         decrement: string;
@@ -21,6 +24,12 @@ declare const _default: Required<import("@byyuurin/ui-kit").Locale<{
     modal: {
         close: string;
     };
+    select: {
+        create: string;
+        noData: string;
+        noMatch: string;
+        search: string;
+    };
     table: {
         noData: string;
     };

package/dist/runtime/locale/en.js

@@ -18,6 +18,9 @@ export default defineLocale({
       next: "Next",
       goto: "Go to slide {page}"
     },
+    fileUpload: {
+      removeFile: "Remove {filename}"
+    },
     inputNumber: {
       increment: "Increment",
       decrement: "Decrement"
@@ -25,6 +28,12 @@ export default defineLocale({
     modal: {
       close: "Close"
     },
+    select: {
+      create: 'Create "{label}"',
+      noData: "No data",
+      noMatch: "No matching data",
+      search: "Search\u2026"
+    },
     table: {
       noData: "No data"
     },

package/dist/runtime/locale/zh_tw.d.ts

@@ -14,6 +14,9 @@ declare const _default: Required<import("@byyuurin/ui-kit").Locale<{
         next: string;
         goto: string;
     };
+    fileUpload: {
+        removeFile: string;
+    };
     inputNumber: {
         increment: string;
         decrement: string;
@@ -21,6 +24,12 @@ declare const _default: Required<import("@byyuurin/ui-kit").Locale<{
     modal: {
         close: string;
     };
+    select: {
+        create: string;
+        noData: string;
+        noMatch: string;
+        search: string;
+    };
     table: {
         noData: string;
     };