dit-vue-components v1.2.0

DIT Vue-components

​ Inside this package you find out a set of DIT customize vue components. ​

Install

​

//npm
npm i dit-vue-components --save
​
//yarn
yarn add dit-vue-components

Import

After installation, you can import the CSS file into your project using this snippet:

@import "~dit-vue-components/dist/css/app.css";

or if you want custom styles, import scss files

@import "~foundation-sites/scss/foundation.scss";
@import "~dit-vue-components/styles/variables.scss";
@import "~dit-vue-components/styles/app.scss";

Availables vars

@use 'sass:color';

// Body
$body-bg: #f9fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$font-size-items-sidebar: 0.7em;
$line-height-base: 1.6;

// Colors
$blue: #337ab7;
$dark-blue: #163575;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
$box-shadow: #dddddd;
$color-titles: #777777;
$text-color: #9A9A9A;
$light-gray: #b6b6b6;
$light-gray-30: rgba(102, 97, 91, 0.3);
$active: #68B3C8;
$navbar-border-color: #e4e4e4;
$card-border-color: #e4e4e4;
$color-card-shadow: rgba(204, 197, 185, 0.5);

$medium-gray: #cacaca;
$input-prefix-background: $white;
$input-prefix-border: 1px solid $medium-gray;;
$input-prefix-color: $light-gray;
$input-shadow: none;
$input-shadow-focus: none;
$input-line-height: 1.6;
$input-radius: 0.25rem;
$button-padding: 0.5rem 1rem;
$button-radius: 0.25rem;
$input-background-disabled: $box-shadow;

$button-background: $blue;
$button-background-hover: $dark-blue;

$text-color-menu-item: #66615B;
$font-size-icon-default: 25px;

// Modals
$modal-background: $white;
$modal-radius: 5px;
$modal-header-background: $blue;
$modal-header-color: $white;
$modal-border-top: none;
$modal-border-bottom: 1px solid $light-gray;
$modal-footer-align: right;

// Calendar
$noCalendarBorder: 1;
$bezier: cubic-bezier(0.23, 1, 0.32, 1);
$slideTime: 400ms;
$daySize: 39px;
$padding: $daySize / 16;
$dayMargin: 2px;
$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
$calendarWidth: $daysWidth;
$monthNavHeight: 34px !default;
$weekdaysHeight: 28px !default;
$timeHeight: 40px;
$calendarBackground: #ffffff !default;
$calendarBorderColor: #e6e6e6 !default;
$monthForeground: $white !default;
$arrowHoverColor: #c4c4c4 !default;
$monthBackground: $dark-blue !default;
$weekdaysBackground: $dark-blue !default;
$weekdaysForeground: $white !default;
$dayForeground: $text-color !default;
$dayHoverColor: $white;
$dayHoverBackground: color.adjust($dark-blue, $alpha: -0.3) !default;
$todayColor: #bbb !default;
$selectedDayBackground: $dark-blue !default;
$selectedDayForeground: $white !default;
$invertedBg: color.adjust(black, $alpha: -0.9);

// Loaders
$color-pie-separators: $white;
$background-table-loader: #eee;
$background-bar-loader: #eee;

Components availables

Bar Loader

Register component local

<template>
    <BarLoader :bars="10" />
</template>
<script>
import {BarLoader} from 'dit-vue-components';
export default {
    name: 'ComponentName',
    components: {
        BarLoader
    }
}
</script>
<style lang="scss">
@import "~dit-vue-components/styles/components/bar_loader.scss";
</style>

Register component global

# main.js
import {BarLoader} from 'dit-vue-components';
Vue.component('bar-loader', BarLoader);

Pie Loader

Register component local

<template>
    <PieLoader />
</template>
<script>
import {PieLoader} from 'dit-vue-components';
export default {
    name: 'ComponentName',
    components: {
        PieLoader
    }
}
</script>
<style lang="scss">
@import "~dit-vue-components/styles/components/pie_loader.scss";
</style>

Register component global

# main.js
import {PieLoader} from 'dit-vue-components';
Vue.component('pie-loader', PieLoader);

Table Loader

Register component local

<template>
    <TableLoader :rows="3" :cols="4" />
</template>
<script>
import {TableLoader} from 'dit-vue-components';
export default {
    name: 'ComponentName',
    components: {
        TableLoader
    }
}
</script>
<style lang="scss">
@import "~dit-vue-components/styles/components/table_loader.scss";
</style>

Register component global

# main.js
import {TableLoader} from 'dit-vue-components';
Vue.component('table-loader', TableLoader);

Table Pagination

Register component local

<template>
    <TablePagination :params="table" v-on:page-selected="search">
        <template v-slot:head>
            <th>Num</th>
            <th>Num</th>
        </template>
        <tr v-for="(row, index) in table.data" :key="index">
            <td>{{row}}</td>
            <td>{{row}}</td>
        </tr>
    </TablePagination>
</template>
<script>
import {TablePagination} from 'dit-vue-components';
export default {
    name: 'ComponentName',
    components: {
        TablePagination
    },
    data() {
        return {
            table // Laravel paginate response is good,
        }
    },
    methods: {
        search(page = 1) {
            // This method is executed when page is selected
        },
    },
}
</script>
<style lang="scss">
@import "~dit-vue-components/styles/components/table_pagination.scss";
</style>

Register component global

# main.js
import {TablePagination} from 'dit-vue-components';
Vue.component('table-pagination', TablePagination);

Why dit-vue-components?

The purpose of dit-vue-components is to ease front-end construction process. Besides, with this set of components DIT wanna