layers-design-system 1.0.119 → 1.2.0

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/layers-core-design-system.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/layers-core-design-system.iml" filepath="$PROJECT_DIR$/.idea/layers-core-design-system.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "layers-design-system",
   "main": "src/main.js",
-  "version": "1.0.119",
+  "version": "1.2.0",
   "scripts": {
     "start": "vue-cli-service serve ./src/main-docs.js",
     "build": "vue-cli-service build --target lib ./src/main.js",

package/src/components/LButton/docs.vue

@@ -172,7 +172,6 @@
           <l-button type="primary" icon="el-icon-arrow-left">Previous Page</l-button>
           <l-button type="primary">
             Next Page
-            <i class="el-icon-arrow-right el-icon-right"></i>
           </l-button>
         </l-button-group>
       </div>

package/src/components/LCarousel/docs.vue

@@ -0,0 +1,32 @@
+<template>
+  <div style="display: flex; flex: 1 1 auto; max-width: 80%">
+    <l-carousel  :images="demoImages"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Carousel',
+    data: function() {
+      return {
+        demoImages: [
+        {
+          name: "Imagem 1",
+          id: "1",
+          src: "https://image.shutterstock.com/image-photo/panoramic-background-wide-old-red-600w-1642362355.jpg",
+        },
+        {
+          name: "Imagem 2",
+          id: "2",
+          src: "https://image.shutterstock.com/image-photo/panoramic-background-wide-old-red-600w-1642362355.jpg",
+        },
+        {
+          name: "Imagem 3",
+          id: "3",
+          src: "https://image.shutterstock.com/image-photo/panoramic-background-wide-old-red-600w-1642362355.jpg",
+        }
+      ]
+      }
+    }
+  }
+</script>

package/src/components/LCarousel/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="carousel">
+    <l-button class="slider-control" circle icon="uil-angle-left" style="left: 1em;" @click="previous" v-if="selected > 0"></l-button>
+    <div class="slider-container">
+      <div v-for="(image, index) of images" :key="image.index"
+        class="slide" :ref="`img:${index}`">
+        <div class="img-container">
+          <img :src="image.src" :height="height" :width="width" style="border-radius: 10px;"/>
+        </div>
+      </div>
+    </div>
+    <l-button class="slider-control" circle icon="uil-angle-right" style="right: 1em;" @click="next" v-if="selected < images.length - 1"></l-button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  tagName: 'l-carousel',
+  name: 'Lcarousel',
+  props:['images', 'height', 'width'],
+  data: function() {
+    return {
+      selected: 0
+    }
+  },
+  methods: {
+    previous() {
+      this.selected--
+      const el = this.$refs[`img:${this.selected}`]
+      el[0].scrollIntoView({ behavior: 'smooth' })
+    },
+    next() {
+      this.selected++
+      const el = this.$refs[`img:${this.selected}`]
+      el[0].scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.carousel {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  max-width: 100%;
+  position: relative;
+}
+
+.slider-container {
+  height: 100%;
+  padding-bottom: 1em;
+  padding-top: 1em;
+  position: relative;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  display: flex;
+  flex-direction: row;
+}
+
+.slide {
+  display: flex;
+  height: 100%;
+  min-width: 80%;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+}
+.slide + .slide {
+  margin-left: 1rem;
+}
+
+.slider-control {
+  position: absolute;
+  top: 50%;
+  z-index: 999;
+  height: 24px;
+  width: 24px
+}
+
+.img-container {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

package/src/components/LTable/docs.vue

@@ -30,6 +30,7 @@
       :selectable="selectable"
       :autoLoadMore="false"
       pagination
+      limitPerPage="10"
       :style="{'--l-table-primary-color': 'var(--color-aqua)'}"
     />
   </div>
@@ -89,7 +90,7 @@ export default {
       const total = 451
 
       var items = [];
-      for (var i = offset; i < offset + Math.min(total - offset, 50); i++) {
+      for (var i = offset; i < offset + Math.min(total - offset, limit); i++) {
         items.push({ id: i, code: "#" + (i + 1), "dueAt": new Date(), price: {amount: i * 50}, customer: {name: "Teste da Silva"}, status: "paid" });
       }
 

package/src/components/LTable/index.vue

@@ -260,6 +260,14 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    /**
+     * If set, will load this number of rows at a time
+     */
+    limitPerPage: {
+      type: Number,
+      default: 50,
+    },
   },
 
   mounted() {
@@ -275,7 +283,6 @@ export default {
 
       // Internal identification for hole state of loaded pages
       id: 0,
-      perPage: 50,
       extraRows: 15,
 
       lastComputedOffsetY: 0,
@@ -310,6 +317,11 @@ export default {
   },
 
   computed: {
+
+    perPage() {
+      return this.limitPerPage;
+    },
+
     pagesCount() {
       return Math.floor(this.totalCount / this.perPage) + 1;
     },

package/src/components/LTextEditor/FloatingLink.vue

@@ -10,7 +10,7 @@
         rel="nofollow noopener noreferrer"
         style="display: inline"
         :href="dataLink"
-        open-delay="125"
+        :open-delay="tooltipDelay"
       >
         {{ dataLink }}
       </a>
@@ -20,7 +20,7 @@
       v-for="(button, idx) in boxButtons"
       :key="idx"
       :content="button.tooltip"
-      open-delay="125"
+      :open-delay="tooltipDelay"
     >
       <l-icon
         size="20"
@@ -50,6 +50,7 @@ export default {
           event: 'remove',
         },
       ],
+      tooltipDelay: 125,
     }
   },
 

package/src/components/LTextEditor/index.vue

@@ -24,7 +24,7 @@
             :key="markUp.name"
             :content="markUp.tooltip"
             class="item"
-            open-delay="125"
+            :open-delay="tooltipDelay"
           >
             <l-button
               @click="markUpText(markUp.name)"
@@ -157,6 +157,7 @@ export default {
       ],
       showLinkBox: false,
       isEditorFocused: null,
+      tooltipDelay: 125,
     }
   },
 
@@ -223,7 +224,7 @@ export default {
 
     addSpaceToFinalParagraphTag(text) {
       return text.replace(/<\/p>/g, ' </p>')
-    }
+    },
   },
 
   computed: {
@@ -238,12 +239,9 @@ export default {
       const textEditorHTMLSpaced = this.addSpaceToFinalParagraphTag(textEditorHTML)
       const textEditorHTMLWithLinks = mountLink(textEditorHTMLSpaced)
 
-      return DOMPurify.sanitize(
-        removeEmptyTags(textEditorHTMLWithLinks),
-        {
-          ADD_ATTR: ['target'],
-        }
-      )
+      return DOMPurify.sanitize(removeEmptyTags(textEditorHTMLWithLinks), {
+        ADD_ATTR: ['target'],
+      })
     },
     currentTextSelection() {
       const { view, state } = this.editor