@nixweb/nixloc-ui 1.17.0 → 1.20.0

package/@nixweb/nixloc-ui/src/component/forms/ButtonSub.vue

@@ -1,98 +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;
-}
+<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/@nixweb/nixloc-ui/src/component/forms/ButtonToggle.vue

@@ -1,77 +1,77 @@
-<template>
-    <div>
-        <button-toggle :style="{ backgroundColor: value ? colorActive : colorInactive }" :class="buttonClass"
-            @click="handleClick">
-            <span v-if="value" class="icon-button-toggle"><i :class="classIconActive"></i></span>
-            <span v-else class="icon-button-toggle"><i :class="classIconInactive"></i></span>
-            <span v-if="value">{{ titleActive }}</span>
-            <span v-else="value">{{ titleInactive }}</span>
-        </button-toggle>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToggleButton',
-    props: {
-        titleActive: String,
-        classIconActive: String,
-        colorActive: String,
-        titleInactive: String,
-        classIconInactive: String,
-        colorInactive: String,
-        value: Number,
-        disabled: Boolean
-    },
-    computed: {
-        buttonClass() {
-            return {
-                'button-toggle': true,
-                'button-toggle--value': this.value,
-                'button-toggle--inactive': !this.value,
-                'button-toggle-disabled': this.disabled
-            };
-        },
-    },
-    methods: {
-        handleClick() {
-            if (!this.disabled) {
-                this.value = this.value == true ? false : true;
-                this.$emit("input", this.value);
-            }
-        }
-    }
-}
-</script>
-
-<style scoped>
-.button-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3px 15px;
-    border: none;
-    border-radius: 20px;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-.button-toggle--value {
-    color: white;
-}
-
-.button-toggle--inactive {
-    color: black;
-}
-
-.icon-button-toggle {
-    margin-right: 8px;
-}
-
-.button-toggle-disabled {
-    background-color: #b0b0b0;
-    opacity: 0.5;
-    cursor: not-allowed;
-}
+<template>
+    <div>
+        <button-toggle :style="{ backgroundColor: value ? colorActive : colorInactive }" :class="buttonClass"
+            @click="handleClick">
+            <span v-if="value" class="icon-button-toggle"><i :class="classIconActive"></i></span>
+            <span v-else class="icon-button-toggle"><i :class="classIconInactive"></i></span>
+            <span v-if="value">{{ titleActive }}</span>
+            <span v-else="value">{{ titleInactive }}</span>
+        </button-toggle>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToggleButton',
+    props: {
+        titleActive: String,
+        classIconActive: String,
+        colorActive: String,
+        titleInactive: String,
+        classIconInactive: String,
+        colorInactive: String,
+        value: Number,
+        disabled: Boolean
+    },
+    computed: {
+        buttonClass() {
+            return {
+                'button-toggle': true,
+                'button-toggle--value': this.value,
+                'button-toggle--inactive': !this.value,
+                'button-toggle-disabled': this.disabled
+            };
+        },
+    },
+    methods: {
+        handleClick() {
+            if (!this.disabled) {
+                this.value = this.value == true ? false : true;
+                this.$emit("input", this.value);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.button-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 15px;
+    border: none;
+    border-radius: 20px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.button-toggle--value {
+    color: white;
+}
+
+.button-toggle--inactive {
+    color: black;
+}
+
+.icon-button-toggle {
+    margin-right: 8px;
+}
+
+.button-toggle-disabled {
+    background-color: #b0b0b0;
+    opacity: 0.5;
+    cursor: not-allowed;
+}
 </style>

package/@nixweb/nixloc-ui/src/component/forms/CheckboxGroup.vue

@@ -1,69 +1,69 @@
-<template>
-  <div>
-    <span class="title">{{ title }}</span>
-    <b-form-group>
-      <b-form-checkbox-group v-model="selected" :options="options" :stacked="stacked" disabled-field="disabled"
-        @click.native="execute"></b-form-checkbox-group>
-    </b-form-group>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "CheckboxGroup",
-  props: {
-    title: String,
-    options: Array,
-    params: Object,
-    changed: Function,
-    clicked: Function,
-    initialValue: Array,
-    value: Array,
-    stacked: {
-      type: Boolean,
-      default: false,
-    },
-    markFormDirty: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      selected: [],
-    };
-  },
-  mounted() {
-    if (this.initialValue) this.selected = this.initialValue;
-  },
-  methods: {
-    ...mapMutations("validation", ["updateFormDirty"]),
-    execute(event) {
-      if (this.markFormDirty) this.updateFormDirty(true);
-      this.$emit("input", this.selected);
-      let self = this;
-      setTimeout(function () {
-        // adicionado o pointerId para prevenir que não seja executado em duplicidade
-        if (self.clicked && event.pointerId === 1) self.clicked(self.params);
-      }, 100);
-    },
-  },
-  watch: {
-    selected: {
-      handler(value) {
-        this.$emit("input", value);
-        if (this.changed) this.changed(this.params);
-      },
-      deep: true,
-    },
-    initialValue: {
-      handler(value) {
-        if (this.initialValue) this.selected = this.initialValue;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <span class="title">{{ title }}</span>
+    <b-form-group>
+      <b-form-checkbox-group v-model="selected" :options="options" :stacked="stacked" disabled-field="disabled"
+        @click.native="execute"></b-form-checkbox-group>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "CheckboxGroup",
+  props: {
+    title: String,
+    options: Array,
+    params: Object,
+    changed: Function,
+    clicked: Function,
+    initialValue: Array,
+    value: Array,
+    stacked: {
+      type: Boolean,
+      default: false,
+    },
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      selected: [],
+    };
+  },
+  mounted() {
+    if (this.initialValue) this.selected = this.initialValue;
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty"]),
+    execute(event) {
+      if (this.markFormDirty) this.updateFormDirty(true);
+      this.$emit("input", this.selected);
+      let self = this;
+      setTimeout(function () {
+        // adicionado o pointerId para prevenir que não seja executado em duplicidade
+        if (self.clicked && event.pointerId === 1) self.clicked(self.params);
+      }, 100);
+    },
+  },
+  watch: {
+    selected: {
+      handler(value) {
+        this.$emit("input", value);
+        if (this.changed) this.changed(this.params);
+      },
+      deep: true,
+    },
+    initialValue: {
+      handler(value) {
+        if (this.initialValue) this.selected = this.initialValue;
+      },
+      deep: true,
+    },
+  },
+};
+</script>