@ducdev2k1/filemanager-vuetify v0.1.5

FileManager Vuetify

English

Overview

@ducdev2k1/filemanager-vuetify is a customizable file manager component for Vue 3, built with Vuetify 3. It provides an intuitive interface for browsing files and directories, with support for breadcrumbs, context menus, toolbar actions, and dark/light themes.

Features

• File and folder navigation with breadcrumb support
• Customizable toolbar and context menu actions
• Dark and light theme support
• Responsive design with fixed header and scroll handling
• TypeScript support for type-safe development
• Configurable row height and thumbnail icons

Installation

Install the package and its dependencies via npm:

npm install @ducdev2k1/filemanager-vuetify vuetify

Ensure you have Vue 3 and Vuetify 3 configured in your project.

Setup

1. Configure Vuetify: Initialize Vuetify in your main.ts:

   import { createApp } from 'vue';
   import App from './App.vue';
   import { createVuetify } from 'vuetify';
   import 'vuetify/styles';
   import * as components from 'vuetify/components';
   import * as directives from 'vuetify/directives';
   
   const vuetify = createVuetify({ components, directives });
   const app = createApp(App);
   app.use(vuetify);
   app.mount('#app');

2. Import FileManager: Use the FileManager component in your Vue component.

Usage

Here’s a basic example using <script setup> with TypeScript:

<script setup lang="ts">
  import { ref } from 'vue';
  import { FileManager } from '@ducdev2k1/filemanager-vuetify';

  const selectedItems = ref<any[]>([]);
  const loading = ref(false);

  const handleRefresh = () => {
    loading.value = true;
    setTimeout(() => (loading.value = false), 2000);
  };
</script>

<template>
  <div class="h-screen">
    <FileManager text-bread="File Manager" currentPath="" :loading="loading" @refresh="handleRefresh" />
  </div>
</template>

For a complete example with advanced features like breadcrumbs and custom actions, see the Usage Documentation.

API

Props

Events

Interfaces

interface IFileManager {
  isDirectory: boolean;
  name: string;
  path: string;
  [key: string]: any;
}

interface IActionFM {
  label: string;
  icon: string;
  action: string;
}

Example

A more advanced example with breadcrumbs and custom actions:

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { FileManager } from '@ducdev2k1/filemanager-vuetify';

  const DemoActionFM = [
    { label: 'Upload', icon: 'mdi-upload', action: 'upload' },
    { label: 'New Folder', icon: 'mdi-folder-plus', action: 'new-folder' },
  ];

  const selectedItems = ref<any[]>([]);
  const selectedOneItem = ref<any>();
  const listBreadcrumb = ref<IFileManager[]>([]);
  const loading = ref(false);

  const handleDoubleClickRow = (item: IFileManager) => {
    if (item.isDirectory) listBreadcrumb.value.push(item);
  };

  watch(selectedItems, (newVal) => console.log('Selected:', newVal));
</script>

<template>
  <FileManager
    text-bread="Demo"
    currentPath=""
    return-object
    fixed-header
    height="100vh"
    :breadcrumb="listBreadcrumb"
    :action-toolbar="DemoActionFM"
    :loading="loading"
    :theme="'dark'"
    :update-selected="(data) => (selectedItems = data)"
    :update-selected-one="(data) => (selectedOneItem = data)"
    :double-click-row="handleDoubleClickRow" />
</template>

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/your-feature).
3. Commit your changes (git commit -m "Add your feature").
4. Push to the branch (git push origin feature/your-feature).
5. Open a Pull Request.

Please include tests and update documentation where applicable.

Issues

Report bugs or suggest features via the GitHub Issues page.

License

This project is licensed under the MIT License.

Acknowledgments

Built with ❤️ using Vue 3 and Vuetify 3.

Tiếng Việt

Tổng quan

@ducdev2k1/filemanager-vuetify là một thành phần quản lý tệp tùy chỉnh cho Vue 3, được xây dựng dựa trên Vuetify 3. Nó cung cấp giao diện trực quan để duyệt tệp và thư mục, hỗ trợ breadcrumb, menu ngữ cảnh, hành động trên thanh công cụ và giao diện sáng/tối.

Tính năng

• Điều hướng tệp và thư mục với hỗ trợ breadcrumb
• Tùy chỉnh thanh công cụ và menu ngữ cảnh
• Hỗ trợ giao diện sáng và tối
• Thiết kế đáp ứng với tiêu đề cố định và xử lý cuộn
• Hỗ trợ TypeScript cho phát triển an toàn kiểu
• Tùy chỉnh chiều cao hàng và biểu tượng thu nhỏ

Cài đặt

Cài đặt gói và các phụ thuộc của nó qua npm:

npm install @ducdev2k1/filemanager-vuetify vuetify

Đảm bảo bạn đã cấu hình Vue 3 và Vuetify 3 trong dự án của mình.

Thiết lập

1. Cấu hình Vuetify: Khởi tạo Vuetify trong tệp main.ts:

   import { createApp } from 'vue';
   import App from './App.vue';
   import { createVuetify } from 'vuetify';
   import 'vuetify/styles';
   import * as components from 'vuetify/components';
   import * as directives from 'vuetify/directives';
   
   const vuetify = createVuetify({ components, directives });
   const app = createApp(App);
   app.use(vuetify);
   app.mount('#app');

2. Nhập FileManager: Sử dụng thành phần FileManager trong thành phần Vue của bạn.

Sử dụng

Dưới đây là một ví dụ cơ bản sử dụng <script setup> với TypeScript:

<script setup lang="ts">
  import { ref } from 'vue';
  import { FileManager } from '@ducdev2k1/filemanager-vuetify';

  const selectedItems = ref<any[]>([]);
  const loading = ref(false);

  const handleRefresh = () => {
    loading.value = true;
    setTimeout(() => (loading.value = false), 2000);
  };
</script>

<template>
  <div class="h-screen">
    <FileManager text-bread="Quản lý Tệp" currentPath="" :loading="loading" @refresh="handleRefresh" />
  </div>
</template>

Để xem ví dụ đầy đủ với các tính năng nâng cao như breadcrumb và hành động tùy chỉnh, hãy tham khảo Tài liệu Sử dụng.

API

Thuộc tính (Props)

Sự kiện (Events)

Giao diện (Interfaces)

interface IFileManager {
  isDirectory: boolean;
  name: string;
  path: string;
  [key: string]: any;
}

interface IActionFM {
  label: string;
  icon: string;
  action: string;
}

Ví dụ

Ví dụ nâng cao với breadcrumb và hành động tùy chỉnh:

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { FileManager } from '@ducdev2k1/filemanager-vuetify';

  const DemoActionFM = [
    { label: 'Tải lên', icon: 'mdi-upload', action: 'upload' },
    { label: 'Thư mục mới', icon: 'mdi-folder-plus', action: 'new-folder' },
  ];

  const selectedItems = ref<any[]>([]);
  const selectedOneItem = ref<any>();
  const listBreadcrumb = ref<IFileManager[]>([]);
  const loading = ref(false);

  const handleDoubleClickRow = (item: IFileManager) => {
    if (item.isDirectory) listBreadcrumb.value.push(item);
  };

  watch(selectedItems, (newVal) => console.log('Đã chọn:', newVal));
</script>

<template>
  <FileManager
    text-bread="Demo"
    currentPath=""
    return-object
    fixed-header
    height="100vh"
    :breadcrumb="listBreadcrumb"
    :action-toolbar="DemoActionFM"
    :loading="loading"
    :theme="'dark'"
    :update-selected="(data) => (selectedItems = data)"
    :update-selected-one="(data) => (selectedOneItem = data)"
    :double-click-row="handleDoubleClickRow" />
</template>

Báo lỗi

Báo cáo lỗi hoặc đề xuất tính năng qua trang Issues trên GitHub.

Giấy phép

Dự án này được cấp phép theo Giấy phép MIT.

Lời cảm ơn

Được xây dựng với ❤️ sử dụng Vue 3 và Vuetify 3.