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