Tiếng việt

inet-component Package

inet-component là thư viện Vue.js cung cấp các component UI tái sử dụng. Hỗ trợ chủ đề sáng/tối, tùy chỉnh vị trí, liên kết ngoài, tạo kiểu SCSS và render JSX/TSX trên Vue 3 cho giao diện linh hoạt, hiệu suất cao.

Tính năng

• Menu Dropdown: Hiển thị lưới ứng dụng khi nhấn nút.
• Tùy chỉnh item: Hỗ trợ menuItems tùy chỉnh và menuAppOffice (Word, Excel, PowerPoint, Text) có sẵn với icon SVG.
• Vị trí: Cho phép chọn vị trí menu và tooltip (top-left, top-right, bottom-left, bottom-right).
• Chế độ tối/sáng: Điều chỉnh bằng prop darkMode.
• Tooltip: Hiển thị khi hover vào nút (chỉ khi menu đóng), có thể tùy chỉnh vị trí.
• Hỗ trợ truy cập (Accessibility): Hỗ trợ ARIA và bàn phím (nhấn Escape để đóng menu).
• Xử lý sự kiện: Hỗ trợ callback qua prop itemClick khi click vào item.

📦 Cài đặt

1. Cài đặt package:

   npm i inet-component

2. Import component và styles:

   import { DInetApplication, MenuItem } from "inet-component";
   import "inet-component/dist/style.css";

3. Đăng ký component trong Vue:

   import { defineComponent } from "vue";
   import { DInetApplication } from "inet-component";
   
   export default defineComponent({
     components: {
       DInetApplication,
     },
   });

🚀 Ví dụ sử dụng

<template>
  <div>
    <!-- Cách dùng cơ bản -->
    <DInetApplication />

    <!-- Với item tùy chỉnh -->
    <DInetApplication
      :menu-items="customItems"
      button-text="Ứng dụng của tôi"
      menu-position="bottom-right"
      tooltip-position="bottom-left"
      :dark-mode="false"
      :item-click="handleItemClick"
    />

    <!-- Với custom button slot -->
    <DInetApplication>
      <template #button>
        <button type="button">Mở ứng dụng</button>
      </template>
    </DInetApplication>
  </div>
</template>

<script setup lang="ts">
import { DInetApplication, MenuItem } from "inet-component";
import "inet-component/dist/style.css";

const customItems: MenuItem[] = [
  {
    id: "app1",
    name: "Ứng dụng 1",
    icon: "🚀",
    onClick: () => console.log("App 1 được click"),
  },
  {
    id: "app2",
    name: "Ứng dụng 2",
    icon: "⚡",
    onClick: () => window.open("https://example.com"),
  },
];

const handleItemClick = (item: MenuItem) => {
  console.log("Item được click:", item);
};
</script>

🧩 Props

| Prop | Kiểu dữ liệu | Mặc định | Mô tả | | ----------------- | -------------------------------------------------------------- | --------------------------- | -------------------------------------------------------------- | | menuItems | MenuItem[] | menuItemsDefault | Danh sách item tùy chỉnh, kết hợp với menuAppOffice. | | buttonText | string | "" | Văn bản hiển thị trong nút. | | buttonClass | string | "" | CSS class bổ sung cho nút. | | menuPosition | "bottom-left" \| "bottom-right" \| "top-left" \| "top-right" | "bottom-right" | Vị trí menu so với nút. | | tooltipPosition | "bottom-left" \| "bottom-right" \| "top-left" \| "top-right" | "bottom-right" | Vị trí tooltip so với nút. | | tooltip | string | "locale.our_applications" | Văn bản tooltip (có thể là key i18n). | | darkMode | boolean | false | Bật chế độ tối (true = dark, false = light). | | tagetBlank | boolean | true | Mở link ở tab mới (_blank) nếu true, cùng tab nếu false. | | itemClick | (item: MenuItem) => void | undefined | Callback khi click vào item. | | locale | string | "vi" | Ngôn ngữ hiển thị (đồng bộ với i18n.global.locale.value). |

Interface MenuItem

import { MenuItem } from "inet-component";

interface MenuItem {
  id: string;
  name: string;
  link?: string;
  icon?: string;
  onClick?: () => void;
}

Slots

• button: Tùy chỉnh nội dung nút.

  <template #button>
    <button class="custom-button">Mở ứng dụng</button>
  </template>

Styling

• Cung cấp sẵn style trong inet-component/dist/style.css.
• Hỗ trợ dark/light mode qua prop darkMode.
• Tooltip có class vị trí (pos-bottom-left, pos-bottom-right, …).
• Hiệu ứng animation cho menu và item.
• Layout responsive dạng lưới.
• Icon SVG sẵn cho menuAppOffice (Word, Excel, PowerPoint, Text).

Hỗ trợ truy cập (Accessibility)

• Nút có aria-expanded và aria-haspopup.
• Đóng menu khi nhấn Escape.
• Click ra ngoài để đóng menu.

Ghi chú

• Gói được phân phối qua npm (inet-component), nhớ import cả component và CSS.
• menuItems mặc định có sẵn liên kết tới OneMail và Drive.
• menuAppOffice chứa Word, Excel, PowerPoint, Text với icon SVG.
• Tooltip hiển thị khi hover, dùng prop buttonText.
• Interface MenuItem được export từ package để dùng type an toàn.
• Các icon SVG của menuAppOffice được load từ svgIcon.

License

Component này được cung cấp để sử dụng trong các dự án Vue.js. Vui lòng đảm bảo tuân thủ bản quyền khi dùng các tài nguyên bên ngoài (ví dụ icon). MIT © DucDev

English

inet-component Package

inet-component is a Vue.js library that provides reusable UI components. It supports light/dark themes, custom positions, external links, SCSS styling, and JSX/TSX rendering on Vue 3 for flexible, high-performance interfaces.

Features

• Dropdown Menu: Toggles a grid of application items via a button click.
• Customizable Items: Supports custom menuItems and predefined menuAppOffice items with SVG icons.
• Positioning: Configurable menu and tooltip positions (top-left, top-right, bottom-left, bottom-right).
• Themes: Supports dark and light themes via the darkMode prop.
• Tooltip: Displays on button hover (only when the menu is closed) with customizable position.
• Accessibility: Includes ARIA attributes and keyboard support (closes menu on Escape key).
• Event Handling: Supports a callback function via the itemClick prop for menu item clicks.

📦 Installation

1. Install the package: Install inet-component from npm:

   npm i inet-component

2. Import the component and styles: Import the DInetApplication component, MenuItem interface, and styles:

   import { DInetApplication, MenuItem } from "inet-component";
   import "inet-component/dist/style.css";

3. Register the component: Register the component in your Vue.js application:

   import { defineComponent } from "vue";
   import { DInetApplication } from "inet-component";
   
   export default defineComponent({
     components: {
       DInetApplication,
     },
   });

🚀 Usage Example

<template>
  <div>
    <!-- Basic usage -->
    <DInetApplication />

    <!-- With custom items -->
    <DInetApplication
      :menu-items="customItems"
      button-text="My Apps"
      menu-position="bottom-right"
      tooltip-position="bottom-left"
      :dark-mode="false"
      :item-click="handleItemClick"
    />

    <!-- With custom button slot -->
    <DInetApplication>
      <template #button>
        <button type="button">Button</button>
      </template>
    </DInetApplication>
  </div>
</template>

<script setup lang="ts">
import { DInetApplication, MenuItem } from "inet-component";
import "inet-component/dist/style.css";

const customItems: MenuItem[] = [
  {
    id: "app1",
    name: "My App 1",
    icon: "🚀",
    onClick: () => console.log("App 1 clicked"),
  },
  {
    id: "app2",
    name: "My App 2",
    icon: "⚡",
    onClick: () => window.open("https://example.com"),
  },
];

const handleItemClick = (item: MenuItem) => {
  console.log("Item clicked:", item);
};
</script>

🧩 Props

The component accepts the following props to customize its behavior and appearance:

| Prop | Type | Default | Description | | ----------------- | -------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------------------- | | menuItems | MenuItem[] | menuItemsDefault | Array of custom menu items, combined with menuAppOffice items. | | buttonText | string | "" | Text displayed inside the button. | | buttonClass | string | "" | Additional CSS class for the button. | | menuPosition | "bottom-left" \| "bottom-right" \| "top-left" \| "top-right" | "bottom-right" | Position of the dropdown menu relative to the button. | | tooltipPosition | "bottom-left" \| "bottom-right" \| "top-left" \| "top-right" | "bottom-right" | Position of the tooltip relative to the button. | | tooltip | string | "locale.our_applications" | Tooltip text (can be i18n key, translated with t()). | | darkMode | boolean | false | Enables dark mode (dark theme if true, light if false). | | tagetBlank | boolean | true | Opens menu item links in a new tab (_blank) if true, same tab if false. | | itemClick | (item: MenuItem) => void | undefined | Callback function triggered when a menu item is clicked. | | locale | string | "vi" | Locale language (syncs with i18n.global.locale.value). |

MenuItem Interface

The MenuItem interface is exported from the inet-component package for type safety when defining custom menu items:

import { MenuItem } from "inet-component";

interface MenuItem {
  id: string;
  name: string;
  link?: string;
  icon?: string;
  onClick?: () => void;
}

Slots

• button: Customize the button content.

  <template #button>
    <button class="custom-button">Open Apps</button>
  </template>

Styling

The component's styles are provided in inet-component/dist/style.css. Key features:

• Dark and light themes via the darkMode prop.
• Tooltip styling with position classes (pos-bottom-left, pos-bottom-right, etc.).
• Menu animation (menu-appear) and item animation (item-appear).
• Responsive grid layout for menu items.
• SVG icons for menuAppOffice items (Word, Excel, PowerPoint, Text) rendered using v-html.

To customize styles, override classes in inet-component/dist/style.css.

Accessibility

• Button includes aria-expanded and aria-haspopup for screen reader support.
• Menu closes on Escape key press.
• Clicking outside the menu closes it.

Notes

• The component is distributed as an npm package (inet-component). Import both the component and styles (inet-component/dist/style.css).
• The default menuItems include links to OneMail and Drive. The menuAppOffice includes predefined items for Word, Excel, PowerPoint, and Text with SVG icons, combined with custom menuItems in the dropdown.
• The tooltip displays on hover (only when the menu is closed) and uses the buttonText prop.
• The MenuItem interface is exported from inet-component for type safety. Import it as shown in the usage example.
• SVG icons for menuAppOffice are sourced from an internal svgIcon object. Ensure the Icon module is included in the package or provide equivalent SVG strings for custom icons.

License

This component is provided as-is for use in Vue.js projects. Ensure compliance with any external dependencies (e.g., icon assets) used in your project. MIT © DucDev