@nixweb/nixloc-ui 0.0.127 → 0.0.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.127",
+  "version": "0.0.129",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -12,10 +12,18 @@
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "@ckeditor/ckeditor5-vue2": "^2.0.0",
+    "@fullcalendar/core": "^5.11.3",
+    "@fullcalendar/daygrid": "^5.11.3",
+    "@fullcalendar/interaction": "^5.11.3",
+    "@fullcalendar/list": "^5.11.3",
+    "@fullcalendar/timegrid": "^5.11.3",
+    "@fullcalendar/vue": "^5.11.2",
     "axios": "^0.24.0",
     "bootstrap-vue": "^2.0.0-rc.11",
     "core-js": "^3.6.5",
+    "frappe-gantt": "^0.6.1",
     "sass-loader": "^10.1.1",
+    "timeline-vuejs": "^1.1.7",
     "v-runtime-template": "^1.10.0",
     "vodal": "^2.4.0",
     "vue": "^2.6.11",

package/src/component/forms/Button.vue

@@ -77,6 +77,7 @@ export default {
   padding: 8px 12px;
   cursor: pointer;
   border: none;
+  min-width: 33px;
   border-radius: 40px !important;
   font-size: 13px !important;
   font-weight: normal;
@@ -88,13 +89,13 @@ export default {
 }
 
 .small {
-  padding: 4px 8px;
+  padding: 3px 7px;
   font-size: 13px;
 }
 
 .medium {
   padding: 7px 12px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .large {

package/src/component/forms/ButtonGroup.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div>
+      <b-button-group size="sm">
+        <b-button
+          v-for="option in options"
+          :class="{ selected: option.title == selected }"
+          class="btn-group"
+          @click="execute(option)"
+          :key="option.title"
+        >
+          {{ option.title }}
+        </b-button>
+      </b-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ButtonGroup",
+  props: {
+    initialOption: String,
+    options: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      selected: "",
+    };
+  },
+  created() {
+    this.selected = this.initialOption;
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    execute(option) {
+      this.selected = option.title;
+      this.addEvent({ name: option.eventName, data: option });
+    },
+  },
+};
+</script>
+<style scoped>
+.btn-group {
+  background-color: white !important;
+  color: black !important;
+  border-color: #e9e9e9 !important;
+  outline: none !important;
+}
+.selected {
+  background-color: #f5f5f5 !important;
+}
+</style>

package/src/component/forms/ButtonSub.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="div-table-sub">
+      <div class="btn-close" @click="show" v-if="!open">
+        <i class="icon-table-sub fa-solid fa-arrow-left"></i>
+      </div>
+      <div class="btn-close" @click="hide" v-else>
+        <i class="icon-table-sub fa-solid fa-arrow-down"></i>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ButtonSub",
+  props: {
+    itemId: String,
+    urlGet: String,
+    eventNameShow: String,
+    eventNameHide: String,
+    propsParam: Object,
+    value: Object,
+  },
+  data() {
+    return {
+      open: false,
+      baseParams: {
+        search: undefined,
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+    };
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    ...mapMutations("generic", ["addEvent"]),
+    getAll() {
+      this.$emit("input", { loading: true, itemId: this.itemId });
+      let params = {
+        url: this.urlGet,
+        obj: { ...this.propsParam, ...this.baseParams },
+      };
+      this.getApi(params).then((response) => {
+        this.addEvent({
+          name: this.eventNameShow,
+          data: { itemId: this.itemId, data: response.content.data },
+        });
+
+        let self = this;
+        setTimeout(function () {
+          self.$emit("input", { loading: false, itemId: this.itemId });
+        }, 500);
+      });
+    },
+    show() {
+      this.open = true;
+      this.getAll();
+    },
+    hide() {
+      this.open = false;
+      this.addEvent({
+        name: this.eventNameHide,
+        data: { itemId: this.itemId, data: [] },
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.div-table-sub {
+  overflow-y: hidden !important;
+  overflow-x: hidden !important;
+  background-color: #ececec;
+  border-radius: 50px;
+  height: 35px;
+  width: 35px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.div-table-sub:hover {
+  background-color: #dfdfdf;
+}
+
+.icon-table-sub {
+  font-size: 16px;
+  padding-top: 10px;
+  padding-right: 10px;
+}
+
+.btn-close {
+  margin-left: 10px;
+  height: 30px;
+}
+</style>

package/src/component/forms/CheckboxGroup.vue

@@ -5,6 +5,7 @@
         v-model="selected"
         :options="options"
         :stacked="stacked"
+        disabled-field="disabled"
         @click.native="execute"
       ></b-form-checkbox-group>
     </b-form-group>
@@ -61,6 +62,12 @@ export default {
       },
       deep: true,
     },
+    initialValue: {
+      handler(value) {
+        if (this.initialValue) this.selected = this.initialValue;
+      },
+      deep: true,
+    },
   },
 };
 </script>

package/src/component/forms/CheckboxSimple.vue

@@ -20,6 +20,10 @@ export default {
     formName: String,
     field: String,
     value: Boolean,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -35,7 +39,7 @@ export default {
     },
     valueLocal() {
       this.$emit("input", this.valueLocal);
-      this.updateFormDirty(true);
+      if (this.markFormDirty) this.updateFormDirty(true);
     },
   },
 };

package/src/component/forms/DateTime.vue

@@ -65,17 +65,21 @@ export default {
     "range",
     "confirm",
     "confirmText",
+    "markFormDirty",
   ],
   data() {
     return {
       notifications: [],
       formDirty: false,
       valueLocal: "",
+      markFormDirtyLocal: false,
     };
   },
   created() {
     this.validate();
     this.valueLocal = this.value;
+
+    if (this.markFormDirty == undefined) this.markFormDirtyLocal = true;
   },
   methods: {
     ...mapMutations("validation", [
@@ -116,7 +120,7 @@ export default {
     valueLocal() {
       this.validate();
       this.formDirty = true;
-      this.updateFormDirty(true);
+      if (this.markFormDirtyLocal) this.updateFormDirty(true);
       this.$emit("input", this.valueLocal);
     },
     value() {

package/src/component/forms/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-div-button">
+  <div class="side-by-side main-dropdown">
     <div class="dropdown">
       <button
         class="button dropbtn"
@@ -16,26 +16,34 @@
           disabled: disabled,
         }"
         :disabled="disabled"
-        @click="mostrarEsconder()"
+        @click="toggle()"
       >
-        {{ title }} <i :class="classIcon"></i>
+        {{ title }}
+        <span class="icon-dropdown"><i :class="classIcon"></i></span>
       </button>
       <div
         v-show="show"
         class="text-left dropdown-content"
+        :style="'right:' + right"
         @mouseleave="show = false"
       >
-        <Molded>
+        <Molded :borderRadius="15">
           <div v-for="item in items" :key="item.eventName">
             <div
-              v-if="visivel(item.condicaoVisibilidade)"
               :style="item.style"
               class="item"
               @click="execute(item.eventName)"
             >
-              <i :class="item.classIcon"></i>
-              <span class="title"> {{ item.title }}</span>
+              <b-row>
+                <b-col sm="1">
+                  <i :class="item.classIcon"></i>
+                </b-col>
+                <b-col sm="10">
+                  <span class="title"> {{ item.title }}</span>
+                </b-col>
+              </b-row>
             </div>
+            <hr v-if="item.hr" class="hr-dropdown" />
           </div>
         </Molded>
       </div>
@@ -49,6 +57,7 @@ import Molded from "../layout/Molded.vue";
 import { mapMutations } from "vuex";
 
 export default {
+  name: "Dropdown",
   components: { Molded },
   name: "Button",
   props: {
@@ -56,8 +65,12 @@ export default {
     type: String,
     classIcon: String,
     size: String,
+    right: {
+      type: String,
+      default: "0",
+    },
     disabled: Boolean,
-    eventData: Object,
+    param: Object,
     items: Array,
   },
   data() {
@@ -67,31 +80,36 @@ export default {
   },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
-    mostrarEsconder() {
+    toggle() {
       this.show = this.show ? false : true;
     },
     execute(eventName) {
-      this.mostrarEsconder();
-      this.addEvent({
-        nome: eventName,
-        data: this.eventData,
-      });
-    },
-    visivel(condicaoVisibilidade) {
-      // se for undefined, quer dizer que não tem condicional, então pode show
-      if (condicaoVisibilidade == undefined) return true;
-
-      var verifica = `this.eventData.${condicaoVisibilidade}`;
-      if (eval(verifica)) return true;
+      this.toggle();
+      this.addEvent({ name: eventName, data: this.param });
     },
   },
 };
 </script>
 
 <style scoped>
+.main-dropdown {
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+}
+
+.hr-dropdown {
+  background: #fafafc !important;
+  height: 1px !important;
+  margin: 0px !important;
+}
+
 .item {
   cursor: pointer;
-  padding: 5px;
+  padding-bottom: 5px;
+}
+
+.icon-dropdown {
+  margin-left: 5px;
 }
 
 .item:hover {
@@ -105,22 +123,22 @@ export default {
 .dropdown {
   position: relative;
   display: inline-block;
+  margin-left: 5px;
+  min-width: 30px;
 }
 
 .dropdown-content {
-  display: block;
   position: absolute;
-  margin-top: 10px;
-  right: 0;
+  margin-top: 1px;
   background-color: #ffffff;
-  min-width: 260px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 15px;
+  min-width: 250px;
   z-index: 1000;
 }
 
 .dropdown-content a {
   color: black;
-  padding: 12px 16px;
+  padding: 10px 15px;
   text-decoration: none;
   display: block;
 }
@@ -142,13 +160,13 @@ export default {
 }
 
 .small {
-  padding: 5px 10px;
+  padding: 3px 7px;
   font-size: 13px;
 }
 
 .medium {
   padding: 7px 12px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .large {

package/src/component/forms/ImageUpload.vue

@@ -14,8 +14,9 @@
       <b-col sm="12">
         <div class="div-preview">
           <img
-            :style="'width:120;height:100px'"
-            :src="'https://espaco.blob.core.windows.net/nixloc-photo-product/' + urlImage"
+            :class="classCss"
+            :style="'width:100px;height:100px'"
+            :src="'https://espaco.blob.core.windows.net/' + container + '/' + urlImage"
           />
         </div>
         <div>
@@ -31,7 +32,9 @@
           <div v-else>
             <div class="div-button">
               <button class="button small danger" v-if="!loadingAdd" @click="remove()">
-                <span v-if="!loadingRemove"><i class="fas fa-camera"></i> Remover Foto</span>
+                <span v-if="!loadingRemove"
+                  ><i class="fas fa-camera"></i> Remover Foto</span
+                >
                 <vue-loading
                   v-if="loadingRemove"
                   type="bubbles"
@@ -70,6 +73,7 @@ export default {
     title: String,
     container: String,
     accepted: String,
+    classCss:String,
     urlPost: String,
     urlRemove: String,
     onLoad: Function,
@@ -216,7 +220,11 @@ export default {
   margin-bottom: 10px;
 }
 
+.img-round {
+  border-radius: 50px;
+}
+
 .div-button {
-  margin-left: 18px;
+  margin-left: 5px;
 }
 </style>

package/src/component/forms/IncrementDecrement.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="wrapper">
+      <span class="minus" @click="decrement">-</span>
+      <span class="num" @click="showEdit = true" v-if="!showEdit">{{
+        number
+      }}</span>
+      <input
+        class="input"
+        type="number"
+        @keyup.enter.prevent="showEdit = false"
+        v-model="number"
+        v-if="showEdit"
+      />
+      <span @click="showEdit = false" v-if="showEdit"
+        ><i class="fa-solid fa-check"></i
+      ></span>
+      <span class="plus" @click="increment">+</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IncrementDecrement",
+  props: ["value", "min", "max"],
+  data() {
+    return {
+      number: 1,
+      showEdit: false,
+    };
+  },
+  mounted() {
+    this.number = this.value;
+  },
+  methods: {
+    increment() {
+      this.number++;
+    },
+    decrement() {
+      this.number--;
+    },
+  },
+  watch: {
+    number: {
+      handler(number) {
+        if (this.min)
+          if (this.number < this.min) {
+            this.number = this.min;
+            return;
+          }
+        if (this.max)
+          if (this.number > this.max) {
+            this.number = this.max;
+            return;
+          }
+        this.$emit("input", this.number);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.input {
+  width: 40px;
+  border: none;
+  text-align: center;
+}
+
+.wrapper {
+  height: 37px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #eaedf3;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
+}
+.wrapper span {
+  width: 100%;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+}
+.wrapper span.num {
+  font-size: 17px;
+  border-right: 1px solid #eaedf3;
+  border-left: 1px solid #eaedf3;
+  cursor: pointer;
+  color: #3f529b;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.wrapper span.num:hover {
+  text-decoration: underline;
+  transition: 0.1s;
+}
+</style>

package/src/component/forms/InputDecimal.vue

@@ -6,11 +6,15 @@
       <Tip :field="field" :formName="formName" />
     </label>
     <div class="inner-addon right-addon">
-      <i
+      <div
+        class="required glyphicon"
         v-if="notifications.length > 0 && formDirty"
-        class="required glyphicon fas fa-exclamation-triangle"
-      ></i>
+      >
+        <i class="fas fa-exclamation-triangle"></i>
+      </div>
+      <slot v-else></slot>
       <vue-numeric
+        :style="_style"
         class="form-control"
         v-on:keyup.enter.native="pressedEnter"
         :class="{ 'is-invalid': notifications.length > 0 && formDirty }"
@@ -46,6 +50,11 @@ export default {
     disabled: Boolean,
     placeholder: String,
     formName: String,
+    _style: String,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
     required: Boolean,
     value: Number,
     enter: Function,
@@ -93,9 +102,9 @@ export default {
     },
     valueLocal() {
       this.validate();
-      this.formDirty = true;
-      this.updateFormDirty(true);
       this.$emit("input", this.valueLocal);
+      this.formDirty = true;
+      if (this.markFormDirty) this.updateFormDirty(true);
     },
     notifications() {
       let self = this;
@@ -135,4 +144,7 @@ export default {
   color: #f0134d;
   font-size: 14px;
 }
+.margin-button {
+  margin-top: -2px;
+}
 </style>