vue-uix

A vue component library based on the JUI components available in vuejs.

Installation

NPM

npm install --save vue-uix

Browser (Legacy)

If you are using an existing JUI style, Just download dist/vue-uix.base.js and include it in your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="dist/vue-uix.base.js"></script>
<link rel="stylesheet" href="jui-ui.classic.css" />
<!--<link rel="stylesheet" href="jui-ui.dark.css" />-->

Browser

Download the dist/vue-uix.classic.js and dist/vue-uix.css and include it in your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="dist/vue-uix.classic.js"></script>
<!--<script src="dist/vue-uix.dark.js"></script>-->
<link rel="stylesheet" href="dist/vue-uix.css" />

ES Modules

Plug-In

import Vue from 'vue'
import VueUix from 'vue-uix'

Vue.use(VueUix, { theme: 'classic' })

Components (Legacy)

If you are using an existing JUI style, You must load a non-styled view component.

import Vue from 'vue'
import UixComboBox from 'vue-uix/src/components/combobox'

Vue.component(UixComboBox.name, UixComboBox);

Components

import Vue from 'vue'
import UixComboBox from 'vue-uix/src/components/combobox.classic'
// import UixComboBox from 'vue-uix/src/components/combobox.dark'

Vue.component(UixComboBox.name, UixComboBox);

Implemented components

• Accordion
• Auto Complete
• Button
• Date Picker
• Calendar
• Combo Box
• Color Picker
• Dropdown
• Modal
• Notification
• Switch
• Tab
• Tree
• Time Picker

API

Accordion

Props

Name	Type	Required	Watch	Default	Description
type	String	false	false	``	Additional styles of accordion (simple)
items	Array	true	false	undefined	A list of accordion headers
index	Number	false	false	null	Sets the accordion header to be activated
autoFold	Boolean	false	false	false	Hide the content area when you click on the active accordion header again
width	Number, String	false	true	100%	The width of the component

Events

Name	Arguments	Description
open	index	Events that occur when an accordion content is opened
fold	index	Events that occur when an accordion content is closed

Auto Complete

Props

Name	Type	Required	Watch	Default	Description
icon	String	false	false	``	When you want to use the icon, you can set the name of the icon provided by JUI (However, you do not need to use the prefix 'icon-')
width	Number	false	true	150	The width of the component
size	String	false	false	small	The size styles of the component (mini, small, large)
template	String	false	false	skip...
items	Array	true	true	undefined	Auto-complete word list
value	String	false	false	``	Props to set the selected word

Events

Name	Arguments	Description
change	text, event	Events that occur when you select a word in the Auto-complete list

Button

Props

Name	Type	Required	Watch	Default	Description
type	String	false	false	radio	It is a button selection option. Radio is single and Check is multi-selectable. (radio, check)
index	Number	false	true	0	Sets the button to be activated
value	String, Array	false	true	``	Selected value. Radio is string type, Check is array type
size	String	false	false	small	The size styles of the component (mini, small, large)
items	Array	true	true	undefined	Button list

Events

Name	Arguments	Description
change	item, event	Events that occur when you click a button

Color Picker

Props

Name	Type	Required	Watch	Default	Description
color	String, Object	true	false	#FFF	Default color code, which can be set to a hex string or an RGB object

Events

Name	Arguments	Description
change	hex, rgb	Events that occur when you select a color

Combo Box

Props

Name	Type	Required	Watch	Default	Description
index	Number	false	true	0	Sets the item to be activated
value	String	false	true	``	Selected value
width	Number	false	false	100	The width of the component
height	Number	false	false	100	The width of the component
size	String	false	false	small	The size styles of the component (mini, small, large)
keydown	Boolean	false	false	false	Option to select items with up/down arrow keys
flex	Boolean	false	false	true	Option that match the width of the drop-down menu to the width of the combo box
position	String	false	false	bottom	Option to set where the drop-down menu is shown (top, bottom)
title	String	false	false	Selected...	When there are no items, the default message shown in the combo box
items	Array	false	false	null	Item list of combo box
active	String	false	true	false	Options showing a drop-down menu

Events

Name	Arguments	Description
change	item, event	Events that occur when you select a item

Date Picker

Props

Name	Type	Required	Watch	Default	Description
titleFormat	String	false	false	yyyy.MM	Set the current year/month title format
dateFormat	String	false	false	yyyy-MM-dd	Set the format for selected date
date	String	false	true	null	Set the
template	String	false	false	<td><!= date !></td>	A template for markup that prints out the date

Events

Name	Arguments	Description
change	dateStr, event	Events that occur when you select a date
prev	event	Events that occur when you change to the previous month
next	event	Events that occur when you change to the next month

Calendar (extends Date Picker)

Props

Name	Type	Required	Watch	Default	Description
width	String, Number	false	false	100%	Set calendar width
height	String, Number	false	false	100%	Set calendar height

Dropdown

Props

Name	Type	Required	Watch	Default	Description
index	Number	false	false	0	Sets the item to be activated
width	Number	false	false	100	The width of the component
height	Number	false	false	100	The height of the component
left	Number	false	false	0	The left position value of the component
top	Number	false	false	0	The top position value of the component
size	String	false	false	small	The size styles of the component (mini, small, large)
keydown	Boolean	false	false	false	Option to select items with up/down arrow keys
items	String	false	true	undefined	Item list of drop-down menu
active	Boolean	false	true	false	Options showing a drop-down menu
anchor	Boolean	false	false	false	Set options to display anchor style

Events

Name	Arguments	Description
change	item, event	Events that occur when you select a item

Modal

Props

Name	Type	Required	Watch	Default	Description
root	String	false	true	null	Selector for the modal background element
target	String	false	true	null	Selector of targeted element
active	Boolean	false	true	false	Options showing a modal
color	String	false	false	black	Background color of modal
opacity	Number	false	false	0.4	Background opacity of modal
zIndex	Number	false	false	0	Z-index value of modal
autoHide	Boolean	false	false	false	Option to automatically hide modal on background clicking

Notification

Props

Name	Type	Required	Watch	Default	Description
root	String	false	true	null	Selector for the modal background element
position	String	false	false	bottom	Option to set where the drop-down menu is shown (top, bottom)
items	Array	false	true	undefined	Item list of drop-down menu
template	String	false	false	<td><!= date !></td>	A template for markup that prints out the date
icon	String	false	false	``	When you want to use the icon, you can set the name of the icon provided by JUI (However, you do not need to use the prefix 'icon-')
delay	Number	false	false	3000	After the notification is shown, delay time
showDuration	Number	false	false	500	Duration of effect in which notifications are shown
hideDuration	Number	false	false	500	Duration of effect in which notifications are hidden
padding	Number	false	false	12	Padding between notification and notification
distance	Number	false	false	5	Distance between notification and notification

Events

Name	Arguments	Description
change	item, event	Events that occur when you select a item
show	index	Events that occur when an notification is shown
hide	index	Events that occur when an notification is hidden

Switch

Props

Name	Type	Required	Watch	Default	Description
inside	Boolean	false	false	true	Sets the inside style option for the switch
size	String	false	false	small	The size styles of the component (mini, small, large)
checked	Boolean	false	false	false	Sets the check state of the switch

Events

Name	Arguments	Description
change	checked, event	Events that occur when you change a switch

Tab

Props

Name	Type	Required	Watch	Default	Description
type	String	false	false	tab	Set tab style type (tab, pill)
position	String	false	false	top	Sets the position of the tab (top, bottom)
items	Array	false	true	undefined	Item list of tab
index	Number	false	true	0	Sets the item to be activated
disable	Array	false	true	null	Sets the index of the tab to be disabled

Events

Name	Arguments	Description
change	checked, event	Events that occur when you change a activated tab

Tree

Props

Name	Type	Required	Watch	Default	Description
type	String	false	false	line	Set tree style type (line, line-file, arrow, arow-file)
rootName	String	false	false	null	Sets the name of the root node
rootHide	Boolean	false	false	false	Option to hide root node by default
rootFold	Boolean	false	false	false	Option to hide fold node by default
template	String	false	false	<li><div><i></i> <!= text !></div><ul></ul></li>	A template for markup that prints out the node
items	Array	false	true	undefined	Node list of tree
item	Object	false	true	null	Sets the node to be activated

Events

Name	Arguments	Description
change	item, event	Events that occur when you select a node
open	item, event	Events that occur when the child nodes of the selected node are opened
fold	item, event	Events that occur when the child nodes of the selected node are folded

Time Picker

Props

Name	Type	Required	Watch	Default	Description
size	String	false	false	small	The size styles of the component (mini, small, large)
useDate	Boolean	false	false	false	Use the year/month/day button
useTime	Boolean	false	false	false	Use the hours/minutes button
minYear	Number	false	false	auto	Minimum year
maxYear	Number	false	false	auto	Maximum year
year	Number	false	false	auto	Current year
month	Number	false	false	auto	Current month
date	Number	false	false	auto	Current date
hours	Number	false	false	auto	Current hours
minutes	Number	false	false	auto	Current minutes
useCalendar	Boolean	false	false	false	Use the calendar component
calendarTitleFormat	String	false	false	yyyy.MM	Date format of calendar title
calendarFormat	String	false	false	yyyy-MM-dd	Date format of calendar selected value

Events

Name	Arguments	Description
change	data	Events that occur when you change a value