WEP-Vue Components
WEP-Vue components are written in Vue, a central front-end framework used for front-end development. The WEP-Vue components consist of the following:
- the Generic (Basic) components
- the Input/Form components
- the List components
- the Icons components
- the Stores
Generic components
The generic components are mostly input components, but we termed them generic because we commonly use them. The generic components include:
Button
The button components allow you to take action in your UI with a single tap or click. Typically, you can use them in places where you need the user to submit something, like a form, or maybe you want users to take other actions, such as changing the website's theme by clicking on the button.
Types
The button component has three types differentiated only by their styles. The component typed include:
- ButtonBasic
- ButtonError
- ButtonPrimary
Usage
<ButtonBasic title=”Click Me!” @click=”fn()” />
<ButtonPrimary title=”Click Me!” @click=”fn()” />
Props
title
- Type: String
InputText
This component allows you to input string values.
Usage
<InputText placeholder=”This is a text box.” />
Props
modelValue
- Type: String
- Required: False
disabled
- Type: Boolean
- Required: False
placeholder
- Type: String
- Required: False
placeholderEffect
- Type: Boolean
- Required: False
InputWithSymbol
This component lets you accept string values, but allows you to add a symbol at the start or the end of the text box like a “$” symbol. You can pass:
- position: which could be left or right.
- symbol: which is the symbol to be used in front of the input.
- error: which is the value to indicate an error in input or the error of currently not working properly.
Usage
<InputWithSymbol symbol=”$” position=”right” />
Props
modelValue
- Type: String
- Required: False
symbol
- Type: String
- Required: False
- Default: “$”
position
- Type: String
- Required: False
- Default: “left”
error
- Type: Boolean
- Required: False
errorMsg
- Type: String
- Required: False
InputSSN
The component lets you accept Social Security Number in “_--____” format and will automatically format the number.
Usage
<InputSSN />
Props
modelValue
- Type: String
- Required: False
InputFEIN
The component lets you accept Federal Employer ID Number in “-_****” format and will automatically format the number.
Usage
<InputSSN />
Props
modelValue
- Type: String
- Required: False
InputDate
The InputDate component allows you to accept dates by opening a calendar that lets you pick. It then converts the date to the ISO format. Optionally pass “min” and “max” props, which accept a string in ISO format to set a range of pickable values. The “min” and “max” props accept a string in ISO format.
Usage
<InputDate :min=”Date.now().toString()” required />
Props
modelValue
- Type: String
- Required: True
disabled
- Type: Boolean
- Required: False
placeholder
- Type: String
- Required: False
- Default: “MM/DD/YYYY”
max
- Type: String
- Required: False
min
- Type: String
- Required: False
required
- Type: Boolean
- Required: False
InputCheckbox
InputCheckbox allows users to select multiple options. You use checkboxes when you want users to choose different options or when you have various options and want users to select one, some, or all of them.
InputCheckbox accepts a color prop that lets you set the color of the fill. It accepts a boolean “filled” prop that lets you set whether you want the checkbox filled with a color or a check icon. The “title” prop sets the Id of the checkbox.
Usage
<label for="filled">Filled</label>
<InputCheckbox v-model="form.checkbox" title="filled" filled />
Props
The component accepts the following props:
modelValue
- Type: Boolean
- Required: False
Filled
- Type: Boolean
- Required: False
title
- Type: String
- Required: False
disabled
- Type: Boolean
- Required: False
color
- Type: String
- Required: False
- Default: "#1c7ed6."
error
- Type: Boolean
- Required: False
InputCheckboxWithLabel_String
Same as InputCheckBox, but it includes a label.
Usage
<InputCheckboxWithLabel label=”checkbox” />
Props
modelValue
- Type: String
- Required: False
label
- Type: String
- Required: False
required
- Type: Boolean
- Required: False
disabled
- Type: Boolean
- Required: False
InputCheckboxWithLabel
Same as InputCheckboxWithLabel, but it accepts strings as modelValue. E.g. “true” instead of booleans.
Usage
<InputCheckboxWithLabel_String label=”checkbox” />
Props
modelValue
- Type: Boolean
- Required: False
label
- Type: String
- Required: False
required
- Type: Boolean
- Required: False
InputPassword
The component lets you accept passwords from users. Passwords are masked but can be unmasked by clicking the Eye icon inside the input field.
Usage
<InputPassword maxLength=”21” placeholder=”Password” />
Props
modelValue
- Type: String
- Required: False
disabled
- Type: Boolean
- Required: False
maxLength
- Type: Number
- Required: False
placeholder
- Type: String
- Required: False
InputPhone
This component inherits and supports the same attributes from the InputText component. Placeholder is auto preset to (_) **** but can be overridden by accepting phone numbers from the users in “() **_******” format.
Usage
<InputPhone />
Props
modelValue
- Type: String
- Required: False
InputRadio
You can use the InputRadio if you have multiple options but want only one to be selected. You can also change the color of the fill by setting the “color” prop to a string. Related InputRadio components should have the same name so that only one is filled simultaneously.
Usage
<InputRadio id="math" name="subject" color="#8D6346" />
<label for="math">Math</label>
<InputRadio id="english" name="subject" color="#0B6E4F" />
<label for="english">English</label>
<InputRadio id="physics" name="subject" color="#D94745" />
<label for="physics">Physics</label>
Props
modelValue
- Type: String
- Required: False
id
- Type: String
- Required: False
name
- Type: String
- Required: False
disabled
- Type: Boolean
- Required: False
color
- Type: String
- Required: False
- Default: “#1c7ed6.”
error
- Type: Boolean
- Required: False
InputSelect
You can use the InputSelect component to collect information from the users from a given list of options.
Usage
<InputSelect
:options="[ { caption: 'one', value: 1 }, { caption: 'two', value: 2 }, { caption: 'three', value: 3 }, ]"
/>
Props
items
- Type: Array of {caption: [Number, String], value: Any }
- Required: False
modelValue
- Type: [Number, String]
- Required: False
disabled
- Type: Boolean
- Required: False
title
- Type: String
- Required: False
InputSwitch
InputSwitch can be used to toggle the state of a single setting on or off. For example, setting the theme to light or dark.
Usage
<InputSwitch color="#26b76f" />
Props
modelValue
- Type: Boolean
- Required: False
id
- Type: String
- Required: False
color
- Type: String
- Required: False
- Default: "#1c7ed6."
disabled
- Type: Boolean
- Required: False
Input/Form Components
FieldLabel
FieldLabel component can be used to add a label for a field. Optionally accepts a “required” property that can add the “(Required)” text next to the label.
Usage
<FieldLabel “Phone Number” required />
Props
label
- Type: String
- Required: True
Required
- Type: Boolean
- Required: False
FormHeader
FormHeader component lets you add a styled title for a form. It is automatically capitalized.
Usage
<FormHeader “Heading” />
Props
title
- Type: String
- Required: True
InputAddress
InputAddress component lets you obtain the user's address. Internally, it will connect to google places and autocomplete API to autocomplete the address for the user, if you have explicitly set the googleApiKey by using the createWEP function.
InputAddress only displays one InputField. You can display the rest yourself and get the rest of the address by using the emits or you can use InputAddressComplex instead which will handle it for you.
Usage
<InputAddress
@getAddressLine1=”(line1) => updateLine1(line1)”
@getAddressDetails=”(address) => updateAddress(address)”
/>
Emits
This component fires two custom emits:
- getAddressLine1 : (addressLine1: string) => void
- getAddressDetails: (address: Address) => void
Where Address = {
addressLine1: [String, Undefined],
addressLine2: [String, Undefined],
addressCity: [String, Undefined],
addressState: [String, Undefined],
addressZIP: [String, Undefined],
geoLatitude: [String, Undefined],
geoLongitude: [String, Undefined],
}
InputAddressComplex
Same as InputAddress, but it will use the Googles Autocomplete api to display and save the entire address.
Usage
<InputAddressComplex
@getAddressDetails=”(address) => updateState(address)”
/>
Emits
- getAddressDetails: (address: Address) => void
Where Address = {
addressLine1: [String, Undefined],
addressLine2: [String, Undefined],
addressCity: [String, Undefined],
addressState: [String, Undefined],
addressZIP: [String, Undefined],
geoLatitude: [String, Undefined],
geoLongitude: [String, Undefined],
}
Props
addressObject
- Type: Object
- Required: False
required
- Type: Boolean
- Required: False
InputDollarAmount
InputDollarAmount component accepts numbers, which will be automatically formatted onFocusOut to include commas. It is only visually formatted to make it easier to read numbers and it includes the “$” symbol at the start of the field. For example, "2999.9" will be formatted to “2,999.90”.
Usage
<InputDollarAmount />
Props
modelValue
- Type: Number
- Required: False
InputNumberAmount
Same as InputDollarAmount, without the “$” symbol at the start.
Usage
<InputNumberAmount />
Props
modelValue
- Type: Number
- Required: False
InputPercentageAmount
Same as InputNumberAmount, it includes a “%” symbol at the end of the field.
Usage
Props
modelValue
- Type: Number
InputPercentageNumber
This component accepts any number and includes a symbol at the start or end. It can be customized by the “position” prop, while the “symbol” prop can customize the symbol.
Usage
<InputPercentageNumber />
Props
modelValue
- Type: Number
- Required: False
symbol
- Type: String
- Required: False
- Default: “$”
position
- Type: String
- Required: False
- Default: “right”
error
- Type: Boolean
WepForm
The WepForm component is a universal component with for making forms with dynamic submit action and validation.
Usage
const form = reactive({
name: "",
});
const callApi = () => {};
<WepForm
:form=”form”
:action=”callApi”
:required=”[‘name’]”
@success="$emit('success')"
@submit="$emit('submit')"
>
<InputText v-modal=”form.name” />
</WepForm>
Emits
WepForm emits two events:
- submit - When the user presses the submit button
- success - When the action passed to WepForm finishes successfully.
Props
form
This is an object to send in the request body from the API documentation.
- Type: Object
It is a list of items defining required properties. The item can be a string specifying the name of the
required property (regardless of which level), or it can be an array of strings specifying the
property path (top-down) of the required property because sometimes there can be multiple
required properties with the same name, but with different nesting. - e.g.
- name
- employee: { type }
- employer: { type }
- Use:required="[ 'name,' ['employee,' 'type'], ['employer,' 'type'] ]."
required
- Type: [String, String[]]
submitButtonLabel
It is the label for submit button.
- Type: String
disabled
It disables the submit button.
- Type: Boolean
WorkLocation
The WorkLocation component helps to display the work location address.
Usage
<WorkLocation
locationName=”SUN ACRES”
address=”2500 SUN ACRES BLVD AUBURNDALE”
city=”Auburndale”
state=”FL”
zipCOde=”33823”
/>
Props
locationName
- Type: String
- Required: True
address
- Type: String
- Required: True
city
- Type: String
- Required: True
state
- Type: String
- Required: True
zipCode
- Type: String
- Required: True
Form components
All Form components use the WepForm component internally, emitting the same events as Wepform emits.
CompanyBenefitTemplate
The CompanyBenefitTemplate forms display the required input fields to create or update benefit templates. The form templates make it easier for employees to create new benefit deductions.
Types
The component is of two types:
- FormCompanyBenefitCreate
- FormCompanyBenefitUpdate
Usage
<FormCompanyBenefitCreate />
<FormCompanyBenefitUpdate :templateId=”0” />
Props
The FormCompanyBenefitCreate has no specific properties, but the FormCompanyBenefitUpdate has the following properties:
templateId
The ID of the template that you want to update.
- Type: String
- Required: True
forEdit
- Type: CompanyBenefit
- Required: False
Emits
This component has the same emits as Wepform.
EmployeeDeduction
These forms contain the input fields required for Benefits, Child Support, and Miscellaneous deductions from an employee's compensation.
Types
They are about six forms for creating and updating the employee's information. They include:
- FormEmployeeDedChildCreate and FormEmployeeDedChildUpdate
- FormEmployeeDedMiscCreate and FormEmployeeDedMiscUpdate
- FormEmployeeBenefitCreate and FormEmployeeBenefitUpdate
Usage
<FormEmployeeBenefitCreate />
Props
FormEmployeeDedChildCreate and FormEmployeeDedMiscCreate have the following properties:
employeeId
- Type: Number
- Required: True
FormEmployeeBenefitCreate has the following properties:
employeeId
- Type: Number
- Required: True
benefitType
- Type: Number
- Required: True
FormEmployeeDedChildUpdate and FormEmployeeDedMiscUpdate have the following properties:
employeeId
- Type: Number
- Required: True
deductionId
- Type: Number
- Required: True
forEdit
- Type: ChildSupportDeduction or MiscDeduction
- Required: False
FormEmployeeBenefitUpdate has the following properties:
employeeId
- Type: Number
- Required: True
benefitId
- Type: Number
- Required: True
forEdit
- Type: BenefitDeduction
- Required: False
FormCompanyCreate
The form has input fields required to create a company.
Usage
<FormCompanyCreate />
Props
action
- Type: Function: (data: Company) => Promise
- Required: False
Emits
Same as WepForm
FormDocument
This form component displays input fields that are required to add or sign documents.
Types
The forms are of two types that include:
- FormDocumentAdd
- FormDocumentSign
Usage
<FormDocumentAdd />
<FormDocumentSign />
emits
Same as WepForm
FormDocumentSign
FormDocumentSign emits an additional emit error with the errorMessage as a param.FormDocumentSign emits an additional emit error with the errorMessage as a param.
FormEmployee
This form component contains all the required forms for onboarding and setting up an employee.
Types
The different types of FormEmployee components include the following:
- FormEmployeeAdd
- FormEmployeeAddWithoutAccess
- FormEmployeeContract
- FormEmployeePersonal
- FormEmployeeResidentialAddress
- FormEmployeeTaxSetup
- FormEmployeeTerminate
Props
FormEmployeeAdd and FormEmployeeAddWithoutAccess have the following properties:
action
- Type: Function: (EmployeeDetail) => Promise[EmployeeDetail](https://apidocs.worklio.com/reference/post_wep-companies-companyid-employees-1)
- Required: False
data
Data to prefill the form inputs with.
- Type: EmployeeDetail
- Required: False
Emits
Same as WepForm except the “success” emit also takes in the “employeeId” param.
FormEmployeeContract has the following properties:
employeeId
- Type: Number
- Required: True
submitButtonLabel
The label in the submit button.
- Type: Text
- Required: false
- Default: “NEXT”
payAllocations
- Type: Boolean
- Required: false
Emits
Same as WepForm
FormEmployeePersonal has the following properties:
employeeId
- Type: Number
- Required: True
Emits
Same as WepForm with an additional emit “error” that takes in the “errorMessage” param.
FormEmployeeResidentialAddress has the following properties:
employeeId
- Type: Number
- Required: True
submitButtonLabel
The label in the submit button.
- Type: Text
- Required: false
- Default: “NEXT”
Emits
Same as WepForm
FormEmployeeTaxSetup has the following properties:
employeeId
- Type: Number
- Required: True
submitButtonLabel
The label in the submit button.
- Type: Text
- Required: false
- Default: “NEXT”
Emits
Same as WepForm
FormEmployeeTerminate has the following properties:
employeeId
- Type: Number
- Required: True
Emits
Same as WepForm
FormPayAllocation
This form component displays the InputFields required to create or update Create Pay Allocations.
Types
The component is of two types:
- FormPayAllocationAdd
- FormPayAllocationEdit
Usage
<FormPayAllocationAdd />
Props
FormPayAllocationAdd has the following properties:
employeeId
- Type: Number
- Required: True
FormPayAllocationEdit has the following properties:
employeeId
- Type: Number
- Required: True
payAllocationId
The id of the Pay Allocation, which you want to update.
- Type: Number
- Required: True
Emits
Same as WepForm
FormTaxSetupCreate
This form component displays the required tax input fields you need to fill, but they vary depending on the states of the Company Work Locations.
Usage
<FormTaxSetupCreate />
emits
Same as WepForm
FormWorkLocation
This form component displays the fields required to add or edit company Work Locations.
Types
The component has two types:
- FormWorkLocationAdd
- FormWorkLocationEdit
Usage
<FormWorkLocationAdd />
Props
FormWorkLocationEdit has the following properties:
worklocationId
This is the id of the work location that will be edited.
- Type: Number
- Required: True
Emits
Same as WepForm
List Components
ListEmployee
The component is a simple wrapper component for employees. It loops over the employees in the useEmployeesStore and passes each employee the “employee” slot. The employee slot must be passed to the component to display the employees.
Usage
<ListEmployees
v-slot="{ employee }"
>
<div class="container">
{{ employee.firstName }} {{ employee.lastName }}
{{ employee.middleName }}
</div>
</ListEmployees>
Emits
“error,” emitted when it fails to get the employees from the API, takes in a message as a param.
ListWorkLocation
The component is a simple wrapper component for WorkLocations. It loops over the WorkLocations in the useWorkLocationsStore and displays them, but it does not need a slot.
Usage
<ListWorkLocations @edit="editWorkLocation" @error="onError"
Emits
“edit” emits when the user presses the edit button. It takes in an “id” param. “error” emits when it fails to get the Work Locations from the API, taking in the message as a param.
Icons Components
AddIcon
IconCalendar
IconChevronDown
IconClose
IconEye
IconEyeOff
IconSearch
IconTick
Stores
For Vue, we have stores that act as a cache and are essentially used to store data. For example, when you visit a page where we will display all your company's employees, you need first to make a GET request on the backend to get a list of employees.
That data is then cached and stored in a store. So that for the current instance (i.e., as long as the user has the website open), we don't have to fetch the data again. Next time we can display the cached data when the user visits that page again.
Stores are also used to share data across components or stores if we need specific data but are separated from the view. WEP-Vue has various stores, which include:
- UseCompanyStore
- UseCreateTaxSetupStore
- UseEmployeeStore
- UseMeStore
- UseSignDocumentStore
- UseWorkLocationStore
Updated 13 days ago