layers-design-system 2.0.11 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "layers-design-system",
   "main": "src/main.js",
-  "version": "2.0.11",
+  "version": "2.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/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/index.vue

@@ -63,37 +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 } from './helpers/addProtocol.js'
-import removeEmptyTags from './helpers/removeEmptyTags.js'
-import DOMPurify from 'dompurify'
-import Autolinker from 'autolinker'
+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,
@@ -111,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) {
@@ -189,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 = Autolinker.link(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 };
     },
   },
 
@@ -299,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/main.js

@@ -1,80 +1,92 @@
-import lang from 'element-ui/lib/locale/lang/pt-br'
-import locale from 'element-ui/lib/locale'
-import 'dayjs/locale/pt-br'
-import dayjs from 'dayjs'
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
+import lang from "element-ui/lib/locale/lang/pt-br";
+import locale from "element-ui/lib/locale";
+import "dayjs/locale/pt-br";
+import dayjs from "dayjs";
+import localizedFormatPlugin from "dayjs/plugin/localizedFormat";
 
-import './style/main.scss'
-import Colors from './helpers/Colors'
-import Icons from './helpers/Icons'
-import Schemas from './helpers/Schemas'
-import Notification from './helpers/Notification'
-import FieldTypeComponents from './helpers/FieldTypeComponents'
-import RegisterElementUIComponents from './helpers/RegisterElementUIComponents'
+import "./style/main.scss";
+import Colors from "./helpers/Colors";
+import Icons from "./helpers/Icons";
+import Schemas from "./helpers/Schemas";
+import Notification from "./helpers/Notification";
+import FieldTypeComponents from "./helpers/FieldTypeComponents";
+import RegisterElementUIComponents from "./helpers/RegisterElementUIComponents";
 
 // Vant
-import Vant from 'vant'
-import 'vant/lib/index.css'
+import Vant from "vant";
+import "vant/lib/index.css";
 // Zoomer
-import VueZoomer from 'vue-zoomer'
+import VueZoomer from "vue-zoomer";
 
-const LayersDesignSystem = {}
-LayersDesignSystem.install = function(Vue) {
-  Vue.prototype.$L = {}
+const LayersDesignSystem = {};
+LayersDesignSystem.install = function (Vue) {
+  Vue.prototype.$L = {};
 
-  Vue.use(Vant)
-  Vue.use(VueZoomer)
-  Vue.use(Colors)
-  Vue.use(Icons)
-  Vue.use(Schemas)
-  Vue.use(FieldTypeComponents)
-  Vue.use(RegisterElementUIComponents)
+  Vue.use(Vant);
+  Vue.use(VueZoomer);
+  Vue.use(Colors);
+  Vue.use(Icons);
+  Vue.use(Schemas);
+  Vue.use(FieldTypeComponents);
+  Vue.use(RegisterElementUIComponents);
 
-  locale.use(lang)
-  dayjs.extend(localizedFormatPlugin)
+  locale.use(lang);
+  dayjs.extend(localizedFormatPlugin);
 
   Vue.mixin({
     mounted() {
-      this.__layers_addClassName()
+      this.__layers_addClassName();
     },
     updated() {
-      this.__layers_addClassName()
+      this.__layers_addClassName();
     },
     methods: {
       __layers_addClassName() {
         if (!this.__layers_addedClassName) {
-          const tagName = this.$options.tagName || ''
+          const tagName = this.$options.tagName || "";
           if (/^l-/.test(tagName) && this.$el.classList) {
-            this.$el.classList.add(tagName)
+            this.$el.classList.add(tagName);
           }
-          // this.__layers_addedClassName = true
         }
       },
     },
-  })
+  });
 
-  Vue.prototype.$notify = function(params) {
-    const isClickable = params.onClick && params.onClick instanceof Function
+  Vue.prototype.$notify = function (params) {
+    const isClickable = params.onClick && params.onClick instanceof Function;
     const customClasses = [
       params.customClass,
       params.type,
-      !params.customClass && !params.type && 'default',
-      isClickable && 'cursor-pointer',
-    ]
+      !params.customClass && !params.type && "default",
+      isClickable && "cursor-pointer",
+    ];
 
     return Notification({
       ...params,
-      customClass: customClasses.filter((customClass) => customClass).join(' '),
-    })
-  }
+      customClass: customClasses.filter((customClass) => customClass).join(" "),
+    });
+  };
 
-  const requireComponent = require.context('./components', true, /index.vue$/)
-  requireComponent.keys().forEach((path) => {
-    const component = requireComponent(path).default
-    if (!component.tagName) throw new Error(`Missing tagName for ${path}`)
-    Vue.component(component.tagName, component)
-  })
-}
+  if (typeof require !== "undefined") {
+    const requireComponent = require.context(
+      "./components",
+      true,
+      /index.vue$/
+    );
+    requireComponent.keys().forEach((path) => {
+      const component = requireComponent(path).default;
+      if (!component.tagName) throw new Error(`Missing tagName for ${path}`);
+      Vue.component(component.tagName, component);
+    });
+  } else {
+    const components = import.meta.glob("./components/**/index.vue", {
+      eager: true,
+    });
+    for (const componentModule of Object.values(components)) {
+      Vue.component(componentModule.default.tagName, componentModule.default);
+    }
+  }
+};
 
-export { Notification }
-export default LayersDesignSystem
+export { Notification };
+export default LayersDesignSystem;