toggle-components-library 1.10.1

package/src/components/tables/TogglePagination.vue

@@ -0,0 +1,114 @@
+<template>
+
+    <div class="toggle-pagination">
+
+        <ul>
+
+            <li>
+                <button
+                    :disabled="pageNumber === 1"
+                    @click="pageNumber--"
+                    class="toggle-pagination-prev">
+                    Previous
+                </button>
+            </li>
+            <li v-for="(i, index) in pagiPages" :key="index">
+                <button
+                    :disabled="pageNumber == i"
+                    @click="pageNumber = i" >
+                    {{i}}
+                </button>
+                <span v-if="(i != pagiPages[pagiPages.indexOf(i)+1]-1) && (i != pagiPages[pagiPages.length-1])">...</span>
+            </li>
+            <li>
+                <button
+                    :disabled="value >= pageCount"
+                    @click="pageNumber++"
+                    class="toggle-pagination-next">
+                    Next
+                </button>
+            </li>
+        </ul>
+    </div>
+
+</template>
+
+<script>
+
+    
+export default {
+
+        mixins:[],
+        props: [
+            'total',
+            'per_page',
+            'value'
+        ],
+        
+        data : function(){       
+            return {
+                maxPaginationPages: 6, // number of pagination numbers on a page
+            };
+        },
+        computed: {
+
+            pageNumber:
+            {
+                get:function(){
+                    return this.value;
+                },
+                set:function(newVal){
+                    this.$emit('input', newVal)
+                }
+            },
+
+            /* Page Count
+             * Calculate how many pages the orders object have.
+             * @return number of pages
+            */
+            pageCount(){
+                let l = this.total,
+                    s = this.per_page;
+                return Math.ceil(l/s) ?  Math.ceil(l/s) : 0;
+            },
+
+             /* returns the numbers shown in the validation
+            */
+
+            pagiPages(){
+
+              var startarray = [];
+              var endarray = [];
+
+              // show all pages
+              if(this.pageCount <= this.maxPaginationPages){
+                while(startarray.length < this.maxPaginationPages && startarray.length < this.pageCount)
+                  startarray.push(startarray.length + 1);
+              }
+
+              else{ // if there are too many pages, we need to remove some options
+                // create the first pages
+                while(startarray.length < (this.maxPaginationPages/2)-1)
+                  startarray.push(startarray.length + 1);
+
+                // create the last pages
+                while((startarray.length+endarray.length)+1 <= this.maxPaginationPages)
+                  endarray.push(this.pageCount-this.maxPaginationPages+1+(startarray.length+endarray.length));
+
+                // add the current page to the array, if it doesn't exist
+                if(!(startarray.includes(this.pageNumber) || endarray.includes(this.pageNumber) ))
+                  startarray.push(this.pageNumber);
+
+              }
+
+              // merge the two arrays into one
+              return startarray.concat(endarray);
+
+
+            },
+            
+        
+        }
+        
+    }
+</script>

package/src/components/tables/ToggleTable.vue

@@ -0,0 +1,178 @@
+<template>
+
+    <div>
+
+    <table class="toggle-table">
+        <thead :class="{'toggle-table-any-search-active': searchActive}">
+            <tr class="toggle-tablee-tr">
+              <th 
+                  scope="col" 
+                  :class="['toggle-table-th', {'toggle-table-search-active': tableSearchActive(field), 'toggle-table-searchable':field.filterable}]"  
+                  v-for="(field, index) in headers" 
+                  :key="index"
+                  :style="'width:'+field.width"
+                  @click="activateSearch(field)"
+              >
+                  <div class="toggle-table-th-inner">
+                    <span class="toggle-table-th-title">{{field.label}}</span>
+                    <span class="toggle-table-close-search" v-on:click.stop @click="closeSearch(field)"></span>
+                    <ToggleInputText type="text" :ref="field.key+'-input'" v-model="searchModels[field.key]" @input="searchChange(field)" 
+                    v-if="field.type == 'text' && (searchModels[field.key] || editingInput == field.key)" />
+                    <ToggleInputSelect style="margin-top:2px;" size="small" v-if="field.type == 'select'  && (searchModels[field.key] || editingInput == field.key)"  :options="field.select_options" v-model="searchModels[field.key]" @input="val=>searchChange(val, field)"/>
+
+                    <ToggleDateRangePicker v-if="field.type == 'date' && (searchModels[field.key].start || searchModels[field.key].end || editingInput == field.key)" name="date" v-model="searchModels[field.key]"  @input="val=>searchChange(val, field)" />
+                  </div>
+              </th>
+              
+            </tr>
+        </thead>
+        <tbody v-if="!$slots.default || !$slots.default.length">
+            <ToggleTableRow v-for="(item, index) in items" :key="index" >
+                <ToggleTableColumn v-for="(column, column_index) in item" :key="column_index">{{column}}</ToggleTableColumn>
+            </ToggleTableRow>
+        </tbody>
+        <tbody v-if="$slots.default && $slots.default.length">
+            <slot></slot>
+        </tbody>
+    </table>
+
+    <TogglePagination v-if="total && per_page" :total="total" :per_page="per_page" v-model="pagenumber"></TogglePagination>
+
+    </div>
+</template>
+<script>
+
+import { mixins } from '../mixins/mixins';
+
+import ToggleDateRangePicker from '../forms/ToggleDateRangePicker.vue';
+import ToggleInputText from '../forms/ToggleInputText.vue';
+import ToggleInputSelect from '../forms/ToggleInputSelect.vue';
+import ToggleTableRow from '../tables/ToggleTableRow.vue';
+import ToggleTableColumn from '../tables/ToggleTableColumn.vue';
+import TogglePagination from '../tables/TogglePagination.vue';
+
+export default {
+        mixins:[mixins],
+        components:{ToggleDateRangePicker, ToggleInputText, ToggleInputSelect, ToggleTableColumn, ToggleTableRow, TogglePagination},
+        props: {
+            items: {
+                type: [Array]
+            },
+            fields: {
+                type: [Array]
+            },
+            total:{
+                type: [Number] 
+            },
+            per_page:{
+                type: [Number] 
+            },
+            page:{
+                type: [Number],
+                default:1
+            }
+        },  
+        data : function(){
+            return {
+                editingInput:false,
+                searchModels:{}
+            };
+        },
+        computed: {
+
+            fieldsWithSearch()
+            {
+                return this.fields.map(field => Object.assign(field, {search_value: this.searchModels[field.key]}));
+            },
+
+            pagenumber:
+            {
+                get:function(){
+                    return this.page;
+                },
+                set:function(newVal){
+                    this.$emit('page_change', newVal)
+                }
+            },
+
+            headers() {
+                if(!this.fields){
+                    return Object.keys(this.items[0]);                 
+                }
+                return this.fields;
+            },
+
+            searchActive() {
+                if(this.editingInput) {
+                    return true;
+                }
+                for (let key in this.activeSearch) {
+                    if(this.activeSearch[key])
+                        return true;
+                }
+                return false;
+            },
+
+            
+        },
+        created : function(){
+
+            if(this.fields){
+                for (let i = 0; i < this.fields.length; i++) {
+                    let value = this.fields[i].type == 'date' ? { start: false, end: false} : '';
+                    let field_name = this.fields[i].key;
+                    this.$set( this.searchModels, field_name, value )
+                }
+            }
+           
+        },
+
+        beforeDestroy: function () {
+        },
+        watch:{
+           
+        },
+        mounted : function ()
+        {
+
+        },
+        
+        methods:{
+
+            tableSearchActive(field)
+            {
+                if(field.type == 'date'){
+                    return (this.searchModels[field.key].start || this.searchModels[field.key].end || this.editingInput == field.key);
+                }
+                return (this.searchModels[field.key] || this.editingInput == field.key);
+
+            },
+
+            closeSearch(field){
+                this.editingInput = false;
+                this.searchModels[field.key] = field.type == 'date' ? { start: false, end: false} : '' ;
+                this.searchChange();
+            },
+
+            searchChange(){
+                this.$emit('search', this.fieldsWithSearch);
+            },
+
+            /* activateSearch
+             * When a user clicks a searchable column name, show it as active, and focus the child input field (unless it's already active)
+            */
+            activateSearch(field){
+                if(!field.filterable) return;
+                if(field.type === 'date'){
+                    this.datePickerOpen = true;
+                }
+                this.editingInput = field.key;
+                //this.$nextTick(() => this.$refs[this.editingInput + '-input'].focus())
+            },
+
+            
+
+        }
+    }
+
+</script>

package/src/components/tables/ToggleTableColumn.vue

@@ -0,0 +1,3 @@
+<template>
+    <td class="toggle-tablee-td"><slot></slot></td>
+</template>

package/src/components/tables/ToggleTableRow.vue

@@ -0,0 +1,5 @@
+<template>
+    <tr class="toggle-tablee-tr" @click="$emit('click')" >
+        <slot></slot>
+    </tr>
+</template>

package/src/components/text/ToggleHeaderTextLarge.vue

@@ -0,0 +1,3 @@
+<template>
+    <h3 class="toggle-h2-header"><slot></slot></h3>
+</template>

package/src/components/text/ToggleHelperTextSmall.vue

@@ -0,0 +1,3 @@
+<template>
+    <p class="toggle-helper-text-small"><slot></slot></p>
+</template>

package/src/components/text/ToggleInfoText.vue

@@ -0,0 +1,3 @@
+<template>
+    <p class="toggle-info-text"><slot></slot></p>
+</template>

package/src/components/text/ToggleTextClipboardCopy.vue

@@ -0,0 +1,51 @@
+<template>
+   <div class="toggle-copy-text">
+        <p @click="copyLink($refs.copyLink)"><label>{{copy}}</label><br v-if="copy"/>
+          <strong>
+            <a :style="{fontSize}" ref="copyLink">{{ link }}</a>
+          </strong>
+          <span class="product-link-icon"></span>
+        </p>
+   </div>
+</template>
+
+<script>
+export default {
+  name: 'ToggleTextClipboardCopy',
+  props: {
+    fontSize: {
+      type:String,
+      default:'15px'
+    },
+    /**
+     * For the text you would like to display
+     */
+    copy: {
+      type: String,
+    },
+    /**
+     * The string used in link
+     */
+    link: {
+      type: String,
+      required: true
+    },
+    /**
+     * The url for the link
+     */
+    url: {
+      type: String,
+      required: true
+    },
+  },
+     methods:{
+      copyLink(el) {
+                let range = document.createRange();
+                range.selectNode(el);
+                window.getSelection().removeAllRanges();
+                window.getSelection().addRange(range);
+                document.execCommand("copy");
+      }
+    }
+};
+</script>

package/src/index.js

@@ -0,0 +1,105 @@
+import Vue from "vue";
+
+import ToggleInputText from "./components/forms/ToggleInputText.vue";
+import ToggleInputWebsite from "./components/forms/ToggleInputWebsite.vue";
+import ToggleDatePicker from "./components/forms/ToggleDatePicker.vue";
+import ToggleDateRangePicker from "./components/forms/ToggleDateRangePicker.vue";
+import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
+import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
+import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
+import ToggleInputRadioButtons from "./components/forms/ToggleInputRadioButtons.vue";
+import ToggleInputTextArea from "./components/forms/ToggleInputTextArea.vue";
+import ToggleInputCheckboxContainer from "./components/forms/ToggleInputCheckboxContainer.vue";
+import ToggleInputCrudField from '@/components/forms/ToggleInputCrudField';
+import ToggleInputGrid from '@/components/forms/ToggleInputGrid';
+import ToggleInputCheckbox from "./components/forms/ToggleInputCheckbox.vue";
+import ToggleInputCheckboxInline from "./components/forms/ToggleInputCheckboxInline.vue";
+import ToggleInputImage from "./components/forms/ToggleInputImage.vue";
+import ToggleInputFile from "./components/forms/ToggleInputFile.vue";
+import ToggleInputGroup from "./components/forms/ToggleInputGroup.vue";
+import ToggleInputNumber from "./components/forms/ToggleInputNumber.vue";
+import ToggleColourPicker from "./components/forms/ToggleColourPicker.vue";
+import ToggleModal from "./components/modals/ToggleModal.vue";
+
+import ToggleInputSearch from "./components/forms/ToggleInputSearch.vue";
+import ToggleInputRadioButtonGroup from "./components/forms/ToggleInputRadioButtonGroup.vue";
+import ToggleButton from "./components/buttons/ToggleButton.vue";
+import ToggleFillLoader from "./components/loaders/ToggleFillLoader.vue";
+
+
+import ToggleTable from './components/tables/ToggleTable.vue';
+import ToggleTableRow from './components/tables/ToggleTableRow.vue';
+import ToggleTableColumn from './components/tables/ToggleTableColumn.vue';
+import ToggleBadge from './components/badges/ToggleBadge.vue';
+
+import ToggleBreadCrumb from './components/breadcrumb/ToggleBreadCrumb.vue';
+import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
+import ToggleSideNav from './components/navs/sidenav/ToggleSideNav.vue';
+import ToggleSideSubNav from './components/navs/sidenav/ToggleSideSubNav.vue';
+
+import ToggleTextClipboardCopy from './components/text/ToggleTextClipboardCopy';
+import ToggleLineBreak from './components/elements/ToggleLineBreak';
+import ToggleNotifications from './components/notifications/ToggleNotifications';
+
+import ToggleFeatureButton from './components/buttons/ToggleFeatureButton';
+
+import ToggleHeaderTextLarge from "./components/text/ToggleHeaderTextLarge.vue";
+import ToggleHelperTextSmall from "./components/text/ToggleHelperTextSmall.vue";
+import ToggleInfoText from "./components/text/ToggleInfoText.vue";
+
+import './sass/main.scss';
+
+const Components = {
+    ToggleBreadCrumb,
+    ToggleTable,
+    ToggleTableRow,
+    ToggleBadge,
+    ToggleTableColumn,
+    ToggleInputText,
+    ToggleInputWebsite,
+    ToggleDatePicker,
+    ToggleDateRangePicker,
+    ToggleInputSelect,
+    ToggleInputPercentage,
+    ToggleInputCurrency,
+    ToggleInputRadioButtons,
+    ToggleInputTextArea,
+    ToggleInputCheckboxContainer,
+    ToggleInputCheckbox, 
+    ToggleInputCheckboxInline,
+    ToggleFillLoader,
+    ToggleInputImage,
+    ToggleButton,
+    ToggleInputGroup,
+    ToggleHeaderTextLarge,
+    ToggleInputNumber,
+    ToggleColourPicker,
+    ToggleModal,
+    ToggleInputFile,
+    ToggleInputSearch,
+    ToggleInputRadioButtonGroup,
+    ToggleSideSubNav,
+    ToggleSideNav,
+    ToggleSideNavItem,
+    ToggleInputCrudField,
+    ToggleInputGrid,
+    ToggleLineBreak,
+    ToggleTextClipboardCopy,
+    ToggleNotifications,
+    ToggleFeatureButton,
+    ToggleHelperTextSmall,
+    ToggleInfoText
+}
+
+Object.keys(Components).forEach(name => {
+    Vue.component(name, Components[name]);
+})
+
+var toggle_event_bus = new Vue();
+Object.defineProperty(Vue.prototype, '$toggle_event', {
+    get() {
+        return toggle_event_bus;
+    }
+});
+
+export default Components;

package/src/sass/includes/_as_animations.scss

@@ -0,0 +1,8 @@
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }

package/src/sass/includes/_as_badges.scss

@@ -0,0 +1,27 @@
+// loading
+.toggle-badge {
+    @include toggle-global-font-config;
+    font-size: $toggle-font-size-small;
+    display: inline-block;
+    border-radius: 3px;
+    background-color: $toggle-button-neutral;
+    color: $toggle-white;
+    font-weight: bold;
+    padding: 0.2rem 0.6rem 0.2rem 0.6rem;
+
+    &.neutral{
+        background-color: $toggle-button-neutral;
+    }
+
+    &.abort{
+        background-color: $toggle-button-abort;
+    }
+
+    &.confirm{
+        background-color: $toggle-button-success;
+    }
+
+    &.inactive {
+        background-color: $toggle-button-disabled;
+    }
+}

package/src/sass/includes/_as_breadcrumb.scss

@@ -0,0 +1,39 @@
+.toggle-breadcrumb {
+
+    @include toggle-global-font-config;
+
+    .toggle-breadcrumb-h1{
+        @include toggle-global-font-config;
+        font-family: "DIN-2014","Lato",sans-serif;
+        font-size: $toggle-font-size-extra-large;
+        color: $toggle-black;
+
+    }
+
+    a {
+
+        font-size: $toggle-font-size-extra-large;
+        font-family: "DIN-2014","Lato",sans-serif;
+        float: left;
+        color: $toggle-placeholder-grey;
+        position: relative;
+        z-index: 1;
+        &:hover {
+              filter: brightness(80%);
+
+        }
+    }
+
+        
+
+    .toggle-breadcrumb-arrow-right {
+        border: solid #3180FF;
+        border-width: 0 2px 2px 0;
+        display: inline-block;
+        padding: 2px;
+        margin: 12px 19px;
+        float: left;
+        transform: rotate(-45deg);
+        -webkit-transform: rotate(-45deg);
+    }
+}