Merge 0018831 into 06e432b

inkline · Nov 14, 2019 · 8e371b1 · 8e371b1
2 parents 06e432b + 0018831
commit 8e371b1
Show file tree

Hide file tree

Showing 52 changed files with 1,736 additions and 498 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Dropdown/script.js b/src/components/Dropdown/script.js
@@ -125,7 +125,7 @@ export default {
                 let nextIndex;
 
                 if (isKey('up', e)) {
-                    nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+                    nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
                 } else {
                     nextIndex = currentIndex < maxIndex ? currentIndex + 1 : maxIndex;
                 }

diff --git a/src/components/Dropdown/style.scss b/src/components/Dropdown/style.scss
@@ -4,9 +4,13 @@
 .dropdown {
     display: inline-block;
     position: relative;
-}
 
-.dropdown > .menu .dropdown {
-    width: 100%;
-    display: block;
+    > *:first-child {
+        cursor: pointer;
+    }
+
+    > .menu .dropdown {
+        width: 100%;
+        display: block;
+    }
 }
diff --git a/src/components/FormError/script.js b/src/components/FormError/script.js
@@ -17,6 +17,8 @@ export default {
                 this.errors = Object.keys(this.schema.errors)
                     .filter((key) => key !== 'length')
                     .map((key) => this.schema.errors[key]);
+            } else {
+                this.errors = [];
             }
         }
     },

diff --git a/src/components/Layout/style.scss b/src/components/Layout/style.scss
@@ -8,6 +8,7 @@
     display: flex;
     flex-direction: column;
     flex: auto;
+    position: relative;
 
     &,
     * {
@@ -16,6 +17,7 @@
 
     &.-vertical {
         flex-direction: row;
+        height: 100%;
 
         > .layout,
         > .container {

diff --git a/src/components/LayoutFooter/style.scss b/src/components/LayoutFooter/style.scss
@@ -8,5 +8,4 @@
     flex: 0 0 auto;
     background: $layout-footer-background;
     padding: $layout-footer-padding;
-    font-size: font-size('md');
 }
diff --git a/src/components/Nav/script.js b/src/components/Nav/script.js
@@ -23,7 +23,9 @@ export default {
     },
     methods: {
         dispatchItemClick(e) {
-            this.dispatch('INavbar', 'item-click', e);
+            ['INavbar', 'ISidebar'].forEach((componentName) => {
+                this.dispatch(componentName, 'item-click', e);
+            });
         }
     },
     created() {

diff --git a/src/components/Navbar/script.js b/src/components/Navbar/script.js
@@ -1,22 +1,22 @@
-import Vue from 'vue';
 import IContainer from '../Container';
 import IRow from '../Row';
 import IColumn from '../Column';
 import IHamburgerMenu from '../HamburgerMenu';
 
 import AttributesProviderMixin from '@inkline/inkline/src/mixins/components/providers/AttributesProviderMixin';
 import ClassesProviderMixin from '@inkline/inkline/src/mixins/components/providers/ClassesProviderMixin';
+import CollapsibleProviderMixin from '@inkline/inkline/src/mixins/components/providers/CollapsibleProviderMixin';
 
 import SizePropertyMixin from '@inkline/inkline/src/mixins/components/properties/SizePropertyMixin';
 import VariantPropertyMixin from '@inkline/inkline/src/mixins/components/properties/VariantPropertyMixin';
 
-import { breakpoints } from '@inkline/inkline/src/constants';
 
 export default {
     name: 'INavbar',
     mixins: [
         AttributesProviderMixin,
         ClassesProviderMixin,
+        CollapsibleProviderMixin,
 
         SizePropertyMixin,
         VariantPropertyMixin
@@ -28,10 +28,6 @@ export default {
         IHamburgerMenu
     },
     props: {
-        collapse: {
-            type: String,
-            default: 'md'
-        },
         collapseOnClick: {
             type: Boolean,
             default: true
@@ -45,64 +41,17 @@ export default {
             default: 'close'
         }
     },
-    data() {
-        return {
-            collapsed: false,
-            windowWidth: typeof window !== 'undefined' ? window.innerWidth : 0
-        };
-    },
-    provide() {
-        const navbar = {};
-
-        Object.defineProperty(navbar, 'collapsed', {
-            enumerable: true,
-            get: () => this.collapsed,
-        });
-
-        Object.defineProperty(navbar, 'collapse', {
-            enumerable: true,
-            get: () => this.collapse,
-        });
-
-        return { navbar };
-    },
     methods: {
-        setCollapse(value) {
-            this.collapsed = value;
-        },
-        toggleCollapse() {
-            this.collapsed = !this.collapsed;
-        },
-        onWindowResize() {
-            if (!this.collapse) { return; }
-
-            const windowWidth = window.innerWidth;
-
-            if (this.windowWidth <= breakpoints[this.collapse][1] && windowWidth > breakpoints[this.collapse][1]) {
-                this.collapsed = false;
+        onItemClick() {
+            if (this.collapseOnClick && this.collapsed) {
+                this.setCollapse(false);
             }
-
-            this.windowWidth = windowWidth;
         }
     },
     created() {
-        this.classesProvider.add(() => ({
-            '-collapsed': this.collapsed,
-            [`-collapse-${this.collapse}`]: Boolean(this.collapse)
-        }));
-
-        if (!Vue.$isServer && typeof window !== 'undefined') {
-            window.addEventListener('resize', this.onWindowResize);
-            this.onWindowResize();
-        }
-
-        if (this.collapseOnClick) {
-            this.$on('item-click', () => this.setCollapse(false));
-        }
-    },
-    destroyed() {
-        if (!Vue.$isServer && typeof window !== 'undefined') {
-            window.removeEventListener('resize', this.onWindowResize)
-        }
+        this.$on('item-click', this.onItemClick);
     },
+    beforeDestroy() {
+        this.$off('item-click', this.onItemClick);
+    }
 };
diff --git a/src/components/Navbar/style.scss b/src/components/Navbar/style.scss
@@ -7,6 +7,33 @@
 @import 'css/_variants';
 @import 'css/_sizes';
 
+@mixin navbar-collapse {
+    > .container > .row > .column {
+        ::v-deep .items {
+            position: relative;
+            display: block;
+            width: 100%;
+
+            > .nav {
+                flex-direction: column;
+                align-items: flex-start;
+
+                > .item {
+                    width: 100%;
+                }
+            }
+        }
+
+        ::v-deep .collapse-toggle {
+            display: inline-block;
+
+            + .brand {
+                order: -1;
+            }
+        }
+    }
+}
+
 .navbar {
     position: relative;
     display: flex;
@@ -20,42 +47,23 @@
         align-items: center;
         justify-content: space-between;
 
-        ::v-deep .hamburger {
+        ::v-deep .collapse-toggle {
             display: none;
         }
     }
 
     @each $breakpoint in (breakpoints-list()) {
         &.-collapse-#{$breakpoint} {
             @include breakpoint-down($breakpoint) {
-                > .container > .row > .column {
-                    ::v-deep .items {
-                        position: relative;
-                        display: block;
-                        width: 100%;
-
-                        > .nav {
-                            flex-direction: column;
-                            align-items: flex-start;
-
-                            > .item {
-                                width: 100%;
-                            }
-                        }
-                    }
-
-                    ::v-deep .hamburger {
-                        display: inline-block;
-
-                        + .brand {
-                            order: -1;
-                        }
-                    }
-                }
+                @include navbar-collapse;
             }
         }
     }
 
+    &.-collapse-true {
+        @include navbar-collapse;
+    }
+
     @extend .navbar.-md;
     @extend .navbar.-light;
 }
diff --git a/src/components/Navbar/template.html b/src/components/Navbar/template.html
@@ -4,8 +4,11 @@
     <i-container :fluid="fluid">
         <i-row>
             <i-column :xs="true">
-                <i-hamburger-menu :active="collapsed" :animation="toggleAnimation" :variant="variant" @click="toggleCollapse">
-                    <span class="bars"></span>
+                <i-hamburger-menu class="collapse-toggle"
+                    :active="collapsed"
+                    :animation="toggleAnimation"
+                    :variant="variant"
+                    @click="toggleCollapse">
                 </i-hamburger-menu>
                 <slot></slot>
             </i-column>

diff --git a/src/components/NavbarItems/script.js b/src/components/NavbarItems/script.js
@@ -1,34 +1,16 @@
-import Vue from 'vue';
+import AttributesProviderMixin from '@inkline/inkline/src/mixins/components/providers/AttributesProviderMixin';
+import ClassesProviderMixin from '@inkline/inkline/src/mixins/components/providers/ClassesProviderMixin';
+
 import ITransitionExpand from '@inkline/inkline/src/transitions/TransitionExpand';
-import { breakpoints } from "@inkline/inkline/src/constants";
 
 export default {
     name: 'INavbarItems',
-    inject: [ 'navbar' ],
+    inject: [ 'collapsible' ],
+    mixins: [
+        AttributesProviderMixin,
+        ClassesProviderMixin
+    ],
     components: {
         ITransitionExpand
-    },
-    data() {
-        return {
-            collapsible: false
-        }
-    },
-    methods: {
-        onWindowResize() {
-            if (!this.navbar.collapse) { return; }
-
-            this.collapsible = window.innerWidth <= breakpoints[this.navbar.collapse][1];
-        }
-    },
-    created() {
-        if (!Vue.$isServer && typeof window !== 'undefined') {
-            window.addEventListener('resize', this.onWindowResize);
-            this.onWindowResize();
-        }
-    },
-    destroyed() {
-        if (!Vue.$isServer && typeof window !== 'undefined') {
-            window.removeEventListener('resize', this.onWindowResize)
-        }
     }
-};
+};
diff --git a/src/components/NavbarItems/style.scss b/src/components/NavbarItems/style.scss
@@ -9,8 +9,9 @@
 .navbar {
     > .container > .row > .column > .items {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         flex-grow: 1;
+        flex-shrink: 1;
         justify-content: space-between;
         align-items: center;
 

diff --git a/src/components/NavbarItems/template.html b/src/components/NavbarItems/template.html
@@ -1,5 +1,5 @@
 <i-transition-expand>
-    <div class="items" v-show="navbar.collapsed || !collapsible">
+    <div class="items" v-show="collapsible.collapsed || !collapsible.collapsible">
         <slot></slot>
     </div>
 </i-transition-expand>