@nixweb/nixloc-ui 0.0.128 → 0.0.129

package/src/component/shared/Search.vue

@@ -1,154 +1,154 @@
-<template>
-  <b-row>
-    <b-col xs="12" sm="12" md="12" lg="7" xl="6">
-      <div class="margin">
-        <div class="molded">
-          <b-row>
-            <b-col sm="9">
-              <input
-                type="text"
-                name="search"
-                placeholder="Pesquisar ..."
-                @keyup="verifyCleanSearch()"
-                @keyup.enter.prevent="executeSearch()"
-                v-model="search.content"
-            /></b-col>
-            <b-col sm="3">
-              <div class="div-select">
-                <SelectStatic
-                  fieldTarget="filter"
-                  :onlyQuery="true"
-                  :initialValue="{ content: 'Contém', id: 'contains' }"
-                  v-model="search.filter"
-                  :showBorder="false"
-                  :data="[
-                    { content: 'Contém', id: 'contains' },
-                    { content: 'Igual', id: 'equal' },
-                  ]"
-                />
-              </div>
-            </b-col>
-          </b-row>
-        </div>
-      </div>
-    </b-col>
-    <b-col xs="4" sm="4" md="4" lg="4" xl="4">
-      <div class="div-button">
-        <Button
-          _key="btnSearch"
-          type="info"
-          title="Buscar"
-          classIcon="fas fa-search"
-          size="small"
-          :clicked="executeSearch"
-        />
-        <Button
-          _key="btnClean"
-          type="info"
-          title="Limpar"
-          classIcon="fas fa-broom"
-          size="small"
-          :clicked="executeClean"
-        />
-      </div>
-    </b-col>
-  </b-row>
-</template>
-
-<script>
-import Button from "../forms/Button";
-import SelectStatic from "../forms/SelectStatic.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  components: { Button, SelectStatic },
-  name: "Search",
-  computed: {
-    search: {
-      get() {
-        return this.$store.state.generic.search;
-      },
-      set(value) {
-        this.updateSearch(value);
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", [
-      "updateSearch",
-      "executedSearch",
-      "clearedSearch",
-    ]),
-    executeSearch() {
-      this.executedSearch();
-    },
-    executeClean() {
-      this.clearedSearch();
-      let search = { content: "", filter: { content: "Contém", id: "contains" } };
-      this.updateSearch(search);
-    },
-    verifyCleanSearch() {
-      if (this.search.content.length == 0) this.clearedSearch();
-    },
-  },
-};
-</script>
-
-<style scoped>
-.icon-search {
-  font-size: 20px;
-  color: #577696;
-  display: inline-block;
-}
-
-.input {
-  display: inline-block;
-}
-
-.margin {
-  padding-top: 28px;
-}
-
-.div-button {
-  padding-top: 33px;
-}
-
-::placeholder {
-  color: #b8c4d2;
-}
-
-.molded {
-  width: 100%;
-  height: 45px;
-  font-size: 14px;
-  padding: 5px 8px 6px 15px;
-  background-color: rgb(255, 255, 255);
-  border: 1px solid #E5E4E8;
-  border-radius: 40px;
-  box-sizing: border-box;
-  box-shadow: none;
-  color: rgb(38, 41, 44);
-  opacity: 1;
-  transition: background-color 0.1s ease-in 0s, border 0.1s ease-in 0s;
-}
-
-input[type="text"] {
-  width: 100%;
-  height: 30px;
-  font-size: 14px;
-  border: 0px solid white;
-  background-color: rgb(255, 255, 255);
-  margin-bottom: 50px;
-}
-
-input[type="text"]:focus {
-  outline: none;
-}
-
-.div-select {
-  margin-top: -30px;
-  margin-right: 5px;
-}
-
-</style>
+<template>
+  <b-row>
+    <b-col xs="12" sm="12" md="12" lg="7" xl="6">
+      <div class="margin">
+        <div class="molded">
+          <b-row>
+            <b-col sm="9">
+              <input
+                type="text"
+                name="search"
+                placeholder="Pesquisar ..."
+                @keyup="verifyCleanSearch()"
+                @keyup.enter.prevent="executeSearch()"
+                v-model="search.content"
+            /></b-col>
+            <b-col sm="3">
+              <div class="div-select">
+                <SelectStatic
+                  fieldTarget="filter"
+                  :onlyQuery="true"
+                  :initialValue="{ content: 'Contém', id: 'contains' }"
+                  v-model="search.filter"
+                  :showBorder="false"
+                  :data="[
+                    { content: 'Contém', id: 'contains' },
+                    { content: 'Igual', id: 'equal' },
+                  ]"
+                />
+              </div>
+            </b-col>
+          </b-row>
+        </div>
+      </div>
+    </b-col>
+    <b-col xs="4" sm="4" md="4" lg="4" xl="4">
+      <div class="div-button">
+        <Button
+          _key="btnSearch"
+          type="info"
+          title="Buscar"
+          classIcon="fas fa-search"
+          size="small"
+          :clicked="executeSearch"
+        />
+        <Button
+          _key="btnClean"
+          type="info"
+          title="Limpar"
+          classIcon="fas fa-broom"
+          size="small"
+          :clicked="executeClean"
+        />
+      </div>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import Button from "../forms/Button";
+import SelectStatic from "../forms/SelectStatic.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  components: { Button, SelectStatic },
+  name: "Search",
+  computed: {
+    search: {
+      get() {
+        return this.$store.state.generic.search;
+      },
+      set(value) {
+        this.updateSearch(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "updateSearch",
+      "executedSearch",
+      "clearedSearch",
+    ]),
+    executeSearch() {
+      this.executedSearch();
+    },
+    executeClean() {
+      this.clearedSearch();
+      let search = { content: "", filter: { content: "Contém", id: "contains" } };
+      this.updateSearch(search);
+    },
+    verifyCleanSearch() {
+      if (this.search.content.length == 0) this.clearedSearch();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-search {
+  font-size: 20px;
+  color: #577696;
+  display: inline-block;
+}
+
+.input {
+  display: inline-block;
+}
+
+.margin {
+  padding-top: 28px;
+}
+
+.div-button {
+  padding-top: 33px;
+}
+
+::placeholder {
+  color: #b8c4d2;
+}
+
+.molded {
+  width: 100%;
+  height: 45px;
+  font-size: 14px;
+  padding: 5px 8px 6px 15px;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid #E5E4E8;
+  border-radius: 40px;
+  box-sizing: border-box;
+  box-shadow: none;
+  color: rgb(38, 41, 44);
+  opacity: 1;
+  transition: background-color 0.1s ease-in 0s, border 0.1s ease-in 0s;
+}
+
+input[type="text"] {
+  width: 100%;
+  height: 30px;
+  font-size: 14px;
+  border: 0px solid white;
+  background-color: rgb(255, 255, 255);
+  margin-bottom: 50px;
+}
+
+input[type="text"]:focus {
+  outline: none;
+}
+
+.div-select {
+  margin-top: -30px;
+  margin-right: 5px;
+}
+
+</style>

package/src/component/shared/Table.vue

@@ -1,163 +1,163 @@
-<template>
-  <div>
-    <table class="table table-responsive-xs">
-      <thead>
-        <tr>
-          <th class="td-checkbox" v-if="showChecks">
-            <div>
-              <b-form-checkbox v-model="selectAll" @change="select" />
-            </div>
-          </th>
-          <th v-for="(obj, ind) in header" :key="ind">
-            <div class="title-margem" :class="obj.classCssTitle">
-              <i class="fas fa-search" v-if="obj.iconSearch"></i>
-              <span class="title-header"> {{ obj.title }}</span>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <draggable
-        v-model="data"
-        tag="tbody"
-        @change="checkMove"
-        :options="{ disabled: !dragAndDrop }"
-      >
-        <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
-          <td class="td-checkbox" v-if="showChecks">
-            <div :class="{ 'center-vertical': row.photo != null }">
-              <b-form-checkbox v-model="selected" :value="row.id" />
-            </div>
-          </td>
-          <td
-            v-for="(obj, ind) in header"
-            :key="ind"
-            :class="{ 'drag-and-drop': dragAndDrop }"
-          >
-            <TableItem :obj="obj" :row="row" />
-          </td>
-        </tr>
-      </draggable>
-      <tbody v-show="data.length == 0">
-        <tr>
-          <td colspan="12">
-            <span>Nenhum registro encontrado!</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script>
-import TableItem from "@nixweb/nixloc-ui/src/component/shared/TableItem.vue";
-
-import draggable from "vuedraggable";
-
-import { mapState, mapMutations, mapActions } from "vuex";
-
-export default {
-  components: { draggable, TableItem },
-  props: {
-    header: Array,
-    data: Array,
-    showChecks: {
-      type: Boolean,
-      default: true,
-    },
-    dragAndDrop: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      selectAll: false,
-      dataDragging: [],
-    };
-  },
-  computed: {
-    ...mapState("generic", ["selected"]),
-    selected: {
-      get() {
-        return this.$store.state.generic.selected;
-      },
-      set(value) {
-        this.addSelected(value);
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", ["addSelected", "addEvent"]),
-    ...mapActions("generic", ["pdfApi"]),
-    select() {
-      this.addSelected([]);
-      if (this.selectAll) {
-        for (let i in this.data) {
-          this.selected.push(this.data[i].id);
-        }
-      }
-    },
-    checkMove() {
-      if (this.dragAndDrop) {
-        var listIds = [];
-        this.data.forEach((item) => {
-          listIds.push(item.id);
-        });
-
-        this.addEvent({
-          name: "tableDragAndDrop",
-          data: { listIds: listIds },
-        });
-      }
-    },
-  },
-  beforeDestroy() {
-    this.addSelected([]);
-  },
-};
-</script>
-
-<style scoped>
-table tbody tr td {
-  max-width: 350px;
-}
-
-.table th,
-.table td {
-  height: 10px !important;
-  padding-left: 5px !important;
-  padding-top: 7px !important;
-  padding-bottom: 5px !important;
-  padding-right: 5px !important;
-  border-bottom: 0px !important;
-}
-
-.td-checkbox {
-  width: 30px;
-}
-
-tr:hover {
-  background-color: #fafafc;
-}
-
-.title-header {
-  font-size: 13px;
-  color: #757d8c;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.table-number {
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.table-main {
-  color: #757d8c;
-  max-width: 200px;
-}
-
-.drag-and-drop {
-  cursor: move;
-}
-</style>
+<template>
+  <div>
+    <table class="table table-responsive-xs">
+      <thead>
+        <tr>
+          <th class="td-checkbox" v-if="showChecks">
+            <div>
+              <b-form-checkbox v-model="selectAll" @change="select" />
+            </div>
+          </th>
+          <th v-for="(obj, ind) in header" :key="ind">
+            <div class="title-margem" :class="obj.classCssTitle">
+              <i class="fas fa-search" v-if="obj.iconSearch"></i>
+              <span class="title-header"> {{ obj.title }}</span>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <draggable
+        v-model="data"
+        tag="tbody"
+        @change="checkMove"
+        :options="{ disabled: !dragAndDrop }"
+      >
+        <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
+          <td class="td-checkbox" v-if="showChecks">
+            <div :class="{ 'center-vertical': row.photo != null }">
+              <b-form-checkbox v-model="selected" :value="row.id" />
+            </div>
+          </td>
+          <td
+            v-for="(obj, ind) in header"
+            :key="ind"
+            :class="{ 'drag-and-drop': dragAndDrop }"
+          >
+            <TableItem :obj="obj" :row="row" />
+          </td>
+        </tr>
+      </draggable>
+      <tbody v-show="data.length == 0">
+        <tr>
+          <td colspan="12">
+            <span>Nenhum registro encontrado!</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import TableItem from "@nixweb/nixloc-ui/src/component/shared/TableItem.vue";
+
+import draggable from "vuedraggable";
+
+import { mapState, mapMutations, mapActions } from "vuex";
+
+export default {
+  components: { draggable, TableItem },
+  props: {
+    header: Array,
+    data: Array,
+    showChecks: {
+      type: Boolean,
+      default: true,
+    },
+    dragAndDrop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectAll: false,
+      dataDragging: [],
+    };
+  },
+  computed: {
+    ...mapState("generic", ["selected"]),
+    selected: {
+      get() {
+        return this.$store.state.generic.selected;
+      },
+      set(value) {
+        this.addSelected(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["addSelected", "addEvent"]),
+    ...mapActions("generic", ["pdfApi"]),
+    select() {
+      this.addSelected([]);
+      if (this.selectAll) {
+        for (let i in this.data) {
+          this.selected.push(this.data[i].id);
+        }
+      }
+    },
+    checkMove() {
+      if (this.dragAndDrop) {
+        var listIds = [];
+        this.data.forEach((item) => {
+          listIds.push(item.id);
+        });
+
+        this.addEvent({
+          name: "tableDragAndDrop",
+          data: { listIds: listIds },
+        });
+      }
+    },
+  },
+  beforeDestroy() {
+    this.addSelected([]);
+  },
+};
+</script>
+
+<style scoped>
+table tbody tr td {
+  max-width: 350px;
+}
+
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+}
+
+.td-checkbox {
+  width: 30px;
+}
+
+tr:hover {
+  background-color: #fafafc;
+}
+
+.title-header {
+  font-size: 13px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.table-number {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.table-main {
+  color: #757d8c;
+  max-width: 200px;
+}
+
+.drag-and-drop {
+  cursor: move;
+}
+</style>