@nixweb/nixloc-ui 0.0.201 → 0.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.201",
+  "version": "0.0.203",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/Button.vue

@@ -71,7 +71,7 @@ export default {
   cursor: pointer;
   border: none;
   min-width: 33px;
-  border-radius: 40px !important;
+  border-radius: 30px !important;
   font-size: 13px !important;
   font-weight: 400;
   letter-spacing: 1px !important;

package/src/component/forms/ButtonFilter.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
     <div class="btn-container side-by-side text-center">
-      <div
-        v-for="option in options"
-        class="btn-item side-by-side"
-        :class="{ selected: option.value == selected }"
-        @click="execute(option)"
-        :key="option.title"
-      >
+      <div v-for="option in options" class="btn-item-button-filter side-by-side"
+        :class="{ 'selected-button-filter': option.value == selected }" @click="execute(option)" :key="option.title">
         <i :class="option.classIcon"></i>
         <span class="btn-title">{{ option.title }}</span>
       </div>
@@ -61,7 +56,7 @@ export default {
   margin-left: 10px;
 }
 
-.btn-item {
+.btn-item-button-filter {
   margin-top: 5px;
   margin-left: 10px;
   margin-right: 10px;
@@ -70,9 +65,9 @@ export default {
   cursor: pointer;
 }
 
-.selected {
+.selected-button-filter {
   background-color: #4BB4E2;
-  color:white;
+  color: white;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 15px;

package/src/component/forms/CheckboxGroup.vue

@@ -1,13 +1,9 @@
 <template>
   <div>
-    <b-form-group :label="title">
-      <b-form-checkbox-group
-        v-model="selected"
-        :options="options"
-        :stacked="stacked"
-        disabled-field="disabled"
-        @click.native="execute"
-      ></b-form-checkbox-group>
+    <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>

package/src/component/forms/CheckboxSimple.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
-      {{ title }}
+      <span class="title">{{ title }}</span>
       <Tip :field="field" :formName="formName" />
     </b-form-checkbox>
   </div>

package/src/component/forms/Dropdown.vue

@@ -1,53 +1,36 @@
 <template>
   <div class="side-by-side main-dropdown">
     <div class="dropdown">
-      <button
-        class="button dropbtn"
-        :class="{
-          small: size === 'small',
-          medium: size === 'medium',
-          large: size === 'large',
-          primary: type === 'primary',
-          success: type === 'success',
-          warning: type === 'warning',
-          info: type === 'info',
-          edit: type === 'edit',
-          danger: type === 'danger',
-          disabled: disabled,
-        }"
-        :disabled="disabled"
-        @click="toggle()"
-      >
+      <button class="button dropbtn" :class="{
+        small: size === 'small',
+        medium: size === 'medium',
+        large: size === 'large',
+        primary: type === 'primary',
+        success: type === 'success',
+        warning: type === 'warning',
+        info: type === 'info',
+        edit: type === 'edit',
+        danger: type === 'danger',
+        disabled: disabled,
+      }" :disabled="disabled" @click="toggle()">
         {{ 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"
-      >
+      <div v-show="show" class="text-left dropdown-content" :style="'right:' + right" @mouseleave="show = false">
         <Molded :borderRadius="15">
           <div v-for="item in items" :key="item.eventName">
-            <div
-              v-if="isVisible(item.conditionVisibility)"
-              :style="item.style"
-              class="item"
-              @click="execute(item.eventName)"
-            >
+            <div v-if="isVisible(item.conditionVisibility)" :style="item.style" class="item-dropdown"
+              @click="execute(item.eventName)">
               <b-row>
                 <b-col sm="2">
-                  <i :class="item.classIcon"></i>
+                  <i class="icon-dropdown" :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 && isVisible(item.conditionVisibility)"
-              class="hr-dropdown"
-            />
+            <hr v-if="item.hr && isVisible(item.conditionVisibility)" class="hr-dropdown" />
           </div>
         </Molded>
       </div>
@@ -114,7 +97,7 @@ export default {
   margin: 0px !important;
 }
 
-.item {
+.item-dropdown {
   cursor: pointer;
   padding-bottom: 5px;
 }
@@ -123,7 +106,7 @@ export default {
   margin-left: 5px;
 }
 
-.item:hover {
+.item-dropdown:hover {
   background-color: #fafafc;
 }
 

package/src/component/forms/EditorHtml.vue

@@ -6,16 +6,9 @@
       <Tip :field="field" :formName="formName" />
     </label>
     <div class="inner-addon right-addon">
-      <i
-        v-if="notifications.length > 0 && formDirty"
-        class="required glyphicon fas fa-exclamation-triangle"
-      ></i>
-      <vue-editor
-        v-model.trim="value"
-        :editorToolbar="customToolbar"
-        :disabled="disabled"
-        :class="{ disabled: disabled }"
-      ></vue-editor>
+      <i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
+      <vue-editor v-model.trim="value" :editorToolbar="customToolbar" :disabled="disabled"
+        :class="{ disabled: disabled }"></vue-editor>
     </div>
 
     <div v-if="formDirty">
@@ -127,6 +120,7 @@ export default {
   color: #94aa2a;
   font-size: 14px;
 }
+
 .invalid {
   color: #f0134d;
   font-size: 14px;

package/src/component/forms/InputDecimal.vue

@@ -12,7 +12,8 @@
       <slot v-else></slot>
       <vue-numeric :style="_style" class="form-control" v-on:keyup.enter.native="pressedEnter"
         :class="{ 'is-invalid': notifications.length > 0 && formDirty }" :placeholder="placeholder" :disabled="disabled"
-        currency="R$" separator="." :minus="allowNegative" v-bind:precision="2" v-model="valueLocal"></vue-numeric>
+        currency="R$" separator="." :minus="allowNegative" v-bind:precision="precision"
+        v-model="valueLocal"></vue-numeric>
     </div>
 
     <div v-if="formDirty">
@@ -39,6 +40,10 @@ export default {
     placeholder: String,
     formName: String,
     _style: String,
+    precision: {
+      type: Number,
+      default: 2,
+    },
     markFormDirty: {
       type: Boolean,
       default: true,

package/src/component/forms/InputDecimalDiscount.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
-    <InputDecimal v-if="!discount.discountByPercentage" :markFormDirty="markFormDirty" :title="title" field="discount"
-      :required="required" :formName="formName" _style="color:red;" :disabled="disabled" v-model="discount.discount">
+    <InputDecimal v-if="!discount.discountByPercentage" :markFormDirty="markFormDirty" :title="title"
+      :precision="precision" field="discount" :required="required" :formName="formName" _style="color:red;"
+      :disabled="disabled" v-model="discount.discount">
       <div class="glyphicon margin-button">
         <Button _key="btnDiscount" title="" type="primary" classIcon="fa-solid fa-brazilian-real-sign" size="small"
           :disabled="disabled" :clicked="change" />
@@ -32,7 +33,7 @@ export default {
     InputDecimal,
     Button,
   },
-  props: ["formName", "disabled", "_style", "required", "markFormDirty", "value"],
+  props: ["formName", "disabled", "_style", "required", "precision", "markFormDirty", "value"],
   data() {
     return {
       title: "Desconto em R$",

package/src/component/forms/InputTag.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div>{{ title }}
+        <div><span class="title">{{ title }}</span>
             <span class="required" v-if="required">*</span>
         </div>
         <div class="email-input-container">

package/src/component/forms/SelectStatic.vue

@@ -4,15 +4,17 @@
       <span class="title">{{ title }} </span>
       <span class="required" v-if="required">*</span>
     </label>
-    <div class="select" :class="{ border: showBorder }">
-      <multiselect @open="onOpen" @select="onSelected" @search-change="onSearch" :options="data"
-        v-model.trim="currentValue" :custom-label="label" :disabled="disabled" placeholder :showLabels="true"
-        :noResult="false" ref="multiselect" selectLabel deselectLabel selectedLabel>
-        <div slot="beforeList" class="after-list">
-          <Button v-if="showBtnClean" key="cleanSelect" title="Limpar" type="warning" classIcon="fas fa-broom"
-            size="small" :clicked="cleanSelectStatic" />
-        </div>
-      </multiselect>
+    <div>
+      <div class="select" :class="{ border: showBorder, classCss }">
+        <multiselect @open="onOpen" @select="onSelected" @search-change="onSearch" :options="data"
+          v-model.trim="currentValue" :custom-label="label" :disabled="disabled" placeholder :showLabels="true"
+          :noResult="false" ref="multiselect" selectLabel deselectLabel selectedLabel>
+          <div slot="beforeList" class="after-list">
+            <Button v-if="showBtnClean" key="cleanSelect" title="Limpar" type="warning" classIcon="fas fa-broom"
+              size="small" :clicked="cleanSelectStatic" />
+          </div>
+        </multiselect>
+      </div>
     </div>
   </div>
 </template>
@@ -27,6 +29,7 @@ export default {
   props: {
     title: String,
     formName: String,
+    classCss: String,
     field: String,
     initialFieldTarget: Object,
     fieldTarget: String,

package/src/component/layout/Alert.vue

@@ -1,28 +1,24 @@
 <template>
   <div>
-    <div
-      class="warning"
-      :class="{
-        primary: type === 'primary',
-        success: type === 'success',
-        warning: type === 'warning',
-        info: type === 'info',
-        danger: type === 'danger',
-      }"
-    >
+    <div class="warning" :class="{
+      'alert-primary': type === 'primary',
+      'alert-success': type === 'success',
+      'alert-warning': type === 'warning',
+      'alert-info': type === 'info',
+      'alert-danger': type === 'danger',
+    }">
       <span v-if="type === 'success'" class="success-icon">
         <i class="fas fa-check-circle"></i>
       </span>
       <span v-if="type === 'danger'" class="danger-icon">
-        <i class="fas fa-times-circle"></i
-      ></span>
+        <i class="fas fa-times-circle"></i></span>
       <span v-if="type === 'warning'" class="warning-icon">
-        <i class="fas fa-exclamation-triangle"></i
-      ></span>
+        <i class="fas fa-exclamation-triangle"></i></span>
       <span v-if="type === 'info'" class="info-icon">
-        <i class="fas fa-exclamation-circle"></i
-      ></span>
-      <span class="message"><slot></slot></span>
+        <i class="fas fa-exclamation-circle"></i></span>
+      <span class="message">
+        <slot></slot>
+      </span>
     </div>
   </div>
 </template>
@@ -54,22 +50,22 @@ export default {
   margin-left: 5px;
 }
 
-.success {
+.alert-success {
   background-color: #f6ffed !important;
   border: 1px solid #b7eb8f !important;
 }
 
-.warning {
+.alert-warning {
   background-color: #fffbe6;
   border: 1px solid #ffe58f;
 }
 
-.info {
+.alert-info {
   background-color: #e6f7ff;
   border: 1px solid #91d5ff;
 }
 
-.danger {
+.alert-danger {
   background-color: #fff1f0;
   border: 1px solid #ffa39e;
 }

package/src/component/layout/HideShow.vue

@@ -2,9 +2,9 @@
   <div>
     <div class="div-icon" :class="classCss" :style="'font-size:' + iconSize + 'px'" v-if="!show">
       <div class="icon-eye" @click="show = true">
-        <i class="fa-solid fa-circle-small"></i>
-        <i class="fa-solid fa-circle-small"></i>
-        <i class="fa-solid fa-circle-small"></i>
+        <i class="icon-separate fa-solid fa-circle-small"></i>
+        <i class="icon-separate fa-solid fa-circle-small"></i>
+        <i class="icon-separate fa-solid fa-circle-small"></i>
       </div>
     </div>
     <div class="div-icon" v-if="show" @click="show = false">
@@ -52,8 +52,11 @@ export default {
   cursor: pointer;
 }
 
-.icon-eye{
+.icon-eye {
   color: #dce3e9;
 }
 
+.icon-separate {
+  padding: 3px;
+}
 </style>

package/src/component/layout/IconMolded.vue

@@ -1,19 +1,11 @@
 <template>
   <div>
-    <div
-      v-for="icon in icons"
-      class="molded side-by-side"
-      @click="executeEvent(icon.eventName)"
-      v-b-tooltip.hover
-      :title="icon.tooltip"
-    >
-      <div
-        class="icon-molded"
-        :class="{
-          'icon-active-top': menuActive == icon.module,
-          'icon-normal-top': menuActive != icon.module,
-        }"
-      >
+    <div v-for="icon in icons" class="molded-icon side-by-side" @click="executeEvent(icon.eventName)" v-b-tooltip.hover
+      :title="icon.tooltip">
+      <div class="icon-molded-icon" :class="{
+        'icon-active-top': menuActive == icon.module,
+        'icon-normal-top': menuActive != icon.module,
+      }">
         <i :class="icon.icon"></i>
       </div>
     </div>
@@ -51,7 +43,7 @@ export default {
 </script>
 
 <style scoped>
-.molded {
+.molded-icon {
   height: 38px;
   width: 38px;
   margin-left: 10px;
@@ -59,7 +51,7 @@ export default {
   cursor: pointer;
 }
 
-.icon-molded {
+.icon-molded-icon {
   font-size: 20px;
   margin-left: 10px;
   color: white;

package/src/component/layout/Menu.vue

@@ -6,7 +6,7 @@
           <img :src="urlImage" />
         </div>
       </li>
-      <li class="molded">
+      <li class="molded-menu">
         <div class="text-center div-photo" @click="editProfile">
           <img class="photo" :src="urlPhoto" />
         </div>
@@ -20,14 +20,14 @@
                 <b-col sm="12">
                   <div class="box-icon text-center">
                     <i :class="item.icon"></i><br />
-                    <div class="div-title">{{ item.title }}</div>
+                    <div class="div-title-menu">{{ item.title }}</div>
                   </div>
                 </b-col>
               </b-row>
 
               <!--  <b-row v-if="false">
                 <b-col sm="12">
-                  <div class="div-title text-center">
+                  <div class="div-title-menu text-center">
                     <span
                       :class="{
                         'title-active': menuActive == item.module,
@@ -62,7 +62,7 @@
                     <i class="menu-icon" :style="'color:' + item.iconColor" :class="item.icon"></i>
                   </b-col>
                   <b-col sm="10">
-                    <span class="title-sub"> {{ item.title }}</span>
+                    <span class="title-sub"> {{ item.title }} </span>
                   </b-col>
                 </b-row>
               </a>
@@ -213,7 +213,7 @@ export default {
   border-radius: 18px;
 }
 
-.div-title {
+.div-title-menu {
   margin-top: -10px;
   font-size: 12.5px;
   font-weight: 300;
@@ -243,12 +243,12 @@ img {
   font-size: 15px;
 }
 
-.molded {
+.molded-menu {
   margin-top: 5px;
   margin-left: 8px;
   padding: 5px;
   padding-bottom: 1px !important;
-  background-color: white !important;
+  background-color: white;
   border: 1px solid #e8eaed;
   border-radius: 12px !important;
 }

package/src/component/layout/Tag.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="div-tag">
     <div class="tag" :class="{ 'tag-disabled': disabled }">
-      <span @click="execute()">{{ title }} <span v-if="value">:</span> {{ value }}</span>
+      <span class="title-tag" @click="execute()">{{ title }} <span v-if="value">:</span> {{ value }}</span>
       <i v-if="showButtonClose && !disabled" @click="remove()" class="icon-tag fas fa-times-circle"></i>
     </div>
   </div>

package/src/component/rental/DisplayCalculatePeriod.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span class="title">
     <span> (</span>
 
     <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.year > 0">

package/src/component/rental/DisplayPeriodRent.vue

@@ -3,8 +3,7 @@
     <span>
       <slot name="start"></slot>
     </span>
-    <span class="title-delivery" v-if="showDeliveryDevolution"
-      >{{ periodRent.deliveryDateHour }}
+    <span class="title-delivery" v-if="showDeliveryDevolution">{{ periodRent.deliveryDateHour }}
     </span>
 
     <span v-show="!showOnlyDeliveryDevolution">

package/src/component/rental/DisplayTotalization.vue

@@ -51,7 +51,6 @@ export default {
 
 .title {
   padding-left: 10px;
-  color: black !important;
   font-weight: 500;
 }
 

package/src/component/shared/Report.vue

@@ -12,7 +12,7 @@
       <br />
       <div id="printMe" class="a4 footer">
         <HeaderReport />
-        <table class="table table-responsive-xs">
+        <table class="table table-responsive-md">
           <thead>
             <tr>
               <th v-for="(obj, ind) in header" :key="ind">

package/src/component/shared/Search.vue

@@ -5,12 +5,12 @@
         <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>
+              <input class="input-search" 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="[
+                <SelectStatic classCss="select-search" 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' },
                   ]" />
@@ -72,16 +72,6 @@ export default {
 </script>
 
 <style scoped>
-.icon-search {
-  font-size: 20px;
-  color: #577696;
-  display: inline-block;
-}
-
-.input {
-  display: inline-block;
-}
-
 .margin {
   padding-top: 28px;
 }

package/src/component/shared/SelectOption.vue

@@ -4,10 +4,10 @@
       {{ title }}
     </div>
     <div class="alignment" v-for="option in options">
-      <div class="option" :style="'width:' + width + 'px; height:' + height + 'px'"
-        :class="{ selected: option.value == selected }" @click="optionSelected(option.value)">
+      <div class="select-option" :style="'width:' + width + 'px; height:' + height + 'px'"
+        :class="{ 'selected-option': option.value == selected }" @click="optionSelected(option.value)">
         <div class="text-center">
-          <span :class="{ disabled: disabled }" :style="'font-size:' + option.titleSize + 'px;'">
+          <span class="title" :class="{ disabled: disabled }" :style="'font-size:' + option.titleSize + 'px;'">
             <i v-if="size === 'small'" :class="option.icon" :style="option.iconStyle"></i>
             {{ option.title }}
           </span>
@@ -91,11 +91,11 @@ export default {
 </script>
 <style scoped>
 .div-main {
-  margin: auto;
+
   padding: 0px;
 }
 
-.option {
+.select-option {
   cursor: pointer;
   border: 1px solid #e5e4e8;
   background-color: white;
@@ -112,15 +112,15 @@ export default {
   box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
 }
 
-.alignment {
-  display: inline-block;
+.select-option:hover {
+  background-color: white;
 }
 
-.option:hover {
-  background-color: white;
+.alignment {
+  display: inline-block;
 }
 
-.selected {
+.selected-option {
   background-color: white;
   border-color: #4680a5;
 }
@@ -148,8 +148,7 @@ export default {
   opacity: 0.5;
 }
 
-.div-icon{
+.div-icon {
   margin-right: 10px;
 }
-
 </style>

package/src/component/shared/TableDraggable.vue

@@ -1,23 +1,13 @@
 <template>
   <div>
     <div class="margin">
-      <Button
-        _key="btnCancelTableDraggable"
-        title="Cancelar"
-        type="danger"
-        size="small"
-        :clicked="cancel"
-      />
-      <Button
-        _key="btnCheckMoveTableDraggable"
-        title="Confirmar"
-        type="success"
-        size="small"
-        :clicked="checkMove"
-      />
+      <Button _key="btnCancelTableDraggable" title="Cancelar" type="danger" size="small" :clicked="cancel" />
+      <Button _key="btnCheckMoveTableDraggable" title="Confirmar" type="success" size="small" :clicked="checkMove" />
     </div>
-    <i class="fa-regular fa-maximize icon-order"></i> Clique e arraste para
-    ordenar
+    <i class="fa-regular fa-maximize icon-order"></i>
+    <span class="title">
+      Clique e arraste para ordenar
+    </span>
     <table class="table table-responsive-xs">
       <thead>
         <tr>
@@ -28,7 +18,7 @@
       </thead>
       <draggable v-model="dataLocal" tag="tbody">
         <tr v-for="item in dataLocal">
-          <td class="item">
+          <td class="item-draggable">
             <i class="fa-solid fa-grip-lines icon-order"></i>
             <span v-if="item.name"> {{ item.name }}</span>
             <span class="without-group" v-else> Sem grupo</span>
@@ -111,8 +101,7 @@ export default {
   text-transform: uppercase;
 }
 
-.item {
-  background-color: #f1f4f9;
+.item-draggable {
   cursor: move;
 }
 

package/src/component/shared/TableItem.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 <style scoped>
 .field-second {
-  color: rgb(83, 82, 82) !important;
+  color: rgb(83, 82, 82);
 }
 
 .table-currency {

package/src/component/shared/Timer.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
-    {{ title }}
-    <span class="timer">{{ time }}</span> segundos...
+    <span class="title"> {{ title }}</span>
+    <span class="title timer"> {{ time }} </span>
+    <span class="title">segundos...</span>
   </div>
 </template>
 <script>

package/src/component/shared/file-manager/FileManager.vue

@@ -0,0 +1,266 @@
+<template>
+    <div>
+        <b-row>
+            <b-col sm="3">
+                <div class="file">
+                    <button class="button small primary" @click="openCamera">
+                        <span><i class="fa-regular fa-camera-web"></i> Câmera</span>
+                    </button>
+                </div>
+                <div class="file">
+                    <button class="button small primary">
+                        <span><i class="fa-solid fa-upload"></i> Carregar arquivos</span>
+                    </button>
+                    <input type="file" name="myfile" ref="file" @change="handleFileChange" multiple />
+                </div>
+            </b-col>
+            <b-col sm="9">
+                <div class="side-by-side" v-for="attachment in attachments">
+                    <div class="text-center box-file">
+                        <div v-if="attachment.extension == 'png' || attachment.extension == 'jpg'">
+                            <img class="img" :src="urlBase + attachment.fileName">
+                        </div>
+                        <div class="icon-generic" v-else>
+                            <i class="fa-light fa-file"></i>
+                            <div><span class="name">{{ attachment.name }}</span></div>
+                        </div>
+                        <div class="icon side-by-side">
+                            <i class="fa-solid fa-download"></i>
+                        </div>
+                        <div class="icon icon-close side-by-side">
+                            <i class="fa-solid fa-circle-xmark"></i>
+                        </div>
+                    </div>
+                </div>
+            </b-col>
+        </b-row>
+        <Modal title="Câmera" :width="600" :height="750" v-if="showModal('webcam')" :onHideModal="stopCamera">
+            <div class="text-center">
+                <WebCam ref="webcam" :autoplay="false" width="400" height="100%"></WebCam>
+                <br>
+                <div class="side-by-side">
+                    <button class="button primary" @click="captureImage">
+                        <i class="fa-solid fa-camera"></i>
+                        Capturar
+                    </button>
+                </div>
+            </div>
+        </Modal>
+    </div>
+</template>
+<script>
+
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { WebCam } from 'vue-cam-vision'
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+    components: {
+        WebCam,
+        Modal
+    },
+    props: {
+        baseUrl: {
+            type: String,
+            default: "https://espaco.blob.core.windows.net",
+        },
+        container: {
+            type: String,
+            default: "nixloc-attachment",
+        }
+    },
+    data() {
+        return {
+            files: [],
+            attachments: [
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    name: "screensh...",
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "txt",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    name: "screensh...",
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "txt",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "png",
+                },
+                {
+                    name: "screensh...",
+                    fileName: "T7I300FDB9_3.png",
+                    extension: "txt",
+                },
+            ],
+            captures: [],
+            imgReport: [],
+        };
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "hideModal"]),
+        handleFileChange() {
+            this.files = this.$refs.file.files;
+        },
+        openCamera() {
+            this.openModal("webcam");
+            this.startCamera();
+        },
+        startCamera() {
+            if (this.$refs.webcam) {
+                this.$refs.webcam.start();
+            }
+        },
+        stopCamera() {
+            if (this.$refs.webcam) {
+                this.$refs.webcam.stop();
+                this.hideModal();
+            }
+        },
+        captureImage() {
+            if (this.$refs.webcam) {
+                this.$refs.webcam.capture().then((base64String) => {
+                    console.log(base64String);
+                });
+            }
+        },
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal"]),
+    },
+};
+</script>
+  
+<style scoped>
+.file {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.button {
+    padding: 8px 12px;
+    cursor: pointer;
+    border: none;
+    border-radius: 40px !important;
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: 10px;
+}
+
+.primary {
+    background: #577696;
+    border-color: #577696;
+    color: #fff;
+}
+
+.primary:hover {
+    background: #355472;
+}
+
+.danger {
+    background: red;
+    border-color: red;
+    color: #fff;
+}
+
+.file input[type="file"] {
+    font-size: 100px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+}
+
+.small {
+    padding: 3px 8px;
+    font-size: 13px;
+}
+
+.box-file {
+    width: 120px !important;
+    height: 110px !important;
+    border: 1px solid #e8eaed;
+    background-color: #fff;
+    border-radius: 13px;
+    margin: 10px;
+    font-size: 23px;
+    font-weight: 400;
+    align-items: center;
+    justify-content: center;
+}
+
+.img {
+    margin: 10px;
+    width: 45px;
+    height: 45px;
+}
+
+.icon-generic {
+    font-size: 16px;
+}
+
+.name {
+    font-size: 14px;
+}
+
+.icon {
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.icon-close {
+    color: red;
+}
+
+.btn-webcam {}
+</style>
+
+  

package/src/component/shared/query-builder/DynamicComponent.vue

@@ -2,77 +2,43 @@
   <div class="vqb-rule card move">
     <div class="form-inline">
       <label :class="rule.classCss" class="mr-5">
-        <i :class="rule.icon"></i>
-        <span style="margin-left: 10px">{{ rule.title }} </span>
+        <i class="icon-query-builder" :class="rule.icon"></i>
+        <span class="title" style="margin-left: 10px">{{ rule.title }} </span>
       </label>
       <div style="margin-right: 20px">
-        <RadioGroup
-          v-if="index > 0"
-          :options="[
-            { text: 'e', value: 'and' },
-            { text: 'ou', value: 'or' },
-          ]"
-          v-model="rule.andOr"
-        />
+        <RadioGroup v-if="index > 0" :options="[
+          { text: 'e', value: 'and' },
+          { text: 'ou', value: 'or' },
+        ]" v-model="rule.andOr" />
       </div>
-      <select
-        v-if="rule.typeField == 'text' || rule.typeField == 'numeric'"
-        v-model="rule.operator"
-        class="form-control mr-2"
-      >
+      <select v-if="rule.typeField == 'text' || rule.typeField == 'numeric'" v-model="rule.operator"
+        class="select-query-builder form-control mr-2">
         <option v-for="operator in rule.operators" :key="operator">
-          {{ operator }}
+          <span>{{ operator }}</span>
         </option>
       </select>
-      <input
-        v-if="rule.typeField == 'text' || rule.typeField == 'numeric'"
-        class="form-control"
-        :type="rule.typeField == 'text' ? 'text' : 'number'"
-        placeholder="Valor"
-        v-model="rule.value"
-      />
-      <CheckboxGroup
-        v-if="rule.typeField == 'checkbox'"
-        :options="options"
-        :initialValue="rule.value"
-        v-model="rule.value"
-      />
+      <input v-if="rule.typeField == 'text' || rule.typeField == 'numeric'" class="form-control"
+        :type="rule.typeField == 'text' ? 'text' : 'number'" placeholder="Valor" v-model="rule.value" />
+      <CheckboxGroup v-if="rule.typeField == 'checkbox'" :options="options" :initialValue="rule.value"
+        v-model="rule.value" />
       <div v-if="rule.typeField == 'dateTime'">
         <div class="side-by-side">
-          <DateTime
-            :format="rule.props.format"
-            :type="rule.props.type"
-            :range="rule.props.range"
-            v-model="rule.value"
-          />
+          <DateTime :format="rule.props.format" :type="rule.props.type" :range="rule.props.range" v-model="rule.value" />
         </div>
         <div class="side-by-side margin">ou</div>
         <div class="side-by-side margin">
-          <select
-            @change="verifyCalculate"
-            v-model="rule.value[2]"
-            class="form-control mr-2"
-          >
+          <select @change="verifyCalculate" v-model="rule.value[2]" class="form-control mr-2">
             <option v-for="period in optionsPeriodCustom" :key="period">
               {{ period }}
             </option>
           </select>
         </div>
         <div v-if="rule.props.filterByField">
-          <RadioGroup
-            v-if="rule.props.filterByField"
-            :options="rule.props.filterByField"
-            v-model="rule.name"
-          />
+          <RadioGroup v-if="rule.props.filterByField" :options="rule.props.filterByField" v-model="rule.name" />
         </div>
       </div>
 
-      <Select
-        v-if="rule.typeField == 'select'"
-        :showNewRegister="false"
-        :url="rule.props.url"
-        v-model="rule.value"
-      />
+      <Select v-if="rule.typeField == 'select'" :showNewRegister="false" :url="rule.props.url" v-model="rule.value" />
       <div @click="removeRule" class="ml-auto btn-remove">
         <i class="fas fa-times"></i>
       </div>

package/src/component/shared/query-builder/SelectRule.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="selected-filter" @blur="open = false">
     <div class="selected" :class="{ open: open }" @click="open = !open">
-      {{ selected }}
+      <span class="title">{{ selected }}</span>
     </div>
     <div class="items" :class="{ hide: !open }">
       <div v-for="(options, i) of options" :key="i">
         <div @click="select(options)">
           <span :class="options.classCss">
-            <i :class="options.icon"></i>
-            <span> {{ options.title }}</span>
+            <i class="icon-query-builder" :class="options.icon"></i>
+            <span class="title"> {{ options.title }}</span>
           </span>
         </div>
       </div>

package/src/component/template/ViewTemplateReportList.vue

@@ -5,7 +5,8 @@
       <div slot="content-main">
         <b-row>
           <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="allReports.saved.length > 0">
-            <div><i class="fas fa-file-alt icon-saved"></i> Personalizado</div>
+            <div><i class="fas fa-file-alt icon-report-title icon-saved"></i> <span class="title">Personalizado</span>
+            </div>
             <hr class="hr" />
             <div class="div-molded" v-for="report in allReports.saved">
               <div>
@@ -15,7 +16,7 @@
                       <i class="fas fa-file-alt icon-report"></i>
                     </b-col>
                     <b-col sm="10" @click="navegateTo(report)">
-                      <div>{{ report.name }}</div>
+                      <div class="title-report">{{ report.name }}</div>
                     </b-col>
                     <b-col sm="1">
                       <Confirmation title="Deseja excluir?" type="danger" :data="report" :confirmed="confirmDelete">
@@ -31,7 +32,7 @@
           </b-col>
           <b-col xs="12" sm="12" md="12" lg="6" xl="6">
             <div>
-              <i class="fas fa-file-chart-line icon-default"></i> Padrão
+              <i class="fas fa-file-chart-line icon-report-title icon-default"></i> <span class="title">Padrão</span>
             </div>
             <hr class="hr" />
             <div class="div-molded" v-for="report in allReports.default">
@@ -42,7 +43,7 @@
                       <i class="fas fa-file-alt icon-report"></i>
                     </b-col>
                     <b-col sm="11" @click="navegateTo(report)">
-                      <div class="side-by-side">{{ report.name }}</div>
+                      <div class="title-report side-by-side">{{ report.name }}</div>
                     </b-col>
                   </b-row>
                 </Molded>