devextreme-vue/esm/file-manager.js

DevExtreme Vue UI and Visualization Components

/*!
 * devextreme-vue
 * Version: 25.1.5
 * Build date: Wed Sep 03 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-vue
 */

import { defineComponent } from "vue";
import { prepareComponentConfig } from "./core/index";
import FileManager from "devextreme/ui/file_manager";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        allowedFileExtensions: Array,
        contextMenu: Object,
        currentPath: String,
        currentPathKeys: Array,
        customizeDetailColumns: Function,
        customizeThumbnail: Function,
        disabled: Boolean,
        elementAttr: Object,
        fileSystemProvider: {},
        focusedItemKey: String,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        itemView: Object,
        notifications: Object,
        onContentReady: Function,
        onContextMenuItemClick: Function,
        onContextMenuShowing: Function,
        onCurrentDirectoryChanged: Function,
        onDirectoryCreated: Function,
        onDirectoryCreating: Function,
        onDisposing: Function,
        onErrorOccurred: Function,
        onFileUploaded: Function,
        onFileUploading: Function,
        onFocusedItemChanged: Function,
        onInitialized: Function,
        onItemCopied: Function,
        onItemCopying: Function,
        onItemDeleted: Function,
        onItemDeleting: Function,
        onItemDownloading: Function,
        onItemMoved: Function,
        onItemMoving: Function,
        onItemRenamed: Function,
        onItemRenaming: Function,
        onOptionChanged: Function,
        onSelectedFileOpened: Function,
        onSelectionChanged: Function,
        onToolbarItemClick: Function,
        permissions: Object,
        rootFolderName: String,
        rtlEnabled: Boolean,
        selectedItemKeys: Array,
        selectionMode: String,
        tabIndex: Number,
        toolbar: Object,
        upload: Object,
        visible: Boolean,
        width: [Number, String]
    },
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:allowedFileExtensions": null,
        "update:contextMenu": null,
        "update:currentPath": null,
        "update:currentPathKeys": null,
        "update:customizeDetailColumns": null,
        "update:customizeThumbnail": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:fileSystemProvider": null,
        "update:focusedItemKey": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:itemView": null,
        "update:notifications": null,
        "update:onContentReady": null,
        "update:onContextMenuItemClick": null,
        "update:onContextMenuShowing": null,
        "update:onCurrentDirectoryChanged": null,
        "update:onDirectoryCreated": null,
        "update:onDirectoryCreating": null,
        "update:onDisposing": null,
        "update:onErrorOccurred": null,
        "update:onFileUploaded": null,
        "update:onFileUploading": null,
        "update:onFocusedItemChanged": null,
        "update:onInitialized": null,
        "update:onItemCopied": null,
        "update:onItemCopying": null,
        "update:onItemDeleted": null,
        "update:onItemDeleting": null,
        "update:onItemDownloading": null,
        "update:onItemMoved": null,
        "update:onItemMoving": null,
        "update:onItemRenamed": null,
        "update:onItemRenaming": null,
        "update:onOptionChanged": null,
        "update:onSelectedFileOpened": null,
        "update:onSelectionChanged": null,
        "update:onToolbarItemClick": null,
        "update:permissions": null,
        "update:rootFolderName": null,
        "update:rtlEnabled": null,
        "update:selectedItemKeys": null,
        "update:selectionMode": null,
        "update:tabIndex": null,
        "update:toolbar": null,
        "update:upload": null,
        "update:visible": null,
        "update:width": null,
    },
    computed: {
        instance() {
            return this.$_instance;
        }
    },
    beforeCreate() {
        this.$_WidgetClass = FileManager;
        this.$_hasAsyncTemplate = true;
        this.$_expectedChildren = {
            contextMenu: { isCollectionItem: false, optionName: "contextMenu" },
            itemView: { isCollectionItem: false, optionName: "itemView" },
            notifications: { isCollectionItem: false, optionName: "notifications" },
            permissions: { isCollectionItem: false, optionName: "permissions" },
            toolbar: { isCollectionItem: false, optionName: "toolbar" },
            upload: { isCollectionItem: false, optionName: "upload" }
        };
    }
};
prepareComponentConfig(componentConfig);
const DxFileManager = defineComponent(componentConfig);
const DxColumnConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:alignment": null,
        "update:caption": null,
        "update:cssClass": null,
        "update:dataField": null,
        "update:dataType": null,
        "update:hidingPriority": null,
        "update:sortIndex": null,
        "update:sortOrder": null,
        "update:visible": null,
        "update:visibleIndex": null,
        "update:width": null,
    },
    props: {
        alignment: String,
        caption: String,
        cssClass: String,
        dataField: String,
        dataType: String,
        hidingPriority: Number,
        sortIndex: Number,
        sortOrder: String,
        visible: Boolean,
        visibleIndex: Number,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxColumnConfig);
const DxColumn = defineComponent(DxColumnConfig);
DxColumn.$_optionName = "columns";
DxColumn.$_isCollectionItem = true;
const DxContextMenuConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:items": null,
    },
    props: {
        items: Array
    }
};
prepareConfigurationComponentConfig(DxContextMenuConfig);
const DxContextMenu = defineComponent(DxContextMenuConfig);
DxContextMenu.$_optionName = "contextMenu";
DxContextMenu.$_expectedChildren = {
    contextMenuItem: { isCollectionItem: true, optionName: "items" },
    item: { isCollectionItem: true, optionName: "items" }
};
const DxContextMenuItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:beginGroup": null,
        "update:closeMenuOnClick": null,
        "update:disabled": null,
        "update:icon": null,
        "update:items": null,
        "update:name": null,
        "update:selectable": null,
        "update:selected": null,
        "update:text": null,
        "update:visible": null,
    },
    props: {
        beginGroup: Boolean,
        closeMenuOnClick: Boolean,
        disabled: Boolean,
        icon: String,
        items: Array,
        name: String,
        selectable: Boolean,
        selected: Boolean,
        text: String,
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxContextMenuItemConfig);
const DxContextMenuItem = defineComponent(DxContextMenuItemConfig);
DxContextMenuItem.$_optionName = "items";
DxContextMenuItem.$_isCollectionItem = true;
DxContextMenuItem.$_expectedChildren = {
    item: { isCollectionItem: true, optionName: "items" }
};
const DxDetailsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:columns": null,
    },
    props: {
        columns: Array
    }
};
prepareConfigurationComponentConfig(DxDetailsConfig);
const DxDetails = defineComponent(DxDetailsConfig);
DxDetails.$_optionName = "details";
DxDetails.$_expectedChildren = {
    column: { isCollectionItem: true, optionName: "columns" }
};
const DxFileSelectionItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:cssClass": null,
        "update:disabled": null,
        "update:icon": null,
        "update:locateInMenu": null,
        "update:location": null,
        "update:name": null,
        "update:options": null,
        "update:showText": null,
        "update:text": null,
        "update:visible": null,
        "update:widget": null,
    },
    props: {
        cssClass: String,
        disabled: Boolean,
        icon: String,
        locateInMenu: String,
        location: String,
        name: String,
        options: {},
        showText: String,
        text: String,
        visible: Boolean,
        widget: String
    }
};
prepareConfigurationComponentConfig(DxFileSelectionItemConfig);
const DxFileSelectionItem = defineComponent(DxFileSelectionItemConfig);
DxFileSelectionItem.$_optionName = "fileSelectionItems";
DxFileSelectionItem.$_isCollectionItem = true;
const DxItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:beginGroup": null,
        "update:closeMenuOnClick": null,
        "update:cssClass": null,
        "update:disabled": null,
        "update:icon": null,
        "update:items": null,
        "update:locateInMenu": null,
        "update:location": null,
        "update:name": null,
        "update:options": null,
        "update:selectable": null,
        "update:selected": null,
        "update:showText": null,
        "update:text": null,
        "update:visible": null,
        "update:widget": null,
    },
    props: {
        beginGroup: Boolean,
        closeMenuOnClick: Boolean,
        cssClass: String,
        disabled: Boolean,
        icon: String,
        items: Array,
        locateInMenu: String,
        location: String,
        name: String,
        options: {},
        selectable: Boolean,
        selected: Boolean,
        showText: String,
        text: String,
        visible: Boolean,
        widget: String
    }
};
prepareConfigurationComponentConfig(DxItemConfig);
const DxItem = defineComponent(DxItemConfig);
DxItem.$_optionName = "items";
DxItem.$_isCollectionItem = true;
DxItem.$_expectedChildren = {
    item: { isCollectionItem: true, optionName: "items" }
};
const DxItemViewConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:details": null,
        "update:mode": null,
        "update:showFolders": null,
        "update:showParentFolder": null,
    },
    props: {
        details: Object,
        mode: String,
        showFolders: Boolean,
        showParentFolder: Boolean
    }
};
prepareConfigurationComponentConfig(DxItemViewConfig);
const DxItemView = defineComponent(DxItemViewConfig);
DxItemView.$_optionName = "itemView";
DxItemView.$_expectedChildren = {
    details: { isCollectionItem: false, optionName: "details" }
};
const DxNotificationsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:showPanel": null,
        "update:showPopup": null,
    },
    props: {
        showPanel: Boolean,
        showPopup: Boolean
    }
};
prepareConfigurationComponentConfig(DxNotificationsConfig);
const DxNotifications = defineComponent(DxNotificationsConfig);
DxNotifications.$_optionName = "notifications";
const DxPermissionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:copy": null,
        "update:create": null,
        "update:delete": null,
        "update:download": null,
        "update:move": null,
        "update:rename": null,
        "update:upload": null,
    },
    props: {
        copy: Boolean,
        create: Boolean,
        delete: Boolean,
        download: Boolean,
        move: Boolean,
        rename: Boolean,
        upload: Boolean
    }
};
prepareConfigurationComponentConfig(DxPermissionsConfig);
const DxPermissions = defineComponent(DxPermissionsConfig);
DxPermissions.$_optionName = "permissions";
const DxToolbarConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:fileSelectionItems": null,
        "update:items": null,
    },
    props: {
        fileSelectionItems: Array,
        items: Array
    }
};
prepareConfigurationComponentConfig(DxToolbarConfig);
const DxToolbar = defineComponent(DxToolbarConfig);
DxToolbar.$_optionName = "toolbar";
DxToolbar.$_expectedChildren = {
    fileSelectionItem: { isCollectionItem: true, optionName: "fileSelectionItems" },
    item: { isCollectionItem: true, optionName: "items" },
    toolbarItem: { isCollectionItem: true, optionName: "items" }
};
const DxToolbarItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:cssClass": null,
        "update:disabled": null,
        "update:icon": null,
        "update:locateInMenu": null,
        "update:location": null,
        "update:name": null,
        "update:options": null,
        "update:showText": null,
        "update:text": null,
        "update:visible": null,
        "update:widget": null,
    },
    props: {
        cssClass: String,
        disabled: Boolean,
        icon: String,
        locateInMenu: String,
        location: String,
        name: String,
        options: {},
        showText: String,
        text: String,
        visible: Boolean,
        widget: String
    }
};
prepareConfigurationComponentConfig(DxToolbarItemConfig);
const DxToolbarItem = defineComponent(DxToolbarItemConfig);
DxToolbarItem.$_optionName = "items";
DxToolbarItem.$_isCollectionItem = true;
const DxUploadConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:chunkSize": null,
        "update:maxFileSize": null,
    },
    props: {
        chunkSize: Number,
        maxFileSize: Number
    }
};
prepareConfigurationComponentConfig(DxUploadConfig);
const DxUpload = defineComponent(DxUploadConfig);
DxUpload.$_optionName = "upload";
export default DxFileManager;
export { DxFileManager, DxColumn, DxContextMenu, DxContextMenuItem, DxDetails, DxFileSelectionItem, DxItem, DxItemView, DxNotifications, DxPermissions, DxToolbar, DxToolbarItem, DxUpload };