layers-design-system 2.0.10 → 2.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "layers-design-system",
   "main": "src/main.js",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "scripts": {
     "start": "vue-cli-service serve ./src/main-docs.js",
     "build": "vue-cli-service build --target lib ./src/main.js",
@@ -26,6 +26,7 @@
     "@tiptap/extension-text": "2.0.0-beta.13",
     "@tiptap/extension-underline": "2.0.0-beta.16",
     "@tiptap/vue-2": "2.0.0-beta.60",
+    "autolinker": "^4.0.0",
     "currency.js": "1.2.2",
     "dayjs": "^1.11.7",
     "dompurify": "2.3.3",
@@ -33,7 +34,6 @@
     "layers-utils": "1.0.4",
     "mustache": "4.2.0",
     "tiptap": "1.32.2",
-    "url-regex-safe": "2.0.2",
     "vant": "2.12.30",
     "vue": "2.6.14",
     "vue-router": "3.5.2",
@@ -41,7 +41,6 @@
     "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",
@@ -50,6 +49,7 @@
     "eslint-plugin-vue": "5.2.3",
     "hard-source-webpack-plugin": "0.13.1",
     "sass": "1.43.2",
+    "sass-loader": "7.3.1",
     "vue-cli-plugin-element": "1.0.1",
     "vue-cli-plugin-vuetify": "2.4.3",
     "vue-template-compiler": "2.6.14",

package/src/components/LNotification/index.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script>
-  import LIcon from '../LIcon'
+  import LIcon from '../LIcon/index.vue'
 
   let typeMap = {
     success: 'success',

package/src/components/LSearchBar/Filters/Editors/index.js

@@ -1,7 +1,7 @@
-import StringEditor from "./StringEditor";
-import AmountEditor from "./AmountEditor";
-import NumberEditor from "./NumberEditor";
-import DateEditor from "./DateEditor";
+import StringEditor from "./StringEditor.vue";
+import AmountEditor from "./AmountEditor.vue";
+import NumberEditor from "./NumberEditor.vue";
+import DateEditor from "./DateEditor.vue";
 
 import { FieldTypeComponents } from '../../../../helpers/FieldTypeComponents'
 

package/src/components/LSearchBar/Filters/Views/index.js

@@ -1,7 +1,7 @@
-import StringView from "./StringView";
-import AmountView from "./AmountView";
-import NumberView from "./NumberView";
-import DateView from "./DateView";
+import StringView from "./StringView.vue";
+import AmountView from "./AmountView.vue";
+import NumberView from "./NumberView.vue";
+import DateView from "./DateView.vue";
 
 import { FieldTypeComponents } from '../../../../helpers/FieldTypeComponents'
 

package/src/components/LSearchBar/index.vue

@@ -49,8 +49,8 @@ import isEqual from "lodash/isEqual";
 import findIndex from "lodash/findIndex";
 import find from "lodash/find";
 
-import AddFilterButton from "./AddFilterButton";
-import FilterChip from "./Filters/FilterChip";
+import AddFilterButton from "./AddFilterButton.vue";
+import FilterChip from "./Filters/FilterChip.vue";
 
 export default {
   tagName: "l-search-bar",

package/src/components/LTable/FieldTypes/index.js

@@ -1,8 +1,8 @@
-import StringView from "./StringView";
-import NumberView from "./NumberView";
-import AmountView from "./AmountView";
-import EmailView from "./EmailView";
-import DateView from "./DateView";
+import StringView from "./StringView.vue";
+import NumberView from "./NumberView.vue";
+import AmountView from "./AmountView.vue";
+import EmailView from "./EmailView.vue";
+import DateView from "./DateView.vue";
 
 import { FieldTypeComponents } from '../../../helpers/FieldTypeComponents'
 

package/src/components/LTable/LTableHeader.vue

@@ -31,8 +31,8 @@
 </template>
 
 <script>
-import LTableHeaderCell from "./LTableHeaderCell";
-import LTableHeaderLoader from "./LTableHeaderLoader";
+import LTableHeaderCell from "./LTableHeaderCell.vue";
+import LTableHeaderLoader from "./LTableHeaderLoader.vue";
 
 export default {
   components: { LTableHeaderCell, LTableHeaderLoader },

package/src/components/LTable/LTableHeaderCell.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import LTableHeaderResizer from "./LTableHeaderResizer";
+import LTableHeaderResizer from "./LTableHeaderResizer.vue";
 
 export default {
   components: { LTableHeaderResizer },

package/src/components/LTable/index.vue

@@ -78,13 +78,13 @@
 import FieldTypes from "./FieldTypes";
 FieldTypes.register();
 
-import LTableBody from "./LTableBody";
-import LTableHeader from "./LTableHeader";
-import LTableEndspace from "./LTableEndspace"
-import LTableLoadMore from "./LTableLoadMore";
-import LTableReloader from "./LTableReloader";
-import LTableBodySpacer from "./LTableBodySpacer";
-import LTablePagination from "./LTablePagination";
+import LTableBody from "./LTableBody.vue";
+import LTableHeader from "./LTableHeader.vue";
+import LTableEndspace from "./LTableEndspace.vue"
+import LTableLoadMore from "./LTableLoadMore.vue";
+import LTableReloader from "./LTableReloader.vue";
+import LTableBodySpacer from "./LTableBodySpacer.vue";
+import LTablePagination from "./LTablePagination.vue";
 
 import {changeSelection} from './helpers'
 

package/src/components/LTextEditor/LinkBox.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script>
-import urlRegex from 'url-regex-safe'
-import { addProtocol } from './helpers/manageLinks'
+import Autolinker from 'autolinker'
+import { addProtocol } from './helpers/addProtocol'
 
 export default {
   props: {
@@ -57,7 +57,10 @@ export default {
     },
 
     isLinkValid(link) {
-      return urlRegex({ exact: true }).test(link)
+      const validating = Autolinker.link(link, {
+        email: false,
+      })
+      return validating.includes('href')
     },
   },
 

package/src/components/LTextEditor/helpers/addProtocol.js

@@ -0,0 +1,5 @@
+export function addProtocol(link) {
+  return link.startsWith('http://') || link.startsWith('https://')
+    ? link
+    : 'https://' + link
+}

package/src/components/LTextEditor/index.vue

@@ -63,36 +63,36 @@
 </template>
 
 <script>
-import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
-import Document from '@tiptap/extension-document'
-import Text from '@tiptap/extension-text'
-import ListItem from '@tiptap/extension-list-item'
+import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-2";
+import Document from "@tiptap/extension-document";
+import Text from "@tiptap/extension-text";
+import ListItem from "@tiptap/extension-list-item";
 
 //Layers Custom Extensions
-import LayersParagraph from './extensions/LayersParagraph'
-import LayersBold from './extensions/LayersBold'
-import LayersItalic from './extensions/LayersItalic'
-import LayersUnderline from './extensions/LayersUnderline'
-import LayersHeading from './extensions/LayersHeading'
-import LayersBulletList from './extensions/LayersBulletList'
-import LayersOrderedList from './extensions/LayersOrderedList'
-import LayersBlockquote from './extensions/LayersBlockquote'
-import LayersLink from './extensions/LayersLink'
-import LayersPlaceholder from './extensions/LayersPlaceholder'
-import LayersBreakLine from './extensions/LayersBreakLine'
-import LayersHistory from './extensions/LayersHistory'
+import LayersParagraph from "./extensions/LayersParagraph";
+import LayersBold from "./extensions/LayersBold";
+import LayersItalic from "./extensions/LayersItalic";
+import LayersUnderline from "./extensions/LayersUnderline";
+import LayersHeading from "./extensions/LayersHeading";
+import LayersBulletList from "./extensions/LayersBulletList";
+import LayersOrderedList from "./extensions/LayersOrderedList";
+import LayersBlockquote from "./extensions/LayersBlockquote";
+import LayersLink from "./extensions/LayersLink";
+import LayersPlaceholder from "./extensions/LayersPlaceholder";
+import LayersBreakLine from "./extensions/LayersBreakLine";
+import LayersHistory from "./extensions/LayersHistory";
 
 //Custom Components
-import LinkBox from './LinkBox'
-import FloatingLink from './FloatingLink.vue'
+import LinkBox from "./LinkBox.vue";
+import FloatingLink from "./FloatingLink.vue";
 
 //Helpers
-import { getTagA, mountLink } from './helpers/manageLinks.js'
-import removeEmptyTags from './helpers/removeEmptyTags.js'
-import DOMPurify from 'dompurify'
+import removeEmptyTags from "./helpers/removeEmptyTags.js";
+import DOMPurify from "dompurify";
+import Autolinker from "autolinker";
 
 export default {
-  tagName: 'l-text-editor',
+  tagName: "l-text-editor",
 
   props: {
     value: String,
@@ -110,77 +110,77 @@ export default {
       editor: null,
       markUps: [
         {
-          name: 'bold',
-          tooltip: 'Negrito',
-          icon: 'uil-bold',
+          name: "bold",
+          tooltip: "Negrito",
+          icon: "uil-bold",
         },
         {
-          name: 'italic',
-          tooltip: 'Itálico',
-          icon: 'uil-italic',
+          name: "italic",
+          tooltip: "Itálico",
+          icon: "uil-italic",
         },
         {
-          name: 'underline',
-          tooltip: 'Sublinhado',
-          icon: 'uil-underline',
+          name: "underline",
+          tooltip: "Sublinhado",
+          icon: "uil-underline",
         },
         {
-          name: 'heading',
-          tooltip: 'Título',
-          icon: require('../../assets/button-text-editor/title.svg'),
+          name: "heading",
+          tooltip: "Título",
+          icon: require("../../assets/button-text-editor/title.svg"),
         },
         {
-          name: 'bulletList',
-          tooltip: 'Lista com marcadores',
-          icon: 'uil-list-ul',
+          name: "bulletList",
+          tooltip: "Lista com marcadores",
+          icon: "uil-list-ul",
         },
         {
-          name: 'orderedList',
-          tooltip: 'Lista numerada',
-          icon: 'uil-list-ol-alt',
+          name: "orderedList",
+          tooltip: "Lista numerada",
+          icon: "uil-list-ol-alt",
         },
         {
-          name: 'link',
-          tooltip: 'Inserir link',
-          icon: 'uil-link-alt',
+          name: "link",
+          tooltip: "Inserir link",
+          icon: "uil-link-alt",
         },
         {
-          name: 'blockquote',
-          tooltip: 'Citação',
-          icon: require('../../assets/button-text-editor/double-quotes.svg'),
+          name: "blockquote",
+          tooltip: "Citação",
+          icon: require("../../assets/button-text-editor/double-quotes.svg"),
         },
         {
-          name: 'removeFormatting',
-          tooltip: 'Remover formatação',
-          icon: require('../../assets/button-text-editor/remove-formatting.svg'),
+          name: "removeFormatting",
+          tooltip: "Remover formatação",
+          icon: require("../../assets/button-text-editor/remove-formatting.svg"),
         },
       ],
       showLinkBox: false,
       isEditorFocused: null,
       tooltipDelay: 125,
-    }
+    };
   },
 
   methods: {
     isUnicon(value) {
-      return value.startsWith('uil-')
+      return value.startsWith("uil-");
     },
 
     markUpText(type) {
-      if (type === 'link') {
-        this.toggleLinkBox()
-        return
+      if (type === "link") {
+        this.toggleLinkBox();
+        return;
       }
-      const commandChain = this.editor.chain().focus()
-      commandChain.setMarkUp(type).run()
+      const commandChain = this.editor.chain().focus();
+      commandChain.setMarkUp(type).run();
     },
 
     toggleLinkBox() {
-      this.showLinkBox = !this.showLinkBox
+      this.showLinkBox = !this.showLinkBox;
     },
     closeLinkBox() {
-      this.editor.commands.focus()
-      this.toggleLinkBox()
+      this.editor.commands.focus();
+      this.toggleLinkBox();
     },
 
     markUpLink(info) {
@@ -188,91 +188,89 @@ export default {
         this.editor
           .chain()
           .focus()
-          .extendMarkRange('link')
-          .setLink({ href: info.url, target: '_blank' })
-          .run()
+          .extendMarkRange("link")
+          .setLink({ href: info.url, target: "_blank" })
+          .run();
       } else {
-        this.editor.commands.insertContent(getTagA(info.url, info.insertedText))
+        this.editor.commands.insertContent(Autolinker.link(info.insertedText));
       }
     },
     markOffLink() {
-      this.editor
-        .chain()
-        .focus()
-        .extendMarkRange('link')
-        .unsetLink()
-        .run()
+      this.editor.chain().focus().extendMarkRange("link").unsetLink().run();
     },
 
     hasSomeMarkUpActive() {
-      const textEditorContent = this.editor.getJSON().content
-      const textEditorMarkUps = this.markUps.map((markUp) => markUp.name)
+      const textEditorContent = this.editor.getJSON().content;
+      const textEditorMarkUps = this.markUps.map((markUp) => markUp.name);
 
-      const textNodesActive = textEditorContent.map((node) => node.type)
+      const textNodesActive = textEditorContent.map((node) => node.type);
 
       const hasSomeNode = textNodesActive.some((node) =>
         textEditorMarkUps.includes(node)
-      )
+      );
       const hasSomeMark = textEditorContent.some((node) => {
-        if (node.hasOwnProperty('content')) {
-          return node.content.some((content) => content.hasOwnProperty('marks'))
+        if (node.hasOwnProperty("content")) {
+          return node.content.some((content) =>
+            content.hasOwnProperty("marks")
+          );
         }
-      })
+      });
 
-      return hasSomeNode || hasSomeMark
+      return hasSomeNode || hasSomeMark;
     },
 
     addSpaceToFinalParagraphTag(text) {
-      return text.replace(/<\/p>/g, ' </p>')
+      return text.replace(/<\/p>/g, " </p>");
     },
   },
 
   computed: {
     previousURL() {
-      return this.editor.getAttributes('link').href
+      return this.editor.getAttributes("link").href;
     },
     showFloatingLink() {
-      return this.editor.isActive('link')
+      return this.editor.isActive("link");
     },
     finalText() {
-      const textEditorHTML = this.editor.getHTML()
-      const textEditorHTMLSpaced = this.addSpaceToFinalParagraphTag(textEditorHTML)
-      const textEditorHTMLWithLinks = mountLink(textEditorHTMLSpaced)
+      const textEditorHTML = this.editor.getHTML();
+      const textEditorHTMLSpaced =
+        this.addSpaceToFinalParagraphTag(textEditorHTML);
+      const textEditorHTMLWithLinks = Autolinker.link(textEditorHTMLSpaced);
 
       return DOMPurify.sanitize(removeEmptyTags(textEditorHTMLWithLinks), {
-        ADD_ATTR: ['target'],
-      })
+        ADD_ATTR: ["target"],
+      });
     },
     currentTextSelection() {
-      const { view, state } = this.editor
-      const { from, to } = view.state.selection
-      return state.doc.textBetween(from, to, '')
+      const { view, state } = this.editor;
+      const { from, to } = view.state.selection;
+      return state.doc.textBetween(from, to, "");
     },
     arrowXPosition() {
-      const arrowWidth = 16.8 //px
-      const buttonLink = this.$refs.link[0].$el
+      const arrowWidth = 16.8; //px
+      const buttonLink = this.$refs.link[0].$el;
 
       //formula to position the arrow based on the button link position
       const arrowLeftOffset =
-        buttonLink.offsetLeft + (buttonLink.offsetWidth - arrowWidth) / 2
-      return { left: `${arrowLeftOffset}px` }
+        buttonLink.offsetLeft + (buttonLink.offsetWidth - arrowWidth) / 2;
+      return { left: `${arrowLeftOffset}px` };
     },
     linkBoxPosition() {
-      const linkBoxWidth = 456 //px
-      const textEditorWidth = this.$refs.texteditor.$el.offsetWidth
-      const buttonLink = this.$refs.link[0].$el
-      let linkBoxLeftOffset
-      const overflowLimit = 500
+      const linkBoxWidth = 456; //px
+      const textEditorWidth = this.$refs.texteditor.$el.offsetWidth;
+      const buttonLink = this.$refs.link[0].$el;
+      let linkBoxLeftOffset;
+      const overflowLimit = 500;
 
       if (textEditorWidth > overflowLimit) {
         //formula to position the link box based on the screen width
-        linkBoxLeftOffset = `${buttonLink.offsetLeft +
-          buttonLink.offsetWidth / 2 -
-          linkBoxWidth / 2}px`
+        linkBoxLeftOffset = `${
+          buttonLink.offsetLeft + buttonLink.offsetWidth / 2 - linkBoxWidth / 2
+        }px`;
       } else {
-        linkBoxLeftOffset = '1rem'
+        linkBoxLeftOffset = "1rem";
       }
-      return { left: linkBoxLeftOffset }
+      return { left: linkBoxLeftOffset };
     },
   },
 
@@ -298,23 +296,23 @@ export default {
       content: this.value,
       autofocus: false,
       onUpdate: () => {
-        this.$emit('input', this.finalText)
-        this.$emit('useMarkUp', this.hasSomeMarkUpActive())
+        this.$emit("input", this.finalText);
+        this.$emit("useMarkUp", this.hasSomeMarkUpActive());
       },
       onFocus: () => {
-        this.isEditorFocused = true
-        this.$emit('focus', true)
+        this.isEditorFocused = true;
+        this.$emit("focus", true);
       },
       onBlur: () => {
-        this.isEditorFocused = false
+        this.isEditorFocused = false;
       },
-    })
+    });
   },
 
   beforeDestroy() {
-    this.editor.destroy()
+    this.editor.destroy();
   },
-}
+};
 </script>
 
 <style scoped>

package/src/components/LTextEditor/helpers/manageLinks.js

@@ -1,60 +0,0 @@
-const urlRegex = require('url-regex-safe')
-
-const customUrlRegex = new RegExp(
-  '((href=")?)' +
-  urlRegex({
-    localhost: false,
-    apostrophes: false,
-    returnString: true,
-  }) +
-  ' ((</a>)?)',
-  'g'
-)
-
-function mountTagA(url) {
-  const href = addProtocol(url)
-  return getTagA(removeAnchorTag(href), url)
-}
-
-export function getTagA(href, insertedText) {
-  return `<a target="_blank" rel="noopener noreferrer nofollow" class="color-link" 
-  style="text-decoration: underline" href="${href}">${insertedText}</a>`
-}
-
-function removeAnchorTag(string) {
-  return string.replace("</a>", "")
-}
-
-export function addProtocol(link) {
-  return link.startsWith('http://') || link.startsWith('https://')
-    ? link
-    : 'https://' + link
-}
-
-export function mountLink(text) {
-  // Regular expression to match email addresses
-  const emailRegex = /(\b[\w.%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b)/g;
-
-  // Replace each email address in text with a mailto link
-  let finalText = text.replace(emailRegex, (email) => {
-    const href = `mailto:${email}`;
-    return getTagA(href, email);
-  });
-  let match;
-
-  // Loop through the text to find and replace URLs
-  while ((match = customUrlRegex.exec(finalText)) !== null) {
-    const url = match[0];
-
-    // Skip URLs that are parto of email addresses or already within anchor tags
-    if (finalText[match.index - 1] === '@' || url.startsWith('href="') || url.endsWith('</a>')) {
-      continue;
-    }
-    const finalIndex = match.index + url.length;
-    const finalUrl = mountTagA(url);
-
-    // Replace the URL with the formatted ancho tag
-    finalText = finalText.substring(0, match.index) + finalUrl + finalText.substring(finalIndex);
-  }
-  return finalText;
-}