ls-plugins v1.0.8
LsPlugins
Description
Base UI components designed for Vue.js applications
Installation
NPM
npm i ls-plugins
main.js
import LsPlugins from "ls-plugins";
Vue.use(LsPlugins);
Icons
The UI components that use icons that are dependant upoun a file named svgIcons.js. Create this file somewhere in your src folder. This is the data source of your icons. It only needs a name and the svg path value of the svg icon.
export const svgIcons = new Map([]);
Example values showing name and svg path value
export const svgIcons = new Map([
["arrowdown", "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"],
["arrowup", "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"],
["close", "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"],
["home", "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"],
["menu", "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"],
["morevert", "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"]
]);
UI Components
- LsButton
- LsCard
- LsCheckbox
- LsDialog
- LsFiscalCalendar
- LsIcon
- LsInputText
- LsMenuDropdown
- LsSearchBox
- LsSelectDropdown
- LsSpinner
- LsTableGroup
- LsTimeframes
- LsToast
- LsToggle
- LsTooltip
LsButton
Different styles of buttons
prop type required default options btnClick
Function
false
() => null
btnDisabled
Boolean
false
false
btnStyle
String
false
"primary"
"primary", "flat", "danger"
btnText
String
false
"click"
Example
<template> <LsButton btn-style="primary" btn-text="primary" :btn-click="clickButton" /> <LsButton btn-style="flat" btn-text="show toast message" :btn-click="clickButtonToast" /> <LsButton btn-style="danger" btn-text="show dialog window" :btn-click="clickButtonDialog" /> </template>
<script> export default { name: "App", data() { return { showDialog: false, showToast: false }; }, methods: { clickButton(e) { console.log(e); }, clickButtonDialog(e) { this.showDialog = !this.showDialog; }, clickButtonToast(e) { this.showToast = !this.showToast; } } }; </script>
LsCard
Card canvas for tables, images, etc...
slots
name required header
false
headerButton
false
body
false
footer
false
Example
<template> <LsCard> <div slot="header"> LsCard </div> <div slot="body"> body </div> <div slot="footer"> <LsButton btn-style="primary" btn-text="primary" :btn-click="clickButton" /> </div> </LsCard> </template>
<script> export default { name: "App", methods: { clickButton(e) { console.log(e); } } }; </script>
LsCheckbox
Checkbox with or without label
prop type required default id
String
true
isChecked
Boolean
true
isDisabled
Boolean
false
false
labelOff
String
false
""
labelOn
String
false
""
onChange
Function
true
Example
<template> <LsCheckbox id="1" :is-checked="isChecked" :on-change="updateChecked" label-on="On" label-off="Off" /> </template>
<script> export default { name: "App", data() { return { isChecked: false }; }, methods: { updateChecked() { this.isChecked = !this.isChecked; } } }; </script>
LsDialog
Dialog window for user alerts or important actions
props
name type required default buttonDisabled
Boolean
false
false
isDialogActive
Boolean
true
onCancel
Function
true
onConfirm
Function
true
cancelButtonText
Function
false
"cancel"
submitButtonText
String
false
"submit"
slots
name required lstitle
false
lsbody
false
Example
<template> <LsDialog :is-dialog-active="showDialog" :on-cancel="onCancel" :on-confirm="onConfirm"> </LsDialog> </template>
<script> export default { name: "App", data() { return { showDialog: false }; }, methods: { onCancel() { this.showDialog = false; }, onConfirm() { this.showDialog = false; } } }; </script>
LsFiscalCalendar
A calendar widget that includes fiscal weeks, period weeks, and holidays for each month.
Fiscal Weeks and Period Weeks can be shown or hidden using props.
props
name type required default showFw
Boolean
false
true
showPw
Boolean
false
true
Example
<template> <LsFiscalCalendar :show-fw="Boolean(true)" :show-pw="Boolean(true)" /> </template>
LsIcon
Svg icon
props
name type required default options iconClicked
Function
false
() => null
iconColor
String
false
rgba(118, 118, 118, 1)
note: needs to be in rgba format iconName
String
true
iconSize
String
false
"24"
data
this plugin requires
svgIcons.js
Example
<template>
<LsIcon
:icon-name="iconName"
:icon-clicked="iconClicked"
icon-color="rgba(33, 150, 243, 1)" />
</template>
<script>
import { svgIcons } from "./svgIcons";
export default {
name: "App",
data() {
return {
iconName: svgIcons.get("home")
};
},
methods: {
iconClicked(e) {
console.log(e);
}
}
};
</script>
LsInputText
Input fields for text strings
props
name type required default textLabel
String
true
value
String
true
Example
<template> <LsInputText text-label="Name" :value="inputTextValue" @input="queryText" /> </template>
<script> export default { name: "App", data() { return { inputTextValue: "" }; }, methods: { queryText(e) { this.inputTextValue = e; } } }; </script>
LsMenuDropdown
Dropdown menu displaying clickable list items
props
name type required default options iconColor
String
false
"rgba(118, 118, 118, 1)"
note: needs to be in rgba format iconName
String
false
morevert
slots
name required default
false
data
this plugin requires
svgIcons.js
Example
<template>
<LsMenuDropdown :icon-name="iconNameMenu">
<div>
<div>one</div>
<div>two</div>
</div>
</LsMenuDropdown>
</template>
<script>
import { svgIcons } from "./svgIcons";
export default {
name: "App",
data() {
return {
iconNameMenu: svgIcons.get("morevert")
};
}
};
</script>
LsSearchBox
Search input field displaying active choice + list of choices
props
name type required default choices
Array
true
onFiltered
Function
true
onSelected
Function
true
textLabel
String
false
"Search"
scoped slots
name required default
false
Example
<template> <LsSearchBox :choices="choices" :on-filtered="choicesFiltered" :on-selected="choiceSelected" /> </template>
<script> export default { name: "App", data() { return { choices: [ "Brandt", "Bunny", "Donny", "Jackie", "Jeff", "Jesus", "Karl", "Maude", "Walter" ], selectedName: "" }; }, methods: { choicesFiltered(e) { this.choices = e; }, choiceSelected(e) { this.selectedName = e; } } }; </script>
LsSelectDropdown
Dropdown selector displaying active choice + list of choices
props
name type required default activeChoice
String
true
choices
Array
true
scoped slots
name required default
false
Example
<template> <LsSelectDropdown :choices="choices" :active-choice="activeChoice" /> </template>
<script> export default { name: "App", data() { return { activeChoice: "Walter", choices: [ "Brandt", "Bunny", "Donny", "Jackie", "Jeff", "Jesus", "Karl", "Maude", "Walter" ], selectedName: "" }; }, methods: { choiceSelected(e) { this.selectedName = e; } } }; </script>
LsSpinner
Full-page spinner with option to show loading percent completed
props
name type required default percentCompleted
Number
false
100
size
String
false
"20px"
strokeWidth
String
false
"5px"
Example
<template> <LsSpinner size="30px" strokeWidth="7px" /> </template>
LsTableGroup
Creating tables that have sortable columns
props
name type required default options tableBody
Array
true
tableClass
String
false
"basic"
"basic", "sort"
tableColumnAlign
Array
false
["left"]
["left", "center", "right"]
tableColumnWidths
Array
false
["md"]
["xs", "sm", "md", "lg", "xl"]
tableHeader
Array
true
sortByColumn
String
false
""
"h1", "h2", "h3", etc..
scoped slots
name required header
true
row
true
Example
<template> <LsTableGroup :table-body="tableBody" :table-header="tableHeader" :table-column-align="tableColumnAlign" :table-column-widths="tableColumnWidths" table-class="sort" sort-by-column="h1"> <template v-slot:header="slotProps"> <th> <div>{{ slotProps }}</div> </th> </template> <template v-slot:row="slotProps"> <td>{{ slotProps }} </td> </template> </LsTableGroup> </template>
<script> export default { name: "App", data() { return { tableBody: [ { id: "1", desc: "one", color: "blue", total: 5 }, { id: "2", desc: "two", color: "red", total: 6 }, { id: "3", desc: "three", color: "green", total: 7 }, { id: "4", desc: "four", color: "yellow", total: 8 }, { id: "5", desc: "five", color: "black", total: 9 } ], tableColumnAlign: ["left", "left", "center", "center"], tableColumnWidths: ["sm", "sm", "md", "md"], tableHeader: ["id", "desc", "color", "total"] }; } }; </script>
LsTimeframes
Horizontal group of clickable buttons for setting active choice
props
name type required default times
Array
true
toggleActive
Function
true
Example
<template> <LsTimeframes :times="times" :toggle-active="setActive" /> </template>
<script> export default { name: "App", data() { return { activeTime: "Jeffrey", times: ["Jeffrey", "Walter", "Donny", "Jesus"] }; }, methods: { setActive(e) { this.activeTime = e; } } }; </script>
LsToast
Toast message pop-up
props
name type required default options cancelButtonAction
Function
false
false
cancelButtonText
String
false
"cancel"
cancelButtonVisible
String
false
"false"
confirmButtonAction
Function
false
false
confirmButtonText
String
false
"confirm"
confirmButtonVisible
String
false
"false"
showIcon
Boolean
false
false
showMessage
Boolean
false
false
toastPosition
String
false
"bottom left-full"
"bottom left-full", "bottom right-full", "bottom left", "bottom right", "bottom center"
toastType
String
false
"ls-peek"
"ls-peek", "ls-stay"
slots
name required msg
true
icon
false
Example
<template> <LsToast toast-position="bottom left-full" toast-type="ls-stay" confirm-button-text="ok" confirm-button-visible="true" :confirm-button-action="toggleToast" :show-message="showToast"> <div slot="msg"> This is a toast message! </div> </LsToast> </template>
<script> export default { name: "App", data() { return { showToast: false }; }, methods: { toggleToast() { this.showToast = false; } } }; </script>
LsToggle
Toggle switch with or without label
prop type required default id
String
true
isDisabled
Boolean
false
false
isToggled
Boolean
true
onToggle
Function
true
toggleLabel
String
false
""
Example
<template> <LsToggle id="toggleId" :is-toggled="showSwitch" :on-toggle="toggleSwitch" toggle-label="LsToggle" /> </template>
<script> export default { name: "App", data() { return { showSwitch: false }; }, methods: { toggleSwitch() { this.showSwitch = !this.showSwitch; } } }; </script>
LsTooltip
Combines svg icon with tooltip
props
name type required default options iconClicked
Function
false
false
iconColor
String
false
"rgba(118, 118, 118, 1)"
note: needs to be in rgba format iconName
String
true
iconRotate
String
false
""
"open", "close"
iconSize
String
false
"24"
toolTipPosition
String
true
"right", "left", "bottom", "bottom-left", "bottom-right", "top", "top-left", "top-right"
toolTipText
String
true
data
this plugin requires
svgIcons.js
Example
<template> <LsTooltip :icon-name="iconName" :icon-clicked="iconClicked" icon-color="rgba(33, 150, 243, 1)" tool-tip-position="bottom" tool-tip-text="tool tip text" /> </template>
<script> import { svgIcons } from "./svgIcons"; export default { name: "App", data() { return { iconName: svgIcons.get("home") }; } }; </script>
License
UNLICENSED