0.0.22 • Published 10 months ago

x-ui-components-vue v0.0.22

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

Introduction

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:

import "x-ui-components-vue/dist/x-ui-components-vue.es.css";

Components

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 NameDescriptionTypeDefault
componentIf the value is false only children of the main component will be renderedbooleanfalse
isStaticIf true the component becomes a shell and ignores all the internal logicbooleanfalse
expandedWhether accordion is expandedbooleanfalse
titleTitle of the collapsible sectionstring""
onTitleClickTriggers when the title is clickedfunction() => {}

Accordion Button

Prop NameDescriptionTypeDefault
onClickTriggers when the title is clickedfunction() => {}

Accordion Content

Prop NameDescriptionTypeDefault
visibleWhether the content is visiblebooleanfalse

Menu

Prop NameDescriptionTypeDefault
componentIf the value is false only children of the main component will be renderedbooleanfalse
isStaticIf true, the component becomes a shell and ignores all the internal logicbooleanfalse
openWhether or not the menu is openbooleanfalse
itemsMenu items{ id: number | string, value: string }[][]
disabledItemsDisabled menu itemsnumber[] | string[][]
onCloseTriggers when the dropdown menu is closedfunction() => {}
onItemClickTriggers when a menu item is clickedfunction(id: string | number) => {}
onButtonClickTriggers when the menu button is clickedfunction() => {}

Menu Button

Prop NameDescriptionTypeDefault
onMenuButtonClickTriggers when the button is clickedfunction() => {}

Menu Dropdown

Prop NameDescriptionTypeDefault
openWhether or not the dropdown is visiblebooleanfalse

Menu Item

Prop NameDescriptionTypeDefault
itemMenu itemfuncstion{ id: number | string, value: string }
isDisabledWhether the item is disabledbooleanfalse

Modal

Prop NameDescriptionTypeDefault
componentIf the value is false only children of the main component will be renderedbooleanfalse
isStaticIf true the component becomes a shell and ignores all the internal logicbooleanfalse
isOpenWhether the modal is visible or notbooleanfalse
titleTitle of the modalstring""
onCloseTriggers when the modal is closedfunction() => {}

Multiselect

Prop NameDescriptionTypeDefault
componentIf the value is false only children of the main component will be renderedbooleanfalse
isStaticIf true the component becomes a shell and ignores all the internal logicbooleanfalse
optionsSelect options{ id: string | number, value: string }[][]
openWhether the select dropdown is visible or notbooleanfalse
disabledWhether the select is disabledbooleanfalse
valueSelected value{ id: string | number, value: string }undefined
defaultValueInitial value{ id: string | number, value: string }undefined
onChangeTriggers when the value is changedfunction(value: { id: string | number, value: string }) => {}
onInputClickTriggers when the input is clickedfunction() => {}
enableSearchWhether searching the options is enabledbooleanfalse
onSearchTriggers on each search input changefunction(value: string) => {}
clearAllWhether clear all selected options is enabledbooleanfalse
maxSelectedItemsNumber of maximum selected options allowednumberundefined

Multiselect Input

Prop NameDescriptionTypeDefault
inputClickTriggers when the input is clickedfunction() => {}
disabledWhether the input is disabledbooleanfalse
enableSearchWhether searching the options is enabledbooleanfalse
onSearchTriggers on each search input changefunction(value: string) => {}
searchValueSearch valuestring""
onClearAllTriggered when clear button is clickedfunction() => {}
clearAllWhether clear all selected options is enabledbooleanfalse

Multiselect Dropdown

Prop NameDescriptionTypeDefault
areOptionsVisibleWhether the options are visiblebooleanfalse

Multiselect Option

Prop NameDescriptionTypeDefault
disabledWhether the input is disabledbooleanfalse
selectedWhether the input is selectedbooleanfalse

Select

Prop NameDescriptionTypeDefault
componentIf the value is false only children of the main component will be renderedbooleanfalse
isStaticIf true the component becomes a shell and ignores all the internal logicbooleanfalse
optionsSelect options{ id: string | number, value: string }[][]
openWhether the select dropdown is visible or notbooleanfalse
disabledWhether the select is disabledbooleanfalse
valueSelected value{ id: string | number, value: string }undefined
defaultValueInitial value{ id: string | number, value: string }undefined
onChangeTriggers when the value is changedfunction(value: { id: string | number, value: string }) => {}
onInputClickTriggers when the input is clickedfunction() => {}

Select Input

Prop NameDescriptionTypeDefault
valueSelected value{ id: string | number, value: string }undefined
onClickTriggers when the input is clickedfunction() => {}
disabledWhether the select is disabledbooleanfalse

Select Dropdown

Prop NameDescriptionTypeDefault
visibleWhether the select dropdown is visible or notbooleanfalse

Select Option

Prop NameDescriptionTypeDefault
onClickTriggers when the item is clickedfunction() => {}
selectedWhether the option is selectedbooleanfalse
0.0.22

10 months ago

0.0.21

11 months ago

0.0.20

11 months ago

0.0.8

11 months ago

0.0.7

11 months ago

0.0.6

11 months ago

0.0.5

11 months ago

0.0.4

11 months ago

0.0.3

11 months ago

0.0.2

11 months ago

0.0.1

11 months ago