1.0.8 • Published 5 years ago

ls-plugins v1.0.8

Weekly downloads
10
License
UNLICENSED
Repository
-
Last release
5 years ago

LsPlugins

npm version

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

Different styles of buttons

proptyperequireddefaultoptions
btnClickFunctionfalse() => null
btnDisabledBooleanfalsefalse
btnStyleStringfalse"primary""primary", "flat", "danger"
btnTextStringfalse"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
namerequired
headerfalse
headerButtonfalse
bodyfalse
footerfalse

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

proptyperequireddefault
idStringtrue
isCheckedBooleantrue
isDisabledBooleanfalsefalse
labelOffStringfalse""
labelOnStringfalse""
onChangeFunctiontrue

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
nametyperequireddefault
buttonDisabledBooleanfalsefalse
isDialogActiveBooleantrue
onCancelFunctiontrue
onConfirmFunctiontrue
cancelButtonTextFunctionfalse"cancel"
submitButtonTextStringfalse"submit"
slots
namerequired
lstitlefalse
lsbodyfalse

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
nametyperequireddefault
showFwBooleanfalsetrue
showPwBooleanfalsetrue

Example

<template>
  <LsFiscalCalendar
    :show-fw="Boolean(true)"
    :show-pw="Boolean(true)" />
</template>

LsIcon

Svg icon

props
nametyperequireddefaultoptions
iconClickedFunctionfalse() => null
iconColorStringfalsergba(118, 118, 118, 1)note: needs to be in rgba format
iconNameStringtrue
iconSizeStringfalse"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
nametyperequireddefault
textLabelStringtrue
valueStringtrue

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
nametyperequireddefaultoptions
iconColorStringfalse"rgba(118, 118, 118, 1)"note: needs to be in rgba format
iconNameStringfalsemorevert
slots
namerequired
defaultfalse
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
nametyperequireddefault
choicesArraytrue
onFilteredFunctiontrue
onSelectedFunctiontrue
textLabelStringfalse"Search"
scoped slots
namerequired
defaultfalse

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
nametyperequireddefault
activeChoiceStringtrue
choicesArraytrue
scoped slots
namerequired
defaultfalse

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
nametyperequireddefault
percentCompletedNumberfalse100
sizeStringfalse"20px"
strokeWidthStringfalse"5px"

Example

<template>
  <LsSpinner
    size="30px"
    strokeWidth="7px" />
</template>

LsTableGroup

Creating tables that have sortable columns

props
nametyperequireddefaultoptions
tableBodyArraytrue
tableClassStringfalse"basic""basic", "sort"
tableColumnAlignArrayfalse["left"]["left", "center", "right"]
tableColumnWidthsArrayfalse["md"]["xs", "sm", "md", "lg", "xl"]
tableHeaderArraytrue
sortByColumnStringfalse"""h1", "h2", "h3", etc..
scoped slots
namerequired
headertrue
rowtrue

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
nametyperequireddefault
timesArraytrue
toggleActiveFunctiontrue

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
nametyperequireddefaultoptions
cancelButtonActionFunctionfalsefalse
cancelButtonTextStringfalse"cancel"
cancelButtonVisibleStringfalse"false"
confirmButtonActionFunctionfalsefalse
confirmButtonTextStringfalse"confirm"
confirmButtonVisibleStringfalse"false"
showIconBooleanfalsefalse
showMessageBooleanfalsefalse
toastPositionStringfalse"bottom left-full""bottom left-full", "bottom right-full", "bottom left", "bottom right", "bottom center"
toastTypeStringfalse"ls-peek""ls-peek", "ls-stay"
slots
namerequired
msgtrue
iconfalse

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

proptyperequireddefault
idStringtrue
isDisabledBooleanfalsefalse
isToggledBooleantrue
onToggleFunctiontrue
toggleLabelStringfalse""

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
nametyperequireddefaultoptions
iconClickedFunctionfalsefalse
iconColorStringfalse"rgba(118, 118, 118, 1)"note: needs to be in rgba format
iconNameStringtrue
iconRotateStringfalse"""open", "close"
iconSizeStringfalse"24"
toolTipPositionStringtrue"right", "left", "bottom", "bottom-left", "bottom-right", "top", "top-left", "top-right"
toolTipTextStringtrue
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