This library provides a suite of UI components designed specifically for Vue. Both ready-to-use and customizable, these components are developed as part of a thesis project and are ideal for development and experimental environments, though they may not yet be suitable for production use.
Installation
To integrate these components into your Vue project, use the following command to install:
npm install x-ui-components-vue
Then, import the styles in your main JavaScript file:
This library features five key components: modal, menu, select, multiselect, and accordion. For detailed documentation, code examples, and live demos, please visit the documentation site.
Usage Example
Below is a simple example demonstrating how to use the Menu component:
<script setup>
import Example from "../../components/Example.vue";
import { Menu, MenuButton, MenuDropdown, MenuItem } from "x-ui-components-vue";
const isOpen = ref(false);
const toggleMenu = () => {
isOpen.value = !isOpen.value;
};
const handleItemClick = (item) => {
window.alert("item was clicked: " + item.value);
};
</script>
<template>
<div class="center">
<Menu>
<MenuButton :onMenuButtonClick="toggleMenu">
<template v-slot:default> Click me to open menu </template>
</MenuButton>
<MenuDropdown :open="isOpen">
<MenuItem
:item="{ id: '1', value: 'Action 1' }"
@click="handleItemClick"
>
First Action
</MenuItem>
<MenuItem
:item="{ id: '2', value: 'Action 2' }"
@click="handleItemClick"
>
Second Action
</MenuItem>
</MenuDropdown>
</Menu>
</div>
</template>
API
Accordion
Prop Name
Description
Type
Default
component
If the value is false only children of the main component will be rendered
boolean
false
isStatic
If true the component becomes a shell and ignores all the internal logic
boolean
false
expanded
Whether accordion is expanded
boolean
false
title
Title of the collapsible section
string
""
onTitleClick
Triggers when the title is clicked
function
() => {}
Accordion Button
Prop Name
Description
Type
Default
onClick
Triggers when the title is clicked
function
() => {}
Accordion Content
Prop Name
Description
Type
Default
visible
Whether the content is visible
boolean
false
Menu
Prop Name
Description
Type
Default
component
If the value is false only children of the main component will be rendered
boolean
false
isStatic
If true, the component becomes a shell and ignores all the internal logic
boolean
false
open
Whether or not the menu is open
boolean
false
items
Menu items
{ id: number | string, value: string }[]
[]
disabledItems
Disabled menu items
number[] | string[]
[]
onClose
Triggers when the dropdown menu is closed
function
() => {}
onItemClick
Triggers when a menu item is clicked
function
(id: string | number) => {}
onButtonClick
Triggers when the menu button is clicked
function
() => {}
Menu Button
Prop Name
Description
Type
Default
onMenuButtonClick
Triggers when the button is clicked
function
() => {}
Menu Dropdown
Prop Name
Description
Type
Default
open
Whether or not the dropdown is visible
boolean
false
Menu Item
Prop Name
Description
Type
Default
item
Menu item
funcstion
{ id: number | string, value: string }
isDisabled
Whether the item is disabled
boolean
false
Modal
Prop Name
Description
Type
Default
component
If the value is false only children of the main component will be rendered
boolean
false
isStatic
If true the component becomes a shell and ignores all the internal logic
boolean
false
isOpen
Whether the modal is visible or not
boolean
false
title
Title of the modal
string
""
onClose
Triggers when the modal is closed
function
() => {}
Multiselect
Prop Name
Description
Type
Default
component
If the value is false only children of the main component will be rendered
boolean
false
isStatic
If true the component becomes a shell and ignores all the internal logic