@burh/nuxt-core 1.0.500 → 1.0.502

package/components/burh-ds/Headings/StepHeader.vue

@@ -1,123 +1,123 @@
-<template>
-  <div class="card pt-3 px-4" :class="{'pb-5': !hideIcons}">
-    <validation-provider tag="div" :vid="`step-name-${position}`"
-      name="Nome da Etapa" rules="required" v-slot="{ errors }">
-        <base-input 
-            :label="`Etapa #${position + 1}`" 
-            placeholder="Escreva o nome da etapa" 
-            type="text" 
-            v-on:input="emitStage()"
-            v-model="name"
-            :error="errors[0]"
-            :valid="errors.length ? true : false"
-        />
-    </validation-provider>
-
-    <validation-provider tag="div" class="pb-3" :vid="`step-description-${position}`"
-      name="Descrição da Etapa" rules="required" v-slot="{ errors }">
-      <textarea 
-        v-on:input="emitStage()"
-        v-model="description"
-        class="form-control form-control-alternative" 
-        :class="{'is-invalid': errors.length}"
-        rows="3" 
-        placeholder="Descrição desta etapa..."/>
-        <div v-if="errors.length" class="invalid-feedback" style="display: block;">
-            {{ errors[0] }}
-        </div>
-    </validation-provider>
-
-    <ul class="step-icons" v-if="!hideIcons">
-      <li v-for="(icon, index) in icons" 
-        :class="`text-danger icon-${icon.type}`"
-        :key="`question-icon-${position}-${index}`"
-        @click="$emit(icon.event)">
-          <el-tooltip class="item" effect="dark" :content="icon.title" placement="top">
-            <span class="small">
-              <font-awesome-icon :icon="icon.icon" :class="`ml-2 icon-${icon.type}`" :title="icon.title"/>
-              {{icon.title}}
-            </span>
-          </el-tooltip>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    hideIcons: {
-      type: Boolean,
-      default: false
-    },
-    position: {
-      type: Number,
-      default: 0
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    icons: {
-      type: Array,
-      default: () => [
-          { event: 'first-icon-click', icon: ['fas', 'trash-alt'], title: "Remover etapa", type: "danger" }
-      ]
-    },
-  },
-  data() {
-    return {    
-        name: this.title,
-        description: this.text
-    }
-  },
-  methods: {
-    emitStage() {
-      this.$emit('change-stage', 
-      { 
-        name: this.name, 
-        description: this.description 
-      })
-    }
-  },
-  watch: {
-    title(newName) {
-      this.name = newName;
-    },
-    text(newDescription) {
-      this.description = newDescription;
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-.step-icons {
-  position: absolute;
-  bottom: 0;
-  right: 1rem;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
-  list-style: none;
-
-  li {
-    padding-top: 1rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    cursor: pointer;
-    
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-
-}
-
+<template>
+  <div class="card pt-3 px-4" :class="{'pb-5': !hideIcons}">
+    <validation-provider tag="div" :vid="`step-name-${position}`"
+      name="Nome da Etapa" rules="required" v-slot="{ errors }">
+        <base-input 
+            :label="`Etapa #${position + 1}`" 
+            placeholder="Escreva o nome da etapa" 
+            type="text" 
+            v-on:input="emitStage()"
+            v-model="name"
+            :error="errors[0]"
+            :valid="errors.length ? true : false"
+        />
+    </validation-provider>
+
+    <validation-provider tag="div" class="pb-3" :vid="`step-description-${position}`"
+      name="Descrição da Etapa" rules="required" v-slot="{ errors }">
+      <textarea 
+        v-on:input="emitStage()"
+        v-model="description"
+        class="form-control form-control-alternative" 
+        :class="{'is-invalid': errors.length}"
+        rows="3" 
+        placeholder="Descrição desta etapa..."/>
+        <div v-if="errors.length" class="invalid-feedback" style="display: block;">
+            {{ errors[0] }}
+        </div>
+    </validation-provider>
+
+    <ul class="step-icons" v-if="!hideIcons">
+      <li v-for="(icon, index) in icons" 
+        :class="`text-danger icon-${icon.type}`"
+        :key="`question-icon-${position}-${index}`"
+        @click="$emit(icon.event)">
+          <el-tooltip class="item" effect="dark" :content="icon.title" placement="top">
+            <span class="small">
+              <font-awesome-icon :icon="icon.icon" :class="`ml-2 icon-${icon.type}`" :title="icon.title"/>
+              {{icon.title}}
+            </span>
+          </el-tooltip>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    hideIcons: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: Number,
+      default: 0
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    icons: {
+      type: Array,
+      default: () => [
+          { event: 'first-icon-click', icon: ['fas', 'trash-alt'], title: "Remover etapa", type: "danger" }
+      ]
+    },
+  },
+  data() {
+    return {    
+        name: this.title,
+        description: this.text
+    }
+  },
+  methods: {
+    emitStage() {
+      this.$emit('change-stage', 
+      { 
+        name: this.name, 
+        description: this.description 
+      })
+    }
+  },
+  watch: {
+    title(newName) {
+      this.name = newName;
+    },
+    text(newDescription) {
+      this.description = newDescription;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.step-icons {
+  position: absolute;
+  bottom: 0;
+  right: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  list-style: none;
+
+  li {
+    padding-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: pointer;
+    
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+}
+
 </style>

package/components/burh-ds/Img/ImageWithFallback.vue

@@ -1,67 +1,67 @@
-<template>
-	<img
-		:src="(this.src) ? this.src : getAvatarUrl()"
-		:alt="this.alt"
-		@error="img => getImageFallback(img)"
-	>
-</template>
-
-<script>
-export default {
-	name: 'image-with-fallback',
-	props: {
-		src: {
-			type: [String, Boolean],
-			default: null
-		},
-		alt: {
-			type: String,
-			required: true
-		},
-		fallbackSize: {
-			type: String,
-			default: '512'
-		},
-		fallbackBackground: {
-			type: [String, Boolean],
-			default: null
-		},
-		fallbackText: {
-			type: String,
-			required: true
-		},
-		fallbackSingle: {
-			type: Boolean,
-			default: true
-		}
-	},
-	methods: {
-		getAvatarUrl() {
-			let size = this.fallbackSize;
-			let text = this.getNameInitials();
-			// let background = this.fallbackBackground;
-
-			// return `https://avatars.dicebear.com/api/initials/${text}.svg?backgroundColorLevel=900&size=${size}&fontSize=40${background ? `&b=%23${background}` : ''}`;
-			return `https://avatars.dicebear.com/api/initials/${text}.svg?backgroundColorLevel=900&size=${size}&fontSize=40&b=%238DA2B5`;
-		},
-		getImageFallback(img) {
-			img.target.src = this.getAvatarUrl();
-		},
-		getNameInitials() {
-			let userAvatarName;
-
-			if (this.fallbackText) {
-				if (this.fallbackSingle) {
-					userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
-				} else {
-					userAvatarName = this.fallbackText;
-				}
-			} else {
-				userAvatarName = 'BURH';
-			}
-
-			return userAvatarName;
-		},
-	}
-};
-</script>
+<template>
+	<img
+		:src="(this.src) ? this.src : getAvatarUrl()"
+		:alt="this.alt"
+		@error="img => getImageFallback(img)"
+	>
+</template>
+
+<script>
+export default {
+	name: 'image-with-fallback',
+	props: {
+		src: {
+			type: [String, Boolean],
+			default: null
+		},
+		alt: {
+			type: String,
+			required: true
+		},
+		fallbackSize: {
+			type: String,
+			default: '512'
+		},
+		fallbackBackground: {
+			type: [String, Boolean],
+			default: null
+		},
+		fallbackText: {
+			type: String,
+			required: true
+		},
+		fallbackSingle: {
+			type: Boolean,
+			default: true
+		}
+	},
+	methods: {
+		getAvatarUrl() {
+			let size = this.fallbackSize;
+			let text = this.getNameInitials();
+			// let background = this.fallbackBackground;
+
+			// return `https://avatars.dicebear.com/api/initials/${text}.svg?backgroundColorLevel=900&size=${size}&fontSize=40${background ? `&b=%23${background}` : ''}`;
+			return `https://avatars.dicebear.com/api/initials/${text}.svg?backgroundColorLevel=900&size=${size}&fontSize=40&b=%238DA2B5`;
+		},
+		getImageFallback(img) {
+			img.target.src = this.getAvatarUrl();
+		},
+		getNameInitials() {
+			let userAvatarName;
+
+			if (this.fallbackText) {
+				if (this.fallbackSingle) {
+					userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
+				} else {
+					userAvatarName = this.fallbackText;
+				}
+			} else {
+				userAvatarName = 'BURH';
+			}
+
+			return userAvatarName;
+		},
+	}
+};
+</script>

package/components/burh-ds/Input/AutoComplete.vue

@@ -1,137 +1,137 @@
-<template>
-  <el-select
-    v-model="value"
-    clearable
-    filterable
-    remote
-    default-first-option
-    class="auto-complete"
-    :placeholder="txtPlaceholder"
-    :remote-method="request ? requestMethod : remoteMethod"
-    :loading="loading">
-    <el-option
-      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value">
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-
-import { Select, Option } from "element-ui";
-
-  export default {
-    components: {
-        [Select.name]: Select,
-        [Option.name]: Option,
-    },
-    props: {
-        txtPlaceholder: String,
-        request: false,
-        preventDefaultValue: false,
-        valueDefault: String,
-        doRequest: {
-            type: Object,
-            description: 'received as parameters a function kind of asyncronous',
-            default: () => { return {"request": () => { return ['nenhum'] } } }
-        },
-        listWords: {
-            type: Array,
-            default: () => { return ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado",
-                        "Connecticut", "Delaware", "Florida", "Massachusetts", "Michigan", "Minnesota",
-                        "Mississippi", "Missouri", "Montana", "New Jersey", "New Mexico", "New York",
-                        "Oklahoma", "Oregon", "Pennsylvania", "South Dakota", "Tennessee", "Texas", 
-                        "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin",
-                        "Wyoming"] }
-        },
-        
-    },
-    created(){
-        if (!this.request){
-            this.words = this.listWords;
-        }
-    },
-    data() {
-      return {
-        options: [],
-        value: null,
-        list: [],
-        loading: false,
-        words: []
-      }
-    },
-    mounted() {
-      this.value = this.valueDefault
-      this.doList();
-    },
-    watch: {
-      value(newValue, oldValue) {
-        if(oldValue == null && this.preventDefaultValue){
-          return;
-        }
-
-        this.$emit('change', newValue);
-      },
-      valueDefault(newValue, oldValue) {
-        if(oldValue == null) {
-          this.value = newValue;
-        }  
-      }
-    },
-    methods: {
-      doList() {
-        if(this.words != null){
-            this.list = this.words.map(item => {
-                return { value: `value:${item}`, label: `${item}` };
-            });
-
-            return;
-        }
-      },
-
-      //without request from server
-      remoteMethod(query) {
-        if (query !== '') {
-          this.loading = true;
-          setTimeout(() => {
-            this.loading = false;
-            this.options = this.list.filter(item => {
-              return item.label.toLowerCase()
-                .indexOf(query.toLowerCase()) > -1;
-            });
-          }, 200);
-        } else {
-          this.options = [];
-        }
-      },
-
-      //with request from server
-      requestMethod(query) {
-        if (query !== '' && query.length >= 3) { //min 3 characters
-          this.loading = true;
-          setTimeout(async () => {    
-            this.words = await this.doRequest.request(query)
-            this.loading = false;
-            this.doList();
-            this.options = this.list;
-          }, 200);
-        } else {
-          this.options = [];
-        }
-      },
-    }
-  }
-</script>
-<style lang="scss">
-.auto-complete {
-  @media (max-width: 568px) {
-    width: 100%;
-    padding-bottom: 1rem;
-  }
-}
-.el-select-dropdown.el-popper{
-  z-index: 10000 !important;
-}
+<template>
+  <el-select
+    v-model="value"
+    clearable
+    filterable
+    remote
+    default-first-option
+    class="auto-complete"
+    :placeholder="txtPlaceholder"
+    :remote-method="request ? requestMethod : remoteMethod"
+    :loading="loading">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+
+import { Select, Option } from "element-ui";
+
+  export default {
+    components: {
+        [Select.name]: Select,
+        [Option.name]: Option,
+    },
+    props: {
+        txtPlaceholder: String,
+        request: false,
+        preventDefaultValue: false,
+        valueDefault: String,
+        doRequest: {
+            type: Object,
+            description: 'received as parameters a function kind of asyncronous',
+            default: () => { return {"request": () => { return ['nenhum'] } } }
+        },
+        listWords: {
+            type: Array,
+            default: () => { return ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado",
+                        "Connecticut", "Delaware", "Florida", "Massachusetts", "Michigan", "Minnesota",
+                        "Mississippi", "Missouri", "Montana", "New Jersey", "New Mexico", "New York",
+                        "Oklahoma", "Oregon", "Pennsylvania", "South Dakota", "Tennessee", "Texas", 
+                        "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin",
+                        "Wyoming"] }
+        },
+        
+    },
+    created(){
+        if (!this.request){
+            this.words = this.listWords;
+        }
+    },
+    data() {
+      return {
+        options: [],
+        value: null,
+        list: [],
+        loading: false,
+        words: []
+      }
+    },
+    mounted() {
+      this.value = this.valueDefault
+      this.doList();
+    },
+    watch: {
+      value(newValue, oldValue) {
+        if(oldValue == null && this.preventDefaultValue){
+          return;
+        }
+
+        this.$emit('change', newValue);
+      },
+      valueDefault(newValue, oldValue) {
+        if(oldValue == null) {
+          this.value = newValue;
+        }  
+      }
+    },
+    methods: {
+      doList() {
+        if(this.words != null){
+            this.list = this.words.map(item => {
+                return { value: `value:${item}`, label: `${item}` };
+            });
+
+            return;
+        }
+      },
+
+      //without request from server
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options = this.list.filter(item => {
+              return item.label.toLowerCase()
+                .indexOf(query.toLowerCase()) > -1;
+            });
+          }, 200);
+        } else {
+          this.options = [];
+        }
+      },
+
+      //with request from server
+      requestMethod(query) {
+        if (query !== '' && query.length >= 3) { //min 3 characters
+          this.loading = true;
+          setTimeout(async () => {    
+            this.words = await this.doRequest.request(query)
+            this.loading = false;
+            this.doList();
+            this.options = this.list;
+          }, 200);
+        } else {
+          this.options = [];
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss">
+.auto-complete {
+  @media (max-width: 568px) {
+    width: 100%;
+    padding-bottom: 1rem;
+  }
+}
+.el-select-dropdown.el-popper{
+  z-index: 10000 !important;
+}
 </style>