toggle-components-library 1.10.5 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.10.5",
+  "version": "1.13.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -34,7 +34,8 @@
     "vue-moment": "^4.1.0",
     "vue-router": "^3.4.3",
     "vue2-dropzone": "^3.6.0",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",

package/src/components/elements/ToggleSectionCollapse.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="toggle-section-collapse">
+    <div ref="header" class="toggle-section-collapse-header" @click="visible = !visible">
+      <h3 ref="title" class="toggle-section-collapse-title">{{ title }}</h3>
+      <img class="toggle-section-collapse-arrow" 
+      :class=" visible ? 'toggle-section-collapse-arrow-up' : updated ? 'toggle-section-collapse-arrow-down' : '' " 
+      />
+    </div>
+    <transition name="slide">
+    <div ref="content" class="toggle-section-collapse-slot" v-show="visible">
+      <slot></slot>
+    </div>
+    </transition>
+    <hr class="toggle-section-collapse-linebreak"/>
+  </div>
+</template>
+<script>
+export default {
+  name: "SectionCollapse",
+  props: {
+    title: {
+      type: String,
+      default: "Expandable",
+    },
+  },
+  data: function() {
+    return {
+      visible: false,
+      updated: false,
+    }
+  },
+  beforeUpdate: function() {
+    this.updated = true
+  }
+};
+</script>

package/src/components/forms/ToggleFontPicker.vue

@@ -0,0 +1,102 @@
+<template>
+  <ToggleInputSelect :options="fontOptions" :label="label" :name="name" :fontFamily="fontValue" v-model="fontValue" size="medium" :style="`font-family: ${fontValue};`"/>
+</template>
+
+<script>
+import { mixins } from '../mixins/mixins';
+import ToggleInputSelect from './ToggleInputSelect.vue';
+var WebFont = require('webfontloader');
+ 
+export default {
+    mixins:[mixins],
+    components:{ ToggleInputSelect },
+    name: 'FontPicker',
+    props: {
+        /**
+         * The name of the fontpicker component
+         */
+        name: {
+            type: String,
+            default: "ToggleFontPicker"
+        },
+        /**
+         * The label that will be displayed
+         */
+        label: {
+            type: String,
+            required: false,
+            default: "Font picker"
+        },
+        /**
+         * Whether this is a required field or not
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+      return {
+        fontValue: '',
+        fonts: [
+            'Abril Fatface',
+            'Alpha Slab One',
+            'Anton',
+            'Arvo',
+            'Bodoni Moda',
+            'EB Garamond',
+            'Fredoka One',
+            'IBM Plex Mono',
+            'Lato',
+            'Libre Baskerville',
+            'Lora',
+            'Merriweather',
+            'Montserrat',
+            'Nunito',
+            'Open Sans',
+            'Open Sans Condensed',
+            'Oswald',
+            'Poppins',
+            'Prata',
+            'PT Serif',
+            'Quicksand',
+            'Roboto',
+            'Roboto Mono',
+            'Roboto Slab',
+            'Rubik',
+            'Sacramento',
+            'Source Sans Pro',
+            'Source Serif Pro',
+            'Volkhov',
+            'Work Sans Pro',
+            'Space Mono'
+          ],
+      }
+    },
+    created() {
+      this.getFonts();
+    },
+
+    computed: {
+      fontOptions() {
+        // Format font list into value/label object for select input
+        return this.fonts.map(font => {
+          return {
+            value: font,
+            label: font
+          }
+        })
+      }
+    },
+
+    methods: {
+      getFonts() {
+          WebFont.load({
+              google: {
+                  families: this.fonts
+              }
+          });
+      }
+    }
+  }
+</script>

package/src/components/forms/ToggleInputSelect.vue

@@ -15,6 +15,7 @@
             v-model="inputVal" 
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
+            :style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
             >
                 <option value="">Select an option</option>
                 <option :value="option.value" v-for="(option, key) in options" v-bind:key="key">{{option.label}}</option>
@@ -72,6 +73,10 @@ export default {
         errorMessage: {
             type: String,
             required: false
+        },
+        fontFamily: {
+            type: String,
+            required: false
         }
     },
 

package/src/index.js

@@ -40,6 +40,7 @@ import ToggleSideSubNav from './components/navs/sidenav/ToggleSideSubNav.vue';
 
 import ToggleTextClipboardCopy from './components/text/ToggleTextClipboardCopy';
 import ToggleLineBreak from './components/elements/ToggleLineBreak';
+import ToggleSectionCollapse from './components/elements/ToggleSectionCollapse';
 import ToggleNotifications from './components/notifications/ToggleNotifications';
 
 import ToggleFeatureButton from './components/buttons/ToggleFeatureButton';
@@ -48,6 +49,8 @@ import ToggleHeaderTextLarge from "./components/text/ToggleHeaderTextLarge.vue";
 import ToggleHelperTextSmall from "./components/text/ToggleHelperTextSmall.vue";
 import ToggleInfoText from "./components/text/ToggleInfoText.vue";
 
+import ToggleFontPicker from "./components/forms/ToggleFontPicker.vue";
+
 import './sass/main.scss';
 
 const Components = {
@@ -85,12 +88,14 @@ const Components = {
     ToggleInputCrudField,
     ToggleInputGrid,
     ToggleLineBreak,
+    ToggleSectionCollapse,
     ToggleTextClipboardCopy,
     ToggleNotifications,
     ToggleFeatureButton,
     ToggleHelperTextSmall,
     ToggleInfoText,
-    ToggleInternationalPhoneInputSelect
+    ToggleInternationalPhoneInputSelect,
+    ToggleFontPicker
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_elements.scss

@@ -1,3 +1,116 @@
 .toggle-line-break {
   border-bottom: 1px solid $toggle-blue;
 }
+.toggle-section-collapse {
+  .toggle-section-collapse-header {
+    width: 100%;
+    min-height: 25px;
+    padding: 1em 0; 
+  }
+  .toggle-section-collapse-title {
+    max-width: 80%;
+    float: left;
+    display: block;
+    font-weight: bold;
+    font-family: $toggle-font-family-secondary;
+    margin-bottom: .6em;
+  }
+  .toggle-section-collapse-slot {
+    clear: both;
+    font-family: $toggle-font-family;
+    overflow: auto;
+  }
+  .toggle-section-collapse-linebreak {
+    border-top: 0 solid transparent;
+    border-left: 0 solid transparent;
+    border-right: 0 solid transparent;
+    border-bottom: 1px solid $toggle-inactive-grey;
+    clear: both;
+  }
+  .toggle-section-collapse-arrow {
+    border: solid #3180FF;
+    border-width: 0 2px 2px 0;
+    padding: 3px;
+    margin: 27px 19px 12px;
+    float: left;
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  .toggle-section-collapse-arrow-down {
+    animation: turn-down 0.3s ease-out;
+  }
+  .toggle-section-collapse-arrow-up {
+    margin: 31px 19px 12px;
+    -moz-transform: rotate(225deg);
+    -o-transform: rotate(225deg);
+    -ms-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    transform: rotate(225deg);
+    animation: turn-up 0.3s ease-out;
+}
+// For animating the arrow icon
+  @keyframes turn-up {
+    0% {
+      margin: 27px 19px 12px;
+      -moz-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+    100% {
+      margin: 31px 19px 12px;
+      -moz-transform: rotate(-135deg);
+      -o-transform: rotate(-135deg);
+      -ms-transform: rotate(-135deg);
+      -webkit-transform: rotate(-135deg);
+      transform: rotate(-135deg);
+    }
+  }
+  @keyframes turn-down {
+    0% {
+      margin: 31px 19px 12px;
+      -moz-transform: rotate(-135deg);
+      -o-transform: rotate(-135deg);
+      -ms-transform: rotate(-135deg);
+      -webkit-transform: rotate(-135deg);
+      transform: rotate(-135deg);
+    }
+    100% {
+      margin: 27px 19px 12px;
+      -moz-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+  }
+   .slide-enter-active {
+    -moz-transition: all .5s ease;
+    -webkit-transition: all .5s ease;
+    -o-transition: all .5s ease;
+    -ms-transition: all .5s ease;
+    transition: all .5s ease;
+   }
+   .slide-leave-active {
+    -moz-transition: all .3s ease;
+    -webkit-transition: all .3s ease;
+    -o-transition: all .3s ease;
+    -ms-transition: all .3s ease;
+    transition: all .3s ease;
+   }
+   .slide-enter-to, .slide-leave {
+    max-height: 100px;
+    overflow: hidden;
+ }
+   .slide-enter, .slide-leave-to
+   {
+    overflow: hidden;
+    max-height: 0;
+   }  
+}
+
+

package/src/sass/includes/_as_inputs.scss

@@ -642,7 +642,7 @@ $iconWidth:20px;
     float: left;
     outline: 1px solid ;
     outline-offset: -1px;
-    padding: 0 0 0 1rem;
+    padding: 0 0 0 1rem !important;
 }
 
 

package/src/sass/includes/_as_table.scss

@@ -3,7 +3,6 @@
 table.toggle-table {
 
   table-layout:fixed;
-
   width: 100%;
   margin: 25px 0;
   font-size: 12px;
@@ -17,8 +16,10 @@ table.toggle-table {
     border-radius:0;
     border:none;
     .toggle-input{
-        padding-right:0px;
+        margin-top:11px;
+        padding:1px 3px 1px 3px;
         font-size:14px;
+        height:1.5rem;
     }
     .toggle-input-label{
         display: none;
@@ -27,8 +28,8 @@ table.toggle-table {
         .toggle-date-input-calendar-icon{
            .toggle-input{
                 background:transparent;
-                padding:0rem 1rem 1rem 0rem;
-                margin-top: 0;
+                padding:3px 1rem 3px 0.1rem;
+                margin-top: 10px;
            }
         }
         .toggle-clear{