Vue components Catalogue
Includes the table component.
Catalogue of Gobierto Vue-Components
Block Header
Displays a title with an extra clickable link-button to selectAll or selectNone
![Captura de pantalla 2020-01-23 a las 13.36.02.png 302](https://files.readme.io/d26180d-Captura_de_pantalla_2020-01-23_a_las_13.36.02.png)
Props
title: {
type: String,
default: ""
},
seeLink: {
type: Boolean,
default: false
},
labelAlt: {
type: Boolean,
default: false
}
title: The text to render
seeLink: Flag to display the link-button
labelAlt: Flag to toggle between the link-button texts
Events
selectAll: void
This callback, with no return data, just informs to the parent container if the link-button has been clicked.
How to use
<BlockHeader
:title="title"
:label-alt="isAlternative"
:see-link="isShown"
@select-all="callback"
/>
Calendar
Instanciates an air-datepicker
calendar.
![Captura de pantalla 2020-01-23 a las 13.46.34.png 373](https://files.readme.io/210fac3-Captura_de_pantalla_2020-01-23_a_las_13.46.34.png)
Props
savedStartDate: {
type: Date,
default: null
},
savedEndDate: {
type: Date,
default: null
}
savedStartDate: Load a default starting date
savedEndDate: Load a default ending date
Events
calendarChange: Object
It returns the selected dates when the user makes click on the calendar days.
{
start: Date,
end: Date
}
How to use
<Calendar
:saved-start-date="new Date()"
:saved-end-date="new Date()"
@calendar-change="callback"
/>
Checkbox
It renders a checkbox with a title and a counter, and it handles the checked status.
![Captura de pantalla 2020-01-23 a las 13.54.47.png 130](https://files.readme.io/a8f7df2-Captura_de_pantalla_2020-01-23_a_las_13.54.47.png)
Props
title: {
type: String,
default: ""
},
id: {
type: Number,
default: 0
},
checked: {
type: Boolean,
default: false
},
counter: {
type: Number,
default: 0
}
title: The text to render
id: An identifier for the checkbox, to toggle status on the label
checked: Flag to mark/unmark the checkbox
counter: Adds a number behind the title
Events
checkboxChange: Object
It returns an object with an identificator (who is the element) and the current checkbox status
{
id: Number,
value: Boolean
}
How to use
<Checkbox
:id="number"
:title="title"
:checked="isChecked"
:counter="number"
@checkbox-change="callback"
/>
Horizontal Carousel
Vue version of the horizontal carousel. It sets in a row a bunch of images, showing navigation arrows to back and forth between the images.
![2020-01-23 14.21.40.gif 986](https://files.readme.io/e96a46b-2020-01-23_14.21.40.gif)
default style
![Screenshot_2021-03-01 Inversions.png 980](https://files.readme.io/7bbada8-Screenshot_2021-03-01_Inversions.png)
thumbnails mode
Props
visibleItems: {
type: Number,
default: 3
},
thumbnails: {
type: Boolean,
default: false
}
visibleItems: The amount of items to show in the display
thumbnails: Highlight one picture and display the rest of images beneath it as thumbnails
Events
None
How to use
<HorizontalCarousel :visible-items="visibleItems" :thumbnails="true">
<img src="" />
<img src="" />
<img src="" />
</HorizontalCarousel>
Loading
Implements a spinner.
![2020-01-23 14.41.28.gif 170](https://files.readme.io/d6d2c13-2020-01-23_14.41.28.gif)
Props
message: {
type: String,
default: ""
}
message: The text to display
Events
None
How to use
<Loading
:message="message"
/>
Range Bars
It displays a range selector, outputting bars
![Captura de pantalla 2020-01-23 a las 16.37.15.png 338](https://files.readme.io/6bc8001-Captura_de_pantalla_2020-01-23_a_las_16.37.15.png)
Props
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
total-items: {
type: Number,
default: 1
},
savedMin: {
type: Number,
default: null
},
savedMax: {
type: Number,
default: null
},
histogram: {
type: Array,
default: () => []
}
min: minimun value of the whole range
max: maximum value of the whole range
total-items: the total items inside the range
savedMin: sets a selected minimun value
savedMax: sets a selected maximun value
histogram: Array of objects to build the bars. It requires a id, a count (number of items for that group), a start and end value (bar range limit)
Events
rangeChange: Object
It displays a range selector, grouping values into a user-defined number of bars. Besides, it includes a slider to pick the desirable range.
{
min: Number,
max: Number
}
How to use
<RangeBars
:range-bars=""
:min="number"
:max="number"
:saved-min="storedNumber"
:saved-max="storedNumber"
:total="numberOfBars"
@range-change="callback"
/>
Read More
Crops large texts as of certain number of chars, appending a text-buttons to toggle it.
![2020-01-23 16.50.36.gif 1003](https://files.readme.io/bb09fe9-2020-01-23_16.50.36.gif)
Props
seeMore: {
type: String,
default: I18n.t("gobierto_common.vue_components.read_more.more")
},
seeLess: {
type: String,
default: I18n.t("gobierto_common.vue_components.read_more.less")
},
roundChars: {
type: Number,
default: 150
}
Note: the I18n default values contain: See more and See less for english language
seeMore: The text to display when the text is cropped
seeLess: The text to display when the text is full-shown
roundChars: Limit to displayed chars on cropped mode.
Events
None
How to use
<ReadMore :round-chars="300">
Very long text. Very long text. Very long text. Very long text.
</ReadMore>
Dropdown
Wraps elements into an sliding dropdown. Toggleable on click.
![2020-03-16 12.44.42.gif 1008](https://files.readme.io/36d6ec7-2020-03-16_12.44.42.gif)
Props
None
Events
is-content-visible: Bool
Returns wheather the content is visible or not
How to use
<Dropdown @is-content-visible="callback">
<template v-slot:trigger>
Text or HTML (always visible)
</template>
Text or HTML. My hideable content
</Dropdown>
Pagination
Creates pagination composed of a next button and a previous button, and a button to switch between each page.
![pagination.gif 1498](https://files.readme.io/66170db-pagination.gif)
Props
data: {
type: Array,
default: () => []
},
itemsPerPage: {
type: Number,
default: 1
},
containerPagination: {
type: String,
default: ''
}
data: Your array with the data.
itemsPerPage: The number of items to be shown.
containerPagination: This prop is the container where the paging is included. It's necessary for when the user clicks on the buttons, the scroll goes to the top of the container. Pass the HTML TAG element and the class or id. Example with css class: 'div.gobierto-data-header'. Example with ID: 'div#gobierto-dashboard-container'
Events
@showData="callback"
This callback returns the data to be shown.
How to use
<Pagination
:data="items"
:items-per-page="10"
:container-pagination="'your-html-tag-elememnt.your-css-class-or-your-id'"
@showData="callback"
/>
Skeleton Spinner
Show a loader that replaces the content while the data is loaded.
![skeleton_spinner.gif 1677](https://files.readme.io/429bac4-skeleton_spinner.gif)
Props
props: {
heightSquare: {
default: '1rem',
type: String,
},
squaresRows: {
default: '1',
type: String,
},
squares: {
default: '1',
type: String,
},
lines: {
default: '0',
type: String,
}
},
heightSquare: Determines the height of the squares. Theefault is 1rem.
squares: The number of squares by row. The default is one..
squaresRows: The number of rows of squares you want to show. The default is one.
lines: The number of lines you want to show. The default is one.
Events
None
How to use
<SkeletonSpinner
height-square="200px"
squares-rows="3"
squares="1"
lines="5"
/>
Text editable
Converts any element in text editable clicking on it and set it on enter key.
![2020-12-02 11.45.53.gif 679](https://files.readme.io/a2ac20d-2020-12-02_11.45.53.gif)
Props
props: {
tag: {
type: String,
default: "p"
},
icon: {
type: Boolean,
default: false
}
},
tag: HTML tag to make contenteditable
icon: Display an edit-icon
Events
@input="callback"
This callback returns the innerText of the tag element
How to use
<TextEditable
tag="h1"
:icon="true"
@input="handleInputTitle"
>
{{ title }}
</TextEditable>
Autocomplete
Implements a searching block with autocomplete results while typing. Values are provided from a plain array. You can use the arrow keys to choose results and enter key to select one.
![2020-12-02 15.50.06.gif 478](https://files.readme.io/233ad03-2020-12-02_15.50.06.gif)
Props
props: {
label: {
type: String,
default: null
},
placeholder: {
type: String,
default: ""
},
name: {
type: String,
default: "autocomplete"
},
items: {
type: Array,
default: () => []
},
defaultValue: {
type: String,
default: null
}
},
label: Add a text to the input box. If none, label is hidden.
placeholder: Add a placeholder to the input box.
name: Input box name. Useful to get the values after form submit.
items: Lookup array.
defaultValue: Preload a value.
Events
@input="callback"
This callback returns the current search string the user is typing.
@change="callback"
This callback returns the selected result.
How to use
Note the result markup could be edited, using the v-slot
directive to get each result scoped.
// Simplest use
<Autocomplete :items="plainArray" />
// Edit the result markup
<Autocomplete
placeholder="Type any country name"
:items="plainArray"
>
<template v-slot:default="{ result }">
<strong>{{ result }}</strong>
</template>
</Autocomplete>
// Edit only the label
<Autocomplete
:label="selectLabel"
:placeholder="placeholderLabel"
:items="widgetsData"
>
<template #label>
<label>
Different label markup
</label>
</template>
</Autocomplete>
Table
Create a table with pagination and a selector to customize the columns to show on the table.
![Screen Recording 2021-02-19 at 17.02.27.2021-02-19 17_34_31.gif 1059](https://files.readme.io/8913091-Screen_Recording_2021-02-19_at_17.02.27.2021-02-19_17_34_31.gif)
Props
data: {
type: Array,
default: () => []
},
columns: {
type: Array,
default: () => []
},
sortColumn: {
type: String,
default: null
},
sortDirection: {
type: String,
default: null
},
showColumns: {
type: Array,
default: () => []
},
showColumnSelector: {
type: Boolean,
default: true
},
showPagination: {
type: Boolean,
default: true
},
href: {
type: String,
default: 'href'
}
data: Data for the table.
columns: It's an array of objects with the configuration of the table
sortColumn: To sort the table by a specific column
sortDirection: asc or desc
showColumns: To customize the columns you want to display by default.
showColumnSelector: Enables the selector to select which columns you want to show or hide in the table.
showPagination: Enables pagination
href: To provide a link to those tables that are clickable
Slots
The components have two slots, feel free to use them.
-
Pagination: Replace the default paginator component
<template v-slot:pagination="{ paginator, data }"></template>
paginator(newItems) is a function where you will update the items you're displaying
data is the current array -
Columns: use this slot is unlikely, but you may want to modify the column selector
<template v-slot:columns></template>
Events
When a table contains links we will have to create the route, for it, we have this event that receives the item that has been clicked.
@on-href-click="goesToTableItem"
goesToTableItem(item) {
const { id: routingId } = item
this.$router.push({ name: 'contracts_show', params: { id: routingId } })
}
Config
We need to provide a configuration file for the table. We will pass it with the prop columns
const exampleColumns = [
{
field: 'final_amount_no_taxes', // Pass the key of the data
name: I18n.t('locale'),
cssClass: 'right nowrap bold', // Add CSS class to row
/*Our data can be of various types.
If it's a date we will use the type:'date'.
If it's an amount we will use the type:'money'.
It may be a string that we want to truncate. We'll use the type: truncate*/
type: 'money'
}
]
How to use
<Table
:data="items"
:columns="contractsColumns"
:sot-column="'final_amount_no_taxes'"
:show-columns="showColumns"
@on-href-click="goesToTableItem"
/>
Filters
Create a common wrapper for the custom fields, who gathers all the required handlers to deal with each type of custom field. Current supports vocabulary_options, numeric and date.
![Screenshot 2021-09-03 at 15-39-55 Madrid participa de Gobierto Madrid · Gobierto.png 340](https://files.readme.io/d1be50a-Screenshot_2021-09-03_at_15-39-55_Madrid_participa_de_Gobierto_Madrid__Gobierto.png)
Props
data: {
type: Array,
default: () => []
},
fields: {
type: Array,
default: () => []
},
metadata: {
type: Array,
default: () => []
},
stats: {
type: Object,
default: () => {}
},
noEmptyOptions: {
type: Boolean,
default: false
}
data: All the items you wanna filter. Usually comes from /api/v1/METHOD
fields: Array of the filters you wanna display. Usually an array of objects like { id: KEY }
. Take a look at Inversiones configuration availableFilters property
metadata: Object fetched by the property data
of the response of the /api/v1/METHOD/meta
stats: Optional. Object fetched by the property meta
of the response of the /api/v1/METHOD/meta?stats=true
Events
@update="callback"
Every single time any filter is clicked, the data items will be filtered. So, this event emits which are the current items based on the selected filters
@clear="callback"
When the clear filters button is clicked, a simple event is emitted, in order to do something in the parent
How to use
<Filters
:data="items"
:metadata="metadata"
:fields="fields"
:stats="stats"
@update="callback"
@clear="callback"
/>
Updated about 3 years ago