layers-design-system 2.4.0 → 2.5.1

package/src/components/LTextEditor/extensions/LayersLink.js

@@ -1,29 +0,0 @@
-import Link from '@tiptap/extension-link'
-
-const defaultClass = 'color-link'
-const defaultInlineStyle = 'text-decoration: underline'
-
-const LayersLink = Link.extend({
-  defaultOptions: {
-    ...Link.options,
-    openOnClick: false,
-  },
-
-  priority: 1,
-
-  addAttributes() {
-    return {
-      class: {
-        default: defaultClass,
-        parseHTML: (a) => (a.class = defaultClass),
-      },
-      style: {
-        default: defaultInlineStyle,
-        parseHTML: (a) => (a.style = defaultInlineStyle),
-      },
-      href: { default: '' },
-    }
-  },
-})
-
-export default LayersLink

package/src/components/LTextEditor/extensions/LayersOrderedList.js

@@ -1,12 +0,0 @@
-import OrderedList from '@tiptap/extension-ordered-list'
-
-const LayersOrderedList = OrderedList.extend({
-  addAttributes() {
-    return {
-      class: { default: 'color-lead-light pl-4' },
-      style: { default: 'list-style-type: decimal' },
-    }
-  },
-})
-
-export default LayersOrderedList

package/src/components/LTextEditor/extensions/LayersParagraph.js

@@ -1,44 +0,0 @@
-import Paragraph from '@tiptap/extension-paragraph'
-
-const defaultInlineStyle = 'min-height: 1.4em; overflow-wrap: break-word;'
-
-const LayersParagraph = Paragraph.extend({
-  addAttributes() {
-    return {
-      class: { default: 'l-text-regular l-text-left color-lead-light my-3' },
-      style: {
-        default: defaultInlineStyle,
-        parseHTML: (paragraph) => (paragraph.style = defaultInlineStyle),
-      },
-    }
-  },
-
-  addCommands() {
-    return {
-      setMarkUp: (type) => ({ commands, chain }) => {
-        switch (type) {
-          case 'bold':
-            return commands.toggleBold()
-          case 'italic':
-            return commands.toggleItalic()
-          case 'underline':
-            return commands.toggleUnderline()
-          case 'heading':
-            return commands.toggleHeading({ level: 1 })
-          case 'bulletList':
-            return commands.toggleBulletList()
-          case 'orderedList':
-            return commands.toggleOrderedList()
-          case 'blockquote':
-            return commands.toggleBlockquote()
-          case 'removeFormatting':
-            return chain()
-              .unsetAllMarks()
-              .clearNodes()
-        }
-      },
-    }
-  },
-})
-
-export default LayersParagraph

package/src/components/LTextEditor/extensions/LayersPlaceholder.js

@@ -1,11 +0,0 @@
-import Placeholder from '@tiptap/extension-placeholder'
-
-const LayersPlaceholder = Placeholder.extend({
-  defaultOptions: {
-    ...Placeholder.options,
-    emptyEditorClass: 'is-editor-empty color-gray-60',
-    placeholder: 'Escreva a descrição aqui',
-  },
-})
-
-export default LayersPlaceholder

package/src/components/LTextEditor/extensions/LayersUnderline.js

@@ -1,29 +0,0 @@
-import Underline from '@tiptap/extension-underline'
-
-const defaultClass = ''
-
-const LayersUnderline = Underline.extend({
-  addAttributes() {
-    return {
-      class: {
-        default: defaultClass,
-        parseHTML: (u) => (u.style = defaultClass),
-      },
-    }
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'u',
-      },
-      {
-        style: 'border-bottom',
-        getAttrs: (borderValue) =>
-          borderValue !== undefined || borderValue !== 0,
-      },
-    ]
-  },
-})
-
-export default LayersUnderline

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

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

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

@@ -1,5 +0,0 @@
-const emptyTagRegex = /<(\w+).[^>]*>\s*<\/\1>/g
-
-export default function removeEmptyTags(text) {
-  return text.replace(emptyTagRegex, '')
-}

package/src/components/LTextEditor/index.vue

@@ -1,421 +0,0 @@
-<template>
-  <section class="wrapper-text-editor">
-    <BubbleMenu
-      :editor="editor"
-      :tippyOptions="{ zIndex: 1000 }"
-      :shouldShow="({ editor }) => editor.isActive('link')"
-      v-if="showFloatingLink"
-    >
-      <FloatingLink
-        :data-link="editor.getAttributes('link').href"
-        @edit="toggleLinkBox()"
-        @remove="markOffLink()"
-      />
-    </BubbleMenu>
-
-    <EditorContent :editor="editor" ref="texteditor" />
-    <div class="wrapper-editor-features">
-      <div class="wrapper-scroll">
-        <div
-          class="wrapper-buttons py-2 pl-3 pr-4 l-d-flex row l-d-justify-content-start l-d-align-item-center"
-        >
-          <l-tooltip
-            v-for="markUp in markUps"
-            :key="markUp.name"
-            :content="markUp.tooltip"
-            class="item"
-            :open-delay="tooltipDelay"
-          >
-            <l-button
-              @click="markUpText(markUp.name)"
-              class="button-text-editor"
-              :class="{ 'is-active': editor.isActive(markUp.name) }"
-              size="small"
-              square
-              :ref="markUp.name"
-            >
-              <l-icon
-                v-if="isUnicon(markUp.icon)"
-                size="24"
-                :icon="markUp.icon"
-              ></l-icon>
-              <img
-                v-else
-                :src="markUp.icon"
-                :class="{ 'icon-active': editor.isActive(markUp.name) }"
-              />
-            </l-button>
-          </l-tooltip>
-        </div>
-      </div>
-      <template v-if="showLinkBox">
-        <span class="link-box-arrow" :style="[arrowXPosition]" />
-        <LinkBox
-          class="link-box-position"
-          @close="closeLinkBox()"
-          @setLink="markUpLink($event)"
-          :previousURL="previousURL"
-          :style="[linkBoxPosition]"
-        />
-      </template>
-    </div>
-  </section>
-</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";
-
-//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";
-
-//Custom Components
-import LinkBox from "./LinkBox.vue";
-import FloatingLink from "./FloatingLink.vue";
-
-//Helpers
-import removeEmptyTags from "./helpers/removeEmptyTags.js";
-import DOMPurify from "dompurify";
-import Autolinker from "autolinker";
-
-export default {
-  tagName: "l-text-editor",
-
-  props: {
-    value: String,
-  },
-
-  components: {
-    EditorContent,
-    LinkBox,
-    BubbleMenu,
-    FloatingLink,
-  },
-
-  data() {
-    return {
-      editor: null,
-      markUps: [
-        {
-          name: "bold",
-          tooltip: "Negrito",
-          icon: "uil-bold",
-        },
-        {
-          name: "italic",
-          tooltip: "Itálico",
-          icon: "uil-italic",
-        },
-        {
-          name: "underline",
-          tooltip: "Sublinhado",
-          icon: "uil-underline",
-        },
-        {
-          name: "heading",
-          tooltip: "Título",
-          icon: require("../../assets/button-text-editor/title.svg"),
-        },
-        {
-          name: "bulletList",
-          tooltip: "Lista com marcadores",
-          icon: "uil-list-ul",
-        },
-        {
-          name: "orderedList",
-          tooltip: "Lista numerada",
-          icon: "uil-list-ol-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: "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-");
-    },
-
-    markUpText(type) {
-      if (type === "link") {
-        this.toggleLinkBox();
-        return;
-      }
-      const commandChain = this.editor.chain().focus();
-      commandChain.setMarkUp(type).run();
-    },
-
-    toggleLinkBox() {
-      this.showLinkBox = !this.showLinkBox;
-    },
-    closeLinkBox() {
-      this.editor.commands.focus();
-      this.toggleLinkBox();
-    },
-
-    markUpLink(info) {
-      if (this.currentTextSelection || this.previousURL) {
-        this.editor
-          .chain()
-          .focus()
-          .extendMarkRange("link")
-          .setLink({ href: info.url, target: "_blank" })
-          .run();
-      } else {
-        this.editor.commands.insertContent(Autolinker.link(info.insertedText));
-      }
-    },
-    markOffLink() {
-      this.editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    },
-
-    hasSomeMarkUpActive() {
-      const textEditorContent = this.editor.getJSON().content;
-      const textEditorMarkUps = this.markUps.map((markUp) => markUp.name);
-
-      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")
-          );
-        }
-      });
-
-      return hasSomeNode || hasSomeMark;
-    },
-
-    addSpaceToFinalParagraphTag(text) {
-      return text.replace(/<\/p>/g, " </p>");
-    },
-  },
-
-  computed: {
-    previousURL() {
-      return this.editor.getAttributes("link").href;
-    },
-    showFloatingLink() {
-      return this.editor.isActive("link");
-    },
-    finalText() {
-      const textEditorHTML = this.editor.getHTML();
-      const textEditorHTMLSpaced =
-        this.addSpaceToFinalParagraphTag(textEditorHTML);
-      const textEditorHTMLWithLinks = Autolinker.link(textEditorHTMLSpaced);
-
-      return DOMPurify.sanitize(removeEmptyTags(textEditorHTMLWithLinks), {
-        ADD_ATTR: ["target"],
-      });
-    },
-    currentTextSelection() {
-      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;
-
-      //formula to position the arrow based on the button link position
-      const arrowLeftOffset =
-        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;
-
-      if (textEditorWidth > overflowLimit) {
-        //formula to position the link box based on the screen width
-        linkBoxLeftOffset = `${
-          buttonLink.offsetLeft + buttonLink.offsetWidth / 2 - linkBoxWidth / 2
-        }px`;
-      } else {
-        linkBoxLeftOffset = "1rem";
-      }
-      return { left: linkBoxLeftOffset };
-    },
-  },
-
-  beforeMount() {
-    this.editor = new Editor({
-      extensions: [
-        Document,
-        Text,
-        ListItem,
-        LayersParagraph,
-        LayersBold,
-        LayersItalic,
-        LayersUnderline,
-        LayersHeading,
-        LayersBulletList,
-        LayersOrderedList,
-        LayersBlockquote,
-        LayersLink,
-        LayersPlaceholder,
-        LayersBreakLine,
-        LayersHistory,
-      ],
-      content: this.value,
-      autofocus: false,
-      onUpdate: () => {
-        this.$emit("input", this.finalText);
-        this.$emit("useMarkUp", this.hasSomeMarkUpActive());
-      },
-      onFocus: () => {
-        this.isEditorFocused = true;
-        this.$emit("focus", true);
-      },
-      onBlur: () => {
-        this.isEditorFocused = false;
-      },
-    });
-  },
-
-  beforeDestroy() {
-    this.editor.destroy();
-  },
-};
-</script>
-
-<style scoped>
-.wrapper-text-editor {
-  background-color: var(--white);
-  position: relative;
-}
-
-.wrapper-text-editor >>> .ProseMirror:focus {
-  outline: none;
-}
-
-.wrapper-text-editor >>> .ProseMirror {
-  min-height: 84px;
-  padding: 0 1rem;
-}
-
-.wrapper-text-editor >>> .ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  pointer-events: none;
-  height: 0;
-}
-
-hr.input-separator {
-  padding: 0px;
-  border-bottom: 1px solid;
-  border-top: 0px;
-  margin-right: -16px;
-  margin-left: -16px;
-}
-
-.wrapper-editor-features {
-  position: sticky;
-  bottom: 0;
-  z-index: 1010;
-}
-
-.wrapper-scroll {
-  border-top: 1px solid var(--color-gray-30);
-  border-bottom: 1px solid var(--color-gray-30);
-  background-color: var(--white);
-}
-
-.wrapper-buttons {
-  width: 100%;
-  position: relative;
-}
-
-.button-text-editor {
-  border-width: 0px;
-  min-width: 32px;
-  min-height: 32px;
-}
-
-.button-text-editor:hover,
-.button-text-editor:focus {
-  border-width: 1px;
-}
-
-.button-text-editor:active {
-  background-color: var(--color-gray-40) !important;
-}
-
-.button-text-editor.is-active {
-  background-color: var(--color-link-light);
-  color: var(--color-link);
-  border-width: 0px;
-}
-
-.button-text-editor.is-active:focus,
-.button-text-editor.is-active:hover {
-  background-color: var(--color-link-light) !important;
-  color: var(--color-link) !important;
-}
-
-.icon-active {
-  filter: invert(48%) sepia(58%) saturate(3781%) hue-rotate(195deg)
-    brightness(99%) contrast(94%);
-}
-
-.link-box-arrow {
-  display: block;
-  width: 12px;
-  height: 12px;
-  border-right: 1px solid var(--color-gray-30);
-  border-bottom: 1px solid var(--color-gray-30);
-  background-color: var(--white);
-  transform: rotate(45deg);
-  position: absolute;
-  bottom: 51px;
-  z-index: 1502;
-}
-
-.link-box-position {
-  position: absolute;
-  bottom: 57px;
-  z-index: 1500;
-}
-
-@media screen and (max-width: 400px) {
-  .wrapper-scroll {
-    overflow-x: scroll;
-  }
-}
-</style>

package/src/components/LTimeSelect/docs.vue

@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <h1>Time Select</h1>
-
-    <div class="row">
-      <l-time-select
-        v-model="value"
-        :picker-options="{
-          start: '08:30',
-          step: '00:15',
-          end: '18:30'
-        }">
-      </l-time-select>
-    </div>
-
-    <div style="margin-top: 12px">Sem ícone</div>
-    <div class="row">
-      <l-time-select
-        v-model="value2"
-        hideIcon
-        :picker-options="{
-          start: '08:30',
-          step: '00:15',
-          end: '18:30'
-        }">
-      </l-time-select>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TimeSelect",
-  data() {
-    return {
-      value: "",
-      value2: "",
-    };
-  }
-};
-</script>

package/src/components/LTimeSelect/index.vue

@@ -1,49 +0,0 @@
-<script>
-import { TimeSelect } from "element-ui";
-export default {
-  tagName: "l-time-select",
-  extends: TimeSelect,
-  props: {
-    prefixIcon: { type: String, default: () => "uil-clock" },
-    clearIcon: { type: String, default: () => "uil-multiply" },
-    hideIcon: { type: Boolean, default: () => false },
-    placeholder: { type: String, default: () => "Horário" },
-    clearable: { type: Boolean, default: () => false },
-  },
-
-  mounted() {
-    if(this.hideIcon) this.$el.classList.add("hide-icon")
-  }
-};
-</script>
-<style>
-.l-time-select.el-date-editor.el-input.hide-icon {
-  width: 80px;
-}
-.l-time-select.el-date-editor.el-input.hide-icon > .el-input__prefix {
-  display: none;
-}
-.l-time-select.el-date-editor.el-input.hide-icon .el-input__inner{
-  padding-left: 12px !important;
-  padding-right: 12px !important;
-}
-
-
-.l-time-select.el-date-editor.el-input {
-  width: 130px;
-}
-.l-time-select .el-input__prefix {
-  margin-left: 6px !important;
-  font-size: 18px !important;
-  color: var(--color-gray-70);
-}
-.l-time-select .el-input__inner {
-  padding-left: 38px !important;
-}
-
-.l-time-select .el-input__icon.el-range__icon.uil-clock {
-  font-size: 18px;
-  margin-left: -3px;
-  color: var(--color-gray-70);
-}
-</style>