layers-design-system 2.0.4 → 2.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "layers-design-system",
   "main": "src/main.js",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "scripts": {
     "start": "vue-cli-service serve ./src/main-docs.js",
     "build": "vue-cli-service build --target lib ./src/main.js",
@@ -26,14 +26,12 @@
     "@tiptap/extension-text": "2.0.0-beta.13",
     "@tiptap/extension-underline": "2.0.0-beta.16",
     "@tiptap/vue-2": "2.0.0-beta.60",
-    "core-js": "^3.25.2",
     "currency.js": "1.2.2",
+    "dayjs": "^1.11.7",
     "dompurify": "2.3.3",
     "element-ui": "2.15.6",
     "layers-utils": "1.0.4",
-    "moment": "2.29.1",
     "mustache": "4.2.0",
-    "sass-loader": "7.3.1",
     "tiptap": "1.32.2",
     "url-regex-safe": "2.0.2",
     "vant": "2.12.30",
@@ -43,6 +41,7 @@
     "vuetify": "2.5.10"
   },
   "devDependencies": {
+    "sass-loader": "7.3.1",
     "@vue/cli-plugin-babel": "4.5.14",
     "@vue/cli-plugin-eslint": "4.5.14",
     "@vue/cli-service": "4.5.14",

package/src/components/LAlert/docs.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import _ from "lodash";
+import pickBy from "lodash/pickBy";
 
 export default {
   name: "Alert",
@@ -74,7 +74,7 @@ export default {
   methods: {
     fetchQuery() {
       // Pick only values that are not empty string
-      return _.pickBy(this.query, val => (val === "" ? false : true));
+      return pickBy(this.query, val => (val === "" ? false : true));
     }
   }
 };

package/src/components/LAlert/index.vue

@@ -1,8 +1,8 @@
 <script>
   import { Alert } from 'element-ui';
 
-  import _ from 'lodash'
-  const Base = _.clone(Alert);
+  import clone from 'lodash/clone'
+  const Base = clone(Alert);
   delete Base.computed.iconClass;
 
   const TYPE_CLASSES_MAP = {

package/src/components/LCheckbox/index.vue

@@ -2,7 +2,7 @@
 import { Checkbox } from "element-ui";
 export default {
   tagName: "l-checkbox",
-  extends: Checkbox
+  extends: Checkbox,
 };
 </script>
 <style>
@@ -11,21 +11,18 @@ export default {
 .l-checkbox .el-checkbox__inner {
   transition: none !important;
   box-sizing: border-box;
-  border-width: 2px;
   border-color: var(--color-gray-50);
   width: 16px;
   height: 16px;
 }
 
-.l-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
-  border-width: 0;
-}
-
 .l-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
   border-width: 2px;
   width: 5px;
   height: 12px;
-  top: -1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   left: 5px;
   border-color: var(--white);
 }
@@ -34,4 +31,4 @@ export default {
   height: 4px;
   top: 4px;
 }
-</style>
+</style>

package/src/components/LCheckboxGroup/index.vue

@@ -2,8 +2,8 @@
   import { getColor } from '../../helpers/Colors'
   import { CheckboxGroup } from 'element-ui';
 
-  import _ from 'lodash'
-  const Base = _.clone(CheckboxGroup);
+  import clone from 'lodash/clone'
+  const Base = clone(CheckboxGroup);
   delete Base.props.fill;
 
   export default {

package/src/components/LPresentation/docs.vue

@@ -1,36 +1,35 @@
 <template>
-    <div id="app">
-      <h1>Presentation</h1>
-      <l-presentation @close="toggleDialog" :value="dialog" color="#BAEAF8" image="https://cdn.staging.layers.digital/staging/uploads/32e16adb-2cd5-4284-8ee8-ba5531a31bee/Notification.png">
-        <slot slot="content">
-          Agora é possível administrar suas notificações. Diga como e por quais apps você deseja ser notificado em <strong>Notificações.</strong>
-        </slot>
-        <l-button @click="toggleDialog" style="width: fit-content; margin-top: 20px;">Apresentação por dialog</l-button>
-      </l-presentation>
-      <l-presentation @close="toggleTooltip" :isTooltip="true" :value="tooltip" placement="right" color="#BAEAF8" image="https://cdn.staging.layers.digital/staging/uploads/32e16adb-2cd5-4284-8ee8-ba5531a31bee/Notification.png">
-        <slot slot="content">
-            Administre suas notificações. Diga como e por quais apps você deseja ser notificado, acesse a aba de <strong>Notificações.</strong>
-        </slot>
-        <l-button @click="toggleTooltip" style="width: fit-content; margin-top: 20px;">Apresentação por tooltip</l-button>
-      </l-presentation>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: "Presentation",
-    data: () => ({
-      tooltip: false,
-      dialog: false
-    }),
-    methods: {
-      toggleTooltip() {
-        this.tooltip = !this.tooltip;
-      },
-      toggleDialog() {
-        this.dialog = !this.dialog;
-      }
+  <div id="app">
+    <h1>Presentation</h1>
+    <l-presentation @close="toggleDialog" :value="dialog" color="#BAEAF8" :image="require('../../assets/l-presentation/notification.png')">
+      <slot slot="content">
+        Agora é possível administrar suas notificações. Diga como e por quais apps você deseja ser notificado em <strong>Notificações.</strong>
+      </slot>
+      <l-button @click="toggleDialog" style="width: fit-content; margin-top: 20px;">Apresentação por dialog</l-button>
+    </l-presentation>
+    <l-presentation @close="toggleTooltip" mode="cover" :isTooltip="true" :value="tooltip" placement="right" color="#BAEAF8" :image="require('../../assets/l-presentation/external-apps.png')">
+      <slot slot="content">
+          Administre suas notificações. Diga como e por quais apps você deseja ser notificado, acesse a aba de <strong>Notificações.</strong>
+      </slot>
+      <l-button @click="toggleTooltip" style="width: fit-content; margin-top: 20px;">Apresentação por tooltip</l-button>
+    </l-presentation>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Presentation",
+  data: () => ({
+    tooltip: false,
+    dialog: false
+  }),
+  methods: {
+    toggleTooltip() {
+      this.tooltip = !this.tooltip;
+    },
+    toggleDialog() {
+      this.dialog = !this.dialog;
     }
-  };
-  </script>
-  
+  }
+};
+</script>

package/src/components/LPresentation/index.vue

@@ -1,22 +1,28 @@
 <template>
-    <l-tooltip v-if="isTooltip" ref="tooltip" :placement="placement" effect="light" :value="value" manual tooltipClass="l-presentation-popper">
+    <l-tooltip v-if="isTooltip" ref="tooltip" :placement="placement" effect="light" :value="value" manual
+        :tooltipClass="['l-presentation-popper', tooltipClass]">
         <div class="tooltip-content" slot="content">
-            <div class="image" :style="{'background-color': color}">
-                <img :src="image" width="240" height="120" draggable="false" alt="Presentation">
+            <div class="image-container" :style="{ 'background-color': color }">
+                <img :src="image" :class="['l-presentation-image', mode]" draggable="false" alt="Presentation">
                 <l-button @click="close" class="close-button" fab icon="uil-times" size="mini" type="info" />
             </div>
-            <p><slot name="content" /></p>
-        </div> 
+            <p>
+                <slot name="content" />
+            </p>
+        </div>
         <slot />
     </l-tooltip>
     <div v-else>
-        <l-dialog :visible.sync="value" :before-close="close" >
-            <div slot="title" class="image" :style="{'background-color': color}">
-                <img :src="image" width="280" height="160" draggable="false" alt="Presentation">
+        <l-dialog :visible.sync="value" :before-close="close">
+            <div slot="title" class="image-container" :style="{ 'background-color': color }">
+                <img :src="image" :class="['l-presentation-image', mode]" width="280" height="160" draggable="false"
+                    alt="Presentation">
             </div>
             <div class="tooltip-content">
-                <p><slot name="content" /></p>
-            </div> 
+                <p>
+                    <slot name="content" />
+                </p>
+            </div>
         </l-dialog>
         <slot />
     </div>
@@ -47,6 +53,15 @@ export default {
         isTooltip: {
             type: Boolean,
             default: false
+        },
+        mode: {
+            type: String,
+            default: "contain",
+            required: false
+        },
+        tooltipClass: {
+            type: String,
+            required: false
         }
     },
     watch: {
@@ -75,33 +90,45 @@ export default {
     border-radius: 2px;
     max-width: 330px;
 }
-.image {
+
+.image-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: auto;
-    padding: 20px;
     position: relative;
     border-radius: 20px 20px 0 0;
+    overflow: hidden;
+}
+
+.l-presentation-image {
+    height: 100%;
+    width: 100%;
+}
+
+.contain {
+    object-fit: contain !important;
 }
-.image img {
-    object-fit: contain;
+
+.cover {
+    object-fit: cover !important;
 }
+
 .tooltip-content .close-button {
     position: absolute;
-    width: 25px!important;
-    height: 25px!important;
-    padding-top: 8px!important;
-    padding-left: 8px!important;
+    width: 25px !important;
+    height: 25px !important;
+    padding-top: 8px !important;
+    padding-left: 8px !important;
     top: 20px;
     right: 20px;
     background: rgba(0, 0, 0, 0.25);
 }
+
 .tooltip-content .close-button i {
     margin-top: 1px;
 }
+
 .tooltip-content p {
-    width: auto;
     padding: 20px;
     padding-bottom: 30px;
     margin: 0;
@@ -110,6 +137,7 @@ export default {
     word-wrap: break-word;
 }
 </style>
+
 <style>
 .l-presentation-popper {
     padding: 0 !important;
@@ -119,26 +147,31 @@ export default {
     user-select: none;
     --popper-arrow: #FFF;
 }
+
 .l-presentation-popper .popper__arrow {
     border-width: 0 !important;
-    
 }
+
 .l-presentation-popper .popper__arrow::after {
     border-right-color: var(--popper-arrow) !important;
 }
+
 .l-presentation .el-dialog {
     max-width: 80%;
     width: 330px;
     overflow: hidden;
     border-radius: 2px;
 }
+
 .l-presentation .el-dialog__header {
     padding: 0 !important;
     border: none;
 }
+
 .l-presentation .el-dialog__header .image {
     border-radius: 0px;
 }
+
 .l-presentation .el-dialog__body {
     padding: 0 !important;
     border: none;
@@ -146,4 +179,4 @@ export default {
     margin-top: 10px;
     text-align: center;
 }
-</style>
+</style>

package/src/components/LRadioGroup/index.vue

@@ -3,8 +3,8 @@
 
   import { RadioGroup } from 'element-ui';
 
-  import _ from 'lodash'
-  const Base = _.clone(RadioGroup);
+  import clone from 'lodash/clone'
+  const Base = clone(RadioGroup);
   delete Base.props.fill;
 
   export default {

package/src/components/LSearchBar/AddFilterButton.vue

@@ -30,7 +30,10 @@
   </l-dropdown>
 </template>
 <script>
-import _ from "lodash";
+
+import find from "lodash/find"
+import get from "lodash/get"
+import filter from "lodash/filter"
 
 export default {
   name: "AddFilterButton",
@@ -46,14 +49,14 @@ export default {
       this.$emit("addFilter", filter);
     },
     hasFilterFor(path) {
-      return _.find(this.filters, { path });
+      return find(this.filters, { path });
     }
   },
   computed: {
     availableOptions() {
-      if (!_.get(this.schema, "fields", []).length === 0) return [];
+      if (!get(this.schema, "fields", []).length === 0) return [];
 
-      return _.filter(
+      return filter(
         this.schema.fields,
         option => option.filterable && !this.hasFilterFor(option.path)
       );

package/src/components/LSearchBar/Filters/Editors/NumberEditor.vue

@@ -41,7 +41,7 @@
 </template>
 <script>
 import Vue from "vue";
-import { get } from "lodash";
+import get from "lodash/get";
 
 export default {
   model: {

package/src/components/LSearchBar/Filters/Editors/StringEditor.vue

@@ -41,7 +41,7 @@
 </template>
 <script>
 import Vue from "vue";
-import { get } from "lodash";
+import get from "lodash/get";
 
 export default {
   model: {

package/src/components/LSearchBar/Filters/Views/DateView.vue

@@ -6,8 +6,8 @@
   </span>
 </template>
 <script>
-import moment from "moment";
-import { get } from "lodash";
+import get from "lodash/get";
+import dayjs from 'dayjs';
 
 export default {
   model: {
@@ -39,7 +39,7 @@ export default {
         return `${this.filter.value} ${this.filter.value > 1 ? 'dias' : 'dia'}`
       }
       const format = get(this.schema, 'options.format', 'LL')
-      return moment(this.filter.value).format(format)
+      return dayjs(this.filter.value, { locale: 'pt-br' }).format(format)
     }
   }
 };

package/src/components/LSearchBar/docs.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import _ from "lodash";
+import pickBy from "lodash/pickBy";
 
 export default {
   name: "SearchBar",
@@ -53,7 +53,7 @@ export default {
   methods: {
     fetchQuery() {
       // Pick only values that are not empty string
-      return _.pickBy(this.query, val => (val === "" ? false : true));
+      return pickBy(this.query, val => (val === "" ? false : true));
     }
   }
 };

package/src/components/LSearchBar/index.vue

@@ -43,7 +43,12 @@
   </div>
 </template>
 <script>
-import _ from "lodash";
+import get from "lodash/get";
+import cloneDeep from "lodash/cloneDeep";
+import isEqual from "lodash/isEqual";
+import findIndex from "lodash/findIndex";
+import find from "lodash/find";
+
 import AddFilterButton from "./AddFilterButton";
 import FilterChip from "./Filters/FilterChip";
 
@@ -51,12 +56,12 @@ export default {
   tagName: "l-search-bar",
   model: {
     prop: "value",
-    event: "change"
+    event: "change",
   },
   props: {
     availableModes: {
       type: Array,
-      default: () => ["simple"]
+      default: () => ["simple"],
     },
     value: {
       type: Object,
@@ -64,15 +69,15 @@ export default {
         return {
           mode: this.availableModes[0],
           queryText: "",
-          filters: []
+          filters: [],
         };
-      }
+      },
     },
     schema: {
       type: Object,
       default: () => {
-        return {}
-      }
+        return {};
+      },
     },
     disabled: {
       type: Boolean,
@@ -81,40 +86,40 @@ export default {
   },
   data() {
     return {
-      mode: _.get(this.value, "mode", this.availableModes[0]),
-      queryText: _.get(this.value, "queryText", ""),
-      filters: _.cloneDeep(_.get(this.value, "filters", []))
+      mode: get(this.value, "mode", this.availableModes[0]),
+      queryText: get(this.value, "queryText", ""),
+      filters: cloneDeep(get(this.value, "filters", [])),
     };
   },
   watch: {
     value(newValue) {
-      this.mode = _.get(newValue, "mode", this.availableModes[0])
-      this.queryText = _.get(newValue, "queryText", "")
+      this.mode = get(newValue, "mode", this.availableModes[0]);
+      this.queryText = get(newValue, "queryText", "");
 
-      const newFilters = _.get(newValue, "filters", [])
-      if (!_.isEqual(this.filters, newFilters)) {
-        this.filters = _.cloneDeep(newFilters)
+      const newFilters = get(newValue, "filters", []);
+      if (!isEqual(this.filters, newFilters)) {
+        this.filters = cloneDeep(newFilters);
       }
     },
     queryValue: {
       deep: true,
       handler(newValue) {
         if (this.isValid) {
-          this.$emit("change", _.cloneDeep(newValue));
+          this.$emit("change", cloneDeep(newValue));
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     getFilterSchema(filter) {
       const { path } = filter;
-      return _.find(this.schema.fields, { path });
+      return find(this.schema.fields, { path });
     },
     addFilter(option) {
       this.filters.push(Object.assign({}, option));
     },
     removeFilter(filter) {
-      const index = _.findIndex(this.filters, filter);
+      const index = findIndex(this.filters, filter);
       this.$delete(this.filters, index);
     },
     clear() {
@@ -128,24 +133,24 @@ export default {
         default:
           throw new Error(`Unknown mode ${this.mode}`);
       }
-    }
+    },
   },
   computed: {
     queryValue() {
       return {
         mode: this.mode,
         queryText: this.queryText,
-        filters: this.filters
+        filters: this.filters,
       };
     },
     isValid() {
-      return this.filters.filter(filter => !filter.valid).length === 0;
+      return this.filters.filter((filter) => !filter.valid).length === 0;
     },
     availableModesOptions() {
       return [
         { icon: "uil-search", value: "simple", title: "Filtro simples" },
-        { icon: "uil-filter", value: "advanced", title: "Filtro avançado" }
-      ].filter(option => this.availableModes.includes(option.value));
+        { icon: "uil-filter", value: "advanced", title: "Filtro avançado" },
+      ].filter((option) => this.availableModes.includes(option.value));
     },
     showClearButton() {
       switch (this.mode) {
@@ -156,12 +161,12 @@ export default {
         default:
           throw new Error(`Unknown mode ${this.mode}`);
       }
-    }
+    },
   },
   components: {
     AddFilterButton,
-    FilterChip
-  }
+    FilterChip,
+  },
 };
 </script>
 <style lang="scss">
@@ -229,7 +234,7 @@ export default {
   border-color: #c8d0d8 !important;
   background: #f5f7fa;
   &:hover {
-    cursor: not-allowed
+    cursor: not-allowed;
   }
 }
-</style>
+</style>

package/src/components/LSearchTopics/TopicItem.vue

@@ -112,7 +112,7 @@
   </div>
 </template>
 <script>
-import { cloneDeep } from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { errorHandler } from 'layers-utils'
 export default {
   props: {

package/src/components/LSearchTopics/docs/drawer.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 export default {
   name: 'Drawer',
 
@@ -100,12 +100,12 @@ export default {
   },
   methods: {
     pushToRecentTopicsSearched(term) {
-      const clone = _.cloneDeep(this.recentTopicsSearchedData)
+      const clone = cloneDeep(this.recentTopicsSearchedData)
       clone.push(term)
       this.recentTopicsSearchedData = clone
     },
     removeFromRecentTopicsSearched(term) {
-      const clone = _.cloneDeep(this.recentTopicsSearchedData)
+      const clone = cloneDeep(this.recentTopicsSearchedData)
       const indexToRemove = clone.findIndex((v) => v === term)
       clone.splice(indexToRemove, 1)
       this.recentTopicsSearchedData = clone

package/src/components/LSearchTopics/header.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import { get } from 'lodash'
+import get from 'lodash/get'
 
 export default {
   props: {

package/src/components/LSearchTopics/index.vue

@@ -176,10 +176,16 @@
 </template>
 
 <script>
+import cloneDeep from 'lodash/cloneDeep'
+import get from "lodash/get"
+import filter from 'lodash/filter'
+import debounce from 'lodash/debounce'
+import keys from 'lodash/keys'
+import difference from 'lodash/difference'
+
 import TopicItemGroup from './TopicItem.vue'
 import RecentTermSearched from './RecentTermSearched.vue'
 import SearchTopicsHeader from './header.vue'
-import { cloneDeep, get, filter, debounce, keys, difference } from 'lodash'
 import showDialogConfirmation from './helpers/showDialogConfirmation'
 import showDiscardChangesDialog from './helpers/showDiscardChangesDialog'
 import { errorHandler } from 'layers-utils'

package/src/components/LSwitch/index.vue

@@ -1,8 +1,8 @@
 <script>
-  import _ from "lodash";
+  import clone from "lodash/clone";
   import { Switch } from 'element-ui';
 
-  const Base = _.clone(Switch);
+  const Base = clone(Switch);
   delete Base.props.activeIconClass;
 
   export default {

package/src/components/LTable/FieldTypes/DateView.vue

@@ -2,8 +2,8 @@
   <span>{{ $options.methods.formatValue(props.value, props.schema) }}</span>
 </template>
 <script>
-import { get } from "lodash";
-import moment from "moment";
+import get from "lodash/get";
+import dayjs from "dayjs"
 
 export default {
   props: ["value", "schema"],
@@ -11,7 +11,7 @@ export default {
     formatValue(value, schema) {
       if (!value) return "-"
       const format = get(schema, 'options.format', 'dd/MM/yyyy hh:mm:ss')
-      return moment(value).format(format)
+      return dayjs(value, { locale: 'pt-br' }).format(format)
     }
   }
 };

package/src/components/LTable/FieldTypes/StringView.vue

@@ -6,7 +6,7 @@
   <span v-else>{{ props.value }}</span>
 </template>
 <script>
-import { get } from "lodash";
+import get from "lodash/get";
 import Mustache from "mustache";
 
 export default {

package/src/components/LTable/LTableBody.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script>
-import { get } from "lodash";
+import get from "lodash/get";
 
 export default {
   props: {

package/src/components/LTable/helpers.js

@@ -1,4 +1,5 @@
-import { flatten, uniq } from "lodash";
+import flatten from "lodash/flatten";
+import uniq from "lodash/uniq";
 
 export function changeSelection({ key, selected }, tableComponent) {
   let { loadedPages, allowInvertedSelection, includedIds, excludedIds, multiselect, itemToId = (id) => id } = tableComponent

package/src/components/LTooltip/index.vue

@@ -1,8 +1,8 @@
 <script>
-import _ from "lodash";
+import clone from "lodash/clone";
 import { Tooltip } from "element-ui";
 
-const Base = _.clone(Tooltip);
+const Base = clone(Tooltip);
 delete Base.props.popperClass;  // Hack to overwrite base component prop
 
 export default {

package/src/main.js

@@ -1,6 +1,8 @@
 import lang from 'element-ui/lib/locale/lang/pt-br'
 import locale from 'element-ui/lib/locale'
-import moment from 'moment'
+import 'dayjs/locale/pt-br'
+import dayjs from 'dayjs'
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 
 import './style/main.scss'
 import Colors from './helpers/Colors'
@@ -29,7 +31,7 @@ LayersDesignSystem.install = function(Vue) {
   Vue.use(RegisterElementUIComponents)
 
   locale.use(lang)
-  moment.locale('pt-br')
+  dayjs.extend(localizedFormatPlugin)
 
   Vue.mixin({
     mounted() {

package/vue.config.js

@@ -1,14 +1,14 @@
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
+const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
 
 module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        prependData: `@import "./src/style/main.scss";`
-      }
-    }
+        prependData: `@import "./src/style/main.scss";`,
+      },
+    },
   },
   configureWebpack: {
-    plugins: [new HardSourceWebpackPlugin()]
-  }
-}
+    plugins: [new HardSourceWebpackPlugin()],
+  },
+};