@burh/nuxt-core 1.0.500 → 1.0.502

package/components/burh-ds/Lists/ListAvatarCheckbox.vue

@@ -1,158 +1,158 @@
-<template>
-    <div>
-        <h4 class="aria-text">Lista de {{context}}</h4>
-        <ul class="avatar-group d-inline-block">
-            <li class="avatar rounded-circle cursor-pointer" :class="{'avatar--selected' : isThereInSelecteds(obj.id) }" v-for="obj in getInlineAvatars" :key="obj.id" @click="setSelecteds(obj.id)">
-                <span class="aria-text" aria-label="nome usuário">{{obj.name}}</span>
-                <img :alt="`Imagem do ${context} ${obj.name}`" :src="obj.avatar">
-            </li>
-        </ul>
-        <h4 class="aria-text">Filtro de {{context}}</h4>
-        <el-dropdown :hide-on-click="false" trigger="click" class="avatar--listdrop" v-if="getAvatarToDropdown != null">
-            <button aria-label="Mostrar lista de filtros" class="avatar avatar--listdrop--item rounded-circle">
-                +{{getAvatarToDropdown.length}}
-            </button>
-            <el-dropdown-menu class="avatar--listdrop--group" slot="dropdown">
-                <el-dropdown-item v-for="obj in getAvatarToDropdown" :key="obj.id">
-                    <base-checkbox class="my-2" v-on:input="setSelecteds(obj.id)">
-                        <span class="avatar avatar-sm rounded-circle">
-                            <img :alt="`Imagem do ${context} ${obj.name}`" :src="obj.avatar">
-                        </span>
-                        <p class="avatar--listdrop--item-name">{{obj.name}}</p>
-                    </base-checkbox>
-                </el-dropdown-item>
-            </el-dropdown-menu>
-        </el-dropdown>
-    </div>
-</template>
-
-<script>
-import { Dropdown, DropdownMenu, DropdownItem } from "element-ui";
-import BaseCheckbox from "@burh/nuxt-core/components/burh-ds/Inputs/BaseCheckbox.vue";
-
-export default {
-    components: {
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem,
-        [DropdownMenu.name]: DropdownMenu,
-        BaseCheckbox
-    },
-    props: {
-        context: {
-            type: String,
-            default: 'Usuarios'
-        },
-        limitShowInline: {
-            type: Number,
-            default: 3
-        },
-        avatars: {
-            type: Array,
-            default: () => [
-                {   
-                    id: 1,
-                    name: 'Nome Gigante Para Quebrar Layout',
-                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
-                },
-                {   
-                    id: 2,
-                    name: 'Nome Gigante Para Quebrar Layout',
-                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
-                },
-                {   
-                    id: 3,
-                    name: 'Nome Gigante Para Quebrar Layout',
-                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
-                },
-                {   
-                    id: 4,
-                    name: 'Nome Gigante Para Quebrar Layout',
-                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
-                },
-                {   
-                    id: 5,
-                    name: 'Nome Gigante Para Quebrar Layout',
-                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
-                },
-            ]
-        }
-    },
-    data() {
-        return {
-            selecteds: []
-        }
-    },
-    computed: {
-        getInlineAvatars() {
-            return this.avatars.slice(0, this.limitShowInline);
-        },
-        getAvatarToDropdown() {
-            return this.avatars.slice(this.limitShowInline)
-        }
-    },
-    methods: {
-        setSelecteds(id) {
-            if (!this.isThereInSelecteds(id)) {
-                this.selecteds.push(id);
-            }else {
-                this.removeItemFromSelecteds(id);
-            }            
-
-            return this.$emit('selecteds', this.selecteds);
-        },
-        removeItemFromSelecteds(id) {
-            const positionInArray = this.selecteds.findIndex(e => e == id);
-            return this.selecteds.splice(positionInArray, 1);
-        },
-        isThereInSelecteds(id) {
-            return this.selecteds.includes(id)
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
-
-.avatar {
-    &--listdrop {
-        display: inline-block;
-        top: -1rem;
-        left: -1rem;
-        z-index: 2;
-        cursor: pointer;
-
-        &--item {
-            &:focus {
-                outline: initial;
-            }
-
-            &-name {
-                display: inline-block;
-                position: relative;
-                top: -.65rem;
-                left: .25rem;
-            }
-        }   
-
-        &--group {
-            li {
-                line-height: 2.5rem;
-            }
-
-            .custom-control-label {
-                &:before,
-                &:after {
-                    top: .75rem;
-                }
-            }
-        }
-    }
-
-    &-group {
-        .avatar.avatar--selected {
-            border-color: $color-primary !important; 
-        }
-    }
-}
+<template>
+    <div>
+        <h4 class="aria-text">Lista de {{context}}</h4>
+        <ul class="avatar-group d-inline-block">
+            <li class="avatar rounded-circle cursor-pointer" :class="{'avatar--selected' : isThereInSelecteds(obj.id) }" v-for="obj in getInlineAvatars" :key="obj.id" @click="setSelecteds(obj.id)">
+                <span class="aria-text" aria-label="nome usuário">{{obj.name}}</span>
+                <img :alt="`Imagem do ${context} ${obj.name}`" :src="obj.avatar">
+            </li>
+        </ul>
+        <h4 class="aria-text">Filtro de {{context}}</h4>
+        <el-dropdown :hide-on-click="false" trigger="click" class="avatar--listdrop" v-if="getAvatarToDropdown != null">
+            <button aria-label="Mostrar lista de filtros" class="avatar avatar--listdrop--item rounded-circle">
+                +{{getAvatarToDropdown.length}}
+            </button>
+            <el-dropdown-menu class="avatar--listdrop--group" slot="dropdown">
+                <el-dropdown-item v-for="obj in getAvatarToDropdown" :key="obj.id">
+                    <base-checkbox class="my-2" v-on:input="setSelecteds(obj.id)">
+                        <span class="avatar avatar-sm rounded-circle">
+                            <img :alt="`Imagem do ${context} ${obj.name}`" :src="obj.avatar">
+                        </span>
+                        <p class="avatar--listdrop--item-name">{{obj.name}}</p>
+                    </base-checkbox>
+                </el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </div>
+</template>
+
+<script>
+import { Dropdown, DropdownMenu, DropdownItem } from "element-ui";
+import BaseCheckbox from "@burh/nuxt-core/components/burh-ds/Inputs/BaseCheckbox.vue";
+
+export default {
+    components: {
+        [Dropdown.name]: Dropdown,
+        [DropdownItem.name]: DropdownItem,
+        [DropdownMenu.name]: DropdownMenu,
+        BaseCheckbox
+    },
+    props: {
+        context: {
+            type: String,
+            default: 'Usuarios'
+        },
+        limitShowInline: {
+            type: Number,
+            default: 3
+        },
+        avatars: {
+            type: Array,
+            default: () => [
+                {   
+                    id: 1,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 2,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 3,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 4,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 5,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+            ]
+        }
+    },
+    data() {
+        return {
+            selecteds: []
+        }
+    },
+    computed: {
+        getInlineAvatars() {
+            return this.avatars.slice(0, this.limitShowInline);
+        },
+        getAvatarToDropdown() {
+            return this.avatars.slice(this.limitShowInline)
+        }
+    },
+    methods: {
+        setSelecteds(id) {
+            if (!this.isThereInSelecteds(id)) {
+                this.selecteds.push(id);
+            }else {
+                this.removeItemFromSelecteds(id);
+            }            
+
+            return this.$emit('selecteds', this.selecteds);
+        },
+        removeItemFromSelecteds(id) {
+            const positionInArray = this.selecteds.findIndex(e => e == id);
+            return this.selecteds.splice(positionInArray, 1);
+        },
+        isThereInSelecteds(id) {
+            return this.selecteds.includes(id)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+
+.avatar {
+    &--listdrop {
+        display: inline-block;
+        top: -1rem;
+        left: -1rem;
+        z-index: 2;
+        cursor: pointer;
+
+        &--item {
+            &:focus {
+                outline: initial;
+            }
+
+            &-name {
+                display: inline-block;
+                position: relative;
+                top: -.65rem;
+                left: .25rem;
+            }
+        }   
+
+        &--group {
+            li {
+                line-height: 2.5rem;
+            }
+
+            .custom-control-label {
+                &:before,
+                &:after {
+                    top: .75rem;
+                }
+            }
+        }
+    }
+
+    &-group {
+        .avatar.avatar--selected {
+            border-color: $color-primary !important; 
+        }
+    }
+}
 </style>

package/components/burh-ds/Lists/ListNavLinks.vue

@@ -1,54 +1,54 @@
-<template>
-	<base-dropdown menu-on-left
-		v-if="children != ''"
-		class=""
-		tag="li"
-		title-tag="a"
-	>
-		<span
-			href="#"
-			class="nav-link bolder"
-			@click.prevent
-			slot="title-container"
-		>
-			{{name}}
-		</span>
-		<span
-			class="dropdown-item d-flex justify-content-between"
-			v-for="(links, index) in children"
-			:key="index"
-			v-if="links.isVisible"
-		>
-			<default-link :link="links.link">
-				{{links.name}}
-			</default-link>
-			<nuxt-link v-if="links.hasBadge" to="/planos">
-				<badge >Habilitar</badge>
-			</nuxt-link>
-		</span>
-
-	</base-dropdown>
-	<li v-else class="nav-item">
-		<default-link :link="link" class="nav-link bolder">{{name}}</default-link>
-	</li>
-</template>
-<script>
-import DefaultLink from '../Link/DefaultLink';
-
-export default {
-	props:{
-		id: String,
-		name: String,
-		link: String,
-		children: Array,
-	},
-	components: {
-		DefaultLink
-	},
-};
-</script>
-<style lang="scss" scoped>
-    .bolder {
-        font-weight: 600;
-    }
-</style>
+<template>
+	<base-dropdown menu-on-left
+		v-if="children != ''"
+		class=""
+		tag="li"
+		title-tag="a"
+	>
+		<span
+			href="#"
+			class="nav-link bolder"
+			@click.prevent
+			slot="title-container"
+		>
+			{{name}}
+		</span>
+		<span
+			class="dropdown-item d-flex justify-content-between"
+			v-for="(links, index) in children"
+			:key="index"
+			v-if="links.isVisible"
+		>
+			<default-link :link="links.link">
+				{{links.name}}
+			</default-link>
+			<nuxt-link v-if="links.hasBadge" to="/planos">
+				<badge >Habilitar</badge>
+			</nuxt-link>
+		</span>
+
+	</base-dropdown>
+	<li v-else class="nav-item">
+		<default-link :link="link" class="nav-link bolder">{{name}}</default-link>
+	</li>
+</template>
+<script>
+import DefaultLink from '../Link/DefaultLink';
+
+export default {
+	props:{
+		id: String,
+		name: String,
+		link: String,
+		children: Array,
+	},
+	components: {
+		DefaultLink
+	},
+};
+</script>
+<style lang="scss" scoped>
+    .bolder {
+        font-weight: 600;
+    }
+</style>